/* ==========================================================
   SHOT AGENCY AUTHENTICATION
========================================================== */

* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}


body.auth-page {

    min-height: 100vh;

    background:
        radial-gradient(
            circle at top left,
            rgba(37, 99, 235, .12),
            transparent 35%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(79, 70, 229, .12),
            transparent 35%
        ),
        #f5f7fb;

    color: #0f172a;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 40px 20px;

}


/* ==========================================================
   SHELL
========================================================== */

.auth-shell {

    width: 100%;

    max-width: 480px;

    display: flex;

    flex-direction: column;

    align-items: center;

}


/* ==========================================================
   BRAND
========================================================== */

.auth-brand {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 25px;

}


.auth-brand-mark {

    width: 48px;

    height: 48px;

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #4f46e5
        );

    color: #fff;

    font-size: 15px;

    font-weight: 800;

    letter-spacing: .04em;

    box-shadow:
        0 8px 20px
        rgba(37, 99, 235, .25);

}


.auth-brand-name {

    color: #0f172a;

    font-size: 1.15rem;

    font-weight: 800;

    line-height: 1.2;

}


.auth-brand-subtitle {

    color: #64748b;

    font-size: .78rem;

    margin-top: 3px;

}


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

.auth-card {

    width: 100%;

    background: #fff;

    border: 1px solid #e2e8f0;

    border-radius: 24px;

    padding: 40px;

    box-shadow:
        0 20px 60px
        rgba(15, 23, 42, .08);

}


/* ==========================================================
   CARD HEADER
========================================================== */

.auth-card-header {

    text-align: center;

    margin-bottom: 30px;

}


.auth-icon {

    width: 64px;

    height: 64px;

    margin: 0 auto 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #eff6ff,
            #eef2ff
        );

    border: 1px solid #dbeafe;

    font-size: 28px;

}


.auth-card-header h1 {

    margin: 0 0 10px;

    color: #0f172a;

    font-size: 1.75rem;

    font-weight: 750;

    letter-spacing: -.025em;

}


.auth-card-header p {

    margin: 0 auto;

    max-width: 380px;

    color: #64748b;

    font-size: .92rem;

    line-height: 1.65;

}


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

.auth-form {

    display: flex;

    flex-direction: column;

    gap: 20px;

}


.form-group {

    display: flex;

    flex-direction: column;

    gap: 8px;

}


.form-group label {

    color: #334155;

    font-size: .88rem;

    font-weight: 650;

}


.form-label-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

}


.form-label-row a {

    color: #2563eb;

    font-size: .82rem;

    font-weight: 650;

    text-decoration: none;

}


.form-label-row a:hover {

    color: #1d4ed8;

    text-decoration: underline;

}


.form-group input {

    width: 100%;

    height: 52px;

    padding: 0 15px;

    border: 1px solid #cbd5e1;

    border-radius: 13px;

    background: #fff;

    color: #0f172a;

    font-size: .95rem;

    outline: none;

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

}


.form-group input::placeholder {

    color: #94a3b8;

}


.form-group input:hover {

    border-color: #94a3b8;

}


.form-group input:focus {

    border-color: #2563eb;

    background: #fff;

    box-shadow:
        0 0 0 4px
        rgba(37, 99, 235, .10);

}


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

.auth-button {

    width: 100%;

    height: 52px;

    border: 0;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #4f46e5
        );

    color: #fff;

    font-size: .95rem;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 8px 20px
        rgba(37, 99, 235, .22);

    transition:
        transform .2s,
        box-shadow .2s,
        opacity .2s;

}


.auth-button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 12px 28px
        rgba(37, 99, 235, .30);

}


.auth-button:active {

    transform: translateY(0);

}


.auth-button:focus-visible {

    outline: 3px solid
        rgba(37, 99, 235, .25);

    outline-offset: 2px;

}


/* ==========================================================
   SECONDARY BUTTON
========================================================== */

.auth-secondary-button {

    width: 100%;

    min-height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 12px 20px;

    border: 1px solid #cbd5e1;

    border-radius: 13px;

    background: #fff;

    color: #334155;

    font-size: .9rem;

    font-weight: 650;

    text-decoration: none;

    transition:
        background .2s,
        border-color .2s,
        color .2s;

}


