/* ── Public payment link (/pay/:token) ────────────────────────────────────
   One focused column that carries a student from "here is what you still owe"
   to a settled card payment. Same visual language as the enrolment funnel it
   sits beside - soft brand-tinted glow behind glass cards, exactly one
   brand-gradient hairline in the header, the money as the single dominant
   number - but its own class prefix, so a change here can never reach the
   funnel and a change there can never reach this page.

   Prefix is `payl-` throughout (`enr-` belongs to the funnel, `ep-` to the
   admin enrolment-pages view). The shared form primitives `.field`,
   `.field__input`, `.field__error` and `.server-error` live in
   public/css/contact-view.css and are reused verbatim, exactly as the funnel
   reuses them.

   RTL Hebrew, logical properties, breakpoints 1024 / 767.
   CSS lives here per Chrome Workspaces - no inline styles, no <style> blocks. */

.payl-page {
    min-block-size: 100vh;
    padding: 0 var(--space-md) var(--space-2xl);
    background:
        radial-gradient(1100px 520px at 85% -80px, rgba(8, 148, 255, 0.08), transparent 65%),
        radial-gradient(900px 480px at 8% 200px, rgba(189, 50, 214, 0.05), transparent 60%),
        linear-gradient(180deg, #FFFFFF 0%, #F5F9FF 100%);
    color: var(--text-color);
}

/* One reading measure for the whole page. There is no wide screen here: the
   payment link sells nothing and has nothing to lay out side by side. */
.payl-header,
.payl-card,
.payl-head,
.payl-footer {
    max-inline-size: 760px;
    margin-inline: auto;
}

/* ── Buttons ──────────────────────────────────────────────────
   Violet CTA family, matching the funnel. Shadows come from the violet set,
   never the orange-era ones still sitting under .btn-primary in global.css. */

.payl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 30px;
    border: 1.5px solid transparent;
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.payl-btn--primary {
    background: var(--accent-warm);
    color: #fff;
    box-shadow: 0 1px 2px rgba(30, 12, 60, 0.12), 0 6px 18px rgba(105, 53, 216, 0.22);
}

.payl-btn--primary:hover {
    background: var(--accent-warm-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(30, 12, 60, 0.16), 0 10px 26px rgba(105, 53, 216, 0.3);
}

.payl-btn--ghost {
    background: transparent;
    color: var(--primary-color);
    border-color: var(--border-default);
}

.payl-btn--ghost:hover {
    border-color: var(--primary-color);
    background: var(--primary-light);
}

.payl-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.payl-btn svg {
    flex: none;
}

/* ── Header ───────────────────────────────────────────────── */

.payl-header {
    padding-block: var(--space-xl) 0;
    text-align: center;
}

.payl-header__mark {
    block-size: 28px;
    display: inline-block;
}

/* The single brand-gradient accent on the page. */
.payl-header__rule {
    inline-size: 56px;
    block-size: 2px;
    margin: 18px auto 0;
    border-radius: 1px;
    background: linear-gradient(90deg, #0894FF 0%, #BD32D6 50%, #FFA304 100%);
}

.payl-eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-block-end: 10px;
}

/* ── State screens (loading / closed / verifying / done) ───── */

.payl-state {
    max-inline-size: 560px;
    margin: var(--space-xl) auto 0;
    padding: var(--space-xl) var(--space-lg) var(--space-2xl);
    text-align: center;
    background:
        radial-gradient(ellipse at 25% 0%, rgba(8, 148, 255, 0.06), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(239, 246, 255, 0.5));
    border: 1px solid rgba(98, 98, 234, 0.1);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.payl-state--wide {
    max-inline-size: 640px;
}

/* Fixed square box so the artwork never shifts layout while it decodes. The
   aspect ratio and the svg sizing come from .enr-mascot on the component. */
.payl-state__mascot {
    inline-size: 150px;
    margin-inline: auto;
    margin-block-end: var(--space-sm);
}

.payl-state__spinner {
    inline-size: 34px;
    block-size: 34px;
    margin: 0 auto 16px;
    border: 3px solid var(--border-light);
    border-block-start-color: var(--primary-color);
    border-radius: 50%;
    animation: payl-spin 0.9s linear infinite;
}

@keyframes payl-spin {
    to { transform: rotate(360deg); }
}

.payl-state__title {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: clamp(24px, 3.4vw, 30px);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-color);
    line-height: 1.25;
}

.payl-state__text {
    margin: 0 auto var(--space-lg);
    max-inline-size: 46ch;
    font-size: 15.5px;
    font-weight: 300;
    line-height: 1.8;
    color: var(--text-secondary);
}

.payl-state__text--quiet {
    margin-block-end: 0;
    font-size: 14px;
    color: var(--text-tertiary);
}

.payl-state__text--quiet a {
    color: var(--primary-color);
    text-decoration: none;
}

.payl-state__text--quiet a:hover {
    text-decoration: underline;
}

/* ── Screen header (amount / checkout) ────────────────────── */

.payl-head {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-block: var(--space-lg);
}

.payl-head__mascot {
    inline-size: 104px;
}

.payl-head__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--text-color);
}

