/* ============================================

   SAM - Authentication Pages

   Shared styles for:

   login

   register

   OTP

   verify

   forgot password

   change phone

   set password

   edit profile

   ============================================ */





/* ============================================

   Page

   ============================================ */



.auth-page,

.login-page,

.register-page,

.set-password-page,

.edit-form-page {

    min-height: calc(100vh - 200px);



    padding:

        var(--space-6)

        0;

}





/* ============================================

   Main Width

   ============================================ */



.auth-page .container,

.login-page .container,

.register-page .container,

.set-password-page .container,

.edit-form-page .container {

    width: 100%;



    max-width: 1200px;



    margin: 0 auto;



    padding-inline: var(--space-4);

}





/* ============================================

   Page Header

   ============================================ */



.page-header {

    max-width: 620px;



    margin:

        0 auto

        var(--space-5);



    text-align: center;

}





.auth-page-icon {

    display: flex;



    width: 52px;

    height: 52px;



    align-items: center;

    justify-content: center;



    margin:

        0 auto

        12px;



    color:

        var(--primary-clr);



    font-size: 1.35rem;



    background:

        rgba(13, 79, 145, 0.08);



    border-radius: 15px;

}





.page-title {

    display: flex;



    align-items: center;

    justify-content: center;



    gap: 8px;



    margin:

        0 0

        var(--space-2);



    color:

        var(--primary-clr);



    font-size:

        var(--fs-xl);



    font-weight: 700;

}





.page-title i {

    color:

        var(--secondary-clr);

}





.page-description {

    max-width: 500px;



    margin: 0 auto;



    color:

        var(--muted-text-clr);



    font-size:

        var(--fs-sm);



    line-height: 1.8;

}





/* ============================================

   Form Card

   ============================================ */



.form-card {

    width: 100%;



    max-width: 540px;



    margin: 0 auto;



    overflow: hidden;



    background:

        var(--surface-clr);



    border:

        1px solid

        var(--border-clr);



    border-radius:

        var(--radius-lg);



    box-shadow:

        0 8px 28px

        rgba(8, 42, 74, 0.08);

}





/* ============================================

   Form Header

   ============================================ */



.form-card-header {

    position: relative;



    display: flex;



    align-items: center;



    gap: 12px;



    padding: 20px;



    overflow: hidden;



    color: #ffffff;



    background:

        linear-gradient(

            135deg,

            #082a4a 0%,

            #0d4f91 58%,

            #0969da 100%

        );

}





.form-card-header::before {

    content: "";



    position: absolute;



    width: 145px;

    height: 145px;



    top: -90px;

    right: -55px;



    background:

        rgba(255, 255, 255, 0.06);



    border-radius: 50%;

}





.form-card-header::after {

    content: "";



    position: absolute;



    width: 150px;

    height: 150px;



    left: -70px;

    bottom: -110px;



    background:

        rgba(255, 255, 255, 0.04);



    border-radius: 50%;

}





.form-card-header > i {

    position: relative;



    z-index: 1;



    display: flex;



    width: 44px;

    height: 44px;



    flex:

        0 0 44px;



    align-items: center;

    justify-content: center;



    color:

        var(--secondary-clr);



    font-size: 1.25rem;



    background:

        rgba(255, 255, 255, 0.10);



    border:

        1px solid

        rgba(255, 255, 255, 0.12);



    border-radius: 12px;

}





.form-card-header h2 {

    position: relative;



    z-index: 1;



    margin: 0;



    color: #ffffff;



    font-size:

        var(--fs-md);



    font-weight: 700;

}





/* ============================================

   Form Body

   ============================================ */



.form-card-body {

    padding: 24px;

}





.login-form,

.register-form,

.set-password-form,

.edit-form,

.auth-form {

    width: 100%;

}





/* ============================================

   Form Group

   ============================================ */



.form-group {

    margin-bottom: 18px;

}





.form-label {

    display: flex;



    align-items: center;



    gap: 6px;



    margin-bottom: 8px;



    color:

        var(--main-text-clr);



    font-size:

        var(--fs-sm);



    font-weight: 650;

}





