/* ═══════════════════════════════════════════════════════
   RDV Booking – Front-office Styles  v1.6
   ═══════════════════════════════════════════════════════ */

:root {
    --rdv-primary:   #735220;
    --rdv-primary-h: #5a3d14;
    --rdv-success:   #16a34a;
    --rdv-danger:    #dc2626;
    --rdv-gray-100:  #f3f4f6;
    --rdv-gray-200:  #e5e7eb;
    --rdv-gray-400:  #9ca3af;
    --rdv-gray-600:  #4b5563;
    --rdv-gray-800:  #1f2937;
    --rdv-radius:    10px;
    --rdv-shadow:    0 4px 24px rgba(0,0,0,.15);
    /* Couleurs des jours – injectées dynamiquement par PHP */
    --rdv-day-available-bg:   #735220;
    --rdv-day-available-text: #ffffff;
    --rdv-day-unavail-bg:     rgba(255,255,255,.08);
    --rdv-day-unavail-text:   rgba(255,255,255,.3);
}

/* ── Wrapper global ── */
.rdv-booking-wrapper {
    font-family: system-ui, -apple-system, sans-serif;
    max-width: 680px;
    margin: 0 auto;
    color: #fff;
}

/* ── Étapes ── */
.rdv-step {
    background: #483514;
    border: none;
    border-radius: var(--rdv-radius);
    box-shadow: var(--rdv-shadow);
    padding: 24px 24px 28px;
    margin-bottom: 16px;
}
.rdv-step-hidden { display: none !important; }
.rdv-step-active { display: block; }

#rdv-step-3, #rdv-step-success { background: #3a2a0f; }

