@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=El+Messiri:wght@400;500;600;700&display=swap");

:root {
  --font-sans:    "IBM Plex Sans Arabic", sans-serif;
  --font-display: "El Messiri", sans-serif;

  /* ═══════════════════════════════════════════
     الخلفيات
  ═══════════════════════════════════════════ */
  --section-bg-color-1: #09090a;
  --section-bg-color-2: #111112;
  --card-bg-color:       #1c1b1e;

  /* ═══════════════════════════════════════════
     النصوص
  ═══════════════════════════════════════════ */
  --card-title-color:      #ddd5c4;
  --card-p-color:          #6e6860;
  --section-title-color-1: #a89e8e;

  /* ═══════════════════════════════════════════
     الذهبي — 4 درجات
  ═══════════════════════════════════════════ */
  --gold-deep:    #6b4f08;
  --gold-mid:     #a67c10;
  --gold-primary: #c49218;
  --gold-bright:  #e0aa1c;
  --gold-light:   #f0cb50;

  /* ═══════════════════════════════════════════
     ربط الـ CSS vars
  ═══════════════════════════════════════════ */
  --section-title-color-2:     var(--gold-primary);
  --action-btn-bg-color:       var(--gold-primary);
  --action-btn-bg-hover-color: var(--gold-bright);
  --action-btn-txt-color:      #ffffff;
}

/* ─── Base ─── */
*, *::before, *::after { box-sizing: border-box; }

