/* ============================================================================
   travel-carousel.css  —  Travel eSIM Plans: 3D fan carousel redesign
   Breakpoints match the rest of the site: 768px (tablet), 480px (mobile).
   Glass panel recipe reused from .login-portal-tab-wrapper in sixtel.css.
   ============================================================================ */

/*
   Coverflow numeric params (Swiper EffectCoverflow equivalent):
     card width      = 280px
     spaceBetween    = 40px
     step (center→center) = 280 + 40 = 320px
     rotate          = 20deg
     depth           = 150px
     modifier        = 1
     slidesPerView   = 5 (Fixed/Regional) / 3 (Unlimited)
     stretch         = 0
     slideShadows    = false
   Stage width for 5 cards: 5*280 + 4*40 = 1560px → use 1760px with side padding.
*/

/* Expand this page past the default main-container column so 5 cards fit */
@media (min-width: 992px) {
    .travel-sim-plan-wrapper.main-container {
        margin-left: 220px !important;
        margin-right: 24px !important;
        width: auto !important;
        max-width: none !important;
    }
}

/* ── Layout: override the flex column wrapper for the new full-page design ── */
/* Ultra-wide fix: at viewports ≥ 992px the .main-container has
   margin-left:220px; max-width:none, so it fills from 220px to the viewport
   right edge (e.g. 2560−220 = 2340px at ultra-wide). Without horizontal
   auto margins, the 1760px max-width content box was left-aligned at x=220px
   instead of centred in the available space. margin-left/right:auto centres
   it correctly at every width — at standard widths the box fills the
   container fully so auto margins collapse to 0 and nothing changes.       */
.travel-sim-plan-wrapper .list-option-wrappers {
    height: auto !important;
    min-height: calc(100vh - 80px) !important;
    overflow: visible !important;
    padding: 16px 12px 60px !important;
    justify-content: flex-start !important;
    margin-top: 80px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 1760px !important;
    box-sizing: border-box;
    gap: 0 !important;
}

/* Ensure every ancestor allows the 3D cards to overflow */
.travel-sim-plan-wrapper,
.tc-panel,
.tc-3d-scene {
    overflow: visible !important;
}

/* ── Back button wrapper ─────────────────────────────────────────────────── */
.travel-sim-plan-wrapper .back-button-wrapper {
    align-self: flex-start;
    width: 100%;
    max-width: 1760px;
    margin-bottom: 4px;
}

/* ── Page heading ─────────────────────────────────────────────────────────── */
.tc-page-head {
    text-align: center;
    margin-bottom: 14px;
    width: 100%;
}

.tc-title {
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin: 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.50);
}

/* ── Pill type selector ───────────────────────────────────────────────────── */
.tc-type-wrap {
    display: flex;
    justify-content: center;
    /* Gap A (flag→pills) = 22px. Target: Gap B (pills→cards) = 2× Gap A = 44px.
       44px = this margin-bottom(30px) + tc-glass-wrap padding-top(14px). */
    margin-bottom: 30px;
    width: 100%;
}

.tc-type-bar {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    padding: 5px;
    gap: 3px;
}

.tc-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: 50px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.28s ease, color 0.2s ease, box-shadow 0.28s ease;
    white-space: nowrap;
    font-family: inherit;
    line-height: 1;
}

.tc-pill-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.tc-type-pill:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.11);
}

.tc-type-pill.active {
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: #fff;
    box-shadow: 0 0 22px rgba(37, 99, 235, 0.52), 0 3px 10px rgba(0, 0, 0, 0.30);
}

/* ══════════════════════════════════════════════════════════════════════════════
   LAYOUT WRAP — full section width so 5 cards + 40px gaps can sit side by side.
   ══════════════════════════════════════════════════════════════════════════════ */
.tc-glass-wrap {
    position: relative;
    width: 100%;
    max-width: 1760px;
    overflow: visible;
    padding: 14px 0 20px;
    box-sizing: border-box;
    margin-bottom: 4px;
}

