/**
* 2007-2019 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author DMConcept <support@dmconcept.fr>
*  @copyright 2015 DMConcept
*  @license   http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*
* Don't forget to prefix your containers with your own identifier
* to avoid any conflicts with others containers.
*/

/* SPHERE */

/* --- FIX STEP 13 : SPHÈRES (4 COLONNES PARFAITES) --- */

/* 1. Le Conteneur : Une seule ligne, pas de fond gris */
#collapse_13 {
    display: flex !important;
    flex-wrap: nowrap !important; /* Force sur une ligne */
    justify-content: space-between !important;
    width: 100% !important;
    gap: 8px !important;
    padding: 0 !important;
    background: transparent !important; /* Enlève le gros fond gris */
}

@media (max-width: 480px) {
#collapse_13 {
    width: 114% !important;
}
}


/* 2. Les Blocs (Cartes) */
#collapse_13 .option_block {
    flex: 1 !important;
    width: 24% !important; /* 4 items = ~25% */
    min-width: 0 !important;
    margin: 0 !important;
    float: none !important;
    
    background: #ffffff !important; /* Fond BLANC par défaut */
    border: 1px solid #ddd !important; /* Bordure grise fine */
    border-radius: 8px !important;
    height: auto !important;
    min-height: 160px !important; /* Hauteur suffisante */
    position: relative !important;
    transition: all 0.2s ease !important;
}

/* 3. Contenu interne : Aligné vers le HAUT */
#collapse_13 .option_block_content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important; /* IMPORTANT : Tout commence en haut */
    height: 100% !important;
    width: 100% !important;
    padding: 15px 5px !important;
    background: transparent !important;
    border: none !important;
}

/* 4. L'Image : Calée en haut */
#collapse_13 .option_img {
    width: 100% !important;
    height: 60px !important; /* Hauteur réservée à l'image */
    display: flex !important;
    align-items: flex-start !important; /* Image collée en haut */
    justify-content: center !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

#collapse_13 .option_img img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
}

/* 5. Les Textes : Centrés et stylisés */
#collapse_13 .step_option_help {
    text-align: center !important;
    width: 100% !important;
    margin-top: auto !important; /* Pousse le texte vers le bas de la carte */
}

/* "30 cm" */
#collapse_13 .step_option_help h5 {
    font-family: "Gotham Rounded", sans-serif !important;
    color: #D55335 !important; /* Orange */
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    margin: 0 0 2px 0 !important;
    line-height: 1.1 !important;
}

/* "400 lumens" */
#collapse_13 .step_option_help p {
    font-family: "Quicksand", sans-serif !important;
    font-size: 0.8rem !important;
    color: #888 !important; /* Gris */
    margin: 0 !important;
    line-height: 1.2 !important;
}

/* 6. ÉTAT SÉLECTIONNÉ (Comme sur la photo) */
#collapse_13 .option_block.selected {
    background-color: #f4f4f4 !important; /* Fond légèrement gris/coloré */
    border: 2px solid #D55335 !important; /* Bordure Orange */
}

/* Le petit "Check" orange en haut à droite */
#collapse_13 .option_block.selected .option_block_content::after {
    content: "✓" !important;
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    background: #D55335 !important;
    color: #fff !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: bold !important;
    z-index: 10;
}

.step-style-square .step_options .option_block .step_option_help {
    bottom: 1px!important;

}
/* --- CORRECTION RÉSUMÉ : LE "+" CENTRÉ SUR LA LIGNE --- */

/* 1. La liste (Fond beige) */
#configurator_preview ul {
    list-style: none !important;
    padding: 20px !important;
    margin: 0 !important;
    background: #FDF6E9 !important;
    border-radius: 15px !important;
}

/* 2. Les éléments de la liste */
#configurator_preview ul > li {
    position: relative !important; /* Important pour placer le + */
    border-bottom: 1px dashed #dcbfa8 !important; /* La ligne en pointillés */
    padding: 10px 0 !important;
    margin-bottom: 15px !important; /* On laisse de la place pour le + */
    text-align: center !important; /* On centre le texte du résumé (optionnel, sinon 'left') */
    display: block !important;
}

/* 3. Le dernier élément n'a pas de bordure ni de marge */
#configurator_preview ul > li:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* 4. LE "+" CENTRÉ SUR LA LIGNE */
#configurator_preview ul > li::after {
    content: "+" !important;
    
    /* Centrage horizontal parfait */
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important; 
    
    /* Centrage vertical sur la ligne du bas */
    bottom: -11px !important; /* Ajuste selon la taille de police */
    
    /* L'astuce : Le fond beige cache le trait derrière le + */
    background: #FDF6E9 !important; 
    padding: 0 10px !important; /* Espace autour du + pour bien couper le trait */
    
    color: #333 !important; /* Couleur du texte */
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    z-index: 10 !important;
}

/* 5. Pas de "+" après le dernier élément */
#configurator_preview ul > li:last-child::after {
    display: none !important;
}

/* --- CONFIGURATION FINALE ACCESSOIRES (4 & 12) : LISTE HORIZONTALE --- */

/* 1. Force le conteneur à prendre toute la largeur sans grille */
#configurator_block #collapse_4,
#configurator_block #collapse_12,
#configurator_block #collapse_14 {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 5px !important;
    padding: 0px 5px;
}

/* 2. Force chaque bloc d'accessoire à être une ligne complète */
#configurator_block #collapse_4 .option_block,
#configurator_block #collapse_12 .option_block {
	display:flex!important;
    flex-direction: row !important; /* Force l'alignement horizontal */
    width: 100% !important;         /* Empêche le mode "colonne" */
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    align-items: center !important;
    float: none !important;         /* Tue les anciens floats */
    border: 1px solid #eee !important;
    background: #fff !important;
    box-sizing: border-box !important;
    /* Note : Le padding-left de 50px pour la case à cocher est géré dans l'autre bloc CSS */
}

#configurator_block #collapse_14 .option_block{

    flex-direction: row !important; /* Force l'alignement horizontal */
    width: 100% !important;         /* Empêche le mode "colonne" */
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    align-items: center !important;
    float: none !important;         /* Tue les anciens floats */
    border: 1px solid #eee !important;
    background: #fff !important;
    box-sizing: border-box !important;
    /* Note : Le padding-left de 50px pour la case à cocher est géré dans l'autre bloc CSS */
}
/* 3. Conteneur interne */
#configurator_block #collapse_4 .option_block_content,
#configurator_block #collapse_12 .option_block_content,
#configurator_block #collapse_14 .option_block_content{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
}

/* 4. Nom du produit : Correction définitive du texte coupé */
#configurator_block #collapse_4 .product-name,
#configurator_block #collapse_12 .product-name,
#configurator_block #collapse_14 .product-name{
    display: block !important;
    flex: 1 !important;            /* Prend tout l'espace entre l'image et le prix */
    min-height: 0 !important;
    margin: 0 10px !important;
    font-size: 0.8rem !important;
    line-height: 1 !important;
    white-space: normal !important; /* Autorise le retour à la ligne */
   overflow: visible !important; 
    text-align: left !important;
	

}

/* 5. Le Prix (Pillule orange) */
#configurator_block #collapse_4 .label.amount,
#configurator_block #collapse_12 .label.amount,
#configurator_block #collapse_14 .label.amount {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;     /* Empêche le prix de rétrécir */
    background: #FFF5F2 !important;
    color: #D55335 !important;
    border: 1px solid #D55335 !important;
    border-radius: 20px !important;
    padding: 6px 15px !important;
    min-width: 90px !important;
    font-weight: 700 !important;
}

/* 6. Nettoyage des résidus */
#configurator_block #collapse_4 .option_block_content::after, 
#configurator_block #collapse_4 .option_block_content::before,
#configurator_block #collapse_12 .option_block_content::after, 
#configurator_block #collapse_12 .option_block_content::before,
#configurator_block #collapse_14 .option_block_content::after, 
#configurator_block #collapse_14 .option_block_content::before,
#configurator_block #collapse_15 .option_block_content::after, 
#configurator_block #collapse_15 .option_block_content::before{
    display: none !important;
    content: none !important;
}

/* Cache les cases à cocher masquées qui flottent mal */
#configurator_block #collapse_4 input.hidden,
#configurator_block #collapse_12 input.hidden,
#configurator_block #collapse_14 input.hidden,
#configurator_block #collapse_15 input.hidden{
    display: none !important;
}

/* Cache les cases à cocher masquées qui flottent mal */
#configurator_block #collapse_4 input.hidden {
    display: none !important;
}
/* --- CONFIGURATEUR GUIRLED : RELOOKING DA 2026 --- */


/* 1. On force les conteneurs de couleurs à ne jamais couper le contenu */
.step-style-color .step_options,
.step-style-color .step_options .option_block {
    overflow: visible !important;
}

/* 2. On désactive l'effet de saut au survol UNIQUEMENT pour les boules */
/* (Car le "transform" emprisonne la boule visuellement et l'empêche de passer au premier plan) */
.step-style-color .step_options .option_block:hover {
    transform: none !important; 
    box-shadow: none !important; /* On garde juste le curseur main */
}

/* 3. On force la boule qu'on traîne (le fantôme) à être au-dessus de tout le site */
.ui-draggable-dragging {
    z-index: 99999 !important;
    opacity: 1 !important; /* On s'assure qu'elle est bien opaque */
    visibility: visible !important;
}

/* 4. On s'assure que l'image de la boule reste visible */
.step-style-color .step_options .option_block .option_img {
    z-index: 100 !important;
    position: relative !important;
}

/* 1. NETTOYAGE DU CONTENEUR PRINCIPAL */
#configurator_block {
    background: transparent;
}



