/**
 * Category Menu Badges
 * Pure CSS badges for catalog menu items via ::after pseudo-elements.
 * Targets by data-category-id attribute (rendered by oct_menu.twig).
 *
 * 113 = Perne pentru gât / Подушки для шеи → TOP (красный)
 * 119 = Preț redus / Уценка            → % (красный круг перед текстом)
 */

[data-category-id="113"]::after {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 500;
  color: #fff;
  border-radius: 4px;
  line-height: 1.5;
  letter-spacing: 0.3px;
  white-space: nowrap;
  vertical-align: middle;
  flex-shrink: 0;
  content: 'TOP';
  background: #ff0000;
}

/* ============================================================
 * Discount badge for "Уценка / Preț redus" menu link
 * Targets:
 *   - horizontal menu link by href (/uchenka, /reduceri)
 *   - vertical/sidebar entry by data-category-id="119"
 * Renders a small green circle with "%" before the label.
 * Green #15803d avoids visual collision with the red Iute mark
 * on the adjacent "Rate 0%" item and meets WCAG 2.2 AA contrast
 * (5.02:1 against white, on par with the Iute red 4.98:1).
 * ============================================================ */
.ds-menu-maincategories-item > a[href*="/uchenka"]::before,
.ds-menu-maincategories-item > a[href*="/reduceri"]::before,
[data-category-id="119"]::before {
  content: '%';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  border-radius: 50%;
  background: #15803d;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  vertical-align: middle;
}

.ds-menu-maincategories-item > a[href*="/uchenka"],
.ds-menu-maincategories-item > a[href*="/reduceri"] {
  display: inline-flex;
  align-items: center;
}

/* On mobile (<1200px) the horizontalMenu() JS moves the horizontal link
 * into the catalog sidebar. The top-level category (id=119) is already
 * shown there with the % badge — drop the badge on the duplicated link
 * so the mobile sidebar shows a plain text "Preț redus" at the bottom.
 * The :has() selector scopes this to the relocated items only;
 * the desktop horizontal box keeps its badge. */
@media (max-width: 1199.98px) {
  .ds-menu-catalog-items > li.ds-menu-maincategories-item > a[href*="/uchenka"]::before,
  .ds-menu-catalog-items > li.ds-menu-maincategories-item > a[href*="/reduceri"]::before {
    display: none;
  }
}