/* ================= GLOBAL ================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Poppins', sans-serif;
    background: #f5f8fc;
    color: #1b2a4e;
    overflow-x: hidden;
}
a {
    text-decoration: none;
}
/* ================= NAVBAR ================= */
.main-header {
    position: sticky;
    top: 0;
    z-index: 999;
}
.navbar {
    padding: 16px 0;
}
.nav-link {
    color: #23408e !important;
    font-weight: 600;
    margin: 0 10px;
    transition: .3s;
}
.nav-link:hover,
.nav-link.active {
    color: #ff7b00 !important;
}
.login-btn {
    border: none;
    background:
        linear-gradient(135deg,
            #23408e,
            #0a7cff);
    color: white;
    padding: 12px 26px;
    border-radius: 50px;
    font-weight: 600;
    transition: .3s;
}
.login-btn:hover {
    transform: translateY(-2px);
}
.announcement-btn {
    border: none;
    background: #edf3ff;
    padding: 12px 20px;
    border-radius: 50px;
    color: #23408e;
    font-weight: 600;
}
#announcementCount {
    background: #ff7b00;
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    margin-left: 8px;
}
/* ================= HERO ================= */
.hero-v3 {
    min-height: 90vh;
    background:
        linear-gradient(135deg,
            #ffffff,
            #edf5ff);
    display: flex;
    align-items: center;
    padding: 80px 0;
    overflow: hidden;
}
.hero-badge {
    background: #edf3ff;
    color: #0a7cff;
    padding: 12px 20px;
    border-radius: 50px;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 20px;
}
.hero-title {
    font-size: 72px;
    font-weight: 800;
    line-height: 1.1;
    color: #23408e;
}
.hero-desc {
    margin-top: 25px;
    font-size: 22px;
    line-height: 1.8;
    color: #566889;
}
#heroWord {
    color: #ff7b00;
    font-weight: 700;
}
/* BUTTONS */
.hero-actions {
    margin-top: 35px;
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}
.primary-btn {
    border: none;
    background:
        linear-gradient(135deg,
            #ff7b00,
            #ff9a2f);
    color: white;
    padding: 16px 32px;
    border-radius: 50px;
    font-weight: 600;
    transition: .3s;
}
.secondary-btn {
    border: none;
    background: white;
    color: #23408e;
    padding: 16px 32px;
    border-radius: 50px;
    font-weight: 600;
    border: 2px solid #dbe7ff;
    transition: .3s;
}
.primary-btn:hover,
.secondary-btn:hover {
    transform: translateY(-3px);
}
/* HERO IMAGES */
.hero-images {
    position: relative;
    height: 550px;
}
.hero-img {
    position: absolute;
    border-radius: 28px;
    object-fit: cover;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, .12);
    transition: .5s;
}
.hero-img:hover {
    transform: scale(1.05);
}
.img1 {
    width: 280px;
    height: 350px;
    top: 20px;
    left: 20px;
}
.img2 {
    width: 250px;
    height: 300px;
    top: 120px;
    right: 10px;
}
.img3 {
    width: 300px;
    height: 220px;
    bottom: 20px;
    left: 100px;
}
/* ================= STATS ================= */
.hero-stats {
    display: flex;
    gap: 20px;
    margin-top: 45px;
    flex-wrap: wrap;
}
.stat-box {
    background: white;
    padding: 22px 28px;
    border-radius: 25px;
    box-shadow:
        0 12px 30px rgba(0, 0, 0, .08);
    min-width: 150px;
}
.stat-box h2 {
    color: #23408e;
    font-size: 34px;
    font-weight: 700;
}
.stat-box p {
    margin: 0;
    color: #6b7a99;
}
/* ================= SECTION ================= */
section {
    padding: 30px 0 !important;
}
.section-header {
    text-align: center;
    margin-bottom: 50px;
}
.section-header h2 {
    color: #23408e;
    font-size: 46px;
    font-weight: 700;
}
.section-header p {
    color: #6b7a99;
    margin-top: 10px;
}
/* ================= WHY ================= */
.why-card {
    background: white;
    border-radius: 30px;
    padding: 20px 15px;
    text-align: center;
    box-shadow:
        0 10px 35px rgba(0, 0, 0, .08);
    transition: .4s;
    height: 100%;
}
.why-card:hover {
    transform:
        translateY(-8px);
}
.why-card h4 {
    margin: 18px 0;
    color: #23408e;
}
/* ================= COMPETITIONS ================= */
.competition-card {
    background: white;
    border-radius: 28px;
    overflow: hidden;
    box-shadow:
        0 10px 35px rgba(0, 0, 0, .08);
    transition: .4s;
    margin-bottom: 30px;
}
.competition-card:hover {
    transform: translateY(-8px);
}
.competition-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}
.comp-content {
    padding: 25px;
}
/* ================= WINNERS ================= */
.winner-card {
    background: white;
    border-radius: 30px;
    overflow: hidden;
    box-shadow:
        0 10px 35px rgba(0, 0, 0, .08);
    transition: .4s;
}
.winner-card:hover {
    transform: translateY(-8px);
}
.winner-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}
/* ================= GALLERY ================= */
.gallery-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.gallery-item {
    overflow: hidden;
    border-radius: 25px;
    box-shadow:
        0 10px 35px rgba(0, 0, 0, .08);
}
.gallery-item img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    transition: .5s;
}
.gallery-item:hover img {
    transform: scale(1.08);
}
/* ================= FAQ ================= */
.accordion-item {
    border: none;
    border-radius: 20px !important;
    overflow: hidden;
    margin-bottom: 15px;
    box-shadow:
        0 6px 20px rgba(0, 0, 0, .06);
}
.accordion-button {
    font-weight: 600;
    color: #23408e;
}
/* ================= FOOTER ================= */
.footer-v2 {
    background: #16357a;
    color: white;
    padding: 70px 0;
}
.footer-v2 h5 {
    margin-bottom: 18px;
    font-weight: 700;
}
.footer-v2 a {
    display: block;
    color: #dbe7ff;
    margin-bottom: 10px;
}
.footer-v2 p {
    color: #dbe7ff;
}
/* ================= FLOAT BUTTON ================= */
.floating-register {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background:
        linear-gradient(135deg,
            #ff7b00,
            #ff9a2f);
    color: white;
    padding: 18px 26px;
    border-radius: 50px;
    font-weight: 700;
    box-shadow:
        0 10px 30px rgba(255, 123, 0, .35);
    z-index: 999;
}
/* ================= MOBILE ================= */
@media(max-width:768px) {
    .hero-title {
        font-size: 46px;
    }
    .hero-desc {
        font-size: 18px;
    }
    .hero-images {
        height: 400px;
        margin-top: 50px;
    }
    .img1 {
        width: 180px;
        height: 240px;
    }
    .img2 {
        width: 160px;
        height: 200px;
    }
    .img3 {
        width: 200px;
        height: 140px;
    }
    .section-header h2 {
        font-size: 34px;
    }
    .hero-stats {
        justify-content: center;
    }
    .floating-register {
        bottom: 15px;
        right: 15px;
        padding: 14px 18px;
    }
}
/* ================= COMPETITIONS PAGE ================= */
.competition-hero {
    background:
        linear-gradient(135deg,
            #ffffff,
            #edf5ff);
    padding: 100px 0 70px;
}
.hero-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}
.hero-tag {
    background: #edf3ff;
    color: #0a7cff;
    padding: 10px 18px;
    border-radius: 50px;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 20px;
}
.hero-box h1 {
    font-size: 56px;
    font-weight: 800;
    color: #23408e;
    line-height: 1.2;
    margin-bottom: 20px;
}
.hero-box p {
    font-size: 20px;
    color: #5f6f8d;
    line-height: 1.8;
    max-width: 600px;
}
.hero-box img {
    width: 450px;
    border-radius: 35px;
    object-fit: cover;
    box-shadow:
        0 20px 50px rgba(35, 64, 142, .15);
}
/* ================= FILTER ================= */
.filter-section {
    margin-top: -40px;
    position: relative;
    z-index: 10;
}
.filter-box {
    background: white;
    border-radius: 30px;
    padding: 24px;
    box-shadow:
        0 12px 40px rgba(35, 64, 142, .12);
    display: grid;
    grid-template-columns:
        2fr 1fr 1fr;
    gap: 15px;
}
.form-control,
.form-select {
    height: 58px;
    border-radius: 18px;
    border: 2px solid #edf3ff;
    font-weight: 500;
}
.form-control:focus,
.form-select:focus {
    box-shadow: none;
    border-color: #0a7cff;
}
/* ================= PAGE ================= */
.competition-page {
    padding: 90px 0;
    background: #f5f8fc;
}
.section-title {
    text-align: center;
    margin-bottom: 60px;
}
.section-title h2 {
    font-size: 48px;
    font-weight: 800;
    color: #23408e;
}
.section-title p {
    color: #5f6f8d;
    font-size: 18px;
}
/* ================= CARD ================= */
.competition-card-v2 {
    background: white;
    border-radius: 35px;
    overflow: hidden;
    transition: .4s;
    box-shadow:
        0 12px 35px rgba(35, 64, 142, .08);
    height: 100%;
}
.competition-card-v2:hover {
    transform:
        translateY(-10px);
    box-shadow:
        0 20px 50px rgba(35, 64, 142, .15);
}
.comp-image {
    position: relative;
    overflow: hidden;
}
.comp-image img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    transition: .5s;
}
.competition-card-v2:hover .comp-image img {
    transform: scale(1.08);
}
.comp-status {
    position: absolute;
    top: 18px;
    right: 18px;
    background:
        linear-gradient(135deg,
            #ff7b00,
            #ff9a2f);
    color: white;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
}
.comp-body {
    padding: 28px;
}
.comp-body h3 {
    font-size: 24px;
    font-weight: 700;
    color: #23408e;
    margin-bottom: 15px;
}
.location,
.year {
    color: #5f6f8d;
    margin-bottom: 10px;
    font-weight: 500;
}
.comp-footer {
    margin-top: 25px;
}
.comp-footer button {
    width: 100%;
    border: none;
    background:
        linear-gradient(135deg,
            #23408e,
            #0a7cff);
    color: white;
    padding: 16px;
    border-radius: 18px;
    font-weight: 600;
    transition: .3s;
}
.comp-footer button:hover {
    transform:
        translateY(-3px);
}
/* ================= LOADER ================= */
#loading {
    position: fixed;
    inset: 0;
    background:
        rgba(255, 255, 255, .9);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
/* ================= MOBILE ================= */
@media(max-width:991px) {
    .hero-box {
        flex-direction: column;
        text-align: center;
    }
    .hero-box img {
        width: 100%;
    }
    .hero-box h1 {
        font-size: 42px;
    }
    .filter-box {
        grid-template-columns:
            1fr;
    }
}
@media(max-width:768px) {
    .section-title h2 {
        font-size: 34px;
    }
    .hero-box h1 {
        font-size: 34px;
    }
    .hero-box p {
        font-size: 16px;
    }
}
/* ===========================================
   COMPETITION DETAILS PAGE
=========================================== */
.details-hero {
    background:
        linear-gradient(135deg,
            #ffffff,
            #edf5ff);
    padding: 90px 0;
}
.detail-image {
    width: 100%;
    max-height: 450px;
    object-fit: cover;
    border-radius: 35px;
    box-shadow:
        0 20px 50px rgba(35, 64, 142, .15);
}
.details-hero h1 {
    font-size: 58px;
    font-weight: 800;
    color: #23408e;
    margin: 20px 0;
}
.details-hero p {
    font-size: 18px;
    color: #5f6f8d;
    line-height: 1.8;
}
.detail-tags {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin: 30px 0;
}
.detail-tags span {
    background: white;
    color: #23408e;
    padding: 14px 22px;
    border-radius: 50px;
    font-weight: 600;
    box-shadow:
        0 8px 25px rgba(35, 64, 142, .08);
}
.register-btn {
    border: none;
    background:
        linear-gradient(135deg,
            #ff7b00,
            #ff9a2f);
    color: white;
    padding: 18px 34px;
    border-radius: 18px;
    font-size: 18px;
    font-weight: 700;
    transition: .3s;
}
.register-btn:hover {
    transform:
        translateY(-4px);
    box-shadow:
        0 12px 30px rgba(255, 123, 0, .3);
}
/* ===========================================
   RULES + ITINERARY
=========================================== */
.rules-section {
    background: #f5f8fc;
    padding: 90px 0;
}
.info-card {
    background: white;
    border-radius: 35px;
    padding: 35px;
    height: 100%;
    box-shadow:
        0 12px 35px rgba(35, 64, 142, .08);
    transition: .4s;
}
.info-card:hover {
    transform:
        translateY(-8px);
}
.info-card h3 {
    color: #23408e;
    font-weight: 700;
    margin-bottom: 25px;
}
.download-btn {
    display: inline-block;
    background:
        linear-gradient(135deg,
            #23408e,
            #0a7cff);
    color: white;
    padding: 14px 26px;
    border-radius: 18px;
    font-weight: 600;
    transition: .3s;
}
.download-btn:hover {
    color: white;
    transform:
        translateY(-3px);
}
/* ===========================================
   CATEGORY SECTION
=========================================== */
.category-section {
    padding: 90px 0;
    background: white;
}
.category-card {
    background: white;
    border-radius: 35px;
    overflow: hidden;
    transition: .4s;
    box-shadow:
        0 12px 35px rgba(35, 64, 142, .08);
    height: 100%;
}
.category-card:hover {
    transform:
        translateY(-10px);
    box-shadow:
        0 18px 45px rgba(35, 64, 142, .15);
}
.category-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}
.category-body {
    padding: 28px;
}
.category-body h3 {
    font-size: 24px;
    color: #23408e;
    font-weight: 700;
    margin-bottom: 15px;
}
.category-body p {
    color: #5f6f8d;
    line-height: 1.7;
    min-height: 70px;
}
.category-body button,
.category-body .category-register-link {
    display: block;
    text-align: center;
    text-decoration: none;
    width: 100%;
    border: none;
    background:
        linear-gradient(135deg,
            #ff7b00,
            #ff9a2f);
    color: white;
    padding: 16px;
    border-radius: 18px;
    font-weight: 700;
    transition: .3s;
}
.category-body button:hover,
.category-body .category-register-link:hover {
    transform:
        translateY(-3px);
}
/* ===========================================
   KIT SELECTION PAGE
=========================================== */
.kit-hero {
    background:
        linear-gradient(135deg,
            #ffffff,
            #edf5ff);
    padding: 90px 0;
}
.kit-hero h1 {
    font-size: 58px;
    font-weight: 800;
    color: #23408e;
    margin: 20px 0;
}
.kit-hero p {
    font-size: 18px;
    color: #5f6f8d;
    line-height: 1.8;
}
.kit-hero-image {
    width: 100%;
    max-width: 500px;
    border-radius: 35px;
    object-fit: cover;
    box-shadow:
        0 20px 50px rgba(35, 64, 142, .15);
}
.kit-section {
    padding: 90px 0;
    background: #f5f8fc;
}
/* ===========================================
   KIT CARD
=========================================== */
.kit-card {
    background: white;
    border-radius: 35px;
    overflow: hidden;
    cursor: pointer;
    transition: .4s;
    height: 100%;
    border: 3px solid transparent;
    box-shadow:
        0 12px 35px rgba(35, 64, 142, .08);
}
.kit-card:hover {
    transform:
        translateY(-10px);
    box-shadow:
        0 18px 45px rgba(35, 64, 142, .15);
}
.kit-card.active {
    border-color: #ff7b00;
    transform:
        translateY(-10px);
}
.kit-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}
.kit-body {
    padding: 28px;
}
.kit-body h3 {
    font-size: 24px;
    font-weight: 700;
    color: #23408e;
    margin-bottom: 12px;
}
.kit-body p {
    color: #5f6f8d;
    min-height: 60px;
    line-height: 1.7;
}
.kit-body h4 {
    color: #ff7b00;
    font-size: 28px;
    font-weight: 800;
}
/* ===========================================
   ACTION BAR
=========================================== */
.kit-action-bar {
    position: sticky;
    bottom: 0;
    background: white;
    padding: 22px 40px;
    box-shadow:
        0 -8px 30px rgba(0, 0, 0, .08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 99;
}
#selectedBox {
    font-size: 18px;
    font-weight: 600;
    color: #23408e;
}
.action-buttons {
    display: flex;
    gap: 15px;
}
.skip-btn {
    border: none;
    background: #eef3ff;
    color: #23408e;
    padding: 16px 30px;
    border-radius: 18px;
    font-weight: 700;
}
.continue-btn {
    border: none;
    background:
        linear-gradient(135deg,
            #23408e,
            #0a7cff);
    color: white;
    padding: 16px 30px;
    border-radius: 18px;
    font-weight: 700;
}
/* ===========================================
   CUSTOM MODAL
=========================================== */
.kit-modal {
    position: fixed;
    inset: 0;
    background:
        rgba(0, 0, 0, .45);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
.kit-modal-box {
    width: 90%;
    max-width: 450px;
    background: white;
    border-radius: 35px;
    padding: 40px;
    text-align: center;
    animation:
        popup .3s ease;
}
.kit-modal-box h3 {
    color: #23408e;
    font-weight: 700;
    margin-bottom: 15px;
}
.kit-modal-box p {
    color: #5f6f8d;
    line-height: 1.8;
}
.modal-actions {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 15px;
}
.cancel-btn {
    border: none;
    background: #eef3ff;
    color: #23408e;
    padding: 14px 26px;
    border-radius: 16px;
    font-weight: 700;
}
.confirm-btn {
    border: none;
    background:
        linear-gradient(135deg,
            #ff7b00,
            #ff9a2f);
    color: white;
    padding: 14px 26px;
    border-radius: 16px;
    font-weight: 700;
}
@keyframes popup {
    from {
        transform:
            scale(.8);
        opacity: 0;
    }
    to {
        transform:
            scale(1);
        opacity: 1;
    }
}
/* ===========================================
   MOBILE
=========================================== */
@media(max-width:768px) {
    .details-hero h1,
    .kit-hero h1 {
        font-size: 38px;
    }
    .detail-tags {
        flex-direction: column;
    }
    .kit-action-bar {
        flex-direction: column;
        gap: 15px;
        padding: 20px;
    }
    .action-buttons {
        width: 100%;
    }
    .skip-btn,
    .continue-btn {
        width: 100%;
    }
}
/* ==========================================
   REGISTER PAGE
========================================== */
.register-hero{
    background:
    linear-gradient(
        135deg,
        #ffffff,
        #edf5ff
    );
    padding:90px 0 70px;
}
.register-hero h1{
    font-size:58px;
    font-weight:800;
    color:#23408e;
    margin-top:20px;
}
.register-hero p{
    font-size:18px;
    color:#5f6f8d;
    margin-top:15px;
}
.hero-tag{
    background:#edf3ff;
    color:#0a7cff;
    padding:12px 22px;
    border-radius:50px;
    font-weight:600;
    display:inline-block;
}
/* ==========================================
   FORM SECTION
========================================== */
.register-section{
    background:#f5f8fc;
    padding:80px 0;
}
.register-card{
    background:white;
    border-radius:35px;
    padding:45px;
    box-shadow:
    0 12px 40px
    rgba(35,64,142,.08);
}
/* ==========================================
   TITLES
========================================== */
.form-title{
    font-size:28px;
    font-weight:700;
    color:#23408e;
    margin-bottom:25px;
    position:relative;
}
.form-title::after{
    content:"";
    width:70px;
    height:5px;
    border-radius:50px;
    background:
    linear-gradient(
        135deg,
        #ff7b00,
        #ff9a2f
    );
    position:absolute;
    left:0;
    bottom:-10px;
}
/* ==========================================
   LABELS
========================================== */
label{
    font-weight:600;
    color:#23408e;
    margin-bottom:10px;
    margin-top:18px;
}
/* ==========================================
   INPUTS
========================================== */
.form-control{
    height:58px;
    border-radius:18px;
    border:2px solid #edf3ff;
    padding:0 18px;
    font-size:16px;
    transition:.3s;
}
textarea.form-control{
    height:auto;
    padding:18px;
}
.form-control:focus{
    box-shadow:none;
    border-color:#0a7cff;
}
/* ==========================================
   STUDENT HEADER
========================================== */
.student-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:50px;
    margin-bottom:25px;
}
.student-header h3{
    color:#23408e;
    font-weight:700;
    margin:0;
}
/* ==========================================
   STUDENT CARD
========================================== */
.student-card{
    background:#f9fbff;
    border:2px solid #edf3ff;
    border-radius:30px;
    padding:30px;
    margin-bottom:25px;
    position:relative;
    transition:.3s;
}
.student-card:hover{
    border-color:#0a7cff;
    transform:
    translateY(-3px);
}
/* ==========================================
   BUTTONS
========================================== */
.add-btn{
    border:none;
    background:
    linear-gradient(
        135deg,
        #23408e,
        #0a7cff
    );
    color:white;
    padding:14px 26px;
    border-radius:18px;
    font-weight:700;
    transition:.3s;
}
.add-btn:hover{
    transform:
    translateY(-3px);
    box-shadow:
    0 12px 25px
    rgba(10,124,255,.25);
}
.remove-btn{
    width:100%;
    border:none;
    background:#ffeaea;
    color:#ff4a4a;
    padding:14px;
    border-radius:16px;
    font-weight:700;
    transition:.3s;
}
.remove-btn:hover{
    background:#ff4a4a;
    color:white;
}
/* ==========================================
   REGISTER BUTTON
========================================== */
.register-btn{
    border:none;
    background:
    linear-gradient(
        135deg,
        #ff7b00,
        #ff9a2f
    );
    color:white;
    height:65px;
    border-radius:22px;
    font-size:20px;
    font-weight:700;
    transition:.35s;
}
.register-btn:hover{
    transform:
    translateY(-4px);
    box-shadow:
    0 14px 35px
    rgba(255,123,0,.28);
}
/* ==========================================
   MOBILE
========================================== */
@media(max-width:768px){
    .register-hero h1{
        font-size:40px;
    }
    .register-card{
        padding:25px;
    }
    .student-header{
        flex-direction:column;
        align-items:flex-start;
        gap:15px;
    }
    .form-title{
        font-size:24px;
    }
    .register-btn{
        font-size:18px;
    }
}
/* ==========================================
   PAYMENT PAGE
========================================== */
.payment-hero{
    background:
    linear-gradient(
        135deg,
        #ffffff,
        #edf5ff
    );
    padding:90px 0 70px;
}
.payment-hero h1{
    font-size:58px;
    font-weight:800;
    color:#23408e;
    margin-top:20px;
}
.payment-hero p{
    font-size:18px;
    color:#5f6f8d;
    margin-top:15px;
}
/* ==========================================
   PAYMENT SECTION
========================================== */
.payment-section{
    background:#f5f8fc;
    padding:80px 0;
}
.payment-card{
    background:white;
    border-radius:40px;
    padding:45px;
    box-shadow:
    0 12px 40px
    rgba(35,64,142,.08);
}
/* ==========================================
   QR
========================================== */
.qr-image{
    width:100%;
    max-width:320px;
    border-radius:30px;
    background:white;
    padding:20px;
    border:2px solid #edf3ff;
    box-shadow:
    0 12px 30px
    rgba(35,64,142,.08);
}
.upi-id{
    margin-top:25px;
    font-size:24px;
    font-weight:700;
    color:#23408e;
}
/* ==========================================
   PAYMENT BOX
========================================== */
.payment-box{
    padding:20px 30px;
}
.payment-box h2{
    font-size:38px;
    font-weight:800;
    color:#23408e;
    margin-bottom:12px;
}
.payment-box p{
    color:#5f6f8d;
    font-size:17px;
    margin-bottom:35px;
}
/* ==========================================
   LABELS
========================================== */
.payment-box label{
    font-weight:600;
    color:#23408e;
    margin-bottom:10px;
}
/* ==========================================
   INPUT
========================================== */
.payment-box .form-control{
    height:60px;
    border-radius:18px;
    border:2px solid #edf3ff;
    padding:0 18px;
    transition:.3s;
}
.payment-box .form-control:focus{
    box-shadow:none;
    border-color:#0a7cff;
}
/* ==========================================
   FILE INPUT
========================================== */
input[type="file"]{
    padding:15px !important;
    height:auto !important;
}
/* ==========================================
   PREVIEW IMAGE
========================================== */
.payment-preview{
    width:100%;
    max-height:280px;
    object-fit:contain;
    border-radius:20px;
    margin-bottom:25px;
    display:block;
    border:2px dashed #dbe7ff;
    padding:10px;
}
/* ==========================================
   BUTTON
========================================== */
.register-btn{
    border:none;
    background:
    linear-gradient(
        135deg,
        #ff7b00,
        #ff9a2f
    );
    color:white;
    height:65px;
    border-radius:22px;
    font-size:20px;
    font-weight:700;
    transition:.35s;
}
.register-btn:hover{
    transform:
    translateY(-4px);
    box-shadow:
    0 14px 35px
    rgba(255,123,0,.28);
}
/* ==========================================
   SUCCESS MODAL
========================================== */
.success-modal{
    position:fixed;
    inset:0;
    background:
    rgba(0,0,0,.55);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:9999;
}
.success-box{
    background:white;
    width:90%;
    max-width:500px;
    border-radius:35px;
    padding:45px;
    text-align:center;
    animation:
    popup .35s ease;
}
.success-icon{
    width:90px;
    height:90px;
    background:
    linear-gradient(
        135deg,
        #19c37d,
        #12a567
    );
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:42px;
    color:white;
    margin:auto auto 25px;
}
.success-box h2{
    font-size:34px;
    font-weight:800;
    color:#23408e;
    margin-bottom:15px;
}
.success-box p{
    color:#5f6f8d;
    line-height:1.8;
    margin-bottom:30px;
}
.success-box button{
    border:none;
    background:
    linear-gradient(
        135deg,
        #23408e,
        #0a7cff
    );
    color:white;
    padding:16px 35px;
    border-radius:18px;
    font-weight:700;
    transition:.3s;
}
.success-box button:hover{
    transform:
    translateY(-4px);
}
/* ==========================================
   POPUP ANIMATION
========================================== */
@keyframes popup{
    from{
        opacity:0;
        transform:
        scale(.8);
    }
    to{
        opacity:1;
        transform:
        scale(1);
    }
}
/* ==========================================
   MOBILE
========================================== */
@media(max-width:768px){
    .payment-hero h1{
        font-size:40px;
    }
    .payment-card{
        padding:25px;
    }
    .payment-box{
        padding:0;
    }
    .payment-box h2{
        font-size:30px;
    }
    .upi-id{
        font-size:20px;
    }
    .register-btn{
        font-size:18px;
    }
}
/* ==========================================
   DASHBOARD HERO
========================================== */
.dashboard-hero{
    background:
    linear-gradient(
        135deg,
        #ffffff,
        #edf5ff
    );
    padding:90px 0 70px;
}
.dashboard-banner{
    background:white;
    border-radius:40px;
    padding:50px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-shadow:
    0 15px 45px
    rgba(35,64,142,.08);
}
.dashboard-banner h1{
    font-size:54px;
    font-weight:800;
    color:#23408e;
    margin-top:18px;
}
.dashboard-banner p{
    font-size:18px;
    color:#5f6f8d;
    margin-top:12px;
}
/* ==========================================
   PROGRESS RING
========================================== */
.progress-circle-box{
    display:flex;
    justify-content:center;
    align-items:center;
}
.progress-ring{
    position:relative;
    width:160px;
    height:160px;
}
.progress-ring svg{
    transform:
    rotate(-90deg);
}
.circle-bg{
    fill:none;
    stroke:#edf3ff;
    stroke-width:12;
}
.circle-progress{
    fill:none;
    stroke:url(#gradient);
    stroke:#ff7b00;
    stroke-width:12;
    stroke-linecap:round;
    transition:.8s ease;
    stroke-dashoffset:408;
}
.progress-text{
    position:absolute;
    top:50%;
    left:50%;
    transform:
    translate(-50%,-50%);
    font-size:28px;
    font-weight:800;
    color:#23408e;
}
/* ==========================================
   DASHBOARD SECTION
========================================== */
.dashboard-section{
    background:#f5f8fc;
    padding:80px 0;
}
/* ==========================================
   DASHBOARD CARD
========================================== */
.dashboard-card{
    background:white;
    border-radius:35px;
    padding:35px;
    box-shadow:
    0 12px 35px
    rgba(35,64,142,.08);
    transition:.3s;
}
.dashboard-card:hover{
    transform:
    translateY(-4px);
}
.dashboard-card h3{
    font-size:28px;
    font-weight:700;
    color:#23408e;
    margin-bottom:25px;
    position:relative;
}
.dashboard-card h3::after{
    content:"";
    width:70px;
    height:5px;
    border-radius:50px;
    background:
    linear-gradient(
        135deg,
        #ff7b00,
        #ff9a2f
    );
    position:absolute;
    left:0;
    bottom:-10px;
}
/* ==========================================
   INFO GRID
========================================== */
.info-grid{
    display:grid;
    grid-template-columns:
    repeat(2,1fr);
    gap:25px;
}
.info-grid label{
    font-size:14px;
    color:#7b8ba7;
    font-weight:600;
}
.info-grid h5{
    font-size:18px;
    color:#23408e;
    font-weight:700;
    margin-top:8px;
}
/* ==========================================
   STUDENT BOX
========================================== */
.student-box{
    background:#f8fbff;
    border:2px solid #edf3ff;
    border-radius:22px;
    padding:22px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px;
    transition:.3s;
}
.student-box:hover{
    border-color:#0a7cff;
    transform:
    translateY(-3px);
}
.student-box h5{
    color:#23408e;
    font-weight:700;
    margin-bottom:6px;
}
.student-box small{
    color:#7b8ba7;
}
/* ==========================================
   STATUS BOX
========================================== */
.status-box{
    background:#f8fbff;
    border-radius:20px;
    padding:20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px;
    border:2px solid #edf3ff;
}
.status-box span{
    background:
    linear-gradient(
        135deg,
        #23408e,
        #0a7cff
    );
    color:white;
    padding:10px 18px;
    border-radius:50px;
    font-size:14px;
    font-weight:700;
}
/* ==========================================
   RESULT BOX
========================================== */
#resultBox{
    background:
    linear-gradient(
        135deg,
        #fff7ed,
        #fff2e2
    );
    border-radius:22px;
    padding:25px;
    text-align:center;
    font-size:20px;
    font-weight:700;
    color:#ff7b00;
}
/* ==========================================
   CERTIFICATE BUTTON
========================================== */
.download-btn{
    border:none;
    background:
    linear-gradient(
        135deg,
        #ff7b00,
        #ff9a2f
    );
    color:white;
    height:60px;
    border-radius:18px;
    font-weight:700;
    transition:.3s;
}
.download-btn:hover{
    transform:
    translateY(-4px);
    box-shadow:
    0 12px 30px
    rgba(255,123,0,.25);
}
.download-btn:disabled{
    background:#d6dce8;
    cursor:not-allowed;
    box-shadow:none;
}
/* ==========================================
   HOME BUTTON
========================================== */
.logout-btn{
    border:none;
    background:
    linear-gradient(
        135deg,
        #23408e,
        #0a7cff
    );
    color:white;
    padding:14px 28px;
    border-radius:18px;
    font-weight:700;
    transition:.3s;
}
.logout-btn:hover{
    transform:
    translateY(-3px);
}
/* ==========================================
   MOBILE
========================================== */
@media(max-width:991px){
    .dashboard-banner{
        flex-direction:column;
        text-align:center;
        gap:35px;
    }
    .dashboard-banner h1{
        font-size:42px;
    }
    .info-grid{
        grid-template-columns:
        1fr;
    }
}
@media(max-width:768px){
    .dashboard-card{
        padding:25px;
    }
    .dashboard-banner{
        padding:30px;
    }
    .dashboard-banner h1{
        font-size:34px;
    }
    .student-box{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }
}
.icons-comp{
    width:100%;
    
}

.competition-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 32px;
}

.competition-filters select {
    min-width: 180px;
    padding: 12px 16px;
    border: 1px solid #dfe8f6;
    border-radius: 12px;
    background: #fff;
    color: #23408e;
}

.competition-group {
    margin-bottom: 42px;
}

.competition-group-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 22px;
}

.competition-group-heading h3 {
    margin: 0;
    color: #23408e;
    font-size: 23px;
    font-weight: 700;
}

.competition-group-heading > span {
    color: #7b8ba7;
    font-size: 13px;
}

.competition-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid #edf3ff;
    border-radius: 22px;
    box-shadow: 0 10px 30px rgba(35, 64, 142, 0.08);
    transition: transform 0.25s, box-shadow 0.25s;
}

.competition-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(35, 64, 142, 0.13);
}

.competition-card .comp-image {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
    background: #edf5ff;
}

.comp-content {
    padding: 22px;
}

.competition-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.year-label,
.deadline-label {
    display: inline-flex;
    align-items: center;
    padding: 7px 11px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 700;
}

.year-label {
    background: #edf5ff;
    color: #23408e;
}

.deadline-green {
    background: #e7f8ed;
    color: #168448;
}

.deadline-yellow {
    background: #fff4d6;
    color: #956300;
}

.deadline-red {
    background: #ffe8e8;
    color: #c62828;
}

.comp-content h4 {
    margin: 0 0 14px;
    color: #23408e;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
}

.comp-content p {
    margin: 10px 0;
    color: #6e7f9d;
    font-size: 13px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.comp-content p strong {
    color: #23408e;
}

.comp-content .primary-btn {
    margin-top: 12px;
    padding: 12px 16px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #23408e, #0a7cff);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.empty-state {
    padding: 24px;
    border: 1px dashed #d8e4f5;
    border-radius: 16px;
    color: #7b8ba7;
    text-align: center;
}

@media (max-width: 576px) {
    .competition-filters,
    .competition-filters select {
        width: 100%;
    }

    .competition-group-heading h3 {
        font-size: 19px;
    }

    .comp-content {
        padding: 18px;
    }
}

.winner-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 24px 0 30px;
}

.winner-filters select {
    min-width: 210px;
    padding: 12px 15px;
    border: 1px solid #dfe8f6;
    border-radius: 12px;
    background: #fff;
    color: #23408e;
}

.winner-card {
    height: 100%;
    overflow: hidden;
    background: #fff;
    border: 1px solid #edf3ff;
    border-radius: 22px;
    box-shadow: 0 10px 30px rgba(35, 64, 142, 0.08);
    transition: transform 0.25s, box-shadow 0.25s;
}

.winner-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 36px rgba(35, 64, 142, 0.14);
}

.winner-photo-link {
    display: block;
    position: relative;
    overflow: hidden;
    background: #edf5ff;
}

.winner-photo {
    display: block;
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform 0.3s;
}

.winner-card:hover .winner-photo {
    transform: scale(1.035);
}

.winner-award {
    position: absolute;
    left: 12px;
    bottom: 12px;
    padding: 8px 12px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.award-gold {
    background: #fff0b8;
    color: #805600;
}

.award-silver {
    background: #edf0f5;
    color: #49566b;
}

.award-bronze {
    background: #f7dfd0;
    color: #8c4828;
}

.award-other {
    background: #edf5ff;
    color: #23408e;
}

.winner-card-content {
    padding: 20px;
}

.winner-card-content h3 {
    margin: 0 0 8px;
    color: #23408e;
    font-size: 19px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.winner-competition {
    min-height: 40px;
    margin: 0 0 12px;
    color: #6e7f9d;
    font-size: 13px;
    line-height: 1.5;
}

.winner-year {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 20px;
    background: #edf5ff;
    color: #23408e;
    font-size: 11px;
    font-weight: 700;
}

.winner-view-btn {
    display: block;
    margin-top: 18px;
    padding: 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, #23408e, #0a7cff);
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}

.winner-view-btn:hover {
    color: #fff;
    box-shadow: 0 6px 16px rgba(35, 64, 142, 0.2);
}

.winner-view-btn.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.winner-empty {
    padding: 25px;
    border: 1px dashed #dfe8f6;
    border-radius: 16px;
    color: #7b8ba7;
    text-align: center;
}

@media (max-width: 575px) {
    .winner-filters,
    .winner-filters select {
        width: 100%;
    }

    .winner-photo {
        height: 230px;
    }
}

/* FAQ Section */
.faq-section {
    width: 100%;
    padding: 50px 15px;
    background: #f4f7fc;
}

/* Override Bootstrap container width only in FAQ */
.faq-section .container {
    width: 90%;
    max-width: 90%;
    padding-left: 0;
    padding-right: 0;
}

/* Heading */
.faq-section .section-header {
    text-align: center;
    margin-bottom: 25px;
}

.faq-section .section-header h2 {
    color: #23408e;
    font-weight: 700;
    margin-bottom: 10px;
}

.faq-section .section-header p {
    color: #687894;
}

/* Search field */
.faq-search {
    width: 90%;
    margin-bottom: 24px;
}

.faq-search input {
    width: 90%;
    padding: 14px 18px;
    border: 1px solid #dce5f4;
    border-radius: 12px;
    background: #fff;
}

/* FAQ accordion */
#faqAccordion {
    width: 90%;
}

#faqAccordion .accordion-item {
    margin-bottom: 12px;
    border: 1px solid #e5ebf5;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(35, 64, 142, 0.05);
}

#faqAccordion .accordion-button {
    padding: 20px 24px;
    color: #23408e;
    font-weight: 600;
    background: #fff;
    box-shadow: none;
}

#faqAccordion .accordion-button:not(.collapsed) {
    color: #23408e;
    background: #edf3ff;
}

