/* ===========================================================================
   Banooyi — app.css
   Extracted layout/component styles on top of the verbatim design tokens.
   The prototypes ship two fixed frames (mobile 390 / desktop 1120). Here we
   serve ONE responsive document: mobile chrome below the breakpoint, desktop
   chrome above it. Component visuals stay faithful to the prototype's values.
   =========================================================================== */

/* ---- Responsive switch point: below = mobile, at/above = desktop ---- */
:root { --bny-breakpoint: 1024px; }

/* ---- Horizontal scrollers must not trap vertical page scroll on touch ---- */
.bny-hscroll, .bny-mgr-tablewrap { touch-action: pan-x pan-y; }

/* Elements that carry an inline display (grid/flex) so the UA `[hidden]` rule
   (display:none, specificity 0) loses to the inline style and they stay visible.
   Force them hidden when the attribute is present. */
[data-faq-group][hidden],
[data-bny-st-pick][hidden],
[data-onb-verified][hidden],
[data-ppq-guest][hidden],
[data-onb-cat-panel][hidden],
[data-pro-cat-panel][hidden],
[data-pro-cat-count][hidden],
[data-bny-sheet][hidden],
[data-qa-form][hidden],
[data-bk-detail][hidden],
[data-bk-clear][hidden],
[data-svc-form][hidden],
[data-svc-del-scrim][hidden],
[data-staff-detail][hidden],
[data-staff-del-scrim][hidden],
[data-staff-invite][hidden],
[data-staff-inv-form][hidden],
[data-mgb-panel][hidden],
[data-login-fp-reg][hidden],
[data-sd-pane][hidden] { display: none !important; }

/* ---- Search boxes: move the magnifier icon to the trailing end (far-left
   in RTL) and never show the global focus ring on the (transparent) input. */
div:has(> input[style*="background:transparent"]) > svg:first-of-type { order: 1; flex: none; }
input[style*="background:transparent"]:focus-visible,
input[style*="background:transparent"]:focus { box-shadow: none !important; outline: none !important; }
textarea[style*="background:var(--color-surface-alt)"]:focus-visible { box-shadow: none; }

/* Account bookings tabs: full-width on mobile, compact on desktop. */
.bny-acct-bktabs { max-width: none; }
@media (min-width: 1024px) { .bny-acct-bktabs { max-width: 320px; } }

/* ---- About page responsive tweaks ----------------------------------- */
.bny-about-desc { flex:1 1 100%; min-width:0; }
@media (min-width: 560px) { .bny-about-desc { flex:1 1 auto; min-width:160px; } }
@media (max-width: 700px) {
  .bny-about-cta { flex-direction:column; text-align:center; }
  .bny-about-cta-txt { min-width:0; }
  .bny-about-cta-btns { width:100%; flex-direction:column; }
  .bny-about-cta-btns a { width:100%; box-sizing:border-box; }
}

/* ---- Small global niceties (do not override token base.css) ---- */
img { max-width: 100%; }
button { font-family: var(--font-body); }
.bny-page { min-height: 100vh; display: flex; flex-direction: column; }
.bny-main { flex: 1 1 auto; }
.bny-container {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--space-4);
  box-sizing: border-box;
}

/* Hide helper that never clobbers an element's own (often inline) display. */
.bny-hidden { display: none !important; }

