/* Quick Casting, wizard de inscricao S5 Epico 3
 * Mobile-first. Base 375px, breakpoint @768px tablet/desktop.
 * Paleta brand: laranja primario, creme fundo, cinza texto.
 */

:root {
    --brand-orange: #C97C5D;
    --brand-orange-dark: #A55F44;
    --brand-cream: #F4DDD2;
    --brand-cream-light: #FBF1EB;
    --text-dark: #2B2B2B;
    --text-grey: #6B6B6B;
    --text-mute: #9A9A9A;
    --border: #E5DAD2;
    --error: #B5341C;
    --error-bg: #FBE8E2;
    --success: #2F7D4F;
    --success-bg: #DFF1E5;
    /* Decisao Ari 15-Mai noite: paleta verde agua restaurada do deck v3.
       Aplicada em dots done (progress) e botao Enviar inscricao. */
    --aqua: #7FB8A8;
    --aqua-dark: #5A8B7C;
    --aqua-bg: #E8F2EE;
    --shadow: 0 1px 3px rgba(0,0,0,0.08);
    --radius: 10px;
    --radius-sm: 6px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-dark);
    background: var(--brand-cream-light);
}

a { color: var(--brand-orange-dark); }
a:hover { color: var(--brand-orange); }

.container {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 var(--space-3);
}

/* ─── Header (override base.html) ─── */

.site-header {
    background: #FFFFFF;
    border-bottom: 1px solid var(--border);
    padding: var(--space-3) 0;
}
.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo {
    font-weight: 700;
    color: var(--brand-orange);
    text-decoration: none;
    font-size: 18px;
}

.site-footer {
    margin-top: var(--space-6);
    padding: var(--space-4) 0;
    color: var(--text-mute);
    font-size: 13px;
    text-align: center;
}

/* ─── Honeypot: nunca visivel ─── */

.qc-hp {
    position: absolute !important;
    left: -10000px !important;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    display: none !important;
}

/* ─── Wizard container ─── */

.wizard {
    max-width: 720px;
    margin: var(--space-4) auto var(--space-6);
    padding: 0 var(--space-3);
}

@media (min-width: 768px) {
    .wizard {
        background: #FFFFFF;
        border-radius: var(--radius);
        padding: var(--space-5);
        box-shadow: var(--shadow);
    }
}

/* ─── Progress bar ─── */

.wizard-progress {
    margin-bottom: var(--space-4);
}
.wizard-progress__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-grey);
    margin: 0 0 var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.wizard-progress__bar {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-1);
}
.wizard-progress__dot {
    height: 6px;
    border-radius: 3px;
    background: var(--border);
    transition: background 0.2s ease;
}
.wizard-progress__dot.is-done {
    background: var(--aqua);
}
.wizard-progress__dot.is-current {
    background: var(--brand-orange);
    box-shadow: 0 0 0 3px rgba(201, 124, 93, 0.2);
}

/* ─── Resume banner ─── */

.wizard-resume {
    background: var(--brand-cream);
    border-radius: var(--radius);
    padding: var(--space-3);
    margin-bottom: var(--space-4);
}
.wizard-resume p { margin: 0 0 var(--space-2); font-weight: 600; }
.wizard-resume__actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* ─── Flash messages ─── */

.wizard-flash {
    margin-bottom: var(--space-3);
}
.wizard-flash:empty { display: none; }
.wizard-flash.is-error {
    background: var(--error-bg);
    color: var(--error);
    border-left: 4px solid var(--error);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
}
.wizard-flash.is-success {
    background: var(--success-bg);
    color: var(--success);
    border-left: 4px solid var(--success);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
}
.wizard-flash.is-warning {
    background: #FFF4D6;
    color: #8C5C00;
    border-left: 4px solid #C99500;
    padding: var(--space-3);
    border-radius: var(--radius-sm);
}
.wizard-flash button { margin-left: var(--space-2); }

/* Loading state: aria-busy em listas/selects */
[aria-busy="true"] {
    position: relative;
    opacity: 0.6;
    pointer-events: none;
}
[aria-busy="true"]::after {
    content: '';
    position: absolute;
    top: 12px;
    right: 12px;
    width: 14px;
    height: 14px;
    border: 2px solid var(--border);
    border-top-color: var(--brand-orange);
    border-radius: 50%;
    animation: qc-spin 0.7s linear infinite;
}

/* Hint variante erro */
.wizard-hint--error {
    color: var(--error);
    font-weight: 600;
}

/* ─── Step ─── */

.wizard-step {
    margin: 0 0 var(--space-4);
}
.wizard-step[hidden] { display: none !important; }

