/* =============================================
   Conference registration — register.html, thank-you.html
   Loaded only by those two pages, so the other nine
   stay as light as they are today.
   ============================================= */

.reg-container {
    max-width: 640px;
}

/* ---------- Early-bird countdown ---------- */
.reg-countdown {
    background: linear-gradient(135deg, var(--green-primary), var(--green-secondary));
    color: var(--white);
    border-radius: var(--radius-md);
    padding: 24px 20px;
    text-align: center;
    margin-bottom: 32px;
    box-shadow: var(--shadow-sm);
}

.reg-countdown-label {
    font-size: 0.9375rem;
    font-weight: 700;
    margin: 0 0 14px;
    opacity: 0.95;
}

.reg-countdown-clock {
    display: flex;
    justify-content: center;
    gap: 10px;
    direction: ltr;
}

.reg-unit {
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-sm);
    padding: 10px 6px;
    min-width: 60px;
}

.reg-unit-num {
    display: block;
    font-size: 1.75rem;
    font-weight: 900;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.reg-unit-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    opacity: 0.85;
    margin-top: 2px;
}

.reg-countdown-note {
    font-size: 0.8125rem;
    margin: 14px 0 0;
    opacity: 0.85;
}

.reg-countdown-over {
    background: var(--gray-light);
    color: var(--gray-text);
}

.reg-countdown-over .reg-countdown-label {
    color: var(--green-primary);
    margin-bottom: 6px;
}

/* ---------- Form ---------- */
.reg-form {
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 28px 22px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-medium);
}

.reg-field {
    margin-bottom: 22px;
    border: none;
    padding: 0;
}

/* Direct children only. This used to be `.reg-field label`, which also caught
   the category cards nested inside the fieldset and forced them to
   display:block — silently killing their flex layout, their gap and their
   centring, since a class selector cannot outrank a class+type one. */
.reg-field > label,
.reg-field > legend {
    display: block;
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--green-primary);
    margin-bottom: 8px;
    padding: 0;
}

.reg-required {
    color: #B33A28;
}

.reg-field input[type="text"],
.reg-field input[type="email"],
.reg-field input[type="tel"] {
    width: 100%;
    /* 16px minimum — smaller makes iOS Safari zoom the page on focus. */
    font-size: 1rem;
    font-family: var(--font-family);
    padding: 13px 14px;
    border: 2px solid var(--gray-medium);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--black);
    transition: var(--transition);
    min-height: 48px;
}

.reg-field input:focus {
    outline: none;
    border-color: var(--green-secondary);
    box-shadow: 0 0 0 3px rgba(74, 124, 46, 0.15);
}

.reg-field input[aria-invalid="true"] {
    border-color: #B33A28;
}

.reg-error {
    color: #B33A28;
    font-size: 0.8125rem;
    font-weight: 700;
    margin: 6px 0 0;
}

/* ---------- Category cards ---------- */
.reg-category-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.reg-loading {
    color: var(--gray-text);
    font-size: 0.875rem;
    margin: 0;
}

.reg-category {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 2px solid var(--gray-medium);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    /* Well past the 44px minimum. The whole card is the target, not the dot. */
    min-height: 72px;
    background: var(--white);
    /* Stops iOS Safari inflating the Hebrew label inside a flex row. */
    -webkit-text-size-adjust: 100%;
}

.reg-category:hover {
    border-color: var(--green-secondary);
    background: rgba(74, 124, 46, 0.04);
}

/* The native control is kept for semantics and keyboard use, but drawn by us —
   accent-color cannot make the dot large enough to read at arm's length.
   Shared with the institution and role chips, so all three lists on this form
   answer to the same control and a change to one cannot leave the others
   looking different. */
.reg-category input[type="radio"],
.reg-choice input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 26px;
    height: 26px;
    margin: 0;
    flex-shrink: 0;
    border: 2px solid var(--gray-medium);
    border-radius: 50%;
    background: var(--white);
    display: grid;
    place-content: center;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.reg-category input[type="radio"]::before,
.reg-choice input[type="radio"]::before {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--white);
    transform: scale(0);
    transition: transform 0.15s ease-out;
}

.reg-category input[type="radio"]:checked,
.reg-choice input[type="radio"]:checked {
    border-color: var(--green-primary);
    background: var(--green-primary);
}

.reg-category input[type="radio"]:checked::before,
.reg-choice input[type="radio"]:checked::before {
    transform: scale(1);
}

/* Centred, and allowed to wrap without ever reaching the price. */
.reg-category-text {
    flex: 1;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--black);
    /* Long labels break inside a word rather than widening the row and
       squeezing the price onto its own line. No current label is long enough
       to need it, but one added later would break the row silently. */
    overflow-wrap: anywhere;
}

/* A badge, so the price is a separate object from the label and the two can
   never read as one string ("חקלאים₪150"). */
.reg-category-price {
    flex-shrink: 0;
    min-width: 68px;
    text-align: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--gray-light);
    color: var(--green-primary);
    font-size: 1.125rem;
    font-weight: 900;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.reg-category:has(input:checked) {
    border-color: var(--green-primary);
    background: rgba(74, 124, 46, 0.08);
    box-shadow: 0 2px 10px rgba(45, 80, 22, 0.12);
}

.reg-category:has(input:checked) .reg-category-price {
    background: var(--green-primary);
    color: var(--white);
}

