/* =========================================
   SKI CONNECT V2.0
   Submit Feedback Wizard
========================================= */

body{
    background:#f4f6f9;
    font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
}

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

.submit-page{

    background:
    linear-gradient(rgba(0,0,0,.60),
    rgba(0,0,0,.60)),
    url("../images/school_bg.jpg");

    background-size:cover;
    background-position:center;
    background-attachment:fixed;

    min-height:100vh;

    padding:60px 0;

}

/* =========================================
   OVERLAY
========================================= */

.overlay{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

}

/* =========================================
   GLASS CARD
========================================= */

.feedback-card{

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

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border-radius:25px;

    padding:45px;

    border:1px solid rgba(255,255,255,.25);

    box-shadow:0 20px 40px rgba(0,0,0,.35);

    color:white;

}

/* =========================================
   SCHOOL TITLE
========================================= */

.title-box{

    background:white;

    padding:15px;

    border-radius:15px;

    display:inline-block;

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

}

.title-box img{

    max-width:100%;

}

/* =========================================
   HEADINGS
========================================= */

.feedback-card h2{

    color:#FFD54F;

    font-weight:700;

}

.feedback-card h4{

    color:#FFE082;

    margin-bottom:25px;

    font-weight:bold;

}

.feedback-card p{

    color:#eeeeee;

}

/* =========================================
   PROGRESS BAR
========================================= */

.progress{

    height:14px;

    border-radius:50px;

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

}

.progress-bar{

    background:linear-gradient(90deg,#d32f2f,#f57c00,#fbc02d);

    transition:.4s;

}

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

label{

    font-weight:600;

    margin-bottom:8px;

    color:white;

}

.form-control,
.form-select{

    border-radius:12px;

    padding:12px;

    border:none;

}

.form-control:focus,
.form-select:focus{

    box-shadow:0 0 10px rgba(255,193,7,.6);

    border:none;

}
/* =========================================
   PLACE HOLDER
========================================= */
.form-control::placeholder{
    color:#8A8A8A;
    opacity:.85;
}
/* =========================================
   optional text
========================================= */
.optional-text{
    font-size:.8rem;
    font-weight:600;
    color:#fffb09;
}
/* =========================================
   BUTTONS
========================================= */

.btn{

    border-radius:12px;

    padding:10px 25px;

    font-weight:bold;

}

.btn-warning{

    background:linear-gradient(90deg,#c62828,#ef6c00,#fbc02d);

    border:none;

    color:white;

}

.btn-warning:hover{

    transform:translateY(-2px);

    transition:.3s;

    color:white;

}

.btn-success{

    background:#2e7d32;

    border:none;

}

.btn-success:hover{

    background:#1b5e20;

}

/* =========================================
   CHARACTER COUNTER
========================================= */

#counter,
#subjectCounter {
    color: #FFE082;
    font-weight: 600;
}

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

.step {
    display: none !important;
    animation: fadeIn .4s ease;
}

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

/* =========================================
   ANIMATION
========================================= */

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media(max-width:768px){

.feedback-card{

    padding:25px;

}

.feedback-card h2{

    font-size:28px;

}

.title-box{

    padding:10px;

}

.btn{

    width:100%;

    margin-top:10px;

}

.feedback-card .d-flex{

    flex-direction:column;

}

}
/* ===========================
   VALIDATION POPUP
=========================== */

.validation-modal{
    background:linear-gradient(
        145deg,
        rgba(25,25,25,.96),
        rgba(45,40,30,.95)
    );

    border:1px solid rgba(255,255,255,.25);

    border-radius:22px;

    color:#FFFFFF;

    box-shadow:
        0 25px 60px rgba(0,0,0,.45);
}


.validation-modal .modal-body{
    padding:32px 30px;
}


.validation-icon{
    font-size:3rem;

    color:#FFC107;

    margin-bottom:10px;
}


.validation-modal h4{
    color:#FFD54F;

    font-weight:700;

    margin-bottom:10px;
}


.validation-modal p{
    color:#F5F5F5;

    margin-bottom:22px;

    line-height:1.6;
}


.validation-ok-btn{
    min-width:110px;

    padding:10px 28px;

    border:none;

    border-radius:30px;

    color:#FFFFFF;

    font-weight:600;

    background:linear-gradient(
        90deg,
        #FF6A00,
        #FFA000
    );
}


.validation-ok-btn:hover{
    color:#FFFFFF;

    transform:translateY(-2px);
}
.field-error{
    border:2px solid #FF5252 !important;

    box-shadow:
        0 0 0 3px rgba(255,82,82,.18) !important;
}
.field-error:focus{
    border-color:#FF5252 !important;

    box-shadow:
        0 0 0 4px rgba(255,82,82,.22) !important;
}

.validation-ok-btn {
    position: relative;
    z-index: 1060;
    pointer-events: auto;
    cursor: pointer;
}
.validation-popup {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.65);
    z-index: 9999;
}

.validation-popup.show {
    display: flex;
}

.validation-popup .validation-modal {
    width: min(90%, 450px);
    padding: 32px 30px;
    text-align: center;

    background: linear-gradient(
        145deg,
        rgba(25,25,25,.98),
        rgba(45,40,30,.98)
    );

    border: 1px solid rgba(255,255,255,.25);
    border-radius: 22px;

    box-shadow: 0 25px 60px rgba(0,0,0,.5);

    color: white;
}

.validation-popup .validation-icon {
    font-size: 3rem;
    color: #FFC107;
    margin-bottom: 10px;
}

.validation-popup h4 {
    color: #FFD54F;
    font-weight: 700;
    margin-bottom: 10px;
}

.validation-popup p {
    color: #F5F5F5;
    margin-bottom: 22px;
}

.validation-popup .validation-ok-btn {
    min-width: 110px;
    padding: 10px 28px;
    border: none;
    border-radius: 30px;

    color: white;
    font-weight: 600;

    background: linear-gradient(
        90deg,
        #FF6A00,
        #FFA000
    );

    cursor: pointer;
}
/* ==========================================
   CLEAR FORM LABELS
========================================== */

.submit-page label,
.submit-page .form-label,
.submit-page .form-label-custom,
.submit-page .form-check-label {

    color: #FFFFFF !important;

    font-size: 15px;

    font-weight: 700;

    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.75);

    letter-spacing: 0.2px;
}


/* Optional text */

.submit-page .optional-text {

    color: #FFD54F !important;

    font-size: 13px;

    font-weight: 600;

    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.8);
}


/* File information */

.submit-page .text-muted {
    color: #FFE082 !important;
    font-size: 12px;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}