/*
  Base components — BEM naming, token-driven (css/variables.css).
  Scope: components justified by reports/01-analysis-report.md §3
  (Component inventory). No speculative/unrelated components added.
*/

/* ==========================================================================
   Button
   Evidence: Login/Register CTA (filled gold primary, filled navy
   secondary), Home CTA (outline variant).
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-family: var(--font-family-base);
  font-size: var(--font-size-body-md);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn--primary:hover {
  background-color: color-mix(in srgb, var(--color-primary) 88%, black);
}

.btn--secondary {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

.btn--secondary:hover {
  background-color: color-mix(in srgb, var(--color-secondary) 88%, black);
}

.btn--outline {
  background-color: transparent;
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}

.btn--outline:hover {
  background-color: var(--color-surface-alt);
}

.btn--danger {
  background-color: var(--color-danger);
  color: var(--color-white);
}

.btn--full {
  width: 100%;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==========================================================================
   Input
   Evidence: Login/Register — label above field, rounded border, optional
   leading icon, password show/hide toggle.
   ========================================================================== */

.input {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.input__label {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  color: var(--color-business-primary);
}

.input__field-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.input__field {
  width: 100%;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body-md);
  color: var(--color-business-primary);
  background-color: var(--color-white);
  transition: border-color 0.15s ease;
}

.input__field:focus {
  outline: none;
  border-color: var(--color-primary);
}

.input__field--has-icon {
  padding-inline-start: var(--space-xl);
}

.input__icon {
  position: absolute;
  inset-inline-start: var(--space-sm);
  width: var(--icon-size-base);
  height: var(--icon-size-base);
  color: var(--color-text-muted);
  pointer-events: none;
}

.input__toggle {
  position: absolute;
  inset-inline-end: var(--space-sm);
  width: var(--icon-size-base);
  height: var(--icon-size-base);
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
}

.input--error .input__field {
  border-color: var(--color-danger);
}

.input__hint {
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}

.input--error .input__hint {
  color: var(--color-danger);
}

/* ==========================================================================
   Select / Textarea — share the input field styling
   ========================================================================== */

.select {
  width: 100%;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body-md);
  color: var(--color-business-primary);
  background-color: var(--color-white);
  appearance: none;
}

.select:focus {
  outline: none;
  border-color: var(--color-primary);
}

.textarea {
  width: 100%;
  min-height: 8rem;
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body-md);
  color: var(--color-business-primary);
  background-color: var(--color-white);
  resize: vertical;
}

.textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* ==========================================================================
   Checkbox / Radio
   ========================================================================== */

.checkbox,
.radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--font-size-body-sm);
  color: var(--color-business-primary);
  cursor: pointer;
}

.checkbox__input,
.radio__input {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.checkbox__input {
  border-radius: var(--radius-sm);
}

.radio__input {
  border-radius: var(--radius-full);
}

/* ==========================================================================
   Badge
   Evidence: Icons page "counter sticker" (small pill with number).
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-full);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  background-color: var(--color-surface-alt);
  color: var(--color-business-primary);
}

.badge--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.badge--success {
  background-color: var(--color-success);
  color: var(--color-white);
}

.badge--danger {
  background-color: var(--color-danger);
  color: var(--color-white);
}

/* ==========================================================================
   Card
   Evidence: Home feature blocks, Tab Items section (order/plan cards).
   ========================================================================== */

.card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-md);
}

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--space-sm);
}

.card__title {
  font-size: var(--font-size-heading-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-business-primary);
}

.card__body {
  font-size: var(--font-size-body-md);
  color: var(--color-business-primary);
}

.card--elevated {
  box-shadow: var(--shadow-md);
}

/* ==========================================================================
   Alert
   ========================================================================== */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-size: var(--font-size-body-sm);
  border: 1px solid transparent;
}

.alert--info {
  background-color: var(--color-surface-alt);
  border-color: var(--color-border);
  color: var(--color-business-primary);
}

.alert--success {
  background-color: color-mix(in srgb, var(--color-success) 12%, white);
  border-color: var(--color-success);
  color: var(--color-success);
}

