/* ═══════════════════════════════════
   BOOKING PAGE STYLES
═══════════════════════════════════ */

.booking-page { background:var(--dark); }

.booking-hero {
  background:var(--black);
  padding:6rem 2rem 2.5rem;
  text-align:center;
  border-bottom:1px solid var(--border);
}
.booking-title {
  font-family:var(--font-display);
  font-size:clamp(1.8rem,4vw,3rem);
  font-weight:700; letter-spacing:0.08em;
  margin:0.5rem 0;
}
.booking-sub {
  font-family:var(--font-ui);
  font-size:0.72rem; letter-spacing:0.25em; text-transform:uppercase;
  color:var(--grey); margin-top:0.3rem;
}

/* ── LAYOUT ── */
.booking-layout {
  display:grid;
  grid-template-columns:1fr 380px;
  min-height:80vh;
  max-width:1300px; margin:0 auto;
  padding:0 2rem 4rem;
  gap:2.5rem;
  align-items:start;
}

/* ── STEPS BAR ── */
.steps-bar {
  display:flex; align-items:center;
  padding:2rem 0 1.5rem;
  gap:0;
}
.step {
  display:flex; flex-direction:column;
  align-items:center; gap:0.4rem;
  flex-shrink:0;
}
.step-num {
  width:32px; height:32px; border-radius:50%;
  border:1px solid var(--grey2);
  color:var(--grey2);
  font-family:var(--font-ui); font-size:0.75rem;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.3s ease;
}
.step span {
  font-family:var(--font-ui);
  font-size:0.6rem; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--grey2); transition:color 0.3s ease;
}
.step.active .step-num {
  background:var(--gold); border-color:var(--gold);
  color:var(--black);
}
.step.active span { color:var(--gold); }
.step.done .step-num {
  background:var(--dark3); border-color:var(--gold);
  color:var(--gold);
}
.step.done span { color:var(--grey); }
.step-line {
  flex:1; height:1px; background:var(--dark3);
  min-width:20px;
}

/* ── STEP CONTENT ── */
.step-content { display:none; }
.step-content.active { display:block; }

/* ── SERVICE CATEGORIES ── */
.service-cats {
  display:flex; gap:0.5rem; flex-wrap:wrap;
  margin-bottom:1.5rem; padding-bottom:1.5rem;
  border-bottom:1px solid var(--border);
}
.cat-btn {
  font-family:var(--font-ui);
  font-size:0.65rem; font-weight:400;
  letter-spacing:0.15em; text-transform:uppercase;
  padding:0.5rem 1rem;
  background:none; border:1px solid var(--dark3);
  color:var(--grey); cursor:pointer;
  transition:all 0.25s ease;
}
.cat-btn:hover { border-color:var(--grey2); color:var(--white); }
.cat-btn.active { border-color:var(--gold); color:var(--gold); background:rgba(201,168,76,0.05); }

.cat-section { display:none; }
.cat-section.active { display:block; }
.cat-label {
  font-family:var(--font-display);
  font-size:0.75rem; font-weight:600;
  letter-spacing:0.3em; text-transform:uppercase;
  color:var(--grey); margin-bottom:0.75rem;
}

