/* ==========================
   VARIABLES
========================== */

:root{

    --primary:#1151b0;
    --primary-dark:#ec0808;

    --secondary:#1151b0;

    --light:#f8fafc;

    --border:#e5e7eb;

    --text:#475569;

    --heading:#111827;

    --radius:14px;

}

/* ==========================
   GLOBAL
========================== */

body{

    font-family:'Inter',sans-serif;

    color:var(--text);

    background:#fff;

}

h1,h2,h3,h4,h5,h6{

    font-family:'Poppins',sans-serif;

    color:var(--heading);

    font-weight:700;

}

section{

    padding:90px 0;

}

.brand-green{

    color:var(--primary);

}

a{

    text-decoration:none;

}

/* ==========================
   NAVBAR
========================== */

.navbar{

    padding:18px 0;

}

.nav-link{

    color:#444;

    font-weight:500;

    margin:0 12px;

}

.nav-link:hover{

    color:var(--primary);

}

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

.btn-success{

    background:var(--primary);

    border:none;

    border-radius:50px;

    padding:12px 30px;

    font-weight:600;

}

.btn-success:hover{

    background:var(--primary-dark);

}

.btn-outline-success{

    border-radius:50px;

    padding:12px 30px;

}

/* ==========================
   CARDS
========================== */

.card{

    border:none;

    border-radius:var(--radius);

    box-shadow:0 10px 30px rgba(0,0,0,.06);

}

/* ==========================
   FOOTER
========================== */

.footer{

    background:#1151b0;

    color:#cbd5e1;

    padding:80px 0 30px;

}

.footer h5{

    color:white;

}

.footer-title{

    color:white;

}

.footer-links{

    list-style:none;

    padding:0;

}

.footer-links li{

    margin-bottom:12px;

}

.footer-links a{

    color:#cbd5e1;

}

.footer-links a:hover{

    color:white;

}

.social-icons{

    display:flex;

    gap:15px;

    font-size:22px;

}

.footer hr{

    border-color:#334155;

    margin:40px 0 20px;

}

/* ==========================
   UTILITIES
========================== */

.rounded-xl{

    border-radius:18px;

}

.shadow-soft{

    box-shadow:0 20px 60px rgba(0,0,0,.06);

}

.bg-light{

    background:var(--light)!important;
}


/* ===================================
PROGRAM CARDS
=================================== */

.program-card{

    display:block;

    cursor:pointer;

}

.program-card input{

    display:none;

}

.program-content{

    border:2px solid #e9ecef;

    border-radius:18px;

    padding:30px;

    text-align:center;

    height:100%;

    transition:.3s;

    background:#fff;

}

.program-content:hover{

    transform:translateY(-5px);

    border-color:#1151b0;

    box-shadow:0 12px 30px #ec0808;

}

.program-card input:checked + .program-content{

    border-color:#1151b0;

    background:#f1fff6;

    box-shadow:0 15px 35px #ec0808;

}

.program-content h5{

    margin-top:20px;

    margin-bottom:15px;

}

.program-content p{

    margin-bottom:0;

    color:#6c757d;

    font-size:.95rem;

}

/* =======================================
UPLOAD CENTER
======================================= */

.upload-card{

    border:2px dashed #d8d8d8;

    border-radius:18px;

    padding:35px;

    text-align:center;

    height:100%;

    transition:.3s;

    background:#fff;

}

.upload-card:hover{

    border-color:#1151b0;

    transform:translateY(-4px);

    box-shadow:0 12px 30px #ec0808;

}

.upload-icon{

    width:80px;

    height:80px;

    border-radius:50%;

    background:#1151b010;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:auto;

    margin-bottom:20px;

    font-size:2rem;

    color:#1151b0;

}

.preview img{

    width:120px;

    border-radius:10px;

    margin-top:15px;

}

.gallery-preview{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    justify-content:center;

}

.gallery-preview img{

    width:90px;

    height:90px;

    object-fit:cover;

    border-radius:10px;

}

.drag-upload{

    border:3px dashed #1151b0;

    border-radius:20px;

    padding:60px;

    text-align:center;

    background:#f8fff9;

    transition:.3s;

}

.drag-upload.dragover{

    background:#eaf8ef;

    border-color:#ec0808;

}

/* =====================================
SUMMARY
===================================== */

.summary-card{

    border:1px solid #e9ecef;

    border-radius:16px;

    padding:25px;

    background:#fff;

}

.summary-card table th{

    color:#6c757d;

    font-weight:600;

}

.summary-card table td{

    font-weight:500;

}

.summary-card:hover{

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

}

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

.success-animation{

display:flex;

justify-content:center;

}

.success-circle{

width:140px;

height:140px;

border-radius:50%;

background:#1151b0;

display:flex;

justify-content:center;

align-items:center;

color:#fff;

font-size:70px;

animation:pop .6s ease;

box-shadow:0 15px 40px #ec0808;

}

