/**
 * Mystica × Elateia - Feuille de style pont
 *
 * Adapte les sélecteurs HTML produits par le plugin "Voyance Plugin" (Elateia)
 * au design Mystica (variables CSS, palette violet/or, fond étoilé).
 *
 * Chargée uniquement quand le plugin est actif.
 */

/* ==========================================================================
   1. Liste des voyants ([liste_voyants] / [liste_experts])
   ========================================================================== */

.voyant-list,
.liste-voyants,
.experts-list,
ul.voyants-grid {
    list-style: none !important;
    padding: 0 !important;
    margin: var(--mystica-space-xl) 0 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: var(--mystica-space-xl) !important;
}

.voyant-card,
.expert-card,
.liste-voyants > li,
.voyant-list > li {
    background: linear-gradient(180deg, var(--mystica-surface) 0%, var(--mystica-bg-alt) 100%) !important;
    border: 1px solid var(--mystica-border) !important;
    border-radius: var(--mystica-radius-lg) !important;
    padding: var(--mystica-space-xl) !important;
    transition: all var(--mystica-transition) !important;
    color: var(--mystica-text) !important;
    position: relative !important;
    overflow: hidden !important;
}

.voyant-card::before,
.expert-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 3px;
    background: linear-gradient(90deg, transparent, var(--mystica-accent), transparent);
    opacity: 0;
    transition: opacity var(--mystica-transition);
}

.voyant-card:hover,
.expert-card:hover {
    transform: translateY(-8px) !important;
    border-color: var(--mystica-accent) !important;
    box-shadow: var(--mystica-shadow-lg) !important;
}

.voyant-card:hover::before,
.expert-card:hover::before { opacity: 1; }

/* Photo / avatar dans la carte voyant */
.voyant-card img,
.expert-card img,
.voyant-photo,
.voyant-thumbnail {
    border-radius: var(--mystica-radius-full) !important;
    border: 2px solid var(--mystica-accent) !important;
    padding: 3px !important;
    background: var(--mystica-bg-alt) !important;
}

/* Titre (nom du voyant) */
.voyant-card h2,
.voyant-card h3,
.voyant-card .voyant-name,
.expert-card h2,
.expert-card h3,
.expert-card .expert-name {
    font-family: var(--mystica-font-display) !important;
    color: var(--mystica-text) !important;
    font-size: 1.4rem !important;
    margin: var(--mystica-space-sm) 0 !important;
}

/* Tarif */
.voyant-tarif,
.voyant-price,
.expert-tarif,
.expert-price,
.tarif-voyant {
    font-family: var(--mystica-font-display) !important;
    font-size: 1.5rem !important;
    color: var(--mystica-accent) !important;
    font-weight: 600 !important;
}

/* Description courte */
.voyant-description,
.expert-description {
    color: var(--mystica-text-muted) !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
}

/* ==========================================================================
   2. Statuts des voyants (.status-available, .status-busy, etc.)
   ========================================================================== */

.status-available,
.status-busy,
.status-on-pause,
.status-unavailable {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--mystica-radius-full);
    font-size: 0.85rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.05);
}

.status-available { color: var(--mystica-success) !important; }
.status-busy { color: var(--mystica-danger) !important; }
.status-on-pause { color: var(--mystica-warning) !important; }
.status-unavailable { color: #6b7280 !important; }

.status-available::before,
.status-busy::before,
.status-on-pause::before,
.status-unavailable::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}

.status-available::before { animation: mystica-pulse-dot 2s ease-in-out infinite; }

/* ==========================================================================
   3. Bouton appel téléphonique (icône phone)
   ========================================================================== */

.bouton-appel,
.btn-call,
.call-voyant-btn,
.phone-voyant {
    background: linear-gradient(135deg, var(--mystica-accent) 0%, var(--mystica-accent-dark) 100%) !important;
    color: var(--mystica-bg) !important;
    border: none !important;
    border-radius: var(--mystica-radius-full) !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
    transition: all var(--mystica-transition) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    box-shadow: var(--mystica-shadow-md) !important;
}

