/**
 * Styles complets pour le calculateur LIGNA - Version compacte optimisée
 * Inclut tous les éléments avec des espacements réduits pour une interface plus compacte
 */

/* Import de la police Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* ===== STYLES DE BASE ===== */

/* Conteneur principal */
#calculator-container {
    font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: inherit;
    line-height: 1.4; /* Ligne plus compacte */
    max-width: 100%;
    box-sizing: border-box;
}

/* Contenu du calculateur */
.calculator-content {
    padding: 5px 0; /* Réduit de 10px à 5px */
}

/* Groupes de formulaire */
.form-group {
    margin-bottom: 16px; /* Réduit de 25px à 16px */
}

/* Labels */
.form-group label {
    display: block;
    font-size: 0.9rem; /* Réduit de 0.95rem à 0.9rem */
    font-weight: 500;
    margin-bottom: 6px; /* Réduit de 10px à 6px */
    color: #4a5568;
    font-family: 'Poppins', sans-serif;
}

/* Champs de formulaire */
.form-group select, 
.form-group input {
    width: 100%;
    padding: 9px 12px; /* Réduit de 12px 15px à 9px 12px */
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.9rem; /* Légèrement réduit */
    color: #2d3748;
    background-color: #fff;
    transition: border-color 0.2s;
    font-family: 'Poppins', sans-serif;
    font-style: normal !important;
}

/* Style pour le sélecteur avec flèche */
.form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24' stroke='%23a0aec0'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center; /* Déplacé légèrement */
    padding-right: 35px; /* Réduit de 40px à 35px */
}

/* Placeholder */
.form-group input::placeholder {
    color: #a0aec0;
    font-style: normal !important;
}

/* Effet focus */
.form-group select:focus, 
.form-group input:focus {
    outline: none;
    border-color: #63b3ed;
    box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.1); /* Réduit de 3px à 2px */
}

/* Groupe de boutons radio */
.radio-group {
    display: flex;
    gap: 18px; /* Réduit de 25px à 18px */
}

.radio-option {
    display: flex;
    align-items: center;
}

/* Style pour les boutons radio */
.radio-option input[type="radio"] {
    width: 18px; /* Réduit de 20px à 18px */
    height: 18px; /* Réduit de 20px à 18px */
    margin-right: 6px; /* Réduit de 8px à 6px */
    accent-color: #012138;
}

.radio-option label {
    margin-bottom: 0;
    font-weight: 400;
}

/* Section résultat */
.result-section {
    margin-top: 20px; /* Réduit de 30px à 20px */
    background-color: #f8fafc;
    border-radius: 6px; /* Réduit de 8px à 6px */
    padding: 15px; /* Réduit de 20px à 15px */
    transition: background-color 0.5s;
}

.result-title {
    font-size: 0.9rem; /* Réduit de 0.95rem à 0.9rem */
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 6px; /* Réduit de 10px à 6px */
    font-family: 'Poppins', sans-serif;
}

.result-value {
    font-size: 1.4rem; /* Réduit de 1.5rem à 1.4rem */
    font-weight: 700;
    color: #012138;
    font-family: 'Poppins', sans-serif;
}

/* Animation pour le changement de résultat */
@keyframes highlight {
    0% { background-color: #e6f7ff; }
    100% { background-color: #f8fafc; }
}

.highlight {
    animation: highlight 1s ease;
}

/* Empêcher les flèches d'incrémentation des champs numériques */
#calculator-container input[type="number"] {
    -moz-appearance: textfield;
}

#calculator-container input[type="number"]::-webkit-inner-spin-button,
#calculator-container input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* S'assurer que les textes ne sont jamais en italique */
#calculator-container *,
#calculator-container label,
#calculator-container input,
#calculator-container select,
#calculator-container option,
#calculator-container .result-title,
#calculator-container .result-value {
    font-style: normal !important;
}

/* ===== MASQUAGE DU SÉLECTEUR DE PRODUIT ===== */

/* Masquage renforcé du sélecteur de produit */
.product-selection,
.form-group.product-selection,
#calculator-container .form-group.product-selection,
div.form-group.product-selection,
.product-selection[style*="display"],
.calculator-content > .form-group:first-child,
.form-group:has(#ligna-product),
form > div:has(> #ligna-product) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    max-height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
}

/* Règle spécifique pour mobile */
@media (max-width: 767px) {
    .product-selection,
    .form-group.product-selection,
    #calculator-container .form-group.product-selection,
    .calculator-content .form-group:first-child,
    *[id*="product-select"],
    *[id*="ligna-product"],
    label[for="ligna-product"] {
        display: none !important;
        visibility: hidden !important;
    }
}

/* ===== SOLUTION BITRIX24 ===== */

/* S'assurer que la modal est au-dessus de tout */
.modal-calc {
    z-index: 2147483647 !important;
}

.modal-calc .inner {
    z-index: 2147483647 !important; 
}

.modal-calc-overlay {
    z-index: 2147483646 !important;
}

/* ===== OPTIMISATION DES MARGES POUR PC ET MOBILE ===== */

/* ---- Optimisations pour ordinateurs ---- */
@media screen and (min-width: 768px) {
    /* Conteneur avec padding réduit */
    #calculator-container {
        padding: 0 10px !important; /* Réduit de 12px à 10px */
    }
    
    /* Groupes de formulaire encore plus compacts */
    .form-group {
        margin-bottom: 14px !important; /* Réduit de 20px à 14px */
    }
    
    /* Espacement des labels réduit */
    .form-group label {
        margin-bottom: 5px !important; /* Réduit de 8px à 5px */
    }
    
    /* Champs de saisie plus compacts */
    .form-group select, 
    .form-group input {
        padding: 8px 12px !important; /* Réduit de 10px 14px à 8px 12px */
    }
    
    /* Groupe radio plus serré */
    .radio-group {
        gap: 15px !important; /* Réduit de 20px à 15px */
    }
    
    /* Section résultat plus compacte */
    .result-section {
        margin-top: 18px !important; /* Réduit de 25px à 18px */
        padding: 14px !important; /* Réduit de 18px à 14px */
    }
}

