/* Keurosti Design System — Glass & Dark Theme */

/* Client-side pagination: cards outside the current page are hidden. */
.page-hidden { display: none !important; }

/* Color picker pill — swatch + name (publier + filtres). Sélection visible
   sans surprise au hover (cf. bug "texte blanc sur fond gris au hover"). */
.color-pick-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  border: 1px solid #E5E7EB;
  border-radius: 9999px;
  background: #FFFFFF;
  color: #1E293B;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.color-pick-btn:hover {
  border-color: #0A1628;
}
.color-pick-btn.is-selected,
.color-pick-btn.is-selected:hover {
  background: #0A1628 !important;
  color: #FFFFFF !important;
  border-color: #F5A623 !important;
  box-shadow: 0 0 0 2px rgba(245, 166, 35, 0.35);
}
.color-pick-btn .color-swatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.18);
  flex-shrink: 0;
  background-clip: padding-box;
}
.color-pick-btn .color-name {
  white-space: nowrap;
}

/* Cercle de couleur simple (mobile publier — visuel compact sans nom).
   Sélection : bordure or épaisse + halo blanc + scale, sans conflit hover. */
.color-circle-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.18);
  cursor: pointer;
  background-clip: padding-box;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  padding: 0;
  flex-shrink: 0;
}
.color-circle-btn:hover {
  transform: scale(1.08);
}
.color-circle-btn.is-selected,
.color-circle-btn.is-selected:hover {
  border-color: #F5A623 !important;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #F5A623 !important;
  transform: scale(1.1);
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+Arabic:wght@400;500;700&display=swap');

:root {
  /* Colors — Metallic Light palette */
  --primary: #0A1628;
  --primary-light: #1E3A5F;
  --accent: #D4A44A; /* Muted gold — premium */
  --accent-hover: #C4933A;
  --accent-glow: rgba(212, 164, 74, 0.2);
  --secondary: #1E3A5F;
  --surface: #FFFFFF;
  --surface-solid: #E8ECF2; /* Metallic grey */
  --surface-hover: #DFE4EC;
  --surface-border: #CDD4DF;
  --bg-main: #D8DEE8; /* Light metallic base */

  --text-main: #1E293B;
  --text-muted: #64748B;
  --text-light: #F3F4F6;

  --success: #10B981;
  --error: #EF4444;
  --whatsapp: #25D366;

  /* Glass effect — light version */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-blur: 16px;

  /* Typography */
  --font-sans: 'Inter', sans-serif;
  --font-arabic: 'Noto Sans Arabic', sans-serif;

  /* Spacing & Borders */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Shadows — subtle for light metallic */
  --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 12px 40px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 4px 20px rgba(212, 164, 74, 0.15);
  --shadow-glow-strong: 0 8px 30px rgba(212, 164, 74, 0.2);

  /* Transitions */
  --transition-fast: 0.15s ease-in-out;
  --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ───── BASE ───── */
html {
  scroll-behavior: smooth;
  /* Navy matches the top nav — the area behind the iOS translucent status bar
     (with viewport-fit=cover) or the overscroll bounce now shows navy, not a
     white gap that reveals the hero text. */
  background-color: #0A1628;
}

/* Disable iOS rubber-band overscroll which was exposing content above the sticky nav */
html, body {
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
}

/* Solid navy strip fixed at the top of the viewport, covering the iOS status bar
   area on pages where the nav doesn't extend into it (mobile headers, etc.). */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top, 0px);
  background: #0A1628;
  z-index: 60;
  pointer-events: none;
}

/* iOS safe area for sticky nav — push content below the notch and extend the
   nav background into the status bar so nothing bleeds through */
nav.sticky {
  padding-top: env(safe-area-inset-top, 0px);
}

/* Mobile bottom nav — solid background + extend padding under the iOS home
   indicator so page content never shows through, top or bottom. */
nav.fixed.bottom-0 {
  background-color: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
}

