/* Main wrapper for Step 1 & Step 2 */
/* ------------------------------
   STEP 1 & STEP 2 CENTERED BOX
------------------------------ */
.step-screen {
    max-width: 450px;
    margin: auto;
    padding: 25px;
    background: #fff;
    border-radius: 10px;
}

/* ------------------------------
   STEP 3 FULL-WIDTH (NO LIMIT)
------------------------------ */
#step3 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* remove inner white box limitation */
#step3 .step-screen {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* ------------------------------
   CARDS FULL WIDTH IN STEP 3
------------------------------ */
#step3 .card.card-form {
    width: 100% !important;
    margin: 0 0 20px 0;
    border-radius: 12px;
}

/* Inputs */
.form-control {
    height: 45px;
    border-radius: 8px;
}

/* Buttons */
.btn {
    height: 45px;
    border-radius: 8px;
}

/* OTP inputs (Step 2) */
.row .form-control {
    height: 45px;
}

/* Mobile fixes */
@media (max-width: 576px) {

    /* Remove padding/margins of parent white box */
    .glass-card {
        padding: 0 !important;
    }

    /* Step 3 wrapper full width */
    #step3 {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Step screen container inside step 3 */
    #step3 .step-screen {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        background: #fff !important; /* makes it fully white */
    }

    /* Cards full width with zero left/right gap */
    #step3 .card.card-form {
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }

    /* Card body reduced padding */
    #step3 .card-body {
        padding: 15px !important;
    }

    /* Inputs full width and neat */
    #step3 .form-control,
    #step3 .form-select {
        width: 100% !important;
        height: 45px;
        border-radius: 6px;
    }
}