/* ── av-rdv Booking Form ────────────────────────────────────────────────────
   Variables CSS — surchargeables par le thème
────────────────────────────────────────────────────────────────────────── */
.av-rdv-booking {
    /* ── Couleurs configurables (réglages → Couleurs) ──────────────── */
    --avrdv-accent:  #2563eb;
    --avrdv-hover:   #2563eb;
    --avrdv-text:    #1e293b;
    --avrdv-muted:   #64748b;
    --avrdv-surface: #ffffff;
    --avrdv-success: #16a34a;
    --avrdv-warning: #d97706;
    --avrdv-danger:  #dc2626;

    /* ── Couleurs dérivées (suivent automatiquement les couleurs ci-dessus) ── */
    --avrdv-accent-light:  color-mix(in srgb, var(--avrdv-accent)  12%, white);
    --avrdv-accent-dark:   color-mix(in srgb, var(--avrdv-accent)  80%, black);
    --avrdv-hover-light:   color-mix(in srgb, var(--avrdv-hover)   12%, white);
    --avrdv-success-light: color-mix(in srgb, var(--avrdv-success) 15%, white);
    --avrdv-success-dark:  color-mix(in srgb, var(--avrdv-success) 80%, black);
    --avrdv-warning-light: color-mix(in srgb, var(--avrdv-warning) 15%, white);
    --avrdv-warning-dark:  color-mix(in srgb, var(--avrdv-warning) 80%, black);
    --avrdv-danger-light:  color-mix(in srgb, var(--avrdv-danger)  12%, white);
    --avrdv-danger-dark:   color-mix(in srgb, var(--avrdv-danger)  80%, black);
    --avrdv-border:        color-mix(in srgb, var(--avrdv-muted)   22%, white);
    --avrdv-bg:            color-mix(in srgb, white                96%, var(--avrdv-muted));

    --avrdv-radius: 12px;
    --avrdv-shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);

    max-width: 680px;
    margin: 0 auto;
    font-family: inherit;
    color: var(--avrdv-text);
}

/* ── Carte étape ─────────────────────────────────────────────────────────── */

.av-rdv-card {
    background: var(--avrdv-surface);
    border: 1px solid var(--avrdv-border);
    border-radius: var(--avrdv-radius);
    padding: 28px 32px;
    box-shadow: var(--avrdv-shadow);
    margin-bottom: 0;
    /* Empêche tout enfant (ex: flex de créneaux) d'élargir la carte */
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
}

.av-rdv-card h2 {
    margin: 0 0 20px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--avrdv-text);
}

/* ── Boutons prestataire ─────────────────────────────────────────────────── */

.av-rdv-staff-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.av-rdv-staff-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border: 2px solid var(--avrdv-border);
    border-radius: 10px;
    background: var(--avrdv-surface);
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--avrdv-text);
    transition: border-color .15s, background .15s, color .15s;
    text-align: left;
}

.av-rdv-staff-btn:hover {
    border-color: var(--avrdv-hover);
    color: var(--avrdv-hover);
}

.av-rdv-staff-btn.is-selected {
    border-color: var(--avrdv-accent);
    background: var(--avrdv-accent-light);
    color: var(--avrdv-accent-dark);
}

.av-rdv-staff-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--avrdv-accent-light);
    color: var(--avrdv-accent);
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.av-rdv-staff-icon {
    font-size: 1.4rem;
}

/* ── Boutons prestation ──────────────────────────────────────────────────── */

.av-rdv-service-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.av-rdv-service-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border: 2px solid var(--avrdv-border);
    border-radius: 10px;
    background: var(--avrdv-surface);
    cursor: pointer;
    text-align: left;
    transition: border-color .15s, background .15s;
    width: 100%;
}

.av-rdv-service-btn:hover {
    border-color: var(--avrdv-hover);
}

.av-rdv-service-btn.is-selected {
    border-color: var(--avrdv-accent);
    background: var(--avrdv-accent-light);
}

.av-rdv-service-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--avrdv-text);
}

