/* ============================================
   Auth Pages – Navbar + Split-Screen Layout
   ENJAZ PMS · v4.0
   ============================================ */

/* ─────────────────────────────────────────────
   Auth Navbar
   ───────────────────────────────────────────── */
.auth-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    height: 60px;
    background: var(--surface);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.auth-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 1.75rem;
    max-width: 100%;
}

/* Brand */
.auth-nav-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    flex-shrink: 0;
}

.auth-nav-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.auth-nav-logo {
    height: 28px;
    width: auto;
}

.auth-nav-logo.logo-dark  { display: none; }
.auth-nav-logo.logo-light { display: block; }
[data-theme="dark"] .auth-nav-logo.logo-light { display: none;  }
[data-theme="dark"] .auth-nav-logo.logo-dark  { display: block; }

.auth-nav-brand-text {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

/* Actions */
.auth-nav-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.auth-nav-link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.85rem;
    border-radius: var(--radius-lg);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background 150ms ease, color 150ms ease;
    white-space: nowrap;
}

.auth-nav-link i {
    font-size: 0.8rem;
    opacity: 0.75;
}

.auth-nav-link:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.auth-nav-sep {
    width: 1px;
    height: 20px;
    background: var(--border-color);
    margin: 0 0.35rem;
    flex-shrink: 0;
}

/* Theme toggle (in navbar) */
.auth-theme-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 180ms ease;
    flex-shrink: 0;
}

.auth-theme-btn:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 3px 14px rgba(246,168,33, 0.35);
}

.auth-theme-btn:active { transform: scale(0.94); }

.icon-flip { animation: authIconFlip 0.4s cubic-bezier(0.22, 1, 0.36, 1); }

/* ─────────────────────────────────────────────
   Page Wrapper — banner on top, centered card below
   ───────────────────────────────────────────── */
.auth-page-v2 {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 60px);
    background:
        radial-gradient(circle at top left, rgba(246,168,33,0.18), transparent 30%),
        radial-gradient(circle at bottom right, rgba(146,90,10,0.10), transparent 28%),
        var(--bg-secondary);
    position: relative;
    overflow: hidden;
}

.auth-page-v2::before,
.auth-page-v2::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(30px);
    opacity: 0.48;
    pointer-events: none;
}

.auth-page-v2::before {
    width: 260px;
    height: 260px;
    left: 4%;
    bottom: 10%;
    background: rgba(246,168,33,0.20);
}

.auth-page-v2::after {
    width: 220px;
    height: 220px;
    right: 6%;
    top: 10%;
    background: rgba(255,255,255,0.24);
}

/* ─────────────────────────────────────────────
   Decorative Banner (full width, top)
   ───────────────────────────────────────────── */
