/* ------------------------------------------------------------
   Subscription / payment-method modals (.sub-modal)
   Markup: templates/public/courses/detail.html, fragments/course-card-modals.html
   Behaviour: static/js/subscription-modal.js

   Phones (<640px): bottom sheet with a grab handle, sticky header, plan
   price chips and a scroll-snap plan carousel.
   Tablet/desktop: centred dialog whose body scrolls inside the viewport.
   Colours come only from theme.css tokens, so light + dark both work.
   ------------------------------------------------------------ */

/* Sits under the other .jm-modal dialogs (z 150), e.g. the points confirmation
   that opens from a "Pay with points" button inside this modal. */
.sub-modal.jm-modal { z-index: 140; }

.sub-modal { opacity: 0; transition: opacity .2s ease; }
.sub-modal.is-open { opacity: 1; }

.sub-modal .sub-modal__panel {
    display: flex; flex-direction: column; padding: 0; overflow: hidden;
    max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px);
    transform: translateY(10px) scale(.98);
    transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}
.sub-modal.is-open .sub-modal__panel { transform: none; }

.sub-modal__grab { display: none; }

.sub-modal .sub-modal__head {
    flex: none; margin: 0; padding: 20px 24px 14px;
    border-bottom: 1px solid transparent; transition: border-color .2s ease;
}
.sub-modal.is-scrolled .sub-modal__head { border-bottom-color: var(--border); }
.sub-modal .sub-modal__head h2 { min-width: 0; line-height: 1.35; overflow-wrap: anywhere; }
.sub-modal .jm-modal-close { flex: none; width: 44px; height: 44px; border-radius: 12px; }
.sub-modal .jm-modal-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sub-modal__body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; padding: 6px 24px 24px;
}

/* Price chips only exist on phones (JS adds them for 2+ plans) */
.sub-modal__nav { display: none; }

/* Side-by-side plans: equal heights so every CTA lines up */
.sub-modal .jm-plans { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); align-items: stretch; }
.sub-modal .jm-plan__head h3 { overflow-wrap: anywhere; }
.sub-modal .jm-plan__top { flex-wrap: wrap; }

.sub-modal .sub-modal__backdrop { touch-action: none; }
html.dark .sub-modal .sub-modal__panel {
    background: linear-gradient(var(--card), var(--card)), var(--bg2);
    border-color: var(--border2);
}

@media (pointer: coarse) {
    .sub-modal .jm-cta-stack .jm-btn { min-height: 44px; }
}

/* Scroll lock (class, not inline style, so other dialogs resetting html.style.overflow can't undo it) */
html.sub-modal-lock, html.sub-modal-lock body { overflow: hidden; overscroll-behavior: none; }
html.sub-modal-lock body { padding-right: var(--sub-modal-sbw, 0px); }

