/**
 * Styles front-office — Carnets
 *
 * Espace client, fiche produit et messages de panier. Volontairement sobre :
 * les couleurs et la typographie du thème priment, l'extension ne pose que la
 * mise en page dont elle a besoin.
 *
 * Palette : les couleurs passent par les variables publiées par l'extension
 * qui thème WooCommerce, avec une valeur de repli neutre. Présente, l'espace
 * client suit sa charte sans qu'aucune des deux extensions ne connaisse
 * l'autre ; absente, le repli s'applique et rien ne casse.
 *
 *   --oaka-wc-color-primary    accents, mise en avant
 *   --oaka-wc-color-secondary  bordures, filets
 *   --oaka-wc-color-text       texte courant
 */


/* ── Fiche produit ──────────────────────────────────────────── */

.oaka-carnets-units {
    font-weight: 600;
    margin: 0 0 .35em;
}

.oaka-carnets-compare {
    margin: 0 0 .75em;
    font-size: .9em;
    opacity: .85;
}

.oaka-carnets-saving {
    font-weight: 600;
    opacity: 1;
    color: var(--oaka-wc-color-primary, inherit);
}

.oaka-carnets-note {
    margin-top: 1em;
    padding: .6em .8em;
    border-left: 3px solid var(--oaka-wc-color-primary, currentColor);
    font-size: .9em;
}


/* ── Espace client ──────────────────────────────────────────── */

.oaka-carnets-account h2 {
    margin-top: 1.6em;
}

/* Deux classes dans le sélecteur, pas une : les thèmes et WooCommerce ciblent
   couramment `.woocommerce-MyAccount-content ul` (0,1,1), qui bat un sélecteur
   à classe unique (0,1,0). Le retrait de liste ne s'appliquait alors pas, et
   le décalage à gauche du thème restait — sans qu'aucune règle soit en erreur. */
.oaka-carnets-account ul.oaka-carnets-totals {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 1.2em;
    padding: 0;
    list-style: none;
}

.oaka-carnets-account ul.oaka-carnets-totals li::before {
    content: none;
}

/* Aplats de couleur, texte en blanc.
   Deux teintes et non trois : « acheté » et « consommé » sont des constats,
   « restant » est ce que le client vient chercher (§7.4). Les distinguer par
   la couleur fait ce qu'une troisième nuance ne ferait pas — trois aplats
   voisins se lisent comme une frise, pas comme une hiérarchie. */
.oaka-carnets-account ul.oaka-carnets-totals li {
    flex: 1 1 140px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: .8em 1em;
    border: 0;
    border-radius: 4px;
    background-color: var(--oaka-wc-color-secondary, #486966);
    color: #fff;
}

.oaka-carnets-account ul.oaka-carnets-totals li.is-remaining {
    background-color: var(--oaka-wc-color-primary, #C2461B);
}

.oaka-carnets-total-value {
    font-size: 1.6em;
    font-weight: 700;
    line-height: 1.1;
    color: inherit;
}

/* Le libellé se met en retrait par l'opacité, jamais par une couleur fixe :
   sur un aplat dont la teinte est réglable, une valeur en dur finirait par
   passer sous le seuil de lisibilité sans que rien ne le signale. */
.oaka-carnets-total-label {
    font-size: .8em;
    opacity: .85;
    color: inherit;
}

.oaka-carnets-reserved {
    font-size: .9em;
    opacity: .8;
}

.oaka-carnets-table {
    width: 100%;
    margin-bottom: 1.5em;
}

.oaka-carnets-table tr.is-expired {
    opacity: .55;
}

.oaka-carnets-badge {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid currentColor;
    border-radius: 3px;
    font-size: .75em;
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
}


/* ── Message d'indisponibilité de la passerelle ─────────────── */

.oaka-carnets-why {
    margin-bottom: 1em;
}


/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 600px) {

    .oaka-carnets-account ul.oaka-carnets-totals li {
        flex-basis: 100%;
    }

    .oaka-carnets-table,
    .oaka-carnets-table tbody,
    .oaka-carnets-table tr,
    .oaka-carnets-table td {
        display: block;
        width: 100%;
    }

    .oaka-carnets-table thead {
        display: none;
    }

    .oaka-carnets-table tr {
        margin-bottom: 1em;
        padding-bottom: .6em;
        border-bottom: 1px solid var(--oaka-wc-color-secondary, rgba(0, 0, 0, .12));
    }
}