.alert--danger {
  background-color: color-mix(in srgb, var(--color-danger) 10%, white);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

/* ==========================================================================
   Modal
   Evidence: Buy-Panel popup (large multi-step), small confirmation popups.
   ========================================================================== */

.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(10, 38, 71, 0.5);
  z-index: var(--z-modal-backdrop);
}

.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}

.modal-backdrop[data-open="true"],
.modal[data-open="true"] {
  display: flex;
}

.modal__panel {
  width: 100%;
  max-width: 32rem;
  max-height: 90vh;
  overflow-y: auto;
  background-color: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-lg);
}

.modal__panel--wide {
  max-width: 48rem;
}

@media (max-width: 480px) {
  .modal {
    padding: var(--space-sm);
  }

  .modal__panel {
    padding: var(--space-md);
  }
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--space-md);
}

.modal__title {
  font-size: var(--font-size-heading-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-business-primary);
}

.modal__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  width: var(--icon-size-base);
  height: var(--icon-size-base);
}

/* ==========================================================================
   OTP verification modal
   Evidence: screenshot-popup.png (user-confirmed reference, 2026-08-19) —
   mobile-number verification popup triggered from the Login page's
   "ورود با رمز یکبار مصرف" (OTP login) button.
   ========================================================================== */

.otp-panel {
  position: relative;
  overflow: hidden;
  text-align: center;
  max-width: 34rem;
}

.otp-panel__close {
  position: absolute;
  top: var(--space-md);
  inset-inline-end: var(--space-md);
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: none;
  cursor: pointer;
  color: var(--color-business-primary);
}

.otp-panel__icon {
  width: auto;
  height: 6rem;
  margin-inline: auto;
  margin-block-end: var(--space-sm);
}

.otp-panel__title {
  font-size: var(--font-size-heading-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-business-primary);
  margin-block-end: var(--space-2xs);
}

.otp-panel__subtitle {
  font-size: var(--font-size-body-sm);
  color: var(--color-text-muted);
  margin-block-end: var(--space-lg);
}

.otp-group {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin-block-end: var(--space-lg);
}

.otp-group__input {
  width: 3.25rem;
  height: 3.25rem;
  text-align: center;
  font-size: var(--font-size-heading-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-business-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.otp-group__input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.otp-resend {
  font-size: var(--font-size-body-sm);
  color: var(--color-text-muted);
}

.otp-resend__link {
  color: var(--color-text-muted);
  text-decoration: underline;
  pointer-events: none;
}

.otp-resend[data-resend-ready="true"] .otp-resend__link {
  color: var(--color-primary);
  pointer-events: auto;
  cursor: pointer;
}

/*
 * Mobile fix (bug-otp.png, 2026-08-19): 6 fixed 3.25rem boxes + gaps
 * (~392px) didn't fit inside the modal's padding on a 382px-wide
 * viewport, causing horizontal overflow/scroll. Shrink boxes, gap, and
 * decoration at --bp-sm and below so the row always fits without
 * scrolling, matching the "fully handled/fixed on mobile" requirement.
 */
@media (max-width: 480px) {
  .otp-panel {
    padding: var(--space-sm);
  }

  .otp-panel__icon {
    width: auto;
    height: 4rem;
  }

  .otp-group {
    gap: var(--space-3xs);
    margin-block-end: var(--space-md);
  }

  .otp-group__input {
    width: 2.25rem;
    height: 2.25rem;
    font-size: var(--font-size-body-lg);
  }
}

/* ==========================================================================
   Table
   ========================================================================== */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-body-sm);
}

.table th,
.table td {
  padding: var(--space-sm);
  text-align: start;
  border-bottom: 1px solid var(--color-border);
}

.table th {
  background-color: var(--color-surface-alt);
  font-weight: var(--font-weight-medium);
  color: var(--color-business-primary);
}

.table tbody tr:hover {
  background-color: var(--color-surface-alt);
}

.table--highlight-col td:nth-child(2),
.table--highlight-col th:nth-child(2) {
  background-color: color-mix(in srgb, var(--color-success) 12%, white);
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding-inline: var(--space-2xs);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-body-sm);
  color: var(--color-business-primary);
  cursor: pointer;
}

