@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap');

/* ==========================================================================
   1. Brand Token System & V2 Base Setup
   ========================================================================== */
:root {
  --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  --border-radius-sm: 6px;
  --border-radius-md: 12px;
  --border-radius-lg: 18px;
  --font-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: 'Cormorant Garamond', Georgia, serif;

  /* Gloza Redesign V2 Color System (Cool Lavender-Mist & Clean Contrasts) */
  --v2-bg: #F7F6FB;           /* Cool Lavender-Mist Alabaster */
  --v2-surface: #FFFFFF;      /* Crisp Pure White for cards/forms */
  --v2-surface-alt: #EFEEF5;  /* Secondary background panels */
  
  --v2-text-dark: #1E1E24;    /* Slate-charcoal for high-end text readability */
  --v2-text-muted: #626070;   /* Muted gray for secondary descriptions */
  --v2-text-light: #908E9E;   /* Light gray placeholder indicators */
  
  --v2-border: #E6E5EC;       /* Thin, light border lines */
  
  /* Primary Action Accents */
  --v2-cobalt: #2563EB;       /* Strong professional B2B primary & trust accent */
  --v2-cobalt-hover: #1D4ED8;
  --v2-cobalt-light: rgba(37, 99, 235, 0.06);

  --v2-terracotta: #D96B43;   /* Rich warm B2C primary / Booking highlights */
  --v2-terracotta-hover: #C85A32;
  --v2-terracotta-light: rgba(217, 107, 67, 0.06);
  
  --v2-emerald: #10B981;      /* Success and online badges */
  --v2-emerald-light: rgba(16, 185, 129, 0.08);

  --v2-gold: #F59E0B;         /* Star rating systems */

  /* Shadows */
  --v2-shadow-sm: 0 2px 8px rgba(30, 30, 36, 0.03);
  --v2-shadow-md: 0 4px 16px rgba(30, 30, 36, 0.05);
  --v2-shadow-lg: 0 12px 32px rgba(30, 30, 36, 0.08);
}

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

body {
  font-family: var(--font-sans);
  background-color: var(--v2-bg);
  color: var(--v2-text-dark);
  overflow-x: hidden;
  line-height: 1.5;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  transition: var(--transition-smooth);
}

/* Typography styles */
h1, h2, h3 {
  color: var(--v2-text-dark);
  font-weight: 600;
}

.font-serif {
  font-family: var(--font-serif);
}

/* ==========================================================================
   2. Global Components
   ========================================================================== */

/* Navbar V2 */
.navbar-v2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 8%;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--v2-border);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: var(--transition-smooth);
}

.logo-v2 {
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-serif);
  letter-spacing: 0.15em;
  color: var(--v2-text-dark);
}

.logo-v2 span {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 0.8rem;
  background: var(--v2-cobalt);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: var(--border-radius-sm);
  letter-spacing: 0.05em;
  margin-left: 0.2rem;
}

.nav-links-v2 {
  display: flex;
  gap: 2.2rem;
  list-style: none;
  align-items: center;
}

.nav-link-v2 {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--v2-text-muted);
}

.nav-link-v2:hover {
  color: var(--v2-cobalt);
}

.nav-btn-v2 {
  padding: 0.55rem 1.25rem;
  border-radius: 30px;
  font-weight: 600;
  font-size: 0.85rem;
}

.nav-btn-v2.primary {
  background-color: var(--v2-cobalt);
  color: white;
}

.nav-btn-v2.primary:hover {
  background-color: var(--v2-cobalt-hover);
  transform: translateY(-1px);
}

.nav-btn-v2.secondary {
  border: 1px solid var(--v2-border);
  color: var(--v2-text-dark);
}

.nav-btn-v2.secondary:hover {
  background-color: var(--v2-surface-alt);
}

.nav-toggle-v2 {
  padding: 0.5rem 1.1rem;
  border-radius: var(--border-radius-sm);
  font-size: 0.8rem;
  font-weight: 700;
  border: 1px solid var(--v2-terracotta);
  color: var(--v2-terracotta);
}

.nav-toggle-v2:hover {
  background-color: var(--v2-terracotta);
  color: white;
}

