/* =============================================================
   Ski Marseille — tarifs-front.css
   Widget grille tarifaire — affichage frontend
   ============================================================= */

/* ── Conteneur groupe ──────────────────────────────────────── */
.scmsa-tarif-group {
    background: var(--color-white, #fff);
    border: 1px solid var(--color-border, #dde3ed);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    margin-bottom: var(--space-xl, 2rem);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.08));
}

/* ── Titre ─────────────────────────────────────────────────── */
.scmsa-tarif-group__title {
    margin: 0 !important;
    padding: var(--space-md, 1rem) var(--space-lg, 1.5rem);
    font-family: var(--font-heading, 'Oswald', sans-serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-white, #fff);
    background: var(--color-primary, #0a2342);
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* ── Description (post_content du groupe) ──────────────────── */
.scmsa-tarif-group__desc {
    padding: var(--space-sm, .5rem) var(--space-lg, 1.5rem);
    background: var(--color-snow, #f0f7ff);
    border-bottom: 1px solid var(--color-border, #dde3ed);
    font-size: .88rem;
    color: var(--color-text-muted, #6b7280);
}
.scmsa-tarif-group__desc p { margin: 0; }

/* ── Tableau ────────────────────────────────────────────────── */
.scmsa-tarif-group__table {
    width: 100%;
    border-collapse: collapse;
    font-size: .93rem;
}

.scmsa-tarif-group__table thead th {
    padding: 9px var(--space-lg, 1.5rem);
    text-align: left;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--color-text-muted, #6b7280);
    background: var(--color-snow, #f0f7ff);
    border-bottom: 2px solid var(--color-border, #dde3ed);
    white-space: nowrap;
}

.scmsa-tarif-group__table .col-unit,
.scmsa-tarif-group__table .col-subtotal {
    text-align: right;
}
.scmsa-tarif-group__table .col-qty {
    text-align: center;
    white-space: nowrap;
}

.scmsa-tarif-group__table tbody td {
    padding: 11px var(--space-lg, 1.5rem);
    border-bottom: 1px solid var(--color-border, #dde3ed);
    vertical-align: middle;
    color: var(--color-text, #1a1a2e);
    transition: background .15s;
}

/* Dernière ligne sans bordure basse */
.scmsa-tarif-group__table tbody tr:last-child td {
    border-bottom: none;
}

/* ── Ligne sélectionnée (qty > 0) ──────────────────────────── */
.scmsa-tarif-line.is-selected > td {
    background: rgba(10, 35, 66, .035);
}
.scmsa-tarif-line.is-selected .scmsa-line-subtotal {
    font-weight: 700;
    color: var(--color-primary, #0a2342);
}

/* ── Libellé et note ────────────────────────────────────────── */
.scmsa-line-label {
    display: block;
    font-weight: 500;
    line-height: 1.4;
}

.scmsa-tarif-note {
    display: block;
    font-size: .78rem;
    color: var(--color-text-muted, #6b7280);
    margin-top: 2px;
    font-style: italic;
}

/* ── Badge nominatif ────────────────────────────────────────── */
.scmsa-tarif-badge {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 1px 6px;
    border-radius: 3px;
    margin-top: 4px;
    vertical-align: middle;
    cursor: help;
}
.scmsa-tarif-badge--nominatif {
    background: rgba(230, 81, 0, .1);
    color: var(--color-accent, #e65100);
    border: 1px solid rgba(230, 81, 0, .25);
}

/* ── Prix unitaire ──────────────────────────────────────────── */
.scmsa-price {
    font-weight: 600;
    white-space: nowrap;
    color: var(--color-text, #1a1a2e);
}
.scmsa-price--free {
    color: var(--color-rando, #2e7d32);
    font-weight: 600;
}

/* ── Contrôle de quantité (+/−/input) ──────────────────────── */
.scmsa-qty-control {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border, #dde3ed);
    border-radius: var(--radius-sm, 4px);
    overflow: hidden;
    background: var(--color-white, #fff);
}

.scmsa-qty-btn {
    width: 34px;
    height: 34px;
    background: var(--color-snow, #f0f7ff);
    border: none;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-primary, #0a2342);
    transition: background .15s, color .15s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}
.scmsa-qty-btn:hover {
    background: var(--color-primary, #0a2342);
    color: var(--color-white, #fff);
}
.scmsa-qty-btn:focus-visible {
    outline: 2px solid var(--color-primary-light, #1565c0);
    outline-offset: -2px;
    z-index: 1;
}

.scmsa-qty-input {
    width: 50px;
    height: 34px;
    border: none;
    border-left: 1px solid var(--color-border, #dde3ed);
    border-right: 1px solid var(--color-border, #dde3ed);
    text-align: center;
    font-size: .95rem;
    font-family: inherit;
    font-weight: 700;
    color: var(--color-text, #1a1a2e);
    background: var(--color-white, #fff);
    -moz-appearance: textfield;
    appearance: textfield;
}
.scmsa-qty-input::-webkit-outer-spin-button,
.scmsa-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.scmsa-qty-input:focus {
    outline: none;
    background: var(--color-snow, #f0f7ff);
}

/* ── Sous-total de ligne ────────────────────────────────────── */
.scmsa-line-subtotal {
    white-space: nowrap;
    color: var(--color-text-muted, #6b7280);
    font-size: .9rem;
    min-width: 70px;
    display: inline-block;
}

/* ── Pied de groupe — sous-total ────────────────────────────── */
.scmsa-tarif-group__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md, 1rem) var(--space-lg, 1.5rem);
    background: var(--color-snow, #f0f7ff);
    border-top: 2px solid var(--color-border, #dde3ed);
}

.scmsa-tarif-group__subtotal-label {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--color-text-muted, #6b7280);
}

.scmsa-tarif-group__subtotal-value {
    font-family: var(--font-heading, 'Oswald', sans-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary, #0a2342);
    transition: color .2s;
}

/* ── Responsive mobile ──────────────────────────────────────── */
@media ( max-width: 640px ) {
    /* Masquer la colonne "Prix unitaire" sur mobile */
    .scmsa-tarif-group__table thead th.col-unit,
    .scmsa-tarif-group__table tbody td.col-unit {
        display: none;
    }

    .scmsa-tarif-group__table thead th,
    .scmsa-tarif-group__table tbody td {
        padding: 9px var(--space-md, 1rem);
    }

    .scmsa-tarif-group__title {
        font-size: 1rem;
        padding: var(--space-sm, .5rem) var(--space-md, 1rem);
    }

    .scmsa-tarif-group__footer {
        padding: var(--space-sm, .5rem) var(--space-md, 1rem);
    }

    .scmsa-qty-btn  { width: 30px; height: 30px; }
    .scmsa-qty-input { width: 44px; height: 30px; }
}

/* =============================================================
   PANNEAU RÉCAPITULATIF TOTAL — [scmsa_tarifs_total]
   ============================================================= */

/* ── Conteneur principal ────────────────────────────────────── */
.scmsa-tarifs-total {
    background: var(--color-white, #fff);
    border: 2px solid var(--color-primary, #0a2342);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,.12));
    /* Sticky en sidebar si l'intégrateur le souhaite — opt-in via classe */
    font-size: .93rem;
}

/* ── En-tête ────────────────────────────────────────────────── */
.scmsa-tarifs-total__header {
    background: var(--color-primary, #0a2342);
    padding: var(--space-md, 1rem) var(--space-lg, 1.5rem);
}

.scmsa-tarifs-total__title {
    margin: 0 !important;
    font-family: var(--font-heading, 'Oswald', sans-serif);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--color-white, #fff);
}

/* ── Corps ──────────────────────────────────────────────────── */
.scmsa-tarifs-total__body {
    padding: var(--space-md, 1rem) var(--space-lg, 1.5rem);
    min-height: 60px;
}

.scmsa-tarifs-total__empty {
    margin: 0;
    color: var(--color-text-muted, #6b7280);
    font-style: italic;
    font-size: .88rem;
    text-align: center;
    padding: var(--space-md, 1rem) 0;
}

/* ── Groupe dans le récap ───────────────────────────────────── */
.scmsa-total-group {
    margin-bottom: var(--space-md, 1rem);
    padding-bottom: var(--space-md, 1rem);
    border-bottom: 1px solid var(--color-border, #dde3ed);
}
.scmsa-total-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.scmsa-total-group__name {
    margin: 0 0 var(--space-sm, .5rem);
    font-weight: 700;
    font-family: var(--font-heading, 'Oswald', sans-serif);
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-primary, #0a2342);
}

/* ── Lignes du récap ────────────────────────────────────────── */
.scmsa-total-group__lines {
    list-style: none;
    margin: 0 0 var(--space-sm, .5rem);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.scmsa-total-line {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: baseline;
    gap: var(--space-sm, .5rem);
    font-size: .87rem;
    color: var(--color-text, #1a1a2e);
}

.scmsa-total-line__desc {
    line-height: 1.35;
}

.scmsa-total-line__qty {
    color: var(--color-text-muted, #6b7280);
    white-space: nowrap;
    font-size: .82rem;
}

.scmsa-total-line__sub {
    font-weight: 600;
    white-space: nowrap;
    text-align: right;
    min-width: 70px;
}

/* Indicateur nominatif dans le récap */
.scmsa-total-nom {
    color: var(--color-accent, #e65100);
    font-size: .75rem;
    margin-left: 3px;
    cursor: help;
}

/* ── Sous-total du groupe ───────────────────────────────────── */
.scmsa-total-group__subtotal {
    display: flex;
    justify-content: space-between;
    margin: 0;
    font-size: .8rem;
    font-weight: 600;
    color: var(--color-text-muted, #6b7280);
    padding-top: var(--space-xs, .25rem);
    border-top: 1px dashed var(--color-border, #dde3ed);
}

/* ── Pied : grand total + bouton ────────────────────────────── */
.scmsa-tarifs-total__footer {
    border-top: 2px solid var(--color-primary, #0a2342);
    background: var(--color-snow, #f0f7ff);
    padding: var(--space-md, 1rem) var(--space-lg, 1.5rem);
    display: flex;
    flex-direction: column;
    gap: var(--space-md, 1rem);
}

.scmsa-tarifs-total__grand-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.scmsa-tarifs-total__grand-label {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--color-text-muted, #6b7280);
}

.scmsa-tarifs-total__grand-value {
    font-family: var(--font-heading, 'Oswald', sans-serif);
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--color-primary, #0a2342);
    transition: color .2s;
}

/* Grand total en accent quand le panier est non vide */
.scmsa-tarifs-total.has-items .scmsa-tarifs-total__grand-value {
    color: var(--color-accent, #e65100);
}

/* ── Bouton Commander ───────────────────────────────────────── */
.scmsa-total-order-btn {
    width: 100%;
    justify-content: center;
    opacity: 1;
    transition: opacity .2s, filter .2s;
}

.scmsa-total-order-btn:disabled {
    opacity: .45;
    filter: grayscale(.4);
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Responsive mobile ──────────────────────────────────────── */
@media ( max-width: 640px ) {
    .scmsa-tarifs-total__header,
    .scmsa-tarifs-total__body,
    .scmsa-tarifs-total__footer {
        padding: var(--space-sm, .5rem) var(--space-md, 1rem);
    }

    .scmsa-tarifs-total__grand-value { font-size: 1.25rem; }
}

/* Sticky wrap — correctif Elementor (overflow:hidden bloque position:sticky) */
.scmsa-total-sticky-wrap {
    /* Le style inline positionne le top dynamiquement via le widget */
}

/* Tous les ancêtres Elementor ne doivent pas avoir overflow:hidden/auto
   sinon position:sticky ne fonctionne pas */
.elementor-section:has( .scmsa-total-sticky-wrap ),
.elementor-container:has( .scmsa-total-sticky-wrap ),
.elementor-row:has( .scmsa-total-sticky-wrap ),
.elementor-column:has( .scmsa-total-sticky-wrap ),
.elementor-widget-wrap:has( .scmsa-total-sticky-wrap ),
.elementor-widget:has( .scmsa-total-sticky-wrap ),
.elementor-widget-container:has( .scmsa-total-sticky-wrap ),
.e-con:has( .scmsa-total-sticky-wrap ),
.e-con-inner:has( .scmsa-total-sticky-wrap ) {
    overflow: visible !important;
}

/* Dans un flex container (e-con e-flex), règles pour que position:sticky fonctionne :
   1. La colonne doit s'étirer (align-self:stretch, pas flex-start)
   2. La chaîne widget → container doit remplir la colonne en hauteur
   3. overflow:visible sur tous les ancêtres */
.e-con.e-child:has( .scmsa-total-sticky-wrap ) {
    align-self: stretch !important;
}
.e-con.e-child:has( .scmsa-total-sticky-wrap ) .elementor-widget,
.e-con.e-child:has( .scmsa-total-sticky-wrap ) .elementor-widget-container {
    height: 100%;
}

/* ================================================================
   PHASE 6 — PICKER BÉNÉFICIAIRES
   Inséré comme <tr class="scmsa-beneficiaires-row"> sous chaque
   ligne nominative dans le tableau tarifaire.
   ================================================================ */

/* Ligne de tableau encadrant le picker */
.scmsa-beneficiaires-row td {
    padding: 0 !important;
    border-top: none !important;
    background: #f9f9f9;
}

.scmsa-beneficiaires {
    padding: .5rem .75rem .75rem 1.5rem;
    border-left: 3px solid var(--color-accent, #e65100);
}

/* Libellé "Bénéficiaire(s) :" */
.scmsa-bene-label {
    font-size:   .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color:       var(--color-accent, #e65100);
    margin:      0 0 .4rem;
}

/* Rangée d'un seul slot bénéficiaire */
.scmsa-bene-row {
    display:     flex;
    align-items: center;
    gap:         .5rem;
    margin-bottom: .35rem;
}

/* Numéro du slot quand qty > 1 */
.scmsa-bene-index {
    font-size:   .82rem;
    color:       #888;
    min-width:   1.2em;
}

/* Dropdown de sélection */
.scmsa-bene-select {
    flex:        1;
    max-width:   280px;
    padding:     .3rem .55rem;
    border:      1px solid #ccc;
    border-radius: 4px;
    font-size:   .88rem;
    background:  #fff;
    cursor:      pointer;
    transition:  border-color .15s, box-shadow .15s;
}

.scmsa-bene-select:focus {
    outline:      none;
    border-color: var(--color-accent, #e65100);
    box-shadow:   0 0 0 2px rgba(230, 81, 0, .15);
}

/* Valeur sélectionnée (non vide) */
.scmsa-bene-select:valid:not([value=""]) {
    border-color: #43a047;
}

/* Message non-connecté / sans membres */
.scmsa-bene-notice {
    font-size:   .82rem;
    color:       #777;
    margin:      .15rem 0;
}

.scmsa-bene-notice a {
    color:     var(--color-accent, #e65100);
    font-weight: 600;
}

/* Lien "Ajouter des membres" inline */
.scmsa-bene-profile-link {
    font-size: .8rem;
    color:     var(--color-accent, #e65100);
    white-space: nowrap;
}

/* Badge "Nominatif" dans la colonne label */
.scmsa-tarif-badge--nominatif {
    display:       inline-block;
    font-size:     .7rem;
    font-weight:   700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color:         var(--color-accent, #e65100);
    border:        1px solid var(--color-accent, #e65100);
    border-radius: 3px;
    padding:       .05em .35em;
    margin-left:   .4em;
    vertical-align: middle;
    line-height:   1.4;
}

/* Message d'erreur validation bénéficiaires (injecté par JS) */
.scmsa-total-order-error {
    font-size:     .85rem;
    color:         #b71c1c;
    background:    #ffebee;
    border:        1px solid #e57373;
    border-radius: 4px;
    padding:       .45rem .8rem;
    margin-bottom: .6rem;
}