#faqAccordion .accordion-body {
    padding: 18px 24px;
    color: #687894;
    line-height: 1.8;
}

/* Sample data notice */
.faq-demo-notice {
    width: 90%;
    margin-top: 15px;
    padding: 14px;
    text-align: center;
    border-radius: 10px;
}

#faq .faq-content {
    width: 90%;
    max-width: none;
    margin-left: auto !important;
    margin-right: auto !important;
}

#faq .faq-search,
#faq #faqAccordion {
    width: 100%;
}

#faq .faq-demo-notice {
    width: 100%;
    margin: 16px auto 0;
    box-sizing: border-box;
}

.comp-status.status-open {
    color: #166534;
    background: #dcfce7;
}

.comp-status.status-closing {
    color: #854d0e;
    background: #fef3c7;
}

.comp-status.status-closed {
    color: #991b1b;
    background: #fee2e2;
}

.comp-status.status-upcoming {
    color: #1d4ed8;
    background: #dbeafe;
}

.comp-status.status-not-announced {
    color: #475569;
    background: #f1f5f9;
}

.comp-status.status-completed {
    color: #475569;
    background: #e2e8f0;
}

.registration-deadline {
    padding: 10px 12px;
    margin-top: 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
}

.deadline-green {
    color: #166534;
    background: #dcfce7;
}