/* ── SERVICE ITEMS ── */
.svc-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.25rem;
  border:1px solid var(--dark3);
  margin-bottom:0.5rem;
  cursor:pointer;
  transition:border-color 0.25s, background 0.25s;
  position:relative;
}
.svc-item:hover { border-color:var(--border); }
.svc-item.selected { border-color:var(--gold); background:rgba(201,168,76,0.04); }
.svc-package { background:linear-gradient(135deg, var(--dark2), #1a1408); }
.svc-name {
  font-family:var(--font-display);
  font-size:0.9rem; font-weight:600;
  letter-spacing:0.05em; margin-bottom:0.3rem;
  display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap;
}
.popular-tag, .save-tag {
  font-family:var(--font-ui);
  font-size:0.5rem; font-weight:500;
  letter-spacing:0.15em; text-transform:uppercase;
  background:var(--gold); color:var(--black);
  padding:0.2rem 0.5rem;
}
.save-tag { background:rgba(201,168,76,0.2); color:var(--gold); }
.svc-desc {
  font-family:var(--font-ui);
  font-size:0.72rem; color:var(--grey); line-height:1.5;
}
.svc-price {
  font-family:var(--font-display);
  font-size:0.9rem; color:var(--gold);
  font-weight:600; margin-top:0.4rem;
}
.svc-add {
  width:32px; height:32px; border-radius:50%;
  border:1px solid var(--grey2);
  background:none; color:var(--white);
  font-size:1.2rem; cursor:pointer;
  transition:all 0.25s ease; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.svc-add:hover { border-color:var(--gold); color:var(--gold); }
.svc-item.selected .svc-add {
  background:var(--gold); border-color:var(--gold);
  color:var(--black); font-size:1rem;
}

/* ── STEP NAV ── */
.step-nav {
  display:flex; justify-content:space-between; align-items:center;
  padding-top:2rem; margin-top:2rem;
  border-top:1px solid var(--border);
}
.back-btn { cursor:pointer; }

/* ── STEP HEADING ── */
.step-heading {
  font-family:var(--font-display);
  font-size:1.3rem; font-weight:600;
  letter-spacing:0.1em; margin-bottom:1.5rem;
}

/* ── CALENDAR ── */
.date-picker { margin-bottom:2rem; }
.month-nav {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1rem;
}
.month-btn {
  background:none; border:1px solid var(--dark3);
  color:var(--white); font-size:1.2rem;
  width:36px; height:36px; cursor:pointer;
  transition:border-color 0.25s, color 0.25s;
  display:flex; align-items:center; justify-content:center;
}
.month-btn:hover { border-color:var(--gold); color:var(--gold); }
.month-label {
  font-family:var(--font-display);
  font-size:1rem; font-weight:600; letter-spacing:0.15em;
}
.calendar {
  display:grid; grid-template-columns:repeat(7,1fr);
  gap:3px;
}
.cal-day-name {
  font-family:var(--font-ui);
  font-size:0.55rem; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--grey); text-align:center; padding:0.4rem 0;
}
.cal-day {
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-ui); font-size:0.78rem;
  cursor:pointer; transition:all 0.2s ease;
  border:1px solid transparent;
}
.cal-day:hover:not(.disabled):not(.empty) {
  border-color:var(--border); color:var(--gold);
}
.cal-day.today { color:var(--gold); font-weight:500; }
.cal-day.selected {
  background:var(--gold); color:var(--black);
  font-weight:700; border-color:var(--gold);
}
.cal-day.disabled { color:var(--dark3); cursor:not-allowed; }
.cal-day.empty { cursor:default; }

/* ── TIME GRID ── */
.time-section { margin-bottom:1.5rem; }
.time-heading {
  font-family:var(--font-display);
  font-size:0.9rem; font-weight:600;
  letter-spacing:0.15em; margin-bottom:1rem;
}
.time-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(80px, 1fr));
  gap:0.5rem;
}
.time-slot {
  font-family:var(--font-ui);
  font-size:0.72rem; text-align:center;
  padding:0.6rem; border:1px solid var(--dark3);
  cursor:pointer; transition:all 0.2s ease;
  color:var(--white);
}
.time-slot:hover { border-color:var(--border); color:var(--gold); }
.time-slot.selected { background:var(--gold); color:var(--black); border-color:var(--gold); font-weight:500; }
.time-slot.unavailable { color:var(--dark3); border-color:var(--dark2); cursor:not-allowed; }

/* ── FORM ── */
.form-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:1rem; margin-bottom:1rem;
}
.form-group { display:flex; flex-direction:column; gap:0.4rem; }
.form-group.full { grid-column:1/-1; }
.form-group label {
  font-family:var(--font-ui);
  font-size:0.65rem; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--grey);
}
.form-group input, .form-group textarea {
  background:var(--dark2); border:1px solid var(--dark3);
  color:var(--white); padding:0.75rem 1rem;
  font-family:var(--font-ui); font-size:0.85rem;
  outline:none; transition:border-color 0.25s;
  resize:vertical;
}
.form-group input:focus, .form-group textarea:focus {
  border-color:var(--gold);
}
.form-group input::placeholder, .form-group textarea::placeholder {
  color:var(--grey2);
}

/* ── CONFIRM ── */
.confirm-card {
  border:1px solid var(--border);
  margin-bottom:1.5rem; overflow:hidden;
}
.confirm-section {
  padding:1.25rem;
  border-bottom:1px solid var(--border);
}
.confirm-row {
  display:flex;
}
.confirm-section.half {
  flex:1; border-right:1px solid var(--border);
}
.confirm-section.half:last-child { border-right:none; }
.confirm-label {
  font-family:var(--font-ui);
  font-size:0.58rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--grey); margin-bottom:0.4rem;
}
.confirm-value {
  font-family:var(--font-display);
  font-size:0.95rem; font-weight:600; letter-spacing:0.05em;
}
.confirm-service-item {
  display:flex; justify-content:space-between; align-items:center;
  padding:0.25rem 0;
  font-family:var(--font-ui); font-size:0.82rem;
}
.confirm-service-item span:last-child { color:var(--gold); }
.confirm-total {
  display:flex; justify-content:space-between; align-items:center;
  padding:1.25rem;
  background:rgba(201,168,76,0.06);
  font-family:var(--font-display);
  font-size:1.1rem; font-weight:700;
  letter-spacing:0.1em;
}
.confirm-total span:last-child { color:var(--gold); }
.confirm-note {
  font-family:var(--font-ui); font-size:0.72rem;
  color:var(--grey); text-align:center; margin-bottom:0.5rem;
}

