/* ==========================================================================
   Delivery — Admin sign-in
   ========================================================================== */

body.admin-auth {
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-2: #f5f7fa;
    --border: #e3e7ee;
    --text: #0f172a;
    --muted: #64708a;
    --faint: #98a1b3;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
}
html[data-theme="dark"] body.admin-auth {
    --bg: #0a0f1b;
    --surface: #111827;
    --surface-2: #151d2e;
    --border: #243049;
    --text: #e7ebf3;
    --muted: #97a3ba;
    --faint: #6b7892;
    color-scheme: dark;
}
.theme-sun { display: none; }
html[data-theme="dark"] .theme-sun { display: block; }
html[data-theme="dark"] .theme-moon { display: none; }

.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }

/* ---------- form side ---------- */
.auth-panel { display: flex; flex-direction: column; padding: 28px clamp(20px, 5vw, 64px); min-height: 100vh; }
.auth-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.auth-brand { display: flex; align-items: center; gap: 11px; }
.auth-brand img { width: 40px; height: 40px; }
.auth-brand strong { display: block; font-size: 18px; font-weight: 700; line-height: 1.2; }
.auth-brand small { display: block; font-size: 12px; color: var(--faint); }
.auth-tools { display: flex; gap: 8px; }
.auth-tool {
    height: 40px; padding-inline: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface);
    display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 500; color: var(--muted); transition: color .2s, border-color .2s;
}
.auth-tool:hover { color: var(--text); border-color: var(--brand-300); }
.auth-tool.is-icon { width: 40px; padding: 0; justify-content: center; }
.auth-tool .icon { width: 18px; height: 18px; }

.auth-card { width: 100%; max-width: 420px; margin: auto; padding: 48px 0; animation: auth-in .8s var(--ease-out) both; }
@keyframes auth-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.auth-badge {
    display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 500;
    background: var(--brand-50); color: var(--brand-600); margin-bottom: 18px;
}
html[data-theme="dark"] .auth-badge { background: rgba(255, 90, 31, .14); color: var(--brand-300); }
.auth-card h1 { font-size: 34px; font-weight: 800; line-height: 1.25; }
.auth-lead { color: var(--muted); margin-top: 8px; font-size: 16px; }

.auth-alert {
    display: flex; gap: 12px; align-items: flex-start; margin-top: 24px; padding: 14px 16px; border-radius: 14px;
    background: var(--danger-soft); color: var(--danger); border: 1px solid rgba(220, 38, 38, .18); animation: shake .45s var(--ease);
}
html[data-theme="dark"] .auth-alert { background: rgba(220, 38, 38, .12); color: #fca5a5; }
.auth-alert strong { display: block; font-size: 14.5px; }
.auth-alert span { font-size: 13.5px; opacity: .9; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.auth-form { display: grid; gap: 18px; margin-top: 28px; }
.field { display: grid; gap: 8px; }
.field-label { font-size: 14px; font-weight: 500; }
.field-control {
    position: relative; display: flex; align-items: center; height: 54px; border-radius: 14px; border: 1.5px solid var(--border);
    background: var(--surface-2); transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.field-control:focus-within { border-color: var(--brand-400); background: var(--surface); box-shadow: 0 0 0 4px rgba(255, 90, 31, .13); }
.field-control.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(220, 38, 38, .1); }
.field-control > .icon { position: absolute; inset-inline-start: 16px; color: var(--faint); width: 19px; height: 19px; pointer-events: none; transition: color .2s; }
.field-control:focus-within > .icon { color: var(--brand-500); }
.field-control input {
    flex: 1; height: 100%; border: 0; outline: 0; background: transparent; padding-inline: 48px 16px; font-size: 15.5px; min-width: 0;
}
/* inputs are dir="ltr" (email/password): pad by the page side the icon sits on */
[dir="rtl"] .field-control input { text-align: right; padding-left: 16px; padding-right: 48px; }
.field-control input::placeholder { color: var(--faint); }
.field-action { width: 44px; height: 44px; margin-inline-end: 5px; border-radius: 11px; display: grid; place-items: center; color: var(--faint); transition: color .2s, background-color .2s; }
.field-action:hover { color: var(--text); background: var(--border); }
.field-action .icon { width: 19px; height: 19px; }

.check { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); cursor: pointer; user-select: none; width: fit-content; }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check-box { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--gray-300); display: grid; place-items: center; transition: background-color .2s, border-color .2s; }
.check-box .icon { width: 14px; height: 14px; color: #fff; stroke-width: 3; opacity: 0; transform: scale(.5); transition: opacity .2s, transform .25s var(--ease-out); }
.check input:checked + .check-box { background: var(--brand-500); border-color: var(--brand-500); }
.check input:checked + .check-box .icon { opacity: 1; transform: none; }
.check input:focus-visible + .check-box { outline: 2px solid var(--brand-500); outline-offset: 2px; }

.auth-submit { --btn-h: 54px; width: 100%; border-radius: 14px; font-size: 16px; margin-top: 4px; }
.auth-submit .spinner { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .4); border-top-color: #fff; animation: spin .7s linear infinite; }
.auth-submit.is-loading { pointer-events: none; opacity: .9; }
.auth-submit.is-loading .spinner { display: block; }
.auth-submit.is-loading .icon { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.auth-secure { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 22px; font-size: 12.5px; color: var(--faint); }
.auth-foot { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--faint); }
.auth-foot a { display: inline-flex; align-items: center; gap: 6px; transition: color .2s; }
.auth-foot a:hover { color: var(--brand-600); }

/* ---------- visual side ---------- */
.auth-visual { position: relative; overflow: hidden; margin: 14px; border-radius: 30px; background: var(--ink-950); color: #fff; display: flex; align-items: flex-end; isolation: isolate; }
.auth-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; animation: auth-zoom 22s ease-in-out infinite alternate; }
@keyframes auth-zoom { from { transform: scale(1.02); } to { transform: scale(1.14); } }
.auth-visual::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(700px 400px at 80% 0%, rgba(255, 90, 31, .35), transparent 60%), linear-gradient(180deg, rgba(6, 10, 20, .2) 0%, rgba(6, 10, 20, .55) 45%, rgba(6, 10, 20, .94) 100%);
}
.auth-visual-body { padding: clamp(28px, 4vw, 56px); max-width: 560px; }
.auth-visual h2 { font-size: clamp(26px, 2.6vw, 38px); font-weight: 800; line-height: 1.3; }
.auth-visual p { color: rgba(255, 255, 255, .78); margin-top: 12px; font-size: 16px; }
.auth-visual ul { display: grid; gap: 10px; margin-top: 24px; }
.auth-visual li { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.auth-visual li span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-500); }
.auth-visual li .icon { stroke-width: 3; }