/* Mobile-browser nav (explore marketplace only) — profile icon + hamburger.
   Hidden by default (desktop keeps nav-links-v2 + nav-buttons); shown ≤768px,
   scoped to #gz-market so list-business / vendor / booking navbars are unaffected. */
.gz-mobile-nav { display: none; position: relative; }
.gz-mnav-icon {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--v2-surface); border: 1px solid var(--v2-border);
  color: var(--v2-text-dark); font-size: 1rem; cursor: pointer;
  transition: var(--transition-smooth);
}
.gz-mnav-icon:hover { border-color: var(--v2-terracotta); color: var(--v2-terracotta); }
.gz-mnav-initial {
  width: 100%; height: 100%; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--v2-terracotta); color: #fff; font-weight: 700; font-size: 0.9rem;
}
.gz-mnav-backdrop { position: fixed; inset: 0; z-index: 150; }
.gz-mnav-sheet {
  position: absolute; top: calc(100% + 10px); right: 0;
  background: var(--v2-surface); border: 1px solid var(--v2-border);
  border-radius: 14px; box-shadow: var(--v2-shadow-lg);
  padding: 0.5rem; min-width: 210px; z-index: 200;
  display: flex; flex-direction: column; gap: 0.2rem;
}
.gz-mnav-sheet a {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.7rem 0.85rem; border-radius: 10px;
  font-size: 0.9rem; font-weight: 600; color: var(--v2-text-dark);
}
.gz-mnav-sheet a:hover { background: var(--v2-bg); color: var(--v2-terracotta); }
.gz-mnav-sheet a i { color: var(--v2-terracotta); width: 18px; text-align: center; }

/* Mobile APP (TWA) 3-column header: location · centered logo · profile */
.gz-app-nav { display: none; width: 100%; }
.gz-app-loc {
  display: flex; align-items: center; gap: 0.4rem; justify-self: start;
  background: none; border: none; cursor: pointer;
  /* 44px+ touch target without growing the navbar: pad out, pull back with
     negative margins so the visual position is unchanged. */
  padding: 0.7rem 0.6rem; margin: -0.7rem -0.6rem; min-height: 44px;
  font-size: 0.85rem; font-weight: 600; color: var(--v2-text-dark); max-width: 38vw;
}
.gz-app-loc i:first-child { color: var(--v2-terracotta); }
.gz-app-loc-city { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gz-app-logo { justify-self: center; }

@media (max-width: 768px) {
  #gz-market .nav-links-v2,
  #gz-market .nav-buttons,
  .gz-market-nav .nav-links-v2,
  .gz-market-nav .nav-buttons { display: none !important; }
  #gz-market .gz-mobile-nav,
  .gz-market-nav .gz-mobile-nav { display: flex !important; }
  /* Mobile (app + browser): show the 3-col header (location chip · centered
     logo · right icons), hide the default left logo. The 3-col header renders
     its own .gz-app-logo, so the desktop logo must go in BOTH modes. */
  #gz-market .gz-app-nav,
  .gz-market-nav .gz-app-nav { display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 0.6rem; }
  /* Wordmark only in the centered mobile lockup — the "Book" pill makes the
     logo ~182px wide, leaving the location chip flush against it (1px gap
     measured @412px). Hiding the pill frees ~52px of breathing room. */
  #gz-market .gz-app-logo span,
  .gz-market-nav .gz-app-logo span { display: none !important; }
  #gz-market .navbar-v2 > .logo-v2,
  .gz-market-nav.navbar-v2 > .logo-v2 { display: none !important; }
  /* Fit chip + centered logo + two right icons on a 360px phone: tighter
     navbar padding and 36px icons (browser mode has profile + hamburger;
     at 8% padding the hamburger clips offscreen — measured right=382 @360). */
  #gz-market .navbar-v2,
  .gz-market-nav.navbar-v2 { padding: 1rem 4%; }
  #gz-market .gz-app-nav .gz-mnav-icon,
  .gz-market-nav .gz-app-nav .gz-mnav-icon { width: 36px; height: 36px; font-size: 0.9rem; }

  /* /list-business merchant header — same mobile collapse, no location chip /
     profile. Keeps the "OS" pill in the centered lockup (left column is an
     empty spacer, so width isn't contested like the marketplace chip case). */
  #gz-listbiz .nav-links-v2,
  #gz-listbiz .nav-buttons { display: none !important; }
  #gz-listbiz .gz-mobile-nav { display: flex !important; }
  #gz-listbiz .gz-app-nav { display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 0.6rem; }
  #gz-listbiz .navbar-v2 > .logo-v2 { display: none !important; }
  #gz-listbiz .navbar-v2 { padding: 1rem 4%; }
  #gz-listbiz .gz-app-nav .gz-mnav-icon { width: 36px; height: 36px; font-size: 0.9rem; }
}

/* ==========================================================================
   3. Visual Category System (Images)
   ========================================================================== */
.categories-container-v2 {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
  margin: 2rem 0 3.5rem 0;
  padding: 0 1rem;
}

.category-item-v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  width: 90px;
}

