/* AgentAUX Web - core styles. Brand palette pulled from the Android app's colors.xml */
:root {
  --aax-primary: #e77817;
  --aax-primary-dark: #000000;
  --aax-primary-600: #fa8100;
  --aax-primary-300: #ffaf49;
  --aax-primary-200: #ffc77d;
  --aax-primary-50: #fff3e0;
  --aax-accent: #b71c1c;
  --aax-bg: #fff3e0;
  --aax-text-title: #1a1a1a;
  --aax-text-sub: #707070;
  --aax-text-default: #808080;
  --aax-grey-50: #f0f0f0;
  --aax-grey-100: #f5f5f5;
  --aax-grey-300: #e0e0e0;
  --aax-grey-400: #9e9e9e;
  --aax-dark: #1c1c1c;
  --aax-success: #1ec577;
  --aax-danger: #f55625;
  --aax-pending: #ffb300;
  --aax-radius: 14px;
  --aax-radius-sm: 8px;
  --aax-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  --aax-shadow-hover: 0 10px 24px rgba(231, 120, 23, 0.22);
}

* {
  box-sizing: border-box;
}

body {
  background-color: var(--aax-bg);
  color: var(--aax-text-title);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  min-height: 100vh;
}

a {
  text-decoration: none;
}

/* ---------- Gradient toolbar ---------- */
.aax-toolbar {
  background: linear-gradient(135deg, var(--aax-primary) 0%, var(--aax-primary-600) 55%, var(--aax-accent) 130%);
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  padding: 0.65rem 1rem;
  position: sticky;
  top: 0;
  z-index: 1030;
}

.aax-toolbar .aax-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  font-weight: 600;
  font-size: 1.1rem;
  /* Flex items default to min-width:auto (won't shrink below content's
     intrinsic width) — without this, a long title (see the span rule below)
     can force the whole toolbar row wider than the viewport instead of
     truncating. */
  min-width: 0;
}

.aax-toolbar .aax-brand img {
  height: 32px;
}

/* Some pages set this span's text dynamically (e.g. policy-list.html's
   #companyTitle, filled from the selected company's real name in
   js/policy.js) — that name can run long, so truncate instead of letting it
   push the toolbar (and page) wider than the viewport on narrow phones.
   Harmless on pages with short static titles (e.g. dashboard.html's
   "AgentAUX"), which never reach the ellipsis. */
.aax-toolbar .aax-brand span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aax-toolbar .aax-toolbar-subtitle {
  font-size: 0.72rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1;
}

.aax-toolbar .btn-icon {
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.aax-toolbar .btn-icon:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* ---------- Auth screens ---------- */
.aax-auth-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: radial-gradient(circle at top left, var(--aax-primary-200) 0%, var(--aax-bg) 55%);
}

.aax-auth-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: var(--aax-radius);
  box-shadow: var(--aax-shadow);
  padding: 2.25rem 2rem;
}

.aax-auth-card .aax-logo {
  display: block;
  margin: 0 auto 1.25rem;
  height: 56px;
}

.aax-auth-card h1 {
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 0.25rem;
}

.aax-auth-card .aax-subtitle {
  text-align: center;
  color: var(--aax-text-sub);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

.aax-auth-card .aax-subtitle.aax-otp-subtitle {
  margin-bottom: 0.5rem;
}

.aax-otp-destinations {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  color: var(--aax-text-title);
}

.form-control,
.form-select {
  border-radius: var(--aax-radius-sm);
  border: 1px solid var(--aax-grey-300);
  padding: 0.65rem 0.9rem;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--aax-primary);
  box-shadow: 0 0 0 0.2rem rgba(231, 120, 23, 0.18);
}

.btn-aax-primary {
  background: linear-gradient(135deg, var(--aax-primary) 0%, var(--aax-primary-600) 100%);
  border: none;
  color: #fff;
  font-weight: 600;
  border-radius: var(--aax-radius-sm);
  padding: 0.65rem 1rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-aax-primary:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--aax-shadow-hover);
}

.btn-aax-outline {
  background: #fff;
  border: 1.5px solid var(--aax-primary);
  color: var(--aax-primary);
  font-weight: 600;
  border-radius: var(--aax-radius-sm);
  padding: 0.6rem 1rem;
}

.btn-aax-outline:hover {
  background: var(--aax-primary-50);
  color: var(--aax-primary-600);
}

.aax-auth-links {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  margin-top: 0.75rem;
}

.aax-auth-links a {
  color: var(--aax-primary);
  font-weight: 500;
}

.aax-auth-footer {
  text-align: center;
  margin-top: 1.25rem;
  font-size: 0.9rem;
  color: var(--aax-text-sub);
}

/* ---------- Login method tabs (OTP vs Password) ---------- */
.aax-auth-tabs {
  display: flex;
  gap: 0.5rem;
  background: var(--aax-grey-100, #f1f3f5);
  border-radius: var(--aax-radius-sm);
  padding: 0.3rem;
  margin-bottom: 1.5rem;
}

.aax-auth-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0.5rem 0.75rem;
  border-radius: var(--aax-radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--aax-text-sub);
}

.aax-auth-tab.is-active {
  background: #fff;
  color: var(--aax-primary);
  box-shadow: var(--aax-shadow);
}

.aax-password-hint {
  font-size: 0.8rem;
  color: var(--aax-text-sub);
  margin: 0.35rem 0 1rem;
}

.aax-password-requirements {
  list-style: none;
  margin: 0.35rem 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.aax-requirement {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--aax-text-sub);
}

.aax-requirement svg {
  flex: none;
  color: var(--aax-grey-400);
}

.aax-requirement.is-met {
  color: var(--aax-success);
}

.aax-requirement.is-met svg {
  color: var(--aax-success);
}

.aax-auth-step {
  display: none;
}

.aax-auth-step.is-active {
  display: block;
}

/* ---------- OTP boxes ---------- */
.aax-otp-boxes {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  margin: 1.25rem 0;
}

.aax-otp-boxes input {
  width: 46px;
  height: 52px;
  text-align: center;
  font-size: 1.3rem;
  font-weight: 700;
  border-radius: var(--aax-radius-sm);
  border: 1.5px solid var(--aax-grey-300);
}

.aax-otp-boxes input:focus {
  border-color: var(--aax-primary);
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(231, 120, 23, 0.18);
}

.aax-otp-timer {
  text-align: center;
  font-size: 0.9rem;
  color: var(--aax-text-sub);
  margin-bottom: 0.75rem;
}

.aax-otp-timer .aax-resend {
  color: var(--aax-primary);
  font-weight: 600;
  cursor: pointer;
}

.aax-otp-timer .aax-resend.disabled {
  color: var(--aax-grey-400);
  cursor: not-allowed;
}

.aax-otp-resend-highlight {
  color: var(--aax-primary-600);
  font-weight: 700;
}

/* ---------- Verify + create-password screens (reset-password.html, create-password.html) ---------- */
.aax-auth-card.is-wide {
  max-width: 640px;
}

.aax-auth-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.aax-auth-header-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--aax-primary-50);
  color: var(--aax-primary-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.aax-auth-header h1 {
  font-size: 1.35rem;
  text-align: left;
  margin-bottom: 0.2rem;
}

.aax-auth-header .aax-subtitle {
  text-align: left;
  margin-bottom: 0;
}

.aax-step-divider {
  border: none;
  border-top: 1px solid var(--aax-grey-300);
  margin: 1.5rem 0;
}

.aax-step-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}

.aax-step-number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--aax-primary-600);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.aax-step-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--aax-text-title);
  margin: 0 0 0.2rem;
}

.aax-step-desc {
  font-size: 0.85rem;
  color: var(--aax-text-sub);
  margin: 0;
}

.aax-verify-destinations {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  background: var(--aax-primary-50);
  border-radius: var(--aax-radius);
  padding: 0.85rem 1rem;
  margin-bottom: 1.25rem;
}

.aax-verify-destination {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 180px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--aax-text-title);
}

.aax-verify-destination-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  color: var(--aax-primary-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.aax-otp-resend-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.aax-otp-resend-btn.is-whatsapp {
  border-color: var(--aax-success);
  color: var(--aax-success);
}

.aax-otp-resend-btn.is-whatsapp:hover {
  background: rgba(30, 197, 119, 0.08);
}

.aax-requirements-box {
  background: rgba(30, 197, 119, 0.08);
  border-radius: var(--aax-radius);
  padding: 0.9rem 1rem;
  margin-bottom: 1.25rem;
}

.aax-requirements-box .aax-password-requirements {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 1rem;
  margin: 0;
}

@media (max-width: 480px) {
  .aax-requirements-box .aax-password-requirements {
    grid-template-columns: 1fr;
  }
}

.aax-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* ---------- Search bar ---------- */
.aax-search-wrap {
  background: #fff;
  border-radius: 999px;
  box-shadow: var(--aax-shadow);
  padding: 0.55rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1rem 0 1.5rem;
}

.aax-search-wrap i {
  color: var(--aax-text-sub);
}

.aax-search-icon {
  color: var(--aax-text-sub);
  flex-shrink: 0;
}

.aax-search-wrap input {
  border: none;
  outline: none;
  flex: 1;
  background: transparent;
  font-size: 0.95rem;
}

/* ---------- Sticky header + search region (Dashboard) ---------- */
.aax-sticky-top {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--aax-bg);
}

.aax-search-region {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0.75rem 1.5rem;
}

.aax-search-region .aax-search-wrap {
  margin: 0;
  width: 100%;
}

/* ---------- Banner slider (slideshow + side-scroll, up to ~5 slides) ---------- */
.aax-banner-slider {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--aax-shadow);
  margin: 0 0 1.5rem;
  background: #fff;
  max-height: 500px;
}

.aax-banner-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.aax-banner-track::-webkit-scrollbar {
  display: none;
}

.aax-banner-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  line-height: 0;
}

.aax-banner-slide img {
  display: block;
  width: 100%;
  height: auto;
}

.aax-banner-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0;
}

.aax-banner-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--aax-primary);
  padding: 0;
  background: #fff;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.aax-banner-dot.active {
  background: var(--aax-primary);
  box-shadow: 0 0 0 2px #fff inset;
  transform: scale(1.1);
}

/* ---------- Dashboard company grid ---------- */
/* 1200px was too narrow against typical large-monitor widths — on the
   dashboard especially, that cap centers this column a second time inside
   the already-narrower space next to the persistent sidebar, producing a
   big empty gutter on both sides of the actual content. 1600px keeps the
   same centered, capped-width layout (avoids absurdly long grid rows on
   ultrawide displays) while closing that gap on ordinary large screens. */
.aax-page-body {
  padding: 1.25rem 1rem 3rem;
  max-width: 1600px;
  margin: 0 auto;
}

.aax-company-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}

.aax-company-card {
  background: #fff;
  border-radius: var(--aax-radius);
  box-shadow: var(--aax-shadow);
  padding: 1rem 0.75rem;
  text-align: center;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
}

