/*
 Theme Name:   Storefront Child
 Theme URI:    https://nextmarket.site
 Description:  Thème enfant typé "Gaming Dark" pour Next Market
 Author:       nm
 Author URI:   https://nextmarket.site
 Template:     storefront
 Version:      1.1.0
*/
/* --- RESET GLOBAL DES INPUTS (Gaming Dark Style) --- */

/* On regroupe tous les types pour avoir une base commune */
input[type=text],
input[type=email],
input[type=password],
input[type=tel],
input[type=url],
input[type=search],
input[type=number],
textarea,
.input-text {
    /* Utilisation de tes variables */
    background-color: var(--bg-dark-card);
    color: var(--text-main);
    font-family: var(--font-main);
    border: 1px solid #333333; /* Bordure sombre par défaut */
    border-radius: 8px;

    /* Espacement et taille */
    padding: 10px 16px;
    font-size: 0.85rem;
    width: 100%; /* S'adapte au conteneur par défaut */
    max-width: 100%;

    /* Propriétés techniques */
    box-sizing: border-box;
    outline: none;
    -webkit-appearance: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Gestion du Placeholder pour tous les champs */
::placeholder {
    color: var(--text-opacity-low);
    opacity: 1;
}

/* État Focus (au clic) pour TOUS les champs */
input:focus, textarea:focus {
    border-color: var(--primary-color) !important; /* Utilise ton violet au clic */
    box-shadow: 0 0 0 2px rgba(145, 94, 255, 0.2); /* Léger halo violet */
    background: transparent !important;
}

/* --- ADAPTATIONS SPÉCIFIQUES --- */

input[type="range"]{
    outline: none;
}

/* Pour les zones de texte (textarea) */
textarea {
    min-height: 120px;
    resize: vertical; /* Permet de régler la hauteur seulement */
}

button{
    transition: 0.3s ease-in-out;
}

/* --- BOUTONS --- */
button:focus {
    outline: none;
}

button:hover{
    background: none;
    color: var(--text-main);
}

a:focus{
    outline: none;
}

/* --- RESET ET STYLE DE BASE DE LA CHECKBOX --- */
.nm-shop-duration-input,
.nm-shop-cat-input {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important; /* Supprime le style Windows/Chrome */

    position: relative !important;
    width: 18px !important;
    height: 18px !important;
    border: 1px solid var(--text-muted) !important; /* Ton cercle gris image 96ecfe */
    border-radius: 50% !important; /* Force le rond parfait */
    background: transparent !important;
    cursor: pointer !important;
    outline: none !important;
    margin: 0 !important;
    display: inline-grid !important;
    place-content: center !important; /* Centre le point intérieur parfaitement */
    transition: all 0.2s ease;
}

/* --- LE POINT INTÉRIEUR (VIOLET) --- */
/* On crée le point avec ::before, mais invisible par défaut (scale 0) */
.nm-shop-duration-input::before,
.nm-shop-cat-input::before {
    content: "" !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background-color: var(--primary-color) !important; /* Ton violet image 96ed19 */
    transform: scale(0) !important;
    transition: transform 0.15s cubic-bezier(0.12, 0.4, 0.29, 1.46) !important;
}

/* --- ÉTAT COCHÉ (CHECKED) --- */
/* Quand c'est coché, le bord devient violet et le point apparaît */
.nm-shop-duration-input:checked,
.nm-shop-cat-input:checked {
    border-color: var(--primary-color) !important;
}

.nm-shop-duration-input:checked::before,
.nm-shop-cat-input:checked::before {
    transform: scale(1) !important; /* Le point violet devient visible */
}

/* --- EFFET AU SURVOL (HOVER) --- */
.nm-shop-duration-input:hover {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 8px rgba(145, 94, 255, 0.2) !important;
}

/* --- ALIGNEMENT DU LABEL --- */
/* Pour que le texte "Day" soit bien aligné avec le nouveau bouton */
.nm-shop-cat {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    cursor: pointer !important;
    padding: 4px 0 !important;
}

fieldset{
    background: none;
}

h1, h2, h3, h4{
    color: var(--text-main);
}

#card-tab{
    background: none !important;
}




@media (min-width: 768px) {
    .col-full {
        /* On passe d'environ 1064px à 1440px (ou 90% pour plus de fluidité) */
        max-width: 1440px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        /* Optionnel : on réduit un peu le padding latéral pour gagner de l'espace sur les bords */
        padding: 0 1.5rem !important;

        /* On garde content-box comme Storefront, ou border-box si tu préfères gérer les calculs plus facilement */
        box-sizing: content-box !important;
    }
}