.category-image-wrapper-v2 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--v2-surface);
  background-color: var(--v2-surface-alt);
  box-shadow: var(--v2-shadow-md);
  transition: var(--transition-smooth);
}

.category-image-wrapper-v2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-label-v2 {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--v2-text-muted);
  margin-top: 0.75rem;
  text-align: center;
  transition: var(--transition-smooth);
}

.category-item-v2:hover .category-image-wrapper-v2 {
  border-color: var(--v2-terracotta);
  transform: translateY(-4px) scale(1.03);
  box-shadow: var(--v2-shadow-lg);
}

.category-item-v2:hover .category-label-v2 {
  color: var(--v2-text-dark);
}

.category-item-v2.active .category-image-wrapper-v2 {
  border-color: var(--v2-terracotta);
  box-shadow: 0 0 0 3px var(--v2-terracotta-light);
}

.category-item-v2.active .category-label-v2 {
  color: var(--v2-terracotta);
  font-weight: 700;
}

/* ==========================================================================
   4. Compact Salon Card List Grid
   ========================================================================== */
.marketplace-grid-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 290px)); /* Compact — capped so cards don't stretch wide */
  justify-content: center; /* center columns since they no longer fill the row */
  gap: 2rem;
  padding: 0 8%;
  margin-bottom: 5rem;
}

.salon-card-v2 {
  background-color: var(--v2-surface);
  border-radius: var(--border-radius-md);
  border: 1px solid var(--v2-border);
  overflow: hidden;
  box-shadow: var(--v2-shadow-sm);
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
}

.salon-card-v2:hover {
  transform: translateY(-5px);
  box-shadow: var(--v2-shadow-lg);
}

.card-img-wrapper-v2 {
  height: 155px; /* Compact height */
  width: 100%;
  position: relative;
  background-color: var(--v2-surface-alt);
}

.card-img-v2 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-badge-v2 {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 0.25rem 0.6rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--v2-text-dark);
  box-shadow: var(--v2-shadow-sm);
}

.card-body-v2 {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-meta-v2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.4rem;
}

.card-type-v2 {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--v2-text-light);
  letter-spacing: 0.5px;
}

.card-rating-v2 {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--v2-gold);
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.card-name-v2 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--v2-text-dark);
  margin-bottom: 0.25rem;
  line-height: 1.3;
}

.card-address-v2 {
  font-size: 0.75rem;
  color: var(--v2-text-muted);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.card-footer-v2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--v2-border);
  padding-top: 1rem;
  margin-top: auto;
}

.card-price-v2 {
  font-size: 0.8rem;
  color: var(--v2-text-muted);
}

.card-price-v2 span {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--v2-text-dark);
}

.card-btn-v2 {
  background-color: var(--v2-terracotta);
  color: white;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.45rem 1rem;
}

.card-btn-v2:hover {
  background-color: var(--v2-terracotta-hover);
  transform: scale(1.02);
}

/* ==========================================================================
   5. Authentication Pages (Login & Signup)
   ========================================================================== */
.auth-wrapper {
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
}

