/**
 * Registration-wizard validation messaging (opens_on / closes_on / capacity —
 * see marathon.js's refreshEligibility()).
 *
 * Hand-authored, plain CSS — deliberately NOT part of the Tailwind build.
 * marathon.css is a generated/precompiled file with no build tooling checked
 * into this repo, so any brand-new Tailwind utility class (one that wasn't
 * already present in a template Tailwind had scanned) silently renders
 * unstyled. A separate, manually-maintained stylesheet sidesteps that
 * entirely and survives a future regeneration of marathon.css untouched.
 *
 * Colors/fonts below reference the same custom properties marathon.css
 * defines on :root (--color-marathon-*, --font-*), so this always matches
 * the rest of the site's palette and type system instead of drifting from it.
 * There is no "error" color in that palette, so a muted, on-brand red tints
 * the background/accent bar here rather than reaching for Tailwind's default
 * red-700 — the message text itself stays var(--color-marathon-ink), the same
 * near-black used for body copy everywhere else on the page, for readability
 * and consistency rather than colored (and harder to read) warning text.
 */

/* Site-wide, not registration-specific: browsers give <button> a plain arrow
   cursor by default on hover (unlike <a>, which is already pointer), and
   Tailwind's compiled preflight in marathon.css doesn't touch it either.
   This file is loaded on every page via layouts/marathon.blade.php, so it's
   the one place a global fix survives a marathon.css regeneration. */
button:not(:disabled) {
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
}

.marathon-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    border: 1px solid #e3b3ac;
    background: #fbeeec;
    border-radius: 8px;
    padding: 0.875rem 1.125rem;
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-marathon-ink);
}

/* .marathon-alert's own `display: flex` has the same specificity as
   Tailwind's `.hidden` and loads after it, so it wins the cascade and the
   alert stays visible even while `hidden` is applied — this rule restores
   the intended "hidden unless there's an actual alert" behavior. */
.marathon-alert.hidden {
    display: none;
}

.marathon-alert::before {
    content: "";
    flex: none;
    width: 3px;
    align-self: stretch;
    border-radius: 999px;
    background: #b3453c;
}

/* "Sold out" badge on a §6.5 registration-wizard distance card — same small
   uppercase-eyebrow treatment already used for the step-tab labels
   (font-heading, tracking-wide) elsewhere on this page, just in the alert
   color above instead of marathon-ink. */
.marathon-badge-sold-out {
    margin-inline-start: auto;
    flex: none;
    font-family: var(--font-heading);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #b3453c;
}

/* Matches the existing group-data-[active=true]:text-white treatment on the
   card's tag/desc text — white reads correctly against the card's ink
   background once it's selected. */
[data-distance-card][data-active="true"] .marathon-badge-sold-out {
    color: #fff;
}

/* Full-viewport busy overlay shown while the Pay Now request is in flight
   (see setPaymentBusy() in marathon.js) — keeps the button's own label
   static so a long status string (e.g. "Redirecting to secure payment…")
   never resizes the button and throws off its alignment with Back. Mirrors
   the .marathon-loader ring in marathon.css, but kept here since that ring's
   size/panel chrome are specific to this in-page loader, not the full-page
   one. */
.marathon-payment-loader {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: color-mix(in srgb, var(--color-marathon-ink) 55%, transparent);
}

/* Same specificity fight as .marathon-alert.hidden above — this stylesheet
   loads after Tailwind's compiled .hidden, so the overlay's own
   `display: flex` needs an explicit .hidden override to stay hidden. */
.marathon-payment-loader.hidden {
    display: none;
}

.marathon-payment-loader__panel {
    display: flex;
    max-width: 320px;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    border-radius: 12px;
    background: var(--color-marathon-cream);
    padding: 2.5rem 2rem;
    text-align: center;
}

.marathon-payment-loader__ring {
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    border: 3px solid color-mix(in srgb, var(--color-marathon-ink) 12%, transparent);
    border-top-color: var(--color-marathon-cyan);
    animation: marathon-payment-loader-spin 0.9s linear infinite;
}

@keyframes marathon-payment-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .marathon-payment-loader__ring {
        animation: none;
    }
}

.marathon-payment-loader__text {
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-marathon-ink);
}

/* ---------------------------------------------------------------------------
 * Arabic (RTL) typography
 *
 * The display/heading styles were tuned for Latin caps (Bebas Neue), whose
 * glyphs have no descenders, so they use very tight line-heights (0.8–1).
 * Arabic falls back to IBM Plex Sans Arabic, which has tall ascenders, dots
 * and descenders — at those line-heights stacked lines collide (see the
 * overview heading "ماراثون 10K / نبذة عن الفعالية"). Body copy also needs
 * more leading than Latin for comfortable reading, and letter-spacing breaks
 * Arabic's cursive joining. Kept here (plain CSS) rather than as new rtl:
 * utilities because marathon.css can't be rebuilt from this repo.
 * ------------------------------------------------------------------------- */