.reg-category:has(input:focus-visible) {
    box-shadow: 0 0 0 3px rgba(74, 124, 46, 0.35);
}

/* ---------- Institution and role chips ---------- */
/* The same control as the category cards, but these carry no price and there
   are eleven of them between the two lists. Stacked full-width like the
   categories they would add most of a screen of scrolling to a form that has
   to end in a payment, so they sit two-up and stay compact. */
/* One per row on a phone, two from 480px up.
   Deliberately an explicit breakpoint rather than auto-fit + minmax: at 375px
   the list is 289px wide and two 140px columns plus the gap need 290px, so the
   layout flipped to one column on a one-pixel margin — and had it fitted, the
   longest label would have had 75px of text width and wrapped to three lines.
   480px is where two columns are genuinely comfortable. */
.reg-choice-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (min-width: 480px) {
    .reg-choice-list {
        grid-template-columns: 1fr 1fr;
    }
}

.reg-choice {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 2px solid var(--gray-medium);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    cursor: pointer;
    /* Still a comfortable thumb target at half the width of a category card. */
    min-height: 52px;
    background: var(--white);
    transition: border-color 0.2s ease, background-color 0.2s ease;
    -webkit-text-size-adjust: 100%;
}

.reg-choice:hover {
    border-color: var(--green-secondary);
    background: rgba(74, 124, 46, 0.04);
}

.reg-choice-text {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--black);
    /* "הפקולטה לחקלאות" is wider than a 140px column at the smallest phone
       size; wrapping is fine, overflowing the card is not. */
    overflow-wrap: anywhere;
}

.reg-choice:has(input:checked) {
    border-color: var(--green-primary);
    background: rgba(74, 124, 46, 0.08);
}

.reg-choice:has(input:focus-visible) {
    box-shadow: 0 0 0 3px rgba(74, 124, 46, 0.35);
}

/* The free-text box that "אחר" reveals. */
.reg-other {
    margin-top: 12px;
}

.reg-other label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--gray-text);
    margin-bottom: 6px;
}

/* The two questions a student is asked. Indented behind a rule on the start
   edge so they read as hanging off the role question rather than as two more
   top-level fields that everyone must answer. */
.reg-student {
    margin: -8px 0 22px;
    padding-inline-start: 14px;
    border-inline-start: 3px solid var(--green-secondary);
}

.reg-student .reg-field:last-child {
    margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
    .reg-category,
    .reg-choice,
    .reg-category input[type="radio"],
    .reg-choice input[type="radio"],
    .reg-category input[type="radio"]::before,
    .reg-choice input[type="radio"]::before,
    .reg-category-price {
        transition: none;
    }
}

/* ---------- Honeypot ---------- */
/* DEVIATION from plan spec: the plan's original rule was
   `position: absolute; left: -9999px;`. With no positioned ancestor
   to contain it, that offset expands the document to ~10000px wide and,
   combined with this page's RTL direction, pushes all real content out
   of the browser's rendered viewport — the entire page painted blank in
   real Chromium at every width tested (375px and 1280px). Verified via
   Playwright: restoring the -9999px offset reproduces an all-white
   screenshot; this clip-based technique does not. Same goal as the
   original (not display:none, so simple bot checks still see a normal
   input; invisible to sighted users) via the standard "visually hidden"
   pattern instead of an off-screen offset. */
.reg-hp {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Notices and submit ---------- */
.reg-notice {
    background: var(--gray-light);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--green-primary);
    margin: 0 0 20px;
    text-align: center;
}

.reg-form-error {
    background: #FDECEA;
    border: 1px solid #F0B4AC;
    color: #8A2A1C;
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-size: 0.875rem;
    font-weight: 700;
    margin: 0 0 16px;
}

.reg-submit {
    width: 100%;
}

.reg-submit[disabled] {
    opacity: 0.6;
    cursor: progress;
    transform: none;
}

.reg-secure {
    font-size: 0.8125rem;
    color: var(--gray-text);
    text-align: center;
    margin: 14px 0 0;
    line-height: 1.5;
}

/* ---------- Thank-you page ---------- */
.thanks-card {
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 36px 24px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-medium);
}

.thanks-icon {
    width: 68px;
    height: 68px;
    margin: 0 auto 18px;
    color: var(--green-secondary);
}

.thanks-title {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--green-primary);
    margin: 0 0 12px;
}

.thanks-text {
    font-size: 1rem;
    color: var(--gray-text);
    line-height: 1.7;
    margin: 0 0 22px;
}

.thanks-details {
    background: var(--gray-light);
    border-radius: var(--radius-sm);
    padding: 18px;
    margin-bottom: 22px;
    text-align: start;
}

.thanks-details dt {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--green-primary);
    margin-bottom: 2px;
}

.thanks-details dd {
    margin: 0 0 14px;
    font-size: 0.9375rem;
    color: var(--black);
}

.thanks-details dd:last-child {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .reg-form {
        padding: 36px 32px;
    }

    .reg-unit {
        min-width: 76px;
        padding: 12px 8px;
    }

    .reg-unit-num {
        font-size: 2.25rem;
    }

    .reg-category {
        padding: 18px 22px;
        min-height: 76px;
    }

    .reg-submit {
        width: auto;
        min-width: 280px;
        display: flex;
        margin: 0 auto;
    }

    .thanks-card {
        padding: 48px 40px;
    }
}