.rdv-step-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #f5e9d0;
}
.rdv-step-title small { font-weight: 400; font-size: .85rem; color: #c9a96e; }
.rdv-step-num {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: #735220;
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .82rem; font-weight: 700; flex-shrink: 0;
}

/* ── Navigation mois ── */
.rdv-calendar-nav {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.rdv-month-label { font-weight: 700; font-size: .95rem; color: #f5e9d0; text-transform: capitalize; }
.rdv-nav-btn {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 5px;
    width: 30px; height: 30px;
    font-size: 1.1rem; cursor: pointer; color: #f5e9d0;
    transition: background .15s;
}
.rdv-nav-btn:hover { background: rgba(255,255,255,.2); }

/* ── Grille calendrier ── */
.rdv-day-headers {
    display: grid; grid-template-columns: repeat(7, 1fr);
    margin-bottom: 3px; gap: 3px;
}
.rdv-day-headers span {
    text-align: center; font-weight: 600; font-size: .68rem;
    color: #c9a96e; padding: 2px 0; text-transform: uppercase; letter-spacing: .04em;
}

.rdv-calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }

/* Boutons jours : RECTANGULAIRES, compacts, pas de débordement */
.rdv-day {
    aspect-ratio: unset;          /* supprime le format carré */
    height: 32px;                 /* hauteur fixe, plus petit */
    width: 100%;                  /* remplit la colonne exactement */
    min-width: 0;                 /* empêche tout débordement */
    border-radius: 4px;
    border: none;
    background: rgba(255,255,255,.07);
    color: #f0dfc0;
    cursor: pointer;
    font-size: .8rem;
    font-weight: 500;
    transition: background .15s, color .15s, transform .08s;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
    box-sizing: border-box;
}
.rdv-day:hover:not(:disabled):not(.rdv-day-empty) {
    background: var(--rdv-day-available-bg);
    color: var(--rdv-day-available-text);
    transform: scale(1.04);
}
.rdv-day.rdv-day-selected {
    background: var(--rdv-day-available-bg) !important;
    color: var(--rdv-day-available-text) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.35);
    font-weight: 700;
}
.rdv-day.rdv-day-today {
    border: 2px solid #c9a96e;
    font-weight: 700; color: #f5e9d0;
}
.rdv-day.rdv-day-past,
.rdv-day:disabled,
.rdv-day.rdv-day-unavailable {
    background: var(--rdv-day-unavail-bg);
    color: var(--rdv-day-unavail-text);
    cursor: not-allowed;
    text-decoration: line-through;
}
.rdv-day.rdv-day-empty { background: transparent; cursor: default; pointer-events: none; }

/* ── Créneaux horaires ── */
.rdv-slots-container { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.rdv-slot {
    display: flex; align-items: center; gap: 5px;
    padding: 8px 14px; min-width: 118px; justify-content: center;
    border-radius: 6px;
    border: 2px solid rgba(115,82,32,.6);
    background: rgba(255,255,255,.07);
    color: #f0dfc0;
    font-weight: 600; font-size: .86rem;
    cursor: pointer; transition: all .15s; position: relative;
}
.rdv-slot:hover:not(:disabled) {
    background: #735220; color: #fff; border-color: #735220;
}
.rdv-slot.rdv-slot-selected {
    background: #735220; color: #fff; border-color: #735220;
    box-shadow: 0 2px 10px rgba(115,82,32,.5);
}
.rdv-slot-start { font-weight: 700; font-size: .9rem; }
.rdv-slot-arrow { font-size: .72rem; opacity: .45; }
.rdv-slot-end   { font-size: .78rem; opacity: .75; }
.rdv-slot-taken {
    border-color: rgba(255,255,255,.08) !important;
    background: rgba(255,255,255,.03) !important;
    color: rgba(255,255,255,.2) !important;
    cursor: not-allowed !important; opacity: .45 !important;
}
.rdv-slot-taken::after {
    content: ''; position: absolute; inset: 0; border-radius: 4px;
    background: repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(255,255,255,.03) 4px, rgba(255,255,255,.03) 8px);
    pointer-events: none;
}
.rdv-no-slots { color: #fca5a5; font-size: .88rem; }
.rdv-loading   { color: #c9a96e; font-style: italic; font-size: .88rem; }

/* ── Récap barre ── */
.rdv-recap-bar {
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
    border-radius: 7px; padding: 8px 13px; margin-bottom: 18px;
    font-size: .88rem; color: #f0dfc0;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.rdv-link-btn {
    background: none; border: none; color: #c9a96e; cursor: pointer;
    font-size: .82rem; text-decoration: underline; margin-left: auto; padding: 0;
}

/* ── Formulaire ── */
.rdv-form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 500px) { .rdv-form-row-2 { grid-template-columns: 1fr; } }

.rdv-form-group { margin-bottom: 15px; }
.rdv-form-group label { display: block; font-weight: 600; font-size: .86rem; margin-bottom: 5px; color: #f0dfc0; }
.rdv-form-group input,
.rdv-form-group textarea {
    width: 100%; padding: 9px 12px;
    border: 1.5px solid rgba(255,255,255,.18); border-radius: 7px;
    font-size: .93rem; color: #fff; background: rgba(255,255,255,.09);
    transition: border .2s, box-shadow .2s; box-sizing: border-box;
}
.rdv-form-group input::placeholder,
.rdv-form-group textarea::placeholder { color: rgba(255,255,255,.3); }
.rdv-form-group input:focus,
.rdv-form-group textarea:focus {
    outline: none; border-color: #c9a96e;
    box-shadow: 0 0 0 3px rgba(201,169,110,.18);
    background: rgba(255,255,255,.13);
}
.rdv-form-group input[type="date"] { color-scheme: dark; }

.rdv-required { color: #fca5a5; }
.rdv-optional  { color: rgba(255,255,255,.35); font-weight: 400; font-size: .8rem; }

/* ── Boutons ── */
.rdv-btn-primary {
    background: #735220; color: #fff; border: none; border-radius: 7px;
    padding: 10px 24px; font-size: .93rem; font-weight: 700; cursor: pointer;
    transition: background .15s, transform .1s;
}
.rdv-btn-primary:hover { background: #5a3d14; transform: translateY(-1px); }
.rdv-btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.rdv-btn-secondary {
    background: rgba(255,255,255,.08); color: #f0dfc0;
    border: 1.5px solid rgba(255,255,255,.18); border-radius: 7px;
    padding: 9px 16px; font-size: .88rem; font-weight: 500; cursor: pointer;
    transition: background .15s;
}
.rdv-btn-secondary:hover { background: rgba(255,255,255,.14); }

.rdv-form-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }

/* ── Alertes ── */
.rdv-alert { border-radius: 7px; padding: 10px 13px; margin-bottom: 13px; font-size: .88rem; }
.rdv-alert-error { background: rgba(220,38,38,.15); border: 1px solid rgba(220,38,38,.35); color: #fca5a5; }

/* ── Succès ── */
.rdv-success-box { text-align: center; padding: 10px 0; }
.rdv-success-icon { font-size: 2.8rem; margin-bottom: 10px; }
.rdv-success-box h3 { font-size: 1.15rem; margin: 0 0 10px; color: #86efac; }
#rdv-success-message { margin-bottom: 20px; color: #f0dfc0; line-height: 1.6; }

/* ── Sélecteur de type de RDV ─────────────────────── */
.rdv-type-picker { margin-bottom: 22px; }
.rdv-type-picker-label {
    font-size: .88rem; font-weight: 600; color: #c9a96e;
    text-transform: uppercase; letter-spacing: .05em;
    margin: 0 0 12px;
}
.rdv-type-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rdv-type-card {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 5px; text-align: left;
    padding: 13px 15px;
    border-radius: 8px;
    border: 2px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: #f0dfc0;
    cursor: pointer;
    transition: border-color .18s, background .18s, transform .1s;
    line-height: 1.4;
}
.rdv-type-card:hover {
    border-color: rgba(201,169,110,.55);
    background: rgba(255,255,255,.1);
}
.rdv-type-card.rdv-type-active {
    border-color: #c9a96e;
    background: rgba(201,169,110,.15);
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(0,0,0,.25);
}
.rdv-type-card-label {
    font-weight: 700; font-size: .92rem; color: #f5e9d0;
}
.rdv-type-card-desc {
    font-size: .78rem; color: rgba(240,223,192,.65); line-height: 1.4;
}
.rdv-type-card-duree {
    margin-top: 3px;
    display: inline-block;
    font-size: .75rem; font-weight: 600;
    background: rgba(201,169,110,.2);
    color: #c9a96e;
    padding: 2px 9px; border-radius: 20px;
}
.rdv-type-card.rdv-type-active .rdv-type-card-duree {
    background: rgba(201,169,110,.35);
}

/* Séparateur entre type-picker et calendrier */
.rdv-step-subtitle {
    font-size: .82rem; font-weight: 600; color: #c9a96e;
    text-transform: uppercase; letter-spacing: .05em;
    margin: 0 0 11px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.1);
}

/* ── Séparateur récap barre ── */
.rdv-recap-sep { color: rgba(255,255,255,.3); }

/* ── Boutons nav mois : rectangulaires, petits, flèche centrée ── */
.rdv-nav-btn {
    width: 26px !important;
    height: 24px !important;
    border-radius: 4px !important;
    font-size: .95rem !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}