/* ----------------------------------------------------------
 * CIM Inventory — estilos front
 * Todo personalizable vía CSS variables en :root o en tu tema.
 * -------------------------------------------------------- */

:root {
    --cim-promo-color: inherit;
    --cim-promo-strong-color: inherit;
    --cim-promo-font-size-loop: 13px;
    --cim-promo-font-size-single: 14px;
    --cim-promo-gap: 4px;

    --cim-countdown-bg: rgba(0, 0, 0, 0.82);
    --cim-countdown-color: #fff;
    --cim-countdown-border-radius: 6px;
    --cim-countdown-padding: 6px 10px;
    --cim-countdown-font-size: 12px;
    --cim-countdown-offset: 10px; /* distancia al borde inferior de la imagen */
}

/* ----- Promos: texto plano ----- */

.cim-promos {
    margin: 6px 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--cim-promo-gap);
    color: var(--cim-promo-color);
    line-height: 1.4;
}
.cim-promos--loop   { font-size: var(--cim-promo-font-size-loop); }
.cim-promos--single { font-size: var(--cim-promo-font-size-single); }

.cim-promo {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
}
.cim-promo strong { color: var(--cim-promo-strong-color); font-weight: 600; }

/* ----- Countdown sobre la imagen ----- */

.cim-sale-countdown {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--cim-countdown-bg);
    color: var(--cim-countdown-color);
    padding: var(--cim-countdown-padding);
    border-radius: var(--cim-countdown-border-radius);
    font-size: var(--cim-countdown-font-size);
    line-height: 1;
    pointer-events: none;
    z-index: 2;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.cim-sale-countdown__icon { flex-shrink: 0; }
.cim-sale-countdown__label { opacity: 0.9; }
.cim-countdown__value {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.cim-countdown--expired { opacity: 0.5; }

/* Single: inline bajo el precio */
.cim-sale-countdown--single { margin: 8px 0; }

/* Cuando JS la reubica dentro del wrapper de imagen */
.cim-sale-countdown--over-image {
    position: absolute;
    left: var(--cim-countdown-offset);
    bottom: var(--cim-countdown-offset);
    right: auto;
}

/* El wrapper al que JS mueve el countdown necesita position:relative */
.cim-image-wrapper--has-countdown { position: relative !important; }