/* =====================================================
   DOKAN VENDOR LOGIN  —  login.css
   Bilingual (EN / AR) · Light / Dark · Responsive
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500;600&family=Noto+Kufi+Arabic:wght@300;400;600&display=swap');

/* ── CSS Variables ── */
:root {
    --dvl-bg:           #f5f3ee;
    --dvl-surface:      #ffffff;
    --dvl-border:       #e2ddd5;
    --dvl-text:         #1a1714;
    --dvl-text-muted:   #7a7065;
    --dvl-accent:       #c8763a;
    --dvl-accent-dark:  #a85f28;
    --dvl-accent-light: #f5e8da;
    --dvl-input-bg:     #faf9f6;
    --dvl-shadow:       0 8px 40px rgba(0,0,0,.10);
    --dvl-shadow-sm:    0 2px 12px rgba(0,0,0,.06);
    --dvl-radius:       16px;
    --dvl-radius-sm:    8px;
    --dvl-font-en:      'DM Sans', sans-serif;
    --dvl-font-ar:      'Noto Kufi Arabic', sans-serif;
    --dvl-font-head:    'DM Serif Display', serif;
    --dvl-transition:   0.22s cubic-bezier(.4,0,.2,1);
    --dvl-deco1:        #e8d5c0;
    --dvl-deco2:        #d4e8d0;
}

[data-theme="dark"] {
    --dvl-bg:           #141210;
    --dvl-surface:      #1e1c19;
    --dvl-border:       #2e2b26;
    --dvl-text:         #f0ebe3;
    --dvl-text-muted:   #8a8278;
    --dvl-accent:       #e08840;
    --dvl-accent-dark:  #c8763a;
    --dvl-accent-light: #2a1f13;
    --dvl-input-bg:     #252220;
    --dvl-shadow:       0 8px 40px rgba(0,0,0,.40);
    --dvl-shadow-sm:    0 2px 12px rgba(0,0,0,.25);
    --dvl-deco1:        #2a2219;
    --dvl-deco2:        #182519;
}

/* ── RTL (Arabic) ── */
[data-lang="ar"] { font-family: var(--dvl-font-ar); }
[data-lang="en"] { font-family: var(--dvl-font-en); }

/* ── Reset & Base ── */
.dvl-wrap *, .dvl-wrap *::before, .dvl-wrap *::after { box-sizing: border-box; margin: 0; padding: 0; }

.dvl-wrap {
    position: relative;
    min-height: 100vh;
    background-color: var(--dvl-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px 60px;
    overflow: hidden;
    transition: background-color var(--dvl-transition);
    font-family: var(--dvl-font-en);
    color: var(--dvl-text);
}

/* ── Decorative blobs ── */
.dvl-deco {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    transition: background-color var(--dvl-transition);
    z-index: 0;
}
.dvl-deco--1 {
    width: 420px; height: 420px;
    top: -120px; right: -100px;
    background: var(--dvl-deco1);
    opacity: .6;
}
.dvl-deco--2 {
    width: 320px; height: 320px;
    bottom: -80px; left: -80px;
    background: var(--dvl-deco2);
    opacity: .5;
}

/* ── Top Bar ── */
.dvl-topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    background: var(--dvl-surface);
    border-bottom: 1px solid var(--dvl-border);
    backdrop-filter: blur(8px);
    box-shadow: var(--dvl-shadow-sm);
    transition: background var(--dvl-transition), border-color var(--dvl-transition);
}
.dvl-topbar__brand img,
.dvl-topbar__brand .custom-logo { height: 36px; width: auto; }
.dvl-site-name {
    font-family: var(--dvl-font-head);
    font-size: 20px;
    color: var(--dvl-accent);
}

/* ── Card ── */
.dvl-card {
    position: relative; z-index: 1;
    /* margin-top: 70px; */
    width: 95%; 
    height: 95%;
    /* max-width: 880px; */
    background: var(--dvl-surface);
    border: 1px solid var(--dvl-border);
    border-radius: var(--dvl-radius);
    box-shadow: var(--dvl-shadow);
    padding: 40px 36px 32px;
    transition: background var(--dvl-transition), border-color var(--dvl-transition);
    animation: dvl-fade-up .5s cubic-bezier(.4,0,.2,1) both;
}

@keyframes dvl-fade-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Card Header ── */
.dvl-card__header { margin-bottom: 28px; text-align: center; }
.dvl-title {
    font-family: var(--dvl-font-head);
    font-size: 32px;
    font-weight: 400;
    color: var(--dvl-text);
    line-height: 1.15;
    margin-bottom: 8px;
}
[data-lang="ar"] .dvl-title { font-family: var(--dvl-font-ar); font-size: 28px; }
.dvl-subtitle {
    font-size: 14px;
    color: var(--dvl-text-muted);
    font-weight: 400;
}

/* ── Language-aware spans ── */
[data-lang="en"] [lang="ar"] { display: none !important; }
[data-lang="ar"] [lang="en"] { display: none !important; }

