/* ═══════════════════════════════════════════════════════════
   booking.css — Public booking page
   Requires /assets/design.css linked before this file.
══════════════════════════════════════════════════════════ */

:root {
  --date-pill-min-w: 44px;
  --date-pill-pad:   8px 10px;
  --date-pill-r:     12px;
  --date-pill-border: 1.5px;
}

/* ── Page loader ──────────────────────────────────────────── */
#pageLoader {
  position:   fixed;
  inset:      0;
  z-index:    9999;
  background: var(--bg);
  display:    flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.22s var(--ease);
}
#pageLoader.hidden { opacity: 0; pointer-events: none; }

/* ── Page wrapper ─────────────────────────────────────────── */
.wrap {
  max-width:  700px;
  margin:     0 auto;
  padding:    20px 16px 48px;
  opacity:    0;
  transition: opacity 0.22s var(--ease);
}
.wrap.ready { opacity: 1; }

/* ── Header ───────────────────────────────────────────────── */
.top {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             12px;
  flex-wrap:       wrap;
  margin-bottom:   22px;
}
.brand h1 {
  margin:         0;
  font-size:      22px;
  font-weight:    700;
  letter-spacing: -0.02em;
}

/* ── Card ─────────────────────────────────────────────────── */
.card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--r-lg);
  padding:       16px;
  margin-bottom: 12px;
  box-shadow:    var(--shadow);
}

/* ── Chips (masters / services) ───────────────────────────── */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }

.chip {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  border:        1.5px solid var(--border);
  padding:       8px 16px;
  border-radius: 999px;
  color:         var(--text-2);
  background:    var(--surface);
  cursor:        pointer;
  user-select:   none;
  font-size:     14px;
  font-weight:   500;
  transition:    border-color var(--t) var(--ease),
                 color        var(--t) var(--ease),
                 background   var(--t) var(--ease);
}
.chip:hover  { border-color: var(--border-strong); color: var(--text); }
.chip.active {
  border-color: var(--accent);
  color:        var(--text);
  background:   var(--accent-subtle);
  font-weight:  600;
}

/* ── Master avatar in chip ────────────────────────────────── */
.chip-av {
  width:         26px;
  height:        26px;
  border-radius: 50%;
  background:    var(--surface-2);
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  flex-shrink:   0;
  font-size:     11px;
  font-weight:   600;
  color:         var(--text-2);
  overflow:      hidden;
  position:      relative;
}
.chip-av img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
}

/* ── Master cards grid ────────────────────────────────────── */
.master-cards {
  display:   flex;
  gap:       10px;
  flex-wrap: wrap;
}

.master-card {
  position:       relative;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  padding:        23px 12px 14px;
  border:         1px solid transparent;
  border-radius:  var(--r-lg);
  cursor:         pointer;
  width:          104px;
  min-height:     148px;
  text-align:     center;
  background:     transparent;
  outline:        none;
  transition:     background 140ms var(--ease),
                  border-color 140ms var(--ease);
}
.master-card:hover {
  border-color: var(--border);
  background:   var(--surface);
}
.master-card.active {
  border-color: var(--accent);
  background:   var(--surface);
}
.master-card:focus-visible {
  border-color: var(--accent);
}

.master-card-check {
  position:      absolute;
  top:           10px;
  right:         10px;
  width:         22px;
  height:        22px;
  border-radius: 50%;
  display:       none;
  place-items:   center;
  background:    var(--accent);
  color:         #fff;
  flex-shrink:   0;
}
.master-card-check svg { width: 13px; height: 13px; display: block; }
.master-card.active .master-card-check { display: grid; }

