/* Webinar payment modal - mobile-first single column, two columns from lg up
   (approved design: 2b mobile list / 2a desktop two-column). */

.wpm-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    /* Sized by the fixed overlay (the viewport minus its 1rem padding), not by `vh`: on iOS `vh`
       means the viewport with the Safari bars collapsed, so a `92vh` card was taller than the
       visible area and its header with the close button was clipped off the top, unreachable. */
    max-height: 100%;
    overflow-y: auto;
    /* No `overscroll-behavior: contain` here: it also stops a zoomed-in visual viewport from
       panning when the finger is on the card, trapping the user with the CTA off-screen.
       Scroll chaining to the page is handled by useLockDocumentScroll instead. */
    background: linear-gradient(165deg, #151a27 0%, #1a1f2e 40%, #1c2235 100%);
    border: 1px solid rgba(42, 209, 103, 0.14);
    border-radius: 20px;
    padding: 1.35rem;
    color: #fff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

/* Same card rendered in the page flow (under the webinar-21-01 player) instead of in the overlay:
   grows with its content, sits centred in the centred offer block, and restores left-aligned
   text — the block around it is `text-center`, the form is designed left-aligned. */
.wpm-card--inline {
    max-height: none;
    overflow: visible;
    margin: 0 auto;
    text-align: left;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

.wpm-columns {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.wpm-col-left {
    width: 100%;
}

.wpm-col-right {
    width: 100%;
}

@media (min-width: 992px) {
    .wpm-card {
        max-width: 760px;
        padding: 1.75rem;
    }

    .wpm-columns {
        flex-direction: row;
        gap: 1.5rem;
    }

    .wpm-col-left {
        width: 272px;
        flex: none;
    }

    .wpm-col-right {
        flex: 1 1;
        min-width: 0;
    }
}

/* „Dokończ zamówienie". Lives at the top of the LEFT column (WebinarPaymentForm), so on desktop
   the method list in the right column starts level with it instead of under an empty band. The
   right padding keeps the modal's floating close button off the text on narrow cards. */
.wpm-title {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    padding-right: 2.5rem;
    margin-bottom: 1rem;
}

/* Modal-only close button, floated into the card corner (the card is `position: relative`). */
.wpm-close {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.85rem;
    font-weight: 600;
}

.wpm-order {
    background: rgba(42, 209, 103, 0.07);
    border: 1px solid rgba(42, 209, 103, 0.18);
    border-radius: 14px;
    padding: 0.8rem 1rem;
}

.wpm-group-label {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    margin: 0.9rem 0 0.5rem;
}

@media (min-width: 992px) {
    /* Tucked into the card padding: at the default offset its lower edge touched the first
       method row, which opens the right column right under the group label on desktop. */
    .wpm-close {
        top: 0.85rem;
        right: 0.85rem;
    }

    /* Two-column layout: the first group label opens the right column at the card's top edge,
       level with the title in the left column. Stacked (phone) layout keeps the regular gap,
       because there the label follows the identity fields. */
    .wpm-group-label--first {
        margin-top: 0;
    }
}

.wpm-method-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    text-align: left;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    padding: 0.55rem 0.75rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    color: #fff;
}

.wpm-method-row:hover {
    border-color: rgba(42, 209, 103, 0.45);
}

.wpm-method-row.wpm-disabled {
    cursor: not-allowed;
    opacity: 0.55;
    border-color: rgba(245, 158, 12, 0.28);
    background: rgba(245, 158, 12, 0.04);
}

.wpm-method-row.wpm-disabled:hover {
    border-color: rgba(245, 158, 12, 0.28);
}

.wpm-method-row.wpm-disabled .wpm-method-badge {
    color: #f59e0c;
    background: rgba(245, 158, 12, 0.12);
    border-color: rgba(245, 158, 12, 0.35);
}

/* Tiny nudge pill next to a method label (e.g. Klarna „Szybki wniosek"). Brand-green tint so it
   reads as a recommendation, not a warning; nowrap so it never breaks mid-pill. */
.wpm-method-badge {
    display: inline-block;
    margin-left: 0.45rem;
    padding: 0.08rem 0.45rem;
    border-radius: 999px;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.4;
    vertical-align: 1px;
    white-space: nowrap;
    color: #2ad167;
    background: rgba(42, 209, 103, 0.12);
    border: 1px solid rgba(42, 209, 103, 0.35);
}

.wpm-method-row.wpm-selected {
    border-color: #2ad167;
    background: rgba(42, 209, 103, 0.08);
    box-shadow: 0 0 0 3px rgba(42, 209, 103, 0.1);
}

.wpm-chip {
    height: 27px;
    min-width: 48px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 0.65rem;
    font-weight: 700;
    flex: none;
    padding: 0 0.45rem;
}

.wpm-radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.25);
    margin-left: auto;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wpm-method-row.wpm-selected .wpm-radio {
    border-color: #2ad167;
}

.wpm-radio-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2ad167;
}

