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

/* ── 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;
}

/* ── 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);
}

/* ── 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);
}
.slot-hour-hdr {
  font-size:   12px;
  font-weight: 600;
  color:       var(--text-3);
  margin:      10px 0 6px;
}
.slot-hour-hdr:first-child { margin-top: 2px; }

/* ── 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;
}
.date-strip::-webkit-scrollbar { display: none; }
.date-pill {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 44px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s, background .15s, color .15s;
}
.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; }
}