/* ============================================================
   Dragon Park — Account Dashboard Design System
   Theme: Deep Purple #4C2A92 + Gold #F59E0B
   ============================================================ */

:root {
    --dp-primary: #4C2A92;
    --dp-primary-light: #7B52C7;
    --dp-primary-dark: #1E1045;
    --dp-primary-50: #f5f0ff;
    --dp-primary-100: #ede5ff;
    --dp-primary-200: #d4c4f7;
    --dp-gold: #F59E0B;
    --dp-gold-light: #fef3c7;
    --dp-gold-dark: #b45309;

    /* Text */
    --dp-text-heading: #1E1045;
    --dp-text-body: #1e293b;
    --dp-text-secondary: #64748b;
    --dp-text-muted: #94a3b8;

    /* Surfaces */
    --dp-surface: #ffffff;
    --dp-surface-warm: #faf8ff;
    --dp-surface-hover: #f5f0ff;
    --dp-border: #e2ddf0;
    --dp-border-light: #f0ecf7;

    /* Status */
    --dp-success: #059669;
    --dp-success-bg: #ecfdf5;
    --dp-success-border: #a7f3d0;
    --dp-warning: #d97706;
    --dp-warning-bg: #fffbeb;
    --dp-warning-border: #fde68a;
    --dp-danger: #dc2626;
    --dp-danger-bg: #fef2f2;
    --dp-danger-border: #fecaca;
    --dp-info: #2563eb;
    --dp-info-bg: #eff6ff;
    --dp-info-border: #bfdbfe;
}

/* ── Page Background ───────────────────────────────── */
.dp-page {
    min-height: 100vh;
    background: linear-gradient(160deg, var(--dp-surface-warm) 0%, #f8f6ff 40%, #fefcf7 100%);
}

/* ── Cards ──────────────────────────────────────────── */
.dp-card {
    background: var(--dp-surface);
    border: 1px solid var(--dp-border);
    border-radius: 1rem;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.dp-card:hover {
    box-shadow: 0 4px 20px rgba(76, 42, 146, 0.08);
}

/* ── Nav ────────────────────────────────────────────── */
.dp-nav {
    background: var(--dp-surface);
    border: 1px solid var(--dp-border);
    border-radius: 1rem;
    padding: 0.375rem;
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
}
.dp-nav-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dp-text-secondary);
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
}
.dp-nav-item:hover {
    background: var(--dp-surface-hover);
    color: var(--dp-primary);
}
.dp-nav-item.active {
    background: linear-gradient(135deg, var(--dp-primary), var(--dp-primary-light));
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(76, 42, 146, 0.3);
}

/* ── Buttons ────────────────────────────────────────── */
.dp-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(135deg, var(--dp-primary), var(--dp-primary-light));
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(76, 42, 146, 0.25);
    text-decoration: none;
}
.dp-btn-primary:hover {
    box-shadow: 0 4px 16px rgba(76, 42, 146, 0.35);
    transform: translateY(-1px);
}
.dp-btn-gold {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(135deg, var(--dp-gold), var(--dp-gold-dark));
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
    text-decoration: none;
}
.dp-btn-gold:hover {
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
    transform: translateY(-1px);
}
.dp-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dp-primary);
    background: var(--dp-primary-50);
    border: 1px solid var(--dp-primary-200);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}
.dp-btn-outline:hover {
    background: var(--dp-primary-100);
    color: var(--dp-primary-dark);
}
.dp-btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dp-danger);
    background: var(--dp-danger-bg);
    border: 1px solid var(--dp-danger-border);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}
.dp-btn-danger:hover {
    background: #fee2e2;
}
.dp-btn-success {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dp-success);
    background: var(--dp-success-bg);
    border: 1px solid var(--dp-success-border);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}
.dp-btn-success:hover {
    background: #d1fae5;
}
.dp-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--dp-text-body);
    background: #f1f5f9;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}
.dp-btn-ghost:hover {
    background: #e2e8f0;
}

/* ── Text Colors (guaranteed visible) ──────────────── */
.dp-heading    { color: var(--dp-text-heading); }
.dp-body       { color: var(--dp-text-body); }
.dp-secondary  { color: var(--dp-text-secondary); }
.dp-muted      { color: var(--dp-text-muted); }
.dp-primary-text { color: var(--dp-primary); }
.dp-gold-text  { color: var(--dp-gold-dark); }
.dp-link       { color: var(--dp-primary); font-weight: 600; text-decoration: none; }
.dp-link:hover { color: var(--dp-primary-dark); text-decoration: underline; }