.required-star {

    color:

        var(--danger-clr);

}





/* ============================================

   Inputs

   ============================================ */



.form-control {

    display: block;



    width: 100%;



    height: 48px;



    padding:

        0 14px;



    color:

        var(--main-text-clr);



    font-family:

        var(--primary-fonts);



    font-size:

        var(--fs-sm);



    background:

        var(--bg-clr);



    border:

        1px solid

        var(--border-clr);



    border-radius: 10px;



    transition:

        border-color 0.18s ease,

        box-shadow 0.18s ease,

        background 0.18s ease;

}





.form-control:hover {

    border-color:

        rgba(13, 79, 145, 0.28);

}





.form-control:focus {

    outline: none;



    background: #ffffff;



    border-color:

        var(--primary-clr);



    box-shadow:

        0 0 0 3px

        rgba(13, 79, 145, 0.08);

}





.form-control::placeholder {

    color:

        var(--muted-text-clr);



    opacity: 0.65;

}





.form-control.is-invalid {

    border-color:

        var(--danger-clr);

}





/* Phone / Password */



input[type="tel"],

input[name="phone"],

input[type="password"],

.otp-input {

    direction: ltr;



    text-align: left;

}





/* ============================================

   OTP

   ============================================ */



.otp-input {

    height: 56px;



    font-family:

        var(--persin-number-fonts);



    font-size: 1.4rem;



    font-weight: 700;



    letter-spacing: 8px;



    text-align: center;

}





/* ============================================

   Help Text

   ============================================ */



.form-text,

.field-help {

    display: block;



    margin-top: 7px;



    color:

        var(--muted-text-clr);



    font-size:

        var(--fs-xs);



    line-height: 1.7;

}





.text-muted {

    color:

        var(--muted-text-clr);

}





/* ============================================

   Errors

   ============================================ */



.error-message,

.form-error-box {

    display: flex;



    align-items: flex-start;



    gap: 7px;



    padding:

        8px 10px;



    margin-top: 8px;



    color:

        var(--danger-clr);



    font-size:

        var(--fs-xs);



    line-height: 1.6;



    background:

        rgba(220, 38, 38, 0.06);



    border-right:

        3px solid

        var(--danger-clr);



    border-radius: 8px;

}





.form-error-box {

    margin:

        0 0 16px;

}





/* ============================================

   Remember Me

   ============================================ */



.remember_me,

.remember-me {

    display: flex;



    align-items: center;



    gap: 8px;



    margin-top: -3px;



    margin-bottom: 18px;

}





.remember-checkbox {

    width: 17px;

    height: 17px;



    accent-color:

        var(--primary-clr);



    cursor: pointer;

}





.remember_me label,

.remember-me label {

    margin: 0;



    color:

        var(--muted-text-clr);



    font-size:

        var(--fs-xs);



    cursor: pointer;

}





/* ============================================

   Buttons

   ============================================ */



.form-actions {

    display: flex;



    gap: 9px;



    margin-top: 20px;

}





.form-actions .btn {

    display: inline-flex;



    width: 100%;



    min-height: 46px;



    align-items: center;

    justify-content: center;



    gap: 7px;



    padding:

        8px 14px;



    font-family:

        var(--primary-fonts);



    font-size:

        var(--fs-sm);



    font-weight: 650;



    text-decoration: none;



    border-radius: 10px;



    cursor: pointer;



    transition:

        transform 0.18s ease,

        box-shadow 0.18s ease,

        background 0.18s ease;

}





.btn-primary {

    color: #ffffff;



    background:

        linear-gradient(

            135deg,

            var(--primary-clr),

            #0d6efd

        );



    border:

        1px solid transparent;

}





.btn-primary:hover {

    color: #ffffff;



    transform:

        translateY(-2px);



    box-shadow:

        0 7px 18px

        rgba(13, 79, 145, 0.18);

}





