/*==========================================================
  SaraDharma Registration Form
  registration.css
  Version 2.0
==========================================================*/


/*==========================================================
  PAGE INTRODUCTION
==========================================================*/

.registration-intro{

    max-width:900px;

    margin:40px auto;

    text-align:center;

}

.registration-intro h2{

    color:var(--primary);

    margin-bottom:15px;

}

.registration-intro p{

    line-height:1.9;

    color:#555;

}


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

.form-card{

    background:#ffffff;

    max-width:980px;

    margin:40px auto;

    padding:45px;

    border-radius:20px;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

}


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

.form-grid{

    display:grid;

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

    gap:28px;

}


/*==========================================================
  FULL WIDTH ITEMS
==========================================================*/

.full{

    grid-column:1 / -1;

}


/*==========================================================
  LABELS
==========================================================*/

.form-card label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

    font-size:1rem;

    color:var(--primary);

}

.required{

    color:#C0392B;

}


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

.form-card input[type="text"],
.form-card input[type="email"],
.form-card input[type="tel"],
.form-card select,
.form-card textarea{

    width:100%;

    padding:14px 16px;

    font-size:1rem;

    font-family:inherit;

    border:1px solid #CCCCCC;

    border-radius:10px;

    transition:all .25s ease;

    background:#ffffff;

}

.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 3px rgba(182,108,28,.15);

}


/*==========================================================
  PHONE NUMBER
==========================================================*/

.phone-group{

    display:flex;

    align-items:center;

    gap:12px;

}

.phone-group select{

    width:180px;

    flex-shrink:0;

}

.phone-group input{

    flex:1;

}


/*==========================================================
  MOVE-IN DATE
==========================================================*/

.movein-group{

    display:flex;

    gap:12px;

}

.movein-group select{

    flex:1;

}


/*==========================================================
  TEXTAREA
==========================================================*/

.form-card textarea{

    resize:vertical;

    min-height:190px;

    line-height:1.8;

}


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

.counter-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:8px;

}

.help-text{

    font-size:.90rem;

    color:#777;

}

.char-counter{

    font-size:.90rem;

    color:#666;

    font-weight:500;

}

.char-counter.valid{

    color:#2E8B57;

    font-weight:600;

}

.char-counter.invalid{

    color:#C0392B;

}


/*==========================================================
  VALIDATION
==========================================================*/

.error{

    border-color:#C0392B !important;

}

.success{

    border-color:#2E8B57 !important;

}

.error-message{

    display:none;

    margin-top:6px;

    font-size:.85rem;

    color:#C0392B;

}



/*==========================================================
  CHECKBOXES
==========================================================*/

.checkbox-row{

    grid-column:1 / -1;

    margin-top:12px;

}

.checkbox-label{

    display:flex;

    align-items:flex-start;

    gap:14px;

    cursor:pointer;

    color:#444;

    font-size:1rem;

    line-height:1.7;

    font-weight:500;

}

.checkbox-label input[type="checkbox"]{

    width:20px;

    height:20px;

    margin-top:4px;

    flex-shrink:0;

    accent-color:var(--primary);

}

.checkbox-label span{

    flex:1;

}


/*==========================================================
  SUBMIT PANEL
==========================================================*/

.submit-panel{

    grid-column:1 / -1;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    margin-top:35px;

    flex-wrap:wrap;

}


/*==========================================================
SUCCESS DIALOG
==========================================================*/

.success-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:99999;

}

.success-dialog{

    width:420px;

    max-width:92%;

    background:white;

    border-radius:14px;

    padding:35px;

    text-align:center;

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

    animation:popup .35s ease;

}

.success-icon{

    width:85px;

    height:85px;

    border-radius:50%;

    background:#4CAF50;

    color:white;

    font-size:50px;

    line-height:85px;

    margin:auto;

    margin-bottom:20px;

}

.success-reference{

    background:#f6f6f6;

    padding:18px;

    border-radius:8px;

    margin:25px 0;

}

