/* styles2.css — modal, sub-pages, tweaks panel additions */

/* ── Booking modal ──────────────────────────────────────────────────── */
.modal {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(0,0,0,.55);
  display: grid;
  place-items: center;
  padding: 24px;
  animation: modalFadeIn .25s ease;
  backdrop-filter: blur(4px);
}
.modal.is-closing { animation: modalFadeOut .2s ease forwards; }
@keyframes modalFadeIn  { from { opacity: 0; } }
@keyframes modalFadeOut { to   { opacity: 0; } }

.modal-dialog {
  width: min(640px, 100%);
  max-height: min(86vh, 720px);
  background: var(--c-surface);
  color: var(--c-text);
  border-radius: var(--rad-lg);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: modalSlide .3s cubic-bezier(.2,.7,.3,1);
}
@keyframes modalSlide {
  from { transform: translateY(20px) scale(.97); opacity: 0; }
}
.modal-head {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--c-border);
}
.modal-title-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.modal-title {
  font-size: 20px;
  font-weight: var(--font-heading-weight, 500);
  letter-spacing: var(--font-heading-tracking, 0);
}
.modal-x {
  background: transparent; border: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  color: var(--c-textMuted);
  display: grid; place-items: center;
}
.modal-x:hover { background: var(--c-surfaceAlt); color: var(--c-text); }

.modal-steps {
  display: flex; gap: 8px;
  align-items: center;
}
.modal-step {
  display: flex; align-items: center; gap: 8px;
  flex: 1;
  position: relative;
}
.modal-step:not(:last-child)::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--c-border);
  margin-left: 4px;
}
.modal-step-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--c-surfaceAlt);
  color: var(--c-textMuted);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  transition: background .2s, color .2s;
}
.modal-step.is-active .modal-step-dot {
  background: var(--c-primary); color: var(--c-surface);
}
[data-isDark="1"] .modal-step.is-active .modal-step-dot { color: var(--c-bg); }
.modal-step.is-done .modal-step-dot {
  background: var(--c-text); color: var(--c-bg);
}
.modal-step-lbl {
  font-size: 12px;
  color: var(--c-textMuted);
  white-space: nowrap;
}
.modal-step.is-active .modal-step-lbl { color: var(--c-text); font-weight: 500; }

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}
.modal-foot {
  border-top: 1px solid var(--c-border);
  padding: 16px 24px;
  display: flex; justify-content: space-between; align-items: center;
}
.modal-confirm-ctas {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.btn-wa {
  background: #25D366; color: #fff; border-color: #25D366;
}
.btn-wa:hover { background: #1ebe5d; border-color: #1ebe5d; }

/* Step 1: services */
.bm-services { display: flex; flex-direction: column; gap: 20px; }
.bm-group-label {
  font-family: ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-textMuted);
  margin-bottom: 8px;
}
.bm-group ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.bm-svc {
  display: grid;
  grid-template-columns: 1fr auto auto 22px;
  align-items: center;
  width: 100%;
  gap: 12px;
  padding: 12px 14px;
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: var(--rad-md);
  font: inherit;
  text-align: left;
  color: var(--c-text);
  transition: border-color .15s, background .15s;
}
.bm-svc:hover { border-color: color-mix(in srgb, var(--c-primary) 50%, var(--c-border)); }
.bm-svc.is-selected {
  border-color: var(--c-primary);
  background: color-mix(in srgb, var(--c-primary) 8%, var(--c-surface));
}
.bm-svc-l { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bm-svc-name { font-weight: 500; }
.bm-svc-note {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--c-textMuted);
}
.bm-svc-dur {
  font-size: 12.5px;
  color: var(--c-textMuted);
  font-variant-numeric: tabular-nums;
}
.bm-svc-price {
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
.bm-svc-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--c-border);
  display: grid; place-items: center;
  color: transparent;
  transition: background .15s, border-color .15s, color .15s;
}
.bm-svc.is-selected .bm-svc-check {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-surface);
}
[data-isDark="1"] .bm-svc.is-selected .bm-svc-check { color: var(--c-bg); }

/* Step 2: stylists */
.bm-stylists {
  display: flex; flex-direction: column; gap: 8px;
}
.bm-stylist {
  display: grid;
  grid-template-columns: 48px 1fr 22px;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: var(--rad-md);
  font: inherit;
  text-align: left;
  color: var(--c-text);
  transition: border-color .15s, background .15s;
}
.bm-stylist:hover { border-color: color-mix(in srgb, var(--c-primary) 50%, var(--c-border)); }
.bm-stylist.is-selected {
  border-color: var(--c-primary);
  background: color-mix(in srgb, var(--c-primary) 8%, var(--c-surface));
}
.bm-stylist.is-selected .bm-svc-check {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-surface);
}
[data-isDark="1"] .bm-stylist.is-selected .bm-svc-check { color: var(--c-bg); }
.bm-stylist-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  overflow: hidden;
}
.bm-stylist-avatar .ph { aspect-ratio: 1 !important; }
.bm-stylist-avatar--any {
  background: var(--c-surfaceAlt);
  display: grid; place-items: center;
  color: var(--c-textMuted);
}
.bm-stylist-name { font-weight: 500; font-size: 15px; }
.bm-stylist-meta { font-size: 12.5px; color: var(--c-textMuted); margin-top: 2px; }

