/* =========================================================================
   Kfir Builder — Frontend Styles
   =========================================================================

   LAYOUT HIERARCHY (mirrors Elementor):
     Theme (header/footer)
       └── .kfb-page              — full-width root, no centering
             └── .kfb-container   — each container is full-width
                   boxed: kfb-cw-boxed → max-width via --kfb-site-width
                   full:  kfb-cw-full  → viewport-wide, breaks content area

   CSS custom props (set by site-settings.php via wp_head):
     --kfb-site-width   default 1140px
     --kfb-site-px      default 20px
     --kfb-site-px-mb   default 15px
   ========================================================================= */

/* ── Page root ─────────────────────────────────────────────────────────────── */
.kfb-page {
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* ── Boxed container — respects global site width ──────────────────────────── */
.kfb-container.kfb-cw-boxed {
    max-width: var(--kfb-site-width, 1140px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--kfb-site-px, 20px);
    padding-right: var(--kfb-site-px, 20px);
    box-sizing: border-box;
}

/* When a container already has explicit padding from the CSS engine, honour it
   by only applying the site-padding as a fallback via @supports. */
.kfb-container.kfb-cw-boxed[style*="padding-left"],
.kfb-container.kfb-cw-boxed[style*="padding-right"] {
    /* user's own padding wins — don't override */
    padding-left: unset;
    padding-right: unset;
}

/* ── Full-width container — breaks out of content area ─────────────────────── */
.kfb-container.kfb-cw-full {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

/* ── Default PAGE layout — keep theme max-width but strip padding so sections
   manage their own spacing.                                                     */
body.kfb-page-layout-default #kfb-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
}

/* ── Full-width PAGE layout — remove theme container constraints ─────────────
   Target common theme wrapper classes. Theme-specific overrides go here.       */
body.kfb-page-layout-full_width .site-main,
body.kfb-page-layout-full_width #content,
body.kfb-page-layout-full_width .entry-content,
body.kfb-page-layout-full_width .wp-block-post-content,
body.kfb-page-layout-full_width #kfb-main {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* ── Canvas layout — already handled by canvas.php (no theme wrapper) ────────
   But add body background normalisation just in case.                          */
body.kfb-layout-canvas {
    margin: 0;
    padding: 0;
}

/* ── Full-width wrapper (used by full-width.php) ─────────────────────────────*/
.kfb-full-width-wrapper {
    width: 100%;
}

.kfb-el {
    box-sizing: border-box;
}

/* Typography reset inside builder elements — respect theme but normalize spacing */
.kfb-el h1,
.kfb-el h2,
.kfb-el h3,
.kfb-el h4,
.kfb-el h5,
.kfb-el h6 {
    margin: 0;
    line-height: 1.2;
}

.kfb-el p {
    margin: 0 0 1em;
    line-height: 1.6;
}
.kfb-el p:last-child {
    margin-bottom: 0;
}

.kfb-el-image img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

.kfb-button {
    display: inline-block;
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.15s ease, transform 0.15s ease;
    line-height: 1.2;
}
.kfb-button:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}
.kfb-button:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Responsive visibility helpers */
@media (max-width: 782px) {
    .kfb-hide-mobile { display: none !important; }
}
@media (min-width: 783px) {
    .kfb-hide-desktop { display: none !important; }
}

/* Mobile: use site mobile padding custom prop for boxed containers */
@media (max-width: 600px) {
    .kfb-container.kfb-cw-boxed {
        padding-left: var(--kfb-site-px-mb, 15px);
        padding-right: var(--kfb-site-px-mb, 15px);
    }
    .kfb-container.kfb-cw-boxed[style*="padding-left"],
    .kfb-container.kfb-cw-boxed[style*="padding-right"] {
        padding-left: unset;
        padding-right: unset;
    }
}


/* ============================
   SECTIONS & COLUMNS (frontend)
   ============================ */
