/* ==========================================================================
   Marbook · customer app
   ========================================================================== */

/* ---- Top bar ---- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  padding-top: var(--safe-top);
  transition: box-shadow var(--d) var(--ease);
}
@supports (backdrop-filter: blur(1px)) { .topbar { background: rgba(255, 255, 255, 0.82); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); } }
.topbar.is-scrolled { box-shadow: 0 1px 0 var(--line); }
/* Logo in the middle; language on one side, favourites (and, on wide screens, my bookings and
   my account) on the other. */
.topbar .container { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; height: var(--topbar-h); gap: var(--s-3); }
.topbar .brand { justify-self: center; }
.tb-start, .tb-end { display: flex; align-items: center; gap: 2px; min-width: 0; }
.tb-end { justify-self: end; }
.lang-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; transition: background var(--d), transform var(--d-fast); }
.lang-btn:hover { background: var(--surface-2); }
.lang-btn:active { transform: scale(0.94); }
.topbar .nav-link, .topbar .nav-wide { display: none; }
.topbar .avatar-link { margin-inline-start: 6px; border-radius: 50%; }
@media (min-width: 900px) { .topbar .nav-link, .topbar .nav-wide { display: inline-flex; } }
@media (max-width: 899px) { body.overlay-header .topbar { display: none; } }

main#view { min-height: 70dvh; padding-block-end: calc(96px + var(--safe-bottom)); }
body.no-dock main#view { padding-block-end: var(--s-12); }
body.has-cta main#view { padding-block-end: calc(110px + var(--safe-bottom)); }

/* ---- Bottom bar (phones): my bookings · everything · profile ---- */
.dock {
  position: fixed; z-index: 45; inset-inline: 0; bottom: 0;
  display: flex; padding: 6px 6px calc(6px + var(--safe-bottom));
  background: rgba(255, 255, 255, 0.94); box-shadow: 0 -1px 0 var(--line);
}
@supports (backdrop-filter: blur(1px)) { .dock { background: rgba(255, 255, 255, 0.86); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); } }
.dock a {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: 54px; color: var(--ink-3); font-size: 11.5px; font-weight: 600;
  transition: color var(--d) var(--ease);
}
.dock a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-inline: 2px; }
.dock a .icon { transition: transform 300ms var(--ease-spring); }
.dock a:active .icon { transform: scale(0.88); }
.dock a.is-active { color: var(--ink); }
.dock a.is-active .icon { stroke-width: 2.3; }
.dock a::before { content: ""; position: absolute; top: -6px; width: 24px; height: 3px; border-radius: 0 0 3px 3px; background: var(--ink); transform: scaleX(0); transition: transform 300ms var(--ease-out); }
.dock a.is-active::before { transform: scaleX(1); }
.dock a .avatar { --size: 25px; font-size: 10px; box-shadow: 0 0 0 2px var(--surface); }
.dock a.is-active .avatar { box-shadow: 0 0 0 2px var(--ink); }
@media (min-width: 900px) { .dock { display: none !important; } main#view { padding-block-end: var(--s-12); } }

/* ---- Discover ---- */
.discover-head { padding-block: var(--s-3) var(--s-2); }
.search { position: relative; max-width: 720px; }
.search .icon { position: absolute; inset-inline-start: 18px; top: 50%; transform: translateY(-50%); color: var(--ink); pointer-events: none; }
.search input { width: 100%; height: 52px; padding: 0 20px 0 50px; border-radius: var(--r-pill); border: 1.5px solid transparent; background: var(--surface-2); font-size: 16px; font-weight: 500; transition: background var(--d), border-color var(--d), box-shadow var(--d); }
[dir="rtl"] .search input { padding: 0 50px 0 20px; }
.search input::placeholder { color: var(--ink-3); }
.search input:hover { background: var(--surface-3); }
.search input:focus { background: var(--surface); border-color: var(--ink); box-shadow: var(--shadow-2); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.filter-row { display: flex; gap: 8px; align-items: center; margin-block-start: var(--s-4); overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); padding-block: 2px; }
.filter-row::-webkit-scrollbar { display: none; }
.filter-row .divider { flex: none; width: 1px; height: 20px; background: var(--line-2); margin-inline: 4px; }
.filter-row .chip { flex: none; }
.chip-select { position: relative; }
.chip-select select { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 16px; }

/* Categories under the search box (a scrolling row on phones) */
.cat-row { display: flex; gap: 8px; margin-block-start: var(--s-4); overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter); }
.cat-row::-webkit-scrollbar { display: none; }
.cat-row a { flex: none; display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; font-size: 14.5px; white-space: nowrap; transition: box-shadow var(--d), background var(--d), color var(--d); }
[dir="rtl"] .cat-row a { padding: 6px 6px 6px 16px; }
.cat-row a:hover { box-shadow: inset 0 0 0 1px var(--line-3); }
.cat-row a.is-active { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.cat-row .cat-tile { width: 32px; height: 32px; border-radius: 50%; }
@media (min-width: 900px) {
  .cat-row { margin-block-start: var(--s-6); margin-inline: 0; padding-inline: 0; }
  .cat-row a { gap: 12px; padding: 8px 18px 8px 8px; font-size: 15px; }
  [dir="rtl"] .cat-row a { padding: 8px 8px 8px 18px; }
  .cat-row .cat-tile { width: 40px; height: 40px; }
}

.feed-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-block: var(--s-6) var(--s-4); }
.feed-head h2 { font-size: 22px; }
.feed-head .subtle { font-size: 14px; white-space: nowrap; }

