/* Global variable */
:root {
  --primary-color: #ff2200; 
  --primary-color-500: #ff220050; 
  --secondary-color:#fff0f1;
  --black:#424242;
  --white:#ffffff;
      --blaze-red: #ff2300;
    --blaze-orange: #ff9e00;
    --orange-50: #fff7ed;
    --orange-200: #fed7aa;
    --orange-400: #fb923c;
    --orange-500: #f97316;
    --orange-600: #ea580c;
    --red-400: #f87171;
    --red-500: #ef4444;
    --red-600: #dc2626;
    --rose-500: #f43f5e;
    --pink-500: #ec4899;
    --amber-500: #f59e0b;
    --amber-600: #d97706;

}

.text-primary{color:var(--primary-color) !important;}
.text-secondary{color:var(--secondary-color) !important;}

.lead { font-weight: 500; }

/* ──────────────────────────────────────────────────────────────────────
   NAVBAR — minimalist centred-logo only. No nav links, no CTA.
   Footer carries the in-page navigation now.
   ────────────────────────────────────────────────────────────────────── */
.navbar-centered .navbar-brand { padding: 0; }
.navbar-logo {
    height: 96px;
    width: auto;
    max-width: 100%;
    display: block;
}
@media (max-width: 575.98px) {
    .navbar-logo { height: 64px; }
}

/* ──────────────────────────────────────────────────────────────────────
   HERO BAND — flat orange band that replaced the old rotating carousel.
   Navbar sits on top of it (still transparent); centred copy below.
   Softened from the original saturated orange→red — uses peach-to-orange
   tones with a subtle dot texture and a gentler bottom fade so the band
   doesn't dominate the page.
   ────────────────────────────────────────────────────────────────────── */
.hero-band {
    background: linear-gradient(160deg, #ffb24d 0%, #ff8a3d 60%, #ff5a30 100%);
    color: #ffffff;
    padding: 0 0 130px;
    position: relative;
    overflow: hidden;
}

/* Subtle dot pattern adds texture without competing for attention. */
.hero-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
    opacity: .55;
    z-index: 0;
}

.hero-band::after {
    /* Soft glow blob in the bottom-right, brand-tinted, decorative only */
    content: "";
    position: absolute;
    right: -120px;
    bottom: -140px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(255, 220, 130, .30);
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

.hero-band-content {
    position: relative;
    z-index: 1;
    padding-top: 20px;
}

.hero-band-pill {
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .35);
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 7px 16px;
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.hero-band-pill strong { font-weight: 700; }
.hero-band-pill .pulse-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #ffffff;
    animation: heroBandPulse 1.6s ease-in-out infinite;
}
@keyframes heroBandPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .75); }
    50%      { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
}

.hero-band-title {
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.1;
    text-shadow: 0 4px 20px rgba(120, 30, 0, .25);
}
.hero-band-title .fst-italic { color: #fff7ed; }

.hero-band-tagline {
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    opacity: .94;
    font-weight: 500;
}

/* Footnote callouts in the hero — same three colour-coded dots that
   appear next to each competitor in the comparison table. A thin white
   ring keeps the orange dot legible against the orange hero band. */
.hero-band-callouts {
    display: inline-flex;
    gap: 4px;
    margin-left: 10px;
    vertical-align: top;
    /* Pull up so dots sit near the top of the capital letters */
    transform: translateY(.85em);
}
.hero-band-callouts .compare-tag {
    width: 10px;
    height: 10px;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9), 0 1px 2px rgba(0, 0, 0, .15);
}

.hero-band-footnote {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    font-style: italic;
    color: rgba(255, 255, 255, .9);
    background: rgba(0, 0, 0, .12);
    padding: 5px 12px 5px 10px;
    border-radius: 999px;
    backdrop-filter: blur(2px);
}
.hero-band-footnote .compare-tag {
    width: 8px;
    height: 8px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .9);
    margin-right: 2px;
}
.hero-band-footnote .compare-tag + .compare-tag {
    margin-left: -2px;   /* tighten the dot cluster before the text */
}
.hero-band-footnote .compare-tag:last-of-type {
    margin-right: 6px;
}

/* ──────────────────────────────────────────────────────────────────────
   PLAN COMPARE — dark-navy section. Each plan, the compare list, the
   daily-roaming pack and the App-Store QR pair are individual white
   cards floating on the dark backdrop.
   ────────────────────────────────────────────────────────────────────── */
.plan-compare {
    padding-top: 0;
    padding-bottom: 4rem;
    position: relative;
    z-index: 2;
}

.plan-compare-card {
    background: #fff;
    border-radius: 24px;
    padding: 36px 36px 28px;
    margin-top: -110px;
    box-shadow: 0 30px 80px -20px rgba(120, 30, 0, .22),
                0 6px 18px rgba(0, 0, 0, .04);
}

.plan-compare h6 { font-size: 12px; }

