/* ═══════════════════════════════════════════════════════════════════
   🚗 UNIFIED CAR MARKETPLACE THEME SYSTEM
   نظام الثيم الموحد لسوق السيارات
   
   الملف الوحيد المتحكم بجميع ألوان وتفاصيل الموقع
   Inspired by: BMW M Sport, Mercedes-AMG, Audi RS
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   🌅 LIGHT MODE - الوضع النهاري
   Modern, Clean, Professional Design
   ═══════════════════════════════════════════════════════════════════ */
:root,
html[data-theme="light"],
.light-theme {
  /* ─────────────────────────────────────────
     الخلفيات - Backgrounds
     ───────────────────────────────────────── */
  --bg-primary: #c7c0b9;
  /* صفحة رئيسية - بيج واضح */
  --bg-secondary: #b4b1aa;
  /* بطاقات وأقسام - بيج فاتح جداً */
  --bg-card: #a09090;
  /* بطاقات السيارات - أبيض */
  --bg-hover: #9ea7b5;
  /* تحويم - رمادي فاتح */
  --bg-accent: #eed0c3;
  /* خلفية مميزة - برتقالي فاتح جداً */
  --bg-header: #1A1D2E;
  /* هيدر داكن ثابت */
  --bg-footer: #F4F1EA;
  /* فوتر بيج واضح */
  --bg-overlay: rgba(255, 255, 255, 0.95);
  /* طبقة شفافة */
  --bg-section-light: #F4F1EA;
  /* خلفية الأقسام - بيج واضح */

  /* ─────────────────────────────────────────
     النصوص - Text Colors
     ───────────────────────────────────────── */
  --text-primary: #1A1D2E;
  /* نص رئيسي - أزرق داكن جداً */
  --text-secondary: #4A5568;
  /* نص ثانوي - رمادي */
  --text-tertiary: #718096;
  /* نص خفيف - رمادي فاتح */
  --text-inverse: #FFFFFF;
  /* نص عكسي - أبيض */
  --text-muted: #A0AEC0;
  /* نص خافت */
  --text-on-header: #FFFFFF;
  /* نص على الهيدر */
  --text-link: #FF6B35;
  /* روابط - برتقالي */
  --text-link-hover: #E85A28;
  /* روابط عند التحويم */

  /* ─────────────────────────────────────────
     الألوان الرئيسية - Primary Accents
     ───────────────────────────────────────── */
  --accent-primary: #FF6B35;
  /* برتقالي دافئ - للأزرار والتميز */
  --accent-secondary: #FF8C61;
  /* برتقالي فاتح - hover */
  --accent-dark: #E85A28;
  /* برتقالي داكن - active */
  --accent-light: #FFB399;
  /* برتقالي شاحب */
  --accent-orange: #FF6B35;
  /* برتقالي - متوافق مع المكونات */

  --blue-primary: #2C5F8D;
  /* أزرق سيارات - للروابط */
  --blue-light: #4A90E2;
  /* أزرق فاتح */
  --blue-dark: #1A3A5C;
  /* أزرق داكن */

  /* ─────────────────────────────────────────
     الحدود والفواصل - Borders
     ───────────────────────────────────────── */
  --border-primary: #E2E8F0;
  /* حدود رئيسية */
  --border-secondary: #CBD5E0;
  /* حدود ثانوية */
  --border-accent: #FF6B35;
  /* حدود مميزة */
  --border-light: #F7FAFC;
  /* حدود خفيفة */
  --border-hover: #CBD5E0;
  /* حدود عند التحويم */

  /* ─────────────────────────────────────────
     الأزرار - Buttons
     ───────────────────────────────────────── */
  --btn-primary-bg: #FF6B35;
  --btn-primary-text: #FFFFFF;
  --btn-primary-hover: #FF8C61;
  --btn-primary-active: #E85A28;

  --btn-secondary-bg: #FFFFFF;
  --btn-secondary-text: #1A1D2E;
  --btn-secondary-border: #E2E8F0;
  --btn-secondary-hover: #F8F9FA;

  --btn-outline-bg: transparent;
  --btn-outline-text: #FF6B35;
  --btn-outline-border: #FF6B35;
  --btn-outline-hover-bg: #FFF8F5;

  /* ─────────────────────────────────────────
     الظلال - Shadows
     ───────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.15);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-button: 0 2px 6px rgba(255, 107, 53, 0.25);
  --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12);

  /* ─────────────────────────────────────────
     حالات - Status Colors
     ───────────────────────────────────────── */
  --success: #10B981;
  --success-light: #D1FAE5;
  --warning: #F59E0B;
  --warning-light: #FEF3C7;
  --error: #EF4444;
  --error-light: #FEE2E2;
  --info: #3B82F6;
  --info-light: #DBEAFE;
}

