/**
 * LXS Shop · Menu / Composite product — frontend configurator
 * v1.16.4 — Direction B stacked + customizable brand color
 *
 * All accent colors reference --lxs-mc-accent (default red #dc2626).
 * The brand color is injected by PHP from the lxs_shop_brand_color option
 * (Réglages → Style). To change the brand, edit the setting — no CSS rebuild.
 */

:root {
    --lxs-mc-accent: #dc2626;
    --lxs-mc-accent-tint: #fef2f2;
    --lxs-mc-accent-dark: #991b1b;
    --lxs-mc-accent-border: #fca5a5;
}

.lxs-mc {
    margin: 24px 0;
    font-family: -apple-system, "Segoe UI", Inter, Roboto, sans-serif;
    color: #0f172a;
    /* v1.16.8 — force the configurator to take the full width of its
       parent so the 2-column grids of formulas/options/extras have room
       to breathe. Themes typically constrain .summary > * to a narrower
       column; we override that. */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.lxs-mc * { box-sizing: border-box; }

.lxs-mc-section { margin-bottom: 22px; }
.lxs-mc-section.is-hidden,
.lxs-mc-group.is-hidden { display: none; }

.lxs-mc-section-label {
    /* v1.16.10 — réduction de 11px à 10px (sentence case kept uppercase
       but lighter weight + tighter spacing for less prominence) */
    font-size: 10px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.lxs-mc-required { color: var(--lxs-mc-accent); font-weight: 700; }
.lxs-mc-optional {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: #94a3b8;
    font-size: 11px;
    margin-left: 4px;
}

/* Formula cards — v1.16.8 : strict 2-col grid (always 2 per row).
   align-items: start so cards with different heights (linked products
   lists) stay top-aligned. */
.lxs-mc-modes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: start;
}
.lxs-mc-formula-card {
    position: relative;
    display: block;
    background: #ffffff;
    /* v1.16.12 — bordure accent au repos (fine) comme demandé.
       Même couleur et épaisseur qu'une formule sélectionnée. */
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px 18px;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
    min-width: 0;
}
.lxs-mc-formula-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.lxs-mc-formula-card:hover { border-color: #cbd5e1; }
.lxs-mc-formula-card.is-selected {
    /* v1.18.7 — selected state is communicated by the red border alone.
       The background stays white (no tint) per design feedback : the
       previous tinted red background was visually too aggressive on
       product pages with already-red brand elements. */
    border-color: var(--lxs-mc-accent);
}

.lxs-mc-formula-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.lxs-mc-formula-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.lxs-mc-formula-name {
    /* v1.16.12 — réduit de 16px à 14px */
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.2px;
}
.lxs-mc-formula-card.is-selected .lxs-mc-formula-name {
    color: var(--lxs-mc-accent-dark);
}
.lxs-mc-formula-selected-pill {
    /* v1.16.9 — pill removed per design feedback. The accent color
       (red border + tinted background) is sufficient to communicate
       the selected state. The pill made Solo and Menu look uneven
       because it pushed the price text and changed perceived width. */
    display: none !important;
}
.lxs-mc-formula-price {
    /* v1.16.12 — réduit de 18px à 15px */
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.3px;
    flex-shrink: 0;
}
.lxs-mc-formula-card.is-selected .lxs-mc-formula-price {
    color: var(--lxs-mc-accent-dark);
}

.lxs-mc-formula-includes {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.lxs-mc-formula-includes li {
    font-size: 12px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 8px;
}
.lxs-mc-formula-includes-dot {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    background: #cbd5e1;
    flex-shrink: 0;
    display: inline-block;
}
.lxs-mc-formula-includes-img {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}
.lxs-mc-formula-card.is-selected .lxs-mc-formula-includes li {
    color: var(--lxs-mc-accent-dark);
}
.lxs-mc-formula-card.is-selected .lxs-mc-formula-includes-dot {
    background: var(--lxs-mc-accent);
    opacity: 0.7;
}

/* Options + extras — v1.16.8 : strict 2-col grid */
.lxs-mc-options,
.lxs-mc-extras {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.lxs-mc-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #ffffff;
    /* v1.16.12 — bordure accent au repos partout, même couleur et
       épaisseur que la bordure d'une formule (1px var(--lxs-mc-accent)) */
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}
.lxs-mc-option:hover {
    /* léger dim pour donner un signal hover sans changer la bordure */
    background: #fafafa;
}
.lxs-mc-option.is-selected {
    /* v1.18.7 — white background, red border only */
    border-color: var(--lxs-mc-accent);
}

/* v1.18.9 — Aggressive override : force white background on ALL
   LXS Menu selection states, whatever the class. Some themes or
   legacy stylesheets may still apply a tinted background on
   .is-selected / .is-active / .is-checked — this catch-all ensures
   the pattern "white background + red border when selected" is
   always enforced. */
.lxs-mc-formula-card,
.lxs-mc-formula-card.is-selected,
.lxs-mc-formula-card[aria-checked="true"],
.lxs-mc-option,
.lxs-mc-option.is-selected,
.lxs-mc-option[aria-checked="true"],
.lxs-mc-card,
.lxs-mc-card.is-selected,
.lxs-mc-card.is-active,
.lxs-mc-thumb,
.lxs-mc-thumb.is-selected,
.lxs-mc-thumb.is-active {
    background: #ffffff !important;
}
.lxs-mc-formula-card.is-selected,
.lxs-mc-option.is-selected,
.lxs-mc-card.is-selected,
.lxs-mc-card.is-active,
.lxs-mc-thumb.is-selected,
.lxs-mc-thumb.is-active {
    border-color: var(--lxs-mc-accent) !important;
}
.lxs-mc-option input {
    margin: 0;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--lxs-mc-accent);
}
.lxs-mc-option-label {
    flex: 1;
    /* v1.16.12 — réduit de 13px à 12px */
    font-size: 12px;
    font-weight: 500;
    color: #0f172a;
}
.lxs-mc-option.is-selected .lxs-mc-option-label {
    font-weight: 600;
    color: var(--lxs-mc-accent-dark);
}
.lxs-mc-option-supplement {
    /* v1.16.12 — réduit de 12px à 11px */
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    flex-shrink: 0;
}
.lxs-mc-option.is-selected .lxs-mc-option-supplement {
    color: var(--lxs-mc-accent);
    font-weight: 700;
}

.lxs-mc-group-error {
    /* v1.16.13 — CSS-first hiding. Default is `display: none !important`
       which wins over any theme that might override [hidden] attribute
       or add unexpected display rules. The JS toggles the `.is-shown`
       class after user interaction; no [hidden] attribute manipulation. */
    display: none !important;
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--lxs-mc-accent-tint);
    border: 1px solid var(--lxs-mc-accent-border);
    border-radius: 8px;
    font-size: 12px;
    color: var(--lxs-mc-accent-dark);
    font-weight: 500;
}
.lxs-mc-group-error.is-shown {
    display: block !important;
}
.lxs-mc-group.is-invalid .lxs-mc-section-label {
    color: var(--lxs-mc-accent-dark);
}

.lxs-mc-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    margin-top: 8px;
    background: #0f172a;
    color: #ffffff;
    border-radius: 12px;
}
.lxs-mc-total-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.7;
}
.lxs-mc-total-value {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.single_add_to_cart_button.lxs-mc-btn-disabled,
button.lxs-mc-btn-disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

@media (max-width: 600px) {
    .lxs-mc-formula-name { font-size: 15px; }
    .lxs-mc-formula-price { font-size: 16px; }
    .lxs-mc-total-value { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .lxs-mc-formula-card,
    .lxs-mc-option,
    .lxs-mc-section { transition: none !important; }
}