/* =========================================================
   MAIN
========================================================= */

#airaaa-registration{
    --red:#e60000;
    --blue:#071b35;
    --navy:#06152d;
    --gold:#d7ad4b;
    --gold-light:#f3d477;
    --white:#ffffff;
    --muted:#aebbd0;

    width:100%;
    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(215,173,75,.08),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 90%,
            rgba(230,0,0,.08),
            transparent 30%
        ),
        #06152d;

    color:#fff;
    font-family:Arial,Helvetica,sans-serif;
    box-sizing:border-box;
}

#airaaa-registration *,
#airaaa-registration *::before,
#airaaa-registration *::after{
    box-sizing:border-box;
}


/* =========================================================
   HERO
========================================================= */

.airaaa-reg-hero{
    padding:65px 20px 55px;
    text-align:center;

    background:
        linear-gradient(
            180deg,
            #071b35,
            #06152d
        );

    border-bottom:
        1px solid rgba(215,173,75,.25);
}

.airaaa-reg-badge{
    display:inline-block;

    padding:8px 20px;

    border:1px solid #d7ad4b;
    border-radius:50px;

    color:#f3d477;

    font-size:12px;
    font-weight:800;
    letter-spacing:2px;

    margin-bottom:18px;
}

.airaaa-reg-hero h1{
    margin:0;

    color:#fff;

    font-size:clamp(30px,5vw,56px);
    line-height:1.1;

    font-weight:900;

    text-transform:uppercase;
}

.airaaa-reg-hero h1 span{
    color:#f3d477;
}

.airaaa-reg-hero p{
    max-width:850px;

    margin:18px auto 0;

    color:#c5d0df;

    font-size:15px;
    line-height:1.7;
}


/* =========================================================
   CONTAINER
========================================================= */

.airaaa-reg-container{
    width:min(1180px,calc(100% - 30px));
    margin:auto;
}


/* =========================================================
   FORM CARD
========================================================= */

.airaaa-reg-card{
    margin:42px auto 70px;

    background:rgba(255,255,255,.025);

    border:
        1px solid rgba(215,173,75,.25);

    border-radius:20px;

    overflow:hidden;

    box-shadow:
        0 25px 70px rgba(0,0,0,.35);
}


/* =========================================================
   FORM SECTION
========================================================= */

.airaaa-form-section{
    padding:30px;

    border-bottom:
        1px solid rgba(215,173,75,.14);
}

.airaaa-form-section:last-of-type{
    border-bottom:0;
}


/* =========================================================
   SECTION TITLE
========================================================= */

.airaaa-section-title{
    display:flex;
    align-items:center;

    gap:13px;

    margin-bottom:25px;
}

.airaaa-section-number{
    width:38px;
    height:38px;

    flex:none;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            #f3d477,
            #b88628
        );

    color:#071b35;

    font-size:14px;
    font-weight:900;
}

.airaaa-section-title h2{
    margin:0;

    font-size:20px;

    color:#fff;

    text-transform:uppercase;
}

.airaaa-section-title p{
    margin:4px 0 0;

    color:#8e9db3;

    font-size:12px;
}


/* =========================================================
   GRID
========================================================= */

.airaaa-form-grid{
    display:grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:20px;
}

.airaaa-field.full{
    grid-column:1/-1;
}


/* =========================================================
   LABEL
========================================================= */

.airaaa-field label{
    display:block;

    margin-bottom:8px;

    color:#dce5f0;

    font-size:13px;
    font-weight:700;
}

.airaaa-field label span{
    color:#ff7676;
}


/* =========================================================
   INPUTS
========================================================= */

.airaaa-field input,
.airaaa-field select,
.airaaa-field textarea{

    width:100%;

    min-height:50px;

    padding:13px 15px;

    border-radius:9px;

    border:
        1px solid rgba(255,255,255,.14);

    outline:none;

    background:#071a36;

    color:#fff;

    font-family:inherit;

    font-size:14px;

    transition:.2s ease;
}

.airaaa-field textarea{
    min-height:110px;

    resize:vertical;
}

.airaaa-field input::placeholder,
.airaaa-field textarea::placeholder{
    color:#718198;
}

.airaaa-field input:focus,
.airaaa-field select:focus,
.airaaa-field textarea:focus{

    border-color:#d7ad4b;

    box-shadow:
        0 0 0 2px
        rgba(215,173,75,.08);
}

.airaaa-field select option{
    background:#071a36;
    color:#fff;
}


/* =========================================================
   AUTO FILLED
========================================================= */

.airaaa-auto-filled{
    color:#f3d477!important;
}


/* =========================================================
   PIN STATUS
========================================================= */

.airaaa-pin-status{

    margin-top:7px;

    min-height:16px;

    color:#8494aa;

    font-size:11px;
}


/* =========================================================
   RAILWAY RADIO
========================================================= */

.airaaa-radio-wrap{

    display:flex;

    gap:12px;

    margin-top:4px;
}

.airaaa-radio{
    position:relative;

    cursor:pointer;
}

.airaaa-radio input{

    position:absolute;

    opacity:0;
}

.airaaa-radio-box{

    min-width:120px;

    padding:13px 22px;

    border:
        1px solid rgba(255,255,255,.14);

    border-radius:9px;

    background:#071a36;

    color:#dbe4ef;

    text-align:center;

    font-weight:700;

    font-size:13px;

    transition:.2s;
}

.airaaa-radio input:checked
+ .airaaa-radio-box{

    border-color:#d7ad4b;

    color:#f3d477;

    background:
        rgba(215,173,75,.08);
}


/* =========================================================
   RAILWAY DETAILS
========================================================= */