.bouton-appel:hover,
.btn-call:hover,
.call-voyant-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--mystica-shadow-lg), var(--mystica-shadow-glow) !important;
}

.bouton-appel:disabled,
.btn-call:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* ==========================================================================
   4. Forfaits ([display_forfaits])
   ========================================================================== */

.forfaits-container,
.vm-forfaits-grid,
.display-forfaits {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: var(--mystica-space-lg) !important;
    margin: var(--mystica-space-2xl) 0 !important;
}

.forfait-card,
.vm-forfait-card,
.pack-card {
    background: linear-gradient(180deg, var(--mystica-surface) 0%, var(--mystica-bg-alt) 100%) !important;
    border: 1px solid var(--mystica-border) !important;
    border-radius: var(--mystica-radius-lg) !important;
    padding: var(--mystica-space-xl) !important;
    text-align: center !important;
    transition: all var(--mystica-transition) !important;
    color: var(--mystica-text) !important;
    position: relative !important;
}

.forfait-card.featured,
.forfait-card.popular,
.vm-forfait-card.featured,
.pack-card.featured {
    border-color: var(--mystica-accent) !important;
    box-shadow: var(--mystica-shadow-glow) !important;
    transform: scale(1.02) !important;
}

.forfait-card:hover,
.vm-forfait-card:hover,
.pack-card:hover {
    border-color: var(--mystica-accent) !important;
    transform: translateY(-4px) !important;
}

.forfait-card .price,
.forfait-card .montant,
.vm-forfait-card .price,
.pack-price {
    font-family: var(--mystica-font-display) !important;
    font-size: 3rem !important;
    color: var(--mystica-accent) !important;
    font-weight: 700 !important;
    margin: var(--mystica-space-md) 0 !important;
}

.forfait-card .minutes,
.vm-forfait-card .minutes,
.pack-minutes {
    color: var(--mystica-text-muted) !important;
    font-size: 0.95rem !important;
}

.forfait-card button,
.forfait-card .acheter,
.vm-forfait-card button {
    background: linear-gradient(135deg, var(--mystica-accent) 0%, var(--mystica-accent-dark) 100%) !important;
    color: var(--mystica-bg) !important;
    border: none !important;
    border-radius: var(--mystica-radius-full) !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    width: 100% !important;
    margin-top: var(--mystica-space-md) !important;
    transition: all var(--mystica-transition) !important;
}

.forfait-card button:hover,
.vm-forfait-card button:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--mystica-shadow-md), var(--mystica-shadow-glow) !important;
}

/* ==========================================================================
   5. Avis clients ([approved_reviews_slider], [recent_reviews])
   ========================================================================== */

.review-card,
.reviews-slider .slide,
.recent-review,
.approved-reviews-item {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--mystica-border) !important;
    border-radius: var(--mystica-radius-md) !important;
    padding: var(--mystica-space-xl) !important;
    color: var(--mystica-text) !important;
    position: relative !important;
}

.review-card .review-content,
.reviews-slider .review-text,
.review-text {
    font-style: italic !important;
    color: var(--mystica-text) !important;
}

.review-card .review-author,
.review-author,
.reviewer-name {
    font-weight: 600 !important;
    color: var(--mystica-accent) !important;
}

.review-rating,
.stars,
.review-stars {
    color: var(--mystica-accent) !important;
}

/* ==========================================================================
   6. Dashboard consultant / voyant ([voyant_dashboard], [consultant_dashboard])
   ========================================================================== */

.voyant-dashboard,
.consultant-dashboard,
.vm-dashboard {
    background: var(--mystica-bg-alt) !important;
    color: var(--mystica-text) !important;
    padding: var(--mystica-space-xl) !important;
    border-radius: var(--mystica-radius-lg) !important;
    border: 1px solid var(--mystica-border) !important;
}

.voyant-dashboard h1,
.voyant-dashboard h2,
.voyant-dashboard h3,
.consultant-dashboard h1,
.consultant-dashboard h2,
.consultant-dashboard h3 {
    font-family: var(--mystica-font-display) !important;
    color: var(--mystica-accent) !important;
}