.deadline-yellow {
    color: #854d0e;
    background: #fef3c7;
}

.deadline-red {
    color: #991b1b;
    background: #fee2e2;
}

.deadline-neutral {
    color: #475569;
    background: #f1f5f9;
}

.no-competitions {
    padding: 35px 20px;
    text-align: center;
    color: #687894;
    background: #fff;
    border-radius: 14px;
}
.payment-summary{
display:block;

}
    .results-container {
            width: 90%;
            margin: 0 auto;
        }
        .results-hero {
            padding: 55px 0 40px;
            background: linear-gradient(135deg, #fff, #eaf1ff);
        }
        .back-link {
            display: inline-block;
            margin-bottom: 22px;
            color: var(--navy);
            text-decoration: none;
            font-weight: 600;
        }
        .results-tag {
            display: inline-block;
            padding: 8px 15px;
            margin-bottom: 14px;
            color: var(--navy);
            background: #e3ecff;
            border-radius: 30px;
            font-size: 13px;
            font-weight: 600;
        }
        .results-hero h1 {
            color: var(--navy);
            font-size: clamp(28px, 4vw, 44px);
            font-weight: 800;
            margin-bottom: 12px;
        }
        .results-hero p {
            color: var(--muted);
            margin-bottom: 10px;
        }
        .hero-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 10px 22px;
            margin-top: 20px;
            color: var(--muted);
            font-size: 14px;
        }
        .results-main {
            padding: 40px 0 70px;
            min-height: 400px;
        }
        .results-heading {
            text-align: center;
            margin-bottom: 30px;
        }
        .results-heading h2 {
            color: var(--navy);
            font-weight: 800;
        }
        .results-heading p {
            color: var(--muted);
        }
        .results-filters {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr;
            gap: 14px;
            padding: 20px;
            margin-bottom: 30px;
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 16px;
            box-shadow: 0 5px 20px rgba(35, 64, 142, .05);
        }
        .results-filters .form-control,
        .results-filters .form-select {
            min-height: 48px;
            border-color: var(--border);
            border-radius: 10px;
            font-family: inherit;
        }
        .category-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 30px;
        }
        .category-btn {
            padding: 10px 18px;
            color: var(--navy);
            background: #fff;
            border: 1px solid #dce5f4;
            border-radius: 30px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: .2s;
        }
        .category-btn:hover,
        .category-btn.active {
            color: #fff;
            background: var(--navy);
            border-color: var(--navy);
        }
        .result-card {
            height: 100%;
            overflow: hidden;
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 18px;
            box-shadow: 0 6px 22px rgba(35, 64, 142, .06);
            transition: transform .2s, box-shadow .2s;
        }
        .result-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 28px rgba(35, 64, 142, .11);
        }
        .winner-photo {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 240px;
            overflow: hidden;
            background: #eaf1ff;
        }
        .winner-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .photo-placeholder {
            color: var(--muted);
            font-size: 13px;
            text-align: center;
            padding: 20px;
        }
        .place-badge {
            position: absolute;
            top: 14px;
            left: 14px;
            padding: 8px 13px;
            background: #fff;
            color: var(--navy);
            border-radius: 30px;
            font-size: 12px;
            font-weight: 700;
            box-shadow: 0 3px 10px #00000012;
        }
        .result-body {
            padding: 22px;
        }
        .result-category {
            display: inline-block;
            margin-bottom: 12px;
            padding: 6px 10px;
            border-radius: 7px;
            color: var(--navy);
            background: #edf3ff;
            font-size: 11px;
            font-weight: 600;
        }
        .result-body h3 {
            color: var(--navy);
            font-size: 19px;
            font-weight: 700;
            line-height: 1.5;
            overflow-wrap: anywhere;
        }
        .result-body p {
            margin-bottom: 9px;
            color: var(--muted);
            font-size: 13px;
        }
        .award-text {
            margin-top: 12px;
            color: #a16207;
            font-size: 14px;
            font-weight: 700;
        }
        .result-empty {
            padding: 45px 20px;
            text-align: center;
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 16px;
        }
        .result-empty h3 {
            color: var(--navy);
            font-size: 21px;
            font-weight: 700;
        }
        .result-empty p {
            color: var(--muted);
        }
        .results-footer {
            padding: 25px 0;
            text-align: center;
            background: #fff;
            border-top: 1px solid var(--border);
            color: var(--muted);
            font-size: 13px;
        }
        #resultsLoader {
            padding: 55px 15px;
            text-align: center;
        }
        @media (max-width: 768px) {
            .results-container {
                width: 92%;
            }
            .results-filters {
                grid-template-columns: 1fr;
                padding: 15px;
            }
            .winner-photo {
                height: 220px;
            }
        }
         .kit-hero {
            padding: 70px 0;
            background: linear-gradient(135deg,
                    #ffffff 0%,
                    #eef5ff 100%);
        }
        .hero-tag {
            display: inline-block;
            background: #fff3e8;
            color: #f58220;
            padding: 8px 18px;
            border-radius: 30px;
            font-weight: 600;
            margin-bottom: 15px;
        }
        .kit-hero h1 {
            font-size: 42px;
            font-weight: 700;
            color: #111827;
        }
        .kit-hero p {
            color: #667085;
            font-size: 17px;
        }
        .kit-hero-image {
            max-width: 350px;
            max-height: 280px;
            object-fit: contain;
        }
        /* ================= SECTION ================= */
        .kit-section {
            padding: 60px 0 160px;
        }
        .section-title {
            text-align: center;
            margin-bottom: 40px;
        }
        .section-title h2 {
            font-weight: 700;
            color: #111827;
        }
        .section-title p {
            color: #667085;
        }
        /* ================= KIT CARD ================= */
        .kit-card {
            background: #ffffff;
            border-radius: 18px;
            padding: 20px;
            height: 100%;
            cursor: pointer;
            border: 2px solid transparent;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
            transition: all 0.25s ease;
        }
        .kit-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.10);
        }
        .kit-card.active {
            border-color: #f58220;
            box-shadow:
                0 0 0 4px rgba(245, 130, 32, 0.12);
        }
        .kit-card img {
            width: 100%;
            height: 210px;
            object-fit: contain;
            margin-bottom: 15px;
        }
        .kit-body h3 {
            font-size: 21px;
            font-weight: 600;
            color: #111827;
        }
        .kit-body p {
            color: #667085;
            min-height: 45px;
        }
        .kit-price {
            color: #f58220;
            font-size: 24px;
            font-weight: 700;
        }
        /* ================= SUMMARY ================= */
        .payment-summary {
            background: #ffffff;
            border-radius: 18px;
            padding: 25px;
            margin-top: 40px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
            border: 1px solid #e5e7eb;
        }
        .payment-summary h3 {
            font-weight: 700;
            margin-bottom: 20px;
        }
        .summary-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid #eeeeee;
        }
        .summary-row:last-child {
            border-bottom: none;
        }
        .summary-label {
            color: #667085;
        }
        .summary-value {
            font-weight: 600;
            color: #111827;
        }
        .summary-total {
            font-size: 24px;
            color: #f58220;
            font-weight: 700;
        }
        /* ================= ACTION BAR ================= */
        .kit-action-bar {
            position: sticky;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.97);
            backdrop-filter: blur(10px);
            border-top: 1px solid #e5e7eb;
            padding: 15px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 1000;
        }
        #selectedBox {
            font-size: 15px;
            color: #475467;
        }
        .action-buttons {
            display: flex;
            gap: 12px;
        }
        .skip-btn,
        .continue-btn {
            border: none;
            padding: 12px 25px;
            border-radius: 10px;
            font-weight: 600;
            cursor: pointer;
        }
        .skip-btn {
            background: #f2f4f7;
            color: #344054;
        }
        .continue-btn {
            background: #f58220;
            color: #ffffff;
        }
        .continue-btn:hover {
            background: #dc6f0b;
        }
        /* ================= MODAL ================= */
        .kit-modal {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.55);
            align-items: center;
            justify-content: center;
            z-index: 2000;
        }
        .kit-modal-box {
            background: #ffffff;
            padding: 35px;
            border-radius: 18px;
            width: min(450px, 90%);
            text-align: center;
        }
        .kit-modal-box h3 {
            font-weight: 700;
        }
        .modal-actions {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin-top: 25px;
        }
        .cancel-btn,
        .confirm-btn {
            border: none;
            padding: 11px 20px;
            border-radius: 9px;
            font-weight: 600;
        }
        .cancel-btn {
            background: #f2f4f7;
        }
        .confirm-btn {
            background: #f58220;
            color: white;
        }
        /* ================= MOBILE ================= */
        @media(max-width: 768px) {
            .kit-hero h1 {
                font-size: 32px;
            }
            .kit-action-bar {
                padding: 12px 15px;
            }
            #selectedBox {
                font-size: 13px;
            }
            .skip-btn,
            .continue-btn {
                padding: 10px 14px;
            }
        }

          .payment-hero {
            padding: 65px 0;
            background:
                linear-gradient(135deg,
                    #ffffff,
                    #eef5ff);
        }
        .hero-tag {
            display: inline-block;
            background: #fff3e8;
            color: #f58220;
            padding: 8px 18px;
            border-radius: 30px;
            font-weight: 600;
            margin-bottom: 15px;
        }
        .payment-hero h1 {
            font-size: 42px;
            font-weight: 700;
            color: #111827;
        }
        .payment-hero p {
            color: #667085;
        }
        /* ================= SECTION ================= */
        .payment-section {
            padding: 55px 0 80px;
        }
        /* ================= CARD ================= */
        .payment-card {
            background: #ffffff;
            border-radius: 22px;
            padding: 40px;
            box-shadow:
                0 10px 40px rgba(0, 0, 0, 0.07);
        }
        /* ================= SUMMARY ================= */
        .summary-box {
            background: #f8fafc;
            border: 1px solid #e4e7ec;
            border-radius: 18px;
            padding: 25px;
            margin-bottom: 25px;
        }
        .summary-box h3 {
            font-size: 21px;
            font-weight: 700;
            margin-bottom: 20px;
        }
        .summary-row {
            display: flex;
            justify-content:
                space-between;
            padding: 12px 0;
            border-bottom:
                1px solid #eaecf0;
        }
        .summary-row:last-child {
            border-bottom: none;
        }
        .summary-label {
            color: #667085;
        }
        .summary-value {
            font-weight: 600;
            color: #101828;
        }
        .total-row {
            margin-top: 8px;
            padding-top: 18px;
            border-top:
                2px solid #d0d5dd;
        }
        .total-value {
            font-size: 28px;
            font-weight: 800;
            color: #f58220;
        }
        /* ================= PAY BUTTON ================= */
        .pay-button {
            width: 100%;
            border: none;
            background: #f58220;
            color: #ffffff;
            padding: 15px;
            border-radius: 11px;
            font-size: 17px;
            font-weight: 700;
            transition: 0.2s;
        }
        .pay-button:hover {
            background: #dc6f0b;
        }
        .pay-button:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
        /* ================= SECURITY ================= */
        .secure-box {
            text-align: center;
            margin-top: 18px;
            color: #667085;
            font-size: 13px;
        }
        /* ================= REGISTRATION ================= */
        .registration-info {
            background: #eef5ff;
            border-radius: 14px;
            padding: 18px;
            margin-bottom: 25px;
        }
        .registration-info strong {
            color: #111827;
        }
        /* ================= LOADING ================= */
        .loading {
            text-align: center;
            padding: 40px;
        }
        .spinner {
            width: 42px;
            height: 42px;
            border: 4px solid #eee;
            border-top-color: #f58220;
            border-radius: 50%;
            animation:
                spin 0.8s linear infinite;
            margin: 0 auto 15px;
        }
        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }
        /* ================= SUCCESS ================= */
        .success-modal {
            display: none;
            position: fixed;
            inset: 0;
            background:
                rgba(0, 0, 0, 0.55);
            align-items: center;
            justify-content: center;
            z-index: 5000;
        }
        .success-box {
            background: #ffffff;
            width: min(500px, 90%);
            padding: 40px;
            border-radius: 20px;
            text-align: center;
        }
        .success-icon {
            font-size: 55px;
            margin-bottom: 15px;
        }
        .success-box h2 {
            font-weight: 700;
        }
        .success-box button {
            border: none;
            background: #f58220;
            color: white;
            padding: 12px 25px;
            border-radius: 10px;
            font-weight: 600;
        }
        /* ================= ERROR ================= */
        .error-box {
            display: none;
            background: #fef3f2;
            color: #b42318;
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 20px;
        }
        @media(max-width:768px) {
            .payment-card {
                padding: 22px;
            }
            .payment-hero h1 {
                font-size: 32px;
            }
        }
          .register-hero {
            padding: 60px 0;
            background: linear-gradient(135deg,
                    #ffffff,
                    #eef5ff);
        }

        .hero-tag {
            display: inline-block;
            background: #fff3e8;
            color: #f58220;
            padding: 8px 18px;
            border-radius: 30px;
            font-weight: 600;
            margin-bottom: 15px;
        }

        .register-hero h1 {
            font-size: 42px;
            font-weight: 700;
            color: #111827;
        }

        .register-hero p {
            color: #667085;
        }

        .register-section {
            padding: 50px 0 160px;
        }

        .register-card {
            background: #ffffff;
            padding: 40px;
            border-radius: 20px;
            box-shadow: 0 10px 35px rgba(0, 0, 0, 0.07);
        }

        .form-title {
            font-size: 22px;
            font-weight: 700;
            color: #111827;
            margin-bottom: 20px;
        }

        label {
            font-weight: 500;
            margin-bottom: 7px;
            color: #344054;
        }

        .form-control {
            border-radius: 10px;
            padding: 12px 14px;
            border: 1px solid #d0d5dd;
        }

        .form-control:focus {
            border-color: #f58220;
            box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.12);
        }

        .student-card {
            background: #f8fafc;
            border: 1px solid #e4e7ec;
            border-radius: 15px;
            padding: 25px;
            margin-top: 20px;
        }

        .student-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 40px;
        }

        .student-header h3 {
            font-size: 22px;
            font-weight: 700;
        }

        .add-btn {
            border: none;
            background: #f58220;
            color: #ffffff;
            padding: 10px 18px;
            border-radius: 9px;
            font-weight: 600;
        }

        .remove-btn {
            border: none;
            background: #fee4e2;
            color: #b42318;
            padding: 10px 18px;
            border-radius: 9px;
            font-weight: 600;
        }

        .register-btn {
            border: none;
            background: #f58220;
            color: white;
            padding: 15px;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 700;
        }

        .register-btn:hover {
            background: #dc6f0b;
        }

        /* ================= PAYMENT SUMMARY ================= */
        .payment-summary {
            margin-top: 40px;
            padding: 25px;
            background: #f8fafc;
            border: 1px solid #e4e7ec;
            border-radius: 16px;
        }

        .payment-summary h3 {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 20px;
        }

        .summary-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid #eaecf0;
        }

        .summary-row:last-child {
            border-bottom: none;
        }

        .summary-label {
            color: #667085;
        }

        .summary-value {
            font-weight: 600;
            color: #101828;
        }

        .total-row {
            margin-top: 5px;
            padding-top: 18px;
            border-top: 2px solid #d0d5dd;
        }

        .total-label {
            font-size: 18px;
            font-weight: 700;
        }

        .total-value {
            font-size: 26px;
            font-weight: 800;
            color: #f58220;
        }

        /* ================= ELIGIBILITY ================= */
        .eligibility-box {
            display: none;
            margin-top: 25px;
            padding: 15px 18px;
            border-radius: 10px;
        }

        .eligibility-success {
            background: #ecfdf3;
            color: #027a48;
        }

        .eligibility-error {
            background: #fef3f2;
            color: #b42318;
        }

        /* ================= LOADING ================= */
        .loading-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(255, 255, 255, 0.85);
            z-index: 9999;
            align-items: center;
            justify-content: center;
        }

        .loading-box {
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
            text-align: center;
        }

        .spinner {
            width: 40px;
            height: 40px;
            border: 4px solid #eee;
            border-top-color: #f58220;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            margin: auto auto 15px;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        @media(max-width: 768px) {
            .register-card {
                padding: 22px;
            }

            .register-hero h1 {
                font-size: 32px;
            }

            .student-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }
        }
        