/* iOS Chrome : bande de page sous nav.fixed.bottom-0 (cf. CLAUDE.md).

   ARCHITECTURE ACTUELLE (PR #165) :
   - PROTECTION PRIMAIRE : un <div id="keurosti-bottom-shield"> injecté par
     js/main.js (initBottomNavVisualViewport), positionné via
     `top = nav.getBoundingClientRect().bottom`. Mesure la position réelle de
     la nav à l'écran, pas de spéculation sur le viewport. Voir js/main.js.
   - PROTECTION FALLBACK : nav.fixed.bottom-0::after (1000px de blanc sous
     la nav) + body::after (rectangle 100vh sous le layout viewport bottom).
     Couvrent la fenêtre entre le premier paint et l'exécution de main.js. */
nav.fixed.bottom-0::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 1000px;
  background-color: #FFFFFF;
  pointer-events: none;
}

@media (max-width: 1023px) {
  /* WORKAROUND iOS 26 — bug WebKit confirmé (Mastodon #36144, Apple Dev Forum
     #800798) : Safari/Chrome iOS 26 dessinent les éléments `position: fixed`
     ~20-80px au-dessus de leur position logique, créant un gap visible entre
     la nav et le bord du viewport. Pas de fix browser-side disponible.

     Contournement : on force le fond du `html` (et du `body` quand sa propre
     couleur n'est pas explicitement blanche) à BLANC sur mobile. Comme ça,
     même si iOS 26 dessine un gap derrière la nav, ce gap a la même couleur
     que la nav → invisible à l'œil. Les sections internes des pages
     conservent leurs propres backgrounds via les classes Tailwind sur leurs
     containers (bg-gray-100, bg-white, etc.) — le bg du body est seulement
     visible aux extrémités, justement là où on veut le blanc. */
  html,
  body {
    background-color: #FFFFFF !important;
  }

  /* On augmente la padding-bottom du body pour que le contenu de la page
     s'arrête bien AU-DESSUS de la zone potentiellement buggée par iOS 26.
     Le contenu sous la nav (s'il y a un gap WebKit) sera donc le bg blanc
     du body au lieu d'un bout d'élément quelconque. */
  body {
    padding-bottom: max(120px, calc(80px + env(safe-area-inset-bottom, 0px))) !important;
  }

  /* Le bg du body en blanc ne suffit pas si une section INTERNE de la page
     (avec son propre bg gris) tombe dans la zone du gap selon le scroll.
     On force aussi les bg-gray-50 (et variantes Tailwind subtiles) à être
     blancs sur mobile. Les sections perdent leur léger différentiel gris,
     mais le gap reste TOUJOURS invisible peu importe le scroll. Cette
     règle est ESSENTIELLE pour le fix iOS 26 — ne pas la retirer. */
  .bg-gray-50,
  .bg-slate-50 {
    background-color: #FFFFFF !important;
  }

  /* SHIELD DYNAMIQUE — sizé EXACTEMENT par JS via `--vv-gap` (cf. js/main.js
     initBottomNavVisualViewport). C'est l'approche de PR #161 qui marchait
     le mieux historiquement.
     - `--vv-gap` = 0 sur Safari iOS / Chrome iOS sans bug → height = 0,
       élément invisible (pas de coût visuel).
     - `--vv-gap` > 0 sur Chrome iOS quand visual viewport déborde sous le
       layout → couvre EXACTEMENT le gap visible, sans risque de masquer
       du contenu légitime.
     Combiné au html/body blancs (workaround iOS 26), c'est le meilleur
     compromis provisoire en attendant le fix Apple. */
  body::after {
    content: '';
    position: fixed;
    bottom: calc(-1 * var(--vv-gap, 0px));
    left: 0;
    right: 0;
    height: var(--vv-gap, 0px);
    background-color: #FFFFFF;
    pointer-events: none;
    z-index: 48;
  }
}

/* Utility classes used by the mobile templates */
.pt-safe-top { padding-top: env(safe-area-inset-top, 0px); }
.pb-safe { padding-bottom: env(safe-area-inset-bottom, 16px); }
.pb-safe-top { padding-bottom: env(safe-area-inset-top, 0px); }
.mt-safe-top { margin-top: env(safe-area-inset-top, 0px); }
.top-safe { top: calc(env(safe-area-inset-top, 0px) + 8px); }

