/* ==========================================================================
   GreenMarket — sign-in / sign-up / OTP (auth v3)
   Same tokens as the site shell: GMSans, #00b274 green, 12–16px radii.
   ========================================================================== */
@font-face { font-family: "GMSans"; font-weight: 400; font-display: swap; src: url("../../assets/fonts/IranSans/FarsiNumerals/Webfonts/Woff2/IRANSansXFaNum-Regular.woff2") format("woff2"); }
@font-face { font-family: "GMSans"; font-weight: 500; font-display: swap; src: url("../../assets/fonts/IranSans/FarsiNumerals/Webfonts/Woff2/IRANSansXFaNum-Medium.woff2") format("woff2"); }
@font-face { font-family: "GMSans"; font-weight: 600; font-display: swap; src: url("../../assets/fonts/IranSans/FarsiNumerals/Webfonts/Woff2/IRANSansXFaNum-DemiBold.woff2") format("woff2"); }
@font-face { font-family: "GMSans"; font-weight: 700; font-display: swap; src: url("../../assets/fonts/IranSans/FarsiNumerals/Webfonts/Woff2/IRANSansXFaNum-Bold.woff2") format("woff2"); }
@font-face { font-family: "GMSans"; font-weight: 800; font-display: swap; src: url("../../assets/fonts/IranSans/FarsiNumerals/Webfonts/Woff2/IRANSansXFaNum-ExtraBold.woff2") format("woff2"); }

.gm-au-page {
    --au-green: #00b274;
    --au-green-600: #008e5d;
    --au-green-50: #e9f8f1;
    --au-ink: #1f1f1f;
    --au-ink-2: #3e3e3e;
    --au-muted: #7a7a7a;
    --au-line: #e4e4e4;
    --au-bg: #f5f6f8;
    --au-red: #e5484d;
    --au-ease: cubic-bezier(.2, .7, .2, 1);
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 0 !important;
    background:
        radial-gradient(1200px 520px at 100% -10%, rgba(0, 178, 116, .10), transparent 60%),
        radial-gradient(900px 480px at -10% 110%, rgba(0, 178, 116, .08), transparent 60%),
        var(--au-bg) !important;
    color: var(--au-ink);
    direction: rtl;
    text-align: right;
    min-width: 0 !important;
}

.gm-au-page,
.gm-au-page :where(*:not(i):not([class^="fa"]):not([class*=" fa-"])) {
    font-family: "GMSans", "IRANSansX", Tahoma, sans-serif !important;
}

.gm-au-page *,
.gm-au-page *::before,
.gm-au-page *::after {
    box-sizing: border-box;
}

.gm-au-page .gm-auth,
.gm-au-page .gm-auth__bg {
    display: none !important;
}

.gm-au {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 32px 16px 24px;
}

.gm-au__card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    width: min(920px, 100%);
    min-height: 560px;
    overflow: hidden;
    border: 1px solid rgba(12, 12, 13, .05);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(12, 12, 13, .04), 0 24px 60px -24px rgba(12, 12, 13, .18);
    animation: gm-au-in .45s var(--au-ease) both;
}

@keyframes gm-au-in {
    from { opacity: 0; transform: translateY(12px); }
}

.gm-au__main {
    display: flex;
    flex-direction: column;
    padding: 28px 48px 36px;
}

@media (min-width: 992px) {
    .gm-au__main > .gm-au__head { margin-top: auto; }
    .gm-au__main > :last-child { margin-bottom: auto; }
    .gm-au__top { margin-bottom: 24px; }
}

/* top row */
.gm-au__top {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    margin-bottom: 36px;
}

.gm-au__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f4f4f4;
    color: var(--au-ink-2) !important;
    text-decoration: none !important;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.gm-au__back:hover {
    background: var(--au-green-50);
    color: var(--au-green-600) !important;
}

.gm-au__back:active { transform: scale(.92); }

.gm-au__logo {
    justify-self: center;
    display: inline-flex;
}

.gm-au__logo img {
    display: block;
    width: auto;
    height: 44px;
    max-width: 180px;
    object-fit: contain;
}

/* heading */
.gm-au__head {
    margin-bottom: 28px;
}

.gm-au__title {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 800;
    line-height: 36px;
    color: var(--au-ink);
}

.gm-au__subtitle {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    color: var(--au-muted);
}