/* ---- Optimisations pour tablettes et grands téléphones ---- */
@media screen and (max-width: 767px) and (min-width: 481px) {
    #calculator-container {
        padding: 0 8px !important; /* Réduit de 10px à 8px */
    }
    
    .form-group {
        margin-bottom: 12px !important; /* Réduit de 18px à 12px */
    }
    
    .form-group label {
        margin-bottom: 5px !important; /* Réduit de 7px à 5px */
    }
    
    .form-group select, 
    .form-group input {
        padding: 7px 10px !important; /* Réduit de 9px 12px à 7px 10px */
    }
    
    .radio-group {
        gap: 12px !important; /* Réduit de 16px à 12px */
    }
    
    .result-section {
        margin-top: 16px !important; /* Réduit de 22px à 16px */
        padding: 12px !important; /* Réduit de 16px à 12px */
    }
}

/* ---- Optimisations pour téléphones moyens ---- */
@media screen and (max-width: 480px) and (min-width: 376px) {
    #calculator-container {
        padding: 0 6px !important; /* Réduit de 10px à 6px */
    }
    
    .form-group {
        margin-bottom: 10px !important; /* Réduit de 16px à 10px */
    }
    
    .form-group label {
        margin-bottom: 4px !important; /* Réduit de 6px à 4px */
        font-size: 0.86rem !important; /* Réduit de 0.92rem à 0.86rem */
    }
    
    .form-group select, 
    .form-group input {
        padding: 6px 10px !important; /* Réduit de 8px 12px à 6px 10px */
        font-size: 0.86rem !important; /* Légèrement réduit */
    }
    
    .radio-group {
        gap: 10px !important; /* Réduit de 14px à 10px */
    }
    
    .radio-option input[type="radio"] {
        width: 16px !important; /* Réduit de 18px à 16px */
        height: 16px !important; /* Réduit de 18px à 16px */
    }
    
    .result-section {
        margin-top: 14px !important; /* Réduit de 20px à 14px */
        padding: 10px !important; /* Réduit de 14px à 10px */
    }
}

/* ---- Optimisations pour petits téléphones (iPhone SE, etc.) ---- */
@media screen and (max-width: 375px) {
    #calculator-container {
        padding: 0 5px !important; /* Réduit de 8px à 5px */
    }
    
    .form-group {
        margin-bottom: 8px !important; /* Réduit de 14px à 8px */
    }
    
    .form-group label {
        margin-bottom: 3px !important; /* Réduit de 5px à 3px */
        font-size: 0.85rem !important; /* Réduit de 0.9rem à 0.85rem */
    }
    
    .form-group select, 
    .form-group input {
        padding: 6px 8px !important; /* Réduit de 8px 10px à 6px 8px */
        font-size: 0.85rem !important; /* Réduit de 0.92rem à 0.85rem */
    }
    
    .radio-group {
        gap: 8px !important; /* Réduit de 12px à 8px */
    }
    
    .radio-option input[type="radio"] {
        width: 14px !important; /* Réduit de 16px à 14px */
        height: 14px !important; /* Réduit de 16px à 14px */
        margin-right: 4px !important; /* Réduit de 6px à 4px */
    }
    
    .result-section {
        margin-top: 12px !important; /* Réduit de 18px à 12px */
        padding: 10px !important; /* Réduit de 12px à 10px */
    }
    
    .result-title {
        font-size: 0.85rem !important; /* Réduit de 0.9rem à 0.85rem */
        margin-bottom: 4px !important; /* Réduit de 6px à 4px */
    }
    
    .result-value {
        font-size: 1.25rem !important; /* Réduit de 1.4rem à 1.25rem */
    }
}

/* ===== MARGES SPÉCIFIQUES POUR LA MODAL ===== */

/* Styles pour les marges sur mobile */
@media screen and (max-width: 767px) {
    .single-product .modal-calc .inner .calc-body, 
    .woocommerce .modal-calc .inner .calc-body,
    body .modal-calc .inner .calc-body,
    .modal-calc .inner .calc-body,
    .calc-body {
        padding: 15px 12px !important; /* Réduit de 20px 15px à 15px 12px */
    }
}

/* S'assurer que les modifications de padding de la modal sont appliquées sur tous les écrans */
.modal-calc .inner .calc-body {
    padding-bottom: 15px !important; /* Réduit de 20px à 15px */
}

/* ===== Ajustements pour les très petits écrans et la modal ===== */
@media screen and (max-width: 375px) {
    /* S'assurer que les marges latérales dans la modal sont optimisées */
    .single-product .modal-calc .inner .calc-body, 
    .woocommerce .modal-calc .inner .calc-body,
    .modal-calc .inner .calc-body {
        padding: 12px 8px !important; /* Réduit de 15px 10px à 12px 8px */
    }
}