.auth-banner {
    position: relative;
    overflow: hidden;
    padding: 0.8rem 1.5rem 1.5rem;
    background:
        linear-gradient(120deg,
            #8f5c0a 0%,
            #c9840f 30%,
            #f6a821 65%,
            #ff8a3d 100%);
    text-align: center;
}

/* Repeating pharmacy-cross texture (distinct signature motif) */
.auth-banner-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.1;
    pointer-events: none;
    background-image:
        linear-gradient(#fff 2px, transparent 2px),
        linear-gradient(90deg, #fff 2px, transparent 2px);
    background-size: 34px 34px;
    background-position: 12px 0, 0 12px;
    -webkit-mask-image: radial-gradient(circle at 6px 6px, #000 3px, transparent 3.5px);
    -webkit-mask-size: 34px 34px;
    mask-image: radial-gradient(circle at 6px 6px, #000 3px, transparent 3.5px);
    mask-size: 34px 34px;
}

.auth-banner-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.9rem 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.auth-banner-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 13px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255,255,255,0.15);
}

.auth-banner-logo-img {
    height: 24px;
    width: auto;
    filter: brightness(0) invert(1);
}

.auth-banner-text {
    text-align: start;
}

.auth-banner-title {
    font-size: 1.15rem;
    font-weight: 900;
    color: #fff;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.auth-banner-tagline {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 400;
}

.auth-banner-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.auth-trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    padding: 0.42rem 0.9rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    backdrop-filter: blur(6px);
    white-space: nowrap;
}

.auth-trust-pill i { font-size: 0.72rem; opacity: 0.9; }

/* Curved bottom edge — the signature shape distinguishing this from a flat/orb panel */
.auth-banner-wave {
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    width: 100%;
    height: 32px;
    display: block;
}
.auth-banner-wave path { fill: var(--bg-secondary); }

/* ─────────────────────────────────────────────
   Content area (form card + feature strip)
   ───────────────────────────────────────────── */
.auth-content-area {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.5rem 1.5rem;
    margin-top: -0.75rem;
    position: relative;
    z-index: 2;
}

.auth-shell {
    position: relative;
    width: min(1180px, 100%);
    display: grid;
    grid-template-columns: minmax(300px, 0.95fr) minmax(360px, 1.05fr);
    gap: 1.6rem;
    align-items: center;
    padding: 1.2rem 0.35rem;
}

.auth-shell::before {
    content: "";
    position: absolute;
    inset: 1.05rem 1rem 0.9rem 1rem;
    background: linear-gradient(135deg, rgba(246,168,33,0.16), rgba(255,255,255,0.12));
    border-radius: 30px;
    transform: translateX(26px) translateY(16px);
    box-shadow: 0 18px 44px rgba(143,92,10,0.12);
}

.auth-mobile-topbar {
    display: none;
}

.auth-side-panel {
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 560px;
    padding: 2.2rem 1.9rem;
    background: linear-gradient(160deg, rgba(246,168,33,0.98) 0%, rgba(220,141,21,0.95) 42%, rgba(179,98,5,0.93) 100%);
    background-size: 180% 180%;
    background-position: 0% 0%;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 30px;
    box-shadow: 0 28px 60px rgba(169, 103, 14, 0.24);
    color: #fff;
    transform: translateX(-18px);
    transition: transform 220ms ease, box-shadow 220ms ease;
    animation: authPanelSheen 10s ease-in-out infinite alternate;
}

.auth-side-panel:hover {
    box-shadow: 0 32px 72px rgba(169, 103, 14, 0.28);
}

.auth-side-panel::before,
.auth-side-panel::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    pointer-events: none;
}

.auth-side-panel::before {
    width: 240px;
    height: 240px;
    right: -60px;
    top: -80px;
}

.auth-side-panel::after {
    width: 320px;
    height: 320px;
    left: -120px;
    bottom: -120px;
}

.auth-side-panel > * {
    position: relative;
    z-index: 1;
}

.auth-side-panel__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem 0.75rem;
    margin-bottom: 2.1rem;
}

.auth-side-panel__badge {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.2);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.auth-side-panel__title {
    margin: 0 0 0.6rem;
    font-size: clamp(1.9rem, 2vw, 2.5rem);
    line-height: 1.25;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #fff;
}

.auth-side-panel__text {
    margin: 0;
    max-width: 30ch;
    color: rgba(255,255,255,0.86);
    font-size: 0.95rem;
    line-height: 1.8;
}

.auth-side-list {
    list-style: none;
    display: grid;
    gap: 0.8rem;
    margin: 1.5rem 0 0;
    padding: 0;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
}

.auth-side-list li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    padding: 0.7rem 0.8rem;
}

.auth-side-list i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255,255,255,0.16);
    font-size: 0.72rem;
}

.auth-side-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    margin-top: 1.7rem;
}

.auth-side-stats div {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 16px;
    padding: 0.8rem 0.7rem;
    text-align: center;
}

.auth-side-stats strong {
    display: block;
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
}

.auth-side-stats span {
    display: block;
    font-size: 0.74rem;
    color: rgba(255,255,255,0.8);
    margin-top: 0.2rem;
}

