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

:root {
  --w2r-sunset: #f28c00;
  --w2r-golden: #f6b93b;
  --w2r-sand: #f8f2e8;
  --w2r-dark: #3a2416;
  --w2r-white: #ffffff;
  --w2r-shadow: 0 14px 32px rgba(58, 36, 22, 0.14);
  --w2r-soft-shadow: 0 10px 24px rgba(242, 140, 0, 0.16);
  --w2r-glass: rgba(255, 255, 255, 0.68);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
  color: var(--w2r-dark) !important;
  background:
    radial-gradient(circle at 14% 10%, rgba(246, 185, 59, 0.17), transparent 34%),
    radial-gradient(circle at 86% 88%, rgba(242, 140, 0, 0.13), transparent 38%),
    var(--w2r-sand) !important;
}

h1,
h2,
h3 {
  font-family: 'Playfair Display', Georgia, serif;
  letter-spacing: 0.01em;
}

::selection {
  background: rgba(242, 140, 0, 0.2);
  color: var(--w2r-dark);
}

/* Brand color realignment */
.text-brand-orange,
.hover\:text-brand-orange:hover {
  color: var(--w2r-sunset) !important;
}

.text-brand-yellow {
  color: var(--w2r-golden) !important;
}

.text-brand-dark {
  color: var(--w2r-dark) !important;
}

.bg-brand-orange,
.filter-btn.active,
a[class*='bg-brand-orange'],
button[class*='bg-brand-orange'] {
  background: linear-gradient(135deg, var(--w2r-sunset), var(--w2r-golden)) !important;
  border: 1px solid rgba(242, 140, 0, 0.5) !important;
  box-shadow: var(--w2r-soft-shadow);
}

.filter-btn[data-cat='scooter'],
.filter-btn[data-cat='bike'] {
  color: #ffffff !important;
}

.filter-btn[data-cat='scooter']:hover,
.filter-btn[data-cat='bike']:hover,
.filter-btn[data-cat='scooter'].active,
.filter-btn[data-cat='bike'].active {
  color: #ffffff !important;
}

.bg-brand-dark,
a[class*='bg-brand-dark'],
button[class*='bg-brand-dark'] {
  background: linear-gradient(135deg, #5b3922, var(--w2r-dark)) !important;
  border: 1px solid rgba(58, 36, 22, 0.38) !important;
}

.bg-brand-beige {
  background: rgba(248, 242, 232, 0.78) !important;
}

.border-brand-yellow {
  border-color: rgba(246, 185, 59, 0.5) !important;
}

/* Premium navbar */
nav {
  background: rgba(255, 255, 255, 0.72) !important;
  border-bottom: 1px solid rgba(242, 140, 0, 0.2) !important;
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  transition: background-color 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}

nav.is-scrolled {
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 10px 24px rgba(58, 36, 22, 0.12) !important;
  border-bottom-color: rgba(242, 140, 0, 0.32) !important;
}

/* Hero gradients */
.hero-bg,
header[class*='from-brand-dark'],
header[class*='via-slate-800'] {
  background-image:
    radial-gradient(circle at 12% 18%, rgba(246, 185, 59, 0.34), transparent 36%),
    radial-gradient(circle at 86% 86%, rgba(242, 140, 0, 0.28), transparent 42%),
    linear-gradient(135deg, #4a2f1e 0%, #5e3219 45%, #8f4f1f 100%) !important;
}

/* Glass cards */
.vehicle-card,
article[class*='bg-white'],
aside[class*='bg-white'],
div[class*='bg-white'][class*='rounded-3xl'],
div[class*='bg-white'][class*='rounded-2xl'],
section[class*='bg-white'][class*='rounded-3xl'] {
  background: var(--w2r-glass) !important;
  border: 1px solid rgba(242, 140, 0, 0.16) !important;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  box-shadow: var(--w2r-shadow) !important;
}

/* Inputs */
input,
select,
textarea {
  border-color: rgba(242, 140, 0, 0.22) !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: rgba(242, 140, 0, 0.64) !important;
  box-shadow: 0 0 0 4px rgba(242, 140, 0, 0.14) !important;
}

/* Buttons and links */
button,
a[class*='rounded'] {
  transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease, background-color 220ms ease !important;
}

button:hover,
a[class*='bg-brand-orange']:hover,
a[class*='bg-brand-dark']:hover {
  transform: translateY(-2px);
  filter: saturate(1.05);
}

/* Booking + old blue accents retone */
.bg-blue-50 {
  background: rgba(248, 242, 232, 0.85) !important;
}

.border-blue-100,
.border-blue-200 {
  border-color: rgba(242, 140, 0, 0.24) !important;
}

.text-blue-900,
.text-blue-800,
.text-blue-700,
.text-blue-600 {
  color: var(--w2r-dark) !important;
}

/* Footer premium theme (if present) */
footer {
  background: linear-gradient(135deg, #452b1b, #2f1d12) !important;
  color: #fef4e8 !important;
  border-top: 1px solid rgba(246, 185, 59, 0.35);
}

footer a {
  color: #ffd38c !important;
}

/* Consistent and responsive Google Maps sizing across the site */
.w2r-map-embed,
iframe[src*='google.com/maps/embed'] {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  height: 400px !important;
  border: 0 !important;
  margin: 0 !important;
}

@media (max-width: 1024px) {
  .w2r-map-embed,
  iframe[src*='google.com/maps/embed'] {
    height: 340px !important;
  }
}

@media (max-width: 640px) {
  .w2r-map-embed,
  iframe[src*='google.com/maps/embed'] {
    height: 300px !important;
  }
}

/* Smooth reveal helper */
.w2r-reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 420ms ease, transform 420ms ease;
}

.w2r-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 768px) {
  main,
  section {
    scroll-margin-top: 96px;
  }
}