.aax-company-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--aax-shadow-hover);
  border-color: var(--aax-primary-200);
}

.aax-company-card .aax-company-logo {
  height: 56px;
  width: 100%;
  object-fit: contain;
  margin-bottom: 0.6rem;
}

.aax-company-card .aax-company-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--aax-text-title);
  line-height: 1.25;
}

/* Ripple effect */
.aax-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: aax-ripple-anim 0.6s ease-out;
  background: rgba(231, 120, 23, 0.25);
  pointer-events: none;
}

@keyframes aax-ripple-anim {
  to {
    transform: scale(3.2);
    opacity: 0;
  }
}

/* ---------- Policy list ---------- */
.aax-policy-card {
  background: #fff;
  border-radius: var(--aax-radius-sm);
  box-shadow: var(--aax-shadow);
  padding: 0.9rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.aax-policy-card:hover {
  transform: translateX(4px);
  box-shadow: var(--aax-shadow-hover);
}

.aax-policy-card .aax-policy-name {
  font-weight: 600;
  color: var(--aax-text-title);
}

.aax-policy-card .aax-arrow {
  color: var(--aax-primary);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
}

.aax-policy-info-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--aax-primary);
  background: transparent;
  color: var(--aax-primary);
  font-size: 0.75rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex: none;
}

.aax-policy-info-btn:hover {
  background: var(--aax-primary);
  color: #fff;
}

.aax-benefit-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--aax-border-color, #e2e2e5);
}

.aax-benefit-table td {
  padding: 1rem 1.25rem;
  vertical-align: top;
  border-bottom: 1px solid var(--aax-border-color, #e2e2e5);
}

.aax-benefit-row:last-child td {
  border-bottom: none;
}

.aax-benefit-label {
  background: #f7f7f8;
  color: var(--aax-primary);
  font-weight: 700;
  width: 28%;
  white-space: normal;
}

.aax-benefit-content ul {
  margin: 0;
  padding-left: 1.2rem;
}

.aax-benefit-content li {
  margin-bottom: 0.35rem;
}

.aax-benefit-content > *:first-child {
  margin-top: 0;
}

.aax-benefit-content > *:last-child {
  margin-bottom: 0;
}

.aax-benefit-subhead {
  color: var(--aax-primary);
  font-weight: 700;
  margin-top: 0.75rem;
  margin-bottom: 0.15rem;
}

.aax-coming-soon-pane {
  text-align: center;
  padding: 3.5rem 1rem;
  color: var(--aax-text-sub);
}

.aax-coming-soon-pane i {
  font-size: 3rem;
  color: var(--aax-primary-200);
  margin-bottom: 1rem;
}

/* ---------- Calculator ---------- */
.aax-calc-card {
  background: #fff;
  border-radius: var(--aax-radius);
  box-shadow: var(--aax-shadow);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.aax-calc-card h6 {
  font-weight: 700;
  color: var(--aax-primary-600);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  margin-bottom: 1rem;
}

/* Optional cover dropdowns read better as an underline than a boxed select —
   swap the default bordered/rounded look for a plain bottom-line one. */
.aax-line-select {
  border: none;
  border-bottom: 1.5px solid var(--aax-grey-300);
  border-radius: 0;
  background: transparent;
  padding: 0.5rem 1.5rem 0.5rem 0;
}

.aax-line-select:focus {
  border-color: var(--aax-primary);
  box-shadow: none;
}

/* Keeps checkbox cells on the same label-height baseline as the select
   cells they're paired with in the two-column optional-covers grid, so
   rows line up regardless of which control type lands on which side. */
.aax-cover-spacer {
  visibility: hidden;
}

.aax-cover-check {
  padding-top: 0.5rem;
}

/* Small pill next to an optional cover's label showing its real (+)/(-) rate
   from the last calculation (see coverRateBadgeHtml in calculator.js) — a
   bracket-style callout rather than plain inline text so it reads as a
   distinct data point, not part of the label. Sized and weighted up from the
   original micro-pill (0.72rem/800) since most users on this screen are
   older and were missing it at a glance — max font-weight plus a visibly
   larger size and letter-spacing, without changing the pill's padding/shape
   rhythm or any of the layout it sits in (accordion header, custom-select
   trigger/option all just treat it as a fixed-size flex item, so growing the
   text alone doesn't break those). */
.aax-cover-rate {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.15rem 0.55rem;
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 0.01em;
  border-radius: 999px;
  /* A little brighter/more saturated than the near-white var(--aax-primary-50)
     this used to sit on, so the badge reads as a distinct, eye-catching data
     point rather than blending into the card background. */
  background: rgba(250, 129, 0, 0.16);
  color: var(--aax-primary-600);
  border: 1px solid var(--aax-primary-300);
  white-space: nowrap;
  vertical-align: middle;
}

.aax-cover-rate.aax-cover-rate-save {
  background: rgba(30, 197, 119, 0.18);
  color: var(--aax-success);
  border-color: rgba(30, 197, 119, 0.55);
}

/* Shown instead of a "0" rate when a combination genuinely has no rate
   configured for it (see NO_RATE in calculator.js) — neutral/muted so it
   reads as "unavailable", not as a real amount. Weight matches the base
   pill (900) so it stays just as legible; italic is what keeps it reading
   as "unavailable" rather than a real amount, not a lighter weight. */
.aax-cover-rate.aax-cover-rate-na {
  background: transparent;
  color: var(--aax-text-sub);
  border-color: var(--aax-border-color, #ddd);
  font-weight: 900;
  font-style: italic;
}

/* Expand/collapse chevron that reveals a cover/discount's description box
   (see descriptionPanelHtml/wireDescriptionToggles in calculator.js). */
.aax-desc-toggle {
  flex-shrink: 0;
  align-self: center;
  border: none;
  background: none;
  padding: 0;
  margin-left: 0.4rem;
  font-size: 0.7rem;
  line-height: 1;
  color: var(--aax-primary-600);
  cursor: pointer;
}

.aax-desc-toggle:hover,
.aax-desc-toggle:focus-visible {
  color: var(--aax-primary-dark);
}

.aax-cover-desc {
  margin-top: 0.3rem;
}

.aax-cover-desc-box {
  background: var(--aax-primary-50);
  border: 1px solid var(--aax-primary-200);
  border-radius: var(--aax-radius-sm);
  padding: 0.6rem 0.85rem;
  font-size: 0.82rem;
  color: var(--aax-text-sub);
}

/* Repeats the cover/discount's own name above its draft blurb — needed
   because two of these boxes (one per column) can be open and stacked at
   once, and without a title they're indistinguishable at a glance. */
.aax-cover-desc-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--aax-text-title);
  margin-bottom: 0.15rem;
}

/* Custom dropdown layered over a subtype cover/discount's real <select> (see
   customSelectWrapHtml/refreshCustomSelect in calculator.js) — a plain
   <option> can't hold styled markup, so this is what lets a rate show as a
   real colored badge both on the closed trigger and inside the open list.
   The underlying <select> stays functionally in charge (same value/change
   events every collector reads) but is visually hidden underneath. */
.aax-custom-select {
  position: relative;
}

.aax-custom-select > select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.aax-custom-select-trigger {
  /* Reset native <button> chrome (Safari in particular keeps its own
     appearance/alignment opinions on buttons even once display:flex is
     set) before laying it out as a flex row. */
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--aax-grey-300);
  border-radius: 0;
  padding: 0.5rem 0.25rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--aax-text-title);
  text-align: left;
  cursor: pointer;
}

.aax-custom-select-trigger:focus-visible,
.aax-custom-select-trigger[aria-expanded="true"] {
  outline: none;
  border-color: var(--aax-primary);
}

.aax-custom-select-trigger::after {
  content: "";
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  margin-left: 0.25rem;
  border-right: 1.5px solid var(--aax-grey-400);
  border-bottom: 1.5px solid var(--aax-grey-400);
  transform: rotate(45deg);
}

.aax-custom-select-value {
  /* Explicitly grow to fill all the space the chevron/badge don't need and
     pin its own text to that space's left edge — deterministic regardless
     of how a given engine treats the ::after chevron as a flex item, rather
     than relying on justify-content:space-between alone to push it there. */
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
}

.aax-custom-select-trigger .aax-cover-rate {
  flex: none;
}

.aax-custom-select-menu {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.25rem;
  background: #fff;
  border: 1px solid var(--aax-grey-300);
  border-radius: var(--aax-radius-sm);
  box-shadow: var(--aax-shadow-hover);
  max-height: 220px;
  overflow-y: auto;
  padding: 0.25rem;
  list-style: none;
}

.aax-custom-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border-radius: var(--aax-radius-sm);
  font-size: 0.85rem;
  color: var(--aax-text-title);
  cursor: pointer;
}

.aax-custom-select-option:hover {
  background: var(--aax-primary-50);
}

.aax-custom-select-option-active {
  background: var(--aax-primary-50);
  font-weight: 600;
}

.aax-custom-select-option .aax-cover-rate {
  flex: none;
  margin-left: 0.75rem;
}

/* Matches the smaller sizing of member-card fields (form-select-sm) — the
   wrapped <select> already carries that class, so key off it instead of
   threading a second "is this the compact variant" flag through the JS. */
.aax-custom-select:has(> select.form-select-sm) .aax-custom-select-trigger {
  padding: 0.35rem 0.25rem;
  font-size: 0.82rem;
}

.aax-custom-select:has(> select.form-select-sm) .aax-custom-select-option {
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
}

/* ---------- Optional covers & Discounts accordion ---------- */
/* One card per benefit/discount, one open at a time per list (see
   coverAccordionItemHtml / wireCoverAccordion in calculator.js). Shared by
   both the Optional Covers and Discounts cards. */
/* Flexbox rather than CSS Grid on purpose: an item's expanded/collapsed
   height here changes live via a class toggle (see wireCoverAccordion), not a
   fresh render — flex reflows on every browser reliably for that kind of
   dynamic change, where Grid's auto-placement can lag a frame behind on some
   engines and let a neighbour visually overlap ("cross") the newly-expanded
   card until something else forces a repaint. */
/* Two independent sub-columns (aax-cover-acc-col, built round-robin by
   coverAccGridHtml in calculator.js), NOT a single flex-wrap row of paired
   items. A wrapped flex row's line height is pinned to its tallest member,
   so pairing items row-by-row meant expanding one item forced its row-mate's
   box to match that height too — leaving dead white space under the shorter
   sibling. Splitting into two self-contained flex columns removes the
   "shared row" entirely: each column's height is just its own items
   stacked, so expanding an item only pushes items already below it in its
   OWN column. */
.aax-cover-acc {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.aax-cover-acc-col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1 1 calc(50% - 0.375rem);
  /* Flex items default to min-width:auto (won't shrink below their content's
     intrinsic width) — without this, a wide inner control can force the
     column past its half-row share and visually overflow into the other. */
  min-width: 0;
}

