/**
 * ALJT Load More Elementor - Styles
 *
 * ============================================================
 * GUIDE DE PERSONNALISATION
 * ============================================================
 *
 * Ce fichier contient tous les styles pour le widget Load More.
 * Vous pouvez personnaliser facilement l'apparence du bouton.
 *
 * CLASSES CSS PRINCIPALES :
 *
 * .aljt-load-more-wrapper       - Container principal
 * .aljt-load-more-btn            - Le bouton lui-même
 * .aljt-load-more-btn.icon-left  - Bouton avec icône à gauche
 * .aljt-load-more-btn.icon-right - Bouton avec icône à droite
 * .aljt-load-more-btn.loading    - Bouton en état de chargement
 * .aljt-load-more-btn.aljt-content-visible - Bouton quand le contenu est visible
 *
 * PERSONNALISATIONS FRÉQUENTES :
 *
 * 1. Changer les couleurs du bouton :
 *    Modifiez les lignes 18-19 pour la couleur de fond et texte
 *
 * 2. Modifier la taille et le padding :
 *    Modifiez la ligne 16 pour le padding du bouton
 *
 * 3. Animation au hover :
 *    Modifiez les lignes 29-32 pour l'effet au survol
 *
 * 4. Style quand contenu visible :
 *    Modifiez les lignes 103-109 pour l'apparence en mode toggle
 *
 * ============================================================
 */

/* Wrapper */
.aljt-load-more-wrapper {
    margin: 20px 0;
}

/* Bouton */
.aljt-load-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    background-color: #2271b1;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 4px;
}

.aljt-load-more-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.aljt-load-more-btn:active {
    transform: translateY(0);
}

.aljt-load-more-btn:focus {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

/* Icône */
.aljt-load-more-btn i,
.aljt-load-more-btn svg {
    display: inline-block;
    transition: transform 0.3s ease;
}

.aljt-load-more-btn.icon-left {
    flex-direction: row;
}

.aljt-load-more-btn.icon-right {
    flex-direction: row-reverse;
}

/* ============================================================
   PERSONNALISATION DU BOUTON EN MODE TOGGLE
   ============================================================
   La classe 'aljt-content-visible' est ajoutée au bouton
   lorsque le contenu est visible (ouvert)

   Exemples de personnalisations possibles :

   1. Changer la couleur de fond quand ouvert :
      .aljt-load-more-btn.aljt-content-visible {
          background-color: #10b981;
      }

   2. Rotation de l'icône :
      .aljt-load-more-btn.aljt-content-visible i,
      .aljt-load-more-btn.aljt-content-visible svg {
          transform: rotate(180deg);
      }

   3. Changer le style de bordure :
      .aljt-load-more-btn.aljt-content-visible {
          border: 2px solid #10b981;
          box-shadow: 0 0 15px rgba(16, 185, 129, 0.3);
      }

   4. Animation pulsante :
      .aljt-load-more-btn.aljt-content-visible {
          animation: pulse 2s infinite;
      }

      @keyframes pulse {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.7; }
      }
   ============================================================ */

/* Animation de l'icône lors du toggle */
.aljt-load-more-btn.active i,
.aljt-load-more-btn.active svg,
.aljt-load-more-btn.aljt-content-visible i,
.aljt-load-more-btn.aljt-content-visible svg {
    transform: rotate(180deg);
}

/* Style du bouton quand le contenu est visible (personnalisation par défaut) */
.aljt-load-more-btn.aljt-content-visible {
    /* Vous pouvez modifier ces valeurs pour personnaliser l'apparence */
    background-color: #10b981; /* Couleur verte pour indiquer l'état "ouvert" */
    /* Décommentez pour plus de personnalisation : */
    /* border: 2px solid #059669; */
    /* box-shadow: 0 0 10px rgba(16, 185, 129, 0.5); */
}

/* État de chargement */
.aljt-load-more-btn.loading {
    pointer-events: none;
    opacity: 0.6;
}

.aljt-load-more-btn.loading i,
.aljt-load-more-btn.loading svg {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Contenu masqué */
[data-aljt-content-hidden] {
    display: none;
    opacity: 0;
}

/* Animation slide */
[data-aljt-content-hidden].aljt-animating.slide {
    display: block;
}

/* Animation fade */
[data-aljt-content-hidden].aljt-animating.fade {
    display: block;
}

/* Contenu visible */
[data-aljt-content-hidden].aljt-visible {
    display: block;
    opacity: 1;
}

/* Responsive */
@media screen and (max-width: 768px) {
    .aljt-load-more-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Accessibilité */
.aljt-load-more-btn:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

/* Container de contenu chargé */
.aljt-load-more-content {
    margin-top: 20px;
}

.aljt-loaded-item {
    margin-bottom: 20px;
}

/* Messages d'erreur */
.aljt-load-more-error {
    padding: 12px 20px;
    margin: 15px 0;
    background-color: #fee;
    border: 1px solid #fcc;
    border-radius: 4px;
    color: #c00;
    font-size: 14px;
}

/* Bouton disabled */
.aljt-load-more-btn.disabled,
.aljt-load-more-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Mode sombre (optionnel) */
@media (prefers-color-scheme: dark) {
    .aljt-load-more-btn {
        background-color: #3b82f6;
    }

    .aljt-load-more-btn:focus,
    .aljt-load-more-btn:focus-visible {
        outline-color: #3b82f6;
    }

    .aljt-load-more-error {
        background-color: #4a1515;
        border-color: #7a2020;
        color: #ff6b6b;
    }
}