.master-card-av {
  width:         54px;
  height:        54px;
  border-radius: 50%;
  background:    var(--surface-2);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     22px;
  font-weight:   800;
  color:         var(--text-2);
  overflow:      hidden;
  position:      relative;
  flex-shrink:   0;
  margin-top:    10px;
  margin-bottom: 10px;
}
.master-card-av img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.master-card-name {
  font-size:     13px;
  font-weight:   700;
  color:         var(--text);
  line-height:   1.2;
  max-width:     100%;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.master-card-spec {
  font-size:  11px;
  color:      var(--text-2);
  line-height: 1.3;
  margin-top: 2px;
}

.master-card-badge {
  font-size:  11px;
  color:      var(--text-3);
  margin-top: 3px;
}

/* ── Slot chips ───────────────────────────────────────────── */
.slot-chips { display: flex; gap: 8px; flex-wrap: wrap; }

.slot-chip {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  border:        1.5px solid var(--border);
  height:        34px;
  padding:       0 16px;
  border-radius: 17px;
  cursor:        pointer;
  font-size:     14px;
  font-weight:   600;
  color:         var(--text);
  background:    var(--surface);
  white-space:   nowrap;
  line-height:   1;
  transition:    border-color var(--t) var(--ease),
                 background   var(--t) var(--ease),
                 box-shadow   var(--t) var(--ease);
}
.slot-chip:hover {
  border-color: var(--accent);
  background:   var(--accent-subtle);
  box-shadow:   0 2px 10px var(--accent-glow);
}
.slot-chip.sel {
  border-color: var(--accent);
  background:   var(--accent-subtle);
  color:        var(--accent);
}

/* ── Date groups ──────────────────────────────────────────── */
.date-group        { margin-bottom: 20px; }
.date-group-header {
  font-size:      11px;
  font-weight:    700;
  color:          var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom:  10px;
  padding-bottom: 6px;
  border-bottom:  1px solid var(--border);
}

/* ── Any-master grouped slots ─────────────────────────────── */
.any-masters     { display: flex; flex-direction: column; gap: 16px; }
.any-master-block { display: flex; flex-direction: column; gap: 8px; }
.any-master-hdr {
  display:     flex;
  align-items: center;
  gap:         10px;
}
.any-master-av {
  width:           32px;
  height:          32px;
  border-radius:   50%;
  background:      var(--surface-2);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       14px;
  font-weight:     800;
  color:           var(--text-2);
  overflow:        hidden;
  position:        relative;
  flex-shrink:     0;
}
.any-master-av img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
}
.any-master-name {
  font-size:   14px;
  font-weight: 600;
  color:       var(--text);
}

/* ── Inline booking panel ─────────────────────────────────── */
.booking-panel {
  margin-top:    20px;
  padding-top:   20px;
  border-top:    1px solid var(--border);
}
.bp-summary {
  display:        flex;
  flex-direction: column;
  gap:            6px;
  margin-bottom:  16px;
}
.bp-row {
  display:     flex;
  align-items: baseline;
  gap:         8px;
  font-size:   14px;
}
.bp-lbl {
  font-size:      12px;
  font-weight:    700;
  color:          var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space:    nowrap;
  min-width:      60px;
}
.bp-fields {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  margin-bottom:  14px;
}
.bp-field { display: flex; flex-direction: column; }
.bp-actions { display: flex; justify-content: flex-end; }

