/* =========================================================
   SPD UI Theme – Purple Mobile App Look (RTL friendly)
   - Only styling (no logic)
   - Works with existing class names: cardx, top-bar, bottom-nav...
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');

html[data-ui="spd"]{
  /* Brand */
  --spd-primary:  #5b21b6;   /* deep purple */
  --spd-primary2: #7c3aed;   /* violet */
  --spd-primary3: #8b5cf6;   /* soft violet */

  /* Light */
  --spd-bg:       #f5f4ff;
  --spd-surface:  #ffffff;
  --spd-surface2: #f2f1ff;
  --spd-text:     #0f172a;
  --spd-muted:    #64748b;
  --spd-border:   rgba(15, 23, 42, .10);

  /* Dark */
  --spd-bg-dark:       #0b1020;
  --spd-surface-dark:  rgba(2, 6, 23, .86);
  --spd-surface2-dark: rgba(2, 6, 23, .62);
  --spd-text-dark:     #e5e7eb;
  --spd-muted-dark:    rgba(226,232,240,.72);
  --spd-border-dark:   rgba(148, 163, 184, .16);

  /* Shape */
  --spd-radius-xl: 26px;
  --spd-radius-lg: 22px;
  --spd-radius-md: 18px;
  --spd-radius-sm: 14px;

  /* Shadow */
  --spd-shadow:    0 18px 42px rgba(17, 24, 39, .10);
  --spd-shadow-lg: 0 30px 70px rgba(17, 24, 39, .18);

  /* Safe areas */
  --spd-safe-top:    env(safe-area-inset-top, 0px);
  --spd-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ===== Base font + tap behavior ===== */
