/**
 * Modulo Timer - Frontend CSS
 * Styles de base — les valeurs de couleur et dimensions sont
 * injectées UNIQUEMENT via le style inline PHP sur chaque .mt-timer.
 * Aucune variable de couleur n'est définie ici pour éviter tout conflit
 * avec les plugins tiers (Off-Canvas, etc.).
 */

/* Dimensions par défaut — surchargées par PHP si nécessaire */
.mt-timer {
    --mt-font-size:    16px;
    --mt-digits-size:  28px;
    --mt-padding-v:    16px;
    --mt-padding-h:    20px;
    --mt-radius:       8px;
    --mt-max-width:    100%;
    --mt-icon-size:    75px;
}

/* ── Base ──────────────────────────────────────────────────── */
.mt-timer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: var(--mt-color, #2ecc71);
    color: var(--mt-text, #fff);
    padding: var(--mt-padding-v) var(--mt-padding-h);
    border-radius: var(--mt-radius);
    font-size: var(--mt-font-size);
    font-weight: 600;
    line-height: 1.4;
    margin: 12px 0;
    box-sizing: border-box;
    text-align: center;
    max-width: var(--mt-max-width);
    /* Isolation : empêche --mt-color de remonter vers les parents */
    isolation: isolate;
}

/* ── Réduction ─────────────────────────────────────────────── */
.mt-timer .mt-timer__discount {
    background: rgba(255,255,255,0.25);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 1.1em;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ── Contenu central ───────────────────────────────────────── */
.mt-timer .mt-timer__content {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.mt-timer .mt-timer__emoji  { font-size: 1.2em; }
.mt-timer .mt-timer__label  { opacity: 0.9; }
.mt-timer .mt-timer__time   { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.mt-timer .mt-timer__value  { display: inline-block; min-width: 1.2em; text-align: center; }
.mt-timer .mt-timer__sep    { opacity: 0.85; }

/* ── Prix ──────────────────────────────────────────────────── */
.mt-timer .mt-timer__prices {
    background: rgba(255,255,255,0.2);
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 1em;
}
.mt-timer .mt-timer__prices del { opacity: 0.7; text-decoration: line-through; margin-right: 8px; }
.mt-timer .mt-timer__prices ins { text-decoration: none; font-weight: 700; }

/* ── Info row ──────────────────────────────────────────────── */
.mt-timer .mt-timer__info-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
.mt-timer .mt-timer__info-row .mt-timer__discount,
.mt-timer .mt-timer__info-row .mt-timer__prices { margin: 0; }

.mt-timer .mt-timer__header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Minimal ───────────────────────────────────────────────── */
.mt-timer--minimal {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: var(--mt-color, #2ecc71);
    padding: 0;
    margin: 0;
    font-size: inherit;
    font-weight: 600;
    border-radius: 0;
}
.mt-timer--minimal .mt-timer__discount {
    background: var(--mt-color, #2ecc71);
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.9em;
}

/* ── Badge ─────────────────────────────────────────────────── */
.mt-timer--badge {
    display: inline-flex;
    flex-direction: row;
    gap: 6px;
    padding: calc(var(--mt-padding-v) * 0.4) calc(var(--mt-padding-h) * 0.5);
    font-size: calc(var(--mt-font-size) * 0.85);
}
.mt-timer--badge .mt-timer__discount {
    padding: 2px 8px;
    font-size: 0.9em;
    border-radius: 4px;
}

/* ── Contextes ─────────────────────────────────────────────── */
.mt-timer--archive {
    display: inline-flex;
    flex-direction: row;
    font-size: calc(var(--mt-font-size) * 0.8);
    padding: calc(var(--mt-padding-v) * 0.4) calc(var(--mt-padding-h) * 0.5);
    margin: 8px 0 0;
}

.mt-timer--cart {
    display: inline-flex;
    flex-direction: row;
    font-size: calc(var(--mt-font-size) * 0.75);
    padding: 4px 8px;
    margin: 4px 0 0;
}

.mt-timer--mini-cart {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    padding: 2px 6px;
    margin: 3px 0 0;
    border-radius: 3px;
    font-weight: 600;
    line-height: 1.3;
}

/* ── Ribbon ────────────────────────────────────────────────── */
.mt-ribbon-product-wrap { position: relative; }
.woocommerce ul.products li.product { position: relative; }

.mt-timer--archive-ribbon {
    position: absolute;
    top: 10px;
    left: -2px;
    padding: 0;
    background: transparent;
    margin: 0;
    z-index: 10;
}

/* ── Expired ───────────────────────────────────────────────── */
.mt-timer--expired {
    background: #95a5a6;
    opacity: 0.8;
}
.mt-timer .mt-timer__expired-message { font-weight: 500; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 480px) {
    .mt-timer {
        font-size: calc(var(--mt-font-size) * 0.9);
        padding: calc(var(--mt-padding-v) * 0.8) calc(var(--mt-padding-h) * 0.7);
    }
    .mt-timer .mt-timer__discount { font-size: 1em; padding: 4px 12px; }
    .mt-timer .mt-timer__prices   { font-size: 0.9em; padding: 6px 12px; }
}

/* ── Mobile disable ────────────────────────────────────────── */
.mt-timer--disabled-mobile { display: none; }
@media (min-width: 769px) {
    .mt-timer--disabled-mobile { display: flex; }
}