/* ========== Booking sites (clinic, salon): palette ========== */
body.theme-clinic, body.theme-salon {
  --store-ink: #111827;
  --store-muted: #6b7280;
  --store-border: #e5e7eb;
  --store-bg: color-mix(in srgb, var(--store-accent) 45%, #fff);
  background: #fff;
}

.bk-muted { color: var(--store-muted); padding: .75rem 0; }
.bk-muted i { color: var(--store-primary); }

/* ========== Header ========== */
.bk-topbar { background: var(--store-primary); color: #fff; font-size: .82rem; padding: .4rem 0; }
.bk-topbar .container { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.bk-topbar a, .bk-topbar span { color: #fff; text-decoration: none; opacity: .92; }
.bk-topbar a:hover { opacity: 1; }
.bk-header { background: #fff; border-bottom: 1px solid var(--store-border); position: sticky; top: 0; z-index: 40; box-shadow: 0 4px 18px rgba(15, 23, 42, .04); }
.bk-header-row { display: flex; align-items: center; gap: 1.5rem; padding: .8rem 0; }
.bk-header .bk-brand { color: var(--store-ink); text-decoration: none; }
.bk-header .bk-brand img { filter: none; }
.bk-header .bk-brand strong { color: var(--store-primary); font-size: 1.45rem; font-weight: 900; }
.bk-nav { flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .2rem; }
.bk-nav > a, .bk-nav .wm-drop > a { display: block; padding: .5rem .8rem; border-radius: 10px; text-decoration: none; font-weight: 700; color: var(--store-ink); }
.bk-nav > a:hover, .bk-nav .wm-drop > a:hover { background: var(--store-bg); color: var(--store-primary); }
.bk-cta { padding: .6rem 1.1rem; }
.bk-header .cn-burger { font-size: 1.5rem; margin-inline-start: auto; }

@media (max-width: 991px) {
  .bk-header-row { flex-wrap: wrap; }
  .bk-header .cn-burger { display: inline-flex; }
  .bk-nav { display: none; flex-direction: column; align-items: stretch; width: 100%; order: 5; }
  .cn-nav-toggle:checked ~ .bk-nav { display: flex; flex: 1 0 100%; }
  .bk-cta { display: none; }
  .bk-nav .wm-drop-menu {
    position: static;
    display: block;
    min-width: 0;
    margin: 0;
    padding: 0 .35rem .35rem;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
  .bk-nav .wm-drop-menu a { padding-inline-start: 1.1rem; }
}

/* ========== Buttons ========== */
.bk-btn-lg { padding: 1rem 1.6rem; font-size: 1.05rem; }
.bk-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .75rem 1.2rem; border-radius: 12px; border: 1.5px solid var(--store-primary);
  background: #fff; color: var(--store-primary); font-weight: 700; text-decoration: none;
}
.bk-btn-ghost:hover { background: var(--store-primary); color: #fff; }

/* ========== Hero ========== */
.bk-hero { padding: 3.5rem 0; background: linear-gradient(180deg, var(--store-bg), #fff); overflow: hidden; }
.bk-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 2.5rem; align-items: center; }
.bk-kicker { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .85rem; border-radius: 999px; background: #fff; color: var(--store-primary); font-weight: 800; font-size: .85rem; box-shadow: 0 4px 14px rgba(15, 23, 42, .06); }
.bk-hero h1 { font-size: clamp(1.8rem, 3.6vw, 2.75rem); font-weight: 900; line-height: 1.5; margin: 1rem 0 .75rem; color: var(--store-ink); }
.bk-hero-copy > p { font-size: 1.05rem; line-height: 2.1; color: #374151; max-width: 560px; }
.bk-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 1.25rem; }
.bk-hero-facts { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; color: var(--store-muted); font-size: .9rem; }
.bk-hero-facts i { color: var(--store-primary); }
.bk-hero-media {
  position: relative; min-height: 400px; border-radius: 28px;
  background: var(--bk-hero) center / cover no-repeat, var(--store-accent);
  box-shadow: 0 30px 60px rgba(15, 23, 42, .14);
}
.bk-hero-card {
  position: absolute; inset-inline-start: -1.5rem; bottom: 1.5rem; width: min(290px, 85%);
  background: rgba(255, 255, 255, .96); border-radius: 18px; padding: 1rem; box-shadow: 0 18px 40px rgba(15, 23, 42, .16);
}
.bk-hero-card strong { display: block; margin-bottom: .5rem; color: var(--store-primary); }
.bk-hero-card a { display: flex; justify-content: space-between; gap: .5rem; padding: .5rem .25rem; border-top: 1px dashed var(--store-border); color: var(--store-ink); text-decoration: none; font-weight: 700; font-size: .92rem; }
.bk-hero-card a:hover { color: var(--store-primary); }
.bk-hero-card small { color: var(--store-muted); font-weight: 400; white-space: nowrap; }
.bk-hero-salon .bk-hero-media { border-radius: 200px 200px 28px 28px; }

@media (max-width: 991px) {
  .bk-hero { padding: 2rem 0; }
  .bk-hero-grid { grid-template-columns: 1fr; }
  .bk-hero-media { min-height: 280px; }
  .bk-hero-card { inset-inline-start: 1rem; }
  .bk-hero-salon .bk-hero-media { border-radius: 28px; }
}

/* ========== Sections, services, staff ========== */
.bk-section { padding: 2.5rem 0; }
.bk-section-alt { background: var(--store-bg); }
.bk-services { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.bk-service {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--store-border);
  border-radius: 18px; overflow: hidden; transition: box-shadow .2s, transform .2s;
}
.bk-service:hover { box-shadow: 0 16px 36px rgba(15, 23, 42, .1); transform: translateY(-2px); }
.bk-service-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.bk-service-icon { margin: 1.25rem 1.25rem 0; width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--store-bg); color: var(--store-primary); font-size: 1.5rem; }
.bk-service-body { padding: 1rem 1.25rem; flex: 1; }
.bk-service-body h3 { font-size: 1.08rem; font-weight: 800; margin: 0 0 .4rem; }
.bk-service-body p { color: var(--store-muted); font-size: .9rem; line-height: 1.9; margin: 0 0 .75rem; }
.bk-service-meta { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .9rem; color: var(--store-muted); }
.bk-price { font-weight: 900; color: var(--store-primary); }
.bk-service-cta { margin: 0 1.25rem 1.25rem; padding: .6rem 1rem; }

.bk-staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.bk-person { background: #fff; border: 1px solid var(--store-border); border-radius: 20px; padding: 1.5rem 1.25rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.bk-person > img, .bk-person-avatar { width: 108px; height: 108px; border-radius: 50%; object-fit: cover; border: 4px solid var(--store-bg); margin-bottom: .5rem; }
.bk-person-avatar { display: inline-flex; align-items: center; justify-content: center; background: var(--store-bg); color: var(--store-primary); font-size: 2.5rem; }
.bk-person h3 { font-size: 1.05rem; font-weight: 800; margin: 0; }
.bk-person-title { color: var(--store-primary); font-weight: 700; font-size: .9rem; }
.bk-person-days { color: var(--store-muted); font-size: .82rem; margin-bottom: .5rem; }
.bk-person .bk-btn-ghost { margin-top: auto; padding: .5rem 1rem; font-size: .9rem; }

.bk-panel { background: #fff; border: 1px solid var(--store-border); border-radius: 20px; padding: 1.5rem; }
.bk-hours { list-style: none; padding: 0; margin: 0; }
.bk-hours li { display: flex; justify-content: space-between; padding: .6rem .75rem; border-radius: 10px; }
.bk-hours li:nth-child(odd) { background: var(--store-bg); }
.bk-hours li.is-today { outline: 2px solid var(--store-primary); font-weight: 800; }
.bk-hours em { color: #dc2626; font-style: normal; }
.bk-steps ol { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: 1rem; }
.bk-steps li { display: flex; gap: .9rem; align-items: flex-start; }
.bk-steps li > i { flex: none; width: 46px; height: 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--store-bg); color: var(--store-primary); font-size: 1.3rem; }
.bk-steps strong { display: block; }
.bk-steps span { color: var(--store-muted); font-size: .9rem; }

/* ========== Booking wizard ========== */
.bk-book { padding: 2rem 0 3rem; background: linear-gradient(180deg, var(--store-bg), #fff 320px); min-height: 60vh; }
.bk-book-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.bk-book-head h1 { font-size: 1.6rem; font-weight: 900; margin: 0; }
.bk-book-head h1 i { color: var(--store-primary); }
.bk-step { background: #fff; border: 1px solid var(--store-border); border-radius: 20px; padding: 1.25rem; margin-bottom: 1rem; }
.bk-step-title { font-weight: 900; font-size: 1.08rem; margin-bottom: 1rem; display: flex; align-items: center; gap: .6rem; }
.bk-step-title span { width: 30px; height: 30px; border-radius: 50%; background: var(--store-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; }
.bk-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .6rem; }
.bk-choice { position: relative; cursor: pointer; margin: 0; }
.bk-choice[hidden] { display: none; }
.bk-choice input { position: absolute; opacity: 0; pointer-events: none; }
.bk-choice-box { display: flex; flex-direction: column; gap: .2rem; height: 100%; padding: .85rem 1rem; border: 1.5px solid var(--store-border); border-radius: 14px; transition: border-color .15s, background .15s; }
.bk-choice-box small { color: var(--store-muted); }
.bk-choices-staff .bk-choice-box { flex-direction: row; align-items: center; gap: .75rem; }
.bk-choices-staff .bk-choice-box > span:last-child { display: flex; flex-direction: column; }
.bk-avatar { width: 46px; height: 46px; flex: none; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; background: var(--store-bg); color: var(--store-primary); font-size: 1.3rem; }
.bk-choice:hover .bk-choice-box { border-color: var(--store-primary); }
.bk-choice input:checked + .bk-choice-box { border-color: var(--store-primary); background: var(--store-bg); box-shadow: inset 0 0 0 1px var(--store-primary); }
.bk-choice input:focus-visible + .bk-choice-box { outline: 3px solid color-mix(in srgb, var(--store-primary) 35%, transparent); }

.bk-days { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; scrollbar-width: thin; }
.bk-day { flex: none; min-width: 108px; display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .6rem .75rem; border: 1.5px solid var(--store-border); border-radius: 14px; background: #fff; color: var(--store-ink); }
.bk-day small { color: var(--store-muted); font-size: .78rem; }
.bk-day:hover { border-color: var(--store-primary); }
.bk-day.active { background: var(--store-primary); border-color: var(--store-primary); color: #fff; }
.bk-day.active small { color: rgba(255, 255, 255, .85); }
.bk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .5rem; margin-top: .75rem; }
.bk-slots .bk-muted { grid-column: 1 / -1; }
.bk-slot { padding: .55rem .25rem; border: 1.5px solid var(--store-border); border-radius: 10px; background: #fff; font-weight: 800; color: var(--store-ink); }
.bk-slot:hover { border-color: var(--store-primary); color: var(--store-primary); }
.bk-slot.active { background: var(--store-primary); border-color: var(--store-primary); color: #fff; }

.bk-summary { position: sticky; top: 90px; background: #fff; border: 1px solid var(--store-border); border-radius: 20px; padding: 1.25rem; box-shadow: 0 18px 40px rgba(15, 23, 42, .06); }
.bk-summary h2 { font-size: 1.1rem; font-weight: 900; margin: 0 0 .75rem; }
.bk-summary dl { display: grid; grid-template-columns: auto 1fr; gap: .45rem .75rem; margin: 0 0 1rem; font-size: .92rem; }
.bk-summary dt { color: var(--store-muted); font-weight: 400; }
.bk-summary dd { margin: 0; font-weight: 700; text-align: left; }
.bk-summary [hidden] { display: none; }
.bk-summary .btn-wm[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.bk-notice { background: var(--store-bg); border-radius: 12px; padding: .75rem .9rem; font-size: .88rem; line-height: 1.9; margin-bottom: 1rem; }
.bk-notice i { color: var(--store-primary); }

/* ========== Tracking & appointment ========== */
.bk-track { max-width: 440px; margin: 1rem auto; background: #fff; border: 1px solid var(--store-border); border-radius: 22px; padding: 2rem 1.75rem; text-align: center; box-shadow: 0 20px 45px rgba(15, 23, 42, .07); }
.bk-track h1 { font-size: 1.45rem; font-weight: 900; }
.bk-track-icon { width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--store-bg); color: var(--store-primary); font-size: 1.6rem; margin-bottom: .75rem; }

.bk-ticket { max-width: 620px; margin: 0 auto; background: #fff; border: 1px solid var(--store-border); border-radius: 22px; overflow: hidden; box-shadow: 0 20px 45px rgba(15, 23, 42, .08); }
.bk-ticket > *:not(.bk-ticket-head) { margin-inline: 1.5rem; }
.bk-ticket-head { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; background: var(--store-primary); color: #fff; }
.bk-ticket.is-closed .bk-ticket-head { background: #6b7280; }
.bk-ticket-head .badge { font-size: .85rem; background: #fff !important; color: var(--store-ink) !important; }
.bk-code { font-family: ui-monospace, Consolas, monospace; font-size: 1.6rem; font-weight: 800; letter-spacing: .15em; }
.bk-ticket-when { display: flex; gap: 1rem; align-items: center; margin-top: 1.25rem; padding: 1rem; border-radius: 16px; background: var(--store-bg); }
.bk-ticket-when > i { font-size: 2rem; color: var(--store-primary); }
.bk-ticket-when strong { display: block; font-size: 1.1rem; }
.bk-ticket-when span { color: var(--store-muted); }
.bk-ticket-list { display: grid; grid-template-columns: auto 1fr; gap: .6rem 1rem; margin-top: 1.25rem; margin-bottom: 1.25rem; }
.bk-ticket-list dt { color: var(--store-muted); font-weight: 400; }
.bk-ticket-list dd { margin: 0; font-weight: 700; }
.bk-ticket-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: 1rem 0 1.5rem; border-top: 1px dashed var(--store-border); }
.bk-ticket-actions form { margin: 0; }
.bk-ticket-actions .btn-wm { margin-inline-start: auto; padding: .65rem 1.1rem; }
.bk-ticket-actions .bk-btn-ghost { padding: .6rem 1rem; }
.bk-ticket .alert { margin-bottom: 1rem !important; }

@media print {
  .bk-topbar, .bk-header, .store-footer, .bk-ticket-actions { display: none !important; }
  .bk-ticket { box-shadow: none; }
}