#airaaaRailwayDetails{

    display:none;

    margin-top:20px;

    padding:20px;

    border:
        1px solid rgba(215,173,75,.20);

    border-radius:12px;

    background:
        rgba(215,173,75,.035);
}

#airaaaRailwayDetails.active{
    display:block;
}

.airaaa-subtitle{

    margin:0 0 18px;

    color:#f3d477;

    font-size:13px;

    font-weight:800;
}


/* =========================================================
   DECLARATION
========================================================= */

.airaaa-declaration{

    padding:18px;

    border:
        1px solid rgba(255,255,255,.10);

    border-radius:10px;

    background:
        rgba(255,255,255,.025);
}

.airaaa-declaration label{

    display:flex;

    align-items:flex-start;

    gap:10px;

    margin:0;

    color:#fff;

    line-height:1.6;

    font-size:13px;

    cursor:pointer;
}

.airaaa-declaration input{

    width:18px;
    height:18px;

    min-height:18px;

    flex:none;

    margin-top:2px;

    accent-color:#d7ad4b;
}


/* =========================================================
   SUBMIT
========================================================= */

.airaaa-submit-area{

    padding:30px;

    text-align:center;

    background:
        rgba(0,0,0,.10);
}

.airaaa-submit{

    min-width:270px;

    padding:16px 35px;

    border:0;

    border-radius:50px;

    background:
        linear-gradient(
            135deg,
            #f3d477,
            #c49535
        );

    color:#071b35;

    font-size:14px;

    font-weight:900;

    letter-spacing:.7px;

    cursor:pointer;

    transition:.25s;
}

.airaaa-submit:hover{

    transform:translateY(-2px);

    box-shadow:
        0 12px 30px
        rgba(215,173,75,.25);
}

.airaaa-submit:disabled{

    opacity:.55;

    cursor:not-allowed;

    transform:none;
}


/* =========================================================
   ERROR MESSAGE
========================================================= */

#airaaaRegMessage{

    display:none;

    margin:0 30px 25px;

    padding:15px;

    border-radius:9px;

    text-align:center;

    font-size:13px;
}

#airaaaRegMessage.error{

    display:block;

    color:#ffb1b1;

    background:
        rgba(230,0,0,.10);

    border:
        1px solid
        rgba(230,0,0,.25);
}


/* =========================================================
   SUCCESS POPUP
========================================================= */

#airaaaSuccessPopup{

    position:fixed;

    inset:0;

    z-index:999999;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:20px;

    background:
        rgba(2,10,24,.82);

    backdrop-filter:blur(8px);
}

.airaaa-popup-box{

    width:min(440px,100%);

    padding:35px 25px;

    text-align:center;

    border-radius:20px;

    border:
        1px solid #d7ad4b;

    background:
        linear-gradient(
            145deg,
            #071b35,
            #06152d
        );

    box-shadow:
        0 30px 80px
        rgba(0,0,0,.55);

    color:#fff;

    animation:
        airaaaPopupIn .25s ease;
}

@keyframes airaaaPopupIn{

    from{
        opacity:0;
        transform:scale(.9);
    }

    to{
        opacity:1;
        transform:scale(1);
    }
}

.airaaa-popup-check{

    width:65px;
    height:65px;

    margin:0 auto 18px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            #f3d477,
            #b88628
        );

    color:#071b35;

    font-size:35px;

    font-weight:900;
}

.airaaa-popup-box h2{

    margin:0 0 15px;

    color:#f3d477;

    font-size:24px;
}

.airaaa-popup-box p{

    margin:7px 0;

    color:#e5ebf3;

    font-size:15px;

    line-height:1.6;
}

.airaaa-thank-you{
    color:#fff!important;
}

.airaaa-popup-team{

    margin-top:14px;

    color:#f3d477;

    font-size:17px;

    font-weight:900;
}

.airaaa-popup-reg{

    margin:22px 0;

    padding:13px;

    border-radius:9px;

    background:
        rgba(255,255,255,.05);

    border:
        1px solid
        rgba(215,173,75,.3);

    color:#aebbd0;

    font-size:12px;
}

.airaaa-popup-reg strong{

    display:block;

    margin-top:5px;

    color:#fff;

    font-size:16px;

    letter-spacing:.5px;
}

#airaaaPopupClose{

    min-width:130px;

    padding:12px 25px;

    border:0;

    border-radius:50px;

    background:
        linear-gradient(
            135deg,
            #f3d477,
            #c49535
        );

    color:#071b35;

    font-weight:900;

    cursor:pointer;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767px){

    .airaaa-reg-hero{
        padding:48px 15px 42px;
    }

    .airaaa-reg-hero h1{
        font-size:30px;
    }

    .airaaa-reg-hero p{
        font-size:13px;
    }

    .airaaa-reg-container{
        width:calc(100% - 20px);
    }

    .airaaa-reg-card{
        margin-top:25px;
        border-radius:15px;
    }

    .airaaa-form-section{
        padding:22px 16px;
    }

    .airaaa-form-grid{
        grid-template-columns:1fr;
        gap:17px;
    }

    .airaaa-field.full{
        grid-column:auto;
    }

    .airaaa-section-title{
        align-items:flex-start;
    }

    .airaaa-section-title h2{
        font-size:16px;
    }

    .airaaa-section-number{
        width:34px;
        height:34px;
        font-size:12px;
    }

    .airaaa-radio-wrap{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .airaaa-radio-box{
        min-width:0;
        padding:12px 8px;
    }

    .airaaa-submit-area{
        padding:25px 16px;
    }

    .airaaa-submit{
        width:100%;
    }

    #airaaaRegMessage{
        margin-left:16px;
        margin-right:16px;
    }

    .airaaa-popup-box{
        padding:30px 18px;
    }

    .airaaa-popup-box h2{
        font-size:21px;
    }
}