/**
 * Service Features Widget — Velour Pro Addons
 */

/* ===== Section Wrapper ===== */
.vnpa-service-features {
    padding: 40px 0;
    background: #FAFBFC;
}

.vnpa-service-features--no-border {
    border-bottom: none;
}

/* ===== Container ===== */
.vnpa-service-features__container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ===== Grid ===== */
.vnpa-service-features__grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
}

@media (min-width: 480px) {
    .vnpa-service-features__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (min-width: 1025px) {
    .vnpa-service-features__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 32px;
    }
}

/* Responsive column overrides via prefix_class */
/* Desktop — scoped to desktop only */
@media (min-width: 1025px) {
    .vnpa-sf-cols-1 .vnpa-service-features__grid { grid-template-columns: repeat(1, 1fr); }
    .vnpa-sf-cols-2 .vnpa-service-features__grid { grid-template-columns: repeat(2, 1fr); }
    .vnpa-sf-cols-3 .vnpa-service-features__grid { grid-template-columns: repeat(3, 1fr); }
    .vnpa-sf-cols-4 .vnpa-service-features__grid { grid-template-columns: repeat(4, 1fr); }
    .vnpa-sf-cols-5 .vnpa-service-features__grid { grid-template-columns: repeat(5, 1fr); }
    .vnpa-sf-cols-6 .vnpa-service-features__grid { grid-template-columns: repeat(6, 1fr); }
}

/* Tablet — Elementor generates: vnpa-sf-cols--tablet{N} */
@media (min-width: 768px) and (max-width: 1024px) {
    .vnpa-sf-cols--tablet1 .vnpa-service-features__grid { grid-template-columns: repeat(1, 1fr); }
    .vnpa-sf-cols--tablet2 .vnpa-service-features__grid { grid-template-columns: repeat(2, 1fr); }
    .vnpa-sf-cols--tablet3 .vnpa-service-features__grid { grid-template-columns: repeat(3, 1fr); }
    .vnpa-sf-cols--tablet4 .vnpa-service-features__grid { grid-template-columns: repeat(4, 1fr); }
    .vnpa-sf-cols--tablet5 .vnpa-service-features__grid { grid-template-columns: repeat(5, 1fr); }
    .vnpa-sf-cols--tablet6 .vnpa-service-features__grid { grid-template-columns: repeat(6, 1fr); }
}

/* Mobile — Elementor generates: vnpa-sf-cols--mobile{N} */
@media (max-width: 767px) {
    .vnpa-sf-cols--mobile1 .vnpa-service-features__grid { grid-template-columns: repeat(1, 1fr); }
    .vnpa-sf-cols--mobile2 .vnpa-service-features__grid { grid-template-columns: repeat(2, 1fr); }
    .vnpa-sf-cols--mobile3 .vnpa-service-features__grid { grid-template-columns: repeat(3, 1fr); }
    .vnpa-sf-cols--mobile4 .vnpa-service-features__grid { grid-template-columns: repeat(4, 1fr); }
    .vnpa-sf-cols--mobile5 .vnpa-service-features__grid { grid-template-columns: repeat(5, 1fr); }
    .vnpa-sf-cols--mobile6 .vnpa-service-features__grid { grid-template-columns: repeat(6, 1fr); }
}

/* ===== Feature Item ===== */
.vnpa-service-features__item {
    text-align: center;
}

/* ===== Icon Container ===== */
.vnpa-service-features__icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.vnpa-service-features__item:hover .vnpa-service-features__icon-wrap {
    transform: translateY(-3px);
}

/* ===== Icon ===== */
.vnpa-service-features__icon-wrap i {
    font-size: 20px;
    line-height: 1;
}

/* Elementor Font Awesome SVGs — keep fill intact, inherit color */
.vnpa-service-features__icon-wrap svg.e-font-icon-svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

/* Only custom SVGs (added directly, not via Elementor Icons) get stroke styling */
.vnpa-service-features__icon-wrap > svg:not(.e-font-icon-svg) {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    width: 20px;
    height: 20px;
}

/* ===== Title ===== */
.vnpa-service-features__title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 4px;
    line-height: 1.4;
    color: #111827;
}

/* ===== Description ===== */
.vnpa-service-features__desc {
    font-size: 12px;
    line-height: 1.5;
    color: #6B7280;
    margin: 0;
}

/* ===== Responsive Fine-tuning ===== */
@media (max-width: 479px) {
    .vnpa-service-features__container {
        padding: 0 16px;
    }

    .vnpa-service-features__icon-wrap {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        margin-bottom: 10px;
    }

    .vnpa-service-features__icon-wrap i {
        font-size: 18px;
    }

    .vnpa-service-features__icon-wrap > svg:not(.e-font-icon-svg) {
        width: 18px;
        height: 18px;
    }

    .vnpa-service-features__title {
        font-size: 13px;
    }

    .vnpa-service-features__desc {
        font-size: 11px;
    }
}