:root {
  --ink: #142630;
  --ink-deep: #0b1c24;
  --ink-soft: #213946;
  --cream: #fff9ee;
  --paper: #f7eedf;
  --gold: #d6ae55;
  --gold-light: #f7dc98;
  --orange: #f4782b;
  --orange-dark: #d85d15;
  --muted: #b9c3c6;
  --line: rgba(247, 220, 152, .2);
  font-family: "Heebo", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; background: var(--ink-deep); }
button, a { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.bsd-mark {
  position: fixed; top: 4px; left: 50%; z-index: 90; transform: translateX(-50%);
  color: var(--gold-light); font-size: 11px; font-weight: 800; line-height: 1;
  opacity: .78; pointer-events: none;
}

.app-shell {
  min-height: 100dvh;
  color: var(--cream);
  background:
    radial-gradient(circle at 12% 18%, rgba(214, 174, 85, .11), transparent 28%),
    radial-gradient(circle at 88% 82%, rgba(244, 120, 43, .08), transparent 26%),
    linear-gradient(145deg, #10242e 0%, #091920 100%);
}

.home-view {
  width: min(100%, 1440px);
  min-height: 100dvh;
  margin: auto;
  padding: clamp(14px, 2.2vw, 28px) clamp(16px, 4vw, 64px) 12px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(12px, 2dvh, 22px);
  overflow: hidden;
}

.site-header { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); grid-template-areas: "supervision brand bsd"; align-items: center; gap: 12px; }
.brand { grid-area: brand; justify-self: center; display: inline-flex; align-items: center; color: inherit; text-decoration: none; }
.brand-mark {
  width: clamp(78px, 8vw, 112px); aspect-ratio: 1; display: grid; place-items: center;
  border-radius: 50%; overflow: hidden; border: 1px solid rgba(247,220,152,.46);
  box-shadow: 0 0 28px rgba(214,174,85,.16);
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.sparkle-logo { position: relative; }
.sparkle-logo img { display: block; border-radius: 50%; }
.brand-copy { display: flex; flex-direction: column; line-height: 1; }
.brand-copy strong { color: var(--gold-light); font-size: clamp(20px, 2.2vw, 30px); }
.brand-copy span { margin-top: 6px; color: var(--muted); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; }
.supervision-badge {
  grid-area: supervision; justify-self: start;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 34px; padding: 5px 13px; border: 1px solid rgba(247,220,152,.42);
  border-radius: 999px; background: rgba(214,174,85,.09); color: var(--cream);
  box-shadow: inset 0 0 18px rgba(214,174,85,.04);
  white-space: nowrap;
}
.supervision-badge span { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.supervision-badge strong { color: var(--gold-light); font-size: 15px; line-height: 1; }
.bsd-inline { grid-area: bsd; justify-self: end; color: var(--gold-light); font-size: 15px; font-weight: 800; line-height: 1; opacity: .82; }
.header-tools { display: flex; align-items: center; gap: 8px; }
.tool-button, .languages {
  height: 38px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.035); color: var(--cream);
}
.tool-button { width: 38px; display: grid; place-items: center; cursor: pointer; text-decoration: none; }
.whatsapp-button { color: #fff; background: #25d366; border-color: rgba(255,255,255,.32); box-shadow: 0 5px 16px rgba(37,211,102,.18); }
.whatsapp-button:hover, .whatsapp-button:focus-visible { background: #20bd5a; outline: 2px solid rgba(255,255,255,.35); outline-offset: 2px; }
.whatsapp-button svg { display: block; }
.languages { display: flex; align-items: center; padding: 3px; }
.languages button { min-width: 34px; height: 30px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 700; }
.languages .active { color: var(--ink-deep); background: var(--gold-light); }

.home-content { min-height: 0; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(290px, .8fr); gap: clamp(12px, 2vw, 24px); }
.booking-primary-card, .express-opportunity, .manage-card { border: 1px solid var(--line); border-radius: clamp(18px, 2.5vw, 30px); }
.booking-primary-card {
  min-height: 0; padding: clamp(22px, 4vw, 54px); display: flex; flex-direction: column; justify-content: space-between; gap: clamp(14px, 2dvh, 24px);
  background: linear-gradient(145deg, rgba(38,63,74,.96), rgba(18,39,49,.96));
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 30px 70px rgba(0,0,0,.18);
  position: relative; overflow: hidden;
}
.booking-primary-card::after { content: ""; position: absolute; width: 230px; height: 230px; border: 1px solid rgba(214,174,85,.15); border-radius: 50%; right: -90px; top: -100px; box-shadow: 0 0 55px rgba(214,174,85,.06); }
.eyebrow, .mini-label { font-size: clamp(10px, 1vw, 12px); font-weight: 800; letter-spacing: .16em; }
.eyebrow { color: var(--gold-light); display: flex; align-items: center; gap: 8px; }
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 12px var(--orange); }
.welcome { margin: 0 0 4px; color: var(--muted); font-size: clamp(14px, 1.5vw, 19px); }
.welcome.welcome-recognized { color: var(--gold-light); }
h1 { max-width: 760px; margin: 0; font-size: clamp(28px, 3.8vw, 56px); line-height: 1.02; letter-spacing: -.035em; }
[data-i18n]:empty { display: none; }
.mini-label { color: var(--gold); margin-bottom: 7px; }
.primary-action { min-height: 58px; padding: 12px 22px; display: flex; justify-content: space-between; align-items: center; border: 0; border-radius: 14px; background: linear-gradient(135deg, var(--orange), #ff9a4c); color: #152731; font-weight: 900; font-size: clamp(16px, 1.7vw, 21px); cursor: pointer; box-shadow: 0 15px 34px rgba(244,120,43,.2); transition: transform .2s ease, filter .2s ease; }
.primary-action:hover { transform: translateY(-2px); filter: brightness(1.05); }

.choice-panel { min-height: 0; display: grid; grid-template-rows: auto auto auto; align-content: center; gap: clamp(9px, 1.5vw, 16px); }
.express-opportunity { padding: clamp(18px, 2.6vw, 28px); color: var(--ink); background: linear-gradient(155deg, #fffaf0, #eee1cb); border-color: rgba(255,255,255,.7); box-shadow: 0 18px 45px rgba(0,0,0,.14); }
.express-opportunity-head { display: flex; align-items: center; gap: 8px; color: #8a682b; font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.opportunity-dot { width: 8px; height: 8px; border-radius: 50%; background: #51a666; box-shadow: 0 0 0 5px rgba(81,166,102,.12); }
.express-opportunity-body { margin: 20px 0 16px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; align-items: end; }
.express-service, .express-time { min-width: 0; display: flex; flex-direction: column; }
.express-service strong { font-size: clamp(19px, 2vw, 27px); line-height: 1.05; }
.express-service span { margin-top: 5px; color: #68747a; font-size: 11px; }
.express-time { text-align: end; }
.express-time > span { color: #68747a; font-size: 11px; }
.express-time strong { color: var(--orange); font-size: clamp(29px, 3.7vw, 44px); line-height: .95; }
.express-time small { margin-top: 5px; color: #735923; font-weight: 900; }
.express-book-button { width: 100%; min-height: 46px; padding: 9px 14px; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(20,38,48,.16); border-radius: 12px; color: var(--cream); background: var(--ink); font-weight: 900; cursor: pointer; transition: transform .18s ease, background .18s ease; }
.express-book-button:hover { transform: translateY(-1px); background: var(--ink-deep); }
.express-book-button:disabled { opacity: .58; cursor: wait; }
.manage-card { width: 100%; min-height: 102px; overflow: hidden; color: var(--cream); background: linear-gradient(135deg, rgba(214,174,85,.2), rgba(255,255,255,.055)); border-color: rgba(247,220,152,.48); box-shadow: inset 3px 0 var(--gold), 0 12px 28px rgba(0,0,0,.12); transition: border-color .18s ease, background .18s ease; }
.manage-card:hover { border-color: var(--gold-light); background: linear-gradient(135deg, rgba(214,174,85,.27), rgba(255,255,255,.075)); }
.manage-entry { width: 100%; min-height: 100px; padding: 15px 18px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 13px; align-items: center; text-align: left; color: inherit; background: transparent; border: 0; cursor: pointer; font: inherit; }
.manage-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: var(--gold-light); color: var(--ink-deep); font-size: 22px; font-weight: 900; box-shadow: 0 0 22px rgba(247,220,152,.2); }
.manage-copy { min-width: 0; display: flex; flex-direction: column; }
.manage-copy small { color: var(--gold-light); font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.manage-copy strong { margin-top: 2px; font-size: clamp(16px, 1.65vw, 22px); line-height: 1.08; }
.manage-copy > span { margin-top: 4px; color: var(--muted); font-size: 11px; }
.manage-arrow { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid rgba(247,220,152,.35); border-radius: 50%; color: var(--gold-light); font-weight: 800; }
.home-bookings { padding: 12px 14px; }
.home-bookings-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; padding: 0 2px 9px; }
.home-bookings-head > span { display: flex; flex-direction: column; min-width: 0; }
.home-bookings-head small { color: var(--gold-light); font-size: 8px; font-weight: 900; letter-spacing: .16em; }
.home-bookings-head strong { font-size: 16px; line-height: 1.15; }
.home-bookings-head a { flex: 0 0 auto; color: var(--gold-light); font-size: 11px; font-weight: 800; text-underline-offset: 3px; }
.home-bookings-list { max-height: 132px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--gold) rgba(255,255,255,.08); }
.home-booking-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 58px; padding: 8px 9px; border: 1px solid rgba(247,220,152,.2); border-radius: 12px; background: rgba(7,24,31,.52); }
.home-booking-row + .home-booking-row { margin-top: 6px; }
.home-booking-info { min-width: 0; display: flex; flex-direction: column; }
.home-booking-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.home-booking-info span { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 10px; }
.home-booking-actions { display: flex; gap: 5px; }
.home-booking-actions a { min-height: 30px; display: inline-flex; align-items: center; padding: 5px 8px; border: 1px solid rgba(247,220,152,.45); border-radius: 8px; color: var(--gold-light); font-size: 10px; font-weight: 800; text-decoration: none; }
.home-booking-actions a.is-cancel { border-color: rgba(255,127,62,.42); color: #ffac7d; }
.home-bookings-empty { min-height: 58px; display: grid; place-items: center; color: var(--muted); font-size: 12px; }
.home-footer { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; color: #829197; font-size: 11px; }
.home-footer a { color: inherit; }
.footer-tools, .footer-legal { display: flex; justify-content: center; align-items: center; gap: 9px; }
.footer-tools .tool-button { width: 34px; height: 34px; color: var(--cream); }
.footer-tools .whatsapp-button { color: #fff; }
.footer-tools .languages { height: 34px; }
.footer-tools .languages button { height: 26px; }
.footer-address { display: inline-flex; align-items: center; gap: 5px; text-underline-offset: 3px; }
.footer-address:hover, .footer-address:focus-visible { color: var(--gold-light); }
.gold-stroke { display: inline-block; width: 18px; height: 3px; border-radius: 3px; background: currentColor; transform: rotate(-10deg); box-shadow: 0 0 9px rgba(214,174,85,.3); }
.footer-crown { width: 12px; height: 2px; color: var(--gold); }

@media (max-width: 720px) {
  .home-view { padding: 10px 12px 8px; gap: 9px; }
  .brand-copy span, .tool-button:not(.whatsapp-button) { display: none; }
  .brand-mark { width: 42px; }
  .home-content { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; gap: 9px; }
  .booking-primary-card { min-height: 178px; padding: 14px 16px; gap: 8px; border-radius: 20px; }
  .booking-primary-card::after { width: 150px; height: 150px; }
  .welcome { display: none; }
  h1 { max-width: 92%; font-size: clamp(23px, 6.8vw, 31px); line-height: 1.04; }
  .primary-action { min-height: 47px; padding: 8px 15px; font-size: 15px; }
  .choice-panel { grid-template-rows: auto auto auto; align-content: start; gap: 7px; }
  #nestor-launcher-root { order: -1; }
  #nestor-launcher-root .nestor-fab { min-height: 58px !important; justify-content: center !important; border-color: rgba(247,220,152,.5) !important; box-shadow: 0 10px 25px rgba(0,0,0,.18), inset 3px 0 var(--orange) !important; }
  .express-opportunity { padding: 12px 14px; border-radius: 17px; }
  .express-opportunity-body { margin: 9px 0; }
  .express-service strong { font-size: 16px; }
  .express-service span { font-size: 10px; }
  .express-time strong { font-size: 29px; }
  .express-book-button { min-height: 38px; }
  .manage-card { min-height: 68px; border-radius: 15px; }
  .manage-entry { min-height: 66px; padding: 8px 10px; gap: 9px; }
  .manage-card.is-recognized { min-height: 164px; }
  .manage-icon { width: 38px; height: 38px; border-radius: 11px; font-size: 18px; }
  .manage-copy small { font-size: 7px; }
  .manage-copy strong { font-size: 14px; }
  .manage-copy > span { margin-top: 1px; font-size: 9px; }
  .manage-arrow { width: 30px; height: 30px; }
  .home-footer { gap: 7px; flex-wrap: wrap; font-size: 9px; line-height: 1.2; }
}

@media (max-width: 720px) and (max-height: 620px) {
  .home-view { padding-block: 6px; gap: 5px; }
  .brand-mark { width: 34px; }
  .brand-copy strong { font-size: 18px; }
  .header-tools { gap: 4px; }
  .tool-button, .languages { height: 34px; }
  .home-content { gap: 5px; }
  .booking-primary-card { min-height: 138px; padding: 10px 13px; gap: 5px; }
  h1 { font-size: clamp(21px, 6.2vw, 26px); }
  .primary-action { min-height: 41px; }
  .choice-panel { gap: 5px; }
  #nestor-launcher-root .nestor-fab { min-height: 48px !important; padding-block: 6px !important; }
  .express-opportunity { padding: 8px 11px; }
  .express-opportunity-body { margin: 5px 0; }
  .express-time strong { font-size: 25px; }
  .express-book-button { min-height: 34px; }
  .manage-card { min-height: 56px; }
  .manage-entry { min-height: 54px; }
  .manage-card.is-recognized { min-height: 138px; }
  .home-bookings { padding-block: 8px; }
  .home-bookings-list { max-height: 94px; }
  .home-footer { display: flex; gap: 2px; font-size: 7px; }
  .footer-tools .tool-button { width: 27px; height: 27px; }
  .footer-tools .languages { height: 27px; }
  .footer-tools .languages button { height: 21px; min-width: 27px; }
}

@media (max-height: 650px) and (orientation: landscape) {
  .home-view { padding-block: 8px; gap: 8px; }
  .brand-mark { width: 40px; }
  .brand-copy strong { font-size: 19px; }
  .booking-primary-card { padding: 20px; gap: 9px; }
  h1 { font-size: clamp(28px, 5vw, 48px); }
  .primary-action { min-height: 46px; }
  .express-opportunity { padding-block: 16px; }
  .manage-card { min-height: 62px; }
}

/* Booking prototype */
[hidden] { display: none !important; }
.booking-view {
  width: min(100%, 1440px); min-height: 100dvh; margin: auto; display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.65fr);
  background: var(--paper); color: var(--ink);
}
.booking-rail {
  min-height: 100dvh; padding: clamp(22px, 3vw, 46px); display: flex; flex-direction: column;
  background:
    radial-gradient(circle at 10% 70%, rgba(214,174,85,.13), transparent 32%),
    linear-gradient(155deg, var(--ink-soft), var(--ink-deep)); color: var(--cream);
  position: relative; overflow: hidden;
}
.booking-rail::after { content: ""; position: absolute; width: 290px; height: 290px; border: 1px solid rgba(214,174,85,.14); border-radius: 50%; left: -170px; bottom: -130px; pointer-events: none; }
.back-home { align-self: flex-start; border: 0; background: transparent; color: var(--muted); padding: 0; cursor: pointer; font-size: 13px; text-decoration: none; }
.rail-brand { margin-top: clamp(30px, 7dvh, 74px); display: flex; align-items: center; gap: 13px; }
.rail-logo { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; border: 1px solid rgba(247,220,152,.45); }
.rail-logo img { width: 100%; height: 100%; object-fit: cover; }
.rail-brand > span:last-child { display: flex; flex-direction: column; }
.rail-brand strong { font-size: 28px; color: var(--gold-light); line-height: 1; }
.rail-brand small { margin-top: 7px; color: var(--muted); }
.rail-message { margin: clamp(28px, 6dvh, 64px) 0 30px; position: relative; }
.rail-ornament { color: var(--gold); }
.rail-message p { font-size: clamp(24px, 2.6vw, 39px); line-height: 1.07; font-weight: 800; letter-spacing: -.03em; margin: 10px 0 0; }
.booking-summary { margin-top: auto; border-top: 1px solid var(--line); padding-top: 21px; position: relative; z-index: 1; }
.summary-label { color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.summary-empty { margin-top: 10px; color: #85949a; line-height: 1.35; }
.summary-content { margin-top: 14px; display: grid; gap: 11px; }
.summary-content > div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.summary-content small { color: var(--muted); }
.summary-content strong { text-align: right; }
.basket-lines { display: grid; gap: 7px; }
.basket-line { padding: 8px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; }
.basket-line strong { color: var(--gold-light); text-align: left; }
.basket-line small { grid-column: 1 / -1; color: var(--muted); }

.booking-main { min-height: 100dvh; padding: clamp(20px, 3vw, 46px) clamp(20px, 5vw, 78px); display: grid; grid-template-rows: auto auto minmax(0, 1fr); background: linear-gradient(150deg, #fffaf1, #f3e8d8); }
.booking-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.booking-kicker { color: #9a702d; font-size: 10px; font-weight: 900; letter-spacing: .18em; }
.booking-header h2 { margin: 4px 0 0; font-size: clamp(22px, 3vw, 40px); line-height: 1; letter-spacing: -.035em; }
.booking-languages { display: flex; gap: 3px; padding: 3px; border: 1px solid rgba(20,38,48,.13); border-radius: 999px; }
.booking-languages button { width: 34px; height: 29px; border: 0; border-radius: 999px; background: transparent; color: #7d898f; cursor: pointer; font-size: 11px; font-weight: 800; }
.booking-languages .active { background: var(--ink); color: var(--gold-light); }
.booking-progress { margin: clamp(18px, 3dvh, 30px) 0; display: flex; align-items: center; }
.progress-item { border: 0; padding: 0; background: transparent; color: #9aa0a1; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.progress-item span { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #c8c5be; font-size: 11px; font-weight: 900; }
.progress-item strong { font-size: 12px; }
.progress-item.active { color: var(--ink); }
.progress-item.active span { background: var(--orange); border-color: var(--orange); color: var(--ink); box-shadow: 0 0 0 5px rgba(244,120,43,.1); }
.progress-item.done { color: var(--ink); }
.progress-item.done span { background: var(--ink); border-color: var(--ink); color: var(--gold-light); }
.booking-progress i { flex: 1; height: 1px; margin: 0 10px; background: #d8d1c6; }
.booking-stage { min-height: 0; position: relative; }
.booking-step { display: none; animation: stage-in .35s ease both; }
.booking-step.active { display: block; }
@keyframes stage-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.step-heading { display: flex; gap: 15px; align-items: flex-start; margin-bottom: 18px; }
.step-heading > span { color: var(--gold); font-size: 12px; font-weight: 900; margin-top: 5px; }
.step-heading h3 { margin: 0; font-size: clamp(21px, 2.5vw, 31px); line-height: 1.05; }
.step-heading p { margin: 5px 0 0; color: #748087; font-size: 13px; }

.youth-offer, .tuesday-offer, .loyalty-reminder {
  border: 1px solid rgba(172,126,43,.24); border-radius: 17px;
  background: linear-gradient(115deg, rgba(255,248,227,.95), rgba(245,225,178,.58));
}
.youth-offer { min-height: 70px; padding: 11px 18px; display: flex; align-items: center; gap: 14px; margin-bottom: 14px; position: relative; overflow: hidden; }
.offer-seal { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--gold-light); font-weight: 900; }
.youth-offer strong, .tuesday-offer strong { font-size: 15px; }
.youth-offer p, .tuesday-offer p { margin: 1px 0 0; color: #746b5d; font-size: 12px; }
.offer-spark { margin-left: auto; color: var(--gold); animation: sparkle 2.5s ease-in-out infinite; }
@keyframes sparkle { 50% { opacity: .35; transform: scale(.8) rotate(-10deg); } }
.person-field { margin: 0 0 12px; display: flex; align-items: center; gap: 12px; color: #6f797d; font-size: 12px; font-weight: 800; }
.person-field input { flex: 1; min-height: 42px; padding: 8px 12px; border: 1px solid rgba(20,38,48,.15); border-radius: 11px; background: rgba(255,255,255,.62); color: var(--ink); font: inherit; outline: none; }
.person-field input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(244,120,43,.1); }
.core-loading, .core-error { grid-column: 1 / -1; min-height: 100px; display: flex; align-items: center; justify-content: center; gap: 10px; color: #6f7b7f; border: 1px dashed rgba(20,38,48,.2); border-radius: 15px; }
.core-loading span { width: 17px; height: 17px; border: 2px solid rgba(20,38,48,.15); border-top-color: var(--orange); border-radius: 50%; animation: core-spin .8s linear infinite; }
@keyframes core-spin { to { transform: rotate(360deg); } }
.service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.service-option { min-height: 72px; padding: 12px 16px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; align-items: center; text-align: left; border: 1px solid rgba(20,38,48,.12); border-radius: 15px; background: rgba(255,255,255,.55); color: var(--ink); cursor: pointer; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.service-option:hover { transform: translateY(-2px); border-color: rgba(244,120,43,.55); }
.service-option.selected { border-color: var(--orange); background: #fff7ed; box-shadow: inset 4px 0 var(--orange), 0 8px 22px rgba(68,40,18,.08); }
.service-number { color: #b28c49; font-size: 11px; font-weight: 900; }
.service-text { display: flex; flex-direction: column; }
.service-text strong { font-size: 15px; }
.service-duration { color: #7d878b; font-size: 11px; white-space: nowrap; }

.barber-picker { margin-bottom: 16px; padding: 15px 92px 15px 18px; display: flex; align-items: center; gap: 14px; position: relative; border: 2px solid rgba(214,174,85,.82); border-radius: 17px; background: linear-gradient(120deg, rgba(255,250,237,.98), rgba(244,225,179,.62)); box-shadow: 0 0 0 5px rgba(214,174,85,.08), 0 12px 28px rgba(72,51,15,.1); animation: barber-focus 1.6s ease-in-out 2; }
.barber-picker > span:first-child { color: #77591f; font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.barber-options { display: flex; flex-wrap: wrap; gap: 8px; }
.barber-option { min-height: 42px; padding: 8px 17px; position: relative; border: 1px solid rgba(20,38,48,.18); border-radius: 999px; background: rgba(255,255,255,.72); color: var(--ink); cursor: pointer; font-size: 13px; font-weight: 900; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.barber-option:hover { transform: translateY(-2px); box-shadow: 0 7px 17px rgba(20,38,48,.12); }
.barber-option.selected { border-color: var(--ink); background: var(--ink); color: var(--gold-light); box-shadow: 0 7px 18px rgba(11,28,36,.18); }
.barber-attention { width: 62px; height: 50px; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; z-index: 4; }
.barber-attention img { width: 54px; height: 54px; position: absolute; right: 0; top: -2px; object-fit: contain; filter: sepia(1) saturate(1.35) brightness(.72); transform-origin: 80% 20%; animation: barber-scissors-cycle 5s cubic-bezier(.4,0,.2,1) infinite; will-change: transform; }
.barber-picker.scissors-measuring .barber-attention img { animation: none !important; transform: none !important; }
@keyframes barber-focus { 0%,100% { border-color: rgba(214,174,85,.72); } 50% { border-color: var(--orange); box-shadow: 0 0 0 7px rgba(244,120,43,.1), 0 15px 32px rgba(72,51,15,.13); } }
@keyframes barber-scissors-cycle {
  0%, 8% { transform: translate(0,0) rotate(-25deg) scale(.94); }
  25%, 38% { transform: translate(var(--scissors-x, 0), var(--scissors-y, 0)) rotate(-8deg) scale(1.06); }
  58%, 100% { transform: translate(0,0) rotate(-25deg) scale(.94); }
}

.date-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.date-option { min-height: 88px; padding: 9px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(20,38,48,.13); border-radius: 14px; background: rgba(255,255,255,.5); color: var(--ink); cursor: pointer; transition: .18s ease; }
.date-option small { color: #7b8589; font-size: 10px; font-weight: 800; }
.date-option strong { font-size: 27px; line-height: 1.05; }
.date-option > span { color: #9a8155; font-size: 9px; font-weight: 900; }
.date-option.tuesday { border-color: rgba(214,174,85,.75); background: #fff6dc; }
.date-option.tuesday > span { color: var(--orange-dark); }
.date-option.selected { transform: translateY(-3px); background: var(--ink); border-color: var(--ink); color: var(--cream); box-shadow: 0 8px 24px rgba(11,28,36,.18); }
.date-option.selected small { color: var(--gold-light); }
.date-option.selected > span { color: var(--orange); }
.calendar-shell { border: 1px solid rgba(20,38,48,.13); border-radius: 16px; background: rgba(255,255,255,.46); padding: 11px; }
.calendar-head { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 9px; margin-bottom: 8px; }
.calendar-head button { width: 34px; height: 34px; border: 1px solid rgba(20,38,48,.13); border-radius: 50%; background: #fffaf0; color: var(--ink); cursor: pointer; }
.calendar-head button:disabled { opacity: .25; cursor: default; }
.calendar-head strong { font-size: 16px; text-transform: capitalize; }
.calendar-head > span { color: #8d7955; font-size: 10px; font-weight: 800; }
.calendar-week, .calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 4px; }
.calendar-week span { text-align: center; color: #8a9192; font-size: 8px; font-weight: 900; }
.calendar-days { margin-top: 4px; }
.calendar-day { min-height: 41px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--ink); display: grid; place-items: center; position: relative; cursor: pointer; font-weight: 800; }
.calendar-day.has-hebrew-date { align-content: center; gap: 0; line-height: 1; }
.calendar-day-number { font-size: 12px; }
.calendar-day-hebrew { direction: rtl; unicode-bidi: isolate; white-space: nowrap; color: currentColor; font-size: 8px; font-weight: 600; opacity: .58; }
.calendar-day.selected .calendar-day-hebrew { opacity: .82; }
.calendar-day:hover:not(:disabled) { border-color: var(--orange); }
.calendar-day:disabled { color: #c9c4ba; cursor: default; }
.calendar-day.empty { visibility: hidden; }
.calendar-day.has-slots::after, .calendar-day.is-full::after { content: ""; position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: #2f9c72; }
.calendar-day.is-full::after { background: #c77b6b; }
.calendar-day.tuesday:not(:disabled) { background: rgba(214,174,85,.12); color: #805c20; }
.calendar-day.selected { background: var(--ink); color: var(--cream); border-color: var(--ink); box-shadow: 0 5px 15px rgba(11,28,36,.15); }
.tuesday-offer { margin-top: 12px; padding: 11px 16px; display: flex; align-items: center; gap: 13px; animation: offer-in .35s ease both; }
@keyframes offer-in { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
.tuesday-ring { width: 38px; height: 38px; border: 5px solid var(--gold); border-radius: 50%; box-shadow: 0 0 18px rgba(214,174,85,.35); }
/* Le tarif normal : meme place, meme forme, mais sans l'or. Ce n'est pas une
   mauvaise nouvelle a peindre en rouge — c'est une information. */
.tuesday-normal .tuesday-ring { border-color: rgba(31,26,20,.16); box-shadow: none; }
.time-zone { margin-top: 17px; }
.time-zone-head { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; }
.time-zone-head strong { margin-right: auto; }
.time-zone-head span { color: #8a9294; font-size: 10px; }
.time-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.time-grid button { min-height: 44px; border: 1px solid rgba(20,38,48,.14); border-radius: 11px; background: rgba(255,255,255,.56); color: var(--ink); font-weight: 800; cursor: pointer; }
.time-grid button { padding: 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; }
.time-grid button strong { font-size: 13px; }
.time-grid button small { margin-top: 3px; color: #7f898c; font-size: 8px; font-weight: 700; }
.time-grid button.selected small { color: #5e3b20; }
.time-grid button:hover { border-color: var(--orange); }
.time-grid button.selected { background: var(--orange); border-color: var(--orange); box-shadow: 0 8px 20px rgba(244,120,43,.2); }
.time-empty { grid-column: 1 / -1; min-height: 45px; display: grid; place-items: center; color: #899193; border: 1px dashed rgba(20,38,48,.18); border-radius: 11px; font-size: 12px; }
.group-choice { margin-top: 12px; padding: 10px 12px; display: grid; grid-template-columns: 1fr auto auto; gap: 9px; align-items: center; border-radius: 14px; background: var(--ink); color: var(--cream); animation: offer-in .3s ease both; }
.group-choice > div { display: flex; flex-direction: column; }
.group-choice > div span { color: var(--muted); font-size: 10px; }
.group-choice button { min-height: 40px; padding: 7px 12px; border-radius: 10px; font-weight: 800; cursor: pointer; }
.add-person-button { border: 1px solid rgba(247,220,152,.3); background: transparent; color: var(--gold-light); }
.continue-button { border: 0; background: var(--orange); color: var(--ink); }

.waitlist-invite { width: 100%; margin-top: 12px; min-height: 56px; padding: 9px 13px; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; text-align: left; border: 1px solid rgba(214,174,85,.48); border-radius: 13px; background: rgba(255,247,222,.72); color: var(--ink); cursor: pointer; }
.waitlist-invite > span:nth-child(2) { display: flex; flex-direction: column; }
.waitlist-invite small { color: #7d725e; font-size: 10px; }
.waitlist-invite b { color: var(--orange-dark); }
.waitlist-panel { position: fixed; inset: 0; z-index: 13000; padding: 18px; display: grid; place-items: center; background: rgba(5,18,24,.72); backdrop-filter: blur(7px); }
.waitlist-panel[hidden] { display: none; }
.waitlist-sheet { width: min(100%, 620px); max-height: min(82vh, 720px); overflow: auto; padding: 18px; border: 1px solid rgba(214,174,85,.72); border-radius: 20px; background: linear-gradient(145deg, #fffaf0, #f2e4c8); box-shadow: 0 26px 70px rgba(0,0,0,.35); }
body.waitlist-open { overflow: hidden; }
.waitlist-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.waitlist-head button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(20,38,48,.08); color: var(--ink); cursor: pointer; font-size: 19px; }
.waitlist-explanation { margin: 0 0 8px; color: #6f6759; font-size: 11px; line-height: 1.45; }
.waitlist-request { margin: 0 0 10px; padding: 8px 10px; border-inline-start: 3px solid var(--orange); border-radius: 8px; background: rgba(243,112,33,.07); color: var(--ink); font-size: 11px; font-weight: 700; line-height: 1.4; }
.waitlist-periods { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
.waitlist-period { position: relative; cursor: pointer; }
.waitlist-period input { position: absolute; opacity: 0; }
.waitlist-period span { min-height: 49px; padding: 7px 10px; display: flex; flex-direction: column; border: 1px solid rgba(20,38,48,.13); border-radius: 10px; background: #fffaf1; }
.waitlist-period small { color: #7f898c; }
.waitlist-period .waitlist-count { margin-top: 3px; color: #665a43; font-weight: 700; }
.waitlist-period.selected span { border-color: var(--orange); background: #fff0e4; box-shadow: inset 3px 0 var(--orange); }
.waitlist-fields { margin-top: 9px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
.waitlist-fields input { min-height: 42px; padding: 8px 10px; border: 1px solid rgba(20,38,48,.15); border-radius: 10px; background: rgba(255,255,255,.75); color: var(--ink); font: inherit; }
.waitlist-actions { margin-top: 9px; display: flex; gap: 7px; }
.waitlist-actions button { min-height: 40px; padding: 7px 13px; border-radius: 10px; cursor: pointer; font-weight: 800; }
.waitlist-submit { border: 0; background: var(--orange); color: var(--ink); }
.waitlist-cancel { border: 1px solid rgba(20,38,48,.16); background: transparent; color: var(--ink); }
.waitlist-error, .waitlist-done { margin: 9px 0 0; font-size: 11px; font-weight: 700; }
.waitlist-error { color: #a94442; }
.waitlist-done { padding: 10px; border-radius: 10px; background: rgba(47,156,114,.13); color: #246047; }

.client-form { max-width: 680px; display: grid; gap: 12px; }
.local-safety { padding: 9px 12px; display: flex; flex-direction: column; border: 1px solid rgba(214,174,85,.35); border-radius: 11px; background: rgba(255,246,220,.75); color: #715522; font-size: 11px; }
.local-safety[hidden] { display: none; }
.remembered-banner { padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid rgba(47,156,114,.28); border-radius: 12px; background: rgba(224,246,236,.72); color: #245d48; }
.remembered-banner > span { display: flex; flex-direction: column; }
.remembered-banner small { color: #5c7a6e; }
.remembered-banner button { border: 0; background: transparent; color: #9b5b3c; font-weight: 800; cursor: pointer; text-decoration: underline; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.client-form label { display: grid; gap: 5px; font-size: 12px; font-weight: 800; }
.client-form label small { color: #8b9293; font-weight: 500; }
.client-form input[type="text"], .client-form input[type="tel"], .client-form input[type="email"] { width: 100%; min-height: 48px; padding: 10px 13px; border: 1px solid rgba(20,38,48,.16); border-radius: 12px; background: rgba(255,255,255,.62); color: var(--ink); outline: none; font: inherit; }
.client-form input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(244,120,43,.1); }
.consent-line { display: flex !important; align-items: center; gap: 8px !important; color: #697579; font-weight: 500 !important; }
.consent-line input { accent-color: var(--orange); }
.notification-choice { margin: 0; padding: 0; border: 0; }
.notification-choice legend { margin-bottom: 6px; color: var(--ink); font-size: 12px; font-weight: 800; }
.notification-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 4px; border: 1px solid rgba(20,38,48,.14); border-radius: 13px; background: rgba(255,255,255,.42); }
.notification-options label { position: relative; display: block; cursor: pointer; }
.notification-options input { position: absolute; opacity: 0; pointer-events: none; }
.notification-options span { min-height: 39px; display: grid; place-items: center; border-radius: 9px; color: #68757a; font-size: 12px; font-weight: 800; transition: .18s ease; }
.notification-options input:checked + span { background: var(--ink); color: var(--gold-light); box-shadow: 0 5px 15px rgba(11,28,36,.14); }
.notification-options input:focus-visible + span { outline: 3px solid rgba(244,120,43,.28); }
.remember-line { padding: 10px 12px; display: flex !important; align-items: center; gap: 10px !important; border: 1px solid rgba(20,38,48,.13); border-radius: 12px; background: rgba(255,255,255,.45); }
.remember-line input { width: 18px; height: 18px; accent-color: var(--orange); }
.remember-line > span { display: flex; flex-direction: column; }
.remember-line small { color: #7a8588; }
.confirm-button { min-height: 54px; margin-top: 3px; padding: 10px 18px; display: flex; justify-content: space-between; align-items: center; border: 0; border-radius: 13px; background: linear-gradient(135deg, var(--orange), #ff9b4b); color: var(--ink); font-weight: 900; cursor: pointer; }
.confirm-button:disabled { cursor: wait; opacity: .72; }
.booking-form-error { margin: 0; padding: 10px 12px; border: 1px solid rgba(172,55,41,.24); border-radius: 11px; background: #fff0ed; color: #8e2f25; font-size: 12px; font-weight: 800; }
.booking-form-error[hidden] { display: none; }

body.client-access-open { overflow: hidden; }
.client-access { position: fixed; inset: 0; z-index: 12000; padding: 18px; display: grid; place-items: center; background: rgba(5,18,24,.78); backdrop-filter: blur(8px); }
.client-access[hidden] { display: none; }
.client-access-card { width: min(100%, 440px); padding: 24px; position: relative; display: grid; gap: 14px; border: 1px solid rgba(214,174,85,.72); border-radius: 22px; background: linear-gradient(145deg, #fffaf0, #f2e4c8); color: var(--ink); box-shadow: 0 26px 70px rgba(0,0,0,.35); }
.client-access-card h2, .client-access-card p { margin: 0; }
.client-access-card > p { color: #5f6b70; line-height: 1.45; }
.client-access-close { width: 36px; height: 36px; position: absolute; top: 12px; right: 12px; border: 0; border-radius: 50%; background: rgba(20,38,48,.08); color: var(--ink); cursor: pointer; font-size: 24px; }
.client-access-tabs { padding: 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border-radius: 12px; background: rgba(20,38,48,.09); }
.client-access-tabs button { min-height: 40px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); cursor: pointer; font-weight: 900; }
.client-access-tabs button.active { background: #fff; box-shadow: 0 3px 10px rgba(20,38,48,.12); }
.client-access-card label { display: grid; gap: 6px; font-size: 12px; font-weight: 900; }
.client-access-card label[hidden] { display: none; }
.client-access-card input { width: 100%; min-height: 48px; padding: 10px 13px; border: 1px solid rgba(20,38,48,.18); border-radius: 11px; background: rgba(255,255,255,.82); color: var(--ink); font: inherit; }
.client-access-send { min-height: 48px; border: 0; border-radius: 11px; background: var(--orange); color: var(--ink); cursor: pointer; font-weight: 900; }
.client-access-send:disabled { opacity: .65; cursor: wait; }
.client-access-message { margin: 0; padding: 9px 11px; border-radius: 9px; font-size: 12px; font-weight: 800; }
.client-access-message[hidden] { display: none; }
.client-access-message.is-error { background: #fff0ed; color: #8e2f25; }
.client-access-message.is-success { background: #e8f6ef; color: #246047; }
html[dir="rtl"] .client-access-close { right: auto; left: 12px; }

.success-step { text-align: center; padding-top: clamp(8px, 2dvh, 25px); }
.success-halo { width: 90px; height: 90px; margin: 0 auto 12px; position: relative; display: grid; place-items: center; }
.success-halo span { position: absolute; inset: 5px; border: 7px solid var(--gold); border-radius: 50%; box-shadow: 0 0 38px rgba(214,174,85,.42); animation: halo-in .6s cubic-bezier(.2,.9,.2,1.2) both; }
.success-halo i { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--gold-light); font-style: normal; font-size: 25px; z-index: 1; }
.success-halo b { position: absolute; width: 13px; height: 3px; border-radius: 3px; background: var(--orange); box-shadow: 0 0 8px rgba(244,120,43,.35); animation: sparkle 1.8s ease-in-out infinite; }
.success-halo b:nth-of-type(1) { left: -4px; top: 15px; }.success-halo b:nth-of-type(2) { right: -5px; bottom: 16px; animation-delay: .4s; }.success-halo b:nth-of-type(3) { right: 5px; top: -3px; animation-delay: .8s; }
@keyframes halo-in { from { opacity: 0; transform: scale(.5) rotate(-30deg); } to { opacity: 1; transform: none; } }
.success-kicker { color: #9a702d; font-size: 10px; font-weight: 900; letter-spacing: .18em; }
.success-step > h3 { margin: 5px 0; font-size: clamp(28px, 4vw, 48px); letter-spacing: -.04em; }
.success-sub { margin: 0 0 18px; color: #738085; }
.loyalty-reminder { max-width: 700px; margin: auto; padding: 16px 20px; display: flex; gap: 18px; align-items: center; text-align: left; }
.loyalty-reminder strong { font-size: 16px; }
.loyalty-reminder p { margin: 3px 0 0; color: #746b5d; font-size: 12px; }
.loyalty-card-mini { width: 126px; height: 74px; flex: 0 0 126px; padding: 10px; display: flex; flex-wrap: wrap; gap: 5px; align-content: center; justify-content: center; border-radius: 10px; background: var(--ink); color: var(--gold-light); transform: rotate(-3deg); box-shadow: 0 10px 24px rgba(20,38,48,.18); }
.loyalty-card-mini span { width: 100%; font-weight: 900; text-align: center; }
.loyalty-card-mini i { width: 10px; height: 10px; border: 1px solid var(--gold); border-radius: 50%; }
.success-actions { margin-top: 14px; display: flex; justify-content: center; gap: 9px; }
.success-actions button { min-height: 44px; padding: 8px 16px; border-radius: 11px; font-weight: 800; cursor: pointer; }
.calendar-button { border: 0; background: var(--orange); color: var(--ink); }
.calendar-menu { width: min(100%, 430px); margin: 10px auto 0; padding: 12px; border: 1px solid rgba(20,38,48,.14); border-radius: 14px; background: rgba(255,250,241,.98); box-shadow: 0 18px 44px rgba(20,38,48,.16); text-align: left; }
.calendar-menu > strong { display: block; margin: 0 2px 8px; font-size: 12px; }
.calendar-menu button { width: 100%; border-radius: 10px; cursor: pointer; font-weight: 800; }
.calendar-recommended { min-height: 47px; padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; border: 0; background: var(--ink); color: var(--cream); }
.calendar-recommended small { color: var(--gold-light); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.calendar-alternatives { margin-top: 7px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.calendar-alternatives button { min-height: 38px; padding: 6px 8px; border: 1px solid rgba(20,38,48,.14); background: transparent; color: var(--ink); font-size: 10px; }

html[dir="rtl"] .classic-card,
html[dir="rtl"] .manage-card,
html[dir="rtl"] .manage-entry,
html[dir="rtl"] .home-booking-row,
html[dir="rtl"] .service-option,
html[dir="rtl"] .loyalty-reminder,
html[dir="rtl"] .nestor-fab-copy,
html[dir="rtl"] .calendar-menu { text-align: right; }
html[dir="rtl"] .offer-spark { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .waitlist-invite { text-align: right; }
html[dir="rtl"] .round-arrow { right: auto; left: 22px; transform: scaleX(-1); }
html[dir="rtl"] .primary-action > span + span,
html[dir="rtl"] .confirm-button > span:last-child,
html[dir="rtl"] .nestor-invite > b,
html[dir="rtl"] .manage-arrow { transform: scaleX(-1); }
.restart-button { border: 1px solid rgba(20,38,48,.18); background: transparent; color: var(--ink); }

.family-people { display: grid; gap: 10px; }
.family-person { display: grid; grid-template-columns: minmax(150px,.8fr) minmax(220px,1.2fr) 38px; gap: 8px; align-items: end; }
.family-person .person-name { display: grid; grid-template-columns: 34px 1fr; align-items: center; min-width: 0; }
.family-person .person-name > span { display: grid; place-items: center; height: 46px; border-radius: 12px 0 0 12px; background: var(--ink); color: var(--gold-light); font-weight: 800; }
.family-person input, .family-person select { width: 100%; min-height: 46px; border: 1px solid rgba(20,38,48,.16); background: #fff; color: var(--ink); font: inherit; }
.family-person input { min-width: 0; border-left: 0; border-radius: 0 12px 12px 0; padding: 0 12px; }
.service-picker { min-width: 0; padding: 7px 11px 9px; display: grid; gap: 3px; border: 2px solid rgba(214,174,85,.78); border-radius: 13px; background: #fffaf0; box-shadow: 0 5px 16px rgba(72,51,15,.08); cursor: pointer; }
.service-picker-label { color: var(--orange-dark); font-size: 10px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.family-person .service-picker select { min-height: 28px; padding: 0 32px 0 0; border: 0; border-radius: 0; background-color: transparent; font-weight: 800; cursor: pointer; outline: none; }
.service-picker:focus-within { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(244,120,43,.12); }
.family-person > button { width: 38px; height: 38px; margin-bottom: 4px; border: 1px solid rgba(20,38,48,.14); border-radius: 50%; background: transparent; color: var(--muted); font-size: 21px; }
.family-person > button:disabled { opacity: .25; }
.family-add { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; border: 0; background: transparent; color: var(--orange); font: inherit; }
.family-add > span { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid currentColor; border-radius: 50%; font-size: 20px; }
.family-total { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(20,38,48,.12); color: var(--muted); }
.family-total strong { color: var(--ink); font-size: 18px; }
.family-next { width: 100%; min-height: 50px; margin-top: 12px; padding: 0 18px; display: flex; justify-content: space-between; align-items: center; border: 0; border-radius: 14px; background: var(--ink); color: white; font: inherit; font-weight: 800; }
.family-next:disabled { opacity: .4; }
.family-barber-note { margin: 10px 0 0; padding: 9px 11px; border-left: 3px solid var(--gold); background: rgba(214,174,85,.1); color: var(--muted); font-size: 12px; line-height: 1.4; }
.family-success-list { display: grid; gap: 7px; margin: 14px 0; }
.family-success-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid rgba(20,38,48,.12); border-radius: 12px; background: rgba(255,255,255,.65); }
.family-success-item span { display: flex; min-width: 0; flex-direction: column; }
.family-success-item small { color: var(--muted); }
.family-success-item a { flex: none; color: var(--orange); font-weight: 750; }

.nestor-invite { display: none; }
.nestor-face { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg,var(--gold),var(--gold-light)); color: var(--ink); font-weight: 900; box-shadow: 0 0 16px rgba(214,174,85,.28); }
.nestor-invite > span:nth-child(2) { display: flex; flex-direction: column; line-height: 1.2; }
.nestor-invite small { color: var(--muted); }
.nestor-invite b { margin-left: auto; color: var(--orange); }
#nestor-launcher-root { position: relative !important; left: auto !important; bottom: auto !important; width: 100% !important; z-index: 60 !important; }
#nestor-launcher-root .nestor-fab { width: 100% !important; min-width: 0 !important; justify-content: flex-start !important; padding: 10px 14px !important; }
#nestor-launcher-root .nestor-fab-badge { font-size: 0 !important; }
#nestor-launcher-root .nestor-fab-badge::after { content: ""; width: 17px; height: 3px; border-radius: 3px; background: currentColor; transform: rotate(-10deg); box-shadow: 0 0 9px rgba(11,31,58,.25); }
#nestor-launcher-root .nestor-panel { left: auto !important; right: 0 !important; }

@media (max-width: 820px) {
  .booking-view { grid-template-columns: 1fr; }
  .booking-rail { min-height: auto; padding: 12px 14px; flex-direction: row; align-items: center; gap: 12px; }
  .back-home { color: var(--gold-light); }
  .rail-brand { margin: 0 auto 0 0; }
  .rail-logo { width: 38px; height: 38px; }
  .rail-brand strong { font-size: 18px; }
  .rail-brand small, .rail-message, .booking-summary { display: none; }
  .booking-main { min-height: calc(100dvh - 62px); padding: 14px; display: block; overflow: auto; }
  .booking-header h2 { font-size: 23px; }
  .booking-languages { display: none; }
  .booking-progress { margin: 14px 0 18px; }
  .progress-item strong { display: none; }
  .booking-progress i { margin-inline: 6px; }
  .step-heading { margin-bottom: 12px; }
  .step-heading p { font-size: 12px; }
  .youth-offer { min-height: 60px; margin-bottom: 10px; padding: 8px 11px; }
  .offer-seal { width: 40px; height: 40px; flex-basis: 40px; }
  .service-grid { grid-template-columns: 1fr; gap: 7px; }
  .service-option { min-height: 66px; padding: 8px 10px; }
  .date-strip { gap: 5px; overflow-x: auto; }
  .date-option { min-width: 58px; min-height: 73px; }
  .tuesday-offer { padding: 9px 11px; }
  .tuesday-offer p { line-height: 1.15; }
  .time-grid { grid-template-columns: repeat(3, 1fr); }
  .barber-picker { padding: 13px 72px 13px 13px; align-items: flex-start; flex-direction: column; gap: 8px; }
  .barber-attention { width: 58px; right: 7px; transform: translateY(-50%); }
  .waitlist-periods, .waitlist-fields { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .client-form { gap: 9px; }
  .client-form input[type="text"], .client-form input[type="tel"], .client-form input[type="email"] { min-height: 43px; }
  .loyalty-reminder { padding: 12px; gap: 11px; }
  .loyalty-card-mini { width: 98px; height: 65px; flex-basis: 98px; }
  .person-field { align-items: flex-start; flex-direction: column; gap: 4px; }
  .person-field input { width: 100%; }
  .family-person { grid-template-columns: 1fr 34px; }
  .family-person .person-name, .family-person .service-picker { grid-column: 1; }
  .family-person > button { grid-column: 2; grid-row: 1; margin: 4px 0 0; }
  .service-picker { margin-top: 2px; }
  .waitlist-invite:not([hidden]) { position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 9000; width: auto; margin: 0; border-color: var(--orange); background: #fff2cf; box-shadow: 0 12px 36px rgba(7,24,31,.28); }
  .waitlist-sheet { width: 100%; max-height: min(88vh, 760px); margin-top: auto; padding: 16px; border-radius: 22px 22px 0 0; }
  .waitlist-panel { padding: 0; place-items: end center; }
  .calendar-shell { padding: 7px; }
  .calendar-head { grid-template-columns: auto 1fr auto; }
  .calendar-head > span { display: none; }
  .calendar-day { min-height: 37px; font-size: 12px; }
  .group-choice { grid-template-columns: 1fr 1fr; }
  .group-choice > div { grid-column: 1 / -1; }
  .nestor-invite { right: 10px; bottom: 10px; width: auto; min-height: 48px; padding: 5px 8px; }
  .nestor-invite small { display: none; }
  .nestor-face { width: 34px; height: 34px; flex-basis: 34px; }
}

@media (max-height: 700px) and (min-width: 821px) {
  .booking-main { padding-block: 20px; }
  .booking-progress { margin-block: 14px; }
  .step-heading { margin-bottom: 11px; }
  .youth-offer { min-height: 60px; margin-bottom: 9px; padding-block: 7px; }
  .service-option { min-height: 70px; padding-block: 8px; }
  .date-option { min-height: 72px; }
  .time-zone { margin-top: 11px; }
  .client-form { gap: 8px; }
  .client-form input[type="text"], .client-form input[type="tel"], .client-form input[type="email"] { min-height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .barber-picker, .barber-attention img { animation: none; }
}