/* ── Badges ─────────────────────────────────────────── */
.dp-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
}
.dp-badge-confirmed   { background: var(--dp-success-bg); color: var(--dp-success); border: 1px solid var(--dp-success-border); }
.dp-badge-pending     { background: var(--dp-warning-bg); color: var(--dp-warning); border: 1px solid var(--dp-warning-border); }
.dp-badge-cancelled   { background: var(--dp-danger-bg); color: var(--dp-danger); border: 1px solid var(--dp-danger-border); }
.dp-badge-completed   { background: var(--dp-primary-50); color: var(--dp-primary); border: 1px solid var(--dp-primary-200); }
.dp-badge-info        { background: var(--dp-info-bg); color: var(--dp-info); border: 1px solid var(--dp-info-border); }

/* ── Hero / Gradient Cards ──────────────────────────── */
.dp-hero {
    background: linear-gradient(135deg, var(--dp-primary) 0%, var(--dp-primary-dark) 100%);
    color: #ffffff;
    border-radius: 1rem;
    position: relative;
    overflow: hidden;
}
.dp-hero::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: rgba(255,255,255,0.06);
    border-radius: 50%;
}
.dp-hero::after {
    content: '';
    position: absolute;
    bottom: -20%;
    left: -5%;
    width: 200px;
    height: 200px;
    background: rgba(255,255,255,0.04);
    border-radius: 50%;
}
[dir="rtl"] .dp-hero::before { right: auto; left: -10%; }
[dir="rtl"] .dp-hero::after  { left: auto; right: -5%; }

.dp-hero-content { position: relative; z-index: 2; }
.dp-hero .dp-hero-subtitle { color: rgba(255,255,255,0.65); }
.dp-hero .dp-hero-title    { color: #ffffff; }
.dp-hero .dp-hero-desc     { color: rgba(255,255,255,0.75); }

/* ── Stat Cards ─────────────────────────────────────── */
.dp-stat {
    background: var(--dp-surface);
    border-radius: 1rem;
    padding: 1.25rem;
    transition: all 0.2s ease;
}
.dp-stat:hover {
    box-shadow: 0 4px 20px rgba(76, 42, 146, 0.08);
    transform: translateY(-2px);
}
.dp-stat-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dp-stat-value { font-size: 1.5rem; font-weight: 900; color: var(--dp-text-heading); line-height: 1; }
.dp-stat-label { font-size: 0.75rem; font-weight: 500; color: var(--dp-text-secondary); margin-top: 0.375rem; }

/* ── Section Headers ────────────────────────────────── */
.dp-section-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--dp-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dp-section-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--dp-text-heading);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.dp-section-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--dp-primary), var(--dp-primary-light));
    color: #ffffff;
}

/* ── Info Cells (booking detail grids) ──────────────── */
.dp-info-cell {
    background: var(--dp-surface-warm);
    border-radius: 0.75rem;
    padding: 0.75rem;
}
.dp-info-cell-label  { font-size: 0.75rem; font-weight: 500; color: var(--dp-text-muted); margin-bottom: 0.25rem; }
.dp-info-cell-value  { font-size: 0.875rem; font-weight: 700; color: var(--dp-text-heading); }
.dp-info-cell-accent {
    background: var(--dp-primary-50);
    border: 1px solid var(--dp-primary-200);
}
.dp-info-cell-accent .dp-info-cell-label { color: var(--dp-primary-light); }
.dp-info-cell-accent .dp-info-cell-value { color: var(--dp-primary); font-weight: 900; }

/* ── Form Inputs ────────────────────────────────────── */
.dp-input {
    width: 100%;
    border: 1px solid var(--dp-border);
    background: var(--dp-surface);
    color: var(--dp-text-body);
    border-radius: 0.75rem;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}
.dp-input:focus {
    border-color: var(--dp-primary-light);
    box-shadow: 0 0 0 3px rgba(76, 42, 146, 0.1);
}
.dp-input-readonly {
    background: var(--dp-surface-warm);
    color: var(--dp-text-secondary);
    cursor: not-allowed;
    border-color: var(--dp-border-light);
}
.dp-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dp-text-body);
    margin-bottom: 0.375rem;
}

