/* =====================================================================
   JHACASSO DESIGN SYSTEM — Phase 1 Foundation
   Loaded after style.css (legacy theme) and overrides/extends it.
   Reuses the existing --primary_color / --primary_color_hover variables
   already defined inline in master.blade.php from AdminSetting.color.
   Do not hardcode a brand color here — it stays admin-configurable.
   ===================================================================== */

:root{
  /* ---- Neutral surface & text tokens ---- */
  --jc-bg:            #FAF9F7;
  --jc-surface:       #FFFFFF;
  --jc-text:          #23211E;
  --jc-text-muted:    #75726C;
  --jc-border:        #E7E4DE;

  /* ---- Status tokens (documented to match colors already in use
         across the legacy theme, e.g. .badge / .bg-11 / .rate,
         so nothing visually shifts — this just names what exists) ---- */
  --jc-success:       #3CBB67;
  --jc-warning:       #F2A93B;
  --jc-error:         #E64A3B;
  --jc-status-open:   #3CBB67;
  --jc-status-closed: #FF4D2A;

  /* ---- Spacing scale (8px base) ---- */
  --jc-space-1: 4px;
  --jc-space-2: 8px;
  --jc-space-3: 16px;
  --jc-space-4: 24px;
  --jc-space-5: 40px;
  --jc-space-6: 64px;
  --jc-space-6-mobile: 40px;

  /* ---- Radius & shadow ---- */
  --jc-radius-sm: 6px;
  --jc-radius-md: 10px;
  --jc-radius-lg: 16px;
  --jc-shadow-card: 0 10px 30px rgba(35, 33, 30, 0.07);
  --jc-shadow-card-hover: 0 16px 40px rgba(35, 33, 30, 0.12);

  /* ---- Type scale (Be Vietnam, already loaded in master.blade.php) ---- */
  --jc-font: 'Be Vietnam', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* =====================================================================
   BASE / TYPOGRAPHY
   ===================================================================== */
body{
  font-family: var(--jc-font);
  color: var(--jc-text);
  background-color: var(--jc-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6{
  font-family: var(--jc-font);
  color: var(--jc-text);
}

.sec__title{
  font-weight: 700;
  line-height: 1.2;
}
.sec__desc{
  color: var(--jc-text-muted);
  font-size: 16px;
  line-height: 1.6;
}
.widget-title{
  font-weight: 600;
}

/* Accent word inside section titles — replaces the leftover
   ".text-barber" class name from the original template. */
.text-accent{
  color: var(--primary_color) !important;
}

/* Prevent any single overlooked wide element from creating
   horizontal scroll on small screens. */
html, body{
  overflow-x: hidden;
  /* clip (where supported) prevents the same horizontal scroll without
     turning <body> into a scroll container, which would otherwise stop
     the Phase 7 position:sticky header from sticking. */
  overflow-x: clip;
  max-width: 100%;
}
img{ max-width: 100%; }

/* =====================================================================
   BUTTONS — one primary (gradient-btn), one secondary (btn-gray).
   Refine the existing classes for a consistent radius/shadow scale
   instead of introducing new button classes.
   ===================================================================== */
.theme-btn,
.btn-gray{
  border-radius: var(--jc-radius-sm);
  font-weight: 600;
}
.gradient-btn{
  border-radius: var(--jc-radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.btn-gray{
  border-color: var(--jc-border);
  color: var(--jc-text);
}
.btn-gray:hover{
  border-color: var(--primary_color);
  color: var(--primary_color);
}
/* Minimum comfortable touch target on mobile for every button/link
   that acts as a control. */
@media (max-width: 767px){
  .theme-btn, .btn-gray, .gradient-btn, .user-chosen-select, .form-control{
    min-height: 44px;
  }
  /* Primary actions go full-width on mobile so they're never missed. */
  .hero-wrapper .theme-btn,
  .add-listing-btn-hide.theme-btn,
  #search-btn,
  #apply_filter{
    width: 100%;
  }
}
.theme-btn:disabled,
.theme-btn[disabled]{
  opacity: 0.6;
  cursor: not-allowed;
}
/* Focus visibility for keyboard users (accessibility basics). */
a:focus-visible,
button:focus-visible,
.form-control:focus-visible,
.user-chosen-select:focus-visible{
  outline: 2px solid var(--primary_color);
  outline-offset: 2px;
}

/* =====================================================================
   FORM CONTROLS / ERROR STATES
   ===================================================================== */
.form-control{
  border-radius: var(--jc-radius-sm);
  border-color: var(--jc-border);
}
.form-control:focus{
  border-color: var(--primary_color);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.04);
}
.form-control.is-invalid,
.form-control.has-error{
  border-color: var(--jc-error);
}
.invalid-div{
  min-height: 18px;
  font-size: 13px;
  color: var(--jc-error);
  display: block;
  margin-top: 4px;
}

/* =====================================================================
   IMAGE SYSTEM — fixed-ratio containers + object-fit + fallback.
   Utility classes used by cards; also hardens the existing
   .card__img (previously width/height only, no object-fit, which
   distorts non-matching source images).
   ===================================================================== */
.card-item .card-image .card__img,
.card-item .user-thumb img,
.category-item .cat-img,
.comment .user-thumb img,
.hosted-by .user-thumb img,
.mini-list-img img{
  object-fit: cover;
}

.jc-ratio{
  position: relative;
  overflow: hidden;
  display: block;
  background-color: var(--jc-bg);
}
.jc-ratio img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.jc-ratio-4-3{ aspect-ratio: 4 / 3; }
.jc-ratio-16-9{ aspect-ratio: 16 / 9; }
.jc-ratio-1-1{ aspect-ratio: 1 / 1; }
.jc-ratio-21-9{ aspect-ratio: 21 / 9; }

/* =====================================================================
   TEXT TRUNCATION — protects card layouts from long production names.
   ===================================================================== */
.jc-truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  display: inline-block;
  vertical-align: bottom;
}
.jc-clamp-2{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-item .card-title,
.card-item .card-title a,
.category-item .cat__title{
  max-width: 100%;
}
.card-item .card-title a{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

/* =====================================================================
   SALON / SERVICE CARD REFINEMENTS
   ===================================================================== */
.card-item{
  box-shadow: var(--jc-shadow-card);
  border-radius: var(--jc-radius-md);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.card-item:hover{
  box-shadow: var(--jc-shadow-card-hover);
  transform: translateY(-2px);
}
.card-item .card-image,
.card-item .card-image .card__img{
  border-radius: var(--jc-radius-md) var(--jc-radius-md) 0 0;
}
.card-item .listing-meta .rate{
  background-color: var(--jc-success);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.card-item .listing-meta .rate i{
  font-size: 11px;
}
.card-item .listing-meta .rate-text{
  color: var(--jc-text-muted);
  font-size: 13px;
}

/* Service card (salon detail "mini-list-card") */
.mini-list-card{
  border: 1px solid var(--jc-border);
  border-radius: var(--jc-radius-md);
  padding: var(--jc-space-3);
  margin-bottom: var(--jc-space-3);
  transition: box-shadow 0.2s ease;
}
.mini-list-card:hover{
  box-shadow: var(--jc-shadow-card);
}
.mini-list-img img{
  border-radius: var(--jc-radius-sm);
}

/* =====================================================================
   REVIEW CARD
   ===================================================================== */
.comment{
  padding: var(--jc-space-4);
  border: 1px solid var(--jc-border);
  border-radius: var(--jc-radius-md);
  margin-bottom: var(--jc-space-3);
  display: flex;
  gap: var(--jc-space-3);
}
.comment .user-thumb img{
  border-radius: 50%;
}
.comment-desc{
  color: var(--jc-text);
  line-height: 1.6;
}

/* =====================================================================
   OFFER CARD — replaces the inline-styled markup on /offers-for-you
   ===================================================================== */
.jc-offer-card{
  background: var(--jc-surface);
  border: 1px solid var(--jc-border);
  border-radius: var(--jc-radius-md);
  box-shadow: var(--jc-shadow-card);
  padding: var(--jc-space-4);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--jc-space-2);
}
.jc-offer-card__code{
  align-self: flex-start;
  padding: var(--jc-space-1) var(--jc-space-3);
  border: 1px dashed var(--primary_color);
  border-radius: var(--jc-radius-sm);
  font-weight: 700;
  font-size: 13px;
  color: var(--primary_color);
  background: rgba(0,0,0,0.02);
}
.jc-offer-card__title{
  font-weight: 700;
  font-size: 17px;
  margin: 0;
}
.jc-offer-card__desc{
  color: var(--jc-text-muted);
  font-size: 14px;
  margin: 0;
}
.jc-offer-card__status{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  width: fit-content;
}
.jc-offer-card__status--available{
  background: rgba(60,187,103,0.12);
  color: var(--jc-success);
}
.jc-offer-card__status--soon{
  background: rgba(242,169,59,0.15);
  color: #a06a12;
}
.jc-offer-card__image{
  border-radius: var(--jc-radius-sm);
  overflow: hidden;
  margin-bottom: var(--jc-space-2);
}
.jc-offer-card .btn-gray{
  margin-top: auto;
  align-self: flex-start;
}

/* =====================================================================
   EMPTY / LOADING / ERROR STATES
   ===================================================================== */
.info-box{
  border: 1px solid var(--jc-border);
}
.jc-skeleton{
  display: block;
  border-radius: var(--jc-radius-md);
  background: linear-gradient(90deg, #EDEBE7 25%, #F5F3F0 37%, #EDEBE7 63%);
  background-size: 400% 100%;
  animation: jc-skeleton-shimmer 1.4s ease infinite;
}
@keyframes jc-skeleton-shimmer{
  0%{ background-position: 100% 50%; }
  100%{ background-position: 0 50%; }
}
.jc-skeleton-card{
  height: 340px;
  margin-bottom: 30px;
}
@media (prefers-reduced-motion: reduce){
  .jc-skeleton{ animation: none; }
}

/* =====================================================================
   HEADER / NAVIGATION
   ===================================================================== */
.header-top-info a{
  font-weight: 500;
}
.login-and-signup-wrap a{
  font-weight: 600;
  display: inline-block;
  padding: 6px 2px;
}
/* De-emphasize "Salon Owner Login" relative to primary customer Login,
   per the visual-hierarchy rule: one primary action, not two competing
   equally-weighted ones in the same top bar. */
.login-and-signup-wrap a[href*="owner/login"]{
  opacity: 0.8;
  font-weight: 500;
}

.main-menu ul > li > a{
  font-weight: 600;
}

/* Mobile nav: the existing main.js already toggles .main-menu-content
   via slideToggle() on .menu-toggle click — this only restyles the
   resulting panel, no JS behavior is changed. */
@media (max-width: 1199px){
  .main-menu-content{
    display: none;
    width: 100%;
    background: var(--jc-surface);
    border-radius: var(--jc-radius-md);
    box-shadow: var(--jc-shadow-card);
    padding: var(--jc-space-2) 0;
    margin-top: var(--jc-space-2);
  }
  .main-menu-content .main-menu > ul{
    flex-direction: column;
    width: 100%;
  }
  .main-menu-content .main-menu > ul > li{
    width: 100%;
  }
  .main-menu-content .main-menu > ul > li > a{
    display: block;
    padding: 12px var(--jc-space-3);
    min-height: 44px;
    line-height: 20px;
  }
  .menu-toggle{
    cursor: pointer;
  }
}

/* =====================================================================
   CATEGORY TILES — long-name protection
   ===================================================================== */
.category-item .cat__title{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  padding: 0 8px;
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer-area .footer__title{
  margin-bottom: var(--jc-space-3);
}
.footer-area .list-items li{
  margin-bottom: var(--jc-space-2);
}
.footer-area .copy__desc{
  color: rgba(255,255,255,0.6);
}

/* =====================================================================
   SECTION SPACING — consistent section rhythm on the pages touched
   in this phase (Home, Offers, About). Uses the spacing scale rather
   than each page inventing its own padding.
   ===================================================================== */
.category-area,
.card-area{
  padding-top: var(--jc-space-6);
  padding-bottom: var(--jc-space-6);
}
@media (max-width: 767px){
  .category-area,
  .card-area{
    padding-top: var(--jc-space-6-mobile);
    padding-bottom: var(--jc-space-6-mobile);
  }
}
/* Subtle alternating rhythm between stacked HOMEPAGE sections only
   (scoped to .jc-home-* so /all-categories, /appointments, /profile —
   which reuse the same .category-area/.card-area utility classes —
   are not visually affected). Existing --jc-bg / --jc-surface tokens
   only — no new colors introduced. */
body.jc-home .card-area{
  background-color: var(--jc-surface);
}
body.jc-home .category-area{
  background-color: var(--jc-bg);
}

/* =====================================================================
   RESPONSIVE — general safety net for the pages touched in Phase 1
   ===================================================================== */
@media (max-width: 767px){
  .card-item .card-image .card__img{ height: 200px; }
  .sec__title{ font-size: 24px; }
}

/* =====================================================================
   PHASE 2 — HOMEPAGE COMPONENTS
   Built entirely on the Phase 1 tokens above — no new colors, fonts,
   radii or shadow values are introduced here.
   ===================================================================== */

/* ---- Hero eyebrow label ---- */
.jc-eyebrow{
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 20px;
  padding: 6px 16px;
  margin-bottom: var(--jc-space-3);
}

/* ---- Featured Salons: same card system, plain grid (no filter/sort UI) ---- */
.jc-salon-price{
  color: var(--jc-text-muted);
  font-size: 13px;
  font-weight: 600;
}
.jc-salon-price strong{
  color: var(--jc-text);
  font-weight: 700;
}

/* ---- How Jhacasso Works ---- */
.jc-steps{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--jc-space-4);
}
@media (max-width: 991px){
  .jc-steps{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px){
  .jc-steps{ grid-template-columns: 1fr; }
}
.jc-step{
  background: var(--jc-surface);
  border: 1px solid var(--jc-border);
  border-radius: var(--jc-radius-md);
  padding: var(--jc-space-4);
  text-align: center;
}
.jc-step__num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary_color);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  margin: 0 auto var(--jc-space-3);
}
.jc-step__title{
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 6px;
}
.jc-step__desc{
  color: var(--jc-text-muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

/* ---- Why Jhacasso trust list ---- */
.jc-trust-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--jc-space-4);
}
@media (max-width: 991px){
  .jc-trust-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px){
  .jc-trust-grid{ grid-template-columns: 1fr; }
}
.jc-trust-item{
  display: flex;
  align-items: flex-start;
  gap: var(--jc-space-3);
  padding: var(--jc-space-3);
}
.jc-trust-item__icon{
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0,0,0,0.04);
  color: var(--primary_color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.jc-trust-item__title{
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 2px;
}
.jc-trust-item__desc{
  color: var(--jc-text-muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

/* ---- Salon Owner CTA banner ---- */
.jc-owner-cta{
  background: var(--jc-text);
  color: #fff;
  border-radius: var(--jc-radius-lg);
  padding: var(--jc-space-6) var(--jc-space-4);
  text-align: center;
}
.jc-owner-cta__title{
  color: #fff;
  font-weight: 700;
  font-size: 28px;
  margin-bottom: var(--jc-space-2);
}
.jc-owner-cta__desc{
  color: rgba(255,255,255,0.75);
  font-size: 16px;
  max-width: 640px;
  margin: 0 auto var(--jc-space-4);
}
.jc-owner-cta__points{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--jc-space-2) var(--jc-space-4);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--jc-space-4);
  color: rgba(255,255,255,0.85);
  font-size: 14px;
}
.jc-owner-cta__points li{
  display: flex;
  align-items: center;
  gap: 6px;
}
.jc-owner-cta__points i{
  color: var(--primary_color);
}
@media (max-width: 767px){
  .jc-owner-cta{ padding: var(--jc-space-5) var(--jc-space-3); }
  .jc-owner-cta__title{ font-size: 22px; }
}

/* ---- App download badges ---- */
.jc-app-badges{
  display: flex;
  justify-content: center;
  gap: var(--jc-space-3);
  flex-wrap: wrap;
}
.jc-app-badges img{
  height: 52px;
  width: auto;
  border-radius: var(--jc-radius-sm);
}

/* ---- Review card grid on homepage ---- */
.jc-review-grid{
  display: grid;
  /* auto-fit + justify-content:center means 1 or 2 real reviews center
     nicely instead of leaving a large empty gap where the 3rd column
     would be — important on a growing marketplace with few reviews. */
  grid-template-columns: repeat(auto-fit, minmax(300px, 340px));
  justify-content: center;
  gap: var(--jc-space-4);
}
@media (max-width: 575px){
  .jc-review-grid{ grid-template-columns: minmax(0, 1fr); }
}
.jc-review-grid .comment{
  margin-bottom: 0;
  height: 100%;
}
.jc-review-excerpt{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =====================================================================
   PHASE 3 — /ALL-SALONS SEARCH & FILTER REDESIGN
   Same tokens as Phase 1/2 — no new colors, fonts, radii or shadows.
   All markup/behavior here wraps the EXISTING filter/sort/search form
   and its existing JS (filter(), reset, grid/list) — this file only
   changes presentation.
   ===================================================================== */

/* ---- Results toolbar ---- */
.jc-results-toolbar{
  gap: var(--jc-space-3);
}
.jc-results-toolbar .result-text{
  color: var(--jc-text-muted);
  font-size: 14px;
}
.jc-sort-select{
  display: flex;
  align-items: center;
  gap: var(--jc-space-2);
}
.jc-sort-label{
  font-size: 13px;
  font-weight: 600;
  color: var(--jc-text-muted);
  margin: 0;
  white-space: nowrap;
}

/* ---- Mobile "Filters" trigger + active-filter count badge ---- */
.jc-mobile-filters-btn{
  display: none;
  align-items: center;
  gap: var(--jc-space-2);
  margin-right: var(--jc-space-3);
}
.jc-filter-count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--primary_color);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

/* ---- Filter sidebar: brand-consistent radios/stars ---- */
.custom-radio .radio-label input:checked ~ .radio-mark{
  border-color: var(--primary_color) !important;
}
.custom-radio .radio-label input:checked ~ .radio-mark:before{
  background-color: var(--primary_color);
}
.custom-radio .stars .la-star{
  color: var(--primary_color);
}
.jc-field-label{
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--jc-text-muted);
  margin-bottom: 4px;
}
.sidebar-widget{
  border-radius: var(--jc-radius-md);
}

/* ---- Filter sidebar header (visible only inside the mobile sheet) ---- */
.jc-filter-sidebar__header{
  display: none;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--jc-space-3);
  margin-bottom: var(--jc-space-3);
  border-bottom: 1px solid var(--jc-border);
}
.jc-filter-sidebar__title{
  font-weight: 700;
  font-size: 18px;
  margin: 0;
}
.jc-filter-close{
  background: none;
  border: none;
  font-size: 20px;
  color: var(--jc-text);
  line-height: 1;
  padding: 8px;
  min-width: 44px;
  min-height: 44px;
}

/* ---- Salon card "View Salon" CTA ---- */
.jc-card-cta{
  display: block;
  font-weight: 600;
}

/* ---- Long-content truncation on card meta lines (single line + ellipsis) ---- */
.info-list li.jc-truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

/* =====================================================================
   MOBILE FILTER SHEET — <=767px
   Desktop: sidebar renders inline exactly as before (no behavior change).
   Mobile: same sidebar element slides in as a bottom sheet, triggered by
   #jc-open-filters / closed by #jc-close-filters, backdrop or Esc (JS in
   main.js). No duplicate form fields are created anywhere.
   ===================================================================== */
@media (max-width: 767px){
  .jc-mobile-filters-btn{
    display: inline-flex;
  }
  .jc-filter-sidebar__header{
    display: flex;
  }
  .jc-filter-backdrop{
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1040;
  }
  .jc-filter-backdrop.jc-open{
    display: block;
  }
  #jc-filter-sidebar{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    max-height: 85vh;
    z-index: 1050;
    border-radius: var(--jc-radius-lg) var(--jc-radius-lg) 0 0;
    transform: translateY(100%);
    transition: transform 0.25s ease;
    margin: 0;
    padding: var(--jc-space-4) var(--jc-space-4) 0;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.15);
    /* Flex column: scrollable filters on top, Apply/Reset fixed at the
       bottom of the SHEET (not sticky-within-scroll, which overlapped
       content — see Phase 3 QA). */
    display: flex;
    flex-direction: column;
  }
  #jc-filter-sidebar.jc-filters-open{
    transform: translateY(0);
  }
  .jc-filter-scroll{
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
  }
  .jc-filter-actions{
    flex: 0 0 auto;
    background: var(--jc-surface);
    padding-top: var(--jc-space-3);
    padding-bottom: var(--jc-space-4);
    margin-top: 0;
    border-top: 1px solid var(--jc-border);
    /* Soft shadow above the fixed action bar — a visual cue that more
       filters exist above (scrollable), rather than an abrupt hard cut. */
    box-shadow: 0 -12px 12px -10px rgba(35,33,30,0.08);
    position: relative;
  }
  body.jc-filters-locked{
    overflow: hidden;
  }
}

/* =====================================================================
   PHASE 4 — SALON DETAIL PAGE (/salon/{id}/{name}) REDESIGN
   Same tokens as Phases 1–3 — no new colors, fonts, radii or shadows.
   Wraps the EXISTING services/staff/hours/gallery/reviews/booking data
   and JS (fancybox lightbox, Google Map, #load-more reviews AJAX) —
   presentation only, no behavior changes.
   ===================================================================== */

/* ---- Hero profile card ---- */
.jc-salon-hero-card{
  display: flex;
  flex-wrap: wrap;
  gap: var(--jc-space-4);
  background: var(--jc-surface);
  border-radius: var(--jc-radius-lg);
  box-shadow: var(--jc-shadow-card);
  padding: var(--jc-space-4);
  width: 100%;
}
.jc-salon-hero-card__media{
  flex-shrink: 0;
  margin-right: 0 !important;
}
.jc-salon-hero-card__img{
  width: 220px;
  height: 220px;
  border-radius: var(--jc-radius-lg) !important;
}
.jc-salon-hero-card__body{
  flex: 1 1 320px;
  min-width: 0;
}
.jc-salon-hero-card__top{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--jc-space-2);
}
.jc-salon-hero-card__name{
  font-weight: 700;
  font-size: 28px;
  margin: 0;
  word-break: break-word;
}
.jc-salon-hero-card__location{
  color: var(--jc-text-muted);
}
.jc-salon-hero-card__rating{
  margin: var(--jc-space-2) 0;
}
.jc-salon-hero-card__cta{
  margin-top: var(--jc-space-3);
}
@media (max-width: 575px){
  .jc-salon-hero-card{ padding: var(--jc-space-3); }
  .jc-salon-hero-card__img{ width: 100%; height: 200px; }
  .jc-salon-hero-card__name{ font-size: 22px; }
}