.grid-cards { display: grid; gap: var(--s-6) var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 600px) { .grid-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-cards { grid-template-columns: repeat(3, 1fr); } }

.biz-card { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.biz-card-media { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; isolation: isolate; }
.biz-card-cover { aspect-ratio: 16 / 9; border-radius: var(--r-lg); }
.biz-card-media .cover-art { transition: transform 600ms var(--ease-out); }
.biz-card-media:hover .cover-art { transform: scale(1.035); }
.biz-card-media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04); pointer-events: none; }
.biz-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.biz-card-title { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.biz-card-title h3 { font-size: 17px; line-height: 1.3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.biz-card-title h3 a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.biz-card-meta { color: var(--ink-3); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.biz-card .avail { margin-block-start: 2px; }
a.avail:hover { text-decoration: underline; text-underline-offset: 3px; }

.join-banner {
  margin-block-start: var(--s-12); padding: var(--s-6); border-radius: var(--r-xl); background: var(--ink); color: var(--on-ink);
  display: grid; gap: var(--s-4); align-items: center; position: relative; overflow: hidden;
}
.join-banner h2 { color: var(--on-ink); font-size: 24px; max-width: 18ch; }
.join-banner p { color: rgba(255, 255, 255, 0.7); max-width: 46ch; }
.join-banner .btn { justify-self: start; --btn-bg: #fff; --btn-fg: var(--ink); --btn-hover: #f0f0ee; }
.join-banner .art { position: absolute; inset-inline-end: -40px; inset-block-end: -60px; width: 220px; height: 220px; border-radius: 50%; background: var(--accent); opacity: 0.95; }
.join-banner .art::after { content: ""; position: absolute; inset: 46px; border-radius: 50%; background: var(--ink); }
.join-banner > *:not(.art) { position: relative; z-index: 1; }
@media (min-width: 720px) { .join-banner { padding: var(--s-10); grid-template-columns: 1fr auto; } .join-banner .btn { justify-self: end; } .join-banner .art { inset-inline-end: 160px; } }

/* ---- Business page ---- */
.biz-hero { position: relative; }
.hero-carousel { position: relative; overflow: hidden; }
.hero-carousel .cover-art { width: 100%; aspect-ratio: 4 / 3; max-height: 52vh; }
.hero-carousel .cover-art .mono { font-size: clamp(96px, 26vw, 140px); }
.hero-carousel .cover-art.is-placeholder { aspect-ratio: auto; height: clamp(220px, 36vh, 300px); }
/* Only the first photo morphs from the discovery card (a name can be used once per page). */
.hero-carousel > .cover-art, .hero-single .cover-art, .hero-slide:first-child .cover-art { view-transition-name: biz-cover; }
.hero-single { display: block; width: 100%; cursor: zoom-in; }
.hero-track { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hero-track::-webkit-scrollbar { display: none; }
.hero-track:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: -3px; }
.hero-slide { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; cursor: zoom-in; background: var(--surface-2); }
.hero-slide > img { display: block; width: 100%; aspect-ratio: 4 / 3; max-height: 52vh; object-fit: cover; }
.hero-dots { position: absolute; inset-inline: 0; bottom: 14px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.hero-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: width var(--d) var(--ease), background var(--d); }
.hero-dots span.is-active { width: 20px; border-radius: 4px; background: #fff; }
.hero-count { position: absolute; bottom: 14px; inset-inline-end: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--r-pill); background: rgba(11, 11, 12, 0.62); color: #fff; font-size: 12.5px; font-weight: 600; backdrop-filter: blur(6px); pointer-events: none; }
.hero-nav { position: absolute; top: 50%; translate: 0 -50%; width: 40px; height: 40px; border-radius: 50%; display: none; place-items: center; background: rgba(255, 255, 255, 0.94); color: var(--ink); box-shadow: var(--shadow-2); transition: transform var(--d-fast) var(--ease), opacity var(--d); }
.hero-nav.prev { inset-inline-start: 14px; }
.hero-nav.next { inset-inline-end: 14px; }
.hero-nav:active { transform: scale(0.92); }
.biz-hero-actions { position: absolute; z-index: 2; top: calc(var(--safe-top) + 12px); inset-inline: var(--gutter); display: flex; justify-content: space-between; }
@media (hover: hover) and (pointer: fine) {
  .hero-nav:not([hidden]) { display: grid; opacity: 0; }
  .hero-carousel:hover .hero-nav, .hero-nav:focus-visible { opacity: 1; }
}
@media (min-width: 900px) {
  .biz-hero { max-width: var(--maxw); margin-inline: auto; padding: var(--s-4) var(--gutter) 0; }
  .hero-carousel { border-radius: var(--r-xl); isolation: isolate; }
  .hero-carousel .cover-art { aspect-ratio: 21 / 8; max-height: 420px; }
  .hero-carousel .cover-art.is-placeholder { height: 240px; }
  /* Two photos side by side: wide crops of one photo would cut too much of it. */
  .hero-track { gap: 8px; }
  .hero-slide { flex-basis: calc(50% - 4px); border-radius: var(--r-xl); overflow: hidden; }
  .hero-slide > img, .hero-slide .cover-art { aspect-ratio: auto; height: clamp(300px, 32vw, 420px); max-height: none; }
  .hero-dots { inset-inline: auto 16px; bottom: 16px; padding: 7px 9px; border-radius: var(--r-pill); background: rgba(11, 11, 12, 0.42); backdrop-filter: blur(6px); }
  .hero-dots span { box-shadow: none; }
  .biz-hero-actions { display: none; }
}

/* Saved businesses: the heart */
.fav-btn { color: var(--ink); }
.fav-btn svg { transition: fill var(--d) var(--ease), color var(--d); }
.fav-btn.is-on, .fav-text.is-on { color: var(--accent); }
.fav-btn.is-on svg, .fav-text.is-on svg { fill: currentColor; }
.fav-btn.pop svg, .fav-text.pop svg { animation: heart-pop 380ms var(--ease-spring); }
@keyframes heart-pop { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }
.card-fav { position: absolute; z-index: 2; top: 10px; inset-inline-end: 10px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.92); box-shadow: var(--shadow-1); backdrop-filter: blur(6px); transition: transform var(--d-fast) var(--ease); }
.card-fav:active { transform: scale(0.9); }
.card-fav svg { width: 18px; height: 18px; }
.fav-text .when-on, .fav-text.is-on .when-off { display: none; }
.fav-text.is-on .when-on { display: inline; }
@media (prefers-reduced-motion: reduce) { .fav-btn.pop svg, .fav-text.pop svg { animation: none; } }

.biz-head { padding-block: var(--s-5) var(--s-2); }
.biz-head .logo { width: 72px; height: 72px; border-radius: 20px; overflow: hidden; margin-block: -60px 12px; box-shadow: 0 0 0 4px var(--bg), var(--shadow-2); position: relative; z-index: 2; background: var(--surface); }
.biz-head .logo img { width: 100%; height: 100%; object-fit: cover; }
.biz-head h1 { font-size: clamp(28px, 7vw, 40px); }
.biz-head .tagline { color: var(--ink-2); font-size: 16px; margin-block-start: 6px; max-width: 60ch; }
.biz-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin-block-start: 10px; color: var(--ink-2); font-size: 14.5px; }
.biz-facts > * + *::before { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); vertical-align: middle; margin-inline: 8px; }
.open-state { font-weight: 600; }
.open-state.is-open { color: var(--ok); }
.biz-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-block-start: var(--s-4); }

.biz-tabs { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, 0.96); margin-block-start: var(--s-4); }
@supports (backdrop-filter: blur(1px)) { .biz-tabs { background: rgba(255, 255, 255, 0.88); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); } }
@media (min-width: 900px) { .biz-tabs { top: calc(var(--topbar-h) + var(--safe-top)); } }
.biz-tabs .tabs { gap: var(--s-6); }