/* ── Shared country header ────────────────────────────────────────────────── */
.tc-country-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 22px;
    /* Was inside .tc-glass-wrap (padding-top:14px) + own padding-top:4px = 18px gap
       above.  Now sits at the top of .list-option-wrappers directly, so replicate
       that same 18px gap as margin-top so visual rhythm is unchanged. */
    margin-top: 18px;
}

/* Issue #4: Flag is now clearly larger and readable */
.tc-header-flag {
    width: 58px;
    height: 42px;
    object-fit: cover;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.42);
    flex-shrink: 0;
}

/* Issue #4: Country name is now prominent */
.tc-header-name {
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

/* ── Panel visibility ────────────────────────────────────────────────────── */
.tc-panel {
    display: none;
    width: 100%;
    max-width: 1760px;
}

.tc-panel.active { display: block; }

/* Unlimited subtitle ("All plans include unlimited data ∞") */
.tc-ul-meta {
    text-align: center;
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    margin: 0 0 12px;
}

/* ── 3D Scene (arrows + stage + shared glow arc) ─────────────────────────── */
.tc-3d-scene {
    position: relative;
    width: 100%;
    max-width: 1760px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* Measured card face height = 380px at desktop/tablet (overflows stage).
       Arrow top = 400px (380px card + 20px gap). Padding-bottom holds room
       for arrows + glow arc below the stage. */
    padding-bottom: 160px;
}

/* ── Arrow buttons ────────────────────────────────────────────────────────── */
/* Arrows always sit below the card at every viewport width. No JS positioning.
   top values center the arrow in the space between card bottom and arc top:
   >1600px: card=380px, space=138px, arrow=52px → top=380+(138-52)/2=423px
   ≤1600px: card=380px, space=108px, arrow=52px → top=380+(108-52)/2=408px (override below)
   ≤992px:  card=380px, space=104px, arrow=44px → top=380+(104-44)/2=410px (override below)
   ≤480px:  card=255px, space= 89px, arrow=38px → top=255+( 89-38)/2=281px (override below) */
.tc-arrow {
    position: absolute;
    top: 423px;
    bottom: auto;
    transform: none;
    z-index: 40;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.13);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    color: #fff;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.15s ease;
    flex-shrink: 0;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
}

.tc-arrow:hover {
    background: rgba(255, 255, 255, 0.26);
    transform: scale(1.10);
}

/* Centred pair below the stage: 16px gap between arrows.
   With 52px arrows: prev right-edge at 50%−8px → left = calc(50% − 60px)
                     next left-edge  at 50%+8px → left = calc(50% +  8px) */
.tc-arrow-prev { left: calc(50% - 60px); right: auto; }
.tc-arrow-next { left: calc(50% +  8px); right: auto; }

/* ── Shared glow arc (ONE element, identical on Fixed / Unlimited / Regional)
   Positioned absolutely at the bottom of .tc-3d-scene so it always sits
   the same distance under the card-row stage, regardless of stage height. */
.tc-glow-arc {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 720px;
    max-width: 70%;
    height: 42px;
    margin: 0;
    pointer-events: none;
    z-index: 1;
}

.tc-glow-arc svg {
    display: block;
    width: 100%;
    height: 100%;
}

.tc-glow-arc-path {
    fill: none;
    stroke: rgba(140, 232, 255, 0.95);
    stroke-width: 2.2;
    stroke-linecap: round;
    filter: drop-shadow(0 0 3px rgba(140, 232, 255, 0.95))
            drop-shadow(0 0 9px rgba(90, 205, 255, 0.75))
            drop-shadow(0 0 20px rgba(80, 190, 255, 0.55))
            drop-shadow(0 0 36px rgba(80, 190, 255, 0.30));
}

/* Fixed and Regional get a wider arc so it spans beneath the full card row.
   Unlimited stays at the default 720px width (3 cards, narrower row). */
.tc-panel[data-plan="fixed"]   .tc-glow-arc,
.tc-panel[data-plan="limited"] .tc-glow-arc {
    width: 1000px;
    max-width: 92%;
}