.aax-cover-acc-item {
  width: 100%;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--aax-grey-100);
  border-radius: var(--aax-radius-sm);
  /* visible (not hidden) so an open card's dropdown menu — an absolutely
     positioned child of .aax-custom-select-menu — can overflow past the
     card's own bounds instead of being clipped by them. */
  overflow: visible;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

@media (max-width: 575.98px) {
  .aax-cover-acc {
    flex-direction: column;
    /* align-items:flex-start above (set for the row layout, where it
       governs each column's *height* so an expanded card doesn't force its
       sibling to match — see the comment on .aax-cover-acc-col) now governs
       the cross axis once flex-direction flips to column, i.e. *width*.
       Left as flex-start, cards would shrink-to-fit their content instead
       of filling the stacked column, risking overflow in a header whose
       icon/rate-badge/checkbox are all flex-shrink:0. Stretch keeps every
       card full-width like the rest of the app's mobile cards. */
    align-items: stretch;
  }

  .aax-cover-acc-col {
    /* The row layout's 50% share (see .aax-cover-acc-col above) no longer
       means anything once stacked into one column — let it size to its own
       content instead of trying to claim half of a now-vertical axis. */
    flex: 1 1 auto;
  }
}

.aax-cover-acc-item.expanded {
  background: var(--aax-primary-50);
  border-color: var(--aax-primary);
  box-shadow: var(--aax-shadow);
}

/* "Selected" = this cover/discount is actually turned on (checkbox checked,
   or a dropdown option other than "None" chosen) — independent of
   .expanded, which only tracks the accordion's open/closed state. Uses
   green (matches the existing savings/success colour) rather than the
   primary orange already used for .expanded, so a collapsed-but-selected
   card still reads as distinct from an expanded-but-unselected one. Left
   accent border + faint header tint so the state is visible without
   opening the card. */
.aax-cover-acc-item.selected {
  border-left: 3px solid var(--aax-success);
}

.aax-cover-acc-item.selected .aax-cover-acc-header {
  background: rgba(30, 197, 119, 0.06);
}

.aax-cover-acc-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
  padding: 0.8rem 0.85rem;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}

/* Rate badge sits as its own fixed-size item right after the info icon
   (i.e. "near the collapse control") instead of flowing immediately after
   variable-length title text — keeps it at a consistent position across
   rows and stops long titles + badge from overflowing the card. */
.aax-cover-acc-header .aax-cover-rate {
  flex-shrink: 0;
  margin-left: 0;
}

.aax-cover-acc-icon-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.aax-cover-acc-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--aax-primary-50);
  color: var(--aax-primary-600);
}

/* Small checkmark badge overlaid on the icon — the "this is selected" tell
   that stays visible whether the card is expanded or collapsed, unlike the
   rate badge (which is only a price preview and shows for unselected items
   too, see coverRateFor). Toggled instantly on change via
   syncCoverAccSelectedState, no re-render needed. */
.aax-cover-acc-selected-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--aax-success);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}

.aax-cover-acc-icon-teal {
  background: rgba(30, 197, 119, 0.14);
  color: var(--aax-success);
}

.aax-cover-acc-icon-purple {
  background: rgba(147, 51, 234, 0.14);
  color: #9333ea;
}

.aax-cover-acc-icon-blue {
  background: rgba(22, 144, 168, 0.14);
  color: #1690a8;
}

.aax-cover-acc-icon-green {
  background: rgba(34, 160, 107, 0.14);
  color: #22a06b;
}

.aax-cover-acc-icon-pink {
  background: rgba(239, 77, 120, 0.14);
  color: #ef4d78;
}

/* The one flexible header child — everything else (icon, badge, info,
   chevron) is flex-shrink:0, so this is what actually gives way (via
   ellipsis) when a title is too long for the card. */
.aax-cover-acc-title-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--aax-text-title);
}

/* Always laid out (display stays inline-flex) and only its *visibility*
   toggles with .expanded — not display:none/inline-flex like before. That
   old approach removed the icon from flow entirely while collapsed, which
   meant an expanded card's rate badge (and its trailing control) sat one
   icon-width + gap further left than every collapsed card's rate badge in
   the same column — a visible misalignment between rows. Reserving the
   space unconditionally keeps every row's rate badge at the same offset
   regardless of expand state. visibility:hidden still drops the icon from
   the accessibility tree while hidden, same as display:none did, and it
   has no click handler, so this is a pure layout fix with no behavior
   change. */
.aax-cover-acc-info {
  flex-shrink: 0;
  display: inline-flex;
  visibility: hidden;
  color: var(--aax-text-sub);
}

.aax-cover-acc-item.expanded .aax-cover-acc-info {
  visibility: visible;
}

.aax-cover-acc-chevron {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--aax-text-sub);
}

.aax-cover-acc-chevron svg {
  transition: transform 0.2s ease;
}

.aax-cover-acc-item.expanded .aax-cover-acc-chevron svg {
  transform: rotate(180deg);
  color: var(--aax-primary-600);
}

.aax-cover-acc-body {
  padding: 0 1rem 1.1rem;
}

.aax-cover-acc-desc {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--aax-text-sub);
  margin: 0 0 0.9rem;
}

.aax-cover-acc-control-label {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--aax-text-title);
  margin-bottom: 0.4rem;
}

.aax-cover-acc-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* Wraps the header's own on/off checkbox (see headerControlHtml in
   coverAccordionItemHtml) — sits at the far right of the header, in the
   spot the collapse chevron used to occupy before it moved to the left
   corner. flex-shrink:0 keeps it a fixed size regardless of how long the
   title/rate badge next to it get; margin-left:auto is a second, harmless
   safety net that still pushes it flush right even if a future header
   layout drops the intervening flex-1 title span. */
.aax-cover-acc-header-check {
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 0.25rem;
}

/* Plain checkbox (not a switch) for on/off covers & discounts, and the
   subtype/dropdown entries' header proxy checkbox (see
   selectHeaderCheckboxHtml in calculator.js). Styled round, like a radio
   button, for a bigger/clearer filled "on" dot that's easier to spot at a
   glance than a small checkmark — but the underlying element stays a real
   type="checkbox" (see the two HTML/JS render paths), deliberately NOT
   swapped to type="radio": a standalone native radio can't be turned back
   off by clicking it again (only picking another radio in its group can),
   and grouping several under a shared `name` would wrongly make the covers
   mutually exclusive — either would break "select more than one optional
   cover" and "click again to remove a cover" for real. This gets the same
   look without either regression. border-width/size bumped up from
   Bootstrap's thin 1.15em/1px default, and the unchecked border darkened
   from Bootstrap's faint rgba(0,0,0,.25) to a solid grey, so the outer ring
   itself is immediately visible against the card even before it's checked
   — not just at a glance once already filled in.

   Selector is the compound .aax-cover-acc-checkbox.form-check-input (both
   classes are already on the element — see the HTML/JS render paths), not
   just .aax-cover-acc-checkbox alone: Bootstrap's own compiled CSS includes
   .form-check-input[type=checkbox] { border-radius: 0.25em; }, a
   class+attribute selector that outranks a single-class one regardless of
   stylesheet load order — that's what was silently keeping this square-ish
   even after border-radius:50% was added. Matching Bootstrap's specificity
   here (plus loading after bootstrap.min.css in premium-calculator.html)
   is what actually wins the circle shape. */
.aax-cover-acc-checkbox.form-check-input {
  width: 1.3em;
  height: 1.3em;
  cursor: pointer;
  border-width: 3px;
  border-color: var(--aax-grey-400);
  border-radius: 50%;
}

.aax-cover-acc-checkbox.form-check-input:checked {
  background-color: var(--aax-primary);
  border-color: var(--aax-primary);
  /* Bootstrap's checkbox tick SVG doesn't read well inside a round shape —
     drop it in favour of the ring-and-dot look below. */
  background-image: none;
  /* Classic radio-button look (ring + gap + small center dot), in the app's
     orange rather than a flat filled circle: background-color above fills
     the whole circle, then this inset white "shadow" eats the middle of
     that fill from the border inward, leaving only a slim dot showing
     through dead center and the border itself as the outer ring. */
  box-shadow: inset 0 0 0 4px #fff;
}

.aax-cover-acc-checkbox.form-check-input:focus {
  border-color: var(--aax-primary);
  box-shadow: 0 0 0 0.2rem rgba(231, 120, 23, 0.25);
}

/* Layers the focus glow with the checked ring-and-dot look above instead of
   one replacing the other when both are true at once (e.g. tabbing to an
   already-selected entry). */
.aax-cover-acc-checkbox.form-check-input:checked:focus {
  box-shadow: 0 0 0 0.2rem rgba(231, 120, 23, 0.25), inset 0 0 0 4px #fff;
}

/* Boxed variant of the shared custom-select trigger (elsewhere in the app it
   renders as an underline) — matches the bordered dropdown look of the
   accordion card's "Select <cover>" control. */
.aax-cover-acc-select .aax-custom-select-trigger {
  border: 1.5px solid var(--aax-grey-300);
  border-radius: var(--aax-radius-sm);
  padding: 0.6rem 0.85rem;
  background: #fff;
}

.aax-cover-acc-select .aax-custom-select-trigger:focus-visible,
.aax-cover-acc-select .aax-custom-select-trigger[aria-expanded="true"] {
  border-color: var(--aax-primary);
}

/* Sum Insured field wrappers (see updateSumInsuredGateState in
   calculator.js) need position:relative so their aax-si-gate-overlay child
   below can sit exactly over the <select> via position:absolute. */
#sharedSumInsuredField,
#proposerSumInsuredField,
[data-member-si-field] {
  position: relative;
}

/* Invisible click-catcher laid over a gate-disabled Sum Insured field. A
   disabled <select> never dispatches click/mousedown in any browser, so
   there's no way to react to a user tapping it directly — this plain,
   non-disabled sibling sits on top instead (only while blocked; see
   updateSumInsuredGateState) and catches the tap, which
   wireSumInsuredGateOverlays() listens for to show why it's locked. */
.aax-si-gate-overlay {
  position: absolute;
  inset: 0;
  cursor: not-allowed;
  z-index: 2;
}

.aax-family-member-card {
  background: var(--aax-primary-50);
  border: 1px solid var(--aax-primary-200);
  border-radius: var(--aax-radius-sm);
  padding: 0.9rem;
  margin-bottom: 0.75rem;
  position: relative;
}