html[data-ui="spd"] *{
  font-family:"Tajawal", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
html[data-ui="spd"] body{
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}

/* ===== Theme mapping to existing variables used inside your pages ===== */
html[data-ui="spd"] body,
html[data-ui="spd"] body.theme-light,
html[data-ui="spd"] body[data-theme="light"]{
  --bg:     var(--spd-bg);
  --card:   var(--spd-surface);
  --border: var(--spd-border);
  --text:   var(--spd-text);
  --muted:  var(--spd-muted);

  /* existing accents in your pages */
  --blue-main: var(--spd-primary2);
  --accent1:   var(--spd-primary);
  --accent2:   var(--spd-primary2);
  --accent3:   var(--spd-primary3);
  --accent:    var(--spd-primary2);
  --gold:      var(--spd-primary2);
  --violet:    var(--spd-primary2);

  /* theme-light vars (driver/register_driver) */
  --bg-light:       var(--spd-bg);
  --card-light:     var(--spd-surface);
  --border-light:   rgba(17,24,39,.08);
  --text-light:     var(--spd-text);
  --muted-light:    var(--spd-muted);

  background:
    radial-gradient(980px 520px at 50% -200px, rgba(124,58,237,.38), transparent 72%),
    radial-gradient(700px 420px at 12% 18%, rgba(91,33,182,.14), transparent 60%),
    linear-gradient(180deg, #f7f7ff 0%, #f5f4ff 35%, #ffffff 120%);
  color: var(--text);
}

html[data-ui="spd"] body.theme-dark,
html[data-ui="spd"] body[data-theme="dark"]{
  --bg:     var(--spd-bg-dark);
  --card:   var(--spd-surface-dark);
  --border: var(--spd-border-dark);
  --text:   var(--spd-text-dark);
  --muted:  var(--spd-muted-dark);

  --blue-main: var(--spd-primary3);
  --accent1:   var(--spd-primary2);
  --accent2:   var(--spd-primary3);
  --accent3:   #c4b5fd;
  --accent:    var(--spd-primary3);
  --gold:      #fbbf24;
  --violet:    var(--spd-primary3);

  --bg-dark:     var(--spd-bg-dark);
  --card-dark:   var(--spd-surface-dark);
  --border-dark: var(--spd-border-dark);
  --text-dark:   var(--spd-text-dark);
  --muted-dark:  var(--spd-muted-dark);

  background:
    radial-gradient(900px 520px at 50% -220px, rgba(124,58,237,.24), transparent 70%),
    radial-gradient(700px 420px at 10% 22%, rgba(91,33,182,.16), transparent 60%),
    linear-gradient(180deg, #070a16 0%, #0b1020 55%, #050713 120%);
  color: var(--text);
}

/* ===== Common containers ===== */
html[data-ui="spd"] .wrap{
  /* keep your layout but make it more "app-like" */
  padding-bottom: calc(120px + var(--spd-safe-bottom)) !important;
}

/* ===== Cards ===== */
html[data-ui="spd"] .cardx,
html[data-ui="spd"] .driver-card{
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--spd-radius-xl) !important;
  box-shadow: var(--spd-shadow) !important;
}
html[data-ui="spd"] body.theme-dark .cardx,
html[data-ui="spd"] body[data-theme="dark"] .cardx,
html[data-ui="spd"] body.theme-dark .driver-card,
html[data-ui="spd"] body[data-theme="dark"] .driver-card{
  box-shadow: 0 18px 46px rgba(0,0,0,.35) !important;
}

/* ===== App Header (top-bar) ===== */
html[data-ui="spd"] .top-bar{
  border: 0 !important;
  border-radius: var(--spd-radius-xl) !important;
  padding: 12px 14px !important;
  background: linear-gradient(180deg, #4c1d95 0%, #5b21b6 50%, #7c3aed 100%) !important;
  color: #fff !important;
  box-shadow: 0 22px 52px rgba(91,33,182,.24) !important;
}
html[data-ui="spd"] .top-bar .text-muted{
  color: rgba(255,255,255,.78) !important;
}
html[data-ui="spd"] .top-bar a,
html[data-ui="spd"] .top-bar button,
html[data-ui="spd"] .top-bar i{
  color:#fff !important;
}

/* Header buttons */
html[data-ui="spd"] .burger-btn,
html[data-ui="spd"] .theme-btn,
html[data-ui="spd"] .lang-btn,
html[data-ui="spd"] .action-btn{
  border-radius: var(--spd-radius-md) !important;
}
html[data-ui="spd"] .top-bar .burger-btn,
html[data-ui="spd"] .top-bar .theme-btn,
html[data-ui="spd"] .top-bar .lang-btn,
html[data-ui="spd"] .top-bar .action-btn{
  background: rgba(255,255,255,.18) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.12) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
html[data-ui="spd"] .top-bar .burger-btn:hover,
html[data-ui="spd"] .top-bar .theme-btn:hover,
html[data-ui="spd"] .top-bar .lang-btn:hover,
html[data-ui="spd"] .top-bar .action-btn:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* ===== Segmented Language Switches ===== */
html[data-ui="spd"] .chip-lang,
html[data-ui="spd"] .lang-switch{
  border-radius: 999px !important;
  padding: 4px !important;
  gap: 6px !important;
  background: rgba(124,58,237,.10) !important;
  border: 1px solid rgba(124,58,237,.18) !important;
  box-shadow: 0 10px 24px rgba(91,33,182,.10);
}
html[data-ui="spd"] .chip-lang button,
html[data-ui="spd"] .lang-switch button{
  border-radius: 999px !important;
  padding: 6px 12px !important;
  font-weight: 800 !important;
  color: rgba(15,23,42,.70) !important;
}
html[data-ui="spd"] body.theme-dark .chip-lang button,
html[data-ui="spd"] body[data-theme="dark"] .chip-lang button,
html[data-ui="spd"] body.theme-dark .lang-switch button,
html[data-ui="spd"] body[data-theme="dark"] .lang-switch button{
  color: rgba(226,232,240,.82) !important;
}
html[data-ui="spd"] .chip-lang button.active,
html[data-ui="spd"] .lang-switch button.active{
  background: linear-gradient(135deg, var(--spd-primary) 0%, var(--spd-primary2) 60%, var(--spd-primary3) 100%) !important;
  color: #fff !important;
  box-shadow: 0 14px 28px rgba(91,33,182,.22) !important;
}

/* ===== Form controls ===== */
html[data-ui="spd"] label.form-label{
  font-weight: 800 !important;
  color: rgba(15,23,42,.78) !important;
}
html[data-ui="spd"] body.theme-dark label.form-label,
html[data-ui="spd"] body[data-theme="dark"] label.form-label{
  color: rgba(226,232,240,.82) !important;
}

html[data-ui="spd"] .form-control,
html[data-ui="spd"] .form-select{
  border-radius: var(--spd-radius-md) !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(17,24,39,.10) !important;
  background: rgba(255,255,255,.88) !important;
  color: var(--spd-text) !important;
}
html[data-ui="spd"] body.theme-dark .form-control,
html[data-ui="spd"] body[data-theme="dark"] .form-control,
html[data-ui="spd"] body.theme-dark .form-select,
html[data-ui="spd"] body[data-theme="dark"] .form-select{
  background: rgba(2,6,23,.42) !important;
  border-color: rgba(148,163,184,.18) !important;
  color: var(--spd-text-dark) !important;
}
html[data-ui="spd"] .form-control::placeholder{
  color: rgba(100,116,139,.65) !important;
}
html[data-ui="spd"] body.theme-dark .form-control::placeholder,
html[data-ui="spd"] body[data-theme="dark"] .form-control::placeholder{
  color: rgba(226,232,240,.45) !important;
}
html[data-ui="spd"] .form-control:focus,
html[data-ui="spd"] .form-select:focus{
  border-color: rgba(124,58,237,.70) !important;
  box-shadow: 0 0 0 4px rgba(124,58,237,.18) !important;
}

/* ===== Buttons ===== */
html[data-ui="spd"] .btn,
html[data-ui="spd"] .btn-main,
html[data-ui="spd"] .btn-request,
html[data-ui="spd"] .btn-toggle{
  border-radius: var(--spd-radius-md) !important;
  font-weight: 900 !important;
}

html[data-ui="spd"] .btn-primary,
html[data-ui="spd"] .btn-main,
html[data-ui="spd"] .btn-request,
html[data-ui="spd"] .btn-toggle{
  background-image: linear-gradient(135deg, var(--spd-primary) 0%, var(--spd-primary2) 60%, var(--spd-primary3) 100%) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(91,33,182,.22) !important;
}
html[data-ui="spd"] .btn-primary:hover,
html[data-ui="spd"] .btn-main:hover,
html[data-ui="spd"] .btn-request:hover,
html[data-ui="spd"] .btn-toggle:hover{
  filter: brightness(1.02);
  transform: translateY(-1px);
}
html[data-ui="spd"] .btn-primary:active,
html[data-ui="spd"] .btn-main:active,
html[data-ui="spd"] .btn-request:active,
html[data-ui="spd"] .btn-toggle:active{
  transform: translateY(0);
}

html[data-ui="spd"] .btn-outline-primary{
  border-color: rgba(124,58,237,.45) !important;
  color: var(--spd-primary2) !important;
}
html[data-ui="spd"] .btn-outline-primary:hover{
  background: rgba(124,58,237,.10) !important;
}

/* ===== Links ===== */
html[data-ui="spd"] a{
  color: var(--spd-primary2);
  font-weight: 800;
}
html[data-ui="spd"] a:hover{
  color: var(--spd-primary);
}

/* ===== Alerts (soft) ===== */
html[data-ui="spd"] .alert{
  border-radius: var(--spd-radius-lg) !important;
  border-width: 1px !important;
}

/* ===== Bottom Navigation (mobile-like) ===== */
html[data-ui="spd"] .bottom-nav{
  background: rgba(255,255,255,.94) !important;
  border-top: 1px solid rgba(17,24,39,.08) !important;
  padding: 10px 10px calc(10px + var(--spd-safe-bottom)) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html[data-ui="spd"] body.theme-dark .bottom-nav,
html[data-ui="spd"] body[data-theme="dark"] .bottom-nav{
  background: rgba(2,6,23,.72) !important;
  border-top-color: rgba(148,163,184,.14) !important;
}

html[data-ui="spd"] .bottom-item{
  border: 0 !important;
  border-radius: var(--spd-radius-lg) !important;
  background: transparent !important;
  color: var(--muted) !important;
  box-shadow: none !important;
  transition: background .15s ease, transform .15s ease, color .15s ease;
}
html[data-ui="spd"] .bottom-item i{
  font-size: 1.32rem !important;
}
html[data-ui="spd"] .bottom-item:hover{
  transform: translateY(-2px);
  background: rgba(124,58,237,.06) !important;
}
html[data-ui="spd"] .bottom-item.active{
  color: var(--spd-primary2) !important;
  background: rgba(124,58,237,.12) !important;
  font-weight: 900 !important;
}
html[data-ui="spd"] body.theme-dark .bottom-item.active,
html[data-ui="spd"] body[data-theme="dark"] .bottom-item.active{
  color: #ddd6fe !important;
  background: rgba(124,58,237,.18) !important;
}

/* ===== Modals → bottom sheet on phones ===== */
html[data-ui="spd"] .modal-content{
  border-radius: var(--spd-radius-xl) !important;
  border: 1px solid rgba(17,24,39,.08) !important;
  box-shadow: var(--spd-shadow-lg) !important;
}
html[data-ui="spd"] body.theme-dark .modal-content,
html[data-ui="spd"] body[data-theme="dark"] .modal-content{
  border-color: rgba(148,163,184,.16) !important;
}
@media (max-width: 576px){
  html[data-ui="spd"] .modal-dialog{
    margin: 0 !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    max-width: none !important;
    width: 100% !important;
  }
  html[data-ui="spd"] .modal-content{
    border-radius: 26px 26px 0 0 !important;
  }
  html[data-ui="spd"] .modal-body{
    padding-bottom: calc(16px + var(--spd-safe-bottom)) !important;
  }
}

/* ===== Offcanvas ===== */
html[data-ui="spd"] .offcanvas{
  border: 0 !important;
  background: var(--card) !important;
  color: var(--text) !important;
}
html[data-ui="spd"] .offcanvas .list-group-item{
  border-color: rgba(17,24,39,.08) !important;
  background: transparent !important;
}

/* ===== Tables (admin) ===== */
html[data-ui="spd"] .table thead th{
  background: rgba(124,58,237,.06) !important;
  border-bottom-color: rgba(17,24,39,.08) !important;
}
html[data-ui="spd"] .table td,
html[data-ui="spd"] .table th{
  border-color: rgba(17,24,39,.08) !important;
}

/* ===== Small tweaks ===== */
html[data-ui="spd"] hr{
  opacity: .12;
}