/* ============================================
   THE VIP — Réservation
   ============================================ */
:root {
  --bg: #fffafd;
  --bg-soft: #fff5fb;
  --card: rgba(255,255,255,0.85);
  --border: rgba(232,184,240,0.35);
  --accent: #e8b8f0;
  --accent-dark: #d4a5e0;
  --accent-deep: #b885c8;
  --text: #5a4566;
  --text-soft: #8a7595;
  --text-mute: #b5a3c0;
  --shadow: 0 8px 24px rgba(212,165,224,0.15);
  --shadow-hover: 0 12px 32px rgba(212,165,224,0.25);
  --radius: 16px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: hidden;
  background-image:
    radial-gradient(ellipse at 15% 5%, rgba(255,232,244,0.6), transparent 50%),
    radial-gradient(ellipse at 85% 95%, rgba(232,184,240,0.4), transparent 50%);
  background-attachment: fixed;
}

/* === NAV === */
.resa-nav {
  display:flex; justify-content:space-between; align-items:center;
  padding: 18px 24px; max-width:1100px; margin:0 auto;
}
.resa-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; font-weight:500; color:var(--text);
  text-decoration:none; letter-spacing:1px;
}
.resa-logo span { color: var(--accent-deep); font-style:italic; }
.resa-back {
  font-size:13px; color:var(--text-soft); text-decoration:none;
  padding:8px 14px; border-radius:8px; transition:.2s;
}
.resa-back:hover { background:var(--card); color:var(--text); }

/* === HEADER === */
.resa-header {
  text-align:center; padding: 30px 20px 24px; max-width:720px; margin:0 auto;
}
.resa-tag {
  display:inline-block; font-size:11px; letter-spacing:3px; text-transform:uppercase;
  color: var(--accent-deep); margin-bottom:14px; font-weight:500;
}
.resa-header h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(32px, 6vw, 46px); font-weight:400;
  color: var(--text); margin-bottom:10px;
}
.resa-header p {
  font-size:14px; color:var(--text-soft); line-height:1.6;
}