/* On supprime les bordures grises moches à gauche et en bas des étapes */
#configurator_block .step_group {
    border-left: none !important;
    border-bottom: none !important;
    background: #ffffff;
    border-radius: 20px; /* Les gros arrondis de la DA */
    padding: 25px;
    margin-bottom: 25px;
   /* box-shadow: 0 5px 25px rgba(0,0,0,0.04); /* Ombre douce */
    transition: transform 0.3s ease;
}

/* 2. TITRES DES ÉTAPES */
#configurator_block label.title {
    float: none;
    margin-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
    width: 100%;
}

#configurator_block .step_title {
    font-family: "Gotham Rounded", sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    color: #222;
    text-transform: none !important; /* On enlève le uppercase agressif */
    display: flex;
    align-items: center;
}

/* Remplacer l'icône chevron par une couleur ou la masquer */
#configurator_block .step_title .material-icons {
    color: #D55335;
    background: #FFF5F2;
    border-radius: 50%;
    padding: 2px;
    margin-right: 10px !important;
    margin-left: 0 !important;
    font-size: 18px;
}

/* 3. LES BLOCS D'OPTIONS (Longueur, Modèle, etc.) */
#configurator_block .option_block {
    border: 1px solid #f1f1f1;
    border-radius: 16px;
    background: #fff;
    margin-right: 15px;
    margin-bottom: 15px;
    transition: all 0.2s ease;
    overflow: hidden;
    float: none !important; /* Fix flexbox */
    display: inline-block;
    vertical-align: top;
}

/* État survol */
#configurator_block .option_block:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border-color: #e0e0e0;
}

/* État SÉLECTIONNÉ (Le plus important) */
#configurator_block .option_block.selected {
    border-color: #D55335 !important;
    background-color: #FFF5F2 !important; /* Fond légèrement orangé */
}

#configurator_block .option_block.selected .option_block_content::after {
    /* On remplace la vieille icône check verte pixelisée par du CSS propre */
    content: "✓" !important;
    background: #D55335 !important;
    color: white !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 24px !important;
    height: 24px !important;
    top: 10px !important;
    right: 10px !important;
    border: none !important;
    border-radius: 50% !important;
    font-family: sans-serif;
}

    /* On applique la modification uniquement pour les étapes 5, 10, 6, 7 et 11 */
    #step_5.step_group .option_block.selected .option_block_content::after,
    #step_10.step_group .option_block.selected .option_block_content::after,
    #step_6.step_group .option_block.selected .option_block_content::after,
    #step_7.step_group .option_block.selected .option_block_content::after,
    #step_11.step_group .option_block.selected .option_block_content::after {
        content: "✓" !important;
        background: #FFF5F2 !important;
        color: #FFF5F2 !important; /* Note : le check sera invisible s'il est blanc sur fond blanc */
        font-size: 14px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 24px !important;
        height: 24px !important;
        top: 10px !important;
        right: 10px !important;
        border: none !important;
        border-radius: 50% !important;
        font-family: sans-serif;
    }


/* Textes dans les options */
#configurator_block .option_block .option_block_content .label {
    font-family: "Quicksand", sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    color: #333;
    margin-top: 10px;
}

#configurator_block .step_option_help h5 {
    font-family: "Gotham Rounded", sans-serif;
    color: #D55335;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 2px;
}
#configurator_block .step_option_help p {
    font-family: "Quicksand", sans-serif;
    font-size: 0.8rem;
    color: #777;
}

/* Prix (+ 1,00 €) */
#configurator_block .label.amount {
    background: #fff;
    color: #D55335;
    border: 1px solid #D55335;
    border-radius: 20px;
    padding: 2px 8px !important;
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 5px;
    display: inline-block;
}

/* --- RÉGLAGE SÉLECTEUR DE COULEURS V2 (DENSITÉ + DRAG & DROP) --- */

/* 1. On enlève le padding latéral du gros bloc blanc */
#configurator_block #step_5.step_group,
#configurator_block #step_10.step_group,
#configurator_block #step_6.step_group,
#configurator_block #step_7.step_group,
#configurator_block #step_11.step_group {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 2. On REMET le padding SEULEMENT sur le Titre et les textes d'aide */
#step_5 label.title, #step_10 label.title,#step_6 label.title,#step_7 label.title,#step_11 label.title,
#step_5 .info_text,  #step_10 .info_text,#step_6 .info_text,#step_7 .info_text,#step_11 .info_text,
#step_5 .error-step, #step_10 .error-step,#step_6.error-step,#step_7 .error-step,#step_11 .error-step,
#step_5 .info-step,  #step_10 .info-step,#step_6 .info-step,#step_7 .info-step, #step_11 .info-step {
    padding-left: 25px !important;
    padding-right: 25px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#step_4 label.title,
#step_12 label.title,
#step_4 .info_text,  
#step_4 .error-step, 
#step_4 .info-step {
    padding-left: 25px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}


/* 3. On s'assure que le contenu (boules ou autre) colle aux bords */
#step_7 .akg-bullcolor, #step_10 .akg-bullcolor, #step_6 .akg-bullcolor, #step_5 .akg-bullcolor,#step_11 .akg-bullcolor,
#step_7 .step_options,  #step_10 .step_options, #step_6 .step_options,#step_5 .step_options,#step_11 .step_options {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

/* Petite sécurité pour le conteneur row */
#step_5 .row, #step_10 .row,#step_6 .row,#step_7 .row,#step_11 .row {
    margin: 0 !important;
}

/* 1. On autorise le débordement pour le Drag & Drop */
.step-style-color .step_options {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important; /* Permet de revenir à la ligne */
    justify-content: flex-start !important;
    width: 100% !important;
    gap: 0!important; /* Espace réduit pour en mettre plus */
    overflow: visible !important; /* INDISPENSABLE pour voir la boule bouger */
}

/* 2. On réajuste les blocs de boules pour qu'ils soient petits et flottants */
.step-style-color .step_options .option_block {
    display: inline-block !important;
    flex: 0 0 auto !important;
    width: 54px !important; /* Largeur fixe pour aligner environ 6-7 boules */
    height: 54px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    overflow: visible !important; /* Autorise la boule à "sortir" du bloc au clic */
    float: none !important;
}

/* 3. L'image de la boule */
.step-style-color .step_options .option_block .option_img {
    border-radius: 50% !important;
    margin: 0 auto !important;
    transition: transform 0.2s ease;
    cursor: grab;
}

/* 4. On s'assure que l'élément cloné par le JS (pendant le drag) reste visible */
.ui-draggable-dragging {
    z-index: 9999 !important;
    opacity: 0.8;
    pointer-events: none; /* Évite de bloquer la souris */
}

/* 5. Fix Mobile */
@media (max-width: 480px) {
    .step-style-color .step_options .option_block {
        width: 48px !important;
    }
}

/* 5. COLONNE DE DROITE (RÉSUMÉ / PREVIEW) */
#configurator_preview {
   
    background: #fff;
    border-radius: 20px;
   /* box-shadow: 0 10px 40px rgba(0,0,0,0.08) !important; */
   border: 1px solid #f1f1f1 !important;
    padding: 30px !important;
    position: sticky;
    top: 100px; /* Sticky scroll */
}

/* Titre "Votre guirlande" */
#configurator_preview .preview-heading {
    border-bottom: none !important;
    text-align: left;
    padding: 0 0 15px 0 !important;
}
#configurator_preview .preview-heading .line-one {
    font-family: "Quicksand", sans-serif;
    font-size: 0.9rem;
    color: #777;
    text-transform: none;
    font-weight: 500;
}
#configurator_preview .preview-heading .line-two {
    font-family: "Gotham Rounded", sans-serif;
    color: #D55335;
    font-size: 1.6rem;
    line-height: 1.2;
}

/* Liste des options choisies */
#configurator_preview ul {
    background: #FDF6E9; /* Le beige de la DA */
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
    text-align: left !important;
}
#configurator_preview ul > li {
    font-family: "Quicksand", sans-serif;
    font-weight: 600;
    color: #333;
    border-bottom: 1px dashed #e0d0b8;
    padding: 8px 0;
}
#configurator_preview ul > li:last-child { border-bottom: none; }
#configurator_preview ul > li::after { display: none; } /* Enlever les "+" */

/* PRIX TOTAL */
#configurator_preview h3.price {
    font-family: "Gotham Rounded", sans-serif;
    color: #D55335;
    font-size: 2rem;
    text-align: center;
    margin: 20px 0;
}

/* BOUTON AJOUTER AU PANIER */
#add_configurator_to_cart {
    background-color: #D55335 !important;
    border: none;
    border-radius: 50px !important; /* Pill shape */
    padding: 15px 30px;
    font-family: "Gotham Rounded", sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    width: 100%;
    transition: background 0.3s;
    /* box-shadow: 0 5px 15px rgba(213, 83, 53, 0.3); */
}
#add_configurator_to_cart:hover {
    background-color: #b94a32 !important;
    transform: translateY(-2px);
}

/* --- BOUTONS DU BAS : DESIGN FINAL (ICÔNES VISIBLES) --- */

/* 1. Le conteneur : Flexbox aligné sur une ligne */
.steps-bottom-buttons {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    margin-top: 15px !important;
    width: 100% !important;
}

/* 2. Style de base pour TOUS les boutons */
.steps-bottom-buttons .steps-bottom-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 42px !important;       /* Un tout petit peu plus grand */
    background: #fff !important;
    border: 1px solid #D55335 !important;
    color: #D55335 !important;
    font-family: "Quicksand", sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
    /* box-shadow: 0 3px 6px rgba(0,0,0,0.05) !important; */
}

/* 3. Boutons TEXTE (Aléatoire / Auto) - Pilules */
#configurator-random-colors,
#configurator-auto-colors {
    border-radius: 50px !important;
    padding: 0 20px !important;
    min-width: 120px !important; /* Largeur mini pour équilibrer */
}