/* ---- Open / closed status pill (reuses --jc-status-open/closed tokens
       named in Phase 1, never previously used in a component) ---- */
.jc-status-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.jc-status-pill:before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
/* Solid background + dark text (not tinted bg + colored text) — the
   tinted version measured under 2.5:1 contrast for "Open"/"Closed",
   failing WCAG AA; dark text on the solid status color measures 6.5:1
   (open) and 4.9:1 (closed). */
.jc-status-pill--open{
  color: var(--jc-text);
  background: var(--jc-status-open);
}
.jc-status-pill--closed{
  color: var(--jc-text);
  background: var(--jc-status-closed);
}

/* ---- Meta pills: gender / service-location on the hero ---- */
.jc-meta-row{
  display: flex;
  flex-wrap: wrap;
  gap: var(--jc-space-2);
  margin: var(--jc-space-2) 0;
  padding: 0;
  list-style: none;
}
.jc-meta-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  background: rgba(0,0,0,0.04);
  color: var(--jc-text-muted);
  font-size: 13px;
  font-weight: 600;
}
.jc-meta-pill i{ color: var(--primary_color); }

/* ---- Services tab images: consistent fixed ratio + object-fit ---- */
.mini-list-img{
  flex-shrink: 0;
}
.mini-list-img img{
  object-fit: cover;
  background-color: var(--jc-bg);
}

/* ---- Staff / Employees ---- */
.jc-staff-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--jc-space-3);
}
.jc-staff-card{
  border: 1px solid var(--jc-border);
  border-radius: var(--jc-radius-md);
  padding: var(--jc-space-3);
  text-align: center;
}
.jc-staff-card__avatar{
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto var(--jc-space-2);
  display: block;
}
.jc-staff-card__name{
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 2px;
}
.jc-staff-card__meta{
  color: var(--jc-text-muted);
  font-size: 12px;
  margin-bottom: var(--jc-space-2);
}
.jc-staff-card__services{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 0;
  list-style: none;
}
.jc-staff-badge{
  display: inline-block;
  background: rgba(0,0,0,0.04);
  color: var(--jc-text-muted);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
}

/* ---- Opening hours: highlight current day (view-computed only,
       no new backend data — see singleSalon.blade.php) ---- */
.jc-hours-list li{
  padding: 6px var(--jc-space-2);
  border-radius: var(--jc-radius-sm);
}
.jc-hours-list li.jc-hours-list__row--today{
  font-weight: 700;
  color: var(--jc-text);
  background: rgba(0,0,0,0.04);
}

/* ---- Mobile sticky Book Now bar — mirrors the existing hero CTA's
       exact auth-gated link/modal-trigger, just a second visible
       control. Sits below Bootstrap's modal (1050) and its backdrop
       (1040) so opening the login modal correctly covers it. ---- */