.training-option,
.fee-summary {
    font-family: "Inter", "Segoe UI", sans-serif;
}

.training-option {
    background: #f8fbff;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    padding: 20px 22px;
    margin-bottom: 16px;
    transition: border-color 0.2s ease;
}

.training-option:has(#includeTraining:checked) {
    border-color: #2563eb;
    background: #f1f6ff;
}

.training-option label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #172554;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.training-option input[type="checkbox"] {
    width: 19px;
    height: 19px;
    accent-color: #2563eb;
    cursor: pointer;
    flex-shrink: 0;
}

#trainingOptionFee {
    color: #1d4ed8;
    font-weight: 700;
}

#trainingFeeInfo {
    margin: 10px 0 0 29px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
}

.fee-summary {
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.04);
    padding: 20px 22px;
}

.fee-summary p {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin: 0 0 14px;
    color: #475569;
    font-size: 14px;
}

#registrationFee,
#trainingFee,
#kitAmount {
    color: #0f172a;
    font-weight: 600;
    white-space: nowrap;
}

.fee-summary h3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 20px -22px -20px;
    padding: 20px 22px;
    background: #eff6ff;
    border-top: 1px solid #dbeafe;
    color: #172554;
    font-size: 17px;
    font-weight: 700;
}

#totalAmount,
#totalFee {
    color: #1d4ed8;
    font-size: 25px;
    font-weight: 800;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .training-option,
    .fee-summary {
        padding: 16px;
    }

    .fee-summary h3 {
        margin: 18px -16px -16px;
        padding: 18px 16px;
        font-size: 15px;
    }

    #totalAmount,
    #totalFee {
        font-size: 21px;
    }
}