/* Onglets / menu de navigation interne du dashboard */
.dashboard-tabs,
.voyant-dashboard-nav,
.consultant-dashboard-nav {
    display: flex !important;
    gap: var(--mystica-space-sm) !important;
    flex-wrap: wrap !important;
    margin-bottom: var(--mystica-space-xl) !important;
    padding-bottom: var(--mystica-space-md) !important;
    border-bottom: 1px solid var(--mystica-border) !important;
}

.dashboard-tabs a,
.voyant-dashboard-nav a,
.consultant-dashboard-nav a {
    padding: 0.5rem 1rem !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: var(--mystica-radius-sm) !important;
    color: var(--mystica-text) !important;
    border: 1px solid var(--mystica-border) !important;
    transition: all var(--mystica-transition) !important;
}

.dashboard-tabs a.active,
.dashboard-tabs a:hover,
.voyant-dashboard-nav a.active,
.consultant-dashboard-nav a.active {
    background: var(--mystica-accent) !important;
    color: var(--mystica-bg) !important;
    border-color: var(--mystica-accent) !important;
}

/* Cartes de stats du dashboard */
.dashboard-stat,
.stat-card,
.dashboard-card {
    background: linear-gradient(180deg, var(--mystica-surface) 0%, var(--mystica-bg-alt) 100%) !important;
    border: 1px solid var(--mystica-border) !important;
    border-radius: var(--mystica-radius-md) !important;
    padding: var(--mystica-space-lg) !important;
    color: var(--mystica-text) !important;
}

.dashboard-stat .number,
.stat-value,
.stat-card .value {
    font-family: var(--mystica-font-display) !important;
    font-size: 2.5rem !important;
    color: var(--mystica-accent) !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   7. Formulaires de connexion / inscription voyant et consultant
   ========================================================================== */

.voyant-login,
.consultant-login,
.voyant-registration,
.consultant-registration,
.vm-auth-form {
    max-width: 500px !important;
    margin: var(--mystica-space-2xl) auto !important;
    background: linear-gradient(180deg, var(--mystica-surface) 0%, var(--mystica-bg-alt) 100%) !important;
    border: 1px solid var(--mystica-border) !important;
    border-radius: var(--mystica-radius-lg) !important;
    padding: var(--mystica-space-2xl) !important;
}

.voyant-login input,
.voyant-login select,
.voyant-login textarea,
.consultant-login input,
.consultant-registration input,
.voyant-registration input,
.vm-auth-form input,
.vm-auth-form select,
.vm-auth-form textarea {
    width: 100% !important;
    padding: 0.875rem 1rem !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--mystica-border) !important;
    border-radius: var(--mystica-radius-sm) !important;
    color: var(--mystica-text) !important;
    font-family: var(--mystica-font-body) !important;
    margin-bottom: var(--mystica-space-md) !important;
    transition: all var(--mystica-transition) !important;
}

.voyant-login input:focus,
.consultant-login input:focus,
.consultant-registration input:focus,
.vm-auth-form input:focus {
    outline: none !important;
    border-color: var(--mystica-accent) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15) !important;
}

.voyant-login button[type="submit"],
.consultant-login button[type="submit"],
.voyant-registration button[type="submit"],
.consultant-registration button[type="submit"],
.vm-auth-form button[type="submit"],
.vm-auth-form input[type="submit"] {
    background: linear-gradient(135deg, var(--mystica-accent) 0%, var(--mystica-accent-dark) 100%) !important;
    color: var(--mystica-bg) !important;
    border: none !important;
    border-radius: var(--mystica-radius-full) !important;
    padding: 0.875rem 2rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    cursor: pointer !important;
    width: 100% !important;
    transition: all var(--mystica-transition) !important;
}

.voyant-login button[type="submit"]:hover,
.consultant-login button[type="submit"]:hover,
.vm-auth-form button[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--mystica-shadow-md), var(--mystica-shadow-glow) !important;
}

/* ==========================================================================
   8. Page single voyant (templates/single-voyant.php du plugin)
   ========================================================================== */

/* Le template du plugin a sa propre structure ; on harmonise les couleurs */
.single-voyant {
    background: var(--mystica-bg) !important;
    color: var(--mystica-text) !important;
}