/* 4. Boutons ICÔNES (Poubelle / Jour-Nuit) - Ronds */
#configurator-reset-colors,
#configurator-nightday {
    width: 42px !important;        /* Carré */
    padding: 0 !important;
    border-radius: 50% !important; /* Rond */
    flex-shrink: 0 !important;     /* Interdit de s'écraser */
}

/* 5. REGLAGE DES ICÔNES (C'est là que ça se joue) */
/* On cible le SVG directement */
.steps-bottom-buttons .steps-bottom-btn svg {
    width: 22px !important;
    height: 22px !important;
    display: block;
    /* On définit la couleur ici */
    stroke: #d55335 !important; 
    transition: stroke 0.2s ease;
}

/* Optionnel : Changement de couleur au survol si besoin */
.steps-bottom-buttons .steps-bottom-btn:hover svg {
    stroke: white !important; /* Un rouge un poil plus foncé */
	color: #ffffff;
}

/* 6. Effet de survol : Fond Orange + Texte/Icône Blanc */
.steps-bottom-buttons .steps-bottom-btn:hover {
    background: #D55335 !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(213, 83, 53, 0.25) !important;
}

/* L'icône devient blanche au survol */
.steps-bottom-buttons .steps-bottom-btn:hover img {
    filter: brightness(0) invert(1) !important; /* Blanc pur */
}

/* Mobile */
@media (max-width: 450px) {
    .steps-bottom-buttons { gap: 6px !important; }
    .steps-bottom-buttons .steps-bottom-btn {
        height: 38px !important;
        font-size: 0.7rem !important;
        padding: 0 12px !important;
    }
    #configurator-reset-colors, #configurator-nightday { width: 38px !important; }
}

.steps-bottom-buttons .clearfix { display: none !important; }
/* 7. LA ZONE DE VISUALISATION (Le mur avec les boules) */
.dmviewer2d-dropzone-item {
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* Ombres sous les boules */
    /* Transition fluide lors du déplacement si possible via CSS, sinon géré par JS */
}

/* MOBILE FIXES */
@media (max-width: 767px) {
    #configurator_preview {
        position: static;
        box-shadow: none !important;
        background: #f9f9f9;
        margin-top: 30px;
    }
    
    #configurator_block .option_block .option_img {
        margin-right: 15px;
    }
	
	.step-style-color .step_options .option_block .option_img {
    padding: 1px!important;
}
    
    #configurator_block .step_option_help {
        text-align: center;
    }
}
/* --- CASES À COCHER PERSONNALISÉES (Accessoires #collapse_4 & #collapse_12) --- */

/* 1. On prépare l'espace à gauche pour la case à cocher */
#configurator_block #collapse_4 .option_block,
#configurator_block #collapse_12 .option_block;
#configurator_block #collapse_14 .option_block {
    padding-left: 50px !important; /* De la place pour le carré */
    padding-right: 15px !important;
    position: relative !important;
}

/* 2. On DESSINE le carré vide (::before) */
#configurator_block #collapse_4 .option_block::before,
#configurator_block #collapse_12 .option_block::before,
#configurator_block #collapse_14 .option_block::before,
#configurator_block #collapse_15 .option_block::before{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 15px !important; /* Collé à gauche */
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 22px !important;
    height: 22px !important;
    border: 2px solid #ccc !important; /* Bordure grise par défaut */
    background: #fff !important;
    border-radius: 6px !important; /* Coins légèrement arrondis */
    z-index: 5 !important;
    transition: all 0.2s ease !important;
}

/* 3. Quand c'est SÉLECTIONNÉ : Le carré devient Orange */
#configurator_block #collapse_4 .option_block.selected::before,
#configurator_block #collapse_12 .option_block.selected::before,
#configurator_block #collapse_14 .option_block.selected::before,
#configurator_block #collapse_15 .option_block.selected::before  {
    background-color: #D55335 !important;
    border-color: #D55335 !important;
}

/* 4. Quand c'est SÉLECTIONNÉ : On affiche le "Check" (::after) */
#configurator_block #collapse_4 .option_block.selected::after,
#configurator_block #collapse_12 .option_block.selected::after,
#configurator_block #collapse_14 .option_block.selected::after,
#configurator_block #collapse_15 .option_block.selected::after{
    content: "✓" !important;
    position: absolute !important;
    left: 15px !important; /* Au même endroit que le carré */
    top: 50% !important;
    transform: translateY(-50%) !important;
    
    width: 22px !important; /* Même taille que le carré */
    height: 22px !important;
    line-height: 22px !important; /* Pour centrer verticalement */
    text-align: center !important; /* Pour centrer horizontalement */
    
    color: white !important;
    font-size: 14px !important;
    font-weight: bold !important;
    z-index: 6 !important; /* Au dessus du carré */
    pointer-events: none !important; /* Laisse passer le clic */
}

/* 5. On cache la vieille case à cocher moche (l'input réel) */
#configurator_block #collapse_4 input[type="checkbox"],
#configurator_block #collapse_12 input[type="checkbox"],
#configurator_block #collapse_14 input[type="checkbox"] {
    opacity: 0 !important;
    position: absolute !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    cursor: pointer !important;
    z-index: 10 !important;
}

/* --- ZONES DE DÉPÔT (FIX CHARGEMENT) --- */

/* 1. L'apparence de l'emplacement vide */
.dmviewer2d-dropzone-item {
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 0 5px rgba(0,0,0,0.1) !important;
    box-sizing: border-box !important;
    
    /* CORRECTION ICI : On anime QUE le zoom et la couleur, pas le placement */
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s, box-shadow 0.2s, border-color 0.2s !important;
    
    z-index: 50 !important;
}

/* 2. Au survol : On allume le cercle */
.dmviewer2d-dropzone-item.ui-droppable-hover,
.dmviewer2d-dropzone-item:hover {
    background-color: rgba(213, 83, 53, 0.6) !important;
    border: 3px solid #fff !important;
    transform: scale(1.4) !important; /* Le cercle grossit */
    box-shadow: 0 0 20px rgba(213, 83, 53, 0.7) !important;
    cursor: pointer !important;
    z-index: 100 !important;
}

/* 3. LA BULLE DE TEXTE (Tooltip) */
.dmviewer2d-dropzone-item.ui-droppable-hover::after,
.dmviewer2d-dropzone-item:hover::after {
    content: "Glissez pour déposer" !important; /* Texte raccourci pour mobile */
    position: absolute !important;
    bottom: 140% !important; /* Un peu plus haut */
    left: 50% !important;
    transform: translateX(-50%) scale(0.8) !important; /* Échelle fixe */
    background: #333 !important;
    color: #fff !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    font-size: 10px !important;
    font-family: "Quicksand", sans-serif !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    z-index: 9999 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
}

/* On cache les spans techniques internes */
.dmviewer2d-dropzone-item span {
    background: transparent !important;
    border: none !important;
}

/* --- RELOOKING SECTION ATMOSPHÈRES (EN BAS DE L'IMAGE) --- */

/* 1. Le conteneur principal : Une barre horizontale propre */
#configurator-covers-step {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* Aligné à gauche, ou 'center' selon tes goûts */
    gap: 15px !important;
    background: #ffffff !important;
    padding: 15px 20px !important;
    margin-top: 20px !important;
    border-radius: 20px !important; /* Gros arrondis DA */
    box-shadow: 0 5px 20px rgba(0,0,0,0.05) !important; /* Légère ombre pour le détacher */
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 2. Le Titre (Atmosphères / Projetez-vous) */
#configurator-covers-step label.title {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important; /* On enlève les bordures héritées des autres étapes */
    text-align: right !important; /* Pour coller au texte "Projetez-vous" */
    min-width: 100px !important;
}

#configurator-covers-step .step_title {
    font-family: "Gotham Rounded", sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    color: #D55335 !important; /* Orange */
    text-transform: none !important;
    margin-bottom: 2px !important;
}

#configurator-covers-step .step_subtitle {
    font-family: "Quicksand", sans-serif !important;
    font-weight: 500 !important;
    font-size: 0.8rem !important;
    color: #888 !important;
}

/* 3. La flèche (L'image SVG) */
#configurator-covers-step > img:not(.cover-step-item) {
    width: 30px !important; /* On maîtrise la taille */
    height: auto !important;
    opacity: 0.6 !important;
    margin: 0 5px !important;
    transform: translateY(2px); /* Petit ajustement optique */
}

/* 4. Les Miniatures (Les images cliquables) */
.cover-step-item {
    width: 90px !important;
    height: 90px !important;
    border-radius: 12px !important; /* Arrondis doux */
    object-fit: cover !important;
    cursor: pointer !important;
    border: 2px solid transparent !important; /* Prêt pour le hover */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; /* Effet rebond fluide */
    box-shadow: 0 3px 6px rgba(0,0,0,0.1) !important;
}

/* 5. Effet au survol des miniatures */
.cover-step-item:hover {
    transform: scale(1.15) !important; /* Zoom sympa */
    border-color: #D55335 !important; /* Bordure orange */
    box-shadow: 0 5px 15px rgba(213, 83, 53, 0.2) !important;
    z-index: 10 !important;
}

/* 6. Si une classe "active" existe (sinon le hover suffit) */
.cover-step-item.selected, 
.cover-step-item.active {
    border-color: #D55335 !important;
    transform: scale(1.05) !important;
}

/* OPTION MOBILE : Si c'est trop large */
@media (max-width: 500px) {
    #configurator-covers-step {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    #configurator-covers-step label.title {
        text-align: center !important;
        width: 100% !important;
        margin-bottom: 10px !important;
    }
    #configurator-covers-step > img:not(.cover-step-item) {
        display: none !important; /* On cache la flèche sur mobile pour gagner de la place */
    }
	
	.step-style-color .step_options {
    justify-content: center!important;
}
}

