/* =====================================================================
   Now Insurance Agency · Mobile Health-Quotation App
   Standalone, mobile-first stylesheet that overlays css/styles.css.
   Only active below the tablet breakpoint in index.html
   (body[data-mobile="true"]).
   ===================================================================== */

html { -webkit-text-size-adjust: 100%; }

body[data-mobile="true"] {
  margin: 0;
  color: var(--text-dark);
  background:
    radial-gradient(120% 60% at 50% 0%, #14402a 0%, #0d2a1c 42%, #071e13 100%);
  background-attachment: fixed;
  font-family: inherit;
}

body[data-mobile="true"] * {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

body[data-mobile="true"] ::selection { background: rgba(212, 175, 55, 0.28); }

/* Users should never see wide desktop columns on this page. */
body[data-mobile="true"] main,
body[data-mobile="true"] .m-shell {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

body[data-mobile="true"] main {
  padding-bottom: 96px; /* space for the sticky quote action bar */
}

/* ---------------------------------------------------------------------
   Top app bar
   --------------------------------------------------------------------- */
.m-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: env(safe-area-inset-top, 0) 0 0;
  background: rgba(7, 30, 19, 0.9);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(212, 175, 55, 0.24);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
}

.m-header-inner {
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
}

.m-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: #fff;
  text-decoration: none;
}

.m-brand-logo { width: 36px; height: 41px; flex: none; display: block; }

.m-brand-text { min-width: 0; }

.m-brand-name {
  display: block;
  font-weight: 800;
  font-size: 0.96rem;
  letter-spacing: 0.04em;
  line-height: 1.02;
  white-space: nowrap;
}

.m-brand-sub {
  display: block;
  margin-top: 2px;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-gold);
  white-space: nowrap;
}

.m-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.m-header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  min-width: 40px;
  padding: 0 12px;
  border-radius: 12px;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.12s ease, opacity 0.12s ease;
}

.m-header-btn:active { transform: scale(0.96); opacity: 0.86; }
.m-header-btn.call { background: rgba(255, 255, 255, 0.13); }
.m-header-btn.wa { background: var(--whatsapp-green); }

/* ---------------------------------------------------------------------
   Hero / intro
   --------------------------------------------------------------------- */
.m-hero {
  padding: 22px 16px 8px;
}

.m-hero-inner {
  position: relative;
  overflow: hidden;
  padding: 26px 22px 22px;
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(140% 120% at 100% 0%, rgba(212, 175, 55, 0.28) 0%, rgba(212, 175, 55, 0) 45%),
    linear-gradient(160deg, #174f30 0%, #0f3623 60%, #0a2919 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
}

.m-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-gold);
  background: rgba(212, 175, 55, 0.14);
  border: 1px solid rgba(212, 175, 55, 0.42);
}

.m-hero h1 {
  margin: 14px 0 8px;
  font-size: 1.9rem;
  line-height: 1.12;
  letter-spacing: -0.01em;
  font-weight: 900;
}

.m-hero h1 span {
  display: block;
  background: linear-gradient(92deg, #f6d477, var(--accent-gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.m-hero p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}

.m-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 18px;
}

.m-hero-stat {
  padding: 10px 8px;
  border-radius: 14px;
  text-align: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.m-hero-stat b {
  display: block;
  font-size: 1.02rem;
  font-weight: 900;
  color: var(--accent-gold);
}

.m-hero-stat span {
  display: block;
  margin-top: 2px;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.78);
}

/* ---------------------------------------------------------------------
   Quote form — phone friendly cards
   --------------------------------------------------------------------- */
body[data-mobile="true"] #quote-form {
  margin: 14px 0 0;
  padding: 0 16px;
}

body[data-mobile="true"] #quote-form > h2 {
  margin: 4px 2px 12px;
  font-size: 1.15rem;
}

body[data-mobile="true"] .mobile-quote-intro {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.28);
}

body[data-mobile="true"] .mobile-quote-intro-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(160deg, #1c6b40, #0f3a24);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
}

body[data-mobile="true"] .mobile-quote-intro strong { display: block; font-size: 0.9rem; }
body[data-mobile="true"] .mobile-quote-intro small {
  display: block;
  margin-top: 2px;
  font-size: 0.72rem;
  color: rgba(30, 41, 59, 0.72);
}