/* ═══════════════════════════════════════════════════════════════════
   🌙 DARK MODE - الوضع الليلي
   Luxury Dark Theme - BMW M / Mercedes-AMG Inspired
   Modern, Elegant, Professional Dark Design
   ═══════════════════════════════════════════════════════════════════ */
html[data-theme="dark"],
.dark-theme {
  /* ─────────────────────────────────────────
     الخلفيات - Backgrounds
     ───────────────────────────────────────── */
  --bg-primary: #0F1419;
  /* خلفية رئيسية - أسود مزرق عميق */
  --bg-secondary: #1A1F2E;
  /* خلفية ثانوية - أزرق داكن */
  --bg-card: #1E2432;
  /* بطاقات - أزرق رمادي */
  --bg-hover: #252B3A;
  /* تحويم - أزرق أفتح قليلاً */
  --bg-accent: #2A1810;
  /* خلفية مميزة - برتقالي داكن جداً */
  --bg-header: #0A0D14;
  /* هيدر أسود نقي */
  --bg-footer: #13161F;
  /* فوتر داكن */
  --bg-overlay: rgba(15, 20, 25, 0.95);
  /* طبقة شفافة */

  /* ─────────────────────────────────────────
     النصوص - Text Colors
     ───────────────────────────────────────── */
  --text-primary: #F8FAFC;
  /* نص رئيسي - أبيض ناصع */
  --text-secondary: #CBD5E1;
  /* نص ثانوي - رمادي فاتح */
  --text-tertiary: #94A3B8;
  /* نص خفيف - رمادي */
  --text-inverse: #0F1419;
  /* نص عكسي - داكن */
  --text-muted: #64748B;
  /* نص خافت */
  --text-on-header: #FFFFFF;
  /* نص على الهيدر */
  --text-link: #FF9066;
  /* روابط - برتقالي فاتح */
  --text-link-hover: #FFB399;
  /* روابط عند التحويم */

  /* ─────────────────────────────────────────
     الألوان الرئيسية - Primary Accents
     ───────────────────────────────────────── */
  --accent-primary: #FF8C61;
  /* برتقالي محروق - مميز في الداكن */
  --accent-secondary: #FFA885;
  /* برتقالي فاتح */
  --accent-dark: #E8643D;
  /* برتقالي داكن */
  --accent-light: #FFCBB3;
  /* برتقالي شاحب */
  --accent-orange: #FF8C61;
  /* برتقالي - متوافق مع المكونات */

  --blue-primary: #5B9FD8;
  /* أزرق سيارات فاتح */
  --blue-light: #7BB5E8;
  /* أزرق فاتح جداً */
  --blue-dark: #3A7AB8;
  /* أزرق داكن */

  /* ─────────────────────────────────────────
     الحدود والفواصل - Borders
     ───────────────────────────────────────── */
  --border-primary: #2D3748;
  /* حدود رئيسية */
  --border-secondary: #374151;
  /* حدود ثانوية */
  --border-accent: #FF8C61;
  /* حدود مميزة */
  --border-light: #1F2937;
  /* حدود خفيفة */
  --border-hover: #475569;
  /* حدود عند التحويم */

  /* ─────────────────────────────────────────
     الأزرار - Buttons
     ───────────────────────────────────────── */
  --btn-primary-bg: #FF8C61;
  --btn-primary-text: #0F1419;
  --btn-primary-hover: #FFA885;
  --btn-primary-active: #E8643D;

  --btn-secondary-bg: #1E2432;
  --btn-secondary-text: #F8FAFC;
  --btn-secondary-border: #2D3748;
  --btn-secondary-hover: #252B3A;

  --btn-outline-bg: transparent;
  --btn-outline-text: #FF8C61;
  --btn-outline-border: #FF8C61;
  --btn-outline-hover-bg: #2A1810;

  /* ─────────────────────────────────────────
     الظلال - Shadows
     ───────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.7);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.8);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-button: 0 2px 6px rgba(255, 140, 97, 0.35);
  --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.6);

  /* ─────────────────────────────────────────
     حالات - Status Colors
     ───────────────────────────────────────── */
  --success: #34D399;
  --success-light: #064E3B;
  --warning: #FBBF24;
  --warning-light: #78350F;
  --error: #F87171;
  --error-light: #7F1D1D;
  --info: #60A5FA;
  --info-light: #1E3A8A;
}