.btn-outline {

    color:

        var(--primary-clr);



    background:

        transparent;



    border:

        1px solid

        rgba(13, 79, 145, 0.24);

}





.btn-outline:hover {

    color: #ffffff;



    background:

        var(--primary-clr);

}





.btn:disabled,

button:disabled {

    cursor: not-allowed;



    opacity: 0.55;



    transform: none;



    box-shadow: none;

}





/* ============================================

   Divider

   ============================================ */



.divider {

    height: 1px;



    margin:

        22px 0;



    border: 0;



    background:

        linear-gradient(

            to right,

            transparent,

            var(--border-clr),

            transparent

        );

}





/* ============================================

   Authentication Links

   ============================================ */



.auth-links {

    display: grid;



    gap: 8px;

}





.auth-link {

    display: flex;



    min-height: 43px;



    align-items: center;



    gap: 8px;



    padding:

        8px 11px;



    color:

        var(--primary-clr);



    font-size:

        var(--fs-xs);



    font-weight: 600;



    text-decoration: none;



    background:

        rgba(13, 79, 145, 0.035);



    border:

        1px solid

        rgba(13, 79, 145, 0.07);



    border-radius: 9px;



    transition:

        background 0.18s ease,

        transform 0.18s ease;

}





.auth-link:hover {

    color:

        var(--primary-clr);



    background:

        rgba(13, 79, 145, 0.075);



    transform:

        translateY(-1px);

}





.auth-link i {

    display: flex;



    width: 27px;

    height: 27px;



    flex:

        0 0 27px;



    align-items: center;

    justify-content: center;



    color:

        var(--primary-clr);



    background:

        rgba(13, 79, 145, 0.08);



    border-radius: 7px;

}





.auth-link.forgot {

    color:

        var(--muted-text-clr);

}





/* ============================================

   Footer

   ============================================ */



.form-footer {

    margin-top: 20px;



    color:

        var(--muted-text-clr);



    font-size:

        var(--fs-xs);



    text-align: center;

}





.form-footer p {

    margin: 0;

}





.form-footer .link,

.form-footer a,

.link {

    color:

        var(--primary-clr);



    font-weight: 650;



    text-decoration: none;

}





.form-footer a:hover,

.link:hover {

    text-decoration: underline;

}





/* ============================================

   Password Requirements

   ============================================ */



.password-requirements {

    padding: 12px;



    margin:

        4px 0

        18px;



    background:

        rgba(13, 79, 145, 0.04);



    border:

        1px solid

        rgba(13, 79, 145, 0.07);



    border-radius: 10px;

}





.requirements-title {

    margin:

        0 0

        8px;



    color:

        var(--primary-clr);



    font-size:

        var(--fs-xs);



    font-weight: 700;

}





.requirements-list {

    display: grid;



    gap: 6px;



    padding: 0;



    margin: 0;



    list-style: none;

}





.requirements-list li {

    display: flex;



    align-items: flex-start;



    gap: 6px;



    color:

        var(--muted-text-clr);



    font-size:

        var(--fs-xs);



    line-height: 1.7;

}





.requirements-list i {

    flex-shrink: 0;



    margin-top: 2px;



    color:

        var(--success-clr);

}





/* ============================================

   Security Info

   ============================================ */



.auth-security-box {

    display: flex;



    align-items: flex-start;



    gap: 9px;



    padding: 11px;



    margin:

        18px 0;



    background:

        rgba(22, 163, 74, 0.05);



    border:

        1px solid

        rgba(22, 163, 74, 0.09);



    border-radius: 10px;

}





.auth-security-icon {

    display: flex;



    width: 32px;

    height: 32px;



    flex:

        0 0 32px;



    align-items: center;

    justify-content: center;



    color:

        var(--success-clr);



    background:

        rgba(22, 163, 74, 0.10);



    border-radius: 8px;

}





.auth-security-box > div {

    display: flex;



    flex-direction: column;



    gap: 2px;

}





.auth-security-box strong {

    color:

        var(--primary-clr);



    font-size:

        var(--fs-xs);

}