body {
  background-color: var(--section-bg-color-1);
  color: var(--card-title-color);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .font-display {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

/* ─── Gold gradient text utility ─── */
.text-gold-gradient {
  background: linear-gradient(135deg, var(--gold-mid) 0%, var(--gold-bright) 50%, var(--gold-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Navbar ─── */
nav {
  background:rgb(13 13 13) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(33, 33, 33, 0.12) !important;
}

/* ─── Cards ─── */
.car-card {
  background-color: var(--section-bg-color-2);
  border: 1px solid rgba(255, 255, 255, 0.04);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.car-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(196, 146, 24, 0.04) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.car-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-mid);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(196, 146, 24, 0.15);
}

.car-card:hover::before { opacity: 1; }

/* ─── Icon boxes ─── */
.icon-box {
  background-color: var(--card-bg-color);
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.group:hover .icon-box {
  background-color: var(--gold-primary);
  color: white;
  border-color: var(--gold-bright);
}

/* ══════════════════════════════════════════════════════
   BUTTONS — تحسين شامل لجميع أنواع الأزرار
══════════════════════════════════════════════════════ */

/* ─── Primary: زر ذهبي رئيسي ─── */
button.bg-\[var\(--action-btn-bg-color\)\],
a.bg-\[var\(--action-btn-bg-color\)\] {
  background: linear-gradient(135deg, var(--gold-mid) 0%, var(--gold-primary) 45%, var(--gold-bright) 100%) !important;
  box-shadow:
    0 4px 20px rgba(196, 146, 24, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(224, 170, 28, 0.35) !important;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
  position: relative;
  overflow: hidden;
}

button.bg-\[var\(--action-btn-bg-color\)\]::after,
a.bg-\[var\(--action-btn-bg-color\)\]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.25s ease;
}

button.bg-\[var\(--action-btn-bg-color\)\]:hover::after,
a.bg-\[var\(--action-btn-bg-color\)\]:hover::after {
  opacity: 1;
}

button.bg-\[var\(--action-btn-bg-color\)\]:hover,
a.bg-\[var\(--action-btn-bg-color\)\]:hover {
  background: linear-gradient(135deg, var(--gold-primary) 0%, var(--gold-bright) 50%, var(--gold-light) 100%) !important;
  box-shadow:
    0 8px 32px rgba(224, 170, 28, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  transform: translateY(-2px) !important;
}

button.bg-\[var\(--action-btn-bg-color\)\]:active,
a.bg-\[var\(--action-btn-bg-color\)\]:active {
  transform: translateY(0px) !important;
  box-shadow: 0 2px 10px rgba(196, 146, 24, 0.3) !important;
  transition-duration: 0.08s !important;
}

button.bg-\[var\(--action-btn-bg-color\)\]:disabled,
button.bg-\[var\(--action-btn-bg-color\)\][disabled] {
  background: linear-gradient(135deg, #3a3020 0%, #4a3d1a 100%) !important;
  box-shadow: none !important;
  transform: none !important;
  border-color: rgba(255,255,255,0.05) !important;
  color: rgba(255,255,255,0.35) !important;
  cursor: not-allowed !important;
}

/* ─── Secondary: زر ثانوي (خلفية داكنة + حدود) ─── */
button.bg-\[var\(--section-bg-color-1\)\],
button.bg-\[var\(--section-bg-color-2\)\],
button.bg-\[var\(--card-bg-color\)\] {
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 100%) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

button.bg-\[var\(--section-bg-color-1\)\]:hover,
button.bg-\[var\(--section-bg-color-2\)\]:hover,
button.bg-\[var\(--card-bg-color\)\]:hover {
  border-color: rgba(196, 146, 24, 0.45) !important;
  background: linear-gradient(135deg, rgba(196, 146, 24, 0.07) 0%, rgba(196, 146, 24, 0.02) 100%) !important;
  box-shadow: 0 0 0 1px rgba(196, 146, 24, 0.2), 0 4px 16px rgba(0,0,0,0.3) !important;
  color: var(--gold-bright) !important;
  transform: translateY(-1px) !important;
}

/* ─── Ghost: زر شفاف بنص ذهبي ─── */
button.bg-transparent {
  border: 1px solid transparent !important;
  transition: all 0.2s ease !important;
}

button.bg-transparent:hover {
  border-color: rgba(196, 146, 24, 0.3) !important;
  background: rgba(196, 146, 24, 0.06) !important;
  box-shadow: 0 0 0 1px rgba(196, 146, 24, 0.15) !important;
}

/* ─── Tab selector نشط (service type / trip type) ─── */
button.bg-\[var\(--action-btn-bg-color\)\].flex-1,
button.bg-\[var\(--card-bg-color\)\].flex-1 {
  box-shadow: none !important;
  transform: none !important;
  border: none !important;
}

button.bg-\[var\(--action-btn-bg-color\)\].flex-1 {
  background: linear-gradient(135deg, var(--gold-primary), var(--gold-bright)) !important;
  box-shadow: 0 2px 10px rgba(196, 146, 24, 0.35), inset 0 1px 0 rgba(255,255,255,0.1) !important;
}

/* ─── Google OAuth button ─── */
a.bg-white {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4) !important;
  transition: all 0.25s ease !important;
  color: #1a1a1a !important;
}

a.bg-white:hover {
  background: #f5f5f5 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
  transform: translateY(-1px) !important;
}

/* ─── Inputs ─── */
input:focus, textarea:focus, select:focus {
  border-color: rgba(196, 146, 24, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(196, 146, 24, 0.08);
  outline: none;
}

/* ─── Trip summary ─── */
#trip-summary {
  background: linear-gradient(135deg, #0d0c0a 0%, #131210 50%, #181610 100%);
  border: 1px solid rgba(196, 146, 24, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(196, 146, 24, 0.08);
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

#trip-summary p { margin: 0; }

#trip-summary > .flex {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center;
  width: 100%;
  gap: 2rem;
}

#trip-summary > .flex > div { min-width: 40%; }

#summary-distance,
#summary-duration {
  width: fit-content;
  background: linear-gradient(135deg, var(--gold-primary), var(--gold-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
  font-size: 1.2rem;
}

#summary-distance { margin-right: 1.5rem; }
#summary-duration  { margin-left:  1.5rem; }

#trip-summary .text-gray-400 {
  color: #9e9488 !important;
  font-size: 0.75rem;
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: var(--section-bg-color-1); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold-mid), var(--gold-primary));
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: var(--gold-bright); }

/* ─── Animations ─── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0);    }
}
.animate-fade-in { animation: fadeIn 0.25s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
.gold-shimmer {
  background: linear-gradient(90deg, var(--gold-mid), var(--gold-light), var(--gold-mid));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}

/* ─── Mobile menu ─── */
#mobile-menu {
  width: min(280px, 92vw);
  max-height: 100vh;
  overflow-y: auto;
  background: linear-gradient(160deg, #0f0e0c 0%, #131210 100%);
  border-left: 1px solid rgba(196, 146, 24, 0.12);
  backdrop-filter: blur(16px);
}

#mobile-menu nav a,
#mobile-menu #nav-auth-section-mobile button,
#mobile-menu #nav-auth-section-mobile a {
  display: block;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  color: var(--card-title-color);
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.04);
  margin-bottom: 0.5rem;
  transition: all 0.2s ease;
  font-weight: 600;
}

#mobile-menu nav a:hover,
#mobile-menu #nav-auth-section-mobile button:hover,
#mobile-menu #nav-auth-section-mobile a:hover {
  background-color: rgba(196, 146, 24, 0.12);
  border-color: rgba(196, 146, 24, 0.3);
  color: var(--gold-bright);
  transform: translateX(-2px);
}

#mobile-menu-backdrop { transition: opacity 0.25s ease; }

#mobile-menu.show             { transform: translateX(0) !important; }
#mobile-menu-backdrop.show    { display: block !important; opacity: 1 !important; }

#nav-auth-section-mobile {
  border-top: 1px solid rgba(196, 146, 24, 0.1);
  margin-top: 0.85rem;
  padding-top: 0.85rem;
}

#nav-auth-section-mobile .space-y-2 > * { margin: 0 !important; }

/* ─── Gold divider ─── */
.gold-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-mid), transparent);
  border: none;
  margin: 1.5rem 0;
}

/* ─── Selection ─── */
::selection {
  background: rgba(196, 146, 24, 0.25);
  color: var(--gold-light);
}

/* ══════════════════════════════════════════════════════
   MOBILE FIRST — تحسينات الهاتف
══════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* منع التكبير التلقائي على iOS عند focus */
  input, select, textarea {
    font-size: 16px !important;
    touch-action: manipulation;
  }

  /* حد أدنى لمساحة اللمس */
  button { min-height: 44px; }

  /* منع الـ overflow الأفقي */
  #main-content { overflow-x: hidden; }

  /* اقتراحات العناوين */
  #pickup-suggestions,
  #dropoff-suggestions {
    max-height: 200px !important;
    font-size: 14px;
  }

  /* Summary في الـ checkout يكون عمودي */
  #trip-summary {
    flex-direction: column !important;
    gap: 0.5rem;
  }

  /* شريط مؤشر قوة كلمة المرور */
  #strength-bar-1, #strength-bar-2, #strength-bar-3 {
    height: 6px !important;
  }

  /* Footer */
  footer .grid { gap: 1.5rem; }

  /* نصوص placeholder */
  input::placeholder, textarea::placeholder { opacity: 0.6; }
}