body[data-mobile="true"] .quote-step-card,
body[data-mobile="true"] .selected-plan-notice {
  margin: 12px 0;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(30, 41, 59, 0.08);
  background: #fff;
  box-shadow: 0 14px 34px rgba(10, 40, 80, 0.12);
}

body[data-mobile="true"] .mobile-step-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

body[data-mobile="true"] .mobile-step-title > span {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(160deg, var(--accent-gold), #b98311);
  box-shadow: 0 6px 14px rgba(212, 175, 55, 0.5);
}

body[data-mobile="true"] .mobile-step-title strong {
  display: block;
  font-size: 1rem;
}

body[data-mobile="true"] .mobile-step-title small {
  display: block;
  margin-top: 2px;
  font-size: 0.76rem;
  color: rgba(30, 41, 59, 0.62);
}

/* Larger touch targets */
body[data-mobile="true"] select,
body[data-mobile="true"] input[type="number"],
body[data-mobile="true"] input[type="text"],
body[data-mobile="true"] input[type="tel"],
body[data-mobile="true"] input[type="email"],
body[data-mobile="true"] input[type="search"] {
  min-height: 48px;
  border-radius: 12px;
  font-size: 1rem;
}

body[data-mobile="true"] label,
body[data-mobile="true"] .cover-type-heading span,
body[data-mobile="true"] .family-item label span {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

body[data-mobile="true"] .cover-type-card,
body[data-mobile="true"] .insurer-card {
  border-radius: 16px;
  border: 1px solid rgba(30, 41, 59, 0.08);
}

body[data-mobile="true"] .cover-type-toggle label,
body[data-mobile="true"] .group-age-options label,
body[data-mobile="true"] .radio-option {
  border-radius: 12px;
}

/* Sticky "Get Quotes" bar inside the form */
body[data-mobile="true"] .mobile-quote-actions-shell {
  position: sticky;
  bottom: 0;
  z-index: 35;
  margin: 8px -16px -16px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(243, 245, 250, 0), rgba(243, 245, 250, 0.9) 22%, #f3f5fa 60%);
}

body[data-mobile="true"] .actions-quote {
  display: flex;
  gap: 10px;
}

body[data-mobile="true"] .actions-quote .btn-primary {
  flex: 1;
  min-height: 54px;
  border-radius: 16px;
  font-size: 1rem;
  font-weight: 800;
  box-shadow: 0 12px 26px rgba(46, 125, 50, 0.45);
}

body[data-mobile="true"] .actions-quote .btn-secondary {
  flex: none;
  min-height: 54px;
  border-radius: 16px;
}

/* ---------------------------------------------------------------------
   Results
   --------------------------------------------------------------------- */
body[data-mobile="true"] .results-header {
  border-radius: 18px;
}

body[data-mobile="true"] #resultsContainer {
  margin: 6px 0 0;
}

body[data-mobile="true"] .provider-card {
  border-radius: 20px;
  box-shadow: 0 16px 38px rgba(10, 40, 80, 0.16);
}

body[data-mobile="true"] .provider-card .price {
  border-radius: 14px;
}

body[data-mobile="true"] .quote-carousel-arrow {
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

/* Trust strip */
body[data-mobile="true"] #trust .trust-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

body[data-mobile="true"] #trust .trust-item {
  border-radius: 16px;
  border: 1px solid rgba(30, 41, 59, 0.08);
  box-shadow: 0 10px 24px rgba(10, 40, 80, 0.08);
}

/* ---------------------------------------------------------------------
   Bottom footer
   --------------------------------------------------------------------- */
.m-footer {
  margin-top: 24px;
  padding: 22px 20px calc(30px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  color: rgba(255, 255, 255, 0.72);
  border-top: 1px solid rgba(212, 175, 55, 0.2);
  font-size: 0.78rem;
  line-height: 1.6;
}

.m-footer strong { color: var(--accent-gold); }

/* Keep the WhatsApp bubble above the sticky quote bar. */
body[data-mobile="true"] .floating-chat {
  bottom: calc(90px + env(safe-area-inset-bottom, 0px));
}

/* ---------------------------------------------------------------------
   Two-col story rows collapse gracefully on phones
   --------------------------------------------------------------------- */
body[data-mobile="true"] .family-row,
body[data-mobile="true"] .personal-form-row {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

body[data-mobile="true"] .family-age-pair,
body[data-mobile="true"] .group-composition-grid {
  grid-template-columns: 1fr;
}

/* ---------------------------------------------------------------------
   Modal / popup sizing for phones
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
  body[data-mobile="true"] .modal-content {
    width: 100%;
    max-width: none;
    border-radius: 22px 22px 0 0;
    margin: auto 0 0;
    max-height: 90vh;
    overflow-y: auto;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }

  body[data-mobile="true"] .modal-overlay,
  body[data-mobile="true"] .payment-popup-overlay {
    align-items: flex-end;
  }

  body[data-mobile="true"] .payment-popup-card {
    width: 100%;
    max-width: none;
    border-radius: 22px 22px 0 0;
    max-height: 90vh;
    overflow-y: auto;
    margin: auto 0 0;
  }

  body[data-mobile="true"] .summary-row {
    flex-direction: column;
    gap: 8px;
  }

  body[data-mobile="true"] .modal-actions {
    flex-direction: column;
  }

  body[data-mobile="true"] .modal-actions .btn-success,
  body[data-mobile="true"] .modal-actions .btn-whatsapp,
  body[data-mobile="true"] .modal-actions .btn-secondary {
    width: 100%;
  }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  body[data-mobile="true"] * {
    transition: none !important;
    animation: none !important;
  }
}

/* =====================================================================
   Compact hero summary (phone/tablet view)
   Phones previously had no hero at all: the header dropped straight into the
   quote card. This keeps a short green band: kicker + headline on the left,
   the insurer logo grid on the right, and the four headline stats below.
   The long intro paragraph and the "how it works" path stay hidden.
   ===================================================================== */
body[data-mobile="true"] #hero .hero-text {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas:
    "headline headline"
    "logos logos"
    "stats stats" !important;
  column-gap: 9px !important;
  row-gap: 6px !important;
  align-items: start !important;
  margin: 0 0 8px !important;
  padding: 12px 12px 14px !important;
  border: 1px solid rgba(212, 175, 55, 0.28) !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #1b5e20 0%, #123524 58%, #0d2a1c 100%) !important;
  box-shadow: 0 10px 24px rgba(7, 30, 19, 0.22) !important;
  color: #fff !important;
  text-align: left !important;
}

/* Insurer logo strip: a still row that wraps, so every insurer is visible and
   nothing drifts or gets cut off mid-logo. */
body[data-mobile="true"] #hero .hero-text .hero-insurer-grid {
  grid-area: logos !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 6px !important;
  align-content: start !important;
  width: 100% !important;
  overflow: visible !important;
  padding: 1px 1px 5px !important;
}

body[data-mobile="true"] #hero .hero-text .hero-insurer-tile {
  flex: 0 0 calc((100% - 18px) / 4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  padding: 4px 5px !important;
  border: 1px solid rgba(255, 255, 255, 0.65) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-sizing: border-box !important;
}

body[data-mobile="true"] #hero .hero-text .hero-insurer-tile img {
  display: block !important;
  width: 100% !important;
  height: 22px !important;
  object-fit: contain !important;
}