@keyframes pop{

0%{

transform:scale(.2);

opacity:0;

}

60%{

transform:scale(1.15);

}

100%{

transform:scale(1);

opacity:1;

}

}

.form-step {
    display: none;
}

.form-step.active {
    display: block !important;
}

.join-hero{

    background:#f8fbf8;

    padding:90px 0;

    position:relative;

}

.min-vh-75{

    min-height:75vh;

}

.hero-card{

    background:white;

}

.hero-feature{

    display:flex;

    gap:18px;

    margin-bottom:28px;

    align-items:flex-start;

}

.hero-feature i{

    font-size:2rem;

}

.hero-feature p{

    margin:4px 0 0;

    color:#6c757d;

}

.hero-shape{

    position:absolute;

    border-radius:50%;

    opacity:.08;

}

.hero-shape-1{

    width:380px;

    height:380px;

    background:#1151b0;

    right:-120px;

    top:-100px;

}

.hero-shape-2{

    width:260px;

    height:260px;

    background:#1151b0;

    left:-120px;

    bottom:-120px;

}

.program-card{

    display:block;

    cursor:pointer;

    border:2px solid #e9ecef;

    border-radius:12px;

    padding:25px;

    transition:.25s;

    height:100%;

}

.program-card:hover{

    border-color:#1151b0;

    transform:translateY(-3px);

    box-shadow:0 .5rem 1rem rgba(0,0,0,.08);

}

.program-card.selected{

    border-color:#1151b0;

    background:#eef9f1;

}

.program-card input{

    display:none;

}

/* ==========================================
PROGRAM CARDS
========================================== */

.program-card {
    display: block;
    padding: 1.5rem;
    border: 2px solid #dee2e6;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #fff;
    position: relative;
    height: 100%;
}

.program-card:hover {
    border-color: #1151b0;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px #00000014;
}

.program-card input[type="checkbox"] {
    display: none;
}

.program-card .program-content {
    text-align: center;
}

.program-card .program-content h5 {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

.program-card .program-content ul {
    list-style: none;
    padding-left: 0;
    font-size: 0.875rem;
}

.program-card .program-content ul li {
    padding: 0.25rem 0;
    position: relative;
    padding-left: 1.25rem;
}

.program-card .program-content ul li::before {
    content: "✓";
    color: #1151b0;
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* Selected state */
.program-card.selected {
    border-color: #1151b0;
    background-color: #f8fff9;
    box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.25);
}

/* ==========================================
UPLOAD PREVIEWS
========================================== */

#businessLogoPreview img,
#coverImagePreview img {
    max-width: 180px;
    max-height: 180px;
    object-fit: cover;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

#galleryPreview img,
#teamPreview img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    margin: 6px;
}

/* ==========================================
FORM VALIDATION STATES
========================================== */

.form-control.is-valid,
.form-select.is-valid {
    border-color: #1151b0;
    background-image: url("data:image/svg+xml,...");
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #dc3545;
}

.validation-alert {
    margin-bottom: 2rem;
    border-left: 4px solid #dc3545;
}

.validation-alert ul {
    padding-left: 1.25rem;
}

/* Draft styles */
#draftStatus {
    transition: all 0.3s ease;
}

#draftStatus .badge {
    padding: 8px 16px;
    font-size: 0.9rem;
}

.draft-notification {
    animation: slideDown 0.3s ease;
}

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

.draft-auto-save {
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.draft-auto-save.saved {
    opacity: 1;
}

/* Draft restore notification */
.draft-restore-alert {
    animation: slideDown 0.3s ease;
    border-left: 4px solid #0dcaf0;
}

.draft-restore-alert .btn {
    white-space: nowrap;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .draft-controls {
        flex-direction: column;
        align-items: stretch !important;
        gap: 10px;
    }
    
    .draft-controls .btn {
        width: 100%;
    }
}

.partner-logo{

    max-height:80px;

    filter:grayscale(100%);

    opacity:.8;

    transition:.3s;

}

.partner-logo:hover{

    filter:none;

    opacity:1;

    transform:scale(1.05);

}

.program-card{

    transition:.25s;

    background:#fff;

}

.program-card:hover{

    transform:translateY(-6px);

    box-shadow:0 .75rem 1.5rem rgba(0,0,0,.08);

}

/* ==========================================
   NAVBAR BRAND
========================================== */

.navbar-brand{
    line-height:1.1;
    text-decoration:none;
}

.brand-green{
    color:#1151b0;
    font-weight:700;
    letter-spacing:.2px;
}

.brand-tagline{
    font-size:.78rem;
    font-style:italic;
    color:#6c757d;
    font-weight:500;
    margin-top:2px;
    letter-spacing:.5px;
}

.navbar-brand:hover .brand-green{
    color:#157347;
}

.navbar-brand:hover{
    text-decoration:none;
}