/* ── Alerts ─────────────────────────────────────────── */
.dp-alert {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border-radius: 1rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
}
.dp-alert-success { background: var(--dp-success-bg); color: var(--dp-success); border: 1px solid var(--dp-success-border); }
.dp-alert-error   { background: var(--dp-danger-bg); color: var(--dp-danger); border: 1px solid var(--dp-danger-border); }

/* ── Empty States ───────────────────────────────────── */
.dp-empty {
    padding: 4rem 2rem;
    text-align: center;
}
.dp-empty-icon {
    width: 5rem;
    height: 5rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    background: var(--dp-primary-50);
}
.dp-empty-icon svg { width: 2.5rem; height: 2.5rem; color: var(--dp-primary-200); }
.dp-empty-title { font-size: 1.125rem; font-weight: 700; color: var(--dp-text-secondary); margin-bottom: 0.5rem; }
.dp-empty-desc  { font-size: 0.875rem; color: var(--dp-text-muted); margin-bottom: 1.5rem; }

/* ── Toggle Switch ──────────────────────────────────── */
.dp-toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; flex-shrink: 0; }
.dp-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.dp-toggle-track {
    width: 2.75rem;
    height: 1.5rem;
    background: #cbd5e1;
    border-radius: 9999px;
    position: relative;
    transition: background 0.2s;
}
.dp-toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.25rem;
    height: 1.25rem;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.dp-toggle input:checked + .dp-toggle-track {
    background: var(--dp-primary);
}
.dp-toggle input:checked + .dp-toggle-track::after {
    transform: translateX(1.25rem);
}
[dir="rtl"] .dp-toggle-track::after { left: auto; right: 2px; }
[dir="rtl"] .dp-toggle input:checked + .dp-toggle-track::after { transform: translateX(-1.25rem); }

/* ── Timeline ───────────────────────────────────────── */
.dp-timeline {
    position: relative;
    padding-inline-start: 1.75rem;
}
.dp-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: 0.9375rem;
    width: 2px;
    background: var(--dp-border);
}
.dp-timeline-item {
    position: relative;
    padding-bottom: 1.5rem;
}
.dp-timeline-dot {
    position: absolute;
    inset-inline-start: -1.75rem;
    top: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 4px var(--dp-surface);
}
.dp-timeline-dot svg { width: 1rem; height: 1rem; }
.dp-timeline-text { font-size: 0.875rem; font-weight: 700; color: var(--dp-text-heading); }
.dp-timeline-time { font-size: 0.75rem; color: var(--dp-text-muted); margin-top: 0.125rem; }

/* ── Filter Tabs ────────────────────────────────────── */
.dp-filter-bar {
    display: flex;
    gap: 0.25rem;
    padding: 0.375rem;
    background: var(--dp-surface);
    border: 1px solid var(--dp-border);
    border-radius: 1rem;
    overflow-x: auto;
}
.dp-filter-tab {
    padding: 0.5rem 1rem;
    border-radius: 0.625rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dp-text-secondary);
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s;
}
.dp-filter-tab:hover {
    background: var(--dp-surface-hover);
    color: var(--dp-primary);
}
.dp-filter-tab.active {
    background: linear-gradient(135deg, var(--dp-primary), var(--dp-primary-light));
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(76, 42, 146, 0.25);
}

/* ── Page Header ────────────────────────────────────── */
.dp-page-title {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--dp-text-heading);
    letter-spacing: -0.01em;
}
.dp-page-accent {
    height: 3px;
    width: 3rem;
    border-radius: 9999px;
    margin-top: 0.5rem;
    background: linear-gradient(90deg, var(--dp-primary), var(--dp-gold));
}