.wizard-step__title {
    font-size: 22px;
    margin: 0 0 var(--space-2);
    color: var(--text-dark);
}
.wizard-step__subtitle {
    font-size: 17px;
    margin: var(--space-4) 0 var(--space-2);
    color: var(--text-dark);
}
.wizard-step__intro {
    color: var(--text-grey);
    margin: 0 0 var(--space-3);
}
.wizard-step__intro--rgpd {
    font-size: 14px;
    background: var(--brand-cream-light);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
}

@media (min-width: 768px) {
    .wizard-step__title { font-size: 28px; }
}

/* ─── Fieldsets + fields ─── */

.wizard-fieldset {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-3);
    margin: 0 0 var(--space-3);
}
.wizard-fieldset__legend {
    font-weight: 600;
    padding: 0 var(--space-2);
    color: var(--text-dark);
}
.wizard-fieldset__required {
    color: var(--text-mute);
    font-size: 13px;
    font-weight: 400;
    margin-left: var(--space-1);
}

.wizard-field {
    margin: 0 0 var(--space-3);
}
.wizard-field label,
.wizard-field > label {
    display: block;
    font-weight: 600;
    margin: 0 0 var(--space-1);
    color: var(--text-dark);
}
.wizard-field input,
.wizard-field select,
.wizard-field textarea {
    width: 100%;
    padding: 12px 14px;
    font-size: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #FFFFFF;
    color: var(--text-dark);
    font-family: inherit;
}
.wizard-field input:focus,
.wizard-field select:focus,
.wizard-field textarea:focus {
    outline: 2px solid var(--brand-orange);
    outline-offset: 1px;
    border-color: var(--brand-orange);
}
.wizard-field textarea { resize: vertical; min-height: 80px; }

[aria-invalid="true"] {
    border-color: var(--error) !important;
    background-color: var(--error-bg) !important;
}

.wizard-hint {
    font-size: 13px;
    color: var(--text-mute);
    margin: var(--space-1) 0 0;
}

/* S6-5 (1-Jun-2026): hint imediato a seguir ao label de slot de foto.
   Mais proximo do label que os hints genericos (margin reduzido) +
   tom mais quente para destacar a instrucao especifica do slot. */
.wizard-hint--slot {
    color: var(--brand-orange-dark);
    font-style: italic;
    margin-top: 2px;
}

.wizard-error {
    color: var(--error);
    font-size: 13px;
    margin: var(--space-1) 0 0;
    font-weight: 600;
}
.wizard-error[hidden] { display: none; }

/* ─── Foto preview (S6 fix 9-Jun-2026, queixa Filipa) ─── */
/* Sem esta regra, a <img class="wizard-photo-preview"> renderiza nas
   dimensoes nativas do ficheiro (ex: 4000x3000 do telemovel). Miniatura
   quadrada de 120px com object-fit:cover preserva a face centrada. */
.wizard-photo-preview {
    max-width: 120px;
    max-height: 120px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    margin-top: var(--space-2);
    display: block;
}

/* ─── Checkbox / radio ─── */

.wizard-check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    cursor: pointer;
}
.wizard-check input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    accent-color: var(--brand-orange);
    cursor: pointer;
    flex-shrink: 0;
}
.wizard-check__label {
    flex: 1;
    font-size: 15px;
    color: var(--text-dark);
}
.wizard-check__required {
    color: var(--error);
    font-size: 13px;
    margin-left: var(--space-1);
}

/* ─── Imagens AI block (Demo B 18-Mai-2026, bloqueante Higgsfield) ───
   Bloco intencionalmente destacado FORA do fieldset RGPD: border
   laranja + fundo creme reforca que e' decisao separada e activa.
*/
.wizard-fieldset--ai {
    border: 2px solid #f57c00;
    background: #fff8e1;
    padding: var(--space-3) var(--space-3) var(--space-3);
    margin-top: var(--space-3);
}
.wizard-step__subtitle--ai {
    color: #e65100;
    margin: 0 0 var(--space-2);
    font-size: 18px;
}
.wizard-step__intro--ai {
    color: #5d4037;
    font-size: 14px;
    line-height: 1.45;
    margin: 0 0 var(--space-2);
}
.wizard-hint--ai {
    font-style: italic;
    color: #8d6e63;
    margin-bottom: var(--space-2);
}