/* ── Glass card ───────────────────────────────────────────── */

.payl-card {
    margin-block-end: var(--space-lg);
    padding: var(--space-lg);
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.payl-notice {
    margin: 0 0 var(--space-md);
    padding: 12px 14px;
    border-radius: var(--radius-md);
    font-size: 14px;
    line-height: 1.6;
}

.payl-notice--retry {
    background: #FFF8EE;
    border: 1px solid #F2DCB8;
    color: #8A5A12;
}

/* An earlier checkout is still being processed, so part of the balance cannot be
   charged again yet. Informational rather than a warning - nothing went wrong -
   so it wears the calm surface and not the retry notice's amber. */
.payl-notice--hold {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
}

.payl-notice--hold i {
    flex: none;
    margin-block-start: 3px;
    font-size: 14px;
    color: var(--primary-color);
}

.payl-greeting {
    margin: 0 0 var(--space-md);
    font-size: 16px;
    font-weight: 500;
    color: var(--text-color);
}

/* ── The balance ──────────────────────────────────────────────
   The one number the page is about, so it is the only thing on the card that
   competes with the headline. Solid ink, never the brand gradient: the weight
   here is 600 and the gradient only reads cleanly through light letterforms. */

.payl-balance {
    margin: 0 0 var(--space-md);
    padding: var(--space-md) var(--space-lg);
    text-align: center;
    border: 1px solid var(--primary-border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(8, 148, 255, 0.07), transparent 65%),
        var(--bg-surface);
}

.payl-balance__label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
}

.payl-balance__value {
    margin: 6px 0 0;
    font-family: var(--font-display);
    font-size: clamp(32px, 4.4vw, 42px);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--primary-color);
}

/* On a fixed link the sale's balance is CONTEXT, not the headline - the figure
   the payer acts on is the one below it. Same box, stepped down so the two
   numbers cannot be mistaken for each other. */
.payl-balance--quiet {
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-surface);
}

.payl-balance--quiet .payl-balance__value {
    font-size: clamp(20px, 2.6vw, 24px);
    color: var(--text-secondary);
}

.payl-lead {
    margin: 0 0 var(--space-lg);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--text-secondary);
}

/* ── The staff-defined amount ──────────────────────────────
   The fixed link's whole form: one figure, stated, with no input. It wears the
   emphasis `.payl-balance` carries on a customer-choice link, because here THIS
   is the number being charged. */

.payl-fixed {
    margin: 0 0 var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    text-align: center;
    border: 1px solid var(--primary-border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(8, 148, 255, 0.07), transparent 65%),
        var(--bg-surface);
}

.payl-fixed__label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
}

.payl-fixed__value {
    margin: 6px 0 0;
    font-family: var(--font-display);
    font-size: clamp(32px, 4.4vw, 42px);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--primary-color);
}

.payl-fixed__rest {
    margin: var(--space-sm) 0 0;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--text-secondary);
}

/* ── Amount form ──────────────────────────────────────────── */

.payl-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* Input and currency mark on one row. In RTL the mark lands to the left of the
   digits, which is where a Hebrew reader expects "4,000 ש״ח" to put it. */
.payl-amount-input {
    display: flex;
    align-items: center;
    gap: 10px;
}

.payl-amount-input__control {
    flex: 1 1 auto;
    min-inline-size: 0;
    padding-block: 14px;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.payl-amount-input__suffix {
    flex: none;
    font-size: 17px;
    font-weight: 500;
    color: var(--text-secondary);
}

.payl-hint {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--text-secondary);
}

.payl-hint--icon {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-block-end: var(--space-md);
    font-size: 14px;
}

.payl-hint--icon i {
    flex: none;
    margin-block-start: 3px;
    font-size: 16px;
    color: var(--primary-color);
}

.payl-submit {
    inline-size: 100%;
}

.payl-foot-note {
    margin: var(--space-md) 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-tertiary);
}

.payl-foot-note--quiet {
    margin-block-start: 6px;
}

/* Shown once the checkout has moved to a tab of its own and this page's poll is
   the only witness left. Slightly louder than the note it replaces, because it
   is the reason the visitor should leave this tab open. */
.payl-foot-note--live {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--text-secondary);
}

.payl-foot-note--live i {
    flex: none;
    margin-block-start: 2px;
    font-size: 14px;
    color: var(--primary-color);
}

/* An action inside a sentence, so it reads as a link rather than a control. */
.payl-recheck {
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    color: var(--primary-color);
    text-decoration: underline;
    cursor: pointer;
}

.payl-recheck:hover {
    color: var(--primary-hover);
}

