/**
 * KLB Icon Replacer — Arrow Icon Suppressor v1.3
 *
 * Hides the theme's ::after pseudo-element arrows (font glyphs).
 * The real SVG arrow is injected by arrow-inject.js instead.
 *
 * Selectors taken directly from the theme's stylesheet (confirmed via DevTools):
 *  - .klb-menu-horizontal .menu-item-has-children > a::after
 *  - .klb-menu nav.primary-menu .klb-menu > .menu-item > a::after
 */

/* ── EXACT theme selectors — hides the \ea1b font glyph arrow ─────────────── */

.klb-menu-horizontal .menu-item-has-children > a::after,
.klb-menu nav.primary-menu .klb-menu > .menu-item > a::after,

/* Sub-menu levels — same theme, deeper nesting */
.klb-menu-horizontal .menu-item-has-children > .nav-link::after,
.klb-menu .sub-menu .menu-item-has-children > a::after {
    display:  none    !important;
    content:  none    !important;
    font-size: 0      !important;
    width:    0       !important;
    height:   0       !important;
    margin:   0       !important;
    opacity:  0       !important;
}

/* ── Injected SVG arrow wrapper ───────────────────────────────────────────── */

.klb-arrow-svg {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    margin-left:     .3rem;       /* matches theme's original .4375rem - icon width */
    vertical-align:  middle;
    line-height:     1;
    pointer-events:  none;
    flex-shrink:     0;
    transition:      transform 0.2s ease;
}

.klb-arrow-svg svg {
    display: block;
}

/* ── Rotate arrow when submenu is open ────────────────────────────────────── */

/* KLB theme uses .active / .open on the <li> when submenu expands */
.menu-item-has-children.active    > a .klb-arrow-svg,
.menu-item-has-children.open      > a .klb-arrow-svg,
.menu-item-has-children.is-active > a .klb-arrow-svg,

/* aria-expanded on the <a> itself (accessibility toggle) */
a[aria-expanded="true"] .klb-arrow-svg,

/* Bootstrap / generic dropdown */
.dropdown.show > a .klb-arrow-svg,
.nav-item.dropdown.show > .nav-link .klb-arrow-svg {
    transform: rotate(180deg);
}


/* ════════════════════════════════════════════════════════════════════════════
   COMPARE BUTTON ICONS
   Hides the ::before font glyphs (\ec85 default, \e8ef added-state)
   on .klbcp-btn elements. SVG icons are injected by arrow-inject.js.
   ════════════════════════════════════════════════════════════════════════════ */

/* Kill the font glyph on both states */
.klbcp-btn::before,
.klbcp-btn.klbcp-added::before,
.klbcp-btn.added::before,
.klbcp-btn.active::before {
    display:   none    !important;
    content:   none    !important;
    font-size: 0       !important;
    width:     0       !important;
    margin:    0       !important;
}

/* ── Injected SVG icon wrapper (compare) ─────────────────────────────────── */

.klb-compare-icon {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    margin-right:    .35em;
    vertical-align:  middle;
    line-height:     1;
    pointer-events:  none;
    flex-shrink:     0;
    transition:      opacity 0.15s ease, transform 0.2s ease;
}

.klb-compare-icon svg {
    display: block;
}

/* Scale-in animation when switching to the check icon */
.klbcp-btn.klbcp-added .klb-compare-icon,
.klbcp-btn.added       .klb-compare-icon,
.klbcp-btn.active      .klb-compare-icon {
    animation: klb-icon-pop 0.25s ease forwards;
}

@keyframes klb-icon-pop {
    0%   { transform: scale(0.6); opacity: 0.5; }
    60%  { transform: scale(1.2); opacity: 1;   }
    100% { transform: scale(1);   opacity: 1;   }
}