/* ================================================================
   FEF HEADER ICONS — Styles
   ================================================================ */
.fef-hi-wrap { display: inline-block; }

.fef-hi-list { display: flex; align-items: center; }
.fef-hi-dir-horizontal .fef-hi-list { flex-direction: row; }
.fef-hi-dir-vertical .fef-hi-list { flex-direction: column; align-items: flex-start; }

.fef-hi-item { position: relative; display: inline-flex; }

.fef-hi-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: none;
    border: none;
    margin: 0;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    line-height: 1;
    transition: background .2s ease, color .2s ease;
}

/* Text placement — icon markup is always icon-then-label; flex-direction flips it visually. */
.fef-hi-place-text_right .fef-hi-trigger  { flex-direction: row; }
.fef-hi-place-text_left .fef-hi-trigger   { flex-direction: row-reverse; }
.fef-hi-place-text_bottom .fef-hi-trigger { flex-direction: column; }
.fef-hi-place-text_top .fef-hi-trigger    { flex-direction: column-reverse; }

.fef-hi-icon { display: inline-flex; align-items: center; justify-content: center; position: relative; line-height: 1; }
.fef-hi-icon i, .fef-hi-icon svg { display: block; }
.fef-hi-icon img { display: block; max-width: 100%; }

/* Hover graphic swap (only when a distinct hover icon/image was set). */
.fef-hi-has-hover-gfx .fef-hi-gfx-hover { display: none; }
.fef-hi-has-hover-gfx .fef-hi-trigger:hover .fef-hi-gfx-normal { display: none; }
.fef-hi-has-hover-gfx .fef-hi-trigger:hover .fef-hi-gfx-hover { display: block; }

.fef-hi-label { white-space: nowrap; }

/* ── Hover animations ── */
.fef-hi-fx-scale .fef-hi-icon { transition: transform .2s ease; }
.fef-hi-fx-scale:hover .fef-hi-icon { transform: scale(1.18); }

.fef-hi-fx-rotate .fef-hi-icon { transition: transform .2s ease; }
.fef-hi-fx-rotate:hover .fef-hi-icon { transform: rotate(18deg); }

.fef-hi-fx-pop .fef-hi-icon { transition: transform .15s cubic-bezier(.34,1.56,.64,1); }
.fef-hi-fx-pop:hover .fef-hi-icon { transform: scale(1.28); }

.fef-hi-fx-bounce:hover .fef-hi-icon { animation: fefHiBounce .5s ease; }
@keyframes fefHiBounce { 0%,100%{transform:translateY(0)} 30%{transform:translateY(-6px)} 60%{transform:translateY(1px)} }

.fef-hi-fx-pulse:hover .fef-hi-icon { animation: fefHiPulse .6s ease infinite; }
@keyframes fefHiPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }

.fef-hi-fx-shake:hover .fef-hi-icon { animation: fefHiShake .4s ease; }
@keyframes fefHiShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-3px)} 40%{transform:translateX(3px)} 60%{transform:translateX(-2px)} 80%{transform:translateX(2px)} }

/* ── Tooltip — speech bubble with an angular pointer, shown below the icon ── */
.fef-hi-tooltip {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -6px);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    z-index: 20;
    background: #1e293b;
    color: #fff;
}
.fef-hi-tooltip::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    margin-bottom: -5px;
    background: inherit;
    transform: rotate(45deg);
}
.fef-hi-has-tooltip:hover .fef-hi-tooltip,
.fef-hi-has-tooltip .fef-hi-trigger:focus-visible ~ .fef-hi-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* ── Dropdown panel ── */
.fef-hi-panel {
    position: absolute;
    top: 100%;
    margin-top: 10px;
    z-index: 999;
    background: #fff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .14);
    border-radius: 8px;
}
.fef-hi-panel[hidden] { display: none; }
.fef-hi-panel-left  { left: 0; }
.fef-hi-panel-right { right: 0; }
.fef-hi-panel-center{ left: 50%; transform: translateX(-50%); }

@media (max-width: 480px) {
    .fef-hi-panel { max-width: calc(100vw - 24px); }
}