/* ---- Home: flash-deals + popular-salons city toggles ------------------- */
.bny-deal-chip { border:1.5px solid var(--color-border); background:var(--color-surface); color:var(--color-text); }
.bny-deal-chip.is-on { border-color:transparent; background:var(--gradient-brand); color:#fff; }
.bny-deal-aside { background:rgba(255,255,255,.14); color:#fff; }
.bny-deal-aside.is-on { background:#fff; color:var(--color-primary-deep); }
.bny-pop-tab { border:1.5px solid var(--color-border); background:var(--color-surface); color:var(--color-text); }
.bny-pop-tab.is-on { border-color:transparent; background:var(--gradient-brand); color:#fff; box-shadow:var(--shadow-sm); }
.bny-pop-rank { border:1.5px solid var(--color-border); background:var(--color-surface); color:var(--color-text); }
.bny-pop-rank.is-on { border-color:var(--color-primary-deep); background:var(--color-primary-100); color:var(--color-primary-deep); }

/* ---- Account dashboard layout ----------------------------------------- */
.bny-acct-grid { display:block; }
.bny-acct-section { display:none; }
.bny-acct-section.is-active { display:block; }
[data-bny-account][data-mobile-open="1"] .bny-acct-nav { display:none; }
[data-bny-account][data-mobile-open="0"] .bny-acct-content { display:none; }
[data-bny-account][data-mobile-open="0"] [data-acct-backbar] { display:none; }
@media (min-width: 1024px) {
  .bny-acct-grid { display:grid; grid-template-columns:280px 1fr; gap:28px; align-items:start; }
  .bny-acct-nav { position:sticky; top:16px; }
  [data-bny-account] .bny-acct-nav { display:block !important; }
  [data-bny-account] .bny-acct-content { display:block !important; }
}

/* ---- Booking wizard layout -------------------------------------------- */
.bny-booking-grid { display:grid; grid-template-columns:1fr; gap:24px; align-items:start; }
.bny-booking-aside { display:none; }
.bny-step-panel { display:none; }
.bny-step-panel.is-active { display:block; }
@media (min-width: 1024px) {
  .bny-booking-grid { grid-template-columns:1fr 340px; }
  .bny-booking-aside { display:block; position:sticky; top:16px; }
  .bny-booking-cta-mobile { display:none !important; }
}

/* ---- Blog responsive layout ------------------------------------------- */
.bny-blog-featured { display:flex; flex-direction:column; }
.bny-blog-feat-cover { position:relative; width:100%; height:190px; background-size:cover; background-position:center; }
.bny-blog-grid { display:flex; flex-direction:column; gap:16px; }
@media (min-width: 1024px) {
  .bny-blog-featured { display:grid; grid-template-columns:1.3fr 1fr; }
  .bny-blog-feat-cover { height:100%; min-height:280px; }
  .bny-blog-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; align-items:stretch; }
}

/* ---- SalonPage responsive layout -------------------------------------- */
.bny-salon-grid { display:grid; grid-template-columns:1fr; gap:26px; }
.bny-salon-hero { height:240px; }
.bny-salon-thumb { width:64px; height:64px; }
/* Mobile: the hero carries an inline `flex:1` (needed for the desktop row
   layout) — in the mobile COLUMN layout that means flex-basis:0 and the empty
   div collapses to 0 height, hiding the salon's main photo. Pin it to the
   prototype's mobile size (full-width, 240px) instead. */
@media (max-width: 1023.98px) {
  .bny-salon-gallery .bny-salon-hero { flex: 0 0 auto !important; width: 100%; }
}
/* Gallery: mobile = main image, thumbnails scroll below. */
.bny-salon-gallery { display:flex; flex-direction:column; gap:10px; }
.bny-salon-thumbs { display:flex; gap:8px; overflow-x:auto; }
@media (min-width: 1024px) {
  .bny-salon-grid { grid-template-columns:1fr 320px; gap:32px; align-items:start; }
  .bny-salon-sidebar { position:sticky; top:16px; }
  .bny-salon-hero { height:380px; }
  /* Desktop = vertical thumbnail strip to the LEFT of the main image (RTL: main first → right). */
  .bny-salon-gallery { flex-direction:row; align-items:stretch; }
  .bny-salon-thumbs { flex-direction:column; flex:none; width:84px; overflow-x:visible; overflow-y:auto; max-height:380px; }
  .bny-salon-thumbs .bny-salon-thumb { width:84px; height:72px; }
}
/* Booking step visibility (revealed by app.js) */
.bny-bk-step[hidden] { display:none; }
/* Portfolio grids carry inline display:grid; force-hide the inactive ones. */
[data-bny-portfolio-grid][hidden] { display:none !important; }
/* Hide the salon-page sticky reserve bar while the mobile drawer is open. */
body.bny-drawer-open [data-bny-reserve-bar],
body.bny-drawer-open [data-bk-cta] { display:none !important; }
/* Mobile needs clearance for the fixed reserve bar; desktop has neither. */
@media (max-width: 1023px) { .bny-salon-page-wrap { padding-bottom:84px; } }

/* Blog filter bar: stack on mobile, single row (search trailing) on desktop. */
.bny-blog-filterbar { flex-direction:column; align-items:stretch; }
.bny-blog-filterbar .bny-blog-searchbox { width:auto !important; } /* mobile: full width (beats the inline 300px) */
@media (min-width: 768px) {
  .bny-blog-filterbar { flex-direction:row; align-items:center; }
  .bny-blog-filterbar .bny-blog-searchbox { width:300px !important; }
}

/* ---- Pricing plan grid (mobile-first) --------------------------------- */
.bny-price-grid { display:grid; grid-template-columns:1fr; gap:14px; align-items:stretch; }
@media (min-width: 720px) {
  .bny-price-grid { grid-template-columns:repeat(2, 1fr); gap:16px; }
}
@media (min-width: 1024px) {
  .bny-price-grid.bny-cols-3 { grid-template-columns:repeat(3, 1fr); }
  .bny-price-grid.bny-cols-4 { grid-template-columns:repeat(4, 1fr); }
}

/* ---- 404 gradient numeral -------------------------------------------- */
.bny-404 { font-family:var(--font-heading); font-weight:700; line-height:1; background:var(--gradient-brand); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }

/* ---- Manager dashboard shell ----------------------------------------- */
.bny-mgr { display:flex; min-height:100vh; background:var(--color-bg); }
.bny-mgr-side { display:none; }
.bny-mgr-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.bny-mgr-top { display:flex; align-items:center; justify-content:space-between; gap:16px; background:var(--color-surface); border-bottom:1px solid var(--color-border); padding:12px 16px; position:sticky; top:0; z-index:20; }
.bny-mgr-content { flex:1; min-width:0; padding:18px 16px 40px; }
.bny-mgr-scrim { position:fixed; inset:0; z-index:1200; background:rgba(34,26,56,.42); opacity:0; pointer-events:none; transition:opacity .2s ease; }
.bny-mgr-drawer { position:fixed; top:0; bottom:0; right:0; z-index:1201; width:274px; max-width:84%; background:var(--color-surface); box-shadow:var(--shadow-lg); display:flex; flex-direction:column; transform:translateX(110%); transition:transform .24s cubic-bezier(.4,0,.2,1); }
.bny-mgr.is-drawer-open .bny-mgr-scrim { opacity:1; pointer-events:auto; }
.bny-mgr.is-drawer-open .bny-mgr-drawer { transform:translateX(0); }
@media (min-width: 1024px) {
  .bny-mgr-side { display:flex; flex-direction:column; flex:none; width:248px; background:var(--color-surface); border-inline-start:1px solid var(--color-border); padding:20px 14px; position:sticky; top:0; height:100vh; box-sizing:border-box; overflow-y:auto; }
  .bny-mgr-burger { display:none !important; }
  .bny-mgr-top { padding:14px 26px; }
  .bny-mgr-content { padding:24px 26px 40px; }
  .bny-mgr-scrim, .bny-mgr-drawer { display:none; }
}
/* Manager content helpers */
.bny-mgr-grid-4 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.bny-mgr-grid-3 { display:grid; grid-template-columns:1fr; gap:14px; }
.bny-mgr-grid-2 { display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width: 640px) { .bny-mgr-grid-4 { grid-template-columns:repeat(4, 1fr); } .bny-mgr-grid-3 { grid-template-columns:repeat(3, 1fr); } }
@media (min-width: 900px) { .bny-mgr-grid-2 { grid-template-columns:1fr 1fr; } }
.bny-mgr-tablewrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.bny-cust-detail.is-open { transform:translateX(0) !important; }

/* ---- Legal/policy doc layout (TOC + body) ---------------------------- */
.bny-legal-grid { grid-template-columns:1fr; }
.bny-legal-toc summary::-webkit-details-marker { display:none; }
@media (min-width: 900px) {
  .bny-legal-grid { grid-template-columns:1fr 260px; }
  .bny-legal-body { order:1; }
  .bny-legal-toc { order:2; position:sticky; top:16px; }
}

/* ---- SalonListing filter controls (toggled by app.js via .is-on) -------- */
.bny-chip { flex:none; white-space:nowrap; font-family:var(--font-body); font-size:13px; font-weight:700; cursor:pointer; padding:8px 14px; border-radius:999px; border:1.5px solid var(--color-border); background:var(--color-surface); color:var(--color-text-soft); }
.bny-chip.is-on { border-color:transparent; background:var(--color-primary-100); color:var(--color-primary-deep); }

.bny-checkrow { display:flex; align-items:center; gap:9px; width:100%; box-sizing:border-box; padding:9px 11px; border:none; border-radius:10px; cursor:pointer; font-family:var(--font-body); font-size:13.5px; font-weight:500; text-align:start; background:transparent; color:var(--color-text); }
.bny-checkrow.is-on { font-weight:700; background:var(--color-primary-100); color:var(--color-primary-deep); }
.bny-checkbox { flex:none; width:18px; height:18px; border-radius:5px; border:1.6px solid var(--color-border-strong); background:transparent; display:inline-flex; align-items:center; justify-content:center; color:#fff; }
.bny-checkrow.is-on .bny-checkbox { border:none; background:var(--gradient-brand); }
.bny-checkrow .bny-check-icon { display:none; }
.bny-checkrow.is-on .bny-check-icon { display:block; }

.bny-region-m { font-family:var(--font-body); font-weight:700; cursor:pointer; padding:7px 10px; border-radius:10px; border:1.5px solid var(--color-border); background:var(--color-surface); color:var(--color-text); display:flex; align-items:center; justify-content:center; gap:6px; }
.bny-region-m.is-on { border-color:transparent; background:var(--color-primary-100); color:var(--color-primary-deep); }

.bny-region-d { box-shadow:var(--shadow-sm); }
.bny-region-d.is-on { box-shadow:0 0 0 3px var(--color-primary-deep); }
.bny-region-d .bny-region-check { display:none; }
.bny-region-d.is-on .bny-region-check { display:inline-flex; }

.bny-seg { display:inline-flex; align-items:center; justify-content:center; height:36px; padding:0 16px; border:none; border-radius:9px; cursor:pointer; font-family:var(--font-body); font-size:13.5px; font-weight:700; background:transparent; color:var(--color-text-soft); }
.bny-seg.is-on { background:var(--gradient-brand); color:#fff; box-shadow:var(--shadow-sm); }

.bny-sortopt { display:block; width:100%; text-align:start; font-family:var(--font-body); font-size:14px; font-weight:500; cursor:pointer; padding:10px 12px; border-radius:10px; border:none; background:transparent; color:var(--color-text); }
.bny-sortopt.is-on { font-weight:700; background:var(--color-primary-100); color:var(--color-primary-deep); }

/* ---- Show/hide chrome by viewport WITHOUT clobbering the element's own
   display. Mobile-first: desktop-only is hidden by default; at the breakpoint it
   reverts to its natural display and mobile-only is hidden. Crucially, "showing"
   never forces a display value — so flex/grid elements that are ALSO toggled
   (the mobile sticky header and the bottom nav) keep their own display:flex. */
.bny-only-desktop { display: none !important; }

@media (min-width: 1024px) {
  .bny-only-desktop { display: revert !important; }
  .bny-only-mobile  { display: none !important; }
}

/* ---- Shared interaction polish from the design system ---- */
.bny-press { transition: transform .14s ease, box-shadow .14s ease, background .14s ease; }
.bny-press:active { transform: scale(.97); }
.bny-press-icon:active { transform: scale(.92); }

/* Horizontal scroller (mirror of tokens base .banooyi-hscroll, used by markup). */
.bny-hscroll {
  overflow-x: auto;
  overflow-y: hidden;
  /* `pan-x` lets horizontal drags scroll the strip while vertical drags pass
     through to scroll the page. NOTE: do NOT add `-webkit-overflow-scrolling:
     touch` here — on iOS it spawns a nested scroll context that swallows the
     vertical gesture, trapping the page (the exact bug we're fixing). */
  touch-action: pan-x pan-y;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.bny-hscroll::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ===========================================================================
   CHROME — Header / Drawer / Bottom nav / Footer
   =========================================================================== */

/* Sticky mobile header */
.bny-mheader {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--color-surface);
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
}

/* Logo recolor: turns the dark logo art into brand purple (matches prototype). */
.bny-logo-purple {
  filter: brightness(0) saturate(100%) invert(22%) sepia(86%) saturate(3000%) hue-rotate(258deg) brightness(95%) contrast(95%);
}
.bny-logo-white { filter: brightness(0) invert(1); }

/* Mobile bottom nav — fixed to the viewport, with iOS safe-area padding. */
.bny-bottomnav {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 25;
  display: flex; justify-content: space-around; align-items: center;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -6px 22px rgba(124, 58, 237, .06);
  padding: 9px 6px calc(11px + env(safe-area-inset-bottom));
}
/* Reserve room for the fixed bottom nav (mobile only). */
@media (max-width: 1023.98px) {
  .bny-page { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
}

/* Drawer (mobile) — fixed overlay; toggled by .is-open on the page root */
.bny-scrim {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(34, 26, 56, .42);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.bny-drawer {
  position: fixed; inset-block: 0; inset-inline-start: 0;
  width: 270px; max-width: 82%;
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  transform: translateX(101%);
  /* Hidden (not just off-screen) when closed so its links leave the tab order
     and the a11y tree — visibility is delayed until the slide-out finishes. */
  visibility: hidden;
  transition: transform .24s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .24s;
  z-index: 41;
}
/* Open state — scoped under html[dir] so it keeps higher specificity than any
   direction-specific resting rule and reliably wins. */
.bny-drawer-open .bny-scrim { opacity: 1; pointer-events: auto; }
html .bny-drawer-open .bny-drawer,
.bny-drawer-open .bny-drawer { transform: translateX(0); visibility: visible; transition: transform .24s cubic-bezier(.4, 0, .2, 1), visibility 0s; }
body.bny-drawer-open { overflow: hidden; }

.bny-drawer-link {
  display: flex; align-items: center; gap: 12px;
  width: 100%; box-sizing: border-box;
  padding: 9px 14px; cursor: pointer; text-align: start; line-height: 1.45;
  border-radius: 14px; background: transparent;
  color: var(--color-text); text-decoration: none;
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
}
.bny-drawer-link:hover { background: var(--color-primary-100); }

/* Desktop header city dropdown + search autocomplete share this popup look. */
.bny-pop {
  position: absolute; z-index: 60;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 10px;
}