/* ---------------------------------- */
/* Style du Panneau de Checkout       */
/* ---------------------------------- */

/* Le conteneur principal, initialement invisible (avec un sélecteur plus fort) */
#sommelier-slide-out-container {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s, opacity 0.3s ease;
    pointer-events: none; /* Empêche toute interaction quand il est caché */
}

/* L'arrière-plan assombri (overlay) */
.sommelier-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1000;
}

/* Le panneau qui coulisse */
.sommelier-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    max-width: 450px; /* Largeur maximale sur grand écran */
    background-color: #FFFCF5; /* << VOTRE COULEUR PERSONNALISÉE ICI */
    z-index: 1001;
    box-shadow: -5px 0 15px rgba(0,0,0,0.15);
    transform: translateX(100%); /* Position initiale, en dehors de l'écran */
    transition: transform 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
}

/* Classe ajoutée par JavaScript pour rendre le panneau visible */
#sommelier-slide-out-container.is-visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto; /* Autorise l'interaction quand il est visible */
}

#sommelier-slide-out-container.is-visible .sommelier-panel {
    transform: translateX(0); /* Le panneau coulisse à sa position finale */
}

/* En-tête du panneau */
.sommelier-panel-header {
    padding: 15px 20px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sommelier-panel-header h3 {
    margin: 0;
    font-size: 20px;
}

#sommelier-close-button {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 5px;
    line-height: 1;
}

/* Contenu du panneau (où le formulaire Stripe sera injecté) */
#sommelier-slide-out-content {
    padding: 20px;
    flex-grow: 1;
    overflow-y: auto;
}

/* ---------------------------------------------------- */
/* STYLES POUR LE BOUTON ET LA QUANTITÉ SUR LA PAGE      */
/* ---------------------------------------------------- */

/* Conteneur pour les contrôles d'achat */
.sommelier-controls {
    display: flex;
    flex-direction: column; /* Aligne les éléments verticalement */
    align-items: flex-start; /* Aligne à gauche */
    gap: 2px; /* Espace minimal entre le label et le champ de quantité */
}

.sommelier-controls label {
    color: #1E3F78;
    font-family: "Nunito Sans", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

/* Style pour le champ de quantité (avec !important) */
.sommelier-controls .sommelier-quantity-input {
    display: flex !important;
    width: 64px !important;
    padding: 12px !important;
    justify-content: center !important;
    align-items: center !important;
    border: 4px solid #1E3F78 !important;
    text-align: center !important;
    font-size: 16px !important;
    -moz-appearance: textfield !important;
}
/* Cache les flèches sur Chrome, Safari, Edge */
.sommelier-controls .sommelier-quantity-input::-webkit-outer-spin-button,
.sommelier-controls .sommelier-quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Style pour le bouton d'achat (avec !important) */
.sommelier-controls .sommelier-buy-button {
    display: flex !important;
    width: 210px !important;
    padding: 12px 24px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    background-color: #1E3F78 !important;
    color: white !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 16px !important;
    transition: background-color 0.2s;
    margin-top: 32px !important; /* Espace au-dessus du bouton */
}

.sommelier-controls .sommelier-buy-button:hover {
    background-color: #2a58a8 !important;
}

.sommelier-controls .sommelier-buy-button:disabled {
    background-color: #cccccc !important;
    cursor: not-allowed !important;
}

/* Styles pour les appareils de 467px de large ou moins */
@media (max-width: 467px) {
    .sommelier-controls .sommelier-buy-button {
        width: 100% !important;
    }
}