/* Step 3: confirm */
.bm-confirm {
  text-align: center;
  padding: 16px 0 24px;
}
.bm-confirm-eyebrow {
  font-family: ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-textMuted);
  margin-bottom: 14px;
}
.bm-confirm-title {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: var(--font-heading-weight, 500);
  letter-spacing: var(--font-heading-tracking, 0);
  line-height: 1.1;
  margin-bottom: 12px;
}
.bm-confirm-meta {
  display: flex; justify-content: center; align-items: center; gap: 10px;
  font-size: 13.5px;
  color: var(--c-textMuted);
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
}
.bm-confirm-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: currentColor; opacity: .5;
}
.bm-multi-hint {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12.5px; color: var(--c-textMuted);
  padding: 0 2px 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--c-border);
}
.bm-multi-count {
  font-weight: 600; color: var(--c-primary);
  font-variant-numeric: tabular-nums;
}
.bm-confirm-list {
  list-style: none;
  margin: 4px auto 16px;
  padding: 0;
  max-width: 360px;
  text-align: left;
}
.bm-confirm-list-item {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 10px 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--rad-md);
  margin-bottom: 6px;
}
.bm-confirm-list-name { font-weight: 500; font-size: 14px; }
.bm-confirm-list-meta {
  font-size: 12.5px; color: var(--c-textMuted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bm-confirm-note {
  margin-top: 28px;
  padding: 16px 20px;
  background: var(--c-surfaceAlt);
  border-radius: var(--rad-md);
  font-size: 13.5px;
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--c-textMuted);
}
.bm-confirm-note strong { color: var(--c-text); }
.bm-confirm-providers {
  margin-top: 20px;
  display: flex; justify-content: center; gap: 6px; flex-wrap: wrap;
}
.bm-provider-pill {
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--c-surfaceAlt);
  color: var(--c-textMuted);
}
.bm-provider-pill.is-active {
  background: var(--c-text); color: var(--c-bg);
}

/* ── Sub-pages ──────────────────────────────────────────────────────── */
.page-main {
  padding-top: 24px;
}
.page-back {
  display: inline-flex; align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 13.5px;
  color: var(--c-textMuted);
  padding: 8px 0;
  margin: 0 var(--pad-x) 32px;
  max-width: var(--maxw);
}
.page-back:hover { color: var(--c-text); }

.page-services { max-width: var(--maxw); margin: 0 auto; padding-bottom: 80px; }
.page-services .page-back { margin-left: var(--pad-x); }

.full-menu {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: flex; flex-direction: column;
  gap: 56px;
}
.full-menu-group { }
.full-menu-head {
  display: flex; align-items: center; gap: 20px;
  margin-bottom: 24px;
}
.full-menu-head h3 {
  font-size: clamp(26px, 3.2vw, 38px);
  margin: 0;
}
.full-menu-rule {
  flex: 1; height: 1px; background: var(--c-border);
}
.full-menu-count {
  font-family: ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.14em;
  color: var(--c-textMuted);
  text-transform: uppercase;
}
.full-menu-group ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
}
.full-menu-row {
  display: grid;
  grid-template-columns: 2fr 1fr auto;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--c-border);
  align-items: center;
}
.full-menu-blurb {
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-textMuted);
  max-width: 72ch;
  margin: -8px 0 22px;
}
.full-menu-row-name {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: var(--font-heading-weight, 500);
}
.full-menu-row-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-textMuted);
  margin-top: 5px;
  max-width: 58ch;
}
.full-menu-row-dur {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 10px;
  font-size: 13px;
  color: var(--c-textMuted);
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}
.full-menu-row-note {
  font-size: 11.5px;
  font-variant-numeric: normal;
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--c-text);
  background: color-mix(in srgb, var(--c-gold) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-gold) 40%, transparent);
}
.full-menu-row-price {
  font-size: 17px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
  .full-menu-row { grid-template-columns: 1fr auto; }
  .full-menu-row-mid { grid-column: 2; grid-row: 1; }
  .full-menu-row .btn { grid-column: 1 / -1; justify-self: start; }
}