.wizard-radio-group {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-2) 0;
}
@media (min-width: 600px) {
    .wizard-radio-group { grid-template-columns: 1fr 1fr; }
}
.wizard-radio {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-2);
    border: 1px solid #f57c00;
    border-radius: var(--radius-sm);
    background: #FFFFFF;
    cursor: pointer;
}
.wizard-radio input[type="radio"] {
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    accent-color: #f57c00;
    cursor: pointer;
    flex-shrink: 0;
}
.wizard-radio:has(input[type="radio"]:checked) {
    background: #fff3e0;
    border-color: #e65100;
    box-shadow: 0 0 0 2px #f57c00 inset;
}
.wizard-radio__label {
    flex: 1;
    font-size: 15px;
    color: var(--text-dark);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.wizard-radio__hint {
    font-size: 13px;
    color: var(--text-mute);
    font-weight: 400;
}

/* ─── Checklist (categorias/tags/idiomas multi-select) ─── */

.wizard-checklist {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-1);
    max-height: 320px;
    overflow-y: auto;
    padding: var(--space-1);
}
@media (min-width: 768px) {
    .wizard-checklist { grid-template-columns: 1fr 1fr; }
}
.wizard-checklist__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #FFFFFF;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.wizard-checklist__item:hover {
    border-color: var(--brand-orange);
    background: var(--brand-cream-light);
}
/* Bug fix 15-Mai-2026: sem esta regra, collapsedByDefault:true em
   attachChecklistFilter punha item.hidden=true mas display:flex acima
   sobrepunha o user-agent hidden, deixando 74 idiomas visiveis em
   /en/registration/ Step 4. Mesmo pattern de .wizard-step[hidden]. */
.wizard-checklist__item[hidden] { display: none !important; }
.wizard-checklist__item input { accent-color: var(--brand-orange); flex-shrink: 0; }
.wizard-checklist__item input:checked + span {
    font-weight: 600;
    color: var(--brand-orange-dark);
}

/* ─── Sub-form ParentGuardian ─── */

.wizard-subform {
    background: var(--brand-cream-light);
    border-radius: var(--radius);
    padding: var(--space-3);
    margin: var(--space-3) 0;
    border: 1px solid var(--brand-cream);
}
.wizard-subform__title {
    margin: 0 0 var(--space-2);
    color: var(--brand-orange-dark);
    font-size: 17px;
}
.wizard-pg-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.wizard-pg {
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    position: relative;
}
.wizard-pg legend {
    font-weight: 600;
    padding: 0 var(--space-1);
}
.qc-pg-remove {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
}

/* ─── Buttons ─── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    font-family: inherit;
    text-decoration: none;
    min-height: 44px;  /* WCAG 2.5.5 touch target */
}
/* display:inline-flex acima sobrepunha o user-agent hidden, deixando
   #qc-next "Continuar" visivel no step 5 (revisao) quando JS o
   marcava hidden=true. Mesmo pattern de .wizard-step[hidden] e
   .wizard-checklist__item[hidden]. Bug Ari 19-Mai-2026. */
.btn[hidden] { display: none !important; }
.btn:focus-visible {
    outline: 2px solid var(--brand-orange);
    outline-offset: 2px;
}
.btn--primary {
    background: var(--brand-orange);
    color: #FFFFFF;
}
.btn--primary:hover:not([disabled]) { background: var(--brand-orange-dark); }
.btn--primary[disabled],
.btn--primary[aria-disabled="true"] {
    background: var(--text-mute);
    cursor: not-allowed;
    opacity: 0.7;
}
/* Botao Enviar inscricao em verde agua (diferenciado do Continuar
   terracota). Decisao Ari 15-Mai noite. */
.btn--submit {
    background: var(--aqua);
    color: #FFFFFF;
    border: 1px solid var(--aqua);
}
.btn--submit:hover, .btn--submit:focus {
    background: var(--aqua-dark);
    border-color: var(--aqua-dark);
}
.btn--submit:disabled {
    background: var(--text-mute);
    border-color: var(--text-mute);
    cursor: not-allowed;
}
.btn--ghost {
    background: transparent;
    border-color: var(--border);
    color: var(--text-dark);
}
.btn--ghost:hover { border-color: var(--brand-orange); color: var(--brand-orange-dark); }
.btn--small { padding: 6px 14px; font-size: 14px; min-height: 32px; }

.btn__spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: qc-spin 0.7s linear infinite;
}
@keyframes qc-spin {
    to { transform: rotate(360deg); }
}

/* ─── Email gate (pre-wizard) ─── */
/* Bloco simples que aparece antes do progress bar e da' form do wizard.
   Decisao Ari 19-Mai-2026: pergunta email primeiro para nao desperdicar
   tempo de candidato que ja' tem inscricao. */

