/* =============================================================
   AAFE Product Features Widget — Style
   ============================================================= */

/* ── Wrapper ────────────────────────────────────────────── */
.aafe-product-features-wrapper {
    width: 100%;
    /* NOTE: No overflow:hidden — connector lines extend outside columns */
}

/* ── Header ─────────────────────────────────────────────── */
.aafe-product-features__header {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    margin-bottom: 60px;
}

.aafe-product-features__pre-title {
    color: #845EC2;
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}

.aafe-product-features__heading {
    color: #0A142F;
    font-family: "Inter Tight", sans-serif;
    display: block;
    font-size: 32px;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}

.aafe-product-features__header-desc {
    color: #555555;
    font-family: "Inter", sans-serif;
    margin-top: 15px;
    font-size: 16px;
    line-height: 1.65;
}

/* ── Header CTA Button ──────────────────────────────────── */
.aafe-product-features__header-btn-wrap {
    margin-top: 24px;
}

.aafe-product-features__header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease;
    line-height: 1;
}

/* Solid */
.aafe-product-features__header-btn.aafe-btn-solid {
    background-color: #111;
    color: #fff;
    border-color: #111;
}
.aafe-product-features__header-btn.aafe-btn-solid:hover {
    background-color: #333;
    border-color: #333;
}

/* Outline */
.aafe-product-features__header-btn.aafe-btn-outline {
    background-color: transparent;
    color: #111;
    border-color: #111;
}
.aafe-product-features__header-btn.aafe-btn-outline:hover {
    background-color: #111;
    color: #fff;
}

