/* ═══════════════════════════════════════════════════════════════
   RDVcoiffure — Styles front-end
   Variables personnalisables via CSS ou admin > CSS personnalisé
   ═══════════════════════════════════════════════════════════════ */

:root {
  --rdvc-primary    : #2c1810;
  --rdvc-secondary  : #c8956c;
  --rdvc-accent     : #e8b89a;
  --rdvc-success    : #27ae60;
  --rdvc-error      : #e74c3c;
  --rdvc-bg         : #faf8f5;
  --rdvc-card-bg    : #ffffff;
  --rdvc-border     : #e8e0d8;
  --rdvc-text       : #2c2c2c;
  --rdvc-muted      : #8c8072;
  --rdvc-radius     : 12px;
  --rdvc-font       : 'Georgia', serif;
  --rdvc-shadow     : 0 4px 24px rgba(44,24,16,.08);
}

/* Wrapper ───────────────────────────────────────────────────── */
.rdvc-wrapper {
  font-family   : var(--rdvc-font);
  color         : var(--rdvc-text);
  max-width     : 860px;
  margin        : 0 auto;
  position      : relative;
}
.rdvc-titre {
  text-align    : center;
  color         : var(--rdvc-primary);
  font-size     : 1.8em;
  margin-bottom : 30px;
}

/* Étapes ────────────────────────────────────────────────────── */
.rdvc-step { display:none; }
.rdvc-step.active { display:block; animation: rdvcFadeIn .35s ease; }
@keyframes rdvcFadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

.rdvc-step-header {
  display       : flex;
  align-items   : center;
  gap           : 14px;
  margin-bottom : 24px;
}
.rdvc-step-number {
  width         : 38px;
  height        : 38px;
  border-radius : 50%;
  background    : var(--rdvc-secondary);
  color         : #fff;
  font-weight   : bold;
  font-size     : 1.1em;
  display       : flex;
  align-items   : center;
  justify-content: center;
  flex-shrink   : 0;
}
.rdvc-step-header h3 {
  margin        : 0;
  font-size     : 1.3em;
  color         : var(--rdvc-primary);
}

/* Masquer toutes les cartes par défaut si les onglets catégories sont présents
   (le JS affichera uniquement la première catégorie active) */