.aax-family-member-card .aax-remove-member {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  /* Must sit above .aax-si-gate-overlay (z-index: 2), which can visually
     overlap this button when Sum Insured is the rightmost field in the
     card's row and the gate overlay is shown (see updateSumInsuredGateState
     in calculator.js) — otherwise the overlay swallows the click meant for
     this remove button. */
  z-index: 3;
  background: #fff;
  border: none;
  color: var(--aax-danger);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.aax-add-member-btn {
  border: 1.5px dashed var(--aax-primary);
  color: var(--aax-primary-600);
  background: #fff;
  border-radius: var(--aax-radius-sm);
  padding: 0.55rem 1rem;
  font-weight: 600;
  width: 100%;
}

.aax-add-member-btn:hover {
  background: var(--aax-primary-50);
}

.aax-calc-sticky {
  position: sticky;
  top: 1.25rem;
}

@media (min-width: 992px) {
  /* Independent scroll per column — each is bounded to (roughly) the
     viewport minus the sticky toolbar + page padding + tabs bar above it,
     so scrolling the form doesn't move the summary and vice versa. Not
     pixel-exact (nothing above this row has a fixed height either), just a
     generous approximation consistent with the rest of the app's spacing. */
  .aax-calc-scroll-col {
    overflow-y: auto;
    height: calc(100vh - 150px);
    padding-right: 0.5rem;
    flex: 0 0 70%;
    max-width: 70%;
  }

  .aax-calc-summary-col {
    overflow-y: auto;
    height: calc(100vh - 150px);
    flex: 0 0 30%;
    max-width: 30%;
  }
}

.aax-calc-summary-col {
  position: relative;
}

/* Field rows meant to sit on one line (Plan Details, Proposer Details,
   floater Spouse/Children) — smaller labels/controls buy back the width
   .col-lg (auto/equal-width) needs to keep every visible field in one row
   instead of wrapping and pushing the form into extra scrolling. */
.aax-fields-row .form-label {
  font-size: 0.78rem;
  margin-bottom: 0.3rem;
}

.aax-fields-row .form-control,
.aax-fields-row .form-select {
  padding: 0.45rem 0.6rem;
  font-size: 0.85rem;
  min-width: 0;
}

.aax-fields-row > [class*="col-"] {
  min-width: 130px;
}

.aax-premium-result {
  background: linear-gradient(135deg, var(--aax-primary) 0%, var(--aax-primary-600) 100%);
  color: #fff;
  border-radius: var(--aax-radius);
  padding: 1.25rem;
  text-align: center;
}

.aax-premium-result .aax-premium-amount {
  font-size: 2.1rem;
  font-weight: 900;
}

/* Selected Optional Covers card: same orange gradient treatment as
   .aax-premium-result, so the two right-column cards read as one system. */
#selectedCoversCard {
  background: linear-gradient(135deg, var(--aax-primary) 0%, var(--aax-primary-600) 100%);
}

#selectedCoversCard h6,
#selectedCoversCard .aax-row-label,
#selectedCoversCard .aax-row-colon,
#selectedCoversCard .aax-row-value {
  color: #fff;
}

#selectedCoversCard .aax-row-line {
  background: rgba(255, 255, 255, 0.35);
}

/* ---------- Tabs ---------- */
.aax-tabs-bar {
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  width: 100%;
}

.aax-tabs.nav-tabs {
  border-bottom: 2px solid var(--aax-grey-300);
  width: 100%;
  margin: 0;
  gap: 0;
}

.aax-tabs.nav-tabs .nav-item {
  flex: 1 1 0;
  text-align: center;
}

.aax-tabs.nav-tabs .nav-link {
  border: none;
  color: var(--aax-text-sub);
  font-weight: 600;
  border-radius: 0;
  padding: 0.75rem 0.5rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.aax-tabs.nav-tabs .nav-link .aax-tab-icon {
  flex-shrink: 0;
}

.aax-tabs.nav-tabs .nav-link.active {
  color: var(--aax-primary-600);
  border-bottom: 3px solid var(--aax-primary);
  background: var(--aax-primary-50);
}

.aax-tabs.nav-tabs .nav-link.disabled {
  color: var(--aax-grey-400);
}

/* Round chip behind each tab's icon — a neutral ring normally, filling
   solid orange (matching the icon-badge treatment used on policy rows)
   the moment its tab becomes active, so selection reads through the icon
   itself rather than only the underline. */
.aax-tab-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--aax-grey-100);
  border: 1px solid var(--aax-grey-300);
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.aax-tabs.nav-tabs .nav-link.active .aax-tab-icon-badge {
  background: linear-gradient(135deg, var(--aax-primary) 0%, var(--aax-primary-600) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 3px 8px rgba(231, 120, 23, 0.35);
}

.aax-tabs.nav-tabs .nav-link.disabled .aax-tab-icon-badge {
  background: var(--aax-grey-50);
}

.aax-policy-card .aax-policy-icon {
  color: var(--aax-primary);
  flex-shrink: 0;
  margin-right: 0.7rem;
}

/* Round accent chip behind each policy-type icon — gives every row a
   distinct, professional focal point instead of a bare line icon. A soft
   gradient + thin ring (rather than a flat fill) is what ties this to the
   tab badges above as one shared icon-chip system. */
.aax-policy-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--aax-primary-50) 0%, #fff 100%);
  border: 1px solid var(--aax-primary-200);
  margin-right: 0.75rem;
  flex-shrink: 0;
}

.aax-policy-icon-badge .aax-policy-icon {
  color: var(--aax-primary-600);
  width: 20px;
  height: 20px;
  margin-right: 0;
}

/* ---------- Feedback bar ---------- */
.aax-feedback-bar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;                 /* remove old margin, spacing now handled by padding */
  border-radius: 0;          /* full-width footer look; use 14px 14px 0 0 if you want rounded top corners */
  background: var(--gradient);
  color:#fff; font-weight:700; font-size:13px;
  padding: 16px 20px;
  display:flex; align-items:center; justify-content:space-between;
  z-index: 40;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
  background-color: #e77817;
}


/* ---------- Loader ---------- */
.aax-loader-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

/* Scoped variant: confined to its (position:relative) container — e.g. the
   calculator's summary panel — instead of the whole viewport, so a
   background recalculation doesn't block the rest of the page. */
.aax-loader-overlay-scoped {
  position: absolute;
  border-radius: var(--aax-radius);
  z-index: 5;
}

.aax-loader-spinner {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 5px solid var(--aax-primary-200);
  border-top-color: var(--aax-primary);
  animation: aax-spin 0.8s linear infinite;
}

@keyframes aax-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- Skeleton loader ---------- */
.aax-skeleton {
  background: linear-gradient(90deg, var(--aax-grey-100) 25%, var(--aax-grey-300) 37%, var(--aax-grey-100) 63%);
  background-size: 400% 100%;
  animation: aax-skeleton-shimmer 1.4s ease infinite;
  border-radius: var(--aax-radius-sm);
}

@keyframes aax-skeleton-shimmer {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

.aax-skeleton-card {
  height: 120px;
}

.aax-skeleton-line {
  height: 14px;
  margin-bottom: 0.5rem;
}

/* ---------- Misc ---------- */
.aax-empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--aax-text-sub);
}

.aax-breadcrumb-bar {
  background: #fff;
  padding: 0.75rem 1rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.aax-breadcrumb-bar .company-name {
  font-weight: 700;
  color: var(--aax-text-title);
}

/* ---------- Navigation drawer (app-wide) ---------- */
.aax-nav-drawer {
  width: 280px;
}

.aax-nav-drawer-header {
  background: linear-gradient(135deg, var(--aax-primary) 0%, var(--aax-primary-600) 55%, var(--aax-accent) 130%);
  color: #fff;
}

.aax-nav-drawer-header .aax-brand img {
  height: 28px;
}

.aax-nav-drawer-list {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0;
}

.aax-nav-drawer-link {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.25rem;
  color: var(--aax-text-title);
  font-weight: 600;
  font-size: 0.95rem;
  border-right: 3px solid transparent;
}

.aax-nav-drawer-link svg {
  color: var(--aax-primary-600);
  flex-shrink: 0;
}

.aax-nav-drawer-link:hover {
  background: var(--aax-primary-50);
  color: var(--aax-primary-600);
}

.aax-nav-drawer-link.active {
  background: var(--aax-primary-50);
  color: var(--aax-primary-600);
  font-weight: 700;
  border-right-color: var(--aax-primary);
}

.aax-nav-drawer-link.is-danger {
  color: var(--aax-danger);
}

.aax-nav-drawer-link.is-danger svg {
  color: var(--aax-danger);
}

.aax-nav-drawer-link.is-danger:hover {
  background: rgba(245, 86, 37, 0.08);
}

.aax-nav-drawer-divider {
  margin: 0.5rem 1.25rem;
  border-top: 1px solid var(--aax-grey-100);
}

.aax-nav-drawer-getapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin: 1rem 1.25rem 1.25rem;
  padding: 0.9rem 1.25rem;
  background: linear-gradient(135deg, var(--aax-primary) 0%, var(--aax-primary-600) 100%);
  border-radius: 999px;
  color: #fff;
  box-shadow: var(--aax-shadow-hover);
}

.aax-nav-drawer-getapp:hover {
  color: #fff;
  filter: brightness(1.06);
}

.aax-nav-drawer-getapp svg {
  flex-shrink: 0;
  color: #fff;
}

.aax-nav-drawer-getapp-title {
  font-size: 1.05rem;
  font-weight: 800;
}

/* ---------- User menu (Dashboard top-right) ---------- */
.aax-user-menu-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 999px;
  padding: 0.3rem 0.75rem 0.3rem 0.3rem;
  color: #fff;
}

.aax-user-menu-trigger:hover {
  background: rgba(255, 255, 255, 0.28);
}

.aax-user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
}

.aax-user-menu-trigger .aax-user-name {
  font-weight: 600;
  font-size: 0.9rem;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aax-user-dropdown {
  min-width: 220px;
  border-radius: var(--aax-radius-sm);
  box-shadow: var(--aax-shadow);
  border: none;
  padding: 0.5rem 0;
}

.aax-user-dropdown-header {
  padding: 0.5rem 1rem 0.25rem;
}

.aax-user-dropdown-name {
  font-weight: 700;
  color: var(--aax-text-title);
}

.aax-user-dropdown-mobile {
  font-size: 0.85rem;
  color: var(--aax-text-sub);
}

/* ---------- Profile page ---------- */
.aax-profile-summary-card {
  background: #fff;
  border-radius: var(--aax-radius);
  box-shadow: var(--aax-shadow);
  padding: 1.75rem;
  height: 100%;
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.aax-profile-avatar-lg {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--aax-primary-50);
  flex-shrink: 0;
}

.aax-profile-name-lg {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--aax-text-title);
}

.aax-profile-designation {
  color: var(--aax-primary-600);
  font-weight: 700;
  font-size: 0.92rem;
  margin-top: 0.1rem;
}

.aax-profile-company-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--aax-text-sub);
  font-size: 0.9rem;
  margin-top: 0.3rem;
}

.aax-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  margin-top: 0.75rem;
}

.aax-status-pill.is-active {
  background: rgba(30, 197, 119, 0.15);
  color: var(--aax-success);
}

.aax-status-pill.is-expired {
  background: rgba(245, 86, 37, 0.15);
  color: var(--aax-danger);
}

.aax-profile-valid-until {
  color: var(--aax-text-sub);
  font-size: 0.86rem;
  margin-top: 0.4rem;
}

