:root {
  --bg: #14161a;
  --surface: #1b1e23;
  --surface-hover: #21252b;
  --accent: #c68a3c;
  --accent-soft: rgba(198, 138, 60, 0.14);
  --text: #ece8e1;
  --text-muted: #8d9096;
  --border: rgba(255, 255, 255, 0.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  font-family: 'Inter', sans-serif;
  color: var(--text);
  min-height: 100vh;
}

/* ---------- Navbar ---------- */

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  padding: 0 28px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.navbar-left {
  display: flex;
  align-items: center;
  gap: 40px;
}

/* Brand badge */

.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.brand-badge {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 8px 16px 10px;
  overflow: hidden;
}

.brand-badge::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--accent);
}

.brand-badge span {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: clamp(13px, 1.6vw, 19px);
  letter-spacing: 0.3px;
  color: var(--text);
  line-height: 1;
  white-space: nowrap;
}

.brand-short {
  display: none;
}

/* Below this, swap to the short form so the badge never crowds the tabs */
@media (max-width: 560px) {
  .brand-full { display: none; }
  .brand-short { display: inline; }

  .brand-badge {
    padding: 8px 14px 10px;
  }

  .brand-badge .brand-short {
    font-size: 17px;
    letter-spacing: 0.5px;
  }
}

/* Tabs */

.tabs {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tab {
  position: relative;
  background: none;
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 8px 14px;
  cursor: pointer;
  transition: color 0.15s ease;
  text-decoration: none;
}

.tab:hover {
  color: var(--text);
}

.tab::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.18s ease;
}

.tab:hover::after {
  transform: scaleX(1);
}

.tab.active {
  color: var(--text);
}

.tab.active::after {
  transform: scaleX(1);
}

/* Home tab — bold with a leading house icon to set it apart from sub-pages */

.tab-home {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
}

.tab-home-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
  display: block;
}

/* The span auth-ui.js injects My Requests / Review Requests into. display:contents
   removes the span itself from layout so the link inside becomes a true direct
   flex item of .tabs — otherwise it sits one level deeper than its siblings and
   doesn't line up with them. */
#dynamicNavLinks {
  display: contents;
}

/* Small count/"!" badge on the My Requests / Review Requests nav link. */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 999px;
  background: #ec5800;
  color: #fff8f2;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}

/* Logo mark inside the brand badge, sitting to the left of the wordmark. */
.brand-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  margin-right: 8px;
  display: block;
}

/* Right side auth */

.auth {
  display: flex;
  align-items: center;
  gap: 20px;
}

.login-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.login-link:hover {
  color: var(--text);
}

.signup-btn {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #16181c;
  background: var(--accent);
  border: none;
  padding: 9px 18px;
  cursor: pointer;
  transition: background 0.15s ease;
  border-radius: 10px;
}

.signup-btn:hover {
  background: #d69a4d;
}

/* Logged-in state in the navbar — avatar + "Hello, Name" + a quiet log out link,
   swapped in by auth-ui.js in place of the Log in / Sign up pair above. */
.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
  display: block;
}

.user-greeting {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.logout-btn {
  padding: 8px 14px;
  font-size: 13px;
}

/* Mobile menu button (hidden by default) */

.menu-toggle {
  position: relative; /* anchors .menu-toggle-badge below */
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text);
  position: relative;
  transition: 0.2s ease;
}

.menu-toggle span::before { position: absolute; top: -6px; }
.menu-toggle span::after { position: absolute; top: 6px; }

/* Small dot on the hamburger icon (top-right corner) so you can tell a
   request needs attention without having to open the menu first — the nav
   link's own "+N"/"!" badge lives inside the collapsible .tabs panel, out of
   sight until then. .menu-toggle is display:none above the 720px breakpoint
   below, so this dot only ever shows up alongside the hamburger itself.
   auth-ui.js creates this as an <i>, not a <span> — the icon's own bars are
   styled via the ".menu-toggle span" rules above (a generic descendant
   selector), and a <span> here would get swept into that styling too. */
.menu-toggle-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ec5800;
  border: 2px solid var(--bg);
  pointer-events: none;
}

/* ---------- Responsive ---------- */

@media (max-width: 720px) {
  .tabs {
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 28px 16px;
    gap: 2px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
  }

  .tabs.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .tab { width: 100%; padding: 12px 14px; }
  .tab::after { display: none; }

  .login-link { display: none; }

  .menu-toggle { display: block; order: -1; margin-right: 8px; }

  .navbar-left { gap: 16px; }

  .user-greeting { display: none; }
}

