/* Dana font (place your licensed files in ./fonts/) */
@font-face {
    font-family: "Dana";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../../assets/fonts/Dana-Regular.ttf") format("truetype");
}
@font-face {
    font-family: "Dana";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../../assets/fonts/Dana-Bold.ttf") format("truetype");
}

/* CSS Variables for the widget */
.elementor-widget-khab-blog-widget {
    --khab-font-family: "Dana", "Vazirmatn", "IRANSansX", Tahoma, "Segoe UI", sans-serif;

    /* Brand colors */
    --khab-iris: #6b74d8;
    --khab-iris-200: #cfd2ff;
    --khab-lavender-50: #f0f1f9;
    --khab-lavender-100: #e6e7f4;
    --khab-teal-900: #123c3a;
    --khab-teal-700: #1f5a56;
    --khab-mint: #a7e76a;
    --khab-green-700: #2a7c68;

    --khab-text-900: #0f1b1d;
    --khab-text-700: #3b4651;
    --khab-text-500: #6b7280;

    /* Subtle off-white surface to separate from white backgrounds */
    --khab-card-bg: #f6f8fb;
    --khab-card-bg-2: #eff2f7;
    --khab-card-border: rgba(15, 27, 29, 0.06);
    /* Layered elevation for crisp 3D */
    --khab-shadow: 0 0 0 1px rgba(15, 27, 29, 0.06),
    0.3px 0.5px 0.7px rgba(17, 24, 39, 0.10),
    0.8px 1.6px 2px rgba(17, 24, 39, 0.08),
    2px 3.7px 4.6px rgba(17, 24, 39, 0.08),
    4.8px 9px 11.2px rgba(17, 24, 39, 0.09),
    12px 22px 27px rgba(17, 24, 39, 0.10);
    --khab-shadow-hover: 0 0 0 1px rgba(15, 27, 29, 0.08),
    0.6px 1px 1.3px rgba(17, 24, 39, 0.12),
    1.5px 2.8px 3.5px rgba(17, 24, 39, 0.10),
    3.6px 6.8px 8.5px rgba(17, 24, 39, 0.10),
    9px 17px 21px rgba(17, 24, 39, 0.12),
    22px 40px 50px rgba(17, 24, 39, 0.14);
    /* Mask-aware cast shadow applied on the wrapper (box-shadow format) */
    --khab-drop-shadow: 0 18px 34px rgba(17, 24, 39, 0.16), 0 6px 14px rgba(17, 24, 39, 0.12);
    --khab-drop-shadow-hover: 0 28px 58px rgba(17, 24, 39, 0.22), 0 12px 26px rgba(17, 24, 39, 0.16);
}

/* Reset for widget */
.elementor-widget-khab-blog-widget *,
.elementor-widget-khab-blog-widget *::before,
.elementor-widget-khab-blog-widget *::after {
    box-sizing: border-box;
}

.elementor-widget-khab-blog-widget img {
    max-width: 100%;
    display: block;
}

/* Main section */
.khab-latest-articles {
    position: relative;
    isolation: isolate;
    direction: rtl;
    overflow: clip;
    padding: 120px 0;
    background: #F7F9FC;
    font-family: var(--khab-font-family);
}

.khab-container {
    width: min(1240px, calc(100% - 40px));
    margin: 0 auto;
}

.khab-section-head {
    text-align: center;
    margin-bottom: 48px;
}

.khab-section-title {
    margin: 18px 0 10px;
    font-size: clamp(28px, 4.5vw, 38px);
    line-height: 1.3;
    color: var(--khab-teal-900);
    font-weight: 800;
    text-shadow: 0 2px 4px rgba(15, 27, 29, 0.05);
}

.khab-section-subtitle {
    margin: 0 auto 28px;
    max-width: 720px;
    color: var(--khab-text-500);
    line-height: 1.9;
    font-size: 16px;
    font-weight: 400;
}