.biz-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-10); margin-block-start: var(--s-6); }
@media (min-width: 1000px) {
  .biz-layout { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
  .biz-aside { position: sticky; top: calc(var(--topbar-h) + 72px); }
}
.biz-section { scroll-margin-top: 120px; }
.biz-section > h2 { font-size: 22px; margin-block-end: var(--s-4); }

.service-list { display: flex; flex-direction: column; }
.service-heading { font-size: 15px; font-weight: 650; color: var(--ink-2); margin-block: var(--s-6) var(--s-1); }
.service-heading:first-of-type { margin-block-start: var(--s-3); }
.option-heading { font-size: 13px; font-weight: 650; color: var(--ink-3); margin-block: var(--s-5) var(--s-2); }
.option-heading:first-of-type { margin-block-start: 0; }
.service-row { display: flex; align-items: center; gap: var(--s-4); padding: 16px 0; border-block-end: 1px solid var(--line); transition: background var(--d); }
.service-row:first-child { padding-block-start: 4px; }
.service-row .info { flex: 1; min-width: 0; }
.service-row .name { font-weight: 650; font-size: 16px; letter-spacing: -0.01em; }
.service-row .desc { color: var(--ink-3); font-size: 14px; margin-block-start: 2px; }
.service-row .facts { display: flex; gap: 10px; margin-block-start: 6px; font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.service-row .facts strong { color: var(--ink); font-weight: 650; }
.service-row .add { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); flex: none; transition: background var(--d), transform var(--d-fast); }
.service-row:hover .add { background: var(--ink); color: var(--on-ink); }
.service-row:active .add { transform: scale(0.9); }

.team { display: flex; gap: var(--s-5); overflow-x: auto; padding-block-end: 4px; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.team::-webkit-scrollbar { display: none; }
.team-member { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 76px; text-align: center; }
.team-member .avatar { --size: 68px; transition: transform var(--d) var(--ease-out); }
.team-member:hover .avatar { transform: scale(1.04); }
.team-member small { color: var(--ink-3); font-size: 12.5px; }


.hours { display: flex; flex-direction: column; }
.hours li { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: 12px 14px; border-radius: var(--r-md); font-size: 14.5px; color: var(--ink-2); }
.hours li + li { box-shadow: 0 -1px 0 var(--line); }
.hours .days { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.hours .days::first-letter { text-transform: uppercase; }
.hours .times { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-variant-numeric: tabular-nums; }
.hours li.is-closed .times { color: var(--ink-3); }
.hours li.is-today { background: var(--surface-2); box-shadow: none; }
.hours li.is-today + li { box-shadow: none; }
.hours .today-pill { padding: 2px 8px; border-radius: var(--r-pill); background: var(--ink); color: var(--on-ink); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
.contact-list a { display: flex; align-items: center; gap: 12px; padding: 10px 0; color: var(--ink); font-weight: 500; }
.contact-list a .icon { color: var(--ink-3); }
.contact-list a:hover span { text-decoration: underline; text-underline-offset: 3px; }

.review-summary { display: flex; align-items: center; gap: var(--s-5); padding: var(--s-5); border-radius: var(--r-lg); background: var(--bg-soft); margin-block-end: var(--s-2); }
.review { padding-block: var(--s-5); border-block-end: 1px solid var(--line); }
.review:last-child { border: 0; }
.review .who { display: flex; align-items: center; gap: 10px; }
.review .reply { margin-block-start: var(--s-3); padding: 12px 14px; border-radius: var(--r-md); background: var(--bg-soft); font-size: 14px; color: var(--ink-2); }
.review .reply strong { display: block; color: var(--ink); font-size: 13px; margin-block-end: 2px; }

.book-card { padding: var(--s-5); border-radius: var(--r-xl); box-shadow: var(--shadow-2); background: var(--surface); }
.book-card .next { display: flex; flex-direction: column; gap: 4px; padding-block-end: var(--s-4); margin-block-end: var(--s-4); border-block-end: 1px solid var(--line); }

.sticky-cta {
  position: fixed; z-index: 44; inset-inline: 0; bottom: 0;
  display: flex; gap: var(--s-4); align-items: center;
  padding: 12px var(--gutter) calc(12px + var(--safe-bottom));
  background: var(--surface); box-shadow: 0 -1px 0 var(--line), 0 -8px 24px rgba(17, 17, 20, 0.06);
  animation: sheet-in 420ms var(--ease-sheet) both;
}
.sticky-cta .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sticky-cta .info .small { color: var(--ink-3); }
.sticky-cta .btn { flex: none; min-width: 140px; }
@media (min-width: 1000px) { .sticky-cta { display: none; } }

/* ---- Booking flow ---- */
.flow { max-width: 640px; margin-inline: auto; padding-block-end: var(--s-8); }
.flow-head { display: flex; align-items: center; gap: var(--s-2); padding-block: var(--s-3) var(--s-4); }
.flow-head .biz-mini { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.flow-head .biz-mini .cover-art { width: 40px; height: 40px; border-radius: 12px; flex: none; }
.flow-head .biz-mini .cover-art .mono { font-size: 19px; }
.flow-head .biz-mini .cover-art :is(.cat-icon, .rings) { display: none; }
.flow-head .step-count { font-size: 13px; color: var(--ink-3); font-weight: 600; white-space: nowrap; }
.progress { display: flex; gap: 4px; margin-block-end: var(--s-6); }
.progress span { flex: 1; height: 4px; border-radius: 4px; background: var(--surface-2); overflow: hidden; position: relative; }
.progress span::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--ease-out); }
[dir="rtl"] .progress span::after { transform-origin: right; }
.progress span.done::after { transform: scaleX(1); }

.done-steps { display: flex; flex-direction: column; gap: 8px; margin-block-end: var(--s-6); }
.step-summary { display: flex; align-items: center; gap: var(--s-3); padding: 12px 14px; border-radius: var(--r-md); background: var(--bg-soft); animation: rise 320ms var(--ease-out) both; }
.step-summary .check { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; flex: none; }
.step-summary .value { flex: 1; min-width: 0; font-weight: 600; }
.step-summary .label { display: block; font-size: 12px; color: var(--ink-3); font-weight: 500; }
.step { animation: rise 360ms var(--ease-out) both; }
.step-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-block-end: var(--s-5); }
.step-title h2 { font-size: 24px; }
.step-title .aside { font-size: 14px; color: var(--ink-3); }

.staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; }
.staff-option { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 10px 16px; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); text-align: center; transition: box-shadow var(--d), background var(--d), transform var(--d-fast); }
.staff-option:hover { background: var(--bg-soft); }
.staff-option:active { transform: scale(0.97); }
.staff-option.is-active { box-shadow: inset 0 0 0 2px var(--ink); }
.staff-option .avatar { --size: 56px; }
.staff-option small { color: var(--ink-3); font-size: 12.5px; line-height: 1.3; }