.pagination__item:hover {
  background-color: var(--color-surface-alt);
}

.pagination__item--active {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.pagination__item--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ==========================================================================
   Dropdown
   Evidence: WebService/Help/Topic nav dropdowns, Profile dropdown.
   ========================================================================== */

.dropdown {
  position: relative;
}

.dropdown__panel {
  display: none;
  /* position/top/left are computed and set inline by js/components/dropdown.js
     on open (position:fixed, viewport coordinates) — see that file for why. */
  width: 353px; /* CONFIRMED: consistent across WebService/Help/Contact Us/Profile dropdowns in Figma Dev Mode */
  background-color: var(--color-white);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 10%, transparent); /* CONFIRMED alpha */
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-sm);
  z-index: var(--z-dropdown);
}

.dropdown[data-open="true"] .dropdown__panel {
  display: block;
}

/*
 * Rich "info card" dropdown variant — CONFIRMED from Figma Dev Mode
 * ("Contact Us Drop Down", header-drawer.png): icon+title+subtitle
 * rows instead of a plain link list. Padding/gap/colors/alphas below
 * are copied directly from that export, not estimated.
 */
.dropdown__panel--card {
  padding: 20px;
  gap: 24px;
  display: none;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.dropdown[data-open="true"] .dropdown__panel--card {
  display: flex;
}

/* Decorative dot pattern, top-left corner (task-polish.md #1) — purely
   visual, sits behind the row content via the row's own z-index:auto
   stacking (painted first in DOM order). */
.dropdown__panel--dotted::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 71px;
  height: 64px;
  background-image: url("../assets/images/dots-fade.svg");
  background-repeat: no-repeat;
  pointer-events: none;
}

.dropdown-card__row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  transition: opacity 0.15s ease;
}

.dropdown-card__row:hover {
  opacity: 0.75;
}

.dropdown-card__row:hover .dropdown-card__icon {
  border-color: var(--color-primary);
}

.dropdown-card__row:not(:last-child) {
  padding-block-end: var(--space-md);
  border-bottom: 1px solid color-mix(in srgb, var(--color-secondary) 12%, transparent); /* CONFIRMED alpha */
}

.dropdown-card__text {
  flex: 1;
  min-width: 0;
}

.dropdown-card__title {
  font-size: var(--font-size-body-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
}

.dropdown-card__subtitle {
  font-size: var(--font-size-body-sm);
  color: color-mix(in srgb, var(--color-secondary) 72%, transparent); /* CONFIRMED alpha */
}

.dropdown-card__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid color-mix(in srgb, var(--color-secondary) 12%, transparent); /* CONFIRMED alpha */
  border-radius: var(--radius-md);
}

/*
 * Compact row variant — same visual language (icon box + divider) as
 * the confirmed تماس با ما card, applied to وب سرویس ها/راهنما per user
 * request ("همین استایل و منطق... مطابق با موضوع خودش", 2026-08-19).
 * No subtitle line: unlike تماس با ما, no subtitle copy was confirmed
 * for these items, so title-only avoids inventing text. Icon choices
 * for these two dropdowns are a reasonable topical approximation, not
 * confirmed 1:1 from Figma (only تماس با ما's exact icons were given).
 */
.dropdown-card__row--compact {
  gap: var(--space-sm);
}

.dropdown-card__row--compact .dropdown-card__icon {
  width: 2.75rem;
  height: 2.75rem;
}

.dropdown-card__row--compact .dropdown-card__icon img {
  width: 1.25rem;
  height: 1.25rem;
}

.dropdown-card__row--compact .dropdown-card__title {
  font-weight: var(--font-weight-medium);
}

.dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-body-sm);
  color: var(--color-business-primary);
  cursor: pointer;
}

.dropdown__item:hover {
  background-color: var(--color-surface-alt);
}

.dropdown__item--danger {
  color: var(--color-danger);
}

.dropdown__divider {
  height: 1px;
  background-color: var(--color-border);
  margin-block: var(--space-2xs);
}

/* ==========================================================================
   Accordion
   Evidence: FAQ page, mobile navigation drawer sub-menus.
   ========================================================================== */