/* --- RELOOKING IMAGE PRINCIPALE (MODERNE & ARRONDIE) --- */

/* 1. Le conteneur de l'image */
#view_full_size {
    border-radius: 20px !important; /* Les gros arrondis de la nouvelle DA */
    overflow: hidden !important;    /* INDISPENSABLE : cache les coins carrés de l'image */
}

/* 2. L'image elle-même */
#bigpic {
    display: block !important;      /* Supprime les espaces fantômes sous l'image */
    width: 100% !important;         /* S'assure qu'elle remplit bien le cadre */
    height: auto !important;
    transition: transform 0.3s ease !important; /* Préparation pour un effet zoom si besoin */
}

/* Optionnel : Effet de léger zoom au survol de l'image principale */
#view_full_size:hover #bigpic {
    transform: scale(1.02) !important;
}

#configurator-tabs {
    text-align: center;
    margin-bottom: 0px!important;
}
 

/* ==========================================================================
   📱 VERSION MOBILE CLEAN (FIXED LAYOUT + DRAG FIX)
   ========================================================================== */


/******************
      PRODUCT VRAI CSS
********************/
#image-block {
    margin-bottom: 10px;
}

.pb-left-column #thumbs_list {
    width: 200px;
}

.pb-left-column #image-block #view_full_size .span_link {
    z-index: 5000;
}

.pb-left-column #image-block img {
    background: none !important;
}



/* --- Extérieur step 9--- */

/* Ciblage spécifique du bloc "Panneau solaire" par son ID */
#step_option_9_93 {
    width: 100% !important; /* Prend les 2/3 de la largeur, ou mettez 100% si vous préférez */
    min-width: 300px !important; /* Largeur minimale pour garantir la lisibilité */
    float: left !important; /* Garde le comportement flottant standard */
    clear: both !important; /* Force le retour à la ligne si nécessaire pour être propre */
}

/* Ajustement de l'image à l'intérieur pour qu'elle ne soit pas étirée mochement */
#step_option_9_93 .option_img {
    width: auto !important; /* Laisse l'image prendre sa largeur naturelle ou ajustée */
    max-width: 100px !important; /* Limite la largeur de l'image si besoin */
    float: left !important; /* Met l'image à gauche */
    margin-right: 15px !important; /* Espace entre image et texte */
    border: none !important; /* Enlève la bordure autour de l'image si elle gêne */
}

/* Ajustement du texte à l'intérieur pour qu'il soit à droite de l'image */
#step_option_9_93 .step_option_help {
    float: left !important;
    text-align: left !important;
    width: auto !important;
    margin-top: 40px !important; /* Centre verticalement à peu près */
}

#step_option_9_93 .step_option_help h5 {
    margin: 0 !important;
    font-size: 0.9rem !important;
    font-weight: bold !important;
}

/* Version Mobile : Pleine largeur */
@media (max-width: 767px) {
    #step_option_9_93 {
        width: 100% !important;
    }
}


/* --- RELOOKING BADGE INFO (TITRE) --- */

#configurator_block .info, 
#configurator_block .label-info {
    /* 1. Couleurs et Forme */
    background-color: #D55335 !important; /* Orange Terracotta */
    color: #ffffff !important;            /* Texte Blanc */
    border: 1px solid #D55335 !important;
    border-radius: 50px !important;       /* Forme "pilule" très arrondie */
    
    /* 2. Typographie */
    font-family: "Gotham Rounded", "Quicksand", sans-serif !important;
    font-size: 10px !important;           /* Petit et discret */
    font-weight: 700 !important;          /* Gras pour être lisible */
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;     /* Aère un peu les lettres */
    
    /* 3. Espacement et Position */
    padding: 4px 10px !important;         /* Plus d'espace sur les côtés */
    margin-left: 10px !important;         /* Ne colle pas au titre */
    display: inline-block !important;
    vertical-align: middle !important;
    
    /* 4. Interaction */
    cursor: help !important;              /* Curseur point d'interrogation */
    box-shadow: 0 2px 5px rgba(213, 83, 53, 0.2) !important; /* Légère ombre colorée */
    transition: all 0.2s ease !important;
}

/* Effet au survol : On inverse les couleurs */
#configurator_block .info:hover, 
#configurator_block .label-info:hover {
    background-color: #ffffff !important;
    color: #D55335 !important;
    transform: translateY(-1px) !important; /* Petit effet de levier */
    box-shadow: 0 4px 8px rgba(213, 83, 53, 0.3) !important;
}

/* --- ALIGNEMENT TITRE + BADGE INFO (SUR LA MÊME LIGNE) --- */

/* 1. On force les titres à ne pas prendre toute la largeur */
#configurator_block h3,              /* Souvent utilisé pour "Choisissez des accessoires" */
#configurator_block label.title,     /* Utilisé pour les étapes */
#configurator_block .step_title {
    display: inline-block !important;
    width: auto !important;          /* Il prend juste la place du texte */
    margin-bottom: 10px !important;  /* Un peu d'espace en bas globalement */
    vertical-align: middle !important;
    float: none !important;
}

/* 2. On s'assure que le badge se colle bien à côté */
#configurator_block .info, 
#configurator_block .label-info {
    display: inline-block !important;
    margin-top: 0 !important;        /* On annule les marges parasites */
    margin-bottom: 10px !important;  /* On aligne la marge avec le titre */
    margin-left: 12px !important;    /* Espace entre le texte et le badge */
    float: none !important;
    vertical-align: middle !important; /* Centrage vertical parfait avec le texte */
}

/* Cas particulier : Si un saut de ligne (<br>) traîne dans le code HTML, on le cache */
#configurator_block br {
    display: none;
}

/* --- MASQUER LES TITRES "LONGUEUR" ET "MODÈLE" --- */

/* On cible spécifiquement l'étape 2 (Longueur) et l'étape 3 (Modèle) */
#step_2 label.title,
#step_3 label.title,
#step_8 label.title,
#step_9 label.title,
#step_13 label.title {
    display: none !important;
}

/* Optionnel : Si vous trouvez que ça laisse trop de vide en haut des blocs */
#step_2, #step_3 {
    margin-top: 5px !important; /* Ajuste l'espace si nécessaire */
}

#step_3 {
    margin-bottom: 5px !important; /* Ajuste l'espace si nécessaire */
}

/********************
    CONFIGURATOR
********************/
#configurator_preview {
    z-index: 6000;
}

#configurator_preview.loading:not(.scroll-to-fixed-fixed) {
    position: relative !important;
}

#warning {
    display: none;
}

@media (max-width: 992px) {
    #configurator_preview_clear::before, #configurator_preview_clear::after {
        content: " ";
        display: table;
    }

    #configurator_preview_clear::after {
        clear: both;
    }

    #configurator_preview_clear::before, #configurator_preview_clear::after {
        content: " ";
        display: table;
    }
}

@media (max-width: 767px) {
    .pp-left-column {
        position: relative !important;
    }

    #warning {
        display: block;
    }
}


#configurator_preview {
    width: 100%;
}

#configurator_block .error-step p {
    font-weight: bold;
    color: #f13340;
}

#configurator_block .info_text p {
    color: #232323;
}

#configurator_block .info-step p {
    font-weight: bold;
    color: #2fb5d2;
}

#configurator_block .step_list label.title {
    margin-bottom: 15px;
    display: block;
    float: left;
    padding-top: 5px;
}

#configurator_block .step_list label .step_title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1rem;
    margin-bottom: 0;
   /* padding: 7px 0; Cyril */
    text-transform: uppercase;
}

#configurator_block .step_list label .step_title .material-icons {
    margin-left: -30px;
}

#configurator_block sup {
    font-weight: bold;
    color: #f13340;
    font-size: 17px;
    top: -3px;
}

#configurator_block .display-step-amount {
    background: white none repeat scroll 0 0;
    border: 1px solid #c8c8c8;
    border-radius: 3px;
    color: #333;
    display: inline-block;
    float: right;
    font-size: 14px;
    top: -2px;
    padding: 3px;
    position: relative;
    min-width: 100px;
    text-align: center;
}

#configurator_block .display-step-amount::before {
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #fff 0%, #d2d2d2 100%) repeat scroll 0 0;
    content: "";
    display: block;
    height: 1px;
    position: absolute;
    right: 100%;
    top: 50%;
    width: 100%;
}

#configurator_block .page-heading {
    margin-top: 0;
}

#configurator_block .page-heading .required {
    text-transform: none;
    font-size: 14px;
    font-weight: normal;
}

#configurator_block .step_list div > span {
    top: 0;display: none;
}

#configurator_block .info,
#configurator_block .info-fb {
    cursor: pointer;
    padding: 2px 4px;
    margin-left: 3px;
    font-size: 12px;
    background: #2fb5d2;
    color: white;
    border-radius: 3px;
    font-weight: bold;
	display: inline-block !important
}

#configurator_block .option_block {
    background: #fff none repeat scroll 0 0;
    cursor: pointer;
    float: left;
    font-size: 14px;
    margin-bottom: 5px;
    margin-right: 8px;
    position: relative;
    text-align: center;
}

#configurator_block .option_block .configurator-zoom {
    position: absolute;
    background: #000;
    top: 0;
    right: 0;
    color: #fff;
    font-size: 16px;
    padding: 4px 5px;
    cursor: pointer;
    display: none;
}

#configurator_block .option_block:hover .configurator-zoom {
    display: block;
}

#configurator_block .option_block.color:hover .configurator-zoom {
    display: none;
}

#configurator_block .quantity_wanted input {
    margin: -1px 0 auto;
    /*max-width: 65px;*/
    text-align: center;
}

