/* =================================================================
   1. MASTER VARIABLES & THEME CONFIGURATION
   ================================================================= */
.ai-tools-display-widget {
    /* --- Core Brand Colors --- */
    --vt-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --vt-primary: #4f46e5;       /* Indigo-600 */
    --vt-primary-hover: #4338ca; /* Indigo-700 */
    --vt-verified-blue: #3b82f6; /* Verified Icon Color */

    /* --- Light Mode Palette (Default) --- */
    --vt-bg: #ffffff;
    --vt-border: #e2e8f0;        /* Slate-200 */
    --vt-hover-border: #6366f1;  /* Indigo-500 */
    --vt-text-head: #0f172a;     /* Slate-900 */
    --vt-text-sub: #64748b;      /* Slate-500 */
    --vt-logo-bg: #f8fafc;       /* Slate-50 */
    --vt-tag-bg: #f1f5f9;        /* Slate-100 */
    --vt-tag-text: #475569;      /* Slate-600 */
    --vt-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    --vt-shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

    /* --- Layout Variables --- */
    width: 100%;
    margin: 0 auto;
    font-family: var(--vt-font);
}

/* --- Dark Mode Overrides --- */
/* Applied via .style-dark class on the widget container or body */
.style-dark .ai-tools-display-widget,
.ai-tool-card-dark {
    --vt-bg: #1f2937;            /* Gray-800 */
    --vt-border: #374151;        /* Gray-700 */
    --vt-hover-border: #818cf8;  /* Indigo-400 */
    --vt-text-head: #ffffff;     /* White */
    --vt-text-sub: #9ca3af;      /* Gray-400 */
    --vt-logo-bg: #111827;       /* Gray-900 */
    --vt-tag-bg: rgba(255, 255, 255, 0.1);
    --vt-tag-text: #e2e8f0;      /* Gray-200 */
    --vt-shadow: none;
    --vt-shadow-hover: 0 0 20px rgba(99, 102, 241, 0.25); /* Glow */
}

/* Global Reset within Widget */
.ai-tools-display-widget * { box-sizing: border-box; }
.ai-tools-display-widget a { text-decoration: none !important; color: inherit; }


/* =================================================================
   2. WIDGET SCAFFOLDING (Filters, Grid, Pagination, Loaders)
   ================================================================= */

/* --- Control Panel (Filters) --- */
.ai-tools-control-panel {
    margin-bottom: 30px;
    padding: 0;
}

/* JetSmartFilters "Pills" Styling */
.ai-tools-display-widget .jet-radio-list__item {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
}

.ai-tools-display-widget .jet-radio-list__button {
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--vt-border);
    border-radius: 8px;
    background-color: var(--vt-bg);
    color: var(--vt-text-sub);
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Filter Active/Hover States */
.ai-tools-display-widget .jet-radio-list__input:checked + .jet-radio-list__button,
.ai-tools-display-widget .jet-radio-list__button.active,
.ai-tools-display-widget .jet-radio-list__button:hover {
    background-color: var(--vt-primary);
    color: #ffffff;
    border-color: var(--vt-primary);
    box-shadow: 0 4px 6px rgba(79, 70, 229, 0.3);
}

.ai-tools-display-widget .jet-radio-list__input,
.ai-tools-display-widget .jet-radio-list__decorator { display: none; }

/* --- Grid System --- */
.ai-tools-display-area.grid {
    display: grid !important;
    /* Smart responsive columns: min 280px, otherwise expand */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

/* --- Loading States --- */
.jsf-grid.loading, 
.ai-tools-display-area.grid.loading {
    position: relative;
    min-height: 200px;
    opacity: 0.6;
    pointer-events: none;
}

.jsf-grid.loading::after,
.ai-tools-display-area.grid.loading::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 40px; height: 40px;
    border: 4px solid rgba(0,0,0,0.1);
    border-top-color: var(--vt-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    z-index: 50;
}
@keyframes spin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }

/* --- Pagination --- */
.ai-tools-pagination, .jet-smart-filters-pagination {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.ai-tools-pagination-button, 
.jet-filters-pagination__link {
    padding: 10px 16px;
    background: var(--vt-bg);
    border: 1px solid var(--vt-border);
    color: var(--vt-text-head);
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.2s;
    cursor: pointer;
}

.ai-tools-pagination-button:hover,
.jet-filters-pagination__link:hover,
.jet-filters-pagination__current {
    background: var(--vt-primary);
    color: white;
    border-color: var(--vt-primary);
}


/* =================================================================
   3. SHARED CARD STYLES (Animations, Badges, Typography)
   ================================================================= */
.ai-tool-card {
    display: block;
    position: relative;
    background-color: var(--vt-bg);
    border: 1px solid var(--vt-border);
    border-radius: 12px;
    /* The Hover Effect */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                border-color 0.3s ease, 
                box-shadow 0.3s ease;
    overflow: hidden;
}

.ai-tool-card:hover {
    transform: translateY(-5px); /* Lift */
    border-color: var(--vt-hover-border) !important; /* Color Border */
    box-shadow: var(--vt-shadow-hover); /* Glow/Shadow */
}

/* Link Wrapper */
.ai-tool-card a.ai-tool-card-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

/* Typography Helpers */
.ai-tool-title {
    font-family: var(--vt-font);
    color: var(--vt-text-head);
    margin: 0 !important;
    font-weight: 800 !important;
    display: flex;
    align-items: center;
    line-height: 1.3;
}

.ai-tool-type {
    font-family: var(--vt-font);
}

.ai-tool-pricing-tag {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase;
    padding: 3px 8px; border-radius: 4px;
    background-color: var(--vt-tag-bg);
    color: var(--vt-tag-text);
    letter-spacing: 0.5px;
    display: inline-block;
}

/* Icons & Badges */
.ai-tool-verified-icon {
    width: 16px; height: 16px;
    margin-left: 6px; flex-shrink: 0;
    fill: #3b82f6;
}


.badge-featured { background-color: #8b5cf6; } /* Purple */
.badge-trending { background-color: #f59e0b; } /* Amber */
.badge-top { background-color: #f43f5e; }      /* Rose */


/* =================================================================
   4. MINI CARDS (Grid View) - FORCED FIXES
   ================================================================= */

/* 1. Card Container - LIGHT MODE BORDER FIX */
.ai-tool-card-mini {
    height: 112px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    padding: 0 !important;
    
    /* Force White BG and Visible Slate Border */
    background-color: #ffffff !important; 
    border: 1px solid #cbd5e1 !important; /* Darker Slate-300 for visibility */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    
    transition: all 0.3s ease !important;
}

/* Dark Mode Override */
.style-dark .ai-tool-card-mini, 
.ai-tool-card-dark.ai-tool-card-mini {
    background-color: #1f2937 !important; /* Dark Gray */
    border-color: #374151 !important;     /* Dark Slate Border */
    box-shadow: none !important;
}

/* Hover Effect - Purple Border & Lift */
.ai-tool-card-mini:hover {
    transform: translateY(-3px) !important;
    border-color: #4f46e5 !important; /* THE PURPLE (Indigo-600) */
    box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.2) !important; /* Purple Glow */
}

/* 2. LAYOUT FIX - Link is the Flex Row */
.ai-tool-card-mini .ai-tool-card-link {
    display: flex !important;
    flex-direction: row !important; /* Forces Logo Left, Content Right */
    width: 100% !important;
    height: 100% !important;
    text-decoration: none !important;
    align-items: stretch !important;
}

/* 3. Logo Wrapper - 112px Square */
.ai-tool-card-mini .ai-tool-logo-wrapper {
    width: 112px !important;
    height: 112px !important;
    min-width: 112px !important;
    flex-shrink: 0 !important;
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    background-color: #f8fafc !important; /* Light Slate BG */
    border-right: 1px solid #e2e8f0 !important;
    padding: 16px !important;
    overflow: hidden !important; /* Required for Zoom */
}

.style-dark .ai-tool-card-mini .ai-tool-logo-wrapper,
.ai-tool-card-dark .ai-tool-logo-wrapper {
    background-color: #111827 !important; /* Darker BG */
    border-right-color: #374151 !important;
}

/* 4. Logo Image - ZOOM EFFECT ADDED */
.ai-tool-card-mini .ai-tool-logo {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ZOOM ON HOVER */
.ai-tool-card-mini:hover .ai-tool-logo {
    transform: scale(1.15) !important;
}

/* 5. Content Area */
.ai-tool-card-mini .ai-tool-content {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 0 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
}

/* 6. Typography - PURPLE TITLES */
.ai-tool-card-mini .ai-tool-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 0 0 4px 0 !important;
    width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    
    
    transition: color 0.2s ease !important;
}

/* Dark Mode Title */
.style-dark .ai-tool-card-mini .ai-tool-title,
.ai-tool-card-dark .ai-tool-title {
    color: #ffffff !important;
}

/* HOVER TITLE: THE PURPLE */
.ai-tool-card-mini:hover .ai-tool-title {
    color: #4f46e5 !important; /* Indigo-600 */
}

/* Category Text */
.ai-tool-card-mini .ai-tool-type {
    font-size: 12px !important;
    color: #64748b !important; /* Slate-500 */
    margin-bottom: 8px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
}

/* Pricing Tag */
.ai-tool-card-mini .ai-tool-pricing-tag {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    background-color: #f1f5f9 !important;
    color: #475569 !important;
}


/* =================================================================
   5. MID CARDS (The Carousel View) - FIXED
   ================================================================= */
/* Slick Slide Gutter Fix */
.ai-tools-display-area.carousel .ai-tool-card-mid {
    margin: 0 10px; /* Horizontal Spacing between cards */
    height: 100%;
}

.ai-tool-card-mid {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 420px; /* Ensure visual consistency */
    border-radius: 16px;
}

/* Glassmorphism (Dark Mode Only) */
.style-dark .ai-tool-card-mid,
.ai-tool-card-dark.ai-tool-card-mid {
    background-color: rgba(31, 41, 55, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* 1. Featured Image */
.ai-tool-card-mid .ai-tool-featured-image-wrapper {
    height: 160px;
    width: 100%;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.ai-tool-card-mid .ai-tool-featured-image {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}
.ai-tool-card-mid:hover .ai-tool-featured-image {
    transform: scale(1.05); /* Slight zoom on hover */
}

/* Shared Base Styles */
.ai-tool-corner-badge, .ai-tool-status-badge {
    position: absolute !important; 
    z-index: 99 !important; /* High Z-index to sit on top of everything */
    font-size: 9px; 
    font-weight: 800;
    color: white; 
    text-transform: uppercase;
    letter-spacing: 0.05em;
    pointer-events: none;
}

/* FIX: The Mini Card Badge (Corner Badge) */
.ai-tool-corner-badge {
    /* Position: Top Right with spacing */
    top: 8px !important;    
    right: 8px !important;  
    left: auto !important;  /* CRITICAL: Overrides flexbox left alignment */
    
    /* Shape: Pill (Rounded Rectangle) so text fits */
    border-radius: 4px !important; 
    padding: 4px 8px !important;
    width: auto !important;
    white-space: nowrap !important; /* Prevents text cutting */
    
    /* Visibility */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}

/* Mid Card Badge (Status Badge) - Kept consistent */
.ai-tool-status-badge {
    top: 12px !important;
    right: 12px !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    width: auto !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 2. Content Body (Flex Column) */
.ai-tool-card-mid .ai-tool-card-content {
    flex: 1; /* Fills remaining space */
    display: flex;
    flex-direction: column;
    padding: 24px;
    margin-top: -46px; /* Overlap the image */
    position: relative;
    z-index: 2;
}

/* Floating Logo */
.ai-tool-card-mid .ai-tool-logo {
    width: 56px; height: 56px;
    border-radius: 12px;
    border: 4px solid var(--vt-bg); /* Cutout effect */
    background-color: var(--vt-logo-bg);
    margin-bottom: 16px;
    object-fit: cover;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    flex-shrink: 0;
}

/* Typography Mid */
.ai-tool-card-mid .ai-tool-title {
    font-size: 18px !important;
    margin-bottom: 8px !important;
}

.ai-tool-card-mid .ai-tool-type {
    font-size: 11px; font-weight: 800;
    text-transform: uppercase;
    color: var(--vt-primary);
    margin-bottom: 12px;
}

.ai-tool-card-mid .ai-tool-excerpt {
    font-size: 14px;
    line-height: 1.6;
    color: var(--vt-text-sub);
    margin-bottom: 24px;
    /* Limit lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 3. Footer (Pushed to absolute bottom) */
.ai-tool-card-mid .ai-tool-footer {
    margin-top: auto; /* KEY FIX: Pushes this div to the bottom */
    padding-top: 16px;
    border-top: 1px solid var(--vt-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.ai-tool-card-mid .ai-tool-visit-link {
    font-size: 12px; font-weight: 700;
    color: var(--vt-text-head);
    transition: color 0.2s;
}
.ai-tool-card-mid .ai-tool-visit-link:hover { color: var(--vt-primary); }


/* =================================================================
   6. CAROUSEL NAVIGATION (Arrows Customization)
   ================================================================= */
.ai-tools-display-area.carousel {
    padding-bottom: 0;
    overflow: visible; /* Allows shadows to breathe */
}

/* Hide Default Dots */
.ai-tools-display-area.carousel .slick-dots { display: none !important; }

/* Arrow Base Style */
.ai-tools-display-area.carousel .slick-arrow {
    width: 44px !important;
    height: 44px !important;
    background-color: var(--vt-bg) !important;
    border: 1px solid var(--vt-border) !important;
    border-radius: 50% !important;
    z-index: 25 !important;
    
    /* Position Absolute Centered */
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    
    /* Content Centering */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    
    /* Hide Text */
    font-size: 0 !important;
    color: transparent !important;
}

/* Arrow Icon (Pseudo) */
.ai-tools-display-area.carousel .slick-arrow::before {
    font-family: inherit !important;
    font-size: 20px !important;
    color: var(--vt-text-head) !important;
    opacity: 1 !important;
    display: block;
    line-height: 1;
    margin-top: -3px; /* Optical adjustment for vertical center */
}

/* Hover States */
.ai-tools-display-area.carousel .slick-arrow:hover {
    background-color: var(--vt-primary) !important;
    border-color: var(--vt-primary) !important;
}
.ai-tools-display-area.carousel .slick-arrow:hover::before {
    color: #ffffff !important;
}

/* Arrow Directions & Positioning */
.ai-tools-display-area.carousel .slick-prev { left: -22px !important; }
.ai-tools-display-area.carousel .slick-next { right: -22px !important; }

.ai-tools-display-area.carousel .slick-prev::before { content: '←'; }
.ai-tools-display-area.carousel .slick-next::before { content: '→'; }


/* =================================================================
   FINAL TWEAKS (Colors & Spacing)
   ================================================================= */

/* 1. Tool Titles: Change from Black to Branding Purple */
.ai-tool-title {
    color: #000000 !important; /* Indigo-600 */
    transition: color 0.3s ease;
}

/* Optional: Lighter Purple for Dark Mode (for better readability) */
.style-dark .ai-tool-title,
.ai-tool-card-dark .ai-tool-title {
    color: #818cf8 !important; /* Indigo-400 */
}

/* 2. Mid Cards: Push Footer Lower */
/* Remove bottom padding from the container so footer can slide down */
.ai-tool-card-mid .ai-tool-card-content {
    padding-bottom: 0 !important; 
}

/* Ensure the footer sits at the very bottom but keeps internal spacing */
.ai-tool-card-mid .ai-tool-footer {
    padding-top: 16px !important;
    padding-bottom: 20px !important; /* Internal spacing from the bottom edge */
    margin-bottom: 0 !important;
    border-top: 1px solid #e2e8f0; /* Ensure separator is visible */
}

/* Dark Mode Footer Border adjustment */
.style-dark .ai-tool-card-mid .ai-tool-footer,
.ai-tool-card-dark.ai-tool-card-mid .ai-tool-footer {
    border-top-color: #374151 !important;
}


/* =================================================================
   VANTAIGE FILTER TOOLBAR (FIXED)
   ================================================================= */

/* 1. Main Toolbar Container (Fixed Radius & Width) */
.v-toolbar-container {
    width: 85% !important;
    max-width: 1200px;
    margin: 0 auto 32px auto !important;
    
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important; /* Force 16px to override Elementor */
    padding: 8px 12px !important;
    
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-sizing: border-box;
    overflow: hidden; /* Ensures content respects the radius */
}

/* -----------------------------------------------------------------
   2. SORTING (Top | Recent) - FIXED ALIGNMENT
   ----------------------------------------------------------------- */
.v-sort-control { width: auto; flex-shrink: 0; }

/* Gray Pill Container */
.v-sort-control .jet-sorting-list,
.v-sort-control .jet-radio-list {
    display: inline-flex !important;
    background-color: #f1f5f9 !important; /* Slate-100 */
    padding: 4px !important;
    border-radius: 10px !important;
    gap: 0 !important;
    margin: 0 !important;
    align-items: center !important;
    border: none !important; /* Fix weird borders */
}

/* The Items */
.v-sort-control .jet-sorting-item,
.v-sort-control .jet-radio-list__item {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
}

/* The Clickable Button */
.v-sort-control .jet-sorting-item label,
.v-sort-control .jet-radio-list__button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 24px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    background: transparent !important;
    border-radius: 8px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    line-height: 1 !important;
}

/* Hover State */
.v-sort-control .jet-sorting-item:hover label,
.v-sort-control .jet-radio-list__item:hover .jet-radio-list__button {
    background-color: #4f46e5 !important; /* Purple */
    color: #ffffff !important; /* White Text */
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.3) !important;
    border-color: #4f46e5 !important;
}

/* Active State (White Card) */
.v-sort-control .jet-sorting-item.is-checked label,
.v-sort-control .jet-radio-list__input:checked + .jet-radio-list__button {
    background-color: #ffffff !important;
    color: #4f46e5 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

/* -----------------------------------------------------------------
   3. VERIFIED FILTER (Icon Fix)
   ----------------------------------------------------------------- */
.v-verified-filter {
    border-right: 1px solid #e2e8f0;
    padding-right: 20px;
    margin-right: 0;
}

/* Base Button */
.v-verified-filter .jet-checkboxes-list__button {
    display: flex !important;
    align-items: center !important; /* Aligns Icon & Text vertically */
    gap: 8px !important; /* Space between icon and text */
    padding: 8px 16px !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    color: #475569 !important;
    font-weight: 600 !important;
}

/* The Icon Box (Decorator) - Fix Positioning */
.v-verified-filter .jet-checkboxes-list__decorator {
    display: none; !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important; /* STOP Absolute Positioning */
    margin: 0 !important;
    width: 16px !important;
    height: 16px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important;
    background: transparent !important;
}

/* Hide the default checked icon inside (we use color change) or style it */
.v-verified-filter .jet-checkboxes-list__checked-icon {
    position: static !important;
    transform: none !important;
    font-size: 10px !important;
    line-height: 1 !important;
    color: white !important;
}

/* Active State */
.v-verified-filter .jet-checkboxes-list__input:checked + .jet-checkboxes-list__button {
    border-color: #93c5fd !important;
    background-color: #eff6ff !important;
    color: #1d4ed8 !important;
}

.v-verified-filter .jet-checkboxes-list__input:checked + .jet-checkboxes-list__button .jet-checkboxes-list__decorator {
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
}

/* -----------------------------------------------------------------
   4. PRICING FILTERS (Color Fix for Rows/Items)
   ----------------------------------------------------------------- */
.v-pricing-filter { border: none !important; padding: 0 !important; }

/* Force Row Layout */
.v-pricing-filter .jet-checkboxes-list-wrapper,
.v-pricing-filter .jet-checkboxes-list {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    align-items: center !important;
}

/* Hide Labels */
.v-pricing-filter .jet-filter-label,
.v-pricing-filter .jet-checkboxes-list-wrapper::before { display: none !important; }

/* Base Button */
.v-pricing-filter .jet-checkboxes-list__button {
    padding: 8px 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    border: 1px solid transparent !important;
    background-color: #fff;
    cursor: pointer;
}

/* --- COLOR LOGIC: Target by Child Index (Handling Rows or Direct Items) --- */

/* 1. FREE (Green) - 1st Child */
.v-pricing-filter .jet-checkboxes-list__item:nth-child(1) .jet-checkboxes-list__button,
.v-pricing-filter .jet-checkboxes-list__row:nth-child(1) .jet-checkboxes-list__button {
    background-color: #f0fdf4 !important; border-color: #bbf7d0 !important; color: #15803d !important;
}
/* Active */
.v-pricing-filter .jet-checkboxes-list__item:nth-child(1) input:checked + .jet-checkboxes-list__button,
.v-pricing-filter .jet-checkboxes-list__row:nth-child(1) input:checked + .jet-checkboxes-list__button {
    background-color: #22c55e !important; color: #fff !important; border-color: #22c55e !important;
}

/* 2. FREEMIUM (Orange) - 2nd Child */
.v-pricing-filter .jet-checkboxes-list__item:nth-child(2) .jet-checkboxes-list__button,
.v-pricing-filter .jet-checkboxes-list__row:nth-child(2) .jet-checkboxes-list__button {
    background-color: #fff7ed !important; border-color: #fed7aa !important; color: #c2410c !important;
}
/* Active */
.v-pricing-filter .jet-checkboxes-list__item:nth-child(2) input:checked + .jet-checkboxes-list__button,
.v-pricing-filter .jet-checkboxes-list__row:nth-child(2) input:checked + .jet-checkboxes-list__button {
    background-color: #f97316 !important; color: #fff !important; border-color: #f97316 !important;
}

/* 3. PAID (Purple) - 3rd Child */
.v-pricing-filter .jet-checkboxes-list__item:nth-child(3) .jet-checkboxes-list__button,
.v-pricing-filter .jet-checkboxes-list__row:nth-child(3) .jet-checkboxes-list__button {
    background-color: #faf5ff !important; border-color: #e9d5ff !important; color: #7e22ce !important;
}
/* Active */
.v-pricing-filter .jet-checkboxes-list__item:nth-child(3) input:checked + .jet-checkboxes-list__button,
.v-pricing-filter .jet-checkboxes-list__row:nth-child(3) input:checked + .jet-checkboxes-list__button {
    background-color: #a855f7 !important; color: #fff !important; border-color: #a855f7 !important;
}

/* Responsive */
@media (max-width: 768px) {
    .v-toolbar-container { width: 95% !important; flex-direction: column; align-items: stretch; }
    .v-verified-filter { border-right: none; margin-bottom: 10px; padding-right: 0; }
    .v-pricing-filter .jet-checkboxes-list-wrapper { justify-content: center; }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .v-toolbar-container {
        flex-direction: column;
        align-items: stretch;
    }
    .v-pricing-filter {
        border-left: none;
        padding-left: 0;
        justify-content: center;
    }
    .v-pricing-filter .jet-checkboxes-list {
        justify-content: center;
    }
}

/* =================================================================
   7. RESPONSIVE UTILITIES
   ================================================================= */
@media (max-width: 768px) {
    .ai-tools-display-area.grid { grid-template-columns: 1fr !important; }
    
    .ai-tool-card-mini { height: auto !important; min-height: 100px; }
    .ai-tool-card-mini .ai-tool-logo-wrapper { width: 100px !important; height: 100px !important; min-width: 100px !important; }
    
    .ai-tools-display-area.carousel .slick-arrow { width: 36px !important; height: 36px !important; }
    .ai-tools-display-area.carousel .slick-prev { left: -10px !important; }
    .ai-tools-display-area.carousel .slick-next { right: -10px !important; }
}