body {
  font-family: var(--font-sans);
  background-color: var(--bg-main) !important;
  color: var(--text-main) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[dir="rtl"] body {
  font-family: var(--font-arabic);
}

/* ───── SCROLLBAR ───── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-main); }
::-webkit-scrollbar-thumb { background: var(--secondary); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ───── TYPOGRAPHY ───── */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--primary);
}
/* Headings inside dark sections stay white */
nav h1, nav h2, nav h3, nav h4, nav h5, nav h6,
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
.bg-navy-900 h1, .bg-navy-900 h2, .bg-navy-900 h3,
.text-white h1, .text-white h2, .text-white h3,
section.bg-navy-900 h1, section.bg-navy-900 h2 {
  color: #FFFFFF !important;
}

p, span, div, li, a, label, td, th {
  color: inherit;
}

/* ───── BUTTONS ───── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
  cursor: pointer;
}

.btn-primary {
  background-color: var(--accent);
  color: #0B0F1A;
}
.btn-primary:hover {
  background-color: var(--accent-hover);
  box-shadow: var(--shadow-glow-strong);
  transform: translateY(-1px);
}

.btn-outline {
  background-color: transparent;
  border: 1.5px solid var(--accent) !important;
  color: var(--accent) !important;
}
.btn-outline:hover {
  background-color: var(--accent);
  color: #0B0F1A !important;
}

.btn-whatsapp {
  background-color: var(--whatsapp);
  color: white;
}
.btn-whatsapp:hover {
  background-color: #1ea952;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.3);
}

/* ───── CARDS — Glassmorphism ───── */
.card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
  overflow: hidden;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(212, 164, 74, 0.15);
}

/* ───── FORM CONTROLS ───── */
.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-sm);
  background-color: #FFFFFF;
  color: var(--text-main);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  font-family: var(--font-sans);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.form-input::placeholder, .form-textarea::placeholder {
  color: var(--text-muted);
}

/* ───── HERO ───── */
.hero-gradient {
  background: linear-gradient(135deg, var(--primary) 0%, #050810 100%);
  position: relative;
  overflow: hidden;
}
.hero-gradient::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.02"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
  opacity: 0.5;
}

/* ───── ANIMATIONS ───── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes subtleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.animate-fade-in {
  animation: fadeIn 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ───── CHECKBOX & TOGGLE ───── */
.custom-checkbox {
  appearance: none;
  background-color: #fff;
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 1.15em;
  height: 1.15em;
  border: 1px solid var(--text-muted);
  border-radius: 0.15em;
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.custom-checkbox::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--surface);
  transform-origin: center;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.custom-checkbox:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}
.custom-checkbox:checked::before {
  transform: scale(1);
}

.toggle-checkbox:checked {
  right: 0;
  border-color: var(--accent);
}
.toggle-checkbox:checked + .toggle-label {
  background-color: var(--accent);
}

/* ═══════════════════════════════════════════════
   TAILWIND OVERRIDES — Metallic Light Theme
   Replaces white backgrounds with metallic grey
   while keeping dark nav/hero/footer/stats
   ═══════════════════════════════════════════════ */

/* ── Background overrides — metallic grey replaces white ── */
.bg-white,
.bg-gray-50,
section.bg-white {
  background-color: var(--surface-solid) !important;
}

body.bg-\[\#f8f7f6\] {
  background-color: var(--bg-main) !important;
}

/* ── Cards — frosted glass on metallic ── */
.bg-white.rounded-xl,
div.bg-white.rounded-xl {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}
.bg-white.rounded-xl:hover,
div.bg-white.rounded-xl:hover {
  background: rgba(255, 255, 255, 0.75) !important;
  border-color: rgba(212, 164, 74, 0.3) !important;
  box-shadow: var(--shadow-glow), var(--shadow-md) !important;
}

