[x-cloak]{display:none!important}.htmx-indicator{display:none}.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{display:block}.auth-orb{position:absolute;border-radius:999px;filter:blur(1px);opacity:.9}.auth-orb-one{width:430px;height:430px;background:radial-gradient(circle,#14d9b144,transparent 66%);top:-110px;right:-100px}.auth-orb-two{width:520px;height:520px;background:radial-gradient(circle,#ffffff12,transparent 70%);bottom:-210px;left:-150px}.auth-feature{display:flex;min-height:94px;flex-direction:column;justify-content:center;gap:.65rem;border:1px solid #ffffff14;border-radius:1.25rem;background:#ffffff08;padding:1rem;color:#ffffffb3;font-size:.75rem;font-weight:700}.auth-feature i{font-size:1.5rem;color:#6ee7ca}.form-label{display:block;margin-bottom:.55rem;font-size:.8rem;font-weight:800;color:#3f3f46}.form-error{margin-top:.45rem;font-size:.72rem;font-weight:700;color:#dc2626}.form-alert{border:1px solid #fecaca;border-radius:1rem;background:#fef2f2;padding:.8rem 1rem;font-size:.78rem;font-weight:700;line-height:1.8;color:#b91c1c}.auth-submit{display:flex;width:100%;align-items:center;justify-content:center;gap:.65rem;border-radius:1rem;background:#151817;padding:.95rem 1.25rem;font-size:.88rem;font-weight:900;color:white;box-shadow:0 14px 35px #15181722;transition:.2s}.auth-submit:hover{transform:translateY(-1px);background:#252927}.auth-submit:disabled{opacity:.65;cursor:not-allowed}

/* BATALAR-047-AUTH-BUTTON-OLIVE-START */
[data-auth-mobile-code-047],
[data-auth-vendor-phone-confirm-047],
[data-auth-mobile-code-047] span,
[data-auth-mobile-code-047] i,
[data-auth-vendor-phone-confirm-047] span,
[data-auth-vendor-phone-confirm-047] i {
    color: #2F332C !important;
}
/* BATALAR-047-AUTH-BUTTON-OLIVE-END */

/* BATALAR-0472-AUTH-BLACK-OLIVE-START */

[data-auth-mobile-code-0472],
[data-auth-vendor-phone-confirm-0472],
[data-auth-mobile-code-0472] *,
[data-auth-vendor-phone-confirm-0472] * {
    color: #2F332C !important;
    -webkit-text-fill-color: #2F332C !important;
}

[data-auth-mobile-code-0472]:disabled,
[data-auth-vendor-phone-confirm-0472]:disabled,
[data-auth-mobile-code-0472][aria-disabled="true"],
[data-auth-vendor-phone-confirm-0472][aria-disabled="true"] {
    opacity: 1 !important;
    color: #2F332C !important;
    -webkit-text-fill-color: #2F332C !important;
    cursor: not-allowed !important;
}

[data-auth-mobile-code-0472]:disabled *,
[data-auth-vendor-phone-confirm-0472]:disabled *,
[data-auth-mobile-code-0472][aria-disabled="true"] *,
[data-auth-vendor-phone-confirm-0472][aria-disabled="true"] * {
    opacity: 1 !important;
    color: #2F332C !important;
    -webkit-text-fill-color: #2F332C !important;
}

/* BATALAR-0472-AUTH-BLACK-OLIVE-END */

/* BATALAR-312-VENDOR-OTP-UX-START */
[data-vendor-register-312] {
    --vendor-olive: #3b3c36;
    --vendor-mint: #00ffcc;
}

[data-vendor-register-312] .vendor-auth-button {
    min-height: 52px;
    border: 1px solid #00e9bb;
    background: var(--vendor-mint) !important;
    color: var(--vendor-olive) !important;
    -webkit-text-fill-color: var(--vendor-olive) !important;
    box-shadow: 0 12px 28px rgb(0 255 204 / 20%);
}

[data-vendor-register-312] .vendor-auth-button:hover {
    background: #13f0c5 !important;
    color: var(--vendor-olive) !important;
    box-shadow: 0 15px 32px rgb(0 255 204 / 27%);
}

[data-vendor-register-312] .vendor-auth-button:active {
    transform: translateY(0) scale(.99);
}

[data-vendor-register-312] :is(.vendor-auth-button, .vendor-resend-button),
[data-vendor-register-312] :is(.vendor-auth-button, .vendor-resend-button) * {
    color: var(--vendor-olive) !important;
    -webkit-text-fill-color: var(--vendor-olive) !important;
}

.auth-button-idle,
.auth-button-busy {
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
}

.auth-button-idle { display: flex; }
.auth-button-busy { display: none; }

[data-auth-async-form].is-submitting .auth-button-idle,
[data-auth-async-form].htmx-request .auth-button-idle { display: none; }

[data-auth-async-form].is-submitting .auth-button-busy,
[data-auth-async-form].htmx-request .auth-button-busy { display: flex; }

.auth-button-busy i {
    font-size: 1.15rem;
    animation: auth-button-spin-312 .75s linear infinite;
}

[data-vendor-register-312] [data-auth-async-form].is-submitting button:disabled,
[data-vendor-register-312] [data-auth-async-form].htmx-request button:disabled {
    opacity: .78 !important;
    cursor: wait !important;
}

.vendor-otp-sent {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: .65rem;
    margin-bottom: 1.25rem;
    border: 1px solid #c9f4e8;
    border-radius: 16px;
    background: #f3fffb;
    padding: .75rem;
    color: #5d625d;
    font-size: .78rem;
    line-height: 1.8;
}

.vendor-otp-sent__icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 11px;
    background: var(--vendor-mint);
    color: var(--vendor-olive);
    font-size: 1rem;
}

.vendor-otp-sent b { color: var(--vendor-olive); }
.vendor-otp-sent a { color: #087f6b; font-size: .75rem; font-weight: 900; }

.vendor-resend-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    margin-top: 1.25rem;
    border: 1px solid #e3e7e4;
    border-radius: 18px;
    background: #fff;
    padding: .85rem;
    box-shadow: 0 10px 28px rgb(59 60 54 / 5%);
}

.vendor-resend-copy { display: grid; gap: .25rem; min-width: 0; }
.vendor-resend-copy strong { color: var(--vendor-olive); font-size: .78rem; }
.vendor-resend-copy span { color: #777d77; font-size: .68rem; line-height: 1.7; }
.vendor-resend-action { display: flex; align-items: center; gap: .6rem; }

.vendor-otp-timer {
    position: relative;
    display: grid;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    place-items: center;
    border-radius: 999px;
    background: conic-gradient(#00dbae var(--otp-progress), #e9eeeb 0);
    color: var(--vendor-olive);
    direction: ltr;
    font-size: .61rem;
    font-variant-numeric: tabular-nums;
    font-weight: 900;
}

.vendor-otp-timer::before {
    position: absolute;
    inset: 4px;
    border-radius: inherit;
    background: #fff;
    content: "";
}

.vendor-otp-timer span { position: relative; z-index: 1; }

.vendor-resend-button {
    display: flex;
    min-height: 44px;
    min-width: 132px;
    align-items: center;
    justify-content: center;
    border: 1px solid #bfe9dd;
    border-radius: 13px;
    background: #edfff9;
    padding: .65rem .8rem;
    color: var(--vendor-olive);
    font-size: .73rem;
    font-weight: 900;
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.vendor-resend-button:not(:disabled):hover {
    transform: translateY(-1px);
    background: var(--vendor-mint);
    box-shadow: 0 9px 22px rgb(0 255 204 / 20%);
}

.vendor-resend-button:disabled {
    border-color: #e1e5e2;
    background: #f5f7f6;
    opacity: .65;
    cursor: not-allowed;
}

@keyframes auth-button-spin-312 { to { transform: rotate(360deg); } }

@media (max-width: 430px) {
    .vendor-resend-card { grid-template-columns: 1fr; }
    .vendor-resend-action { justify-content: space-between; }
    .vendor-resend-button { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-button-busy i { animation-duration: 1.5s; }
    [data-vendor-register-312] :is(.vendor-auth-button, .vendor-resend-button) { transition: none; }
}
/* BATALAR-312-VENDOR-OTP-UX-END */

/* BATALAR-325-LOGIN-RESEND-START */
[data-login-code-325] .login-code-grid-325 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 8rem;
    grid-template-areas: "alerts alerts" "label label" "code resend" "errors errors" "submit submit";
    column-gap: .65rem;
    direction: ltr;
}
[data-login-code-325] :is(.login-verify-form-325, .login-code-field-325) { display: contents; }
[data-login-code-325] .login-code-grid-325 > *,
[data-login-code-325] .login-verify-form-325 > * { direction: rtl; }
[data-login-code-325] .login-code-alerts-325 { grid-area: alerts; margin-bottom: 1rem; }
[data-login-code-325] .form-label { grid-area: label; direction: rtl; }
[data-login-code-325] [data-web-otp-input] {
    grid-area: code;
    min-width: 0;
    width: 100%;
    height: 54px;
    padding-inline: .6rem;
    letter-spacing: .17em !important;
    direction: ltr;
}
[data-login-code-325] .login-code-errors-325 { grid-area: errors; direction: rtl; }
[data-login-code-325] .login-verify-form-325 > .auth-submit { grid-area: submit; margin-top: 1.25rem; }
[data-login-code-325] .login-resend-form-325 { grid-area: resend; min-width: 0; align-self: center; }
[data-login-code-325] :is(.login-resend-button-325, .login-resend-timer-325) {
    display: flex;
    width: 100%;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}
[data-login-code-325] .login-resend-timer-325 {
    flex-direction: column;
    gap: .15rem;
    border: 1px solid #e0ebe6;
    background: #f6fbf9;
    color: #737971;
    font-size: .65rem;
    font-weight: 600;
    line-height: 1.5;
}
[data-login-code-325] .login-resend-timer-325 strong { color: #3b3c36; font-size: .83rem; font-variant-numeric: tabular-nums; }
[data-login-code-325] .login-resend-button-325 {
    border: 0;
    background: #01ffcd !important;
    padding: .55rem .45rem;
    font-size: .7rem;
    font-weight: 900;
    line-height: 1.5;
    cursor: pointer;
    box-shadow: 0 5px 14px rgb(0 255 204 / 16%);
    animation: login-resend-reveal-325 .26s ease-out both;
    transition: background-color .18s ease, box-shadow .18s ease;
}
[data-login-code-325] .login-resend-button-325,
[data-login-code-325] .login-resend-button-325 * {
    color: #3b3c36 !important;
    -webkit-text-fill-color: #3b3c36 !important;
}
[data-login-code-325] .login-resend-button-325 :is(.auth-button-idle, .auth-button-busy) { gap: .35rem; }
[data-login-code-325] .login-resend-button-325 i { font-size: 1.1rem; }
[data-login-code-325] .login-resend-button-325:hover { background: #01ffcd !important; box-shadow: 0 7px 18px rgb(0 255 204 / 22%); }
[data-login-code-325] .login-resend-button-325:disabled { cursor: wait; }
@keyframes login-resend-reveal-325 {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 430px) {
    [data-login-code-325] .login-code-grid-325 { column-gap: .5rem; }
    [data-login-code-325] [data-web-otp-input] { font-size: 20px; letter-spacing: .1em !important; }
}
@media (prefers-reduced-motion: reduce) {
    [data-login-code-325] .login-resend-button-325 { animation: none; transition: none; }
}
html:not(.batalar-auth-ready-325) [data-login-code-325] .login-resend-button-325[x-cloak] { display: flex !important; }
html:not(.batalar-auth-ready-325) [data-login-code-325] .login-resend-timer-325 { display: none !important; }
/* BATALAR-325-LOGIN-RESEND-END */