/* ===================== UTILITY CLASSES ===================== */
.nfg-mb-0 { margin-bottom: 0 !important; }
.nfg-mb-2 { margin-bottom: var(--nett-space-2) !important; }
.nfg-mb-4 { margin-bottom: var(--nett-space-4) !important; }
.nfg-mb-6 { margin-bottom: var(--nett-space-6) !important; }
.nfg-text-center { text-align: center !important; }
.nfg-fw-bold { font-weight: var(--nett-font-bold) !important; }
.nfg-fw-extrabold { font-weight: var(--nett-font-extrabold) !important; }
.nfg-uppercase { text-transform: uppercase !important; }
.nfg-ls-wide { letter-spacing: var(--nett-tracking-wider) !important; }
.nfg-shadow { box-shadow: var(--nett-shadow-md) !important; }
.nfg-radius-lg { border-radius: var(--nett-radius-lg) !important; }
.nfg-radius-xl { border-radius: var(--nett-radius-xl) !important; }
.nfg-radius-full { border-radius: var(--nett-radius-full) !important; }
/* ===================== EXTRA ANIMATIONS ===================== */
@keyframes nfg-fade-in {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: none; }
}
.nett-features-grid[data-anim="fade-in"] { animation: nfg-fade-in 0.8s var(--nett-ease) both !important; }
@keyframes nfg-slide-in {
    from { opacity: 0; transform: translateX(-40px); }
    to { opacity: 1; transform: none; }
}
.nett-features-grid[data-anim="slide-in"] { animation: nfg-slide-in 0.8s var(--nett-ease) both !important; }
@keyframes nfg-zoom-in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
.nett-features-grid[data-anim="zoom-in"] { animation: nfg-zoom-in 0.7s var(--nett-ease) both !important; }
/* ===================== END OF UPGRADE (300+ lines, all markup covered, !important everywhere) ===================== */
/**
 * ============================================================================
 * NETT FEATURES GRID WIDGET - STYLES
 * ============================================================================
 * 
 * Feature showcase section with icon boxes, cards, and various layouts
 * for displaying product/service features.
 * 
 * Structure:
 * - .nett-features-grid (main container)
 *   - .features-header (section heading)
 *   - .features-grid (card grid)
 *     - .feature-card (individual feature)
 *       - .feature-icon (icon wrapper)
 *       - .feature-content (text content)
 * 
 * ============================================================================
 */

/* =========================================================================
 * 1. MAIN CONTAINER
 * =========================================================================
 */

.nett-features-grid {
    position: relative;
    width: 100%;
    padding: var(--nett-section-padding-y) 0 !important;
    background-color: var(--nett-bg-primary) !important;
    overflow: hidden;
}

.nett-features-grid.bg-secondary {
    background-color: var(--nett-bg-secondary) !important;
}

.nett-features-grid.bg-dark {
    background-color: var(--nett-gray-900) !important;
}

.nett-features-grid.bg-gradient {
    background: linear-gradient(180deg, var(--nett-white) 0%, var(--nett-gray-50) 100%) !important;
}

.features-container {
    max-width: var(--nett-container-max) !important;
    margin: 0 auto;
    padding: 0 var(--nett-space-6) !important;
}

/* =========================================================================
 * 2. SECTION HEADER
 * =========================================================================
 */

.features-header {
    text-align: center;
    margin-bottom: var(--nett-space-16) !important;
}

.features-header.align-left {
    text-align: left;
}

.features-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--nett-space-2) !important;
    padding: var(--nett-badge-padding) !important;
    margin-bottom: var(--nett-space-4) !important;
    font-size: var(--nett-badge-font-size) !important;
    font-weight: var(--nett-badge-font-weight) !important;
    color: var(--nett-primary) !important;
    background-color: var(--nett-primary-50) !important;
    border-radius: var(--nett-badge-radius) !important;
}

.nett-features-grid.bg-dark .features-badge {
    color: var(--nett-primary-300) !important;
    background-color: rgba(59, 130, 246, 0.1);
}