.av-rdv-service-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: 12px;
}

.av-rdv-service-duration {
    font-size: 0.82rem;
    color: var(--avrdv-muted);
    background: var(--avrdv-bg);
    padding: 2px 8px;
    border-radius: 20px;
}

.av-rdv-service-price {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--avrdv-accent-dark);
}

/* ── Calendrier ──────────────────────────────────────────────────────────── */

.av-rdv-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.av-rdv-cal-title {
    font-weight: 700;
    font-size: 1rem;
    text-transform: capitalize;
    color: var(--avrdv-text);
}

.av-rdv-cal-nav {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: var(--avrdv-muted);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}

.av-rdv-cal-nav:hover:not([disabled]) {
    background: var(--avrdv-hover);
}

.av-rdv-cal-nav[disabled] {
    opacity: .35;
    cursor: not-allowed;
}

/* Wrapper du calendrier : taille dictée par la grille, centré dans la carte.
   La grille en colonnes fixes (px) est imperméable à toute variation de largeur
   du conteneur parent — le calendrier ne grossit jamais quand les créneaux apparaissent. */
.av-rdv-calendar {
    display: grid;
    justify-content: center;
}

.av-rdv-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 44px);
    gap: 3px;
    margin-bottom: 2px;
}

.av-rdv-cal-weekday {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--avrdv-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-bottom: 6px;
}

.av-rdv-cal-days {
    display: grid;
    grid-template-columns: repeat(7, 44px);
    gap: 3px;
}

.av-rdv-cal-cell {
    /* Cellule carrée fixe : 44×44px. Ni la largeur ni la hauteur ne dépendent
       du conteneur — le calendrier garde exactement la même taille en toutes circonstances. */
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
}

/* Jour disponible (bouton cliquable) — carré arrondi plein, pastille colorée */
.av-rdv-day-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--avrdv-accent);
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,.25);
    border: none;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    /* Pas de transform: scale — évite tout effet de zoom sur le survol */
    transition: box-shadow .1s ease;
}

.av-rdv-day-btn:hover {
    box-shadow: 0 0 0 2px var(--avrdv-hover);
}

.av-rdv-day-btn.is-selected {
    outline: 3px solid var(--avrdv-accent-dark);
    outline-offset: -1px;
}

.av-rdv-day-btn.is-today {
    box-shadow: inset 0 0 0 2px #fff;
}

/* Jour non disponible — même gabarit de pastille, teinte neutre atténuée */
.av-rdv-cal-day--off {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: color-mix(in srgb, var(--avrdv-muted) 12%, white);
    color: color-mix(in srgb, var(--avrdv-muted) 70%, black);
    font-size: 0.8rem;
    font-weight: 600;
}

.av-rdv-cal-day--off.is-today {
    box-shadow: inset 0 0 0 2px var(--avrdv-muted);
    color: var(--avrdv-text);
}

/* Légende des couleurs du calendrier */
.av-rdv-cal-legend {
    display: flex;
    justify-content: center;
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
    font-size: 0.75rem;
    color: var(--avrdv-muted);
}

.av-rdv-cal-legend li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.av-rdv-cal-dot {
    width: 12px;
    height: 12px;
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.08);
    flex-shrink: 0;
}

.av-rdv-cal-dot--avail { background: var(--avrdv-accent); }
.av-rdv-cal-dot--off   { background: color-mix(in srgb, var(--avrdv-muted) 12%, white); }

/* ── Créneaux horaires ───────────────────────────────────────────────────── */

.av-rdv-slots-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--avrdv-border);
}

.av-rdv-slots-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--avrdv-muted);
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.av-rdv-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    /* Contraint la largeur : le flex ne peut pas remonter une largeur préférée
       "sur une ligne" qui ferait grossir la carte parente. */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* Cap à ~4 rangées de créneaux : au-delà, défilement interne. */
    max-height: 190px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px; /* évite que la scrollbar masque les boutons */
}