/* ═══════════════════════════════════════════════════════════════════
   🎨 GLOBAL ELEMENT STYLING
   تطبيق الألوان على جميع العناصر
   ═══════════════════════════════════════════════════════════════════ */

/* ─── HTML & Body - Force Theme Application ─── */
html {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

html[data-theme="light"] {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

body {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

#root {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  min-height: 100vh;
}

/* ─── Headers & Sections ─── */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-primary);
  transition: color 0.3s ease;
}

p,
span,
div {
  color: var(--text-primary);
}

/* ─── Links ─── */
a {
  color: var(--text-link);
  transition: color 0.2s ease;
}

a:hover {
  color: var(--accent-secondary);
  text-decoration: none;
}

/* ─── Cards & Containers ─── */
.card,
.container,
.paper,
section,
[class*="Card"],
[class*="Container"] {
  background-color: var(--bg-card);
  border: 1px solid var(--border-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* ─── Buttons - Primary ─── */
button,
.btn,
[role="button"],
input[type="button"],
input[type="submit"] {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: 1px solid var(--btn-primary-bg);
  box-shadow: var(--shadow-button);
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
}

button:hover,
.btn:hover,
[role="button"]:hover {
  background-color: var(--btn-primary-hover);
  border-color: var(--btn-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(255, 107, 53, 0.35);
}

button:active,
.btn:active {
  background-color: var(--btn-primary-active);
  transform: translateY(0);
}

/* ─── Button Secondary ─── */
.btn-secondary,
button[class*="secondary"],
[class*="SecondaryButton"] {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border: 1px solid var(--btn-secondary-border);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
  background-color: var(--btn-secondary-hover);
  border-color: var(--border-secondary);
}

/* ─── Button Outline ─── */
.btn-outline,
button[class*="outline"],
[class*="OutlineButton"] {
  background-color: var(--btn-outline-bg);
  color: var(--btn-outline-text);
  border: 2px solid var(--btn-outline-border);
  box-shadow: none;
}

.btn-outline:hover {
  background-color: var(--btn-outline-hover-bg);
  color: var(--accent-primary);
}

/* ─── Inputs & Forms ─── */
input,
textarea,
select {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  transition: border-color 0.2s ease, background-color 0.3s ease;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
}

/* ─── Borders & Dividers ─── */
hr,
.divider,
.separator,
.border-top,
.border-bottom {
  border-color: var(--border-primary) !important;
  background-color: var(--border-primary);
  opacity: 1;
  transition: border-color 0.3s ease;
}

/* ─── Header & Footer ─── */
/* Note: UnifiedHeader uses styled-components with glassmorphism, so we exclude it */
header:not(.mobile-de-header):not([class*="HeaderContainer"]),
.header:not(.mobile-de-header):not([class*="HeaderContainer"]),
[class*="Header"]:not(.mobile-de-header):not([class*="HeaderContainer"]) {
  background-color: var(--bg-header);
  border-bottom: 1px solid var(--border-secondary);
  color: var(--text-on-header);
}

/* Exception: Mobile DE Header uses glassmorphism - handled in Header.css */
.mobile-de-header {
  /* Glassmorphism styles are in Header.css */
}

footer,
.footer,
[class*="Footer"] {
  background-color: var(--bg-footer) !important;
  border-top: 1px solid var(--border-secondary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Footer text colors in light mode */
html[data-theme="light"] footer,
html[data-theme="light"] .footer,
html[data-theme="light"] [class*="Footer"] {
  color: var(--text-primary) !important;
}

/* Footer text colors in dark mode */
html[data-theme="dark"] footer,
html[data-theme="dark"] .footer,
html[data-theme="dark"] [class*="Footer"] {
  color: var(--text-secondary) !important;
}

/* ─── Main Content Area ─── */
#main-content,
main {
  background-color: var(--bg-primary);
  color: var(--bg-header);
  transition: background-color 0.3s ease;
}

/* Apply to all sections inside main */
#main-content main>div,
#main-content main>section,
#main-content main div[class*="Section"],
#main-content main div[class*="Container"] {
  background-color: var(--bg-card);
  border-color: var(--border-primary);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* ═══════════════════════════════════════════════════════════════════
   🎨 LIGHT MODE SECTIONS - خلفية بيج فاتح للأقسام في الوضع النهاري فقط
   ═══════════════════════════════════════════════════════════════════ */
html[data-theme="light"] #main-content main>section,
html[data-theme="light"] #main-content main>div[class*="Section"],
html[data-theme="light"] #main-content main section[class*="Section"],
html[data-theme="light"] #main-content main div[class*="Container"],
html[data-theme="light"] #main-content main section[class*="Container"],
html[data-theme="light"] #main-content main>div:not([class*="Spacer"]):not([class*="Loading"]):not([class*="page-container"]),
html[data-theme="light"] section:not(header section):not(footer section):not(.main-footer),
html[data-theme="light"] [class*="SectionContainer"],
html[data-theme="light"] [class*="Container"]:not([class*="page-container"]):not([class*="ContentContainer"]) {
  background-color: var(--bg-section-light) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  border-radius: 12px;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* تطبيق على styled-components sections */
html[data-theme="light"] [class^="sc-"]:has(> section),
html[data-theme="light"] [class^="sc-"] section {
  background-color: var(--bg-section-light) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  border-radius: 12px;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* استثناءات - لا تطبق على هذه العناصر */
html[data-theme="light"] header,
html[data-theme="light"] footer,
html[data-theme="light"] .main-footer,
html[data-theme="light"] [class*="Header"],
html[data-theme="light"] [class*="Footer"],
html[data-theme="light"] [class*="Spacer"],
html[data-theme="light"] [class*="Loading"],
html[data-theme="light"] .page-container,
html[data-theme="light"] #main-content,
html[data-theme="light"] main,
html[data-theme="light"] [class*="ContentContainer"] {
  background-color: inherit !important;
  box-shadow: none !important;
}

/* ─── Hover States ─── */
*:hover:not(button):not(a):not(input) {
  /* Reserved for specific component hovers */
}

/* ─── Status Badges ─── */
.badge-success,
[class*="success"] {
  background-color: var(--success-light);
  color: var(--success);
  border-color: var(--success);
}

.badge-warning,
[class*="warning"] {
  background-color: var(--warning-light);
  color: var(--warning);
  border-color: var(--warning);
}

.badge-error,
[class*="error"],
[class*="danger"] {
  background-color: var(--error-light);
  color: var(--error);
  border-color: var(--error);
}

.badge-info,
[class*="info"] {
  background-color: var(--info-light);
  color: var(--info);
  border-color: var(--info);
}

/* ═══════════════════════════════════════════════════════════════════
   🎯 OVERRIDE HARD-CODED COLORS
   إلغاء الألوان الثابتة في المكونات
   ═══════════════════════════════════════════════════════════════════ */

/* Force all backgrounds to follow theme */
[style*="background: #f0f0f0"],
[style*="background: #e0e0e0"],
[style*="background: #ffffff"],
[style*="background-color: #f0f0f0"],
[style*="background-color: #e0e0e0"],
[style*="background: white"],
[style*="background-color: white"] {
  background-color: var(--bg-card) !important;
}

/* Force all text colors to follow theme */
[style*="color: white"],
[style*="color: #fff"],
[style*="color: #ffffff"],
[style*="color: black"],
[style*="color: #000"],
[style*="color: #000000"] {
  color: var(--text-primary) !important;
}

/* Force all borders to follow theme */
[style*="border-color: #e0e0e0"],
[style*="border-color: #f0f0f0"],
[style*="border: 1px solid #e0e0e0"],
[style*="border: 1px solid #f0f0f0"] {
  border-color: var(--border-primary) !important;
}

/* Force all styled-components to use theme variables */
* {
  color: inherit;
}

/* Ensure body and html use theme */
html,
body {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

/* Force all divs and sections to use theme */
div,
section,
article,
main,
aside {
  color: var(--text-primary);
}

/* Force all text elements to use theme colors */
p,
span,
h1,
h2,
h3,
h4,
h5,
h6,
label,
li,
td,
th {
  color: var(--text-primary) !important;
}

/* Force all containers to use theme backgrounds */
div[class*="Container"],
div[class*="Section"],
div[class*="Card"],
section[class*="Container"],
section[class*="Section"] {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   📱 RESPONSIVE ADJUSTMENTS
   تعديلات استجابة
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root {
    --shadow-card: 0 1px 4px rgba(222, 16, 16, 0.08);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.12);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ✨ TRANSITIONS & ANIMATIONS
   انتقالات سلسة
   ═══════════════════════════════════════════════════════════════════ */
* {
  transition-property: background-color, color, border-color;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}

button,
a,
[role="button"] {
  transition-duration: 0.2s;
}
/* ═══════════════════════════════════════════════════════════════════════════
   🚗 UNIFIED CAR MARKETPLACE - MODERN CSS ARCHITECTURE
   السوق البلغاري للسيارات - هندسة CSS الحديثة
   
   Stack: CSS Variables + Styled Components + Design System
   Created: December 7, 2025
   
   Note: Tailwind CSS removed temporarily (v4 compatibility issues)
   ملاحظة: تم إزالة Tailwind مؤقتاً (مشاكل توافق v4)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   1️⃣ Custom Theme System - CSS Variables
   نظام الثيم المخصص - متغيرات CSS
   ───────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════
   ملاحظة: جميع الألوان الآن في unified-theme.css
   Note: All colors now managed in unified-theme.css
   
   Design System Available:
   - Button (5 variants, 3 sizes, WCAG AA)
   - Input (error/success states, icons)
   - Card (4 variants, composable)
   
   Usage: import { Button, Input, Card } from '@/components/design-system';
   ═══════════════════════════════════════════════════════════════════ */

/* ========================================
   Apply Theme Variables to Body
   ======================================== */
body {
  margin: 0;
  font-family: 'Martica', 'Arial', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bg-primary) !important;
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.main-layout {
  background-color: var(--bg-primary) !important;
  transition: background-color 0.3s ease;
}

/* Cross-browser CSS reset additions */
html {
  -webkit-text-size-adjust: 100%;
}

*, *::before, *::after {
  box-sizing: border-box;
  border-radius: 8px;
}

/* Ensure body doesn't cause horizontal scroll due to 100vw issues */
html, body, #root {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

/* Removed - now in theme section above */

/* Normalize form controls across browsers */
button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button, input, select, textarea {
  margin: 0; /* Remove Safari/Firefox default margins */
}

button, [type="button"], [type="reset"], [type="submit"] {
  appearance: button;
  -webkit-appearance: button;
}

/* Remove the inner border and padding in Firefox */
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* Restore focus styles in Firefox */
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/* Remove default arrows on number inputs and unify appearance */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield; /* Firefox */
}

/* Ensure select and inputs have consistent height */
input, select, textarea {
  line-height: 1.4;
  min-height: 40px;
}

/* iOS rounded corners removal for inputs if needed */
input, textarea, select {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 6px;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

/* Bulgarian flag colors */
.bulgarian-flag {
  background: linear-gradient(to bottom,
    #00966e 33.33%,
    white 33.33% 66.66%,
    #d62612 66.66%);
}

/* Loading spinner */
.spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #1976d2;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 20px auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Button styles */
.btn {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-primary {
  background-color: var(--accent-primary);
  color: var(--text-inverse);
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background-color: var(--accent-hover);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background-color: var(--accent-secondary);
  color: var(--text-inverse);
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  background-color: var(--accent-active);
  box-shadow: var(--shadow-md);
}

/* Form styles */
.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
  line-height: 1.4;
  min-height: 40px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #1976d2;
  box-shadow: 0 0 5px rgba(25, 118, 210, 0.3);
}

/* Card styles */
.card {
  background: var(--bg-card);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  padding: 20px;
  margin: 20px 0;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Grid layouts */
.grid {
  display: grid;
  gap: 20px;
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Responsive design */
@media (max-width: 768px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .btn {
    width: 100%;
    text-align: center;
  }
}

/* Utility classes */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }

.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }

.hidden {
  display: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Bulgarian specific styles */
.bulgarian-currency::before {
  content: '€';
  margin-right: 4px;
}

.bulgarian-phone::before {
  content: '+359 ';
  margin-right: 2px;
}

/* Animation classes */
.fade-in {
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.slide-up {
  animation: slideUp 0.5s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Error and success states */
.error {
  color: var(--error);
  background-color: var(--bg-hover);
  border: 1px solid var(--error);
  padding: 12px;
  border-radius: 4px;
  margin: 10px 0;
  transition: all 0.3s ease;
}

.success {
  color: var(--success);
  background-color: var(--bg-hover);
  border: 1px solid var(--success);
  padding: 12px;
  border-radius: 4px;
  margin: 10px 0;
  transition: all 0.3s ease;
}

.warning {
  color: var(--warning);
  background-color: var(--bg-hover);
  border: 1px solid var(--warning);
  padding: 12px;
  border-radius: 4px;
  margin: 10px 0;
  transition: all 0.3s ease;
}

/* Loading states */
.loading {
  opacity: 0.6;
  pointer-events: none;
  position: relative;
}

.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #1976d2;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Focus styles for accessibility */
*:focus {
  outline: 2px solid #1976d2;
  outline-offset: 2px;
}

/* Prevent long words causing overflow */
* {
  word-break: break-word;
}

button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid #1976d2;
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .btn-primary {
    background-color: var(--text-primary);
    color: var(--bg-primary);
    border: 2px solid var(--text-primary);
  }

  .card {
    border: 2px solid var(--text-primary);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Bold text accessibility toggle */
body.bold-text {
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════
   Dark Mode - Select Dropdown Options
   تحسين ألوان النصوص في القوائم المنسدلة للوضع الليلي
   ═══════════════════════════════════════════════════════════════════ */
[data-theme="dark"] select,
.dark-theme select {
  color: #f1f5f9 !important;
}

[data-theme="dark"] select option,
.dark-theme select option {
  background: #1a1a20 !important;
  color: #f1f5f9 !important;
}

/* Ensure select text is visible in dark mode */
[data-theme="dark"] select:not(:disabled),
.dark-theme select:not(:disabled) {
  color: #f1f5f9 !important;
}