.aax-profile-summary-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.1rem;
  flex-wrap: wrap;
}

.aax-renew-btn {
  background: linear-gradient(135deg, var(--aax-primary) 0%, var(--aax-primary-600) 100%);
  color: #fff;
  border: none;
  border-radius: var(--aax-radius-sm);
  padding: 0.6rem 1.1rem;
  font-weight: 700;
  font-size: 0.88rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.aax-edit-profile-btn {
  background: #fff;
  color: var(--aax-text-title);
  border: 1.5px solid var(--aax-grey-300);
  border-radius: var(--aax-radius-sm);
  padding: 0.6rem 1.1rem;
  font-weight: 700;
  font-size: 0.88rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.aax-current-plan-card {
  background: rgba(30, 197, 119, 0.1);
  border: 1px solid rgba(30, 197, 119, 0.25);
  border-radius: var(--aax-radius);
  padding: 1.5rem;
  height: 100%;
  display: flex;
  gap: 1rem;
}

.aax-current-plan-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(30, 197, 119, 0.18);
  color: var(--aax-success);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.aax-current-plan-label {
  color: var(--aax-text-sub);
  font-size: 0.82rem;
  font-weight: 600;
}

.aax-current-plan-name {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--aax-text-title);
  margin: 0.1rem 0 0.75rem;
}

.aax-current-plan-includes-label {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--aax-text-title);
  margin-bottom: 0.4rem;
}

.aax-current-plan-includes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.aax-current-plan-includes li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--aax-text-sub);
}

.aax-current-plan-includes li::before {
  content: "\2713";
  color: var(--aax-success);
  font-weight: 800;
  flex-shrink: 0;
}

.aax-info-card {
  background: #fff;
  border-radius: var(--aax-radius);
  box-shadow: var(--aax-shadow);
  padding: 1.5rem 1.75rem;
  height: 100%;
}

.aax-info-card-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 800;
  color: var(--aax-text-title);
  padding-bottom: 0.9rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--aax-grey-100);
}

.aax-info-card-header .aax-info-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--aax-primary-50);
  color: var(--aax-primary-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.aax-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
}

.aax-info-row-label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--aax-text-sub);
  font-size: 0.9rem;
}

.aax-info-row-label svg {
  color: var(--aax-grey-400);
  flex-shrink: 0;
}

.aax-info-row-value {
  font-weight: 700;
  color: var(--aax-text-title);
  text-align: right;
}

.aax-detail-pill {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}

.aax-detail-pill.is-success {
  background: rgba(30, 197, 119, 0.15);
  color: var(--aax-success);
}

.aax-detail-pill.is-danger {
  background: rgba(245, 86, 37, 0.15);
  color: var(--aax-danger);
}

.aax-detail-pill.is-pending {
  background: rgba(255, 179, 0, 0.18);
  color: #8a5a00;
}

.aax-transaction-card {
  background: #fff;
  border-radius: var(--aax-radius);
  box-shadow: var(--aax-shadow);
  padding: 1.5rem;
  height: 100%;
}

.aax-transaction-header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 800;
  color: var(--aax-text-title);
  margin-bottom: 1rem;
}

.aax-txn-tabs {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.aax-txn-tab {
  background: #fff;
  border: 1.5px solid var(--aax-grey-300);
  color: var(--aax-text-sub);
  border-radius: var(--aax-radius-sm);
  padding: 0.45rem 1rem;
  font-weight: 700;
  font-size: 0.85rem;
}

.aax-txn-tab[data-tab="success"] {
  color: var(--aax-success);
  border-color: rgba(30, 197, 119, 0.35);
}

.aax-txn-tab[data-tab="failure"] {
  color: var(--aax-danger);
  border-color: rgba(245, 86, 37, 0.35);
}

.aax-txn-tab[data-tab="pending"] {
  color: #8a5a00;
  border-color: rgba(255, 179, 0, 0.4);
}

.aax-txn-tab.active[data-tab="success"] {
  background: rgba(30, 197, 119, 0.12);
}

.aax-txn-tab.active[data-tab="failure"] {
  background: rgba(245, 86, 37, 0.12);
}

.aax-txn-tab.active[data-tab="pending"] {
  background: rgba(255, 179, 0, 0.16);
}

.aax-txn-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.aax-txn-table th {
  text-align: left;
  color: var(--aax-text-sub);
  font-weight: 700;
  padding: 0.5rem 0.4rem;
  border-bottom: 1px solid var(--aax-grey-100);
  white-space: nowrap;
}

.aax-txn-table td {
  padding: 0.7rem 0.4rem;
  border-bottom: 1px solid var(--aax-grey-100);
  white-space: nowrap;
}

.aax-txn-invoice-btn {
  background: none;
  border: none;
  color: var(--aax-primary-600);
  display: inline-flex;
}

.aax-view-all-link {
  display: block;
  text-align: center;
  color: var(--aax-primary-600);
  font-weight: 700;
  font-size: 0.9rem;
  margin-top: 0.75rem;
}

/* ---------- Subscription-expired dialog ---------- */
.aax-expired-details {
  text-align: left;
  background: var(--aax-grey-100);
  border-radius: var(--aax-radius-sm);
  padding: 0.75rem 1rem;
}

.aax-expired-details > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0;
}

.aax-expired-details span {
  color: var(--aax-text-sub);
}

/* ---------- Device-limit selection dialog (js/deviceDialogs.js) ---------- */
.aax-payment-gateway-list {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.aax-payment-gateway-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--aax-grey-100);
  border-radius: var(--aax-radius-sm);
  padding: 0.7rem 1rem;
  cursor: pointer;
  font-weight: 600;
}

.aax-payment-gateway-option input {
  accent-color: var(--aax-primary-600);
  width: 1.1rem;
  height: 1.1rem;
}

/* ---------- Payment gateway selection dialog (js/paymentDialogs.js) ---------- */
.aax-pg-popup {
  padding-bottom: 1.75rem;
}

.aax-pg-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--aax-primary-50);
  color: var(--aax-primary-600);
  display: flex;
  align-items: center;
  justify-content: center;
}

.aax-pg-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--aax-text-title);
  margin: 0 0 0.35rem;
}

.aax-pg-subtitle {
  color: var(--aax-text-sub);
  font-size: 0.92rem;
  margin: 0 0 1.25rem;
}

.aax-pg-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: left;
  margin-bottom: 1.25rem;
}

.aax-pg-option {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  border: 1.5px solid var(--aax-grey-300);
  border-radius: var(--aax-radius);
  padding: 0.85rem 1rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.aax-pg-option:has(input:checked) {
  border-color: var(--aax-primary-600);
  background: var(--aax-primary-50);
}

.aax-pg-option input {
  width: 1.3rem;
  height: 1.3rem;
  accent-color: var(--aax-primary-600);
  flex-shrink: 0;
}

.aax-pg-logo {
  height: 1.7rem;
  width: auto;
  max-width: 90px;
  object-fit: contain;
  flex-shrink: 0;
}

.aax-pg-option-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.aax-pg-option-title {
  font-weight: 700;
  color: var(--aax-text-title);
  font-size: 1rem;
}

.aax-pg-option-sub {
  color: var(--aax-text-sub);
  font-size: 0.83rem;
}

.aax-pg-trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 0.4rem;
  background: var(--aax-grey-100);
  border-radius: var(--aax-radius);
  padding: 0.9rem 0.75rem;
  text-align: left;
}

.aax-pg-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  flex: 1 1 160px;
  min-width: 160px;
}

.aax-pg-trust-item svg {
  width: 16px;
  height: 16px;
  color: var(--aax-primary-600);
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.aax-pg-trust-item strong {
  display: block;
  font-size: 0.78rem;
  color: var(--aax-text-title);
  white-space: nowrap;
}

.aax-pg-trust-item span {
  font-size: 0.72rem;
  color: var(--aax-text-sub);
  white-space: nowrap;
}

.aax-pg-actions {
  margin-top: 1.5rem !important;
}

.aax-pg-btn-confirm {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.aax-pg-btn-cancel {
  background: #fff;
  border: 1.5px solid var(--aax-grey-300);
  color: var(--aax-text-title);
  font-weight: 600;
  border-radius: var(--aax-radius-sm);
  padding: 0.65rem 1.4rem;
}

.aax-pg-btn-cancel:hover {
  background: var(--aax-grey-100);
}

@media (max-width: 480px) {
  .aax-pg-trust-bar {
    flex-direction: column;
  }

  .aax-pg-trust-item strong,
  .aax-pg-trust-item span {
    white-space: normal;
  }
}

/* ---------- Utility text colors ---------- */
.aax-text-success {
  color: var(--aax-success);
}

.aax-text-danger {
  color: var(--aax-danger);
}

/* ---------- Subscription status page ---------- */
.aax-subscription-hero {
  margin: 1.25rem 0 1.75rem;
}

.aax-subscription-hero h1 {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--aax-text-title);
  margin: 0 0 0.3rem;
}

.aax-subscription-hero-accent {
  color: var(--aax-primary-600);
}

.aax-subscription-hero p {
  color: var(--aax-text-sub);
  font-size: 0.95rem;
  margin: 0;
}

.aax-subscription-status-card {
  flex: 1 1 auto;
  background: rgba(30, 197, 119, 0.08);
  border-radius: var(--aax-radius);
  padding: 1.5rem;
  margin-bottom: 1rem;
}

.aax-sub-status-top {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.aax-sub-status-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.aax-sub-status-icon.is-active {
  background: rgba(30, 197, 119, 0.18);
  color: var(--aax-success);
}

.aax-sub-status-icon.is-expired {
  background: rgba(245, 86, 37, 0.18);
  color: var(--aax-danger);
}

.aax-sub-status-copy {
  flex: 1;
  min-width: 0;
  padding-top: 0.3rem;
}

.aax-sub-status-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.aax-sub-status-label {
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--aax-text-title);
}

.aax-sub-status-desc {
  margin: 0.3rem 0 0;
  font-size: 0.86rem;
  color: var(--aax-text-sub);
  line-height: 1.45;
}

.aax-sub-status-divider {
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  margin: 1.1rem 0;
}

.aax-status-badge {
  display: inline-block;
  padding: 0.25rem 0.85rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

.aax-status-badge-active {
  background: rgba(30, 197, 119, 0.18);
  color: var(--aax-success);
}

.aax-status-badge-expired {
  background: rgba(245, 86, 37, 0.18);
  color: var(--aax-danger);
}

.aax-sub-detail-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0;
  font-size: 0.9rem;
}

.aax-sub-detail-icon {
  color: var(--aax-text-sub);
  display: inline-flex;
  flex-shrink: 0;
}

.aax-sub-detail-label {
  flex: 1;
  color: var(--aax-text-sub);
}

.aax-sub-detail-value {
  font-weight: 700;
  color: var(--aax-text-title);
  text-align: right;
}

/* ---------- Purchase / Renew button ---------- */
.aax-purchase-btn-row {
  margin: 0 0 1rem;
}

.aax-purchase-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  background: linear-gradient(135deg, var(--aax-primary) 0%, var(--aax-primary-600) 55%, var(--aax-accent) 130%);
  color: #fff;
  border: none;
  border-radius: var(--aax-radius-sm);
  padding: 0.95rem 1.2rem;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: var(--aax-shadow-hover);
}

