@font-face {
    font-family: 'Nanti';
    src: url('../fonts/Nanti.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --color-purple: oklch(62.533% 0.23145 296.8);
    --color-purple-50: oklch(100% 0 none);
    --color-purple-100: oklch(99.806% 0.00168 325.59);
    --color-purple-200: oklch(89.909% 0.0592 302.56);
    --color-purple-300: oklch(80.404% 0.11775 301.16);
    --color-purple-400: oklch(71.073% 0.17747 299.51);
    --color-purple-500: oklch(62.533% 0.23145 296.8);
    --color-purple-600: oklch(53.381% 0.28139 290);
    --color-purple-700: oklch(46.934% 0.27547 284.33);
    --color-purple-800: oklch(38.392% 0.22431 285.01);
    --color-purple-900: oklch(29.456% 0.16997 286.91);
    --color-purple-950: oklch(24.68% 0.14125 288.19);

    --color-pink: oklch(88.143% 0.10064 330.77);
    --color-pink-400: oklch(95.711% 0.03438 330.22);
    --color-pink-500: oklch(88.143% 0.10064 330.77);
    --color-pink-600: oklch(79.117% 0.18919 332.06);
    --color-pink-700: oklch(72.466% 0.26159 333.47);
    --color-pink-800: oklch(68.979% 0.29907 334.94);

    --color-green: oklch(42.812% 0.14344 141.82);
    --color-green-50: oklch(87.013% 0.28678 142.03);
    --color-green-100: oklch(86.784% 0.29244 142.21);
    --color-green-200: oklch(77.339% 0.2614 142.2);
    --color-green-500: oklch(42.812% 0.14344 141.82);
    --color-green-600: oklch(24.519% 0.08042 140.87);

    --font-display: 'Nanti', sans-serif;
}

/* ─── Base ─────────────────────────────────────────────── */

body {
    font-family: var(--font-display);
    background: var(--color-purple-100);
    color: var(--color-purple-950);
    margin: 0;
    padding: 0;
}

/* ─── Hero ──────────────────────────────────────────────── */

.reg-hero {
    text-align: center;
    margin-bottom: 2.5rem;
    margin-top: 2rem;
}
.reg-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--color-purple-700);
    background: var(--color-purple-200);
    border-radius: 20px;
    padding: 6px 16px;
    margin-bottom: 14px;
}
.reg-hero h1 {
    font-size: 2.5rem;
    font-weight: normal;
    color: var(--color-purple-900);
    margin: 0 0 10px;
}
.reg-hero p {
    color: var(--color-purple-700);
    font-size: 1rem;
    margin: 0;
}

/* ─── Cards ─────────────────────────────────────────────── */

.reg-card {
    background: var(--color-purple-50);
    border-radius: 16px;
    border: 1px solid var(--color-purple-200);
    padding: 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}
.reg-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-purple-200);
}
.reg-step-badge {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-purple-600);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.reg-card-title {
    font-size: 1.2rem;
    color: var(--color-purple-900);
    margin: 0;
}

/* ─── Field grid ─────────────────────────────────────────── */

.field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.field-grid.full {
    grid-template-columns: 1fr;
}
.field-group {
    display: flex;
    flex-direction: column;
}
.field-group label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-purple-700);
    margin-bottom: 6px;
}
.field-group input,
.field-group select,
.field-group textarea {
    padding: 11px 14px;
    background: var(--color-purple-100);
    border: 1px solid var(--color-purple-200);
    border-radius: 10px;
    font-size: .95rem;
    font-family: var(--font-display);
    color: var(--color-purple-950);
    transition: all .15s ease-in-out;
}
.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus {
    outline: none;
    border-color: var(--color-purple-500);
    background: var(--color-purple-50);
    box-shadow: 0 0 0 4px rgba(100, 50, 150, 0.08);
}
.field-group textarea {
    resize: vertical;
}
.field-hint {
    font-size: 11px;
    color: var(--color-purple-600);
    margin-top: 5px;
}
.field-error {
    font-size: 11px;
    color: var(--color-pink-800);
    font-weight: 600;
    margin-top: 5px;
}

/* ─── Shirt size ─────────────────────────────────────────── */

.shirt-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.shirt-group input[type="radio"] {
    display: none;
}
.shirt-group label {
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid var(--color-purple-200);
    background: var(--color-purple-100);
    font-size: .9rem;
    font-weight: 500;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-purple-900);
    transition: all .15s;
}
.shirt-group input[type="radio"]:checked + label {
    background: var(--color-purple-600);
    color: #fff;
    border-color: var(--color-purple-600);
}

/* ─── Availabilities ─────────────────────────────────────── */

.reg-subtitle {
    font-size: .9rem;
    color: var(--color-purple-700);
    margin: -.5rem 0 1.5rem;
}
.day-block {
    margin-bottom: 2rem;
}
.day-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.day-pill {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    background: var(--color-purple-500);
    border-radius: 20px;
    padding: 6px 14px;
    white-space: nowrap;
}
.day-line {
    flex: 1;
    height: 1px;
    background: var(--color-purple-200);
}
.job-row {
    margin-bottom: 16px;
    padding-left: 4px;
}
.job-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    position: relative;
}
.job-name {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-purple-800);
}
.job-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    background: var(--color-purple-200);
    color: var(--color-purple-700);
    font-size: 11px;
    font-weight: 700;
    font-style: italic;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.job-info-btn:hover,