.wpm-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0.6rem 0.8rem;
    font-size: 0.85rem;
    color: #fff;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wpm-input:focus {
    border-color: rgba(42, 209, 103, 0.4);
    box-shadow: 0 0 0 3px rgba(42, 209, 103, 0.1);
}

.wpm-input.wpm-input-invalid {
    border-color: rgba(220, 53, 69, 0.6);
}

/* iOS Safari zooms the page in when a focused field renders below 16px, and the zoom outlasts the
   blur, leaving the CTA outside the visual viewport. Touch devices only - the desktop card keeps
   its compact scale. */
@media (hover: none) and (pointer: coarse) {
    .wpm-input {
        font-size: 16px;
    }
}

.wpm-field-label {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.3rem;
}

.wpm-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin-top: 0.9rem;
    cursor: pointer;
}

.wpm-consent-box {
    width: 17px;
    height: 17px;
    border-radius: 5px;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    color: #0f0f1e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
    flex: none;
    margin-top: 2px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.wpm-consent-box.wpm-checked {
    background: #2ad167;
    border-color: #2ad167;
}

.wpm-consent-text {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.45;
}

.wpm-consent-text a {
    color: #2ad167;
    text-decoration: underline;
}

.wpm-cta {
    width: 100%;
    background: linear-gradient(135deg, #2ad167 0%, #23b858 100%);
    border: none;
    border-radius: 14px;
    color: #0f0f1e;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.85rem;
    margin-top: 0.9rem;
    box-shadow: 0 0 30px rgba(42, 209, 103, 0.22);
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.wpm-cta:hover:not(:disabled) {
    transform: scale(1.02);
}

.wpm-cta:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Form not complete yet. Dimmed like a disabled button, but still clickable so the tap can
   answer "why nothing happened" (see blockedHint in WebinarPaymentModal.tsx). */
.wpm-cta-incomplete:not(:disabled) {
    opacity: 0.62;
}

.wpm-trust {
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.35);
    text-align: center;
    margin-top: 0.6rem;
    line-height: 1.5;
}

/* ── Order box: title on top, then mockup beside the prices ──────────────────
   The desktop left column is 272px (~240px inside the box padding). The mockup is
   sized so „1999 zł" and the struck-through regular price still fit on ONE line
   next to it — keeping the saving legible at a glance. */
.wpm-order-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.35;
    margin-bottom: 9px;
}

.wpm-order-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wpm-order-preview {
    flex: 0 0 auto;
    width: 76px;
    height: auto;
    aspect-ratio: 3 / 2;
    border-radius: 8px;
    display: block;
}

.wpm-order-head-text {
    flex: 1 1 auto;
    min-width: 0;
}

/* nowrap: the promo price and what it replaces belong on the same line. */
.wpm-order-prices {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 7px;
}

.wpm-order-price {
    font-size: 1.35rem;
    font-weight: 700;
    color: #2ad167;
    white-space: nowrap;
}

.wpm-order-anchor {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
}

.wpm-order-badge {
    display: inline-block;
    margin-top: 5px;
    font-size: 0.6rem;
    font-weight: 600;
    color: #f59e0c;
    background: rgba(245, 158, 12, 0.12);
    border-radius: 6px;
    padding: 2px 7px;
}

/* Below the desktop breakpoint the box spans the full modal width, so the mockup
   can breathe without squeezing the prices. */
@media (max-width: 991.98px) {
    .wpm-order-preview {
        width: 104px;
    }
}