#configurator_block .custom .quantity_wanted input {
    max-width: 175px;
}

#configurator_block .quantity_wanted input.qty-inline {
    margin: 0;
    display: inline-block;
}

#configurator_block .option label {
    cursor: pointer;
}

#configurator_block .option .quantity_wanted {
    display: inline-block;
    position: relative;
    top: 10px;
    margin: 0;
}

#configurator_block .option_block .quantity_wanted {
    margin-bottom: 0;
}

#configurator_block .label.totalprice {
    font-size: 92%;
}

#configurator_block .option_block .label.totalprice {
    margin-top: 15px;
}

#configurator_block .option_block.custom.selected .label.totalprice {
    margin-top: 11px;
}

#configurator_block .option_block.colortexture .label.totalprice {
    max-width: 113px;
}

#configurator_block .option_block .option_block_content {
    position: relative;
    margin: 0 auto;
}

#configurator_block .option_block .option_block_content .label {
    display: block;
    margin-left: 0;
    margin-top: 15px;
	font-size: .8rem;
    font-family: "Gotham Rounded";
    font-weight: 600;
}

#configurator_block .option_block .option_block_content .label:empty {
    display: none;
}

#configurator_block .option_group .label {
    padding: 3px;
}

#configurator_block .option_block.colortexture .option_block_content .label {
    bottom: 1px;
    font-size: 12px;
    left: 1px;
    margin: 0;
    position: absolute;
    right: 1px;
    top: auto;
    z-index: 1;
    background: white;
    padding-right: 26px;
    font-weight: bold;
}

#configurator_block .option_block.colortexture.selected .option_block_content .label {
    bottom: 0;
    left: 0;
    right: 0;
}

#configurator_block .step_group .table .row-title {
    display: block;
    text-align: right;
}

#configurator_block .step_group .table .col-title {
    display: block;
    text-align: left;
}

#configurator_block .step_group .table thead > tr > td,
#configurator_block .step_group .table tbody > tr > td.table-cell {
    text-align: center;
    /*remove padding from bootstrap in order to have centered-text*/
    padding-left: 8px;
    vertical-align: middle;
    line-height: 9px;
}

#configurator_block .step_group td.selected {
    background-color: #ddf9e1;
    color: #35b33f;
}

#configurator_block .step_group td.table-cell {
    cursor: pointer;
}

#configurator_block .option_block.selected .option_block_content::after {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAOCAYAAAAi2ky3AAAAiElEQVQokaXPwQ3DMAgF0D9LVugKhItlxvBOHQBbynBeITm0qSKRpOAg/dvnCYDBYZXCml6j+wCAucnCTVauuZMmeobsqbmHLzPIHpXyK7FKIU1TFJmbLLb0+dlgMeTw8xFzIQDANXdT/GJuBABIE51iFzlFotgt4sVcyD8shFxhQ4jF8tu7swGui+otf3QUOQAAAABJRU5ErkJggg==);
    border-radius: 30px;
    bottom: -7px;
    color: #46a74e;
    content: " ";
    display: block;
    font-family: "FontAwesome";
    font-size: 25px;
    position: absolute;
    right: -9px;
    z-index: 1;
    height: 30px;
    width: 30px;
    background-repeat: no-repeat;
    border: 2px solid;
    background-color: white;
    background-position: center center;
}

.form-group.form-ok.quantity_wanted input.qty {
    background: none;
    background-color: #ddf9e1;
    /*padding: 3px 5px;*/
}

.form-group.form-error.quantity_wanted input.qty {
    background: none;
    background-color: #fff1f2;
    padding: 3px 5px;
}


#configurator_block .option_block.colortexture .option_block_content {
    height: 100px;
    width: 100%;
}

#configurator_block .option_block.colortexture img {
    width: 100%;
    height: 100px;
}

#configurator_block .option_block.custom {
	background: #fcfcfc;
    border-radius: 12px;
    padding: 5px;
	flex: 0 0 calc(33.33% - 10px);
	max-width: 110px;
}

#configurator_block .option_block .option_img > img {
    width: 100%;
}

#configurator_block .option_block.colortexture .option_img {
    width: 100px;
    height: 100%;
}

#configurator_block .option_block.selected .option_img {
    border: none;
}

#configurator_block .option_block.custom .option_img {
    height: 50px;
    overflow: hidden;
}

.step-style-radio-inline .step_options .option_block .option_img{
	position: relative;
	left: 5px;	
}

#configurator_block .option_block.custom .option_block_content {
    border: 1px solid #d6d4d4;
}

#configurator_block .option_block.selected .option_block_content {
    border: 1px solid #46a74e;
}

#configurator_block .option_block img {
    margin: 0 auto;
    max-height: 100%;
}

#configurator_block div.checker {
    display: inline-block;
}

#configurator_block .step_options hr {
    border-style: dashed none none;
}

#configurator_block .step_options.collapsing,
#configurator_block .step_options.in {
    padding-left: 25px;
}

#configurator_block .step_options.in {
    border-left: 2px solid #0074df;
}

/********************
    PREVIEW
********************/
#configurator_block > .col-md-3 {
    position: static;
}

#configurator_preview .dl-horizontal dt {
    text-align: left;
    width: 125px;
}

#configurator_preview .dl-horizontal dd {
    margin-left: 130px;
}

#configurator_preview #dl-final-price dt {
    margin-top: 4px;
}

#configurator_preview #final_price,
#configurator_preview #old_price {
    font-weight: bold;
    font-size: 18px;
    display: block;
}

#configurator_preview #old_price {
    text-decoration: line-through;
}

#configurator_preview .list-group {
    max-height: 300px;
    overflow: auto;
}

@media (max-width: 992px) {
    #configurator_preview #configurator-progress {
        display: none;
    }

    #configurator_preview .list-group {
        max-height: 100px;
    }

    #configurator_preview .list-group .list-group-item {
        padding: 0px 10px;
    }

    #configurator_preview .list-group .list-group-item strong {
        display: inline-block;
    }
}

#configurator_preview .list-group-item strong {
    /*text-transform: uppercase;*/
}

#configurator_preview .advantage {
    color: #b53930;
}

#configurator_preview dt.advantage {
    white-space: normal;
    margin-top: -5px;
}

#configurator_preview {
    background: #fff;
    padding: 20px;
    border-top: 1px solid rgb(170, 170, 170);
    box-shadow: 0px 0px 7px 3px rgba(0, 0, 0, .2);
}

#configurator_preview #dl-final-price dt {
    display: inline-block;
    width: 50%;
}

#configurator_preview #dl-final-price dd {
    display: inline-block;
    width: 47%;
    text-align: right;
    margin: 0;
}

/********************
    PRICES BLOCK
********************/
.button.configure_link {
    font: 700 17px/21px Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
    padding: 0;
    border: 1px solid;
    border-color: #0079b6 #006fa8 #012740 #006fa8;
    margin: 0 7px 10px;
}

.button.configure_link span {
    border: 1px solid;
    border-color: #06b2e6;
    padding: 10px 14px;
    display: block;
    background: #009ad0;
    background: -moz-linear-gradient(top, #009ad0 0%, #007ab7 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #009ad0), color-stop(100%, #007ab7));
    background: -webkit-linear-gradient(top, #009ad0 0%, #007ab7 100%);
    background: -o-linear-gradient(top, #009ad0 0%, #007ab7 100%);
    background: -ms-linear-gradient(top, #009ad0 0%, #007ab7 100%);
    background: linear-gradient(to bottom, #009ad0 0%, #007ab7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#009ad0', endColorstr='#007ab7', GradientType=0);
}

.button.configure_link:hover {
    border-color: #01314e #004b74 #0079b6 #004b74;
}

.button.configure_link:hover span {
    filter: none;
    background: #0084bf;
}

#buy_block .configure_link {
    width: 80%;
    text-align: center;
    display: block;
    margin: 15px auto;
}

.our_price_display .from_price {
    display: block;
}

#quantity-configurator-label {
    display: inline-block;
    text-align: left;
    margin-top: 5px;
}

.configurator-qty {
    display: inline-block;
    width: calc(100% - 100px);
    float: right;
}

.configurator-qty .form-group {
    margin-bottom: 5px;
}

.configurator-add button {
    width: 100%;
}


/********************
    CART SUMMARY
********************/
#order .cart_description ul.configurator li strong {
    color: #525252;
}

/********************
    LOADER
********************/
.loading {
    position: relative;
}

.loading:before {
    content: "";
    display: block;
    background-color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9000;
    background-image: url("../img/loader.gif");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 35% auto;
}

/********************
    PROGRESS BAR
********************/
#configurator-progress {
    height: 80px;
    margin: 25px auto;
    position: relative;
    width: 80px;
}

#configurator-progress:after {
    content: "";
    background: url('../img/progress-bg.png') no-repeat 0px 0px / 100px 100px;
    display: block;
    position: absolute;
    z-index: 1;
    width: 100px;
    height: 100px;
    top: -10px;
    left: -10px;
}

#configurator-progress strong,
#configurator-progress canvas {
    position: relative;
    z-index: 2;
    color: #8b7f76;
    text-shadow: 0px 1px 30px rgba(250, 245, 239, 0.5);
}

#configurator-progress strong {
    font-size: 25px;
    left: 0;
    position: absolute;
    text-align: center;
    top: 29px;
    width: 100%;
}

/********************
    TABS
********************/
#configurator-tabs {
    text-align: center;
    margin-bottom: 20px;
}

#configurator-tabs li:hover,
#configurator-tabs li:active,
#configurator-tabs li:focus {
    text-decoration: none;
}

#configurator-tabs li {
    background: #eee none repeat scroll 0 0;
    color: #333;
    cursor: pointer;
    display: inline-block;
    /*float: left;*/
    line-height: 45px;
    padding: 0;
    text-align: center;
    border-right: 1px solid #cfcfcf;
    border-bottom: 1px solid #fff;
}

