/*
 ╔═══════════════════════════════════════════════════════════════════════════╗
 ║ FICHIER : amc-booking-v2.css
 ║ ZONE    : POPUP BOOKING V2 (popup de booking sur fiche expert publique)
 ╠═══════════════════════════════════════════════════════════════════════════╣
 ║ SCOPE       : .vpx-bkv2-* (popup launch sur profil expert public)
 ║ SELECTEURS  : .vpx-bkv2-popup, .vpx-bkv2-mode, .vpx-bkv2-slot, .vpx-bkv2-pending-banner (207 selecteurs vpx-*)
 ║ URL(s)      : Popup ouvert depuis /expert-profil/{slug}/ (fiche expert publique)
 ║ ENQUEUE     : class-amc-shortcodes.php booking v2
 ╠═══════════════════════════════════════════════════════════════════════════╣
 ║ ⚠️  REGLE D'OR :
 ║    NE PAS confondre vpx- (popup booking) avec aex- (dashboard expert).
 ║
 ║ 📋 Voir docs/CSS-ARCHITECTURE.md pour la cartographie complete
 ║ 🧪 Voir docs/CSS-CHECKLIST.md pour les tests post-modif
 ╚═══════════════════════════════════════════════════════════════════════════╝
 */
/* ═══════════════════════════════════════════════════════════════
 * AMC Booking V2 (v8.10.716) - Toggle "Tout de suite / Sur RDV" + Stepper RDV
 * Tout est prefixe par .vpx-bkv2-* ou attache au popup A existant
 * Couleurs turquoise AMC (#4C1D95) - inspiration design Wengo
 * ═══════════════════════════════════════════════════════════════ */

/* ============ Toggle "Tout de suite / Sur RDV" ============ */
.vpx-bkv2-toggle {
    display: flex;
    background: #f3f4f6;
    border-radius: 999px;
    padding: 4px;
    margin: 0 auto 18px;
    width: fit-content;
    gap: 4px;
}
.vpx-bkv2-toggle-btn {
    background: transparent;
    border: none;
    padding: 8px 24px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}
.vpx-bkv2-toggle-btn.is-active {
    background: #4C1D95;
    color: #fff;
    box-shadow: 0 2px 6px rgba(76, 29, 149, 0.3);
}
.vpx-bkv2-toggle-btn:not(.is-active):hover {
    background: rgba(255, 255, 255, 0.6);
    color: #1f2937;
}
/* v8.10.721 - Toggle disable quand expert offline */
.vpx-bkv2-toggle-btn.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    color: #9ca3af;
}
.vpx-bkv2-toggle-btn.is-disabled:hover {
    background: transparent;
    color: #9ca3af;
}

