/* ══════════════════════════════════════════════════
   Extra visual detail styles injected separately
   (gallery textures, service card visual polish)
   ══════════════════════════════════════════════════ */

/* Gallery items hover cursor */
.gallery__track { user-select: none; }

/* Stagger delay for reveal-items */
.reveal-item:nth-child(1) { transition-delay: 0ms; }
.reveal-item:nth-child(2) { transition-delay: 80ms; }
.reveal-item:nth-child(3) { transition-delay: 160ms; }
.reveal-item:nth-child(4) { transition-delay: 240ms; }

/* Service card gradient overlays */
.service-card__img--hair {
  position: relative;
}
.service-card__img--hair::before {
  content: '✂';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: rgba(201,169,110,0.2);
  pointer-events: none;
}
.service-card__img--spa::before {
  content: '◈';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: rgba(201,169,110,0.2);
  pointer-events: none;
}
.service-card__img--nails::before {
  content: '◇';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: rgba(201,169,110,0.2);
  pointer-events: none;
}

/* ══════════════════════════════════════════════════
   Booking — Customer info form & DB-driven additions
   (matches existing monochrome/Outfit aesthetic)
   ══════════════════════════════════════════════════ */

/* Customer info container inside the summary panel */
.booking__form {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(201,169,110,0.12);
}
.booking__form-title {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.85rem 0;
  font-weight: 500;
}
.booking__form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}
.booking__input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--beige);
  outline: none;
  transition: border-color 180ms ease, background 180ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.booking__input::placeholder { color: rgba(245,237,228,0.35); }
.booking__input:focus {
  border-color: var(--gold);
  background: rgba(201,169,110,0.05);
}
.booking__input:invalid:not(:placeholder-shown) {
  border-color: rgba(220,80,80,0.4);
}
.booking__input--full { grid-column: 1 / -1; }
.booking__form-note {
  margin: 0.7rem 0 0 0;
  font-size: 0.72rem;
  color: rgba(245,237,228,0.4);
  line-height: 1.5;
}

/* Inline error message */
.booking__error {
  margin: 0.85rem 0 0 0;
  padding: 0.7rem 0.95rem;
  background: rgba(220,80,80,0.08);
  border: 1px solid rgba(220,80,80,0.25);
  border-radius: 8px;
  color: #ffb8b8;
  font-size: 0.82rem;
  line-height: 1.5;
}

/* Success confirmation note */
.booking__success {
  margin: 1rem 0 0 0;
  padding: 0.85rem 1rem;
  background: rgba(201,169,110,0.08);
  border: 1px solid rgba(201,169,110,0.25);
  border-radius: 8px;
  color: var(--gold);
  font-size: 0.82rem;
  text-align: center;
  letter-spacing: 0.02em;
}

/* Disabled state for the CTA after a booking is made */
#waBtn.booked {
  background: rgba(201,169,110,0.2);
  color: var(--gold);
  cursor: default;
  pointer-events: none;
}
#waBtn:disabled {
  opacity: 0.55;
  cursor: wait;
}

/* Time slots: unavailable state (DB-driven) */
.booking__time-btn.unavailable,
.booking__time-btn[disabled] {
  opacity: 0.25;
  cursor: not-allowed;
  text-decoration: line-through;
  pointer-events: none;
}

/* Time loading state */
.booking__time-loading {
  grid-column: 1 / -1;
  color: rgba(245,237,228,0.45);
  text-align: center;
  font-size: 0.85rem;
  padding: 1rem 0;
  margin: 0;
}

/* Mobile: stack form to single column */
@media (max-width: 480px) {
  .booking__form-grid { grid-template-columns: 1fr; }
}

html[data-theme="light"] .booking__input {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.12);
  color: #000000;
}
html[data-theme="light"] .booking__input::placeholder,
html[data-theme="light"] .booking__form-note,
html[data-theme="light"] .booking__time-loading {
  color: rgba(0,0,0,0.45);
}
html[data-theme="light"] .booking__input:focus,
html[data-theme="light"] .booking__success,
html[data-theme="light"] #waBtn.booked {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.25);
}