.jc-sticky-cta{
  display: none;
}
.jc-sticky-cta-spacer{
  display: none;
}
@media (max-width: 767px){
  .jc-sticky-cta{
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1020;
    background: var(--jc-surface);
    border-top: 1px solid var(--jc-border);
    box-shadow: 0 -8px 24px rgba(35,33,30,0.1);
    padding: var(--jc-space-2) var(--jc-space-3);
    padding-bottom: calc(var(--jc-space-2) + env(safe-area-inset-bottom));
    align-items: center;
    gap: var(--jc-space-3);
  }
  .jc-sticky-cta__info{
    flex: 1 1 auto;
    min-width: 0;
  }
  .jc-sticky-cta__name{
    font-weight: 700;
    font-size: 14px;
    display: block;
  }
  .jc-sticky-cta__status{
    font-size: 12px;
    color: var(--jc-text-muted);
    display: block;
  }
  .jc-sticky-cta .theme-btn{
    flex-shrink: 0;
    margin: 0 !important;
    width: auto !important;
    min-width: 140px;
  }
  .jc-sticky-cta-spacer{
    display: block;
    height: calc(64px + env(safe-area-inset-bottom));
  }
}

/* =====================================================================
   PHASE 5 — SALON LISTING / DISCOVERY (/all-salons) CARDS + EMPTY STATE
   Same tokens as Phases 1–4. Everything here is scoped under the new
   .jc-salon-card class (added only in allSalonGrid/allSalonList.blade.php)
   so it never touches the generic .card-item used by blogs.blade.php or
   any other page. Wraps the EXISTING salon data/fields and the EXISTING
   search/filter/sort/pagination JS in main.js — presentation only.
   ===================================================================== */

.jc-salon-card{
  border-radius: var(--jc-radius-lg);
  box-shadow: var(--jc-shadow-card);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.jc-salon-card:hover{
  box-shadow: var(--jc-shadow-card-hover);
  transform: translateY(-2px);
}

/* ---- Open/Closed status pill on the card image — replaces the legacy
       .badge/.badge.bg-11 (white text on #3CBB67/#FF4D2A, ~2.5:1 and
       ~3.3:1 contrast, both fail WCAG AA). Reuses Phase 4's already
       dark-text-on-solid-color .jc-status-pill (6.5:1 / 4.9:1) and just
       adds the absolute positioning the card needs. ---- */
.jc-card-status{
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 1;
}

/* ---- Meta row / address line: tighten spacing and keep it legible at
       card width without changing the shared .listing-meta/.info-list
       rules other pages may rely on. ---- */
.jc-salon-card .listing-meta{
  color: var(--jc-text-muted);
  font-size: 13px;
  flex-wrap: wrap;
  row-gap: 4px;
}
.jc-salon-card .listing-meta .rate{
  font-weight: 700;
}
.jc-salon-card .info-list{
  color: var(--jc-text-muted);
  font-size: 13px;
}

/* ---- List view: the legacy .card-item-list has a fixed height:313px
       that only ever gets width/height overrides on its image and
       content children, never on itself, at <=767px. With
       flex-direction:column (already set by the legacy CSS at that
       width) that fixed height clips/overlaps stacked content — a
       pre-existing bug on exactly the breakpoints Phase 5 must support.
       Fixed here, scoped to .jc-salon-card so desktop's intentional
       fixed-height row look is untouched. ---- */
@media (max-width: 767px){
  .jc-salon-card.card-item-list{
    height: auto;
  }
}

/* ---- Polished "no results" empty state — used both in the server-
       rendered Blade partials and (matching markup/classes) in the
       AJAX-injected empty state in main.js's filter(). ---- */
.jc-empty-state{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--jc-space-6) var(--jc-space-4);
  background: var(--jc-surface);
  border: 1px solid var(--jc-border);
  border-radius: var(--jc-radius-lg);
}
.jc-empty-state__icon{
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(0,0,0,0.04);
  color: var(--primary_color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: var(--jc-space-3);
}
.jc-empty-state__title{
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 6px;
}
.jc-empty-state__desc{
  color: var(--jc-text-muted);
  font-size: 14px;
  max-width: 420px;
  margin: 0 0 var(--jc-space-3);
}
.jc-empty-state__action{
  min-width: 180px;
}
@media (max-width: 575px){
  .jc-empty-state{ padding: var(--jc-space-5) var(--jc-space-3); }
  .jc-empty-state__action{ width: 100%; }
}

/* =====================================================================
   PHASE 6 — HOMEPAGE REDESIGN (premium salon-discovery marketplace)
   Scope: every rule below is either under body.jc-home (only ever set
   on '/', see master.blade.php) or on brand-new .jc-h-* classes that
   only exist in home.blade.php / hero.blade.php. Phase 4 (salon detail)
   and Phase 5 (salon listing) are untouched: the shared salon-card
   partial is restyled here only inside .jc-h-salons.
   ===================================================================== */

body.jc-home{
  --h-ink: #1F1A1C;
  --h-ink-2: #5B5256;
  --h-muted: #766C71;
  --h-line: #EDE2DC;
  --h-cream: #FBF7F3;
  --h-blush: #F6E7E1;
  --h-peach: #EFCFC0;
  --h-rose: #B23C56;
  --h-rose-soft: #E7A2AD;
  --h-gold: #C98A12;
  --h-serif: 'Fraunces', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --h-sans: 'Be Vietnam', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --h-r-lg: 28px;
  --h-r: 20px;
  --h-shadow: 0 12px 32px -14px rgba(70, 35, 42, 0.22);
  --h-shadow-lg: 0 28px 60px -24px rgba(70, 35, 42, 0.34);
  background-color: var(--h-cream);
  color: var(--h-ink);
}
@media (min-width: 1300px){
  body.jc-home .jc-h-hero > .container,
  body.jc-home .jc-h-sec > .container{
    max-width: 1240px;
  }
}

/* ---------------------------------------------------------------------
   SHARED HOMEPAGE PRIMITIVES
   --------------------------------------------------------------------- */
.jc-h-eyebrow{
  display: inline-flex;
  align-items: center;
  font-family: var(--h-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--h-rose);
  background: var(--h-blush);
  border-radius: 999px;
  padding: 7px 14px;
  margin-bottom: 16px;
}
.jc-h-sec--blush .jc-h-eyebrow{ background: #fff; }
.jc-h-eyebrow--on-dark{
  background: rgba(255, 255, 255, 0.08);
  color: #F2C9B8;
}
.jc-h-sec{
  position: relative;
  padding: 88px 0;
}
.jc-h-sec--tight{ padding: 56px 0; }
.jc-h-sec--cream{ background: var(--h-cream); }
.jc-h-sec--white{ background: #fff; }
.jc-h-sec--blush{ background: linear-gradient(180deg, var(--h-blush) 0%, #FBEFEA 100%); }

.jc-h-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
}
.jc-h-head__text{ max-width: 640px; }
.jc-h-head--center{ justify-content: center; text-align: center; }
.jc-h-head--center .jc-h-head__text{ margin: 0 auto; }
.jc-h-title{
  font-family: var(--h-serif);
  font-weight: 600;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--h-ink);
  margin: 0;
}
.jc-h-sub{
  font-size: 16px;
  line-height: 1.6;
  color: var(--h-ink-2);
  margin: 12px 0 0;
}
.jc-h-more{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--h-ink);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: var(--h-ink);
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.jc-h-more:hover,
.jc-h-more:focus-visible{
  background: var(--h-ink);
  color: #fff;
  text-decoration: none;
}
.jc-h-empty{
  margin: 0;
  padding: 20px 24px;
  font-size: 15px;
  color: var(--h-ink-2);
  background: #fff;
  border: 1px dashed var(--h-line);
  border-radius: var(--h-r);
}

/* ---------------------------------------------------------------------
   HERO
   --------------------------------------------------------------------- */
.jc-h-hero{
  position: relative;
  overflow: hidden;
  padding: 56px 0 64px;
  background:
    radial-gradient(900px 480px at 88% 6%, rgba(239, 207, 192, 0.55), transparent 62%),
    linear-gradient(180deg, #FFFFFF 0%, var(--h-cream) 100%);
}
.jc-h-hero__glow{
  position: absolute;
  width: 520px;
  height: 520px;
  top: -200px;
  left: -180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(231, 162, 173, 0.30), transparent 70%);
  pointer-events: none;
}
.jc-h-hero__grid{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  grid-template-areas:
    "text media"
    "trust media"
    "search search";
  column-gap: 64px;
  row-gap: 28px;
  align-items: center;
}
.jc-h-hero__text{ grid-area: text; align-self: end; }
.jc-h-hero__title{
  font-family: var(--h-serif);
  font-weight: 600;
  font-size: clamp(40px, 5.4vw, 74px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--h-ink);
  margin: 0 0 20px;
}
.jc-h-hero__title em{
  font-style: italic;
  font-weight: 500;
  color: var(--h-rose);
}
.jc-h-hero__lead{
  max-width: 480px;
  margin: 0;
  font-size: 18px;
  line-height: 1.65;
  color: var(--h-ink-2);
}

.jc-h-hero__trust{
  grid-area: trust;
  align-self: start;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 12px 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.jc-h-hero__trust li{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--h-ink);
}
.jc-h-hero__trust-icon{
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--h-shadow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--h-rose);
  font-size: 16px;
}

.jc-h-hero__media{ grid-area: media; position: relative; }
.jc-h-hero__arch{
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 6;
  max-height: 640px;
  border-radius: 999px 999px var(--h-r-lg) var(--h-r-lg);
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.55), transparent 45%),
    linear-gradient(160deg, var(--h-peach) 0%, var(--h-rose-soft) 55%, #C9707F 100%);
  box-shadow: var(--h-shadow-lg);
}
.jc-h-hero__arch img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.jc-h-hero__pill{
  position: absolute;
  top: 16%;
  right: -14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--h-shadow-lg);
  font-size: 13px;
  font-weight: 700;
  color: var(--h-ink);
}
.jc-h-hero__pill i{ color: var(--h-rose); font-size: 16px; }
.jc-h-hero__salon{
  position: absolute;
  left: -36px;
  bottom: 118px;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 300px;
  padding: 12px 18px 12px 12px;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--h-shadow-lg);
  color: var(--h-ink);
  transition: transform 0.2s ease;
}
.jc-h-hero__salon:hover,
.jc-h-hero__salon:focus-visible{
  transform: translateY(-3px);
  color: var(--h-ink);
  text-decoration: none;
}
.jc-h-hero__salon-thumb{
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--h-blush), var(--h-peach));
}
.jc-h-hero__salon-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.jc-h-hero__salon-thumb img[src$="placeholder-image.svg"]{ opacity: 0; }
.jc-h-hero__salon-body{ display: flex; flex-direction: column; min-width: 0; }
.jc-h-hero__salon-label{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--h-rose);
}
.jc-h-hero__salon-name{
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jc-h-hero__salon-meta{ font-size: 13px; color: var(--h-ink-2); }
.jc-h-hero__salon-meta .la-star{ color: var(--h-gold); }

/* Search: one elevated pill on desktop/tablet (Salon or service |
   Location | Category | Find Salons), a stacked card on phones. Same
   <form>, action, method, field names and IDs as before. */
.jc-h-search{
  grid-area: search;
  position: relative;
  z-index: 3;
  margin-top: -76px;
  display: flex;
  align-items: stretch;
  padding: 10px;
  background: #fff;
  border-radius: 999px;
  box-shadow: var(--h-shadow-lg), 0 0 0 1px var(--h-line);
}
.jc-h-search__field{
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 24px;
  border-radius: 999px;
  transition: background-color 0.15s ease;
}
.jc-h-search__field ~ .jc-h-search__field::before{
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: var(--h-line);
}
.jc-h-search__field:focus-within{ background: var(--h-cream); }
.jc-h-search__label{
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--h-ink);
}
.jc-h-search__control{ display: flex; align-items: center; gap: 8px; }
.jc-h-search__control i{ color: var(--h-rose); font-size: 17px; }
.jc-h-search__input{
  width: 100%;
  min-width: 0;
  padding: 2px 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--h-sans);
  font-size: 15px;
  color: var(--h-ink);
}
.jc-h-search__input::placeholder{ color: var(--h-muted); opacity: 1; }
.jc-h-search__field--cat select{
  width: 100%;
  padding: 2px 0;
  border: 0;
  background: transparent;
  font-size: 15px;
  color: var(--h-ink);
}
.jc-h-search__field--cat .chosen-container{
  width: 100% !important;
  font-size: 15px;
}
.jc-h-search__field--cat .chosen-container-single .chosen-single{
  height: auto !important;
  padding: 2px 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 1.5 !important;
  font-size: 15px;
  color: var(--h-ink);
}
.jc-h-search__field--cat .chosen-container-single .chosen-single span{ color: var(--h-ink); }
.jc-h-search__field--cat .chosen-container .chosen-drop{
  margin-top: 14px;
  border: 1px solid var(--h-line);
  border-radius: 14px;
  box-shadow: var(--h-shadow-lg);
  overflow: hidden;
}
.jc-h-search__submit{
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 60px;
  padding: 0 32px;
  border: 0;
  border-radius: 999px;
  background: var(--h-ink);
  color: #fff;
  font-family: var(--h-sans);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.jc-h-search__submit i{ font-size: 18px; }
.jc-h-search__submit:hover{ background: #3A3236; }
.jc-h-search__submit:focus-visible{
  outline: 3px solid var(--h-rose-soft);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------
   CATEGORIES — image-led cards (banner, else icon image, else a branded
   gradient with the category initial).
   --------------------------------------------------------------------- */
.jc-h-cats{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.jc-h-cat{
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--h-r);
  color: #fff;
  box-shadow: var(--h-shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.jc-h-cat:hover,
.jc-h-cat:focus-visible{
  transform: translateY(-4px);
  box-shadow: var(--h-shadow-lg);
  color: #fff;
  text-decoration: none;
}
.jc-h-cat:focus-visible{ outline: 3px solid var(--h-rose); outline-offset: 3px; }
.jc-h-cat__media{
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: linear-gradient(145deg, var(--h-blush) 0%, var(--h-peach) 60%, var(--h-rose-soft) 100%);
}
.jc-h-cat__initial{
  position: absolute;
  inset: 0 0 22% 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--h-serif);
  font-style: italic;
  font-size: 76px;
  color: rgba(178, 60, 86, 0.38);
}
.jc-h-cat__media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.jc-h-cat:hover .jc-h-cat__media img{ transform: scale(1.05); }
.jc-h-cat__media::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 12, 14, 0) 35%, rgba(20, 12, 14, 0.8) 100%);
}
.jc-h-cat__body{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 18px;
}
.jc-h-cat__name{
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jc-h-cat__count{ font-size: 13px; color: rgba(255, 255, 255, 0.88); }

/* ---------------------------------------------------------------------
   FEATURED SALONS — the shared Phase 5 card (allSalonGrid.blade.php,
   unmodified), restyled for the homepage only.
   --------------------------------------------------------------------- */
.jc-h-salons .jc-discovery-scroll{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
}
.jc-h-salons .jc-discovery-scroll > [class*="col-"]{
  display: flex;
  flex: none;
  max-width: none;
  padding: 0;
}
.jc-h-salons .jc-discovery-scroll > .jc-empty-state{ grid-column: 1 / -1; }
.jc-h-salons .jc-salon-card{
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--h-line);
  border-radius: var(--h-r);
  box-shadow: 0 1px 2px rgba(70, 35, 42, 0.04);
}
.jc-h-salons .jc-salon-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--h-shadow-lg);
}
.jc-h-salons .jc-salon-card .card-image{
  overflow: hidden;
  border-radius: 0;
  background: linear-gradient(145deg, var(--h-blush) 0%, var(--h-peach) 65%, var(--h-rose-soft) 100%);
}
.jc-h-salons .jc-salon-card .card-image > a{ position: relative; display: block; }
/* Legacy .card-item .card-image:after lays a 50% navy wash over every
   photo; the homepage shows salon imagery at full colour. */