/* Scrollbar discrète dans la liste des créneaux */
.av-rdv-slots::-webkit-scrollbar {
    width: 4px;
}
.av-rdv-slots::-webkit-scrollbar-track {
    background: var(--avrdv-bg);
    border-radius: 4px;
}
.av-rdv-slots::-webkit-scrollbar-thumb {
    background: var(--avrdv-border);
    border-radius: 4px;
}

.av-rdv-slot-btn {
    padding: 8px 16px;
    border: 2px solid var(--avrdv-border);
    border-radius: 8px;
    background: var(--avrdv-surface);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--avrdv-text);
    transition: border-color .15s, background .15s, color .15s;
}

.av-rdv-slot-btn:hover {
    border-color: var(--avrdv-hover);
    color: var(--avrdv-hover);
}

.av-rdv-slot-btn.is-selected {
    background: var(--avrdv-accent);
    border-color: var(--avrdv-accent);
    color: #fff;
}

/* ── Formulaire coordonnées ──────────────────────────────────────────────── */

.av-rdv-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.av-rdv-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.av-rdv-field--full {
    grid-column: 1 / -1;
}

.av-rdv-field label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--avrdv-muted);
}

.av-rdv-field input,
.av-rdv-field textarea {
    padding: 10px 12px;
    border: 1.5px solid var(--avrdv-border);
    border-radius: 8px;
    font-size: 0.95rem;
    color: var(--avrdv-text);
    background: var(--avrdv-surface);
    transition: border-color .15s;
    font-family: inherit;
}

.av-rdv-field input:focus,
.av-rdv-field textarea:focus {
    outline: none;
    border-color: var(--avrdv-accent);
    box-shadow: 0 0 0 3px var(--avrdv-accent-light);
}

/* Cases à cocher (personnalisées + consentement RGPD) : couleur native du
   navigateur remplacée par la couleur Accent une fois cochées. */
.av-rdv-booking input[type="checkbox"] {
    accent-color: var(--avrdv-accent);
}

/* ── Champs personnalisés (par prestation) ───────────────────────────────── */

.av-rdv-field select {
    padding: 10px 12px;
    border: 1.5px solid var(--avrdv-border);
    border-radius: 8px;
    font-size: 0.95rem;
    color: var(--avrdv-text);
    background: var(--avrdv-surface);
    font-family: inherit;
    transition: border-color .15s;
}

.av-rdv-field select:focus {
    outline: none;
    border-color: var(--avrdv-accent);
    box-shadow: 0 0 0 3px var(--avrdv-accent-light);
}

#av-rdv-custom-fields > .av-rdv-field {
    margin-top: 14px;
}

.av-rdv-cf-label-text {
    margin: 0;
    font-weight: 600;
    color: var(--avrdv-text);
}

/* Label laissé vide exprès : simple espaceur pour aérer le formulaire —
   sans hauteur minimale, un paragraphe vide s'effondrerait visuellement. */
.av-rdv-cf-label-text.is-empty {
    min-height: 1.4em;
}

/* Disposition "même ligne, avant/après le libellé" — le champ "à la ligne en dessous"
   (par défaut) garde le flex-column hérité de .av-rdv-field. */
.av-rdv-cf-layout-same_after,
.av-rdv-cf-layout-same_before {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.av-rdv-cf-layout-same_before {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

/* Le libellé peut se réduire et passer à la ligne s'il est long — sans ça,
   un libellé qui refuse de rétrécir pousse le champ hors de la carte
   (tronqué), surtout sur petit écran. */
.av-rdv-cf-layout-same_after label,
.av-rdv-cf-layout-same_before label {
    flex-shrink: 1;
    min-width: 0;
    margin: 0;
}

.av-rdv-cf-layout-same_after input:not([type="checkbox"]),
.av-rdv-cf-layout-same_after select,
.av-rdv-cf-layout-same_after textarea,
.av-rdv-cf-layout-same_before input:not([type="checkbox"]),
.av-rdv-cf-layout-same_before select,
.av-rdv-cf-layout-same_before textarea {
    flex: 1;
    /* Autorise le champ à rétrécir sous sa largeur de contenu naturelle
       (comportement flex par défaut sinon : il déborderait au lieu de s'adapter). */
    min-width: 0;
    max-width: 100%;
}

/* ── Récapitulatif créneau ───────────────────────────────────────────────── */

.av-rdv-recap {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--avrdv-accent-light);
    border-left: 3px solid var(--avrdv-accent);
    border-radius: 0 8px 8px 0;
    padding: 12px 16px;
    margin: 0 0 20px;
    font-size: 0.95rem;
    color: var(--avrdv-text);
}

.av-rdv-recap-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.av-rdv-gdpr-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 14px 0 4px;
    font-size: 0.8rem;
    color: var(--avrdv-muted);
    line-height: 1.4;
    cursor: pointer;
}

