/**
 * Styles Elementor pour Glossaryze
 * 
 * @package Glossaryze
 * @since 1.0.0
 */

/* =============================================================================
   STYLES GÉNÉRAUX POUR LES WIDGETS ELEMENTOR
   ========================================================================== */

.glossaryze-elementor-widget,
.glossaryze-elementor-search-widget,
.glossaryze-elementor-term-widget {
    position: relative;
}

/* Réinitialisation des marges Elementor */
.elementor-widget-glossaryze-glossary .glossaryze-container,
.elementor-widget-glossaryze-search .glossaryze-container,
.elementor-widget-glossaryze-term .glossaryze-container {
    margin: 0;
}

/* =============================================================================
   WIDGET PRINCIPAL GLOSSAIRE
   ========================================================================== */

.elementor-widget-glossaryze-glossary {
    /* Les styles du shortcode s'appliquent déjà */
}

/* Override des styles de base pour Elementor */
.elementor-widget-glossaryze-glossary .glossaryze-term-item:hover,
.elementor-widget-glossaryze-glossary .glossaryze-grid-item:hover,
.elementor-widget-glossaryze-glossary .glossaryze-card:hover {
    transform: translateY(-2px);
}

/* =============================================================================
   WIDGET RECHERCHE
   ========================================================================== */

.elementor-widget-glossaryze-search .glossaryze-search {
    display: flex;
    align-items: center;
}

.elementor-widget-glossaryze-search .glossaryze-search-input {
    flex: 1;
    min-width: 0;
}

