/* ==========================================================================
   ROLLING WHEELS WORKSHOP (RWS) - AUTOMOTIVE & MOTORCYCLE DETAILING STYLES
   Design System: Precision Dark Garage + Motorcycle Tire Tread Aesthetics
   Typography: Be Vietnam Pro (Flawless Vietnamese) + Oswald / Barlow Condensed
   NO FAKE NEON GLOWS • 100% PROFESSIONAL AUTOMOTIVE CRAFTSMANSHIP
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;0,700;1,600&family=Be+Vietnam+Pro:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Oswald:wght@500;600;700&display=swap');

:root {
  /* Automotive Palette */
  --bg-asphalt: #0e0f12;
  --bg-garage: #14161a;
  --bg-card: #1b1d23;
  --bg-card-hover: #22252d;
  --bg-input: #121317;
  
  --border-metal: #282b34;
  --border-metal-light: #383c48;
  --border-active: #d32f2f;
  
  --red-racing: #d32f2f;
  --red-dark: #991b1b;
  --red-light: #ef4444;
  
  --text-white: #ffffff;
  --text-silver: #cbd5e1;
  --text-muted: #818898;
  
  --font-heading: 'Barlow Condensed', 'Be Vietnam Pro', sans-serif;
  --font-body: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Global Reset & Typography */
html {
  font-family: var(--font-body);
  background-color: var(--bg-asphalt);
  color: var(--text-silver);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  max-width: 100%;
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-asphalt);
  color: var(--text-silver);
  line-height: 1.45;
  max-width: 100%;
  width: 100%;
  overflow-x: clip;
  position: relative;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: var(--font-heading);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.font-condensed {
  font-family: 'Barlow Condensed', sans-serif;
}

/* Precision Garage Container */
.garage-container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px) {
  .garage-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .garage-container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* ==========================================================================
   MOTORCYCLE TIRE TREAD & MECHANICAL TEXTURES
   ========================================================================== */

/* Tire Tread Background Pattern (Subtle Motorcycle Sipes) */
.bg-tire-pattern {
  background-color: var(--bg-asphalt);
  background-image: 
    radial-gradient(ellipse at 50% 0%, rgba(211, 47, 47, 0.08) 0%, transparent 60%),
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.015) 0px,
      rgba(255, 255, 255, 0.015) 2px,
      transparent 2px,
      transparent 12px
    ),
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.015) 0px,
      rgba(255, 255, 255, 0.015) 2px,
      transparent 2px,
      transparent 12px
    );
}

/* Asphalt Grain Texture */
.bg-asphalt-grain {
  background-color: var(--bg-garage);
  background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 0);
  background-size: 20px 20px;
}

/* Tire Tread Horizontal Divider */
.tire-tread-divider {
  height: 14px;
  width: 100%;
  background-image: repeating-linear-gradient(
    65deg,
    var(--border-metal) 0px,
    var(--border-metal) 6px,
    transparent 6px,
    transparent 16px
  );
  opacity: 0.6;
}

.tire-tread-divider-red {
  height: 4px;
  width: 100%;
  background-image: repeating-linear-gradient(
    65deg,
    var(--red-racing) 0px,
    var(--red-racing) 8px,
    transparent 8px,
    transparent 14px
  );
}

/* Precision Mechanical Card (Zero Neo, Solid Machined Edge) */
.mech-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-metal);
  border-radius: 10px;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.mech-card:hover {
  background-color: var(--bg-card-hover);
  border-color: var(--border-metal-light);
}

.mech-card-active {
  background-color: rgba(211, 47, 47, 0.08);
  border: 2px solid var(--red-racing);
  position: relative;
}

.category-card.mech-card-active .w-10,
.category-card.mech-card-active svg {
  color: var(--red-racing);
  transition: color 0.2s ease;
}

/* Racing Stripe Corner Notch */
.racing-corner {
  position: relative;
  overflow: hidden;
}
.racing-corner::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 24px 24px 0;
  border-color: transparent var(--red-racing) transparent transparent;
}

/* Form Controls - Precision Machined */
.garage-input {
  background-color: var(--bg-input);
  border: 1px solid var(--border-metal);
  color: var(--text-white);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  transition: border-color 0.2s ease;
  width: 100%;
}

.garage-input:focus {
  outline: none;
  border-color: var(--red-racing);
}

.garage-select {
  background-color: var(--bg-input);
  border: 1px solid var(--border-metal);
  color: var(--text-white);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  transition: border-color 0.2s ease;
  width: 100%;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}

.garage-select:focus {
  outline: none;
  border-color: var(--red-racing);
}