.auth-card {
  background-color: var(--v2-surface);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--v2-border);
  box-shadow: var(--v2-shadow-lg);
  width: 100%;
  max-width: 460px;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
}

.auth-header {
  text-align: center;
  margin-bottom: 2rem;
}

.auth-logo {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--v2-text-dark);
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}

.auth-logo span {
  color: var(--v2-cobalt);
  font-family: var(--font-sans);
  font-size: 0.9rem;
}

.auth-subtitle {
  font-size: 0.9rem;
  color: var(--v2-text-muted);
}

.auth-tabs {
  display: flex;
  border-bottom: 1px solid var(--v2-border);
  margin-bottom: 2rem;
}

.auth-tab {
  flex: 1;
  text-align: center;
  padding: 0.75rem 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--v2-text-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.auth-tab.active {
  color: var(--v2-cobalt);
  border-color: var(--v2-cobalt);
}

.form-group-v2 {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.25rem;
}

.form-group-v2 label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--v2-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.4rem;
}

.form-group-v2 input, .form-group-v2 select {
  width: 100%;
  height: 44px;
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--v2-border);
  padding: 0 1rem;
  font-size: 0.9rem;
  color: var(--v2-text-dark);
  background-color: var(--v2-surface);
  outline: none;
  font-family: inherit;
  transition: var(--transition-smooth);
}

.form-group-v2 input:focus, .form-group-v2 select:focus {
  border-color: var(--v2-cobalt);
  box-shadow: 0 0 0 3px var(--v2-cobalt-light);
}

.auth-checkbox-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  font-size: 0.85rem;
}

.auth-checkbox-group label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--v2-text-muted);
  cursor: pointer;
}

.auth-checkbox-group a {
  color: var(--v2-cobalt);
  font-weight: 600;
}

.auth-checkbox-group a:hover {
  text-decoration: underline;
}

.auth-btn-submit {
  width: 100%;
  height: 48px;
  background-color: var(--v2-cobalt);
  color: white;
  border-radius: var(--border-radius-sm);
  font-size: 0.95rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--v2-shadow-sm);
  margin-bottom: 1.5rem;
}

.auth-btn-submit:hover {
  background-color: var(--v2-cobalt-hover);
  transform: translateY(-1px);
}

.auth-footer {
  text-align: center;
  font-size: 0.85rem;
  color: var(--v2-text-muted);
}

.auth-footer a {
  color: var(--v2-cobalt);
  font-weight: 700;
}

.auth-footer a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   6. List Your Business Merchant Landing Form (V2)
   ========================================================================== */
.list-biz-hero {
  padding: 5rem 8% 4rem 8%;
  text-align: center;
  background: radial-gradient(circle at 50% 10%, #FFFFFF 0%, var(--v2-bg) 100%);
  border-bottom: 1px solid var(--v2-border);
}

.list-biz-title {
  font-size: 3rem;
  font-family: var(--font-serif);
  line-height: 1.15;
  margin-bottom: 1.25rem;
}

.list-biz-desc {
  max-width: 700px;
  margin: 0 auto;
  font-size: 1.1rem;
  color: var(--v2-text-muted);
}

.list-biz-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  padding: 4rem 8%;
  gap: 4rem;
  align-items: flex-start;
}

@media (max-width: 968px) {
  .list-biz-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 3rem 5%;
  }
}

.merchant-form-wrapper {
  background-color: var(--v2-surface);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--v2-border);
  box-shadow: var(--v2-shadow-lg);
  padding: 3rem;
}

.merchant-features-col {
  padding-top: 1rem;
}

.merchant-feature-item {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 2.25rem;
}

.merchant-feature-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--border-radius-sm);
  background-color: var(--v2-cobalt-light);
  color: var(--v2-cobalt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.merchant-feature-details h4 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: var(--v2-text-dark);
}

.merchant-feature-details p {
  font-size: 0.9rem;
  color: var(--v2-text-muted);
  line-height: 1.5;
}

.merchant-success {
  display: none;
  text-align: center;
  padding: 2.5rem 1rem;
}

.merchant-success.active {
  display: block;
}

