@import url("./estedad-local.css");

:root {
    color-scheme: only light;
    --auth-red: #7a0019;
    --auth-red-dark: #520011;
    --auth-gold: #d4af37;
    --auth-bg: #f6f2ed;
    --auth-text: #231f20;
    --auth-muted: #746b6d;
    --auth-border: #e7ded7;
    --auth-white: #ffffff;
    --auth-danger: #9b1c31;
    --auth-success: #247347;
}

* {
    box-sizing: border-box;
}

html {
    direction: rtl;
}

body.auth-page {
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background:
        radial-gradient(circle at 15% 15%, rgba(212, 175, 55, .14), transparent 34%),
        radial-gradient(circle at 85% 85%, rgba(122, 0, 25, .10), transparent 38%),
        var(--auth-bg);
    color: var(--auth-text);
    font-family: "Estedad", Tahoma, Arial, sans-serif;
}

.auth-shell {
    width: min(100%, 440px);
}

.auth-home {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}

.auth-logo {
    width: 92px;
    height: auto;
    display: block;
}

.auth-card {
    background: rgba(255, 255, 255, .96);
    border: 1px solid var(--auth-border);
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 22px 60px rgba(70, 35, 40, .12);
}

.auth-heading {
    margin: 0 0 8px;
    color: var(--auth-red);
    font-size: 27px;
    text-align: center;
}

.auth-subtitle {
    margin: 0 0 28px;
    color: var(--auth-muted);
    font-size: 14px;
    line-height: 1.9;
    text-align: center;
}

.auth-field {
    margin-bottom: 18px;
}

.auth-field label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700;
}

.auth-field input {
    width: 100%;
    min-height: 50px;
    border: 1px solid var(--auth-border);
    border-radius: 14px;
    padding: 0 14px;
    background: var(--auth-white);
    color: var(--auth-text);
    font: inherit;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.auth-field input:focus {
    border-color: var(--auth-gold);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, .14);
}

.auth-submit {
    width: 100%;
    min-height: 52px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--auth-red), var(--auth-red-dark));
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.auth-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(122, 0, 25, .22);
}

.auth-submit:disabled {
    cursor: wait;
    opacity: .65;
    transform: none;
    box-shadow: none;
}

.auth-status {
    margin: 0 0 18px;
    padding: 11px 13px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.8;
}

.auth-status[hidden] {
    display: none;
}

.auth-status[data-state="error"] {
    background: #fff0f2;
    color: var(--auth-danger);
}

.auth-status[data-state="success"] {
    background: #eef9f2;
    color: var(--auth-success);
}

.auth-status[data-state="loading"] {
    background: #faf6e8;
    color: #665419;
}

.auth-links {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--auth-border);
    text-align: center;
    font-size: 14px;
    line-height: 2;
}

.auth-links p {
    margin: 0 0 4px;
    color: var(--auth-muted);
}

.auth-links a {
    color: var(--auth-red);
    font-weight: 700;
    text-decoration: none;
}

.auth-links a:hover {
    text-decoration: underline;
}

.auth-back {
    display: inline-block;
    margin-top: 10px;
    color: var(--auth-muted) !important;
    font-weight: 400 !important;
}

@media (max-width: 520px) {
    body.auth-page {
        align-items: flex-start;
        padding-top: 28px;
    }

    .auth-card {
        padding: 26px 20px;
        border-radius: 20px;
    }

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

    .auth-logo {
        width: 78px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}


/* RAD2 LOGIN HOMEGZ LOGO V1 START */

/*
 * Login identity must use the SAME visual logo
 * as the storefront homepage.
 */

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

    width:max-content;
    max-width:min(100%,360px);

    margin-inline:auto;

    text-decoration:none;
}

.auth-logo.auth-logo-homegz{
    display:block;

    width:clamp(155px,22vw,235px);
    max-width:100%;
    height:auto;
    max-height:118px;

    margin:0 auto;

    object-fit:contain;

    /*
     * No green/colored plate behind the logo.
     * Let the original HOME with GZ artwork breathe.
     */
    padding:0;

    border:0;
    border-radius:0;

    background:transparent;

    box-shadow:none;

    filter:
        drop-shadow(
            0 8px 18px
            rgba(73,35,32,.08)
        );

    transition:
        transform .22s ease,
        filter .22s ease;
}

@media(hover:hover){
    .auth-home:hover
    .auth-logo.auth-logo-homegz{
        transform:
            translateY(-2px);

        filter:
            drop-shadow(
                0 11px 22px
                rgba(122,22,49,.12)
            );
    }
}

@media(max-width:600px){
    .auth-logo.auth-logo-homegz{
        width:
            clamp(145px,48vw,195px);

        max-height:100px;
    }
}

@media(prefers-reduced-motion:reduce){
    .auth-logo.auth-logo-homegz{
        transition:none !important;
    }
}

/* RAD2 LOGIN HOMEGZ LOGO V1 END */