.aax-purchase-btn:hover {
  filter: brightness(1.05);
}

.aax-purchase-btn-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* ---------- Note box ---------- */
.aax-subscription-note {
  height: 100%;
  background: var(--aax-primary-50);
  border-radius: var(--aax-radius);
  padding: 1.1rem 1.25rem;
}

.aax-subscription-note-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.aax-subscription-note-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--aax-primary-600);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.aax-subscription-note-header strong {
  color: var(--aax-text-title);
  font-size: 0.95rem;
  font-weight: 800;
}

.aax-subscription-note p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--aax-text-sub);
  line-height: 1.55;
}

/* ---------- Purchase Details section ---------- */
.aax-purchase-history-card {
  height: 100%;
  background: #fff;
  border-radius: var(--aax-radius);
  box-shadow: var(--aax-shadow);
  padding: 1.5rem;
}

.aax-purchase-details-header {
  padding: 0 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--aax-text-title);
}

.aax-refresh-btn {
  background: none;
  border: none;
  color: var(--aax-accent);
  font-weight: 700;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.aax-sub-tabs {
  display: flex;
  background: var(--aax-grey-100);
  border-radius: 999px;
  padding: 0.3rem;
  gap: 0.3rem;
  margin-bottom: 1.1rem;
}

.aax-sub-tab {
  flex: 1;
  background: none;
  border: none;
  border-radius: 999px;
  color: var(--aax-text-sub);
  padding: 0.6rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.84rem;
}

.aax-sub-tab.active {
  background: var(--aax-primary-50);
  color: var(--aax-primary-600);
  box-shadow: var(--aax-shadow);
}

/* ---------- Purchase-history year accordion ---------- */
.aax-year-list {
  margin: 0;
}

.aax-year-row {
  background: var(--aax-grey-100);
  border-radius: var(--aax-radius-sm);
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.aax-year-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.1rem;
  cursor: pointer;
  font-weight: 700;
  color: var(--aax-text-title);
}

.aax-year-row-header .aax-year-chevron {
  transition: transform 0.2s ease;
  color: var(--aax-text-sub);
}

.aax-year-row.expanded .aax-year-row-header .aax-year-chevron {
  transform: rotate(180deg);
}

.aax-year-row.expanded {
  background: #fff;
  border: 1px solid var(--aax-grey-100);
  box-shadow: var(--aax-shadow);
}

.aax-year-row.expanded .aax-year-row-header span:first-child {
  color: var(--aax-primary-600);
  font-weight: 800;
}

.aax-year-row-body {
  padding: 0 1.1rem 1rem;
  background: transparent;
}

/* ---------- Purchase-history cards ---------- */
.aax-purchase-card {
  background: #fff;
  border: 1px solid var(--aax-grey-100);
  border-radius: var(--aax-radius-sm);
  padding: 0.85rem 1rem;
  margin-top: 0.75rem;
}

.aax-purchase-card-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.aax-purchase-card-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.aax-purchase-card-icon-success {
  background: rgba(30, 197, 119, 0.15);
  color: var(--aax-success);
}

.aax-purchase-card-icon-failure {
  background: rgba(245, 86, 37, 0.15);
  color: var(--aax-danger);
}

.aax-purchase-card-icon-pending {
  background: rgba(255, 179, 0, 0.18);
  color: #8a5a00;
}

.aax-purchase-card-main {
  flex: 1;
  min-width: 0;
}

.aax-purchase-card-plan {
  font-weight: 700;
  color: var(--aax-text-title);
  font-size: 0.92rem;
}

.aax-purchase-card-sub {
  font-size: 0.78rem;
  color: var(--aax-text-sub);
  margin-top: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aax-purchase-card-amount-wrap {
  flex-shrink: 0;
  text-align: right;
}

.aax-purchase-card-amount {
  font-weight: 800;
  color: var(--aax-text-title);
  font-size: 0.95rem;
}

.aax-purchase-card-date {
  font-size: 0.74rem;
  color: var(--aax-text-sub);
  margin-top: 0.1rem;
  white-space: nowrap;
}

.aax-purchase-status-badge {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}

.aax-purchase-status-success {
  background: rgba(30, 197, 119, 0.15);
  color: var(--aax-success);
}

.aax-purchase-status-failure {
  background: rgba(245, 86, 37, 0.15);
  color: var(--aax-danger);
}

.aax-purchase-status-pending {
  background: rgba(255, 179, 0, 0.18);
  color: #8a5a00;
}

.aax-purchase-status-unknown {
  background: var(--aax-grey-100);
  color: var(--aax-grey-400);
}

.aax-purchase-card-extra {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--aax-grey-300);
}

.aax-purchase-card-field {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.82rem;
}

.aax-purchase-card-field span:first-child {
  color: var(--aax-text-sub);
}

.aax-purchase-card-field span:last-child {
  font-weight: 600;
  text-align: right;
}

/* ---------- Bottom row: Note + feature grid ---------- */
.aax-subscription-bottom-row {
  margin-top: 0.25rem;
  margin-bottom: 1.5rem;
}

.aax-subscription-footer {
  margin-bottom: 2rem;
}

.aax-plan-features-centered {
  height: 100%;
}

.aax-plan-features-centered .aax-plan-feature {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  flex: 1 1 130px;
}

.aax-plan-feature-icon-orange {
  background: var(--aax-primary-50);
  color: var(--aax-primary-600);
}

/* ---------- Purchase Subscription (plan catalog) page ---------- */
.aax-payment-help-pill {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

.aax-payment-help-pill:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.28);
}

/* ---------- Purchase Subscription: hero ---------- */
.aax-plan-hero {
  text-align: center;
  max-width: 720px;
  margin: 1.5rem auto 2rem;
}

.aax-plan-hero h1 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--aax-text-title);
  margin: 0 0 0.6rem;
}

.aax-plan-hero-accent {
  color: var(--aax-primary-600);
}

.aax-plan-hero p {
  color: var(--aax-text-sub);
  font-size: 1rem;
  margin: 0 0 1.1rem;
}

.aax-gst-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(30, 197, 119, 0.12);
  color: var(--aax-success);
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  font-size: 0.82rem;
  font-weight: 700;
}

/* ---------- Purchase Subscription: feature strip ---------- */
.aax-plan-features {
  background: #fff;
  border-radius: var(--aax-radius);
  box-shadow: var(--aax-shadow);
  padding: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}

.aax-plan-feature {
  flex: 1 1 200px;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.aax-plan-feature-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--aax-primary-50);
  color: var(--aax-primary-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.aax-plan-feature-icon-green {
  background: rgba(30, 197, 119, 0.12);
  color: var(--aax-success);
}

.aax-plan-feature-icon-purple {
  background: rgba(147, 51, 234, 0.12);
  color: #9333ea;
}

.aax-plan-feature-icon-blue {
  background: rgba(22, 144, 168, 0.12);
  color: #1690a8;
}

.aax-plan-feature strong {
  display: block;
  font-size: 0.92rem;
  color: var(--aax-text-title);
  margin-bottom: 0.15rem;
}

.aax-plan-feature p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--aax-text-sub);
  line-height: 1.4;
}

/* ---------- Purchase Subscription: trust bar ---------- */
.aax-plan-trustbar {
  background: rgba(30, 197, 119, 0.1);
  border-radius: var(--aax-radius-sm);
  padding: 0.9rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-bottom: 1.25rem;
  color: var(--aax-text-title);
  font-size: 0.88rem;
  font-weight: 600;
}

.aax-plan-trustbar span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.aax-plan-trustbar svg {
  color: var(--aax-success);
  flex-shrink: 0;
}

.aax-plan-trustbar-divider {
  width: 1px;
  height: 18px;
  background: var(--aax-grey-300);
}

/* Flexbox + wrap + justify-content:center (not CSS Grid auto-fill) so every
   row — including a partial last row — centers itself regardless of how many
   plans come back from the API; auto-fill would instead create empty trailing
   grid tracks and leave the real cards stuck against the left edge. */
.aax-plan-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem 0.85rem;
  margin-bottom: 1.5rem;
}

.aax-plan-card {
  flex: 0 1 calc(50% - 0.425rem);
  max-width: calc(50% - 0.425rem);
}

/* Per-tier color system: each modifier only sets these custom properties,
   every other rule below reads from them so adding a new tier (or falling
   back to the default) never needs new structural CSS. --tier-box-bg is a
   slightly more saturated tint than --tier-tint, used for the "Total"
   price box so it reads as a distinct block against the card's own
   (much lighter) background gradient. */
.aax-plan-tier-silver {
  --tier-color: #6b7785;
  --tier-tint: #f4f6f7;
  --tier-border: #d8dce0;
  --tier-box-bg: #e7eaed;
}

.aax-plan-tier-gold {
  --tier-color: #c9720b;
  --tier-tint: #fff6df;
  --tier-border: #f0c04d;
  --tier-box-bg: #fce6bc;
}

.aax-plan-tier-diamond {
  --tier-color: #1690a8;
  --tier-tint: #e9fbfd;
  --tier-border: #b6ebf0;
  --tier-box-bg: #d5f0f7;
}

.aax-plan-tier-free {
  --tier-color: var(--aax-success);
  --tier-tint: #edfbf4;
  --tier-border: #b9ecd4;
  --tier-box-bg: #d3f5e4;
}

.aax-plan-tier-default {
  --tier-color: var(--aax-primary-600);
  --tier-tint: var(--aax-primary-50);
  --tier-border: var(--aax-primary-200);
  --tier-box-bg: var(--aax-primary-200);
}

.aax-plan-card {
  background: linear-gradient(180deg, var(--tier-tint) 0%, #fff 60%);
  border: 1.5px solid var(--tier-border);
  border-radius: var(--aax-radius);
  box-shadow: var(--aax-shadow);
  padding: 1.75rem 0.9rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.aax-plan-card.is-preferred {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
}

.aax-plan-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--aax-shadow-hover);
}

.aax-plan-ribbon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -55%);
  background: var(--tier-color);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: var(--aax-shadow);
}

.aax-plan-card-icon {
  font-size: 2.1rem;
  line-height: 1;
  margin-top: 0.35rem;
}

.aax-plan-card-name {
  font-weight: 800;
  letter-spacing: 0.05em;
  font-size: 0.82rem;
  text-transform: uppercase;
  color: var(--tier-color);
}

.aax-plan-card-price {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}

.aax-plan-card-price .amount {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--tier-color);
}

.aax-plan-card-price .unit {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--aax-text-sub);
}