/* ==========================================================================
   7. Form/Field Helpers
   ========================================================================== */
.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 480px) {
  .form-row-2 {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* ==========================================================================
   8. B2C Salon Profile Page Layouts
   ========================================================================== */
.profile-container {
  padding: 3rem 8%;
  max-width: 1400px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .profile-container {
    padding: 2rem 5%;
  }
}

.profile-header {
  margin-bottom: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

@media (max-width: 768px) {
  .profile-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

.profile-title-area h1 {
  font-family: var(--font-serif);
  font-size: 2.8rem;
  color: var(--v2-text-dark);
  line-height: 1.1;
  margin-bottom: 0.5rem;
}

.profile-meta-row {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  font-size: 0.9rem;
  color: var(--v2-text-muted);
}

.profile-meta-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.profile-meta-item i {
  color: var(--v2-terracotta);
}

/* Slideshow Carousel Container */
.profile-slideshow-wrapper {
  position: relative;
  width: 100%;
  height: 320px; /* Compact height */
  overflow: hidden;
  margin-bottom: 2rem;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--v2-shadow-md);
}

@media (max-width: 768px) {
  .profile-slideshow-wrapper {
    height: 190px;
    border-radius: 0;
  }
}

.profile-slideshow-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  z-index: 1;
}

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

.profile-slideshow-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Curved divider overlay at the bottom of the slideshow */
.slideshow-curve-overlay {
  position: absolute;
  bottom: -2px; /* overlap slightly to prevent seam lines */
  left: 0;
  width: 100%;
  height: 45px;
  z-index: 5;
  pointer-events: none;
}

.slideshow-curve-svg {
  width: 100%;
  height: 100%;
  fill: var(--v2-bg);
}

/* B2C Initial view Categories Grid with photos (Image 1 style) */
.category-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 150px));
  justify-content: start; /* pack compact cards to the left instead of stretching */
  gap: 1.5rem;
  margin-top: 1.5rem;
  margin-bottom: 3rem;
}

@media (max-width: 480px) {
  .category-photo-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
  }
}

.category-photo-card {
  background-color: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: var(--border-radius-md);
  padding: 1.25rem 0.75rem;
  text-align: center;
  box-shadow: var(--v2-shadow-sm);
  cursor: pointer;
  transition: var(--transition-smooth);
}

@media (max-width: 480px) {
  .category-photo-card {
    padding: 0.85rem 0.5rem;
  }
}

.category-photo-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--v2-shadow-lg);
  border-color: var(--v2-terracotta);
}

.category-photo-img-wrapper {
  width: 75px;
  height: 75px;
  border-radius: 16px;
  overflow: hidden;
  margin: 0 auto 0.75rem auto;
  box-shadow: var(--v2-shadow-sm);
  background-color: var(--v2-surface-alt);
}

@media (max-width: 480px) {
  .category-photo-img-wrapper {
    width: 55px;
    height: 55px;
    border-radius: 12px;
  }
}

.category-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-photo-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--v2-text-dark);
  line-height: 1.3;
}

/* Salon Info Card block on Landing Page */
.salon-info-card-desktop {
  background-color: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: var(--border-radius-lg);
  padding: 2.2rem;
  box-shadow: var(--v2-shadow-lg);
}

.salon-info-card-title {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 700;
  color: var(--v2-text-dark);
  margin-bottom: 0.75rem;
}

.salon-info-card-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--v2-emerald);
  background-color: var(--v2-emerald-light);
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  margin-bottom: 1.25rem;
}

.salon-info-card-detail {
  font-size: 0.85rem;
  color: var(--v2-text-muted);
  margin-bottom: 0.85rem;
  line-height: 1.5;
}

.salon-info-card-detail i {
  color: var(--v2-terracotta);
  width: 18px;
}

