/*==================================================
 RSSS EDUCATION
 FRANCHISE APPLICATION
 Premium UI v2.0
==================================================*/

/*==============================
RESET
==============================*/

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

#franchise-form-page{

    overflow-x:hidden;

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

.franchise-hero{

    padding:95px 0 80px;

    background:
    radial-gradient(circle at top left,#dbeafe 0,#eff6ff 35%,#ffffff 100%);

}

.franchise-hero-content{

    max-width:820px;

    margin:auto;

    text-align:center;

}

.page-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 18px;

    border-radius:50px;

    background:#eff6ff;

    color:var(--primary);

    font-weight:600;

    font-size:14px;

    margin-bottom:20px;

}

.franchise-hero-content h1{

    font-size:52px;

    font-weight:800;

    color:var(--dark);

    line-height:1.2;

    margin-bottom:22px;

}

.franchise-hero-content p{

    max-width:760px;

    margin:auto;

    font-size:18px;

    line-height:1.9;

    color:var(--text);

}

/*==============================
APPLICATION LAYOUT
==============================*/

.application-section{

    padding:80px 0 100px;

}

.application-wrapper{

    display:grid;

    grid-template-columns:minmax(0,2fr) 360px;

    gap:35px;

    align-items:start;

}

.application-left{

    background:#fff;

    border-radius:28px;

    padding:40px;

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

    box-shadow:var(--shadow);

}

.application-right{

    position:sticky;

    top:120px;

}
/*==============================
PROGRESS CARD
==============================*/

.progress-card{

    margin-bottom:40px;

    padding:28px;

    background:linear-gradient(135deg,#ffffff,#f8fbff);

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

    border-radius:24px;

    box-shadow:var(--shadow-sm);

}

.progress-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

    margin-bottom:22px;

}

.progress-header h3{

    font-size:24px;

    font-weight:700;

    color:var(--dark);

    margin-bottom:6px;

}

.progress-header p{

    color:var(--text);

    font-size:15px;

}

.progress-text{

    background:var(--primary-light);

    color:var(--primary);

    padding:8px 14px;

    border-radius:50px;

    font-size:14px;

    font-weight:700;

    white-space:nowrap;

}

.progress{

    width:100%;

    height:12px;

    background:#e5e7eb;

    border-radius:100px;

    overflow:hidden;

}