.voyant-banner,
.voyant-header-banner {
    border-radius: var(--mystica-radius-lg) !important;
    overflow: hidden !important;
    margin-bottom: var(--mystica-space-xl) !important;
}

.voyant-info-block,
.voyant-bio,
.voyant-presentation {
    background: linear-gradient(180deg, var(--mystica-surface) 0%, var(--mystica-bg-alt) 100%) !important;
    padding: var(--mystica-space-xl) !important;
    border-radius: var(--mystica-radius-lg) !important;
    border: 1px solid var(--mystica-border) !important;
    color: var(--mystica-text) !important;
    margin-bottom: var(--mystica-space-lg) !important;
}

.voyant-rating,
.voyant-stars {
    color: var(--mystica-accent) !important;
    font-size: 1.25rem !important;
}

/* ==========================================================================
   9. Diaporama ([diaporama], [display_forfaits_diaporama])
   ========================================================================== */

.diaporama,
.diaporama-slider,
.swiper.diaporama,
.vm-diaporama {
    border-radius: var(--mystica-radius-lg) !important;
    overflow: hidden !important;
    box-shadow: var(--mystica-shadow-lg) !important;
}

.diaporama .slide,
.diaporama-slide {
    background: linear-gradient(135deg, var(--mystica-primary-dark), var(--mystica-bg)) !important;
}

/* ==========================================================================
   10. Boutons animés ([fade_button], [animated_button])
   ========================================================================== */

.fade-button,
.animated-button,
.custom-animated-button {
    background: linear-gradient(135deg, var(--mystica-accent) 0%, var(--mystica-accent-dark) 100%) !important;
    color: var(--mystica-bg) !important;
    border-radius: var(--mystica-radius-full) !important;
    border: none !important;
    box-shadow: var(--mystica-shadow-md) !important;
}

.fade-button:hover,
.animated-button:hover {
    box-shadow: var(--mystica-shadow-lg), var(--mystica-shadow-glow) !important;
}

/* ==========================================================================
   11. Page de remerciement Stripe ([vm_thank_you])
   ========================================================================== */

.vm-thank-you,
.stripe-thank-you {
    text-align: center !important;
    padding: var(--mystica-space-3xl) var(--mystica-space-xl) !important;
    background: linear-gradient(180deg, var(--mystica-surface) 0%, var(--mystica-bg-alt) 100%) !important;
    border: 1px solid var(--mystica-accent) !important;
    border-radius: var(--mystica-radius-lg) !important;
    box-shadow: var(--mystica-shadow-glow) !important;
    color: var(--mystica-text) !important;
    margin: var(--mystica-space-2xl) auto !important;
    max-width: 700px !important;
}

.vm-thank-you h1,
.vm-thank-you h2,
.stripe-thank-you h1,
.stripe-thank-you h2 {
    font-family: var(--mystica-font-display) !important;
    color: var(--mystica-accent) !important;
}

/* ==========================================================================
   12. Modale Stripe (formulaire d'achat de forfait)
   ========================================================================== */

.vm-modal,
.stripe-modal,
.modal-forfait {
    background: rgba(10, 4, 21, 0.9) !important;
    backdrop-filter: blur(8px) !important;
}

.vm-modal-content,
.stripe-modal-content,
.modal-forfait-content {
    background: linear-gradient(180deg, var(--mystica-surface) 0%, var(--mystica-bg-alt) 100%) !important;
    border: 1px solid var(--mystica-border) !important;
    border-radius: var(--mystica-radius-lg) !important;
    color: var(--mystica-text) !important;
    box-shadow: var(--mystica-shadow-lg) !important;
}

/* Inputs Stripe Elements */
.StripeElement {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--mystica-border) !important;
    border-radius: var(--mystica-radius-sm) !important;
    padding: 0.875rem 1rem !important;
}

.StripeElement--focus {
    border-color: var(--mystica-accent) !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15) !important;
}

/* ==========================================================================
   13. Tableaux (historique consultations, factures, etc.)
   ========================================================================== */