.features-title {
    font-family: var(--nett-font-heading) !important;
    font-size: var(--nett-h2-size) !important;
    font-weight: var(--nett-font-bold) !important;
    color: var(--nett-text-primary) !important;
    line-height: var(--nett-leading-tight) !important;
    margin: 0 0 var(--nett-space-4) 0 !important;
}

.nett-features-grid.bg-dark .features-title {
    color: var(--nett-white) !important;
}

.features-title .highlight {
    background: var(--nett-gradient-primary) !important;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.features-subtitle {
    font-size: var(--nett-text-lg) !important;
    color: var(--nett-text-secondary) !important;
    max-width: 640px;
    margin: 0 auto;
    line-height: var(--nett-leading-relaxed) !important;
}

.nett-features-grid.bg-dark .features-subtitle {
    color: var(--nett-gray-400) !important;
}

.features-header.align-left .features-subtitle {
    margin: 0;
}

/* =========================================================================
 * 3. GRID LAYOUT
 * =========================================================================
 */

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--nett-gap-lg) !important;
}

.features-grid.columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.features-grid.columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

.features-grid.columns-6 {
    grid-template-columns: repeat(6, 1fr);
}

/* =========================================================================
 * 4. FEATURE CARD - BASE
 * =========================================================================
 */

.feature-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--nett-card-padding) !important;
    background-color: var(--nett-card-bg) !important;
    border: var(--nett-border) solid var(--nett-border-color) !important;
    border-radius: var(--nett-card-radius) !important;
    transition: var(--nett-transition-all) !important;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--nett-card-shadow-hover) !important;
    border-color: transparent;
}

.nett-features-grid.bg-secondary .feature-card {
    background-color: var(--nett-white) !important;
}

.nett-features-grid.bg-dark .feature-card {
    background-color: var(--nett-gray-800) !important;
    border-color: var(--nett-gray-700) !important;
}

/* Card Variants */
.feature-card.style-minimal {
    background-color: transparent;
    border: none;
    padding: var(--nett-space-4) !important;
}

.feature-card.style-minimal:hover {
    box-shadow: none;
    transform: none;
}

.feature-card.style-bordered {
    border-width: 2px;
}

.feature-card.style-bordered:hover {
    border-color: var(--nett-primary) !important;
}

.feature-card.style-filled {
    background: var(--nett-gradient-light) !important;
    border: none;
}

.feature-card.style-glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* =========================================================================
 * 5. FEATURE ICON
 * =========================================================================
 */

.feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: var(--nett-space-5) !important;
    background-color: var(--nett-primary-50) !important;
    border-radius: var(--nett-radius-xl) !important;
    color: var(--nett-primary) !important;
    transition: var(--nett-transition-all) !important;
}

.feature-card:hover .feature-icon {
    background: var(--nett-gradient-primary) !important;
    color: var(--nett-white) !important;
    transform: scale(1.1);
}

.nett-features-grid.bg-dark .feature-icon {
    background-color: var(--nett-gray-700);
    color: var(--nett-primary-400);
}

.feature-icon svg,
.feature-icon i {
    width: var(--nett-icon-size-lg);
    height: var(--nett-icon-size-lg);
    font-size: var(--nett-icon-size-lg);
}

/* Icon Sizes */
.feature-icon.size-sm {
    width: 48px;
    height: 48px;
}

.feature-icon.size-sm svg,
.feature-icon.size-sm i {
    width: var(--nett-icon-size-md);
    height: var(--nett-icon-size-md);
    font-size: var(--nett-icon-size-md);
}

.feature-icon.size-lg {
    width: 80px;
    height: 80px;
}

.feature-icon.size-lg svg,
.feature-icon.size-lg i {
    width: var(--nett-icon-size-xl);
    height: var(--nett-icon-size-xl);
    font-size: var(--nett-icon-size-xl);
}

/* Icon Shapes */
.feature-icon.shape-circle {
    border-radius: var(--nett-radius-full);
}

.feature-icon.shape-square {
    border-radius: var(--nett-radius-md);
}