/* Text Link */
.aafe-product-features__header-btn.aafe-btn-link {
    background-color: transparent;
    color: #111;
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.aafe-btn-icon {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/* ── Grid ───────────────────────────────────────────────── */
.aafe-product-features__grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* Default: 3 columns */
    gap: 40px;
    align-items: center;
}

.aafe-product-features__column {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* ============================================================
   LAYOUTS — class output by render() on .aafe-product-features-wrapper
   ============================================================ */

/* 3 Columns */
.aafe-product-features-wrapper.aafe-layout-3col .aafe-product-features__grid {
    grid-template-columns: 1fr auto 1fr;
}

/* 2 Columns */
.aafe-product-features-wrapper.aafe-layout-2col .aafe-product-features__grid {
    grid-template-columns: 1fr 1fr;
}
.aafe-product-features-wrapper.aafe-layout-2col .aafe-product-features__column--center {
    grid-column: 1 / -1;
    order: -1;
}

/* 1 Column */
.aafe-product-features-wrapper.aafe-layout-1col .aafe-product-features__grid {
    grid-template-columns: 1fr;
}
.aafe-product-features-wrapper.aafe-layout-1col .aafe-product-features__column--center {
    grid-column: 1 / -1;
    order: -1;
}

/* Column alignments (defaults) */
.aafe-product-features__column--center {
    align-items: center;
    justify-content: center;
}
/* Left column — items right-aligned by default */
.aafe-product-features__item--left {
    align-items: flex-end;
    text-align: right;
}
/* Right column — items left-aligned by default */
.aafe-product-features__item--right {
    align-items: flex-start;
    text-align: left;
}

/* ============================================================
   FEATURE ITEM — Base
   ============================================================ */
.aafe-product-features__item {
    background-color: #F4F0FF;
    border-radius: 12px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    position: relative;
    text-decoration: none;
    color: inherit;
    transition: all var(--aafe-transition, 300ms) cubic-bezier(0.25, 0.8, 0.25, 1);
}

a.aafe-product-features__item {
    background-color: #F4F0FF;
    border-radius: 12px;
    padding: 30px; cursor: pointer; }

/* ── Icon Position Variants ─────────────────────────────── */

/* Top (default) — column, icon first */
.aafe-product-features__item.aafe-icon-pos-top {
    flex-direction: column;
}

/* Bottom — column, icon last */
.aafe-product-features__item.aafe-icon-pos-bottom {
    flex-direction: column-reverse;
}
.aafe-product-features__item.aafe-icon-pos-bottom .aafe-product-features__icon-wrap {
    background-color: #ffffff;
    color: #4A00E0;
    border-radius: 50%;
    margin-bottom: 0;
    margin-top: 15px;
}

/* Left — row, icon first */
.aafe-product-features__item.aafe-icon-pos-left {
    flex-direction: row;
    align-items: flex-start;
    gap: 15px;
    /* override column-level align-items for row layout */
    text-align: left;
}
.aafe-product-features__item--left.aafe-icon-pos-left {
    text-align: left; /* row layout overrides column default right-align */
}

/* Right — row, icon last */
.aafe-product-features__item.aafe-icon-pos-right {
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 15px;
    text-align: left;
}
.aafe-product-features__item--right.aafe-icon-pos-right {
    text-align: right;
}

/* When icon is left or right, content fills remaining space */
.aafe-product-features__item.aafe-icon-pos-left .aafe-product-features__content,
.aafe-product-features__item.aafe-icon-pos-right .aafe-product-features__content {
    flex: 1;
    min-width: 0;
}

/* Icon wrap — no bottom margin in row layouts (gap controls spacing) */
.aafe-product-features__item.aafe-icon-pos-left .aafe-product-features__icon-wrap,
.aafe-product-features__item.aafe-icon-pos-right .aafe-product-features__icon-wrap {
    background-color: #ffffff;
    color: #4A00E0;
    border-radius: 50%;
    margin-bottom: 0;
    flex-shrink: 0;
}

/* ── Badge ──────────────────────────────────────────────── */
.aafe-product-features__badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    background-color: #2ecc71;
    color: #fff;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 8px;
    line-height: 1.5;
}

/* ── Icon Wrap ──────────────────────────────────────────── */
.aafe-product-features__icon-wrap {
    background-color: #ffffff;
    color: #4A00E0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    flex-shrink: 0;
    transition:
        background-color var(--aafe-transition, 300ms) ease,
        color var(--aafe-transition, 300ms) ease,
        box-shadow var(--aafe-transition, 300ms) ease;
}



.aafe-product-features__icon-wrap img {
    width: 50px;
    height: auto;
    display: block;
    object-fit: contain;
}

.aafe-product-features__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    line-height: 1;
}

.aafe-product-features__icon svg,
.aafe-product-features__icon-wrap svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
    transition: fill var(--aafe-transition, 300ms) ease;
}

/* ── Title ──────────────────────────────────────────────── */
.aafe-product-features__title {
    color: #0A142F;
    font-family: "Inter Tight", sans-serif;
    display: block;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px 0;
    transition: color var(--aafe-transition, 300ms) ease;
}

/* ── Divider — using <div> for reliable cross-browser display ── */
.aafe-product-features__divider {
    display: inline-block;
    height: 2px;
    background-color: #dddddd;
    border: none;
    margin: 8px 0 12px 0;
    flex-shrink: 0;
}

/* ── Description ────────────────────────────────────────── */
.aafe-product-features__desc {
    color: #555555;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    margin: 0;
    line-height: 1.65;
    transition: color var(--aafe-transition, 300ms) ease;
}

/* ── CTA Button ─────────────────────────────────────────── */
.aafe-product-features__cta {
    background-color: #0A142F;
    color: #ffffff;
    border-radius: 20px;
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--aafe-transition, 300ms) ease,
                background-color var(--aafe-transition, 300ms) ease,
                border-color var(--aafe-transition, 300ms) ease;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    padding: 8px 18px;
    background-color: #111;
    color: #fff;
    border: 2px solid #111;
    border-radius: 4px;
}