/* Kicker dropped on phones: it repeats the header tagline ("Compare Quotes &
   Apply Online") and was the heaviest element in the band. */
body[data-mobile="true"] #hero .hero-text .hero-buy-line {
  display: none !important;
}

body[data-mobile="true"] #hero .hero-text > h1 {
  grid-area: headline !important;
  margin: 0 !important;
  font-size: 1.28rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  text-align: center !important;
}

body[data-mobile="true"] #hero .hero-text > h1 span {
  color: var(--accent-gold) !important;
}

/* Summarised: no paragraph, no journey badges on phones. */
body[data-mobile="true"] #hero .hero-text > p:not(.hero-buy-line),
body[data-mobile="true"] #hero .hero-text .hero-journey {
  display: none !important;
}

body[data-mobile="true"] #hero .hero-text .hero-stats {
  grid-area: stats !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin: 9px 0 0 !important;
}

body[data-mobile="true"] #hero .hero-text .stat-card {
  padding: 6px 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.10) !important;
}

body[data-mobile="true"] #hero .hero-text .stat-card .num {
  font-size: 0.95rem !important;
  line-height: 1.1 !important;
  color: var(--accent-gold) !important;
}

body[data-mobile="true"] #hero .hero-text .stat-card .label {
  font-size: 0.52rem !important;
  line-height: 1.15 !important;
  opacity: 0.9 !important;
}