/* ---------- Demo page filler (remove in production) ---------- */

.demo-content {
  padding: 80px 28px;
  max-width: 640px;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
}

.demo-content h1 {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  color: var(--text);
  font-size: 28px;
  margin-bottom: 12px;
}

/* ==========================================================
   Home page
   ========================================================== */

.page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 28px;
}

section {
  padding: 72px 0;
  border-bottom: 1px solid var(--border);
}

section:last-of-type {
  border-bottom: none;
}

.eyebrow {
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 10px;
}

/* ---------- Image placeholder ---------- */

.img-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--surface);
  border: 1px dashed rgba(255, 255, 255, 0.18);
  color: var(--text-muted);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  min-height: 220px;
  width: 100%;
}

.img-placeholder svg {
  width: 28px;
  height: 28px;
  opacity: 0.5;
}

/* ---------- Real photos (once you swap in actual images) ---------- */

.site-photo {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 6;
  object-fit: cover;
  border-radius: 25px;
}

/* Hero portrait — thin accent "stroke" ring plus a soft outer halo in the
   same accent color, echoing a blueprint/schematic highlight rather than a
   generic drop shadow. Decorative corner marks live in .story-photo below. */
.hero-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 6;
  object-fit: cover;
  border-radius: 28px;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 7px rgba(198, 138, 60, 0.08);
  position: relative;
  z-index: 1;
}

.Reg16x9 {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 25px;
}

/* ---------- Hero ---------- */

.hero {
  padding-top: 64px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.hero-text {
  max-width: 640px;
}

.hero h1 {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 44px;
  line-height: 1.15;
  margin: 0 0 18px;
  color: var(--text);
}

.hero p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

.hero .img-placeholder {
  min-height: 340px;
}

/* Hero "sold X vehicles" counter — fixed width (sized for the widest value it
   will ever show, "200+") so the box never resizes as the digit count changes
   mid-animation (1 -> 2 -> 3 digits). That resizing was what reflowed/stuttered
   the rest of the sentence after it; a fixed width removes the reflow entirely.
   The scale-up transform still animates freely since it doesn't affect layout. */
.sold-counter {
  display: inline-block;
  min-width: 4.7ch;
  text-align: center;
  color: var(--accent);
  font-weight: 700;
  transform-origin: center center;
  margin-right: 0.15em;
}

/* ---------- Our story ---------- */

.story {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}

.story h2 {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 28px;
  color: var(--text);
  margin: 0 0 20px;
}

.story p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0 0 16px;
}

.story p:last-of-type {
  margin-bottom: 0;
}

.story .img-placeholder {
  min-height: 320px;
}

/* Wraps the hero portrait so the blueprint-style corner marks can be
   positioned around it without disturbing the grid layout above. */
.story-photo {
  position: relative;
}

.story-deco {
  position: absolute;
  color: var(--accent);
  pointer-events: none;
  z-index: 0;
}

.story-deco-tl {
  top: -34px;
  left: -34px;
  width: 120px;
  height: 120px;
}

.story-deco-br {
  bottom: -38px;
  right: -42px;
  width: 160px;
  height: 160px;
}

/* ---------- Customer reviews ---------- */

.reviews {
  position: relative;
}

.reviews h2 {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 28px;
  color: var(--text);
  margin: 0 0 12px;
  position: relative;
  z-index: 1;
}

.reviews > p {
  font-size: 15px;
  color: var(--text-muted);
  margin: 0 0 28px;
  position: relative;
  z-index: 1;
}

/* Faint blueprint-style line/triangle marks behind the reviews grid — same
   motif as the hero corner marks, spread thin so it reads as atmosphere
   rather than competing with the review screenshots. */
.reviews-deco-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--accent);
  z-index: 0;
}

.reviews-deco {
  width: 100%;
  height: 100%;
}

/* Collage layout: CSS columns (masonry-style) so any number of review
   screenshots — whatever their own width/height — tile cleanly without
   needing a per-image aspect-ratio class. Just add <img> tags in the HTML. */
.reviews-grid {
  position: relative;
  z-index: 1;
  columns: 2 220px;
  column-gap: 16px;
  padding-bottom: 38px;
}

.reviews-grid img {
  display: block;
  width: 100%;
  margin: 0 0 16px;
  border-radius: 14px;
  break-inside: avoid;
}