.auth-secondary-button:hover {

    background: #f8fafc;

    border-color: #94a3b8;

    color: #0f172a;

}


/* ==========================================================
   ALERTS
========================================================== */

.alert {

    padding: 14px 16px;

    border-radius: 13px;

    margin-bottom: 20px;

    font-size: .88rem;

    line-height: 1.5;

}


.alert-error {

    color: #991b1b;

    background: #fef2f2;

    border: 1px solid #fecaca;

}


.alert-success {

    color: #166534;

    background: #f0fdf4;

    border: 1px solid #bbf7d0;

    display: flex;

    flex-direction: column;

    gap: 3px;

}


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

.auth-divider {

    display: flex;

    align-items: center;

    gap: 15px;

    margin: 28px 0;

    color: #94a3b8;

    font-size: .72rem;

    font-weight: 700;

    letter-spacing: .08em;

}


.auth-divider::before,
.auth-divider::after {

    content: "";

    height: 1px;

    flex: 1;

    background: #e2e8f0;

}


/* ==========================================================
   FOOTER
========================================================== */

.auth-footer {

    text-align: center;

}


.auth-footer p {

    margin: 0 0 12px;

    color: #64748b;

    font-size: .88rem;

}


/* ==========================================================
   BACK LINK
========================================================== */

.auth-back {

    text-align: center;

    margin-top: 25px;

    padding-top: 22px;

    border-top: 1px solid #f1f5f9;

}


.auth-back a {

    color: #64748b;

    font-size: .85rem;

    font-weight: 600;

    text-decoration: none;

}


.auth-back a:hover {

    color: #2563eb;

}


/* ==========================================================
   RESET EMAIL
========================================================== */

.reset-email {

    text-align: center;

    margin: -10px 0 25px;

    padding: 12px 15px;

    border-radius: 12px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    color: #334155;

    font-size: .88rem;

    font-weight: 650;

    word-break: break-word;

}


/* ==========================================================
   VERIFICATION CODE
========================================================== */

.verification-input {

    text-align: center;

    font-size: 1.5rem !important;

    font-weight: 750;

    letter-spacing: .35em;

    padding-left: .6em !important;

}


.auth-help {

    text-align: center;

    margin-top: 25px;

}


.auth-help p {

    margin: 0 0 6px;

    color: #64748b;

    font-size: .85rem;

}


.auth-help a {

    color: #2563eb;

    font-size: .87rem;

    font-weight: 650;

    text-decoration: none;

}


.auth-help a:hover {

    text-decoration: underline;

}


/* ==========================================================
   PASSWORD HINT
========================================================== */

.form-hint {

    color: #94a3b8;

    font-size: .78rem;

    margin-top: -2px;

}


/* ==========================================================
   SECURITY MESSAGE
========================================================== */

.auth-security {

    display: flex;

    align-items: flex-start;

    gap: 8px;

    margin-top: 25px;

    padding: 13px 15px;

    border-radius: 12px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    color: #64748b;

    font-size: .78rem;

    line-height: 1.5;

}


.auth-security span {

    color: #10b981;

    font-weight: 800;

}


/* ==========================================================
   BOTTOM COPYRIGHT
========================================================== */

.auth-bottom {

    margin-top: 25px;

    color: #94a3b8;

    font-size: .75rem;

    text-align: center;

}


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

@media (max-width: 600px) {

    body.auth-page {

        align-items: flex-start;

        padding:
            25px
            15px
            30px;

    }


    .auth-shell {

        max-width: 100%;

    }


    .auth-brand {

        margin-bottom: 20px;

    }


    .auth-card {

        padding: 28px 22px;

        border-radius: 20px;

    }


    .auth-card-header h1 {

        font-size: 1.5rem;

    }


    .auth-card-header p {

        font-size: .87rem;

    }


    .auth-icon {

        width: 58px;

        height: 58px;

        font-size: 25px;

    }


    .form-label-row {

        align-items: flex-start;

    }


    .verification-input {

        font-size: 1.3rem !important;

    }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

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

    *,
    *::before,
    *::after {

        transition: none !important;

        animation: none !important;

    }

}