.auth-security-box span {

    color:

        var(--muted-text-clr);



    font-size:

        var(--fs-xs);



    line-height: 1.7;

}





/* ============================================

   Edit Profile Special Case

   ============================================ */



.edit-form-page .form-actions {

    display: grid;



    grid-template-columns:

        1.4fr 1fr;

}





/* ============================================

   Mobile

   ============================================ */



@media (max-width: 768px) {



    .auth-page,

    .login-page,

    .register-page,

    .set-password-page,

    .edit-form-page {

        padding:

            var(--space-4)

            0 90px;

    }





    .auth-page .container,

    .login-page .container,

    .register-page .container,

    .set-password-page .container,

    .edit-form-page .container {

        padding-inline: 12px;

    }





    /* Header */



    .page-header {

        margin-bottom: 14px;

    }





    .auth-page-icon {

        width: 42px;

        height: 42px;



        margin-bottom: 8px;



        font-size: 1rem;



        border-radius: 11px;

    }





    .page-title {

        font-size:

            var(--fs-lg);

    }





    .page-description {

        max-width: 320px;



        font-size: 0.63rem;



        line-height: 1.7;

    }





    /* Card */



    .form-card {

        max-width: 100%;



        border-radius: 14px;

    }





    .form-card-header {

        gap: 9px;



        padding: 12px;

    }





    .form-card-header > i {

        width: 36px;

        height: 36px;



        flex-basis: 36px;



        font-size: 0.9rem;



        border-radius: 9px;

    }





    .form-card-header h2 {

        font-size: 0.72rem;

    }





    .form-card-body {

        padding: 13px;

    }





    /* Form */



    .form-group {

        margin-bottom: 15px;

    }





    .form-label {

        margin-bottom: 7px;



        font-size: 0.64rem;

    }





    .form-control {

        height: 43px;



        padding:

            0 11px;



        font-size: 0.65rem;



        border-radius: 9px;

    }





    .otp-input {

        height: 50px;



        font-size: 1.15rem;



        letter-spacing: 6px;

    }





    .form-text,

    .field-help {

        font-size: 0.52rem;

    }





    .remember_me,

    .remember-me {

        margin-bottom: 14px;

    }





    .remember_me label,

    .remember-me label {

        font-size: 0.56rem;

    }





    /* Buttons */



    .form-actions {

        margin-top: 15px;

    }





    .form-actions .btn {

        min-height: 41px;



        padding: 7px;



        font-size: 0.62rem;



        border-radius: 8px;

    }





    /* Links */



    .divider {

        margin:

            17px 0;

    }





    .auth-links {

        gap: 6px;

    }





    .auth-link {

        min-height: 39px;



        padding: 6px 8px;



        font-size: 0.57rem;



        border-radius: 8px;

    }





    .auth-link i {

        width: 24px;

        height: 24px;



        flex-basis: 24px;



        font-size: 0.65rem;

    }





    /* Password */



    .password-requirements {

        padding: 9px;



        margin-bottom: 14px;

    }





    .requirements-title,

    .requirements-list li {

        font-size: 0.54rem;

    }





    /* Edit */



    .edit-form-page .form-actions {

        grid-template-columns:

            repeat(2, minmax(0, 1fr));

    }



}





/* ============================================

   Small Phones

   ============================================ */



@media (max-width: 380px) {



    .auth-page .container,

    .login-page .container,

    .register-page .container,

    .set-password-page .container,

    .edit-form-page .container {

        padding-inline: 9px;

    }





    .form-card-body {

        padding: 10px;

    }





    .page-description {

        max-width: 280px;

    }





    .edit-form-page .form-actions {

        grid-template-columns: 1fr;

    }



}

/* P2E - mobile accessibility and motion preferences */
@media (max-width: 768px) {
    .auth-link { min-height: 44px; }
    .remember-checkbox { width: 20px; height: 20px; }
    .remember_me label, .remember-me label { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
    .auth-page *, .auth-page *::before, .auth-page *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}