/* Trust strip — quick selling points beneath the hero */
.trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 28px;
    justify-content: center;
    align-items: center;
    padding: 14px 18px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fff7ed, #ffe7d0);
    border: 1px solid #fde0b3;
}
.trust-strip li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #9a3412;
}
.trust-strip li i { color: var(--blaze-red, #ff2300); font-size: 16px; }

@media (max-width: 575.98px) {
    .hero-band { padding-bottom: 90px; }
    .plan-compare-card { padding: 22px 18px; margin-top: -70px; border-radius: 18px; }
    .trust-strip { gap: 10px 16px; font-size: 12px; padding: 12px 14px; }
}

/* Section eyebrow leftover — neutralised */
.section-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #adb5bd;
    margin-bottom: 1rem;
}

/* ──────────────────────────────────────────────────────────────────────
   ROAMING BANNER — single-line decorative SVG inside the plan-compare
   card. No text, no CTA — just an illustration suggesting global
   roaming (dotted-continent map, pins, flight paths, phone, planes).
   ────────────────────────────────────────────────────────────────────── */
.roaming-banner {
    background: linear-gradient(135deg, #fff7ed 0%, #ffe7d0 100%);
    border: 1px solid #fde0b3;
    border-radius: 20px;
    padding: 24px;
    overflow: hidden;
}

.roaming-art {
    width: 100%;
    height: auto;
    display: block;
    max-height: 460px;
}

@media (max-width: 575.98px) {
    .roaming-banner { padding: 14px; border-radius: 16px; }
}

/* Plan rows ─────────────────────────────────────────── */
.plan-list { display: flex; flex-direction: column; gap: 6px; }

.plan-row {
    margin: 0;
    position: relative;
    padding: 14px 18px;
    border-radius: 14px;
    border: 2px solid transparent;
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.plan-row + .plan-row { border-top: 1px solid #f0f0f0; }

/* Soft left-edge accent that fills in on hover — premium feel without a heavy outline */
.plan-row::before {
    content: "";
    position: absolute;
    top: 12px; bottom: 12px;
    left: 0;
    width: 4px;
    border-radius: 2px;
    background: var(--blaze-red, #ff2300);
    opacity: 0;
    transform: scaleY(.5);
    transform-origin: center;
    transition: opacity .2s ease, transform .25s ease;
}
.plan-row:hover {
    background: #fffaf2;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px -10px rgba(255, 90, 0, .18);
}
.plan-row:hover::before { opacity: 1; transform: scaleY(1); }

.plan-row h5 { font-size: 0.98rem; margin-bottom: 2px; }
.plan-row small { font-size: 12.5px; }

/* Icon avatar at the start of each plan row */
.plan-row-icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: linear-gradient(135deg, #fff7ed, #ffe7d0);
    color: var(--blaze-red, #ff2300);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    border: 1px solid #fde0b3;
}
.plan-row.is-popular .plan-row-icon {
    background: linear-gradient(135deg, #ff9e00, #ff2300);
    color: #fff;
    border-color: transparent;
}

.plan-row-price {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--blaze-red, #ff2300);
    line-height: 1;
}
.plan-row-price + small { color: var(--blaze-orange, #ff9e00) !important; font-weight: 500; }

/* Buy now button — compact pill with gradient, single-line text, animated arrow */
.plan-row .btn-buy {
    background: linear-gradient(135deg, #ff7a30 0%, #ff2300 100%);
    background-size: 160% 100%;
    background-position: 0% 50%;
    border: 1px solid transparent;
    color: #fff;
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;             /* prevents "Buy / now ↩" wrap on tight columns */
    box-shadow: 0 4px 10px rgba(255, 35, 0, .22);
    transition: transform .15s ease, box-shadow .15s ease, background-position .3s ease;
}
.plan-row .btn-buy:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(255, 35, 0, .32);
    color: #fff;
    background-position: 100% 50%;
}
.btn-buy .btn-buy-arrow {
    font-size: 11px;
    transition: transform .2s ease;
    margin-left: 0 !important;
}
.plan-row .btn-buy:hover .btn-buy-arrow { transform: translateX(3px); }

/* Most-popular highlighted row */
.plan-row.is-popular {
    border-color: var(--blaze-red, #ff2300);
    background: #fffaf2;
}
.plan-row-badge {
    position: absolute;
    top: -10px;
    left: 18px;
    background: var(--blaze-orange, #ff9e00);
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 2px 8px;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(255, 158, 0, .35);
}

/* Family XL stepper row */
/*.plan-row.is-xl { background: #fffaf2; border-color: #fed7aa; }*/
.plan-row-xl-stepper {
    border-top: 1px dashed #fed7aa;
    padding-top: 14px;
}

.sim-stepper { user-select: none; }
.sim-stepper-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--blaze-red, #ff2300);
    background: #fff;
    color: var(--blaze-red, #ff2300);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.sim-stepper-btn:hover {
    background: var(--blaze-red, #ff2300);
    color: #fff;
}
.sim-stepper-value {
    min-width: 28px;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 700;
    color: #1a1a1a;
}

/* Compare list ─────────────────────────────────────── */
.compare-list { border: 1px solid #f0f0f0; border-radius: 14px; overflow: hidden; }
.compare-row {
    font-size:14px;
    padding: 14px 14px;
    border-bottom: 1px solid #f0f0f0;
    background: #ffffff;
    transition: background-color .15s ease;
}
.compare-row:last-child { border-bottom: none; }
.compare-row:hover { background: #fafafa; }

.compare-row.is-us {
    background: #fff7ed;
    border-bottom: 1px solid #fed7aa;
}
.compare-row.is-us:hover { background: #fff2dc; }

.compare-pill {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding:0px;
    border-radius: 999px;
    margin-left: 6px;
    vertical-align: 2px;
}
.compare-pill--us   { background: var(--blaze-orange, #ff9e00); color: #fff; }
.compare-pill--best {color: #15803d; margin-left: 0; }

/* Carrier "logo" — letter circle. Brand-coloured for BlazeMobile, muted grey for
   competitors. Gives the compare column visual rhythm without us shipping
   third-party trademarks. */
.compare-logo {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f1f3f5;
    color: #6c757d;
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e9ecef;
}
.compare-logo--us {
    background: linear-gradient(135deg, #ff9e00, #ff2300);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 10px rgba(255, 35, 0, .25);
}

/* Delta annotations — colour-tinted so "more expensive" reads as warning
   and "less data" reads as a negative. Plain text remains muted grey. */
.compare-delta             { color: #6c757d; }
.compare-delta--up         { color: #dc2626; font-weight: 600; }  /* costs more */
.compare-delta--down       { color: #b45309; font-weight: 600; }  /* less inclusion */

.compare-footnotes li { margin-bottom: 3px; }
.compare-footnotes li:last-child { margin-bottom: 0; }

/* Mobile cleanup ───────────────────────────────────── */
@media (max-width: 767.98px) {
    .plan-row { padding: 18px 16px; }
    .plan-row-price { font-size: 1.5rem; }
    .plan-row .btn-buy { width: auto; white-space: nowrap; }
}

/* ──────────────────────────────────────────────────────────────────────
   FOOTER — amaysim-inspired layout. Cream background, dark navy text,
   five columns (logo · Our company · Help · Follow us · Download app)
   with a quiet Acknowledgement of Country band and a bottom legal strip.
   The orange "Get the App" CTA above remains unchanged.
   ────────────────────────────────────────────────────────────────────── */
.footer-main {
    background: #fff8ed;
    color: #1a1a2e;
}

.footer-logo-mark {
    height: auto;
    max-height: 80px;
    width: auto;
    max-width: 220px;
    display: block;
}

.footer-heading {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 1.1rem;
    letter-spacing: -0.005em;
}

.footer-links { font-size: 14.5px; line-height: 1; margin: 0; }
.footer-links li { margin-bottom: 14px; }
.footer-links li:last-child { margin-bottom: 0; }
.footer-links a {
    color: #1a1a2e;
    text-decoration: none;
    transition: color .15s ease;
}
.footer-links a:hover { color: var(--blaze-red, #ff2300); }

/* Legal links — 2-column CSS flow within a single grid cell */
.footer-legal-cols {
    column-count: 2;
    column-gap: 2rem;
}
.footer-legal-cols > li {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}
@media (max-width: 575.98px) {
    .footer-legal-cols { column-count: 1; }
}

/* ─── Leave-a-message modal (out-of-hours Jitbit ticket) ───────────────────── */
.ticket-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.ticket-modal-overlay[hidden] { display: none !important; }

.ticket-modal-dialog {
    background: #fff;
    border-radius: .75rem;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    animation: ticketSlideIn .2s ease;
}
@keyframes ticketSlideIn {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.ticket-modal-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.25rem 1.5rem .75rem;
    border-bottom: 1px solid #f0f0f0;
}
.ticket-modal-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111;
    margin: 0;
    flex: 1;
}
.ticket-modal-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: #888;
    cursor: pointer;
    padding: .25rem .5rem;
    border-radius: .375rem;
    line-height: 1;
    transition: background .15s, color .15s;
}
.ticket-modal-close:hover { background: #f4f4f4; color: #111; }

.ticket-modal-desc {
    margin: .875rem 1.5rem .25rem;
    font-size: .85rem;
    color: #666;
    line-height: 1.5;
}
.ticket-form-group {
    padding: .625rem 1.5rem 0;
}
.ticket-form-group label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: #444;
    margin-bottom: .3rem;
    letter-spacing: .01em;
}
.ticket-form-input {
    width: 100%;
    border: 1.5px solid #ddd;
    border-radius: .5rem;
    padding: .6rem .875rem;
    font-size: .9rem;
    color: #222;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
    outline: none;
    font-family: inherit;
}
.ticket-form-input:focus {
    border-color: var(--blaze-red, #ff2300);
    box-shadow: 0 0 0 3px rgba(255,35,0,.12);
}
.ticket-form-textarea {
    resize: vertical;
    min-height: 90px;
}
.ticket-error {
    margin: .5rem 1.5rem 0;
    font-size: .8rem;
    color: var(--red-600, #dc2626);
    min-height: 1.1em;
}
.ticket-submit-btn {
    display: block;
    width: calc(100% - 3rem);
    margin: 1rem 1.5rem 1.5rem;
    padding: .75rem;
    background: var(--blaze-red, #ff2300);
    color: #fff;
    border: none;
    border-radius: .5rem;
    font-size: .9375rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, opacity .15s;
    text-align: center;
}
.ticket-submit-btn:hover   { background: #cc1c00; }
.ticket-submit-btn:disabled { opacity: .6; cursor: default; }

.ticket-success {
    padding: 2.5rem 1.5rem 2rem;
    text-align: center;
}
.ticket-success-icon {
    font-size: 3rem;
    color: #22c55e;
    display: block;
    margin-bottom: .75rem;
}
.ticket-success-heading {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: .4rem;
    color: #111;
}
.ticket-success p {
    color: #666;
    font-size: .875rem;
    margin-bottom: 1.5rem;
}

/* Follow us — social icon + label */
.footer-social a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.footer-social i {
    width: 18px;
    text-align: center;
    color: #1a1a2e;
    font-size: 15px;
}

/* QR card — clean white surface, subtle shadow */
.footer-qr-card {
    display: inline-block;
    padding: 12px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .04);
}
.footer-qr-card img {
    width: 140px;
    height: 140px;
    image-rendering: pixelated;  /* keep QR pixel-sharp at any zoom */
    display: block;
}

/* Acknowledgement of Country — quiet band, navy text */
.footer-acknowledgement {
    color: #1a1a2e;
    font-size: 13.5px;
    line-height: 1.7;
    text-align:center;
    
}
.footer-acknowledgement small { font-size: inherit; }

/* Divider */
.footer-main .footer-divider {
    border: 0;
    border-top: 1px solid rgba(26, 26, 46, .12);
    margin: 1.25rem 0;
}

/* Bottom row — terms / privacy / accessibility left, copyright right */
.footer-bottom-row { padding-top: .5rem; }
.footer-bottom-links a {
    color: #1a1a2e;
    text-decoration: none;
    font-size: 13.5px;
    transition: color .15s ease;
}
.footer-bottom-links a:hover { color: var(--blaze-red, #ff2300); }

.footer-main .footer-copyright {
    color: #1a1a2e;
    font-size: 13.5px;
    opacity: .85;
}

@media (max-width: 991.98px) {
    .footer-logo-mark { max-height: 70px; height: auto; width: auto; max-width: 180px; }
}

/* ─── Plans horizontal scroller (active when > 3 plans returned) ─────────
   Flex layout — arrows live in dedicated side gutters and never overlap
   card content. Scrollbar hidden. Arrows fully disappear at start/end. */
.plans-scroller-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.plans-scroller {
    flex: 1 1 auto;
    min-width: 0;                       /* let flex item shrink to fit */
    display: flex;
    flex-wrap: nowrap;
    gap: 1.5rem;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* Padding has to clear, on every side:
         • top    — the "RECOMMENDED" badge (~15px above the card)
                    + .plan-card:hover translateY(-8px) lift
                    + 30px-radius drop shadow
         • bottom — hover lift + drop shadow (no badge, but shadow grows down)
         • sides  — 30px drop shadow either side of each card
       Without this, hover shadows get clipped by the scroll-overflow edge. */
    padding: 36px 32px 40px;
    -webkit-overflow-scrolling: touch;

    /* Hide scrollbar */
    scrollbar-width: none;              /* Firefox */
    -ms-overflow-style: none;           /* Legacy Edge / IE */
}
.plans-scroller::-webkit-scrollbar {    /* Chrome / Safari / Edge */
    display: none;
    width: 0;
    height: 0;
}

.plans-scroller-item {
    flex: 0 0 calc((100% - 3rem) / 3);   /* show 3 cards on desktop */
    min-width: 280px;
    max-width: 100%;
    scroll-snap-align: start;
    display: flex;
}
.plans-scroller-item > .plan-card { width: 100%; }

@media (max-width: 991.98px) {
    .plans-scroller-item {
        flex: 0 0 calc((100% - 1.5rem) / 2); /* 2 cards on tablet */
    }
}
@media (max-width: 575.98px) {
    .plans-scroller-item {
        flex: 0 0 86%;                       /* 1 card + peek on mobile */
    }
}

/* Arrow buttons live in flex columns to the left/right of the scroller */
.plans-scroller-arrow {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: var(--blaze-red, #ff2300);
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(255, 35, 0, .18),
                0 0 0 1px rgba(255, 35, 0, .15);
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.plans-scroller-arrow:hover {
    transform: scale(1.06);
    box-shadow: 0 10px 24px rgba(255, 35, 0, .28),
                0 0 0 1px rgba(255, 35, 0, .25);
}

/* When at start/end, fully disappear (no dim "disabled" look) but keep
   the column width via visibility: hidden so cards don't jump. */
.plans-scroller-arrow:disabled,
.plans-scroller-arrow.is-hidden {
    visibility: hidden;
    pointer-events: none;
}

@media (max-width: 575.98px) {
    .plans-scroller-arrow { display: none; }   /* mobile: swipe only */
}


.bg-primary{background-color:var(--primary-color) !important;}
.bg-secondary{background-color:var(--secondary-color) !important;}
.bg-gradient-primary{background: linear-gradient(to right, #fed7aa, #fecaca);}


.btn-primary {
    color: var(--white);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-primary:hover {
    color: var(--white);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-outline-primary:hover {
    color: var(--white);
    border-color: var(--primary-color);
    background-color: var(--primary-color);
}
.btn-check:active+.btn-primary:focus, .btn-check:checked+.btn-primary:focus, .btn-primary.active:focus, .btn-primary:active:focus, .show>.btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .25rem var(--primary-color-500);
}
.btn-check:focus+.btn-primary, .btn-primary:focus {
    color: var(--white);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 .25rem var(--primary-color-500);
}

.btn-check:focus+.btn-outline-primary, .btn-outline-primary:focus {
    box-shadow: 0 0 0 .25rem var(--primary-color-500);
}
.btn-check:active+.btn-outline-primary:focus, .btn-check:checked+.btn-outline-primary:focus, .btn-outline-primary.active:focus, .btn-outline-primary.dropdown-toggle.show:focus, .btn-outline-primary:active:focus {
    box-shadow: 0 0 0 .25rem var(--primary-color-500);
}
.btn-check:active+.btn-outline-primary, .btn-check:checked+.btn-outline-primary, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show, .btn-outline-primary:active {
   color: var(--white);
    border-color: var(--primary-color);
    background-color: var(--primary-color);
}



/*second header css*/
/* Full-width hero slider background */
        .hero-slider-wrapper {
            position: relative;
            min-height: 100vh;
            overflow: hidden;
        }
        
        .hero-slider-wrapper #heroCarousel {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
        }
        
        .hero-slider-wrapper .carousel-inner,
        .hero-slider-wrapper .carousel-item {
            height: 100%;
        }
        
        .hero-slider-wrapper .carousel-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .hero-slider-wrapper::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(27, 100, 98, 0.15);
            z-index: 1;
            pointer-events: none;
        }
        
        .hero-slider-wrapper .navbar{position:relative; z-index: 3;}        
        .hero-slider-wrapper .hero-content {position: relative;z-index: 2;pointer-events: none;}
        
        .navbar {
            background: transparent !important;
        }
        
        .hero-slider-wrapper .carousel-indicators {
            z-index: 2;
        }
        .hero-image {
            width: 100%;
            height: auto;
            border-radius: 15px;
            object-fit: cover;
        }
        
        .carousel-indicators button {
            background-color: #FFB0A4;
            width: 20px;
            height: 6px;
            border-radius: 10px;
        }
        
        .carousel-indicators button.active {
            background-color: var(--secondary-color);
        }
        
       /* footer {
            border-top: 1px solid rgba(0, 0, 0, 0.15);
            padding: 40px 0 20px;
            margin-top: 80px;
        }*/
        
        .data-amount {
            font-size: 24px;
            font-weight: 700;
        }
        
        @media (max-width: 768px) {
            .hero-section {
                padding: 40px 20px;
            }
            
            .price {
                font-size: 36px;
            }
            
            .section-title {
                font-size: 24px;
            }
        }

        .banner-title{position:absolute;
                      top:-60px;
                      color:#fefcee;
        }

        .navbar-light .navbar-nav .nav-link{
            color:#fff;
        }
        .navbar-light .navbar-nav .nav-link:hover{
            color:var(--secondary-color);
        }

/*Second header CSS*/












body {
    box-sizing: border-box;
    color:var(--black);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    width: 100%;
}



/*Layout 2 css*/
:root {
            --primary-red: #FF2200;
            --light-pink: #FFF0F1;
            --light-pink-border: rgba(255, 206, 206, 0.5);
            --gray-text: #424242;
            --light-gray: #C2C0C0;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            color: var(--gray-text);
            overflow-x: hidden;
        }
        
        /* Header Navigation */
        .top-nav {
            padding: 1rem 0;
            background: white;
        }
        
        .top-nav a {
            color: var(--gray-text);
            text-decoration: none;
            margin: 0 1rem;
            font-size: 14px;
        }
        
        .top-nav i {
            margin-right: 0.5rem;
        }
        
       
        
        .logo-text {
            font-size: 48px;
            font-weight: bold;
            color: #FF9500;
            font-style: italic;
        }
        
        .logo-badge {
            background: var(--primary-red);
            color: white;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 14px;
            display: inline-block;
            transform: rotate(-5deg);
            margin-left: 0.5rem;
        }
        
        .btn-download {
            background: var(--primary-red);
            color: white;
            padding: 0.75rem 2rem;
            border-radius: 50px;
            border: none;
            font-weight: 600;
            box-shadow: 0 4px 8px rgba(255, 34, 0, 0.25);
        }
        
        .btn-download:hover {
            background: #CC1B00;
            color: white;
        }
        
        .hero-image {
            border-radius: 15px;
            width: 100%;
            height: 300px;
            object-fit: cover;
        }
        
        /* Support Cards */
        .support-card {
    transition: all 0.3s ease;    
    border-radius: 15px;
}

.support-card:hover {
    transform: translateY(-8px);
    border-color: #fed7aa;
    
}

        .support-card {
            background: white;
            border: 1px solid var(--light-pink-border);
            border-radius: 15px;
            padding: 1rem;
            height: 100%;
            transition: all 0.3s ease;
        }
        
        .support-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .support-card.featured {
            border: 2px solid var(--primary-red);
        }
        
        .support-icon {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: #FFE2E3;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            font-size: 2rem;
            color: var(--primary-red);
        }
        
        .support-card h3 {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }
        
        .support-card p {
            font-size: 14px;
            margin: 0;
            padding:0 0 10px 0;
        }
        
        .support-card.featured p {
            color: var(--primary-red);
        }
        
        /* FAQ Section */
        .faq-section {
            background: linear-gradient(to bottom, rgba(255, 226, 227, 0.35), rgba(255, 176, 164, 0.3));
            padding: 4rem 0;
        }
        
        .accordion-item {
            border: none;
            border-bottom: 1px solid #FFB0A4;
            background: transparent;
        }
        
        /*.accordion-button {
            background: transparent;
            color: var(--gray-text);
            font-weight: 600;
            font-size: 18px;
            padding: 1.5rem 2.5rem 1.5rem 0;
            border: none;
            box-shadow: none;
        }
        
        .accordion-button:not(.collapsed) {
            background: transparent;
            color: var(--gray-text);
        }
        
        .accordion-button::after {
            background-image: none;
            font-size:22px;
            content: '\2b';
            font-family: 'Font Awesome 6 Pro';
            font-weight:900;
            color: var(--gray-text);
        }
        
        .accordion-button:not(.collapsed)::after {
            content: '\f068';
            background-image:none;
        }*/
        
        /* Submit Ticket Form */
        .ticket-form {
            background: white;
            border-radius: 15px;
            padding: 2rem;
        }
        
        .ticket-form h3 {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }
        
        .ticket-form .form-label {
            font-weight: 600;
            font-size: 18px;
            margin-bottom: 0.5rem;
        }
        
        .ticket-form .form-control {
            border: 1px solid var(--light-gray);
            border-radius: 6px;
            padding: 0.5rem 0.75rem;
        }
        
        .btn-submit {
            background: var(--primary-red);
            color: white;
            border: 1px solid #FFB0A4;
            padding: 0.75rem 2rem;
            border-radius: 50px;
            font-weight: 600;
            width: 100%;
        }
        
        .btn-submit:hover {
            background: #CC1B00;
            color: white;
        }
        
        /* Troubleshooting Section */
        .troubleshooting-card {
            background: white;
            border-radius: 15px;
            padding: 2rem;
        }
        
        .troubleshooting-card h3 {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 1.5rem;
        }
        
        .troubleshooting-item {
            background: #FFE2E3;
            border-radius: 50px;
            padding: 0.5rem 1rem;
            margin-bottom: 0.75rem;
            display: flex;
            align-items: center;
        }
        
        .troubleshooting-item i {
            margin-right: 1rem;
            color: var(--gray-text);
        }
        
        .troubleshooting-item:first-child {
            background: #FFE2E3;
        }
        
        .troubleshooting-item:not(:first-child) {
            background: transparent;
            padding-left: 0;
        }
        
        /* Call to Action */
        .cta-section {
            text-align: center;
            padding: 3rem 0;
        }
        
        .cta-section h2 {
            font-size: 28px;
            font-weight: 600;
            margin-bottom: 1rem;
        }
        
        .cta-section p {
            color: var(--gray-text);
            margin-bottom: 2rem;
        }
        
        .btn-contact {
            background: #FFE2E3;
            color: var(--gray-text);
            padding: 0.75rem 2rem;
            border-radius: 50px;
            border: none;
            font-weight: 600;
            margin: 0 0.5rem;
        }
        
        .btn-call {
            background: white;
            color: var(--gray-text);
            padding: 0.75rem 2rem;
            border-radius: 50px;
            border: 2px solid var(--primary-red);
            font-weight: 600;
            margin: 0 0.5rem;
        }
        
        .btn-call i {
            margin-left: 0.5rem;
        }
        
        /* App Store Buttons */
        .app-store-btn {
            background: rgba(212, 212, 212, 0.15);
            border: 1.5px solid var(--light-gray);
            border-radius: 15px;
            padding: 1.5rem 2rem;
            display: inline-block;
            margin: 0 0.5rem;
            text-decoration: none;
            color: var(--gray-text);
            transition: all 0.3s ease;
        }
        
        .app-store-btn:hover {
            background: rgba(212, 212, 212, 0.25);
            color: var(--gray-text);
        }
        
        .app-store-btn i {
            font-size: 2rem;
            margin-right: 0.75rem;
        }
        
        .app-store-btn small {
            display: block;
            font-size: 12px;
        }
        
        .app-store-btn strong {
            font-size: 18px;
        }
/*Layout 2 css*/





.header-section{
    background-color:var(--secondary-color);
    border-radius:10px;
}

/* .page-wrapper {
            width: 100%;
            min-height: 100%;
            max-width: 1400px;
            margin: 0 auto;
            box-shadow: 0 0 30px rgba(0,0,0,0.1);
            background: #ffffff;
        }*/

/* Navigation */


.navbar-brand {
    font-weight: 700;
    font-size: 1.8rem;
}

.nav-link {
    font-weight: 500;
    margin: 0 0.8rem;
    transition: color 0.3s ease;
}

/* Hero Banner */
.hero-banner {
    padding: 6rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    background-color:var(--secondary-color);
    border-radius:10px;
}

.hero-video {
    width: 100%;
    height: 100%;
}

.video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: 20px;
}

    .video-wrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 20px;
    }

.hero-banner h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
}

.hero-banner p {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.btn-cta {
    padding: 1rem 3rem;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 50px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .btn-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    }

    .btn-cta:first-child:hover {
        background-color: #cc1b00 !important;
    }

    .btn-cta:last-child:hover {
        background-color: #ff2200 !important;
        color: white !important;
    }

/* Plans Section */
.plans-section {
    padding: 5rem 0;
}

.section-title {
    text-align: center;
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

.plan-card {
    border-radius: 20px;
    padding: 20px;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 2px solid #e0e0e0;
    display:flex;
    flex-direction:column;
}

    .plan-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 30px rgba(0,0,0,0.15);
    }

    .plan-card.recommended {
        position: relative;
        border: 3px solid;
    }

.recommended-badge {
    position: absolute;
    top: -15px;
    right: 20px;
    padding: 0.5rem 1.5rem;
    border-radius: 25px;
    font-weight: 700;
    font-size: 0.9rem;
}

.plan-price {
    font-size: 1.8rem;
    font-weight: 600;
    margin: 30px 0;
}

    .plan-price span {
        font-size: 1.2rem;
        font-weight: 400;
    }

.plan-features {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
}

    .plan-features li {
        padding: 0.4rem 0;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        font-size:13px;
    }

        .plan-features li:last-child {
            border-bottom: none;
        }

    .plan-features i {
        margin-right: 0.8rem;
    }

/* Flexible Plans Section */
.flexible-section {
    padding: 5rem 0;
}

.feature-box {
    text-align: center;
    padding: 2.5rem;
    border-radius: 15px;
    height: 100%;
    transition: transform 0.3s ease;
}

    .feature-box:hover {
        transform: translateY(-5px);
    }

.feature-icon {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
}

.feature-box h4 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* Coverage Section */
.coverage-section {
    padding: 4rem 0;
}

.coverage-image {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
}

.coverage-content h3 {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.coverage-stat-card {
    transition: transform .25s ease, box-shadow .25s ease;
}

.coverage-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 .75rem 1.5rem rgba(255, 35, 0, .12) !important;
}

.coverage-features {
    list-style: none;
    padding: 0;
}

    .coverage-features li {
        padding: 1rem 0;
        font-size: 1.1rem;
    }

    .coverage-features i {
        margin-right: 1rem;
        font-size: 1.3rem;
    }

/* Switching Section */
.switching-section {
    padding: 5rem 0;
}

.step-card {
    text-align: center;
    padding: 2.5rem;
    border-radius: 15px;
    height: 100%;
}

.step-number {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.step-card h4 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

/* Two Column Section */
.two-column-section {
    padding: 5rem 0;
}

.info-card {
    border-radius: 20px;
    padding: 3rem;
    height: 100%;
}

    .info-card h3 {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 1.5rem;
    }

    .info-card p {
        font-size: 1.1rem;
        margin-bottom: 1.5rem;
    }

/* Daily Challenges Section */
.challenges-section {
    padding: 5rem 0;
}

.challenge-card {
    border-radius: 15px;
    padding: 2rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
}

    .challenge-card:hover {
        transform: translateX(10px);
    }

.challenge-icon {
    font-size: 2.5rem;
    margin-right: 1.5rem;
    min-width: 60px;
}

.challenge-content h5 {
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.challenge-reward {
    font-weight: 600;
    font-size: 0.9rem;
}

/* Footer */
.footer {
    margin-top: 1rem;
}

    .footer h5 {
        font-weight: 700;
        margin-bottom: 1.5rem;
    }

    .footer ul {
        list-style: none;
        padding: 0;
    }

        .footer ul li {
            margin-bottom: 0.8rem;
        }

            .footer ul li a {
                text-decoration: none;
                transition: color 0.3s ease;
            }
             .app-store-badge {
            border: 1.5px solid #C2C0C0;
            background: rgba(212, 212, 212, 0.15);
            border-radius: 15px;
            padding: 20px 30px;
            display: inline-flex;
            align-items: center;
            gap: 15px;
            text-decoration: none;
            color: var(--text-gray);
            transition: all 0.3s;
        }
        
        .app-store-badge:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            color: var(--text-gray);
        }
        
        .app-store-badge i {
            font-size: 40px;
        }

        /* "Coming Soon" state — non-interactive, with a bigger pulsing ribbon */
        .app-store-badge--coming-soon {
            position: relative;
            cursor: default;
            opacity: .9;
            pointer-events: none;
        }

        .app-store-badge--coming-soon:hover {
            transform: none;
            box-shadow: none;
        }

        .app-store-badge--coming-soon::after {
            content: "COMING SOON";
            position: absolute;
            top: -14px;
            right: -14px;
            background: linear-gradient(135deg, #ff9e00, #ff2300);
            color: #fff;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 1px;
            text-transform: uppercase;
            padding: 6px 12px;
            border-radius: 999px;
            box-shadow: 0 6px 18px rgba(255, 35, 0, .45),
                        0 0 0 3px rgba(255, 255, 255, .9);
            animation: comingSoonPulse 2.2s ease-in-out infinite;
        }

        @keyframes comingSoonPulse {
            0%, 100% {
                transform: scale(1);
                box-shadow: 0 6px 18px rgba(255, 35, 0, .45),
                            0 0 0 3px rgba(255, 255, 255, .9);
            }
            50% {
                transform: scale(1.08);
                box-shadow: 0 8px 24px rgba(255, 35, 0, .65),
                            0 0 0 6px rgba(255, 158, 0, .35);
            }
        }

        /* Prominent banner above the app store badges */
        .app-coming-soon-banner {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            padding: 12px 28px;
            margin-bottom: 24px;
            border-radius: 999px;
            background: #fff;
            color: #ff2300;
            font-weight: 800;
            font-size: 15px;
            letter-spacing: .5px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, .18),
                        0 0 0 2px rgba(255, 255, 255, .4);
            text-transform: uppercase;
        }

        .app-coming-soon-banner i {
            font-size: 20px;
            color: #ff9e00;
        }

        .app-coming-soon-banner .pulse-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #ff2300;
            box-shadow: 0 0 0 0 rgba(255, 35, 0, .6);
            animation: pulseDot 1.6s ease-in-out infinite;
        }

        @keyframes pulseDot {
            0%, 100% { box-shadow: 0 0 0 0 rgba(255, 35, 0, .55); }
            50%      { box-shadow: 0 0 0 10px rgba(255, 35, 0, 0); }
        }

        /* Hero "App launching soon" ribbon — sits above the slide content,
           persistent across all carousel slides. */
        .hero-coming-soon {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 8px 18px;
            margin-bottom: 14px;
            border-radius: 999px;
            background: linear-gradient(135deg, rgba(255, 158, 0, .95), rgba(255, 35, 0, .95));
            color: #fff;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: .3px;
            box-shadow: 0 8px 24px rgba(255, 35, 0, .35),
                        inset 0 1px 0 rgba(255, 255, 255, .25);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            pointer-events: auto;
        }

        .hero-coming-soon i {
            font-size: 16px;
        }

        .hero-coming-soon strong {
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 12.5px;
        }

        .hero-coming-soon-sep {
            opacity: .55;
        }

        .hero-coming-soon-tag {
            font-size: 12.5px;
            opacity: .92;
        }

        .hero-coming-soon-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 0 0 0 rgba(255, 255, 255, .85);
            animation: heroDotPulse 1.6s ease-in-out infinite;
        }

        @keyframes heroDotPulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .85); }
            50%      { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); }
        }

.social-icons a {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    margin-right: 0.8rem;
    transition: transform 0.3s ease;
}

    .social-icons a:hover {
        transform: translateY(-3px);
    }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.2);
    margin-top: 3rem;
    padding-top: 2rem;
    text-align: center;
}

#coverageChart {
    height: 300px;
    width: 100%;
}

@media (max-width: 768px) {
    .hero-banner h1 {
        font-size: 2.5rem;
    }

    .section-title {
        font-size: 2rem;
    }
}







/*Inner pages css*/
/* bootstrap css */
:root {
    --orange-primary: #FF9E00;
    --red-primary: #FF2300;
}

.bg-gradient-orange {
    background: linear-gradient(to right, var(--orange-primary), var(--red-primary));
}

.bg-gradient-orange-light {
    background: linear-gradient(#fb923c00 1px, #fff5ed 1px), linear-gradient(90deg, #fb923c 1px, #0000 1px);
}

.text-gradient {
    background: linear-gradient(to right, #f97316, #dc2626);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.navbar-sticky {
    backdrop-filter: blur(12px);
    background-color: rgba(255, 255, 255, 0.95);
}



.icon-gradient-orange {
    background: linear-gradient(135deg, #fb923c, #f59e0b);
}

.icon-gradient-red {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.icon-gradient-rose {
    background: linear-gradient(135deg, #f43f5e, #ec4899);
}

.icon-gradient-amber {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.accordion-button:not(.collapsed) {
    background-color: #fff7ed;
    color: #ea580c;
}

.accordion-button:focus {
    box-shadow: 0 0 0 0 rgba(251, 146, 60, 0.25);
}

.btn-gradient {
    background: linear-gradient(to right, var(--orange-primary), var(--red-primary));
    border: none;
    color: white;
}

.btn-gradient:hover {
    background: linear-gradient(to right, rgba(255, 158, 0, 0.9), rgba(255, 35, 0, 0.9));
    color: white;
}

.btn-outline-orange {
    border-color: #f97316;
    color: #ea580c;
}

.btn-outline-orange:hover {
    background-color: #fff7ed;
    border-color: #f97316;
    color: #ea580c;
}

.bg-orange-light {
    background: linear-gradient(to bottom, #fffdf9, #ffffff);
}

.badge-orange {
    background-color: white;
    color: #ea580c;
    border: 1px solid #fed7aa;
    font-size: 17px;
}

.social-icon {
    width: 40px;
    height: 40px;
    background-color: #1f2937;
    transition: background-color 0.3s;
}

.social-icon:hover {
    background-color: #ea580c;
}

.form-control:focus {
    border-color: #f97316;
    box-shadow: 0 0 0 0.25rem rgba(251, 146, 60, 0.25);
}

.tip-card {
    background-color: white;
    border: 1px solid #fed7aa;
}

.bg-gradient-orange {
    background: linear-gradient(135deg, var(--orange-50) 0%, #ffffff 50%, #fef2f2 100%);
}

.bg-pattern {
    background-image:
        linear-gradient(rgba(251, 146, 60, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(251, 146, 60, 0.03) 1px, transparent 1px);
    background-size: 64px 64px;
}

.gradient-text {
    background: linear-gradient(to right, var(--orange-500), var(--red-600));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.icon-box {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.gradient-orange-amber {
    background: linear-gradient(135deg, var(--orange-400), var(--amber-500));
}

.gradient-orange-red {
    background: linear-gradient(135deg, var(--orange-500), var(--red-500));
}

.gradient-red-rose {
    background: linear-gradient(135deg, var(--red-500), var(--rose-500));
}

.gradient-rose-pink {
    background: linear-gradient(135deg, var(--rose-500), var(--pink-500));
}

.gradient-orange-amber2 {
    background: linear-gradient(135deg, var(--orange-500), var(--amber-600));
}

.gradient-red-600 {
    background: linear-gradient(135deg, var(--red-400), var(--red-600));
}

.card-hover {
    transition: all 0.3s ease;
    border: 2px solid transparent;
    border-radius: 15px;
}

.card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    border-color: var(--orange-200);
    cursor: pointer;
    border-radius: 15px;
}

.article-card {
    transition: all 0.3s ease;
}

.article-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border-color: var(--orange-200) !important;
    cursor: pointer;
}

.article-card:hover .article-text {
    color: var(--orange-600) !important;
}

.article-card:hover .article-icon {
    transform: scale(1.1);
}

.article-icon {
    transition: transform 0.3s ease;
}

.list-item-hover {
    transition: color 0.3s ease;
}

.list-item-hover:hover {
    color: var(--orange-600) !important;
}

.badge-help {
    background-color: white;
    border: 1px solid var(--orange-200);
    color: var(--orange-600);
}

.text-orange-600 {
    color: var(--orange-600);
}

.btn-gradient {
    background: linear-gradient(to right, var(--orange-500), var(--red-600));
    border: none;
    color: white;
}

.btn-gradient:hover {
    background: linear-gradient(to right, var(--orange-600), var(--red-600));
    color: white;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeInDown {
    animation: fadeInDown 0.6s ease-out;
}

.animate-fadeInUp {
    animation: fadeInUp 0.6s ease-out;
}

.small-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
}

.gradient-orange-amber {
    background: linear-gradient(to bottom right, #fb923c, #f59e0b);
}

.gradient-orange-red {
    background: linear-gradient(to bottom right, #f97316, #ef4444);
}

.gradient-red-rose {
    background: linear-gradient(to bottom right, #ef4444, #f43f5e);
}

.gradient-orange-red-bg {
    background: linear-gradient(to right, #f97316, #dc2626);
}

.card-hover {
    transition: all 0.3s ease;
    border-radius: 15px;
}

.card-hover:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: #fed7aa !important;
    transform: translateY(-0.5rem);
}

.icon-box {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
}

.icon-box-lg {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
}

.text-orange-600 {
    color: #ea580c;
}

.bg-orange-50 {
    background-color: rgba(255, 237, 213, 0.5);
}

.btn-gradient {
    background: linear-gradient(to right, #f97316, #dc2626);
    border: none;
    color: white;
    transition: all 0.3s ease;
}

.btn-gradient:hover {
    background: linear-gradient(to right, #ea580c, #b91c1c);
    color: white;
}

.form-control:focus,
.form-select:focus {
    border-color: #f97316;
    box-shadow: 0 0 0 0.25rem rgba(249, 115, 22, 0.25);
}

.hover-shadow:hover {
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.12) !important;
    transform: translateY(-6px);
    transition: all 0.3s ease;
}

.transition {
    transition: all 0.3s ease;
}


.accordion-button:hover{
            color: var(--color-orange-600)
}


/* ---------- Interactive coverage map ---------- */
.coverage-map-wrapper {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: #f5f5f5;
}

.coverage-map {
    height: 560px;
    width: 100%;
    z-index: 0;
}

/* Floating search overlay sitting on top of the map */
.coverage-map-search {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    width: calc(100% - 32px);
    max-width: 540px;
    display: flex;
    align-items: center;
    background: white;
    border-radius: 50px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15);
    padding: 4px 4px 4px 18px;
}

.coverage-map-search-icon {
    color: #888;
    font-size: 1rem;
    pointer-events: none;
    flex-shrink: 0;
}

.coverage-map-search-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 0.65rem 0.75rem;
    background: transparent;
    font-size: 0.95rem;
    color: var(--black);
}

.coverage-map-search-input:focus {
    outline: none;
    box-shadow: none;
}

.coverage-map-search-input::placeholder {
    color: #999;
}

.coverage-map-locate-btn {
    border: none;
    background: linear-gradient(135deg, var(--blaze-orange, #ff9e00), var(--blaze-red, #ff2300));
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 10px rgba(255, 35, 0, 0.3);
}

.coverage-map-locate-btn:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 14px rgba(255, 35, 0, 0.4);
}

.coverage-map-status {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 50px;
    padding: 0.5rem 1.1rem;
    font-size: 0.85rem;
    color: #333;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    max-width: calc(100% - 32px);
    text-align: center;
}

.coverage-map-status--error {
    color: #b91c1c;
}

/* Legend / layer toggle card */
.coverage-legend-card {
    background: white;
    border-radius: 16px;
    padding: 1.25rem 1.25rem 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.layer-toggle {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    cursor: pointer;
    padding: 0.7rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    user-select: none;
}

.layer-toggle:last-of-type {
    border-bottom: none;
}

.layer-toggle input[type="checkbox"] {
    margin-top: 0.35rem;
    accent-color: var(--blaze-red, #ff2300);
    cursor: pointer;
    flex-shrink: 0;
}

.layer-toggle .layer-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    margin-top: 0.4rem;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.layer-toggle .layer-text {
    flex: 1;
    line-height: 1.35;
    font-size: 0.9rem;
}

.coverage-legend-note {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    background: rgba(255, 247, 237, 0.6);
    border-radius: 12px;
    border: 1px solid rgba(255, 158, 0, 0.18);
}

.coverage-legend-note .bi {
    flex-shrink: 0;
    margin-top: 0.15rem;
}

/* ── Coverage check card (replaces blocked iframe) ───────────────────── */
.coverage-check-card {
    background: white;
    border-radius: 20px;
    border: 1px solid rgba(255, 158, 0, 0.18);
    box-shadow: 0 4px 24px rgba(0,0,0,.06);
    padding: 2.5rem 2.5rem;
}

.coverage-check-icon {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: linear-gradient(135deg, #fff7ed, #fef2f2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 2rem;
    color: var(--blaze-orange);
}

.coverage-tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 99px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    font-size: 0.85rem;
    font-weight: 500;
}

.tier-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.coverage-map-visual {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 240px;
    height: 240px;
}

.coverage-map-visual > i {
    font-size: 9rem;
    color: var(--blaze-orange);
    position: relative;
    z-index: 1;
}

.coverage-map-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,158,0,.15) 0%, rgba(255,158,0,.04) 60%, transparent 80%);
    animation: coveragePulse 2.8s ease-in-out infinite;
}

@keyframes coveragePulse {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%       { transform: scale(1.1); opacity: 0.6; }
}

/* ── Privacy Policy page ──────────────────────────────────────────────── */
.privacy-sidebar {
    padding: 1.25rem 1rem;
    background: #fafafa;
    border-radius: 14px;
    border: 1px solid #f0f0f0;
}

.privacy-sidebar-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #aaa;
    margin-bottom: 0.75rem;
}

.privacy-nav {
    margin: 0;
    padding: 0;
}

.privacy-nav li { margin-bottom: 2px; }

.privacy-nav-link {
    display: block;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 0.82rem;
    color: #555;
    text-decoration: none;
    transition: background .15s, color .15s;
}

.privacy-nav-link:hover,
.privacy-nav-link.is-active {
    background: rgba(255,158,0,.1);
    color: var(--blaze-orange);
    font-weight: 600;
}

.privacy-body { max-width: 720px; }

.privacy-section {
    padding-top: 2.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 0.5rem;
}

.privacy-section:last-child { border-bottom: none; }

.privacy-section-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-left: 3px solid var(--blaze-orange);
    padding-left: 0.75rem;
}

.privacy-section p { color: #444; line-height: 1.75; margin-bottom: 0.85rem; }

.privacy-list {
    padding-left: 1.25rem;
    margin-bottom: 0.85rem;
}

.privacy-list li {
    color: #444;
    line-height: 1.7;
    margin-bottom: 0.4rem;
}

.privacy-note {
    background: rgba(255,158,0,.07);
    border: 1px solid rgba(255,158,0,.2);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    font-size: 0.9rem;
    color: #555 !important;
}

.privacy-contact-card {
    background: #f8f9fa;
    border-radius: 14px;
    border: 1px solid #e9ecef;
    padding: 1.25rem 1.5rem;
    margin: 1.25rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.privacy-contact-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    color: #444;
}

.privacy-contact-item i {
    color: var(--blaze-orange);
    width: 18px;
    flex-shrink: 0;
}

.privacy-contact-item a {
    color: var(--blaze-orange);
    text-decoration: none;
}

.privacy-contact-item a:hover { text-decoration: underline; }

/* Leaflet popup styling tweaks */
.map-popup strong {
    font-size: 0.95rem;
    display: block;
    color: var(--black);
}

.map-popup-pill {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 50px;
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.5;
}

.leaflet-popup-content-wrapper {
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

.leaflet-popup-content {
    margin: 12px 14px;
    line-height: 1.4;
}

@media (max-width: 991.98px) {
    .coverage-map { height: 440px; }
    .coverage-map-search-input { font-size: 0.9rem; }
}

@media (max-width: 575.98px) {
    .coverage-map { height: 380px; }
    .coverage-map-search { padding: 4px 4px 4px 14px; }
}


/* ---------- Contact method cards (Phone / Email on the contact page) ---------- */
.contact-method-card {
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    background: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

.contact-method-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(to right, var(--orange-primary, #ff9e00), var(--red-primary, #ff2300));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.contact-method-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(255, 35, 0, 0.12);
    border-color: var(--orange-200);
}

.contact-method-card:hover::before {
    opacity: 1;
}

/* Static variant — non-clickable info card (e.g. the voicemail-only phone
   number). Suppresses hover lift, shadow change and the gradient border. */
.contact-method-card--static,
.contact-method-card--static:hover {
    cursor: default;
    transform: none;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
    border-color: transparent;
}
.contact-method-card--static::before,
.contact-method-card--static:hover::before {
    opacity: 0;
}

/* Status badge in top-right of contact cards */
.availability-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: rgba(25, 135, 84, 0.1);
    color: #198754;
    line-height: 1;
}

.availability-badge--neutral {
    background: rgba(234, 88, 12, 0.1);
    color: var(--orange-600);
}

.availability-badge .status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #198754;
    box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.6);
    animation: contact-pulse 2.2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

@keyframes contact-pulse {
    0% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.55); }
    70% { box-shadow: 0 0 0 8px rgba(25, 135, 84, 0); }
    100% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); }
}

/* Highlighted contact-detail pill (phone number / email) */
.contact-detail-block {
    padding: 0.9rem 1.1rem;
    background: linear-gradient(135deg, rgba(255, 247, 237, 0.85), rgba(254, 242, 242, 0.6));
    border: 1px solid rgba(255, 158, 0, 0.18);
    border-radius: 12px;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.contact-method-card:hover .contact-detail-block {
    background: linear-gradient(135deg, rgba(255, 237, 213, 1), rgba(254, 226, 226, 0.85));
    border-color: rgba(255, 158, 0, 0.35);
}

.letter-spacing {
    letter-spacing: 0.04em;
    font-size: 0.7rem;
}

.contact-arrow {
    transition: transform 0.3s ease;
}

.contact-method-card:hover .contact-arrow {
    transform: translateX(6px);
}

/* ---------- Brand-themed nav-pills (used on Activate, Coverage, etc.) ---------- */
.nav-pills .nav-link {
    color: var(--orange-600);
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.25s ease;
}

.nav-pills .nav-link i {
    transition: color 0.25s ease;
}

.nav-pills .nav-link:hover:not(.active) {
    background: rgba(255, 158, 0, 0.12);
    color: var(--orange-600) !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background: linear-gradient(to right, var(--orange-primary, #ff9e00), var(--red-primary, #ff2300)) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(255, 35, 0, 0.28);
}

.nav-pills .nav-link.active i,
.nav-pills .show > .nav-link i {
    color: #fff !important;
}

.nav-pills .nav-link:focus,
.nav-pills .nav-link.active:focus {
    box-shadow: 0 6px 16px rgba(255, 35, 0, 0.28),
                0 0 0 0.2rem rgba(255, 158, 0, 0.25);
    outline: none;
}


/* ---------- Hero (Layout 1) ---------- */
.hero-badge {
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    padding: 0.5rem 1.1rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.hero-badge .bi-broadcast {
    color: var(--blaze-orange);
    font-size: 1rem;
}

/* Stacked hero content — multiple variants share the same grid cell so the
   layout doesn't jump when GSAP fades between them. */
.hero-content-stack {
    display: grid;
    margin-top: 1rem;
}

.hero-content-stack > * {
    grid-row: 1;
    grid-column: 1;
    align-self: start;
}

.hero-slide-content {
    opacity: 0;
    pointer-events: none;
    transition: none;
}

.hero-slide-content.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* Big bold offer headline */
.hero-mega {
    font-size: clamp(2.6rem, 7.5vw, 6rem);
    font-weight: 900;
    line-height: 1;
    color: #fefcee;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    margin: 0;
}

.hero-mega-accent {
    background: linear-gradient(to right, #ff9e00, #ff5f3d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.hero-sub-bold {
    color: #fff;
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.4;
    max-width: 620px;
}

.hero-terms {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    max-width: 620px;
    margin: 0;
}

/* Pill-style hero CTAs */
.btn-hero-primary {
    background: #fff;
    color: var(--blaze-red);
    border: 2px solid #fff;
    border-radius: 50px;
    font-weight: 700;
    padding: 0.85rem 2.4rem;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    transition: all 0.25s ease;
}

.btn-hero-primary:hover,
.btn-hero-primary:focus {
    background: var(--blaze-red);
    color: #fff;
    border-color: #fff;
    box-shadow: 0 12px 28px rgba(255, 34, 0, 0.4);
}

.btn-hero-secondary {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.75);
    border-radius: 50px;
    font-weight: 700;
    padding: 0.85rem 2.2rem;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: all 0.25s ease;
}

.btn-hero-secondary:hover,
.btn-hero-secondary:focus {
    background: rgba(255, 255, 255, 0.18);
    border-color: #fff;
    color: #fff;
}

/* Adjust the absolute positioning so the longer hero content fits comfortably. */
.hero-slider-wrapper .banner-title {
    top: auto;
    max-width: 760px;
}

.hero-slider-wrapper .hero-section {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    padding: 6rem 0 3rem;
}

/* Subtle dark gradient overlay so bold headline reads on bright slides. */
.hero-slider-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.45) 0%,
        rgba(0, 0, 0, 0.25) 45%,
        rgba(0, 0, 0, 0) 75%
    );
    z-index: 1;
    pointer-events: none;
}

.hero-slider-wrapper .hero-content {
    z-index: 2;
    pointer-events: none;
}

.hero-cta-row {
    pointer-events: auto;
}

/* Navbar must sit above the hero content so the Support dropdown is clickable. */
.hero-slider-wrapper .navbar {
    position: relative;
    z-index: 20;
}

/* Bootstrap's default for dropdown-menu is 1000; bump it inside the hero so
   it always wins over any positioned hero content / overlays. */
.hero-slider-wrapper .navbar .dropdown-menu {
    z-index: 1100;
}

@media (max-width: 991.98px) {
    .hero-slider-wrapper .hero-section {
        min-height: 75vh;
        padding: 5rem 0 2rem;
    }
}

@media (max-width: 575.98px) {
    .hero-mega {
        font-size: clamp(2rem, 10vw, 2.8rem);
    }
    .hero-sub-bold {
        font-size: 1rem;
    }
    .hero-terms {
        font-size: 0.85rem;
    }
}

/* ---------- Acknowledgement / legal bar (sits below the main footer) ---------- */
.site-footer {
    color: #1a1a2e;
    padding: 1.5rem 0 1.25rem;
    font-size: 0.95rem;
}

.site-footer .footer-acknowledgement p {
    color: #1a1a2e;
    line-height: 1.65;
    max-width: 100%;
    margin: 0;
}

.site-footer .footer-divider {
    border: 0;
    border-top: 1px solid rgba(26, 26, 46, 0.18);
    margin: 0.25rem 0 0.25rem;
    opacity: 1;
}

.site-footer .footer-links a {
    color: #1a1a2e;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.site-footer .footer-links a:hover {
    color: var(--primary-color);
}

.site-footer .footer-copyright {
    color: #1a1a2e;
    font-size: 0.9rem;
}

@media (max-width: 767.98px) {
    .site-footer .footer-bottom-row {
        text-align: left;
    }
    .site-footer .footer-bottom-row .text-md-end {
        text-align: left !important;
    }
    .site-footer .footer-links .list-inline-item {
        margin-right: 1.25rem !important;
    }
}

/* ──────────────────────────────────────────────────────────────────────
   DARK-NAVY DASHBOARD VARIANT — restyles existing components so they
   read correctly on the navy plan-compare section.
   ────────────────────────────────────────────────────────────────────── */

/* Choose Your Plan / How We Compare headings — light grey on navy */
.plan-compare .col-lg-7 > h6,
.plan-compare .col-lg-5 > h6 {
    color: #adb5bd !important;
}

/* Plan-row icon — slightly toned for white-card surface */
.plan-row-icon {
    background: #fff7ed;
    color: var(--blaze-red, #ff2300);
    border: 1px solid #fed7aa;
}

/* Compare list lives in its own white card on the dark backdrop */
.compare-list {
    background: #fff;
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .25);
}
.compare-list .compare-row { color: #1a1a2e; }
.compare-list .compare-row .text-muted { color: #6c757d !important; }

.compare-footnotes { color: #adb5bd !important; font-size: 12px;
    padding: 15px 14px; }
.compare-footnotes li { color: #adb5bd; }

/* ── Daily Roaming Pack card ────────────────────────────────────────── */
.roaming-pack-card {
    background: #fff;
    color: #1a1a2e;
    border-radius: 16px;
    padding: 22px 24px 18px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .25);
}
.roaming-pack-card h5 { color: #1a1a2e; }

.roaming-pack-pill {
    background: #fff5e9;
    color: #c64a00;
    font-size: 12.5px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid #fed7aa;
}

.roaming-pack-map {
    width: 100%;
    margin-top: .5rem;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 8px;
}
.roaming-pack-map svg { display: block; width: 100%; height: auto; }

.roaming-pack-legend {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #1a1a2e;
    padding: 4px 10px;
    background: #f8f9fa;
    border-radius: 999px;
}
.roaming-pack-legend .legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: var(--blaze-red, #ff2300);
}

/* ── QR cards (App Store / Google Play) ─────────────────────────────── */
.qr-card {
    background: #fff;
    border-radius: 16px;
    padding: 18px 14px 16px;
    text-align: center;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .25);
}
.qr-card img {
    width: 100%;
    max-width: 180px;
    height: auto;
    display: block;
    margin: 0 auto;
    image-rendering: pixelated;
}
.qr-card-label {
    margin-top: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: #1a1a2e;
}
.qr-card-label i { color: var(--blaze-red, #ff2300); margin-right: 6px; }

/* ──────────────────────────────────────────────────────────────────────
   DAILY ROAMING PACK CARD — sits inside the left column under the
   plan list. White card with a stylised world map showing Zone 1
   eligible countries highlighted in brand orange.
   ────────────────────────────────────────────────────────────────────── */
.roaming-pack-card {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    padding: 20px 22px 18px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .04);
}
.roaming-pack-card h5 { color: #1a1a2e; font-size: 1.05rem; }

.roaming-pack-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #fff7ed;
    color: var(--blaze-red, #ff2300);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border: 1px solid #fed7aa;
}

.roaming-pack-pill {
    background: #fff5e9;
    color: #c64a00;
    font-size: 12.5px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid #fed7aa;
    white-space: nowrap;
}

.roaming-pack-map {
    width: 100%;
    margin-top: .25rem;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 12px;
    /* Cap the card height so the SVG doesn't dominate the comparison
       column. The SVG below scales to fit, preserving aspect ratio. */
    max-height: 320px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.roaming-pack-map svg {
    display: block;
    width: auto;
    max-width: 100%;
    height: 100%;
    max-height: 325px;
}

.roaming-pack-legend {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #1a1a2e;
    padding: 4px 10px;
    background: #f8f9fa;
    border-radius: 999px;
}
.roaming-pack-legend .legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: #ff5a30;            /* default = Zone 1 */
}
/* Explicit variants — use these when both zones are shown in the legend. */
.roaming-pack-legend .legend-swatch--z1 { background: #ff5a30; }
.roaming-pack-legend .legend-swatch--z2 { background: #ffb56b; }

/* ── Roaming pack expand / collapse ──────────────────────────────────── */
.roaming-pack-header {
    cursor: pointer;
    user-select: none;
    border-radius: 6px;
    transition: background .15s ease;
    padding: 2px 4px;
    margin: -2px -4px;
}
.roaming-pack-header:hover  { background: rgba(255, 158, 0, .06); }
.roaming-pack-header:focus-visible {
    outline: 2px solid var(--blaze-orange);
    outline-offset: 2px;
}

/* Chevron indicator — rotates 180° when body is open */
.roaming-pack-chevron {
    font-size: 13px;
    color: var(--blaze-orange, #ff9e00);
    transition: transform .25s ease;
    flex-shrink: 0;
}
.roaming-pack-card.is-open .roaming-pack-chevron { transform: rotate(180deg); }

/* Body hidden by default; no animation needed — snap open/closed */
.roaming-pack-body { display: none; }
.roaming-pack-card.is-open .roaming-pack-body { display: block; }

/* ──────────────────────────────────────────────────────────────────────
   GET THE APP — QR pair beneath the comparison column.
   ────────────────────────────────────────────────────────────────────── */
.qr-card {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 14px;
    padding: 14px 12px 12px;
    text-align: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .04);
    transition: transform .15s ease, box-shadow .15s ease;
}
.qr-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .08);
}
.qr-card img {
    width: 100%;
    max-width: 150px;
    height: auto;
    display: block;
    margin: 0 auto;
    image-rendering: pixelated;
}
.qr-card-label {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #1a1a2e;
}
.qr-card-label i {
    color: var(--blaze-red, #ff2300);
    margin-right: 6px;
}

/* Universal single QR card (iOS + Android) */
.qr-card--universal {
    display: inline-block;
    width: 100%;
}
.qr-card--universal img { max-width: 190px; }
.qr-card--universal a { display: inline-block; }
.qr-card-label--universal { font-size: 13.5px; }
.qr-card-label--universal i { color: #1a1a2e; }

/* ─── Real world map — country styling ─────────────────────────────────
   Uses the simple-world-map dataset; every <path> has an `id` matching
   the lower-case ISO 3166-1 alpha-2 code. Default is muted grey with a
   white border; Zone 1 countries get the brand orange fill.
   ───────────────────────────────────────────────────────────────────── */
.roaming-pack-map #world-map,
.roaming-pack-map #world-map polygon {
    fill: #d1d5db;
    stroke: #ffffff;
    stroke-width: 0.5;
    transition: fill .2s ease;
}
/* Marker dots for tiny territories not present as paths in the
   simple-world-map dataset (Bahrain, Hong Kong, Vatican City, etc.). */
.roaming-pack-map #world-map .marker-dot {
    fill: #ff5a30;
    stroke: #fff;
    stroke-width: 0.6;
    transition: fill .2s ease, r .2s ease;
}

/* Zone highlights — driven dynamically by the JS in Views/Home/Index.cshtml.
   That script reads the country → zone map from the #roamingZoneData
   data island (which the controller fills from the gateway response) and
   adds .zone-1 / .zone-2 to the matching <g id="xx"> or marker <circle>.
   These selectors then paint the right colour.

   Targets both the class on the element itself (marker circles, standalone
   paths) and the class on the parent <g> wrapper (which contains one or
   more <path> children, e.g. <g id="us"><path class="mainland"/>…</g>). */
.roaming-pack-map #world-map .zone-1,
.roaming-pack-map #world-map .zone-1 path,
.roaming-pack-map #world-map .zone-1 polygon,
.roaming-pack-map #world-map circle.zone-1.marker-dot {
    fill: #ff5a30 !important;   /* Brand orange — Zone 1 ($5/day pack) */
}
.roaming-pack-map #world-map .zone-2,
.roaming-pack-map #world-map .zone-2 path,
.roaming-pack-map #world-map .zone-2 polygon,
.roaming-pack-map #world-map circle.zone-2.marker-dot {
    fill: #ffb56b !important;   /* Peach amber — Zone 2 (PAYG) */
}
.roaming-pack-map #world-map .zone-home,
.roaming-pack-map #world-map .zone-home path,
.roaming-pack-map #world-map .zone-home polygon {
    fill: #ffcb00 !important;   /* Gold — Home country (Australia) */
}
.map-tooltip.is-home {
    background: #78610a;        /* Dark gold — readable against white text */
}

/* Pulse highlight applied by the search JS — makes the matching country
   "ping" so the user can spot it on the map immediately.
   Selectors cover the <g> wrapper AND its <path>/<polygon> children so
   the green overrides the zone-1/zone-2 fill on every SVG structure. */
.roaming-pack-map #world-map .is-pulsing,
.roaming-pack-map #world-map .is-pulsing path,
.roaming-pack-map #world-map .is-pulsing polygon {
    fill: #00833f !important;
    stroke: #fff;
    stroke-width: 1.2;
    animation: roaming-country-pulse 1.2s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}
@keyframes roaming-country-pulse {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(0, 131, 63, 0)); }
    50%      { filter: drop-shadow(0 0 8px rgba(0, 131, 63, .9)); }
}

/* ─── Roaming country search ────────────────────────────────────────
   Sits between the card subtitle and the world map. Filters a scrollable
   list of Zone-1 countries and pulses the matching SVG path on hover. */
.roaming-search {
    margin-bottom: 14px;
    position: relative;   /* anchor for the absolute-positioned dropdown */
}
.roaming-search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.roaming-search-icon {
    position: absolute;
    left: 14px;
    color: #6b4a3a;
    font-size: 14px;
    pointer-events: none;
}
.roaming-search-input {
    width: 100%;
    padding: 10px 38px 10px 38px;
    border: 1.5px solid #ffd9c2;
    border-radius: 999px;
    font-size: 14px;
    background: #fff;
    color: #1a1a2e;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.roaming-search-input::placeholder {
    color: #9aa0a6;
}
.roaming-search-input:focus {
    border-color: var(--blaze-red, #ff2300);
    box-shadow: 0 0 0 3px rgba(255, 90, 48, .15);
}
/* Hide the native search-cancel button (Webkit) so our own clear button is the only one */
.roaming-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.roaming-search-clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #f4f4f6;
    color: #6b4a3a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    border: none;
    transition: background .15s ease, color .15s ease;
}
.roaming-search-clear:hover {
    background: var(--blaze-red, #ff2300);
    color: #fff;
}
.roaming-search-meta {
    margin-top: 6px;
    font-size: 12px;
    color: #6b6f76;
    padding: 0 4px;
}
.roaming-search-meta .roaming-search-count {
    font-weight: 700;
    color: #1a1a2e;
}

.roaming-search-results {
    position: absolute;   /* float over the map — does not push content down */
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 300;
    max-height: 220px;
    overflow-y: auto;
    margin: 0;
    padding: 4px;
    border: 1px solid #f0e7e0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    /* Hidden until user interacts with the search input — added/removed
       by the JS based on focus + query length. */
    display: none;
    /* Cleaner scrollbar */
    scrollbar-width: thin;
    scrollbar-color: #ffd9c2 transparent;
}
.roaming-search.is-active .roaming-search-results {
    display: block;
}
.roaming-search-results::-webkit-scrollbar { width: 6px; }
.roaming-search-results::-webkit-scrollbar-thumb {
    background: #ffd9c2;
    border-radius: 3px;
}

.roaming-search-result {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    color: #1a1a2e;
    cursor: pointer;
    transition: background-color .12s ease;
}
.roaming-search-result:hover,
.roaming-search-result:focus {
    background: #fff5ee;
}
.roaming-search-tag {
    font-size: 11px;
    font-weight: 600;
    color: #ff5a30;
    padding: 2px 8px;
    background: #fff0e8;
    border: 1px solid #ffd9c2;
    border-radius: 999px;
    white-space: nowrap;
}
.roaming-search-tag i {
    font-size: 9px;
    margin-right: 3px;
}
/* Zone 2 variant — amber instead of orange. */
.roaming-search-tag--z2 {
    color: #b45309;
    background: #fff7ed;
    border-color: #fed7aa;
}
.roaming-search-empty {
    display: flex;
    align-items: center;
    padding: 10px;
    font-size: 13px;
    color: #6b6f76;
    background: #fff5ee;
    border-radius: 6px;
}

/* ─── Map hover tooltip ─────────────────────────────────────────────
   Floats next to the cursor as the user moves across the world map.
   Two visual states: orange for Zone-1 countries, dark slate for the
   rest. Uses position: fixed so the .roaming-pack-map's overflow:
   hidden doesn't clip it. */
.map-tooltip {
    position: fixed;
    z-index: 1080;            /* above the sticky navbar */
    pointer-events: none;
    background: #1a1a2e;
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    padding: 7px 11px;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
    white-space: nowrap;
    letter-spacing: .2px;
    /* Smooth fade on show/hide */
    opacity: 1;
    transition: opacity .12s ease;
}
.map-tooltip[hidden] {
    display: block !important;   /* override [hidden] so transition can play */
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}
.map-tooltip.is-zone1 {
    background: var(--blaze-red, #ff2300);
}
.map-tooltip.is-zone2 {
    background: #b45309;            /* amber-700 — matches Zone 2 fill family */
}
/* Multi-line content rows */
.map-tooltip-title {
    font-size: 13px;
    font-weight: 700;
}
.map-tooltip-line {
    margin-top: 3px;
    font-size: 11.5px;
    font-weight: 500;
    opacity: .92;
}
.map-tooltip .map-tooltip-tag {
    display: inline-block;
    margin-left: 6px;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    text-transform: uppercase;
    letter-spacing: .4px;
    vertical-align: 1px;
}

/* ──────────────────────────────────────────────────────────────────────
   PLAN ROW EXPANDABLE DETAILS — feature list collapsed by default,
   smoothly expands when the Buy now button is clicked.
   ────────────────────────────────────────────────────────────────────── */
.plan-row-details {
    display: grid;
    grid-template-rows: 0fr;             /* collapsed */
    transition: grid-template-rows .35s ease, margin-top .25s ease;
    margin-top: 0;
}
.plan-row-details-inner {
    overflow: hidden;
    min-height: 0;
}

.plan-row.is-expanded .plan-row-details {
    grid-template-rows: 1fr;             /* expanded — natural content height */
    margin-top: 16px;
}

.plan-row.is-expanded {
    background: #fffaf2;
    border-color: rgba(255, 90, 0, .25);
    box-shadow: 0 10px 28px -8px rgba(255, 90, 0, .25);
}

.plan-feature-list {
    border-top: 1px dashed #fed7aa;
    padding-top: 14px;
    padding-left: 0;
    margin: 0;
}
.plan-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: #1a1a2e;
    padding: 7px 0;
}
.plan-feature-list li i {
    color: #16a34a;                       /* green check — universal "included" signal */
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 2px;
}
.plan-feature-list li small { display: block; font-size: 12.5px; margin-top: 2px; }

/* Rotate the arrow on Buy now when row is expanded */
.plan-row.is-expanded .btn-buy-arrow {
    transform: rotate(90deg);
}

/* ─── Tightened feature list + plan-buy QR (overrides earlier rules) ─── */
.plan-row-details-inner .plan-feature-list {
    border-top: 1px dashed #fed7aa;
    padding-top: 10px;
}
.plan-row-details-inner .plan-feature-list li {
    padding: 3px 0;
    font-size: 13.5px;
    line-height: 1.35;
}
.plan-row-details-inner .plan-feature-list li i {
    margin-top: 4px;
    font-size: 12px;
}
.plan-row-details-inner .plan-feature-list li small {
    font-size: 11.5px;
    margin-top: 0;
}

/* Per-plan QR — scan to buy in the BlazeMobile app */
.plan-buy-qr {
    display: inline-block;
    padding: 10px 10px 8px;
    background: #fff;
    border: 1px solid #fed7aa;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(255, 90, 0, .10);
}
.plan-buy-qr img {
    width: 110px;
    height: 110px;
    display: block;
    image-rendering: pixelated;
}
.plan-buy-qr small {
    font-size: 11.5px;
    line-height: 1.3;
    color: #1a1a2e;
}
.plan-buy-qr strong { color: var(--blaze-red, #ff2300); font-weight: 700; }

/* ── CIS link row inside expanded plan details ───────────────────────────── */
.plan-cis-row {
    display: flex;
    align-items: center;
    gap: 6px;
    border-top: 1px dashed #fed7aa;
    margin-top: 14px;
    padding-top: 10px;
    font-size: 13.5px;
}
.plan-cis-link {
    color: #ff2300;
    text-decoration: none;
}
.plan-cis-link:hover {
    text-decoration: underline;
}

/* ── How billing works strip ─────────────────────────────────────────── */
.billing-info-strip {
    background: #fff9f0;
    border: 1px solid #fde0b3;
    border-radius: 12px;
    padding: 14px 18px;
}
.billing-info-title {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #c64a00;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.billing-info-items {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.billing-info-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: .82rem;
    color: #666;
    line-height: 1.45;
}
.billing-info-item > i {
    color: var(--blaze-orange, #ff9e00);
    font-size: 13px;
    margin-top: 2px;
    flex-shrink: 0;
    width: 14px;
    text-align: center;
}

@media (max-width: 767.98px) {
    .plan-buy-qr { margin-top: 8px; }
    .plan-buy-qr img { width: 130px; height: 130px; }
}

/* ─── Inline stepper variant — used in the Family XL plan row ─────────
   Replaces the big stepper that sat under the row. Smaller, sits next
   to the plan name, uses chevron-up / chevron-down icons. */
/* ─── Compact stepper — "SIMs: 5  ▴▾" inline cluster ──────────────
   Used on the Family XL row. Replaces the older horizontal stepper.
   The number is large + brand-red so it reads as the live value; the
   chevrons stack vertically to the right and are intentionally small
   so the cluster fits inside the narrow SIM column. */
.sim-stepper--compact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}
.sim-stepper--compact .sim-stepper-label {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
    letter-spacing: .2px;
}
.sim-stepper--compact .sim-stepper-value {
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    color: var(--blaze-red, #ff2300);
    min-width: 18px;
    text-align: center;
}
.sim-stepper--compact .sim-stepper-chevrons {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1;
}
.sim-stepper--compact .sim-stepper-btn {
    width: 16px;
    height: 14px;
    padding: 0;
    border: none;
    background: transparent;
    color: #6b4a3a;
    font-size: 10px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color .15s ease, transform .1s ease;
}
.sim-stepper--compact .sim-stepper-btn:hover {
    color: var(--blaze-red, #ff2300);
    transform: scale(1.1);
}
.sim-stepper--compact .sim-stepper-btn:active {
    transform: scale(.95);
}
/* Static variant — same typography as the XL stepper, no chevrons.
   Applied to rows 1-4 so the SIM column reads consistently across the
   whole list ("SIM: 1" / "SIMs: 2" / … / "SIMs: 5  ▴▾"). */
.sim-stepper--static {
    user-select: text;
}

.sim-stepper--inline { margin-top: 4px; }
.sim-stepper--inline .sim-stepper-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    padding: 0;
    font-size: 11px;
    line-height: 1;
    border: 1.5px solid var(--blaze-red, #ff2300);
    background: #fff;
    color: var(--blaze-red, #ff2300);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.sim-stepper--inline .sim-stepper-btn:hover {
    background: var(--blaze-red, #ff2300);
    color: #fff;
}
.sim-stepper--inline .sim-stepper-value {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a2e;
    min-width: 18px;
    text-align: center;
}

/* ─── Compare list — colored footnote dots ─────────────────────────
   Each carrier shows one or more colored dots that map to the
   footnotes beneath the comparison list:
     1 → orange  Excludes limited-time promos
     2 → blue    Does not account for speed-caps
     3 → green   Comparison excludes non-data inclusions
   The same dot styles double as the bullet markers in the footnote
   list, so the visual link between row and footnote is obvious. */
.compare-tag-group {
    display: none;
    gap: 3px;
    margin-left: 6px;
    vertical-align: 2px;
}
.compare-tag {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ced4da;
    flex-shrink: 0;
}
.compare-tag--1 { background: #ff9e00; }   /* orange — promos */
.compare-tag--2 { background: #2f80ed; }   /* blue   — speed-cap */
.compare-tag--3 { background: #27ae60; }   /* green  — non-data inclusions */

/* Footnotes — each row's dot bullet matches the tag colour above */
.compare-footnotes li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 0px;
}
.compare-footnotes li > .compare-tag {
    margin-top: 5px;
}
.compare-footnotes li.compare-footnote-italic {
    /* The italic verification line — no dot, just indent it slightly so
       it sits flush with the items above */
    padding-left: 16px;
    margin-bottom: 0;
}


/* ══════════════════════════════════════════════════════════════════
   BLAZE ASSISTANT — Floating chat widget
══════════════════════════════════════════════════════════════════ */

/* ── Launcher button ─────────────────────────────────────────── */
.chat-launcher {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 1200;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff9e00 0%, #ff2300 100%);
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(255, 35, 0, .38);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease, box-shadow .2s ease;
    color: #fff;
    font-size: 22px;
}
.chat-launcher:hover {
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 10px 28px rgba(255, 35, 0, .48);
}
.chat-launcher .chat-launcher-icon { transition: opacity .2s ease, transform .2s ease; }
.chat-launcher .chat-launcher-close {
    position: absolute;
    opacity: 0;
    transform: rotate(-90deg) scale(.6);
    transition: opacity .2s ease, transform .2s ease;
    font-size: 18px;
}
.chat-launcher.is-open .chat-launcher-icon  { opacity: 0; transform: rotate(90deg) scale(.6); }
.chat-launcher.is-open .chat-launcher-close { opacity: 1; transform: rotate(0deg)  scale(1);  }

/* Notification badge */
.chat-launcher-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    background: #00b341;
    border: 2px solid #fff;
    border-radius: 50%;
}
.chat-launcher.is-open .chat-launcher-badge { display: none; }

/* ── Chat window ─────────────────────────────────────────────── */
.chat-window {
    position: fixed;
    bottom: 100px;
    right: 28px;
    z-index: 1199;
    width: 360px;
    max-height: 560px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Hidden state */
    opacity: 0;
    transform: translateY(16px) scale(.97);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}
.chat-window.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

/* ── Header ──────────────────────────────────────────────────── */
.chat-header {
    background: linear-gradient(135deg, #ff9e00 0%, #ff2300 100%);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.chat-header-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    flex-shrink: 0;
}
.chat-header-info { flex: 1; min-width: 0; }
.chat-header-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}
.chat-header-status {
    font-size: 11px;
    color: rgba(255,255,255,.85);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}
.chat-status-dot {
    width: 7px;
    height: 7px;
    background: #7fff7f;
    border-radius: 50%;
    animation: chat-status-pulse 2s ease-in-out infinite;
}
@keyframes chat-status-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .45; }
}

/* ── Messages area ───────────────────────────────────────────── */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scrollbar-width: thin;
    scrollbar-color: #ffd9c2 transparent;
}
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-thumb { background: #ffd9c2; border-radius: 2px; }

/* Message bubbles */
.chat-msg {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    max-width: 88%;
    animation: chat-msg-in .2s ease;
}
@keyframes chat-msg-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0);   }
}
.chat-msg--bot  { align-self: flex-start; }
.chat-msg--user { align-self: flex-end; flex-direction: row-reverse; }

.chat-msg-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff9e00, #ff2300);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #fff;
    flex-shrink: 0;
}
.chat-msg--user .chat-msg-avatar { display: none; }

.chat-msg-bubble {
    padding: 9px 13px;
    border-radius: 16px;
    font-size: 13.5px;
    line-height: 1.45;
    word-break: break-word;
}
.chat-msg--bot  .chat-msg-bubble {
    background: #f4f4f5;
    color: #1a1a2e;
    border-bottom-left-radius: 4px;
}
.chat-msg--user .chat-msg-bubble {
    background: linear-gradient(135deg, #ff9e00, #ff2300);
    color: #fff;
    border-bottom-right-radius: 4px;
}

/* Typing indicator */
.chat-typing {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    align-self: flex-start;
}
.chat-typing-dots {
    background: #f4f4f5;
    border-radius: 16px;
    border-bottom-left-radius: 4px;
    padding: 10px 14px;
    display: flex;
    gap: 4px;
    align-items: center;
}
.chat-typing-dots span {
    width: 7px;
    height: 7px;
    background: #adb5bd;
    border-radius: 50%;
    animation: chat-dot-bounce .9s ease-in-out infinite;
}
.chat-typing-dots span:nth-child(2) { animation-delay: .15s; }
.chat-typing-dots span:nth-child(3) { animation-delay: .30s; }
@keyframes chat-dot-bounce {
    0%, 60%, 100% { transform: translateY(0);    }
    30%           { transform: translateY(-6px); }
}

/* ─── Rich card carousel ────────────────────────────────────────────
   Rendered inside the widget under a bot text reply. Horizontal
   snap-scroll on both desktop and mobile — one card visible at a time
   on narrow widths, comfortable multi-card view on desktop.  */
.chat-msg--cards {
    align-items: stretch;
}
.chat-msg-avatar--hidden {
    visibility: hidden;      /* keep grid alignment consistent with text rows */
    width: 32px;
}
.chat-card-carousel {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 4px 4px 8px;
    margin: 4px 0 0;
    /* Bleed to the edge of the message row without hiding the scrollbar */
    scrollbar-width: thin;
    scrollbar-color: #ffd9c2 transparent;
    max-width: calc(100% - 8px);
    /* Custom scrollbar for WebKit */
}
.chat-card-carousel::-webkit-scrollbar { height: 6px; }
.chat-card-carousel::-webkit-scrollbar-thumb { background: #ffd9c2; border-radius: 999px; }

.chat-card {
    flex: 0 0 240px;
    scroll-snap-align: start;
    background: #fff;
    border: 1px solid #f0e7e0;
    border-radius: 14px;
    padding: 14px 14px 12px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 10px rgba(31, 31, 50, .05);
    transition: transform .12s ease, box-shadow .12s ease;
}
.chat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(255, 90, 48, .1);
    border-color: #ffd9c2;
}
.chat-card-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}
.chat-card-icon {
    flex: 0 0 34px;
    width: 34px; height: 34px;
    background: #fff0e8;
    color: var(--blaze-red, #ff2300);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.chat-card-header-text {
    flex: 1 1 auto;
    min-width: 0;
}
.chat-card-title {
    font-weight: 700;
    font-size: 15px;
    color: #1a1a2e;
    line-height: 1.2;
}
.chat-card-subtitle {
    font-size: 12px;
    color: #6b6f76;
    margin-top: 2px;
}
.chat-card-badge {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    background: #ff9e00;
    color: #1a1a2e;
    align-self: flex-start;
    white-space: nowrap;
}
.chat-card-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin: 4px 0 10px;
}
.chat-card-price .amt {
    font-size: 24px;
    font-weight: 800;
    color: var(--blaze-red, #ff2300);
    line-height: 1;
}
.chat-card-price .suf {
    font-size: 12px;
    color: #6b6f76;
}
.chat-card-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    font-size: 12.5px;
    color: #1a1a2e;
    line-height: 1.35;
    flex: 1 1 auto;
}
.chat-card-bullets li {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 5px;
}
.chat-card-bullets li:last-child { margin-bottom: 0; }
.chat-card-bullets li i {
    color: #22c55e;
    font-size: 10px;
    margin-top: 4px;
    flex-shrink: 0;
}
.chat-card-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: auto;
}
.chat-card-btn {
    flex: 1 1 auto;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1.5px solid #cfd3da;
    background: #fff;
    color: #4b5060;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
    white-space: nowrap;
}
.chat-card-btn:hover {
    background: #f0f2f5;
    color: #1a1a2e;
    border-color: #a6abb5;
}
.chat-card-btn--primary {
    background: linear-gradient(135deg, #ff9e00 0%, #ff2300 100%);
    color: #fff;
    border-color: transparent;
}
.chat-card-btn--primary:hover {
    background: linear-gradient(135deg, #ff8f00 0%, #d61900 100%);
    color: #fff;
    border-color: transparent;
}

/* CSAT rating card — rendered inline in the widget timeline when the
   agent ends the chat. Deliberately compact so it doesn't dominate the
   window; disappears the moment the customer rates or skips. */
.chat-csat-card {
    background: #fff;
    border: 1px solid #ffd9c2;
    border-radius: 12px;
    padding: 12px 14px;
    max-width: 320px;
    box-shadow: 0 2px 10px rgba(255, 90, 48, 0.08);
}
.chat-csat-title {
    font-weight: 700;
    color: #1a1a2e;
    font-size: 14px;
    margin-bottom: 8px;
}
.chat-csat-stars {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
}
.chat-csat-star {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #d1d5db;
    font-size: 22px;
    line-height: 1;
    transition: color 0.15s ease, transform 0.1s ease;
}
.chat-csat-star:hover { transform: scale(1.15); }
.chat-csat-star.is-on { color: #ff9e00; }
.chat-csat-comment {
    width: 100%;
    resize: none;
    border: 1px solid #e2e5eb;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 13px;
    outline: none;
    font-family: inherit;
    margin-bottom: 8px;
}
.chat-csat-comment:focus { border-color: #ff9e00; box-shadow: 0 0 0 3px rgba(255,158,0,.15); }
.chat-csat-actions {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}
.chat-csat-submit {
    background: linear-gradient(135deg, #ff9e00 0%, #ff2300 100%);
    color: #fff;
    border: none;
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 12.5px;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.chat-csat-submit:disabled { opacity: 0.4; cursor: not-allowed; }
.chat-csat-skip {
    background: transparent;
    border: none;
    color: #6b6f76;
    font-size: 12.5px;
    cursor: pointer;
    padding: 6px 10px;
}
.chat-csat-skip:hover { color: #1a1a2e; text-decoration: underline; }
.chat-csat-card.is-done { padding-bottom: 12px; }

/* ─── Pre-chat verification card ────────────────────────────────────
   Shown inline in the widget between "Talk to human" and the live-chat
   handshake. Reuses the CSAT card's visual language so the widget feels
   consistent — a single soft-bordered panel with 1-2 primary actions. */
.chat-verify-card {
    background: #fff;
    border: 1px solid #ffd9c2;
    border-radius: 12px;
    padding: 12px 14px;
    max-width: 340px;
    box-shadow: 0 2px 10px rgba(255, 90, 48, 0.08);
}
.chat-verify-title {
    font-weight: 700;
    color: #1a1a2e;
    font-size: 14px;
    margin-bottom: 4px;
}
.chat-verify-sub {
    color: #6b6f76;
    font-size: 12.5px;
    margin-bottom: 10px;
    line-height: 1.4;
}
.chat-verify-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}
.chat-verify-label {
    font-size: 11.5px;
    font-weight: 600;
    color: #4b5060;
}
.chat-verify-input,
.chat-verify-select {
    width: 100%;
    border: 1px solid #e2e5eb;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    outline: none;
    font-family: inherit;
    background: #fff;
}
.chat-verify-input:focus,
.chat-verify-select:focus {
    border-color: #ff9e00;
    box-shadow: 0 0 0 3px rgba(255,158,0,.15);
}
.chat-verify-code {
    letter-spacing: 6px;
    font-size: 18px;
    text-align: center;
    font-weight: 700;
}
.chat-verify-channels {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}
.chat-verify-channel {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e2e5eb;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    color: #1a1a2e;
    transition: border-color .12s ease, background .12s ease;
    text-align: left;
    width: 100%;
    font-family: inherit;
}
.chat-verify-channel:hover { border-color: #ff9e00; background: #fffaf3; }
.chat-verify-channel i { font-size: 15px; color: #ff9e00; }
.chat-verify-channel .target { color: #6b6f76; font-size: 12px; margin-left: auto; }
.chat-verify-actions {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
}
.chat-verify-primary {
    background: linear-gradient(135deg, #ff9e00 0%, #ff2300 100%);
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.chat-verify-primary:disabled { opacity: 0.4; cursor: not-allowed; }
.chat-verify-link {
    background: transparent;
    border: none;
    color: #6b6f76;
    font-size: 12.5px;
    cursor: pointer;
    padding: 6px 10px;
    font-family: inherit;
}
.chat-verify-link:hover { color: #1a1a2e; text-decoration: underline; }
.chat-verify-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    margin-bottom: 10px;
    display: none;
}
.chat-verify-error.is-shown { display: block; }
.chat-verify-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    background: #dcfce7;
    color: #14532d;
    margin-bottom: 8px;
}
.chat-verify-badge::before {
    content: "✓";
    font-weight: 700;
}

/* Support action row — "Chat with a person" + "Leave a Message" pair. */
.chat-support-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    margin-left: 35px;
}

/* Support button inside chat */
.chat-support-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #fff;
    border: 1.5px solid #ff5a30;
    border-radius: 999px;
    color: #ff2300;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
    align-self: flex-start;
}
/* Secondary style for the "Leave a Message" variant so live chat reads
   as the primary action. */
.chat-support-btn--secondary {
    background: transparent;
    border-color: #cfd3da;
    color: #4b5060;
}
.chat-support-btn--secondary:hover {
    background: #f0f2f5;
    border-color: #a6abb5;
    color: #1a1a2e;
}
.chat-support-btn:hover {
    background: #ff2300;
    color: #fff;
    border-color: #ff2300;
}

/* ── Quick suggestions (welcome state) ──────────────────────── */
.chat-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 14px 12px;
}
.chat-suggestion-chip {
    font-size: 12px;
    padding: 5px 12px;
    border: 1.5px solid #ffd0bc;
    border-radius: 999px;
    background: #fff7f4;
    color: #c0440b;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
    white-space: nowrap;
}
.chat-suggestion-chip:hover {
    background: #ff5a30;
    color: #fff;
    border-color: #ff5a30;
}

/* ── Input area ──────────────────────────────────────────────── */
.chat-input-area {
    border-top: 1px solid #f0f0f0;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    background: #fff;
}
.chat-input {
    flex: 1;
    border: 1.5px solid #f0e7e0;
    border-radius: 999px;
    padding: 9px 14px;
    font-size: 13.5px;
    outline: none;
    color: #1a1a2e;
    background: #fafafa;
    transition: border-color .15s ease, box-shadow .15s ease;
    resize: none;
    line-height: 1.4;
    max-height: 100px;
    overflow-y: auto;
}
.chat-input:focus {
    border-color: #ff9e00;
    box-shadow: 0 0 0 3px rgba(255, 158, 0, .15);
    background: #fff;
}
.chat-input::placeholder { color: #9aa0a6; }
.chat-send-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff9e00, #ff2300);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    flex-shrink: 0;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
    box-shadow: 0 3px 8px rgba(255, 35, 0, .28);
}
.chat-send-btn:hover { transform: scale(1.08); box-shadow: 0 5px 14px rgba(255, 35, 0, .38); }
.chat-send-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* ── Footer note ─────────────────────────────────────────────── */
.chat-footer-note {
    text-align: center;
    font-size: 10.5px;
    color: #adb5bd;
    padding: 4px 14px 10px;
    flex-shrink: 0;
}

/* ── Mobile adjustments ──────────────────────────────────────── */
@media (max-width: 480px) {
    .chat-window {
        right: 0;
        left: 0;
        bottom: 80px;
        width: 100%;
        border-radius: 18px 18px 0 0;
        max-height: 70vh;
    }
    .chat-launcher { bottom: 20px; right: 16px; }
}

/* ──────────────────────────────────────────────────────────────────────
   TERMS & POLICIES — Legal/TermsAndPolicies.cshtml
   Two-column document catalogue. Each row is a PDF card with an icon,
   title, short description, and a PDF badge on the right.
   ────────────────────────────────────────────────────────────────────── */
.legal-section {
    background: #fff;
    border: 1px solid #f0e7e0;
    border-radius: 14px;
    padding: 28px 28px 18px;
    box-shadow: 0 6px 18px rgba(31, 31, 50, .04);
}
.legal-section-title {
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: var(--blaze-red, #ff2300);
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 6px;
}
.legal-doc-list { margin: 14px 0 0; padding: 0; }
.legal-doc-list li { margin: 0 0 8px; }
.legal-doc-list li:last-child { margin-bottom: 0; }
/* Two-column flow for long lists (e.g. the 12 policies). Each item
   stays a single block so it never breaks across columns. */
@@media (min-width: 768px) {
    .legal-doc-list--2col {
        column-count: 2;
        column-gap: 14px;
    }
    .legal-doc-list--2col li {
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
    }
}

.legal-doc-link {
    display: flex;
    align-items: flex-start;       /* icon aligns with title, not centred vertically */
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid transparent;
    color: #1a1a2e;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.legal-doc-link:hover {
    background: #fff5ee;
    border-color: #ffd9c2;
    color: #1a1a2e;
    text-decoration: none;
    transform: translateY(-1px);
}
.legal-doc-icon {
    flex: 0 0 36px;                /* never shrink, never grow — fixed 36px */
    width: 36px;
    height: 36px;
    font-size: 18px;
    line-height: 1;
    color: var(--blaze-red, #ff2300);
    background: #fff0e8;
    border-radius: 8px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-top: 1px;               /* nudge so the icon sits on the title baseline */
}
.legal-doc-meta {
    flex: 1 1 auto;
    min-width: 0;                  /* lets long titles wrap instead of overflowing the column */
}
.legal-doc-title {
    display: block;
    font-weight: 700;
    font-size: .98rem;
    line-height: 1.25;
    margin-bottom: 2px;
}
.legal-doc-desc {
    display: block;
    color: #6b6f76;
    font-size: 12.5px;
    line-height: 1.35;
}
.legal-doc-badge {
    flex: 0 0 auto;
    align-self: flex-start;        /* badge stays at the top, lines up with the icon */
    margin-top: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .6px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #1a1a2e;
    color: #fff;
}

.legal-footnote {
    border-left: 3px solid var(--blaze-red, #ff2300);
    background: #fff5ee;
    border-radius: 0 10px 10px 0;
    padding: 14px 18px;
    font-size: 14px;
    color: #1a1a2e;
}
.legal-footnote a { color: var(--blaze-red, #ff2300); text-decoration: underline; }

/* Bootstrap utility helpers missing from BS5 builds */
.min-w-0 { min-width: 0; }
@media (min-width: 768px) { .w-md-auto { width: auto !important; } }

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET  (≤ 991px)
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    /* Stack comparison column below plans */
    .plan-compare-card .col-lg-5 { margin-top: 2rem; }

    /* Cap roaming search dropdown height */
    .roaming-search-results { max-height: 220px; }

    /* Slightly tighter plan-compare card padding */
    .plan-compare-card { padding: 28px 24px; }

    /* Compare list rows */
    .compare-row { padding: 12px 16px; }
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE  (≤ 767px)
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    /* ── Plan rows ──────────────────────────────────────────────────── */
    .plan-row { padding: 16px 14px; }
    .plan-row-price { font-size: 1.25rem; }

    /* Button always full-width (new flex layout) */
    .plan-row .btn-buy { justify-content: center; }

    /* Expanded feature list padding */
    .plan-row-details-inner { padding: 14px 10px; }

    /* ── Roaming pack ───────────────────────────────────────────────── */
    /* Reduce map height on mobile so it doesn't dominate the screen */
    .roaming-pack-map { max-height: 220px; overflow: hidden; }

    /* Dropdown stays within viewport */
    .roaming-search-results { max-height: 200px; }

    /* Card padding */
    .roaming-pack-card { padding: 16px 14px; }

    /* ── Trust strip — 2 items per row on mobile ────────────────────── */
    .trust-strip li { flex: 0 0 calc(50% - 8px); }

    /* ── Billing info strip ─────────────────────────────────────────── */
    .billing-info-strip { padding: 12px 14px; }
    .billing-info-item { font-size: .8rem; }

    /* ── FAQ accordion ──────────────────────────────────────────────── */
    .accordion-button {
        font-size: .875rem;
        word-break: break-word;
        padding: 14px 16px;
    }
    .accordion-body { padding: 12px 16px; font-size: .9rem; }

    /* ── Contact form ───────────────────────────────────────────────── */
    .contact-info-panel { min-height: auto !important; padding: 28px 20px !important; }

    /* ── Compare list ───────────────────────────────────────────────── */
    .compare-row { padding: 10px 12px; }
    .compare-logo { width: 32px; height: 32px; font-size: .8rem; }
    .compare-list { border-radius: 12px; }

    /* ── Chat window ────────────────────────────────────────────────── */
    .chat-window { width: calc(100vw - 24px); right: 12px; left: 12px; }

    /* ── QR cards in "Get the app" section ─────────────────────────── */
    .qr-card img { max-width: 110px; }

    /* ── Footer ─────────────────────────────────────────────────────── */
    /* Less top/bottom padding on mobile */
    .footer-main .container { padding-top: 2rem !important; padding-bottom: 1.5rem !important; }

    /* Logo — smaller, centred (col-12 text-center handles the centering) */
    .footer-logo-mark { max-height: 56px !important; height: auto !important; width: auto !important; max-width: 160px !important; }

    /* Headings — tighter */
    .footer-heading { font-size: 13px; margin-bottom: 8px; }

    /* Links — smaller text, tighter line spacing */
    .footer-links a { font-size: 12.5px; }
    .footer-links li { margin-bottom: 5px; }

    /* Acknowledgement — tighter, smaller */
    .footer-acknowledgement { margin-top: 1.25rem !important; font-size: 12px; line-height: 1.6; }

    /* Copyright — centred on mobile */
    .footer-bottom-row { text-align: center; }
    .footer-copyright { font-size: 12px; }

    /* Divider — less margin */
    .footer-main .footer-divider { margin: .75rem 0; }
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE  (≤ 480px)
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    /* Trust strip — single column on very small phones */
    .trust-strip li { flex: 0 0 100%; }
    .trust-strip { gap: 8px 12px; }

    /* Plan compare card */
    .plan-compare-card { padding: 16px 12px; margin-top: -60px; }

    /* Plan row price */
    .plan-row-price { font-size: 1.15rem; }

    /* Roaming map — even smaller */
    .roaming-pack-map { max-height: 170px; }

    /* Section headings */
    .plan-compare h6 { font-size: 10px; letter-spacing: 1.5px; }

    /* Billing strip */
    .billing-info-strip { padding: 10px 12px; }
    .billing-info-title { font-size: .7rem; }

    /* Accordion */
    .accordion-button { font-size: .82rem; padding: 12px 14px; }

    /* Contact info panel */
    .contact-info-panel { border-radius: 16px !important; }

    /* Chat window — full width */
    .chat-window { left: 0 !important; right: 0 !important; width: 100% !important;
                   bottom: 72px; border-radius: 20px 20px 0 0; }

    /* Footnotes — smaller text */
    .compare-footnotes { font-size: .72rem; }
}