/* ── 3D Stage — wide enough for 5×280px cards + 4×40px gaps (= 1560px) ───── */
/* transform-style is intentionally NOT preserve-3d.
   With preserve-3d, Chrome/Edge revert the pointer-event hit box of any child
   that has opacity < 1 to its layout position (left:50%), not its 3D-projected
   screen position. That means every side card is "click-invisible" and the active
   card wins every hit test. Using the default flat compositing keeps perspective
   projection (perspective:1400px still applies) while giving each child its
   correct 2D screen-space hit box. z-index on slot classes handles paint order. */
.tc-3d-stage {
    position: relative;
    width: 100%;
    max-width: 1760px;
    height: 400px;
    perspective: 1400px;
    perspective-origin: 50% 42%;
    overflow: visible;
}

/* Unlimited stage: same height as Fixed/Regional now that card heights match. */
.tc-ul-stage {
    height: 400px;
}

/* ── Individual slides — card width 280px ────────────────────────────────── */
.tc-slide {
    position: absolute;
    width: 280px;
    top: 0;
    left: 50%;
    transition: transform 0.50s cubic-bezier(0.32, 0, 0.24, 1.0),
                opacity   0.45s ease;
    transform-origin: center center;
    transform-style: flat;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

/*
   Slot transforms = Swiper coverflowEffect with:
     rotate:20, stretch:0, depth:150, modifier:1, spaceBetween:40, card:280
   Center-to-center step = 280 + 40 = 320px
   offsetN = step * N;  rotateY = ±20*N;  translateZ = -150*N
   NO scale — cards stay full size so gaps stay real empty space.
*/
/* IMPORTANT — no filter: on any slot class.
   filter on a child of transform-style:preserve-3d forces that element into its
   own flat compositing layer and reverts its hit-test area to the layout position
   (left:50% for every slide). All slides would then be hit-tested at the same
   point; the active card (z-index:10) wins every time, making side cards
   impossible to hover or click. Dimming is done with opacity only. */
.slot-active {
    transform: translateX(-50%) translateZ(0) rotateY(0deg);
    opacity: 1;
    z-index: 10;
    cursor: default;
}

.slot-prev {
    transform: translateX(calc(-50% - 320px)) translateZ(-150px) rotateY(-20deg);
    opacity: 0.82;
    z-index: 5;
}

.slot-next {
    transform: translateX(calc(-50% + 320px)) translateZ(-150px) rotateY(20deg);
    opacity: 0.82;
    z-index: 5;
}

.slot-far-prev {
    transform: translateX(calc(-50% - 640px)) translateZ(-300px) rotateY(-40deg);
    opacity: 0.58;
    z-index: 2;
}

.slot-far-next {
    transform: translateX(calc(-50% + 640px)) translateZ(-300px) rotateY(40deg);
    opacity: 0.58;
    z-index: 2;
}

.slot-hidden {
    opacity: 0;
    z-index: 0;
    pointer-events: none;
    transform: translateX(-50%) translateZ(-500px) rotateY(0deg);
}

/* Inner elements on inactive slides are non-interactive */
.tc-slide:not(.slot-active) .tc-view-btn,
.tc-slide:not(.slot-active) .tc-day-pill {
    pointer-events: none;
}

/* ── Card face — login-portal-tab-wrapper glass recipe ───────────────────── */
/* Why no backdrop-filter: CSS 3D transforms (rotateY/translateZ) promote each
   slide to its own compositor layer. backdrop-filter on a child of a promoted
   layer cannot sample the fixed-position beach background (z-index:-2) — the
   compositor sees empty black instead. Using filter:blur on a ::before
   pseudo-element that carries the same photo avoids this entirely.
   Three layers, all inside overflow:hidden so blur bleeds are clipped cleanly:
     ::before  — blurred copy of the page background photo  (z-index: 0)
     ::after   — login rgba wash + border                   (z-index: 1)
     > *       — card content (text, button)                (z-index: 2)
   The outer glow box-shadow lives on .tc-card-face itself so it is NOT clipped
   by overflow:hidden (box-shadow on an element never clips itself). */
.tc-card-face {
    width: 100%;
    position: relative;
    isolation: isolate;         /* contain child z-indexes */
    background: transparent;
    border: none;
    border-radius: 20px;
    /* default outer shadow + inset highlight (login-portal-tab-wrapper exact) */
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.12);
    padding: 28px 22px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    color: #fff;
    text-align: center;
    box-sizing: border-box;
    height: 380px;
    overflow: hidden;
}

