/* ============================================
   MADE Institut — Modal de Réservation
   Plein écran mobile + Modal centrée desktop
   ============================================ */

/* ══════════════════════════════════════════════
   BOOKING MODAL SHELL
   ══════════════════════════════════════════════ */
.booking-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(100%);
  transition: opacity var(--transition-base),
              visibility var(--transition-base),
              transform var(--transition-base);
}

.booking-modal.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ── Header ── */
.booking-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border-light);
  min-height: var(--nav-height-mobile);
  flex-shrink: 0;
}

.booking-modal__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--dark);
}

.booking-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-full);
  transition: background-color var(--transition-fast);
  color: var(--text);
}

.booking-modal__close:hover {
  background-color: var(--bg-alt);
}

.booking-modal__close svg {
  width: 24px;
  height: 24px;
}

/* ══════════════════════════════════════════════
   PROGRESS STEPS
   ══════════════════════════════════════════════ */
.booking-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md) var(--space-lg);
  flex-shrink: 0;
  background-color: var(--bg);
  border-bottom: 1px solid var(--border-light);
}

.booking-step {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.booking-step__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background-color: var(--border-light);
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  transition: all var(--transition-base);
  flex-shrink: 0;
}

.booking-step__label {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  font-weight: var(--fw-medium);
  transition: color var(--transition-base);
}

.booking-step__line {
  width: 40px;
  height: 2px;
  background-color: var(--border-light);
  margin: 0 var(--space-xs);
  transition: background-color var(--transition-base);
}

/* Step states */
.booking-step--active .booking-step__circle {
  background-color: var(--primary);
  color: var(--white);
}

.booking-step--active .booking-step__label {
  color: var(--primary);
  font-weight: var(--fw-semibold);
}

.booking-step--done .booking-step__circle {
  background-color: var(--success);
  color: var(--white);
}

.booking-step--done .booking-step__label {
  color: var(--success);
}

.booking-step--done .booking-step__line {
  background-color: var(--success);
}

/* ══════════════════════════════════════════════
   CONTENT AREA (scrollable)
   ══════════════════════════════════════════════ */
.booking-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-xl) var(--space-lg);
  -webkit-overflow-scrolling: touch;
}

/* ── Step panels ── */
.booking-panel {
  display: none;
  animation: bookingFadeIn 0.3s var(--ease-out) both;
}

.booking-panel.is-active {
  display: block;
}

@keyframes bookingFadeIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ══════════════════════════════════════════════
   STEP 1 — Search + Choix du Soin
   ══════════════════════════════════════════════ */

/* ── Search bar ── */
.booking-search {
  position: relative;
}

.booking-search__input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  padding-left: 2.75rem;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  background-color: var(--white);
  color: var(--text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  /* Search icon via background SVG */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238B7355' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.85rem center;
}

.booking-search__input::placeholder {
  color: var(--text-muted);
}

.booking-search__input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(127, 79, 71, 0.12);
}

/* ── Multi-select hint ── */
.booking-panel__hint {
  font-size: var(--fs-small);
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}

/* ── No results message ── */
.booking-no-results {
  text-align: center;
  padding: var(--space-xl) var(--space-md);
  color: var(--text-muted);
  font-size: var(--fs-body);
}

.booking-services {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  padding-bottom: var(--space-3xl); /* room for selection bar */
}

/* ── Floating selection summary bar ── */
.booking-selection-bar {
  position: sticky;
  bottom: calc(-1 * var(--space-xl) - 1px);  /* counteract parent padding + subpixel gap */
  margin: 0 calc(-1 * var(--space-lg));
  padding: var(--space-md) var(--space-lg);
  background: var(--primary);
  color: var(--white);
  text-align: center;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.03em;
  z-index: 2;
}

/* Gradient fade above the bar to hide content scrolling behind */
.booking-selection-bar::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(to top, var(--white) 0%, transparent 100%);
  pointer-events: none;
}

.booking-service {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--white);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.booking-service:hover {
  border-color: var(--primary-light);
  background-color: var(--cream);
}

.booking-service.is-selected {
  border-color: var(--primary);
  background-color: rgba(var(--primary-rgb), 0.05);
}

.booking-service__image {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}

.booking-service__info {
  flex: 1;
  min-width: 0;
}

.booking-service__name {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--dark);
  margin-bottom: var(--space-2xs);
}

.booking-service__meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--fs-caption);
  color: var(--text-light);
}

.booking-service__price {
  font-weight: var(--fw-semibold);
  color: var(--primary);
  margin-left: auto;
  font-size: var(--fs-body);
  white-space: nowrap;
}

.booking-service__check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  border: 2px solid var(--border);
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.booking-service.is-selected .booking-service__check {
  border-color: var(--primary);
  background-color: var(--primary);
  color: var(--white);
}

/* ══════════════════════════════════════════════
   STEP 2 — Date & Heure
   ══════════════════════════════════════════════ */
