/* ==========================================================================
   SMARTREMOTEGIGS — DESIGN SYSTEM 2026 (v5.0.0 Clean Version)
   - Core visual tokens, theme variables, and global semantic styles.
   - Design Identity Guide v5.0 (July 2026) — Low-Glare Unified Edition.
   - Globally eliminates Webkit tap-highlight borders on mobile touch devices.
   - Unified Soft Slate-Violet #FBFAFD card backgrounds enforced.
   ========================================================================== */

/* ==========================================================================
   0. Global Mobile Touch Tap-Highlight Reset
   - Neutralizes thick clunky borders on active touch states for iOS/Android.
   ========================================================================== */


body * {
    -webkit-tap-highlight-color: transparent !important; /* Eliminates tap highlight overlays globally on touch screens */
}

:root {
    /* -- 1. Brand Colors — Violet #7C3AED -- */
    --srg-brand-50:  #f5f3ff;
    --srg-brand-100: #ede9fe;
    --srg-brand-200: #ddd6fe;
    --srg-brand-300: #c4b5fd;
    --srg-brand-400: #a78bfa;
    --srg-brand-500: #8b5cf6;
    --srg-brand-600: #7c3aed; /* Primary Core Accent */
    --srg-brand-700: #6d28d9;
    --srg-brand-800: #5b21b6;
    --srg-brand-900: #4c1d95;
    --srg-brand-950: #2e1065;

    /* -- 2. Secondary Colors — Cyan #06B6D4 -- */
    --srg-secondary-50:  #ecfeff;
    --srg-secondary-100: #cffafe;
    --srg-secondary-200: #a5f3fc;
    --srg-secondary-300: #67e8f9;
    --srg-secondary-400: #22d3ee;
    --srg-secondary-500: #06b6d4;
    --srg-secondary-600: #0891b2;
    --srg-secondary-700: #0e7490;
    --srg-secondary-800: #155e75;
    --srg-secondary-900: #164e63;

    /* -- 3. Success / Accent Colors — Emerald #10B981 -- */
    --srg-accent-50:  #ecfdf5;
    --srg-accent-100: #d1fae5;
    --srg-accent-500: #10b981; /* Success Core */
    --srg-accent-600: #059669;
    --srg-accent-700: #047857;

    /* -- 4. Slate Neutral Scale -- */
    --srg-neutral-50:  #f8fafc; /* Surface Background */
    --srg-neutral-100: #f1f5f9;
    --srg-neutral-200: #e2e8f0;
    --srg-neutral-300: #cbd5e1;
    --srg-neutral-400: #94a3b8;
    --srg-neutral-500: #64748b;
    --srg-neutral-600: #475569;
    --srg-neutral-700: #334155;
    --srg-neutral-800: #1e293b;
    --srg-neutral-900: #0f172a;
    --srg-neutral-950: #020617;

    /* -- 5. Semantic Base Tokens — Light Mode -- */
    --srg-bg-primary: #FBFAFD; /* Our new universal low-glare ground backdrop */
    --srg-bg-secondary: #FBFAFD; /* Unified low-glare soft slate-violet background */
    --srg-bg-tertiary:  color-mix(in srgb, var(--srg-context-accent) 6%, var(--srg-neutral-100, #f1f5f9));
    --srg-bg-elevated:  #ffffff;
    --srg-bg-inverse:   var(--srg-neutral-900);
    --srg-bg-code:      color-mix(in srgb, var(--srg-context-accent) 3%, var(--srg-neutral-50, #f8fafc));

    --srg-text-primary:   #222222; /* High Contrast Text */
    --srg-text-secondary: var(--srg-neutral-600);
    --srg-text-tertiary:  var(--srg-neutral-500);
    --srg-text-inverse:   #ffffff;
    --srg-text-link:      #7C3AED; /* Locked core brand-600 violet */
    --srg-text-link-hover: #6D28D9; /* Locked core brand-700 violet */

    --srg-border-primary: color-mix(in srgb, var(--srg-context-accent, #7C3AED) 12%, transparent);
    --srg-border-secondary: color-mix(in srgb, var(--srg-context-accent, #7C3AED) 8%, transparent);
    --srg-border-focus:     var(--srg-brand-500);

    /* Status Colors */
    --srg-success: var(--srg-accent-500);
    --srg-warning: #f59e0b;
    --srg-error:   #ef4444;
    --srg-info:    var(--srg-secondary-500);

    /* -- 6. Typography Foundations -- */
    --srg-font-heading: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --srg-font-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --srg-font:         var(--srg-font-body);
    --srg-font-mono:    'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, Consolas, monospace;

    --srg-text-xs:   0.75rem;   /* 12px */
    --srg-text-sm:   0.875rem;  /* 14px */
    --srg-text-base: 1rem;      /* 16px */
    --srg-text-lg:   1.125rem;  /* 18px */
    --srg-text-xl:   1.25rem;   /* 20px */
    --srg-text-2xl:  1.5rem;    /* 24px */
    --srg-text-3xl:  1.875rem;  /* 30px */
    --srg-text-4xl:  2.25rem;   /* 36px */
    --srg-text-5xl:  3rem;      /* 48px */
    --srg-text-6xl:  3.75rem;   /* 60px */

    --srg-leading-tight:  1.25;
    --srg-leading-normal: 1.6;
    --srg-leading-relaxed: 1.75;
    --srg-lh-tight:       1.25;

    --srg-tracking-tight: -0.025em;
    --srg-tracking-normal: 0;
    --srg-tracking-wide: 0.025em;

    /* Font Weights */
    --srg-weight-normal: 400;
    --srg-weight-medium: 500;
    --srg-weight-semibold: 600;
    --srg-weight-bold: 700;

    /* -- 7. Spacing Scale -- */
    --srg-space-0: 0;
    --srg-space-1: 0.25rem;   /* 4px */
    --srg-space-2: 0.5rem;    /* 8px */
    --srg-space-3: 0.75rem;   /* 12px */
    --srg-space-4: 1rem;      /* 16px */
    --srg-space-5: 1.25rem;   /* 20px */
    --srg-space-6: 1.5rem;    /* 24px */
    --srg-space-8: 2rem;      /* 32px */
    --srg-space-10: 2.5rem;   /* 40px */
    --srg-space-12: 3rem;     /* 48px */
    --srg-space-16: 4rem;     /* 64px */
    --srg-space-20: 5rem;     /* 80px */
    --srg-space-24: 6rem;     /* 96px */

    /* Container Boundaries */
    --srg-container-sm: 640px;
    --srg-container-md: 768px;
    --srg-container-lg: 1024px;
    --srg-container-xl: 1280px;
    --srg-container-wide: 1400px;

    /* Border Radius Scale */
    --srg-radius-sm: 0.25rem;   /* 4px */
    --srg-radius-md: 0.5rem;    /* 8px */
    --srg-radius-lg: 0.75rem;   /* 12px */
    --srg-radius-xl: 1rem;      /* 16px */
    --srg-radius-2xl: 1.25rem;  /* 20px */
    --srg-radius-full: 9999px;

    /* Shadows */
    --srg-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --srg-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --srg-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    --srg-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    --srg-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    --srg-shadow-glow: 0 0 20px rgba(14, 165, 233, 0.15);

    /* Transitions */
    --srg-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --srg-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --srg-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Z-Index Hierarchy */
    --srg-z-dropdown: 100;
    --srg-z-sticky: 200;
    --srg-z-modal: 300;
    --srg-z-popover: 400;
    --srg-z-toast: 500;

    /* Context Accent Token Defaults */
    --srg-context-accent: var(--srg-brand-600);
    --srg-context-accent-hover: var(--srg-brand-700);
    --srg-context-accent-subtle: var(--srg-brand-50);
    --srg-context-accent-rgb: 124, 58, 237;
    --srg-context-accent-text: color-mix(in srgb, var(--srg-context-accent) 75%, #000000);
}

body {
    background-color: var(--srg-bg-primary, #FBFAFD) !important;
}

/* -- Semantic Base Tokens — Velvet Indigo Dark Mode -- */
html.srg-dark {
    --srg-bg-primary:   #080515 !important;    /* Universal ground backdrop */
    --srg-bg-secondary: #0F172A !important;    /* Elevated card and header surface */
    --srg-bg-tertiary:  #1a1332 !important;    /* Tertiary container layer */
    --srg-bg-elevated:  #0F172A !important;    /* Elevated menus and modals */
    --srg-bg-inverse:   var(--srg-neutral-50);
    --srg-bg-code:      color-mix(in srgb, var(--srg-context-accent) 6%, #0F172A);

    --srg-text-primary:   #f1f5f9 !important;  /* Crystal white readable text */
    --srg-text-secondary: var(--srg-neutral-400);

    --srg-border-primary:   color-mix(in srgb, var(--srg-context-accent, #7C3AED) 16%, #1a1332);
    --srg-border-secondary: rgba(124, 58, 237, 0.08) !important; /* Elegant translucent purple outline */
    --srg-context-accent-text: color-mix(in srgb, var(--srg-context-accent) 75%, #ffffff);
}

/* -- Localized Card Context Overrides (Dark Mode) -- */
html.srg-dark .srg-software-card,
html.srg-dark .srg-software-recommendation,
html.srg-dark .srg-card-template,
html.srg-dark .srg-card.srg-card-template,
html.srg-dark .srg-home-templates-section,
html.srg-dark .srg-tool-arc-card,
html.srg-dark .srg-tool-hero-card {
    --srg-context-accent-text: color-mix(in srgb, var(--srg-context-accent) 80%, #ffffff) !important;
}

@media (prefers-color-scheme: dark) {
    html:not(.srg-light) {
        --srg-bg-primary:   #080515 !important;    /* Universal ground backdrop */
        --srg-bg-secondary: #0F172A !important;    /* Elevated card and header surface */
        --srg-bg-tertiary:  #1a1332 !important;    /* Tertiary container layer */
        --srg-bg-elevated:  #0F172A !important;    /* Elevated menus and modals */
        --srg-bg-inverse:   var(--srg-neutral-50);
        --srg-bg-code:      color-mix(in srgb, var(--srg-context-accent) 6%, #0F172A);

        --srg-text-primary:   #f1f5f9 !important;  /* Crystal white readable text */
        --srg-text-secondary: var(--srg-neutral-400);

        --srg-border-primary:   color-mix(in srgb, var(--srg-context-accent, #7C3AED) 16%, #1a1332);
        --srg-border-secondary: rgba(124, 58, 237, 0.08) !important; /* Elegant translucent purple outline */
        --srg-context-accent-text: color-mix(in srgb, var(--srg-context-accent) 75%, #ffffff);
    }
}

/* ==========================================================================
   GLOBAL TYPOGRAPHY SETTINGS
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--srg-font-heading) !important;
    font-weight: var(--srg-weight-bold, 700) !important;
    line-height: var(--srg-leading-tight, 1.25) !important;
    color: var(--srg-text-primary) !important;
    margin-bottom: var(--srg-space-4); 
}
h1 { font-size: var(--srg-text-3xl, 1.875rem) !important; }
h2 { font-size: var(--srg-text-2xl, 1.5rem) !important; }
h3 { font-size: var(--srg-text-xl, 1.25rem) !important; }
h4 { font-size: var(--srg-text-lg, 1.125rem) !important; }
h5 { font-size: var(--srg-text-base, 1rem) !important; }
h6 { font-size: var(--srg-text-sm, 0.875rem) !important; }

h2 {
    padding-bottom: 0;
}

body.single .entry-content h2,
body.page .entry-content h2,
body.single-software .entry-content h2,
body.single-template .entry-content h2,
body.single-tools .entry-content h2,
body.single .srg-section-title,
body.page .srg-section-title,
body.single-software .srg-section-title,
body.single-template .srg-section-title,
body.single-tools .srg-section-title {
    padding-bottom: var(--srg-space-3, 12px) !important;
}

p {
    margin-bottom: var(--srg-space-4);
    color: var(--srg-text-secondary);
}

a {
    color: #7C3AED; 
    text-decoration: none;
    transition: color var(--srg-transition-fast);
}

a:hover {
    color: #6D28D9; 
    text-decoration: underline;
}

/* WCAG 2.2 AA Compliant keyboard focus ring */
a:focus {
    outline: none !important;
}

strong, b { font-weight: var(--srg-weight-semibold); }

ul, ol {
    margin-bottom: var(--srg-space-4);
    padding-left: var(--srg-space-6);
}

li { margin-bottom: var(--srg-space-2); }

code {
    font-family: var(--srg-font-mono);
    font-size: 0.70em;
    background: var(--srg-bg-code);
    padding: 0.15em 0.4em;
    border-radius: var(--srg-radius-sm);
    color: var(--srg-brand-700);
}

pre {
    font-family: var(--srg-font-mono);
    background: var(--srg-bg-code);
    padding: var(--srg-space-4);
    border-radius: var(--srg-radius-lg);
    overflow-x: auto;
    margin-bottom: var(--srg-space-4);
    border: 1px solid var(--srg-border-primary);
}

pre code {
    background: transparent;
    padding: 0;
    color: inherit;
}

/* ==========================================================================
   GLOBAL LAYOUT UTILITIES
   ========================================================================== */
.srg-container {
    width: 100%;
    max-width: var(--srg-container-width, var(--srg-container-xl));
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--srg-space-4);
    padding-right: var(--srg-space-4);
}

.srg-container-sm { max-width: var(--srg-container-sm); }
.srg-container-md { max-width: var(--srg-container-md); }
.srg-container-lg { max-width: var(--srg-container-lg); }
.srg-container-wide { max-width: var(--srg-container-wide); }

.srg-section {
    padding-top: var(--srg-space-8);
    padding-bottom: var(--srg-space-16);
}

.srg-section-sm {
    padding-top: var(--srg-space-10);
    padding-bottom: var(--srg-space-10);
}

.srg-grid {
    display: grid;
    gap: var(--srg-space-6);
}

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

@media (min-width: 640px) {
    .srg-grid-2 { grid-template-columns: repeat(2, 1fr); }
    .srg-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .srg-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .srg-grid-3 { grid-template-columns: repeat(3, 1fr); }
    .srg-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.srg-flex { display: flex; }
.srg-flex-col { flex-direction: column; }
.srg-items-center { align-items: center; }
.srg-justify-between { justify-content: space-between; }
.srg-gap-2 { gap: var(--srg-space-2); }
.srg-gap-4 { gap: var(--srg-space-4); }
.srg-gap-6 { gap: var(--srg-space-6); }

/* ==========================================================================
   GLOBAL FOCUS & ACCESSIBILITY OUTLINE ENFORCEMENT
   ========================================================================== */
*:focus,
*:active,
button:focus,
input:focus,
textarea:focus,
select:focus,
a:focus,
[tabindex]:focus {
    outline: none !important;
}

*:focus-visible {
    outline: 2px solid #7C3AED !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.35) !important;
}

a[aria-label]:focus-visible,
button[aria-label]:focus-visible,
[tabindex][aria-label]:focus-visible,
input[aria-label]:focus-visible {
    outline: 2px solid #7C3AED !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.35) !important;
}

button:active,
a:active,
input:active,
[tabindex]:active {
    outline: none !important;
}

.skip-link {
    position: absolute;
    top: -100%;
    left: var(--srg-space-4);
    z-index: var(--srg-z-modal);
    background: var(--srg-brand-600);
    color: #fff;
    padding: var(--srg-space-3) var(--srg-space-4);
    border-radius: var(--srg-radius-md);
    font-weight: var(--srg-weight-semibold);
    transition: top var(--srg-transition-fast);
}

.skip-link:focus {
    top: var(--srg-space-4);
}

/* ==========================================================================
   CLS PREVENTION — Sticky Header Reserve
   ========================================================================== */
html {
    scroll-padding-top: 80px;
}

@media (max-width: 1023px) {
    html {
        scroll-padding-top: 60px;
    }
}

/* ==========================================================================
   DYNAMIC CPT SECTION CONTEXT ACCENTS (Blue, Orange, & Purple Sync)
   ========================================================================== */

/* Software Section (Blue #2563EB) */
body.single-software,
body.archive-software,
body.post-type-archive-software,
body.tax-price-model,
body.tax-tool-category {
    --srg-context-accent: #2563EB;
    --srg-context-accent-hover: #1d4ed8;
    --srg-context-accent-subtle: rgba(37, 99, 235, 0.08);
    --srg-context-accent-rgb: 37, 99, 235;
}
html.srg-dark body.single-software,
html.srg-dark body.archive-software,
html.srg-dark body.post-type-archive-software,
html.srg-dark body.tax-price-model,
html.srg-dark body.tax-tool-category {
    --srg-context-accent: #3b82f6 !important;
    --srg-context-accent-hover: #2563eb !important;
    --srg-context-accent-subtle: rgba(59, 130, 246, 0.15) !important;
    --srg-context-accent-rgb: 59, 130, 246 !important;
}

/* Templates Section (Emerald-700 #047857) */
body.single-template,
body.archive-template,
body.post-type-archive-template,
body.tax-template-type {
    --srg-context-accent: #047857 !important;
    --srg-context-accent-hover: #065f46 !important;
    --srg-context-accent-subtle: rgba(4, 120, 87, 0.08) !important;
    --srg-context-accent-rgb: 4, 120, 87 !important;
}
html.srg-dark body.single-template,
html.srg-dark body.archive-template,
html.srg-dark body.post-type-archive-template,
html.srg-dark body.tax-template-type {
    --srg-context-accent: #10b981 !important;
    --srg-context-accent-hover: #34d399 !important;
    --srg-context-accent-subtle: rgba(16, 185, 129, 0.15) !important;
}

/* Tools Section (Purple #7C3AED) */
body.single-tools,
body.archive-tools,
body.post-type-archive-tools,
body.tax-tool-category,
body.tax-tools-type,
body.tax-tool-type {
    --srg-context-accent: #7C3AED;
    --srg-context-accent-hover: #6d28d9;
    --srg-context-accent-subtle: rgba(124, 58, 237, 0.08);
    --srg-context-accent-rgb: 124, 58, 237;
}
html.srg-dark body.single-tools,
html.srg-dark body.archive-tools,
html.srg-dark body.post-type-archive-tools,
html.srg-dark body.tax-tools-type,
html.srg-dark body.tax-tool-type {
    --srg-context-accent-hover: #a78bfa;
    --srg-context-accent-subtle: rgba(124, 58, 237, 0.15);
}

/* Localized Card Context Overrides (Self-Aware Cards) */
.srg-software-card,
.srg-software-recommendation {
    --srg-context-accent: #2563EB !important;
    --srg-context-accent-text: color-mix(in srgb, var(--srg-context-accent) 80%, #000000) !important;
}

.srg-tool-arc-card,
.srg-tool-hero-card {
    --srg-context-accent: #7C3AED !important;
    --srg-context-accent-text: color-mix(in srgb, var(--srg-context-accent) 80%, #000000) !important;
}

/* Editorial Blog Hub Alignment */
.srg-blog-archive-wrapper .srg-archive-hero-block {
    width: 100% !important;
    background-color: var(--srg-bg-secondary) !important;
    border-bottom: 1px solid var(--srg-border-secondary);
    padding: 36px 0 36px 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    box-shadow: none !important;
}

html.srg-dark .srg-blog-archive-wrapper .srg-archive-hero-block {
    background-color: var(--srg-neutral-900) !important;
    border-bottom: 1px solid var(--srg-neutral-800);
}

.srg-blog-archive-wrapper .srg-archive-breadcrumb {
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
}

.srg-blog-archive-wrapper #main-content {
    padding-top: 48px !important;
}

/* ==========================================================================
   MICRO-INTERACTIONS & TRANSITIONS
   ========================================================================== */

/* Dropdown Transitions */
.srg-filter-dropdown .srg-dropdown-menu {
    transform: scale(0.95) translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

.srg-filter-dropdown.is-open .srg-dropdown-menu,
.srg-filter-dropdown.active .srg-dropdown-menu {
    transform: scale(1) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* Dynamic Clipboard Copy Feedback */
#srg-copy-btn, .srg-copy-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.srg-icon-copy, .srg-copy-icon {
    opacity: 1;
    transform: scale(1);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

.srg-icon-check, .srg-check-icon {
    display: inline-block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0.5);
    transform-origin: center center;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

.copied .srg-icon-copy, .copied .srg-copy-icon {
    opacity: 0;
    transform: scale(0.5);
}

.copied .srg-icon-check, .copied .srg-check-icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
}

.srg-icon--hidden {
    opacity: 0 !important;
    transform: scale(0.5) !important;
}

.srg-icon--visible {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1.1) !important;
}

/* Absolute CSS Tooltip */
.srg-copy-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px) scale(0.9);
    background: var(--srg-neutral-900, #0f172a);
    color: #ffffff;
    font-size: var(--srg-text-xs, 12px);
    padding: 6px 10px;
    border-radius: var(--srg-radius-md, 6px);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
    box-shadow: var(--srg-shadow-md, 0 4px 6px rgba(0,0,0,0.05));
    z-index: 10;
}

.srg-copy-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 4px;
    border-style: solid;
    border-color: var(--srg-neutral-900, #0f172a) transparent transparent transparent;
}

.srg-copy-tooltip.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}

/* Dark Mode Switcher Micro-animations */
.srg-dark-toggle svg {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
}

.srg-dark-toggle .srg-icon-sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.srg-dark-toggle .srg-icon-moon {
    opacity: 0;
    transform: rotate(-90deg) scale(0);
}

html.srg-dark .srg-dark-toggle .srg-icon-sun {
    opacity: 0;
    transform: rotate(360deg) scale(0);
}

html.srg-dark .srg-dark-toggle .srg-icon-moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* Interactive Button Arrow-Slide Hover */
.srg-btn .arrow,
.srg-btn .srg-view-all-arrow,
.srg-btn svg:last-child,
.srg-eco-btn .arrow,
.srg-eco-btn .srg-view-all-arrow,
.srg-eco-btn svg:last-child {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.srg-btn:hover .arrow,
.srg-btn:hover .srg-view-all-arrow,
.srg-btn:hover svg:last-child,
.srg-eco-btn:hover .arrow,
.srg-eco-btn:hover .srg-view-all-arrow,
.srg-eco-btn:hover svg:last-child {
    transform: translateX(6px);
}

.srg-btn:active .arrow,
.srg-btn:active .srg-view-all-arrow,
.srg-btn:active svg:last-child,
.srg-eco-btn:active .arrow,
.srg-eco-btn:active .srg-view-all-arrow,
.srg-eco-btn:active svg:last-child {
    transform: translateX(4px);
}

/* Accessibility prefers-reduced-motion overrides */
@media (prefers-reduced-motion: reduce) {
    .srg-filter-dropdown .srg-dropdown-menu,
    .srg-dark-toggle svg,
    .srg-icon-copy, .srg-copy-icon,
    .srg-icon-check, .srg-check-icon,
    .srg-copy-tooltip,
    .srg-btn .arrow,
    .srg-btn .srg-view-all-arrow,
    .srg-btn svg:last-child,
    .srg-eco-btn .arrow,
    .srg-eco-btn .srg-view-all-arrow,
    .srg-eco-btn svg:last-child {
        transition: none !important;
        transform: none !important;
    }
}

/* Monetization Ad-Blocker Fallback Safeguard */
.srg-ad-fallback-promo {
    display: none;
    opacity: 0;
}

.srg-ad-fallback-promo.show-fallback {
    display: block !important;
    animation: srgAdFadeIn 0.4s ease-in-out forwards;
}

@keyframes srgAdFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* FAQ Container Spacing Reset */
.srg-faq-container {
    margin-bottom: 48px !important;
}

/* Standardize Single Template Typography & In-Content Links */
.srg-post-content-col {
    width: 100%;
}

.srg-post-content-col h1,
.srg-post-content-col h2,
.srg-post-content-col h3,
.srg-post-content-col h4 {
    font-family: var(--srg-font-heading);
    color: var(--srg-text-primary);
    letter-spacing: var(--srg-tracking-tight);
}

.srg-post-content-col h2 {
    font-size: var(--srg-text-2xl);
    font-weight: var(--srg-weight-bold);
    margin-top: var(--srg-space-12);
    margin-bottom: var(--srg-space-4);
    border-bottom: 0px solid var(--srg-border-secondary);
    scroll-margin-top: 100px;
}

.srg-post-content-col h3 {
    font-size: var(--srg-text-xl);
    font-weight: var(--srg-weight-semibold);
    margin-top: var(--srg-space-8);
    margin-bottom: var(--srg-space-3);
    scroll-margin-top: 100px;
}

.srg-post-content-col h4 {
    font-size: var(--srg-text-lg);
    font-weight: var(--srg-weight-semibold);
    margin-top: var(--srg-space-6);
    margin-bottom: var(--srg-space-2);
}

.srg-post-content-col p,
.srg-post-content-col li {
    font-family: var(--srg-font-body);
    margin-bottom: var(--srg-space-4);
    font-size: var(--srg-text-lg);
    line-height: var(--srg-leading-relaxed);
    color: var(--srg-text-secondary);
}

.srg-post-content-col li {
    margin-bottom: var(--srg-space-2);
}

@media (max-width: 640px) {
    .srg-post-content-col h2 {
        font-size: var(--srg-text-xl) !important;
        margin-top: var(--srg-space-8) !important;
    }
    .srg-post-content-col h3 {
        font-size: var(--srg-text-lg) !important;
    }
    .srg-post-content-col p {
        font-size: var(--srg-text-base) !important;
        line-height: 1.75 !important;
    }
}

/* Section-Aware Inline Link Coloring */
.srg-post-content-col a {
    color: var(--srg-context-accent);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--srg-context-accent) 30%, transparent) !important;
    transition: color 0.2s, text-decoration-color 0.2s;
}

.srg-post-content-col a:hover {
    color: var(--srg-context-accent-hover, var(--srg-context-accent)) !important;
    text-decoration-color: var(--srg-context-accent) !important;
}


.single-software .srg-post-metadata-wrap {
    margin-top: 10px !important;
}

.single-software h2.srg-section-title,
.single-software h2.srg-reviews-title,
.srg-post-content-col h2 {
    font-size: var(--srg-text-2xl) !important;
    font-weight: var(--srg-weight-bold) !important;
    margin-top: var(--srg-space-12) !important;
    margin-bottom: var(--srg-space-4) !important;
    border-bottom: 1px solid var(--srg-border-secondary) !important;
    scroll-margin-top: 100px !important;
}

/* ==========================================================================
   SELECTIVE H2 HEADING DECORATIONS & STRUCTURAL STRIPPING
   ========================================================================== */

/* Force context-colored bottom accent bar ONLY inside editorial content headers */
body.single .entry-content h2,
body.page .entry-content h2,
body.single-software .entry-content h2,
body.single-template .entry-content h2,
body.single-tools .entry-content h2,
.srg-faq-container h2.srg-section-title,
h2.srg-il-list-title {
    border-bottom: none !important;
    position: relative !important;
    padding-bottom: 8px !important;
}
body.single .entry-content h2::after,
body.page .entry-content h2::after,
body.single-software .entry-content h2::after,
body.single-template .entry-content h2::after,
body.single-tools .entry-content h2::after,
.srg-faq-container h2.srg-section-title::after,
h2.srg-il-list-title::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 32px !important;
    height: 1.5px !important;
    background: var(--srg-context-accent, #7C3AED) !important;
    border-radius: 1px !important;
    transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important;
    opacity: 0.8 !important;
    display: block !important;
}
body.single .entry-content h2:hover::after,
body.page .entry-content h2:hover::after,
body.single-software .entry-content h2:hover::after,
body.single-template .entry-content h2:hover::after,
body.single-tools .entry-content h2:hover::after,
.srg-faq-container h2.srg-section-title:hover::after,
h2.srg-il-list-title:hover::after {
    width: 64px !important;
    opacity: 1 !important;
}

.srg-alt-title,
.srg-alt-section-title,
#alternatives h2.srg-section-title,
#guides h2.srg-section-title,
#overview h2.srg-section-title,
#reviews h2.srg-section-title,
.single-software h2.srg-section-title,
.single-software h2.srg-reviews-title {
    border-bottom: none !important;
    background: none !important;
}

.srg-alt-title::after,
.srg-alt-section-title::after,
#alternatives h2.srg-section-title::after,
#guides h2.srg-section-title::after,
#overview h2.srg-section-title::after,
#reviews h2.srg-section-title::after,
.single-software h2.srg-section-title::after,
.single-software h2.srg-reviews-title::after {
    display: none !important;
}

.srg-faq-container h2.srg-section-title {
    border-bottom: none !important;
}
.srg-faq-container h2.srg-section-title::after {
    display: block !important;
}

html.srg-dark .entry-content h2,
html.srg-dark .srg-faq-container h2.srg-section-title,
html.srg-dark h2.srg-il-list-title {
    border-bottom: none !important;
}

/* ==========================================================================
   FAQ TITLE ICON OPTICAL ALIGNMENT
   ========================================================================== */
.srg-faq-container .srg-section-title,
.srg-faq-container h2.srg-section-title {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--srg-space-2, 8px) !important;
    justify-content: flex-start !important;
    width: 100% !important;
    text-align: left !important;
}

.srg-faq-title-icon {
    color: var(--srg-context-accent) !important;
    stroke: var(--srg-context-accent) !important;
    fill: none !important;
    width: 1.1em !important;
    height: 1.1em !important;
    vertical-align: middle !important;
    flex-shrink: 0;
}

/* ==========================================================================
   HOMEPAGE BRAND BADGE SPECIFICATIONS
   ========================================================================== */
.srg-home-section-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-radius: 99px !important;
    background: rgba(124, 58, 237, 0.08) !important;
    color: #534AB7 !important;
    border: none !important;
    transition: all var(--srg-transition-base) !important;
	gap: 5px;
}

html.srg-dark .srg-home-section-badge {
    background: rgba(124, 58, 237, 0.15) !important;
    color: #a78bfa !important;
}

.srg-badge-format-translucent {
    background: color-mix(in srgb, var(--srg-context-accent) 8%, transparent) !important;
    color: var(--srg-context-accent-text) !important;
}

.srg-eco-btn {
    color: #7C3AED !important;
}

.srg-eco-btn:hover {
    color: #6D28D9 !important;
}

/* ==========================================================================
   REVIEW AND SCHEMA HIGH-CONTRAST LABELS
   ========================================================================== */
.srg-source-g2,
.srg-source-reddit {
    background: rgba(255, 79, 0, 0.08) !important;
    color: #c2410c !important;
    font-weight: 700 !important;
}

.srg-source-trustpilot {
    background: rgba(0, 182, 122, 0.08) !important;
    color: #047857 !important;
    font-weight: 700 !important;
}

.srg-review-pros .srg-review-pc-label {
    color: #047857 !important;
    font-weight: 700 !important;
    background: rgba(4, 120, 87, 0.08) !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    display: inline-flex !important;
}

.srg-review-cons .srg-review-pc-label {
    color: #b91c1c !important;
    font-weight: 700 !important;
    background: rgba(185, 28, 28, 0.08) !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    display: inline-flex !important;
}

.srg-promo-badge {
    background: color-mix(in srgb, var(--srg-context-accent, #2563EB) 8%, transparent) !important;
    color: var(--srg-context-accent-text, #1d4ed8) !important;
    font-weight: 700 !important;
}

.srg-gallery-dot {
    position: relative !important;
    cursor: pointer !important;
}
.srg-gallery-dot::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 48px !important;
    height: 48px !important;
    transform: translate(-50%, -50%) !important;
    display: block !important;
}

/* ==========================================================================
   UNIFIED DYNAMIC ARCHIVE LAYOUT & STANDARD BUTTONS SYSTEM (v5.0 Clean Final)
   - Coordinates dynamic gradients, standard buttons, and loader animations.
   - Standardized 100% fluid layouts, free of legacy 100vw scrollbar shifts.
   ========================================================================== */

/* 1. The Full-Width Edge-to-Edge Hero Header Container */
.srg-archive-hero-block {
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    padding: 56px 0 !important;
    border-bottom: 0.5px solid #ECE7F8 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    z-index: 90 !important;
}

.srg-archive-hero-block .srg-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    margin: 0 auto !important;
}

/* 2. Dynamic Organic Gradients (Light Mode - 4.5% Opacity Tints) */
.is-software-archive {
    background: var(--srg-bg-primary, #FBFAFD) !important;
}
.is-template-archive {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.045) 0%, #ffffff 100%) !important;
}
.is-tools-archive, .is-blog-archive {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.045) 0%, #ffffff 100%) !important;
}

/* 3. Dynamic Organic Gradients (Dark Mode - 6% Opacity Tints) */
html.srg-dark .is-software-archive {
    background: var(--srg-bg-primary, #080515) !important;
    border-bottom-color: var(--srg-border-secondary) !important;
}
html.srg-dark .is-template-archive {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.06) 0%, #0F172A 100%) !important;
    border-bottom-color: rgba(5, 150, 105, 0.15) !important;
}
html.srg-dark .is-tools-archive, html.srg-dark .is-blog-archive {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.06) 0%, #0F172A 100%) !important;
    border-bottom-color: rgba(124, 58, 237, 0.15) !important;
}

/* 4. Unified Header Content Elements */
.srg-archive-header-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin-top: 16px !important;
    align-items: center !important;
}
.srg-archive-badge {
    align-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 6px 12px !important;
    border-radius: 30px !important;
    background: var(--srg-bg-primary, #ffffff) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
    color: var(--srg-brand-600, #7C3AED) !important;
}
html.srg-dark .srg-archive-badge {
    background: #0F172A !important;
    color: var(--srg-neutral-200) !important;
    box-shadow: none !important;
}
.srg-archive-title-text {
    font-size: 2.25rem !important;
    font-weight: 850 !important;
    letter-spacing: -1px !important;
    line-height: 1.1 !important;
    color: var(--srg-neutral-900, #0f172a) !important;
    margin: 0 !important;
}
html.srg-dark .srg-archive-title-text {
    color: #ffffff !important;
}
.srg-archive-description-text {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: var(--srg-neutral-600, #475569) !important;
    max-width: 600px !important;
}
html.srg-dark .srg-archive-description-text {
    color: var(--srg-neutral-400) !important;
}

.srg-archive-count {
    color: var(--srg-context-accent, #7C3AED) !important;
    font-weight: 500 !important;
    background: color-mix(in srgb, var(--srg-context-accent, #7C3AED) 8%, transparent) !important;
    padding: 2px 10px !important;
    border-radius: 6px !important; 
    margin: 0 4px !important;
    display: inline-block !important;
}

/* 5. The Unified Archive Grid Wrapper */
.srg-archive-grid-wrapper {
    width: 100% !important;
    /* background: #FBFAFD !important; */
    padding: 48px 0 !important; 
    box-sizing: border-box !important;
}
html.srg-dark .srg-archive-grid-wrapper {
    background: #0d071b !important; 
}

/* 6. Centering the Load More Button */
.srg-load-more-wrapper {
    display: flex !important;
    justify-content: center !important; 
    align-items: center !important;
    width: 100% !important;
    margin-top: 48px !important;
}

/* ==========================================================================
   UNIFIED STANDARD CORE BUTTONS SYSTEM (buttons.css Integrated)
   ========================================================================== */
.srg-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    padding: 10px 24px !important;
    border-radius: 8px !important;
    border: 1.5px solid transparent !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    font-family: inherit !important;
    gap: 8px !important;
}
.srg-btn:hover {
    transform: translateY(-2px) !important;
}
.srg-btn:active {
    transform: translateY(0) !important;
}

/* Primary Button */
.srg-btn-primary {
    background-color: var(--srg-brand-600, #7C3AED) !important;
    color: #ffffff !important;
}
.srg-btn-primary:hover {
    background-color: var(--srg-brand-700, #6d28d9) !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25) !important;
}

/* Secondary Button */
.srg-btn-secondary {
    background-color: var(--srg-bg-secondary, #f8fafc) !important;
    color: var(--srg-text-primary, #222222) !important;
    border-color: var(--srg-border-secondary, #e2e8f0) !important;
}
.srg-btn-secondary:hover {
    background-color: var(--srg-bg-tertiary, #cbd5e1) !important;
}

/* Ghost Button */
.srg-btn-ghost {
    background-color: transparent !important;
    color: var(--srg-text-secondary, #475569) !important;
}
.srg-btn-ghost:hover {
    background-color: var(--srg-bg-secondary, #f8fafc) !important;
    color: var(--srg-text-primary, #222222) !important;
}


/* 7. Modern Dynamic SVG Loading Spinner (Animate Protection) */
.srg-loading-spinner {
    display: none; 
    width: 18px !important;
    height: 18px !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    margin-left: -9px !important;
    margin-top: -9px !important;
    animation: srg-rotate 1.4s linear infinite !important;
    color: #ffffff !important; 
    z-index: 10 !important;
}

.srg-btn-secondary .srg-loading-spinner,
.srg-btn-ghost .srg-loading-spinner {
    color: var(--srg-brand-600, #7C3AED) !important;
}

.srg-loading-spinner .path {
    stroke: currentColor !important;
    stroke-linecap: round !important;
    animation: srg-dash 1.4s ease-in-out infinite !important;
}

.srg-load-more-btn.is-loading .srg-loading-spinner,
.srg-load-more-btn.loading .srg-loading-spinner {
    display: block !important;
}

@keyframes spin {
    0% { transform: rotate(0deg) !important; }
    100% { transform: rotate(360deg) !important; }
}
@keyframes srg-rotate {
    0% { transform: rotate(0deg) !important; }
    100% { transform: rotate(360deg) !important; }
}

@keyframes srg-dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}


/* ==========================================================================
   UNIFIED FLAT FILTER BAR SYSTEM — Premium Cloud-Glass Theme (v5.1 Final)
   ========================================================================== */

/* 1. Sticky Capsule Container */
.srg-filter-bar {
    position: sticky !important;
    top: var(--srg-header-height, 64px) !important; 
    z-index: 85 !important; 
    width: fit-content !important; 
    max-width: 100% !important;
    margin: 0px auto 0 !important; 
    padding-top: 25px !important;    
    padding-bottom: 10px !important; 
    padding-left: 12px !important;   
    padding-right: 12px !important;  
    box-sizing: border-box !important;
    border: none !important; 
    border-bottom: none !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 24px !important;
    overflow: visible !important;
    background: transparent !important; 
}

/* 2. Edge-to-Edge Dissolving Backdrop Hack */
.srg-filter-bar::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw !important; 
    z-index: -1 !important; 
    pointer-events: none !important;
    
    background: linear-gradient(to right, 
        transparent 0%, 
        rgba(255, 255, 255, 0.65) 20%, 
        rgba(255, 255, 255, 0.65) 80%, 
        transparent 100%) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

html.srg-dark .srg-filter-bar::before {
    background: linear-gradient(to right, 
        transparent 0%, 
        rgba(21, 18, 30, 0.65) 20%, 
        rgba(21, 18, 30, 0.65) 80%, 
        transparent 100%) !important;
}

/* 3. Scroll Box Container */
.srg-filter-buttons-scroll {
    display: flex !important;
    align-items: center !important; 
    gap: 8px !important;
    overflow: visible !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
.srg-filter-buttons-scroll::-webkit-scrollbar {
    display: none !important;
}

/* 4. Flat Pricing Filter Buttons */
.srg-filter-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 18px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important; 
    color: var(--srg-text-secondary, #475569) !important;
    background: transparent !important;
    border: none !important;
    border-radius: 30px !important; 
    outline: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.srg-filter-btn:hover {
    color: var(--srg-context-accent, #2563EB) !important;
    background: color-mix(in srgb, var(--srg-context-accent, #2563EB) 6%, transparent) !important;
}

html.srg-dark .srg-filter-btn {
    color: var(--srg-neutral-400, #94a3b8) !important;
    background: transparent !important;
}
html.srg-dark .srg-filter-btn:hover {
    color: var(--srg-context-accent, #2563EB) !important;
    background: color-mix(in srgb, var(--srg-context-accent, #2563EB) 10%, transparent) !important;
}

/* 5. Selected Active Button — Cancelled Box Shadow */
.srg-filter-btn.is-active {
    color: #ffffff !important; 
    background: var(--srg-context-accent, #2563EB) !important;
    border-color: var(--srg-context-accent, #2563EB) !important;
    box-shadow: none !important; 
    transform: translateY(-1.5px) !important;
}

html.srg-dark .srg-filter-btn.is-active {
    color: #ffffff !important;
    background: var(--srg-context-accent, #2563EB) !important;
    box-shadow: none !important;
}

.srg-filter-btn svg {
    margin-right: 4px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    stroke: currentColor !important;
}
body.rtl .srg-filter-btn svg {
    margin-right: 0 !important;
    margin-left: 4px !important;
}

/* 6. Dropdown Container & Toggle */
.srg-filter-dropdown {
    position: static !important; 
}
.srg-dropdown-toggle {
    border-radius: 30px !important;
}
.srg-dropdown-toggle span {
    display: inline-block !important;
    max-width: 140px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    vertical-align: middle !important;
}
.srg-dropdown-arrow {
    margin-left: 6px !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    width: 12px !important;
    height: 12px !important;
}
body.rtl .srg-dropdown-arrow {
    margin-left: 0 !important;
    margin-right: 6px !important;
}
.srg-filter-dropdown.is-open .srg-dropdown-arrow {
    transform: rotate(180deg) !important;
}

/* 7. Bounded Absolute Floating Dropdown Menu */
.srg-dropdown-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important; 
    box-sizing: border-box !important;
    
    max-height: 350px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    text-align: left !important;
    
    background: var(--srg-bg-elevated, #ffffff) !important;
    border: 0.5px solid color-mix(in srgb, var(--srg-context-accent, #2563EB) 10%, transparent) !important; 
    border-radius: 12px !important;
    box-shadow: 0 16px 36px -8px rgba(9, 14, 26, 0.08), 
                0 4px 10px -4px rgba(9, 14, 26, 0.02) !important;
    padding: 8px !important;

    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(0.97) translateY(-8px) !important;
    transform-origin: top right !important;
    transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease !important;
    z-index: 100 !important;
}

body.rtl .srg-dropdown-menu {
    left: 0 !important;
    right: 0 !important;
    text-align: right !important;
    transform-origin: top right !important;
}

.srg-filter-dropdown.is-open .srg-dropdown-menu {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: scale(1) translateY(0) !important;
}

html.srg-dark .srg-dropdown-menu {
    background: var(--srg-neutral-900, #0F172A) !important; 
    border: 1px solid rgba(124, 58, 237, 0.12) !important;
    box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.5) !important;
}

/* 8. Custom Dropdown Slim Scrollbar Styling */
.srg-dropdown-menu::-webkit-scrollbar {
    width: 4px !important; 
}
.srg-dropdown-menu::-webkit-scrollbar-track {
    background: transparent !important; 
}
.srg-dropdown-menu::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--srg-context-accent, #2563EB) 25%, transparent) !important; 
    border-radius: 99px !important; 
}
html.srg-dark .srg-dropdown-menu::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--srg-context-accent, #7C3AED) 35%, transparent) !important;
}

/* Dropdown Menu Items */
.srg-dropdown-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--srg-text-secondary, #475569) !important;
    border-radius: 8px !important;
    border: none !important;
    outline: none !important;
    text-decoration: none !important;
    transition: all 150ms !important;
}

.srg-dropdown-item:hover,
.srg-dropdown-item.is-active {
    background: color-mix(in srgb, var(--srg-context-accent, #2563EB) 5%, transparent) !important;
    color: var(--srg-context-accent, #2563EB) !important;
}

.srg-dropdown-item-count {
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    border-radius: 99px !important;
    background: var(--srg-bg-secondary, #f8fafc) !important;
    color: var(--srg-text-tertiary, #94a3b8) !important;
}

html.srg-dark .srg-dropdown-item-count {
    background: var(--srg-neutral-950, #020617) !important;
    color: var(--srg-neutral-400, #94a3b8) !important;
}

/* 9. Mobile Alignment (Fluid Protection) */
@media (max-width: 768px) {
    .srg-filter-bar {
        padding: 8px 20px !important; 
        justify-content: flex-start !important;
        gap: 16px !important;
    }
    .srg-dropdown-toggle span {
        max-width: 140px !important;
    }
    .srg-dropdown-menu {
        max-height: 280px !important;
        width: 100% !important; 
    }
    
    .srg-filter-buttons-scroll {
        flex-grow: 1 !important;
        overflow-x: auto !important;
        padding-bottom: 2px !important; 
    }
}
@media (max-width: 640px) {
    .srg-filter-bar {
        gap: 6px !important;
        padding-top: 25px !important;    
        padding-bottom: 10px !important; 
        padding-left: 12px !important;   
        padding-right: 12px !important;  
    }
    .srg-filter-btn {
        padding: 6px 14px !important;
        font-size: 13px !important;
    }
}

.srg-filter-dropdown,
.srg-dropdown-menu {
    z-index: 100 !important;
}
#main-content {
    position: relative !important;
    z-index: 10 !important;
}