/**
 * MFM Configurateur Bâche pour pergola
 *
 * Styles propres au configurateur `pergola`, chargés après configurator.css (styles communs aux configurateurs).
 *
 * @package Baches_MFM
 */

/* Cote en cours de saisie (longueur, largeur, emplacement d'une solive) */
#mfm-configurator-svg[data-active-dim^="joist-"] .mfm-small-cotation {
    opacity: 0.35;
}

#mfm-configurator-svg[data-active-dim="joist-0"] [data-dim="joist-0"],
#mfm-configurator-svg[data-active-dim="joist-1"] [data-dim="joist-1"],
#mfm-configurator-svg[data-active-dim="joist-2"] [data-dim="joist-2"],
#mfm-configurator-svg[data-active-dim="joist-3"] [data-dim="joist-3"],
#mfm-configurator-svg[data-active-dim="joist-4"] [data-dim="joist-4"],
#mfm-configurator-svg[data-active-dim="joist-5"] [data-dim="joist-5"],
#mfm-configurator-svg[data-active-dim="joist-6"] [data-dim="joist-6"],
#mfm-configurator-svg[data-active-dim="joist-7"] [data-dim="joist-7"],
#mfm-configurator-svg[data-active-dim="joist-8"] [data-dim="joist-8"],
#mfm-configurator-svg[data-active-dim="joist-9"] [data-dim="joist-9"] {
    opacity: 1;
    animation: mfm-cote-pulse 0.45s ease-in-out 2;
}

/* Étape 2 : rappel du forfait jusqu'à 10 m² */
.mfm-configurator-pergola .mfm-pergola-flat-note {
    margin: 10px 0 0;
}

/* Étape 3 : en-tête des fixations + bouton photo */
.mfm-configurator-pergola .mfm-pergola-sides-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.mfm-configurator-pergola .mfm-pergola-sides-head .mfm-field-label {
    margin: 0;
}

/* Étape 3 : fixation par côté, lignes compactes, listes alignées d'une ligne à l'autre */
.mfm-configurator-pergola .mfm-pergola-sides {
    margin: 0 0 10px;
}

.mfm-configurator-pergola .mfm-pergola-sides .mfm-side-finish-row {
    padding: 10px 12px;
    margin-bottom: 8px;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.mfm-configurator-pergola .mfm-pergola-sides .mfm-side-finish-row.is-highlighted {
    border-color: #0F4C81;
    background-color: #F0F6FC;
}

#mfm-configurator-wrapper.mfm-configurator-pergola .mfm-pergola-sides .mfm-side-finish-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.mfm-configurator-pergola .mfm-side-len-val {
    font-size: 11.5px;
    font-weight: 600;
    color: #64748b;
}

.mfm-configurator-pergola .mfm-pergola-finish-desc {
    margin: 0 0 20px;
}

#mfm-configurator-wrapper.mfm-configurator-pergola .mfm-jonc-color-row {
    margin: 0 0 14px;
}

#mfm-configurator-wrapper.mfm-configurator-pergola .mfm-jonc-color-row[hidden] {
    display: none;
}

/* Étape 3 : solives (nombre, puis emplacement de chacune) */
.mfm-configurator-pergola .mfm-pergola-joists {
    padding: 14px 0 4px;
    border-top: 1px solid #f1f5f9;
}

.mfm-configurator-pergola .mfm-joist-count-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.mfm-configurator-pergola .mfm-joist-count-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    font-size: 14px;
    color: #0f172a;
}

.mfm-configurator-pergola .mfm-joist-count-label [data-joists-price] {
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
}

.mfm-configurator-pergola .mfm-joist-positions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    margin-top: 10px;
}

.mfm-configurator-pergola .mfm-joist-positions[hidden],
.mfm-configurator-pergola .mfm-joist-positions-help[hidden],
.mfm-configurator-pergola .mfm-joist-field .mfm-dim-error[hidden] {
    display: none;
}

.mfm-configurator-pergola .mfm-joist-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: #334155;
}

@media (max-width: 360px) {
    .mfm-configurator-pergola .mfm-joist-positions {
        gap: 10px;
    }
}