/* Layer 1: blurred page background photo.
   blur(18px) matches login-portal-tab-wrapper backdrop-filter blur.
   inset -18px bleeds by the blur radius so hard edges are hidden by overflow:hidden */
.tc-card-face::before {
    content: '';
    position: absolute;
    inset: -18px;
    z-index: 0;
    background: url('../images/fourth.png') center center / cover no-repeat;
    filter: blur(18px);
    pointer-events: none;
}
/* Swap photo per panel so blur source matches the actual page background */
.tc-panel[data-plan="unlimited"] .tc-card-face::before {
    background-image: url('../images/unlimited-package.jpg');
}
.tc-panel[data-plan="limited"] .tc-card-face::before {
    background-image: url('../images/regional-package.png');
}

/* Layer 2: login glass wash + dark tint for bright travel backgrounds.
   IMPORTANT: `background: colorA, colorB` is INVALID for solid colours —
   browsers discard both layers and leave the overlay fully transparent
   (confirmed via DevTools: backgroundColor rgba(0,0,0,0)).  Use a
   linear-gradient for the frosted wash on top of a solid dark tint:
     top:    rgba(255,255,255,0.08) — login-portal-tab-wrapper frosted wash
     bottom: rgba(8,15,35,0.55)     — dark navy tint (needed: login page sits
                                      on a dark photo; these cards sit on a
                                      bright beach/sunset — wash alone washes
                                      out white text)
   blur(18px) lives on ::before (the photo layer), matching login's blur
   strength.  Border matches login: 1px solid rgba(255,255,255,0.18). */
.tc-card-face::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background-color: rgba(8, 15, 35, 0.68);
    background-image: linear-gradient(
        rgba(255, 255, 255, 0.08),
        rgba(255, 255, 255, 0.08)
    );
    border: 1px solid rgba(255, 255, 255, 0.18);
    pointer-events: none;
}

/* All card content sits above the two glass layers */
.tc-card-face > * {
    position: relative;
    z-index: 2;
}

/* Unlimited cards: same height as Fixed/Regional, tighter internal spacing */
.tc-ul-card .tc-card-face {
    height: 380px;
    gap: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
}

/* ── Active card glow ────────────────────────────────────────────────────── */
/* box-shadow on the element = visible outside the card (not clipped).
   border override on ::after = changes the card outline colour. */
.slot-active .tc-fixed-card,
.slot-active .tc-regional-card {
    box-shadow: 0 0 10px rgba(103, 217, 255, 0.95),
                0 0 28px rgba(103, 217, 255, 0.55),
                0 12px 34px rgba(0, 0, 0, 0.40),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.slot-active .tc-fixed-card::after,
.slot-active .tc-regional-card::after {
    border-color: rgba(120, 226, 255, 0.95);
    background-color: rgba(8, 15, 35, 0.72);
    background-image: linear-gradient(
        rgba(255, 255, 255, 0.12),
        rgba(255, 255, 255, 0.12)
    );
}

.slot-active .tc-tier-essential {
    box-shadow: 0 0 10px rgba(45, 212, 191, 0.90),
                0 0 28px rgba(45, 212, 191, 0.50),
                0 12px 34px rgba(0, 0, 0, 0.40),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.slot-active .tc-tier-essential::after {
    border-color: rgba(45, 212, 191, 0.95);
    background-color: rgba(8, 15, 35, 0.72);
    background-image: linear-gradient(
        rgba(255, 255, 255, 0.12),
        rgba(255, 255, 255, 0.12)
    );
}

.slot-active .tc-tier-standard {
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.90),
                0 0 28px rgba(99, 102, 241, 0.55),
                0 12px 34px rgba(0, 0, 0, 0.40),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.slot-active .tc-tier-standard::after {
    border-color: rgba(129, 140, 248, 0.95);
    background-color: rgba(8, 15, 35, 0.72);
    background-image: linear-gradient(
        rgba(255, 255, 255, 0.12),
        rgba(255, 255, 255, 0.12)
    );
}

.slot-active .tc-tier-plus {
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.90),
                0 0 28px rgba(74, 222, 128, 0.50),
                0 12px 34px rgba(0, 0, 0, 0.40),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.slot-active .tc-tier-plus::after {
    border-color: rgba(74, 222, 128, 0.95);
    background-color: rgba(8, 15, 35, 0.72);
    background-image: linear-gradient(
        rgba(255, 255, 255, 0.12),
        rgba(255, 255, 255, 0.12)
    );
}

/* ── Fixed / Regional card content ───────────────────────────────────────── */
.tc-card-days {
    font-size: 22px;
    font-weight: 600; /* matches login .portal-tab-wrapper > li */
    color: #fff;      /* login label contrast on glass */
    margin: 0;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.80), 0 2px 20px rgba(0, 0, 0, 0.55);
}

.tc-card-data {
    font-size: 60px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 0;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.80), 0 2px 20px rgba(0, 0, 0, 0.55);
}