/* Closing line under the reviews — separated with its own breathing room
   so it doesn't feel glued to the collage above it. */
.reviews-closing {
  margin: 32px 0 0;
  padding-top: 30px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 15px;
  color: var(--text-muted);
}

/* ---------- What we do ---------- */

.offerings h2 {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 28px;
  color: var(--text);
  margin: 0 0 32px;
}

.offering-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.offering-card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 24px;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  gap: 18px;
}

.offering-card .img-placeholder {
  min-height: 160px;
}

.offering-card h3 {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 19px;
  color: var(--text);
  margin: 0;
}

.offering-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
  flex-grow: 1;
}

.link-btn {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}

.offering-card .link-btn {
  align-self: flex-start;
}

/* ---------- Sub navigation (category filter, used on Buy page) ---------- */

.subnav {
  display: flex;
  gap: 8px;
  margin: 32px 0 40px;
}

.subnav-tab {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 8px 18px;
  cursor: pointer;
  border-radius: 999px;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.subnav-tab:hover {
  color: var(--text);
}

.subnav-tab.active {
  color: #16181c;
  background: var(--accent);
  border-color: var(--accent);
}

/* ---------- Page header (used on Buy / Service / Contact / My-Requests pages) ---------- */

.page-header {
  padding-top: 48px;
}

.page-header h1 {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 36px;
  color: var(--text);
  margin: 0 0 12px;
}

.page-header p {
  font-size: 15px;
  color: var(--text-muted);
  max-width: 560px;
  margin: 0;
}

/* ---------- Car grid (Buy page) — 2 columns so each listing reads bigger ---------- */

.car-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  padding-bottom: 40px;
}

.car-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.car-card .img-placeholder {
  min-height: 180px;
  border-radius: 0;
  border: none;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.18);
}

/* Empty-state message (e.g. "No cars are Pending") — spans the full grid width */
.car-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 20px;
  color: var(--text-muted);
  font-size: 40px;
}

.car-card-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.car-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.car-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 22px;
  color: var(--text);
  margin: 0;
}

.car-meta {
  font-size: 16px;
  color: var(--text-muted);
  margin: 0;
}

.car-price {
  font-size: 20px;
  font-weight: 600;
  color: var(--accent);
  margin: 4px 0 0;
}

.status-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.status-available {
  background: var(--accent-soft);
  color: var(--accent);
}

.status-pending {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
}

.status-sold {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(141, 144, 150, 0.6);
}

.car-card[data-status="sold"] .car-title,
.car-card[data-status="sold"] .car-price {
  opacity: 0.55;
}

/* ---------- Car specs grid (Title Status, Condition, Transmission, colors, MPG) ---------- */

.car-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 16px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  margin-top: 2px;
}

.spec {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.spec-label {
  font-size: 13px;
  color: var(--text-muted);
}

.spec-value {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}

/* Wraps the spec value + "Why?" button on the same line (e.g. rebuilt title) */
.spec-value-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.why-btn {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border: none;
  padding: 2px 9px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.why-btn:hover {
  background: rgba(198, 138, 60, 0.25);
}

/* "RECENTLY ADDED!" ribbon — sits on the photo itself (top-left) so it catches
   the eye before the specs do. Persimmon is deliberately distinct from the
   site's accent orange so the two badges never get confused with each other. */
.new-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  background: #ec5800;
  color: #fff8f2;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 5px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

.new-badge-sold {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  background: #1b4cfe;
  color: #fff8f2;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 5px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

/* ---------- Car card action buttons ---------- */

.car-card-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.car-card-actions .btn-primary,
.car-card-actions .btn-secondary {
  flex: 1;
  text-align: center;
  font-size: 16px;
  padding: 10px 14px;
}

/* ---------- Photo carousel (one photo at a time, left/right arrow navigation) ----------
   Height is set dynamically in main.js to match each photo's own aspect ratio, so a
   wider or taller shot isn't cropped to fit a fixed box — the card top just adjusts
   as you click through. min-height is only a fallback before JS measures the image. */

.photo-carousel {
  position: relative;
  min-height: 220px;
  overflow: hidden;
  transition: height 0.25s ease;
}

.carousel-slide {
  position: absolute;
  inset: 0;
  display: none;
}

.carousel-slide.active {
  display: block;
}

.carousel-slide.img-placeholder.active {
  display: flex;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.45);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.carousel-arrow:hover {
  background: rgba(0, 0, 0, 0.65);
}

.carousel-prev {
  left: 10px;
}

.carousel-next {
  right: 10px;
}

.carousel-counter {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 3;
  background: rgba(0, 0, 0, 0.5);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
}

/* ---------- Photo slideshow (auto-cycling hero / mini-widget photos) ----------
   Cross-fades between whatever images are listed in an element's data-images
   (comma-separated), or found via data-folder + data-count + data-ext, same
   convention as the manual .photo-carousel above. Sizing/aspect-ratio comes
   from whichever utility class rides along with .photo-slideshow (.site-photo,
   .Reg16x9, etc) — this block only handles the fade + zoom mechanics.
   The slow zoom still runs on a single photo; the cross-fade just never has
   anything to hand off to until a second photo is added. */

.photo-slideshow {
  position: relative;
  overflow: hidden;
  background: var(--surface);
}

.slideshow-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}

.slideshow-slide.active {
  opacity: 1;
  z-index: 1;
}

.slideshow-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: slideshow-kenburns 8s ease-in-out infinite alternate;
}

@keyframes slideshow-kenburns {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .slideshow-slide {
    transition: none;
  }

  .slideshow-slide img {
    animation: none;
  }
}

/* ---------- More Details / Why? modal popup ---------- */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay.open {
  display: flex;
}

.modal-box {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 24px 24px;
  max-width: 480px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}

.modal-close:hover {
  color: var(--text);
}

.modal-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: var(--text);
  margin: 0 0 4px;
  padding-right: 24px;
}

