/* ===========================================================================
   Subscription plan modal — layout.

   Fixes a mobile-browser trap where "Proceed to Payment" could not be reached:

   1. The overlay was `height:100vh`. On mobile browsers 100vh is the viewport
      with the chrome RETRACTED — taller than what is actually on screen — so a
      vertically centred dialog had its bottom edge, and therefore its CTA,
      rendered underneath the URL bar. `100dvh` tracks the chrome as it moves.
   2. `max-height:90vh` had the same unit problem and no safe-area allowance, so
      on a notched phone the button could sit under the home indicator.
   3. There were two nested scrollers: the dialog, and a 200px terms box inside
      it. On a phone the terms box covers most of the dialog, so a swipe almost
      always scrolled the terms instead of the dialog, and scroll chaining at the
      end of the inner box is inconsistent across browsers.
   4. The CTA was last in document flow, after both the terms box and the
      checkbox — everything the user needed was below the fold, reachable only
      through the scroll that problem 3 was swallowing.

   The structure below has ONE scroller (.sub-modal__body) and pins the checkbox
   and the button into a footer that is always visible, so the action is reachable
   the moment the dialog opens, at any scroll position.
   =========================================================================== */

.sub-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.45);
    display: none;              /* toggled to flex by the page script */
    align-items: center;
    justify-content: center;
    padding: 1rem;
    /* Fallback first for browsers without dynamic viewport units. */
    height: 100vh;
    height: 100dvh;
}

.sub-modal.is-open {
    display: flex;
}

.sub-modal__content {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 500px;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    position: relative;
    /* Bounded by the VISIBLE viewport, so the footer below can never be pushed
       off-screen by browser chrome. */
    max-height: 90vh;
    max-height: calc(100dvh - 2rem);
    overflow: hidden;           /* the body scrolls, not this */
}

.sub-modal__close {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    color: #666;
    z-index: 2;
    /* A 44px target: the old 1.5rem glyph was below every platform's minimum. */
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* -- the single scroll region ------------------------------------------- */

.sub-modal__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Stop a swipe that reaches the end of this list from scrolling the page
       behind the overlay. */
    overscroll-behavior: contain;
    padding: 2rem 2rem 1rem;
}

.sub-modal__title {
    margin: 0 2rem 0.5rem 0;    /* clear of the close button */
    font-size: 1.4rem;
}

/* -- pinned action footer ------------------------------------------------ */

.sub-modal__foot {
    flex: 0 0 auto;
    padding: 0.9rem 2rem;
    /* Keep clear of the iOS home indicator / Android gesture bar. */
    padding-bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #dee2e6;
    background: #fff;
    /* The body can scroll under this edge; the shadow signals there is more above. */
    box-shadow: 0 -6px 14px rgba(0, 0, 0, 0.05);
}

.sub-modal__accept {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    margin-bottom: 0.75rem;
}

.sub-modal__accept input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 0.6rem;
    cursor: pointer;
    flex: 0 0 auto;
}

.sub-modal__accept span {
    font-size: 0.95rem;
    color: #333;
    line-height: 1.35;
}

.sub-modal__cta {
    width: 100%;
    /* Comfortably above the 44px minimum touch target. */
    min-height: 48px;
    font-size: 1rem;
}

/* -- terms ---------------------------------------------------------------- */

.sub-terms {
    margin-top: 1.5rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
    border: 1px solid #dee2e6;
}

.sub-terms__title {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 0.75rem;
    color: #333;
}

.sub-terms__text {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.5;
    padding: 0.5rem;
}

.sub-terms__text ul {
    margin-left: 1rem;
    padding-left: 0.5rem;
}

.sub-terms__text p {
    margin-top: 0.75rem;
}

/* Desktop keeps the compact inner scroll: with a mouse the nested scroller is
   harmless, and it keeps the dialog short. Below this width the terms simply flow
   into the one scroll region above — a second scroller on a touch screen is the
   whole bug. */
@media (min-width: 768px) {
    .sub-terms__text {
        max-height: 200px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* -- phones: a bottom sheet ---------------------------------------------- */

@media (max-width: 575.98px) {
    .sub-modal {
        padding: 0;
        align-items: flex-end;   /* rises from the bottom, within thumb reach */
    }

    .sub-modal__content {
        max-width: none;
        border-radius: 1rem 1rem 0 0;
        max-height: 92vh;
        max-height: 92dvh;
    }

    .sub-modal__body {
        padding: 1.5rem 1.25rem 1rem;
    }

    .sub-modal__foot {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .sub-modal__title {
        font-size: 1.25rem;
    }
}

/* Short landscape phones: the body can collapse to almost nothing, but the
   footer must still be whole — the action matters more than the reading area. */
@media (max-height: 480px) {
    .sub-modal__body {
        padding-top: 1.25rem;
    }

    .sub-terms {
        margin-top: 1rem;
    }
}

/* Background scroll lock while the dialog is open. Applied to <body> by the page
   script: without it a swipe that misses the dialog scrolls the plans behind it,
   and on iOS the page can end up scrolled somewhere unexpected on close. */
body.sub-modal-open {
    overflow: hidden;
}