/* ═══════════════════════════════════════════════════════════════════════
   UAEFMA — Subscribe

   Every colour here is a token from tokens.css. No new palette, no
   hand-picked grey: the seven near-identical greys already in this codebase
   are what "faded and inconsistent" looked like from the outside.

   Logical properties throughout, so the Arabic edition mirrors without a
   second set of rules.
   ═══════════════════════════════════════════════════════════════════════ */

.sub-page {
    padding-block: clamp(28px, 4vw, 52px);
}

/* ── Outcome states ─────────────────────────────────────────────────────
   Three results, three appearances. "Already subscribed" is not a success
   and not an error, and styling it as either misleads.
   ─────────────────────────────────────────────────────────────────────── */

.sub-notice {
    margin-block-end: clamp(20px, 3vw, 32px);
    padding: clamp(16px, 2.4vw, 22px);
    border: 1px solid var(--border, #d7dfe4);
    border-inline-start: 3px solid var(--text-secondary, #5f6f7e);
    border-radius: var(--radius-card, 12px);
    background: var(--surface, #fff);
}

.sub-notice__title {
    margin: 0 0 6px;
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    font-weight: 700;
    color: var(--text, #0b1f33);
}

.sub-notice__text {
    margin: 0;
    font-size: .95rem;
    line-height: 1.6;
    /* Body copy, not a caption. The muted token is for labels. */
    color: var(--text, #0b1f33);
}

.sub-notice--success { border-inline-start-color: var(--up, #0e7a55); }
.sub-notice--info    { border-inline-start-color: var(--brand-green, #0d6e63); }
.sub-notice--error   { border-inline-start-color: var(--down, #c02626); }

/* ── Layout ─────────────────────────────────────────────────────────────
   minmax(0, …) on both tracks. A bare 1fr keeps its min-content width and
   pushes the page sideways — the defect that has recurred throughout this
   codebase.
   ─────────────────────────────────────────────────────────────────────── */

.sub-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(20px, 3.5vw, 44px);
    align-items: start;
}

/* Mobile-first in effect: one column until there is room for two. */
@media (max-width: 900px) {
    .sub-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Value proposition ──────────────────────────────────────────────── */

.sub-value__title {
    margin: 0 0 16px;
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    font-weight: 700;
    color: var(--text, #0b1f33);
}

.sub-value__list {
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 14px;
}

.sub-value__list li {
    padding-inline-start: 16px;
    border-inline-start: 2px solid var(--border, #d7dfe4);
    font-size: .95rem;
    line-height: 1.6;
    color: var(--text, #0b1f33);
    /* Long institution names must wrap rather than widen the track. */
    overflow-wrap: anywhere;
}

.sub-value__list strong {
    display: block;
    margin-block-end: 2px;
    font-weight: 700;
    color: var(--text, #0b1f33);
}

.sub-value__facts {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
    padding-block-start: 20px;
    border-block-start: 1px solid var(--border, #d7dfe4);
}

.sub-value__facts dt {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-secondary, #5f6f7e);
}

.sub-value__facts dd {
    margin: 4px 0 0;
    font-size: .95rem;
    font-weight: 600;
    color: var(--text, #0b1f33);
}

/* ── The form ───────────────────────────────────────────────────────── */

.sub-form-card {
    padding: clamp(20px, 3vw, 30px);
    border: 1px solid var(--border, #d7dfe4);
    border-radius: var(--radius-card, 12px);
    background: var(--surface, #fff);
    box-shadow: var(--shadow-card, 0 1px 2px rgba(16, 24, 40, .06));
    /* Sticks alongside the list on desktop; static once stacked. */
    position: sticky;
    inset-block-start: 20px;
}

@media (max-width: 900px) {
    .sub-form-card { position: static; }
}

.sub-form-card__title {
    margin: 0 0 18px;
    font-size: clamp(1.1rem, 1.8vw, 1.25rem);
    font-weight: 700;
    color: var(--text, #0b1f33);
}

.sub-field { margin-block-end: 16px; }

.sub-label {
    display: block;
    margin-block-end: 6px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--text, #0b1f33);
}

.sub-input {
    width: 100%;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--border-strong, #c3ced6);
    border-radius: var(--radius, 8px);
    background: var(--surface, #fff);
    color: var(--text, #0b1f33);
    /* 16px minimum: iOS zooms the page on focus for anything smaller. */
    font-size: 16px;
    font-family: inherit;
    line-height: 1.4;
}

/* A placeholder is a hint, but it still has to be legible. The browser
   default is far below AA in most engines. */
.sub-input::placeholder {
    color: var(--text-secondary, #5f6f7e);
    opacity: 1;
}

.sub-input:focus {
    outline: 2px solid var(--brand-green, #0d6e63);
    outline-offset: 1px;
    border-color: var(--brand-green, #0d6e63);
}

.sub-input[aria-invalid="true"] {
    border-color: var(--down, #c02626);
}

.sub-error {
    margin: 6px 0 0;
    font-size: .85rem;
    font-weight: 600;
    color: var(--down, #c02626);
}

/* A button that looks like a button. The complaint about these pages was
   partly controls that read as plain text. */
.sub-submit {
    width: 100%;
    min-height: 48px;
    padding: 13px 20px;
    border: 1px solid var(--brand-green, #0d6e63);
    border-radius: var(--radius, 8px);
    background: var(--brand-green, #0d6e63);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s ease;
}

.sub-submit:hover:not(:disabled) { background: #0a5850; border-color: #0a5850; }

.sub-submit:focus-visible {
    outline: 2px solid var(--text, #0b1f33);
    outline-offset: 2px;
}

.sub-submit:disabled { opacity: .75; cursor: progress; }

.sub-privacy {
    margin: 12px 0 0;
    font-size: .8rem;
    line-height: 1.55;
    color: var(--text-secondary, #5f6f7e);
}

.sub-privacy a {
    color: var(--brand-green, #0d6e63);
    /* Underlined, not colour-only: colour alone is not a distinguishing
       cue for a reader who cannot see it. */
    text-decoration: underline;
}

/* ── Small screens ──────────────────────────────────────────────────── */

@media (max-width: 520px) {
    .sub-value__facts { grid-template-columns: minmax(0, 1fr); }
    .sub-form-card    { padding: 18px; }
}