.payment-type-card {
    background: #fff;
    border: 1px solid #dce3ec;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
}

.payment-type-option {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-weight: 600;
}

.payment-type-option input {
    width: 18px;
    height: 18px;
    accent-color: #183b65;
}

.verification-section {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.verification-section label {
    display: block;
    margin-bottom: 6px;
}

.verification-section[hidden],
#bmVerifiedSection[hidden],
#bmPaymentSection[hidden] {
    display: none !important;
}


.payment-choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 16px;
}

.payment-choice-card {
    background: #fff;
    border: 1px solid #dce3ec;
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.payment-choice-card:has(.payment-choice-header input:checked) {
    border-color: #245b9e;
    box-shadow: 0 5px 20px rgba(36, 91, 158, .09);
}

.payment-choice-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px;
    cursor: pointer;
    min-height: 88px;
}

.payment-choice-header input {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: #245b9e;
}

.payment-choice-header strong,
.payment-choice-header small {
    display: block;
}

.payment-choice-header strong {
    font-size: 14px;
    color: #183653;
}

.payment-choice-header small {
    margin-top: 5px;
    font-size: 12px;
    color: #748196;
    font-weight: 400;
}

.payment-choice-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 10px;
    background: #edf3fb;
    color: #245b9e;
    font-weight: 700;
}

.choice-arrow {
    margin-left: auto;
    font-size: 22px;
    color: #245b9e;
}

.payment-choice-content {
    padding: 0 18px 20px;
    animation: revealSection .22s ease;
}

.payment-choice-content[hidden] {
    display: none !important;
}

.section-divider {
    height: 1px;
    background: #e8edf3;
    margin-bottom: 18px;
}

.payment-choice-content h5 {
    font-size: 16px;
    font-weight: 600;
    color: #183653;
}

.payment-choice-content label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 500;
}

.verification-success {
    background: #eaf8ef;
    color: #19733b;
    padding: 12px;
    border-radius: 8px;
    font-size: 13px;
}

@keyframes revealSection {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .payment-choice-grid {
        grid-template-columns: 1fr;
    }
}
#pastCompetitionContainer button {
   display: none
}