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

:root{
    --auth-primary:#43C08B;
    --auth-primary-dark:
        var(--public-primary-dark, #2f8f68);
    --auth-primary-light:#EAF8F2;

    --auth-text:#1F2937;
    --auth-muted:#6B7280;

    --auth-border:#E5E7EB;
    --auth-bg:#F6F8F9;

    --auth-danger:#DC3545;
}


/* =========================================================
   AUTH PAGE
   ========================================================= */

.auth-page{
    min-height:100vh;

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

    padding:140px 20px 80px;

    background:
        radial-gradient(
            circle at top right,
            #DDFBF0 0%,
            transparent 35%
        ),
        radial-gradient(
            circle at bottom left,
            #EDF4FF 0%,
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #F8FAFB,
            #F4F6F7
        );
}


/* =========================================================
   AUTH CARD
   ========================================================= */

.auth-card{
    width:100%;
    max-width:560px;

    padding:55px;

    border:1px solid rgba(255,255,255,.4);
    border-radius:30px;

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

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

    box-shadow:
        0 25px 80px rgba(0,0,0,.08),
        0 5px 15px rgba(0,0,0,.04);

    animation:authFadeUp .45s ease;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.auth-card:hover{
    transform:translateY(-4px);

    box-shadow:
        0 40px 90px rgba(0,0,0,.10),
        0 15px 35px rgba(67,192,139,.15);
}


@keyframes authFadeUp{

    from{
        opacity:0;
        transform:translateY(25px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}


/* =========================================================
   SHARED AUTH HEADER
   ========================================================= */

.auth-header{
    width:100%;

    margin-bottom:36px;

    text-align:center;
}


/* =========================================================
   BRAND ROW
   Desktop Login/Register:
   Badge + Logo

   OTP:
   Logo
   Badge
   ========================================================= */

.auth-brand-row{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:22px;

    width:100%;

    margin-bottom:28px;
}


/* =========================================================
   AUTH LOGO
   ========================================================= */

.auth-logo-link{
    display:flex;
    align-items:center;
    justify-content:center;

    flex:0 0 auto;

    margin:0;
    padding:0;

    line-height:1;

    text-decoration:none;

    /*
       Optical correction:
       artwork inside logo.svg is not visually centered.
    */
    transform:translateY(-5px);
}


.auth-logo{
    display:block;

    width:82px;
    height:82px;

    margin:0;
    padding:0;

    object-fit:contain;

    filter:
        drop-shadow(
            0 10px 18px
            rgba(67,192,139,.25)
        );

    transition:transform .3s ease;
}


.auth-logo-link:hover .auth-logo{
    transform:
        rotate(-4deg)
        scale(1.05);
}


/* =========================================================
   AUTH BADGE
   ========================================================= */

.auth-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:8px;

    min-height:44px;

    margin:0;
    padding:9px 18px;

    border:1px solid rgba(63,165,122,.14);
    border-radius:999px;

    background:var(--auth-primary-light);

    color:var(--auth-primary-dark);

    font-size:14px;
    font-weight:800;
    line-height:1.4;

    white-space:nowrap;
}


.auth-badge i{
    display:flex;
    align-items:center;
    justify-content:center;

    flex:0 0 auto;

    margin:0;
    padding:0;

    font-size:16px;
    line-height:1;
}


.auth-badge span{
    display:block;

    margin:0;
    padding:0;

    line-height:1.5;
}


/* =========================================================
   AUTH TITLE
   ========================================================= */

.auth-title{
    margin:0 0 12px;

    color:var(--auth-text);

    font-size:30px;
    font-weight:900;
    line-height:1.45;
}


/* =========================================================
   AUTH SUBTITLE
   ========================================================= */

.auth-subtitle{
    max-width:480px;

    margin:0 auto;

    color:#74827D;

    font-size:15px;
    line-height:1.9;
}


/* =========================================================
   STACKED AUTH HEADER
   Verify Login / Verify Register
   ========================================================= */

.auth-header--stacked .auth-brand-row{
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:12px;

    margin-bottom:24px;
}


.auth-header--stacked .auth-logo-link{
    transform:none;
}


.auth-header--stacked .auth-logo{
    width:82px;
    height:82px;
}


.auth-header--stacked .auth-badge{
    min-height:40px;

    padding:8px 16px;
}


/* =========================================================
   PHONE DISPLAY
   ========================================================= */

.auth-phone{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:8px;

    margin-top:18px;
    padding:9px 16px;

    border:1px solid var(--auth-border);
    border-radius:12px;

    background:#F5F8F7;

    color:var(--auth-primary-dark);

    font-size:15px;
    font-weight:700;
}


.auth-phone i{
    display:flex;
    align-items:center;
    justify-content:center;

    color:var(--auth-primary);

    font-size:17px;
    line-height:1;
}


.auth-phone strong{
    font-weight:800;
}


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

.auth-card .form-label{
    margin-bottom:10px;

    color:var(--auth-text);

    font-size:15px;
    font-weight:700;
}


/* =========================================================
   AUTH INPUT GROUP
   ========================================================= */

.auth-input{
    overflow:hidden;

    border:1px solid var(--auth-border);
    border-radius:18px;

    background:#fff;

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}


.auth-input:hover{
    border-color:#CBD5E1;
}


.auth-input:focus-within{
    border-color:var(--auth-primary);

    box-shadow:
        0 0 0 .2rem
        rgba(67,192,139,.15);
}


.auth-input .input-group-text{
    display:flex;
    align-items:center;
    justify-content:center;

    padding:0 18px;

    border:0;

    background:#fff;

    color:#9CA3AF;

    transition:
        color .25s ease,
        background-color .25s ease;
}


.auth-input .form-control{
    height:60px;

    padding:0 18px;

    border:0 !important;
    border-radius:0;

    background:#fff;

    font-size:16px;

    box-shadow:none !important;
}


.auth-input .form-control:hover,
.auth-input .form-control:focus{
    border:0 !important;

    box-shadow:none !important;
}


/* =========================================================
   STANDALONE FORM CONTROL
   ========================================================= */

.auth-card .form-control:not(.auth-input .form-control){
    height:60px;

    padding:0 18px;

    border:1px solid var(--auth-border);
    border-radius:18px;

    font-size:16px;

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}


.auth-card .form-control:not(.auth-input .form-control):hover{
    border-color:#CBD5E1;
}


.auth-card .form-control:not(.auth-input .form-control):focus{
    border-color:var(--auth-primary);

    box-shadow:
        0 0 0 .22rem
        rgba(67,192,139,.15);
}


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

.auth-input.has-error,
.auth-input:has(.form-control.is-invalid){
    border-color:var(--auth-danger);

    background:#FFF5F5;

    box-shadow:
        0 0 0 .2rem
        rgba(220,53,69,.12);
}


.auth-input.has-error .input-group-text,
.auth-input:has(.form-control.is-invalid) .input-group-text{
    background:#FFF5F5;

    color:var(--auth-danger);
}


.auth-input .form-control.is-invalid{
    border:0 !important;

    background:#FFF5F5;

    box-shadow:none !important;
}


.auth-input .form-control.is-invalid:focus{
    border:0 !important;

    box-shadow:none !important;
}


.auth-card .form-control.is-invalid:not(.auth-input .form-control){
    border:2px solid var(--auth-danger) !important;

    background:#FFF5F5;

    box-shadow:none !important;
}


.auth-card .form-control.is-invalid:not(.auth-input .form-control):focus{
    border-color:var(--auth-danger) !important;

    box-shadow:
        0 0 0 .2rem
        rgba(220,53,69,.15) !important;
}


.auth-card .invalid-feedback{
    display:block;

    margin-top:.6rem;

    color:var(--auth-danger);

    font-size:.88rem;
    font-weight:500;
}


/* =========================================================
   PRIMARY BUTTON
   ========================================================= */

.auth-card .btn-success{
    display:flex;
    align-items:center;
    justify-content:center;

    height:60px;

    border:0;
    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            var(--auth-primary),
            var(--auth-primary-dark)
        );

    color:#fff;

    font-size:17px;
    font-weight:800;
    letter-spacing:.2px;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background-color .3s ease;
}


.auth-card .btn-success:hover{
    color:#fff;

    transform:translateY(-3px);

    box-shadow:
        0 15px 35px
        rgba(67,192,139,.35);
}


.auth-card .btn-success:active{
    transform:scale(.98);
}


/* =========================================================
   OUTLINE SUCCESS BUTTON
   ========================================================= */

.auth-card .btn-outline-success{
    display:flex;
    align-items:center;
    justify-content:center;

    height:60px;

    border:2px solid #D8EEE5;
    border-radius:18px;

    background:#fff;

    color:var(--auth-primary-dark);

    font-size:16px;
    font-weight:800;
    line-height:1;

    transition:
        transform .25s ease,
        border-color .25s ease,
        background-color .25s ease,
        color .25s ease;
}


.auth-card .btn-outline-success:hover{
    border-color:var(--auth-primary);

    background:var(--auth-primary-light);

    color:var(--auth-primary-dark);

    transform:translateY(-2px);
}


/* =========================================================
   LINKS
   ========================================================= */

.auth-card a{
    color:var(--auth-primary-dark);

    font-weight:700;

    text-decoration:none;

    transition:color .2s ease;
}


.auth-card a:hover{
    color:var(--auth-primary);
}


.auth-card small{
    color:#8B95A1;
}


/* =========================================================
   LOGIN TABS
   ========================================================= */

.auth-tabs{
    padding:6px;

    border-radius:20px;

    background:var(--auth-bg);
}


.auth-tabs .nav-link{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:7px;

    min-height:50px;

    border-radius:16px;

    color:var(--auth-muted);

    font-weight:700;

    transition:
        background-color .3s ease,
        color .3s ease,
        box-shadow .3s ease;
}


.auth-tabs .nav-link:hover{
    color:var(--auth-primary-dark);
}


.auth-tabs .nav-link.active{
    background:
        linear-gradient(
            135deg,
            var(--auth-primary),
            var(--auth-primary-dark)
        );

    color:#fff;

    box-shadow:
        0 8px 18px
        rgba(67,192,139,.30);
}


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

.auth-card hr{
    margin:35px 0;

    border-color:#ECECEC;

    opacity:1;
}


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

.otp-wrapper{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:.7rem;

    width:100%;

    direction:ltr;
}


.otp-input{
    flex:0 1 58px;

    width:58px;
    min-width:0;
    height:64px;

    padding:0 !important;

    border:2px solid #DEE2E6 !important;
    border-radius:14px !important;

    background:#fff;

    font-size:1.6rem !important;
    font-weight:800;

    text-align:center;

    outline:none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background-color .2s ease;
}


.otp-input:hover{
    border-color:#CBD5E1 !important;
}


.otp-input:focus{
    border-color:var(--auth-primary) !important;

    box-shadow:
        0 0 0 .15rem
        rgba(67,192,139,.15) !important;
}


/* =========================================================
   OTP COUNTDOWN
   ========================================================= */

.countdown-box{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:.8rem;

    padding:.9rem;

    border-radius:14px;

    background:#F8FAFB;

    color:var(--auth-text);

    font-size:15px;
    font-weight:700;
}


.countdown-box strong{
    color:var(--auth-primary-dark);

    font-size:1.2rem;
    font-weight:900;
}


/* =========================================================
   OTP RESEND BUTTON
   ========================================================= */

.auth-resend-btn{
    appearance:none;
    -webkit-appearance:none;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:.5rem;

    min-height:44px;

    padding:.65rem 1.25rem;

    border:
        1px solid
        rgba(47,143,104,.24);

    border-radius:999px;

    background:#EFFAF5;

    color:var(--auth-primary-dark);

    box-shadow:
        0 6px 18px
        rgba(47,143,104,.08);

    font-family:inherit;

    font-size:.95rem;
    font-weight:800;
    line-height:1.4;

    cursor:pointer;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}


.auth-resend-btn i{
    font-size:1rem;
}


.auth-resend-btn:not(:disabled):hover{
    border-color:
        rgba(47,143,104,.45);

    background:#E1F6EC;

    color:#267A5A;

    box-shadow:
        0 8px 22px
        rgba(47,143,104,.15);

    transform:translateY(-1px);
}


.auth-resend-btn:not(:disabled):active{
    transform:translateY(0);
}


.auth-resend-btn:focus-visible{
    outline:
        3px solid
        rgba(67,192,139,.25);

    outline-offset:3px;
}


.auth-resend-btn:disabled{
    border-color:#E5E7EB;

    background:#F8F9FA;

    color:#9CA3AF;

    box-shadow:none;

    cursor:not-allowed;

    opacity:.75;
}


.auth-resend-btn.is-loading i{
    animation:
        otpResendSpin
        .8s
        linear
        infinite;
}


@keyframes otpResendSpin{

    to{
        transform:rotate(360deg);
    }

}


/* =========================================================
   OTP ALERT
   ========================================================= */

#otp-alert{
    margin-top:18px;
    margin-bottom:18px;

    border-radius:14px;

    font-size:.95rem;

    text-align:center;
}


/* =========================================================
   OTP BACK BUTTON
   ========================================================= */

.auth-back-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:220px;
    min-width:170px;
    height:52px;

    margin:0 auto;

    border:1px solid #DCE3E0;
    border-radius:16px;

    background:#fff;

    color:#64748B !important;

    font-weight:700;

    transition:
        border-color .2s ease,
        background-color .2s ease,
        color .2s ease,
        transform .2s ease;
}