.success-close{

    margin-top:15px;

    background:#B46A1F;

    color:white;

    border:none;

    padding:12px 35px;

    border-radius:6px;

    cursor:pointer;

}

.success-close:hover{

    background:#995617;

}

@keyframes popup{

    from{

        transform:scale(.8);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

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

.submit-button,
.clear-button{

    min-width:230px;

    padding:16px 34px;

    border:none;

    border-radius:40px;

    font-size:1.05rem;

    font-weight:600;

    cursor:pointer;

    transition:all .30s ease;

}

.submit-button{

    background:var(--primary);

    color:#fff;

}

.submit-button:hover{

    background:var(--secondary);

    transform:translateY(-2px);

}

.submit-button:disabled{

    background:#bcbcbc;

    cursor:not-allowed;

    transform:none;

}

.clear-button{

    background:#777;

    color:#fff;

}

.clear-button:hover{

    background:#555;

    transform:translateY(-2px);

}


/*==========================================================
  SPINNER
==========================================================*/

.spinner{

    display:none;

    width:100%;

    text-align:center;

    margin-top:18px;

    color:var(--primary);

    font-weight:600;

    font-size:1rem;

}


/*==========================================================
  SUCCESS PANEL
==========================================================*/

.success-panel{

    display:none;

    margin-top:35px;

    padding:22px;

    border-radius:14px;

    background:#EAF8EE;

    color:#2E8B57;

    text-align:center;

    font-size:1.05rem;

    line-height:1.8;

    border:1px solid #CFEBD7;

}


/*==========================================================
  SECTION DIVIDER
==========================================================*/

.form-divider{

    margin:35px 0;

    border:none;

    border-top:1px solid #E5E5E5;

}


/*==========================================================
  SMALL NOTES
==========================================================*/

.note{

    font-size:.9rem;

    color:#777;

    margin-top:8px;

    line-height:1.6;

}


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

.form-card{

    animation:fadeIn .5s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(18px);

    }

    to{

        opacity:1;

        transform:none;

    }

}


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

@media (max-width:1024px){

    .form-card{

        max-width:95%;

        padding:35px;

    }

}


@media (max-width:900px){

    .form-grid{

        grid-template-columns:1fr;

        gap:22px;

    }

    .full{

        grid-column:auto;

    }

    .phone-group{

        flex-direction:column;

        align-items:stretch;

    }

    .phone-group select{

        width:100%;

    }

    .movein-group{

        flex-direction:column;

    }

    .submit-panel{

        flex-direction:column;

        gap:15px;

    }

    .submit-button,
    .clear-button{

        width:100%;

        max-width:350px;

    }

}


@media (max-width:600px){

    .form-card{

        padding:25px 20px;

        border-radius:16px;

    }

    .registration-intro{

        margin:25px auto;

    }

    .registration-intro h2{

        font-size:1.8rem;

    }

    .checkbox-label{

        font-size:.95rem;

    }

    .checkbox-label input[type="checkbox"]{

        width:18px;

        height:18px;

    }

    .submit-button,
    .clear-button{

        font-size:1rem;

        padding:15px 20px;

    }

}


/*==========================================================
  ACCESSIBILITY
==========================================================*/

.submit-button:focus,
.clear-button:focus,
.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus{

    outline:3px solid rgba(182,108,28,.25);

    outline-offset:2px;

}

/*=========================================================
YOUR JOURNEY BEGINS HERE
=========================================================*/

.journey-image-section{
    max-width:1400px;
    margin:60px auto;
    padding:0 20px;
    text-align:center;
}

.journey-image{
    width:100%;
    max-width:1400px;
    height:auto;
    display:block;
    margin:0 auto;
}
/*==========================================================
  REDUCED MOTION
==========================================================*/

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}


/*==========================================================
  PRINT
==========================================================*/

@media print{

    .submit-panel,
    .spinner,
    .success-panel{

        display:none !important;

    }

    .form-card{

        box-shadow:none;

        border:1px solid #CCCCCC;

    }

}


/*==========================================================
  END OF FILE
==========================================================*/