/**
 * Name: ArtMeNow - Button Styles
 * Description: Global and component-specific styles for all buttons on the site. Powered by CSS variables.
 * Version: 0.1
 * Author: Gianmarco
 * Date: 2025-12-24
 */

/* ==========================================================================
   BUTTON SYSTEM V2.0 - FINAL
   ========================================================================== */

/* 1. CLASSE DE BASE : Le style pour TOUT ce qui ressemble à un bouton
   -------------------------------------------------------------------------- */
.amn-button,
.button,
button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    border: 1px solid transparent; /* Bordure transparente pour éviter les sauts de taille */
    cursor: pointer;
    padding: 12px 24px;
    font-family: var(--title-font-family);
    font-weight: 500;
    box-shadow: var(--shadow-buttons);
    transition: all 0.2s ease;
}

.amn-button:hover,
.button:hover,
button:hover {
    box-shadow: var(--shadow-buttons-hover);
}

.amn-button:active,
.button:active,
button:active {
    box-shadow: var(--shadow-buttons-active);
    transform: translate(1px, 1px);
    transition-duration: 0.1s;
}

/* 2. TYPES DE BOUTONS : Primaire et Secondaire
   -------------------------------------------------------------------------- */

/* Style Primaire (style par défaut) */
.amn-button,
.button,
button {
    background-color: var(--primary-button-color);
    color: var(--btn-primary-text-color);
}
.amn-button:hover,
.button:hover,
button:hover {
    background-color: var(--primary-button-color-hover);
}

/* Style Secondaire (appliquer avec la classe .btn-secondary) */
.btn-secondary {
    background-color: var(--secondary-button-color);
    color: var(--btn-secondary-text-color);
    border-color: var(--mid-gray-2);
}
.btn-secondary:hover {
    background-color: var(--secondary-button-color-hover);
    color: var(--btn-secondary-text-color-hover);
    border-color: transparent;
}


/* 3. UTILITAIRE SPÉCIALISÉ : Bouton de Slider
   -------------------------------------------------------------------------- */
.btn-slider {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    
    background-color: var(--btn-slider-bg);
    color: var(--btn-slider-color);
    
    /* Reset du style des boutons standards */
    padding: 0;
    border: none;
    border-radius: 50%;
    width: 55px; /* Taille par défaut desktop */
    height: 55px;
    font-size: 35px;
}

.btn-slider:hover {
    background-color: var(--btn-slider-bg-hover);
    box-shadow: var(--shadow-buttons-hover);
}

/* Correction pour l'état :active sur les boutons de slider */
.btn-slider:active {
    /* On combine le centrage ET l'effet d'enfoncement */
    transform: translateY(-50%) translate(1px, 1px);
    box-shadow: var(--shadow-buttons-active); /* Et on applique aussi l'ombre active */
}

.btn-slider:disabled,
.btn-slider[disabled] {
    opacity: 0.3;
    cursor: not-allowed;
    background-color: var(--btn-slider-bg) !important;
}


/* 4. MODIFICATEURS BEM DE POSITIONNEMENT
   -------------------------------------------------------------------------- */

/* --- 4.1 - Slider de Cartes (Produits / Artistes) --- */
.amn-cards-slider__button--prev { left: 10px; }
.amn-cards-slider__button--next { right: 10px; }

@media (min-width: 1024px) {
    .amn-cards-slider__button--prev { left: -25px; }
    .amn-cards-slider__button--next { right: -25px; }
}

/* --- 4.2 - Hero Slider (Haut de page) --- */
.amn-hero-slider__button--prev { left: 2%; }
.amn-hero-slider__button--next { right: 2%; }


/* 5. RESPONSIVE : Taille de l'utilitaire .btn-slider
   -------------------------------------------------------------------------- */
@media (max-width: 649px) {
    .btn-slider { width: 40px; height: 40px; font-size: 20px; }
}
@media (min-width: 650px) and (max-width: 921px) {
    .btn-slider { width: 50px; height: 50px; font-size: 30px; }
}