/* ==========================================================================
   KB-COMM.EU FLEXY BUTTON — base styles
   ========================================================================== */

.kbfb-button {
    --kbfb-duration: 0.5s;
    --kbfb-easing:   cubic-bezier(0.76, 0, 0.24, 1);
    --kbfb-lh:       1.2;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.3s ease,
                color            0.3s ease,
                border-color     0.3s ease,
                box-shadow       0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

.kbfb-button *,
.kbfb-button *::before,
.kbfb-button *::after {
    box-sizing: border-box;
}

/* ---------- Inner wrapper ---------- */
.kbfb-button__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* ---------- Fixed-height window that clips the sliding text ---------- */
.kbfb-button__window {
    position: relative;
    display: block;
    overflow: hidden;
    height: calc(var(--kbfb-lh) * 1em);
    line-height: 0;
    text-align: center;
}

/* ---------- Sliding track ---------- */
.kbfb-button__track {
    display: block;
    transform: translateY(0);
    transition: transform var(--kbfb-duration) var(--kbfb-easing);
    will-change: transform;
}

/* ---------- Text rows ---------- */
.kbfb-button__text {
    display: block;
    height: calc(var(--kbfb-lh) * 1em);
    line-height: calc(var(--kbfb-lh) * 1em);
    white-space: nowrap;
    margin: 0;
    padding: 0;
    opacity: 1;
    visibility: visible;
    transition: none;
    animation: none;
}

/* ---------- Hover / Focus animation ---------- */
.kbfb-button:hover .kbfb-button__track,
.kbfb-button:focus-visible .kbfb-button__track {
    transform: translateY(calc(var(--kbfb-lh) * -1em));
}

/* =========================================================================
   ICON — works with Font Awesome, Elementor icons, and uploaded custom SVGs.
   ========================================================================= */
.kbfb-button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: inherit;
    transition: transform var(--kbfb-duration) var(--kbfb-easing),
                color     0.3s ease,
                fill      0.3s ease,
                stroke    0.3s ease;
    will-change: transform;
}

/* Font icons (FA, Elementor "i" tags) inherit color naturally. */
.kbfb-button__icon i,
.kbfb-button__icon i::before {
    color: inherit;
    transition: color 0.3s ease;
}

/* --- SVG root --- */
.kbfb-button__icon svg {
    display: block;
    width: 1em;
    height: 1em;
    color: currentColor;
    fill: currentColor;
    overflow: visible;
    vertical-align: middle;
    transition: fill 0.3s ease, stroke 0.3s ease, color 0.3s ease;
}

/* --- SVG children: force every visible fill/stroke to currentColor --- */

/* Any element that had an explicit, non-"none" fill */
.kbfb-button__icon svg [fill]:not([fill="none"]) {
    fill: currentColor !important;
}

/* Any element that had an explicit, non-"none" stroke */
.kbfb-button__icon svg [stroke]:not([stroke="none"]) {
    stroke: currentColor !important;
}

/* Any shape with neither fill nor stroke attribute → default fill */
.kbfb-button__icon svg path:not([fill]):not([stroke]),
.kbfb-button__icon svg circle:not([fill]):not([stroke]),
.kbfb-button__icon svg rect:not([fill]):not([stroke]),
.kbfb-button__icon svg line:not([fill]):not([stroke]),
.kbfb-button__icon svg polyline:not([fill]):not([stroke]),
.kbfb-button__icon svg polygon:not([fill]):not([stroke]),
.kbfb-button__icon svg ellipse:not([fill]):not([stroke]),
.kbfb-button__icon svg g:not([fill]):not([stroke]) {
    fill: currentColor !important;
}

/* Preserve explicit "none" so stroke-based icons keep their transparent fill. */
.kbfb-button__icon svg [fill="none"] {
    fill: none;
}

.kbfb-button__icon svg [stroke="none"] {
    stroke: none;
}

/* ---------- Focus ring ---------- */
.kbfb-button:focus {
    outline: none;
}

.kbfb-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .kbfb-button__track,
    .kbfb-button__icon {
        transition-duration: 0.01ms !important;
    }
}