/* Feature strip below the card */
.auth-feature-strip {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    width: 100%;
    max-width: 720px;
    margin: 1.75rem 0 0;
    padding: 0;
}

.auth-feature-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 0.85rem 0.95rem;
    text-align: start;
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.auth-feature-item:hover {
    box-shadow: 0 10px 24px rgba(0,0,0,.06);
    border-color: rgba(246,168,33,.35);
}

.auth-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background: rgba(246,168,33, 0.12);
    color: var(--primary);
    border-radius: 10px;
    font-size: 0.85rem;
}

.auth-feature-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.auth-feature-text strong {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.auth-feature-text span {
    font-size: 0.72rem;
    color: var(--text-secondary);
    font-weight: 400;
    line-height: 1.3;
}

/* ─────────────────────────────────────────────
   Auth Card
   ───────────────────────────────────────────── */
.auth-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 560px;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(245, 208, 118, 0.45);
    border-radius: 26px;
    box-shadow:
        0 18px 38px rgba(15, 23, 42, 0.10),
        0 8px 24px rgba(0, 0, 0, 0.05),
        0 1px 4px rgba(0, 0, 0, 0.03);
    padding: 1.4rem 1.85rem 1.25rem;
    overflow: hidden;
    transform: translateX(18px);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: box-shadow 180ms ease, transform 180ms ease;
}

.auth-card:hover {
    box-shadow: 0 22px 46px rgba(15, 23, 42, 0.12);
}

.auth-card::before {
    content: '';
    position: absolute;
    width: 190px; height: 190px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(246,168,33,.07) 0%, transparent 70%);
    bottom: -90px;
    right: -70px;
    pointer-events: none;
}
.auth-card > * { position: relative; z-index: 1; }

[data-theme="dark"] .auth-card {
    background: rgba(30, 41, 59, 0.92);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 8px 40px rgba(0, 0, 0, 0.4),
        0 2px 6px rgba(0, 0, 0, 0.2);
}

.auth-card--success {
    animation: authSuccessOut 0.26s ease forwards;
    pointer-events: none;
}

/* ─────────────────────────────────────────────
   Typography
   ───────────────────────────────────────────── */
.auth-title {
    position: relative;
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    padding-bottom: 0.35rem;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.auth-title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 42px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    animation: authTitleBarGrow 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
}

.auth-subtitle {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0;
}

/* ─────────────────────────────────────────────
   Alert banner
   ───────────────────────────────────────────── */
.auth-alert {
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    padding: 0.75rem 1rem;
    border: none;
}

/* ─────────────────────────────────────────────
   Input group  (login page)
   ───────────────────────────────────────────── */
.input-group-modern {
    margin-bottom: 0.75rem;
    position: relative;
}

.input-group-modern label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.input-group-modern .form-control,
.input-group-modern input {
    width: 100%;
    padding: 0.72rem 1.1rem;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-xl);
    outline: none;
    transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
}

.input-group-modern .form-control:focus,
.input-group-modern input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(246,168,33, 0.14);
    background: var(--surface);
}