/* ── Stars ──────────────────────────────────────────── */
.dp-star-on  { color: #f59e0b; }
.dp-star-off { color: #e2e8f0; }

/* ── Table ──────────────────────────────────────────── */
.dp-table { width: 100%; font-size: 0.875rem; }
.dp-table th {
    padding: 0.75rem 1.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--dp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--dp-surface-warm);
}
.dp-table td {
    padding: 0.75rem 1.5rem;
    color: var(--dp-text-body);
}
.dp-table tbody tr { transition: background 0.15s; }
.dp-table tbody tr:hover { background: var(--dp-surface-hover); }

/* ── Modal ──────────────────────────────────────────── */
.dp-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(30, 16, 69, 0.5);
    backdrop-filter: blur(4px);
    padding: 1rem;
}
.dp-modal {
    background: var(--dp-surface);
    border-radius: 1rem;
    box-shadow: 0 25px 50px rgba(30, 16, 69, 0.25);
    max-width: 28rem;
    width: 100%;
    padding: 2rem;
}

/* ============================================================
   Auth Pages — Light Mode Only
   ============================================================ */

.dp-auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: linear-gradient(160deg, #faf8ff 0%, #f5f0ff 50%, #fefcf7 100%);
    position: relative;
    overflow: hidden;
}
.dp-auth-page::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -15%;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(76,42,146,0.06) 0%, transparent 70%);
    pointer-events: none;
}
.dp-auth-page::after {
    content: '';
    position: absolute;
    bottom: -25%;
    left: -10%;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245,158,11,0.05) 0%, transparent 70%);
    pointer-events: none;
}
[dir="rtl"] .dp-auth-page::before { right: auto; left: -15%; }
[dir="rtl"] .dp-auth-page::after  { left: auto; right: -10%; }

.dp-auth-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 28rem;
}

.dp-auth-card {
    background: #ffffff;
    border: 1px solid var(--dp-border);
    border-radius: 1.25rem;
    padding: 2.5rem;
    box-shadow:
        0 4px 24px rgba(76, 42, 146, 0.06),
        0 1px 3px rgba(0, 0, 0, 0.04);
}

.dp-auth-header {
    text-align: center;
    margin-bottom: 2rem;
}
.dp-auth-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    background: linear-gradient(135deg, var(--dp-primary), var(--dp-primary-light));
    box-shadow: 0 4px 16px rgba(76, 42, 146, 0.25);
}
.dp-auth-icon svg { width: 1.75rem; height: 1.75rem; color: #ffffff; }

.dp-auth-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--dp-text-heading);
    letter-spacing: -0.01em;
    margin-bottom: 0.375rem;
}
.dp-auth-subtitle {
    font-size: 0.9375rem;
    color: var(--dp-text-secondary);
    line-height: 1.5;
}

/* Auth form specifics */
.dp-auth-form { display: flex; flex-direction: column; gap: 1.25rem; }

.dp-auth-footer {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--dp-border-light);
}
.dp-auth-footer p { color: var(--dp-text-secondary); font-size: 0.875rem; }
.dp-auth-footer a { color: var(--dp-primary); font-weight: 700; text-decoration: none; }
.dp-auth-footer a:hover { color: var(--dp-primary-dark); text-decoration: underline; }

.dp-auth-divider {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* OTP input */
.dp-otp-input {
    width: 100%;
    padding: 1rem 1.5rem;
    border: 2px solid var(--dp-border);
    border-radius: 0.75rem;
    background: var(--dp-surface-warm);
    color: var(--dp-text-heading);
    font-size: 1.875rem;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.75em;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.dp-otp-input:focus {
    border-color: var(--dp-primary);
    box-shadow: 0 0 0 4px rgba(76, 42, 146, 0.1);
}
.dp-otp-input::placeholder {
    color: var(--dp-text-muted);
    letter-spacing: 0.5em;
}

/* Checkbox styled */
.dp-checkbox {
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 0.25rem;
    border: 2px solid var(--dp-border);
    accent-color: var(--dp-primary);
    cursor: pointer;
}

/* Error text */
.dp-error { color: var(--dp-danger); font-size: 0.8125rem; margin-top: 0.25rem; }

/* Auth animations */
@keyframes dp-auth-fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
.dp-auth-animate {
    animation: dp-auth-fadeUp 0.5s ease-out both;
}
.dp-auth-animate-delay-1 { animation-delay: 0.08s; }
.dp-auth-animate-delay-2 { animation-delay: 0.16s; }
.dp-auth-animate-delay-3 { animation-delay: 0.24s; }
.dp-auth-animate-delay-4 { animation-delay: 0.32s; }
.dp-auth-animate-delay-5 { animation-delay: 0.4s; }