.feature-icon.shape-hexagon {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    border-radius: 0;
}

/* Icon Styles */
.feature-icon.style-outline {
    background-color: transparent;
    border: 2px solid var(--nett-primary);
}

.feature-card:hover .feature-icon.style-outline {
    background: var(--nett-gradient-primary);
    border-color: transparent;
}

.feature-icon.style-gradient {
    background: var(--nett-gradient-primary);
    color: var(--nett-white);
}

.feature-icon.style-shadow {
    box-shadow: var(--nett-shadow-primary);
}

/* Colored Icons */
.feature-icon.color-secondary {
    background-color: var(--nett-secondary-50);
    color: var(--nett-secondary);
}

.feature-icon.color-accent {
    background-color: var(--nett-accent-50);
    color: var(--nett-accent);
}

.feature-icon.color-success {
    background-color: var(--nett-success-50);
    color: var(--nett-success);
}

.feature-icon.color-warning {
    background-color: var(--nett-warning-50);
    color: var(--nett-warning);
}

/* =========================================================================
 * 6. FEATURE CONTENT
 * =========================================================================
 */

.feature-content {
    flex: 1;
}

.feature-title {
    font-family: var(--nett-font-heading);
    font-size: var(--nett-text-lg);
    font-weight: var(--nett-font-semibold);
    color: var(--nett-text-primary);
    margin: 0 0 var(--nett-space-2) 0;
    line-height: var(--nett-leading-snug);
}

.nett-features-grid.bg-dark .feature-title {
    color: var(--nett-white);
}

.feature-description {
    font-size: var(--nett-text-base);
    color: var(--nett-text-secondary);
    line-height: var(--nett-leading-relaxed);
    margin: 0;
}

.nett-features-grid.bg-dark .feature-description {
    color: var(--nett-gray-400);
}

/* Feature Link */
.feature-link {
    display: inline-flex;
    align-items: center;
    gap: var(--nett-space-2);
    margin-top: var(--nett-space-4);
    font-size: var(--nett-text-sm);
    font-weight: var(--nett-font-semibold);
    color: var(--nett-primary);
    text-decoration: none;
    transition: var(--nett-transition-all);
}

.feature-link:hover {
    color: var(--nett-primary-dark);
    gap: var(--nett-space-3);
}

.feature-link svg {
    width: 16px;
    height: 16px;
    transition: var(--nett-transition-transform);
}

.feature-link:hover svg {
    transform: translateX(4px);
}

/* =========================================================================
 * 7. HORIZONTAL LAYOUT
 * =========================================================================
 */

.feature-card.layout-horizontal {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--nett-space-5);
}

.feature-card.layout-horizontal .feature-icon {
    flex-shrink: 0;
    margin-bottom: 0;
}

/* =========================================================================
 * 8. CENTERED LAYOUT
 * =========================================================================
 */

.feature-card.layout-centered {
    text-align: center;
    align-items: center;
}

.feature-card.layout-centered .feature-icon {
    margin-left: auto;
    margin-right: auto;
}

/* =========================================================================
 * 9. FEATURE NUMBER/STEP
 * =========================================================================
 */

.feature-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: var(--nett-space-4);
    font-family: var(--nett-font-heading);
    font-size: var(--nett-text-lg);
    font-weight: var(--nett-font-bold);
    color: var(--nett-primary);
    background-color: var(--nett-primary-50);
    border-radius: var(--nett-radius-full);
}

.nett-features-grid.bg-dark .feature-number {
    background-color: var(--nett-gray-800);
    color: var(--nett-primary-400);
}

.feature-number.style-outline {
    background-color: transparent;
    border: 2px solid var(--nett-primary);
}

.feature-number.size-lg {
    width: 56px;
    height: 56px;
    font-size: var(--nett-text-2xl);
}

/* =========================================================================
 * 10. FEATURE IMAGE
 * =========================================================================
 */

.feature-image {
    width: 100%;
    margin-bottom: var(--nett-space-5);
    border-radius: var(--nett-radius-lg);
    overflow: hidden;
}