.booking-datetime {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.booking-calendar {
  width: 100%;
}

/* Flatpickr override for MADE brand */
.booking-calendar .flatpickr-calendar {
  width: 100% !important;
  box-shadow: none;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
}

.booking-calendar .flatpickr-day.selected {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}

.booking-calendar .flatpickr-day:hover {
  background: rgba(var(--primary-rgb), 0.1);
  border-color: rgba(var(--primary-rgb), 0.1);
}

/* ── Time slots grid ── */
.booking-slots__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  margin-bottom: var(--space-md);
}

.booking-slots__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-xs);
}

.booking-slot {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  text-align: center;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.booking-slot:hover {
  border-color: var(--primary);
  background-color: var(--cream);
}

.booking-slot.is-selected {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.booking-slot:disabled,
.booking-slot.is-unavailable {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}

.booking-slots__empty {
  text-align: center;
  padding: var(--space-xl);
  color: var(--text-muted);
  font-style: italic;
}

/* ══════════════════════════════════════════════
   STEP 3 — Informations client
   ══════════════════════════════════════════════ */
.booking-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.booking-form__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.booking-form__label {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--text);
}

.booking-form__label .required {
  color: var(--error);
}

.booking-form__hint {
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.booking-form__error {
  font-size: var(--fs-caption);
  color: var(--error);
  display: none;
}

.booking-form__group.has-error .booking-form__error {
  display: block;
}

.booking-form__group.has-error input,
.booking-form__group.has-error textarea {
  border-color: var(--error);
}

/* Phone input with country code */
.booking-phone {
  display: flex;
  gap: var(--space-xs);
}

.booking-phone__prefix {
  width: 80px;
  flex-shrink: 0;
  background-color: var(--bg-alt);
  text-align: center;
  font-weight: var(--fw-medium);
}

.booking-phone__input {
  flex: 1;
}

/* ══════════════════════════════════════════════
   STEP 4 — Récapitulatif
   ══════════════════════════════════════════════ */
.booking-payment {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.booking-payment__summary {
  background-color: var(--cream);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.booking-payment__summary h4 {
  margin-bottom: var(--space-md);
}

.booking-payment__line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-xs) 0;
  font-size: var(--fs-small);
  color: var(--text-light);
}

/* Multi-treatment list in summary */
.booking-payment__line--treatments {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-xs);
}

.booking-payment__line--treatments > span:first-child {
  font-weight: var(--fw-semibold);
  color: var(--text);
  margin-bottom: var(--space-2xs);
}

.summary-treatment-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2xs) var(--space-sm);
  background: var(--white);
  border-radius: var(--radius-sm);
  font-size: var(--fs-caption);
}

.summary-treatment-item small {
  color: var(--text-muted);
  font-weight: var(--fw-regular);
}

.booking-payment__line--total {
  border-top: 2px solid var(--border);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  font-weight: var(--fw-semibold);
  color: var(--dark);
  font-size: var(--fs-body);
}

.booking-payment__note {
  font-size: var(--fs-caption);
  color: var(--primary);
  font-style: italic;
  margin-top: var(--space-md);
}

/* ══════════════════════════════════════════════
   STEP 5 — Confirmation
   ══════════════════════════════════════════════ */
.booking-confirmation {
  text-align: center;
  padding: var(--space-xl) 0;
}

.booking-confirmation__icon {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--space-xl);
  border-radius: var(--radius-full);
  background-color: rgba(74, 124, 89, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--success);
}

.booking-confirmation__icon svg {
  width: 40px;
  height: 40px;
}

.booking-confirmation h3 {
  margin-bottom: var(--space-md);
}

.booking-confirmation p {
  color: var(--text-light);
  max-width: 400px;
  margin: 0 auto var(--space-lg);
}

.booking-confirmation__details {
  background-color: var(--cream);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  max-width: 400px;
  margin: 0 auto;
  text-align: left;
}

.booking-confirmation__detail {
  display: flex;
  justify-content: space-between;
  padding: var(--space-xs) 0;
  font-size: var(--fs-small);
}

.booking-confirmation__detail dt {
  color: var(--text-light);
}

.booking-confirmation__detail dd {
  font-weight: var(--fw-semibold);
  color: var(--dark);
}

/* ══════════════════════════════════════════════
   FOOTER NAVIGATION (prev/next)
   ══════════════════════════════════════════════ */
.booking-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--border-light);
  background-color: var(--white);
  flex-shrink: 0;
}

.booking-modal__footer .btn {
  min-width: 140px;
}

.booking-modal__footer .btn--back {
  background: none;
  border: none;
  color: var(--text-light);
  font-weight: var(--fw-medium);
  padding-left: 0;
  min-width: auto;
}

.booking-modal__footer .btn--back:hover {
  color: var(--primary);
}

/* ══════════════════════════════════════════════
   LOADING OVERLAY
   ══════════════════════════════════════════════ */
.booking-loading {
  position: absolute;
  inset: 0;
  z-index: 10;
  background-color: rgba(255, 250, 245, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
}

.booking-loading.is-visible {
  opacity: 1;
  visibility: visible;
}

.booking-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-light);
  border-top-color: var(--primary);
  border-radius: var(--radius-full);
  animation: bookingSpin 0.8s linear infinite;
}

@keyframes bookingSpin {
  to { transform: rotate(360deg); }
}

.booking-loading p {
  font-size: var(--fs-small);
  color: var(--text-light);
}