.accordion__item {
  border-bottom: 1px solid var(--color-border);
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-sm) 0;
  background: none;
  border: none;
  font-size: var(--font-size-body-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-business-primary);
  cursor: pointer;
  text-align: start;
}

.accordion__icon {
  width: var(--icon-size-base);
  height: var(--icon-size-base);
  transition: transform 0.2s ease;
}

.accordion__item--open .accordion__icon {
  transform: rotate(180deg);
}

.accordion__panel {
  display: none;
  padding-block-end: var(--space-sm);
  font-size: var(--font-size-body-sm);
  color: var(--color-text-muted);
}

.accordion__item--open .accordion__panel {
  display: block;
}

/* ==========================================================================
   Header
   Evidence: reused shell on ~20 of ~24 desktop screens. Rebuilt
   2026-08-19 from Header-Ok.png + ok-header-mobile.png (user-confirmed
   references) and real Figma Dev Mode CSS for "Frame 9" (the card) and
   "Frame 427322469" (the mobile menu trigger) — see components/header.html.

   Structure: a floating white rounded card (not edge-to-edge) containing
   a primary row (logo, nav, actions) and, desktop-only, a secondary gray
   utility row (quick links + phone block). Mobile collapses to a single
   row: hamburger (rightmost) — logo — avatar (leftmost). No DOM
   reordering is needed between breakpoints: the hamburger trigger and
   nav-list/secondary-row/charge-button are simply hidden per breakpoint,
   which naturally makes the logo the rightmost *visible* element on
   desktop and the hamburger the rightmost on mobile (RTL: first DOM
   child = rightmost, and hidden elements don't occupy that slot).
   ========================================================================== */

.header {
  position: relative;
  z-index: var(--z-header);
  padding-block-start: var(--space-md); /* CONFIRMED: Figma "top: 24px" = --space-md exactly */
}

.header__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-header-padding);
  padding: var(--space-header-padding);
  background-color: var(--color-white);
  border: 1px solid var(--color-header-border);
  border-radius: var(--radius-lg); /* CONFIRMED: Figma "border-radius: 16px" = --radius-lg exactly */
}

.header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.header__brand-group {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  min-width: 0;
}

.header__nav-list {
  display: none;
  align-items: center;
  gap: var(--space-md);
}