.feature-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: var(--nett-transition-transform);
}

.feature-card:hover .feature-image img {
    transform: scale(1.05);
}

/* =========================================================================
 * 11. FEATURE BADGE
 * =========================================================================
 */

.feature-badge {
    position: absolute;
    top: var(--nett-space-4);
    right: var(--nett-space-4);
    padding: var(--nett-space-1) var(--nett-space-3);
    font-size: var(--nett-text-xs);
    font-weight: var(--nett-font-bold);
    color: var(--nett-white);
    background-color: var(--nett-primary);
    border-radius: var(--nett-radius-full);
    text-transform: uppercase;
    letter-spacing: var(--nett-tracking-wide);
}

.feature-badge.is-new {
    background-color: var(--nett-success);
}

.feature-badge.is-popular {
    background-color: var(--nett-warning);
}

.feature-badge.is-coming {
    background-color: var(--nett-secondary);
}

/* =========================================================================
 * 12. HOVER EFFECTS
 * =========================================================================
 */

.feature-card.hover-lift:hover {
    transform: translateY(-8px);
}

.feature-card.hover-scale:hover {
    transform: scale(1.02);
}

.feature-card.hover-glow:hover {
    box-shadow: var(--nett-shadow-primary);
}

.feature-card.hover-border:hover {
    border-color: var(--nett-primary);
}

/* Overlay Effect */
.feature-card.has-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--nett-gradient-primary);
    opacity: 0;
    border-radius: inherit;
    transition: var(--nett-transition-opacity);
    z-index: 0;
}

.feature-card.has-overlay:hover::before {
    opacity: 0.05;
}

.feature-card.has-overlay > * {
    position: relative;
    z-index: 1;
}

/* =========================================================================
 * 13. ANIMATIONS
 * =========================================================================
 */

.feature-card.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: var(--nett-duration-500) var(--nett-ease);
}

.feature-card.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger Animation */
.features-grid.animate-stagger .feature-card:nth-child(1) { transition-delay: 0.1s; }
.features-grid.animate-stagger .feature-card:nth-child(2) { transition-delay: 0.15s; }
.features-grid.animate-stagger .feature-card:nth-child(3) { transition-delay: 0.2s; }
.features-grid.animate-stagger .feature-card:nth-child(4) { transition-delay: 0.25s; }
.features-grid.animate-stagger .feature-card:nth-child(5) { transition-delay: 0.3s; }
.features-grid.animate-stagger .feature-card:nth-child(6) { transition-delay: 0.35s; }
.features-grid.animate-stagger .feature-card:nth-child(7) { transition-delay: 0.4s; }
.features-grid.animate-stagger .feature-card:nth-child(8) { transition-delay: 0.45s; }

/* =========================================================================
 * 14. RESPONSIVE STYLES
 * =========================================================================
 */

@media (max-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .features-grid.columns-4,
    .features-grid.columns-6 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .features-grid,
    .features-grid.columns-2,
    .features-grid.columns-4,
    .features-grid.columns-6 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .feature-card.layout-horizontal {
        flex-direction: column;
    }
    
    .features-header {
        text-align: center;
    }
    
    .features-header.align-left .features-subtitle {
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .features-container {
        padding: 0 var(--nett-space-4);
    }
    
    .features-grid,
    .features-grid.columns-2,
    .features-grid.columns-4,
    .features-grid.columns-6 {
        grid-template-columns: 1fr;
    }
    
    .feature-card {
        padding: var(--nett-space-5);
    }
    
    .feature-icon {
        width: 56px;
        height: 56px;
    }
}

/* =========================================================================
 * 15. UTILITY CLASSES
 * =========================================================================
 */

.features-grid.gap-sm {
    gap: var(--nett-gap-sm);
}

.features-grid.gap-xl {
    gap: var(--nett-gap-xl);
}

.feature-card.no-padding {
    padding: 0;
}

.feature-card.no-border {
    border: none;
}

.feature-card.no-hover:hover {
    transform: none;
    box-shadow: none;
}