/* Orange divider between "30 Days" and "100GB".
   Markup: <hr class="tc-card-divider"> — Fixed/Regional only.
   Unlimited has no stacked day/size pair, so no divider there. */
.tc-card-divider {
    border: none;
    border-top: 2px solid #ff8000; /* login active-tab underline orange */
    width: 100%; /* matches .tc-view-btn width:100% in the same container */
    margin: 0;
    flex-shrink: 0;
    align-self: center;
}

/* ── Price row ────────────────────────────────────────────────────────────── */
.tc-price-row {
    display: flex;
    align-items: baseline;
    gap: 2px;
    color: #fff;
    font-weight: 700;
    justify-content: center;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.80), 0 2px 20px rgba(0, 0, 0, 0.55);
    position: relative;    /* anchor the ::before "From" label */
    padding-top: 22px;     /* vertical room for the 15px "From" label */
}

/* ── "From" label: Fixed and Regional cards only ─────────────────────────── */
/* CSS-only approach — no markup change to TravelEsimPlans.cshtml required.
   ::before sits in the padding-top gap above the £ / amount.               */
.tc-fixed-card .tc-price-row::before,
.tc-regional-card .tc-price-row::before {
    content: 'From';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.90);
    white-space: nowrap;
    line-height: 1;
}

.tc-curr {
    font-size: 22px;
    font-weight: 500;
    opacity: 0.88;
}

.tc-price-amt {
    font-size: 40px;
    line-height: 1;
    min-width: 48px;
    text-align: left;
}

/* ── Unavailable state ────────────────────────────────────────────────────── */
.tc-slide[data-available="false"] .tc-card-face {
    opacity: 0.40;
}

/* ── "View Plans" button ─────────────────────────────────────────────────── */
.tc-view-btn {
    width: 100%;
    padding: 12px 0;
    border-radius: 12px;
    border: none;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
    color: #fff;
    letter-spacing: 0.04em;
    margin-top: auto;
    font-family: inherit;
}

.tc-view-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    opacity: 0.90;
}

.tc-view-btn:disabled {
    opacity: 0.30;
    cursor: not-allowed;
    pointer-events: none;
}