#configurator-tabs li:last-child {
    border: none;
    border-radius: 0 7px 7px 0;
}

#configurator-tabs li:first-child {
    border-radius: 7px 0 0 7px;
}

#configurator-tabs li:only-child {
    border-radius: 7px 7px 7px 7px;
}

#configurator-tabs li[data-selected=true] {
    text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
    background: #0088C2;
    color: white;
}

#configurator_block.tabs {
    margin: 0;
}

#configurator_block label span.label-default {
    /*border:1px solid rgba(0,0,0,.15);*/
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
    background: #2fb5d2;
    color: white;
    display: inline-block;
    margin-left: 5px;
    padding: 0 3px !important;
}

#configurator_block h1 span {
    text-transform: none;
    font-weight: normal;
    font-size: 0.9375rem;
    display: inline-block;
    float: right;
    height: 1.5rem;
    line-height: 1.6rem;
}

#configurator_block .form-group.form-error .form-control, .form-group.form-ok .form-control {
    padding-right: 30px;
}

#configurator_block .form-group.form-ok input, .form-group.form-ok textarea {
    border: 1px solid #46a74e;
    color: #35b33f;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAOCAYAAAAi2ky3AAAAiElEQVQokaXPwQ3DMAgF0D9LVugKhItlxvBOHQBbynBeITm0qSKRpOAg/dvnCYDBYZXCml6j+wCAucnCTVauuZMmeobsqbmHLzPIHpXyK7FKIU1TFJmbLLb0+dlgMeTw8xFzIQDANXdT/GJuBABIE51iFzlFotgt4sVcyD8shFxhQ4jF8tu7swGui+otf3QUOQAAAABJRU5ErkJggg==) 98% no-repeat #ddf9e1;
}

#configurator_block .quantity_wanted.form-group.form-ok input:focus,
#configurator_block .quantity_wanted.form-group.form-error input:focus {
    outline: 0;
}

#configurator_block .form-group.form-error input, .form-group.form-error textarea {
    border: 1px solid #f13340;
    color: #f13340;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAj0lEQVQokZWRsQ2AMAwEvVLsFuEUzMIKzMIKrMBO6JkAGiJMYiOI5CaXK3Imug5SP4E7oeCAdWw4RJdd8gHWDSkPjeTxclmmll3OnRBYNwusXEuGj4SUB0+OBqLL/YeP8kP6KruSSb6GolPbrRcF+yW5Mljn4NEarirc4xUiCobUTw2s673yAsE6u+EKN9IJydM/ZmaVOVAAAAAASUVORK5CYII=) 98% no-repeat #fff1f2;
}

#configurator_block .input-group-addon {
    padding: 6px 12px;
    font-size: 13px;
    font-weight: normal;
    line-height: 1;
    text-align: center;
    background-color: #eeeeee;
    border: 1px solid #d6d4d4;
    border-radius: 0px;
    color: #777;
}

#configurator_block .option_input.form-group {
    height: auto;
}

#configurator_block .step_group.form-group {
    height: auto;
}

#configurator_block input {
    background: white;
    border: 1px solid #d6d4d4;
}

#configurator_block .color, .custom-checkbox input[type="checkbox"] + span.color {
    width: 100px;
    height: auto;
    margin-right: 2px;
    border-shadow: inherit !important;
}

#configurator_block .hidden {
    display: none;
}

#configurator_block .option_block.option_group.colortexture.color.selected {
    border: 1px solid #46a74e;
}

#configurator_block .option_block.option_group.colortexture.color.selected .option_block_content {
    border: none;
}

#configurator_block .color:hover {
    /* border: 0px; */
    outline: 0;
    /* margin-top: 6px; */
    box-shadow: initial !important;
    border: 0px solid;
    margin-top: 5px;
}

#configurator_block .color, #configurator_block .custom-checkbox input[type="checkbox"] + span.color {
    border: inherit;
}

#configurator_block .color.option_block.selected .option_block_content {
    height: 98px !important;
}

#configurator_block .step_group {
    border-left: 18px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
    padding-left: 10px;
    padding-bottom: 10px;
    position: relative;
    display: flex;
	flex-direction: column;
}

#configurator_block .step_group.info-on-this-step {
    border-color: #2fb5d2;
}

#configurator_block .step_group.error-on-this-step {
    border-color: #f13340;
}

/*#configurator_block .step_group.error-on-this-step label.title .step_title {
    color: #f13340;
}*/

#configurator_block .step_group.info-on-this-step label.title .step_title .material-icons,
#configurator_block .step_group.error-on-this-step label.title .step_title .material-icons {
    color: white;
}

#configurator_block .step_group {
    margin-bottom: 25px;
}


/* CONFIGURATOR STEP ERROR */
.configurator_step_error {
    background: url(../img/icon/form-error.png) no-repeat;
    width: 14px;
    display: inline-block;
    height: 14px;
    margin-right: 5px;
}


/* UPLOAD - WEBCAM */
.step_group .uploader-webcam-block {
    position: relative;
}

.step_group .uploader-webcam-block .uplaoder-webcam-actions {
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 25px;
    z-index: 10;
}

.step_group .uploader-webcam-block .uplaoder-webcam-actions .uploader-webcam-picture-btn {
    font-size: 40px;
    border-radius: 50%;
    padding: 10px 30px;
}

.step_group .uploader-webcam-block.preview-on .uplaoder-webcam-actions .uploader-webcam-picture-btn {
    display: none;
}

.step_group .uploader-webcam-block .webcam-preview {
    position: absolute;
    left: 0;
    width: 100%;
}

.step_group .uploader-webcam-block.preview-on .uplaoder-webcam-actions .btn {
    padding: 5px 20px;
    font-size: 30px;
}

.step_group .uploader-webcam-block.preview-off .uplaoder-webcam-actions .btn {
    display: none;
}

.step_group .uploader-webcam-block.preview-off .uplaoder-webcam-actions .uploader-webcam-picture-btn {
    display: inline-block;
}

.step_group .uploader-thumb {
    max-height: 50px;
    padding: 0 10px 0;
}


/* STEP PRODUCTS */
.option_block .option_block_content {
    border: 1px
}

.option_block .option_block_content .product-name {
    height: 80px;
    overflow: hidden;
    display: block;
    font-size: 13px;
}


/* VIEWER 2D */
.dmviewer2d-dropzone {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999 !important;
}

.dmviewer2d-dropzone-item {
    border-radius: 50%;
    display: block;
    position: absolute; /*border: rgba(0,100,200,0.5) dotted 1px; background: rgba(0,100,200,0.05);*/
}

.dmviewer2d-dropzone-item img {
    vertical-align: top;
}

.dmviewer2d-dropzone-item-hover, .dmviewer2d-dropzone-item-selected {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.dmviewer2d-dropzone-item-hover, .dmviewer2d-dropzone-item-selected img {
    width: 100%;
}

.dmviewer2d-dropzone-hover {
    background: rgba(255, 0, 0, 0.2)
}

.dmviewer2d-step-dropzone .option_block .option_img {
    overflow: initial !important;
}

.dmviewer2d-step-dropzone .option_block .option_img .ui-draggable.ui-draggable-dragging {
    z-index: 100000;
    width: 22px !important;
}


/* CUSTOM GUIRLED */

.configurator-head-links {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
}

.configurator-head-link {
    flex: 50%;
    text-align: center;
    padding: .7rem;
    font-size: 1rem;
    font-weight: 600;
    color: #666;
    border-radius: 18px;
}

.configurator-head-link.active {
    background: #d55335;
    border-radius: 18px;
    color: #fff;
    border-radius: 18px;
}

.configurator-head-link:hover {
    background: #e0a06c;
    color: #fff;
    border-radius: 18px;
}

.configurator-head-link img {
    height: 26px;
    padding-right: 5px;
}

#main > .row {
    margin: 0 !important;
}

#main > .row > div {
    padding: 10px !important;
}



#main .step_list {
    /* border-left: 1px solid #d6d4d4 !important; MOD CYRIL*/
    /* border-bottom: 2px solid #d6d4d4 !important; */
}

.cart-overview .configurator-visual-rendering {
    display: none;
}

/* STEP - SQUARE */
.step-style-square {
    background: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}