.gm-au__phone {
    display: inline-block;
    margin: 0 2px;
    font-weight: 700;
    color: var(--au-ink);
    letter-spacing: .02em;
    unicode-bidi: isolate;
}

.gm-au__edit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--au-green-50);
    color: var(--au-green-600) !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none !important;
    transition: background-color .15s ease;
}

.gm-au__edit:hover { background: #d9f2e6; }

/* alert */
.gm-au__alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: -8px 0 20px;
    padding: 12px 14px;
    border: 1px solid #fbd5d6;
    border-radius: 12px;
    background: #fff4f4;
    color: #b42318;
    font-size: 13px;
    font-weight: 500;
    line-height: 22px;
}

.gm-au__alert svg { flex: none; margin-top: 2px; }
.gm-au__alert p { margin: 0; }

/* form */
.gm-au__form {
    display: flex;
    flex-direction: column;
}

.gm-au__field {
    margin-bottom: 20px;
}

.gm-au__label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.gm-au__label {
    display: block;
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
    color: var(--au-ink-2);
    text-align: right;
}

.gm-au__label-row .gm-au__label { margin: 0; }

.gm-au__forgot {
    color: var(--au-green-600) !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
}

.gm-au__control {
    position: relative;
    display: flex;
    align-items: center;
    height: 56px;
    border: 1.5px solid var(--au-line);
    border-radius: 14px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.gm-au__control:hover { border-color: #cfcfcf; }

.gm-au__control:focus-within {
    border-color: var(--au-green);
    box-shadow: 0 0 0 4px rgba(0, 178, 116, .12);
}

.gm-au__field.is-invalid .gm-au__control {
    border-color: var(--au-red);
    box-shadow: 0 0 0 4px rgba(229, 72, 77, .1);
}

.gm-au__field.is-valid .gm-au__control-icon { color: var(--au-green); }

.gm-au__control-icon {
    display: inline-flex;
    flex: none;
    padding: 0 16px 0 4px;
    color: #a3a3a3;
    transition: color .15s ease;
}

.gm-au__control:focus-within .gm-au__control-icon { color: var(--au-green-600); }

.gm-au__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0 12px;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--au-ink);
    font-size: 17px;
    font-weight: 600;
}

.gm-au__input--ltr {
    direction: ltr;
    text-align: right;
    letter-spacing: .06em;
}

.gm-au__input::placeholder {
    color: #bdbdbd;
    font-weight: 500;
    letter-spacing: .04em;
}

.gm-au__clear,
.gm-au__eye {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    margin-left: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #9a9a9a;
    cursor: pointer;
}