.av-rdv-gdpr-consent input {
    margin-top: 3px;
    flex-shrink: 0;
}

.av-rdv-submit-error {
    color: var(--avrdv-danger);
    font-size: 0.88rem;
    margin: 8px 0;
}

.av-rdv-btn-submit {
    margin-top: 8px;
    width: 100%;
    padding: 14px;
    background: var(--avrdv-accent);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
    font-family: inherit;
}

.av-rdv-btn-submit:hover:not(:disabled) {
    background: var(--avrdv-accent-dark);
}

.av-rdv-btn-submit:disabled {
    opacity: .65;
    cursor: not-allowed;
}

/* ── Confirmation ────────────────────────────────────────────────────────── */

.av-rdv-confirmation {
    text-align: center;
    padding: 16px 0;
}

.av-rdv-confirm-icon {
    font-size: 3.5rem;
    margin-bottom: 12px;
    line-height: 1;
}

.av-rdv-confirmation p {
    font-size: 1rem;
    color: var(--avrdv-text);
    line-height: 1.6;
    max-width: 420px;
    margin: 0 auto;
}

/* ── Navigation retour ───────────────────────────────────────────────────── */

.av-rdv-nav {
    margin-top: 12px;
}

.av-rdv-btn-back {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--avrdv-muted);
    padding: 4px 0;
    transition: color .15s;
    font-family: inherit;
}

.av-rdv-btn-back:hover {
    color: var(--avrdv-text);
}

/* ── États de chargement & messages vides ────────────────────────────────── */

.av-rdv-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--avrdv-muted);
    font-size: 0.9rem;
    padding: 20px 0;
}

.av-rdv-loading span {
    width: 18px;
    height: 18px;
    border: 2px solid var(--avrdv-border);
    border-top-color: var(--avrdv-accent);
    border-radius: 50%;
    animation: avrdv-spin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes avrdv-spin {
    to { transform: rotate(360deg); }
}

.av-rdv-msg-empty {
    font-size: 0.9rem;
    color: var(--avrdv-muted);
    padding: 12px 0;
    margin: 0;
    line-height: 1.6;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .av-rdv-card {
        padding: 20px 18px;
    }

    .av-rdv-form-grid {
        grid-template-columns: 1fr;
    }

    .av-rdv-service-meta {
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
    }

    /* Sur smartphone, un libellé + un champ texte/select sur la même ligne
       n'ont souvent pas la place de coexister proprement — on repasse en
       empilé (comme la disposition "à la ligne en dessous") pour éviter tout
       écrasement. Les cases à cocher (compactes, jamais en cause) gardent
       leur ligne unique case + libellé. */
    .av-rdv-cf-layout-same_after:not(:has(input[type="checkbox"])),
    .av-rdv-cf-layout-same_before:not(:has(input[type="checkbox"])) {
        flex-direction: column;
        align-items: flex-start;
    }

    .av-rdv-cf-layout-same_after input:not([type="checkbox"]),
    .av-rdv-cf-layout-same_after select,
    .av-rdv-cf-layout-same_after textarea,
    .av-rdv-cf-layout-same_before input:not([type="checkbox"]),
    .av-rdv-cf-layout-same_before select,
    .av-rdv-cf-layout-same_before textarea {
        width: 100%;
    }
}