.salon-info-card-btns {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.salon-info-card-btn-primary {
  background-color: var(--v2-terracotta);
  color: white;
  border: 1px solid var(--v2-terracotta);
  padding: 0.8rem;
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
  transition: var(--transition-smooth);
}

.salon-info-card-btn-primary:hover {
  background-color: var(--v2-terracotta-hover);
  transform: translateY(-2px);
}

.salon-info-card-btn-secondary {
  background-color: var(--v2-surface);
  color: var(--v2-text-dark);
  border: 1px solid var(--v2-border);
  padding: 0.8rem;
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  transition: var(--transition-smooth);
}

.salon-info-card-btn-secondary:hover {
  background-color: var(--v2-surface-alt);
  transform: translateY(-2px);
}

/* SPA View State Toggles */
.spa-view-state {
  display: none;
}

.spa-view-state.active {
  display: block;
}

/* Header Cart Icon button (Mobile Only) */
.header-cart-icon-wrapper {
  position: relative;
  display: none; /* Desktop hidden */
  cursor: pointer;
  padding: 0.5rem;
  color: var(--v2-text-dark);
  font-size: 1.3rem;
}

@media (max-width: 768px) {
  .header-cart-icon-wrapper {
    display: inline-block;
  }
}

.header-cart-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background-color: var(--v2-terracotta);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--v2-shadow-sm);
}

/* Core Layout columns */
.profile-core-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 4rem;
  align-items: flex-start;
}

@media (max-width: 968px) {
  .profile-core-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

/* Menu section */
.menu-nav-tabs {
  display: flex;
  gap: 1.5rem;
  border-bottom: 1px solid var(--v2-border);
  margin-bottom: 2rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.menu-nav-tab {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--v2-text-muted);
  border-bottom: 2px solid transparent;
  padding-bottom: 0.75rem;
  white-space: nowrap;
}

.menu-nav-tab.active {
  color: var(--v2-terracotta);
  border-color: var(--v2-terracotta);
}

.services-list-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 3.5rem;
}

.service-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--v2-border);
}

.service-item-row:last-of-type {
  border-bottom: none;
}

.service-item-details {
  flex-grow: 1;
  padding-right: 2rem;
}

.service-item-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--v2-text-dark);
  margin-bottom: 0.3rem;
}

.service-item-desc {
  font-size: 0.85rem;
  color: var(--v2-text-muted);
  line-height: 1.4;
  margin-bottom: 0.4rem;
}

.service-item-meta {
  font-size: 0.8rem;
  color: var(--v2-text-light);
  font-weight: 600;
}

.service-item-action {
  text-align: right;
  flex-shrink: 0;
}

.service-item-price {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--v2-text-dark);
  margin-bottom: 0.5rem;
}

.service-item-btn {
  background-color: var(--v2-surface);
  border: 1px solid var(--v2-terracotta);
  color: var(--v2-terracotta);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.45rem 1rem;
  border-radius: 20px;
}

.service-item-btn:hover {
  background-color: var(--v2-terracotta);
  color: white;
}

.service-item-btn.added {
  background-color: var(--v2-emerald-light);
  border-color: var(--v2-emerald);
  color: var(--v2-emerald);
}

/* Stylists Section */
.stylist-selection-wrapper {
  margin-top: 1rem;
}

.stylist-roster-flex {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  padding: 0.5rem 0;
  margin-bottom: 2.5rem;
}

.stylist-card-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90px;
  cursor: pointer;
  flex-shrink: 0;
}

.stylist-avatar-wrapper {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid transparent;
  box-shadow: var(--v2-shadow-sm);
  transition: var(--transition-smooth);
}

.stylist-avatar-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stylist-card-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--v2-text-dark);
  margin-top: 0.6rem;
  text-align: center;
}

.stylist-card-specialty {
  font-size: 0.65rem;
  color: var(--v2-text-light);
  text-align: center;
}

.stylist-card-circle:hover .stylist-avatar-wrapper {
  transform: scale(1.05);
  border-color: var(--v2-terracotta);
}

.stylist-card-circle.active .stylist-avatar-wrapper {
  border-color: var(--v2-terracotta);
  box-shadow: 0 0 0 3px var(--v2-terracotta-light);
}

/* Sticky Sidebar checkout style */
.sticky-booking-sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 100px;
  background-color: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: var(--border-radius-lg);
  padding: 2.2rem;
  box-shadow: var(--v2-shadow-lg);
}