.summary-card { border-radius: var(--r-xl); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.summary-card .when { padding: var(--s-5); background: var(--bg-soft); }
.summary-card .when .day { all: unset; display: block; font-size: 14px; color: var(--ink-3); font-weight: 600; }
.summary-card .when .time { display: block; margin-block-start: 2px; font-size: 26px; font-weight: 750; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.summary-card dl { display: grid; grid-template-columns: auto 1fr; gap: 12px 16px; padding: var(--s-5); font-size: 14.5px; }
.summary-card dt { color: var(--ink-3); }
.summary-card dd { margin: 0; font-weight: 600; text-align: end; overflow-wrap: anywhere; }
.summary-card dd.total { font-size: 16px; }

.notify-box { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-lg); background: var(--bg-soft); }
.notify-box .head { display: flex; gap: 12px; align-items: flex-start; }
.notify-box .wa { width: 36px; height: 36px; border-radius: 12px; background: #e7f8ee; color: #128c4b; display: grid; place-items: center; flex: none; }

.success-page { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); text-align: center; padding-block: var(--s-8) var(--s-6); }
.success-page h1 { font-size: 30px; }
.success-page p { color: var(--ink-2); max-width: 40ch; }
.action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.action-grid .btn { justify-content: flex-start; border-radius: var(--r-md); min-height: 54px; white-space: normal; text-align: start; line-height: 1.2; }
.action-grid .btn-primary { grid-column: 1 / -1; justify-content: center; order: -1; }

/* ---- My bookings ---- */
.page-title { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; padding-block: var(--s-6) var(--s-5); }
.booking-card { display: flex; gap: var(--s-4); align-items: center; padding: 12px; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow var(--d), transform var(--d-fast); }
.booking-card:hover { box-shadow: inset 0 0 0 1px var(--line-3); }
.booking-card:active { transform: scale(0.99); }
.booking-card[data-status="cancelled"], .booking-card[data-status="no_show"] { opacity: 0.6; }
.date-tile { width: 60px; flex: none; text-align: center; padding: 8px 0; border-radius: 14px; background: var(--surface-2); }
.date-tile .m { font-size: 12px; font-weight: 600; color: var(--accent-text); text-transform: capitalize; }
.date-tile .d { font-size: 24px; font-weight: 750; letter-spacing: -0.03em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.booking-card .when { font-size: 16px; font-weight: 650; }
.booking-card .chev { color: var(--ink-4); }
.month-label { font-size: 14px; font-weight: 600; color: var(--ink-3); margin-block: var(--s-4) 0; }
.month-label:first-child { margin-block-start: 0; }

.detail-hero { padding: var(--s-6) var(--s-5); border-radius: var(--r-xl); background: var(--bg-soft); }
.detail-hero .when { font-size: clamp(26px, 6vw, 34px); font-weight: 750; letter-spacing: -0.03em; line-height: 1.15; margin-block: var(--s-3) var(--s-4); }
.detail-hero .when .num { color: var(--ink-2); }

/* ---- Auth ---- */
.auth-wrap { min-height: calc(100dvh - var(--topbar-h)); display: grid; place-items: start center; padding: var(--s-8) var(--gutter); }
@media (min-width: 720px) { .auth-wrap { place-items: center; } }
.auth-card { width: 100%; max-width: 420px; }
.auth-card h1 { font-size: clamp(28px, 7vw, 34px); margin-block: 6px 6px; }
.auth-card form { margin-block-start: var(--s-6); }
.auth-alt { text-align: center; margin-block-start: var(--s-6); color: var(--ink-2); font-size: 14.5px; }
.auth-status { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); text-align: center; }
.auth-status .icon-badge { width: 64px; height: 64px; border-radius: 22px; display: grid; place-items: center; background: var(--surface-2); }

/* ---- Account ---- */
.profile-head { display: flex; align-items: center; gap: var(--s-4); padding-block: var(--s-6) var(--s-2); }
.profile-head .avatar { --size: 64px; font-size: 24px; }
.group { margin-block-start: var(--s-6); }
.group > h3 { font-size: 13.5px; font-weight: 600; color: var(--ink-3); margin-block-end: var(--s-2); padding-inline: 4px; }
.group .card { padding-block: 4px; }
.group .card > form { padding-block: var(--s-4); }
.group .list-item { padding-block: 14px; }

/* ---- Footer ---- */
.site-footer { padding-block: var(--s-10) calc(var(--s-10) + 70px); color: var(--ink-3); font-size: 13.5px; border-block-start: 1px solid var(--line); margin-block-start: var(--s-10); }
.site-footer .container { display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; align-items: center; }
body.no-dock .site-footer, body.has-cta .site-footer { padding-block-end: calc(var(--s-10) + 70px); }
@media (min-width: 900px) { .site-footer, body.no-dock .site-footer { padding-block-end: var(--s-10); } }
/* Phones and tablets: no footer (the bottom bar and the pages themselves carry everything). */
@media (max-width: 899px) { .site-footer { display: none; } }

/* ---- Menu on the business page ---- */
.menu-pdf { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line-2); transition: background var(--d); }
.menu-pdf:hover { background: var(--bg-soft); }
.menu-pdf .cat-tile { background: var(--accent-soft); color: var(--accent-text); }
.menu-strip { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-block-end: 6px; scrollbar-width: thin; }
.menu-strip button { flex: none; width: 132px; aspect-ratio: 3 / 4; border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); scroll-snap-align: start; box-shadow: inset 0 0 0 1px var(--line); }
.menu-strip img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform var(--d-slow) var(--ease-out); }
.menu-strip button:hover img { transform: scale(1.03); }
.menu-reader { display: grid; gap: var(--s-4); }
.menu-reader figure { display: grid; gap: 6px; justify-items: center; }
.menu-reader img { width: 100%; height: auto; border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--line); background: var(--surface-2); }