.aax-plan-card-gst {
  color: var(--aax-text-sub);
  font-size: 0.76rem;
}

.aax-plan-card-total-box {
  width: 100%;
  background: var(--tier-box-bg);
  border-radius: var(--aax-radius-sm);
  padding: 0.55rem 0.5rem;
}

.aax-plan-card-total-amount {
  color: var(--tier-color);
  font-weight: 800;
  font-size: 0.92rem;
}

.aax-plan-card-badge-text {
  font-size: 0.76rem;
  font-weight: 700;
  margin-top: 0.15rem;
}

.aax-plan-card-badge-text.is-save {
  color: var(--aax-success);
}

.aax-plan-card-badge-text.is-basic {
  color: var(--aax-text-sub);
}

.aax-plan-card-duration {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0.3rem;
  width: 100%;
}

.aax-plan-card-duration-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--tier-tint);
  color: var(--tier-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.aax-plan-card-duration-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.3;
}

.aax-plan-card-duration-value .num {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--aax-text-title);
}

.aax-plan-card-duration-value .unit {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--aax-text-title);
}

.aax-plan-card-duration-label {
  font-size: 0.72rem;
  color: var(--aax-text-sub);
  font-weight: 600;
}

.aax-plan-card-btn {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--aax-radius-sm);
  font-weight: 700;
  font-size: 0.85rem;
  background: #fff;
  color: var(--tier-color);
  border: 1.5px solid var(--tier-color);
}

.aax-plan-card.is-preferred .aax-plan-card-btn {
  background: var(--tier-color);
  color: #fff;
}

/* Below 768px, .aax-plan-grid falls back to its mobile-first default: two
   .aax-plan-card per row (see the flex:0 1 calc(50%...) rule above). At the
   narrow end of that range (320-360px) each card is only ~140px wide, and
   two of its rows lay out horizontally with no shrink/wrap allowance — the
   price (amount + unit) and the duration row (icon + text) — so give them
   room to breathe instead of risking clipped/overlapping text. */
@media (max-width: 360px) {
  .aax-plan-card {
    padding: 1.4rem 0.6rem 1rem;
  }

  .aax-plan-card-name {
    font-size: 0.72rem;
    letter-spacing: 0.03em;
  }

  .aax-plan-card-price .amount {
    font-size: 1.55rem;
  }

  .aax-plan-card-duration {
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .aax-plan-card-duration-text {
    align-items: center;
    text-align: center;
  }
}

/* ---------- Trust/legal footer ---------- */
.aax-verify-mobile-note {
  text-align: center;
  color: var(--aax-danger);
  font-size: 0.85rem;
  margin: 0.75rem 0 1.25rem;
}

.aax-trust-badges {
  background: var(--aax-primary-50);
  border-radius: var(--aax-radius-sm);
  padding: 0.9rem 0.75rem;
  display: flex;
  justify-content: space-around;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.aax-trust-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--aax-text-sub);
  flex: 1;
}

.aax-trust-badge svg {
  color: var(--aax-primary-600);
}

.aax-legal-footer {
  padding: 0 0.1rem;
  font-size: 0.85rem;
  color: var(--aax-text-sub);
  line-height: 1.6;
}

.aax-legal-footer p {
  margin: 0 0 0.5rem;
}

.aax-legal-footer a {
  color: var(--aax-accent);
  font-weight: 600;
  text-decoration: underline;
}

.aax-legal-footer .aax-legal-footer-refund {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--aax-accent);
  font-weight: 600;
  text-decoration: none;
}

.aax-legal-footer .aax-legal-footer-refund:hover {
  text-decoration: underline;
}

.aax-legal-footer hr {
  border-top: 1px solid var(--aax-grey-300);
  margin: 0.75rem 0;
}

/* ---------- Register screen (split brand / form panels) ---------- */
.aax-register-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: var(--aax-bg);
}

.aax-register-shell {
  width: 100%;
  max-width: 640px;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: #fff;
  border-radius: var(--aax-radius);
  box-shadow: var(--aax-shadow-hover);
  overflow: hidden;
}

.aax-register-panel-form {
  min-width: 0;
  padding: 2.5rem 2.75rem;
  overflow-y: auto;
}

.aax-register-form-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.aax-register-form-header h1 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.aax-register-form-header p {
  color: var(--aax-text-sub);
  font-size: 0.92rem;
  margin: 0;
}

.aax-register-login-hint {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  flex: none;
  white-space: nowrap;
}

.aax-register-login-hint span {
  font-size: 0.82rem;
  color: var(--aax-text-sub);
}

.aax-register-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.25rem;
}

.aax-register-form-grid .mb-3 {
  min-width: 0;
}

.aax-input-icon {
  position: relative;
}

.aax-input-icon > svg {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--aax-grey-400);
  pointer-events: none;
}

.aax-input-icon input {
  padding-left: 2.5rem;
}

.aax-input-icon .aax-password-toggle {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--aax-grey-400);
  padding: 0.25rem;
  line-height: 0;
}

.aax-input-icon:has(.aax-password-toggle) input {
  padding-right: 2.4rem;
}

.aax-mobile-prefix {
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: var(--aax-text-sub);
  padding-right: 0.6rem;
  border-right: 1px solid var(--aax-grey-300);
}

.aax-mobile-prefix + input {
  padding-left: 3.6rem;
}

.aax-password-hint {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.aax-password-hint svg {
  color: var(--aax-success);
  flex: none;
}

.aax-register-footer-login {
  text-align: center;
  margin-top: 1.25rem;
  font-size: 0.9rem;
  color: var(--aax-text-sub);
}

@media (max-width: 991.98px) {
  .aax-register-panel-form {
    padding: 2rem 1.25rem;
  }

  .aax-register-form-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .aax-register-form-header {
    flex-direction: column;
  }

  .aax-register-login-hint {
    align-items: flex-start;
    /* The base rule sets white-space:nowrap for the flex-end alignment used
       above 991.98px, where there's a full-width row to stretch across.
       Once the header stacks to column layout on this breakpoint, that
       nowrap can clip a longer hint against the narrower stacked width
       instead of wrapping normally. */
    white-space: normal;
    text-align: left;
  }
}

/* ---------- Dashboard: persistent sidebar shell (desktop) ---------- */
.aax-dashboard-shell {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

.aax-dashboard-main {
  flex: 1;
  min-width: 0;
}

/* Below lg, .aax-sidebar behaves as the normal offcanvas drawer (see the
   existing .aax-nav-drawer rules above; deliberately NOT combined with the
   base .offcanvas class here — that class forces position:fixed and
   visibility:hidden unconditionally, which the responsive .offcanvas-lg
   breakpoint override never resets, so the sidebar would stay invisible at
   any width. .offcanvas-lg alone is self-contained for both states). At
   lg+, it falls back to normal static, visible, in-flow behavior — the
   rules here just size it and restyle it to look like the reference
   dashboard's white sidebar. */
@media (min-width: 992px) {
  .aax-sidebar.offcanvas-lg {
    width: 264px;
    height: 100vh;
    position: sticky;
    top: 0;
    flex-shrink: 0;
    background: #fff;
    border-right: 1px solid var(--aax-grey-100);
    box-shadow: none;
  }

  .aax-sidebar .offcanvas-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 100%;
    overflow-y: auto;
    padding: 0;
  }
}

/* Solid color (not a gradient) and an explicit height shared with
   .aax-topbar-desktop below — a linear-gradient renders differently on
   boxes of different sizes, so two separately-gradiented elements never
   line up exactly; matching flat colors always do. */
.aax-sidebar-brand-desktop {
  align-items: center;
  gap: 0.75rem;
  height: 76px;
  padding: 0 1.25rem;
  background: var(--aax-primary);
}

.aax-sidebar-brand-desktop img {
  height: 38px;
}

.aax-sidebar-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.aax-sidebar-brand-text span {
  font-weight: 800;
  font-size: 1.05rem;
  color: #fff;
}

.aax-sidebar-brand-text small {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
}

.aax-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.9rem;
}

.aax-sidebar-link {
  border-right: none;
  border-radius: var(--aax-radius-sm);
  padding: 0.65rem 0.9rem;
}

.aax-sidebar-link.active {
  background: linear-gradient(135deg, var(--aax-primary) 0%, var(--aax-primary-600) 100%);
  color: #fff;
  box-shadow: var(--aax-shadow-hover);
}

.aax-sidebar-link.active svg {
  color: #fff;
}

/* ---------- Dashboard: desktop topbar ---------- */
/* Same solid color + explicit height as .aax-sidebar-brand-desktop above,
   so the two line up as one continuous bar with no color or height seam. */
.aax-topbar-desktop {
  align-items: center;
  gap: 1rem;
  height: 76px;
  padding: 0 1.5rem;
  background: var(--aax-primary);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.aax-topbar-search {
  flex: 1;
  max-width: 420px;
  margin: 0;
  box-shadow: none;
  background: #fff;
  border: none;
}

.aax-topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-left: auto;
}

/* .aax-icon-btn and .aax-user-menu-trigger (shared component) both already
   default to a translucent-white-on-color treatment for the mobile
   gradient toolbar — the desktop topbar now uses the same gradient, so it
   reuses those same defaults instead of overriding them for a light bg. */
.aax-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.aax-icon-btn:hover {
  background: rgba(255, 255, 255, 0.28);
  color: #fff;
}

/* ---------- Dashboard: greeting row + stat cards ---------- */
.aax-greeting-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.aax-greeting-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--aax-text-title);
  margin: 0 0 0.25rem;
}

.aax-greeting-sub {
  color: var(--aax-text-sub);
  font-size: 0.92rem;
  margin: 0;
}

.aax-date-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  border: 1px solid var(--aax-grey-300);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--aax-text-title);
  white-space: nowrap;
}

.aax-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.aax-stat-card {
  background: #fff;
  border-radius: var(--aax-radius);
  box-shadow: var(--aax-shadow);
  padding: 1.1rem 1.35rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1 1 240px;
  max-width: 300px;
}

.aax-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--aax-primary-50);
  color: var(--aax-primary-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.aax-stat-label {
  font-size: 0.8rem;
  color: var(--aax-text-sub);
  font-weight: 600;
}

.aax-stat-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--aax-text-title);
  line-height: 1.25;
}

.aax-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.aax-section-header h2 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--aax-text-title);
  margin: 0;
}

/* ---------- Summary screen ---------- */
.aax-section-box {
  background: var(--aax-primary-50);
  border: 2px solid var(--aax-primary-200);
  border-radius: var(--aax-radius-sm);
  padding: 0.9rem 0.9rem 1rem;
  margin-bottom: 1.25rem;
}

.aax-section-box .aax-summary-card,
.aax-section-box .aax-period-item,
.aax-section-box .aax-person-card {
  margin-bottom: 0.75rem;
}

.aax-section-box .aax-summary-card:last-child,
.aax-section-box .aax-period-item:last-child,
.aax-section-box .aax-person-card:last-child {
  margin-bottom: 0;
}