[data-theme="dark"] .input-group-modern .form-control,
[data-theme="dark"] .input-group-modern input {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .input-group-modern .form-control:focus,
[data-theme="dark"] .input-group-modern input:focus {
    background: rgba(255, 255, 255, 0.07);
}

/* ─────────────────────────────────────────────
   Icon-prefixed inputs (login + registration)
   ───────────────────────────────────────────── */
.input-icon-field {
    position: relative;
}

.input-icon-field .input-icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    font-size: 0.85rem;
    pointer-events: none;
    z-index: 1;
    transition: color 200ms ease, transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.input-icon-field input,
.input-icon-field select,
.input-icon-field .form-control,
.input-icon-field .form-select {
    padding-right: 2.7rem !important;
}

.input-icon-field.has-toggle input,
.input-icon-field.has-toggle .form-control {
    padding-left: 2.7rem !important;
}

.input-icon-field input:focus ~ .input-icon,
.input-icon-field:has(input:focus) .input-icon {
    color: var(--primary);
    transform: translateY(-50%) scale(1.15);
}

.input-toggle-pass {
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 0.4rem;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    transition: color 150ms ease, transform 150ms ease;
}
.input-toggle-pass:hover  { color: var(--primary); }
.input-toggle-pass:active { transform: translateY(-50%) scale(0.85); }

/* ─────────────────────────────────────────────
   Remember-me / forgot row
   ───────────────────────────────────────────── */
.auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.auth-options .form-check {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
}

.auth-options .form-check-input  { margin: 0; cursor: pointer; }
.auth-options .form-check-label  { cursor: pointer; color: var(--text-secondary); font-weight: 500; }

.auth-options a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 150ms ease;
}
.auth-options a:hover { color: var(--primary-hover); text-decoration: underline; }

/* ─────────────────────────────────────────────
   Primary submit button  (login)
   ───────────────────────────────────────────── */
.btn-auth {
    display: block;
    width: 100%;
    padding: 0.82rem 1.5rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    border: none;
    border-radius: var(--radius-xl);
    cursor: pointer;
    letter-spacing: 0.03em;
    position: relative;
    overflow: hidden;
    transition: transform 200ms ease, box-shadow 200ms ease, opacity 200ms ease;
    box-shadow: 0 6px 22px rgba(246,168,33, 0.38);
}

.btn-auth::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.18) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.45s ease;
}
.btn-auth:hover         { box-shadow: 0 10px 28px rgba(246,168,33, 0.48); }
.btn-auth:active        { transform: translateY(0); opacity: 0.95; }
.btn-auth:disabled {
    cursor: progress;
    animation: authBtnPulse 1.2s ease-in-out infinite;
}

/* ─────────────────────────────────────────────
   Card footer / links
   ───────────────────────────────────────────── */
.auth-footer {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-light);
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.auth-footer a {
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
    margin-right: 0.25rem;
    transition: color 150ms ease;
}
.auth-footer a:hover { color: var(--primary-hover); text-decoration: underline; }
.auth-footer p { margin: 0; }

/* ─────────────────────────────────────────────
   Multi-step progress indicator
   ───────────────────────────────────────────── */
.progress-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    padding: 0 0.5rem;
    margin-bottom: 0.75rem !important;
}

.progress-steps::before {
    content: '';
    position: absolute;
    top: 15px;
    right: calc(100% / 6);
    left:  calc(100% / 6);
    height: 2px;
    background: var(--border-color);
    z-index: 0;
    border-radius: 999px;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
    z-index: 1;
    text-align: center;
}

.progress-step-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    position: relative;
    z-index: 1;
    border: 2px solid var(--border-color);
    background: var(--surface);
    color: var(--text-tertiary);
    transition: all 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.progress-step.active .progress-step-circle {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 0 5px rgba(246,168,33, 0.18), 0 4px 14px rgba(246,168,33, 0.35);
    transform: scale(1.12);
}

.progress-step.completed .progress-step-circle {
    background: linear-gradient(135deg, var(--success), #059669);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.30);
}

.progress-step-label {
    margin-top: 0.3rem;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-tertiary);
    line-height: 1.3;
    max-width: 72px;
}
.progress-step.active    .progress-step-label { color: var(--primary); font-weight: 700; }
.progress-step.completed .progress-step-label { color: var(--success); font-weight: 600; }

/* ─────────────────────────────────────────────
   Registration two-column grid
   ───────────────────────────────────────────── */
.auth-form-grid {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    grid-auto-flow: row dense;
    column-gap: 0;
    row-gap: 0;
    position: relative;
    align-items: start;
}

