/* css/style.css — Patched final version for LV Motors
   - Replaces previous style.css (uploaded). See original: 1
   - Self-contained, works without Tailwind build. Compatible if you also include Tailwind CDN.
   - Keeps glassmorphism, hero slider, modals, bike-cards, accessibility and responsive tweaks.
*/

/* ========== Fonts ========== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');

:root{
  --hero-red: #E10600;
  --muted: #6b7280;
  --glass-bg: rgba(255,255,255,0.22);
  --glass-border: rgba(255,255,255,0.12);
  --card-shadow: 0 18px 40px rgba(0,0,0,0.06);
  --glass-accent: rgba(225,6,0,0.06);
  --max-width: 1280px;
  --page-padding: 1rem;
  --container-gap: 1rem;
}

/* ========== Reset & Base ========== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background-color: #f8fafc;
  color:#111827;
  line-height:1.45;
  -webkit-text-size-adjust:100%;
  -ms-text-size-adjust:100%;
  margin:0;
  padding:0;
}

/* ========== Helpers ========== */
/* Basic utilities used in JS-rendered markup */
.hidden{display:none!important}
.w-full{width:100%}
.object-cover{object-fit:cover}
.rounded-xl{border-radius:1rem}
.text-hero-red{color:var(--hero-red)}
.bg-hero-red{background-color:var(--hero-red);color:#fff}
.text-muted{ color:var(--muted) }

/* Container helper */
.container {
  max-width: var(--max-width);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--page-padding);
  padding-right:var(--page-padding);
}

/* ========== Navigation helpers (for mobile menu toggling) ========== */
.nav-link { position: relative; transition: all .25s ease; text-decoration:none; color:inherit; }
.nav-link::after{ content:""; position:absolute; bottom:-6px; left:0; width:0; height:2px; background:var(--hero-red); transition:width .25s ease; }
.nav-link:hover::after{ width:100%; }

/* Mobile menu helper classes (works with navbar.js) */
.mobile-menu { transition: all .2s ease; }
@media (max-width: 768px){
  .md\\:hidden { display:block !important; } /* small compatibility helper */
}

/* ========== Glassmorphism ========== */
.glassmorphism {
  background: var(--glass-bg);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
}

/* ========== Hero / Slider ========== */
.hero-slider { position: relative; height:100%; overflow:hidden; }
.hero-slider .slide { position:absolute; inset:0; opacity:0; transition:opacity .9s ease-in-out; pointer-events:none; }
.hero-slider .slide.active{ opacity:1; z-index:0; pointer-events:auto; }
.hero-slider img { width:100%; height:100%; object-fit:cover; display:block; }

/* Dark overlay for readability */
.hero-overlay, .hero-slider::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.35) 35%, rgba(0,0,0,0.35) 100%);
}

/* Hero content should sit above overlay */
.hero-content { position:relative; z-index:20; color:#fff; text-align:center; }

/* ========== Bike Card ========== */
.bike-card {
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:var(--card-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
  display:flex;
  flex-direction:column;
}
.bike-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 30px 60px rgba(0,0,0,0.10);
}
.bike-card img { width:100%; height:auto; display:block; object-fit:cover; }

/* small badge on image */
.bike-card .badge {
  position:absolute; top:12px; right:12px; background:var(--hero-red); color:#fff; padding:.25rem .5rem; border-radius:999px; font-size:.8rem; font-weight:600;
}

/* ========== Trust Badges ========== */
.trust-badge{transition:transform .25s ease; padding:1.25rem; background:#fff; border-radius:12px; box-shadow:var(--card-shadow)}
.trust-badge:hover{transform:translateY(-6px)}

/* ========== Buttons ========== */
.btn-primary{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border-radius:.75rem;
  padding:.6rem 1rem;
  font-weight:600;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  will-change:transform;
  border:0;
  background:var(--hero-red);
  color:#fff;
}
.btn-primary:active{ transform: translateY(1px) }
.btn-primary::before{
  content: "";
  position:absolute; inset:0; left:-100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  transition:left .45s ease;
  z-index:0;
}
.btn-primary:hover::before{ left:100% }
.btn-primary > * { position:relative; z-index:1; }

/* Outline variant */
.btn-outline{
  background:transparent;
  border:2px solid rgba(0,0,0,0.06);
  color:var(--hero-red);
}

/* Small floating contact buttons */
.floating-circle{
  width:56px; height:56px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

/* ========== Modals ========== */
.modal{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,0.45); z-index:60; padding:1.25rem;
}
.modal.hidden{ display:none }
.modal-content{
  width:100%;
  max-width:640px;
  background:#fff;
  border-radius:12px;
  padding:1.5rem;
  box-shadow: 0 30px 60px rgba(2,6,23,0.2);
  position:relative;
  overflow:auto;
  max-height: calc(100vh - 48px);
}
.modal .close{
  position:absolute; right:14px; top:12px; font-size:1.25rem; background:transparent; border:0; cursor:pointer; color:#374151;
}
.modal .close:hover{ color:var(--hero-red) }

/* ========== Forms ========== */
.form-input{
  display:block;
  width:100%;
  padding:.72rem .85rem;
  border-radius:.6rem;
  border:1px solid #e6e9ee;
  background: #fff;
  transition: box-shadow .18s ease, border-color .18s ease;
  font-size:0.95rem;
}
.form-input:focus{ outline:none; box-shadow: 0 0 0 4px rgba(225,6,0,0.06); border-color:var(--hero-red) }

/* ========== EMI result area ========== */
#emi-result.hidden{ display:none }
#emi-result{ margin-top:.5rem; background:#fafafa; padding:.75rem; border-radius:.6rem; border:1px solid #f1f1f1 }

/* ========== Footer ========== */
footer { background:#0f172a; color:#e6eef8; padding:2rem 0; font-size:0.95rem; }
footer a{ color:inherit; text-decoration:underline; text-underline-offset:3px }
footer p, footer li { color:#b8c1ce }

/* ========== Accessibility & Focus ========== */
:focus{ outline: 3px solid rgba(225,6,0,0.12); outline-offset:2px }
[aria-hidden="true"]{ pointer-events:none; opacity:0.001 }

/* ========== Misc Helpers ========== */
.kicker{ font-size:.9rem; font-weight:600; color:var(--hero-red) }
.loading-spinner { border:4px solid #f3f3f3; border-top:4px solid var(--hero-red); border-radius:50%; width:40px; height:40px; animation:spin 1s linear infinite; }
@keyframes spin { 0% { transform:rotate(0deg);} 100% { transform:rotate(360deg);} }

/* small responsive tweaks */
@media (max-width: 1024px){
  .container { padding-left: .75rem; padding-right: .75rem; }
}
@media (max-width: 768px){
  .hero-content h1 { font-size: 2rem; }
  .bike-card img { height:220px; object-fit:cover; }
  .modal-content{ padding:1rem; border-radius:.8rem; max-width: 94%; }
}

/* ========== Print-friendly ========== */
@media print{
  body { background:#fff; color:#000; }
  nav, .modal, .floating-circle, footer { display:none !important; }
}

/* ========== Tailwind compatibility note ==========
 If you include Tailwind CDN (https://cdn.tailwindcss.com) you can keep using utility classes.
 This CSS provides components + helper classes so pages work even without Tailwind build step.
================================================================== */