/*==================================================
SEASON PASS
==================================================*/

:root{

    --primary:#0F4CFF;
    --secondary:#6C3BFF;

    --dark:#111827;
    --text:#64748B;

    --light:#F8FAFC;

    --border:#E5E7EB;

    --white:#FFFFFF;

    --radius:20px;

    --transition:.3s ease;

}


main {
    padding: 0px !important;
}


/*==================================================
PAGE
==================================================*/

.seasonPassPage{

    background:#F8FAFC;

    color:var(--dark);

}





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

.spHero{

    padding:120px 0 120px;

    background:

    linear-gradient(

        135deg,

        rgba(8,20,55,.95),

        rgba(15,76,255,.85)

    )

    center center/cover;

}

.spHeroContent{

    color:#fff;

}

.spBadge{

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

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

    font-size:13px;

    font-weight:700;

    margin-bottom:20px;

    letter-spacing:.05em;
    
    color: white;

}

.spHeroContent h1{

    font-size:64px;

    font-weight:900;

    line-height:1.05;

    margin-bottom:15px;

}

.spHeroContent h1 span{

    display:block;

    color:#FFD54A;

}

.spDate{

    font-size:24px;

    font-weight:600;

    margin-bottom:20px;
    
    color: white;

}

.spDescription{

    font-size:18px;

    max-width:520px;

    line-height:1.8;

    opacity:.92;
    
    color: white;
}





/*==================================================
FEATURES
==================================================*/

.spFeatures{

    list-style:none;

    padding:0;

    margin:35px 0;

}

.spFeatures li{

    margin-bottom:14px;

    display:flex;

    align-items:center;

    font-size:17px;
    
    gap: 12px;
    
    color: white;

}

.spFeatures i{

    color:#22C55E;

}





/*==================================================
BUTTON
==================================================*/

.register-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    height:56px;

    padding:0 30px;

    border:none;

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--secondary)

    );

    color:#fff;

    font-weight:700;

    text-decoration:none;

    transition:var(--transition);

}

.register-btn i {
    color: white;
}

.register-btn:hover{

    color:#fff;

    transform:translateY(-3px);

}





.outline-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    height:56px;

    padding:0 30px;

    border-radius:50px;

    border:2px solid var(--primary);

    color:var(--primary);

    background:#fff;

    text-decoration:none;

    font-weight:700;

    transition:var(--transition);

}

.outline-btn:hover{

    background:var(--primary);

    color:#fff;

}





/*==================================================
PASS CARD
==================================================*/

.spPassCard{

    background:#fff;

    border-radius:24px;

    padding:40px;

    box-shadow:

    0 20px 60px rgba(0,0,0,.08);

}

.spCardBadge{

    display:inline-block;

    padding:7px 16px;

    background:#EEF4FF;

    color:var(--primary);

    border-radius:30px;

    font-size:12px;

    font-weight:700;

    margin-bottom:20px;

}

.spPassCard h2{

    font-size:40px;

    font-weight:800;

    margin-bottom:15px;

}

.spPassCard>p{

    color:var(--text);

    margin-bottom:30px;

}





.spPassDetails{

    margin-bottom:30px;

}





.spPassItem{

    display:flex;

    gap:15px;

    align-items:flex-start;

    padding:18px 0;

    border-bottom:1px solid var(--border);

}

.spPassItem:last-child{

    border-bottom:none;

}

.spPassItem i{

    width:45px;

    height:45px;

    border-radius:50%;

    background:#EEF4FF;

    color:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

}

.spPassItem strong{

    display:block;

    margin-bottom:3px;

}

.spPassItem span{

    color:var(--text);

    font-size:14px;

}

/*==================================================
REGISTRATION
==================================================*/

.spRegistrationCard{

    background:#FFFFFF;

    border-radius:24px;

    overflow:hidden;

    box-shadow:0 15px 45px rgba(0,0,0,.06);

}





/*==================================================
HEADER
==================================================*/

.spRegistrationHeader{

    padding:40px;

    border-bottom:1px solid var(--border);

    text-align:center;

}