.auth-back-btn:hover{
    border-color:#CDE7DC;

    background:#F3FAF7;

    color:var(--auth-primary-dark) !important;

    transform:translateY(-1px);
}


/* =========================================================
   GENERIC DISABLED STATE
   ========================================================= */

.auth-card .disabled{
    pointer-events:none;

    opacity:.5;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:768px){

    .auth-page{
        padding:110px 15px 40px;
    }


    .auth-card{
        padding:34px 22px;

        border-radius:24px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:575.98px){

    .auth-page{
        padding:
            110px
            15px
            40px;
    }


    .auth-card{
        padding:
            30px
            20px;

        border-radius:24px;
    }


    .auth-card:hover{
        transform:none;
    }


    /* -----------------------------------------
       Header
       ----------------------------------------- */

    .auth-header{
        margin-bottom:30px;
    }


    /*
       On mobile all auth pages use:

       Logo
       Badge
       Title
       Subtitle
    */

    .auth-brand-row{
        flex-direction:column;
        align-items:center;
        justify-content:center;

        gap:12px;

        margin-bottom:22px;
    }


    .auth-logo-link{
        transform:none;
    }


    .auth-logo{
        width:72px;
        height:72px;
    }


    .auth-badge{
        min-height:auto;

        max-width:260px;

        padding:10px 14px;

        font-size:12px;
        line-height:1.8;

        text-align:center;

        white-space:normal;
    }


    .auth-badge span{
        text-align:center;
    }


    .auth-badge i{
        font-size:14px;
    }


    .auth-title{
        font-size:26px;
    }


    .auth-subtitle{
        font-size:14px;
    }


    /* -----------------------------------------
       Phone
       ----------------------------------------- */

    .auth-phone{
        width:100%;

        justify-content:center;
    }


    /* -----------------------------------------
       OTP
       ----------------------------------------- */

    .otp-wrapper{
        gap:.35rem;
    }


    .otp-input{
        flex:
            0
            1
            clamp(38px,10.8vw,46px);

        width:
            clamp(38px,10.8vw,46px);

        height:54px;

        border-radius:10px !important;

        font-size:1.35rem !important;
    }


    .countdown-box{
        flex-direction:column;

        gap:.25rem;
    }


    /* -----------------------------------------
       Buttons
       ----------------------------------------- */

    .auth-card .btn-success,
    .auth-card .btn-outline-success{
        height:56px;
    }


    .auth-back-btn{
        width:100%;
        max-width:220px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width:420px){

    .auth-card{
        padding:
            26px
            18px;
    }


    .auth-badge{
        max-width:240px;
    }


    .auth-title{
        font-size:24px;
    }

}