/* ── Open-amount instruction (degraded checkout) ──────────────
   In this mode the hosted form arrives with its amount field on zero and the
   visitor has to type the sum. This block is the only thing that tells them,
   so it is sized as a statement rather than a hint, and the arrow ties it to
   the frame directly below. Brand blue, not a warning colour: nothing has gone
   wrong, there is simply a number to enter. */

.payl-amount {
    position: relative;
    margin: 0 0 var(--space-lg);
    padding: var(--space-lg) var(--space-lg) var(--space-xl);
    text-align: center;
    border: 2px solid rgba(8, 148, 255, 0.4);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(8, 148, 255, 0.08), transparent 62%),
        var(--bg-surface);
    box-shadow: 0 6px 22px rgba(0, 60, 130, 0.08);
}

.payl-amount__lead {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-color);
}

.payl-amount__value {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(32px, 4.4vw, 42px);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--primary-color);
}

.payl-amount__note {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Points at the payment frame immediately below. */
.payl-amount__arrow {
    position: absolute;
    inset-block-end: 10px;
    inset-inline-start: 50%;
    transform: translateX(50%);
    font-size: 16px;
    color: var(--primary-color);
    opacity: 0.75;
}

/* ── The hosted checkout ──────────────────────────────────── */

.payl-pay__box {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-surface);
}

.payl-pay__iframe {
    display: block;
    inline-size: 100%;
    block-size: 1150px;
    border: 0;
}

.payl-pay__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-block-start: var(--space-lg);
}

/* ── Confirmation figures ─────────────────────────────────── */

.payl-rows {
    max-inline-size: 460px;
    margin: 0 auto var(--space-lg);
    text-align: start;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.6);
    overflow: hidden;
}

.payl-rows__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #F9FBFF;
    border-block-end: 1px solid var(--border-light);
}

.payl-rows__row:last-child {
    border-block-end: 0;
}

.payl-rows__label {
    flex: none;
    min-inline-size: 140px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.payl-rows__value {
    margin: 0;
    flex: 1 1 auto;
    font-size: 15.5px;
    font-weight: 500;
    color: var(--text-color);
}

/* ── Payment status line on the confirmation ──────────────────
   Its own quiet panel rather than body copy. Neutral by default (blue, "in
   hand"), green only once the balance has actually moved. Never red: a payment
   still awaiting confirmation is not an error the visitor can fix. */

.payl-paynote {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-inline-size: 460px;
    margin: 0 auto var(--space-lg);
    padding: 12px 14px;
    text-align: start;
    border: 1px solid var(--primary-border);
    border-radius: var(--radius-md);
    background: var(--primary-light);
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-secondary);
}

.payl-paynote i {
    flex: none;
    margin-block-start: 3px;
    font-size: 16px;
    color: var(--primary-color);
}

.payl-paynote--ok {
    border-color: rgba(31, 157, 85, 0.28);
    background: rgba(31, 157, 85, 0.07);
}

.payl-paynote--ok i {
    color: #1F9D55;
}

/* ── Footer ───────────────────────────────────────────────── */

.payl-footer {
    margin-block-start: var(--space-2xl);
    padding-block-start: var(--space-md);
    border-block-start: 1px solid var(--border-light);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text-tertiary);
}

.payl-footer a {
    color: var(--text-tertiary);
    text-decoration: none;
}

.payl-footer a:hover {
    color: var(--text-secondary);
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 1024px) {
    .payl-head__mascot {
        inline-size: 100px;
    }
}

@media (max-width: 767px) {
    .payl-page {
        padding-inline: var(--space-sm);
    }

    /* Mascot above the words: at phone width a side-by-side header squeezes
       the headline into a column too narrow to read as a headline. */
    .payl-head {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--space-sm);
    }

    /* The brand floor. The pose never renders smaller than this. */
    .payl-head__mascot {
        inline-size: 96px;
    }

    .payl-card {
        padding: var(--space-md);
    }

    .payl-state {
        padding: var(--space-lg) var(--space-md) var(--space-xl);
    }

    .payl-state__mascot {
        inline-size: 128px;
    }

    .payl-balance,
    .payl-fixed {
        padding: var(--space-md);
    }

    /* Re-stated after the rule above, which shares its specificity and would
       otherwise re-inflate the context box back to the headline's padding. */
    .payl-balance--quiet {
        padding: var(--space-sm) var(--space-md);
    }

    /* The hosted form is taller once its own layout stacks. */
    .payl-pay__iframe {
        block-size: 1320px;
    }

    .payl-pay__actions .payl-btn {
        inline-size: 100%;
    }

    .payl-rows__row {
        flex-wrap: wrap;
        gap: 4px 10px;
    }

    .payl-rows__label {
        flex-basis: 100%;
        min-inline-size: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .payl-btn {
        transition: none;
        transform: none;
    }

    .payl-state__spinner {
        animation: none;
    }
}

@media print {
    .payl-state__mascot,
    .payl-head__mascot,
    .payl-pay__box,
    .payl-pay__actions {
        display: none;
    }
}