/* ============================================================
   eSIM — Packages page. MOBILE OPTIMIZATION.

   Load AFTER esim-tokens.css and esim-packages.css:
     <link href="/css/Esim/esim-tokens.css"           rel="stylesheet" />
     <link href="/css/Esim/esim-packages.css"         rel="stylesheet" />
     <link href="/css/Esim/esim-packages-mobile.css"  rel="stylesheet" />

   Writing direction
   -----------------
   Base layout is RTL (Hebrew). We're not doing full i18n yet, but to make
   a future translation to EN/other LTR languages cheaper, this file uses
   LOGICAL properties wherever it makes sense (margin-inline*, padding-inline,
   text-align: start/end, margin-block). That way, when dir switches to LTR,
   the layout flips automatically in the right direction.

   Breakpoint
   ----------
   Main breakpoint ≤1024px — shared with the catalog for the whole eSIM
   section. Phone-specific fine-tuning lives in the ≤480px block below.

   Do not touch: divCart, divPay, divLoginStep (owned by their own components).
   ============================================================ */

@media (max-width: 1024px) {

    .main-inner {
        padding-inline: 0;
        background-color: var(--esim-blue-bg);
    }

    /* --- Kill the desktop min-width: 920px on the two big cards. ---
       Raised specificity (via .esim-page) so this wins even if this file is
       accidentally linked BEFORE esim-packages.css. Critical for RTL: an
       un-reset 920px card is wider than the viewport, and in RTL the excess
       overflows to the LEFT and gets clipped. */
    .esim-page .esim-operator,
    .esim-page .esim-operator-plans-card,
    .esim-page #esimPackagesArea {
        min-width: 0;
        max-width: 100%;
    }

    /* --- Page container: side padding instead of edge-to-edge.
       We don't override the desktop max-width (720px): on phones it doesn't
       constrain anything anyway, and on tablets it gives a neat centered
       column.
       Flex column so we can reorder the breadcrumb above the title on mobile
       via `order` (see below). Requires the markup tweak that makes
       .esim-operator and #esimPackagesArea direct children of .esim-pkg
       instead of being nested inside .esim-breadcrumb. --- */
    .esim-pkg {
        display: flex;
        flex-direction: column;
        padding-inline: 16px;
        padding-bottom: 0;
        box-sizing: border-box;
    }

    /* --- Breadcrumb: above the title, centered ---
       order: -1 lifts it above .esim-pkg-header (which stays first in the
       DOM for desktop). justify-content centers the links. Relies on the
       markup tweak: after un-nesting, .esim-breadcrumb holds ONLY the links,
       so lifting it no longer drags the cards with it. --- */
    .esim-breadcrumb {
        order: -1;
        gap: 8px;
        margin-top: 15px;
    }

    .esim-breadcrumb__sep {
        width: 6px;
        height: 11px;
    }

    /* ========================================================
       Operator card → single column
       ======================================================== */
    .esim-operator {
        flex-basis: 100%;
        width: 100%;
        min-width: 0; /* drop the desktop min-width: 920px */
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        /*       gap: 14px;*/
        border-radius: 20px;
        padding: 18px 16px 28px;
        margin-top: 14px;
        margin-bottom: 20px;
        text-align: start;
    }

    /* "Unwrap" body: its children (info + logo) become direct flex items
       of .esim-operator. This lets us move the logo/card ABOVE the country
       row via order (per the mockup) without touching the markup. */
    .esim-operator__body {
        display: contents;
    }


    .esim-operator__logo {
        order: -1; /* logo/card goes on top */
        width: auto;
        max-width: 300px;
        height: auto;
        margin-top: 0;
        margin-inline-start: auto;
    }

        .esim-operator__logo img {
            width: 100%;
            height: auto; /* height follows the image ratio, no letterboxing */
        }

    .esim-operator__country {
        order: 0;
        font-size: 18px;
        margin-top: 20px;
        margin-bottom: 4px;
        gap: 16px;
    }

    .esim-operator__divider {
        order: 1;
        margin-block: 2px;
    }

    .esim-operator__info {
        order: 2;
        flex: initial; /* reset flex: 1 from desktop */
        display: flex;
        flex-direction: column;
        align-items: stretch;
        text-align: start;
    }

    .esim-operator__name {
        font-size: 18px;
        margin-top: 10px;
        margin-bottom: 0;
    }

        .esim-operator__name::before {
            display: none
        }

    .esim-operator__networks {
        margin-bottom: 12px;
    }

    /* "Check compatibility" button: sits at the bottom of the card.
       order: 5 pushes it below the notes list (in the DOM it comes before
       them). Width fits its content and it's pinned to the leading edge
       (align-self: start = right in RTL, left in LTR). */
    .esim-operator__compat {
        order: 5;
        display: inline-flex;
        width: auto;
        max-width: 100%;
        align-self: start;
        justify-content: center;
        padding: 14px 28px;
        margin-top: 32px;
        font-size: 16px;
    }

    .esim-operator__notes {
        margin-top: 10px;
    }

        .esim-operator__notes li {
            font-size: 15px;
            line-height: 24px;
        }

    /* ========================================================
       Plans card
       ======================================================== */
    #esimPackagesArea {
        flex-basis: 100%;
        width: 100%;
        min-width: 0;
    }

    .esim-operator-plans-card {
        width: 100%;
        min-width: 0; /* drop the 920px min-width */
        box-sizing: border-box;
        border-radius: 24px;
        padding: 16px 8px 8px;
        margin-bottom: 0;
    }

    /* --- Plan type tabs ---
       Per the mockup: a thin divider line, active tab gets an ORANGE
       indicator (on desktop it's dark navy; here we match the mobile
       mockup). */
    .esim-plan-tabs {
        border-bottom: 1px solid rgba(22, 8, 97, 0.15);
        margin-bottom: 16px;
    }

    .esim-plan-tabs__tab {
        padding: 12px 6px;
        font-size: 14px;
        line-height: 1.25; /* the longer "Data / Voice / SMS" label may wrap */
    }

    .esim-plan-tabs__tab--active::after {
        background: var(--esim-orange);
        height: 3px;
        bottom: -1px;
        border-radius: 2px;
    }

    /* --- Standard / Unlimited toggle --- */
    .esim-plan-toggle {
        margin-bottom: 28px;
    }

    .esim-plan-toggle__opt {
        padding: 9px;
        border-radius: 7px;
    }

    /* --- Package list --- */
    .esim-pkg-choose {
        font-size: 18px;
        margin-inline: 6px;
        margin-bottom: 0;
    }

    .esim-packages {
        margin-bottom: 24px;
    }

    .esim-packages__group-title {
        font-size: 15px;
        margin-inline-end: 10px;
    }

    .esim-pkg-row {
        flex-wrap: nowrap; /* keep data amount and price on one line always */
        gap: 10px;
        padding: 14px 16px;
        margin-inline: 4px;
        margin-bottom: 8px;
        box-sizing: border-box;
    }

    .esim-pkg-row__data {
        flex: 1 1 auto;
        min-width: 0; /* allow shrinking so the price never gets pushed out */
    }

    .esim-pkg-row__price {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* ========================================================
       "Need more coverage?" upsell block
       ======================================================== */
    .esim-more-coverage {
        margin-inline: 6px;
        margin-top: 24px;
    }

    .esim-more-coverage__title {
        font-size: 17px;
        margin-inline: 8px;
        margin-top: 40px;
        margin-bottom: 10px;
    }

    .esim-more-coverage__text {
        font-size: 17px;
        line-height: 28px;
        margin-inline: 8px;
        margin-bottom: 36px;
    }

    /* Keep the desktop DOM order (icon → text → chevron): in RTL that renders
       as image at the leading edge (right), the text/price block to its left,
       and the chevron at the trailing edge (far left). Only sizing here. */
    .esim-more-card {
        gap: 28px;
        padding: 16px;
        border-radius: 26px;
    }

    .esim-more-card__icon {
        width: 69px;
        height: 59px;
    }
}