.kfb-section {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.kfb-section-inner {
    box-sizing: border-box;
}
.kfb-col {
    box-sizing: border-box;
    min-width: 0;
    overflow: hidden;
}
.kfb-col img,
.kfb-col iframe,
.kfb-col video {
    max-width: 100%;
    height: auto;
}
@media (max-width: 768px) {
    .kfb-section-inner {
        flex-direction: column !important;
    }
    .kfb-col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}


/* ============================
   RESPONSIVE / MOBILE
   ============================ */

/* Hide utilities */
.kfb-hide-desktop { display: none !important; }
@media (max-width: 767px) {
    .kfb-hide-mobile  { display: none !important; }
    .kfb-hide-desktop { display: block !important; }
}

/* Gallery - responsive columns */
@media (max-width: 767px) {
    .kfb-gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 480px) {
    .kfb-gallery-grid {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

/* Nav menu - collapse on mobile */
@media (max-width: 767px) {
    nav[style*=flex-wrap:wrap] {
        gap: 16px !important;
        font-size: 14px !important;
    }
}

/* Section columns - stack on mobile */
@media (max-width: 767px) {
    .kfb-section-inner {
        flex-direction: column !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .kfb-col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Images - always responsive */
.kfb-el img {
    max-width: 100%;
    height: auto;
}

/* Masonry - fewer columns on mobile */
@media (max-width: 767px) {
    div[style*=column-count] {
        column-count: 2 !important;
    }
}
@media (max-width: 480px) {
    div[style*=column-count] {
        column-count: 1 !important;
    }
}

/* Headings - responsive font size */
@media (max-width: 767px) {
    .kfb-el-heading h1 { font-size: clamp(24px, 5vw, 48px) !important; }
    .kfb-el-heading h2 { font-size: clamp(20px, 4vw, 36px) !important; }
    .kfb-el-heading h3 { font-size: clamp(18px, 3.5vw, 28px) !important; }
}

/* Video - responsive */
.kfb-el-video .kfb-video-wrap {
    position: relative;
    width: 100%;
}
.kfb-el-video iframe {
    width: 100%;
}


/* ============================
   ENTRANCE ANIMATIONS
   ============================ */

[data-animation] { opacity: 0; }
[data-animation].kfb-animated { animation-fill-mode: both; opacity: 1; }

/* ---- Fade family ---- */
@keyframes kfbFadeIn      { from { opacity:0; }                              to { opacity:1; } }
@keyframes kfbFadeInUp    { from { opacity:0; transform:translateY(40px); }  to { opacity:1; transform:translateY(0); } }
@keyframes kfbFadeInDown  { from { opacity:0; transform:translateY(-40px); } to { opacity:1; transform:translateY(0); } }
@keyframes kfbFadeInLeft  { from { opacity:0; transform:translateX(40px); }  to { opacity:1; transform:translateX(0); } }
@keyframes kfbFadeInRight { from { opacity:0; transform:translateX(-40px); } to { opacity:1; transform:translateX(0); } }

/* ---- Zoom family ---- */
@keyframes kfbZoomIn     { from { opacity:0; transform:scale(.7); }         to { opacity:1; transform:scale(1); } }
@keyframes kfbZoomInDown { from { opacity:0; transform:scale(.7) translateY(-60px); } to { opacity:1; transform:scale(1) translateY(0); } }

/* ---- Slide family ---- */
@keyframes kfbSlideInUp    { from { opacity:0; transform:translateY(100%); }  to { opacity:1; transform:translateY(0); } }
@keyframes kfbSlideInDown  { from { opacity:0; transform:translateY(-100%); } to { opacity:1; transform:translateY(0); } }
@keyframes kfbSlideInLeft  { from { opacity:0; transform:translateX(100%); }  to { opacity:1; transform:translateX(0); } }
@keyframes kfbSlideInRight { from { opacity:0; transform:translateX(-100%); } to { opacity:1; transform:translateX(0); } }

/* ---- Bounce family ---- */
@keyframes kfbBounceIn {
    0%   { opacity:0; transform:scale(.3); }
    50%  { opacity:1; transform:scale(1.05); }
    70%  { transform:scale(.9); }
    100% { opacity:1; transform:scale(1); }
}
@keyframes kfbBounceInUp {
    0%   { opacity:0; transform:translateY(80px) scale(.9); }
    60%  { opacity:1; transform:translateY(-12px) scale(1.02); }
    80%  { transform:translateY(6px); }
    100% { opacity:1; transform:translateY(0) scale(1); }
}

/* ---- Flip family ---- */
@keyframes kfbFlipInX {
    from { opacity:0; transform:perspective(400px) rotateX(90deg); }
    to   { opacity:1; transform:perspective(400px) rotateX(0); }
}
@keyframes kfbFlipInY {
    from { opacity:0; transform:perspective(400px) rotateY(90deg); }
    to   { opacity:1; transform:perspective(400px) rotateY(0); }
}

/* ---- Special ---- */
@keyframes kfbLightSpeedIn {
    0%   { opacity:0; transform:translateX(100%) skewX(-30deg); }
    60%  { opacity:1; transform:skewX(20deg); }
    80%  { transform:skewX(-5deg); }
    100% { opacity:1; transform:translateX(0) skewX(0); }
}
@keyframes kfbRotateIn {
    from { opacity:0; transform:rotate(-200deg); }
    to   { opacity:1; transform:rotate(0); }
}
@keyframes kfbRollIn {
    from { opacity:0; transform:translateX(-100%) rotate(-120deg); }
    to   { opacity:1; transform:translateX(0) rotate(0); }
}
@keyframes kfbJackInTheBox {
    0%   { opacity:0; transform:scale(.1) rotate(30deg); transform-origin:center bottom; }
    50%  { transform:rotate(-10deg); }
    70%  { transform:rotate(3deg); }
    100% { opacity:1; transform:scale(1) rotate(0); }
}
@keyframes kfbHeartBeat {
    0%   { opacity:0; transform:scale(0); }
    14%  { opacity:1; transform:scale(1.3); }
    28%  { transform:scale(1); }
    42%  { transform:scale(1.3); }
    70%  { transform:scale(1); }
    100% { opacity:1; transform:scale(1); }
}

.kfb-animated[data-animation="fadeIn"]        { animation-name: kfbFadeIn;        }
.kfb-animated[data-animation="fadeInUp"]      { animation-name: kfbFadeInUp;      }
.kfb-animated[data-animation="fadeInDown"]    { animation-name: kfbFadeInDown;    }
.kfb-animated[data-animation="fadeInLeft"]    { animation-name: kfbFadeInLeft;    }
.kfb-animated[data-animation="fadeInRight"]   { animation-name: kfbFadeInRight;   }
.kfb-animated[data-animation="zoomIn"]        { animation-name: kfbZoomIn;        }
.kfb-animated[data-animation="zoomInDown"]    { animation-name: kfbZoomInDown;    }
.kfb-animated[data-animation="slideInUp"]     { animation-name: kfbSlideInUp;     }
.kfb-animated[data-animation="slideInDown"]   { animation-name: kfbSlideInDown;   }
.kfb-animated[data-animation="slideInLeft"]   { animation-name: kfbSlideInLeft;   }
.kfb-animated[data-animation="slideInRight"]  { animation-name: kfbSlideInRight;  }
.kfb-animated[data-animation="bounceIn"]      { animation-name: kfbBounceIn;      }
.kfb-animated[data-animation="bounceInUp"]    { animation-name: kfbBounceInUp;    }
.kfb-animated[data-animation="flipInX"]       { animation-name: kfbFlipInX;       }
.kfb-animated[data-animation="flipInY"]       { animation-name: kfbFlipInY;       }
.kfb-animated[data-animation="lightSpeedIn"]  { animation-name: kfbLightSpeedIn;  }
.kfb-animated[data-animation="rotateIn"]      { animation-name: kfbRotateIn;      }
.kfb-animated[data-animation="rollIn"]        { animation-name: kfbRollIn;        }
.kfb-animated[data-animation="jackInTheBox"]  { animation-name: kfbJackInTheBox;  }
.kfb-animated[data-animation="heartBeat"]     { animation-name: kfbHeartBeat;     }


/* ============================
   LIGHTBOX
   ============================ */
#kfb-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.9);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    animation: kfbFadeIn .18s ease;
}
#kfb-lightbox img {
    max-width: 92vw;
    max-height: 90vh;
    border-radius: 4px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
    cursor: default;
    object-fit: contain;
}
#kfb-lightbox-close {
    position: fixed;
    top: 16px;
    right: 20px;
    color: #fff;
    font-size: 32px;
    cursor: pointer;
    background: none;
    border: none;
    line-height: 1;
    opacity: .8;
    transition: opacity .15s;
    z-index: 2;
}
#kfb-lightbox-close:hover { opacity: 1; }
#kfb-lightbox-prev,
#kfb-lightbox-next {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,.15);
    border: none;
    color: #fff;
    font-size: 28px;
    width: 48px;
    height: 60px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    z-index: 2;
}
#kfb-lightbox-prev { left: 12px; }
#kfb-lightbox-next { right: 12px; }
#kfb-lightbox-prev:hover,
#kfb-lightbox-next:hover { background: rgba(255,255,255,.3); }


/* =========================================================================
   System 5: Popup Builder
   ========================================================================= */

.kfb-popup-wrap {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999;
    align-items: center;
    justify-content: center;
}

.kfb-popup-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
}