/* Primary Racing Buttons */
.btn-racing {
  background-color: var(--red-racing);
  color: #ffffff;
  font-family: var(--font-heading);
  letter-spacing: 0.015em;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.8125rem;
  padding: 0.6rem 1.15rem;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.1s ease;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-racing:hover {
  background-color: var(--red-racing-hover);
}

.btn-racing:active {
  transform: translateY(1px);
}

.btn-metal {
  background-color: var(--bg-card);
  color: var(--text-white);
  font-family: var(--font-heading);
  letter-spacing: 0.015em;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.8125rem;
  padding: 0.6rem 1.15rem;
  border-radius: 8px;
  border: 1px solid var(--border-metal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}

.btn-metal:hover {
  background-color: var(--bg-card-hover);
  border-color: var(--border-metal-light);
}

/* Badge Mechanical */
.mech-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  white-space: nowrap;
  background-color: #1f2229;
  border: 1px solid var(--border-metal);
  color: var(--text-silver);
}

.mech-badge-red {
  background-color: rgba(211, 47, 47, 0.12);
  border-color: rgba(211, 47, 47, 0.4);
  color: #fca5a5;
}

.mech-badge-green {
  background-color: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.4);
  color: #6ee7b7;
}

.mech-badge-amber {
  background-color: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fcd34d;
}

/* Global Proportional Icon Controls (Prevent Oversized Icons) */
.btn-racing svg, .btn-racing i,
.btn-metal svg, .btn-metal i,
.btn-quick-status svg, .btn-quick-status i,
.nav-tab-btn svg, .nav-tab-btn i,
.admin-tab-btn svg, .admin-tab-btn i {
  width: 0.875rem !important; /* 14px */
  height: 0.875rem !important;
  flex-shrink: 0;
}

.mech-badge svg, .mech-badge i {
  width: 0.75rem !important; /* 12px */
  height: 0.75rem !important;
  flex-shrink: 0;
}

/* Text Wrapping Guard Utility */
.no-wrap {
  white-space: nowrap !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-asphalt);
}
::-webkit-scrollbar-thumb {
  background: var(--border-metal);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--border-metal-light);
}

/* ==========================================================================
   MOBILE APP EDITION OVERRIDES (< 768px & mobile.html)
   Eliminates desktop Hero clutter and shows the 4-Step Mobile Wizard at top
   ========================================================================== */
@media (max-width: 767.98px) {
  body > div.bg-zinc-950.border-b,
  section.pt-6.pb-10,
  #booking-flow > div > div.text-center.max-w-2xl {
    display: none !important;
  }
  #booking-flow {
    padding-top: 0.75rem !important;
    padding-bottom: 7.5rem !important;
  }
}

body[data-device-edition="mobile"] > div.bg-zinc-950.border-b,
body[data-device-edition="mobile"] section.pt-6.pb-10,
body[data-device-edition="mobile"] #booking-flow > div > div.text-center.max-w-2xl {
  display: none !important;
}

body[data-device-edition="mobile"] #booking-flow {
  padding-top: 0.75rem !important;
  padding-bottom: 7.5rem !important;
}

/* ==========================================================================
   MODAL DIALOG LAYOUT & BACKGROUND SCROLL LOCK (Zero Overflow / Zero Clipping)
   ========================================================================== */
html.modal-open,
body.modal-open {
  overflow: hidden !important;
  height: 100vh !important;
  height: 100dvh !important;
  touch-action: none !important;
  -webkit-overflow-scrolling: auto !important;
}

/* Modals sit strictly above all navigation bars (z-50) and sticky widgets */
#auth-modal,
#member-profile-modal,
#deal-modal,
#price-image-modal,
#modal-admin-auth {
  z-index: 100 !important;
  overscroll-behavior: contain !important;
}

/* Scrollable container inside modal card */
.modal-scroll-body {
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

/* Ensure bottom buttons inside modal are never clipped by mobile viewports */
.modal-sticky-footer {
  position: sticky;
  bottom: 0;
  background-color: #18181b; /* zinc-900 */
  z-index: 20;
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}

/* ==========================================================================
   STICKY BOOKING SUMMARY (Follows user smoothly all the way to Step 4)
   ========================================================================== */
@media (min-width: 1024px) {
  #booking-summary-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 5.5rem;
    z-index: 30;
    transition: top 0.2s ease-out;
  }
}

/* ==========================================================================
   HORIZONTAL RUNNING REVIEWS CAROUSEL (Dạng ngang chạy đánh giá, no vertical bloat)
   ========================================================================== */
#feedbacks-stream-container {
  scrollbar-width: thin;
  scrollbar-color: #3f3f46 transparent;
}
#feedbacks-stream-container::-webkit-scrollbar {
  height: 6px;
}
#feedbacks-stream-container::-webkit-scrollbar-track {
  background: rgba(24, 24, 27, 0.6);
  border-radius: 9999px;
}
#feedbacks-stream-container::-webkit-scrollbar-thumb {
  background: #3f3f46;
  border-radius: 9999px;
}
#feedbacks-stream-container::-webkit-scrollbar-thumb:hover {
  background: #ef4444;
}