/* CTA button (Uiverse.io by mobinkakei) scoped and RTL-friendly */
.khab-cta {
    display: inline-flex;
    align-items: center;
    padding: 11px 33px;
    text-decoration: none;
    font-size: 25px;
    line-height: 1;
    color: #fff;
    background: linear-gradient(135deg, var(--khab-green-700) 0%, var(--khab-teal-900) 100%);
    transition: box-shadow 0.5s, transform 0.2s, background 0.3s ease;
    box-shadow: 6px 6px 0 rgba(18, 60, 58, 0.9);
    transform: skewX(-15deg);
    border: none;
    cursor: pointer;
    border-radius: 10px;
    font-family: var(--khab-font-family);
}

.khab-cta:focus-visible {
    outline: 2px solid var(--khab-mint);
    outline-offset: 4px;
}

.khab-cta:hover {
    box-shadow: 10px 10px 0 var(--khab-mint);
    background: linear-gradient(135deg, var(--khab-teal-900) 0%, #0d2b29 100%);
}

.khab-cta .span {
    transform: skewX(15deg);
    font-weight: 700;
}

.khab-cta .second {
    transition: margin 0.5s;
    margin-inline-start: 30px;
    position: relative;
    top: 12%;
    width: 50px;
}

.khab-cta:hover .second {
    margin-inline-start: 45px;
}

.khab-cta .one,
.khab-cta .two,
.khab-cta .three {
    transition: transform 0.5s;
}

.khab-cta .one {
    transform: translateX(-60%);
    transition-duration: 0.4s;
}

.khab-cta .two {
    transform: translateX(-30%);
    transition-duration: 0.5s;
}

.khab-cta:hover .one {
    transform: translateX(0%);
    animation: khab-color-anim 1s infinite 0.6s;
}

.khab-cta:hover .two {
    transform: translateX(0%);
    animation: khab-color-anim 1s infinite 0.4s;
}

.khab-cta:hover .three {
    animation: khab-color-anim 1s infinite 0.2s;
}

@keyframes khab-color-anim {
    0% {
        fill: #fff;
    }
    50% {
        fill: #fbc638;
    }
    100% {
        fill: #fff;
    }
}

/* Flip arrow for RTL */
html[dir="rtl"] .khab-cta .second svg {
    transform: scaleX(-1);
}

@media (max-width: 640px) {
    /* Make the top CTA button smaller on mobile */
    .khab-cta {
        font-size: 16px;
        padding: 8px 18px;
        border-radius: 8px;
        box-shadow: 4px 4px 0 rgba(18, 60, 58, 0.9);
    }

    .khab-cta .second {
        width: 36px;
        margin-inline-start: 16px;
        top: 6%;
    }

    .khab-cta:hover .second {
        margin-inline-start: 24px;
    }
}

/* Carousel */
.khab-carousel {
    position: relative;
    margin-top: 32px;
    padding-bottom: 64px;
}

.khab-carousel-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    direction: ltr;
    padding-block-end: 36px;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.khab-carousel-track {
    display: flex;
    align-items: stretch;
    gap: 28px;
    padding-inline: 2px;
    direction: ltr;
}

.khab-carousel-track .khab-card-shell {
    flex: 0 0 calc((100% - (28px * 2)) / 3);
    scroll-snap-align: start;
    direction: rtl;
    scroll-snap-stop: always;
}

@media (max-width: 1024px) {
    .khab-carousel-track .khab-card-shell {
        flex-basis: calc((100% - (24px * 1)) / 2);
    }

    .khab-carousel-track {
        gap: 24px;
    }
}

@media (max-width: 640px) {
    .khab-carousel-track .khab-card-shell {
        flex-basis: 100%;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    .khab-carousel-track {
        gap: 0;
        padding-inline: 0;
    }

    .khab-carousel-viewport {
        padding-inline: 0;
    }
}

/* Hide scrollbar */
.khab-carousel-viewport::-webkit-scrollbar {
    display: none;
}

.khab-carousel-viewport {
    scrollbar-width: none;
}

/* Navigation arrows */
.khab-carousel-nav {
    position: absolute;
    inset-block: 0;
    margin-block: auto;
    height: 56px;
    width: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    background: linear-gradient(135deg, var(--khab-teal-700), var(--khab-teal-900));
    color: #fff;
    box-shadow: 0 12px 30px rgba(17, 24, 39, 0.2);
    transform: translateY(0);
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    z-index: 5;
}

.khab-carousel-nav svg {
    width: 24px;
    height: 24px;
}

.khab-carousel-nav:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(17, 24, 39, 0.28);
}

.khab-carousel-nav:focus-visible {
    outline: 3px solid var(--khab-iris);
    outline-offset: 3px;
}

.khab-carousel-nav.khab-prev {
    inset-inline-start: -80px;
}

.khab-carousel-nav.khab-next {
    inset-inline-end: -80px;
}

/* Optional reversed placement (toggle via class) */
.khab-arrows-reversed-prev {
    inset-inline-start: auto !important;
    inset-inline-end: -80px !important;
}

.khab-arrows-reversed-next {
    inset-inline-end: auto !important;
    inset-inline-start: -80px !important;
}

@media (max-width: 768px) {
    .khab-carousel-nav.khab-prev {
        inset-inline-start: -8px;
    }

    .khab-carousel-nav.khab-next {
        inset-inline-end: -8px;
    }

    .khab-arrows-reversed-prev {
        inset-inline-start: auto !important;
        inset-inline-end: -8px !important;
    }

    .khab-arrows-reversed-next {
        inset-inline-end: auto !important;
        inset-inline-start: -8px !important;
    }
}

@media (max-width: 640px) {
    .khab-carousel-nav.khab-prev {
        inset-inline-start: -18px;
    }

    .khab-carousel-nav.khab-next {
        inset-inline-end: -18px;
    }

    .khab-carousel-nav {
        display: inline-flex;
        width: 34px;
        height: 34px;
    }

    .khab-carousel-nav svg {
        width: 18px;
        height: 18px;
    }

    .khab-arrows-reversed-prev {
        inset-inline-start: auto !important;
        inset-inline-end: -18px !important;
    }

    .khab-arrows-reversed-next {
        inset-inline-end: auto !important;
        inset-inline-start: -18px !important;
    }

    /* Move arrows to sit alongside the dots at the bottom on mobile */
    .khab-carousel-nav {
        top: auto;
        bottom: 8px;
        inset-block: auto;
    }

    .khab-carousel-nav.khab-prev {
        inset-inline-start: 12px;
        inset-inline-end: auto;
    }

    .khab-carousel-nav.khab-next {
        inset-inline-end: 12px;
        inset-inline-start: auto;
    }
}

.khab-carousel-nav[disabled] {
    opacity: 0.4;
    pointer-events: none;
}

/* Pagination dots */
.khab-carousel-dots {
    position: absolute;
    inset-inline: 0;
    bottom: 16px;
    display: flex;
    justify-content: center;
    gap: 10px;
    z-index: 6;
}

@media (max-width: 640px) {
    .khab-carousel-dots {
        bottom: 12px;
        padding-inline: 44px;
    }
}

.khab-carousel-dots button {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 0;
    background: rgba(31, 90, 86, 0.35);
    transition: width 220ms ease, background 220ms ease, transform 220ms ease;
    cursor: pointer;
}

.khab-carousel-dots button[aria-current="true"] {
    width: 28px;
    background: linear-gradient(135deg, var(--khab-mint), #7fd246);
    box-shadow: 0 6px 16px rgba(167, 231, 106, 0.35);
}

.khab-carousel-dots button:focus-visible {
    outline: 2px solid var(--khab-iris);
    outline-offset: 3px;
}

/* Card shell */
.khab-card-shell {
    position: relative;
    --khab-card-corner-radius: 32px;
    --khab-inverted-corner-size: 26px;
    --khab-inverted-corner-offset-x: 9px;
    --khab-inverted-corner-offset-y: 8px;
    --khab-share-size: 40px;
    --khab-share-tweak-y: 8px;
    --khab-share-tweak-x: 4px;
    /* Ensure share button is not clipped */
    overflow: visible;
    /* Add transform style for 3D context */
    transform-style: preserve-3d;
}

/* Create shadow element behind the card using the duplicate approach */
.khab-card-shell::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, var(--khab-card-bg) 0%, var(--khab-card-bg-2) 100%);
    border: 1px solid var(--khab-card-border);
    border-radius: 24px;
    /* Use 3D transform to place behind without z-index issues */
    transform: translate3d(4px, 8px, -2px) scale(0.98);
    transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 320ms cubic-bezier(0.4, 0, 0.2, 1);
    /* Apply shadow to the non-masked duplicate */
    box-shadow: 0 18px 34px rgba(17, 24, 39, 0.16),
    0 6px 14px rgba(17, 24, 39, 0.12);
    opacity: 0.7;
}

