/* Velmont Luxury — clean light theme (reference-style: white header, black
   hero, light content sections, black/white buttons). The client's real gold
   logo (assets/img/logo-noring.png) is untouched — it is their brand asset. */
:root {
  --bg: #ffffff;
  --bg-2: #f6f6f7;
  --card: #ffffff;
  --line: #e5e5e8;
  --line-2: #d8d8dc;
  --text: #111111;
  --muted: #555555;
  --dim: #888888;
  --wa: #1faa55;
  --danger: #d64541;
  --radius: 12px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
}

h1, h2, h3, .serif { font-family: Arial, Helvetica, sans-serif; }

a { color: var(--text); }
a:hover { color: var(--muted); }

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 20px; }

/* ---------- Header (white, black nav — reference style) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 0;
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
/* Real client logo (assets/img/logo-noring.png, transparent background).
   Height is fixed and width stays auto so the aspect ratio is never stretched. */
.site-logo { height: 68px; width: auto; display: block; }
.footer-logo { height: 120px; width: auto; display: block; }
.main-nav { display: flex; gap: 22px; align-items: center; }
.main-nav a { color: var(--text); text-decoration: none; font-size: 15px; }
.main-nav a:hover, .main-nav a.active { color: #000; }
.main-nav a.active { border-bottom: 2px solid #111; padding-bottom: 2px; }

.btn {
  display: inline-block; background: #111; color: #fff; border: 0;
  border-radius: 8px; padding: 12px 22px; font-weight: bold; font-size: 15px;
  cursor: pointer; text-decoration: none; text-align: center;
}
.btn:hover { background: #333; color: #fff; }
.btn-outline {
  background: transparent; color: #111;
  border: 1px solid #111; padding: 11px 20px;
}
.btn-outline:hover { background: #f2f2f2; color: #111; }
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { background: #25c05f; color: #fff; }
.btn-block { width: 100%; }

/* ---------- Hero (legacy simple hero, kept as fallback) ---------- */
.hero {
  position: relative; overflow: hidden; background: #000;
}
.hero-inner { position: relative; z-index: 1; padding: 84px 0 96px; max-width: 640px; }
.eyebrow { color: var(--muted); letter-spacing: 3px; font-size: 12px; text-transform: uppercase; }
.hero h1 { font-size: 56px; line-height: 1.15; margin: 12px 0 14px; }
.hero p { color: var(--muted); font-size: 17px; max-width: 560px; }

/* ---------- Booking bar (legacy, kept for safety) ---------- */
.booking-bar {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px;
  display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: 14px;
  margin-top: -44px; position: relative; z-index: 2;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.field label {
  display: block; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
.field input, .field select, .field textarea {
  width: 100%; background: #fff; border: 1px solid #cccccc; border-radius: 8px;
  color: var(--text); padding: 11px; font-size: 14px; font-family: Arial, sans-serif;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: #111;
}
.booking-bar .btn { align-self: end; }

/* ---------- Sections ---------- */
.section { padding: 56px 0; }
.section-head { text-align: center; margin-bottom: 30px; }
.section-head h2 { font-size: 32px; color: #111; font-weight: 700; }
.section-head p { color: var(--muted); max-width: 640px; margin: 8px auto 0; }
.gold-rule { height: 1px; background: var(--line); margin: 22px 0 28px; }
.sample-note {
  background: #f7f7f7; border: 1px dashed #cccccc;
  border-radius: 10px; padding: 12px 16px; color: var(--muted);
  font-size: 13px; margin-bottom: 24px;
}

/* ---------- Cards / grids ---------- */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
/* ---------- Home fleet category sections (Raj's order 2026-10-26) ---------- */
.home-cat-section { margin-top: 40px; }
.home-cat-section:first-child { margin-top: 6px; }
.home-cat-title { font-size: 26px; font-weight: 700; color: #111; text-align: center; margin: 0 0 20px; }
.card {
  background: rgba(10, 10, 10, 0.70); border: 2px solid #cea758;
  border-radius: 14px; overflow: hidden;
  box-shadow: none;
  transition: transform 0.25s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: none;
}
.card img { width: 100%; height: 200px; object-fit: cover; display: block; }
.card-body { padding: 18px; }
.card-body h3 { position: relative; font-size: 22px; font-family: Georgia, 'Times New Roman', serif; margin-bottom: 12px; padding-bottom: 12px; }
.card-body h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 70px; height: 2px; background: #cea758; }
.card-body h3 a { color: #f5e9c8; text-decoration: none; }
.card-body h3 a:hover { color: #ecd28e; }
.meta { color: var(--muted); font-size: 13px; }
.price-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 14px; gap: 10px;
}
.price { color: #111; font-weight: bold; font-size: 17px; }
.price small { color: var(--muted); font-weight: normal; font-size: 13px; }
.tag {
  display: inline-block; background: #f2f2f2;
  border: 1px solid #dddddd; color: #333;
  font-size: 12px; border-radius: 20px; padding: 2px 10px; margin-bottom: 8px;
}

/* ---------- Filters ---------- */
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.filter-btn {
  background: #fff; border: 1px solid #dddddd; color: #333;
  border-radius: 20px; padding: 8px 18px; cursor: pointer; font-size: 14px;
}
.filter-btn:hover { border-color: #111; color: #111; }
.filter-btn.active { background: #111; border-color: #111; color: #fff; font-weight: bold; }

/* ---------- Car detail ---------- */
.detail-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 26px; align-items: start; }
.gallery img.main-img { width: 100%; border-radius: var(--radius); border: 1px solid var(--line); }
.thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.thumbs img {
  width: 100%; height: 110px; object-fit: cover; border-radius: 10px;
  border: 2px solid transparent; cursor: pointer;
}
.thumbs img.active { border-color: #111; }
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0; }
.spec { background: #f7f7f7; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.spec b { display: block; color: #111; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }
.spec span { color: var(--muted); font-size: 14px; }
.book-box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); }
.book-box .total { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0; }
.book-box .total b { color: #111; font-size: 26px; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.error { color: var(--danger); font-size: 13px; margin-top: 6px; min-height: 18px; }
.form-error {
  background: #fdf0ef; border: 1px solid var(--danger);
  color: #a9322e; border-radius: 10px; padding: 12px 16px; margin-bottom: 16px;
}
.summary-box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); }
.summary-box img { width: 100%; height: 180px; object-fit: cover; border-radius: 10px; margin-bottom: 14px; }
.summary-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.summary-row:last-of-type { border-bottom: 0; }
.summary-row b { color: #111; }

/* ---------- Services / about ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
.split img { width: 100%; border-radius: var(--radius); border: 1px solid var(--line); }
.service-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.service-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); }
.service-card b { display: block; color: #111; margin-bottom: 6px; font-size: 16px; }
.service-card p { color: var(--muted); font-size: 14px; }

/* ---------- Contact ---------- */
.info p { margin-bottom: 10px; }
.info b { color: #111; }
.placeholder { color: var(--dim); font-style: italic; }
.map-box {
  margin-top: 20px; height: 180px; border: 1px dashed #cccccc; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--dim); font-size: 14px; text-align: center; padding: 16px;
}

/* ---------- Utilities ---------- */
.price-lg { font-size: 26px; }
.mt-6 { margin-top: 6px; }
.mt-10 { margin-top: 10px; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 26px 0; margin-top: 20px; background: #fff; }
.footer-inner {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: var(--muted); font-size: 14px;
}
.footer-inner a { color: var(--muted); text-decoration: none; }
.footer-inner a:hover { color: #111; }

/* ---------- Brands ---------- */
.brand-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.brand-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); }
.brand-mark {
  width: 44px; height: 44px; border: 1px solid #111; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #111; font-size: 24px; margin-bottom: 12px;
}
.brand-card b { display: block; color: #111; margin-bottom: 6px; font-size: 17px; }
.brand-card p { color: var(--muted); font-size: 14px; }

/* ---------- Prices by category ---------- */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.price-col { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); }
.price-col h3 { color: #111; margin-bottom: 10px; }
.price-item {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px;
}
.price-item:last-child { border-bottom: 0; }
.price-item a { color: var(--text); text-decoration: none; }
.price-item a:hover { color: var(--muted); }
.price-item b { color: #111; white-space: nowrap; }

/* ---------- How it works ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.step { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); }
.step-num {
  width: 38px; height: 38px; border-radius: 50%; background: #111; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: bold; font-size: 17px; margin-bottom: 12px;
}
.step b { display: block; color: #111; margin-bottom: 6px; font-size: 16px; }
.step p { color: var(--muted); font-size: 14px; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 0 auto; }
.faq details {
  background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 16px 20px; margin-bottom: 12px;
}
.faq summary { cursor: pointer; color: #111; font-weight: bold; font-size: 16px; }
.faq details p { color: var(--muted); font-size: 14px; margin-top: 8px; }

/* ---------- Rich footer ---------- */
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.footer-col b { display: block; color: #111; margin-bottom: 10px; }
.footer-col a, .footer-col span { display: block; color: var(--muted); text-decoration: none; font-size: 14px; margin-bottom: 6px; }
.footer-col a:hover { color: #111; }
.footer-col p { color: var(--muted); font-size: 14px; margin-bottom: 8px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .grid, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .brand-grid, .price-grid, .steps, .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .booking-bar { grid-template-columns: 1fr 1fr; }
  .detail-grid, .split { grid-template-columns: 1fr; }
  .service-list { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: 40px; }
  .main-nav { gap: 14px; }
}
@media (max-width: 600px) {
  .grid, .grid-4, .service-list, .form-grid, .brand-grid, .price-grid, .steps, .footer-grid { grid-template-columns: 1fr; }
  .site-logo { height: 52px; }
  .footer-logo { height: 90px; }
  .booking-bar { grid-template-columns: 1fr; }
  .main-nav a:not(.btn) { display: none; }
  .hero-inner { padding: 56px 0 72px; }
  .hero h1 { font-size: 32px; }
}

/* ---------- MK-style hero (black bg, centred heading, pill search, big car) ---------- */
.hero-mk { background: #000; text-align: center; padding: 56px 0 36px; overflow: hidden; }
.hero-mk-inner { max-width: 1100px; }
.hero-mk-eyebrow { font-size: 20px; margin: 0 0 8px; color: #cea758; background: linear-gradient(180deg, #ecd28e 0%, #cea758 40%, #a37430 75%, #d9b466 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.hero-mk h1 { font-size: 58px; line-height: 1.15; font-weight: 300; margin: 0; color: #cea758; background: linear-gradient(180deg, #ecd28e 0%, #cea758 40%, #a37430 75%, #d9b466 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.hero-mk h1 strong { font-weight: 700; color: #cea758; background: linear-gradient(180deg, #ecd28e 0%, #cea758 40%, #a37430 75%, #d9b466 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.hero-search {
  display: flex; align-items: center; gap: 0;
  max-width: 560px; margin: 30px auto 24px;
  background: #1d1d22; border-radius: 999px; padding: 6px 6px 6px 22px;
}
.hero-search .hs-loc-wrap { position: relative; display: flex; align-items: center; flex-shrink: 0; border-right: 1px solid #3a3a40; padding-right: 16px; }
.hero-search .hs-loc { color: #fff; font-size: 15px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; padding: 0; font: inherit; cursor: pointer; width: auto; height: auto; flex: none; border-radius: 0; box-shadow: none; }
.hs-pin { width: 17px; height: 17px; flex: 0 0 17px; }
.hs-caret { color: #cea758; font-size: 11px; transition: transform .25s; }
.hero-search .hs-loc.open .hs-caret { transform: rotate(180deg); }
.hs-loc-menu { position: absolute; top: calc(100% + 10px); inset-inline-start: 0; min-width: 230px; background: #232329; border: 1px solid #3a3a40; border-radius: 16px; padding: 8px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); z-index: 20; }
.hero-search .hs-loc-menu button { display: flex; justify-content: space-between; align-items: center; width: 100%; height: auto; flex: none; background: transparent; border: 0; border-radius: 10px; box-shadow: none; color: #e8e8ea; font-size: 15px; line-height: 1.4; padding: 10px 14px; cursor: pointer; text-align: start; }
.hero-search .hs-loc-menu button:hover { background: #2b2b31; color: #ecd28e; }
.hero-search .hs-loc-menu button .hs-check { color: #cea758; visibility: hidden; }
.hero-search .hs-loc-menu button.selected .hs-check { visibility: visible; }
.hero-search input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: #fff; font-size: 16px; padding: 12px 16px; }
.hero-search input::placeholder { color: #b9b9c0; }
.hero-search button { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; border: 0; background: linear-gradient(135deg, #ecd28e, #cea758 50%, #a37430); color: #1a1206; font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 4px 16px rgba(206, 167, 88, 0.45); }
.hero-search button:hover { filter: brightness(1.1); }
.btn-white { background: #fff; color: #000; }
.btn-white:hover { background: #e8e8e8; color: #000; }
.hero-mk .btn-white { background: linear-gradient(135deg, #ecd28e, #cea758 50%, #a37430); color: #1a1206; box-shadow: 0 8px 24px rgba(206, 167, 88, 0.35); }
.hero-mk .btn-white:hover { background: linear-gradient(135deg, #f4e2a8, #d9b466 50%, #b08a3a); color: #1a1206; }
.hero-car {
  display: block; width: 100%; max-width: 1080px; margin: 38px auto 0;
  -webkit-mask-image: linear-gradient(to bottom, black 96%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 96%, transparent 100%);
}
/* ---------- Quick rent bar + brand row (Raj's order 2026-10-25): right below the hero car ---------- */
.quick-rent {
  display: flex; align-items: stretch; gap: 0;
  max-width: 1080px; margin: 40px auto 0; padding: 26px 30px;
  background: linear-gradient(180deg, #26262c, #1a1a1f);
  border: 1px solid #3a3a42; border-radius: 22px; text-align: left;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.qr-title { color: #fff; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 0; padding-right: 24px; align-self: center; max-width: 200px; }
.qr-title-ic { font-size: 24px; }
.qr-field { flex: 1; min-width: 0; border-left: 1px solid #3a3a40; padding: 4px 18px; }
.qr-lbl { display: block; color: #fff; font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.qr-ic { margin-right: 6px; }
.qr-field input { width: 100%; background: transparent; border: 0; outline: none; color: #fff; font-size: 16px; padding: 2px 0; }
.qr-field input::placeholder { color: #b9b9c0; }
.qr-field input[type="date"] { color-scheme: dark; }
.qr-phone { display: flex; align-items: center; gap: 6px; }
.qr-phone b { color: #fff; font-size: 16px; font-weight: 400; }
.qr-send { align-self: center; background: #fff; color: #000; border: 0; border-radius: 999px; height: 56px; padding: 0 42px; margin-left: 18px; font-size: 17px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); white-space: nowrap; }
.qr-send-ic { color: #c9a227; margin-left: 4px; }
.qr-error { color: #ff8a80; font-size: 13px; text-align: center; min-height: 18px; margin: 8px 0 0; }
.brand-row { overflow: hidden; width: 100%; margin: 28px 0 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.brand-track { display: flex; align-items: flex-start; width: max-content; direction: ltr; animation: brand-scroll 45s linear infinite; }
.brand-row:hover .brand-track { animation-play-state: paused; }
@keyframes brand-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.brand-track a { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #e8e8ea; text-decoration: none; font-size: 13px; flex-shrink: 0; margin-right: 48px; }
.brand-track img { height: 44px; width: auto; max-width: 84px; object-fit: contain; }
@media (prefers-reduced-motion: reduce) { .brand-track { animation: none; } .brand-row { overflow-x: auto; } }
@media (max-width: 700px) {
  .quick-rent { flex-direction: column; padding: 20px; }
  .qr-title { max-width: none; padding: 0 0 12px; }
  .qr-field { border-left: 0; border-top: 1px solid #3a3a40; padding: 12px 0; }
  .qr-send { margin: 14px 0 0; width: 100%; }
  .brand-track a { margin-right: 32px; }
}
[dir="rtl"] .quick-rent { text-align: right; }
[dir="rtl"] .qr-title { padding-right: 0; padding-left: 24px; }
[dir="rtl"] .qr-ic { margin-right: 0; margin-left: 6px; }
[dir="rtl"] .qr-field { border-left: 0; border-right: 1px solid #3a3a40; }
[dir="rtl"] .qr-send { margin-left: 0; margin-right: 16px; }
/* ---------- Silver background across the full screen (Raj's order 2026-10-25): car size unchanged, photo's own silver shades extended to both sides ---------- */
.hero-mk-copy { position: relative; z-index: 1; }
.hero-mk-logo { display: block; width: 200px; height: auto; margin: 0 auto 16px; }
.hero-car-wrap { display: flex; justify-content: center; position: relative; z-index: 0; margin-top: -330px; }
.hero-car-wrap picture { display: block; flex: 0 0 auto; width: 1920px; max-width: none; }
.hero-car-wrap .hero-car { width: 100%; max-width: none; margin: 38px 0 0; }
@media (max-width: 1080px) {
  .hero-car-wrap picture { width: 100%; max-width: 1080px; }
  .hero-car-wrap { margin-top: calc(-20.2vw + 62px); }
}
@media (max-width: 700px) {
  .hero-mk { padding-top: 36px; }
  .hero-mk h1 { font-size: 34px; }
  .hero-mk-eyebrow { font-size: 17px; }
  .hero-search { margin-left: 12px; margin-right: 12px; }
}

/* ---------- Language toggle pill (MK header style) ---------- */
.lang-toggle {
  display: flex; align-items: center; flex: 0 0 auto;
  border: 1px solid #dddddd; border-radius: 999px; overflow: hidden;
}
.lang-toggle button {
  background: transparent; border: 0; color: var(--muted);
  font-size: 14px; font-weight: bold; padding: 8px 14px; cursor: pointer;
  font-family: Arial, sans-serif;
}
.lang-toggle button.active { background: #111; color: #fff; }
.lang-toggle button + button { border-left: 1px solid #dddddd; }

/* ---------- RTL overrides (Arabic) ---------- */
/* Arabic script must stay joined: kill letter-spacing that breaks it. */
[dir="rtl"] body { font-family: "Segoe UI", Tahoma, Arial, sans-serif; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { font-family: "Segoe UI", Tahoma, Arial, sans-serif; }
[dir="rtl"] .eyebrow, [dir="rtl"] .field label, [dir="rtl"] .spec b { letter-spacing: 0; }
[dir="rtl"] .gold-rule { background: var(--line); }
/* Hero pill search bar: location side moves to the right in RTL. */
[dir="rtl"] .hero-search { padding: 6px 22px 6px 6px; }
[dir="rtl"] .hero-search .hs-loc-wrap { border-right: 0; border-left: 1px solid #3a3a40; padding-right: 0; padding-left: 16px; }
/* Logo and hero car image must never mirror. */
[dir="rtl"] .site-logo, [dir="rtl"] .footer-logo, [dir="rtl"] .hero-car { transform: none; }

/* ---------- Luxury framing (FINAL, Raj's pick 2026-10-25): matte black + gold header/footer ---------- */
.site-header { background: #0b0b0e; border-bottom: 1px solid #22222a; }
.main-nav a { color: #e8e8ea; }
.main-nav a:hover, .main-nav a.active { color: #ffffff; }
.main-nav a.active { border-bottom: 2px solid #c9a227; }
.site-footer { background: #0b0b0e; border-top: 1px solid #22222a; }
.footer-inner { color: #b9b9c0; }
.footer-inner a { color: #b9b9c0; }
.footer-inner a:hover { color: #ffffff; }
.footer-col b { color: #c9a227; }
.footer-col a, .footer-col span { color: #b9b9c0; }
.footer-col a:hover { color: #ffffff; }
.footer-col p { color: #b9b9c0; }
.lang-toggle { background: #ffffff; }

/* Hero visual is static (Raj 2026-10-26): entrance fade-in removed from v57. */

/* Home category marquee rows (v31, Raj's order): each section's cars run as
   one continuous row — 4 cards visible at a time on desktop, sliding away
   while the next cards arrive. Same seamless-loop pattern as the brand row.
   Scoped classes only, so the fleet page grid is untouched. */
.home-cat-marquee { overflow: hidden; width: 100%; direction: ltr; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.home-cat-track { display: flex; align-items: stretch; width: max-content; direction: ltr; animation: home-cat-scroll 55s linear infinite; }
.home-cat-marquee:hover .home-cat-track, .home-cat-marquee:active .home-cat-track { animation-play-state: paused; }
@keyframes home-cat-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.home-cat-track .card { flex: 0 0 320px; width: 320px; margin-right: 20px; flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .home-cat-track { animation: none; } .home-cat-marquee { overflow-x: auto; } }

/* Browse-by-Category image tiles (v35, Raj's order): full-photo tiles with
   overlay labels on a matte-black section, like the reference design.
   Scoped to #categories so the Why-Choose cards (same .service-card class)
   are untouched. */
#categories { background: #0b0b0e; }
#categories .section-head h2 { color: #fff; }
#categories .section-head p { color: #bbb; }
#categories .sample-note { background: #1d1d22; border-color: #3a3a40; color: #bbb; }
#categories .service-card { display: block; position: relative; padding: 0; overflow: hidden; background: transparent; border: none; box-shadow: none; text-decoration: none; }
#categories .service-card img { width: 100%; height: 200px; object-fit: cover; display: block; transition: transform 0.35s ease; }
#categories .service-card:hover img { transform: scale(1.04); }
#categories .service-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 100%); pointer-events: none; }
#categories .cat-tile-label { position: absolute; right: 16px; bottom: 12px; z-index: 1; color: #fff; font-size: 15px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { #categories .service-card img { transition: none; } #categories .service-card:hover img { transform: none; } }

/* ---------- Ask Now card actions (v40): Confirm to Owner + 3 buttons ---------- */
.btn-sm { padding: 7px 14px; font-size: 13px; }
.confirm-row { margin-top: 14px; font-weight: bold; font-size: 17px; color: #111; }
.card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.card-actions .btn { flex: 1 1 auto; white-space: nowrap; text-align: center; }

/* ---------- Premium card restyle (v41, Raj-approved: Design 1 royal black-gold, transparent-more panel) ---------- */
/* Eyebrow above the title — brand mark, same on every card (CSS-generated, no JS change needed). */
.card .card-body::before {
  content: "VELMONT LUXURY";
  display: block; font-size: 11px; font-weight: 700; letter-spacing: 2px;
  color: #ecd28e; margin-bottom: 8px;
}
/* Approved mock has no category pill on cards (prices-section list tags untouched — scoped to .card). */
.card .tag { display: none; }
.card .card-body { padding: 20px; }
.card .meta { color: #cccccc; }
.card .confirm-row { color: #cea758; }
.card-actions .btn { border-radius: 8px; background: transparent; color: #cea758; border: 1px solid #cea758; }
.card-actions .btn-wa {
  background: linear-gradient(180deg, #ecd28e 0%, #cea758 50%, #a37430 100%);
  color: #1a1206; border: none;
}
.card-actions .btn-outline { background: transparent; color: #cea758; border: 1px solid #cea758; }
.card-actions .btn-wa:hover {
  background: linear-gradient(180deg, #f4e2a8 0%, #d9b36a 50%, #b98a3e 100%);
  color: #1a1206;
}
.card-actions .btn:hover, .card-actions .btn-outline:hover {
  background: rgba(206, 167, 88, 0.15); color: #ecd28e; border-color: #ecd28e;
}
[dir="rtl"] .card-body h3::after { left: auto; right: 0; }

/* ---------- v42 (Raj 2026-10-26): square grid cards + all 3 buttons in one row ---------- */
/* Buttons: no wrap anywhere; smaller padding/font so 3 fit even on phone cards. */
.card-actions { flex-wrap: nowrap; }
.card-actions .btn { font-size: 13px; padding: 10px 8px; }
/* Marquee cards are only 280px wide — smaller buttons so the row still fits. */
.home-cat-track .card-actions .btn { font-size: 12px; padding: 10px 6px; }
/* Fleet-grid cards: fully square (4x4). Body keeps its natural height; the photo
   flexes to fill the rest, so the card stays square without clipping any text.
   (Home marquee cards stay as they are — at 280px wide a square card would shrink
   the photo to a thin strip.) */

/* ---------- v43 (Raj 2026-10-26): marquee cards wider + uniformly aligned ---------- */
/* Wider cards (280 -> 320px above). Loop animation is %-based (translateX(-50%)),
   so the wider cards stay seamless. Track already stretches cards to equal height;
   the rules below align the CONTENT inside: title reserves 2 lines (body line-height
   is 1.6, so 2 x 22px lines + 12px divider padding = ~84px), and buttons are pinned
   to the card bottom, so 1-line and 2-line titles no longer leave buttons at
   different heights. */
.home-cat-track .card-body { display: flex; flex-direction: column; }
.home-cat-track .card-body h3 { min-height: 84px; }
.home-cat-track .card-actions { margin-top: auto; padding-top: 12px; }

/* ---------- v44 (Raj 2026-10-26): fleet-page fix ONLY — home marquee untouched ---------- */
/* Square rule REMOVED: it squeezed fleet photos to a thin strip. Photos are back to
   full 200px (.card img base rule). Body is tightened slightly and aligned like the
   marquee: title reserves 2 lines (20px font x 1.6 line-height x 2 + 12px divider
   padding = ~76px) and buttons are pinned to the card bottom, so every row lines up. */
.grid .card .card-body { padding: 16px; display: flex; flex-direction: column; }
.grid .card-body h3 { font-size: 20px; min-height: 76px; }
.grid .card-actions { margin-top: auto; padding-top: 12px; }

/* ---------- v46 (Raj 2026-10-26): gold stylish headings — Cinzel + logo gold gradient ---------- */
/* Headings on the BLACK categories section: full bright logo gradient (as on the hero). */
#categories .section-head h2 {
  font-family: 'Cinzel', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: linear-gradient(180deg, #ecd28e 0%, #cea758 40%, #a37430 75%, #d9b466 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* Headings on WHITE backgrounds (fleet H1, home category titles): darker gold gradient
   (no bright top) so the gold stays readable on white. Same logo gold, deeper tones. */
[data-i18n="fleet_h"],
.home-cat-title {
  font-family: 'Cinzel', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: linear-gradient(180deg, #cea758 0%, #a37430 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* View Full Fleet button: gold gradient button (dark text, readable) + Cinzel. */
[data-i18n="view_full_fleet"] {
  font-family: 'Cinzel', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: linear-gradient(180deg, #ecd28e 0%, #cea758 50%, #a37430 100%);
  color: #1a1206;
  border-color: #a37430;
}
[data-i18n="view_full_fleet"]:hover {
  background: linear-gradient(180deg, #f4e2a8 0%, #d9b36a 50%, #b98a3e 100%);
  color: #1a1206;
}

/* ---------- v47 (Raj 2026-10-26): dark charcoal background — header/footer/hero untouched ---------- */
/* Header (.site-header) + footer (.site-footer) keep their own #0b0b0e backgrounds and are
   OUTSIDE <main>, so none of the rules below touch them. Hero (.hero-mk) has its own #000
   background and explicit text colours, so it is unaffected too. Everything below is scoped
   to <main> (or body background, which opaque header/footer/hero cover). */
body { background: #141414; }
#categories { background: #141414; }
main { color: #e8e8e8; }
main a { color: #e8e8e8; }
main a:hover { color: #cea758; }
/* Section headings that are not already gold (gold ones win by specificity). */
main .section-head h2 { color: #e8e8e8; }
main .section-head p,
main .meta,
main .field label { color: #bbbbbb; }
main .eyebrow { color: #cea758; }
/* White boxes -> dark boxes. */
main .book-box,
main .summary-box,
main .service-card,
main .brand-card,
main .price-col,
main .step,
main .faq details { background: #1e1e1e; border-color: #333; box-shadow: none; }
main .service-card b,
main .brand-card b,
main .price-col h3,
main .step b,
main .summary-row b,
main .price-item b,
main .spec b,
main .info b { color: #e8e8e8; }
main .service-card p,
main .brand-card p,
main .step p,
main .spec span,
main .faq details p { color: #bbbbbb; }
main .faq summary { color: #e8e8e8; }
main .step-num { background: #cea758; color: #1a1206; }
main .spec { background: #1e1e1e; border-color: #333; }
main .price { color: #e8e8e8; }
main .price small { color: #bbbbbb; }
main .price-item a { color: #e8e8e8; }
main .price-item a:hover { color: #cea758; }
main .confirm-row { color: #cea758; }
main .map-box { border-color: #cea758; color: #cea758; }
main .placeholder { color: #999; }
main .thumbs img.active { border-color: #cea758; }
/* Notes + forms. */
main .sample-note { background: #1d1d22; border-color: #3a3a40; color: #bbb; }
main .field input,
main .field select,
main .field textarea { background: #1e1e1e; border-color: #444; color: #e8e8e8; }
main .field input:focus,
main .field select:focus,
main .field textarea:focus { border-color: #cea758; }
/* Filters: dark pills, gold active. */
main .filter-btn { background: #1e1e1e; border-color: #444; color: #ddd; }
main .filter-btn:hover { border-color: #cea758; color: #fff; }
main .filter-btn.active { background: linear-gradient(180deg, #ecd28e 0%, #cea758 50%, #a37430 100%); border-color: #a37430; color: #1a1206; }
/* Plain buttons (about/contact/booking CTAs): white so they stay visible on dark.
   Card buttons are NOT affected (higher specificity). The gold View Full Fleet button
   is re-asserted below (it is also a .btn.btn-outline). */
main .btn { background: #fff; color: #111; }
main .btn:hover { background: #e8e8e8; color: #111; }
main .btn-outline { border-color: #e8e8e8; color: #e8e8e8; }
main .btn-outline:hover { background: rgba(255, 255, 255, 0.10); color: #fff; }
/* Re-assert the gold View Full Fleet button (placed after the .btn rules on purpose). */
main [data-i18n="view_full_fleet"] {
  font-family: 'Cinzel', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: linear-gradient(180deg, #ecd28e 0%, #cea758 50%, #a37430 100%);
  color: #1a1206;
  border-color: #a37430;
}
main [data-i18n="view_full_fleet"]:hover {
  background: linear-gradient(180deg, #f4e2a8 0%, #d9b36a 50%, #b98a3e 100%);
  color: #1a1206;
}

/* ---------- v48 (Raj 2026-10-26): gold WhatsApp buttons site-wide + premium body font ---------- */
/* All .btn-wa buttons (prices Ask Now, detail Ask Now, booking WhatsApp, contact/index
   Chat on WhatsApp) become gold like the card Ask Now. Card buttons are already gold
   (higher-specificity .card-actions rules win), so they do not change. Placed after the
   v47 main .btn rules on purpose (same specificity, later wins). */
main .btn-wa {
  background: linear-gradient(180deg, #ecd28e 0%, #cea758 50%, #a37430 100%);
  color: #1a1206;
}
main .btn-wa:hover {
  background: linear-gradient(180deg, #f4e2a8 0%, #d9b36a 50%, #b98a3e 100%);
  color: #1a1206;
}
/* Premium body font: Jost (elegant geometric sans, pairs with Cinzel headings).
   Cinzel headings (v46 selectors) and Georgia card titles keep winning by specificity;
   Arabic pages keep Segoe UI via the [dir=rtl] rules. */
body { font-family: 'Jost', Arial, Helvetica, sans-serif; }
h1, h2, h3, .serif { font-family: 'Jost', Arial, Helvetica, sans-serif; }
.field input, .field select, .field textarea { font-family: 'Jost', Arial, sans-serif; }
.lang-toggle button { font-family: 'Jost', Arial, sans-serif; }

/* ---------- v49 (Raj 2026-10-26): PayPedia-style ambient glows, site-wide ---------- */
/* Same technique as PayPedia (fixed body::before layer, behind content, clicks pass
   through): three soft radial glows over the charcoal base. Static, like PayPedia
   (no pulse animation — Raj approved the static sample). Header/footer keep their
   own opaque #0b0b0e backgrounds and hero keeps #000, so glows show in the content
   sections. #categories becomes transparent so glows show there too (its #141414
   would otherwise cover them). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(420px 280px at 88% 2%, rgba(206, 167, 88, 0.30), transparent 85%),
    radial-gradient(470px 340px at -8% 22%, rgba(74, 123, 212, 0.34), transparent 85%),
    radial-gradient(370px 310px at 50% 110%, rgba(206, 167, 88, 0.18), transparent 85%);
}
#categories { background: transparent; }

/* ---------- v50 (Raj 2026-10-26): all headings + buttons golden ---------- */
/* Headings: bright logo gold gradient (backgrounds are dark now — the v46 darker
   gold was designed for white backgrounds). Covers h1/h2 everywhere in main,
   including section heads (same specificity as the v47 light rule, later wins)
   and the already-gold fleet/category titles (updated from darker gold to bright
   gold for the dark theme). Hero h1 keeps its own identical gold rule; card h3
   titles (cream Georgia) and h3 sub-heads are untouched. */
main h1, main h2, main .section-head h2 {
  background: linear-gradient(180deg, #ecd28e 0%, #cea758 40%, #a37430 75%, #d9b466 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
main [data-i18n="fleet_h"], main .home-cat-title {
  background: linear-gradient(180deg, #ecd28e 0%, #cea758 40%, #a37430 75%, #d9b466 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* Buttons: every .btn / .btn-outline in main becomes gold (same gold as card Ask
   Now). This also fixes the v47 bug where .btn.btn-outline showed a white bg with
   faint light text (white from main .btn + light text from main .btn-outline).
   Card buttons are unaffected (higher-specificity .card-actions rules win);
   .btn-wa buttons keep the identical gold; hero .btn-white keeps its own rule. */
main .btn {
  background: linear-gradient(180deg, #ecd28e 0%, #cea758 50%, #a37430 100%);
  color: #1a1206;
  border-color: #a37430;
}
main .btn:hover {
  background: linear-gradient(180deg, #f4e2a8 0%, #d9b36a 50%, #b98a3e 100%);
  color: #1a1206;
}
main .btn-outline {
  background: linear-gradient(180deg, #ecd28e 0%, #cea758 50%, #a37430 100%);
  color: #1a1206;
  border-color: #a37430;
}
main .btn-outline:hover {
  background: linear-gradient(180deg, #f4e2a8 0%, #d9b36a 50%, #b98a3e 100%);
  color: #1a1206;
}
/* Re-assert the gold View Full Fleet button (Cinzel, placed after the .btn rules). */
main [data-i18n="view_full_fleet"] {
  font-family: 'Cinzel', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: linear-gradient(180deg, #ecd28e 0%, #cea758 50%, #a37430 100%);
  color: #1a1206;
  border-color: #a37430;
}
main [data-i18n="view_full_fleet"]:hover {
  background: linear-gradient(180deg, #f4e2a8 0%, #d9b36a 50%, #b98a3e 100%);
  color: #1a1206;
}

/* ---------- v51 (Raj 2026-10-26): nav dropdowns + brands page ---------- */
/* Dropdowns open on hover (desktop only, min-width 901px + hover-capable).
   On mobile/touch they stay hidden and the nav label itself navigates
   (Car Types -> fleet.html, Car Brands -> brands.html). */
.nav-drop { position: relative; display: flex; align-items: center; }
.nav-menu, .nav-mega {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  background: rgba(14, 14, 18, 0.97);
  border: 1px solid #2a2a32;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
  padding: 12px;
}
.nav-menu { min-width: 230px; }
.nav-menu a {
  display: block;
  padding: 10px 14px;
  color: #e8e8e8;
  text-decoration: none;
  font-size: 15px;
  border-bottom: 1px solid #22222a;
}
.nav-menu a:last-child { border-bottom: 0; }
.nav-menu a:hover { color: #cea758; }
.nav-mega { width: 720px; max-width: 92vw; }
.nav-mega-cols { display: flex; }
.nav-mega-col { flex: 1; display: flex; flex-direction: column; }
.nav-mega-col + .nav-mega-col { border-left: 1px solid #22222a; }
.nav-mega-col a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  color: #e8e8e8;
  text-decoration: none;
  font-size: 14px;
}
.nav-mega-col a:hover { color: #cea758; }
.nav-mega-col img { height: 28px; width: auto; max-width: 44px; object-fit: contain; }
.nav-mega-foot { border-top: 1px solid #22222a; padding: 12px 14px 2px; color: #e8e8e8; font-size: 14px; }
.nav-mega-foot a { color: #cea758; text-decoration: none; }
@media (hover: hover) and (min-width: 901px) {
  .nav-drop:hover .nav-menu { display: block; }
  .nav-drop:hover .nav-mega { display: flex; flex-direction: column; }
}
/* Brands page cards (logos have black backgrounds, so they blend with dark cards). */
.brand-card img { height: 56px; width: auto; max-width: 180px; object-fit: contain; margin-bottom: 12px; display: block; }
.brand-models a { display: block; padding: 6px 0; border-top: 1px solid #333; color: #e8e8e8; text-decoration: none; font-size: 14px; }
.brand-models a:hover { color: #cea758; }
.brand-card.highlight { border-color: #cea758; box-shadow: 0 0 0 2px #cea758, 0 0 24px rgba(206, 167, 88, 0.35); }

/* ---------- v52 (Raj 2026-10-26): new car detail page ---------- */
.crumb { color: #bbbbbb; font-size: 14px; margin-bottom: 4px; }
.crumb a { color: #e8e8e8; text-decoration: none; }
.crumb a:hover { color: #cea758; }
.crumb span { color: #cea758; }
.detail-panel { background: #1e1e1e; border: 1px solid #333; border-radius: 14px; padding: 22px; }
.rate-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0; text-align: center; }
.rate { background: #141414; border: 1px solid #333; border-radius: 10px; padding: 12px 8px; }
.rate span { display: block; color: #bbbbbb; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.rate a { color: #cea758; font-weight: 700; text-decoration: none; font-size: 15px; }
.rate a:hover { color: #ecd28e; }
.detail-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.detail-actions .btn { flex: 1; text-align: center; white-space: nowrap; }
.info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; }
@media (max-width: 1080px) { .info-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .info-grid { grid-template-columns: 1fr; } }
.detail-desc { margin-top: 36px; }
/* Floating contact buttons (site-wide, injected by JS; gold per the site button system). */
.float-btns { position: fixed; right: 18px; bottom: 18px; z-index: 70; display: flex; flex-direction: column; gap: 10px; }
.float-btns a { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); }
.float-btns svg { width: 28px; height: 28px; display: block; }
.float-wa { background: #25d366; }
.float-call { background: #ffffff; border: 1px solid #e0e0e0; }

/* ---------- Hero video (v62, Raj's own video): seamless living-photo hero ---------- */
/* Desktop shows the video (no controls, muted, looping); mobile keeps the portrait image. */
.hero-car-wrap .hero-video { flex: 0 0 auto; width: 100vw; max-width: none; aspect-ratio: 1920 / 980; object-fit: cover; object-position: top; -webkit-mask-image: linear-gradient(to bottom, black 99%, transparent 100%); mask-image: linear-gradient(to bottom, black 99%, transparent 100%); }
@media (min-width: 1081px) { .hero-car-wrap picture { display: none; } }
@media (max-width: 1080px) { .hero-car-wrap .hero-video { display: none; } }