/* === STEPS === */
.steps {
  display:flex; justify-content:center; gap:8px;
  padding:16px 16px 24px; max-width:900px; margin:0 auto;
  flex-wrap:wrap;
}
.step {
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:var(--text-mute);
  padding:8px 14px; border-radius:999px;
  background: rgba(255,255,255,0.5);
  border: 1px solid var(--border);
  transition: .3s;
}
.step span {
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  background: var(--text-mute); color:#fff; font-size:12px; font-weight:600;
}
.step.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color:#fff; border-color:transparent;
}
.step.active span { background: rgba(255,255,255,0.3); color:#fff; }
.step.done { background:#fff; color: var(--accent-deep); }
.step.done span { background: var(--accent-deep); color:#fff; }

/* === MAIN === */
.resa-main {
  max-width: 900px; margin: 0 auto; padding: 0 16px 60px;
}
.panel {
  display:none;
  background: var(--card);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow);
  animation: fadeIn .4s ease;
}
.panel.active { display:block; }
.panel h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px; font-weight:400; color:var(--text);
  margin-bottom: 22px;
}
@keyframes fadeIn { from {opacity:0; transform:translateY(8px);} to {opacity:1; transform:translateY(0);} }

/* === SUMMARY MINI === */
.summary-mini {
  background: rgba(255,232,244,0.35);
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 13px; color: var(--text-soft);
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
}
.summary-mini strong { color:var(--text); font-weight:600; }
.summary-mini .sep { color:var(--text-mute); }

/* === SERVICES === */
.services-grid {
  display:grid; gap:14px;
  grid-template-columns: 1fr;
}
.service-card {
  background:#fff; border:1px solid var(--border);
  border-radius: 14px; padding:18px 18px 16px;
  cursor:pointer; transition:.25s;
  display:flex; gap:14px; align-items:flex-start;
}
.service-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}
.service-card.selected {
  border-color: var(--accent-deep);
  background: linear-gradient(135deg, #fff, #fff5fb);
  box-shadow: 0 0 0 3px rgba(232,184,240,0.25);
}
.service-icon {
  flex-shrink:0; width:48px; height:48px;
  border-radius:12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  display:flex; align-items:center; justify-content:center;
  font-size: 24px;
}
.service-info { flex:1; }
.service-name {
  font-family: 'Cormorant Garamond', serif;
  font-size:20px; color:var(--text); margin-bottom:4px;
}
.service-meta {
  font-size:13px; color:var(--text-soft);
  display:flex; gap:10px; flex-wrap:wrap;
}
.service-meta .pill {
  background: var(--bg-soft); padding:2px 10px; border-radius:999px;
}
.service-price {
  font-size:18px; font-weight:600; color:var(--accent-deep);
  white-space:nowrap;
}

/* === CALENDAR === */
.calendar-wrap {
  background:#fff; border:1px solid var(--border);
  border-radius:14px; padding:16px; margin-bottom:20px;
}
.cal-header {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:14px;
}
.cal-arrow {
  width:36px; height:36px; border-radius:50%; border:1px solid var(--border);
  background:#fff; color:var(--text); cursor:pointer; font-size:16px;
  transition:.2s;
}
.cal-arrow:hover { background:var(--accent); color:#fff; border-color:transparent; }
.cal-arrow:disabled { opacity:.3; cursor:not-allowed; }
.week-label {
  font-family:'Cormorant Garamond',serif;
  font-size:18px; color:var(--text); text-transform:capitalize;
}
.days-grid {
  display:grid; grid-template-columns: repeat(7, 1fr); gap:6px;
}
.day-cell {
  text-align:center; padding:10px 4px;
  border:1px solid var(--border); border-radius:10px;
  background:#fff; cursor:pointer; transition:.2s;
  font-size:13px;
}
.day-cell .dname { display:block; font-size:11px; color:var(--text-mute); text-transform:uppercase; }
.day-cell .dnum { display:block; font-size:18px; font-weight:600; color:var(--text); margin-top:2px; }
.day-cell:hover:not(.disabled):not(.selected) { border-color: var(--accent); transform:translateY(-2px); }
.day-cell.disabled { opacity:.3; cursor:not-allowed; background:#fafafa; }
.day-cell.selected {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  border-color:transparent; color:#fff;
}
.day-cell.selected .dname, .day-cell.selected .dnum { color:#fff; }

/* === SLOTS === */
.slots-wrap h3 {
  font-family:'Cormorant Garamond',serif;
  font-size:18px; font-weight:400; color:var(--text-soft);
  margin-bottom:12px;
}
.slots-grid {
  display:grid; gap:8px;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}
.slot {
  text-align:center; padding:10px;
  border:1px solid var(--border); border-radius:10px;
  background:#fff; cursor:pointer; transition:.2s;
  font-size:14px; font-weight:500; color:var(--text);
}
.slot:hover:not(.taken):not(.selected) { border-color:var(--accent); transform:translateY(-2px); }
.slot.taken {
  background:#fafafa; color:var(--text-mute);
  text-decoration:line-through; cursor:not-allowed;
}
.slot.selected {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color:#fff; border-color:transparent;
  box-shadow: 0 4px 12px rgba(212,165,224,0.4);
}
.empty-slots {
  grid-column: 1/-1; text-align:center; padding:24px;
  color:var(--text-mute); font-size:14px;
}

/* === FORM === */
.resa-form { display:flex; flex-direction:column; gap:14px; }
.resa-form .row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.resa-form label {
  display:flex; flex-direction:column; gap:6px;
  font-size:13px; color:var(--text-soft); font-weight:500;
}
.resa-form input, .resa-form textarea {
  font: inherit; font-size:16px;
  padding:12px 14px; border:1px solid var(--border);
  border-radius:10px; background:#fff; color:var(--text);
  transition:.2s;
}
.resa-form input:focus, .resa-form textarea:focus {
  outline:none; border-color:var(--accent);
  box-shadow: 0 0 0 3px rgba(232,184,240,0.2);
}
.resa-form textarea { resize:vertical; min-height:80px; font-family:inherit; }

.checkbox {
  flex-direction:row !important; align-items:flex-start; gap:10px !important;
  font-size:13px !important; color:var(--text-soft);
}
.checkbox input { width:18px; height:18px; margin-top:2px; accent-color: var(--accent-deep); }

/* === ACTIONS === */
.actions {
  display:flex; gap:12px; justify-content:space-between;
  margin-top:22px; flex-wrap:wrap;
}
.actions.center { justify-content:center; }
.btn-primary, .btn-ghost {
  font: inherit; font-size:14px; font-weight:500;
  padding: 10px 22px; border-radius:8px; cursor:pointer;
  border:1px solid transparent; transition:.2s;
  text-decoration:none; display:inline-block;
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color:#fff; box-shadow: 0 4px 14px rgba(212,165,224,0.4);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow: 0 6px 18px rgba(212,165,224,0.5); }
.btn-primary:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.btn-ghost {
  background:#fff; color:var(--text); border-color:var(--border);
}
.btn-ghost:hover { background:var(--bg-soft); border-color:var(--accent); }

/* === SUCCESS === */
.success-card { text-align:center; padding:14px 0 8px; }
.check-icon {
  width:72px; height:72px; border-radius:50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color:#fff; font-size:36px; font-weight:bold;
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto 18px; box-shadow: 0 8px 24px rgba(212,165,224,0.35);
  animation: pop .5s ease;
}
@keyframes pop { 0% {transform:scale(0);} 70% {transform:scale(1.1);} 100% {transform:scale(1);} }
.success-card h2 { margin-bottom:8px; }
.success-sub { color:var(--text-soft); margin-bottom:22px; }
.recap {
  background: var(--bg-soft); border:1px solid var(--border);
  border-radius: 12px; padding:18px 20px; margin: 0 auto 18px;
  max-width: 480px; text-align:left; font-size:14px;
}
.recap div { padding:6px 0; border-bottom:1px dashed var(--border); display:flex; justify-content:space-between; gap:10px; }
.recap div:last-child { border-bottom:none; }
.recap .lbl { color:var(--text-soft); }
.recap .val { color:var(--text); font-weight:600; text-align:right; }
.info-pay {
  background:#fff; border:1px solid var(--border);
  border-radius:12px; padding:14px 16px; max-width:480px;
  margin:0 auto 22px; display:flex; flex-direction:column; gap:4px;
  text-align:left;
}
.info-pay strong { color:var(--text); }
.info-pay span { font-size:13px; color:var(--text-soft); }

/* === FOOTER === */
.resa-footer {
  text-align:center; padding:24px 16px; font-size:12px;
  color:var(--text-mute); border-top:1px solid var(--border);
  background: rgba(255,255,255,0.4);
}

/* === MOBILE === */
@media (max-width: 640px) {
  .resa-form .row { grid-template-columns:1fr; }
  .panel { padding: 22px 16px; }
  .step { font-size:11px; padding:6px 10px; }
  .step span { width:18px; height:18px; font-size:10px; }
  .day-cell { padding:8px 2px; }
  .day-cell .dnum { font-size:15px; }
  .slots-grid { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
  .actions { flex-direction:column-reverse; }
  .actions .btn-primary, .actions .btn-ghost { width:100%; text-align:center; }
}