.spRegistrationHeader span{

    display:inline-block;

    padding:8px 18px;

    background:#EEF4FF;

    color:var(--primary);

    border-radius:30px;

    font-size:12px;

    font-weight:700;

    letter-spacing:.05em;

    margin-bottom:15px;

}

.spRegistrationHeader h2{

    font-size:36px;

    font-weight:800;

    margin-bottom:10px;

}

.spRegistrationHeader p{

    color:var(--text);

    margin:0;

}





/*==================================================
WIZARD
==================================================*/

.spWizard{

    padding:40px;

}





/*==================================================
STEPS
==================================================*/

.spSteps{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    position:relative;

    margin-bottom:50px;

}

.spSteps::before{

    content:"";

    position:absolute;

    top:20px;

    left:8%;

    width:84%;

    height:2px;

    background:#E5E7EB;

    z-index:1;

}





.spStep{

    position:relative;

    z-index:2;

    flex:1;

    text-align:center;

}





.spCircle{

    width:42px;

    height:42px;

    margin:auto;

    border-radius:50%;

    background:#fff;

    border:2px solid #CBD5E1;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    transition:.3s;

}





.spStep span{

    display:block;

    margin-top:12px;

    font-size:14px;

    color:#64748B;

    font-weight:600;

}





/*==================================================
ACTIVE
==================================================*/

.spStep.active .spCircle{

    background:var(--primary);

    color:#fff;

    border-color:var(--primary);

}

.spStep.active span{

    color:var(--primary);

}





/*==================================================
COMPLETED
==================================================*/

.spStep.completed .spCircle{

    background:#22C55E;

    color:#fff;

    border-color:#22C55E;

}





/*==================================================
PAGES
==================================================*/

.spPage{

    display:none;

    animation:fadeIn .25s ease;

}

.spPage.active{

    display:block;

}





@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:none;

    }

}





/*==================================================
STEP HEADER
==================================================*/

.spStepHeader{

    margin-bottom:35px;

}

.spStepHeader h3{

    font-size:30px;

    font-weight:700;

    margin-bottom:10px;

}

.spStepHeader p{

    color:var(--text);

    margin:0;

}





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

.spSection{

    margin-bottom:40px;

}

.spSection h4{

    font-size:20px;

    font-weight:700;

    margin-bottom:20px;

    padding-bottom:10px;

    border-bottom:1px solid var(--border);

}

/*==================================================
FORM GROUP
==================================================*/

.spFormGroup{

    margin-bottom:25px;

}

.spFormGroup label{

    display:block;

    margin-bottom:10px;

    font-size:14px;

    font-weight:600;

    color:var(--dark);

}

.spFormGroup label span{

    color:#DC2626;

}

.spFormGroup label.is-invalid{

    color:#DC2626;

}





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

.spFormGroup input,
.spFormGroup select{

    width:100%;

    height:54px;

    padding:0 18px;

    border:1px solid var(--border);

    border-radius:12px;

    background:#fff;

    color:var(--dark);

    font-size:15px;

    transition:var(--transition);

}

.spFormGroup input:focus,
.spFormGroup select:focus{

    border-color:var(--primary);

    outline:none;

    box-shadow:0 0 0 4px rgba(15,76,255,.08);

}





.spFormGroup small{

    display:block;

    margin-top:8px;

    color:var(--text);

}





/*==================================================
INPUT GROUP
==================================================*/

.spInputGroup{

    display:flex;

    align-items:center;

    border:1px solid var(--border);

    border-radius:12px;

    overflow:hidden;

    background:#fff;

    transition:.3s;

}

.spInputGroup:focus-within{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(15,76,255,.08);

}

.spInputGroup input{

    border:none;

    box-shadow:none;

}

.spPrefix{

    width:70px;

    height:54px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#F8FAFC;

    border-right:1px solid var(--border);

    font-weight:700;

}





/*==================================================
OTP
==================================================*/

#otp{

    text-align:center;

    letter-spacing:10px;

    font-size:28px;

    font-weight:700;

}

.spOtpBox{

    background:#EEF4FF;

    border-radius:12px;

    padding:18px;

    text-align:center;

    margin-bottom:25px;

}

.spOtpBox h5{

    font-size:14px;

    margin-bottom:8px;

    color:var(--text);

}