.modal-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 16px;
}

.modal-description {
  overflow-y: auto;
  max-height: 320px;
  padding-right: 6px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
}

.modal-description p {
  margin: 0 0 12px;
}

.modal-description p:last-child {
  margin-bottom: 0;
}

.modal-description::-webkit-scrollbar {
  width: 6px;
}

.modal-description::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

/* ---------- Purchase offer modal ("Request Purchase" button) ---------- */

.offer-modal-box {
  max-width: 420px;
}

.offer-modal-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 4px;
}

.offer-regular-price {
  font-size: 15px;
  color: var(--text-muted);
  margin: 0;
}

.offer-regular-price span {
  color: var(--text);
  font-weight: 600;
}

.offer-field input {
  font-size: 17px;
  font-weight: 600;
}

.offer-warning {
  font-size: 13px;
  font-weight: 600;
  color: #ff6b6b;
  margin: -6px 0 0;
  line-height: 1.5;
}

.offer-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}

.offer-modal-actions .btn-primary,
.offer-modal-actions .btn-secondary {
  flex: 1;
  text-align: center;
}

.offer-modal-actions .btn-primary:disabled,
.offer-modal-actions .btn-secondary:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ---------- Gallery ---------- */

.gallery h2 {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 28px;
  color: var(--text);
  margin: 0 0 12px;
}

.gallery > p {
  font-size: 15px;
  color: var(--text-muted);
  margin: 0 0 28px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.gallery-grid .img-placeholder {
  min-height: 160px;
}

.car-carousel-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Location photos (Around the shop). Two photos side by side, evenly matched:
   a shared aspect-ratio + object-fit: cover keeps both frames the same size
   and neatly fills them without cropping edges arbitrarily, and there is no
   transform/scale here — that was previously pushing the image content past
   its own rounded corners into the neighboring grid cell, which is what was
   making the pair look off. */
.location-grid {
  grid-template-columns: repeat(2, 1fr);
}

.LocationPhoto {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 20px;
}

/* ---------- CTA ---------- */

.cta {
  text-align: left;
  padding-bottom: 96px;
}

.cta h2 {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 26px;
  color: var(--text);
  margin: 0 0 10px;
}

.cta p {
  font-size: 15px;
  color: var(--text-muted);
  margin: 0 0 24px;
}

.cta-buttons {
  display: flex;
  gap: 12px;
}

.btn-primary {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #16181c;
  background: var(--accent);
  border: none;
  padding: 12px 22px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  border-radius: 15px;
}

.btn-primary:hover {
  background: #d69a4d;
}

.btn-secondary {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: none;
  border: 1px solid var(--border);
  padding: 12px 22px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  border-radius: 15px;
}

.btn-secondary:hover {
  border-color: rgba(255, 255, 255, 0.25);
}

/* ---------- Footer (every page) ---------- */

.site-footer {
  background: #101114;
  border-top: 1px solid var(--border);
  padding: 48px 28px 28px;
}

.footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}