.header__nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--font-size-body-sm);
  color: var(--color-business-primary);
  border-radius: var(--radius-sm);
  padding: var(--space-3xs) var(--space-2xs);
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.header__nav-link:hover {
  color: var(--color-primary);
  background-color: var(--color-surface-alt);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.header__charge-btn {
  display: none;
}

.header__avatar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  min-height: 2.5rem;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background-color: var(--color-primary);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.header__avatar-btn:hover {
  background-color: color-mix(in srgb, var(--color-primary) 88%, black);
}

/*
 * Guest vs. authenticated header avatar — session state is a
 * data-session attribute on <body> (set by js/components/session.js;
 * default/absent = guest). Backend integration only needs to change how
 * that attribute gets set — this CSS and the markup stay the same.
 */
[data-authed-only] {
  display: none;
}

body[data-session="active"] [data-authed-only] {
  display: flex;
}

body[data-session="active"] [data-guest-only] {
  display: none;
}

.header__avatar-btn img {
  width: 1.25rem;
  height: 1.25rem;
}

/* Mobile menu trigger — CONFIRMED: Figma "Frame 427322469"
   (40x40, background rgba(16,46,80,0.05), border-radius:10px) */
.header__menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  min-height: 2.5rem;
  flex-shrink: 0;
  padding: 0;
  background-color: rgba(16, 46, 80, 0.05);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.header__menu-trigger:hover {
  background-color: rgba(16, 46, 80, 0.1);
}

.header__row--secondary {
  display: none;
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
}

.header__secondary-links {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.header__secondary-links li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.header__secondary-links li:not(:last-child)::after {
  content: "";
  width: 1px;
  height: 0.875rem;
  background-color: var(--color-border);
}

.header__secondary-link {
  font-size: var(--font-size-body-sm);
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  transition: color 0.15s ease;
}

.header__secondary-link:hover {
  color: var(--color-primary);
}

.header__phone-block {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.header__phone-block img {
  width: 1.25rem;
  height: 1.25rem;
}

.header__phone-number {
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-business-primary);
}

/*
 * Bumped from 1025px to --bp-xl (1280px), 2026-08-19 (BUG-HEADER-DROPDOWN.png):
 * the full desktop nav (5 items, 2 of them multi-word dropdowns) plus the
 * charge button and avatar need ~1070-1150px of row content alone, before
 * the header card's own 20px padding and the container's 80px gutter.
 * Showing it any earlier caused the row to wrap under space pressure,
 * which then visually collided with any open dropdown (dropdowns are
 * position:absolute relative to their own trigger, so a wrapped second
 * line rendered underneath/through an open panel). Below this width the
 * mobile hamburger drawer (already solid) is used instead — better to
 * switch a bit earlier than to run a cramped, wrap-prone desktop nav.
 */
@media (min-width: 1280px) {
  .header__nav-list {
    display: flex;
  }

  .header__charge-btn {
    display: inline-flex;
  }

  .header__menu-trigger {
    display: none;
  }

  .header__row--secondary {
    display: flex;
  }
}

/* ==========================================================================
   Sidebar (mobile navigation drawer)
   Evidence: off-canvas drawer with accordion sub-menus, confirmed as one
   reusable component from 23 "Menu" state screenshots in Phase 1.
   Rebuilt 2026-08-19 from humburger-menu-ok.png (user-confirmed): full-
   viewport navy backdrop (header stays visible above it, see .header's
   --z-header), a floating white menu card (not edge-to-edge, not a
   traditional slide-from-side panel), and a separate charge button
   below the card — not inside it.
   ========================================================================== */

.sidebar {
  display: none;
  flex-direction: column;
  position: fixed;
  inset: 0;
  top: 6.6rem; /* fallback only — js/components/mobile-drawer.js sets the real value from the header's measured height on every open */
  z-index: var(--z-drawer);
  background-color: var(--color-business-primary);
  overflow-y: auto;
  padding: var(--space-md);
}

.sidebar[data-open="true"] {
  display: flex;
}

.sidebar__close {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-block-end: var(--space-sm);
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-full);
  cursor: pointer;
}

.sidebar__close img {
  filter: brightness(0) invert(1); /* recolor the navy stroke icon to white for this dark backdrop */
}

.sidebar__panel {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-sm);
}

.sidebar__menu {
  display: flex;
  flex-direction: column;
}

.sidebar__item {
  padding: var(--space-sm);
  font-size: var(--font-size-body-sm);
  color: var(--color-business-primary);
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease;
}

.sidebar__item:hover {
  background-color: var(--color-surface-alt);
}

.sidebar__item--active {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}

/* Accordion groups reused inside the sidebar need horizontal padding
   (the base .accordion__trigger has none — it's designed for the FAQ
   page's own content padding) and the expanded sub-item group needs the
   light-gray "grouped" background confirmed in the reference screenshot. */
.sidebar__panel .accordion__trigger {
  padding-inline: var(--space-sm);
  border-radius: var(--radius-sm);
}

.sidebar__panel .accordion__trigger:hover {
  background-color: var(--color-surface-alt);
}

.sidebar__panel .accordion__panel {
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: var(--space-2xs);
  margin-block-end: var(--space-2xs);
}

.sidebar__panel .accordion__panel .sidebar__item {
  padding: var(--space-xs) var(--space-sm);
}

.sidebar__charge-wrap {
  margin-block-start: var(--space-md);
  flex-shrink: 0;
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-sm);
}

.sidebar__charge-btn {
  width: 100%;
}

/* ==========================================================================
   Footer
   Evidence: brand block, link columns, trust/award badges, socials —
   present on every public page. See components/footer.html.
   ========================================================================== */

.footer {
  background-color: var(--color-surface-alt);
  padding-block: var(--space-2xl);
}

.footer__card {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2.5rem; /* CONFIRMED — Figma gap:40px */
  padding: 3.5rem; /* CONFIRMED — Figma padding:56px */
  background-color: var(--color-white);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 10%, transparent);
  border-radius: var(--radius-lg);
}