.kfb-popup-box {
    position: relative;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 24px 80px rgba(0,0,0,.25);
    width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 1;
}

.kfb-popup-box .kfb-page {
    max-width: none;
    padding: 32px;
}

.kfb-popup-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: rgba(0,0,0,.08);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 16px;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #374151;
    transition: background .15s;
}
.kfb-popup-close:hover { background: rgba(0,0,0,.18); }

/* Animation variants */
.kfb-popup-anim-fade    .kfb-popup-box { animation: kfbFadeIn .3s ease both; }
.kfb-popup-anim-slideUp .kfb-popup-box { animation: kfbFadeInUp .35s ease both; }
.kfb-popup-anim-zoom    .kfb-popup-box { animation: kfbZoomIn .3s ease both; }
.kfb-popup-anim-slideLeft  .kfb-popup-box { animation: kfbFadeInRight .35s ease both; }
.kfb-popup-anim-slideRight .kfb-popup-box { animation: kfbFadeInLeft  .35s ease both; }

body.kfb-popup-open { overflow: hidden; }


/* =========================================================================
   System 6: Motion Effects — additional hover classes
   ========================================================================= */

/* Parallax elements: GPU-accelerated */
[data-parallax] {
    will-change: transform;
}

/* ---- Hover Effects ---- */
[class*="kfb-hover-"] { transition: transform .3s ease, box-shadow .3s ease, opacity .3s ease, filter .3s ease; }