.auth-float {
    position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 14px; border-radius: 18px;
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .5); animation: auth-float 7s ease-in-out infinite;
}
.auth-float strong { display: block; font-size: 20px; font-weight: 800; line-height: 1.1; }
.auth-float small { font-size: 12px; opacity: .8; }
.auth-float-icon { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--brand-500); }
.auth-float-icon.is-green { background: var(--success); }
.auth-float-a { top: 12%; inset-inline-start: 10%; }
.auth-float-b { top: 30%; inset-inline-end: 9%; animation-delay: -3.5s; }
@keyframes auth-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }

@media (max-width: 960px) {
    .auth-shell { grid-template-columns: 1fr; }
    .auth-visual { display: none; }
}
@media (max-width: 480px) {
    .auth-card h1 { font-size: 28px; }
    .auth-tool:not(.is-icon) { padding-inline: 10px; }
    .auth-foot { flex-direction: column; align-items: center; }
}

/* sign-up: wider card, grouped steps, category cards, phone with flag picker */
.auth-card.is-wide { max-width: 560px; }
.auth-alert.is-info { background: var(--info-soft); color: var(--info); border-color: rgba(37, 99, 235, .18); animation: none; }
.auth-step { border: 0; margin: 0; padding: 0; display: grid; gap: 16px; min-width: 0; }
.auth-step + .auth-step { padding-top: 22px; border-top: 1px dashed var(--border); }
.auth-step legend { display: flex; align-items: center; gap: 10px; padding: 0; margin-bottom: 16px; font-size: 16px; font-weight: 700; }
.auth-step legend span { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand-600); font-size: 14px; font-weight: 800; }
html[data-theme="dark"] .auth-step legend span { background: rgba(255, 90, 31, .14); color: var(--brand-300); }
.field-label small { color: var(--faint); font-weight: 400; font-size: 12.5px; }
.field-error { color: var(--danger); font-size: 12.5px; }
.field-hint { color: var(--muted); font-size: 12.5px; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field-control select {
    flex: 1; height: 100%; border: 0; outline: 0; background: transparent; padding-inline: 48px 16px; font: inherit; font-size: 15px; color: inherit; min-width: 0; cursor: pointer;
}
.field-control select option { color: var(--ink-900); }

.category-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.category-cards.is-invalid .category-card span { border-color: rgba(220, 38, 38, .45); }
.category-card { position: relative; cursor: pointer; }
.category-card input { position: absolute; opacity: 0; pointer-events: none; }
.category-card span {
    display: grid; justify-items: center; gap: 8px; padding: 14px 8px; border-radius: 14px; border: 1.5px solid var(--border);
    background: var(--surface-2); font-size: 13.5px; font-weight: 500; text-align: center; line-height: 1.35;
    transition: border-color .2s, background-color .2s, box-shadow .2s, transform .2s;
}
.category-card:hover span { border-color: var(--brand-200); transform: translateY(-1px); }
.category-card input:checked + span { border-color: var(--brand-500); background: var(--surface); box-shadow: 0 0 0 4px rgba(255, 90, 31, .12); }
.category-card input:focus-visible + span { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.category-card-icon {
    --tone: var(--brand-500);
    width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
    color: var(--tone); background: color-mix(in srgb, var(--tone) 13%, transparent);
}
.category-card-icon .icon { width: 20px; height: 20px; }

.phone-group { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 10px; }
.phone-group.is-invalid .field-control { border-color: var(--danger); }
.phone-country select { padding-inline: 14px 10px; font-variant-numeric: tabular-nums; }
.phone-group .field-control input { text-align: left; padding-left: 48px; padding-right: 16px; }
.phone-group .field-control > .icon { left: 16px; right: auto; }

@media (max-width: 560px) {
    .field-grid { grid-template-columns: 1fr; }
    .phone-group { grid-template-columns: 112px minmax(0, 1fr); }
}