/* Multi-line display headings: open up the leading. The hero h1 already has
   its own rtl:leading-[1.15], so leave it alone. */
[dir="rtl"] :is(h1, h2).font-display:not(.rtl\:leading-\[1\.15\]) {
    line-height: 1.2;
}

/* Smaller display text that can wrap (stat values, wizard step titles). */
[dir="rtl"] dd.font-display,
[dir="rtl"] [data-step-tab] .font-display {
    line-height: 1.25;
}

/* Body paragraphs: more generous leading for Arabic script. */
[dir="rtl"] p.font-body,
[dir="rtl"] p.leading-relaxed {
    line-height: 1.9;
}

/* Breathing room between a section heading and the paragraph under it. */
[dir="rtl"] h2.font-display + p.font-body {
    margin-top: 2rem;
}

/* Letter-spacing splits joined Arabic letters apart — neutralise it. */
[dir="rtl"] [class*="tracking-"] {
    letter-spacing: 0;
}

/* ---------------------------------------------------------------------------
 * Phone field (intl-tel-input, separateDialCode)
 *
 * marathon.css renders the dial code ("+974") in the heading font (Oswald)
 * at 70% ink, while the number next to it uses the body font at full ink —
 * so one field showed two different type styles. Make the dial code, the
 * typed number and its placeholder share one font, size, weight and colour.
 * ------------------------------------------------------------------------- */
.marathon-phone-field .iti__selected-dial-code,
.marathon-phone-field .iti__tel-input {
    font-family: inherit; /* page font: font-body (EN) / font-arabic (AR) */
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: normal;
    color: var(--color-marathon-ink);
}

/* Placeholder: same typeface, just the site-wide 50% ink used by every
   other field's placeholder (see select2 placeholder in marathon.css). */
.marathon-phone-field .iti__tel-input::placeholder {
    font-family: inherit;
    font-size: inherit;
    color: color-mix(in srgb, var(--color-marathon-ink) 50%, transparent);
}

/* ---------------------------------------------------------------------------
 * Hero card description (CMS "Description — English/Arabic")
 *
 * The CMS caps it at 160 characters, but a single unbroken "word" (a URL, or
 * test text like "lkfjsldafkjdsalkfj…") still has no break point and ran out
 * of the card. Let it wrap anywhere, and clamp to 5 lines as a last line of
 * defence for older, longer values saved before the limit existed.
 * ------------------------------------------------------------------------- */
[data-hero-description] {
    overflow-wrap: anywhere;
    word-break: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * Sponsors — static grid (4 or fewer active sponsors; see sponsors.blade.php)
 *
 * Tiles share the full content width instead of sitting as fixed 220px boxes
 * in the middle of the section. --sponsor-cols is set inline to the sponsor
 * count.
 * ------------------------------------------------------------------------- */
.marathon-sponsor-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 1024px) {
    .marathon-sponsor-grid {
        grid-template-columns: repeat(var(--sponsor-cols, 4), minmax(0, 1fr));
    }
}
/* A single sponsor on mobile shouldn't sit in half a row. */
.marathon-sponsor-grid:has(> :only-child) {
    grid-template-columns: minmax(0, 1fr);
}

.marathon-sponsor-tile {
    height: 110px;
    width: 100%;
}
@media (min-width: 1024px) {
    .marathon-sponsor-tile { height: 140px; }
}
/* Logo scales to the tile (inside its padding) without cropping or
   distortion; the CMS recommends 440 × 200 px, the tile's own shape. */
[data-sponsor-tile] img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ---------------------------------------------------------------------------
 * Marquees in Arabic (RTL)
 *
 * The marquee track is wider than the screen and, in RTL, anchored to the
 * RIGHT edge (the text starts on the right). marathon.css only reversed the
 * LTR animation (translateX 0 → -50%), which still pushes the track left —
 * off-screen entirely on narrow screens, leaving an empty strip. In RTL the
 * track has to travel right instead (0 → +50%); the two identical halves
 * keep the loop seamless, same as LTR.
 *
 * Wrapped in no-preference so the reduced-motion rule in marathon.css
 * (animation: none) still wins for users who asked for less motion.
 * ------------------------------------------------------------------------- */
@keyframes marathon-marquee-rtl {
    from { transform: translateX(0); }
    to { transform: translateX(50%); }
}
@media (prefers-reduced-motion: no-preference) {
    [dir="rtl"] .animate-marathon-marquee,
    [dir="rtl"] .animate-marathon-marquee-banner,
    [dir="rtl"] .animate-marathon-marquee-sponsors {
        animation-name: marathon-marquee-rtl;
        animation-direction: normal;
    }
}

/* ---------------------------------------------------------------------------
 * Splash screen: shows the full logo (10K icon + SPORTS wordmark) rather than
 * the icon-only crop, so the ring is widened from 120px to fit it with room.
 * ------------------------------------------------------------------------- */
.marathon-loader__ring {
    width: 160px;
    height: 160px;
}