.auth-form-grid::before {
    content: '';
    position: absolute;
    top: 0.5rem;
    bottom: 0.5rem;
    left: calc(50% - 0.5px);
    width: 1px;
    border-radius: 999px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(246,168,33, 0.18) 10%,
        var(--primary) 50%,
        rgba(246,168,33, 0.18) 90%,
        transparent 100%
    );
    opacity: 0.55;
}

[data-theme="dark"] .auth-form-grid::before {
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(129, 140, 248, 0.25) 10%,
        rgba(129, 140, 248, 0.65) 50%,
        rgba(129, 140, 248, 0.25) 90%,
        transparent 100%
    );
    opacity: 0.7;
}

/* Explicit column placement — deliberately NOT nth-child-based: with a
   field-span-2 item mixed into the sequence, auto-placement + nth-child
   parity can silently flip which field lands right/left (and therefore
   the tab order) depending on what precedes it. .field-start always
   tabs first (right side, RTL reading start); .field-end always follows. */
.auth-form-grid > .field-start { grid-column: 1; padding-left: 1.25rem; }
.auth-form-grid > .field-end   { grid-column: 3; padding-right: 1.25rem; }

.field-span-2 {
    grid-column: 1 / -1;
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 575px) {
    .auth-form-grid { grid-template-columns: 1fr; }
    .auth-form-grid::before { display: none; }
    .auth-form-grid > .field-start,
    .auth-form-grid > .field-end {
        grid-column: 1;
        padding-left: 0;
        padding-right: 0;
    }
    .field-span-2 { grid-column: 1; }
}

/* ─────────────────────────────────────────────
   Form controls  (registration pages)
   ───────────────────────────────────────────── */
.auth-card .form-control,
.auth-card .form-select,
.auth-card select,
.auth-card textarea {
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 0.45rem 0.9rem;
    transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
    width: 100%;
}

.auth-card .form-control:focus,
.auth-card .form-select:focus,
.auth-card select:focus,
.auth-card textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(246,168,33, 0.13);
    background: var(--surface);
    outline: none;
}

