/*
 * DOM-DECORA.RU
 * Header counters visual customization.
 *
 * IMPORTANT:
 * - CSS only.
 * - Does not calculate basket/favorite/compare values.
 * - Does not modify Bitrix/Aspro JavaScript.
 * - Does not subscribe to AJAX or Composite events.
 * - Does not touch FUSER/session/basket state.
 *
 * Aspro Max remains the single source of truth.
 */


/* ============================================================
 * DESKTOP / HEADER COUNTERS
 * ============================================================ */

/*
 * Aspro outputs the actual numeric value inside .count.
 * We only style counters that Aspro itself marks as non-empty
 * via the parent .basket-count class.
 */

body a.basket-link.basket.basket-count .count,
body a.basket-link.delay.basket-count .count,
body a.basket-link.compare.basket-count .count {
    background: #e53935 !important;
    border-color: #e53935 !important;
    color: #fff !important;

    min-width: 18px;
    height: 18px;
    line-height: 18px;

    padding: 0 5px;

    border-radius: 9px;
    box-sizing: border-box;

    text-align: center;
}


/* ============================================================
 * MOBILE MENU COUNTERS
 * ============================================================ */

/*
 * Mobile Aspro menu also uses .basket-count on the link.
 * Same visual treatment, no behavioural changes.
 */

body .menu a.basket-link.basket.basket-count .count,
body .menu a.basket-link.delay.basket-count .count,
body .menu a.basket-link.compare.basket-count .count {
    background: #e53935 !important;
    border-color: #e53935 !important;
    color: #fff !important;
}


/* ============================================================
 * FIXED MOBILE BOTTOM PANEL
 * ============================================================ */

/*
 * The bottom panel has its own native Aspro counter-state markup.
 *
 * Aspro already controls:
 *   counter-state--empty
 *
 * We style ONLY a non-empty state.
 */

body .bottom-icons-panel
.counter-state:not(.counter-state--empty)
.counter-state__content {
    background: #e53935 !important;
    color: #fff !important;
}

body .bottom-icons-panel
.counter-state:not(.counter-state--empty)
.counter-state__content-item-value {
    color: #fff !important;
}


/*
 * Preserve native Aspro behaviour when empty.
 * No forced display / visibility / opacity here.
 */