/* First-come-first-served event sign-ups (web_forms/signup_submission.py):
   the badge, the notice box, and the Submit All Forms / countdown block. */

.fcfs-badge {
    position: relative;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; font-size: 11.5px; font-weight: 600;
    border-radius: 999px; letter-spacing: 0.02em; line-height: 1.35;
    background: #e3eef8; color: #1f5f99; border: 1px solid #b5d0e8;
    cursor: help;
}
.fcfs-badge.is-open { background: #fbeae1; color: #b14424; border-color: #efc4b0; }
.fcfs-badge__tip {
    display: none;
    position: absolute; z-index: 20; top: calc(100% + 6px); right: 0;
    width: 340px; max-width: 80vw;
    padding: 10px 12px; border-radius: 8px;
    background: #fff; color: #2a2a2a; border: 1px solid #c9d6e2;
    box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.3);
    font-size: 12.5px; font-weight: normal; letter-spacing: 0; line-height: 1.45;
    white-space: normal; text-align: left; cursor: default;
}
.fcfs-badge:hover .fcfs-badge__tip,
.fcfs-badge:focus .fcfs-badge__tip,
.fcfs-badge:focus-within .fcfs-badge__tip { display: block; }

.fcfs-notice {
    margin: 0 0 20px 0; padding: 12px 16px; max-width: 760px;
    background: #eef4fa; border: 1px solid #b5d0e8; border-left: 4px solid #1f5f99;
    border-radius: 6px; font-size: 14px; line-height: 1.5; color: #1c2b38;
}
.fcfs-notice__title { display: block; font-weight: 700; margin-bottom: 4px; color: #1f5f99; }

.fcfs-submit { margin: 16px 0 22px 0; }
.fcfs-submit__button[disabled] { opacity: 0.6; cursor: not-allowed; }
.fcfs-submit__status { margin-top: 6px; font-size: 13px; color: #444; }
.fcfs-submit__status .not-ready { color: #B20000; }
.fcfs-submit__done { font-weight: bold; color: green; }
.fcfs-submit__done.is-waitlist { color: #B20000; }

.fcfs-ready-note {
    display: inline-block; margin: 0 0 14px 0; padding: 7px 14px;
    background: #e3eef8; color: #1f5f99; border: 1px solid #b5d0e8; border-radius: 6px;
    font-size: 13px; line-height: 1.4;
}

.fcfs-myaccount { margin-top: 4px; font-size: 13px; font-weight: normal; color: #1f5f99; }

/* Go Y event tiles clip to their rounded corners; let the badge pop-up out while it is shown. */
.etile:has(.fcfs-badge:hover) { overflow: visible; z-index: 5; position: relative; }
.etile__body .fcfs-notice { margin-top: 12px; }

/* Event sign-up page header: when the badge wraps under the breadcrumb it would sit right on
   the notice box, so give it room below (as the existing waiting-list badge has). */
.breadcrumb-and-badge-row .fcfs-badge { margin-bottom: 12px; }

/* "Submit All Forms" once it can be clicked (submissions open, every form ready, not yet
   submitted — the only time it is enabled): the open badge's red, with a slow pulse on its
   border so it stands out. first_come.js enables it at the opening, so the red arrives then. */
.form-button.fcfs-submit__button:not([disabled]) {
    background-color: #fbeae1;
    color: #b14424;
    border-color: #d9826a;
    animation: fcfs-submit-pulse 2.4s ease-in-out infinite;
}
.form-button.fcfs-submit__button:not([disabled]):hover {
    background-color: #f8d9c9;
}
@keyframes fcfs-submit-pulse {
    0%, 100% { border-color: #e8b3a0; box-shadow: 0 0 0 0 rgba(177, 68, 36, 0); }
    50%      { border-color: #b14424; box-shadow: 0 0 0 5px rgba(177, 68, 36, 0.22); }
}
/* "Reduce motion" (a macOS / iOS / Windows setting): keep the pulse, but as a colour change
   only — the glow fades in and out at a fixed size instead of growing. */
@keyframes fcfs-submit-pulse-color {
    0%, 100% { border-color: #e8b3a0; box-shadow: 0 0 0 3px rgba(177, 68, 36, 0); }
    50%      { border-color: #b14424; box-shadow: 0 0 0 3px rgba(177, 68, 36, 0.22); }
}
@media (prefers-reduced-motion: reduce) {
    .form-button.fcfs-submit__button:not([disabled]) { animation-name: fcfs-submit-pulse-color; }
}

/* "Ready to Submit" turns red once the forms can actually be sent: on the sign-up and form
   pages that is exactly when Submit All is enabled (so it follows first_come.js switching the
   button on at the opening); My Account marks it server-side (.is-submittable). */
body:has(.fcfs-submit__button:not([disabled])) .ready-to-submit,
.ready-to-submit.is-submittable { color: #b14424; }

/* The "event is full" note under Submit All (the form page styles the same helper inline). */
.fcfs-submit .waitlist-submit-helper {
    display: block; margin: 10px 0 0 0; padding: 7px 14px; max-width: 540px;
    background: #f8d7d4; color: #8a1f1f; border: 1px solid #e09a92; border-radius: 6px;
    font-size: 13px; line-height: 1.4;
}

/* A full event: submitting now joins the waiting list, so the button stays red but doesn't
   pulse (the note under it says what happens). */
.fcfs-submit.is-full .form-button.fcfs-submit__button:not([disabled]) { animation: none; border-color: #b14424; }