.aax-section-title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--aax-primary-600);
  margin: 0 0 0.6rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--aax-primary-200);
}

.aax-summary-header-card,
.aax-summary-card,
.aax-period-item,
.aax-person-card {
  background: #fff;
  border-radius: var(--aax-radius-sm);
  box-shadow: var(--aax-shadow);
  margin-bottom: 1rem;
  overflow: hidden;
}

.aax-summary-header-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  background: var(--aax-primary-50);
}

.aax-summary-company-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
}

.aax-summary-company-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--aax-primary-600);
}

.aax-summary-policy-name {
  font-weight: 700;
  color: var(--aax-text-title);
  font-size: 0.98rem;
}

.aax-summary-company-name {
  font-style: italic;
  color: var(--aax-primary-600);
  font-size: 0.85rem;
}

.aax-summary-card {
  padding: 0.5rem 1rem;
  border: 1px solid var(--aax-primary-200);
}

/* Discount-applicability badges above the period list */
.aax-discount-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: -0.4rem 0 1rem;
}

.aax-discount-badge {
  background: var(--aax-success);
  color: #fff;
  font-weight: 600;
  font-size: 0.78rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}

/* Policy-period accordion */
.aax-period-item {
  border: 1px solid var(--aax-primary-200);
}

.aax-period-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 1rem;
  background: var(--aax-primary-50);
  cursor: pointer;
}

.aax-period-item-selected .aax-period-header {
  background: linear-gradient(135deg, var(--aax-primary) 0%, var(--aax-primary-600) 100%);
  color: #fff;
}

.aax-period-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--aax-accent);
  pointer-events: none;
}

.aax-period-title {
  font-weight: 600;
  flex: 1;
}

.aax-period-amount {
  font-weight: 700;
  white-space: nowrap;
}

.aax-period-save {
  font-weight: 400;
  font-size: 0.82rem;
  margin-left: 0.3rem;
  opacity: 0.9;
}

.aax-period-chevron {
  font-size: 0.75rem;
  width: 1.2rem;
  text-align: center;
}

.aax-period-body {
  padding: 0.4rem 1rem 0.6rem;
}

/* Insured-person cards */
.aax-person-header {
  display: flex;
  justify-content: space-between;
  padding: 0.7rem 1rem;
  background: var(--aax-primary-600);
  color: #fff;
  font-weight: 600;
}

.aax-person-body {
  padding: 0.4rem 1rem 0.6rem;
}

/* Shared label : value rows used by both the period breakdown and the
   insured-person cards */
.aax-summary-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.1rem;
}

.aax-summary-row .aax-row-label {
  flex: 1.4;
  color: var(--aax-text-default);
}

.aax-summary-row .aax-row-colon {
  flex: 0.15;
  text-align: center;
  color: var(--aax-text-default);
}

/* Shared by both the calculator's right-side "Premium Breakdown" card and
   the Summary screen's period/insured-person breakdowns (see the comment
   above .aax-summary-row) — bolded so every rate reads clearly at a glance
   for older users, with .aax-row-bold (Total Premium etc.) stepped up to
   max weight so it still stands out above the now-bold regular rows. */
.aax-summary-row .aax-row-value {
  flex: 1.2;
  text-align: right;
  font-weight: 700;
}

.aax-summary-row.aax-row-bold {
  font-weight: 900;
  color: var(--aax-text-title);
}

.aax-row-line {
  height: 1px;
  background: var(--aax-grey-300);
  margin: 0 0.1rem;
}

/* Fixed footer bar */
.aax-summary-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--aax-grey-100);
  border-top: 1px solid var(--aax-grey-300);
  padding: 0.7rem 1rem;
  display: flex;
  justify-content: center;
  z-index: 1020;
}

.aax-summary-footer-premium {
  min-width: 220px;
  text-align: center;
  background: #fff;
  border: 2px solid var(--aax-primary-200);
  border-radius: var(--aax-radius-sm);
  padding: 0.5rem 1.25rem;
}

.aax-summary-footer-label {
  font-size: 0.72rem;
  color: var(--aax-text-sub);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aax-summary-footer-amount {
  font-weight: 900;
  font-size: 1.2rem;
  color: var(--aax-primary-600);
}

/* No max-height/orientation query exists anywhere else in the app — this is
   the one spot a fixed element (the sticky toolbar above eats more of the
   remaining space too) can meaningfully squeeze a short landscape phone
   viewport (e.g. ~375px tall). summary.html's own <main> already reserves
   padding-bottom for this footer's height (see the inline style there), so
   this is headroom polish, not an overlap fix. */
@media (max-height: 420px) and (orientation: landscape) {
  .aax-summary-footer {
    padding: 0.4rem 1rem;
  }

  .aax-summary-footer-premium {
    padding: 0.3rem 1rem;
    min-width: 180px;
  }

  .aax-summary-footer-amount {
    font-size: 1rem;
  }
}

/* Date of Birth fields open the custom aax-dp picker instead of the native
   calendar (see js/date-picker.js) — styled as a plain readonly text field
   with a calendar glyph so it still reads as a date input. */
.aax-dob-input {
  cursor: pointer;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e77817' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='3'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px 18px;
  padding-right: 40px;
}

.aax-dp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 16px;
}

.aax-dp-modal {
  background: #fff;
  border-radius: 20px;
  width: min(420px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 20px;
  box-shadow: var(--aax-shadow-hover);
}

.aax-dp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.aax-dp-back {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--aax-grey-100);
  color: var(--aax-primary);
  font-size: 1.1rem;
  line-height: 1;
}

.aax-dp-back.aax-dp-hidden {
  visibility: hidden;
}

.aax-dp-title {
  flex: 1;
  text-align: center;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--aax-accent);
}

.aax-dp-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 2px solid var(--aax-primary);
  color: var(--aax-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.aax-dp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--aax-grey-300);
  border-radius: 12px;
  padding: 8px 12px;
  margin-bottom: 16px;
}

.aax-dp-nav-prev,
.aax-dp-nav-next {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--aax-primary);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
}

.aax-dp-nav-prev:disabled,
.aax-dp-nav-next:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.aax-dp-nav-label {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--aax-primary);
}

.aax-dp-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  color: var(--aax-text-sub);
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.aax-dp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.aax-dp-grid-day {
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.aax-dp-cell {
  border: none;
  border-radius: 999px;
  background: var(--aax-grey-100);
  color: var(--aax-text-title);
  padding: 12px 0;
  font-size: 0.95rem;
}

.aax-dp-day-cell {
  padding: 8px 0;
  aspect-ratio: 1;
}

.aax-dp-cell:hover:not(:disabled) {
  background: var(--aax-primary-50);
}

.aax-dp-cell.selected {
  background: var(--aax-primary);
  color: #fff;
  font-weight: 700;
}

.aax-dp-cell:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.aax-dp-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--aax-grey-100);
  padding-top: 14px;
  margin-bottom: 14px;
}

.aax-dp-cal-ico {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  border: 2px solid var(--aax-primary);
  color: var(--aax-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.aax-dp-selected-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--aax-accent);
}

.aax-dp-selected-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--aax-accent);
}

.aax-dp-actions {
  display: flex;
  gap: 12px;
}

.aax-dp-cancel,
.aax-dp-ok {
  flex: 1;
  border-radius: 10px;
  padding: 10px;
  font-weight: 700;
}

.aax-dp-cancel {
  border: 1.5px solid var(--aax-primary);
  color: var(--aax-primary);
  background: #fff;
}

.aax-dp-ok {
  border: none;
  color: #fff;
  background: var(--aax-primary);
}

.aax-dp-ok:disabled {
  background: var(--aax-primary-200);
  cursor: not-allowed;
}

/* ---------- Summary "Print / Save as PDF" document ----------
   Built by Summary.preparePrintDocument() into #aaxPrintDoc — hidden on
   screen, shown only for @media print (below), so it never affects the
   normal on-screen Summary UI. Page 1 mirrors the branded "Policy
   Quotation" layout (company + agent header, quote table, proposer/insured
   tables); page 2 mirrors "Policy Benefits & Coverages", reusing the same
   section data as the policy list's Benefits & Coverage modal
   (.aax-benefit-table). */
.aax-print-doc {
  display: none;
}

@media print {
  body * {
    visibility: hidden;
  }

  .aax-print-doc,
  .aax-print-doc * {
    visibility: visible;
  }

  .aax-print-doc {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }

  .aax-toolbar,
  .aax-summary-footer {
    display: none !important;
  }
}

.aax-print-doc {
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--aax-text-title);
  font-size: 12px;
}

.aax-print-page {
  padding: 16px;
}

.aax-print-page + .aax-print-page {
  page-break-before: always;
}

.aax-print-header-table,
.aax-print-quote-table,
.aax-print-persons-table,
.aax-print-benefit-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 14px;
}

.aax-print-header-table td {
  border: 1px solid var(--aax-grey-400);
  padding: 6px 10px;
  vertical-align: middle;
}

.aax-print-logo-cell {
  width: 60px;
  text-align: center;
}

.aax-print-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.aax-print-logo-fallback {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--aax-primary-50);
  color: var(--aax-primary-600);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.aax-print-agent-photo {
  border-radius: 50%;
}

.aax-print-company-cell {
  color: var(--aax-primary);
  font-weight: 700;
}

.aax-print-agent-name {
  color: var(--aax-primary);
  font-weight: 700;
}

.aax-print-title {
  text-align: center;
  color: var(--aax-primary);
  font-weight: 700;
  font-size: 20px;
  margin: 12px 0 16px;
}

.aax-print-subrow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--aax-primary);
  font-weight: 700;
  margin-bottom: 8px;
}

.aax-print-quote-table td,
.aax-print-persons-table td {
  border: 1px solid var(--aax-grey-400);
  padding: 6px 10px;
}

.aax-print-quote-table td:first-child,
.aax-print-persons-table td:first-child {
  color: var(--aax-primary);
  font-weight: 700;
  width: 40%;
}

.aax-print-quote-table td:last-child,
.aax-print-persons-table td:last-child {
  text-align: right;
}

.aax-print-final-row td {
  background: var(--aax-primary) !important;
  color: #fff !important;
  font-weight: 700;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.aax-print-person-name {
  font-weight: 700;
  color: var(--aax-text-title);
  margin: 10px 0 4px;
}

.aax-print-note {
  font-size: 10.5px;
  margin-top: 8px;
}

.aax-print-note b {
  color: var(--aax-primary);
}

.aax-print-benefit-table td {
  border: 1px solid var(--aax-grey-400);
  padding: 8px 10px;
  vertical-align: top;
}

.aax-print-benefit-table td:first-child {
  background: #f7f7f8;
  color: var(--aax-primary);
  font-weight: 700;
  width: 24%;
  white-space: normal;
}

.aax-print-footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 9.5px;
  color: var(--aax-text-sub);
  margin-top: 12px;
  border-top: 1px solid var(--aax-grey-300);
  padding-top: 6px;
}