.spOtpBox strong{

    font-size:18px;

    color:var(--primary);

}





.spOtpFooter{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:25px 0;

    font-size:14px;

}

.spLinkBtn{

    background:none;

    border:none;

    color:var(--primary);

    font-weight:700;

}

.spLinkBtn:disabled{

    opacity:.5;

    cursor:not-allowed;

}





/*==================================================
INFO
==================================================*/

.spInfo{

    display:flex;

    gap:12px;

    background:#F8FAFC;

    border:1px solid var(--border);

    border-radius:12px;

    padding:18px;

    margin-top:20px;

}

.spInfo i{

    color:var(--primary);

    margin-top:3px;

}

.spInfo p{

    margin:0;

    color:var(--text);

    font-size:14px;

}





/*==================================================
TERMS
==================================================*/

.spTermsBox{

    margin-top:30px;

    padding-top:20px;

    border-top:1px solid var(--border);

}

.spTermsBox label{

    display:flex;

    gap:10px;

    align-items:flex-start;

    cursor:pointer;

}

.spTermsBox a{

    color:var(--primary);

    font-weight:600;

    text-decoration:none;

}





/*==================================================
BUTTONS
==================================================*/

.spActions{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

    margin-top:35px;

}





/*==================================================
REVIEW
==================================================*/

.spReview{

    border:1px solid var(--border);

    border-radius:12px;

    overflow:hidden;

}

.spReview .table{

    margin:0;

}

.spReview th{

    width:35%;

    background:#F8FAFC;

    font-weight:600;

}

.spReview td,
.spReview th{

    padding:15px 18px;

    vertical-align:middle;

}





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

.spSuccess{

    text-align:center;

    padding:20px 0;

}

.spSuccessIcon i{

    font-size:70px;

    color:#22C55E;

    margin-bottom:20px;

}

.spSuccess h2{

    font-size:34px;

    font-weight:800;

    margin-bottom:10px;

}

.spSuccess h3{

    font-size:30px;

    color:var(--primary);

    margin:20px 0;

}

.spSuccess p{

    color:var(--text);

    max-width:500px;

    margin:auto;

}





/*==================================================
HELP
==================================================*/

.spHelp{

    padding:70px 0;

}

.spHelpCard{

    background:#fff;

    border-radius:20px;

    padding:50px;

    text-align:center;

    box-shadow:0 10px 35px rgba(0,0,0,.05);

}

.spHelpCard h2{

    font-size:32px;

    font-weight:800;

    margin-bottom:15px;

}

.spHelpCard p{

    color:var(--text);

    margin-bottom:30px;

}

.spHelpButtons{

    display:flex;

    justify-content:center;

    gap:15px;

}





/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:991px){

.spHero{

padding:100px 0 100px;

text-align:center;

}

.spHeroContent{

margin-bottom:40px;

}

.spHeroContent h1{

font-size:48px;

}

.spRegistrationHeader{

padding:30px;

}

.spWizard{

padding:25px;

}

.spSteps{

overflow-x:auto;

gap:25px;

padding-bottom:15px;

}

.spStep{

min-width:90px;

}

}





@media(max-width:767px){

.spHeroContent h1{

font-size:38px;

}

.spRegistrationHeader h2{

font-size:28px;

}

.spStepHeader h3{

font-size:24px;

}

.spActions{

flex-direction:column;

}

.spActions .register-btn,

.spActions .outline-btn{

width:100%;

}

.spHelpButtons{

flex-direction:column;

}

.spReview th,

.spReview td{

display:block;

width:100%;

}

.spReview tr{

display:block;

padding:12px;

border-bottom:1px solid var(--border);

}

}

/*==========================================================
ADD ATTENDEE CARD
==========================================================*/

.spAddAttendeeCard{

    margin:40px 0;

    padding:45px;

    border:2px dashed #d9d9d9;

    border-radius:20px;

    background:#fafafa;

    text-align:center;

    transition:.3s;

}

.spAddAttendeeCard:hover{

    border-color:var(--primary-color);

    background:#fff;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.spAddIcon{

    width:80px;

    height:80px;

    margin:0 auto 25px;

    border-radius:50%;

    background:rgba(0,123,255,.08);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    color:var(--primary-color);

}