/* Brand pills */
a.bg-white.border.rounded-xl {
  background: rgba(255, 255, 255, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  color: var(--text-muted) !important;
}
a.bg-white.border.rounded-xl:hover {
  background: rgba(255, 255, 255, 0.8) !important;
  border-color: var(--accent) !important;
  color: var(--primary) !important;
  box-shadow: var(--shadow-glow) !important;
}
a.bg-white.border.rounded-xl:hover i {
  color: var(--accent) !important;
}

/* Quick nav cards */
section a.bg-white {
  background: rgba(255, 255, 255, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
}
section a.bg-white:hover {
  background: rgba(255, 255, 255, 0.8) !important;
  box-shadow: var(--shadow-glow) !important;
  border-color: rgba(212, 164, 74, 0.3) !important;
}

/* ── Text — keep dark text on light backgrounds ── */
.text-gold-400,
.text-gold-500 {
  color: var(--accent) !important;
}

/* ── Buttons ── */
.bg-gold-400,
a.bg-gold-400 {
  background-color: var(--accent) !important;
  color: #0B0F1A !important;
}
.bg-gold-400:hover,
a.bg-gold-400:hover,
.hover\:bg-gold-500:hover {
  background-color: var(--accent-hover) !important;
  box-shadow: var(--shadow-glow-strong) !important;
}

/* ── Borders — softer on metallic ── */
.border-slate-100,
.border-gray-200 {
  border-color: rgba(0, 0, 0, 0.06) !important;
}
.border-t-4.border-gold-500 {
  border-top-color: var(--accent) !important;
}

/* ── Image placeholder areas — lighter ── */
.bg-gray-200 {
  background: linear-gradient(135deg, #C8CDD8 0%, #BCC2CE 100%) !important;
}
.from-gray-300.to-gray-400 {
  background: linear-gradient(135deg, #C8CDD8 0%, #BCC2CE 100%) !important;
}

/* ── Badge overlays on cards ── */
.bg-white\/80 {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(8px) !important;
}

/* ── Btn outline — gold border ── */
.btn-outline {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
.btn-outline:hover {
  background-color: var(--accent) !important;
  color: #0B0F1A !important;
}

/* ── Footer — dark gradient ── */
footer.bg-navy-900 {
  background: linear-gradient(180deg, #0A1628 0%, #070D18 100%) !important;
}

/* ── Stats section ── */
section.bg-navy-900.text-white {
  background: linear-gradient(160deg, #0A1628 0%, #0F1D35 100%) !important;
}

/* ── Hero search form — inputs on dark bg need light text ── */
section.bg-navy-900 input.bg-white,
section.bg-navy-900 .bg-white.border {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #1E293B !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}
section.bg-navy-900 input::placeholder {
  color: #94A3B8 !important;
}
section.bg-navy-900 .bg-white\/5 {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Hero labels */
section.bg-navy-900 label {
  color: #CBD5E1 !important;
}

/* Hero select displays */
section.bg-navy-900 .brand-display,
section.bg-navy-900 .model-display,
section.bg-navy-900 .wilaya-display {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #374151 !important;
}

/* ── Footer text visibility ── */
footer .text-gray-400,
footer p,
footer li,
footer a {
  color: #9CA3AF !important;
}
footer a:hover {
  color: var(--accent) !important;
}
footer .text-gold-400,
footer a.text-gold-400 {
  color: var(--accent) !important;
}

/* ── Selection modal ── */
#selection-overlay .bg-white {
  background: #F0F2F7 !important;
  color: var(--text-main) !important;
}

/* ── Misc ── */
.bg-white.border {
  background: rgba(255, 255, 255, 0.5) !important;
}

/* Nav hover — gold accent */
.hover\:text-gold-400:hover {
  color: var(--accent) !important;
}

/* Social icons in footer */
.bg-white\/10:hover,
.hover\:bg-gold-500:hover {
  background-color: var(--accent) !important;
  color: #0B0F1A !important;
}

/* Gold shadow on CTA buttons */
.shadow-gold-400\/20,
.shadow-lg.shadow-gold-400\/20 {
  box-shadow: 0 6px 20px rgba(212, 164, 74, 0.18) !important;
}

/* ═══ AMBIENT EFFECTS ═══ */

/* Subtle metallic sheen on body */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.02;
  background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%);
  background-size: 200% 200%;
}

/* Ambient glow orb behind hero */
section.bg-navy-900.rounded-b-\[2rem\]::after {
  content: '';
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(212, 164, 74, 0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* iOS: prevent auto-zoom on input focus (requires font-size >= 16px) */
#selection-search,
#selection-search:focus {
  font-size: 16px !important;
}

/* iOS: font-size >= 16px sur tous les champs pour éviter l'auto-zoom (uniquement mobile) */
@media (max-width: 1024px) {
  input, select, textarea, #selection-search {
    font-size: 16px !important;
  }
}

html { scroll-behavior: smooth; scroll-padding-top: 16px; }