/* ── SUCCESS ── */
.success-screen {
  display:flex; flex-direction:column;
  align-items:center; text-align:center;
  padding:3rem 1rem;
}
.success-icon {
  width:80px; height:80px; border-radius:50%;
  background:var(--gold); color:var(--black);
  font-size:2.5rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.5rem;
  animation:popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes popIn { from{transform:scale(0)} to{transform:scale(1)} }
.success-screen h2 {
  font-family:var(--font-display);
  font-size:2rem; font-weight:700;
  letter-spacing:0.1em; margin-bottom:1rem;
}
.success-screen p {
  font-family:var(--font-body);
  font-size:1.05rem; font-style:italic;
  color:var(--grey); max-width:400px; line-height:1.7;
  margin-bottom:1.5rem;
}
.success-details {
  background:var(--dark2); border:1px solid var(--border);
  padding:1.5rem; max-width:400px; width:100%;
  text-align:left;
}

/* ── SIDEBAR ── */
.booking-sidebar { position:sticky; top:90px; }
.sidebar-inner {
  background:var(--dark2);
  border:1px solid var(--border);
  overflow:hidden;
}
.sidebar-header {
  padding:1.5rem;
  border-bottom:1px solid var(--border);
  background:var(--black);
}
.sidebar-shop { display:flex; gap:1rem; align-items:center; }
.shop-avatar {
  width:56px; height:56px;
  background:var(--gold); color:var(--black);
  font-family:var(--font-display);
  font-weight:900; font-size:1.1rem;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.shop-name {
  font-family:var(--font-display);
  font-size:1rem; font-weight:700;
  letter-spacing:0.1em; color:var(--white);
}
.shop-rating {
  font-family:var(--font-ui); font-size:0.65rem;
  color:var(--gold); margin:0.15rem 0;
}
.shop-loc {
  font-family:var(--font-ui); font-size:0.65rem;
  color:var(--grey); letter-spacing:0.05em;
}
.sidebar-body { padding:1.5rem; }
.cart-empty { text-align:center; padding:2rem 0; }
.cart-empty-icon { font-size:2rem; color:var(--grey2); margin-bottom:0.75rem; }
.cart-empty p {
  font-family:var(--font-ui); font-size:0.75rem;
  color:var(--grey2); letter-spacing:0.1em;
}
.cart-item {
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:0.75rem 0;
  border-bottom:1px solid var(--dark3);
}
.cart-item:last-child { border-bottom:none; }
.cart-item-name {
  font-family:var(--font-ui); font-size:0.8rem; color:var(--white); flex:1;
}
.cart-item-right { display:flex; align-items:center; gap:0.75rem; }
.cart-item-price {
  font-family:var(--font-display); font-size:0.85rem; color:var(--gold); font-weight:600;
}
.cart-remove {
  background:none; border:none; color:var(--grey2);
  cursor:pointer; font-size:0.9rem;
  transition:color 0.2s; line-height:1;
}
.cart-remove:hover { color:var(--white); }
.cart-total, .cart-duration {
  display:flex; justify-content:space-between; align-items:center;
  padding-top:1rem; margin-top:0.5rem;
  font-family:var(--font-ui); font-size:0.72rem;
  border-top:1px solid var(--border);
  letter-spacing:0.1em;
}
.cart-total {
  font-family:var(--font-display); font-size:1rem; font-weight:700;
}
.cart-total span:last-child { color:var(--gold); }
.cart-duration { color:var(--grey); margin-top:0; border-top:none; }
.sidebar-info {
  border-top:1px solid var(--border);
  padding:1rem 1.5rem;
  display:flex; flex-direction:column; gap:0.6rem;
}
.info-row {
  display:flex; gap:0.6rem; align-items:flex-start;
  font-family:var(--font-ui); font-size:0.7rem;
  color:var(--grey); line-height:1.5;
}
.info-icon { flex-shrink:0; }
.wa-sidebar {
  display:flex; align-items:center; gap:0.5rem;
  justify-content:center; padding:0.75rem;
  background:#128C7E; color:#fff;
  font-family:var(--font-ui); font-size:0.65rem;
  font-weight:500; letter-spacing:0.1em; text-transform:uppercase;
  margin-top:0.5rem; transition:background 0.25s;
}
.wa-sidebar:hover { background:#25D366; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .booking-layout {
    grid-template-columns:1fr;
    padding:0 1.25rem 4rem;
  }
  .booking-sidebar { position:static; }
  .sidebar-inner { margin-top:0; }
}
@media (max-width: 600px) {
  .form-grid { grid-template-columns:1fr; }
  .form-group.full { grid-column:1; }
  .confirm-row { flex-direction:column; }
  .confirm-section.half { border-right:none; }
  .steps-bar { gap:0; overflow-x:auto; padding-bottom:0.5rem; }
  .step span { display:none; }
}