.spAddAttendeeCard h4{

    font-size:26px;

    font-weight:700;

    margin-bottom:12px;

}

.spAddAttendeeCard p{

    color:#666;

    font-size:16px;

    line-height:1.7;

    max-width:500px;

    margin:auto auto 25px;

}


/*==========================================================
BADGES
==========================================================*/

.required-badge{

    display:inline-block;

    margin-left:10px;

    padding:4px 10px;

    border-radius:30px;

    background:#198754;

    color:#fff;

    font-size:12px;

    font-weight:600;

}

.optional-badge{

    display:inline-block;

    margin-left:10px;

    padding:4px 10px;

    border-radius:30px;

    background:#ffc107;

    color:#222;

    font-size:12px;

    font-weight:600;

}


/*==========================================================
SECOND ATTENDEE
==========================================================*/

#secondAttendeeSection{

    display:none;

    margin-top:35px;

}

#secondAttendeeSection .spSection{

    border:1px solid #ececec;

    border-radius:18px;

    padding:35px;

    background:#fff;

}


/*==========================================================
REMOVE BUTTON
==========================================================*/

#removeSecondAttendee{

    padding:10px 18px;

    font-size:14px;

}

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

@media(max-width:768px){

    .spAddAttendeeCard{

        padding:30px 20px;

    }

    .spAddIcon{

        width:65px;

        height:65px;

        font-size:28px;

    }

    .spAddAttendeeCard h4{

        font-size:22px;

    }
    

}

/*==================================================
TERMS SECTION
==================================================*/

.spTermsSection{
    padding:100px 0;
    background:#f5f7fc;
}

.spTermsCard{
    max-width:980px;
    margin:0 auto;
    background:#fff;
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 15px 45px rgba(15,23,42,.08);
    border:1px solid #edf1f7;
}

.spTermsCard .spRegistrationHeader{
    padding:50px;
    border-bottom:1px solid #edf1f7;
    background:#fff;
}

.spTermsCard .spRegistrationHeader h2{
    font-size:42px;
    font-weight:800;
    margin:15px 0 10px;
    color:#111827;
}

.spTermsCard .spRegistrationHeader p{
    margin:0;
    color:#6b7280;
    font-size:16px;
}

.spTermsContent{
    padding:50px;
}

.spTermItem{
    padding:0 0 35px;
    margin:0 0 35px;
    border-bottom:1px solid #edf1f7;
}

.spTermItem:last-child{
    margin-bottom:0;
    padding-bottom:0;
    border-bottom:none;
}

.spTermItem h4{
    font-size:24px;
    font-weight:700;
    color:#1d4ed8;
    margin-bottom:20px;
}

.spTermItem ul{
    margin:0;
    padding-left:22px;
}

.spTermItem ul li{
    color:#4b5563;
    font-size:16px;
    line-height:1.9;
    margin-bottom:10px;
}

.spTermItem ul ul{
    margin-top:10px;
    margin-bottom:10px;
}

.spTermItem strong{
    color:#111827;
    font-weight:700;
}

@media(max-width:991px){

    .spTermsSection{
        padding:70px 0;
    }

    .spTermsCard .spRegistrationHeader{
        padding:35px 25px;
    }

    .spTermsCard .spRegistrationHeader h2{
        font-size:32px;
    }

    .spTermsContent{
        padding:35px 25px;
    }

    .spTermItem{
        padding-bottom:25px;
        margin-bottom:25px;
    }

    .spTermItem h4{
        font-size:21px;
    }

    .spTermItem ul li{
        font-size:15px;
    }

}

.spHighlights{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin:35px 0 45px;

}

.spHighlight{

    display:flex;

    align-items:flex-start;

    gap:18px;

}

.spHighlight i{

    width:55px;

    height:55px;

    border-radius:16px;

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

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:22px;

    flex-shrink:0;

}

.spHighlight strong{

    display:block;

    font-size:18px;

    color:#fff;

    margin-bottom:4px;

}

.spHighlight span{

    color:rgba(255,255,255,.85);

    line-height:1.7;

}