/*
Theme Name: Astra Child
Template: astra
*/

:root {
    --primary: #6366f1;
    --primary-hover: #4f46e5;
    --primary-focus: rgba(99, 102, 241, 0.1);
    --surface-1: #1e1b4b;
    --surface-2: #312e81;
    --text-1: #f8fafc;
    --text-2: #cbd5e1;
    --text-3: #94a3b8;
    --error: #ef4444;
    --success: #22c55e;
    --border-color: rgba(255, 255, 255, 0.1);
    --font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --radius-sm: 0.5rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;

    --primary-light: #FFD466;
    --primary-button: #FFB700;

    --primary-gradient: linear-gradient(135deg, #FF6B6B, #FFB700);
    --surface-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
}

/* Réinitialise les marges des listes ol et ul */
ol, ul {
    margin: 0 !important;
    padding: 0 !important;
}

.ast-container {
    all: unset !important; /* Supprime toutes les propriétés définies */
}

button, input[type="button"], input[type="submit"] {
    box-sizing: border-box !important; /* Fix pour les boutons */
}

/* Thème sombre (par défaut) */
body {
    background-color: #282828 !important;
    transition: background-color 0.3s ease;
}

/* Thème clair */
body.theme-light {
    background-color: #ffffff !important;
}

.woocommerce.woocommerce-checkout form #order_review,
.woocommerce.woocommerce-checkout form #order_review_heading,
.woocommerce-page.woocommerce-checkout form #order_review,
.woocommerce-page.woocommerce-checkout form #order_review_heading {
    width: auto !important; /* Ou remplacez par une valeur spécifique, comme 100% */
}

label, legend, em {
    color: #ffffff;
}

/* Inputs - Thème sombre (par défaut) */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select {
    width: 100% !important;
    padding: 0.8rem 1rem !important;
    border: 1px solid #292929 !important;
    border-radius: 8px !important;
    background: #282828 !important;
    color: #ffffff !important;
    transition: all 0.3s ease !important;
}

/* Inputs - Thème clair */
.theme-light input[type="text"],
.theme-light input[type="email"],
.theme-light input[type="tel"],
.theme-light input[type="password"],
.theme-light textarea,
.theme-light select {
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    color: #333333 !important;
}

/* Focus state pour les deux thèmes */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    border-color: var(--primary-button) !important;
    box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.2) !important;
    outline: none !important;
}

.woocommerce form .form-row-first, 
.woocommerce form .form-row-last, 
.woocommerce-page form .form-row-first, 
.woocommerce-page form .form-row-last {
    overflow: visible !important; /* Assure que l'overflow est visible */
}

/* Masquer la barre de navigation */
.account-container .account-navigation {
    display: none;
}

/* Supprimer les propriétés grid du account-container */
.account-container {
    display: block !important; /* Remplace le grid par un affichage en bloc */
    grid-template-columns: none !important; /* Retirer les colonnes */
    gap: 0 !important; /* Supprimer l'espace entre les colonnes */
}

/*Retirer le header titre collé a gauhce sur chaque page*/
.entry-header {
    display: none;
}

.ast-plain-container.ast-no-sidebar #primary {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.entry-content[data-ast-blocks-layout] > * {
    max-width: unset !important;
    margin-left: unset !important;
    margin-right: unset !important;
}

.account-content {
    background: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/*recapitulatif de la commande*/
form #order_review:not(.elementor-widget-woocommerce-checkout-page #order_review) {
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
}

/* Override du header transparent */
@media (min-width: 921px) {
    .ast-theme-transparent-header #masthead {
        position: relative !important;
    }
}

.page-title {
    color: #ffffff !important;
}

/* Container des messages WooCommerce */
.woocommerce-notices-wrapper {
    width: 100% !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 0 1em !important;
    box-sizing: border-box !important;
}

/* Style de base pour tous les messages */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-notice,
div.wpcf7-response-output,
.woocommerce-password-strength {
    width: auto !important;
    margin: 0 1em 2em !important;
    padding: 1em 2em !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    font-size: 1em !important;
    line-height: 1.5 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 1em !important;
    position: relative !important;
    color: white !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    flex-wrap: nowrap !important;
}