.rdvc-cat-tabs ~ .rdvc-prestations-grid .rdvc-prestation-card {
  display : none;
}
.rdvc-cat-tabs {
  display       : flex;
  flex-wrap     : wrap;
  gap           : 8px;
  margin-bottom : 20px;
}
.rdvc-cat-tab {
  padding       : 7px 18px;
  border-radius : 20px;
  border        : 2px solid var(--rdvc-border);
  background    : transparent;
  color         : var(--rdvc-muted);
  font-family   : var(--rdvc-font);
  font-size     : .9em;
  cursor        : pointer;
  transition    : all .2s;
}
.rdvc-cat-tab:hover  { border-color: var(--rdvc-secondary); color: var(--rdvc-secondary); }
.rdvc-cat-tab.active { border-color: var(--rdvc-secondary); background: var(--rdvc-secondary); color: #fff; }

.rdvc-prestation-cat {
  font-size     : .75em;
  font-weight   : bold;
  text-transform: uppercase;
  letter-spacing: .05em;
  color         : var(--rdvc-card-color, var(--rdvc-secondary));
  margin-bottom : 4px;
}

/* Grille prestations ─────────────────────────────────────────── */
.rdvc-prestations-grid {
  display               : grid;
  grid-template-columns : repeat(auto-fill, minmax(220px,1fr));
  gap                   : 16px;
  margin-bottom         : 20px;
}

.rdvc-prestation-card {
  background    : var(--rdvc-card-bg);
  border        : 2px solid var(--rdvc-border);
  border-radius : var(--rdvc-radius);
  cursor        : pointer;
  transition    : all .2s ease;
  position      : relative;
  overflow      : hidden;
}
.rdvc-prestation-card:hover {
  border-color  : var(--rdvc-card-color, var(--rdvc-secondary));
  box-shadow    : var(--rdvc-shadow);
  transform     : translateY(-2px);
}
.rdvc-prestation-card.selected {
  border-color  : var(--rdvc-card-color, var(--rdvc-secondary));
  background    : color-mix(in srgb, var(--rdvc-card-color, var(--rdvc-secondary)) 8%, #fff);
}

.rdvc-prestation-color-bar {
  height        : 5px;
  background    : var(--rdvc-card-color, var(--rdvc-secondary));
}
.rdvc-prestation-body { padding:14px 14px 12px; }
.rdvc-prestation-nom  { font-weight:bold; font-size:1em; color:var(--rdvc-primary); }
.rdvc-prestation-desc { font-size:.85em; color:var(--rdvc-muted); margin:.4em 0; }
.rdvc-prestation-meta {
  display       : flex;
  justify-content: space-between;
  font-size     : .9em;
  margin-top    : 8px;
}
.rdvc-duree { color:var(--rdvc-muted); }
.rdvc-prix  { font-weight:bold; color:var(--rdvc-secondary); }

.rdvc-check-icon {
  position      : absolute;
  top           : 10px;
  right         : 12px;
  width         : 22px;
  height        : 22px;
  border-radius : 50%;
  background    : var(--rdvc-card-color, var(--rdvc-secondary));
  color         : #fff;
  font-size     : .85em;
  display       : flex;
  align-items   : center;
  justify-content: center;
  opacity       : 0;
  transform     : scale(0);
  transition    : all .2s ease;
}
.rdvc-prestation-card.selected .rdvc-check-icon { opacity:1; transform:scale(1); }

/* Barre récapitulatif ────────────────────────────────────────── */
.rdvc-summary-bar {
  background    : var(--rdvc-primary);
  color         : #fff;
  border-radius : var(--rdvc-radius);
  padding       : 16px 20px;
  display       : flex;
  align-items   : center;
  justify-content: space-between;
  gap           : 12px;
  flex-wrap     : wrap;
}
.rdvc-summary-info { font-size:.95em; }
.rdvc-summary-info em { font-style:normal; opacity:.75; font-size:.9em; margin-left:6px; }

/* Boutons ────────────────────────────────────────────────────── */
.rdvc-btn {
  background    : var(--rdvc-secondary);
  color         : #fff;
  border        : none;
  border-radius : 8px;
  padding       : 10px 22px;
  font-size     : .95em;
  font-family   : var(--rdvc-font);
  cursor        : pointer;
  transition    : background .2s, opacity .2s;
}
.rdvc-btn:hover:not(:disabled) { background: var(--rdvc-primary); }
.rdvc-btn:disabled { opacity:.45; cursor:default; }
.rdvc-btn-ghost {
  background    : transparent;
  color         : var(--rdvc-secondary);
  border        : 2px solid var(--rdvc-secondary);
  border-radius : 8px;
  padding       : 8px 18px;
  cursor        : pointer;
  font-family   : var(--rdvc-font);
  transition    : all .2s;
}
.rdvc-btn-ghost:hover { background:var(--rdvc-secondary); color:#fff; }
.rdvc-btn-outline {
  background    : transparent;
  border        : 2px solid var(--rdvc-secondary);
  color         : var(--rdvc-secondary);
  border-radius : 8px;
  padding       : 10px 22px;
  font-family   : var(--rdvc-font);
  cursor        : pointer;
}

/* Calendrier ────────────────────────────────────────────────── */
.rdvc-calendar-wrap  { background:var(--rdvc-card-bg); border:1px solid var(--rdvc-border); border-radius:var(--rdvc-radius); padding:20px; }
.rdvc-calendar-nav   { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; font-size:1.1em; font-weight:bold; }
#rdvc-calendar       { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }

.rdvc-cal-day-header { text-align:center; font-size:.8em; color:var(--rdvc-muted); font-weight:bold; padding:4px 0; }
.rdvc-cal-day {
  text-align    : center;
  padding       : 8px 4px;
  border-radius : 8px;
  cursor        : pointer;
  font-size     : .9em;
  transition    : all .15s;
}
.rdvc-cal-day:hover:not(.disabled):not(.other-month) { background:var(--rdvc-accent); }
.rdvc-cal-day.selected { background:var(--rdvc-secondary); color:#fff; font-weight:bold; }
.rdvc-cal-day.today    { font-weight:bold; color:var(--rdvc-secondary); }
.rdvc-cal-day.disabled { opacity:.35; cursor:default; }
.rdvc-cal-day.other-month { opacity:.25; cursor:default; }

/* Créneaux ──────────────────────────────────────────────────── */
.rdvc-slots-grid {
  display               : grid;
  grid-template-columns : repeat(auto-fill, minmax(80px,1fr));
  gap                   : 8px;
  margin-top            : 14px;
}
.rdvc-slot {
  border        : 2px solid var(--rdvc-border);
  border-radius : 8px;
  text-align    : center;
  padding       : 8px 6px;
  cursor        : pointer;
  font-size     : .9em;
  transition    : all .15s;
}
.rdvc-slot:hover  { border-color:var(--rdvc-secondary); background:color-mix(in srgb, var(--rdvc-secondary) 10%, #fff); }
.rdvc-slot.selected { border-color:var(--rdvc-secondary); background:var(--rdvc-secondary); color:#fff; font-weight:bold; }
.rdvc-no-slots    { color:var(--rdvc-muted); font-style:italic; padding:10px 0; }
.rdvc-error-msg   { color:var(--rdvc-error) !important; font-style:normal !important; }

/* Formulaire coordonnées ─────────────────────────────────────── */
.rdvc-form-grid {
  display               : grid;
  grid-template-columns : 1fr 1fr;
  gap                   : 16px;
  margin-bottom         : 20px;
}
.rdvc-field { display:flex; flex-direction:column; gap:6px; }
.rdvc-field label { font-size:.9em; font-weight:bold; color:var(--rdvc-primary); }
.rdvc-field input, .rdvc-field textarea {
  border        : 2px solid var(--rdvc-border);
  border-radius : 8px;
  padding       : 10px 12px;
  font-family   : var(--rdvc-font);
  font-size     : .95em;
  outline       : none;
  transition    : border-color .2s;
}
.rdvc-field input:focus, .rdvc-field textarea:focus { border-color:var(--rdvc-secondary); }
.rdvc-field-full { grid-column: 1 / -1; }

/* ── Paiement ────────────────────────────────────────────────── */
.rdvc-recap-paiement { background:var(--rdvc-bg); border-radius:var(--rdvc-radius); padding:16px 20px; margin-bottom:20px; border:1px solid var(--rdvc-border); }
.rdvc-recap-paiement p { margin:.4em 0; }
.rdvc-info { color:var(--rdvc-muted); font-size:.9em; }
#rdvc-stripe-element {
  border        : 2px solid var(--rdvc-border);
  border-radius : var(--rdvc-radius);
  padding       : 16px;
  margin-bottom : 16px;
  background    : var(--rdvc-card-bg);
  transition    : border-color .2s;
}
#rdvc-stripe-element:focus-within { border-color: var(--rdvc-secondary); }

/* Google/Apple Pay */
#rdvc-payment-request-wrap { margin-bottom: 14px; }
#rdvc-payment-request-btn  { border-radius: 8px; overflow: hidden; }
.rdvc-prb-divider {
  display    : flex;
  align-items: center;
  gap        : 10px;
  margin     : 14px 0;
  color      : var(--rdvc-muted);
  font-size  : .82em;
}
.rdvc-prb-divider::before,
.rdvc-prb-divider::after { content:''; flex:1; height:1px; background:var(--rdvc-border); }

/* ── FAQ ─────────────────────────────────────────────────────── */
.rdvc-faq-wrapper { max-width: 720px; margin: 0 auto; font-family: var(--rdvc-font); }

.rdvc-faq-titre {
  text-align   : center;
  color        : var(--rdvc-primary);
  font-size    : 1.6em;
  margin-bottom: 32px;
}

.rdvc-faq-list {
  display       : flex;
  flex-direction: column;
  gap           : 10px;
}

.rdvc-faq-item {
  border        : 1px solid var(--rdvc-border);
  border-radius : var(--rdvc-radius);
  overflow      : hidden;
  background    : var(--rdvc-card-bg);
  transition    : box-shadow .2s;
}
.rdvc-faq-item:has(.rdvc-faq-question[aria-expanded="true"]) {
  box-shadow    : var(--rdvc-shadow);
  border-color  : color-mix(in srgb, var(--rdvc-secondary) 30%, var(--rdvc-border));
}

.rdvc-faq-question {
  width         : 100%;
  display       : flex;
  align-items   : center;
  gap           : 12px;
  padding       : 16px 18px;
  background    : none;
  border        : none;
  cursor        : pointer;
  font-family   : var(--rdvc-font);
  font-size     : 1em;
  color         : var(--rdvc-primary);
  text-align    : left;
  font-weight   : 600;
  transition    : background .15s;
}
.rdvc-faq-question:hover { background: var(--rdvc-bg); }

.rdvc-faq-icon {
  font-size     : 1.2em;
  flex-shrink   : 0;
  width         : 28px;
  text-align    : center;
}

.rdvc-faq-q-text { flex: 1; line-height: 1.4; }

.rdvc-faq-chevron {
  flex-shrink   : 0;
  color         : var(--rdvc-muted);
  transition    : transform .25s ease;
}
.rdvc-faq-question[aria-expanded="true"] .rdvc-faq-chevron {
  transform     : rotate(180deg);
  color         : var(--rdvc-secondary);
}

.rdvc-faq-answer {
  max-height    : 0;
  overflow      : hidden;
  transition    : max-height .3s ease, padding .3s ease;
  padding       : 0 18px 0 58px;
  font-size     : .95em;
  line-height   : 1.7;
  color         : var(--rdvc-text);
}
.rdvc-faq-answer.open {
  max-height    : 300px;
  padding       : 0 18px 18px 58px;
}
.rdvc-faq-answer strong { color: var(--rdvc-primary); }

@media (max-width: 580px) {
  .rdvc-faq-answer { padding-left: 18px; }
  .rdvc-faq-answer.open { padding-left: 18px; }
}
.rdvc-error { color:var(--rdvc-error); font-size:.9em; margin:.6em 0; }

/* Navigation étapes ─────────────────────────────────────────── */
.rdvc-step-nav { display:flex; gap:12px; justify-content:space-between; margin-top:24px; }

/* Confirmation finale ────────────────────────────────────────── */
.rdvc-confirmation { text-align:center; padding:40px 20px; }
.rdvc-confirm-icon {
  width         : 72px;
  height        : 72px;
  border-radius : 50%;
  background    : var(--rdvc-success);
  color         : #fff;
  font-size     : 2em;
  display       : flex;
  align-items   : center;
  justify-content: center;
  margin        : 0 auto 20px;
}
.rdvc-confirmation h3 { color:var(--rdvc-primary); font-size:1.5em; }
.rdvc-confirm-details { background:var(--rdvc-bg); border-radius:var(--rdvc-radius); padding:16px 24px; margin:20px auto; max-width:400px; text-align:left; font-size:.95em; line-height:1.8; }

/* Loader ────────────────────────────────────────────────────── */
#rdvc-loader {
  position      : absolute;
  inset         : 0;
  background    : rgba(255,255,255,.75);
  display       : flex;
  align-items   : center;
  justify-content: center;
  z-index       : 100;
  border-radius : var(--rdvc-radius);
}
.rdvc-spinner {
  width         : 40px;
  height        : 40px;
  border        : 4px solid var(--rdvc-border);
  border-top-color: var(--rdvc-secondary);
  border-radius : 50%;
  animation     : rdvcSpin .7s linear infinite;
}
@keyframes rdvcSpin { to { transform:rotate(360deg); } }

/* Responsive ────────────────────────────────────────────────── */
@media (max-width: 580px) {
  .rdvc-form-grid { grid-template-columns: 1fr; }
  .rdvc-summary-bar { flex-direction:column; align-items:flex-start; }
  .rdvc-prestations-grid { grid-template-columns: 1fr; }
}