/*=========================================================*
* NIC Kerala Onam Celebration 2026
* register.css
*=========================================================*/


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


.registerHero {

    min-height: 65vh;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    background:

        linear-gradient(135deg,
            rgba(255, 213, 79, .9),
            rgba(255, 152, 0, .85)),

        url("../images/onam-bg.jpg");

    background-size: cover;

    background-position: center;

    overflow: hidden;

}



.registerOverlay {

    position: absolute;

    inset: 0;

    background:

        radial-gradient(circle,
            transparent,
            rgba(0, 0, 0, .35));

}



.registerHeroContent {

    position: relative;

    z-index: 2;

    text-align: center;

    color: white;

    max-width: 1000px;

    padding: 40px 20px;

}



.registerHeroContent .tag {


    display: inline-block;

    padding: 8px 22px;

    border-radius: 30px;

    background:

        rgba(255, 255, 255, .25);

    backdrop-filter: blur(10px);

    font-size: 18px;

    margin-bottom: 20px;

}



.registerHeroContent h1 {


    font-family: "Cinzel", serif;

    font-size: 60px;

    font-weight: 900;

    margin: 10px 0;


}



.registerHeroContent h2 {


    font-size: 32px;

    margin-bottom: 20px;


}



.registerHeroContent p {


    font-size: 18px;

    line-height: 1.7;

}



.registerHero .heroInfo {


    margin-top: 35px;

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 20px;


}



.registerHero .heroInfo div {


    padding: 12px 25px;

    border-radius: 30px;

    background:

        rgba(255, 255, 255, .2);

    backdrop-filter: blur(10px);

}





/*=========================================================*
* EVENTS SECTION
*=========================================================*/


.eventsSection {


    padding: 80px 8%;

    background: #f7f8fb;

}



.eventsGrid {


    display: grid;

    grid-template-columns:

        repeat(auto-fit,
            minmax(300px, 1fr));

    gap: 30px;

    margin-top: 45px;


}





/*=========================================================*
* EVENT CARD
*=========================================================*/


.eventCard {


    background: white;

    border-radius: 25px;

    padding: 28px;

    position: relative;

    overflow: hidden;

    box-shadow:

        0 15px 40px rgba(0, 0, 0, .08);

    transition: .35s;


}



.eventCard::before {


    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 5px;


    background:

        linear-gradient(90deg,
            #ffd54f,
            #ff9800);


}



.eventCard:hover {


    transform:

        translateY(-10px);


    box-shadow:

        0 25px 50px rgba(255, 152, 0, .25);


}






.eventHeader {


    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;


}



.eventNumber {


    width: 45px;

    height: 45px;

    border-radius: 50%;


    display: flex;

    align-items: center;

    justify-content: center;


    background:

        linear-gradient(135deg,
            #ffd54f,
            #ff9800);


    color: white;

    font-weight: 700;


}





.statusBadge {


    padding: 6px 15px;

    border-radius: 20px;

    font-size: 13px;

    font-weight: 600;


}



.statusAvailable {


    background: #dcfce7;

    color: #15803d;


}



.statusFull {


    background: #fee2e2;

    color: #dc2626;


}






.eventCard h3 {


    font-size: 24px;

    color: #1e293b;

    margin-bottom: 5px;


}



.eventMalayalam {


    color: #ff9800;

    font-size: 17px;

    margin-bottom: 15px;


}



.eventDescription {


    color: #64748b;

    line-height: 1.7;

    min-height: 90px;


}






.eventDetails {


    margin-top: 20px;

    padding-top: 20px;

    border-top:

        1px solid #e2e8f0;


}



.eventDetails div {


    margin: 10px 0;

    color: #475569;

    font-size: 15px;


}






.registrationCount {


    margin-top: 20px;

    background: #fff7ed;

    padding: 12px;

    border-radius: 15px;

    text-align: center;

    color: #ea580c;

    font-weight: 600;


}






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


.eventRegisterBtn {


    width: 100%;

    margin-top: 20px;

    padding: 14px;

    border: none;

    border-radius: 30px;


    background:

        linear-gradient(135deg,
            #ffd54f,
            #ff9800);


    color: white;

    font-size: 16px;

    font-weight: 700;

    cursor: pointer;


    transition: .3s;


}



.eventRegisterBtn:hover {


    transform: scale(1.04);


}



.eventRegisterBtn.disabled {


    background: #cbd5e1;

    cursor: not-allowed;


}






.loadingEvents {


    grid-column: 1/-1;

    text-align: center;

    font-size: 25px;

    color: #ff9800;

    padding: 50px;


}





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


@media(max-width:768px) {



    .registerHero {


        min-height: 55vh;


    }



    .registerHeroContent h1 {


        font-size: 38px;


    }



    .registerHeroContent h2 {


        font-size: 22px;


    }



    .eventsSection {


        padding: 50px 20px;


    }



    .eventCard {


        padding: 22px;


    }



}

/*=========================================================*
 EVENT RULES
=========================================================*/





.rulesToggle {


    margin-top: 20px;

    padding: 14px;

    border-radius: 15px;

    background: #fff7ed;

    color: #ea580c;

    font-weight: 600;

    display: flex;

    justify-content: space-between;

    align-items: center;


    transition: .3s;


}



.rulesToggle:hover {


    background: #ffedd5;


}



.rulesToggle span {


    transition: .3s;


}



.rulesToggle.active span {


    transform: rotate(180deg);


}





.eventRules {


    max-height: 0;

    overflow: hidden;

    opacity: 0;

    transition:

        max-height .5s ease,
        opacity .4s ease;

    margin-top: 10px;


}



.eventRules.show {


    max-height: 1000px;

    opacity: 1;


}





.eventRules h4 {


    color: #ff9800;

    margin-bottom: 15px;


}





.ruleItem {


    display: flex;

    gap: 12px;

    padding: 15px 0;

    border-bottom:

        1px solid #eee;


}



.ruleNumber {


    min-width: 32px;

    height: 32px;

    border-radius: 50%;


    display: flex;

    align-items: center;

    justify-content: center;


    background:

        linear-gradient(135deg,
            #ffd54f,
            #ff9800);


    color: white;

    font-weight: bold;


}

.ruleContent p {


    margin: 5px 0;

    font-size: 14px;

    line-height: 1.6;

    color: #475569;


}



.ruleContent b {


    color: #ff9800;


}

.eventTitle {

    font-family: "Cinzel", serif;

    font-size: 26px;

    color: #8b4513;

    margin-bottom: 8px;

}