/* ============ Stepper indicator (1→2→3→4) ============ */
.vpx-bkv2-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 14px 0 22px;
    padding: 0 8px;
}
.vpx-bkv2-step {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #9ca3af;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: relative;
    z-index: 2;
    border: 2px solid #fff;
}
.vpx-bkv2-step.is-active {
    background: #4C1D95;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(76, 29, 149, 0.2);
}
.vpx-bkv2-step.is-done {
    background: #4C1D95;
    color: #fff;
}
.vpx-bkv2-step-line {
    flex: 1;
    height: 2px;
    background: #e5e7eb;
    max-width: 36px;
}
.vpx-bkv2-step-line.is-done { background: #4C1D95; }

/* ============ Sections principales (cachees par defaut) ============ */
.vpx-bkv2-section {
    display: none;
}
.vpx-bkv2-section.is-visible {
    display: block;
}
.vpx-bkv2-section-title {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 14px;
    text-align: center;
}
.vpx-bkv2-section-sub {
    font-size: 13px;
    color: #6b7280;
    text-align: center;
    margin: -8px 0 16px;
}

/* ============ Mode selection cards ============ */
.vpx-bkv2-modes {
    display: flex;
    gap: 8px;
    margin: 0 0 18px;
    flex-wrap: wrap;
}
.vpx-bkv2-mode {
    flex: 1;
    min-width: 90px;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}
.vpx-bkv2-mode-icon { font-size: 24px; margin-bottom: 4px; display: block; }
.vpx-bkv2-mode-label { font-size: 13px; font-weight: 600; color: #1f2937; }
.vpx-bkv2-mode:hover {
    border-color: #4C1D95;
    background: #EDE9FE;
}
.vpx-bkv2-mode.is-selected {
    border-color: #4C1D95;
    background: #EDE9FE;
    box-shadow: 0 0 0 3px rgba(76, 29, 149, 0.12);
}
.vpx-bkv2-mode.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============ Date picker (Aujourd'hui / Demain / Autre) ============ */
.vpx-bkv2-date-tabs {
    display: flex;
    gap: 8px;
    margin: 0 0 16px;
    justify-content: center;
}
.vpx-bkv2-date-tab {
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}
.vpx-bkv2-date-tab.is-active {
    background: #4C1D95;
    color: #fff;
    border-color: #4C1D95;
}
.vpx-bkv2-date-tab:not(.is-active):hover { border-color: #4C1D95; color: #4C1D95; }

/* ============ Accordions Nuit/Matin/APM/Soir ============ */
.vpx-bkv2-accordion {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}
.vpx-bkv2-accordion-head {
    padding: 10px 14px;
    background: #f9fafb;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    user-select: none;
}
.vpx-bkv2-accordion-head:hover { background: #f3f4f6; }
.vpx-bkv2-accordion-arrow {
    font-size: 11px;
    color: #6b7280;
    transition: transform 0.2s ease;
}
.vpx-bkv2-accordion.is-open .vpx-bkv2-accordion-arrow { transform: rotate(180deg); }
.vpx-bkv2-accordion-body {
    display: none;
    padding: 12px;
}
.vpx-bkv2-accordion.is-open .vpx-bkv2-accordion-body { display: block; }
.vpx-bkv2-accordion-empty {
    text-align: center;
    color: #9ca3af;
    font-size: 13px;
    font-style: italic;
    padding: 8px;
}

/* ============ Slot buttons (within accordions) ============ */
.vpx-bkv2-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
    gap: 6px;
}
.vpx-bkv2-slot {
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.12s ease;
    font-family: inherit;
    text-align: center;
}
.vpx-bkv2-slot:hover {
    border-color: #4C1D95;
    color: #4C1D95;
    background: #EDE9FE;
}
.vpx-bkv2-slot.is-selected {
    background: #4C1D95;
    border-color: #4C1D95;
    color: #fff;
}

/* ============ "BON A SAVOIR" hint box (Wengo-style) ============ */
.vpx-bkv2-tip {
    background: #EDE9FE;
    border: 1px solid rgba(76, 29, 149, 0.2);
    border-radius: 10px;
    padding: 14px 16px 14px 42px;
    margin: 14px 0;
    font-size: 12.5px;
    color: #1f2937;
    line-height: 1.5;
    position: relative;
}
.vpx-bkv2-tip::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 14px;
    width: 18px;
    height: 18px;
    background-color: #4C1D95;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18h6'/><path d='M10 22h4'/><path d='M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18h6'/><path d='M10 22h4'/><path d='M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14'/></svg>") center/contain no-repeat;
}
.vpx-bkv2-tip-title {
    font-weight: 700;
    color: #4C1D95;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 4px;
}

/* ============ Hors planning (calendrier + heure libre) ============ */
.vpx-bkv2-hors-planning {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed #e5e7eb;
}
.vpx-bkv2-hors-planning-title {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    text-align: center;
    margin-bottom: 4px;
}
.vpx-bkv2-hors-planning-sub {
    font-size: 12.5px;
    color: #6b7280;
    text-align: center;
    margin-bottom: 14px;
}
.vpx-bkv2-hors-toggle-btn {
    display: block;
    margin: 0 auto;
    background: transparent;
    border: 1.5px solid #4C1D95;
    color: #4C1D95;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}
.vpx-bkv2-hors-toggle-btn:hover { background: #4C1D95; color: #fff; }

.vpx-bkv2-calendar { margin-top: 14px; display: none; }
.vpx-bkv2-calendar.is-visible { display: block; }
.vpx-bkv2-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background: #f9fafb;
    border-radius: 6px 6px 0 0;
    border: 1px solid #e5e7eb;
    border-bottom: 0;
}
.vpx-bkv2-cal-nav {
    background: transparent;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    width: 28px; height: 28px;
    cursor: pointer;
    color: #1f2937;
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.vpx-bkv2-cal-nav:hover:not(:disabled) {
    background: #4C1D95; color: #fff; border-color: #4C1D95;
}
.vpx-bkv2-cal-nav:disabled { opacity: 0.3; cursor: not-allowed; }
.vpx-bkv2-cal-month {
    font-weight: 600;
    font-size: 14px;
    text-transform: capitalize;
    color: #1f2937;
}
.vpx-bkv2-cal-grid {
    border: 1px solid #e5e7eb;
    border-top: 0;
    border-radius: 0 0 6px 6px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.vpx-bkv2-cal-wd, .vpx-bkv2-cal-day {
    text-align: center;
    padding: 8px 0;
    font-size: 12px;
    border-right: 1px solid #f3f4f6;
    border-bottom: 1px solid #f3f4f6;
}
.vpx-bkv2-cal-wd {
    background: #f9fafb;
    color: #6b7280;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
}
.vpx-bkv2-cal-day { color: #1f2937; cursor: pointer; transition: all 0.1s ease; }
.vpx-bkv2-cal-day:nth-child(7n) { border-right: 0; }
.vpx-bkv2-cal-day.is-past, .vpx-bkv2-cal-day.is-empty {
    color: #d1d5db;
    cursor: not-allowed;
    background: #fafbfc;
}
.vpx-bkv2-cal-day.is-today { color: #4C1D95; font-weight: 700; }
.vpx-bkv2-cal-day:hover:not(.is-past):not(.is-empty) {
    background: #EDE9FE;
    color: #4C1D95;
}
.vpx-bkv2-cal-day.is-selected {
    background: #4C1D95 !important;
    color: #fff !important;
    font-weight: 700;
}

.vpx-bkv2-hours-input-wrap {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
}
.vpx-bkv2-hours-input-wrap label { font-size: 13px; color: #6b7280; font-weight: 500; }
.vpx-bkv2-hours-select {
    background: #fff;
    border: 1.5px solid #d1d5db;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
    font-family: inherit;
    color: #1f2937;
}

/* ============ Recap + confirm (Etape 3) ============ */
.vpx-bkv2-recap {
    background: #f9fafb;
    border-radius: 10px;
    padding: 14px 16px;
    margin: 0 0 14px;
}
.vpx-bkv2-recap-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 13px;
    color: #6b7280;
}
.vpx-bkv2-recap-row strong { color: #1f2937; font-weight: 600; }
.vpx-bkv2-recap-row.is-highlight {
    border-top: 1px dashed #d1d5db;
    margin-top: 6px;
    padding-top: 10px;
    font-size: 14px;
}
.vpx-bkv2-recap-row.is-missing {
    background: #fef2f2;
    color: #991b1b;
    padding: 4px 8px;
    border-radius: 6px;
    margin: 2px 0;
}
.vpx-bkv2-recap-row.is-missing strong { color: #dc2626; }
.vpx-bkv2-recap-row.is-highlight strong { color: #4C1D95; font-weight: 700; }

.vpx-bkv2-phone-field {
    margin: 12px 0;
}
.vpx-bkv2-phone-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 4px;
}
.vpx-bkv2-phone-input {
    width: 100%;
    background: #fff;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
}
.vpx-bkv2-phone-input:focus { outline: none; border-color: #4C1D95; box-shadow: 0 0 0 3px rgba(76,29,149,0.12); }

.vpx-bkv2-notes-input {
    width: 100%;
    background: #fff;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    min-height: 60px;
    margin: 10px 0;
    box-sizing: border-box;
}
.vpx-bkv2-notes-input:focus { outline: none; border-color: #4C1D95; }

/* ============ Navigation between steps ============ */
.vpx-bkv2-nav {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}
.vpx-bkv2-btn-back, .vpx-bkv2-btn-next {
    flex: 1;
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}
.vpx-bkv2-btn-back {
    background: transparent;
    border: 1.5px solid #d1d5db;
    color: #6b7280;
}
.vpx-bkv2-btn-back:hover { border-color: #1f2937; color: #1f2937; }
.vpx-bkv2-btn-next {
    background: #4C1D95;
    border: 1.5px solid #4C1D95;
    color: #fff;
}
.vpx-bkv2-btn-next:hover:not(:disabled) {
    background: #3C1170 !important; border-color: #3C1170 !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(76, 29, 149, 0.3);
}
.vpx-bkv2-btn-next:disabled {
    background: #d1d5db;
    border-color: #d1d5db;
    cursor: not-allowed;
}

/* ============ Success screen ============ */
.vpx-bkv2-success {
    text-align: center;
    padding: 20px 12px;
}
.vpx-bkv2-success-icon {
    width: 64px; height: 64px;
    margin: 0 auto 14px;
    background: #d1fae5;
    color: #059669;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    animation: vpx-bkv2-bounce 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes vpx-bkv2-bounce {
    0%   { transform: scale(0.3); opacity: 0; }
    60%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); }
}
.vpx-bkv2-success-title {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 6px;
}
.vpx-bkv2-success-detail {
    font-size: 13.5px;
    color: #6b7280;
    margin: 0 0 18px;
    line-height: 1.5;
}
.vpx-bkv2-success-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}
.vpx-bkv2-success-actions a {
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s ease;
}
.vpx-bkv2-success-actions a.is-primary {
    background: #4C1D95; color: #fff !important;
}
.vpx-bkv2-success-actions a.is-primary:hover { background: #3C1170; }
.vpx-bkv2-success-actions a.is-secondary {
    background: transparent; color: #6b7280 !important;
    border: 1.5px solid #d1d5db;
}
.vpx-bkv2-success-actions a.is-secondary:hover { border-color: #1f2937; color: #1f2937 !important; }

/* ============ Error display ============ */
.vpx-bkv2-error {
    background: #fee2e2;
    color: #991b1b;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    margin: 10px 0;
    display: none;
}
.vpx-bkv2-error.is-visible { display: block; }

/* ============ Recharge CTA si insufficient ============ */
.vpx-bkv2-recharge-cta {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #fbbf24;
    border-radius: 10px;
    padding: 14px 16px;
    margin: 12px 0;
    text-align: center;
}
.vpx-bkv2-recharge-cta p {
    margin: 0 0 10px;
    font-size: 13px;
    color: #92400e;
    line-height: 1.5;
}
.vpx-bkv2-recharge-cta a {
    display: inline-block;
    background: #f59e0b;
    color: #fff !important;
    padding: 7px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.vpx-bkv2-recharge-cta a:hover { background: #d97706; }

/* ============ Responsive (mobile) ============ */
@media (max-width: 480px) {
    .vpx-bkv2-toggle-btn { padding: 7px 16px; font-size: 13px; }
    .vpx-bkv2-modes { gap: 6px; }
    .vpx-bkv2-mode { padding: 10px 4px; min-width: 70px; }
    .vpx-bkv2-mode-icon { font-size: 20px; }
    .vpx-bkv2-mode-label { font-size: 11.5px; }
    .vpx-bkv2-date-tab { padding: 5px 12px; font-size: 12px; }
    .vpx-bkv2-slots { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
    .vpx-bkv2-slot { padding: 5px 4px; font-size: 11.5px; }
}

/* ============ Phone country selector (v8.10.728) ============ */
.vpx-bkv2-phone-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.vpx-bkv2-phone-country {
    flex: 0 0 auto;
    width: 95px;
    max-width: 95px;
    background: #fff;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    padding: 8px 6px;
    font-size: 13px;
    font-family: inherit;
    color: #1f2937;
    cursor: pointer;
    text-overflow: ellipsis;
    overflow: hidden;
}
.vpx-bkv2-phone-country:focus { outline: none; border-color: #4C1D95; }
.vpx-bkv2-phone-row .vpx-bkv2-phone-input { flex: 1; }
/* v8.10.759 - Banniere mobile plus discrete : gris clair au lieu de jaune chaud */
.vpx-bkv2-phone-hint {
    margin-top: 6px;
    padding: 7px 10px;
    background: #f7f7f7;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    font-size: 12px;
    color: #666;
    line-height: 1.4;
}
.vpx-bkv2-phone-hint strong { color: #444; font-weight: 600; }
.vpx-bkv2-phone-hint svg { color: #999 !important; }

/* ============ Durée options (v8.10.729) ============ */
.vpx-bkv2-duration-block {
    margin: 14px 0 8px;
}
.vpx-bkv2-duration-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.vpx-bkv2-duration-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.vpx-bkv2-duration-opt {
    position: relative;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 6px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    line-height: 1.2;
}
.vpx-bkv2-duration-opt:hover:not(:disabled) {
    border-color: #4C1D95;
    background: #EDE9FE;
}
.vpx-bkv2-duration-opt.is-selected {
    border-color: #4C1D95;
    background: #EDE9FE;
    box-shadow: 0 0 0 3px rgba(76, 29, 149, 0.12);
}
/* v8.10.732 - is-disabled remplace par is-insufficient (toujours cliquable mais visuel doux) */
.vpx-bkv2-duration-opt.is-insufficient {
    opacity: 0.6;
    background: #fafbfc;
}
.vpx-bkv2-duration-opt.is-insufficient:hover {
    opacity: 1;
    border-color: #f59e0b;
    background: #fffbeb;
}
.vpx-bkv2-duration-opt.is-insufficient.is-selected {
    opacity: 1;
    border-color: #f59e0b;
    background: #fffbeb;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}
.vpx-bkv2-duration-opt.is-custom .vpx-bkv2-duration-opt-val {
    color: #4C1D95;
}
.vpx-bkv2-duration-opt.is-custom .vpx-bkv2-duration-opt-note {
    color: #4C1D95;
    font-weight: 600;
}
.vpx-bkv2-duration-opt-val {
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
}
.vpx-bkv2-duration-opt-note {
    font-size: 10px;
    font-weight: 500;
    color: #6b7280;
    margin-top: 1px;
}
/* v8.10.732 - vpx-bkv2-duration-opt-lock retire (plus de cadenas) */

.vpx-bkv2-duration-recharge {
    margin-top: 10px;
    padding: 10px 12px;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 8px;
    font-size: 12.5px;
    color: #92400e;
    line-height: 1.5;
    text-align: center;
}
.vpx-bkv2-recharge-link {
    color: #d97706 !important;
    text-decoration: underline;
    font-weight: 600;
    margin-left: 4px;
}
.vpx-bkv2-recharge-link:hover { color: #b45309 !important; }

/* ============ Restitution note (v8.10.729) ============ */
.vpx-bkv2-restitution-note {
    margin: 12px 0;
    padding: 10px 12px;
    background: #EDE9FE;
    border-left: 3px solid #4C1D95;
    border-radius: 4px;
    font-size: 11.5px;
    color: #1f2937;
    line-height: 1.5;
}

/* ============ Recharge inline section (v8.10.730) ============ */
.vpx-bkv2-back-arrow {
    background: transparent;
    border: none;
    color: #4C1D95;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
    margin-bottom: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: inherit;
}
.vpx-bkv2-back-arrow:hover { color: #3C1170; }

.vpx-bkv2-duration-recharge-msg {
    margin-bottom: 8px;
}
.vpx-bkv2-recharge-btn {
    display: inline-block;
    margin: 8px auto 0;
    background: #f59e0b;
    color: #fff !important;
    border: none;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
}
.vpx-bkv2-recharge-btn:hover {
    background: #d97706;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3);
}

.vpx-bkv2-recharge-loading {
    text-align: center;
    padding: 30px 16px;
    color: #6b7280;
    font-size: 13.5px;
}
.vpx-bkv2-spinner-mini {
    display: inline-block;
    width: 18px; height: 18px;
    border: 2px solid #e5e7eb;
    border-top-color: #4C1D95;
    border-radius: 50%;
    animation: vpx-bkv2-spin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 8px;
}
@keyframes vpx-bkv2-spin { to { transform: rotate(360deg); } }

.vpx-bkv2-recharge-h4 {
    font-size: 13px;
    font-weight: 700;
    color: #1f2937;
    margin: 12px 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.vpx-bkv2-recharge-sub-small {
    font-size: 11.5px;
    color: #6b7280;
    margin: -4px 0 8px;
}
.vpx-bkv2-recharge-sep {
    text-align: center;
    color: #9ca3af;
    font-size: 12px;
    margin: 14px 0 8px;
    position: relative;
}
.vpx-bkv2-recharge-sep::before,
.vpx-bkv2-recharge-sep::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background: #e5e7eb;
}
.vpx-bkv2-recharge-sep::before { left: 0; }
.vpx-bkv2-recharge-sep::after { right: 0; }

.vpx-bkv2-recharge-tiers-grid,
.vpx-bkv2-recharge-packs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    justify-content: center;
    max-width: 480px;
    margin: 0 auto;
}
.vpx-bkv2-recharge-packs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 340px;
}
@media (max-width: 480px) {
    .vpx-bkv2-recharge-tiers-grid,
    .vpx-bkv2-recharge-packs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.vpx-bkv2-recharge-opt {
    position: relative;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px 8px;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.vpx-bkv2-recharge-opt:hover {
    border-color: #4C1D95;
    background: #EDE9FE;
}
.vpx-bkv2-recharge-opt.is-selected {
    border-color: #4C1D95;
    background: #EDE9FE;
    box-shadow: 0 0 0 3px rgba(76, 29, 149, 0.12);
}
.vpx-bkv2-recharge-opt.is-popular {
    border-color: #f59e0b;
    background: #fffbeb;
}
.vpx-bkv2-recharge-opt.is-popular.is-selected {
    background: #fef3c7;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}
.vpx-bkv2-recharge-badge {
    position: absolute;
    top: -8px;
    background: #f59e0b;
    color: #fff;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.vpx-bkv2-recharge-amount {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
}
.vpx-bkv2-recharge-minutes {
    font-size: 11px;
    color: #6b7280;
    font-weight: 500;
}
.vpx-bkv2-recharge-pack-label {
    font-size: 11px;
    color: #6b7280;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.vpx-bkv2-recharge-rate {
    font-size: 10.5px;
    color: #4C1D95;
    font-weight: 600;
}
.vpx-bkv2-recharge-pack {
    background: #EDE9FE;
}

.vpx-bkv2-recharge-nav {
    margin-top: 16px;
    display: flex;
    justify-content: center;
}
.vpx-bkv2-recharge-nav .vpx-bkv2-btn-next {
    min-width: 220px;
}
.vpx-bkv2-recharge-secure {
    margin-top: 10px;
    text-align: center;
    font-size: 11px;
    color: #9ca3af;
}


/* v8.10.732 - Bouton confirmer désactivé quand crédit insuffisant */
.vpx-bkv2-btn-next.is-disabled,
.vpx-bkv2-btn-next:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: #d1d5db !important;
    color: #6b7280 !important;
    box-shadow: none !important;
}
.vpx-bkv2-btn-next.is-disabled:hover,
.vpx-bkv2-btn-next:disabled:hover {
    transform: none;
    background: #d1d5db !important;
}

/* ============ Champ montant personnalise (v8.10.736) ============ */
.vpx-bkv2-custom-amount-wrapper {
    margin-top: 10px;
    text-align: center;
}
.vpx-bkv2-custom-amount-toggle {
    background: transparent;
    border: 1px dashed #4C1D95;
    color: #4C1D95;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
}
.vpx-bkv2-custom-amount-toggle:hover {
    background: #EDE9FE;
    border-style: solid;
}
.vpx-bkv2-custom-amount-input {
    margin-top: 10px;
    padding: 10px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    background: #fafbfc;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}
.vpx-bkv2-custom-amount-input.is-active {
    border-color: #4C1D95;
    background: #EDE9FE;
    box-shadow: 0 0 0 3px rgba(76, 29, 149, 0.12);
}
.vpx-bkv2-custom-amount-input label {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 6px;
}
.vpx-bkv2-custom-amount-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
}
.vpx-bkv2-custom-amount-row input {
    flex: 1;
    padding: 8px 10px;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
}
.vpx-bkv2-custom-amount-row input:focus { outline: none; border-color: #4C1D95; }
.vpx-bkv2-custom-amount-suffix {
    display: flex;
    align-items: center;
    font-weight: 700;
    color: #6b7280;
}
.vpx-bkv2-custom-amount-apply {
    background: #4C1D95;
    color: #fff;
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.vpx-bkv2-custom-amount-apply:hover { background: #3C1170; }
.vpx-bkv2-custom-amount-error {
    margin: 6px 0 0;
    font-size: 11.5px;
    color: #dc2626;
}

/* ============ Sous-ligne discrete (v8.10.737) ============ */
.vpx-bkv2-recap-row.vpx-bkv2-recap-sub {
    font-size: 11px;
    color: #9ca3af;
    margin-top: -4px;
    padding-top: 0;
    border-top: none;
}
.vpx-bkv2-recap-row.vpx-bkv2-recap-sub span { font-weight: 400; }

/* ============ Selecteur fuseau horaire (v8.10.740) ============ */
/* v8.10.761 - Selecteur fuseau horaire : design epure (no bord/fond), fleche collee au texte */
.vpx-bkv2-timezone-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 10px 0 12px;
    padding: 0;
    background: transparent;
    font-size: 12px;
}
.vpx-bkv2-timezone-row label {
    font-weight: 600;
    color: #4C1D95;
    white-space: nowrap;
}
/* !important + ID specifique #vpx-popup-A pour battre le theme Woodmart */
#vpx-popup-A .vpx-bkv2-timezone-select,
#vpx-popup-A select.vpx-bkv2-timezone-select,
#vpx-popup-A select#vpx-bkv2-timezone {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 2px 18px 2px 4px !important;
    border: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%230aa1a1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 2px center !important;
    background-size: 10px 10px !important;
    font-size: 12px !important;
    font-family: inherit !important;
    color: #333 !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    height: auto !important;
    line-height: 1.4 !important;
    min-height: 0 !important;
    outline: none !important;
}
#vpx-popup-A .vpx-bkv2-timezone-select:focus,
#vpx-popup-A select#vpx-bkv2-timezone:focus { color: #4C1D95 !important; }
#vpx-popup-A .vpx-bkv2-timezone-select:hover,
#vpx-popup-A select#vpx-bkv2-timezone:hover { color: #4C1D95 !important; }

/* ============ Custom dropdown phone country (v8.10.742) ============ */
.vpx-bkv2-phone-country-wrapper {
    position: relative;
    flex: 0 0 auto;
}
.vpx-bkv2-phone-country-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    padding: 7px 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    height: 100%;
    min-height: 36px;
    color: #1f2937;
    transition: border-color 0.15s ease;
}
.vpx-bkv2-phone-country-btn:hover { border-color: #4C1D95; }
.vpx-bkv2-phone-country-btn.is-open { border-color: #4C1D95; box-shadow: 0 0 0 3px rgba(76, 29, 149, 0.12); }
.vpx-bkv2-phone-country-flag-img {
    display: block;
    border-radius: 2px;
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08);
}
.vpx-bkv2-phone-country-dial {
    font-weight: 600;
    color: #1f2937;
    font-size: 13px;
}
.vpx-bkv2-phone-country-caret {
    color: #9ca3af;
    font-size: 10px;
    margin-left: 2px;
}

.vpx-bkv2-phone-country-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 10000;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
    max-height: 280px;
    overflow-y: auto;
    width: 280px;
    padding: 4px;
}

.vpx-bkv2-phone-country-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    border-radius: 6px;
    transition: background 0.1s ease;
}
.vpx-bkv2-phone-country-item:hover { background: #EDE9FE; }
.vpx-bkv2-phone-country-item-name {
    flex: 1;
    color: #1f2937;
    font-weight: 500;
}
.vpx-bkv2-phone-country-item-dial {
    color: #6b7280;
    font-weight: 600;
    font-size: 12px;
}

/* Retire l'ancien style du select natif (devenu inutile) */
.vpx-bkv2-phone-country { display: none !important; }

/* ============ Banniere status pending (v8.10.748) ============ */
.vpx-bkv2-pending-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 16px auto 0;
    padding: 12px 18px;
    background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%);
    border: 1.5px solid #f59e0b;
    border-radius: 12px;
    color: #92400e;
    font-weight: 600;
    font-size: 13.5px;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
    max-width: 90%;
    line-height: 1.3;
}
.vpx-bkv2-pending-banner svg {
    color: #f59e0b;
}
.vpx-bkv2-pending-banner span {
    text-align: center;
}
.vpx-bkv2-confirmed-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 12px auto 0;
    padding: 8px 16px;
    background: #EDE9FE;
    color: #4C1D95;
    border-radius: 99px;
    font-weight: 600;
    font-size: 13.5px;
    border: 1.5px solid #4C1D95;
}

/* ============================================================ */
/* v8.10.757 - SECTION 6 : confirm-instant                     */
/* (remplace popup A legacy : confirmation avant lancement)    */
/* ============================================================ */
.vpx-bkv2-section[data-section="6"] .vpx-bkv2-confirm-expert {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 18px 0 20px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #EDE9FE 0%, #F3E8FF 50%, #FCE7F3 100%);
    box-shadow: 0 2px 10px rgba(147, 51, 234, 0.08);
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}
.vpx-bkv2-confirm-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a78bfa, #c084fc);
    color: #fff;
    font-size: 26px;
    font-weight: 600;
    border: 2.5px solid #fff;
    box-shadow: 0 2px 8px rgba(147, 51, 234, 0.18);
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.vpx-bkv2-confirm-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.vpx-bkv2-confirm-expert-info { flex: 1; min-width: 0; }
.vpx-bkv2-confirm-name {
    font-size: 17px;
    font-weight: 700;
    color: #4C1D95;
    margin-bottom: 4px;
    position: relative;
    z-index: 1;
}
.vpx-bkv2-confirm-expert-info {
    position: relative;
    z-index: 1;
}
/* v8.10.889 - Effet lumiere radial sur le bloc expert */
.vpx-bkv2-section[data-section="6"] .vpx-bkv2-confirm-expert::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -30%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.10) 0%, transparent 70%);
    pointer-events: none;
}
.vpx-bkv2-confirm-rate {
    font-size: 14px;
    color: #4C1D95;
    font-weight: 500;
}
.vpx-bkv2-confirm-list {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
}
.vpx-bkv2-confirm-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}
.vpx-bkv2-confirm-row:last-child { border-bottom: none; }
.vpx-bkv2-confirm-arrow {
    color: #4C1D95;
    font-size: 14px;
    line-height: 1.4;
    flex-shrink: 0;
}
.vpx-bkv2-confirm-content { flex: 1; line-height: 1.4; }
.vpx-bkv2-confirm-lbl { color: #666; }
.vpx-bkv2-confirm-content strong {
    color: #1a1a1a;
    font-weight: 600;
}
.vpx-bkv2-confirm-edit-phone {
    display: block;
    font-size: 13px;
    color: #4C1D95;
    text-decoration: underline;
    margin-top: 4px;
    cursor: pointer;
}
.vpx-bkv2-confirm-edit-phone:hover { color: #088787; }
.vpx-bkv2-confirm-error {
    background: #fee;
    color: #dc2626;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    margin: 12px 0;
}
.vpx-bkv2-launch-btn {
    width: 100%;
    padding: 16px;
    background: #4C1D95;
    color: #fff !important;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background 0.2s;
}
.vpx-bkv2-launch-btn:hover:not(:disabled) { background: #3C1170 !important; color: #fff !important; }
.vpx-bkv2-launch-btn:disabled {
    background: #999;
    cursor: not-allowed;
    opacity: 0.7;
}


/* v8.10.758 - Section 6 : refonte avec dropdown pays + CTA recharger */
.vpx-bkv2-confirm-mode-row {
    padding: 12px 14px;
    background: #f8fafa;
    border-radius: 8px;
    margin: 16px 0;
    font-size: 14px;
}
.vpx-bkv2-confirm-mode-row .vpx-bkv2-confirm-lbl {
    color: #666;
    margin-right: 4px;
}
.vpx-bkv2-confirm-mode-row strong {
    color: #1a1a1a;
    font-weight: 600;
}
.vpx-bkv2-confirm-credit-block {
    margin: 16px 0;
    padding: 14px 18px;
    background: linear-gradient(135deg, #FDF2F8 0%, #FCE7F3 50%, #FBCFE8 100%);
    border: 1px solid #FBCFE8;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(236, 72, 153, 0.06);
    position: relative;
    overflow: hidden;
}
.vpx-bkv2-confirm-credit-block::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -30%;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.08) 0%, transparent 70%);
    pointer-events: none;
}
.vpx-bkv2-confirm-credit-block > * { position: relative; z-index: 1; }
.vpx-bkv2-confirm-credit-row {
    font-size: 15px;
    margin-bottom: 10px;
}
.vpx-bkv2-confirm-credit-lbl {
    color: #555;
    margin-right: 4px;
}
.vpx-bkv2-confirm-credit-row strong {
    color: #4C1D95;
    font-weight: 700;
    font-size: 16px;
}
.vpx-bkv2-confirm-recharge-btn {
    display: block;
    width: 100%;
    padding: 10px 14px;
    background: #fff;
    border: 1.5px solid #4C1D95;
    color: #4C1D95 !important;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: background 0.2s;
    text-transform: none;
    letter-spacing: 0;
}
.vpx-bkv2-confirm-recharge-btn:hover {
    background: #EDE9FE !important;
    border-color: #4C1D95 !important;
    color: #4C1D95 !important;
    box-shadow: 0 2px 8px rgba(76, 29, 149, 0.15);
    transform: translateY(-1px);
}
.vpx-bkv2-launch-btn:disabled {
    background: #d0d0d0 !important;
    cursor: not-allowed;
    opacity: 0.7;
}




/* ============ v8.10.760 - Popup pendant consultation : design booking V2 ============ */
/* Bouton "Recharger en 1 clic" : outline turquoise */
.vpx-room-recharge-toggle {
    background: #fff !important;
    border: 1.5px solid #4C1D95 !important;
    color: #4C1D95 !important;
    border-radius: 8px !important;
    padding: 11px 16px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: background 0.2s !important;
}
.vpx-room-recharge-toggle:hover { background: #F3E8FF !important; }
.vpx-room-recharge-toggle .vpx-room-recharge-toggle-arrow { color: #4C1D95 !important; }
.vpx-room-recharge-grouptitle {
    color: #555 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    letter-spacing: 0.06em !important;
    margin: 14px 0 10px !important;
}
/* v8.10.764 - Carres recharge popup pendant consultation : copie EXACTE du design booking V2 (.vpx-bkv2-recharge-opt) */
.vpx-room-recharge-options { gap: 10px !important; }
.vpx-room-recharge-option {
    position: relative !important;
    background: #fff !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: 12px 8px !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: all 0.15s ease !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    min-height: 0 !important;
    transform: none !important;
    box-shadow: none !important;
}
.vpx-room-recharge-option:hover {
    border-color: #4C1D95 !important;
    background: #EDE9FE !important;
    transform: none !important;
    box-shadow: none !important;
}
.vpx-room-recharge-option.is-selected,
.vpx-room-recharge-option.selected {
    border-color: #4C1D95 !important;
    background: #EDE9FE !important;
    box-shadow: 0 0 0 3px rgba(76, 29, 149, 0.12) !important;
}
.vpx-room-recharge-option-amount {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    line-height: 1.2 !important;
}
.vpx-room-recharge-option-detail {
    font-size: 11px !important;
    color: #6b7280 !important;
    margin-top: 2px !important;
}

/* Custom amount : "+ Entrer un autre montant" */
.vpx-room-custom-amount-wrapper { margin-top: 10px; }
.vpx-room-custom-amount-toggle {
    background: transparent;
    border: 1.5px dashed #4C1D95;
    color: #4C1D95;
    border-radius: 8px;
    padding: 9px 14px;
    width: 100%;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.15s;
    font-family: inherit;
    text-transform: none;
    letter-spacing: 0;
}
.vpx-room-custom-amount-toggle:hover { background: #F3E8FF; }
.vpx-room-custom-amount-input { margin-top: 10px; }
.vpx-room-custom-amount-input label {
    display: block;
    font-size: 12px;
    color: #555;
    margin-bottom: 6px;
    font-weight: 600;
}
.vpx-room-custom-amount-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.vpx-room-custom-amount-row input[type="number"] {
    flex: 1;
    padding: 10px 12px;
    border: 1.5px solid #d0d0d0;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    color: #222;
    background: #fff;
    transition: border-color 0.15s;
}
.vpx-room-custom-amount-row input[type="number"]:focus {
    outline: none;
    border-color: #4C1D95;
}
.vpx-room-custom-amount-suffix {
    color: #555;
    font-weight: 600;
    font-size: 14px;
}
.vpx-room-custom-amount-apply {
    background: #4C1D95 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 10px 16px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    transition: background 0.15s !important;
    font-family: inherit !important;
}
.vpx-room-custom-amount-apply:hover { background: #3C1170 !important; }
.vpx-room-custom-amount-error {
    color: #d32f2f;
    font-size: 12px;
    margin-top: 6px;
}

/* ============ SUJET 4 v8.10.760 - Bouton OK du popup fin de consultation ============ */
/* Plus joli : pleine largeur, ombre, hover */
.vpx-room-ok-btn {
    background: #4C1D95 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 14px 32px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    min-width: 220px !important;
    box-shadow: 0 4px 14px rgba(76, 29, 149, 0.35) !important;
    transition: background 0.18s, transform 0.1s, box-shadow 0.18s !important;
}
.vpx-room-ok-btn:hover {
    background: #3C1170 !important;
    box-shadow: 0 6px 18px rgba(76, 29, 149, 0.45) !important;
    transform: translateY(-1px);
}
.vpx-room-ok-btn:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(76, 29, 149, 0.3) !important;
}

/* ============ SUJET 5 v8.10.760 - Popup expert : design boutons ameliores ============ */
/* Bouton Fermer header (X / -) en haut a droite */
.amc-ec-btn-h {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.95) !important;
    color: #555 !important;
    font-size: 16px !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10) !important;
    transition: background 0.15s, color 0.15s, transform 0.1s !important;
}
.amc-ec-btn-h:hover {
    background: #fff !important;
    color: #4C1D95 !important;
    transform: scale(1.06);
}
.amc-ec-pop-head.is-ended .amc-ec-btn-h {
    background: #fff !important;
    color: #5f5e5a !important;
}

/* Bouton "Mes notes sur ce client" (toggle) - amc-ec-notes-toggle */
.amc-ec-notes-toggle {
    background: #fff !important;
    border: 1.5px solid #4C1D95 !important;
    color: #4C1D95 !important;
    border-radius: 8px !important;
    padding: 11px 16px !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    letter-spacing: 0.06em !important;
    transition: background 0.15s !important;
}
.amc-ec-notes-toggle:hover {
    background: #F3E8FF !important;
    border-color: #3C1170 !important;
    color: #3C1170 !important;
}
.amc-ec-notes-toggle .amc-ec-notes-icon { color: #4C1D95 !important; }

/* Boutons "Fermer", "Mes notes", "Voir fiche client" (fin de consultation expert) */
.amc-ec-btn-end-close,
.amc-ec-btn-ghost {
    background: #fff !important;
    color: #555 !important;
    border: 1.5px solid #d0d0d0 !important;
    border-radius: 8px !important;
    padding: 12px 18px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    transition: all 0.15s !important;
}
.amc-ec-btn-end-close:hover,
.amc-ec-btn-ghost:hover {
    border-color: #4C1D95 !important;
    color: #4C1D95 !important;
    background: #F3E8FF !important;
}
/* Voir fiche client : CTA primaire turquoise */
.amc-ec-btn-prim {
    background: #4C1D95 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 20px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s !important;
    box-shadow: 0 3px 10px rgba(76, 29, 149, 0.25) !important;
}
.amc-ec-btn-prim:hover:not(:disabled) {
    background: #3C1170 !important;
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(76, 29, 149, 0.35) !important;
}
.amc-ec-btn-prim:active { transform: translateY(0); }
.amc-ec-btn-prim:disabled {
    background: #ccc !important;
    box-shadow: none !important;
}

/* ─────────────────────────────────────────────────────────────
   v8.10.768 - Bandeau référence intent (loggés uniquement)
   Affiché en bas du popup, discret, format "Référence : #A-2026-001234"
   ─────────────────────────────────────────────────────────────── */
.vpx-bkv2-intent-ref {
    text-align: center;
    padding: 8px 12px 4px;
    font-size: 11px;
    color: #9ca3af;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    letter-spacing: 0.02em;
    border-top: 1px solid #f3f4f6;
    margin-top: 8px;
    user-select: text;
}

/* v8.10.887 - Carte expert (nom + spec + avatar avec degrade pastel violet/rose) */
.vpx-bkv2-expert-card {
    display: flex;
    align-items: center;
    gap: 0.95rem;
    background: linear-gradient(135deg, #EDE9FE 0%, #F3E8FF 50%, #FCE7F3 100%);
    border-radius: 10px;
    padding: 0.85rem 1.1rem;
    margin: 8px 0 16px;
    box-shadow: 0 2px 10px rgba(147, 51, 234, 0.08);
    position: relative;
    overflow: hidden;
}
.vpx-bkv2-expert-card::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -30%;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.10) 0%, transparent 70%);
    pointer-events: none;
}
.vpx-bkv2-expert-card .vpx-bkv2-expert-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a78bfa, #c084fc);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    overflow: hidden;
    flex-shrink: 0;
    border: 2.5px solid #fff;
    box-shadow: 0 2px 8px rgba(147, 51, 234, 0.18);
    position: relative;
    z-index: 1;
}
.vpx-bkv2-expert-card .vpx-bkv2-expert-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.vpx-bkv2-expert-info {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}
.vpx-bkv2-expert-card .vpx-bkv2-expert-name {
    font-weight: 700;
    font-size: 1rem;
    color: #4C1D95;
    line-height: 1.2;
}
.vpx-bkv2-expert-card .vpx-bkv2-expert-spec {
    font-size: 0.8rem;
    color: #7C3AED;
    margin-top: 0.15rem;
    font-style: italic;
    opacity: 0.9;
}

/* v8.10.887 - Back-arrow EN DESSOUS du header (espace top) + couleur violet */
.vpx-bkv2-section {
    padding-top: 4px;
}
.vpx-bkv2-back-arrow {
    margin-top: 14px !important;
    margin-bottom: 10px !important;
    color: #4C1D95 !important;
}
.vpx-bkv2-back-arrow:hover {
    color: #3C1170 !important;
}

/* v8.10.890 - Anti-fraude : input phone invalide (numero deja pris) */
.vpx-bkv2-phone-input.vpx-bkv2-phone-invalid,
input.vpx-bkv2-phone-input.vpx-bkv2-phone-invalid {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.10) !important;
}
.vpx-bkv2-section[data-section="6"] .vpx-bkv2-confirm-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    margin: 10px 0;
}

/* v8.10.891 - Container erreur phone (sous le champ, avant Credit dispo) */
.vpx-bkv2-phone-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    margin: 8px 0 0;
}
.vpx-bkv2-phone-error strong { color: #7f1d1d; }

/* ░░░ v8.10.906 - Selecteur localisation TVA (PHASE 1C-bis Etape C) ░░░ */

.vpx-bkv2-confirm-location-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.7rem 0;
    padding: 0.55rem 0.7rem;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    font-size: 0.88rem;
}

.vpx-bkv2-confirm-loc-lbl {
    color: #075985;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.vpx-bkv2-loc-wrapper {
    position: relative;
    margin-left: auto;
}

.vpx-bkv2-loc-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.7rem;
    background: white;
    border: 1px solid #0ea5e9;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.88rem;
    color: #0c4a6e;
    font-weight: 500;
    transition: all 0.15s ease;
    font-family: inherit;
}

.vpx-bkv2-loc-btn:hover {
    background: #f0f9ff;
    border-color: #0284c7;
    box-shadow: 0 2px 6px rgba(14, 165, 233, 0.15);
}

.vpx-bkv2-loc-flag {
    display: inline-block;
    line-height: 0;
}

.vpx-bkv2-loc-flag img {
    border-radius: 2px;
    vertical-align: middle;
}

.vpx-bkv2-loc-caret {
    color: #0284c7;
    font-size: 0.75rem;
    margin-left: 2px;
}

.vpx-bkv2-loc-list {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    width: 240px;
    max-height: 280px;
    overflow-y: auto;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 9999;
}

.vpx-bkv2-loc-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.5rem 0.8rem;
    background: white;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 0.88rem;
    color: #374151;
    transition: background 0.1s ease;
    font-family: inherit;
}

.vpx-bkv2-loc-item:hover {
    background: #f0f9ff;
    color: #0c4a6e;
}

.vpx-bkv2-loc-item-name {
    flex: 1;
}

@media (max-width: 540px) {
    .vpx-bkv2-confirm-location-row {
        flex-wrap: wrap;
    }
    .vpx-bkv2-loc-wrapper {
        margin-left: 0;
        margin-top: 0.4rem;
        width: 100%;
    }
    .vpx-bkv2-loc-btn {
        width: 100%;
        justify-content: space-between;
    }
    .vpx-bkv2-loc-list {
        width: 100%;
    }
}