.aafe-product-features__item:hover .aafe-product-features__cta {
    background-color: #0A142F;
    color: #ffffff;
    border-radius: 20px;
    padding: 8px 16px;
    background-color: #333;
    border-color: #333;
    color: #fff;
}

.aafe-cta-icon {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/* ============================================================
   CENTER IMAGE
   ============================================================ */
.aafe-product-features__image-container {
    display: inline-block;
    position: relative;
    overflow: hidden;
    line-height: 0;
    text-decoration: none;
}

.aafe-product-features__center-img {
    width: 300px;
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: filter 300ms ease;
}

/* Overlay */
.aafe-product-features__image-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 300ms ease;
}

.aafe-product-features__image-container.aafe-has-overlay:hover .aafe-product-features__image-overlay {
    opacity: 1;
}

.aafe-product-features__image-overlay-text {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    padding: 10px;
}

/* ============================================================
   HOVER EFFECTS
   ============================================================ */
.aafe-product-features__item[data-hover="lift"]:hover {
    transform: translateY(-6px);
}
.aafe-product-features__item[data-hover="scale"]:hover {
    transform: scale(var(--aafe-hover-scale, 1.03));
}
.aafe-product-features__item[data-hover="glow"]:hover {
    text-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
}
.aafe-product-features__item[data-hover="border-pop"]:hover {
    transform: scale(var(--aafe-hover-scale, 1.02));
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}



/* ============================================================
   RESPONSIVE — Tablet (≤ 1024px)
   ============================================================ */
@media (max-width: 1024px) {

    /* Default tablet: 2 columns */
    .aafe-product-features__grid {
        grid-template-columns: 1fr 1fr;
    }
    .aafe-product-features__column--center {
        grid-column: 1 / -1;
        order: -1;
    }

    .aafe-product-features-wrapper.aafe-layout-tablet-3col .aafe-product-features__grid {
        grid-template-columns: 1fr auto 1fr;
    }
    .aafe-product-features-wrapper.aafe-layout-tablet-3col .aafe-product-features__column--center {
        grid-column: auto;
        order: 0;
    }

    .aafe-product-features-wrapper.aafe-layout-tablet-2col .aafe-product-features__grid {
        grid-template-columns: 1fr 1fr;
    }
    .aafe-product-features-wrapper.aafe-layout-tablet-2col .aafe-product-features__column--center {
        grid-column: 1 / -1;
        order: -1;
    }

    .aafe-product-features-wrapper.aafe-layout-tablet-1col .aafe-product-features__grid {
        grid-template-columns: 1fr;
    }
    .aafe-product-features-wrapper.aafe-layout-tablet-1col .aafe-product-features__column--center {
        grid-column: 1 / -1;
        order: -1;
    }

    /* ── Tablet: Responsive Icon Position ─────────────────── */
    .aafe-product-features__item.aafe-icon-pos-tablet-top    { flex-direction: column; text-align: center; align-items: center; }
    .aafe-product-features__item.aafe-icon-pos-tablet-bottom { flex-direction: column-reverse; text-align: center; align-items: center; }
    .aafe-product-features__item.aafe-icon-pos-tablet-left   { flex-direction: row; align-items: flex-start; gap: 15px; text-align: left; }
    .aafe-product-features__item.aafe-icon-pos-tablet-right  { flex-direction: row-reverse; align-items: flex-start; gap: 15px; text-align: left; }

    .aafe-product-features__item--right.aafe-icon-pos-tablet-right { text-align: right; }

    .aafe-product-features__item.aafe-icon-pos-tablet-left .aafe-product-features__content,
    .aafe-product-features__item.aafe-icon-pos-tablet-right .aafe-product-features__content { flex: 1; min-width: 0; }

    .aafe-product-features__item.aafe-icon-pos-tablet-left .aafe-product-features__icon-wrap,
    .aafe-product-features__item.aafe-icon-pos-tablet-right .aafe-product-features__icon-wrap {
    background-color: #ffffff;
    color: #4A00E0;
    border-radius: 50%; margin-bottom: 0; flex-shrink: 0; }

    .aafe-product-features__item.aafe-icon-pos-tablet-top .aafe-product-features__icon-wrap,
    .aafe-product-features__item.aafe-icon-pos-tablet-bottom .aafe-product-features__icon-wrap {
    background-color: #ffffff;
    color: #4A00E0;
    border-radius: 50%; margin-bottom: 15px; }
}