/* ---- Landing page for businesses (/for-business) ---- */
.landing { overflow-x: clip; }
.lp-hero { padding-block: clamp(36px, 7vw, 88px) clamp(40px, 6vw, 72px); background: radial-gradient(1200px 420px at 85% -10%, var(--accent-soft), transparent 70%); }
.lp-hero-grid { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (min-width: 960px) { .lp-hero-grid { grid-template-columns: 1.05fr 0.95fr; } }
.lp-hero h1 { margin-block-start: 12px; max-width: 14ch; }
.lp-sub { margin-block-start: 18px; font-size: clamp(17px, 2.2vw, 20px); color: var(--ink-2); max-width: 46ch; line-height: 1.55; }
.lp-mock { position: relative; border-radius: 26px; background: var(--surface); box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--line); padding: 18px; max-width: 520px; justify-self: center; width: 100%; animation: rise 600ms var(--ease-out) both; }
.lp-mock-top { display: flex; align-items: center; justify-content: space-between; margin-block-end: 14px; }
.lp-mock-top .dots { display: flex; gap: 6px; }
.lp-mock-top .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); }
.lp-mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-block-end: 12px; }
.lp-mock-kpis div { padding: 10px 12px; border-radius: 14px; background: var(--bg-soft); display: grid; gap: 2px; }
.lp-mock-kpis span { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.lp-mock-kpis strong { font-size: 22px; letter-spacing: -0.03em; }
.lp-mock-kpis .accent strong { color: var(--accent-text); }
.lp-mock-list { display: grid; gap: 8px; }
.lp-mock-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); animation: rise 520ms var(--ease-out) both; animation-delay: calc(140ms + var(--i) * 90ms); }
.lp-mock-row strong { display: block; font-size: 14.5px; }
.lp-mock-row small { color: var(--ink-3); font-size: 12.5px; }
.lp-mock-toast { position: absolute; inset-inline-end: -10px; bottom: -18px; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; box-shadow: var(--shadow-2); animation: rise 520ms var(--ease-out) 700ms both; }
@media (max-width: 560px) { .lp-mock-toast { inset-inline-end: 8px; } }
.lp-types { padding-block: 28px; border-block: 1px solid var(--line); }
.lp-type-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-block-start: 14px; }
.lp-type-row span { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-weight: 600; font-size: 15px; }
.lp-section { padding-block: clamp(48px, 8vw, 96px); }
.lp-soft { background: var(--bg-soft); }
.lp-head { display: grid; gap: 10px; max-width: 640px; margin-block-end: clamp(28px, 4vw, 44px); }
.lp-head h2 { font-size: clamp(28px, 4.4vw, 40px); letter-spacing: -0.035em; line-height: 1.08; }
.lp-features { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.lp-feature { padding: var(--s-6); border-radius: var(--r-xl); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 8px; align-content: start; }
.lp-feature h3 { font-size: 18px; margin-block-start: 6px; }
.lp-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.lp-split { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .lp-split { grid-template-columns: 1fr 1fr; gap: 64px; } }
.lp-split h2 { font-size: clamp(28px, 4.4vw, 40px); letter-spacing: -0.035em; line-height: 1.08; margin-block-start: 10px; }
.lp-policies { display: grid; gap: 10px; }
.lp-policy { display: flex; gap: 14px; padding: 16px 18px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); }
.lp-policy > .icon { flex: none; color: var(--accent-text); margin-block-start: 2px; }
.lp-steps { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); counter-reset: none; }
.lp-steps li { display: grid; gap: 8px; padding: var(--s-6); border-radius: var(--r-xl); background: var(--bg-soft); }
.lp-step-no { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-weight: 700; }
.lp-steps h3 { font-size: 18px; margin-block-start: 6px; }
.lp-prices { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.lp-prices.is-single, .lp-price-card.is-solo { max-width: 460px; }
.lp-price-card { display: grid; gap: 14px; padding: var(--s-8) var(--s-6); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); }
.lp-price-card.is-featured { box-shadow: var(--shadow-2), inset 0 0 0 2px var(--ink); }
.lp-price { display: flex; align-items: baseline; gap: 6px; }
.lp-price strong { font-size: clamp(42px, 7vw, 56px); letter-spacing: -0.045em; line-height: 1; }
.lp-price span { color: var(--ink-3); font-weight: 600; }
.lp-faq { display: grid; gap: 8px; }
.lp-faq details { border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line); padding: 0 18px; transition: background var(--d); }
.lp-faq details[open] { background: var(--bg-soft); }
.lp-faq summary { cursor: pointer; padding-block: 16px; font-weight: 650; font-size: 16px; }
.lp-faq details p { padding-block-end: 16px; line-height: 1.6; }
.lp-final { padding-block: clamp(56px, 9vw, 104px); background: var(--ink); color: #fff; }
.lp-final h2 { font-size: clamp(30px, 5vw, 44px); letter-spacing: -0.04em; color: #fff; }
.lp-final .muted { color: rgba(255, 255, 255, 0.72); }
.lp-final .btn-primary { --btn-bg: var(--accent); --btn-fg: #fff; --btn-hover: #e8401f; }
@media (prefers-reduced-motion: reduce) { .lp-mock, .lp-mock-row, .lp-mock-toast { animation: none; } }
.lp-faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-weight: 500; font-size: 18px; transition: transform var(--d); }
.lp-faq details[open] summary::after { transform: rotate(45deg); }
.fav-link.is-active { color: var(--accent); }
.fav-link.is-active svg { fill: currentColor; }