.step-style-square .step_options{
	display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.step-style-square label.title, .step-style-square .error-step, .step-style-square .info-step, .step-style-square .info_text, .step-style-square .clearfix {
    display: none !important;
}

.step-style-square .step_options .option_block .amount {
    display: none !important;
}

.step-style-square .step_options .option_block .configurator-zoom {
    display: none !important;
}

.step-style-square .step_options .option_block .option_img {
    width: 100% !important;
    height: auto !important;
}

.step-style-square .step_options .option_block .option_img img {
    width: 100% !important;
    height: auto !important;
}

.step-style-square .step_options .option_block .option_block_content {
    height: auto !important;
}

.step-style-square .step_options .option_block.selected .option_block_content {
    border: none !important;
    background-color: #eee;
}

.step-style-square .step_options .option_block.selected .option_block_content::after {
    display: none !important;
}

.step-style-square .step_options .option_block .step_option_help {
    position: absolute;
    bottom: 5px;;
    left: 0;
    width: 100%;
    line-height: 12px;
}

.step-style-square .step_options .option_block .step_option_help h5 {
    margin: 0;
}

.step-style-square .step_options .option_block .step_option_help p {
    margin: 0;
    font-size: 90%;
}

/* STEP - SQUARE - FULL WIDTH */
.step-style-square.step-style-square-full-width .step_options .option_block {
    width: 100% !important;
}

.step-style-square.step-style-square-full-width .step_options .option_block .option_img {
    width: 33% !important;
    display: inline-block !important;
}

.step-style-square.step-style-square-full-width .step_options .option_block .step_option_help {
    width: 67% !important;
    float: right;
    text-align: left;
    line-height: 18px;
    padding-top: 50px;
    position: inherit;
}

/* STEP - SQUARE1 */
.step-style-square1 {
    background: #fff !important;
    padding: 1px !important;
    margin: 0 !important;
    border: none !important;
}

.step-style-square1 label.title, .step-style-square1 .error-step, .step-style-square .info-step, .step-style-square .info_text, .step-style-square .clearfix {
    display: none !important;
}

.step-style-square .step_options .option_block {
    margin: 0 !important;
}

.step-style-square .step_options .option_block .amount {
    display: none !important;
}

.step-style-square .step_options .option_block .configurator-zoom {
    display: none !important;
}

.step-style-square .step_options .option_block .option_img {
    width: 100% !important;
    height: auto !important;
}

.step-style-square .step_options .option_block .option_img img {
    width: 100% !important;
    height: auto !important;
}

.step-style-square .step_options .option_block .option_block_content {
    height: auto !important;
}

.step-style-square .step_options .option_block.selected .option_block_content {
    border: none !important;
    background-color: #eee;
}

.step-style-square .step_options .option_block.selected .option_block_content::after {
    display: none !important;
}

.step-style-square .step_options .option_block .step_option_help {
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    line-height: 5px;
    padding-bottom: 5px;
}

.step-style-square .step_options .option_block .step_option_help h5 {
    margin: 0;
	font-size: .9rem;
}

.step-style-square .step_options .option_block .step_option_help p {
    margin: 0;
    font-size: .81rem;
	letter-spacing: -.05rem;
}

/* STEP - SQUARE1 */

@media (max-width: 551px){
.step-style-square1 .step_options .option_block {
    margin: 0 !important;
    width: 28% !important;
}}

.step-style-square11 {
    background: #fff !important;
    padding: 1px !important;
    margin: 0 !important;
    border: none !important;
}

.step-style-square11 label.title, .step-style-square11 .error-step, .step-style-square1 .info-step, .step-style-square1 .info_text, .step-style-square1 .clearfix {
    display: none !important;
}

.step-style-square1 .step_options .option_block {
    margin: 0 !important;
    width: 125px ;
}

.step-style-square1 .step_options .option_block .amount {
    display: none !important;
}

.step-style-square1 .step_options .option_block .configurator-zoom {
    display: none !important;
}

.step-style-square1 .step_options .option_block .option_img {
    width: 100% !important;
    height: auto !important;
}

.step-style-square1 .step_options .option_block .option_img img {
    width: 100% !important;
    height: auto !important;
}

.step-style-square1 .step_options .option_block .option_block_content {
    height: auto !important;
}

.step-style-square1 .step_options .option_block.selected .option_block_content {
    border: none !important;
    background-color: #eee;
}

.step-style-square1 .step_options .option_block.selected .option_block_content::after {
    display: none !important;
}

.step-style-square1 .step_options .option_block .step_option_help {
    position: absolute;
    bottom: 5px;;
    left: 0;
    width: 100%;
    line-height: 12px;
}

.step-style-square1 .step_options .option_block .step_option_help h5 {
    margin: 0;
}

.step-style-square1 .step_options .option_block .step_option_help p {
    margin: 0;
    font-size: 90%;
}

/* STEP - SQUARE - FULL WIDTH 1*/
.step-style-square1.step-style-square1-full-width .step_options .option_block {
    width: 100% !important;
}

.step-style-square1.step-style-square1-full-width .step_options .option_block .option_img {
    width: 33% !important;
    display: inline-block !important;
}

.step-style-square1.step-style-square1-full-width .step_options .option_block .step_option_help {
    width: 67% !important;
    float: right;
    text-align: left;
    line-height: 18px;
    padding-top: 50px;
    position: inherit;
}

/* STEP - SQUARE2 */
.step-style-square2 {
    background: #eee !important;
    padding: 1px !important;
    margin: 0 !important;
    border: none !important;
	width:350px;
}

.step-style-square2 label.title, .step-style-square2 .error-step, .step-style-square2 .info-step, .step-style-square2 .info_text, .step-style-square2 .clearfix {
    display: none !important;
}

.step-style-square2 .step_options .option_block {
    margin: 0 !important;
    width: 125px !important;
}

.step-style-square2 .step_options .option_block .amount {
    display: none !important;
}

.step-style-square2 .step_options .option_block .configurator-zoom {
    display: none !important;
}

.step-style-square2 .step_options .option_block .option_img {
    width: 100% !important;
    height: auto !important;
}

.step-style-square2 .step_options .option_block .option_img img {
    width: 100% !important;
    height: auto !important;
}

.step-style-square2 .step_options .option_block .option_block_content {
    height: auto !important;
}

.step-style-square2 .step_options .option_block.selected .option_block_content {
    border: none !important;
    background-color: #eee;
}

.step-style-square2 .step_options .option_block.selected .option_block_content::after {
    display: none !important;
}

.step-style-square2 .step_options .option_block .step_option_help {
    position: absolute;
    bottom: 5px;;
    width: 100%;
    line-height: 12px;
	left: 60%;
    top: 27%;
}

.step-style-square2 .step_options .option_block .step_option_help h5 {
    margin: 0;
}

.step-style-square2 .step_options .option_block .step_option_help p {
    margin: 0;
    font-size: 90%;
}

/* STEP - SQUARE - FULL WIDTH 2*/
.step-style-square2.step-style-square2-full-width .step_options .option_block {
    width: 100% !important;
}

.step-style-square2.step-style-square2-full-width .step_options .option_block .option_img {
    width: 33% !important;
    display: inline-block !important;
}

.step-style-square2.step-style-square2-full-width .step_options .option_block .step_option_help {
    width: 67% !important;
    float: right;
    text-align: left;
    line-height: 18px;
    padding-top: 50px;
    position: inherit;
}

/* STEP - SQUARE3 */
.step-style-square3 {
    padding: 1px !important;
    margin: 0 !important;
    border: none !important;
	width:350px;
}

.step-style-square3 label.title, .step-style-square3 .error-step, .step-style-square3 .info-step, .step-style-square3 .info_text, .step-style-square3 .clearfix {
    display: none !important;
}

.step-style-square3 .step_options .option_block {
    margin: 0 !important;
    width: 86px !important;
}

.step-style-square3 .step_options .option_block .amount {
    display: none !important;
}

.step-style-square3 .step_options .option_block .configurator-zoom {
    display: none !important;
}

.step-style-square3 .step_options .option_block .option_img {
    width: 100% !important;
    height: 125px !important;
}

.step-style-square3 .step_options .option_block .option_img img {
    width: 100% !important;
    height: auto !important;
}

.step-style-square3 .step_options .option_block .option_block_content {
    height: auto !important;
}

.step-style-square3 .step_options .option_block.selected .option_block_content {
    border: none !important;
    background-color: #eee;
}

.step-style-square3 .step_options .option_block.selected .option_block_content::after {
    display: none !important;
}

.step-style-square3 .step_options .option_block .step_option_help {
    position: absolute;
    bottom: 5px;;
    width: 100%;
    line-height: 12px;

}

.step-style-square3 .step_options .option_block .step_option_help h5 {
    margin: 0;
}

.step-style-square3 .step_options .option_block .step_option_help p {
    margin: 0;
    font-size: 90%;
}

/* STEP - SQUARE - FULL WIDTH 3*/
.step-style-square3.step-style-square3-full-width .step_options .option_block {
    width: 100% !important;
}

.step-style-square3.step-style-square3-full-width .step_options .option_block .option_img {
    width: 33% !important;
    display: inline-block !important;
}

.step-style-square3.step-style-square3-full-width .step_options .option_block .step_option_help {
    width: 67% !important;
    float: right;
    text-align: left;
    line-height: 18px;
    padding-top: 50px;
    position: inherit;
}

/* STEP - RADIO */
.step-style-radio-inline {
    padding: 5px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid #d6d4d4 !important;
    border-left: none !important;
    min-height: 60px;
}

.step-style-radio-inline > label.title {
   
    text-align: center !important;
    line-height: 1rem !important;
    text-align: left !important;
    padding-left: .2rem ; /*Cyril */
}

.step-style-radio-inline > label.title .step_title {
    text-transform: uppercase !important; /*Cyril */
    font-size: .8rem !important;
    font-weight: 600 !important; /*Cyril */
	
}


.step-style-radio-inline .step_title i {
    display: none !important;
}

.step-style-radio-inline .step_options {
    display: flex;
	gap: 5px;
	flex-wrap: wrap;
}

.step-style-radio-inline .step_options .option_block {
    min-height: auto !important;
    width: 50% !important;
    margin: 0 !important;
    line-height: initial !important;
    text-align: left !important;
}

.step-style-radio-inline .step_options .option_block .option_block_content {
    border: none !important;
    padding-left: 30px;
}

.step-style-radio-inline .step_options .option_block .product-name {
    height: 30px !important;
    line-height: initial !important;
    display: block !important;
    padding-left: 5px;
    font-size: 12px;
	overflow: hidden;
}

/*.step-style-radio-inline .step_options .option_block .amount {
    display: none !important;
}

.step-style-radio-inline .step_options .option_block .option_img {
	display:none;
}*/

.step-style-radio-inline .step_options .option_block .option_img {
	width:50px;
}
.step-style-radio-inline .step_options .option_block::before {
    content: '';
    width: 20px;
    height: 20px;
    border: 1px solid #AAA;
    position: absolute;
    top: 9px;
}

.step-style-radio-inline .step_options .option_block.selected::before {
    border-color: #333;
}

.step-style-radio-inline .step_options .option_block.selected .option_block_content::before {
	content: '';
    width: 16px;
    height: 16px;
    background: #d55335;
    position: absolute;
    top: 6px;
    left: 2px;
}

.step-style-radio-inline .step_options .option_block.selected .option_block_content::after {
    display: none !important;
}

.step-style-radio-inline .step_options .option_block .option_block_content .configurator-zoom {
    display: none !important;
}

/* STEP - COLOR */
.step-style-color {
    border: none !important;
    display: block;
  /*  width: 70% !important; Cyril*/
    width: 100% !important;
	float: left !important;
}

.step-style-color .title {
    padding: 0 !important;
    margin: 0 !important;
}

.step-style-color .title .step_title {
    padding: 0 !important;
    font-size: 0.8rem !important;
}

.step-style-color .title .step_title i {
    display: none !important;
}

.step-style-color .info_text p {
    font-size: 0.7rem !important;
}

.step-style-color .step_options .option_block {
    width: 55px !important;
    min-height: auto !important;
    height: auto !important;
    margin: 0 !important;
}

@media(max-width: 767px){
	.step-style-color .step_options .option_block,
	.step-style-color .step_options .option_block .option_img{
		width: 35px !important;
		height: 35px !important;
	}
	.step-style-square .step_options .option_block .option_img img {
		width: 75% !important;
		height: auto !important;
	}
}

.step-style-color .step_options .option_block .option_block_content {
    border: none !important;
}

.step-style-color .step_options .option_block .option_img {
	width: 53px;
    padding: 5px;
}

.step-style-color .step_options .option_block .product-name {
    display: none !important;
}

.step-style-color .step_options .option_block .amount {
    display: none !important;
}

.step-style-color .step_options .option_block .reduc {
    display: none !important;
}

.step-style-color .step_options .option_block.selected .option_block_content::after {
    display: none !important;
}

.step-style-color .step_options .option_block .quantity_wanted {
    display: none !important;
}

.step-style-color .step_options .option_block .configurator-zoom {
    display: none !important;
}

.step-style-color .info-step {
    display: none !important;
}

/* STEP - COVER */
#configurator-covers-step {
    float: right !important;
   /* width: 30% !important; Cyril*/ 
}

