/* Container */
.ccb-app-features {
    --ccb-af-bg: var(--ccb-af-bg-desktop, #f9fafb);
    --ccb-af-pt: var(--ccb-af-pt-desktop, 80px);
    --ccb-af-pb: var(--ccb-af-pb-desktop, 80px);
    --ccb-af-head-color: var(--ccb-af-head-color-desktop, #111827);
    --ccb-af-heading-fs: var(--ccb-af-heading-fs-desktop, 36px);
    --ccb-af-sub-color: var(--ccb-af-sub-color-desktop, #3b82f6);
    --ccb-af-subtitle-fs: var(--ccb-af-subtitle-fs-desktop, 20px);
    --ccb-af-feat-title: var(--ccb-af-feat-title-desktop, #111827);
    --ccb-af-feat-desc: var(--ccb-af-feat-desc-desktop, #4b5563);
    --ccb-af-icon-color: var(--ccb-af-icon-color-desktop, #3b82f6);
    --ccb-af-icon-size: var(--ccb-af-icon-size-desktop, 32px);
    --ccb-af-item-align: var(--ccb-af-item-align-desktop, flex-start);
    --ccb-af-icon-offset-y: var(--ccb-af-icon-offset-y-desktop, 0px);
    --ccb-af-fs-title: var(--ccb-af-fs-title-desktop, 18px);
    --ccb-af-fs-desc: var(--ccb-af-fs-desc-desktop, 15px);
    --ccb-af-col-gap: var(--ccb-af-col-gap-desktop, 40px);
    --ccb-af-item-spacing: var(--ccb-af-item-spacing-desktop, 40px);
    --ccb-af-left-pl: var(--ccb-af-left-pl-desktop, 0px);
    --ccb-af-right-pl: var(--ccb-af-right-pl-desktop, 0px);
    --ccb-af-title-list-gap: var(--ccb-af-title-list-gap-desktop, 6px);
    --ccb-af-header-mb: var(--ccb-af-header-mb-desktop, 60px);
    --ccb-af-image-max: var(--ccb-af-image-max-desktop, 500px);
    --ccb-af-container-max: var(--ccb-af-container-max-desktop, 1280px);
    --ccb-af-col-va-left: var(--ccb-af-col-va-left-desktop, center);
    --ccb-af-col-va-center: var(--ccb-af-col-va-center-desktop, center);
    --ccb-af-col-va-right: var(--ccb-af-col-va-right-desktop, center);
    --ccb-af-text-align: var(--ccb-af-text-align-desktop, center);
    background-color: var(--ccb-af-bg, #f9fafb);
    padding-top: var(--ccb-af-pt, 80px);
    padding-bottom: var(--ccb-af-pb, 80px);
    width: 100%;
}

.ccb-app-features__device {
    display: none;
}

.ccb-app-features__device[data-device="desktop"] {
    display: block;
}

.ccb-app-features[data-preview-device="tablet"] .ccb-app-features__device,
.ccb-app-features[data-preview-device="mobile"] .ccb-app-features__device {
    display: none;
}

.ccb-app-features[data-preview-device="tablet"] .ccb-app-features__device[data-device="tablet"],
.ccb-app-features[data-preview-device="mobile"] .ccb-app-features__device[data-device="mobile"] {
    display: block;
}

.ccb-app-features[data-preview-device="tablet"] {
    --ccb-af-bg: var(--ccb-af-bg-tablet, var(--ccb-af-bg-desktop, #f9fafb));
    --ccb-af-pt: var(--ccb-af-pt-tablet, var(--ccb-af-pt-desktop, 80px));
    --ccb-af-pb: var(--ccb-af-pb-tablet, var(--ccb-af-pb-desktop, 80px));
    --ccb-af-head-color: var(--ccb-af-head-color-tablet, var(--ccb-af-head-color-desktop, #111827));
    --ccb-af-heading-fs: var(--ccb-af-heading-fs-tablet, var(--ccb-af-heading-fs-desktop, 36px));
    --ccb-af-sub-color: var(--ccb-af-sub-color-tablet, var(--ccb-af-sub-color-desktop, #3b82f6));
    --ccb-af-subtitle-fs: var(--ccb-af-subtitle-fs-tablet, var(--ccb-af-subtitle-fs-desktop, 20px));
    --ccb-af-feat-title: var(--ccb-af-feat-title-tablet, var(--ccb-af-feat-title-desktop, #111827));
    --ccb-af-feat-desc: var(--ccb-af-feat-desc-tablet, var(--ccb-af-feat-desc-desktop, #4b5563));
    --ccb-af-icon-color: var(--ccb-af-icon-color-tablet, var(--ccb-af-icon-color-desktop, #3b82f6));
    --ccb-af-icon-size: var(--ccb-af-icon-size-tablet, var(--ccb-af-icon-size-desktop, 32px));
    --ccb-af-item-align: var(--ccb-af-item-align-tablet, var(--ccb-af-item-align-desktop, flex-start));
    --ccb-af-icon-offset-y: var(--ccb-af-icon-offset-y-tablet, var(--ccb-af-icon-offset-y-desktop, 0px));
    --ccb-af-fs-title: var(--ccb-af-fs-title-tablet, var(--ccb-af-fs-title-desktop, 18px));
    --ccb-af-fs-desc: var(--ccb-af-fs-desc-tablet, var(--ccb-af-fs-desc-desktop, 15px));
    --ccb-af-col-gap: var(--ccb-af-col-gap-tablet, var(--ccb-af-col-gap-desktop, 40px));
    --ccb-af-item-spacing: var(--ccb-af-item-spacing-tablet, var(--ccb-af-item-spacing-desktop, 40px));
    --ccb-af-left-pl: var(--ccb-af-left-pl-tablet, var(--ccb-af-left-pl-desktop, 0px));
    --ccb-af-right-pl: var(--ccb-af-right-pl-tablet, var(--ccb-af-right-pl-desktop, 0px));
    --ccb-af-title-list-gap: var(--ccb-af-title-list-gap-tablet, var(--ccb-af-title-list-gap-desktop, 6px));
    --ccb-af-header-mb: var(--ccb-af-header-mb-tablet, var(--ccb-af-header-mb-desktop, 60px));
    --ccb-af-image-max: var(--ccb-af-image-max-tablet, var(--ccb-af-image-max-desktop, 500px));
    --ccb-af-container-max: var(--ccb-af-container-max-tablet, var(--ccb-af-container-max-desktop, 1280px));
    --ccb-af-col-va-left: var(--ccb-af-col-va-left-tablet, var(--ccb-af-col-va-left-desktop, center));
    --ccb-af-col-va-center: var(--ccb-af-col-va-center-tablet, var(--ccb-af-col-va-center-desktop, center));
    --ccb-af-col-va-right: var(--ccb-af-col-va-right-tablet, var(--ccb-af-col-va-right-desktop, center));
    --ccb-af-text-align: var(--ccb-af-text-align-tablet, var(--ccb-af-text-align-desktop, center));
}

.ccb-app-features[data-preview-device="mobile"] {
    --ccb-af-bg: var(--ccb-af-bg-mobile, var(--ccb-af-bg-tablet, var(--ccb-af-bg-desktop, #f9fafb)));
    --ccb-af-pt: var(--ccb-af-pt-mobile, var(--ccb-af-pt-tablet, var(--ccb-af-pt-desktop, 80px)));
    --ccb-af-pb: var(--ccb-af-pb-mobile, var(--ccb-af-pb-tablet, var(--ccb-af-pb-desktop, 80px)));
    --ccb-af-head-color: var(--ccb-af-head-color-mobile, var(--ccb-af-head-color-tablet, var(--ccb-af-head-color-desktop, #111827)));
    --ccb-af-heading-fs: var(--ccb-af-heading-fs-mobile, var(--ccb-af-heading-fs-tablet, var(--ccb-af-heading-fs-desktop, 36px)));
    --ccb-af-sub-color: var(--ccb-af-sub-color-mobile, var(--ccb-af-sub-color-tablet, var(--ccb-af-sub-color-desktop, #3b82f6)));
    --ccb-af-subtitle-fs: var(--ccb-af-subtitle-fs-mobile, var(--ccb-af-subtitle-fs-tablet, var(--ccb-af-subtitle-fs-desktop, 20px)));
    --ccb-af-feat-title: var(--ccb-af-feat-title-mobile, var(--ccb-af-feat-title-tablet, var(--ccb-af-feat-title-desktop, #111827)));
    --ccb-af-feat-desc: var(--ccb-af-feat-desc-mobile, var(--ccb-af-feat-desc-tablet, var(--ccb-af-feat-desc-desktop, #4b5563)));
    --ccb-af-icon-color: var(--ccb-af-icon-color-mobile, var(--ccb-af-icon-color-tablet, var(--ccb-af-icon-color-desktop, #3b82f6)));
    --ccb-af-icon-size: var(--ccb-af-icon-size-mobile, var(--ccb-af-icon-size-tablet, var(--ccb-af-icon-size-desktop, 32px)));
    --ccb-af-item-align: var(--ccb-af-item-align-mobile, var(--ccb-af-item-align-tablet, var(--ccb-af-item-align-desktop, flex-start)));
    --ccb-af-icon-offset-y: var(--ccb-af-icon-offset-y-mobile, var(--ccb-af-icon-offset-y-tablet, var(--ccb-af-icon-offset-y-desktop, 0px)));
    --ccb-af-fs-title: var(--ccb-af-fs-title-mobile, var(--ccb-af-fs-title-tablet, var(--ccb-af-fs-title-desktop, 18px)));
    --ccb-af-fs-desc: var(--ccb-af-fs-desc-mobile, var(--ccb-af-fs-desc-tablet, var(--ccb-af-fs-desc-desktop, 15px)));
    --ccb-af-col-gap: var(--ccb-af-col-gap-mobile, var(--ccb-af-col-gap-tablet, var(--ccb-af-col-gap-desktop, 40px)));
    --ccb-af-item-spacing: var(--ccb-af-item-spacing-mobile, var(--ccb-af-item-spacing-tablet, var(--ccb-af-item-spacing-desktop, 40px)));
    --ccb-af-left-pl: var(--ccb-af-left-pl-mobile, var(--ccb-af-left-pl-tablet, var(--ccb-af-left-pl-desktop, 0px)));
    --ccb-af-right-pl: var(--ccb-af-right-pl-mobile, var(--ccb-af-right-pl-tablet, var(--ccb-af-right-pl-desktop, 0px)));
    --ccb-af-title-list-gap: var(--ccb-af-title-list-gap-mobile, var(--ccb-af-title-list-gap-tablet, var(--ccb-af-title-list-gap-desktop, 6px)));
    --ccb-af-header-mb: var(--ccb-af-header-mb-mobile, var(--ccb-af-header-mb-tablet, var(--ccb-af-header-mb-desktop, 60px)));
    --ccb-af-image-max: var(--ccb-af-image-max-mobile, var(--ccb-af-image-max-tablet, var(--ccb-af-image-max-desktop, 500px)));
    --ccb-af-container-max: var(--ccb-af-container-max-mobile, var(--ccb-af-container-max-tablet, var(--ccb-af-container-max-desktop, 1280px)));
    --ccb-af-col-va-left: var(--ccb-af-col-va-left-mobile, var(--ccb-af-col-va-left-tablet, var(--ccb-af-col-va-left-desktop, center)));
    --ccb-af-col-va-center: var(--ccb-af-col-va-center-mobile, var(--ccb-af-col-va-center-tablet, var(--ccb-af-col-va-center-desktop, center)));
    --ccb-af-col-va-right: var(--ccb-af-col-va-right-mobile, var(--ccb-af-col-va-right-tablet, var(--ccb-af-col-va-right-desktop, center)));
    --ccb-af-text-align: var(--ccb-af-text-align-mobile, var(--ccb-af-text-align-tablet, var(--ccb-af-text-align-desktop, center)));
}

.ccb-app-features__container {
    max-width: var(--ccb-af-container-max, 1280px);
    margin: 0 auto;
    padding: 0 24px;
}

/* Header */
.ccb-app-features__header {
    text-align: center;
    margin-bottom: var(--ccb-af-header-mb, 60px);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.ccb-app-features__heading {
    font-size: var(--ccb-af-heading-fs, 36px);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 16px;
    color: var(--ccb-af-head-color, #111827);
}

.ccb-app-features__subtitle {
    font-size: var(--ccb-af-subtitle-fs, 20px);
    font-weight: 500;
    color: var(--ccb-af-sub-color, #3b82f6);
    margin: 0;
}

/* Grid Layout (Desktop) - 1fr AUTO 1fr */
.ccb-app-features__grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: var(--ccb-af-col-gap, 40px);
    row-gap: 40px;
    width: 100%;
}


.ccb-app-features__device[data-has-media="1"][data-media-position="left"] .ccb-app-features__grid {
    grid-template-columns: auto 1fr 1fr;
}

.ccb-app-features__device[data-has-media="1"][data-media-position="right"] .ccb-app-features__grid {
    grid-template-columns: 1fr 1fr auto;
}

.ccb-app-features__device[data-has-media="0"] .ccb-app-features__grid {
    grid-template-columns: 1fr 1fr;
}

/* Columns */
.ccb-app-features__col {
    min-width: 0;
}

.ccb-app-features__col--center {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: var(--ccb-af-col-va-center, center);
}

.ccb-app-features__col--left {
    padding-left: var(--ccb-af-left-pl, 0px);
    align-self: var(--ccb-af-col-va-left, center);
}

.ccb-app-features__col--right {
    padding-left: var(--ccb-af-right-pl, 0px);
    align-self: var(--ccb-af-col-va-right, center);
}

/* Center Image */
.ccb-app-features__main-img {
    max-width: min(100%, var(--ccb-af-image-max, 500px));
    height: auto;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 20px 25px -5px rgba(0, 0, 0, 0.1));
}

/* Feature Item - ALWAYS LEFT ALIGNED (Icon -> Text) */
.ccb-app-features__item {
    display: flex;
    flex-direction: row;
    align-items: var(--ccb-af-item-align, flex-start);
    gap: 16px;
    margin-bottom: var(--ccb-af-item-spacing, 40px);
    text-align: var(--ccb-af-text-align, center);
}

.ccb-app-features__item:last-child {
    margin-bottom: 0;
}

/* Linked item: no underline by default; underline title on hover */
.ccb-app-features__item[href] {
    text-decoration: none;
    color: inherit;
}

.ccb-app-features__item[href]:hover .ccb-app-features__item-title {
    text-decoration: underline;
}

.ccb-app-features__item[href]:focus-visible .ccb-app-features__item-title {
    text-decoration: underline;
}

/* Icon */
.ccb-app-features .ccb-app-features__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: var(--ccb-af-icon-size, 32px);
    height: var(--ccb-af-icon-size, 32px);
    border-radius: 0;
    background: none;
}

.ccb-app-features .ccb-app-features__icon svg {
    width: var(--ccb-af-icon-size, 32px);
    height: var(--ccb-af-icon-size, 32px);
    fill: var(--ccb-af-icon-color, #3b82f6);
    transform: translateY(calc(var(--ccb-af-icon-offset-y, 0px) - 1px));
}

/* Features Text */
.ccb-app-features__item-title {
    font-weight: 700;
    margin-bottom: var(--ccb-af-title-list-gap, 6px);
    line-height: 1.3;
    color: var(--ccb-af-feat-title, #111827);
    font-size: var(--ccb-af-fs-title, 18px);
}

.ccb-app-features__item-desc {
    line-height: 1.6;
    color: var(--ccb-af-feat-desc, #4b5563);
    margin: 0;
    font-size: var(--ccb-af-fs-desc, 15px);
}

.ccb-app-features .ccb-app-features__bullets {
    margin: 0;
    padding-left: 1.15em;
    color: var(--ccb-af-feat-desc, #4b5563);
    font-size: var(--ccb-af-fs-desc, 15px);
    line-height: 1.6;
}

.ccb-app-features .ccb-app-features__bullets li {
    margin: 0;
}

/* Tablet / Mobile preview overrides */
.ccb-app-features[data-preview-device="tablet"] .ccb-app-features__grid,
.ccb-app-features[data-preview-device="mobile"] .ccb-app-features__grid {
    display: flex;
    flex-direction: column;
    gap: 60px;
}


.ccb-app-features[data-preview-device="mobile"] {
    padding-top: var(--ccb-af-pt, 40px);
    padding-bottom: var(--ccb-af-pb, 40px);
}

/* Mobile Responsiveness */
@media (max-width: 1024px) {
    .ccb-app-features:not([data-preview-device]) {
        --ccb-af-bg: var(--ccb-af-bg-tablet, var(--ccb-af-bg-desktop, #f9fafb));
        --ccb-af-pt: var(--ccb-af-pt-tablet, var(--ccb-af-pt-desktop, 80px));
        --ccb-af-pb: var(--ccb-af-pb-tablet, var(--ccb-af-pb-desktop, 80px));
        --ccb-af-head-color: var(--ccb-af-head-color-tablet, var(--ccb-af-head-color-desktop, #111827));
        --ccb-af-heading-fs: var(--ccb-af-heading-fs-tablet, var(--ccb-af-heading-fs-desktop, 36px));
        --ccb-af-sub-color: var(--ccb-af-sub-color-tablet, var(--ccb-af-sub-color-desktop, #3b82f6));
        --ccb-af-subtitle-fs: var(--ccb-af-subtitle-fs-tablet, var(--ccb-af-subtitle-fs-desktop, 20px));
        --ccb-af-feat-title: var(--ccb-af-feat-title-tablet, var(--ccb-af-feat-title-desktop, #111827));
        --ccb-af-feat-desc: var(--ccb-af-feat-desc-tablet, var(--ccb-af-feat-desc-desktop, #4b5563));
        --ccb-af-icon-color: var(--ccb-af-icon-color-tablet, var(--ccb-af-icon-color-desktop, #3b82f6));
        --ccb-af-icon-size: var(--ccb-af-icon-size-tablet, var(--ccb-af-icon-size-desktop, 32px));
        --ccb-af-fs-title: var(--ccb-af-fs-title-tablet, var(--ccb-af-fs-title-desktop, 18px));
        --ccb-af-fs-desc: var(--ccb-af-fs-desc-tablet, var(--ccb-af-fs-desc-desktop, 15px));
        --ccb-af-col-gap: var(--ccb-af-col-gap-tablet, var(--ccb-af-col-gap-desktop, 40px));
        --ccb-af-item-spacing: var(--ccb-af-item-spacing-tablet, var(--ccb-af-item-spacing-desktop, 40px));
        --ccb-af-left-pl: var(--ccb-af-left-pl-tablet, var(--ccb-af-left-pl-desktop, 0px));
        --ccb-af-right-pl: var(--ccb-af-right-pl-tablet, var(--ccb-af-right-pl-desktop, 0px));
        --ccb-af-title-list-gap: var(--ccb-af-title-list-gap-tablet, var(--ccb-af-title-list-gap-desktop, 6px));
        --ccb-af-header-mb: var(--ccb-af-header-mb-tablet, var(--ccb-af-header-mb-desktop, 60px));
        --ccb-af-image-max: var(--ccb-af-image-max-tablet, var(--ccb-af-image-max-desktop, 500px));
    }

    .ccb-app-features:not([data-preview-device]) .ccb-app-features__device {
        display: none;
    }

    .ccb-app-features:not([data-preview-device]) .ccb-app-features__device[data-device="tablet"] {
        display: block;
    }

    .ccb-app-features__grid {
        display: flex;
        flex-direction: column;
        gap: 60px;
    }

    .ccb-app-features__device:not([data-media-position]) .ccb-app-features__col--center,
    .ccb-app-features__device[data-media-position="center"] .ccb-app-features__col--center {
        order: -1;
        width: 100%;
    }

    .ccb-app-features__col {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
        padding-left: 0 !important;
    }

}

@media (max-width: 768px) {
    .ccb-app-features:not([data-preview-device]) {
        --ccb-af-bg: var(--ccb-af-bg-mobile, var(--ccb-af-bg-tablet, var(--ccb-af-bg-desktop, #f9fafb)));
        --ccb-af-pt: var(--ccb-af-pt-mobile, var(--ccb-af-pt-tablet, var(--ccb-af-pt-desktop, 80px)));
        --ccb-af-pb: var(--ccb-af-pb-mobile, var(--ccb-af-pb-tablet, var(--ccb-af-pb-desktop, 80px)));
        --ccb-af-head-color: var(--ccb-af-head-color-mobile, var(--ccb-af-head-color-tablet, var(--ccb-af-head-color-desktop, #111827)));
        --ccb-af-heading-fs: var(--ccb-af-heading-fs-mobile, var(--ccb-af-heading-fs-tablet, var(--ccb-af-heading-fs-desktop, 36px)));
        --ccb-af-sub-color: var(--ccb-af-sub-color-mobile, var(--ccb-af-sub-color-tablet, var(--ccb-af-sub-color-desktop, #3b82f6)));
        --ccb-af-subtitle-fs: var(--ccb-af-subtitle-fs-mobile, var(--ccb-af-subtitle-fs-tablet, var(--ccb-af-subtitle-fs-desktop, 20px)));
        --ccb-af-feat-title: var(--ccb-af-feat-title-mobile, var(--ccb-af-feat-title-tablet, var(--ccb-af-feat-title-desktop, #111827)));
        --ccb-af-feat-desc: var(--ccb-af-feat-desc-mobile, var(--ccb-af-feat-desc-tablet, var(--ccb-af-feat-desc-desktop, #4b5563)));
        --ccb-af-icon-color: var(--ccb-af-icon-color-mobile, var(--ccb-af-icon-color-tablet, var(--ccb-af-icon-color-desktop, #3b82f6)));
        --ccb-af-icon-size: var(--ccb-af-icon-size-mobile, var(--ccb-af-icon-size-tablet, var(--ccb-af-icon-size-desktop, 32px)));
        --ccb-af-fs-title: var(--ccb-af-fs-title-mobile, var(--ccb-af-fs-title-tablet, var(--ccb-af-fs-title-desktop, 18px)));
        --ccb-af-fs-desc: var(--ccb-af-fs-desc-mobile, var(--ccb-af-fs-desc-tablet, var(--ccb-af-fs-desc-desktop, 15px)));
        --ccb-af-col-gap: var(--ccb-af-col-gap-mobile, var(--ccb-af-col-gap-tablet, var(--ccb-af-col-gap-desktop, 40px)));
        --ccb-af-item-spacing: var(--ccb-af-item-spacing-mobile, var(--ccb-af-item-spacing-tablet, var(--ccb-af-item-spacing-desktop, 40px)));
        --ccb-af-left-pl: var(--ccb-af-left-pl-mobile, var(--ccb-af-left-pl-tablet, var(--ccb-af-left-pl-desktop, 0px)));
        --ccb-af-right-pl: var(--ccb-af-right-pl-mobile, var(--ccb-af-right-pl-tablet, var(--ccb-af-right-pl-desktop, 0px)));
        --ccb-af-title-list-gap: var(--ccb-af-title-list-gap-mobile, var(--ccb-af-title-list-gap-tablet, var(--ccb-af-title-list-gap-desktop, 6px)));
        --ccb-af-header-mb: var(--ccb-af-header-mb-mobile, var(--ccb-af-header-mb-tablet, var(--ccb-af-header-mb-desktop, 60px)));
        --ccb-af-image-max: var(--ccb-af-image-max-mobile, var(--ccb-af-image-max-tablet, var(--ccb-af-image-max-desktop, 500px)));
    }

    .ccb-app-features:not([data-preview-device]) .ccb-app-features__device[data-device="tablet"] {
        display: none;
    }

    .ccb-app-features:not([data-preview-device]) .ccb-app-features__device[data-device="mobile"] {
        display: block;
    }

    .ccb-app-features {
        padding-top: var(--ccb-af-pt, 40px);
        padding-bottom: var(--ccb-af-pb, 40px);
    }
}