/* ============================================================
   RESPONSIVE — Mobile (≤ 767px)
   ============================================================ */
@media (max-width: 767px) {

    /* Default mobile: 1 column */
    .aafe-product-features__grid {
        grid-template-columns: 1fr;
    }
    .aafe-product-features__column--center {
        grid-column: 1 / -1;
        order: -1;
    }

    .aafe-product-features-wrapper.aafe-layout-mobile-3col .aafe-product-features__grid {
        grid-template-columns: 1fr auto 1fr;
    }
    .aafe-product-features-wrapper.aafe-layout-mobile-3col .aafe-product-features__column--center {
        grid-column: auto;
        order: 0;
    }

    .aafe-product-features-wrapper.aafe-layout-mobile-2col .aafe-product-features__grid {
        grid-template-columns: 1fr 1fr;
    }
    .aafe-product-features-wrapper.aafe-layout-mobile-2col .aafe-product-features__column--center {
        grid-column: 1 / -1;
        order: -1;
    }

    .aafe-product-features-wrapper.aafe-layout-mobile-1col .aafe-product-features__grid {
        grid-template-columns: 1fr;
    }
    .aafe-product-features-wrapper.aafe-layout-mobile-1col .aafe-product-features__column--center {
        grid-column: 1 / -1;
        order: -1;
    }

    .aafe-product-features__heading {
    color: #0A142F;
    font-family: "Inter Tight", sans-serif;
        font-size: 24px;
    }

    /* ── Mobile: Responsive Icon Position ─────────────────── */
    .aafe-product-features__item.aafe-icon-pos-mobile-top    { flex-direction: column; text-align: center; align-items: center; }
    .aafe-product-features__item.aafe-icon-pos-mobile-bottom { flex-direction: column-reverse; text-align: center; align-items: center; }
    .aafe-product-features__item.aafe-icon-pos-mobile-left   { flex-direction: row; align-items: flex-start; gap: 15px; text-align: left; }
    .aafe-product-features__item.aafe-icon-pos-mobile-right  { flex-direction: row-reverse; align-items: flex-start; gap: 15px; text-align: left; }

    .aafe-product-features__item--right.aafe-icon-pos-mobile-right { text-align: right; }

    .aafe-product-features__item.aafe-icon-pos-mobile-left .aafe-product-features__content,
    .aafe-product-features__item.aafe-icon-pos-mobile-right .aafe-product-features__content { flex: 1; min-width: 0; }

    .aafe-product-features__item.aafe-icon-pos-mobile-left .aafe-product-features__icon-wrap,
    .aafe-product-features__item.aafe-icon-pos-mobile-right .aafe-product-features__icon-wrap {
    background-color: #ffffff;
    color: #4A00E0;
    border-radius: 50%; margin-bottom: 0; flex-shrink: 0; }

    .aafe-product-features__item.aafe-icon-pos-mobile-top .aafe-product-features__icon-wrap,
    .aafe-product-features__item.aafe-icon-pos-mobile-bottom .aafe-product-features__icon-wrap {
    background-color: #ffffff;
    color: #4A00E0;
    border-radius: 50%; margin-bottom: 15px; }
}
.aafe-cta-icon svg,
.aafe-btn-icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}
.aafe-cta-icon--before,
.aafe-btn-icon--before {
    margin-right: 8px;
}
.aafe-cta-icon--after,
.aafe-btn-icon--after {
    margin-left: 8px;
}