/*!
 * WestCars — Shared stylesheet
 * Loaded on all pages. Page-specific styles stay in per-page <style> blocks.
 */

/* ── MATERIAL SYMBOLS ── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-size: inherit;
  line-height: 1;
  vertical-align: middle;
  user-select: none;
}

/* ── BODY ── */
body {
  background-color: #0a0a0f;
  background-image: radial-gradient(#1b1b20 0.5px, transparent 0.5px);
  background-size: 32px 32px;
  color: #e4e1e9;
}

/* ── SLATE COLOR OVERRIDES ── */
.text-slate-400, .text-slate-500 { color: rgb(152, 164, 181) !important; }
.text-slate-600 { color: rgb(120, 134, 153) !important; }
.text-slate-700 { color: rgb(103, 117, 138) !important; }
.placeholder-slate-700::placeholder { color: rgb(103, 117, 138); }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: #0a0a0f; }
::-webkit-scrollbar-thumb { background: #35343a; }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #0a0a0f; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #35343a; }

/* ── FOCUS OUTLINE FIX ── */
input:focus, input:focus-visible,
select:focus, select:focus-visible,
textarea:focus, textarea:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* ── GLOBAL FORM INPUTS ── */
input[type="text"], input[type="number"], input[type="email"],
input[type="tel"], input[type="password"], input[type="search"],
select, textarea {
  background: #131318 !important;
  border: 1px solid #35343a !important;
  border-left: 2px solid rgba(255,107,0,0.3) !important;
  color: #e4e1e9 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  padding: 12px 14px !important;
  outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus,
input[type="tel"]:focus, input[type="password"]:focus, input[type="search"]:focus,
select:focus, textarea:focus {
  border-color: #3ce368 !important;
}
select option, select optgroup { background: #131318; color: #e4e1e9; }

/* ── NUMBER SPINNERS ── */
input[type=number] { -moz-appearance: textfield; }
.num-wrap input[type=number] { padding-right: 36px !important; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.num-wrap { position: relative; }
.num-arrows {
  position: absolute; right: 1px; top: 1px; bottom: 1px; width: 32px;
  display: flex; flex-direction: column; border-left: 1px solid #35343a;
  opacity: 0; transition: opacity 0.15s;
}
.num-wrap:hover .num-arrows,
.num-wrap:focus-within .num-arrows { opacity: 1; }
.num-btn {
  flex: 1; background: #0a0a0f; border: none; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; padding: 0; line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.num-btn:hover { background: rgba(255,107,0,0.15); color: #ff6b00; }
.num-up { border-bottom: 1px solid #35343a; }

/* ── SELECT ARROW ── */
.sel-wrap { position: relative; }
.sel-wrap select { width: 100%; padding-right: 36px !important; }
.sel-arrow {
  position: absolute; right: 1px; top: 1px; bottom: 1px; width: 32px;
  background: #0a0a0f; border-left: 1px solid #35343a;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; color: #fff; pointer-events: none;
  opacity: 0; transition: opacity 0.15s;
}
.sel-wrap:hover .sel-arrow,
.sel-wrap:focus-within .sel-arrow { opacity: 1; }

/* ── MOBILE MENU ── */
#mobile-menu {
  display: none;
  position: fixed; top: 80px; left: 0; right: 0; bottom: 0;
  background: #0a0a0f; z-index: 49; overflow-y: auto;
}
#mobile-menu.open { display: flex; flex-direction: column; }
#mobile-menu .mob-link {
  display: flex; align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(53,52,58,0.4);
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: 18px; letter-spacing: .05em; text-transform: uppercase;
  color: #e4e1e9; text-decoration: none; gap: 12px;
}
#mobile-menu .mob-link:active,
#mobile-menu .mob-link:hover { color: #ff6b00; background: rgba(255,107,0,0.04); }
#mobile-menu .mob-link.active { color: #ff6b00; }

/* Touch devices: colour photos without hover */
@media (hover: none) {
  img.grayscale { filter: none !important; opacity: 1 !important; }
}