/* ============================================================================
   AL ZUHRA ACADEMY — LUXURY MONOCHROMATIC SCHOLARLY E-COMMERCE STYLESHEET
   Deep Obsidian Dark Palette, High-Contrast Typography & Classical Aesthetics
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400&family=Amiri+Quran&family=Cinzel:wght@500;600;700;800&family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;1,400;1,600&family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
  --color-obsidian-deep: #000000;
  --color-obsidian-surface: #0a0a0c;
  --color-obsidian-card: #121215;
  --color-obsidian-hover: #1c1c21;
  --color-obsidian-border: #27272a;
  
  --color-light-bg: #fafafa;
  --color-light-card: #ffffff;
  --color-light-hover: #f4f4f5;
  --color-light-border: #e4e4e7;

  --font-serif: 'Playfair Display', Georgia, serif;
  --font-brand: 'Cinzel', serif;
  --font-arabic: 'Amiri', serif;
  --font-sans: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Global Reset & Typography */
* {
  -webkit-tap-highlight-color: transparent !important;
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-light-bg);
  color: #18181b;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.25s ease, color 0.25s ease;
}

html.dark body, body.dark {
  background-color: var(--color-obsidian-deep);
  color: #f4f4f5;
}

.font-serif { font-family: var(--font-serif); }
.font-brand { font-family: var(--font-brand); }
.font-arabic, .font-urdu, [dir="rtl"] { font-family: var(--font-arabic); }
.font-sans, .font-poppins { font-family: var(--font-sans); }

/* Arabesque Subtle Islamic Background Mesh */
.arabesque-bg {
  background-image: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.02) 0%, transparent 80%),
    linear-gradient(to right, rgba(0, 0, 0, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
  background-size: 100% 100%, 48px 48px, 48px 48px;
}

html.dark .arabesque-bg {
  background-image: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.025) 0%, transparent 80%),
    linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 100% 100%, 48px 48px, 48px 48px;
}

/* Premium Book Card Hover & 3D Lighting */
.book-card {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.book-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.12);
}

html.dark .book-card:hover {
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.book-cover-img {
  transition: transform 0.35s ease, filter 0.35s ease, box-shadow 0.35s ease;
  box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.2);
}

.book-card:hover .book-cover-img {
  transform: scale(1.02);
  box-shadow: 0 14px 28px -4px rgba(0, 0, 0, 0.35);
}

/* Dark Mode Form Inputs & Selects */
html.dark input[type="text"],
html.dark input[type="number"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="tel"],
html.dark textarea,
html.dark select {
  background-color: #0d0d10 !important;
  color: #f4f4f5 !important;
  border-color: #27272a !important;
}

html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
  border-color: #52525b !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1) !important;
}

/* Glassmorphism Panels */
.glass-panel {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

html.dark .glass-panel {
  background: rgba(13, 13, 16, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: #f4f4f5;
}

::-webkit-scrollbar-thumb {
  background: #d4d4d8;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a1a1aa;
}

html.dark ::-webkit-scrollbar-track {
  background: #09090b;
}

html.dark ::-webkit-scrollbar-thumb {
  background: #27272a;
  border-radius: 4px;
}

html.dark ::-webkit-scrollbar-thumb:hover {
  background: #3f3f46;
}

/* Status Pill Badges in Dark & Light Modes */
.badge-status-pending { background-color: #fef3c7; color: #92400e; }
.badge-status-confirmed { background-color: #dbeafe; color: #1e40af; }
.badge-status-processing { background-color: #e0e7ff; color: #3730a3; }
.badge-status-packed { background-color: #f3e8ff; color: #6b21a8; }
.badge-status-dispatched { background-color: #fae8ff; color: #86198f; }
.badge-status-out_for_delivery { background-color: #ffedd5; color: #9a3412; }
.badge-status-delivered { background-color: #d1fae5; color: #065f46; }
.badge-status-cancelled { background-color: #fee2e2; color: #991b1b; }
.badge-status-refunded { background-color: #f1f5f9; color: #475569; }

html.dark .badge-status-pending { background-color: #451a03; color: #fde68a; border: 1px solid #78350f; }
html.dark .badge-status-confirmed { background-color: #172554; color: #bfdbfe; border: 1px solid #1e3a8a; }
html.dark .badge-status-processing { background-color: #1e1b4b; color: #c7d2fe; border: 1px solid #312e81; }
html.dark .badge-status-packed { background-color: #3b0764; color: #e9d5ff; border: 1px solid #581c87; }
html.dark .badge-status-dispatched { background-color: #4a044e; color: #f5d0fe; border: 1px solid #701a75; }
html.dark .badge-status-out_for_delivery { background-color: #431407; color: #fed7aa; border: 1px solid #7c2d12; }
html.dark .badge-status-delivered { background-color: #052e16; color: #a7f3d0; border: 1px solid #14532d; }
html.dark .badge-status-cancelled { background-color: #450a0a; color: #fecaca; border: 1px solid #7f1d1d; }
html.dark .badge-status-refunded { background-color: #18181b; color: #d4d4d8; border: 1px solid #27272a; }