/* ============================================================
   Tablet range (768-1024): restore the DESKTOP layout for the OPERATOR
   CARD only (variant A) — two columns (info + logo side by side) with
   desktop paddings/sizes, but kept FLUID (min-width stays 0 from the
   <=1024 block), because a fixed 920px card can't fit 768-951px.
   The packages card keeps the phone layout. Breadcrumb/title return to
   desktop order (title on top).
   Reverts the phone-layout overrides back to their desktop values.
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {

    /* breadcrumb back below the title (title on top, like desktop) */
    .esim-breadcrumb {
        order: 0;
    }

    .esim-pkg-header__title {
        margin-bottom: 0;
    }


    /* operator card: block box, desktop radius/padding/margins (fluid width) */
    .esim-operator {
        display: block;
        border-radius: 44px;
        padding: 38px 48px 64px;
        margin-top: 25px;
        margin-bottom: 26px;
        text-align: right;
    }

    /* country + divider back to normal order and desktop spacing */
    .esim-operator__country {
        order: 0;
        margin-top: 0;
        margin-bottom: 0;
        gap: 10px;
    }

    .esim-operator__divider {
        order: 0;
        margin: 10px 0 24px;
    }

    /* body: two columns again (undo display: contents) */
    .esim-operator__body {
        display: flex;
        align-items: center;
        gap: 22px;
    }

    /* info column on the right (RTL) */
    .esim-operator__info {
        order: 0;
        flex: 1;
        display: block;
        text-align: right;
    }

    .esim-operator__name {
        font-size: 24px;
        margin: 0 0 8px;
    }

    .esim-operator__networks {
        margin-bottom: 14px;
    }

    /* compat button back to inline desktop size (not full-width / pinned) */
    .esim-operator__compat {
        order: 0;
        align-self: auto;
        padding: 10px 20px;
        margin-top: 0;
    }

    .esim-operator__notes {
        margin: 25px 0 0;
    }

        .esim-operator__notes li {
            font-size: 16px;
            line-height: 28px;
        }

    /* logo: fixed desktop size, on the left (RTL), no corner pinning */
    .esim-operator__logo {
        order: 0;
        width: 294px;
        max-width: none;
        height: 185px;
        margin-top: 13px;
        margin-inline-start: 0;
        align-self: auto;
    }

        .esim-operator__logo img {
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
}

@media (max-width: 600px) {

    .esim-pkg-header__title {
        font-size: 32px;
        line-height: 34px;
        margin-top: 20px;
        margin-bottom: 34px;
    }

    .esim-operator__logo {
        max-width: 206px;
    }
}

@media (max-width: 400px) {

    .esim-compat-tabs {
        width: 280px;
    }
}

/* ============================================================
   Touch devices: suppress the hover "lift" on rows/cards so the state
   doesn't stay "stuck" after a tap. A separate (hover: none) query is
   more correct here than tying this to viewport width.
   ============================================================ */
@media (hover: none) {
    .esim-pkg-row:hover, .esim-more-card:hover {
        transform: none;
        box-shadow: var(--esim-shadow);
        border-color: transparent;
    }

    .esim-pkg-row:active,
    .esim-more-card:active {
        border-color: #F1481F; /* brief feedback on tap */
    }
}