.gm-au__clear { background: #f1f1f1; width: 26px; height: 26px; margin-left: 14px; }
.gm-au__clear[hidden] { display: none; }
.gm-au__eye:hover, .gm-au__clear:hover { color: var(--au-ink-2); }
.gm-au__eye-off { display: none; }
.gm-au__eye[aria-pressed="true"] .gm-au__eye-on { display: none; }
.gm-au__eye[aria-pressed="true"] .gm-au__eye-off { display: block; }

.gm-au__msg {
    min-height: 20px;
    margin: 8px 2px 0;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 20px;
    color: var(--au-red);
}

.gm-au__msg:empty { min-height: 0; margin: 0; }
.gm-au__msg--center { text-align: center; }
.gm-au__msg.is-info { color: var(--au-green-600); }

/* submit */
.gm-au__submit {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 54px;
    margin: 4px 0 0;
    padding: 0 20px;
    border: 0;
    border-radius: 14px;
    background: var(--au-green);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 24px -12px rgba(0, 142, 93, .65);
    transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.gm-au__submit:hover:not(:disabled) { background: var(--au-green-600); }
.gm-au__submit:active:not(:disabled) { transform: scale(.985); }
.gm-au__submit:focus-visible { outline: 3px solid rgba(0, 178, 116, .35); outline-offset: 2px; }

.gm-au__submit:disabled {
    background: #c9ecdc;
    box-shadow: none;
    cursor: not-allowed;
}

.gm-au__submit-arrow { transition: transform .2s var(--au-ease); }
.gm-au__submit:hover .gm-au__submit-arrow { transform: translateX(-3px); }

.gm-au__spinner {
    display: none;
    width: 20px;
    height: 20px;
    border: 2.5px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: gm-au-spin .7s linear infinite;
}

@keyframes gm-au-spin { to { transform: rotate(360deg); } }

.gm-au__form.is-busy .gm-au__submit { pointer-events: none; background: var(--au-green-600); }
.gm-au__form.is-busy .gm-au__spinner { display: inline-block; }
.gm-au__form.is-busy .gm-au__submit-arrow { display: none; }

.gm-au__terms {
    margin: 18px 0 0;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 22px;
    color: var(--au-muted);
    text-align: center;
}

.gm-au__terms a {
    color: var(--au-green-600) !important;
    font-weight: 600;
    text-decoration: none !important;
}

.gm-au__terms a:hover { text-decoration: underline !important; }

/* OTP */
.gm-au__sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.gm-au__otp {
    display: flex;
    justify-content: center;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.gm-au__digit {
    width: 56px;
    height: 60px;
    margin: 0;
    padding: 0;
    border: 1.5px solid var(--au-line);
    border-radius: 14px;
    outline: 0;
    background: #fff;
    color: var(--au-ink);
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    caret-color: var(--au-green);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease, transform .15s ease;
}

.gm-au__digit:focus {
    border-color: var(--au-green);
    box-shadow: 0 0 0 4px rgba(0, 178, 116, .12);
}

.gm-au__digit.is-filled {
    border-color: #9fdcc2;
    background: #f6fcf9;
}

.gm-au__otp.is-error .gm-au__digit {
    border-color: var(--au-red);
    background: #fff7f7;
    animation: gm-au-shake .4s ease;
}

.gm-au__otp.is-success .gm-au__digit {
    border-color: var(--au-green);
    background: var(--au-green-50);
}

@keyframes gm-au-shake {
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

.gm-au__resend {
    display: flex;
    justify-content: center;
    min-height: 36px;
    margin: 18px 0 20px;
}

.gm-au__timer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 6px 12px;
    border-radius: 999px;
    background: #f4f4f4;
    color: var(--au-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 22px;
}

.gm-au__timer b {
    color: var(--au-ink-2);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.gm-au__timer[hidden],
.gm-au__link-btn[hidden] { display: none !important; }

.gm-au__link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 0;
    border-radius: 999px;
    background: var(--au-green-50);
    color: var(--au-green-600);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s ease;
}

.gm-au__link-btn:hover { background: #d9f2e6; }

.gm-au__alt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    padding: 12px;
    border: 1px dashed #d6d6d6;
    border-radius: 14px;
    color: var(--au-ink-2) !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.gm-au__alt:hover {
    border-color: var(--au-green);
    background: #fafffc;
    color: var(--au-green-600) !important;
}

/* brand panel */
.gm-au__aside {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 36px 32px;
    overflow: hidden;
    background:
        radial-gradient(420px 320px at 80% 10%, rgba(255, 255, 255, .18), transparent 60%),
        linear-gradient(160deg, #11c486 0%, #00a46b 55%, #008e5d 100%);
    color: #fff;
}

.gm-au__aside::before {
    content: "";
    position: absolute;
    inset: auto -80px -120px auto;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
}

.gm-au__aside-art {
    position: relative;
    flex: 1 1 auto;
    min-height: 220px;
}

.gm-au__bubble {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 28px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 18px 40px -18px rgba(0, 60, 38, .55);
    animation: gm-au-float 6s ease-in-out infinite;
}

.gm-au__bubble img { display: block; width: 72%; height: auto; }
.gm-au__bubble--a { top: 6%; right: 8%; width: 120px; height: 120px; transform: rotate(-6deg); }
.gm-au__bubble--b { top: 30%; left: 4%; width: 96px; height: 96px; animation-delay: -1.5s; }
.gm-au__bubble--c { top: 58%; right: 26%; width: 84px; height: 84px; animation-delay: -3s; }
.gm-au__bubble--d { top: 2%; left: 30%; width: 64px; height: 64px; border-radius: 20px; animation-delay: -4.5s; }

@keyframes gm-au-float {
    50% { translate: 0 -8px; }
}

.gm-au__aside-title {
    position: relative;
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 800;
    line-height: 32px;
}

.gm-au__perks {
    position: relative;
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gm-au__perks li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    color: rgba(255, 255, 255, .95);
}

.gm-au__perks svg {
    flex: none;
    padding: 6px;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .16);
}

.gm-au__copyright {
    margin: 20px 0 0;
    font-size: 12px;
    color: #9a9a9a;
    text-align: center;
}

/* ---------- tablet / phone ---------- */
@media (max-width: 991.98px) {
    .gm-au__card {
        grid-template-columns: 1fr;
        width: min(480px, 100%);
        min-height: 0;
    }

    .gm-au__aside { display: none; }
    .gm-au__main { padding: 24px 32px 32px; }
}

@media (max-width: 575.98px) {
    .gm-au-page { background: #fff !important; }

    .gm-au {
        justify-content: flex-start;
        padding: 0;
    }

    .gm-au__card {
        width: 100%;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        animation: none;
    }

    .gm-au__main {
        min-height: calc(100dvh - 48px);
        padding: calc(12px + env(safe-area-inset-top, 0px)) 20px 24px;
    }

    .gm-au__top { margin-bottom: 32px; }
    .gm-au__logo img { height: 38px; }
    .gm-au__title { font-size: 21px; line-height: 32px; }

    .gm-au__otp { gap: 8px; }

    .gm-au__digit {
        width: calc((100vw - 40px - 32px) / 5);
        max-width: 60px;
        height: 58px;
    }

    .gm-au__copyright {
        margin: 0;
        padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .gm-au__card, .gm-au__bubble { animation: none; }
}

/* ---------- welcome (after first sign-up) ---------- */
.gm-au-welcome__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 24px;
}

.gm-au-welcome__hero .gm-au__subtitle { max-width: 400px; }

.gm-au-welcome__badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--au-green-50);
    color: var(--au-green);
    animation: gm-au-pop .55s var(--au-ease) both .1s;
}

.gm-au-welcome__badge::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid rgba(0, 178, 116, .18);
    animation: gm-au-ring 1.6s ease-out .4s both;
}

.gm-au-welcome__badge svg path {
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    animation: gm-au-draw .45s ease-out .45s forwards;
}

@keyframes gm-au-pop { from { opacity: 0; transform: scale(.6); } 70% { transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes gm-au-ring { from { opacity: 1; transform: scale(.85); } to { opacity: 0; transform: scale(1.25); } }
@keyframes gm-au-draw { to { stroke-dashoffset: 0; } }

.gm-au-welcome__steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.gm-au-welcome__step {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--au-line);
    border-radius: 14px;
    background: #fff;
    color: var(--au-ink) !important;
    text-decoration: none !important;
    transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}

.gm-au-welcome__step:hover,
.gm-au-welcome__step:focus-visible {
    border-color: var(--au-green);
    background: #fafffc;
}

.gm-au-welcome__step:focus-visible { outline: 3px solid rgba(0, 178, 116, .3); outline-offset: 2px; }
.gm-au-welcome__step:active { transform: scale(.99); }

.gm-au-welcome__step-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--au-green-50);
    color: var(--au-green-600);
}

.gm-au-welcome__step-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gm-au-welcome__step-text b { font-size: 14.5px; font-weight: 700; line-height: 22px; }
.gm-au-welcome__step-text small { font-size: 12.5px; line-height: 20px; color: var(--au-muted); }

.gm-au-welcome__chev {
    flex: none;
    color: #b5b5b5;
    transition: transform .15s ease, color .15s ease;
}

.gm-au-welcome__step:hover .gm-au-welcome__chev { color: var(--au-green-600); transform: translateX(-3px); }

.gm-au-welcome__actions { display: flex; flex-direction: column; }
.gm-au-welcome__actions .gm-au__submit { text-decoration: none !important; color: #fff !important; }
.gm-au-welcome__actions .gm-au__alt { margin-top: 10px; border-style: solid; }

@media (max-width: 575.98px) {
    .gm-au-welcome__badge { width: 64px; height: 64px; }
    .gm-au-welcome__step { padding: 12px; gap: 12px; }
    .gm-au-welcome__step-icon { width: 40px; height: 40px; }
    .gm-au-welcome__actions { margin-top: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .gm-au-welcome__badge, .gm-au-welcome__badge::after { animation: none; }
    .gm-au-welcome__badge svg path { animation: none; stroke-dashoffset: 0; }
}