.sidebar-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--v2-text-dark);
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--v2-border);
  padding-bottom: 0.75rem;
}

.cart-empty-state {
  color: var(--v2-text-light);
  text-align: center;
  padding: 2rem 0;
  font-size: 0.9rem;
}

.sidebar-cart-items {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.cart-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: var(--v2-text-dark);
}

.cart-item-remove-btn {
  color: var(--v2-text-light);
  font-size: 0.8rem;
  margin-left: 0.5rem;
}

.cart-item-remove-btn:hover {
  color: var(--v2-terracotta);
}

.cart-totals-panel {
  border-top: 1px dashed var(--v2-border);
  padding-top: 1rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--v2-text-muted);
}

.cart-total-row {
  display: flex;
  justify-content: space-between;
}

.cart-total-row.final {
  border-top: 1px solid var(--v2-border);
  padding-top: 0.75rem;
  margin-top: 0.25rem;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--v2-text-dark);
}

/* Booking Options inside sidebar */
.booking-options-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
  border-top: 1px solid var(--v2-border);
  padding-top: 1.25rem;
}

.option-group-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--v2-text-muted);
  margin-bottom: 0.5rem;
}

.chips-scroll-container {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.3rem;
}

.date-chip-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 55px;
  border: 1px solid var(--v2-border);
  border-radius: var(--border-radius-sm);
  background-color: var(--v2-surface);
  cursor: pointer;
  flex-shrink: 0;
}

.date-chip-day {
  font-size: 0.65rem;
  color: var(--v2-text-light);
  font-weight: 600;
}

.date-chip-num {
  font-size: 1rem;
  font-weight: 700;
  color: var(--v2-text-dark);
}

.date-chip-item.active {
  background-color: var(--v2-terracotta-light);
  border-color: var(--v2-terracotta);
}

.date-chip-item.active .date-chip-day, .date-chip-item.active .date-chip-num {
  color: var(--v2-terracotta);
}

.time-chips-grid-select {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.time-chip-item {
  border: 1px solid var(--v2-border);
  border-radius: var(--border-radius-sm);
  background-color: var(--v2-surface);
  padding: 0.4rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--v2-text-dark);
}

.time-chip-item.active {
  background-color: var(--v2-terracotta-light);
  border-color: var(--v2-terracotta);
  color: var(--v2-terracotta);
}

/* Reviews List Styles */
.reviews-section {
  border-top: 1px solid var(--v2-border);
  padding-top: 4rem;
  margin-top: 4rem;
}

.reviews-grid-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2rem;
}

@media (max-width: 768px) {
  .reviews-grid-list {
    grid-template-columns: 1fr;
  }
}

.review-card-item {
  background-color: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: var(--border-radius-md);
  padding: 1.75rem;
  box-shadow: var(--v2-shadow-sm);
}

.review-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--v2-surface-alt);
  color: var(--v2-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
}

.review-card-rating {
  font-size: 0.8rem;
  color: var(--v2-gold);
}

/* Hide sidebar on mobile screen size */
@media (max-width: 768px) {
  .sticky-booking-sidebar {
    display: none !important;
  }
}

/* Mobile Right-Side Drawer Panel Overlay */
.mobile-sheet-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(30, 30, 36, 0.4);
  backdrop-filter: blur(8px);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  display: flex;
  justify-content: flex-end; /* Align to the right edge */
  align-items: stretch;     /* Stretch vertically */
}

.mobile-sheet-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.mobile-sheet-content {
  background-color: var(--v2-surface);
  width: 85%;
  max-width: 420px;
  height: 100%;
  overflow-y: auto;
  padding: 2.2rem;
  box-shadow: -10px 0 30px rgba(0,0,0,0.15);
  transform: translateX(100%); /* Slide from the right */
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.mobile-sheet-overlay.active .mobile-sheet-content {
  transform: translateX(0);
}

.mobile-sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--v2-border);
  padding-bottom: 0.75rem;
}

/* Nesting Variants inside Service Cards styles */
.variants-group-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--v2-text-light);
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.variants-list-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.75rem;
  background: var(--v2-surface-alt);
  padding: 0.85rem 1rem;
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--v2-border);
}