.auth-card label {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 0.2rem;
    display: block;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

[data-theme="dark"] .auth-card .form-control,
[data-theme="dark"] .auth-card .form-select,
[data-theme="dark"] .auth-card select,
[data-theme="dark"] .auth-card textarea {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .auth-card .form-control:focus,
[data-theme="dark"] .auth-card .form-select:focus {
    background: rgba(255, 255, 255, 0.07);
}

/* ─────────────────────────────────────────────
   Buttons inside auth card
   ───────────────────────────────────────────── */
.auth-card .btn {
    border-radius: var(--radius-lg);
    font-weight: 700;
    font-family: inherit;
    padding: 0.68rem 1.3rem;
    transition: all 200ms ease;
    position: relative;
    overflow: hidden;
}

.auth-card .btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border: none;
    color: #fff;
    box-shadow: 0 4px 14px rgba(246,168,33, 0.32);
}
.auth-card .btn-primary:hover {
    box-shadow: 0 8px 22px rgba(246,168,33, 0.42);
    color: #fff;
}
.auth-card .btn-primary:disabled {
    cursor: progress;
    animation: authBtnPulse 1.2s ease-in-out infinite;
}

.auth-card .btn-outline-primary {
    border: 1.5px solid var(--primary);
    color: var(--primary);
    background: transparent;
}
.auth-card .btn-outline-primary:hover {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 4px 14px rgba(246,168,33, 0.3);
}

.auth-card .btn-outline-secondary {
    border: 1.5px solid var(--border-color);
    color: var(--text-secondary);
    background: transparent;
}
.auth-card .btn-outline-secondary:hover {
    background: var(--bg-tertiary);
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

.auth-card .btn-success {
    background: linear-gradient(135deg, var(--success), #059669);
    border: none;
    color: #fff;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.32);
}
.auth-card .btn-success:hover {
    box-shadow: 0 8px 22px rgba(16, 185, 129, 0.42);
    color: #fff;
}

.auth-form-actions { margin-top: 0.75rem; }

/* ─────────────────────────────────────────────
   Checkbox / radio
   ───────────────────────────────────────────── */
.auth-card .form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
}
.auth-card .form-check-input { cursor: pointer; flex-shrink: 0; margin: 0; float: none; }
.auth-card .form-check-label {
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: 0;
    text-transform: none;
}

/* ─────────────────────────────────────────────
   Animations
   ───────────────────────────────────────────── */
@keyframes authFadeUp {
    from { opacity: 0; transform: translateY(16px) scale(0.99); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

.animate-fade-in {
    animation: authFadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Slow, subtle color sheen drifting across the side panel — the one
   ambient effect on the auth pages, everything else is static. */
@keyframes authPanelSheen {
    0%   { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

@keyframes authIconFlip {
    from { transform: rotate(0deg) scale(0.5); opacity: 0.3; }
    to   { transform: rotate(360deg) scale(1); opacity: 1; }
}

@keyframes authIconPop {
    0%   { transform: scale(0.7); }
    60%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}

@keyframes authTitleBarGrow {
    to { transform: translateX(-50%) scaleX(1); }
}

@keyframes authBtnPulse {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.12); }
}

@keyframes authSuccessOut {
    to { opacity: 0; transform: translateY(-6px) scale(0.98); }
}

@keyframes authShake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}

.auth-shake { animation: authShake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }

/* ─────────────────────────────────────────────
   Responsive
   ───────────────────────────────────────────── */
@media (max-width: 980px) {
    .auth-content-area {
        align-items: flex-start;
        padding-top: 1.5rem;
        margin-top: 0;
    }

    .auth-shell {
        grid-template-columns: 1fr;
        max-width: 640px;
        padding: 0.5rem 0;
    }

    /* The branding panel is desktop-only real estate — on a narrow
       screen it just pushes the actual form down, so skip it entirely. */
    .auth-shell::before,
    .auth-side-panel {
        display: none;
    }

    /* ...replaced by a banner behind the card so the form doesn't lose all
       brand presence on mobile — wider than the card, with the card's top
       edge tucked slightly inside it (same visual family as the desktop
       side panel, just laid out above the form instead of beside it). */
    .auth-mobile-topbar {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        min-height: 200px;
        margin: 0 -0.9rem -100px;
        padding: 1.15rem 1.5rem 1.15rem;
        background: linear-gradient(160deg, rgba(246,168,33,0.98) 0%, rgba(220,141,21,0.95) 42%, rgba(179,98,5,0.93) 100%);
        border: 1px solid rgba(255,255,255,0.18);
        border-radius: 24px;
        box-shadow: 0 12px 28px rgba(169, 103, 14, 0.24);
    }

    .auth-mobile-topbar__title {
        margin: 0;
        max-width: 320px;
        font-size: 1.05rem;
        line-height: 1.35;
        font-weight: 800;
        letter-spacing: -0.01em;
        text-align: center;
        color: #fff;
    }

    .auth-mobile-topbar__text {
        margin: 0;
        max-width: 300px;
        font-size: 0.78rem;
        line-height: 1.5;
        text-align: center;
        color: rgba(255,255,255,0.86);
    }

    .auth-card {
        position: relative;
        z-index: 2;
        transform: none;
    }
}

@media (max-width: 820px) {
    .auth-trust-pill { font-size: 0.7rem; padding: 0.32rem 0.65rem; }

    .auth-nav-link span { display: none; }
    .auth-nav-link { padding: 0.42rem 0.55rem; }
    .auth-nav-link i { opacity: 1; font-size: 0.875rem; }
}

@media (max-width: 480px) {
    .auth-nav-inner { padding: 0 1rem; }
    .auth-nav-brand-text { font-size: 0.95rem; }

    .auth-banner { padding: 1rem 1rem 1.6rem; }
    .auth-banner-inner { gap: 0.5rem 0.9rem; }
    .auth-banner-logo { width: 36px; height: 36px; border-radius: 11px; }
    .auth-banner-logo-img { height: 20px; }
    .auth-banner-title { font-size: 1rem; }
    .auth-banner-tagline { display: none; }
    .auth-banner-trust { gap: 0.35rem; width: 100%; }

    .auth-card {
        padding: 1.5rem 1.25rem;
        border-radius: 16px;
        max-width: 100%;
    }
    .auth-title { font-size: 1.3rem; }
    .progress-step-circle { width: 34px; height: 34px; font-size: 0.8rem; }
    .progress-step-label  { font-size: 0.68rem; max-width: 60px; }
    .auth-side-panel__title { font-size: 1.6rem; }
    .auth-side-list li { font-size: 0.82rem; }
}

@media (max-width: 360px) {
    .auth-card { padding: 1.25rem 1rem; border-radius: 14px; }
    .auth-title { font-size: 1.18rem; }
}

/* ─────────────────────────────────────────────
   Business type card selector (registration)
   ───────────────────────────────────────────── */
.biz-type-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
}
@media (max-width: 575px) {
    .biz-type-grid { grid-template-columns: 1fr; }
}

.biz-type-card {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: start;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem 0.55rem 2rem;
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    background: var(--bg-tertiary);
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease,
        transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.biz-type-radio {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    transform: translateY(-50%);
    accent-color: var(--primary);
    cursor: pointer;
}

.biz-type-icon {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: rgba(246,168,33,.1);
    color: var(--primary);
    font-size: 0.95rem;
}

.biz-type-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}

.biz-type-desc {
    font-size: 0.72rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.biz-type-card--active {
    border-color: var(--primary);
    background: rgba(246,168,33,.06);
    box-shadow: 0 0 0 3px rgba(246,168,33,.12);
    transform: scale(1.02);
}

/* لا يوجد إدخال واحد قابل للتمييز في مجموعة radio-card ليأخذ .is-invalid
   القياسية من Bootstrap؛ الخطأ يُميَّز على المجموعة كلها بدل ذلك (راجع
   renderFieldErrors في static/js/main.js). */
.biz-type-grid--invalid .biz-type-card {
    border-color: #dc3545;
}
.biz-type-grid--invalid .biz-type-card:not(.biz-type-card--active) {
    background: rgba(220,53,69,.05);
}
.biz-type-card--active .biz-type-icon {
    background: var(--primary);
    color: #fff;
    animation: authIconPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─────────────────────────────────────────────
   Hover-lift transforms — real pointer devices only.
   On touch, tapping an element can leave it stuck in the :hover state
   (no mouseleave to clear it), which made the auth card/buttons visibly
   jump and stay shifted after any tap — most noticeably right after
   submitting a form with errors. Restricting these transforms to
   (hover: hover) and (pointer: fine) keeps the desktop lift effects
   and removes the stuck-offset bug on mobile/touch.
   ───────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
    .auth-theme-btn:hover { transform: scale(1.08); }
    .auth-side-panel:hover { transform: translateX(-14px) scale(1.01); }
    .auth-feature-item:hover { transform: translateY(-3px); }
    .auth-card:hover { transform: translateX(18px) translateY(-2px); }
    .btn-auth:hover::after { transform: translateX(100%); }
    .btn-auth:hover { transform: translateY(-2px); }
    .auth-card .btn-primary:hover { transform: translateY(-2px); }
    .auth-card .btn-outline-primary:hover { transform: translateY(-1px); }
    .auth-card .btn-success:hover { transform: translateY(-2px); }
    .biz-type-card:hover { transform: translateY(-1px); }
}

/* ─────────────────────────────────────────────
   Reduced motion
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .auth-shell,
    .auth-side-panel,
    .auth-title::after,
    .auth-shake,
    .icon-flip,
    .btn-auth:disabled,
    .auth-card .btn-primary:disabled,
    .biz-type-card--active .biz-type-icon {
        animation: none !important;
    }
}