/* Style des icônes */
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-notice::before {
    position: static !important;
    margin-right: 0 !important;
    color: white !important;
    flex-shrink: 0 !important;
    font-size: 1.1em !important;
    margin-top: 0.1em !important;
}

/* Conteneur du message */
.woocommerce-error li,
.woocommerce-info li,
.woocommerce-message li,
.woocommerce-notice li,
.error-message-content {
    flex: 1 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-right: 25px !important;
}

/* Messages de succès */
.woocommerce-message,
.woocommerce-notice--success,
div.wpcf7-mail-sent-ok,
.woocommerce form .form-row.woocommerce-validated label,
.woocommerce-password-strength.strong {
    background: linear-gradient(135deg, #1dd1a1 0%, #10ac84 100%) !important;
}

/* Messages d'erreur */
.woocommerce-error,
.woocommerce-notice--error,
div.wpcf7-validation-errors,
.woocommerce form .form-row.woocommerce-invalid label,
.woocommerce-password-strength.short,
.woocommerce-password-strength.bad {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff4757 100%) !important;
}

/* Messages d'information */
.woocommerce-info,
.woocommerce-notice--info,
div.wpcf7-spam-blocked,
.woocommerce-password-strength.good {
    background: linear-gradient(135deg, #54a0ff 0%, #2e86de 100%) !important;
}

/* Messages d'avertissement */
.woocommerce-notice--warning,
div.wpcf7-acceptance-missing,
.woocommerce-password-strength.fair {
    background: linear-gradient(135deg, #ffd32a 0%, #ffa502 100%) !important;
}

/* Style des listes dans les messages */
.woocommerce-error li,
.woocommerce-info li,
.woocommerce-message li,
.woocommerce-notice li {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    word-break: break-word !important;
}

/* Style des boutons dans les messages */
.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button,
.woocommerce-notice .button {
    float: right !important;
    padding: 0.5em 1em !important;
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
    margin-left: auto !important;
    text-decoration: none !important;
}

.woocommerce-message .button:hover,
.woocommerce-error .button:hover,
.woocommerce-info .button:hover,
.woocommerce-notice .button:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

/* Style du bouton de fermeture */
.close-notice {
    position: absolute !important;
    right: 1em !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: none !important;
    border: none !important;
    color: white !important;
    cursor: pointer !important;
    padding: 0.5em !important;
    opacity: 0.8 !important;
    transition: opacity 0.3s ease !important;
}

.close-notice:hover {
    opacity: 1 !important;
}

/* Animation d'entrée */
@keyframes slideInDown {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-notice,
div.wpcf7-response-output {
    animation: slideInDown 0.3s ease-out forwards !important;
}

/* Style des indications de mot de passe */
.woocommerce-password-hint {
    display: block !important;
    margin-top: 0.5em !important;
    font-size: 0.9em !important;
}

/* Media queries */
@media screen and (min-width: 1024px) {
    .woocommerce-message,
    .woocommerce-error,
    .woocommerce-info,
    .woocommerce-notice,
    div.wpcf7-response-output {
        max-width: 800px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media screen and (min-width: 721px) and (max-width: 1023px) {
    .woocommerce-message,
    .woocommerce-error,
    .woocommerce-info,
    .woocommerce-notice,
    div.wpcf7-response-output {
        margin-left: 1em !important;
        margin-right: 1em !important;
        max-width: calc(100% - 2em) !important;
    }
}

@media screen and (max-width: 720px) {
    .woocommerce-notices-wrapper {
        padding: 0 0.8em !important;
    }

    .woocommerce-message,
    .woocommerce-error,
    .woocommerce-info,
    .woocommerce-notice,
    div.wpcf7-response-output {
        margin: 0 0.8em 1em !important;
        padding: 1em !important;
    }

    .woocommerce-error li,
    .woocommerce-info li,
    .woocommerce-message li,
    .woocommerce-notice li {
        padding-right: 30px !important;
    }

    .close-notice {
        padding: 0.8em !important;
        right: 0.5em !important;
    }
}

@media screen and (max-width: 480px) {
    .woocommerce-notices-wrapper {
        padding: 0 0.6em !important;
    }

    .woocommerce-message,
    .woocommerce-error,
    .woocommerce-info,
    .woocommerce-notice,
    div.wpcf7-response-output {
        padding: 0.8em 1em !important;
        font-size: 0.85em !important;
        gap: 0.7em !important;
    }

    .woocommerce-message::before,
    .woocommerce-error::before,
    .woocommerce-info::before,
    .woocommerce-notice::before {
        font-size: 1em !important;
        margin-top: 0.15em !important;
    }

    .woocommerce-error li,
    .woocommerce-info li,
    .woocommerce-message li,
    .woocommerce-notice li,
    .error-message-content {
        padding-right: 20px !important;
    }

    .close-notice {
        padding: 0.5em !important;
        font-size: 1.2em !important;
        right: 0.3em !important;
    }
}

/* Styles des boutons d'achat */
.purchase-button {
    width: 100% !important;
    padding: 1rem 2rem !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 1em !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s var(--transition-smooth) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.8em !important;
    background: linear-gradient(45deg, #ff3d00, #ff8f00) !important;
    color: var(--text-light) !important;
    position: relative !important;
    overflow: hidden !important;
    font-family: var(--font-heading) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    box-shadow: 0 4px 15px rgba(255, 61, 0, 0.3) !important;
}

.purchase-button:not([disabled]):hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(255, 61, 0, 0.4), 0 0 30px rgba(255, 143, 0, 0.3) !important;
    background: linear-gradient(45deg, #ff4d00, #ffa000) !important;
}

/* Style pour "Déjà en votre possession" */
.purchase-button.already-owned {
    background: linear-gradient(45deg, #1a0f0f, #3a2020) !important;
    color: #d3d3d3 !important;
    cursor: default !important;
    box-shadow: 0 4px 15px rgba(26, 15, 15, 0.4) !important;
    opacity: 0.95 !important;
}

.purchase-button.already-owned .fa-check-circle {
    color: #ff6b4a !important;
    font-size: 1.2em !important;
    text-shadow: 0 0 10px rgba(255, 107, 74, 0.5) !important;
}

/* Style pour "Dans votre panier" */
.purchase-button.in-cart {
    background: linear-gradient(45deg, #4a1500, #802200) !important;
    color: #ffd7c3 !important;
    cursor: default !important;
    box-shadow: 0 4px 15px rgba(74, 21, 0, 0.4) !important;
}

.purchase-button.in-cart .fa-shopping-cart {
    color: #ff8c6a !important;
    font-size: 1.1em !important;
    text-shadow: 0 0 10px rgba(255, 140, 106, 0.5) !important;
}

/* Style commun pour les icônes */
.purchase-button i {
    font-size: 1.1em !important;
    transition: transform 0.3s ease !important;
}

/* Animation au survol */
.purchase-button:not(.already-owned):not(.in-cart):hover {
    background: linear-gradient(45deg, #ff4d00, #ffa000) !important;
}

/* Style désactivé */
.purchase-button[disabled] {
    cursor: default !important;
    transform: none !important;
}

/* Responsive */
@media screen and (max-width: 768px) {
    .purchase-button {
        padding: 0.8em 1.5em !important;
        font-size: 0.95em !important;
        letter-spacing: 0.5px !important;
    }
}

@media screen and (max-width: 480px) {
    .purchase-button {
        padding: 0.7em 1.2em !important;
        font-size: 0.9em !important;
        gap: 0.6em !important;
        letter-spacing: 0.3px !important;
    }
}

.menu-toggle:hover,
.menu-toggle:focus {
    background-color: transparent !important;
    border-color: transparent !important;
}

/* Pour s'assurer que le style s'applique même avec une spécificité plus élevée */
button.menu-toggle:hover,
button.menu-toggle:focus {
    background-color: transparent !important;
    border-color: transparent !important;
}

.ast-button, 
.button, 
button, 
input[type=button], 
input[type=reset], 
input[type=submit] {
    border-color: transparent !important;
    box-shadow: none !important;
}