/* =========================================================
   AIC FESTIVAL 2027 — REGISTRATION
   Professional, accessible, visitor-first styling
   ========================================================= */

/* IMPORTANT: Honeypot protection — intentionally invisible.
   Do not remove, rename, or make this field visible. */
.hp-field{
    position:absolute!important;
    left:-9999px!important;
    top:auto!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:0!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    clip-path:inset(50%)!important;
    white-space:nowrap!important;
    border:0!important;
}

.form-success[hidden]{
    display:none!important;
}

/* ---------- Page introduction ---------- */

.registration-intro{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    color:#fff;
    min-height:0;
    background:
        linear-gradient(90deg,
            rgba(7,7,6,.98) 0%,
            rgba(10,9,7,.96) 20%,
            rgba(18,14,8,.91) 36%,
            rgba(34,25,10,.76) 50%,
            rgba(34,25,10,.48) 63%,
            rgba(34,25,10,.20) 76%,
            rgba(34,25,10,.05) 100%),
        url("../images/registration/hero.jpg") center/cover no-repeat;
}

.registration-intro-content{
    position:relative;
    z-index:1;
    padding:74px 0 60px;
    max-width:820px;
}

.registration-intro-content .eyebrow{
    display:block;
    margin-bottom:13px;
    color:#F4A300;
    font-size:.76rem;
    font-weight:900;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.registration-intro h1{
    margin:0 0 15px;
    color:#fff;
    font-size:clamp(2.5rem,5vw,4.1rem);
    line-height:1.02;
    letter-spacing:-.035em;
}

.registration-intro p{
    max-width:700px;
    margin:0;
    color:#e1e1e1;
    font-size:1.02rem;
    line-height:1.7;
}

.registration-meta{
    display:flex;
    flex-wrap:wrap;
    gap:10px 24px;
    margin-top:21px;
}

.registration-meta span{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#f1f1f1;
    font-size:.88rem;
    font-weight:700;
}

.registration-meta i{
    color:#F4A300;
}

.registration-intro .btn-primary{
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-top:25px;
}

/* ---------- Breadcrumb ---------- */

.breadcrumb{
    border-bottom:1px solid #ece8e2;
    background:#fff;
}

.breadcrumb .container{
    min-height:44px;
    display:flex;
    align-items:center;
    gap:9px;
    font-size:.8rem;
}

.breadcrumb a{
    color:#777;
}

.breadcrumb strong{
    color:#222;
}

/* ---------- Step 1: participation ---------- */

.participation-section{
    padding:68px 0 76px;
    background:#FFF8EE;
}

.section-heading{
    max-width:760px;
    margin:0 auto 32px;
    text-align:center;
}

.section-heading>span,
.eyebrow{
    color:#C77B00;
    font-size:.76rem;
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.section-heading h2{
    margin:9px 0 11px;
    color:#111;
    font-size:clamp(2rem,3.5vw,2.9rem);
    line-height:1.1;
    letter-spacing:-.025em;
}

.section-heading p{
    max-width:650px;
    margin:0 auto;
    color:#606060;
    line-height:1.7;
}

.participation-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}

.participation-card{
    position:relative;
    width:100%;
    min-height:146px;
    padding:21px 19px;
    border:1px solid #DED4C4;
    border-radius:10px;
    background:#fff;
    color:#222;
    text-align:left;
    cursor:pointer;
    font:inherit;
    transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease;
}

.participation-card:hover{
    border-color:#BDAE96;
    box-shadow:0 6px 16px rgba(0,0,0,.055);
    transform:translateY(-2px);
}

.participation-card:focus-visible{
    outline:3px solid rgba(244,163,0,.42);
    outline-offset:3px;
}

.participation-card.active{
    border:2px solid #D88900;
    padding:20px 18px;
    background:#FFFDF7;
    box-shadow:0 7px 18px rgba(0,0,0,.06);
}

.participation-card.active::after{
    content:"Selected";
    position:absolute;
    top:12px;
    right:12px;
    padding:4px 8px;
    border-radius:20px;
    background:#F4A300;
    color:#fff;
    font-size:.66rem;
    font-weight:900;
}

.participation-card i{
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    margin-bottom:13px;
    border-radius:50%;
    background:#FFF0D2;
    color:#BD7200;
    font-size:16px;
}

.participation-card.active i{
    background:#F4A300;
    color:#fff;
}

.participation-card strong{
    display:block;
    margin-bottom:5px;
    color:#151515;
    font-size:1.03rem;
    line-height:1.3;
}

.participation-card span{
    display:block;
    max-width:300px;
    color:#686868;
    font-size:.88rem;
    line-height:1.5;
}

/* ---------- Step 2: form ---------- */

.form-section{
    padding:82px 0 92px;
    background:#fff;
}

.form-layout{
    display:grid;
    grid-template-columns:270px minmax(0,1fr);
    gap:52px;
    align-items:start;
}

.form-aside{
    position:sticky;
    top:100px;
}

.form-aside h2{
    margin:9px 0 13px;
    color:#111;
    font-size:clamp(1.85rem,3vw,2.45rem);
    line-height:1.08;
    letter-spacing:-.025em;
}

.form-aside>p{
    margin:0;
    color:#666;
    line-height:1.7;
}

.aside-links{
    display:grid;
    gap:0;
    margin-top:24px;
}

.aside-links a{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 0;
    border-bottom:1px solid #eee;
    color:#555;
    font-size:.87rem;
    font-weight:700;
}

.aside-links a:hover{
    color:#BD7200;
}

.aside-links i{
    width:19px;
    color:#D88900;
    text-align:center;
}

.registration-panel{
    padding:32px;
    border:1px solid #E1DCD5;
    border-radius:12px;
    background:#fff;
    box-shadow:0 7px 24px rgba(0,0,0,.045);
}

.required-note{
    margin:0 0 17px;
    color:#777;
    font-size:.76rem;
}

.required-note span{
    color:#B66C00;
    font-weight:900;
}

.form-category{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    margin-bottom:27px;
    padding:14px 16px;
    border:1px solid #E8DCC9;
    border-radius:8px;
    background:#FFF8EE;
}

.form-category span{
    color:#777;
    font-size:.72rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.form-category strong{
    color:#B96F00;
    font-size:.94rem;
}

.form-row{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}

.field{
    margin-bottom:18px;
}

.field label{
    display:block;
    margin-bottom:7px;
    color:#222;
    font-size:.91rem;
    font-weight:800;
}

.field label span{
    color:#B66C00;
}

.field input,
.field textarea{
    width:100%;
    box-sizing:border-box;
    padding:13px 14px;
    border:1px solid #D2CCC4;
    border-radius:7px;
    background:#fff;
    color:#222;
    font:inherit;
    outline:none;
    transition:border-color .18s ease,box-shadow .18s ease;
}

.field input{
    min-height:46px;
}

.field textarea{
    min-height:135px;
    resize:vertical;
}

.field input:hover,
.field textarea:hover{
    border-color:#B8B0A7;
}

.field input:focus,
.field textarea:focus{
    border-color:#D88900;
    box-shadow:0 0 0 3px rgba(244,163,0,.12);
}

.field.invalid input,
.field.invalid textarea{
    border-color:#B42318;
}

.error-message{
    display:block;
    min-height:16px;
    margin-top:4px;
    color:#B42318;
    font-size:.76rem;
}

.conditional-fields{
    margin-bottom:2px;
}

.conditional-box{
    margin-bottom:18px;
    padding:18px;
    border:1px solid #E8DCC9;
    border-radius:8px;
    background:#FFF8EE;
}

.conditional-box h3{
    margin:0 0 14px;
    color:#222;
    font-size:1rem;
}

.consent{
    display:flex;
    align-items:flex-start;
    gap:10px;
    color:#555;
    font-size:.85rem;
    line-height:1.55;
}

.consent input{
    width:18px;
    height:18px;
    flex:0 0 auto;
    margin:1px 0 0;
    accent-color:#D88900;
}

.consent input:focus-visible{
    outline:3px solid rgba(244,163,0,.4);
    outline-offset:2px;
}

.consent-error{
    margin-left:28px;
}

.submit-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    min-height:50px;
    margin-top:11px;
    padding:14px 22px;
    border:0;
    border-radius:7px;
    background:#D88900;
    color:#fff;
    font:inherit;
    font-weight:900;
    cursor:pointer;
    transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
}

.submit-btn:hover{
    background:#B96F00;
    transform:translateY(-1px);
    box-shadow:0 7px 16px rgba(185,111,0,.18);
}

.submit-btn:focus-visible{
    outline:3px solid rgba(244,163,0,.42);
    outline-offset:3px;
}

/* ---------- Security reassurance ---------- */

.form-security{
    display:flex;
    align-items:flex-start;
    gap:11px;
    margin-top:14px;
    padding:12px 14px;
    border:1px solid #E8E3DB;
    border-radius:7px;
    background:#FAFAF8;
}

.form-security>i{
    flex:0 0 auto;
    margin-top:2px;
    color:#5B7A54;
    font-size:16px;
}

.form-security p{
    margin:0;
    color:#666;
    font-size:.76rem;
    line-height:1.5;
}

.form-security strong{
    color:#444;
}

/* ---------- Success ---------- */

.form-success{
    display:none;
    gap:12px;
    margin-bottom:22px;
    padding:16px;
    border:1px solid #E8DCC9;
    border-left:3px solid #D88900;
    border-radius:7px;
    background:#FFF8EE;
}

.form-success.visible{
    display:flex;
}

.form-success>i{
    flex:0 0 auto;
    color:#BD7200;
    font-size:21px;
}

.form-success strong{
    display:block;
    margin-bottom:4px;
}

.form-success p{
    margin:0;
    color:#666;
    font-size:.89rem;
    line-height:1.55;
}

/* ---------- Responsive ---------- */

@media(max-width:1050px){
    .participation-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .form-layout{
        grid-template-columns:245px minmax(0,1fr);
        gap:35px;
    }
}

@media(max-width:900px){
    .form-layout{
        grid-template-columns:1fr;
        gap:35px;
    }

    .form-aside{
        position:static;
    }

    .aside-links{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:8px;
    }

    .aside-links a{
        padding:10px 8px;
        border:1px solid #eee;
        border-radius:7px;
    }
}

@media(max-width:650px){
    /* Keep mobile compact and distraction-free. The desktop image is
       intentionally removed here so the form remains close to the hero. */
        .registration-intro{
        background:
            linear-gradient(90deg,
                rgba(8,8,7,.88) 0%,
                rgba(12,10,7,.72) 48%,
                rgba(18,14,8,.46) 100%),
            url("../images/registration/hero.jpg") center/cover no-repeat;
    }

    .registration-intro-content{
        padding:34px 0 32px;
    }

    .registration-intro-content .eyebrow{
        margin-bottom:9px;
        font-size:.7rem;
        letter-spacing:.14em;
    }

    .registration-intro h1{
        max-width:330px;
        margin-bottom:11px;
        font-size:clamp(2rem,9vw,2.55rem);
        line-height:1.04;
    }

    .registration-intro p{
        max-width:100%;
        font-size:.91rem;
        line-height:1.55;
    }

    .registration-meta{
        display:flex;
        gap:8px 18px;
        margin-top:15px;
    }

    .registration-meta span{
        font-size:.8rem;
    }

    .registration-intro .btn-primary{
        width:100%;
        min-height:54px;
        justify-content:center;
        margin-top:18px;
    }

    .participation-section,
    .form-section{
        padding:55px 0 62px;
    }

    .participation-grid,
    .form-row{
        grid-template-columns:1fr;
    }

    .participation-card{
        min-height:0;
        padding:18px 16px;
    }

    .participation-card.active{
        padding:17px 15px;
    }

    .participation-card.active::after{
        top:10px;
        right:10px;
    }

    .registration-panel{
        padding:21px 17px;
        border-radius:9px;
    }

    .form-category{
        align-items:flex-start;
        flex-direction:column;
        gap:6px;
    }

    .aside-links{
        grid-template-columns:1fr;
    }

    .aside-links a{
        border:0;
        border-bottom:1px solid #eee;
        border-radius:0;
    }

    .breadcrumb .container{
        min-height:42px;
        font-size:.77rem;
    }

    .form-security{
        padding:11px 12px;
    }
}

@media(prefers-reduced-motion:reduce){
    .participation-card,
    .submit-btn{
        transition:none;
    }
}