/* Stylist profile */
.page-stylist {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad-x) 80px;
}
.stylist-hero {
  display: grid;
  grid-template-columns: 0.9fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  margin-bottom: 80px;
  align-items: start;
}
.stylist-hero-photo { position: sticky; top: 90px; }
.stylist-hero-photo .ph { aspect-ratio: 3/4; }
.stylist-hero-name {
  font-size: clamp(40px, 6vw, 80px);
  line-height: 1;
  margin: 14px 0 12px;
}
.stylist-hero-role {
  font-size: 17px;
  color: var(--c-textMuted);
  margin-bottom: 20px;
}
.stylist-hero-meta {
  display: flex; align-items: center; gap: 14px;
  font-size: 14px;
  color: var(--c-textMuted);
  padding-bottom: 24px;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.stylist-hero-meta strong { color: var(--c-text); font-weight: 600; }
.stylist-hero-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--c-textMuted); opacity: .5;
}
.stylist-hero-meta a:hover { color: var(--c-primary); }
.stylist-hero-bio, .stylist-hero-specs {
  margin-bottom: 32px;
}
.stylist-hero-bio p {
  font-size: 16px;
  margin-top: 14px;
  color: var(--c-textMuted);
}
.stylist-specs-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 14px;
}
.chip {
  font-size: 13px;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--c-surfaceAlt);
  border: 1px solid var(--c-border);
}
.stylist-cta { margin-top: 28px; }

.stylist-works .sec-head {
  padding: 0;
  margin-bottom: 32px;
}
.stylist-hero-creds { margin-top: 28px; }
.stylist-hero-creds .sec-eyebrow { margin-bottom: 12px; }
.stylist-works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 20px;
}
.stylist-works-grid > .ph { width: 100%; }
.stylist-work { margin: 0; }
.stylist-work-cap {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--c-textMuted);
  letter-spacing: 0.01em;
}
.stylist-work-sep { color: var(--c-gold); }

@media (max-width: 760px) {
  .stylist-hero { grid-template-columns: 1fr; }
  .stylist-hero-photo { position: static; max-width: 360px; }
  .stylist-works-grid { grid-template-columns: 1fr; gap: 26px; }
}

/* ── WhatsApp floating button ───────────────────────────────────────── */
.wa-fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25D366;
  color: #fff;
  border-radius: 999px;
  width: 56px;
  height: 56px;
  box-shadow: 0 4px 16px rgba(37,211,102,.4), 0 1px 4px rgba(0,0,0,.2);
  transition: transform .18s, box-shadow .18s;
  text-decoration: none;
}
.wa-fab:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 24px rgba(37,211,102,.45), 0 2px 8px rgba(0,0,0,.18);
}
@media (max-width: 600px) {
  .wa-fab { bottom: 20px; right: 16px; width: 50px; height: 50px; }
}

/* ── Tweaks panel: extras ───────────────────────────────────────────── */
.twk-palette-name {
  font-size: 11px;
  color: rgba(41,38,27,.6);
  margin-top: -2px;
  padding: 0 2px;
  line-height: 1.4;
}
.twk-palette-vibe { opacity: 0.7; }

/* ── Portfolio embed mode ─────────────────────────────────────────────
   When window.SITE.PORTFOLIO.enabled === true, App adds .app--portfolio
   and renders <PortfolioBanner/>. The banner sits above everything;
   .app--portfolio reserves space at the top of the document for it. */
.app--portfolio {
  --portfolio-banner-h: 40px;
  padding-top: var(--portfolio-banner-h);
}
.app--portfolio .nav { top: var(--portfolio-banner-h); }

.portfolio-banner {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--portfolio-banner-h, 40px);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  padding: 0 16px;
  background: #111; color: #f5f5f5;
  font-family: var(--font-body);
  font-size: 12px; letter-spacing: 0.01em;
  border-bottom: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 4px 18px rgba(0,0,0,.18);
}
.portfolio-banner-tag {
  display: inline-block;
  font-size: 10px; letter-spacing: 0.18em; font-weight: 700;
  padding: 3px 7px;
  background: linear-gradient(135deg, var(--c-primary, #C8859B), var(--c-primaryDark, #7E4A5E));
  color: #fff; border-radius: 3px;
}
.portfolio-banner-msg {
  flex: 0 1 auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.portfolio-banner-link {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255,255,255,.4);
}
.portfolio-banner-link:hover { text-decoration-color: #fff; }
.portfolio-banner-studio {
  margin-left: auto;
  color: rgba(255,255,255,.85);
  font-weight: 500;
  text-decoration: none;
  border-left: 1px solid rgba(255,255,255,.18);
  padding-left: 14px;
}
.portfolio-banner-studio:hover { color: #fff; }

@media (max-width: 560px) {
  .app--portfolio { --portfolio-banner-h: 56px; }
  .portfolio-banner {
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 6px 12px;
    font-size: 11px;
    line-height: 1.3;
  }
  .portfolio-banner-msg { white-space: normal; flex: 1 1 100%; }
  .portfolio-banner-studio { margin-left: 0; border-left: 0; padding-left: 0; }
}