.variant-option-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.03);
}

.variant-option-row:last-of-type {
  border-bottom: none;
}

.variant-option-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--v2-text-dark);
}

.variant-option-input {
  accent-color: var(--v2-terracotta);
  cursor: pointer;
}

.variant-option-price {
  font-weight: 700;
  color: var(--v2-text-dark);
}

.variant-option-duration {
  font-size: 0.75rem;
  color: var(--v2-text-light);
  margin-left: 0.25rem;
}

/* ==========================================================================
   9. Mobile UX Drill-down Refinements
   ========================================================================== */

/* booking main layout for mobile vertical split */
.booking-main-layout {
  display: block;
}

#bookingSearchInput:focus {
  border-color: var(--v2-terracotta);
  box-shadow: 0 0 0 3px var(--v2-terracotta-light);
}

@media (max-width: 768px) {
  .booking-main-layout {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
  }

  .booking-main-layout .categories-container-v2 {
    display: flex !important;
    flex-direction: column !important;
    width: 95px !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: none !important;
    border-right: 1px solid var(--v2-border) !important;
    flex-shrink: 0 !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 90px !important;
    background-color: var(--v2-surface-alt);
    border-radius: var(--border-radius-md);
    overflow: hidden;
  }

  .booking-main-layout .category-item-v2 {
    width: 100% !important;
    padding: 0.85rem 0.25rem !important;
    border-bottom: 1px solid var(--v2-border) !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: transparent !important;
    transition: var(--transition-smooth) !important;
    border-radius: 0 !important;
  }

  /* Show the image wrapper in vertical category menu */
  .booking-main-layout .category-image-wrapper-v2 {
    display: block !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    margin-bottom: 0.35rem !important;
    border: 2px solid var(--v2-surface) !important;
    box-shadow: var(--v2-shadow-sm) !important;
    overflow: hidden !important;
  }

  .booking-main-layout .category-label-v2 {
    font-size: 0.72rem !important;
    margin-top: 0 !important;
    text-align: center !important;
    font-weight: 600 !important;
    color: var(--v2-text-muted) !important;
    line-height: 1.2 !important;
  }

  /* Active state highlight for vertical text tab */
  .booking-main-layout .category-item-v2.active {
    background-color: var(--v2-surface) !important;
    border-left: 3px solid var(--v2-terracotta) !important;
  }

  .booking-main-layout .category-item-v2.active .category-label-v2 {
    color: var(--v2-terracotta) !important;
    font-weight: 700 !important;
  }

  .booking-main-layout .services-list-container {
    flex-grow: 1;
    margin-bottom: 2rem;
    padding-left: 0.5rem;
  }

  /* Hide inline variants wrapper on mobile */
  .booking-main-layout .service-item-row .variants-list-wrapper {
    display: none !important;
  }
  
  /* Hide inline Add Service button on mobile */
  .booking-main-layout .service-item-row .add-btn {
    display: none !important;
  }

  /* Make row clickable */
  .booking-main-layout .service-item-row {
    cursor: pointer;
    position: relative;
    padding-right: 2.25rem !important;
  }

  /* Add chevron indicator */
  .booking-main-layout .service-item-row::after {
    content: "\f054"; /* FontAwesome chevron right */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--v2-text-light);
    font-size: 0.85rem;
    transition: var(--transition-smooth);
  }

  .booking-main-layout .service-item-row:hover::after {
    color: var(--v2-terracotta);
    right: 0.5rem;
  }
}

/* Mobile Variant Page Cards */
.variant-page-card {
  border: 1px solid var(--v2-border);
  background-color: white;
  padding: 1.15rem;
  border-radius: var(--border-radius-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.variant-page-card:hover {
  border-color: var(--v2-terracotta);
}

.variant-page-card.active {
  border-color: var(--v2-terracotta);
  background-color: var(--v2-terracotta-light);
  box-shadow: 0 0 0 2px var(--v2-terracotta-light);
}

.variant-page-radio {
  width: 18px;
  height: 18px;
  accent-color: var(--v2-terracotta);
  cursor: pointer;
}