.kfb-hover-lift:hover    { transform: translateY(-6px); box-shadow: 0 12px 32px rgba(0,0,0,.18); }
.kfb-hover-grow:hover    { transform: scale(1.06); }
.kfb-hover-shrink:hover  { transform: scale(0.94); }
.kfb-hover-float:hover   { transform: translateY(-10px); }
.kfb-hover-push:hover    { transform: scale(0.96) translateY(2px); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.kfb-hover-opacity:hover { opacity: .65; }
.kfb-hover-glow:hover    { box-shadow: 0 0 20px rgba(99,102,241,.6); filter: brightness(1.05); }
.kfb-hover-skew:hover    { transform: skewX(-6deg); }
.kfb-hover-spin:hover    { transform: rotate(360deg); transition-duration: .6s; }

@keyframes kfbPulse  { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
@keyframes kfbShake  { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }

.kfb-hover-pulse:hover { animation: kfbPulse .6s ease infinite; }
.kfb-hover-shake:hover { animation: kfbShake .5s ease; }

/* ---- CSS Transform System ---- */
/* Static transforms output via data-kfb-tf inline style (PHP/JS set CSS vars) */
[data-kfb-tf] {
    transform:
        rotate(var(--kfb-rotate,0deg))
        scale(var(--kfb-scale,1))
        skewX(var(--kfb-skewx,0deg))
        skewY(var(--kfb-skewy,0deg))
        scaleX(var(--kfb-fliph,1))
        scaleY(var(--kfb-flipv,1));
    transform-origin: center center;
}

/* ---- Mouse Track 3D Tilt ---- */
[data-mouse-track] {
    transform-style: preserve-3d;
    transition: transform .15s ease;
    will-change: transform;
}

/* ---- Shape Dividers ---- */
.kfb-shape-divider {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 2;
    pointer-events: none;
}
.kfb-shape-divider.kfb-shape-top    { top: -1px; }
.kfb-shape-divider.kfb-shape-bottom { bottom: -1px; transform: rotate(180deg); }
.kfb-shape-divider svg {
    display: block;
    width: 100%;
}
.kfb-shape-divider.kfb-shape-bottom.kfb-flip     svg { transform: scaleX(-1); }
.kfb-shape-divider.kfb-shape-top.kfb-flip         svg { transform: scaleX(-1); }
.kfb-shape-divider.kfb-flip-v                     svg { transform: scaleY(-1); }
.kfb-shape-divider.kfb-flip.kfb-flip-v            svg { transform: scaleX(-1) scaleY(-1); }

/* Sections with shape dividers need overflow:visible so dividers aren't clipped */
.kfb-has-shape-divider { overflow: visible !important; position: relative; }

/* ---- Section Video Background ---- */
.kfb-has-video-bg { overflow: hidden !important; position: relative; }
.kfb-section-video-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.kfb-section-video-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.kfb-section-video-yt iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 177.78vh;
    min-height: 100%;
    width: 100%;
    height: 56.25vw;
    transform: translate(-50%, -50%);
    border: none;
    pointer-events: none;
}
.kfb-section-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.kfb-section-inner { position: relative; z-index: 2; }


/* =========================================================================
   System 3: CSS Engine — responsive visibility helpers
   ========================================================================= */

@media (min-width: 768px) {
    .kfb-hide-desktop { display: none !important; }
}
@media (max-width: 767px) {
    .kfb-hide-mobile  { display: none !important; }
}
@media (min-width: 481px) and (max-width: 1024px) {
    .kfb-hide-tablet  { display: none !important; }
}

/* =========================================================================
   Container Engine — Systems 1-12
   ========================================================================= */

.kfb-container {
    box-sizing: border-box;
    position: relative;
}

/* Video background */
.kfb-container-video-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.kfb-container-video-bg video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

/* Overlay */
.kfb-container-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

/* Children above video/overlay */
.kfb-container > *:not(.kfb-container-video-bg):not(.kfb-container-overlay) {
    position: relative;
    z-index: 2;
}

/* ── Breakpoint visibility helpers (new breakpoints) ── */
@media (min-width: 993px) and (max-width: 1199px) {
    .kfb-hide-laptop { display: none !important; }
}
@media (min-width: 768px) and (max-width: 992px) {
    .kfb-hide-tablet-new { display: none !important; }
}

/* ── Transition: apply when JS attaches .kfb-container-transitions ── */
.kfb-container-transitions {
    transition: all 0.3s ease;
}

/* ── Clip-path presets ── */
.kfb-clip-slant-right  { clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); }
.kfb-clip-slant-left   { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 85%); }
.kfb-clip-arrow-right  { clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%); }
.kfb-clip-arrow-left   { clip-path: polygon(10% 0, 100% 0, 100% 100%, 10% 100%, 0 50%); }
.kfb-clip-wave-top     { clip-path: ellipse(55% 8% at 50% 0%); }
.kfb-clip-circle       { clip-path: circle(50%); }
.kfb-clip-hexagon      { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }

/* ── Sticky section ── */
.kfb-section.kfb-sticky,
.kfb-container.kfb-sticky {
    position: sticky;
    top: 0;
    z-index: 100;
}

/* ── Sticky Shrink ── */
.kfb-section.kfb-sticky-shrink {
    transition: min-height 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
}
.kfb-section.kfb-sticky-shrink.kfb-is-shrunk > .kfb-section-inner {
    transition: padding 0.3s ease;
}
.kfb-section.kfb-sticky-shrink.kfb-is-shrunk {
    box-shadow: 0 2px 20px rgba(0,0,0,0.12);
}

/* ── Image hover effects ── */
.kfb-image-wrap { display: inline-block; overflow: hidden; }
.kfb-image-wrap img { transition: transform 0.35s ease, box-shadow 0.35s ease, opacity 0.35s ease; }

.kfb-image-wrap.kfb-img-hover-zoom:hover img { transform: scale(1.08); }

.kfb-image-wrap.kfb-img-hover-overlay { position: relative; }
.kfb-image-wrap.kfb-img-hover-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
.kfb-image-wrap.kfb-img-hover-overlay:hover::after { opacity: 1; }

.kfb-image-wrap.kfb-img-hover-lift:hover img {
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
    transform: translateY(-4px);
}

/* ── Image Overlay on Hover ── */
.kfb-image-wrap.kfb-has-img-overlay { overflow: hidden; }
.kfb-img-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    text-align: center;
    padding: 16px;
    box-sizing: border-box;
}
.kfb-image-wrap.kfb-has-img-overlay:hover .kfb-img-overlay {
    opacity: 1;
    pointer-events: auto;
}
.kfb-img-ov-text {
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.kfb-img-ov-btn {
    display: inline-block;
    background: #ffffff;
    color: #1e293b;
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}
.kfb-img-ov-btn:hover { background: #f1f5f9; color: #0f172a; }

/* ── Button icon spacing ── */
.kfb-btn-icon { display: inline-block; vertical-align: middle; }

/* ── Icon Box hover effects ── */
.kfb-icon-box { color: inherit; }
.kfb-icon-box-lift:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 16px 40px rgba(0,0,0,0.14) !important;
}
.kfb-icon-box-glow:hover {
    box-shadow: 0 0 0 3px currentColor, 0 4px 24px rgba(0,0,0,0.08) !important;
}

/* ── Image Box hover effects ── */
.kfb-image-box { color: inherit; }
.kfb-img-box-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15) !important;
}
.kfb-img-box-zoom:hover .kfb-imgbox-img { transform: scale(1.08); }
.kfb-img-box-overlay { position: relative; }
.kfb-img-box-overlay .kfb-imgbox-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    opacity: 0;
    transition: opacity .35s;
}
.kfb-img-box-overlay:hover .kfb-imgbox-img { filter: brightness(0.75); }