#configurator-covers-step .title {
    padding: 0 !important;
    margin: 0 !important;
}

#configurator-covers-step .title .step_title {
    padding: 0 !important;
    font-size: 0.8rem !important;
    width: 100%;
    display: block;
    text-align: left;
    margin-top: 6px;
}

#configurator-covers-step .title .step_subtitle {
    padding: 0 !important;
    font-size: 0.7rem !important;
    width: 100%;
    display: block;
    font-weight: 400;
    text-align: left;
    line-height: 1.2rem;
}

#configurator-covers-step .cover-step-item {
    margin: 0.5rem 0;
    border: 1px solid #fff;
}

#configurator-covers-step .cover-step-item:hover {
    cursor: pointer;
    border: 1px solid #999;
}

/* STEP - BUTTONS */

.steps-bottom-buttons {
    clear: both;
}

.steps-bottom-buttons .steps-bottom-btn {
    box-shadow: none;
    border: 1px #d6d4d4 solid;
    padding: 5px 10px;
    background: none;
    margin: 10px 2px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 600;
    font-size: .72rem;
    float: left;
	img{
		max-height: 18px;	
	}
}

.steps-bottom-buttons .steps-bottom-btn:hover {
    border-color: #666;
}

.steps-bottom-buttons .steps-bottom-btn:last-child {
    float: right;
    margin-right: 40px;
}

#configurator-nightday-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10100;
}

/* PREVIEW */
#configurator_preview {
    box-shadow: none;
    border: 1px #d6d4d4 solid;
    border-left: 0;
    padding: 0;
}

#configurator_preview .preview-heading {
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
    padding: 0.7rem;
    border-bottom: 1px solid #d6d4d4;
    line-height: 1.3rem;
}

#configurator_preview .preview-heading > span {
    display: block;
}

#configurator_preview .preview-heading > span.line-two {
    color: #888;
}

#configurator_preview .page-subheading {
    text-align: center;
    padding: .5rem;
    font-weight: 600;
}

#configurator_preview ul {
    text-align: center;
}

#configurator_preview ul > li {
    line-height: 16px;
}

#configurator_preview ul > li .option {
    color: #8a8a8a !important;
}

#configurator_preview ul > li::after {
    content: '+';
    display: block;
    font-weight: 600;
}

#configurator_preview ul > li:last-child:after {
    display: none;
}

#configurator_preview label {
    width: 100%;
    text-align: center;
    font-size: .7rem;
    font-weight: 400;
    margin: 0;
    margin-top: 5px;
}

#configurator_preview .configurator-qty {
    width: 100%;
}

#configurator_preview .configurator-qty > div {
    margin: auto;
    max-width: 80px;
}

#configurator_preview h3 {
    font-size: 24px;
    text-align: center;
}

#configurator_preview .configurator-add {
    margin: 0 10px;
}

#configurator_preview #add_configurator_to_cart {
      margin-top: 10px;
}

#configurator_preview .preview-description {
    margin-top: 1rem;
}

#configurator_preview .preview-description p {
    font-size: .65rem;
    margin: 0;
    text-align: center;
    line-height: 1.4rem;
    color: #8a8a8a !important;
}

#configurator_preview .preview-bottom-buttons {
    margin-top: 2rem;
}

#configurator_preview .preview-bottom-buttons .preview-bottom-btn {
    display: block;
    width: 100%;
    background: #fff;
    border: none;
    border-top: 1px solid #d6d4d4;
    text-align: left;
    padding: .3rem 0rem;
    color: #333;
    font-weight: 700;
    text-transform: uppercase;
    font-size: .8rem;
    cursor: pointer;
    line-height: .8rem;
}

#configurator_preview .preview-bottom-buttons .preview-bottom-btn small {
    color: #AAA;
    text-transform: initial;
}

#configurator_preview .preview-bottom-buttons .preview-bottom-btn img {
    padding: 0 .5rem 0 1rem;
    float: left;
}

/* --- LOADER MODERNE & FIN --- */
#loaderDropzone {
    position: absolute;
    z-index: 99999;
    
    /* 1. Taille Fixe et Raisonnable (plus de % qui déforment) */
    width: 50px;
    height: 50px;
    
    /* 2. Centrage Parfait (via calc pour ne pas gêner l'animation transform) */
    top: calc(50% - 25px);
    left: calc(50% - 25px);

    /* 3. Le Design : Fin et aux couleurs de la marque */
    border: 3px solid rgba(213, 83, 53, 0.1); /* Cercle de fond (Terracotta très pâle) */
    border-top: 3px solid #D55335; /* Cercle actif (Terracotta vif) */
    border-radius: 50%;

    /* 4. Animation plus fluide */
    -webkit-animation: spin 0.8s linear infinite;
    animation: spin 0.8s linear infinite;
    
    /* Optionnel : Une petite ombre pour le détacher du fond */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    background: white; /* Fond blanc pour cacher ce qu'il y a derrière le loader */
}

/* On garde les keyframes d'origine qui fonctionnent très bien */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.ismobile .step-style-color {
    width: 100% !important;
}

.ismobile .akg-img {
    position: absolute !important;
    top: 560px !important;
}

.ismobile .pp-left-column, .ismobile .pp-right-column {
    float: none;
    width: 100%;
}

.ismobile .step_group { width: 100%; }
#product .ismobile .page-content .product-leftside {
    width: 90%;
    margin-left: 5%;
}

@media (max-width: 991px) {
    .ismobile .akg-img {
        top: 600px !important;
    }
}
@media (max-width: 767px) {
    #product .ismobile .page-content .product-leftside {
        margin: 0;
        width: 100%;
    }
    #main.ismobile .akg-img {
        position: absolute !important;
        top: 555px !important;
        padding: 0 15px !important;
    }
}

@media (min-width: 820px) {
    .steps-bottom-buttons .steps-bottom-btn {  padding: 5px; }
    #main.ismobile .akg-img {
        position: absolute !important;
       /* top: 455px !important;*/
	   top: 600px !important; /*Cyril */
    }
}

@media (max-width: 1180px) and (min-width: 821px) {
    .steps-bottom-buttons .steps-bottom-btn { margin: 10px 5px !important; padding: 5px; }
    #main.ismobile .akg-img {
        position: absolute !important;
      /*  top: 400px !important; */
	  top: 600px !important;  /*Cyril */
	  
    }
}

/* ==========================================================================
   FORCE L'ÉCLAIRAGE DES BOULES (DÉTECTION ÉTAT NUIT)
   ========================================================================== */

/* On cible le calque UNIQUEMENT s'il n'est pas en display:none */
#image-block:has(#configurator-nightday-layer:not([style*="display: none"])) .dmviewer2d-dropzone-item {
   /* background-color: rgba(213, 83, 53, 0.8) !important; */
    background-color: rgb(74 74 74) !important; 
    z-index: 100001 !important; 
    
    /* Halo lumineux puissant */
    box-shadow: 0 0 20px rgba(180 158 49 / 13%), 
                0 0 40px rgba(255, 255, 255, 0.6) !important;
    
    opacity: 1 !important;
    visibility: visible !important;
}

/* Éclairage de la boule interne en mode nuit */
#image-block:has(#configurator-nightday-layer:not([style*="display: none"])) .dmviewer2d-dropzone-item img {
    filter: brightness(1.1) contrast(1) !important; /* On remet un peu de peps ! */
    opacity: 1 !important;
}

/* Cache le tooltip uniquement quand il fait nuit */
#image-block:has(#configurator-nightday-layer:not([style*="display: none"])) .dmviewer2d-dropzone-item::after {
    content: none !important;
    display: none !important;
}