/* ── Message ── */
.dvl-message {
    border-radius: var(--dvl-radius-sm);
    padding: 12px 16px;
    font-size: 14px;
    margin-bottom: 20px;
    display: flex; align-items: flex-start; gap: 8px;
    transition: all var(--dvl-transition);
}
.dvl-message--error { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.dvl-message--success { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
[data-theme="dark"] .dvl-message--error { background: #2d1515; color: #f87171; border-color: #5a2020; }
[data-theme="dark"] .dvl-message--success { background: #152d1a; color: #4ade80; border-color: #205a28; }

/* ── Form ── */
.dvl-form { display: flex; flex-direction: column; gap: 18px; }

.dvl-field { display: flex; flex-direction: column; gap: 6px; }

.dvl-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--dvl-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}
[data-lang="ar"] .dvl-label { letter-spacing: 0; font-size: 14px; text-transform: none; }

.dvl-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.dvl-input-icon {
    position: absolute;
    left: 14px;
    color: var(--dvl-text-muted);
    display: flex; align-items: center;
    pointer-events: none;
    transition: color var(--dvl-transition);
}
[dir="rtl"] .dvl-input-icon { left: auto; right: 14px; }

.dvl-input {
    width: 100%;
    background: var(--dvl-input-bg);
    border: 1.5px solid var(--dvl-border);
    border-radius: var(--dvl-radius-sm);
    padding: 12px 44px;
    font-size: 15px;
    color: var(--dvl-text);
    font-family: inherit;
    outline: none;
    transition: border-color var(--dvl-transition), box-shadow var(--dvl-transition), background var(--dvl-transition);
}
.dvl-input::placeholder { color: var(--dvl-text-muted); opacity: .7; }
.dvl-input:focus {
    border-color: var(--dvl-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dvl-accent) 18%, transparent);
    background: var(--dvl-surface);
}
.dvl-input:focus + .dvl-input-icon,
.dvl-input-wrap:focus-within .dvl-input-icon { color: var(--dvl-accent); }
.dvl-input.dvl-error { border-color: #dc2626; }

/* Password toggle */
.dvl-toggle-pw {
    position: absolute;
    right: 12px;
    background: none; border: none;
    cursor: pointer; padding: 4px;
    color: var(--dvl-text-muted);
    display: flex; align-items: center;
    transition: color var(--dvl-transition);
}
[dir="rtl"] .dvl-toggle-pw { right: auto; left: 12px; }
.dvl-toggle-pw:hover { color: var(--dvl-accent); }

.dvl-error-msg {
    font-size: 12px;
    color: #dc2626;
    min-height: 16px;
}

/* ── Row: Remember + Forgot ── */
.dvl-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.dvl-checkbox-label {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; cursor: pointer;
    color: var(--dvl-text-muted);
    user-select: none;
}
.dvl-checkbox-label input[type="checkbox"] { display: none; }
.dvl-checkbox-custom {
    width: 18px; height: 18px;
    border: 1.5px solid var(--dvl-border);
    border-radius: 4px;
    background: var(--dvl-input-bg);
    display: flex; align-items: center; justify-content: center;
    transition: all var(--dvl-transition);
    flex-shrink: 0;
}
.dvl-checkbox-label input:checked ~ .dvl-checkbox-custom {
    background: var(--dvl-accent);
    border-color: var(--dvl-accent);
}
.dvl-checkbox-label input:checked ~ .dvl-checkbox-custom::after {
    content: '';
    display: block;
    width: 5px; height: 9px;
    border: 2px solid #fff;
    border-top: none; border-left: none;
    transform: rotate(45deg) translate(-1px, -1px);
}
.dvl-forgot {
    font-size: 13px;
    color: var(--dvl-accent);
    text-decoration: none;
    font-weight: 500;
    transition: opacity var(--dvl-transition);
}
.dvl-forgot:hover { opacity: .75; text-decoration: underline; }

/* ── Submit Button ── */
.dvl-submit-btn {
    width: 100%;
    padding: 14px;
    background: var(--dvl-accent);
    color: #fff;
    border: none;
    border-radius: var(--dvl-radius-sm);
    font-size: 15px; font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: background var(--dvl-transition), transform .12s, box-shadow var(--dvl-transition);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--dvl-accent) 35%, transparent);
    margin-top: 4px;
    letter-spacing: .02em;
}
.dvl-submit-btn:hover { background: var(--dvl-accent-dark); }
.dvl-submit-btn:active { transform: scale(.985); }
.dvl-submit-btn:disabled { opacity: .65; cursor: not-allowed; transform: none; }

.dvl-spin {
    animation: dvl-spin 0.8s linear infinite;
}
@keyframes dvl-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Register Link ── */
.dvl-register-link {
    text-align: center;
    font-size: 14px;
    color: var(--dvl-text-muted);
    margin-top: 20px;
}
.dvl-register-link a {
    color: var(--dvl-accent);
    font-weight: 600;
    text-decoration: none;
    transition: opacity var(--dvl-transition);
}
.dvl-register-link a:hover { opacity: .75; text-decoration: underline; }

/* ── Responsive ── */
@media (max-width: 500px) {
    .dvl-card { padding: 28px 20px 24px; }
    .dvl-title { font-size: 50PX; }
    .dvl-topbar { padding: 10px 16px; }
}