.progress-fill{

    width:16.66%;

    height:100%;

    background:linear-gradient(90deg,#2563eb,#60a5fa);

    border-radius:100px;

    transition:width .4s ease;

}

/*==============================
RIGHT SIDEBAR
==============================*/

.help-card{

    background:#ffffff;

    border-radius:24px;

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

    padding:28px;

    margin-bottom:24px;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.help-card:hover{

    transform:translateY(-5px);

    box-shadow:var(--shadow);

}

.help-card h3{

    font-size:22px;

    color:var(--dark);

    margin-bottom:20px;

}

.help-card ul{

    list-style:none;

}

.help-card li{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:16px;

    color:var(--text);

    line-height:1.7;

}

.help-card li:last-child{

    margin-bottom:0;

}

.help-card li i{

    width:22px;

    color:var(--primary);

    font-size:18px;

}

.help-card p{

    color:var(--text);

    line-height:1.9;

}
/*==============================
FORM STEP
==============================*/

.form-step{

    background:#ffffff;

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

    border-radius:24px;

    padding:40px;

    box-shadow:var(--shadow-sm);

    animation:fadeUp .35s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(20px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

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

.step-header{

    display:flex;

    align-items:center;

    gap:20px;

    margin-bottom:35px;

}

.step-number{

    width:64px;

    height:64px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#2563eb,#3b82f6);

    color:#fff;

    font-size:24px;

    font-weight:700;

    flex-shrink:0;

}

.step-title h2{

    font-size:30px;

    color:var(--dark);

    margin-bottom:8px;

}

.step-title p{

    color:var(--text);

    line-height:1.7;

}

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

.form-grid{

    display:grid;

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

    gap:24px;

}

.form-group{

    display:flex;

    flex-direction:column;

    width:100%;

    min-width:0;

}

.form-group.full{

    grid-column:1 / -1;

}

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

.form-group label{

    margin-bottom:10px;

    font-size:15px;

    font-weight:600;

    color:var(--dark);

}

.form-group label span{

    color:var(--danger);

}

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

.form-group input,

.form-group select,

.form-group textarea{

    width:100%;

    max-width:100%;

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

    background:#fff;

    border-radius:16px;

    font-size:15px;

    color:var(--dark);

    transition:var(--transition);

    font-family:inherit;

}

/* Input */

.form-group input,

.form-group select{

    height:58px;

    padding:0 18px;

}

/* Textarea */

.form-group textarea{

    min-height:150px;

    padding:18px;

    resize:vertical;

}

/* Focus */

.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 5px rgba(37,99,235,.10);

}

/* Placeholder */

.form-group input::placeholder,

.form-group textarea::placeholder{

    color:#94a3b8;

}

/* File */

.form-group input[type="file"]{

    height:auto;

    padding:14px;

    cursor:pointer;

}

/* Select */

.form-group select{

    cursor:pointer;

}
/*==============================
STEP ACTION
==============================*/

.step-action{

    margin-top:40px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:16px;

    flex-wrap:wrap;

}

.step-action .hero-btn{

    min-width:180px;

}

/*==============================
UPLOAD INPUT
==============================*/

.form-group input[type="file"]{

    padding:18px;

    border:2px dashed #cbd5e1;

    border-radius:18px;

    background:#f8fbff;

    transition:var(--transition);

}

.form-group input[type="file"]:hover{

    border-color:var(--primary);

    background:#eff6ff;

}

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

.review-box{

    background:linear-gradient(135deg,#ffffff,#f8fbff);

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

    border-radius:20px;

    padding:30px;

    margin-bottom:30px;

    box-shadow:var(--shadow-sm);

}

.review-box h3{

    color:var(--dark);

    font-size:22px;

    margin-bottom:16px;

}

.review-box p{

    color:var(--text);

    line-height:1.9;

}

/*==============================
CHECKBOX
==============================*/

.checkbox-label{

    display:flex;

    align-items:flex-start;

    gap:14px;

    cursor:pointer;

    font-size:15px;

    line-height:1.8;

    color:var(--text);

}

.checkbox-label input{

    width:20px;

    height:20px;

    margin-top:2px;

    accent-color:var(--primary);

    flex-shrink:0;

}

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

.hero-btn{

    transition:all .35s ease;

}

.hero-btn:hover{

    transform:translateY(-3px);

}

.hero-btn:active{

    transform:translateY(0);

}

/*==============================
CARD HOVER
==============================*/

.form-step{

    transition:var(--transition);

}

.form-step:hover{

    box-shadow:var(--shadow);

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

@media (max-width:1200px){

    .application-wrapper{

        grid-template-columns:1fr 330px;

    }

}

@media (max-width:992px){

    .application-wrapper{

        grid-template-columns:1fr;

    }

    .application-right{

        position:relative;

        top:0;

    }

}

@media (max-width:768px){

    .franchise-hero{

        padding:70px 0 50px;

    }

    .franchise-hero-content h1{

        font-size:36px;

    }

    .franchise-hero-content p{

        font-size:16px;

    }

    .application-left{

        padding:25px;

    }

    .progress-header{

        flex-direction:column;

        align-items:flex-start;

    }

    .step-header{

        flex-direction:column;

        align-items:flex-start;

    }

    .step-number{

        width:54px;

        height:54px;

        font-size:20px;

    }

    .step-title h2{

        font-size:24px;

    }

    .form-grid{

        grid-template-columns:1fr;

    }

    .form-group.full{

        grid-column:auto;

    }

    .step-action{

        flex-direction:column;

    }

    .step-action .hero-btn{

        width:100%;

        min-width:100%;

    }

}

@media (max-width:576px){

    .application-section{

        padding:50px 0;

    }

    .application-left{

        padding:20px;

        border-radius:20px;

    }

    .form-step{

        padding:22px;

    }

    .progress-card{

        padding:22px;

    }

    .help-card{

        padding:22px;

    }

}

/*==============================
SMOOTH TRANSITIONS
==============================*/

.progress-fill,
.form-step,
.help-card,
.hero-btn,
.form-group input,
.form-group select,
.form-group textarea{

    transition:all .35s ease;

}

/*==============================
SCROLLBAR
==============================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#f1f5f9;

}

::-webkit-scrollbar-thumb{

    background:#cbd5e1;

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:#94a3b8;

}

/*==============================
END
==============================*/
/*==================================================
PREMIUM DOCUMENT UPLOAD
==================================================*/

.upload-grid{

    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
    margin-top:10px;

}

.upload-card{

    position:relative;

    background:#ffffff;

    border:2px dashed #cbd5e1;

    border-radius:22px;

    padding:32px 24px;

    text-align:center;

    cursor:pointer;

    transition:all .35s ease;

    overflow:hidden;

}

.upload-card:hover{

    border-color:#2563eb;

    background:#f8fbff;

    transform:translateY(-6px);

    box-shadow:0 18px 40px rgba(37,99,235,.12);

}

.upload-card input{

    display:none;

}

.upload-card label{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    cursor:pointer;

}

.upload-icon{

    width:72px;
    height:72px;

    border-radius:50%;

    display:flex;

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

    background:linear-gradient(135deg,#2563eb,#3b82f6);

    color:#fff;

    font-size:28px;

    margin-bottom:18px;

    transition:.35s;

}

.upload-card:hover .upload-icon{

    transform:scale(1.08) rotate(-6deg);

}

.upload-card h4{

    font-size:20px;

    color:#0f172a;

    margin-bottom:8px;

    font-weight:700;

}

.upload-card p{

    font-size:14px;

    color:#64748b;

    margin-bottom:22px;

    line-height:1.6;

}

.upload-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 24px;

    border-radius:50px;

    background:#2563eb;

    color:#fff;

    font-size:14px;

    font-weight:600;

    transition:.3s;

}

.upload-card:hover .upload-btn{

    background:#1d4ed8;

}

@media(max-width:768px){

    .upload-grid{

        grid-template-columns:1fr;

    }

}