.elementor-widget-glossaryze-search .glossaryze-search-button {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Direction verticale */
.elementor-widget-glossaryze-search .glossaryze-search[style*="flex-direction: column"] {
    align-items: stretch;
}

.elementor-widget-glossaryze-search .glossaryze-search[style*="flex-direction: column"] .glossaryze-search-input,
.elementor-widget-glossaryze-search .glossaryze-search[style*="flex-direction: column"] .glossaryze-search-button {
    width: 100%;
}

/* =============================================================================
   WIDGET TERME UNIQUE
   ========================================================================== */

.elementor-widget-glossaryze-term .glossaryze-single-term {
    margin: 0;
}

.elementor-widget-glossaryze-term .glossaryze-term-title {
    margin-top: 0;
}

/* =============================================================================
   MODES RESPONSIVE POUR ELEMENTOR
   ========================================================================== */

/* Tablette */
@media (max-width: 1024px) {
    .elementor-widget-glossaryze-glossary .glossaryze-grid,
    .elementor-widget-glossaryze-glossary .glossaryze-cards {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
    
    .elementor-widget-glossaryze-search .glossaryze-search {
        flex-direction: column;
        gap: 10px;
    }
    
    .elementor-widget-glossaryze-search .glossaryze-search-input,
    .elementor-widget-glossaryze-search .glossaryze-search-button {
        width: 100%;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .elementor-widget-glossaryze-glossary .glossaryze-alphabet-list {
        gap: 0.25rem;
    }
    
    .elementor-widget-glossaryze-glossary .glossaryze-alphabet-link {
        width: 2rem;
        height: 2rem;
        line-height: 2rem;
        font-size: 0.875rem;
    }
    
    .elementor-widget-glossaryze-glossary .glossaryze-grid,
    .elementor-widget-glossaryze-glossary .glossaryze-cards {
        grid-template-columns: 1fr;
    }
    
    .elementor-widget-glossaryze-term .glossaryze-single-term {
        padding: 1rem;
    }
}

/* =============================================================================
   INTÉGRATION AVEC LES THÈMES ELEMENTOR
   ========================================================================== */

/* Hello Elementor */
.elementor-kit-6 .glossaryze-container {
    font-family: inherit;
}

/* Astra */
.ast-theme .glossaryze-container {
    font-family: inherit;
}

/* GeneratePress */
.generate-theme .glossaryze-container {
    font-family: inherit;
}

/* OceanWP */
.oceanwp-theme .glossaryze-container {
    font-family: inherit;
}

/* =============================================================================
   ANIMATIONS ELEMENTOR
   ========================================================================== */

/* Animation d'entrée */
.elementor-invisible .glossaryze-container {
    opacity: 0;
}

.elementor-animation-fadeIn .glossaryze-container,
.elementor-animation-fadeInUp .glossaryze-container,
.elementor-animation-fadeInDown .glossaryze-container,
.elementor-animation-fadeInLeft .glossaryze-container,
.elementor-animation-fadeInRight .glossaryze-container {
    animation-duration: inherit;
    animation-fill-mode: both;
}

/* =============================================================================
   COMPATIBILITÉ AVEC LES CONTRÔLES ELEMENTOR
   ========================================================================== */

/* Spacing personnalisé */
.elementor-widget-glossaryze-glossary[data-settings*="container_padding"] .glossaryze-container,
.elementor-widget-glossaryze-search[data-settings*="container_padding"] .glossaryze-container,
.elementor-widget-glossaryze-term[data-settings*="container_padding"] .glossaryze-container {
    padding: var(--elementor-container-padding, inherit);
}

/* Marges personnalisées */
.elementor-widget-glossaryze-glossary[data-settings*="container_margin"] .glossaryze-container,
.elementor-widget-glossaryze-search[data-settings*="container_margin"] .glossaryze-container,
.elementor-widget-glossaryze-term[data-settings*="container_margin"] .glossaryze-container {
    margin: var(--elementor-container-margin, inherit);
}

/* =============================================================================
   ÉTATS DE CHARGEMENT
   ========================================================================== */

.glossaryze-elementor-loading {
    position: relative;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.glossaryze-elementor-loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid var(--glossaryze-primary, #2563eb);
    border-radius: 50%;
    animation: glossaryze-elementor-spin 1s linear infinite;
}

@keyframes glossaryze-elementor-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* =============================================================================
   MODE SOMBRE ELEMENTOR
   ========================================================================== */

.elementor-editor-dark .glossaryze-placeholder {
    background: #2a2a2a;
    border-color: #404040;
    color: #ffffff;
}

.elementor-editor-dark .glossaryze-container {
    --glossaryze-background: #2a2a2a;
    --glossaryze-surface: #404040;
    --glossaryze-border: #525252;
    --glossaryze-text: #ffffff;
    --glossaryze-text-light: #a1a1aa;
}

/* =============================================================================
   PREVIEW ELEMENTOR
   ========================================================================== */

.elementor-editor-active .glossaryze-placeholder {
    border: 2px dashed #71d7f7;
    background: rgba(113, 215, 247, 0.1);
    padding: 2rem;
    text-align: center;
    border-radius: 8px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.elementor-editor-active .glossaryze-placeholder p {
    margin: 0.5rem 0;
    color: #495057;
    font-size: 14px;
}

.elementor-editor-active .glossaryze-placeholder strong {
    color: #23282d;
    font-size: 16px;
}

.elementor-editor-active .glossaryze-placeholder em {
    color: #71d7f7;
    font-style: italic;
    font-size: 12px;
}

.elementor-editor-active .glossaryze-placeholder code {
    background: rgba(0, 0, 0, 0.1);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 11px;
    margin-top: 0.5rem;
    display: inline-block;
}

/* =============================================================================
   FIXES SPÉCIFIQUES NAVIGATEURS
   ========================================================================== */

/* Safari */
@supports (-webkit-appearance: none) {
    .elementor-widget-glossaryze-search .glossaryze-search-input {
        -webkit-appearance: none;
    }
}

/* Firefox */
@-moz-document url-prefix() {
    .elementor-widget-glossaryze-glossary .glossaryze-alphabet-link {
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Edge */
@supports (-ms-ime-align: auto) {
    .elementor-widget-glossaryze-search .glossaryze-search {
        -ms-flex-align: center;
    }
}