.footer-brand-name {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--text);
  letter-spacing: 0.3px;
  display: block;
}

.footer-tagline {
  font-size: 14px;
  color: var(--text-muted);
  margin: 6px 0 0;
  max-width: 420px;
}

.footer-contact-btn {
  flex-shrink: 0;
}

.footer-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.footer-aux-btn {
  padding: 10px 16px;
  font-size: 13px;
}

.footer-bottom {
  max-width: 1120px;
  margin: 20px auto 0;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

@media (max-width: 560px) {
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

/* ---------- Contact page ---------- */

.contact-form {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 40px 0 96px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: var(--text-muted);
}

.form-field input,
.form-field textarea {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}

.form-field textarea {
  resize: vertical;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.contact-form .btn-primary {
  align-self: flex-start;
  border: none;
}

/* ---------- Service Your Car form ---------- */

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-field select {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}

.form-field select:focus {
  outline: none;
  border-color: var(--accent);
}

.form-field input[type="file"] {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 14px;
}

/* Date & time pickers: .picker-field wraps each native input with its own
   orange "Choose" button (see serviceYourCarPage.html + main.js) so opening
   the picker doesn't depend on spotting the browser's own tiny, often
   near-invisible calendar/clock icon — that icon is hidden below and the
   button fully replaces it as the one clear affordance, sized/styled to
   match the input's own height instead of overflowing it. color-scheme
   still themes the native popup itself (the calendar grid / time list) for
   Firefox/Safari dark mode once it opens. */
.picker-field {
  position: relative;
  display: flex;
}

.picker-field input[type="date"],
.picker-field input[type="time"] {
  flex: 1;
  min-width: 0;
  padding-right: 96px;
  color-scheme: dark;
}

.picker-field input[type="date"]::-webkit-calendar-picker-indicator,
.picker-field input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 0;
}

.picker-choose-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #16181c;
  background: var(--accent);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.picker-choose-btn:hover {
  background: #d69a4d;
}

.picker-choose-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* Visually hidden but still focusable/functional — used for the real file
   input behind the "+ Add photos" button (see .photo-upload-field below). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Service form: photo upload tray ----------
   Small removable thumbnail tiles instead of the browser's plain
   "3 files selected" text. See service-page.js for the add/remove logic. */

.photo-upload-control {
  display: flex;
}

.photo-upload-hint {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

.photo-preview-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.photo-preview-grid:not(:empty) {
  margin-top: 2px;
}

.photo-preview-tile {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.photo-preview-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-remove-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.photo-remove-btn:hover {
  background: rgba(0, 0, 0, 0.85);
}

.form-section-label {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: var(--text);
  margin: 8px 0 -4px;
}

.review-summary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.8;
}

.review-summary strong {
  color: var(--text);
}

.review-summary .empty-note {
  color: var(--text-muted);
  font-style: italic;
  margin: 0;
}

.booking-disclaimer {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
  max-width: 480px;
}

/* Banner under the Service page intro, pointing bigger/unusual jobs at
   Contact Us instead of trying to force them through the booking form. */
.service-cta-banner {
  margin-top: 20px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.service-cta-subtext {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}

/* ---------- Auth / login page ---------- */

.auth-card {
  max-width: 420px;
  padding: 32px 0 96px;
}

.google-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.google-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
  color: var(--text-muted);
  font-size: 13px;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.auth-card .contact-form {
  padding: 0;
  gap: 16px;
}

.auth-error {
  margin: 0;
  font-size: 13px;
  color: #f14242;
  min-height: 1em;
}

.auth-toggle {
  margin: 20px 0 0;
  font-size: 14px;
  color: var(--text-muted);
}

.auth-toggle .link-btn {
  margin-left: 6px;
}

/* ---------- My Requests / Review Requests ---------- */

.requests-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 0 96px;
}

.no-requests {
  padding: 80px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 24px;
}

.request-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}

.request-card-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: 'Inter', sans-serif;
}

.request-card-title {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 17px;
  color: var(--text);
}

.request-card-meta {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-muted);
}