/*
 * Distance cards (step 1) — tablet widths (iPad portrait/landscape).
 *
 * From `sm` up the two cards sit side by side, but each card packs a photo,
 * the runner icon and the big 5K/10K glyph as fixed-width items, leaving the
 * tag/description column only a few pixels wide below ~1280px — the text
 * then spilled out of the card. Stack the cards until there is real room.
 * (Plain CSS rather than `xl:` utilities, which aren't in marathon.css.)
 */
@media (width >= 40rem) and (width < 80rem) {
    [data-distance-list] {
        flex-direction: column;
    }

    [data-distance-list] > [data-distance-card] {
        flex: none;
        width: 100%;
    }
}

/* Belt and braces: the text column may shrink and wrap, never overflow. */
[data-distance-card] [data-distance-tag],
[data-distance-card] [data-distance-desc] {
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
 * Date of birth (Flatpickr — see marathon.js initBirthDatePicker())
 *
 * Desktop: a text field that opens the calendar on a click anywhere in it,
 * with a calendar icon on the trailing edge (right in EN, left in AR).
 * Phones: Flatpickr swaps in a native <input type="date"> (.flatpickr-mobile)
 * so iOS/Android show their own date wheel; it is restyled to match the
 * other underlined fields instead of the platform's grey pill.
 * ------------------------------------------------------------------------- */
.marathon-date-field {
    position: relative;
}

.marathon-date-field input {
    cursor: pointer;
    padding-inline-end: 1.75rem;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
}

.marathon-date-field input::placeholder {
    color: color-mix(in srgb, var(--color-marathon-ink) 50%, transparent);
}

.marathon-date-field__icon {
    position: absolute;
    inset-inline-end: 0;
    bottom: 0.65rem;
    width: 1.15rem;
    height: 1.15rem;
    color: color-mix(in srgb, var(--color-marathon-ink) 55%, transparent);
    pointer-events: none;
}

/* Native mobile date input: drop the platform chrome, keep the height when
   empty (iOS collapses it), align text to the reading direction, and hide
   the browser's own indicator — the icon above already marks the field. */
.marathon-date-field input.flatpickr-mobile {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    min-height: 2.625rem;
    border-radius: 0;
    text-align: start;
    color: var(--color-marathon-ink);
}
.marathon-date-field input.flatpickr-mobile::-webkit-date-and-time-value {
    text-align: start;
}
.marathon-date-field input.flatpickr-mobile::-webkit-calendar-picker-indicator {
    opacity: 0;
}
/* Arabic (RTL) pages: the native value is a Latin-script date from the
   device locale ("Apr 19, 1976"). Laid out right-to-left the bidi algorithm
   scrambles it into "Apr 1976 19", so render the value itself LTR while
   keeping it on the right edge, with the icon space on the left. */
[dir="rtl"] .marathon-date-field input.flatpickr-mobile {
    direction: ltr;
    text-align: right;
    padding-left: 1.75rem;
    padding-right: 0;
}
[dir="rtl"] .marathon-date-field input.flatpickr-mobile::-webkit-date-and-time-value {
    text-align: right;
}
/* Empty (required → :invalid): Android's "dd/mm/yyyy" mask reads as a
   placeholder, so give it the same 50% ink as the other placeholders. */
.marathon-date-field input.flatpickr-mobile:invalid::-webkit-datetime-edit {
    color: color-mix(in srgb, var(--color-marathon-ink) 50%, transparent);
}

/* Calendar popup — site palette and fonts. */
.flatpickr-calendar {
    font-family: inherit;
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 12px 32px color-mix(in srgb, var(--color-marathon-ink) 16%, transparent);
    color: var(--color-marathon-ink);
}
.flatpickr-calendar.arrowTop::after { border-bottom-color: #fff; }
.flatpickr-calendar.arrowBottom::after { border-top-color: #fff; }

.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    color: var(--color-marathon-ink);
    fill: var(--color-marathon-ink);
    font-family: inherit;
}
.flatpickr-current-month {
    font-size: 1rem;
    font-weight: 600;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    font-weight: 600;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--color-marathon-cyan-dark);
}

span.flatpickr-weekday {
    color: color-mix(in srgb, var(--color-marathon-ink) 55%, transparent);
    font-weight: 600;
}

.flatpickr-day {
    color: var(--color-marathon-ink);
}
.flatpickr-day:hover,
.flatpickr-day:focus {
    background: color-mix(in srgb, var(--color-marathon-cyan) 15%, transparent);
    border-color: transparent;
}
.flatpickr-day.today {
    border-color: var(--color-marathon-cyan);
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
    background: var(--color-marathon-cyan-dark);
    border-color: var(--color-marathon-cyan-dark);
    color: #fff;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: color-mix(in srgb, var(--color-marathon-ink) 25%, transparent);
}

/* Arabic: the month/year header reads right-to-left; the day grid keeps
   Flatpickr's own layout (its weekday order already follows the locale). */
[dir="rtl"] .flatpickr-current-month {
    direction: rtl;
}