.job-info-btn:focus-visible {
    background: var(--color-purple-300);
}
.job-tooltip {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 6px;
    z-index: 5;
    max-width: 280px;
    background: var(--color-purple-950);
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    padding: 8px 12px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}
.job-name-row:hover .job-tooltip,
.job-tooltip.show {
    display: block;
}
.slots {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.slot-check {
    display: none;
}
.slot-label {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid var(--color-purple-200);
    font-size: .88rem;
    color: var(--color-purple-900);
    background: var(--color-purple-100);
    cursor: pointer;
    transition: all .15s;
    user-select: none;
}
.slot-label:hover {
    border-color: var(--color-purple-400);
    background: var(--color-purple-200);
}
.slot-check:checked + .slot-label {
    background: var(--color-green-500);
    color: #fff;
    border-color: var(--color-green-500);
}
.slot-check:disabled + .slot-label {
    opacity: .4;
    background: var(--color-purple-100);
    border-color: var(--color-purple-200);
    color: var(--color-purple-400);
    cursor: not-allowed;
}
.slot-full-badge {
    font-size: 10px;
    font-weight: 600;
    background: var(--color-pink-800);
    color: #fff;
    border-radius: 4px;
    padding: 2px 6px;
    margin-left: 8px;
}

/* ─── Submit & Buttons ───────────────────────────────────── */

.reg-submit,
.reg-btn-secondary {
    width: 100%;
    padding: 16px;
    background: var(--color-purple-600);
    color: #fff;
    border: none;
    border-radius: 14px;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    letter-spacing: .02em;
    margin-top: .5rem;
    margin-bottom: 2rem;
    transition: background .15s;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(100, 50, 150, 0.15);
    display: block;
}
.reg-submit:hover,
.reg-btn-secondary:hover {
    background: var(--color-purple-700);
}

/* ─── State pages (Closed / Merci) ───────────────────────── */

.reg-status-container {
    display: flex;
    min-height: 60vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
}
.reg-status-card {
    width: 100%;
    background: var(--color-purple-50);
    border: 1px solid var(--color-purple-200);
    border-radius: 24px;
    padding: 3rem 2rem;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}
.reg-status-icon {
    margin: 0 auto 1.5rem;
    display: flex;
    height: 80px;
    width: 80px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-purple-100);
    color: var(--color-purple-600);
}
.reg-status-card h1 {
    font-size: 2.2rem;
    font-weight: normal;
    color: var(--color-purple-900);
    margin: 0.5rem 0 0;
}
.reg-status-divider {
    margin: 1.25rem auto;
    height: 3px;
    width: 60px;
    border-radius: 2px;
    background: var(--color-pink-500);
}
.reg-status-text {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--color-purple-800);
    margin: 1.5rem 0 0;
}
.reg-status-subtext {
    font-size: .9rem;
    color: var(--color-purple-600);
    margin: .5rem 0 0;
}
.reg-status-action {
    margin-top: 2rem;
}
.reg-btn-secondary {
    display: inline-block;
    width: auto;
    padding: 12px 32px;
    font-size: .95rem;
}

/* ─── Global errors ──────────────────────────────────────── */

.reg-alert {
    background: var(--color-pink-400);
    color: var(--color-pink-800);
    border-radius: 10px;
    padding: 1rem;
    font-size: .9rem;
    margin-top: 1rem;
}

/* ─── Validation dashboard ───────────────────────────────── */

.wish-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--color-purple-100);
    border-radius: 10px;
    gap: 10px;
    flex-wrap: wrap;
}

.job-tag {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    background: var(--color-purple-500);
    border-radius: 20px;
    padding: 3px 12px;
    white-space: nowrap;
}

.time-input {
    padding: 6px 10px;
    border: 1px solid var(--color-purple-200);
    border-radius: 8px;
    font-size: .8rem;
    font-family: var(--font-display);
    background: var(--color-purple-50);
    color: var(--color-purple-950);
    transition: border-color .15s;
}
.time-input:focus {
    outline: none;
    border-color: var(--color-purple-500);
}

.val-btn-accept {
    padding: 7px 16px;
    background: var(--color-green-500);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: var(--font-display);
    font-size: .85rem;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}
.val-btn-accept:hover { background: var(--color-green-600); }
.val-btn-accept:disabled { opacity: .4; cursor: default; }

.val-btn-refuse {
    padding: 7px 16px;
    background: var(--color-purple-50);
    color: var(--color-pink-800);
    border: 1px solid var(--color-pink-500);
    border-radius: 8px;
    font-family: var(--font-display);
    font-size: .85rem;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.val-btn-refuse:hover { background: var(--color-pink-400); }
.val-btn-refuse:disabled { opacity: .4; cursor: default; }

.val-btn-sm {
    padding: 5px 12px;
    font-size: .8rem;
}

.status-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    white-space: nowrap;
}
.status-registered { background: var(--color-purple-200); color: var(--color-purple-800); }
.status-accepted   { background: var(--color-green-200);  color: var(--color-green-600); }
.status-refused    { background: var(--color-pink-400);   color: var(--color-pink-800); }

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

@media (max-width: 576px) {
    .field-grid {
        grid-template-columns: 1fr;
    }
    .reg-status-card {
        padding: 2rem 1rem;
    }
    .wish-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .time-input {
        width: 100%;
        box-sizing: border-box;
    }
}