.wizard-gate {
    max-width: 560px;
    margin: 0 auto;
    padding: var(--space-4);
    text-align: left;
}
.wizard-gate[hidden] { display: none !important; }
.wizard-gate__title {
    font-size: 28px;
    margin: 0 0 var(--space-3);
    color: var(--brand-orange-dark);
}
.wizard-gate__intro {
    font-size: 18px;
    color: var(--text-dark);
    margin: 0 0 var(--space-2);
}
.wizard-gate__hint {
    font-size: 14px;
    color: var(--text-mute);
    margin: 0 0 var(--space-4);
}
.wizard-gate__field {
    margin-bottom: var(--space-3);
}
.wizard-gate__label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--space-1);
    color: var(--text-dark);
}
.wizard-gate__input {
    width: 100%;
    padding: 12px 14px;
    font-size: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #FFFFFF;
    color: var(--text-dark);
    font-family: inherit;
    min-height: 44px;  /* WCAG 2.5.5 */
}
.wizard-gate__input:focus-visible {
    outline: 2px solid var(--brand-orange);
    outline-offset: 1px;
    border-color: var(--brand-orange);
}
.wizard-gate__input[aria-invalid="true"] {
    border-color: var(--danger, #B23A48);
}
.wizard-gate__existing {
    background: var(--brand-cream-light);
    border: 1px solid var(--brand-orange);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    color: var(--brand-orange-dark);
    font-size: 15px;
    line-height: 1.5;
    margin: 0 0 var(--space-3);
}
.wizard-gate__existing[hidden] { display: none !important; }
.wizard-gate__actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}
/* Input para codigo 6 digitos: maior, centrado, letter-spacing generoso. */
.wizard-gate__input--code {
    font-size: 28px;
    text-align: center;
    letter-spacing: 0.4em;
    font-variant-numeric: tabular-nums;
}

/* PR4: badge "Reconfirmar?" nos consents em falta no update mode */
.wizard-missing-badge {
    display: inline-block;
    background: var(--brand-orange);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: var(--space-1);
    letter-spacing: 0.04em;
    vertical-align: middle;
}

/* Update mode banner (PR3 Phase 2) */
.wizard-update-banner {
    max-width: 720px;
    margin: 0 auto var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--aqua-bg);
    border: 1px solid var(--aqua);
    border-radius: var(--radius-sm);
    color: var(--aqua-dark);
}
.wizard-update-banner[hidden] { display: none !important; }
.wizard-update-banner strong {
    display: inline-block;
    margin-right: var(--space-1);
}

/* ─── Nav ─── */

.wizard-nav {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
}
.wizard-nav .btn--primary { margin-left: auto; }

/* ─── Review (ecra 5) ─── */

.wizard-review__section {
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
}
.wizard-review__section:last-child { border-bottom: 0; }
.wizard-review__section h2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    margin: 0 0 var(--space-2);
    color: var(--text-dark);
}
.wizard-review dl {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-1) var(--space-3);
    font-size: 14px;
}
.wizard-review dt { color: var(--text-grey); font-weight: 600; }
.wizard-review dd { margin: 0; color: var(--text-dark); word-break: break-word; }
.wizard-review .qc-list { display: flex; flex-wrap: wrap; gap: 4px; }
.wizard-review .qc-list .qc-chip {
    background: var(--brand-cream);
    color: var(--brand-orange-dark);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

/* ─── Success final ─── */

.wizard-success {
    text-align: center;
    padding: var(--space-5) var(--space-3);
    background: var(--success-bg);
    border-radius: var(--radius);
    color: var(--success);
    margin-top: var(--space-3);
}
.wizard-success h2 { margin: 0 0 var(--space-2); }
.wizard-success__intro { margin: 0 0 var(--space-3); color: var(--text-dark); }
.wizard-success__id-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin: var(--space-3) 0;
    font-size: 18px;
    color: var(--text-dark);
}
.wizard-success__id-row strong {
    font-size: 24px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    color: var(--brand-orange-dark);
    background: #FFFFFF;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    user-select: all;
}

/* ─── S6-1: aviso de email duplicado no submit ─── */

.email-dup-warning {
    margin: var(--space-4) 0;
    padding: var(--space-3) var(--space-4);
    background: #FFF6E5;
    border-left: 4px solid var(--brand-orange);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}
.email-dup-warning__title {
    margin: 0 0 var(--space-2) 0;
    font-weight: 700;
    color: var(--brand-orange-dark);
    font-size: 17px;
}
.email-dup-warning__body {
    margin: 0 0 var(--space-3) 0;
    color: var(--text-dark);
    line-height: 1.5;
}
.email-dup-warning__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.email-dup-warning__actions .btn--secondary {
    background: #FFFFFF;
    color: var(--brand-orange-dark);
    border: 1px solid var(--brand-orange);
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.email-dup-warning__actions .btn--secondary:hover {
    background: var(--brand-cream-light);
    color: var(--brand-orange-dark);
}

/* ─── Reduced motion ─── */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .btn__spinner { animation: none; }
}