/* =====================================================================
   Mobile polish pass
   1. Insurer strip: exactly four uniform cards per view, nothing half-cut
   2. Hero: tighter gap between the strip and the statistics
   3. Quote engine: more air under the heading, subtler unselected chips
   4. One gold value across the dark; Add Members outlined in the same gold
   5. Sticky action bar: full-width gold CTA, Reset demoted to a text button
   ===================================================================== */
body[data-mobile="true"] #hero .hero-text .hero-insurer-tile img {
  height: 24px !important;
}

body[data-mobile="true"] #hero .hero-text {
  row-gap: 4px !important;
}

body[data-mobile="true"] #hero .hero-text .hero-stats {
  margin-top: 0 !important;
}

/* Quote engine: heading gets room to breathe above the separator and selectors. */
body[data-mobile="true"] #quote-form > h2 {
  padding-bottom: 13px !important;
  margin-bottom: 18px !important;
}

/* Selector text: every benefit dropdown uses the Dental OP row's size and
   colour so the rows read as one set. Each selector mirrors the older rule that
   set the odd value and adds the control's own ID, which is what wins here. */
body[data-mobile="true"] #quote-form .quote-step-cover-selection .inpatient-card > .inpatient-control > #inpatientLimit:not(:disabled),
body[data-mobile="true"] #quote-form .quote-step-cover-selection .inpatient-card > #inpatientScopeGroup > #inpatientScopeSelect:not(:disabled),
body[data-mobile="true"] #quote-form .quote-step-benefits .limit-scope-wrapper > #outpatientLimit:not(:disabled),
body[data-mobile="true"] #quote-form .quote-step-benefits .limit-scope-wrapper > #outpatientScopeGroup > #outpatientScopeSelect:not(:disabled),
body[data-mobile="true"] #quote-form .quote-step-benefits .limit-scope-wrapper > #dentalLimit:not(:disabled),
body[data-mobile="true"] #quote-form .quote-step-benefits .limit-scope-wrapper > #opticalLimit:not(:disabled),
body[data-mobile="true"] #quote-form .quote-step-benefits .limit-scope-wrapper > #maternityLimit:not(:disabled),
body[data-mobile="true"] #quote-form .quote-step-benefits .limit-scope-wrapper:has(#maternityLimit) > #maternityNote:not(:disabled) {
  font-size: 0.68rem !important;
  color: #111 !important;
}

/* Locked rows: one grey placeholder colour instead of the three in use. */
body[data-mobile="true"] #quote-form .quote-step-cover-selection .inpatient-card > .inpatient-control > #inpatientLimit:disabled,
body[data-mobile="true"] #quote-form .quote-step-cover-selection .inpatient-card > #inpatientScopeGroup > #inpatientScopeSelect:disabled,
body[data-mobile="true"] #quote-form .quote-step-benefits .limit-scope-wrapper > #outpatientLimit:disabled,
body[data-mobile="true"] #quote-form .quote-step-benefits .limit-scope-wrapper > #outpatientScopeGroup > #outpatientScopeSelect:disabled,
body[data-mobile="true"] #quote-form .quote-step-benefits .limit-scope-wrapper > #dentalLimit:disabled,
body[data-mobile="true"] #quote-form .quote-step-benefits .limit-scope-wrapper > #opticalLimit:disabled,
body[data-mobile="true"] #quote-form .quote-step-benefits .limit-scope-wrapper > #maternityLimit:disabled,
body[data-mobile="true"] #quote-form .quote-step-benefits .limit-scope-wrapper:has(#maternityLimit) > #maternityNote:disabled {
  font-size: 0.68rem !important;
  color: #9aa3ad !important;
}

/* Member selectors (Principal/Spouse/Children) inherit the 16px that the form
   controls are given; bring them down to the benefit selectors' size too. */