.khab-card-shell:hover::before {
    transform: translate3d(2px, 4px, -2px) scale(1);
    box-shadow: 0 28px 58px rgba(17, 24, 39, 0.22),
    0 12px 26px rgba(17, 24, 39, 0.16);
    opacity: 0.9;
}

/* Apply the same mask to shadow element to hide it behind masked areas */
@supports ((mask: radial-gradient(#000 70%, #0000 72%)) or (-webkit-mask-image: none)) {
    .khab-card-shell::before {
        --r: var(--khab-card-corner-radius);
        --s: var(--khab-inverted-corner-size);
        --x: var(--khab-inverted-corner-offset-x);
        --y: var(--khab-inverted-corner-offset-y);
        --_m: radial-gradient(#000 70%, #0000 72%);
        --_g: conic-gradient(from 180deg at var(--r) calc(100% - var(--r)), #0000 25%, #000 0);
        --_d: calc(var(--s) + var(--r));

        mask-image: radial-gradient(#000 70%, #0000 72%),
        radial-gradient(#000 70%, #0000 72%),
        radial-gradient(var(--s) at 0 100%, #0000 99%, #000 calc(100% + 1px)),
        var(--_g),
        var(--_g);
        mask-position: calc(var(--_d) + var(--x)) 100%,
        0 calc(100% - var(--_d) - var(--y)),
        calc(var(--r) + var(--x)) calc(-1 * var(--r) - var(--y)),
        calc(var(--_d) + var(--x)) 0,
        0 calc(-1 * var(--_d) - var(--y));
        mask-size: calc(2 * var(--r)) calc(2 * var(--r)),
        calc(2 * var(--r)) calc(2 * var(--r)),
        auto,
        auto,
        auto;
        mask-repeat: no-repeat;

        -webkit-mask-image: radial-gradient(#000 70%, #0000 72%),
        radial-gradient(#000 70%, #0000 72%),
        radial-gradient(var(--s) at 0 100%, #0000 99%, #000 calc(100% + 1px)),
        var(--_g),
        var(--_g);
        -webkit-mask-position: calc(var(--_d) + var(--x)) 100%,
        0 calc(100% - var(--_d) - var(--y)),
        calc(var(--r) + var(--x)) calc(-1 * var(--r) - var(--y)),
        calc(var(--_d) + var(--x)) 0,
        0 calc(-1 * var(--_d) - var(--y));
        -webkit-mask-size: calc(2 * var(--r)) calc(2 * var(--r)),
        calc(2 * var(--r)) calc(2 * var(--r)),
        auto,
        auto,
        auto;
        -webkit-mask-repeat: no-repeat;
    }
}

/* Ground contact shadow */
.khab-card-shell::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 2px;
    height: 32px;
    background: radial-gradient(closest-side, rgba(17, 24, 39, 0.4), rgba(17, 24, 39, 0) 70%),
    radial-gradient(closest-side, rgba(17, 24, 39, 0.2), rgba(17, 24, 39, 0) 80%);
    filter: blur(12px);
    opacity: 0.6;
    transform: translateZ(0);
    transition: opacity 220ms ease, transform 220ms ease, filter 220ms ease;
    z-index: 0;
    pointer-events: none;
}

.khab-card-shell:hover::after {
    opacity: 0.8;
    filter: blur(14px);
    transform: translateZ(0) scaleX(1.08) translateY(2px);
}

.khab-card {
    position: relative; /* ensure proper stacking */
    z-index: 1; /* keep card below floating share button */
    height: 100%;
    background: linear-gradient(180deg, var(--khab-card-bg) 0%, var(--khab-card-bg-2) 100%);
    border: 1px solid var(--khab-card-border);
    border-radius: 24px;
    /* Enhanced shadows for better visibility on white backgrounds */
    box-shadow: var(--khab-shadow),
    0 0 0 1px rgba(255, 255, 255, 0.8) inset,
    0 1px 3px rgba(17, 24, 39, 0.1);
    overflow: hidden;
    transform: translateY(12px) scale(0.98);
    transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 320ms cubic-bezier(0.4, 0, 0.2, 1);
    content-visibility: auto;
    contain-intrinsic-size: 380px 460px;
    backdrop-filter: blur(8px);
}

.khab-card:hover {
    transform: translateY(0px) scale(1);
    box-shadow: var(--khab-shadow-hover),
    0 0 0 1px rgba(255, 255, 255, 0.9) inset,
    0 2px 8px rgba(17, 24, 39, 0.15);
    border-color: rgba(255, 255, 255, 0.8);
}

.khab-card-link {
    color: inherit;
    text-decoration: none;
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    cursor: default;
}

.khab-media {
    position: relative;
    aspect-ratio: 1.6/1;
    overflow: hidden;
    margin: 8px;
    border-radius: 18px;
    box-shadow: 0 8px 25px rgba(17, 24, 39, 0.12);
}

.khab-media img {
    width: 105%;
    height: 105%;
    object-fit: cover;
    transform: scale(1.02);
    transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.khab-card:hover .khab-media img {
    transform: scale(1.1);
}

.khab-media-link {
    display: block;
    border-radius: 18px;
}

.khab-media-link:focus-visible {
    outline: 3px solid var(--khab-iris);
    outline-offset: 4px;
    border-radius: 18px;
}

/* Category badges */
.khab-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 7px 12px;
    font-size: 12px;
    border-radius: 999px;
    color: #0f1b1d;
    background: linear-gradient(135deg, rgba(167, 231, 106, 0.95), rgba(167, 231, 106, 0.85));
    border: 1px solid rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(167, 231, 106, 0.3);
}

.khab-badge.badge--mint {
    background: linear-gradient(135deg, rgba(167, 231, 106, 0.95), rgba(167, 231, 106, 0.85));
    box-shadow: 0 4px 12px rgba(167, 231, 106, 0.3);
}

.khab-badge.badge--blue {
    background: linear-gradient(135deg, rgba(107, 116, 216, 0.95), rgba(107, 116, 216, 0.85));
    box-shadow: 0 4px 12px rgba(107, 116, 216, 0.3);
    color: #fff;
}

.khab-badge.badge--purple {
    background: linear-gradient(135deg, rgba(139, 69, 196, 0.95), rgba(139, 69, 196, 0.85));
    box-shadow: 0 4px 12px rgba(139, 69, 196, 0.3);
    color: #fff;
}

.khab-badge.badge--iris {
    background: linear-gradient(135deg, rgba(207, 210, 255, 0.95), rgba(207, 210, 255, 0.85));
    box-shadow: 0 4px 12px rgba(207, 210, 255, 0.3);
}

/* Card content */
.khab-content {
    padding: 20px 20px 22px;
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    gap: 10px;
}

.khab-card-title {
    font-size: 19px;
    line-height: 1.6;
    margin: 0;
    color: var(--khab-teal-900);
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(15, 27, 29, 0.03);
}

.khab-card-title .khab-title-link {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    border-radius: 8px;
}

.khab-card-title .khab-title-link:hover {
    text-decoration: underline;
}

.khab-card-title .khab-title-link:focus-visible {
    outline: 2px solid var(--khab-iris);
    outline-offset: 3px;
}

.khab-card-excerpt {
    margin: 0;
    color: var(--khab-text-700);
    line-height: 1.85;
    font-size: 15px;
    opacity: 0.9;
    cursor: text;
}

.khab-card-meta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--khab-text-500);
    font-size: 13px;
    margin-top: 4px;
    font-weight: 500;
}

.khab-meta-dot {
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: rgba(31, 90, 86, 0.4);
}

/* Learn More button (Uiverse.io by cssbuttons-io, adapted) */
.khab-learn-more {
    position: relative;
    display: inline-block;
    cursor: pointer;
    vertical-align: middle;
    text-decoration: none;
    background: transparent;
    padding: 0;
    font-size: 14px;
    font-family: var(--khab-font-family);
    width: 12rem;
    height: auto;
    margin-top: auto;
    align-self: flex-start;
}

.khab-learn-more .khab-circle {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: relative;
    display: block;
    margin: 0;
    width: 3rem;
    height: 3rem;
    background: #10B981;
    border-radius: 1.625rem;
    overflow: hidden;
}

.khab-learn-more .khab-circle .khab-icon {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    background: #fff;
}

.khab-learn-more .khab-circle .khab-icon.khab-arrow {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    left: 0.625rem;
    width: 1.125rem;
    height: 0.125rem;
    background: none;
}

.khab-learn-more .khab-circle .khab-icon.khab-arrow::before {
    position: absolute;
    content: "";
    top: -0.29rem;
    right: 0.0625rem;
    width: 0.625rem;
    height: 0.625rem;
    border-top: 0.125rem solid #fff;
    border-right: 0.125rem solid #fff;
    transform: rotate(45deg);
}

html[dir="rtl"] .khab-learn-more .khab-circle .khab-icon.khab-arrow::before {
    right: auto;
    left: 0.0625rem;
    border-right: 0;
    border-left: 0.125rem solid #fff;
    transform: rotate(-45deg);
}

.khab-learn-more .khab-button-text {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: absolute;
    inset-block: 0;
    inset-inline: 0;
    padding: 0.75rem 0;
    margin: 0 0 0 1.85rem;
    color: #10B981;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    text-transform: none;
}

html[dir="rtl"] .khab-learn-more .khab-button-text {
    margin: 0 1.85rem 0 0;
}

html[dir="rtl"] .khab-learn-more .khab-circle .khab-icon.khab-arrow {
    left: auto;
    right: 0.625rem;
}

.khab-learn-more:hover .khab-circle,
.khab-learn-more:focus-visible .khab-circle {
    width: 100%;
}

.khab-learn-more:hover .khab-circle .khab-icon.khab-arrow,
.khab-learn-more:focus-visible .khab-circle .khab-icon.khab-arrow {
    background: #fff;
    transform: translate(1rem, 0);
}

html[dir="rtl"] .khab-learn-more:hover .khab-circle .khab-icon.khab-arrow,
html[dir="rtl"] .khab-learn-more:focus-visible .khab-circle .khab-icon.khab-arrow {
    transform: translate(-0.85rem, 0);
}

.khab-learn-more:hover .khab-button-text,
.khab-learn-more:focus-visible .khab-button-text {
    color: #fff;
}

.khab-learn-more:focus-visible {
    outline: 3px solid var(--khab-iris);
    outline-offset: 4px;
    border-radius: 999px;
}

/* Inverted corner CSS mask */
@supports ((mask: radial-gradient(#000 70%, #0000 72%)) or (-webkit-mask-image: none)) {
    .khab-card {
        --r: var(--khab-card-corner-radius);
        --s: var(--khab-inverted-corner-size);
        --x: var(--khab-inverted-corner-offset-x);
        --y: var(--khab-inverted-corner-offset-y);
        --_m: radial-gradient(#000 70%, #0000 72%);
        --_g: conic-gradient(from 180deg at var(--r) calc(100% - var(--r)), #0000 25%, #000 0);
        --_d: calc(var(--s) + var(--r));

        mask-image: radial-gradient(#000 70%, #0000 72%),
        radial-gradient(#000 70%, #0000 72%),
        radial-gradient(var(--s) at 0 100%, #0000 99%, #000 calc(100% + 1px)),
        var(--_g),
        var(--_g);
        mask-position: calc(var(--_d) + var(--x)) 100%,
        0 calc(100% - var(--_d) - var(--y)),
        calc(var(--r) + var(--x)) calc(-1 * var(--r) - var(--y)),
        calc(var(--_d) + var(--x)) 0,
        0 calc(-1 * var(--_d) - var(--y));
        mask-size: calc(2 * var(--r)) calc(2 * var(--r)),
        calc(2 * var(--r)) calc(2 * var(--r)),
        auto,
        auto,
        auto;
        mask-repeat: no-repeat;

        -webkit-mask-image: radial-gradient(#000 70%, #0000 72%),
        radial-gradient(#000 70%, #0000 72%),
        radial-gradient(var(--s) at 0 100%, #0000 99%, #000 calc(100% + 1px)),
        var(--_g),
        var(--_g);
        -webkit-mask-position: calc(var(--_d) + var(--x)) 100%,
        0 calc(100% - var(--_d) - var(--y)),
        calc(var(--r) + var(--x)) calc(-1 * var(--r) - var(--y)),
        calc(var(--_d) + var(--x)) 0,
        0 calc(-1 * var(--_d) - var(--y));
        -webkit-mask-size: calc(2 * var(--r)) calc(2 * var(--r)),
        calc(2 * var(--r)) calc(2 * var(--r)),
        auto,
        auto,
        auto;
        -webkit-mask-repeat: no-repeat;
    }
}

/* Share button */
.khab-share-btn {
    position: absolute;
    bottom: calc(var(--khab-inverted-corner-offset-y, 8px) + var(--khab-card-corner-radius, 32px) - (var(--khab-share-size, 40px) / 2) - var(--khab-share-tweak-y, 0px));
    left: calc(var(--khab-inverted-corner-offset-x, 9px) + var(--khab-card-corner-radius, 32px) - (var(--khab-share-size, 40px) / 2) - var(--khab-share-tweak-x, 0px));
    width: var(--khab-share-size, 40px);
    height: var(--khab-share-size, 40px);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.7);
    background: linear-gradient(135deg, #10B981, #0ea372);
    color: #fff;
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.35);
    cursor: pointer;
    z-index: 100; /* ensure above card and mask */
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease, color 0.2s ease;
    transform: translateZ(0);
    /* Ensure icon is always visible */
    overflow: visible;
    /* Ensure button content is centered and visible */
    isolation: isolate;
}

.khab-share-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 32px rgba(16, 185, 129, 0.45);
    background: linear-gradient(135deg, #0ea372, #0b8e64);
}

.khab-share-btn:active {
    transform: translateY(0) scale(0.98);
}

.khab-share-btn:focus-visible {
    outline: 3px solid var(--khab-iris);
    outline-offset: 3px;
}

.khab-share-btn svg {
    width: 18px;
    height: 18px;
    display: block;
    pointer-events: none;
    color: #fff;
    transform: translateZ(0);
    /* Ensure SVG is always visible and not clipped */
    overflow: visible;
    min-width: 18px;
    min-height: 18px;
    flex-shrink: 0;
}

.khab-share-btn.is-copied {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

/* Make inline SVGs inherit the button color without over-constraining */
.khab-share-btn svg [stroke]:not([stroke="none"]) {
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.khab-share-btn svg [fill]:not([fill="none"]) {
    fill: currentColor;
}

.khab-share-btn i,
.khab-share-btn .eicon {
    font-size: 18px;
    line-height: 1;
    display: inline-block;
    color: #fff;
    /* Ensure icon fonts are also visible */
    overflow: visible;
}

.khab-share-btn .elementor-icon {
    width: 18px;
    height: 18px;
    line-height: 1;
    color: #fff;
    overflow: visible;
}

/* Scroll reveal animation */
.khab-reveal-on-scroll {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: all 600ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
}

.khab-reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Toast notification */
.khab-toast-root {
    position: fixed;
    inset-inline: 0;
    bottom: 24px;
    display: flex;
    justify-content: center;
    pointer-events: none;
    z-index: 9999;
}

.khab-toast {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(17, 24, 39, 0.85);
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
    transform: translateY(16px);
    opacity: 0;
    transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 300ms ease;
}

.khab-toast.show {
    transform: translateY(0);
    opacity: 1;
}

.khab-toast .khab-icon {
    width: 18px;
    height: 18px;
    display: block;
    flex: 0 0 auto;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .khab-reveal-on-scroll {
        opacity: 1 !important;
        transform: none !important;
    }

    .khab-card:hover .khab-media img,
    .khab-card:hover,
    .khab-card-shell::after,
    .khab-card-shell:hover::after {
        transition: none !important;
    }
}

/* Elementor editor compatibility */
.elementor-editor-active .khab-latest-articles {
    overflow: visible;
}

.elementor-editor-active .khab-reveal-on-scroll {
    opacity: 1;
    transform: none;
}

/* Fallback for browsers with poor 3D transform support */
@supports not (transform-style: preserve-3d) {
    .khab-card-shell {
        transform-style: flat;
        z-index: 1;
    }

    .khab-card-shell::before {
        z-index: -1;
        transform: translateY(6px) translateX(4px) scale(0.98);
    }

    .khab-card-shell:hover::before {
        transform: translateY(2px) translateX(2px) scale(1);
    }
}

@media (max-width: 768px) {
    .khab-latest-articles {
        padding: 80px 0;
    }

    .khab-section-head {
        margin-bottom: 36px;
    }

    .khab-container {
        width: calc(100% - 32px);
    }

    .khab-media {
        margin: 6px;
        border-radius: 14px;
    }

    .khab-content {
        padding: 16px 18px 20px;
    }

    .khab-card-title {
        font-size: 17px;
    }
}

@media (max-width: 640px) {
    .khab-card {
        transform: translateY(8px) scale(0.96);
        contain-intrinsic-size: 300px 360px; /* reduce placeholder height on small screens */
    }

    .khab-card:hover {
        transform: translateY(0) scale(0.98);
    }

    html[dir="rtl"] .khab-card-title {
        padding-inline-end: 56px;
    }

    /* Make cards shorter on mobile */
    .khab-media {
        aspect-ratio: 16 / 9;
    }

    .khab-card-excerpt {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .khab-content {
        padding: 14px 16px 16px;
    }

    .khab-card-title {
        font-size: 16px;
        line-height: 1.5;
    }
}

@media (max-width: 640px) {
    /* Prevent card stretch and extra vertical space */
    .khab-carousel-track {
        align-items: flex-start;
    }

    .khab-card {
        height: auto;
    }

    .khab-card-link {
        grid-template-rows: auto auto;
        height: auto;
    }

    /* Avoid pushing content down excessively */
    .khab-learn-more {
        margin-top: 10px;
    }
}

@media (max-width: 640px) {
    /* Make arrows smaller and align exactly with dots line */
    .khab-carousel-nav {
        width: 24px;
        height: 24px;
        bottom: 4px;
        box-shadow: 0 6px 16px rgba(17, 24, 39, 0.18);
    }

    .khab-carousel-nav svg {
        width: 12px;
        height: 12px;
    }

    /* Keep dots centered with arrows flanking them */
    .khab-carousel-dots {
        bottom: 12px;
        padding-inline: 44px;
    }

    /* Neutralize hover lift on touch to keep alignment exact */
    .khab-carousel-nav:hover {
        transform: translateY(0);
        box-shadow: 0 6px 16px rgba(17, 24, 39, 0.18);
    }
}