.request-status-badge {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.request-status-pending {
  background: var(--accent-soft);
  color: var(--accent);
}

.request-status-approved {
  background: rgba(66, 173, 99, 0.16);
  color: #4cc47a;
}

.request-status-declined {
  background: rgba(241, 66, 66, 0.14);
  color: #f14242;
}

.request-status-completed {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
}

.request-card-body {
  padding: 0 20px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.request-details {
  padding-top: 16px;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
}

.request-details p {
  margin: 0 0 4px;
}

.request-details strong {
  color: var(--text);
}

.request-status-field {
  max-width: 220px;
}

/* ---------- Request photo thumbnails + lightbox ----------
   Small, space-efficient thumbnails for photos attached to a service
   request (My Requests / Review Requests) — click one to enlarge it in a
   shared lightbox overlay. See requests-ui.js for the render/open logic. */

.request-photos {
  padding-top: 2px;
}

.request-photos-label {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.request-photo-zoom-hint {
  font-weight: 500;
  color: var(--text-muted);
}

.request-photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.request-photo-tile {
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--bg);
  flex-shrink: 0;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.request-photo-tile:hover,
.request-photo-tile:focus-visible {
  transform: scale(1.06);
  border-color: var(--accent);
}

.request-photo-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  z-index: 300;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

.photo-lightbox-overlay.open {
  display: flex;
}

.photo-lightbox-box {
  position: relative;
  max-width: 92vw;
  max-height: 88vh;
}

.photo-lightbox-img {
  display: block;
  max-width: 92vw;
  max-height: 88vh;
  border-radius: 10px;
  object-fit: contain;
}

.photo-lightbox-close {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.photo-lightbox-close:hover {
  color: var(--accent);
}

.request-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
}

.message-bubble {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
}

.message-bubble p {
  margin: 2px 0 0;
}

.message-sender {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  opacity: 0.7;
}

.message-theirs {
  align-self: flex-start;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
}

.message-mine {
  align-self: flex-end;
  background: var(--accent-soft);
  color: var(--text);
}

.request-message-form {
  display: flex;
  gap: 10px;
}

.request-message-input {
  flex: 1;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
}

.request-message-input:focus {
  outline: none;
  border-color: var(--accent);
}

.request-message-form .btn-primary {
  flex-shrink: 0;
  padding: 10px 18px;
}

/* ---------- Responsive ---------- */

@media (max-width: 780px) {
  .story {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .offering-grid {
    grid-template-columns: 1fr;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .reviews-grid {
    columns: 2 200px;
  }

  .car-grid {
    grid-template-columns: 1fr;
  }

  .hero h1 {
    font-size: 32px;
  }
}

/* Mobile-only: move the Buy a Car / Service Your Car widgets (.offerings)
   up between the hero and Our Story, so they're reachable right away
   without scrolling past the story section first. iPad and desktop keep the
   original document order — this only takes effect at phone widths, and
   only on the home page (.page:has(> .hero) scopes it to pages that
   actually have a hero section as a direct child of .page, so it can never
   affect Contact / Service / Buy / My Requests, which don't). */
@media (max-width: 560px) {
  .page:has(> .hero) {
    display: flex;
    flex-direction: column;
  }

  .hero { order: 1; }
  .offerings { order: 2; }
  .story { order: 3; }
  .reviews { order: 4; }
  .gallery { order: 5; }
  .cta { order: 6; }
}

@media (max-width: 480px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .location-grid {
    grid-template-columns: 1fr;
  }

  .reviews-grid {
    columns: 1;
  }

  .cta-buttons {
    flex-direction: column;
  }

  .car-card-actions {
    flex-direction: column;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .service-cta-banner {
    flex-direction: column;
    align-items: flex-start;
  }

  .message-bubble {
    max-width: 92%;
  }
}

/* ---------- Legal pages (Privacy Policy / Terms & Conditions) ---------- */

.legal-switch {
  margin-top: 20px;
  margin-bottom: 25px;
}

.legal-content {
  max-width: 720px;
  padding: 8px 0 96px;
}

.legal-content h2 {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: var(--text);
  margin: 32px 0 12px;
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0 0 4px;
}

.legal-content a {
  color: var(--accent);
}

/* ---------- misc ---------- */

.premier {
  color: #f14242;
  font-family: 'Inter', bold;
}

.OLD-PRICE {
  text-decoration: line-through;
  color: #949292;
}

.SOLD-PRICE {
  color: #f0f0f0;
}

.highPriorityText{
  padding-bottom: 15px;
  font-family: 'Oswald', bold;
}

.PlaceholderCarBrandIcon {
  width: 40px;
  height: auto;
}

/* ---------- Terms & Conditions checkbox line ---------- */

.terms-field {
  gap: 0;
  padding-bottom: 20px;
}

.terms-check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-muted);
}

.terms-check-row input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.terms-check-row a {
  color: var(--accent);
}