.jc-h-salons .jc-salon-card .card-image:after{ display: none; }
.jc-h-salons .jc-salon-card .card__img{
  display: block;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
  transition: transform 0.5s ease;
}
.jc-h-salons .jc-salon-card:hover .card__img{ transform: scale(1.04); }
.jc-h-salons .jc-salon-card .card-image-shape{ display: none; }
/* Branded fallback instead of a big grey placeholder: the placeholder
   graphic is made transparent (it still reserves the 4:3 box) so the
   blush gradient shows, with a soft italic wordmark on top. Matches both
   "no image uploaded" and "image failed to load" (onerror swaps src to
   the same placeholder file). */
.jc-h-salons .jc-salon-card .card__img[src$="placeholder-image.svg"]{ opacity: 0; }
.jc-h-salons .jc-salon-card .card-image > a:has(.card__img[src$="placeholder-image.svg"])::after{
  content: "Jhacasso";
  position: absolute;
  inset: 0 0 12% 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--h-serif);
  font-style: italic;
  font-size: 30px;
  color: rgba(178, 60, 86, 0.5);
  pointer-events: none;
}
.jc-h-salons .jc-salon-card .card-content{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 18px 20px 20px;
}
.jc-h-salons .jc-salon-card .card-content .user-thumb{
  width: 56px;
  height: 56px;
  top: -28px;
  left: 18px;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: var(--h-shadow);
}
.jc-h-salons .jc-salon-card .card-content .user-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.jc-h-salons .jc-salon-card .card-title{
  margin-bottom: 4px;
  font-size: 18px;
  font-weight: 700;
}
.jc-h-salons .jc-salon-card .card-title a{ color: var(--h-ink); }
.jc-h-salons .jc-salon-card .card-title a:hover{ color: var(--h-rose); }
.jc-h-salons .jc-salon-price{ margin-bottom: 6px; font-size: 13px; color: var(--h-ink-2); }
.jc-h-salons .jc-salon-price strong{ color: var(--h-ink); }
.jc-h-salons .jc-salon-card .card-sub{
  min-height: 3.1em;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--h-ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.jc-h-salons .jc-salon-card .listing-meta{
  gap: 6px 14px;
  font-size: 13px;
  color: var(--h-ink-2);
}
.jc-h-salons .jc-salon-card .listing-meta li.mx-4{
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.jc-h-salons .jc-salon-card .listing-meta .rate{
  background: var(--h-ink);
  color: #fff;
}
.jc-h-salons .jc-salon-card .info-list{
  margin-bottom: 16px;
  padding-top: 10px !important;
  font-size: 13px;
  color: var(--h-ink-2);
}
.jc-h-salons .jc-salon-card .jc-card-cta{
  margin-top: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 46px;
  border: 1px solid var(--h-ink);
  border-radius: 999px;
  background: #fff;
  color: var(--h-ink);
  font-size: 14px;
  font-weight: 700;
}
.jc-h-salons .jc-salon-card:hover .jc-card-cta,
.jc-h-salons .jc-salon-card .jc-card-cta:hover,
.jc-h-salons .jc-salon-card .jc-card-cta:focus-visible{
  background: var(--h-ink);
  border-color: var(--h-ink);
  color: #fff;
}

/* ---------------------------------------------------------------------
   HOW JHACASSO WORKS — a connected journey, not a row of boxes.
   --------------------------------------------------------------------- */
.jc-h-journey{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.jc-h-step{
  position: relative;
  padding: 0 12px;
  text-align: center;
}
.jc-h-step:not(:last-child)::after{
  content: "";
  position: absolute;
  top: 38px;
  left: calc(50% + 50px);
  right: calc(-50% + 26px);
  border-top: 2px dashed rgba(178, 60, 86, 0.35);
}
.jc-h-step__icon{
  position: relative;
  z-index: 1;
  width: 76px;
  height: 76px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--h-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: var(--h-rose);
}
.jc-h-step__num{
  display: block;
  margin-bottom: 4px;
  font-family: var(--h-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--h-rose);
}
.jc-h-step__title{
  margin: 0 0 8px;
  font-family: var(--h-serif);
  font-weight: 600;
  font-size: 24px;
  color: var(--h-ink);
}
.jc-h-step__desc{
  max-width: 230px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.6;
  color: var(--h-ink-2);
}

/* ---------------------------------------------------------------------
   SPECIAL OFFERS
   --------------------------------------------------------------------- */
.jc-h-offers{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.jc-h-offer{
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--h-line);
  border-radius: var(--h-r);
  box-shadow: 0 1px 2px rgba(70, 35, 42, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.jc-h-offer:hover{ transform: translateY(-4px); box-shadow: var(--h-shadow-lg); }
.jc-h-offer__media{
  position: relative;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--h-blush), var(--h-peach));
}
.jc-h-offer__fallback{ font-size: 48px; color: rgba(178, 60, 86, 0.4); }
.jc-h-offer__media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.jc-h-offer__badge{
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--h-ink);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.jc-h-offer__body{ padding: 18px 20px 22px; }
.jc-h-offer__title{
  margin: 0 0 6px;
  font-family: var(--h-serif);
  font-weight: 600;
  font-size: 22px;
  color: var(--h-ink);
}
.jc-h-offer__desc{ margin: 0; font-size: 14px; color: var(--h-ink-2); }

/* ---------------------------------------------------------------------
   REVIEWS — real, moderated reviews only.
   --------------------------------------------------------------------- */
.jc-h-reviews{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.jc-h-review{
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 26px 26px 22px;
  background: #fff;
  border-radius: var(--h-r);
  box-shadow: var(--h-shadow);
}
.jc-h-review::before{
  content: "\201C";
  position: absolute;
  top: 4px;
  right: 22px;
  font-family: var(--h-serif);
  font-size: 84px;
  line-height: 1;
  color: var(--h-blush);
}
.jc-h-review__stars{
  display: flex;
  gap: 2px;
  margin-bottom: 12px;
  font-size: 16px;
  color: var(--h-gold);
}
.jc-h-review__text{
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--h-ink);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.jc-h-review__author{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--h-line);
}
.jc-h-review__author img{
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}
.jc-h-review__author > span{ display: flex; flex-direction: column; min-width: 0; }
.jc-h-review__name{ font-size: 14px; font-weight: 700; color: var(--h-ink); }
.jc-h-review__salon{
  font-size: 13px;
  color: var(--h-ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------
   SALON OWNER CTA + APP
   --------------------------------------------------------------------- */
.jc-h-owner{
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  align-items: center;
  gap: 40px;
  padding: 56px 64px;
  border-radius: var(--h-r-lg);
  background: var(--h-ink);
  color: #fff;
}
.jc-h-owner::before{
  content: "";
  position: absolute;
  width: 440px;
  height: 440px;
  top: -190px;
  right: -120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(231, 162, 173, 0.35), transparent 70%);
  pointer-events: none;
}
.jc-h-owner__text{ position: relative; }
.jc-h-owner__title{
  margin: 0 0 12px;
  font-family: var(--h-serif);
  font-weight: 600;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.12;
  color: #fff;
}
.jc-h-owner__desc{
  max-width: 560px;
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}
.jc-h-owner__points{
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 10px 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.jc-h-owner__points li{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.92);
}
.jc-h-owner__points i{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(242, 201, 184, 0.18);
  color: #F2C9B8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.jc-h-owner__actions{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.jc-h-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.jc-h-btn:hover{ text-decoration: none; }
.jc-h-btn:focus-visible{ outline: 3px solid var(--h-rose-soft); outline-offset: 3px; }
.jc-h-btn--light{ background: #fff; color: var(--h-ink); }
.jc-h-btn--light:hover{ background: var(--h-blush); color: var(--h-ink); }
.jc-h-btn--ghost{ border: 1px solid rgba(255, 255, 255, 0.4); color: #fff; }
.jc-h-btn--ghost:hover{ border-color: #fff; color: #fff; }

.jc-h-app{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 36px;
  background: #fff;
  border: 1px solid var(--h-line);
  border-radius: var(--h-r-lg);
}
.jc-h-app__title{
  margin: 0 0 4px;
  font-family: var(--h-serif);
  font-weight: 600;
  font-size: 28px;
  color: var(--h-ink);
}
.jc-h-app__desc{ margin: 0; color: var(--h-ink-2); }

/* ---------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width: 1199px){
  .jc-h-salons .jc-discovery-scroll{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jc-h-hero__salon{ left: -16px; }
}

/* Tablet + phone: hero stacks (visual → headline → search → trust),
   and every card collection becomes a horizontal swipe row. */
@media (max-width: 991px){
  .jc-h-hero{ padding: 24px 0 44px; }
  .jc-h-hero__grid{
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "media" "text" "search" "trust";
    row-gap: 22px;
  }
  .jc-h-hero__text{ align-self: auto; }
  .jc-h-hero__arch{
    aspect-ratio: 16 / 8;
    max-height: 380px;
    border-radius: var(--h-r-lg);
  }
  .jc-h-hero__pill{ top: 14px; right: 14px; padding: 8px 12px; font-size: 12px; }
  .jc-h-hero__salon{ left: 14px; bottom: 14px; max-width: calc(100% - 28px); padding: 10px 14px 10px 10px; }
  .jc-h-search{ margin-top: 0; }

  .jc-h-cats,
  .jc-h-offers,
  .jc-h-reviews,
  .jc-h-salons .jc-discovery-scroll{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 15px;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    margin-left: -15px;
    margin-right: -15px;
    padding: 4px 15px 18px;
    scrollbar-width: none;
  }
  .jc-h-cats::-webkit-scrollbar,
  .jc-h-offers::-webkit-scrollbar,
  .jc-h-reviews::-webkit-scrollbar,
  .jc-h-salons .jc-discovery-scroll::-webkit-scrollbar{ display: none; }
  .jc-h-cat{ flex: 0 0 30%; scroll-snap-align: start; }
  .jc-h-offer,
  .jc-h-review{ flex: 0 0 46%; scroll-snap-align: start; }
  .jc-h-salons .jc-discovery-scroll > [class*="col-"]{
    flex: 0 0 44%;
    max-width: 44%;
    scroll-snap-align: start;
  }
  .jc-h-journey{ grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .jc-h-step::after{ display: none; }
  .jc-h-owner{ grid-template-columns: minmax(0, 1fr); padding: 40px 36px; gap: 28px; }
  .jc-h-owner__actions{ flex-direction: row; flex-wrap: wrap; }
}

/* Tablet: 4 segments in one row is too cramped, use a 2x2 search card. */
@media (min-width: 768px) and (max-width: 991px){
  .jc-h-search{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 8px;
    border-radius: var(--h-r);
  }
  .jc-h-search__field{ border-radius: 14px; }
  .jc-h-search__field--cat{ border-top: 1px solid var(--h-line); border-radius: 0 0 0 14px; }
  .jc-h-search__field--cat::before{ display: none; }
  .jc-h-search__submit{ min-height: 56px; margin: 8px 0 0 8px; border-radius: 14px; }
}

@media (max-width: 767px){
  .jc-h-sec{ padding: 52px 0; }
  .jc-h-sec--tight{ padding: 32px 0; }
  .jc-h-head{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 22px;
  }
  .jc-h-head--center{ align-items: center; }
  .jc-h-more{ min-height: 44px; padding: 0; border: 0; color: var(--h-rose); }
  .jc-h-more:hover,
  .jc-h-more:focus-visible{ background: transparent; color: var(--h-ink); }
  .jc-h-sub{ font-size: 15px; margin-top: 8px; }

  .jc-h-hero{ padding: 16px 0 36px; }
  .jc-h-hero__grid{ row-gap: 18px; }
  .jc-h-hero__arch{ aspect-ratio: 16 / 10; }
  .jc-h-eyebrow{ margin-bottom: 12px; font-size: 11px; padding: 6px 12px; }
  .jc-h-hero__title{ margin-bottom: 12px; }
  .jc-h-hero__lead{ font-size: 16px; line-height: 1.55; }
  .jc-h-hero__salon-thumb{ width: 44px; height: 44px; border-radius: 12px; }
  .jc-h-hero__salon-name{ font-size: 14px; }
  .jc-h-hero__salon-meta{ font-size: 12px; }

  .jc-h-search{
    flex-direction: column;
    padding: 6px;
    border-radius: var(--h-r);
  }
  .jc-h-search__field{
    min-height: 64px;
    padding: 10px 14px;
    border-radius: 0;
    border-bottom: 1px solid var(--h-line);
  }
  .jc-h-search__field ~ .jc-h-search__field::before{ display: none; }
  .jc-h-search__field--where{ order: -1; }
  .jc-h-search__field--cat{ border-bottom: 0; }
  .jc-h-search__submit{
    width: 100%;
    min-height: 54px;
    margin-top: 6px;
    border-radius: 14px;
  }
  .jc-h-hero__trust{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .jc-h-hero__trust li{ font-size: 13px; gap: 8px; }
  .jc-h-hero__trust-icon{ width: 30px; height: 30px; font-size: 14px; }

  .jc-h-cat{ flex-basis: 42%; }
  .jc-h-cat__media{ aspect-ratio: 3 / 4; }
  .jc-h-cat__name{ font-size: 15px; }
  .jc-h-cat__body{ padding: 12px 14px; }
  .jc-h-salons .jc-discovery-scroll > [class*="col-"]{ flex-basis: 84%; max-width: 84%; }
  .jc-h-offer,
  .jc-h-review{ flex-basis: 84%; }

  .jc-h-journey{
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
    max-width: 440px;
    margin: 0 auto;
  }
  .jc-h-step{
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    column-gap: 16px;
    padding: 0 0 26px;
    text-align: left;
  }
  .jc-h-step__icon{
    grid-row: 1 / span 3;
    width: 60px;
    height: 60px;
    margin: 0;
    font-size: 24px;
  }
  .jc-h-step:not(:last-child)::after{
    display: block;
    top: 60px;
    bottom: 0;
    left: 29px;
    right: auto;
    border-top: 0;
    border-left: 2px dashed rgba(178, 60, 86, 0.35);
  }
  .jc-h-step__title{ font-size: 20px; margin-bottom: 4px; }
  .jc-h-step__desc{ max-width: none; margin: 0; }

  .jc-h-owner{ padding: 32px 22px; border-radius: var(--h-r); }
  .jc-h-owner__points{ grid-template-columns: minmax(0, 1fr); }
  .jc-h-owner__actions{ flex-direction: column; }
  .jc-h-btn{ width: 100%; }
  .jc-h-app{ flex-direction: column; text-align: center; padding: 24px; }
}

@media (prefers-reduced-motion: reduce){
  body.jc-home .jc-h-cat,
  body.jc-home .jc-h-offer,
  body.jc-home .jc-h-salons .jc-salon-card,
  body.jc-home .jc-h-salons .card__img,
  body.jc-home .jc-h-cat__media img,
  body.jc-home .jc-h-hero__salon{
    transition: none;
  }
}

/* =====================================================================
   PHASE 7 — PUBLIC HEADER & NAVIGATION
   One light, sticky header for every public page (header.blade.php is
   only included by website/layouts/master.blade.php, so admin/owner
   panels are unaffected). Everything is scoped to .jc-nav. The legacy
   JS hooks (.menu-toggle, .main-menu-content, .dropdown-menu-item,
   .header-menu-wrapper/.header-fixed) are kept and restyled here.
   ===================================================================== */
.jc-nav{
  --n-ink: #1F1A1C;
  --n-ink-2: #5B5256;
  --n-line: #EDE2DC;
  --n-cream: #FBF7F3;
  --n-blush: #F6E7E1;
  --n-rose: #B23C56;
  position: sticky;
  top: 0;
  z-index: 1030; /* under Bootstrap modals (1040/1050) and the Phase 3 filter sheet */
  font-family: var(--jc-font);
  background: #fff;
}
.jc-nav .header-menu-wrapper{
  position: relative;
  padding: 0 !important;
  background: #fff;
  border-bottom: 1px solid var(--n-line);
  transition: box-shadow 0.2s ease;
}
/* main.js adds .header-fixed after 10px of scroll. The header is already
   sticky, so here it only means "scrolled": a soft shadow, same height
   (no layout jump). */
.jc-nav .header-menu-wrapper.header-fixed{
  position: relative;
  background: #fff !important;
  box-shadow: 0 12px 30px -20px rgba(70, 35, 42, 0.35);
}
.jc-nav__inner{
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 76px;
}
.jc-nav__brand{
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 44px;
}
.jc-nav__brand img{
  width: auto;
  height: auto;
  max-width: 170px;
  max-height: 40px;
}
.jc-nav a:focus-visible,
.jc-nav button:focus-visible{
  outline: 2px solid var(--n-rose);
  outline-offset: 2px;
}

/* ---- Links ---- */
.jc-nav .main-menu-content{
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: auto;
  margin: 0;
  padding: 0;
  text-align: left;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.jc-nav__links > ul{
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.jc-nav__links li{ position: relative; }
.jc-nav__link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: var(--n-ink);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.jc-nav__link:hover{
  background: var(--n-cream);
  color: var(--n-ink);
  text-decoration: none;
}
.jc-nav__link.is-active{
  background: var(--n-blush);
  color: var(--n-rose);
}
.jc-nav__caret{
  font-size: 12px;
  transition: transform 0.2s ease;
}

/* ---- Categories dropdown (desktop: hover + keyboard focus) ---- */
.jc-nav__dropdown{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 5;
  display: block;
  min-width: 240px;
  max-height: 60vh;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--n-line);
  border-radius: 16px;
  box-shadow: 0 24px 50px -20px rgba(70, 35, 42, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  /* Hide: fade, then drop visibility. Show: visible immediately so the
     links are keyboard-focusable the moment the trigger gains focus. */
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}
.jc-nav__dropdown::before{ /* hover bridge across the 10px gap */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}
.jc-nav__has-dropdown:hover > .jc-nav__dropdown,
.jc-nav__has-dropdown:focus-within > .jc-nav__dropdown{
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.jc-nav__has-dropdown:hover .jc-nav__caret,
.jc-nav__has-dropdown:focus-within .jc-nav__caret{ transform: rotate(180deg); }
.jc-nav__dropdown a{
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--n-ink-2);
}
.jc-nav__dropdown a:hover,
.jc-nav__dropdown a:focus-visible{
  background: var(--n-cream);
  color: var(--n-ink);
  text-decoration: none;
}
.jc-nav__dropdown-all{
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--n-line);
}
.jc-nav__dropdown-all a{ font-weight: 700; color: var(--n-rose); }
.jc-nav .drop-menu-toggle{ display: none; }

/* ---- Right side: Login + Salon Owner Login / account ---- */
.jc-nav__actions{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.jc-nav__login{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: var(--n-ink);
}
.jc-nav__login:hover{ background: var(--n-cream); color: var(--n-ink); text-decoration: none; }
.jc-nav__owner{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--n-ink);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}
.jc-nav__owner:hover{ background: #3A3236; color: #fff; text-decoration: none; }
.jc-nav__account,
.jc-nav__account .navbar-nav,
.jc-nav__account .nav-item{ background: transparent; box-shadow: none; }
.jc-nav__account .navbar-nav{ flex-direction: row; }
.jc-nav__account .nav-link{
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 14px 4px 4px !important;
  border: 1px solid var(--n-line);
  border-radius: 999px;
  color: var(--n-ink);
  font-size: 14px;
  font-weight: 600;
}
.jc-nav__account .nav-link:hover{ background: var(--n-cream); color: var(--n-ink); }
.jc-nav__account .user-thumb img{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}
.jc-nav__account .dropdown-menu{
  position: absolute;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--n-line);
  border-radius: 16px;
  box-shadow: 0 24px 50px -20px rgba(70, 35, 42, 0.35);
}
.jc-nav__account .dropdown-item{ border-radius: 10px; padding: 10px 12px; }
.jc-nav__account .dropdown-item:hover{ background: var(--n-cream); }

/* ---- Toggle (hidden on desktop) ---- */
.jc-nav .menu-toggle{ display: none; }

@media (min-width: 1200px){
  /* !important: jQuery may leave inline display from a mobile slideToggle. */
  .jc-nav .main-menu-content{ display: flex !important; }
}

/* ---- Mobile / tablet: compact bar + full-width sheet ---- */
@media (max-width: 1199px){
  .jc-nav__inner{
    min-height: 64px;
    gap: 12px;
    justify-content: space-between;
  }
  .jc-nav__brand img{ max-width: 150px; max-height: 34px; }
  .jc-nav .menu-toggle{
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: var(--n-blush);
    cursor: pointer;
  }
  .jc-nav .menu-toggle .menu__bar{
    left: 12px;
    width: 20px;
    height: 2px;
    background: var(--n-ink);
  }
  .jc-nav .menu-toggle .menu__bar:nth-child(1){ top: 15px; }
  .jc-nav .menu-toggle .menu__bar:nth-child(2){ top: 21px; }
  .jc-nav .menu-toggle .menu__bar:nth-child(3){ top: 27px; }
  .jc-nav .menu-toggle.active .menu__bar:nth-child(1),
  .jc-nav .menu-toggle.active .menu__bar:nth-child(3){ top: 21px; }

  .jc-nav .main-menu-content{
    display: none; /* opened by main.js slideToggle */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    padding: 12px 20px 24px !important; /* legacy forces padding-left:0 !important */
    background: #fff;
    border-top: 1px solid var(--n-line);
    border-radius: 0 0 24px 24px;
    box-shadow: 0 30px 60px -30px rgba(70, 35, 42, 0.45);
  }
  .jc-nav__links > ul{
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }
  .jc-nav__link{
    display: flex;
    justify-content: space-between;
    width: 100%;
    min-height: 52px;
    padding: 0 14px;
    border-radius: 14px;
    font-size: 17px;
  }
  .jc-nav__link .jc-nav__caret{ display: none; }
  .jc-nav .drop-menu-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: -8px;
    border-radius: 50%;
    background: var(--n-cream);
    color: var(--n-ink);
    font-size: 16px;
    line-height: 1;
  }
  .jc-nav .drop-menu-toggle.active,
  .jc-nav .drop-menu-toggle:hover{ background: var(--n-blush); }
  .jc-nav__dropdown{
    position: static;
    display: none; /* toggled by main.js */
    min-width: 0;
    max-height: none;
    margin: 2px 0 8px 14px;
    padding: 0 0 0 10px;
    border: 0;
    border-left: 2px solid var(--n-blush);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .jc-nav__dropdown::before{ display: none; }
  .jc-nav__dropdown a{ min-height: 44px; font-size: 15px; }
  .jc-nav__actions{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 14px;
    padding-top: 16px;
    border-top: 1px solid var(--n-line);
  }
  .jc-nav__login{ min-height: 50px; border: 1px solid var(--n-ink); }
  .jc-nav__owner{ min-height: 50px; font-size: 15px; }
  .jc-nav__account .nav-link{ width: 100%; }
  .jc-nav__account .navbar-nav{ flex-direction: column; }
  .jc-nav__account .dropdown-menu{ position: static; width: 100%; box-shadow: none; }
}

/* ---- Compatibility: the shared page banner (breadcrumb.blade.php) used
       220–250px top padding purely to sit underneath the old overlaying
       absolute header. The header is now in-flow, so that space is
       removed. The Phase 4 salon hero reuses .breadcrumb-area but without
       .bread-overlay, so it is not affected. ---- */
.breadcrumb-area.bread-overlay{
  padding-top: 80px;
  padding-bottom: 96px;
}
@media (max-width: 767px){
  .breadcrumb-area.bread-overlay{
    padding-top: 44px;
    padding-bottom: 68px;
  }
}
/* Align the header with the homepage's wider (1240px) content column. */
@media (min-width: 1300px){
  body.jc-home .jc-nav .container{ max-width: 1240px; }
}

/* =====================================================================
   PHASE 8 — CATEGORY DISCOVERY (/all-categories)
   Scope: every rule is on brand-new .jc-cp* classes that only exist in
   pages/allCat.blade.php. The Phase 6 palette/type tokens are re-declared
   on the page wrapper so this page shares the homepage's design language
   without touching body.jc-home.
   ===================================================================== */
.jc-cp{
  --h-ink: #1F1A1C;
  --h-ink-2: #5B5256;
  --h-line: #EDE2DC;
  --h-cream: #FBF7F3;
  --h-blush: #F6E7E1;
  --h-peach: #EFCFC0;
  --h-rose: #B23C56;
  --h-rose-soft: #E7A2AD;
  --h-serif: 'Fraunces', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --h-r-lg: 28px;
  --h-r: 20px;
  --h-shadow: 0 12px 32px -14px rgba(70, 35, 42, 0.22);
  --h-shadow-lg: 0 28px 60px -24px rgba(70, 35, 42, 0.34);
  background: var(--h-cream);
  color: var(--h-ink);
}

/* ---------------------------------------------------------------------
   HERO — compact editorial banner
   --------------------------------------------------------------------- */
.jc-cp-hero{
  position: relative;
  overflow: hidden;
  padding: 40px 0 48px;
  background:
    radial-gradient(760px 420px at 92% 0%, rgba(239, 207, 192, 0.55), transparent 62%),
    radial-gradient(420px 320px at -4% 110%, rgba(231, 162, 173, 0.22), transparent 70%),
    linear-gradient(180deg, #FFFFFF 0%, var(--h-cream) 100%);
}
.jc-cp-hero__grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 48px;
}
.jc-cp-crumbs{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--h-ink-2);
}
.jc-cp-crumbs li + li::before{
  content: "/";
  margin-right: 8px;
  color: #B9AEB2;
}
.jc-cp-crumbs a{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -10px 0;   /* 44px tap area without adding layout height */
  color: var(--h-ink-2);
  text-decoration: underline;
  text-decoration-color: rgba(91, 82, 86, 0.35);
  text-underline-offset: 3px;
}
.jc-cp-crumbs a:hover{ color: var(--h-rose); }
.jc-cp-crumbs [aria-current]{ color: var(--h-rose); }
.jc-cp-hero__title{
  font-family: var(--h-serif);
  font-weight: 600;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--h-ink);
  margin: 0 0 14px;
}
.jc-cp-hero__title em{
  font-style: italic;
  font-weight: 500;
  color: var(--h-rose);
}
.jc-cp-hero__lead{
  max-width: 460px;
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--h-ink-2);
}
.jc-cp-hero__stat{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 0;
  padding: 8px 16px 8px 10px;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--h-shadow);
  font-size: 14px;
  font-weight: 700;
  color: var(--h-ink);
}
.jc-cp-hero__stat i{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--h-blush);
  color: var(--h-rose);
  font-size: 16px;
}

/* Collage of three real category photos: arch in the middle, echoing the
   Phase 6 hero arch. Desktop/tablet-landscape only. */
.jc-cp-hero__collage{
  display: flex;
  align-items: flex-end;
  gap: 14px;
}
.jc-cp-hero__tile{
  position: relative;
  display: block;
  overflow: hidden;
  width: 150px;
  height: 200px;
  border-radius: var(--h-r);
  background: linear-gradient(145deg, var(--h-blush) 0%, var(--h-peach) 60%, var(--h-rose-soft) 100%);
  box-shadow: var(--h-shadow-lg);
}
.jc-cp-hero__tile--2{
  width: 180px;
  height: 250px;
  border-radius: 90px 90px var(--h-r) var(--h-r);
}
.jc-cp-hero__tile--3{ height: 170px; margin-bottom: 30px; }
.jc-cp-hero__tile img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: none;
}

/* ---------------------------------------------------------------------
   CATEGORY GRID
   --------------------------------------------------------------------- */
.jc-cp-sec{ padding: 56px 0 72px; }
.jc-cp-head{ margin-bottom: 28px; }
.jc-cp-head__title{
  font-family: var(--h-serif);
  font-weight: 600;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--h-ink);
  margin: 0;
}
.jc-cp-head__sub{
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--h-ink-2);
}
.jc-cp-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jc-cp-grid__item{ display: flex; min-width: 0; }
.jc-cp-card{
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 10px;
  border-radius: 24px;
  background: #fff;
  color: var(--h-ink);
  box-shadow: 0 1px 0 var(--h-line), var(--h-shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.jc-cp-card:hover,
.jc-cp-card:focus-visible{
  transform: translateY(-4px);
  box-shadow: 0 1px 0 var(--h-line), var(--h-shadow-lg);
  color: var(--h-ink);
  text-decoration: none;
}
.jc-cp-card:focus-visible{ outline: 3px solid var(--h-rose); outline-offset: 3px; }
.jc-cp-card__media{
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  background: linear-gradient(145deg, var(--h-blush) 0%, var(--h-peach) 60%, var(--h-rose-soft) 100%);
}
/* Branded fallback (shown whenever the photo is missing or fails). */
.jc-cp-card__initial{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--h-serif);
  font-style: italic;
  font-size: 84px;
  line-height: 1;
  color: rgba(178, 60, 86, 0.38);
}
.jc-cp-card__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.jc-cp-card:hover .jc-cp-card__img{ transform: scale(1.05); }
.jc-cp-card__media::after{
  content: "";
  position: absolute;
  inset: 55% 0 0 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(20, 12, 14, 0) 0%, rgba(20, 12, 14, 0.28) 100%);
  pointer-events: none;
}
.jc-cp-card__icon{
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-shadow: 0 6px 16px -6px rgba(70, 35, 42, 0.45);
}
.jc-cp-card__icon img{
  width: 26px;
  height: 26px;
  object-fit: contain;
  transition: none;
}
.jc-cp-card__body{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex: 1 0 auto;
  padding: 16px 8px 8px 8px;
}
.jc-cp-card__text{ display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.jc-cp-card__name{
  font-family: var(--h-serif);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.2;
  color: var(--h-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.jc-cp-card__count{ font-size: 14px; font-weight: 500; color: var(--h-ink-2); }
.jc-cp-card__go{
  flex-shrink: 0;
  align-self: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--h-line);
  background: var(--h-cream);
  color: var(--h-ink);
  font-size: 18px;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.jc-cp-card:hover .jc-cp-card__go,
.jc-cp-card:focus-visible .jc-cp-card__go{
  background: var(--h-rose);
  border-color: var(--h-rose);
  color: #fff;
  transform: translateX(2px);
}

/* Empty state */
.jc-cp-empty{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 48px 24px;
  text-align: center;
  background: #fff;
  border: 1px dashed var(--h-line);
  border-radius: var(--h-r-lg);
}
.jc-cp-empty__icon{
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--h-blush);
  color: var(--h-rose);
  font-size: 30px;
}
.jc-cp-empty__title{ margin: 0; font-size: 18px; font-weight: 700; color: var(--h-ink); }

/* Shared charcoal pill button (same treatment as the Phase 6/7 CTAs). */
.jc-cp-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--h-ink);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}
.jc-cp-btn:hover,
.jc-cp-btn:focus-visible{ background: var(--h-rose); color: #fff; text-decoration: none; }

/* ---------------------------------------------------------------------
   SUPPORTING CTA — real link into the salon listing
   --------------------------------------------------------------------- */
.jc-cp-more{ padding: 0 0 80px; }
.jc-cp-more__box{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 32px 40px;
  border-radius: var(--h-r-lg);
  background: linear-gradient(120deg, var(--h-blush) 0%, #FBEFEA 60%, #fff 100%);
  border: 1px solid var(--h-line);
}
.jc-cp-more__title{
  font-family: var(--h-serif);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.2;
  color: var(--h-ink);
  margin: 0;
}
.jc-cp-more__sub{ margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: var(--h-ink-2); }

/* ---------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width: 1199px){
  .jc-cp-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .jc-cp-hero__tile{ width: 124px; height: 170px; }
  .jc-cp-hero__tile--2{ width: 150px; height: 214px; border-radius: 75px 75px var(--h-r) var(--h-r); }
  .jc-cp-hero__tile--3{ height: 146px; margin-bottom: 24px; }
}
@media (max-width: 991px){
  .jc-cp-hero__grid{ grid-template-columns: minmax(0, 1fr); }
  .jc-cp-hero__collage{ display: none; }
  .jc-cp-card__media{ aspect-ratio: 1 / 1; }
  .jc-cp-card__go{ display: none; }
  .jc-cp-more__box{ flex-direction: column; align-items: flex-start; padding: 28px; }
}
@media (max-width: 767px){
  .jc-cp-hero{ padding: 24px 0 32px; }
  .jc-cp-crumbs{ margin-bottom: 14px; }
  .jc-cp-hero__lead{ font-size: 16px; }
  .jc-cp-hero__stat{ margin-top: 18px; }
  .jc-cp-sec{ padding: 32px 0 48px; }
  .jc-cp-head{ margin-bottom: 20px; }
  .jc-cp-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .jc-cp-card{ padding: 6px; border-radius: 18px; }
  .jc-cp-card__media{ border-radius: 13px; }
  .jc-cp-card__initial{ font-size: 60px; }
  .jc-cp-card__icon{ left: 8px; bottom: 8px; width: 36px; height: 36px; }
  .jc-cp-card__icon img{ width: 22px; height: 22px; }
  .jc-cp-card__body{ padding: 10px 6px 6px; }
  .jc-cp-card__name{ font-size: 16px; }
  .jc-cp-card__count{ font-size: 13px; }
  .jc-cp-more{ padding-bottom: 56px; }
  .jc-cp-more__box{ padding: 24px 20px; }
  .jc-cp-more__title{ font-size: 22px; }
  .jc-cp-more .jc-cp-btn{ width: 100%; }
}
@media (prefers-reduced-motion: reduce){
  .jc-cp-card,
  .jc-cp-card__img,
  .jc-cp-card__go{ transition: none; }
  .jc-cp-card:hover,
  .jc-cp-card:focus-visible{ transform: none; }
  .jc-cp-card:hover .jc-cp-card__img{ transform: none; }
}

/* =====================================================================
   PHASE 9 — OFFERS & COUPONS (/offers-for-you)
   The page wrapper is `.jc-cp .jc-of`, so it inherits the Phase 8 tokens
   and reuses the Phase 8 hero / breadcrumb / heading / button / CTA-band
   pieces unchanged. Everything below is new .jc-of* (plus one ghost
   button modifier) and only exists in pages/youroffer.blade.php.
   ===================================================================== */
.jc-of-sec{ scroll-margin-top: 88px; }
.jc-of-sec + .jc-of-sec{ padding-top: 0; }

/* Hero jump links (real counts) */
.jc-of-jump{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.jc-of-jump a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px 0 8px;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--h-shadow);
  font-size: 14px;
  font-weight: 700;
  color: var(--h-ink);
  transition: box-shadow 0.2s ease, color 0.2s ease;
}
.jc-of-jump a:hover{ color: var(--h-rose); box-shadow: var(--h-shadow-lg); text-decoration: none; }
.jc-of-jump i{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--h-blush);
  color: var(--h-rose);
  font-size: 16px;
}

/* Buttons */
.jc-cp-btn--ghost{
  background: transparent;
  color: var(--h-ink);
  border: 1px solid var(--h-ink);
}
.jc-cp-btn--ghost:hover,
.jc-cp-btn--ghost:focus-visible{ background: var(--h-ink); color: #fff; }
.jc-of-actions{ display: flex; flex-wrap: wrap; gap: 12px; }

/* Empty state */
.jc-of-empty{ max-width: 640px; margin: 0 auto; }
.jc-of-empty .jc-cp-empty__title{ font-family: var(--h-serif); font-size: 26px; font-weight: 600; }
.jc-of-empty__text{ margin: 0; max-width: 420px; font-size: 15px; line-height: 1.6; color: var(--h-ink-2); }
.jc-of-empty .jc-of-actions{ justify-content: center; margin-top: 6px; }

/* ---------------------------------------------------------------------
   SPECIAL OFFER CARDS
   --------------------------------------------------------------------- */
.jc-of-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jc-of-grid__item{ display: flex; min-width: 0; }
.jc-of-offer{
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 10px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 1px 0 var(--h-line), var(--h-shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.jc-of-offer:hover{ transform: translateY(-4px); box-shadow: 0 1px 0 var(--h-line), var(--h-shadow-lg); }
.jc-of-offer__media{
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--h-blush) 0%, var(--h-peach) 60%, var(--h-rose-soft) 100%);
}
.jc-of-offer__fallback{ font-size: 56px; color: rgba(178, 60, 86, 0.4); }
.jc-of-offer__media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.jc-of-offer:hover .jc-of-offer__media img{ transform: scale(1.04); }
.jc-of-offer__badge{
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--h-ink);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.jc-of-offer__body{ padding: 16px 8px 8px; }
.jc-of-offer__title{
  margin: 0 0 6px;
  font-family: var(--h-serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  color: var(--h-ink);
  overflow-wrap: anywhere;
}
.jc-of-offer__desc{ margin: 0; font-size: 14px; line-height: 1.55; color: var(--h-ink-2); }

/* ---------------------------------------------------------------------
   COUPON TICKETS
   --------------------------------------------------------------------- */
.jc-of-coupons{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jc-of-coupons__item{ display: flex; min-width: 0; }
.jc-of-coupon{
  position: relative;
  display: flex;
  width: 100%;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 1px 0 var(--h-line), var(--h-shadow);
}
/* Value stub, with ticket notches cut into the perforation line. */
.jc-of-coupon__value{
  position: relative;
  flex: 0 0 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 10px;
  border-radius: 22px 0 0 22px;
  background: linear-gradient(160deg, var(--h-blush) 0%, var(--h-peach) 100%);
  border-right: 2px dashed rgba(178, 60, 86, 0.28);
  text-align: center;
}
.jc-of-coupon__value::before,
.jc-of-coupon__value::after{
  content: "";
  position: absolute;
  right: -11px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--h-cream);
}
.jc-of-coupon__value::before{ top: -10px; }
.jc-of-coupon__value::after{ bottom: -10px; }
.jc-of-coupon__amount{
  font-family: var(--h-serif);
  font-weight: 600;
  font-size: 34px;
  line-height: 1;
  color: var(--h-rose);
  overflow-wrap: anywhere;
}
.jc-of-coupon__off{
  margin-top: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--h-ink);
}
.jc-of-coupon__body{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px 22px;
}
.jc-of-coupon__top{ display: flex; }
.jc-of-coupon__title{
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--h-ink);
  overflow-wrap: anywhere;
}
.jc-of-coupon__terms{
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--h-ink-2);
}
.jc-of-coupon__terms li{ display: inline-flex; align-items: center; gap: 6px; }
.jc-of-coupon__terms li::before{
  content: "";
  flex-shrink: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--h-rose-soft);
}
.jc-of-status{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.jc-of-status::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.jc-of-status--live{ background: #E6F2EA; color: #24693F; }
.jc-of-status--soon{ background: #FBF0DA; color: #7A4E00; }
.jc-of-status--used{ background: #EFEAE7; color: var(--h-ink-2); }

/* Code + copy */
.jc-of-code{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 6px 6px 6px 16px;
  border: 1.5px dashed rgba(178, 60, 86, 0.4);
  border-radius: 14px;
  background: var(--h-cream);
}
.jc-of-code__text{
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--h-ink);
  overflow-wrap: anywhere;
}
.jc-of-code__btn{
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  min-width: 96px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: var(--h-ink);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.jc-of-code__btn:hover{ background: var(--h-rose); }
.jc-of-code__btn:focus-visible{ outline: 3px solid var(--h-rose); outline-offset: 2px; }
.jc-of-code__btn.is-copied{ background: #24693F; }
.jc-of-coupon.is-used .jc-of-coupon__value{ filter: grayscale(0.85); }
.jc-of-coupon.is-used .jc-of-code__text{ color: var(--h-ink-2); text-decoration: line-through; }

.jc-of .jc-cp-more__box .jc-of-actions{ flex-shrink: 0; }

/* ---------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width: 1199px){
  .jc-of-grid{ gap: 20px; }
}
@media (max-width: 991px){
  .jc-of-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jc-of-coupons{ grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px){
  .jc-of-jump{ margin-top: 18px; }
  .jc-of-grid{ grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .jc-of-offer{ padding: 8px; border-radius: 20px; }
  .jc-of-offer__media{ aspect-ratio: 16 / 9; }
  .jc-of-offer__body{ padding: 14px 8px 8px; }
  .jc-of-offer__title{ font-size: 20px; }
  .jc-of-coupons{ gap: 16px; }
  .jc-of-coupon__value{ flex-basis: 84px; padding: 16px 6px; }
  .jc-of-coupon__amount{ font-size: 24px; }
  .jc-of-coupon__body{ padding: 16px 16px 18px; }
  .jc-of-coupon__title{ font-size: 16px; }
  .jc-of-code{ flex-direction: column; align-items: stretch; padding: 10px; }
  .jc-of-code__text{ padding: 2px 4px; font-size: 15px; }
  .jc-of-code__btn{ width: 100%; }
  .jc-of .jc-cp-more__box .jc-of-actions,
  .jc-of-empty .jc-of-actions{ width: 100%; flex-direction: column; }
  .jc-of .jc-of-actions .jc-cp-btn{ width: 100%; }
  .jc-of-empty .jc-cp-empty__title{ font-size: 22px; }
}
@media (prefers-reduced-motion: reduce){
  .jc-of-offer,
  .jc-of-offer__media img,
  .jc-of-jump a{ transition: none; }
  .jc-of-offer:hover{ transform: none; }
  .jc-of-offer:hover .jc-of-offer__media img{ transform: none; }
}

/* =====================================================================
   PHASE 6 — MOBILE HOMEPAGE CORRECTION
   Overrides for the homepage (.jc-h-*) only. The hero arch no longer shows
   AdminSetting.bg_img (it could hold a logo): it shows the top category
   banner over a CSS-only artwork, which is also the fallback.
   ===================================================================== */

/* CSS artwork behind / instead of the hero photo — no image, no text. */
.jc-h-hero__art{
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 255, 255, 0.65) 0 12%, transparent 12.5%),
    radial-gradient(120% 80% at 20% 100%, rgba(178, 60, 86, 0.28), transparent 60%),
    radial-gradient(90% 70% at 85% 85%, rgba(239, 207, 192, 0.9), transparent 70%),
    linear-gradient(160deg, #FBEFEA 0%, var(--h-peach) 45%, var(--h-rose-soft) 100%);
}
.jc-h-hero__art::before,
.jc-h-hero__art::after{
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
}
.jc-h-hero__art::before{ width: 70%; aspect-ratio: 1; left: -18%; bottom: -22%; }
.jc-h-hero__art::after{ width: 44%; aspect-ratio: 1; right: 8%; top: 30%; border-color: rgba(178, 60, 86, 0.18); }
/* Keep the photo's z-index inside the arch so the floating pill and
   featured-salon card (siblings of the arch) stay on top of it. */
.jc-h-hero__arch{ isolation: isolate; }
.jc-h-hero__arch img{ z-index: 1; }

/* ---------------------------------------------------------------------
   PHONES (≤767px): text → search → trust → compact photo with the
   featured-salon card; tighter sections; uniform swipe-row cards.
   --------------------------------------------------------------------- */
@media (max-width: 767px){
  .jc-h-sec{ padding: 40px 0; }
  .jc-h-sec--tight{ padding: 28px 0; }
  .jc-h-head{ margin-bottom: 18px; gap: 6px; }
  .jc-h-title{ font-size: 28px; }

  /* Hero */
  .jc-h-hero{ padding: 20px 0 32px; }
  .jc-h-hero__glow{ display: none; }
  .jc-h-hero__grid{
    grid-template-areas: "text" "search" "trust" "media";
    row-gap: 18px;
  }
  .jc-h-hero__title{ font-size: 36px; line-height: 1.05; margin-bottom: 10px; }
  .jc-h-hero__lead{ font-size: 15px; line-height: 1.55; }
  .jc-h-hero__arch{
    aspect-ratio: auto;
    height: 180px;
    max-height: none;
    border-radius: 20px;
    box-shadow: var(--h-shadow);
  }
  .jc-h-hero__pill{ display: none; }
  .jc-h-hero__salon{
    left: 10px;
    right: 10px;
    bottom: 10px;
    max-width: none;
    gap: 10px;
    padding: 8px 12px 8px 8px;
    border-radius: 14px;
  }
  .jc-h-hero__salon-thumb{ width: 40px; height: 40px; border-radius: 10px; }
  .jc-h-hero__salon-label{ font-size: 10px; }

  /* Search: compact stacked card, full-width button */
  .jc-h-search{ padding: 4px; border-radius: 18px; }
  .jc-h-search__field{ min-height: 56px; padding: 8px 14px; }
  .jc-h-search__label{ font-size: 11px; margin-bottom: 1px; }
  .jc-h-search__input,
  .jc-h-search__field--cat .chosen-container-single .chosen-single{ font-size: 16px; }
  .jc-h-search__submit{ min-height: 52px; margin: 4px 0 0; }

  /* Trust: tidy 2 × 2 card */
  .jc-h-hero__trust{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 10px;
    padding: 14px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 1px 0 var(--h-line), var(--h-shadow);
  }
  .jc-h-hero__trust li{ font-size: 13px; line-height: 1.3; gap: 8px; }
  .jc-h-hero__trust-icon{ width: 28px; height: 28px; font-size: 14px; box-shadow: none; background: var(--h-blush); }

  /* Categories: fixed-width swipe cards, same image size everywhere */
  .jc-h-cats{ gap: 12px; }
  .jc-h-cat{ flex: 0 0 148px; }
  .jc-h-cat__media{ aspect-ratio: 4 / 5; }
  .jc-h-cat__initial{ font-size: 56px; }
  .jc-h-cat__body{ padding: 10px 12px; }
  .jc-h-cat__name{ font-size: 14px; }
  .jc-h-cat__count{ font-size: 12px; }

  /* Featured salons / offers / reviews: equal-height swipe cards */
  .jc-h-salons .jc-discovery-scroll > [class*="col-"]{
    display: flex;
    flex: 0 0 82%;
    max-width: 82%;
  }
  .jc-h-salons .jc-discovery-scroll > [class*="col-"] > .jc-salon-card{ width: 100%; }
  .jc-h-offer,
  .jc-h-review{ flex: 0 0 82%; }
  .jc-h-offer{ display: flex; flex-direction: column; }
  .jc-h-offer__body{ flex: 1 1 auto; }

  /* How it works */
  .jc-h-step{ grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; padding-bottom: 20px; }
  .jc-h-step__icon{ width: 52px; height: 52px; font-size: 22px; }
  .jc-h-step:not(:last-child)::after{ top: 52px; left: 25px; }
}

/* =====================================================================
   HOMEPAGE — HERO + SEARCH CATEGORY DROPDOWN
   ===================================================================== */

/* The hero clipped its content (overflow: hidden), which cut off the
   Chosen category dropdown at the hero's bottom edge. Nothing visible
   depends on that clipping: the decorative glow only extends off-canvas
   to the left and up under the opaque sticky header, and html/body keep
   overflow-x: clip, so there is still no horizontal scroll. The search
   form (position: relative; z-index: 3) keeps the open list above the
   sections that follow. */
.jc-h-hero{ overflow: visible; }

/* Legacy style.css forces every open Chosen drop to a fixed 140px with its
   own scrollbar, showing only the search box and ~1 option. In the homepage
   search, let the drop size to its content and scroll the options list. */
.jc-h-search__field--cat .chosen-container.chosen-with-drop .chosen-drop{
  height: auto;
  overflow: visible;
}
.jc-h-search__field--cat .chosen-container .chosen-results{
  max-height: 260px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Desktop hero fits the viewport. At 802px tall (arch up to 640px + 74px
   headline + padding) under a 77px sticky header, the search bar sat below
   the fold on common laptop heights (650–770px): reaching it — or focusing
   Chosen's search box — scrolled the headline up under the sticky header,
   and main.js flipped the dropdown upward. The arch and headline now scale
   with the viewport height so the whole hero, search included, fits. */
@media (min-width: 992px){
  .jc-h-hero{ padding: 40px 0 48px; }
  .jc-h-hero__grid{ row-gap: 22px; }
  .jc-h-hero__title{ font-size: clamp(40px, min(5.4vw, 8.5vh), 74px); }
  .jc-h-hero__arch{
    aspect-ratio: auto;
    height: clamp(340px, calc(100vh - 320px), 600px);
    max-height: none;
  }
}
/* Keep focused search fields clear of the sticky header when the browser
   scrolls them into view. */
.jc-h-search input,
.jc-h-search .chosen-container{ scroll-margin-top: 96px; scroll-margin-bottom: 24px; }

/* =====================================================================
   HOMEPAGE — APP BADGES
   ===================================================================== */

/* App section: the genuine store badges (storage/images/app/gplay.png and
   appstore.png) are white artwork on a transparent background, made for the
   footer's dark band — invisible on this light card. Present each on a
   charcoal badge tile, the standard black store-badge treatment. */
.jc-h-app .jc-app-badges{
  flex-wrap: wrap;
  gap: 12px;
}
.jc-h-app .jc-app-badges a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 16px;
  border-radius: 12px;
  background: var(--h-ink);
  box-shadow: var(--h-shadow);
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.jc-h-app .jc-app-badges a:hover{ background: #3A3236; transform: translateY(-1px); }
.jc-h-app .jc-app-badges a:focus-visible{ outline: 3px solid var(--h-rose); outline-offset: 3px; }
.jc-h-app .jc-app-badges img{
  display: block;
  height: 36px;
  width: auto;
  border-radius: 0;
}
@media (max-width: 767px){
  .jc-h-app .jc-app-badges{ justify-content: center; }
  .jc-h-app .jc-app-badges a{ height: 52px; padding: 0 14px; }
  .jc-h-app .jc-app-badges img{ height: 32px; }
}
@media (prefers-reduced-motion: reduce){
  .jc-h-app .jc-app-badges a:hover{ transform: none; }
}

/* =====================================================================
   PHASE 10 — GLOBAL MOBILE BOTTOM NAVIGATION
   Reuses the same fixed-bar pattern as Phase 4's .jc-sticky-cta (same
   z-index, same env(safe-area-inset-bottom) handling) so the two follow
   one convention. bottomNav.blade.php hides itself on /salon/* routes,
   so this bar and .jc-sticky-cta are never both on screen — nothing here
   needs to account for overlapping the other.
   ===================================================================== */
.jc-bottom-nav,
.jc-bottom-nav-spacer{
  display: none;
}
@media (max-width: 767px){
  .jc-bottom-nav{
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1020; /* matches .jc-sticky-cta: under Bootstrap modals (1040/1050) and .jc-nav (1030) */
    background: var(--jc-surface);
    border-top: 1px solid var(--jc-border);
    box-shadow: 0 -8px 24px rgba(35,33,30,0.1);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .jc-bottom-nav__item{
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 56px;
    padding: 6px var(--jc-space-1);
    color: var(--jc-text-muted);
    text-decoration: none;
  }
  .jc-bottom-nav__item:hover,
  .jc-bottom-nav__item:focus{
    color: var(--jc-text);
    text-decoration: none;
  }
  .jc-bottom-nav__item:focus-visible{
    outline: 2px solid var(--primary_color);
    outline-offset: -2px;
    border-radius: var(--jc-radius-sm);
  }
  .jc-bottom-nav__item.is-active{
    color: var(--primary_color);
  }
  .jc-bottom-nav__icon{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
  }
  .jc-bottom-nav__label{
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
  }
  .jc-bottom-nav-spacer{
    display: block;
    /* +8px buffer beyond the nav's own height, as a safety margin rather
       than assuming pixel-exact agreement with the nav's real rendered
       height on every device. */
    height: calc(56px + env(safe-area-inset-bottom) + var(--jc-space-2));
  }
}

/* =====================================================================
   PHASE 11 — BOOKING WIZARD (/salon/{id}/{name}/booking) MOBILE PASS
   Presentation only. Every class the wizard's own JS (main.js) keys off —
   .wizard-fieldset, .form-wizard-next-btn/-previous-btn/-submit, .show,
   .active, .user-chosen-select — is left exactly as-is; only new, additive
   classes (.jc-booking-wizard, .jc-wizard-actions, .jc-cat-nav,
   .jc-booking-summary) are styled here, plus a mobile-only font-size fix
   already proven on the homepage category search (Phase 6, line ~3537).
   ===================================================================== */

/* ---- iOS Safari auto-zooms any input/select under 16px on focus; the
       chosen.js dropdowns here (timeslot / service_at / address) render at
       the legacy theme's smaller size by default. ---- */
@media (max-width: 767px){
  .jc-booking-wizard .chosen-container-single .chosen-single{
    font-size: 16px;
    height: 46px;
    line-height: 44px;
  }
  .jc-booking-wizard .date-dropper-input{
    font-size: 16px;
  }
}

/* ---- Step 1 category list: a vertical nav-tabs sidebar list only makes
       sense at desktop width; below lg it becomes a horizontal, swipeable
       strip instead of a tall stack pushing the services below the fold. ---- */
@media (max-width: 991px){
  .jc-cat-nav.nav-tabs{
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid var(--jc-border);
    padding-bottom: var(--jc-space-2);
  }
  .jc-cat-nav.nav-tabs .nav-item{
    flex: 0 0 auto;
  }
  .jc-cat-nav.nav-tabs .nav-link{
    white-space: nowrap;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* ---- Service tiles: keep the checkbox target and image a comfortable
       tap/scan size at narrow widths without changing the legacy card's
       own layout rules (flex-direction etc. are untouched). ---- */
@media (max-width: 575px){
  .jc-booking-wizard .checkbox-tile{
    padding: var(--jc-space-2);
  }
  .jc-booking-wizard .mini-list-img img{
    width: 56px;
    height: 56px;
    object-fit: cover;
  }
}

/* ---- Wizard nav buttons: the legacy .float-left/.float-right pair is fine
       at desktop width, but two floated ~120px buttons crowd a narrow
       screen. Stack them full-width with breathing room instead — the
       buttons keep their existing classes/handlers, only the layout of
       their shared wrapper changes. ---- */
@media (max-width: 575px){
  .jc-wizard-actions{
    display: flex;
    flex-direction: column-reverse;
    gap: var(--jc-space-2);
  }
  .jc-wizard-actions .form-wizard-next-btn,
  .jc-wizard-actions .form-wizard-previous-btn,
  .jc-wizard-actions .form-wizard-submit{
    float: none !important;
    width: 100%;
    min-height: 48px;
    margin: 0 !important;
  }
}

/* ---- Step indicator: 5 circles at a fixed 40px still fit down to narrow
       phone widths, just tighten the gap so the connecting line doesn't
       look stretched. ---- */
@media (max-width: 375px){
  .jc-booking-wizard .form-wizard-steps li span{
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 13px;
  }
}

/* ---- Booking summary card: sticky alongside the long form on desktop/
       tablet (so the running total stays visible while scrolling through
       steps), normal in-flow card on mobile where there's no side-by-side
       layout to stick within. ---- */
@media (min-width: 992px){
  .jc-booking-summary{
    position: sticky;
    top: calc(76px + var(--jc-space-3)); /* below the sticky .jc-nav header */
  }
}

/* ---- Coupon carousel + payment method cards: padding/overflow safety at
       narrow widths only — owl.carousel's own JS options (unchanged) still
       control slide count/behavior. ---- */
@media (max-width: 575px){
  .jc-booking-wizard .price-item{
    padding-left: var(--jc-space-2);
    padding-right: var(--jc-space-2);
  }
  .jc-booking-wizard .payment-tab{
    padding: var(--jc-space-3);
  }
  .jc-booking-wizard .payment-tab-toggle label{
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* =====================================================================
   PHASE 12 — MY BOOKINGS (/appointments) MOBILE PASS
   Presentation only — cancelAppointment()/ReviewModel() (main.js) and the
   4 status tabs' data-toggle="tab" behavior are untouched; only new,
   additive classes are styled here.
   ===================================================================== */
@media (max-width: 767px){
  .jc-appt-tabs.nav-tabs{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start !important;
  }
  .jc-appt-tabs.nav-tabs .nav-item{
    flex: 0 0 auto;
  }
  .jc-appt-tabs.nav-tabs .nav-link{
    white-space: nowrap;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Image-beside-text worked at desktop width; on a narrow phone it leaves
     the long detail list too little room. Stack instead. */
  .jc-appt-card.d-flex{
    flex-direction: column;
  }
  .jc-appt-card .mini-list-img{
    margin-bottom: var(--jc-space-2);
  }
  .jc-appt-card .ml-3{
    margin-left: 0 !important;
  }

  /* The absolutely-positioned Cancel button sat top-right over the card;
     with the card now a column its natural width shrinks, so pull it back
     into the normal flow to avoid overlapping the salon name/details. */
  .jc-appt-actions.position-absolute{
    position: static;
    margin-top: var(--jc-space-2);
  }
}

/* =====================================================================
   PHASE 13 — MOBILE FOOTER FIX + BACK-TO-TOP / BOTTOM-NAV COLLISION
   (the .jc-footer-store-badge/-link rules this phase originally added here
   were superseded and removed — see Phase 15 below, which now owns store-
   badge styling under the new .jc-footer-stores wrapper. The back-to-top
   and overall-footer fixes below are unchanged.)
   ===================================================================== */

/* ---- Footer overall: the legacy .footer-item margin-bottom (40px each,
       style.css ~9490) is fine for 1-2 stacked blocks but compounds across
       4; tighten it and the section's own padding at mobile widths only. ---- */
@media (max-width: 767px){
  .jc-footer.footer-area{
    padding-top: var(--jc-space-4);
    padding-bottom: var(--jc-space-2);
  }
  .jc-footer .footer-item{
    margin-bottom: var(--jc-space-4);
  }
  .jc-footer .footer-item .footer__desc{
    margin-top: var(--jc-space-2);
  }
  /* Copyright + language selector: already stack via the legacy .copy-right
     media rule (flex-direction: column) — this just tightens the gap and
     keeps the selector visually attached instead of floating apart. */
  .jc-footer .copy-right{
    gap: var(--jc-space-2);
  }
}

/* ---- #back-to-top: clear the bottom nav instead of sitting on top of its
       last (Profile) tab. Only the vertical position changes; size, icon,
       show/hide behavior (main.js's .btn-active toggle) are untouched. ---- */
@media (max-width: 767px){
  #back-to-top{
    bottom: calc(56px + env(safe-area-inset-bottom) + var(--jc-space-3));
  }
}

/* =====================================================================
   PHASE 14 — LOCATION-BASED DISCOVERY: CITY INDICATOR (/all-salons)
   Markup: allSalon.blade.php's #jc-city-indicator, next to the existing
   #salon_found result count in .jc-results-toolbar (already flex-wrap, so
   this wraps under it on narrow screens without any layout change there).
   ===================================================================== */
.jc-city-indicator{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: var(--jc-space-3);
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--jc-bg);
  border: 1px solid var(--jc-border);
  color: var(--jc-text);
  font-size: 13px;
  font-weight: 600;
}
.jc-city-indicator--empty{
  color: var(--jc-text-muted);
  font-style: italic;
}
.jc-city-indicator__change{
  border: 0;
  background: none;
  padding: 0 0 0 6px;
  margin-left: 2px;
  border-left: 1px solid var(--jc-border);
  color: var(--primary_color);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.jc-city-indicator__change:hover{ text-decoration: underline; }
@media (max-width: 575px){
  .jc-city-indicator{
    margin-left: 0;
    margin-top: var(--jc-space-2);
    width: 100%;
  }
}

/* =====================================================================
   PHASE 15 — FOOTER SUPPORT PANEL (replaces WhatsApp/chat "More ways to
   connect" block) + compact app-store badge row.
   Markup: footer.blade.php's .jc-support-panel / .jc-footer-stores.
   ===================================================================== */
.jc-support-panel{
  max-width: 480px;
  margin: 0 auto var(--jc-space-4);
  padding: var(--jc-space-4) var(--jc-space-3);
  border-radius: var(--jc-radius-lg);
  background: var(--jc-surface);
  box-shadow: var(--jc-shadow-card);
  text-align: center;
}
.jc-support-panel__heading{
  margin: 0 0 var(--jc-space-2);
  color: var(--jc-text);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
}
.jc-support-panel__email{
  display: inline-block;
  min-height: 44px;
  padding: 8px var(--jc-space-3);
  border-radius: var(--jc-radius-md);
  background: var(--jc-bg);
  color: var(--primary_color);
  font-size: 16px;
  font-weight: 700;
  line-height: 28px;
  text-decoration: none;
  word-break: break-word;
}
.jc-support-panel__email:hover,
.jc-support-panel__email:focus{
  color: var(--primary_color);
  text-decoration: underline;
}
@media (max-width: 767px){
  .jc-support-panel{
    margin-bottom: var(--jc-space-3);
    padding: var(--jc-space-3) var(--jc-space-2);
  }
}

.jc-footer-stores{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--jc-space-3);
  margin-bottom: var(--jc-space-2);
}
.jc-footer-stores .jc-footer-store-badge{
  width: auto;
  height: 40px;
}
@media (max-width: 767px){
  .jc-footer-stores .jc-footer-store-badge{
    height: 34px;
  }
}