/* ── Mini-calendar ────────────────────────────────────────── */
.cal-wrap   { margin-bottom: 16px; }
.cal        { width: 100%; }
.cal-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   12px;
}
.cal-title { font-weight: 700; font-size: 14px; text-transform: capitalize; }
.cal-grid  { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-day-name {
  text-align:  center;
  font-size:   11px;
  color:       var(--text-3);
  padding:     4px 0;
  font-weight: 600;
}
.cal-day {
  text-align:      center;
  padding:         0;
  border-radius:   var(--r-sm);
  font-size:       13px;
  color:           var(--text-3);
  min-height:      36px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background var(--t), color var(--t);
}
.cal-day.has        { color: var(--accent); font-weight: 700; cursor: pointer; }
.cal-day.has:hover  { background: var(--accent-subtle); }
.cal-day.sel        { background: var(--accent) !important; color: #fff !important; font-weight: 700; }
.cal-day.empty      { opacity: 0; pointer-events: none; }
.cal-day.past       { opacity: 0.3; pointer-events: none; }

/* ── Tabs ─────────────────────────────────────────────────── */
.tabs { display: flex; margin-bottom: 14px; }

/* ── Step label ───────────────────────────────────────────── */
.step-label {
  font-size:      11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color:          var(--text-3);
  font-weight:    600;
  margin-bottom:  10px;
}

/* ── Booking modal ────────────────────────────────────────── */
.modal-title {
  font-weight:    700;
  font-size:      17px;
  margin-bottom:  16px;
  letter-spacing: -0.01em;
}
.modal-box     { max-width: 390px; }
.modal-info {
  margin-bottom:  16px;
  border-radius:  var(--r);
  background:     var(--accent-subtle);
  border:         1px solid var(--accent-glow);
  padding:        12px 14px;
}
.modal-row {
  display:       flex;
  gap:           10px;
  font-size:     13px;
  margin-bottom: 6px;
  line-height:   1.4;
}
.modal-row:last-child { margin-bottom: 0; }
.modal-lbl { color: var(--text-2); flex-shrink: 0; width: 64px; }

/* ── Price / duration ─────────────────────────────────────── */
.dur-badge   { font-size: 12px; color: var(--text-2); margin-left: 6px; }

/* ── Salon list ───────────────────────────────────────────── */
.salon-card {
  border:        1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding:       14px 16px;
  cursor:        pointer;
  margin-bottom: 10px;
  background:    var(--surface);
  transition:    border-color var(--t), box-shadow var(--t);
}
.salon-card:hover { border-color: var(--accent); box-shadow: 0 4px 20px var(--accent-glow); }
.salon-card .name { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.salon-card .addr { color: var(--text-2); font-size: 13px; margin-top: 3px; }

/* ── Salon booking header ─────────────────────────────────── */
.salon-logo {
  width:         52px;
  height:        52px;
  border-radius: var(--r);
  object-fit:    cover;
  flex-shrink:   0;
}
.salon-desc {
  font-size:   13px;
  color:       var(--text-2);
  margin-top:  4px;
  line-height: 1.5;
}
.salon-contact {
  font-size:  12px;
  color:      var(--text-3);
  margin-top: 6px;
  display:    flex;
  gap:        12px;
  flex-wrap:  wrap;
}
.salon-contact a       { color: var(--text-3); text-decoration: none; }
.salon-contact a:hover { color: var(--accent); }

/* ── Date scroll strip (mobile, replaces mini-calendar) ──────────── */
.date-strip {
  display: none;
  overflow-x: auto;
  gap: 8px;
  padding: 4px 2px 12px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin-bottom: 4px;
  scroll-snap-type: x mandatory;
}
.date-strip::-webkit-scrollbar { display: none; }
.date-pill {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: var(--date-pill-min-w);
  padding: var(--date-pill-pad);
  border-radius: var(--date-pill-r);
  border: var(--date-pill-border) solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s, background .15s, color .15s;
  scroll-snap-align: start;
}
.date-pill:hover     { border-color: var(--accent); background: var(--accent-subtle); }
.date-pill.sel       { border-color: var(--accent); background: var(--accent); color: #fff; }
.pill-wday           { font-size: 11px; font-weight: 600; text-transform: capitalize; opacity: .7; }
.date-pill.sel .pill-wday { opacity: .9; }
.pill-num            { font-size: 18px; font-weight: 700; line-height: 1.1; }

@media (max-width: 768px) {
  .date-strip { display: flex; }
  .cal-wrap   { display: none; }
}

/* ── Salon info card ──────────────────────────────────────────── */
.si-card {
  background:    var(--surface);
  border:        1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding:       24px;
  box-shadow:    var(--shadow-md);
}

/* Part 1 — logo + main info */
.si-top {
  display:               grid;
  grid-template-columns: 110px 1fr;
  gap:                   24px;
  align-items:           start;
}

.si-logo {
  width:           110px;
  height:          110px;
  border-radius:   50%;
  background:      var(--surface-2);
  border:          1px solid var(--border);
  display:         flex;
  align-items:     center;
  justify-content: center;
  overflow:        hidden;
  flex-shrink:     0;
  position:        relative;
}
.si-logo img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
}
.si-logo-init {
  font-size:   36px;
  font-weight: 800;
  color:       var(--accent);
  line-height: 1;
  user-select: none;
}

.si-main { min-width: 0; padding-top: 4px; }

.si-title-row {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             16px;
}
.si-title-left { min-width: 0; }

.si-name {
  font-size:      24px;
  font-weight:    800;
  letter-spacing: -0.03em;
  line-height:    1.1;
  color:          var(--text);
  margin:         0;
}

.si-badge {
  display:       inline-flex;
  align-items:   center;
  height:        26px;
  padding:       0 12px;
  border-radius: 999px;
  background:    var(--accent-subtle);
  color:         var(--accent);
  font-size:     12px;
  font-weight:   600;
  margin-top:    10px;
}

.si-desc {
  font-size:   14px;
  color:       var(--text-2);
  line-height: 1.55;
  margin:      14px 0 0;
}

/* ── Open / closed status badge (inline in title row) ─────────── */
.si-status {
  display:       inline-flex;
  align-items:   center;
  height:        30px;
  padding:       0 14px;
  border-radius: 999px;
  font-size:     13px;
  font-weight:   600;
  white-space:   nowrap;
  flex-shrink:   0;
}
.si-status--open   { background: rgba(16,185,129,.14); color: var(--done, #10b981); }
.si-status--closed { background: rgba(239,68,68,.14);  color: #ef4444; }

.si-divider {
  height:     1px;
  background: var(--border);
  margin:     20px 0;
}

/* Part 2 — contacts: address / phone / email in 3 cols */
.si-contacts {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   16px;
  align-items:           center;
}

.si-contact {
  display:     flex;
  align-items: center;
  gap:         12px;
  font-size:   14px;
  color:       var(--text-2);
  min-width:   0;
}
.si-contact a {
  color:           var(--text-2);
  text-decoration: none;
  overflow:        hidden;
  text-overflow:   ellipsis;
  white-space:     nowrap;
}
.si-contact a:hover { color: var(--accent); }
.si-contact span {
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.si-icon {
  width:           32px;
  height:          32px;
  flex-shrink:     0;
  border-radius:   12px;
  background:      var(--surface-2);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--text-3);
}
.si-icon svg { width: 16px; height: 16px; display: block; }

/* Part 3 — work hours (left) + socials (right) */
.si-bottom {
  display:               grid;
  grid-template-columns: 1fr 1px 1fr;
  gap:                   32px;
  align-items:           start;
}

.si-vline {
  background:  var(--border);
  width:       1px;
  align-self:  stretch;
}

.si-work-label {
  font-size:      12px;
  font-weight:    800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--text-3);
  margin-bottom:  16px;
}

.si-work-row {
  font-size:   13px;
  color:       var(--text-2);
  font-weight: 500;
  line-height: 1.9;
}
.si-sched {
  display:               grid;
  grid-template-columns: auto 1fr;
  column-gap:            14px;
  row-gap:               3px;
}
.si-sched-day,
.si-sched-time {
  font-size:   13px;
  color:       var(--text-2);
  font-weight: 500;
  line-height: 1.75;
}

.si-socials {
  display: grid;
  gap:     16px;
}

.si-link {
  display:         flex;
  align-items:     center;
  gap:             12px;
  font-size:       14px;
  color:           var(--text-2);
  text-decoration: none;
}
.si-link:hover           { color: var(--accent); }
.si-link:hover .si-icon  { color: var(--accent); }

/* ── Change salon button row ──────────────────────────────────── */
.si-change-row {
  display:    flex;
  margin-top: 16px;
}

.si-review-row {
  display:    flex;
  margin-top: 14px;
}

/* text-link style review button */
.si-review-btn {
  background:    none;
  border:        none;
  padding:       0;
  font-size:     13px;
  color:         var(--text-2);
  cursor:        pointer;
  text-decoration: none;
}
.si-review-btn:hover { text-decoration: underline; color: var(--text); }

/* star picker in public review modal */
.prv-stars {
  display:    flex;
  gap:        6px;
}
.prv-star {
  font-size:  32px;
  color:      var(--border-strong);
  cursor:     pointer;
  transition: color 0.1s;
  line-height: 1;
  user-select: none;
}
.prv-star--on,
.prv-star--hover { color: var(--star, #f59e0b); }

/* ── Master about card ────────────────────────────────────── */
.mst-about-card { padding: 14px 16px 12px; }

.mst-about-hdr {
  display:     flex;
  align-items: flex-start;
  gap:         14px;
  margin-bottom: 10px;
}

.mst-about-av {
  flex-shrink: 0;
  width:       56px !important;
  height:      56px !important;
  font-size:   20px !important;
  margin:      0 !important;
}

.mst-about-meta { flex: 1; min-width: 0; }

.mst-about-name {
  font-size:   15px;
  font-weight: 700;
  color:       var(--text);
  line-height: 1.2;
}

.mst-about-spec {
  font-size:  12px;
  color:      var(--text-2);
  margin-top: 2px;
}

.mst-about-rating {
  display:     flex;
  align-items: center;
  gap:         4px;
  margin-top:  5px;
}

.mst-stars-row { display: flex; gap: 1px; }

.mst-star       { font-size: 14px; color: var(--border-strong); line-height: 1; }
.mst-star.on    { color: var(--star, #f59e0b); }

.mst-rating-val { font-size: 13px; font-weight: 700; }
.mst-rating-cnt { font-size: 12px; color: var(--text-2); }

.mst-no-reviews {
  font-size: 13px;
  color:     var(--text-2);
  padding:   4px 0 2px;
}

/* Sort bar */
.mst-sort-bar {
  display:       flex;
  gap:           6px;
  margin-bottom: 8px;
}

.mst-sort-btn {
  padding:       6px 14px;
  font-size:     13px;
  font-weight:   500;
  border-radius: var(--r);
  border:        1px solid var(--border);
  background:    transparent;
  color:         var(--text-2);
  cursor:        pointer;
  transition:    background 120ms, color 120ms, border-color 120ms;
}
.mst-sort-btn:hover { background: var(--surface); color: var(--text); }
.mst-sort-btn.active {
  background:   var(--accent);
  border-color: var(--accent);
  color:        #fff;
}

/* Review list — scrollable, ~2.5 items visible */
.mst-rev-list {
  display:    flex;
  flex-direction: column;
  gap:        0;
  max-height: 123px;
  overflow-y: auto;
  /* subtle scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.mst-rev-list::-webkit-scrollbar       { width: 4px; }
.mst-rev-list::-webkit-scrollbar-track { background: transparent; }
.mst-rev-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }

.mst-rev-item {
  padding:       8px 0;
  border-bottom: 1px solid var(--border);
  flex-shrink:   0;
}
.mst-rev-item:last-child { border-bottom: none; }

.mst-rev-hdr {
  display:     flex;
  align-items: center;
  gap:         8px;
  margin-bottom: 3px;
}
.mst-rev-stars-row { display: flex; gap: 1px; }
.mst-rev-date {
  font-size:  11px;
  color:      var(--text-2);
  flex-shrink: 0;
}

.mst-rev-text {
  font-size:   13px;
  color:       var(--text);
  line-height: 1.45;
  word-break:  break-word;
  cursor:      pointer;
}
.mst-rev-text.clamp {
  display:            -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}

@media (max-width: 680px) {
  .si-top {
    grid-template-columns: 80px 1fr;
    gap: 16px;
  }
  .si-logo { width: 80px; height: 80px; }
  .si-logo-init { font-size: 26px; }
  .si-name { font-size: 18px; }
  .si-title-row { flex-direction: column; gap: 10px; }
  .si-contacts { grid-template-columns: 1fr; gap: 12px; }
  .si-bottom { grid-template-columns: 1fr; gap: 24px; }
  .si-vline { display: none; }
}