@media (max-width: 768px) {
  .footer__card {
    padding: var(--space-lg);
  }
}

.footer__highlight {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  width: 100%;
  padding: 1.25rem 2rem 1.25rem 1.25rem; /* CONFIRMED — Figma 20px 32px 20px 20px */
  background-color: color-mix(in srgb, var(--color-secondary) 5%, transparent);
  border-radius: var(--radius-lg);
}

.footer__logo {
  flex-shrink: 0;
}

.footer__highlight-divider {
  flex-shrink: 0;
  width: 1px;
  height: 3.25rem; /* CONFIRMED — Figma height:52px */
  background-color: color-mix(in srgb, var(--color-secondary) 20%, transparent);
}

.footer__highlight-desc {
  flex: 1;
  font-size: var(--font-size-body-md);
  line-height: 2.25;
  color: color-mix(in srgb, var(--color-secondary) 56%, transparent);
  text-align: end;
}

.footer__contact {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-sm);
  width: 17.9375rem; /* CONFIRMED — Figma width:287px */
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-white);
  border-radius: var(--radius-md);
}

.footer__contact-text {
  text-align: end;
}

.footer__contact-value {
  font-size: var(--font-size-heading-md);
  font-weight: 600; /* CONFIRMED */
  color: var(--color-secondary);
}

.footer__contact-label {
  margin-block-start: var(--space-3xs);
  font-size: var(--font-size-body-md);
  color: color-mix(in srgb, var(--color-secondary) 48%, transparent);
}

.footer__contact-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem; /* CONFIRMED — Figma width:56px */
  height: 3.5rem;
  border: 1px solid color-mix(in srgb, var(--color-secondary) 10%, transparent);
  border-radius: var(--radius-md);
}

@media (max-width: 768px) {
  .footer__highlight {
    flex-direction: column;
    align-items: flex-end;
  }

  .footer__highlight-divider {
    display: none;
  }

  .footer__contact {
    width: 100%;
  }
}

.footer__columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem; /* CONFIRMED — Figma gap:20px */
  width: 100%;
}

@media (max-width: 1024px) {
  .footer__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
  }
}

@media (max-width: 480px) {
  .footer__columns {
    grid-template-columns: 1fr;
  }
}

.footer__column {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.25rem; /* CONFIRMED — Figma gap:20px */
  text-align: end;
}

.footer__column-title {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--font-size-body-lg);
  font-weight: 600; /* CONFIRMED */
  color: var(--color-primary);
}

.footer__tick {
  flex-shrink: 0;
  width: 1.5rem; /* CONFIRMED — Figma width:24px */
  height: 7px;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
}

.footer__link {
  font-size: var(--font-size-body-md);
  line-height: 1.875;
  color: color-mix(in srgb, var(--color-secondary) 72%, transparent);
}

.footer__support-text {
  font-size: var(--font-size-body-md);
  line-height: 1.875;
  color: color-mix(in srgb, var(--color-secondary) 72%, transparent);
  text-align: end;
}

.footer__divider {
  width: 100%;
  height: 1px;
  background-color: color-mix(in srgb, var(--color-secondary) 12%, transparent);
}

.footer__badges {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  width: 100%;
  flex-wrap: wrap;
}

.footer__badge {
  height: 5.5rem;
  width: auto;
  filter: grayscale(1);
  opacity: 0.32;
}

.footer__badge--accent {
  filter: none;
  opacity: 1;
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xl);
  width: 100%;
  padding: var(--space-sm) var(--space-lg) var(--space-sm) var(--space-sm);
  background-color: color-mix(in srgb, var(--color-secondary) 5%, transparent);
  border-radius: var(--radius-lg);
}

.footer__copyright {
  flex: 1;
  font-size: var(--font-size-body-md);
  color: var(--color-secondary);
  text-align: end;
}

.footer__socials {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-xs);
}

.footer__social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background-color: color-mix(in srgb, var(--color-secondary) 8%, transparent);
  border-radius: var(--radius-md);
}

.footer__totop {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding-inline: var(--space-sm);
  height: 3rem;
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  font-size: var(--font-size-body-md);
  color: var(--color-secondary);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .footer__bottom {
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-sm);
  }
}