body[data-mobile="true"] #quote-form #individualFamilyDetails #principalAge,
body[data-mobile="true"] #quote-form #individualFamilyDetails #spouseAge,
body[data-mobile="true"] #quote-form #individualFamilyDetails #childrenAge017,
body[data-mobile="true"] #quote-form #individualFamilyDetails #childrenAge1824,
body[data-mobile="true"] #quote-form #childrenCount {
  font-size: 0.68rem !important;
}

/* Unselected chips sit back so the green selected state reads first. */
body[data-mobile="true"] #quote-form .cover-type-toggle label {
  border-color: #e9eef3 !important;
}

/* Cover type: "Individual / Family" needs more room than the other two, so its
   column grows (and its text is a touch bigger) while Group shrinks. */
body[data-mobile="true"] #quote-form .cover-type-toggle {
  grid-template-columns: 0.88fr 1.32fr 0.84fr !important;
}

body[data-mobile="true"] #quote-form .cover-type-toggle > label:has(input[value="individual_family"]) {
  /* Scales down on narrow phones so the label always stays inside its chip. */
  font-size: clamp(0.6rem, 2.95vw, 0.72rem) !important;
}

body[data-mobile="true"] #quote-form .cover-type-toggle > label:has(input[value="group"]) {
  font-size: 0.63rem !important;
}

body[data-mobile="true"] #quote-form .cover-type-toggle .children-only-label {
  font-size: 0.67rem !important;
}

body[data-mobile="true"] #quote-form .cover-type-toggle label:has(input:checked) {
  border-color: var(--primary-navy) !important;
}

/* One gold value: divider, CTA, Add Members outline all use --accent-gold. */
body[data-mobile="true"] header .header-divider {
  background: var(--accent-gold) !important;
}

body[data-mobile="true"] #quote-form #groupFamiliesLiveTotal {
  border: 1px solid var(--accent-gold) !important;
  background: #fdf8ea !important;
  color: #8a6a14 !important;
}

/* Sticky action bar: only the buttons float; the notes stay in the flow.
   (Prefixed with #quote-form so these beat the older mobile bar rules.) */
body[data-mobile="true"] #quote-form .mobile-quote-actions-shell {
  display: contents !important;
}

body[data-mobile="true"] #quote-form .actions-quote {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 35 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 5px !important;
  margin: 14px 0 0 !important;
  padding: 9px 12px 10px !important;
  background: #fff !important;
  border-top: 1px solid #e9eef3 !important;
  border-radius: 16px 16px 0 0 !important;
  box-shadow: 0 -8px 20px rgba(15, 23, 42, 0.10) !important;
}

body[data-mobile="true"] #quote-form #getQuotesBtn {
  width: 100% !important;
  min-height: 48px !important;
  background: var(--accent-gold) !important;
  color: #123524 !important;
  border: 0 !important;
  border-radius: 12px !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 16px rgba(212, 175, 55, 0.28) !important;
}

/* Reset: quiet text button, icon kept, no competing weight. */
body[data-mobile="true"] #quote-form #resetBtn {
  justify-self: center !important;
  width: auto !important;
  height: auto !important;
  min-height: 26px !important;
  max-height: 26px !important;
  padding: 0 8px !important;
  background: transparent !important;
  border: 0 !important;
  color: #7b8794 !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

body[data-mobile="true"] #quote-form #resetBtn i {
  color: #9aa5b1 !important;
}

/* =====================================================================
   Continuous dark top (phone/tablet view)
   The hero band's green now runs up behind the header, so the logo and the
   menu sit on the dark instead of a light bar. Header text is re-coloured
   for contrast; the band loses its card edges so the two read as one block.
   ===================================================================== */
body[data-mobile="true"] header {
  background: #123524 !important;
  box-shadow: none !important;
}

/* The logo strip kept the old light bar background; let the dark header show. */
body[data-mobile="true"] header .header-logo-wrapper {
  background: transparent !important;
}

body[data-mobile="true"] header .header-brand .brand-name {
  color: #fff !important;
}

body[data-mobile="true"] header .brand-tagline .tagline-default,
body[data-mobile="true"] header .brand-tagline .tagline-mobile {
  color: var(--accent-gold) !important;
}