.vm-table,
.consultation-history table,
.invoices-table,
.minutes-history table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: var(--mystica-surface) !important;
    border-radius: var(--mystica-radius-md) !important;
    overflow: hidden !important;
}

.vm-table th,
.consultation-history th,
.invoices-table th,
.minutes-history th {
    background: var(--mystica-bg-alt) !important;
    color: var(--mystica-accent) !important;
    text-transform: uppercase !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.05em !important;
    padding: var(--mystica-space-md) !important;
    text-align: left !important;
    border-bottom: 1px solid var(--mystica-border) !important;
}

.vm-table td,
.consultation-history td,
.invoices-table td,
.minutes-history td {
    color: var(--mystica-text) !important;
    padding: var(--mystica-space-md) !important;
    border-bottom: 1px solid var(--mystica-border) !important;
}

.vm-table tr:hover td,
.consultation-history tr:hover td {
    background: rgba(212, 175, 55, 0.05) !important;
}

/* ==========================================================================
   14. Notifications & alertes
   ========================================================================== */

.vm-notification,
.notification-voyant,
.alert-voyance {
    padding: var(--mystica-space-md) var(--mystica-space-lg) !important;
    border-radius: var(--mystica-radius-md) !important;
    border-left: 4px solid var(--mystica-accent) !important;
    background: rgba(212, 175, 55, 0.1) !important;
    color: var(--mystica-text) !important;
    margin: var(--mystica-space-md) 0 !important;
}

.vm-notification.success,
.notification-success {
    border-left-color: var(--mystica-success) !important;
    background: rgba(74, 222, 128, 0.1) !important;
}

.vm-notification.error,
.notification-error {
    border-left-color: var(--mystica-danger) !important;
    background: rgba(239, 68, 68, 0.1) !important;
}

/* ==========================================================================
   15. Chat en temps réel (chat-pay-per-minute)
   ========================================================================== */

.vm-chat-container,
.chat-pay-per-minute,
.voyant-chat,
.consultant-chat {
    background: var(--mystica-bg-alt) !important;
    border: 1px solid var(--mystica-border) !important;
    border-radius: var(--mystica-radius-lg) !important;
    color: var(--mystica-text) !important;
}

.chat-message,
.message-bubble {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: var(--mystica-radius-md) !important;
    padding: var(--mystica-space-sm) var(--mystica-space-md) !important;
    margin-bottom: var(--mystica-space-sm) !important;
    color: var(--mystica-text) !important;
}

.chat-message.from-voyant,
.message-bubble.voyant {
    background: rgba(212, 175, 55, 0.15) !important;
    border-left: 3px solid var(--mystica-accent) !important;
}

.chat-message.from-consultant,
.message-bubble.consultant {
    background: rgba(107, 45, 138, 0.2) !important;
    border-right: 3px solid var(--mystica-primary-light) !important;
}

.chat-input,
.chat-message-input {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--mystica-border) !important;
    border-radius: var(--mystica-radius-sm) !important;
    color: var(--mystica-text) !important;
    padding: var(--mystica-space-sm) var(--mystica-space-md) !important;
}

/* Timer de consultation en cours (chat ou téléphone) */
.consultation-timer,
.timer-display,
.chat-timer {
    font-family: var(--mystica-font-display) !important;
    font-size: 2.5rem !important;
    color: var(--mystica-accent) !important;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.5) !important;
    text-align: center !important;
}

/* ==========================================================================
   16. Responsive : ajustements mobile
   ========================================================================== */

@media (max-width: 768px) {
    .voyant-list,
    .liste-voyants,
    .experts-list,
    .forfaits-container,
    .display-forfaits {
        grid-template-columns: 1fr !important;
    }

    .voyant-dashboard,
    .consultant-dashboard {
        padding: var(--mystica-space-md) !important;
    }

    .dashboard-tabs,
    .voyant-dashboard-nav {
        flex-direction: column !important;
    }

    .vm-table,
    .consultation-history table {
        font-size: 0.85rem !important;
    }

    .forfait-card.featured,
    .vm-forfait-card.featured {
        transform: scale(1) !important;
    }
}