/* Landscape phones / short windows keep the centred dialog but give the content the height */
@media (min-width: 640px) and (max-height: 520px) {
    .sub-modal.jm-modal { padding: 8px 20px; }
    .sub-modal .sub-modal__panel { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
    .sub-modal .sub-modal__head { padding: 10px 20px 8px; }
    .sub-modal .sub-modal__head h2 { font-size: 1.05rem; }
    .sub-modal__body { padding: 4px 20px 16px; }
    .sub-modal .jm-plan__head { padding: 12px 16px; }
    .sub-modal .jm-plan__body { padding: 10px 16px; }
    .sub-modal .jm-plan__foot { padding: 0 16px 14px; }
    .sub-modal .jm-price--lg { font-size: 1.6rem; }
}

/* Phones and short windows: each plan scrolls on its own, capped to the height left
   under the dialog chrome (--sub-sheet-chrome is measured by JS), so its CTA stays pinned. */
@media (max-width: 639.98px) {
    .sub-modal { --sub-avail: 92dvh; }
}
@media (min-width: 640px) and (max-height: 520px) {
    .sub-modal { --sub-avail: calc(100dvh - 16px); }
}
@media (max-width: 639.98px), (min-width: 640px) and (max-height: 520px) {
    .sub-modal .jm-plans > .jm-plan {
        max-height: calc(var(--sub-avail) - var(--sub-sheet-chrome, 190px));
        overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: none;
    }
    /* The pinned CTA's shadow (.is-clipped) already signals more content */
    .sub-modal .jm-plans > .jm-plan::-webkit-scrollbar { display: none; }
    .sub-modal .jm-plans .jm-plan__foot {
        position: sticky; bottom: 0; z-index: 1; margin-top: auto; padding-top: 12px;
        background: linear-gradient(var(--card), var(--card)), var(--bg2);
    }
    /* Dark panels carry an extra --card layer (see html.dark rule above); match it */
    html.dark .sub-modal .jm-plans .jm-plan__foot {
        background: linear-gradient(var(--card), var(--card)), linear-gradient(var(--card), var(--card)), var(--bg2);
    }
    /* Shadow only when features actually run under the pinned CTA (class set by JS) */
    .sub-modal .jm-plan.is-clipped .jm-plan__foot { box-shadow: 0 -14px 14px -14px rgba(0, 0, 0, .35); }
}

@media (max-width: 639.98px) {
    .sub-modal.jm-modal { align-items: flex-end; padding: 0; }

    .sub-modal .sub-modal__panel {
        width: 100%; max-width: none;
        max-height: 92vh; max-height: 92dvh;
        border-radius: 22px 22px 0 0; border-bottom: 0;
        box-shadow: 0 -18px 50px -22px rgba(0, 0, 0, .5);
        transform: translateY(100%);
        transition: transform .34s cubic-bezier(.22, 1, .36, 1);
    }
    .sub-modal.is-open .sub-modal__panel { transform: none; }
    .sub-modal.is-dragging .sub-modal__panel { transition: none; }

    /* Grab handle: 22px tall drag zone with a pill in the middle */
    .sub-modal__grab {
        display: block; flex: none; height: 22px; position: relative;
        touch-action: none; cursor: grab;
    }
    .sub-modal__grab::before {
        content: ""; position: absolute; top: 9px; left: 50%; width: 42px; height: 5px;
        margin-left: -21px; border-radius: 999px; background: var(--faint); opacity: .45;
    }

    .sub-modal .sub-modal__head { padding: 2px 16px 12px; touch-action: none; }
    .sub-modal .sub-modal__head h2 { font-size: 1.1rem; }

    .sub-modal__body { padding: 4px 16px calc(18px + env(safe-area-inset-bottom, 0px)); }

    /* Price chips: every plan's name + price side by side, tap to jump to that plan */
    .sub-modal__nav {
        display: flex; flex: none; gap: 8px; padding: 0 16px 12px;
        overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    }
    .sub-modal__nav::-webkit-scrollbar { display: none; }
    .sub-modal__chip {
        flex: 1 1 0; min-width: 118px; min-height: 52px; display: flex; flex-direction: column;
        align-items: flex-start; justify-content: center; gap: 3px; padding: 8px 12px;
        border-radius: 12px; border: 1px solid var(--border); background: var(--card);
        color: var(--muted); font: inherit; text-align: start; cursor: pointer;
        transition: border-color .18s ease, background-color .18s ease, color .18s ease;
    }
    .sub-modal__chip[aria-current="true"] {
        border-color: var(--accent); background: var(--card2); color: var(--text);
        box-shadow: inset 0 0 0 1px var(--accent);
    }
    .sub-modal__chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .sub-modal__chip-name {
        display: flex; align-items: center; gap: 4px; max-width: 100%;
        font-size: .76rem; font-weight: 600; line-height: 1.3;
    }
    .sub-modal__chip-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sub-modal__chip-name svg { flex: none; width: 12px; height: 12px; color: var(--accent-ink); }
    .sub-modal__chip-price {
        font-size: 1.02rem; font-weight: 700; line-height: 1.2; color: var(--text);
        font-variant-numeric: tabular-nums; unicode-bidi: plaintext;
    }

    /* Plan carousel: one plan per view with a peek of the next */
    .sub-modal .jm-plans {
        display: flex; gap: 12px; align-items: flex-start;
        margin-inline: -16px; padding: 2px 16px 18px; scroll-padding-inline: 16px;
        overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .sub-modal .jm-plans::-webkit-scrollbar { display: none; }
    .sub-modal .jm-plans > .jm-plan {
        flex: 0 0 calc(100% - 28px); min-width: 0;
        scroll-snap-align: start; scroll-snap-stop: always;
    }
    .sub-modal .jm-plans > .jm-plan:only-child { flex-basis: 100%; }

    .sub-modal .jm-plan__head { padding: 14px 16px; }
    .sub-modal .jm-plan__body { padding: 12px 16px; }
    .sub-modal .jm-plan__foot { padding: 0 16px 16px; }
    .sub-modal .jm-plan__price { margin-top: 6px; }
    .sub-modal .jm-price--lg { font-size: 1.7rem; }

    /* Long labels ("Subscribe with Credit Card", Arabic) wrap instead of overflowing */
    .sub-modal .jm-cta-stack .jm-btn { white-space: normal; line-height: 1.3; min-height: 46px; text-align: center; }
    .sub-modal .jm-cta-stack .jm-btn svg { flex: none; }
    .sub-modal .jm-alert p { overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
    .sub-modal, .sub-modal .sub-modal__panel, .sub-modal__chip { transition: none; }
    .sub-modal .sub-modal__panel, .sub-modal.is-open .sub-modal__panel { transform: none; }
    .sub-modal .jm-plans { scroll-behavior: auto; }
}