body[data-mobile="true"] header .nav-links a {
  color: #e8f2ea !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}

body[data-mobile="true"] header .nav-links a:hover {
  color: var(--accent-gold) !important;
}

/* The active item is marked with a gold outline rather than a fill, matching the
   contact chips; every other item stays plain white text with no fill. */
body[data-mobile="true"] header .nav-links a.active {
  background: transparent !important;
  border: 1px solid var(--accent-gold) !important;
  border-radius: 9px !important;
  color: var(--accent-gold) !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

/* Contact icons: gold glyphs in rounded-square gold outlines, matching the
   "Compare & Apply" chip rather than the old filled circles. */
body[data-mobile="true"] header .nav-cta > .phone,
body[data-mobile="true"] header .nav-cta > .header-whatsapp {
  background: rgba(212, 175, 55, 0.14) !important;
  border: 1px solid rgba(212, 175, 55, 0.75) !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  color: var(--accent-gold) !important;
}

/* Band loses its card edges and bleeds to the header's full width. */
body[data-mobile="true"] #hero .hero-text {
  margin-left: -4px !important;
  margin-right: -4px !important;
  margin-bottom: 8px !important;
  padding: 10px 14px 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: linear-gradient(180deg, #123524 0%, #0d2a1c 100%) !important;
}

/* ===== quote-ribbon-square-bottom-final =====
   Each sticky badge ends square at the bottom and carries no coloured rule
   along its lower edge, so it reads as a tab sitting on the ribbon. */
#quoteStickyRibbon .quote-ribbon-item{
  border-radius:16px 16px 0 0!important;
  border-bottom:0!important;
  border-bottom-width:0!important;
  border-bottom-color:transparent!important;
  box-shadow:0 -4px 12px rgba(15,23,42,.10)!important;
}

/* ===== quote-ribbon-grey ===== */
#quoteStickyRibbon{
  background:linear-gradient(135deg,#4b5563,#374151)!important;
  border-top:1px solid rgba(255,255,255,.20)!important;
  border-bottom:1px solid rgba(0,0,0,.28)!important;
  box-shadow:0 6px 18px rgba(17,24,39,.22)!important;
}

/* ===== quote-ribbon-light-green ===== */
#quoteStickyRibbon{
  background:linear-gradient(135deg,#e4f6ea,#c9ebd7)!important;
  border-top:1px solid rgba(255,255,255,.60)!important;
  border-bottom:1px solid rgba(22,101,52,.18)!important;
  box-shadow:0 6px 18px rgba(22,101,52,.12)!important;
}

/* ===== quote-ribbon-dark-green-blue ===== */
#quoteStickyRibbon{
  background:linear-gradient(135deg,#0d3b3f,#0e3a5c)!important;
  border-top:1px solid rgba(255,255,255,.20)!important;
  border-bottom:1px solid rgba(0,0,0,.32)!important;
  box-shadow:0 6px 18px rgba(13,59,63,.30)!important;
}

/* ===== quote-ribbon-price-dark ===== */
#quoteStickyRibbon .quote-ribbon-item-price{
  color:#123524!important;
}
#quoteStickyRibbon .quote-ribbon-price-unit{
  color:#5b6b7c!important;
  font-weight:600!important;
}

/* ===== quote-ribbon-166534 ===== */
#quoteStickyRibbon{
  background:#166534!important;
  border-top:1px solid rgba(255,255,255,.18)!important;
  border-bottom:1px solid rgba(0,0,0,.25)!important;
  box-shadow:0 6px 18px rgba(22,101,52,.26)!important;
}

/* ===== quote-ribbon-173c2c ===== */
#quoteStickyRibbon{
  background:#173c2c!important;
  border-top:1px solid rgba(255,255,255,.16)!important;
  border-bottom:1px solid rgba(0,0,0,.28)!important;
  box-shadow:0 6px 18px rgba(23,60,44,.28)!important;
}

/* ===== ribbon-premium-03574a =====
   Ribbon band and the premium figure share the same dark teal-green. */
#quoteStickyRibbon{
  background:#03574a!important;
  border-top:1px solid rgba(255,255,255,.16)!important;
  border-bottom:1px solid rgba(0,0,0,.28)!important;
  box-shadow:0 6px 18px rgba(3,87,74,.28)!important;
}
#quoteStickyRibbon .quote-ribbon-item-price,
.provider-card .quotecard-figure .price{
  color:#03574a!important;
}