.tc-fixed-card .tc-view-btn,
.tc-regional-card .tc-view-btn {
    background: linear-gradient(135deg, #1d4ed8, #3b82f6);
}

.tc-tier-essential .tc-view-btn { background: linear-gradient(135deg, #0f766e, #14b8a6); }
.tc-tier-standard  .tc-view-btn { background: linear-gradient(135deg, #4338ca, #6366f1); }
.tc-tier-plus      .tc-view-btn { background: linear-gradient(135deg, #15803d, #22c55e); }

/* ── Unlimited card content ───────────────────────────────────────────────── */
/* Decluttered: no icon badge, no repeated "Unlimited" label, no "Data
   Unlimited" row — just the tier name as the card's heading. */
.tc-tier-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-top: 6px;
}

.tc-tier-line2 {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.01em;
}

.tc-tier-essential .tc-tier-line2 { color: #2DD4BF; }
.tc-tier-standard  .tc-tier-line2 { color: #818CF8; }
.tc-tier-plus      .tc-tier-line2 { color: #4ADE80; }

.tc-validity-lbl {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.68);
    margin: 0;
}

/* ── Day-period pills grid ────────────────────────────────────────────────── */
.tc-day-pills-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    width: 100%;
}

.tc-day-pill {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    padding: 7px 4px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    transition: background 0.18s ease, border-color 0.18s ease;
    font-family: inherit;
}

.tc-day-pill:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.48);
}

.tc-day-pill.tc-day-active {
    background: rgba(37, 99, 235, 0.68);
    border-color: rgba(99, 148, 255, 0.90);
    box-shadow: 0 0 12px rgba(37, 99, 235, 0.38);
}

.tc-day-pill.tc-day-unavail {
    opacity: 0.28;
    cursor: not-allowed;
    pointer-events: none;
}

.tc-pill-num {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}

.tc-pill-unit {
    font-size: 10px;
    font-weight: 400;
    opacity: 0.78;
    line-height: 1;
    color: #fff;
}

/* ── Dot indicators ───────────────────────────────────────────────────────── */
.tc-dots-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 16px 0 6px;
}

.tc-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
}

.tc-dot.active {
    background: #fff;
    transform: scale(1.40);
}

/* ── Drag hint ────────────────────────────────────────────────────────────── */
.tc-drag-hint {
    text-align: center;
    color: rgba(255, 255, 255, 0.48);
    font-size: 13px;
    margin: 0 0 4px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   MID DESKTOP  ≤ 1600px — card 220px, spaceBetween 40 → step 260
   Keeps 5 distinct cards with gaps on typical 1280–1600 viewports.
   ══════════════════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 1600px) {
    .tc-slide { width: 220px; }

    .tc-3d-stage { height: 370px; }
    .tc-ul-stage { height: 370px; }

    /* step = 220 + 40 = 260 */
    .slot-prev     { transform: translateX(calc(-50% - 260px)) translateZ(-150px) rotateY(-20deg); }
    .slot-next     { transform: translateX(calc(-50% + 260px)) translateZ(-150px) rotateY(20deg); }
    .slot-far-prev { transform: translateX(calc(-50% - 520px)) translateZ(-300px) rotateY(-40deg); }
    .slot-far-next { transform: translateX(calc(-50% + 520px)) translateZ(-300px) rotateY(40deg); }

    .tc-card-data { font-size: 50px; }
    .tc-price-amt { font-size: 34px; }
    .tc-glow-arc  { width: 640px; }

    .tc-panel[data-plan="fixed"]   .tc-glow-arc,
    .tc-panel[data-plan="limited"] .tc-glow-arc {
        width: 880px;
        max-width: 90%;
    }

    /* Arrow centered between card bottom (380px) and arc top (488px):
       space=108px, arrow=52px → each gap=28px → top=408px */
    .tc-arrow { top: 408px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   TABLET  ≤ 992px — card 200px, spaceBetween 32 → step 232
   Still show 5 cards when viewport allows; far cards remain visible.
   ══════════════════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 992px) {
    .tc-title { font-size: 22px; }

    .tc-type-pill { font-size: 13px; padding: 8px 14px; gap: 5px; }
    .tc-pill-icon { width: 14px; height: 14px; }

    .tc-header-flag { width: 46px; height: 33px; }
    .tc-header-name { font-size: 24px; }

    .tc-glass-wrap { padding: 14px 0 16px; }

    .tc-3d-stage { height: 360px; max-width: 100%; }
    .tc-ul-stage  { height: 360px; }

    .tc-slide { width: 200px; }

    /* step = 200 + 32 = 232 */
    .slot-prev     { transform: translateX(calc(-50% - 232px)) translateZ(-150px) rotateY(-20deg); }
    .slot-next     { transform: translateX(calc(-50% + 232px)) translateZ(-150px) rotateY(20deg); }
    .slot-far-prev { transform: translateX(calc(-50% - 464px)) translateZ(-300px) rotateY(-40deg); opacity: 0.65; }
    .slot-far-next { transform: translateX(calc(-50% + 464px)) translateZ(-300px) rotateY(40deg); opacity: 0.65; }

    .tc-card-data  { font-size: 48px; }
    .tc-price-amt  { font-size: 34px; }
    .tc-arrow      { width: 44px; height: 44px; font-size: 26px; }

    /* Scene padding: stage(360) + pad must hold arrow-bottom(454px) + glow(36px) */
    .tc-3d-scene { padding-bottom: 160px; }

    /* Arrow centered: card=380px, arc-top=484px, space=104px, arrow=44px → top=410px */
    .tc-arrow { top: 410px; }

    /* 44px arrows: prev right-edge at 50%−8px → left = calc(50% − 52px) */
    .tc-arrow-prev { left: calc(50% - 52px) !important; right: auto; }
    .tc-arrow-next { left: calc(50% +  8px) !important; right: auto; }

    .tc-tier-line2 { font-size: 24px; }

    .tc-glow-arc { width: 560px; max-width: 72%; height: 36px; }

    .tc-panel[data-plan="fixed"]   .tc-glow-arc,
    .tc-panel[data-plan="limited"] .tc-glow-arc {
        width: 740px;
        max-width: 86%;
    }

    /* Unlimited card height now matches Fixed/Regional at this breakpoint */
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE  ≤ 480px
   FIX 1 — Card width 170px, step 196px (170+26).
     At 375px: slot-prev center = 188−196 = −8px → card runs −8−85 to −8+85
               = −93px…+77px → 77px of the side card visible ✓
     At 390px: slot-prev center = 195−196 = −1px  → 84px visible ✓
     At 414px: slot-prev center = 207−196 = +11px → 96px visible ✓
   FIX 2 — Arrows repositioned below the stage (never overlap cards).
     positionPanelArrows() is a no-op at all widths; CSS owns the position.
     Both arrows sit side-by-side at bottom:42px within .tc-3d-scene, above
     the glow arc (height 26px at bottom:0). Scene padding-bottom grows from
     120px (base) → 88px here to match the smaller 38px arrows.
   FIX 3 — min-height:calc(100vh-80px) overridden to auto so the wrapper
     shrinks to its content on mobile instead of leaving a fixed-height gap.
   ══════════════════════════════════════════════════════════════════════════════ */
@media only screen and (max-width: 480px) {
    /* FIX 3: remove forced full-viewport height that caused the footer gap */
    .travel-sim-plan-wrapper .list-option-wrappers {
        padding: 14px 4px 32px !important;
        margin-top: 68px !important;
        max-width: 100% !important;
        min-height: auto !important;
    }

    .tc-title { font-size: 17px; }

    .tc-type-bar   { padding: 4px; gap: 2px; }
    .tc-type-pill  { font-size: 11px; padding: 7px 10px; gap: 4px; }
    .tc-pill-icon  { width: 13px; height: 13px; }

    .tc-header-flag { width: 38px; height: 27px; }
    .tc-header-name { font-size: 20px; }

    /* padding-top: 14px so gap pills→scene = tc-type-wrap(30px) + this(14px) = 44px = 2×22px */
    .tc-glass-wrap { padding: 14px 0 10px; max-width: 100%; }

    /* FIX 2: padding holds the arrow row (top:275px, h:38px) + glow arc (26px) */
    .tc-3d-scene { padding-bottom: 100px; max-width: 100%; }

    /* FIX 1: tighter stage height to match smaller cards */
    .tc-3d-stage {
        height: 270px;
        max-width: 100%;
        perspective: 1000px;
    }
    .tc-ul-stage { height: 270px; }

    /* FIX 1: card width 170px — fits active + visible side slivers at 375-414px */
    .tc-slide { width: 170px; }

    /* FIX 1: step = 170 + 26 = 196px; side cards visible at every target width */
    .slot-prev     { transform: translateX(calc(-50% - 196px)) translateZ(-100px) rotateY(-20deg); opacity: 0.82; }
    .slot-next     { transform: translateX(calc(-50% + 196px)) translateZ(-100px) rotateY(20deg);  opacity: 0.82; }
    .slot-far-prev { transform: translateX(calc(-50% - 392px)) translateZ(-200px) rotateY(-40deg); opacity: 0.25; }
    .slot-far-next { transform: translateX(calc(-50% + 392px)) translateZ(-200px) rotateY(40deg);  opacity: 0.25; }

    /* FIX 1: card face scaled down proportionally */
    .tc-card-face {
        padding: 16px 14px 14px;
        gap: 8px;
        border-radius: 14px;
        height: 255px;
    }
    .tc-ul-card .tc-card-face { height: 255px; }

    .tc-card-days  { font-size: 15px; }
    .tc-card-data  { font-size: 34px; }
    .tc-price-amt  { font-size: 26px; }
    .tc-curr       { font-size: 15px; }
    .tc-price-row  { padding-top: 16px; }
    .tc-view-btn   { font-size: 12px; padding: 8px 0; border-radius: 9px; }

    .tc-tier-line2   { font-size: 18px; }
    .tc-validity-lbl { font-size: 11px; }
    .tc-day-pills-grid { gap: 5px; }
    .tc-pill-num    { font-size: 13px; }
    .tc-pill-unit   { font-size: 9px; }

    /* ── Unlimited card spacing — SCOPED, cannot affect Fixed / Regional ─────
       Problem: Unlimited has 5 content blocks (tier name, subtitle, 6-pill
       grid, price, button) vs Fixed/Regional's 4 (days, divider, data, price,
       button). At gap:8px + price-row padding-top:16px the stack = ~260px,
       overflowing the 255px card and clipping the View Plans button.
       Fix: three Unlimited-only rules reclaim 28px without touching shared
       rules or shrinking the day-pill touch targets.
         gap   8 → 5px  (×4 gaps) = 12px saved
         tier-heading margin-top 6 → 0  =  6px saved
         price-row padding-top 16 → 6px = 10px saved
       New stack ≈ 232px < 255px card → button sits ~9px clear of the edge. */
    .tc-ul-card .tc-card-face   { gap: 5px; }
    .tc-ul-card .tc-tier-heading { margin-top: 0; }
    .tc-ul-card .tc-price-row   { padding-top: 6px; }

    /* ── Fixed / Regional card tweaks — SCOPED, cannot affect Unlimited ────────
       FIX 1: FROM label was 18px (no mobile override), nearly as large as the
         15px day count. Reduced to 11px → clearly secondary in the hierarchy.
         price-row padding-top trimmed 16→12px: the 12px gap still fits the
         11px label cleanly; saves 4px while keeping the label in its slot.
       FIX 2: gap between text elements (days/divider/data/price) increased
         8→11px. Button has margin-top:auto so it stays anchored at the card
         bottom — the extra gap is absorbed from that auto margin, not from
         card height, so the card never overflows.
       All selectors use .tc-fixed-card / .tc-regional-card compound selectors;
       Unlimited cards (.tc-ul-card) cannot be reached by any of these rules. */
    .tc-fixed-card .tc-price-row::before,
    .tc-regional-card .tc-price-row::before {
        font-size: 11px;
        letter-spacing: 0.08em;
    }
    .tc-fixed-card .tc-price-row,
    .tc-regional-card .tc-price-row    { padding-top: 12px; }
    .tc-fixed-card.tc-card-face,
    .tc-regional-card.tc-card-face     { gap: 11px; }

    /* Arrow centered: card=255px, arc-top=344px, space=89px, arrow=38px → top=281px */
    .tc-arrow {
        width: 38px;
        height: 38px;
        font-size: 22px;
        top: 281px;
    }
    .tc-arrow:hover {
        transform: scale(1.10);
    }
    /* Side-by-side, centred below the stage */
    .tc-arrow-prev { left: calc(50% - 46px) !important; right: auto; }
    .tc-arrow-next { left: calc(50% + 8px)  !important; right: auto; }

    .tc-dot        { width: 7px; height: 7px; }
    .tc-drag-hint  { font-size: 12px; margin: 4px 0 0; }

    .tc-glow-arc { width: 260px; max-width: 76%; height: 26px; }

    .tc-panel[data-plan="fixed"]   .tc-glow-arc,
    .tc-panel[data-plan="limited"] .tc-glow-arc {
        width: 320px;
        max-width: 88%;
    }
}