/**
 * Expired Auctions — Custom Stylesheet
 *
 * Light/dark theme overrides, domain card styling, tag badge colors,
 * rating stars, hover effects, filter bar, and responsive adjustments.
 * Built on top of Bootstrap 5.3's native dark mode (data-bs-theme).
 *
 * @package ExpiredAuctions
 * @since   1.0.0
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Brand Colors */
    --ea-primary: #0d6efd;
    --ea-primary-rgb: 13, 110, 253;

    /* Card Accent Colors (rating-based left border) */
    --ea-rating-high: #198754;
    --ea-rating-mid: #ffc107;
    --ea-rating-low: #dc3545;

    /* Card Dimensions */
    --ea-card-border-radius: 0.5rem;
    --ea-card-accent-width: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. LIGHT THEME OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════ */

[data-bs-theme="light"] {
    --ea-body-bg: #f8f9fa;
    --ea-card-bg: #ffffff;
    --ea-card-hover-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
    --ea-card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.06);
    --ea-filter-bg: #ffffff;
    --ea-hero-bg: #f0f4f8;
    --ea-muted-text: #6c757d;
    --ea-border-color: #dee2e6;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. DARK THEME OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════ */

[data-bs-theme="dark"] {
    --ea-body-bg: #1a1a2e;
    --ea-card-bg: #16213e;
    --ea-card-hover-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35);
    --ea-card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
    --ea-filter-bg: #212529;
    --ea-hero-bg: #0f3460;
    --ea-muted-text: #adb5bd;
    --ea-border-color: #2d3748;
}

/* Reason: Override Bootstrap's bg-light in dark mode to match filter bar background */
[data-bs-theme="dark"] .bg-light {
    background-color: #212529 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. THEME TOGGLE BUTTON
   ═══════════════════════════════════════════════════════════════════════════ */

/* Reason: Show sun icon in dark mode, moon icon in light mode */
[data-bs-theme="light"] #themeIconLight {
    display: none;
}
[data-bs-theme="light"] #themeIconDark {
    display: inline;
}
[data-bs-theme="dark"] #themeIconLight {
    display: inline;
}
[data-bs-theme="dark"] #themeIconDark {
    display: none;
}

.ea-theme-toggle {
    /* Optimized: No transition for faster performance */
}
.ea-theme-toggle:hover {
    /* Optimized: No transform for faster performance */
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. NAVBAR ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

.ea-logo-icon {
    /* Optimized: No transition for faster performance */
}
.navbar-brand:hover .ea-logo-icon {
    /* Optimized: No transform for faster performance */
}

/* ─── Categories Mega Menu ──────────────────────────────────────────────── */
/* Reason: Mega menu styles moved to mega-menu.css for better organization */

/* ═══════════════════════════════════════════════════════════════════════════
   6. HERO SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

/* Default Hero Style */
.ea-hero {
    background: var(--ea-hero-bg);
    border-bottom: 1px solid var(--ea-border-color);
}

/* Flashy Hero Style — Dark-to-light blue gradient */
.ea-hero.ea-hero-flashy {
    background: linear-gradient(135deg, #1a3a8a 0%, #4facfe 100%);
    border-bottom: none;
    color: #ffffff;
    padding: 2.25rem 0 1.75rem !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(26, 58, 138, 0.25);
}

/* Reason: Subtle geometric accent for visual depth without hurting readability */
.ea-hero.ea-hero-flashy::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -10%;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.ea-hero.ea-hero-flashy::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -5%;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.04) 0%, transparent 70%);
    pointer-events: none;
}

.ea-hero.ea-hero-flashy .container {
    position: relative;
    z-index: 1;
}

.ea-hero.ea-hero-flashy h1,
.ea-hero.ea-hero-flashy .display-6 {
    color: #ffffff;
}

.ea-hero.ea-hero-flashy .lead,
.ea-hero.ea-hero-flashy .ea-hero-subtitle {
    color: rgba(255, 255, 255, 0.85);
}

.ea-hero.ea-hero-flashy .text-body-secondary {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ─── Flashy Hero Stat Chips ─────────────────────────────────────────────── */
/* Reason: Compact inline chips instead of large cards — cleaner, more modern */
.ea-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1rem;
}

.ea-hero-stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 0.35rem 0.85rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
    transition: background 0.2s ease;
    white-space: nowrap;
}

.ea-hero-stat-chip:hover {
    background: rgba(255, 255, 255, 0.14);
}

.ea-hero-stat-chip i {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

.ea-hero-stat-chip strong {
    color: #ffffff;
    font-weight: 600;
}

/* Responsive adjustments for flashy hero */
@media (max-width: 768px) {
    .ea-hero.ea-hero-flashy {
        padding: 1.75rem 0 1.25rem !important;
    }

    .ea-hero.ea-hero-flashy h1,
    .ea-hero.ea-hero-flashy .display-6 {
        font-size: 1.75rem;
    }

    .ea-hero-stats {
        gap: 0.4rem;
    }

    .ea-hero-stat-chip {
        font-size: 0.72rem;
        padding: 0.3rem 0.7rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. FILTER BAR v2 — Hybrid Pill + Dropdown Layout
   ═══════════════════════════════════════════════════════════════════════════ */

/* Reason: Filter bar uses a custom design system with two rows:
   Row 1 = search + category pills, Row 2 = dropdown filters + chips.
   All elements use CSS custom properties for consistent theming. */

:root {
    --ea-filter-pill-bg: rgba(0, 0, 0, 0.04);
    --ea-filter-pill-color: #495057;
    --ea-filter-pill-hover-bg: rgba(13, 110, 253, 0.08);
    --ea-filter-pill-hover-color: #0d6efd;
    --ea-filter-pill-active-bg: #0d6efd;
    --ea-filter-pill-active-color: #ffffff;
    --ea-filter-dropdown-bg: #ffffff;
    --ea-filter-dropdown-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    --ea-filter-dropdown-border: rgba(0, 0, 0, 0.08);
    --ea-filter-chip-bg: rgba(13, 110, 253, 0.1);
    --ea-filter-chip-color: #0d6efd;
    --ea-filter-chip-hover-bg: rgba(13, 110, 253, 0.18);
    --ea-filter-search-bg: rgba(0, 0, 0, 0.04);
    --ea-filter-search-focus-bg: #ffffff;
    --ea-filter-search-border: transparent;
    --ea-filter-search-focus-border: #0d6efd;
    --ea-filter-quick-bg: rgba(25, 135, 84, 0.08);
    --ea-filter-quick-color: #198754;
    --ea-filter-quick-active-bg: #198754;
    --ea-filter-quick-active-color: #ffffff;
}

[data-bs-theme="dark"] {
    --ea-filter-pill-bg: rgba(255, 255, 255, 0.06);
    --ea-filter-pill-color: #adb5bd;
    --ea-filter-pill-hover-bg: rgba(13, 110, 253, 0.15);
    --ea-filter-pill-hover-color: #6ea8fe;
    --ea-filter-pill-active-bg: #0d6efd;
    --ea-filter-pill-active-color: #ffffff;
    --ea-filter-dropdown-bg: #1e2a3a;
    --ea-filter-dropdown-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    --ea-filter-dropdown-border: rgba(255, 255, 255, 0.08);
    --ea-filter-chip-bg: rgba(13, 110, 253, 0.2);
    --ea-filter-chip-color: #6ea8fe;
    --ea-filter-chip-hover-bg: rgba(13, 110, 253, 0.3);
    --ea-filter-search-bg: rgba(255, 255, 255, 0.06);
    --ea-filter-search-focus-bg: #1e2a3a;
    --ea-filter-search-border: transparent;
    --ea-filter-search-focus-border: #6ea8fe;
    --ea-filter-quick-bg: rgba(25, 135, 84, 0.15);
    --ea-filter-quick-color: #75b798;
    --ea-filter-quick-active-bg: #198754;
    --ea-filter-quick-active-color: #ffffff;
}

/* ─── Filter Bar Container ─────────────────────────────────────────────── */
.ea-filter-bar {
    background: var(--ea-filter-bg);
    border-bottom: 1px solid var(--ea-border-color);
    padding: 0.75rem 0 0.625rem;
    position: relative;
    z-index: 100;
    /* Reason: Must not clip dropdown menus that extend below the bar */
    overflow: visible;
}

/* ─── Row 1: Search + Category Pills ───────────────────────────────────── */
.ea-filter-row-1 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.625rem;
}

/* ─── Search Input ─────────────────────────────────────────────────────── */
.ea-filter-search {
    flex-shrink: 0;
    width: 220px;
}

.ea-search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.ea-search-icon {
    position: absolute;
    left: 0.625rem;
    color: var(--ea-muted-text);
    font-size: 0.8rem;
    pointer-events: none;
    z-index: 1;
}

.ea-search-input {
    width: 100%;
    padding: 0.4rem 2rem 0.4rem 2rem;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--bs-body-color);
    background: var(--ea-filter-search-bg);
    border: 1.5px solid var(--ea-filter-search-border);
    border-radius: 50rem;
    outline: none;
    /* Optimized: No transition for faster performance */
}

.ea-search-input::placeholder {
    color: var(--ea-muted-text);
    font-weight: 400;
}

.ea-search-input:focus {
    background: var(--ea-filter-search-focus-bg);
    border-color: var(--ea-filter-search-focus-border);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}

.ea-search-clear {
    position: absolute;
    right: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--ea-muted-text);
    color: #fff;
    font-size: 0.6rem;
    cursor: pointer;
    opacity: 0.6;
    /* Optimized: No transition for faster performance */
}

.ea-search-clear:hover {
    opacity: 1;
}

/* ─── Category Pills ───────────────────────────────────────────────────── */
/* Reason: Scrollable pill row that never overflows the filter bar.
   Uses mask-image for smooth fade-out at scroll edges. */
.ea-category-pills {
    display: flex;
    gap: 0.375rem;
    overflow-x: auto;
    overflow-y: hidden;
    flex: 1;
    min-width: 0;
    padding: 0.125rem 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Reason: Fade edges to hint at scrollability */
    mask-image: linear-gradient(to right, transparent 0, black 8px, black calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 8px, black calc(100% - 24px), transparent 100%);
}

.ea-category-pills::-webkit-scrollbar {
    display: none;
}

/* ─── Pill Base ────────────────────────────────────────────────────────── */
/* Reason: Unified neutral pill style with strong contrast. No per-pill
   color variants — uses a single accent for active state. This ensures
   WCAG AA contrast in both light and dark themes. */
.ea-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    text-decoration: none;
    color: var(--ea-filter-pill-color);
    background: var(--ea-filter-pill-bg);
    border: 1.5px solid transparent;
    border-radius: 50rem;
    cursor: pointer;
    /* Optimized: No transition for faster performance */
    user-select: none;
    flex-shrink: 0;
}

.ea-pill i {
    font-size: 0.82rem;
    opacity: 0.7;
}

.ea-pill:hover {
    color: var(--ea-filter-pill-hover-color);
    background: var(--ea-filter-pill-hover-bg);
    border-color: transparent;
    /* Optimized: No transform for faster performance */
    text-decoration: none;
}

.ea-pill:active {
    /* Optimized: No transform for faster performance */
}

/* Reason: Active pill uses solid primary background with white text
   for maximum contrast and clear visual indication */
.ea-pill--active,
.ea-pill--active:hover {
    color: var(--ea-filter-pill-active-color);
    background: var(--ea-filter-pill-active-bg);
    border-color: var(--ea-filter-pill-active-bg);
    box-shadow: 0 2px 6px rgba(13, 110, 253, 0.3);
}

.ea-pill--active i {
    opacity: 1;
}

/* ─── Row 2: Filter Dropdowns + Active Chips ───────────────────────────── */
.ea-filter-row-2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 200;
}

/* ─── Filter Dropdowns Container ───────────────────────────────────────── */
.ea-filter-dropdowns {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 200;
}

/* ─── Quick Filter Button (Under $100) ─────────────────────────────────── */
.ea-quick-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--ea-filter-quick-color);
    background: var(--ea-filter-quick-bg);
    border: 1.5px solid transparent;
    border-radius: 50rem;
    cursor: pointer;
    /* Optimized: No transition for faster performance */
}

.ea-quick-filter:hover {
    filter: brightness(1.1);
    /* Optimized: No transform for faster performance */
}

.ea-quick-filter--active,
.ea-quick-filter--active:hover {
    color: var(--ea-filter-quick-active-color);
    background: var(--ea-filter-quick-active-bg);
    border-color: var(--ea-filter-quick-active-bg);
    box-shadow: 0 2px 6px rgba(25, 135, 84, 0.3);
}

/* ─── Dropdown Component ───────────────────────────────────────────────── */
.ea-dropdown {
    position: relative;
}

.ea-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--ea-filter-pill-color);
    background: var(--ea-filter-pill-bg);
    border: 1.5px solid transparent;
    border-radius: 0.5rem;
    cursor: pointer;
    /* Optimized: No transition for faster performance */
}

.ea-dropdown-toggle i:first-child {
    font-size: 0.8rem;
    opacity: 0.65;
}

.ea-dropdown-arrow {
    font-size: 0.6rem !important;
    opacity: 0.5 !important;
    /* Optimized: No transition for faster performance */
}

.ea-dropdown-toggle:hover {
    color: var(--ea-filter-pill-hover-color);
    background: var(--ea-filter-pill-hover-bg);
}

/* Reason: Active state when a non-default value is selected */
.ea-dropdown-toggle--active {
    color: var(--ea-filter-chip-color);
    background: var(--ea-filter-chip-bg);
    border-color: rgba(13, 110, 253, 0.2);
}

/* Reason: Open state — rotate arrow and highlight */
.ea-dropdown.ea-dropdown--open .ea-dropdown-toggle {
    color: var(--ea-filter-pill-hover-color);
    background: var(--ea-filter-pill-hover-bg);
    border-color: var(--ea-filter-search-focus-border);
}

.ea-dropdown.ea-dropdown--open .ea-dropdown-arrow {
    /* Optimized: No transform for faster performance */
}

/* ─── Dropdown Menu ────────────────────────────────────────────────────── */
.ea-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1050;
    min-width: 180px;
    max-width: 260px;
    padding: 0.35rem;
    background: var(--ea-filter-dropdown-bg);
    border: 1px solid var(--ea-filter-dropdown-border);
    border-radius: 0.625rem;
    box-shadow: var(--ea-filter-dropdown-shadow);
    opacity: 0;
    /* Optimized: No transition for faster performance */
}

.ea-dropdown.ea-dropdown--open .ea-dropdown-menu {
    display: block;
    opacity: 1;
    /* Optimized: No transform for faster performance */
}

/* Reason: Scrollable variant for long lists like tags */
.ea-dropdown-menu--scrollable {
    max-height: 280px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.ea-dropdown-menu--scrollable::-webkit-scrollbar {
    width: 4px;
}

.ea-dropdown-menu--scrollable::-webkit-scrollbar-track {
    background: transparent;
}

.ea-dropdown-menu--scrollable::-webkit-scrollbar-thumb {
    background: var(--ea-muted-text);
    border-radius: 2px;
    opacity: 0.3;
}

/* ─── Dropdown Item ────────────────────────────────────────────────────── */
.ea-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.4rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--bs-body-color);
    background: transparent;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    /* Optimized: No transition for faster performance */
    text-align: left;
}

.ea-dropdown-item i {
    font-size: 0.75rem;
    opacity: 0.6;
    flex-shrink: 0;
}

.ea-dropdown-item:hover {
    background: var(--ea-filter-pill-hover-bg);
    color: var(--ea-filter-pill-hover-color);
}

/* Reason: Selected item has check icon and accent color */
.ea-dropdown-item--selected {
    color: var(--ea-filter-chip-color);
    font-weight: 600;
    background: var(--ea-filter-chip-bg);
}

.ea-dropdown-item--selected i {
    opacity: 1;
    color: var(--ea-filter-chip-color);
}

/* ─── Active Filter Chips ──────────────────────────────────────────────── */
.ea-active-filters {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-left: auto;
}

.ea-active-filters-label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--ea-filter-chip-color);
    padding: 0.2rem 0.45rem;
    background: var(--ea-filter-chip-bg);
    border-radius: 50rem;
    line-height: 1;
}

.ea-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.25rem 0.2rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ea-filter-chip-color);
    background: var(--ea-filter-chip-bg);
    border: none;
    border-radius: 50rem;
    cursor: pointer;
    /* Optimized: No transition for faster performance */
    white-space: nowrap;
}

.ea-chip i:first-child {
    font-size: 0.65rem;
    opacity: 0.7;
}

.ea-chip:hover {
    background: var(--ea-filter-chip-hover-bg);
}

.ea-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(13, 110, 253, 0.15);
    color: var(--ea-filter-chip-color);
    font-size: 0.6rem;
    cursor: pointer;
    /* Optimized: No transition for faster performance */
    line-height: 1;
}

.ea-chip-remove:hover {
    background: rgba(220, 53, 69, 0.2);
    color: #dc3545;
}

/* Reason: Clear All chip uses a distinct danger-ish style */
.ea-chip--clear {
    padding: 0.2rem 0.5rem;
    color: var(--ea-muted-text);
    background: var(--ea-filter-pill-bg);
    font-weight: 500;
}

.ea-chip--clear:hover {
    color: #dc3545;
    background: rgba(220, 53, 69, 0.1);
}

/* ─── Mobile Count Selector ────────────────────────────────────────────── */
.ea-mobile-count {
    /* Reason: Lower z-index so dropdown menus render above this */
    position: relative;
    z-index: 1;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--ea-border-color);
}

/* ═══════════════════════════════════════════════════════════════════════════
   7b. FILTER BAR — Collapsible Panel Design (Option B)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Primary Row (Search + Sort + Filters Toggle) ─────────────────────── */
.ea-filter-primary-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ea-filter-search-collapsible {
    flex: 1;
    min-width: 200px;
}

/* ─── Filters Toggle Button ────────────────────────────────────────────── */
.ea-filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ea-filter-pill-color);
    background: var(--ea-filter-pill-bg);
    border: 1.5px solid transparent;
    border-radius: 0.5rem;
    cursor: pointer;
    /* Optimized: No transition for faster performance */
}

.ea-filters-toggle:hover {
    color: var(--ea-filter-pill-hover-color);
    background: var(--ea-filter-pill-hover-bg);
}

.ea-filters-toggle--active,
.ea-filters-toggle--active:hover {
    color: var(--ea-filter-chip-color);
    background: var(--ea-filter-chip-bg);
    border-color: rgba(13, 110, 253, 0.2);
}

.ea-toggle-arrow {
    font-size: 0.65rem;
    opacity: 0.5;
    /* Optimized: No transition for faster performance */
}

.ea-filters-toggle--active .ea-toggle-arrow {
    /* Optimized: No transform for faster performance */
}

.ea-filter-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.3rem;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: var(--ea-primary);
    border-radius: 50rem;
}

.ea-clear-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ea-muted-text);
    background: var(--ea-filter-pill-bg);
    border: 1.5px solid transparent;
    border-radius: 0.5rem;
    cursor: pointer;
    /* Optimized: No transition for faster performance */
}

.ea-clear-all-btn:hover {
    color: #dc3545;
    background: rgba(220, 53, 69, 0.1);
}

/* ─── Collapsible Filter Panel ─────────────────────────────────────────── */
.ea-filter-panel {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    /* Optimized: No transition for faster performance */
}

.ea-filter-panel--expanded {
    max-height: 800px;
    opacity: 1;
    margin-top: 0.75rem;
}

/* ─── Filter Grid (2-3 columns) ────────────────────────────────────────── */
.ea-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    padding: 1rem;
    background: var(--ea-filter-search-bg);
    border: 1px solid var(--ea-border-color);
    border-radius: 0.625rem;
}

@media (min-width: 992px) {
    .ea-filter-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1200px) {
    .ea-filter-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ─── Filter Group ─────────────────────────────────────────────────────── */
.ea-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ea-filter-group-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ea-muted-text);
    margin: 0;
}

.ea-filter-group-label i {
    font-size: 0.8rem;
    opacity: 0.7;
}

.ea-filter-group-content {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.ea-filter-group-content--scrollable {
    max-height: 120px;
    overflow-y: auto;
    scrollbar-width: thin;
}

/* ─── Filter Option Buttons ────────────────────────────────────────────── */
.ea-filter-option {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--ea-filter-pill-color);
    background: var(--ea-filter-dropdown-bg);
    border: 1.5px solid var(--ea-border-color);
    border-radius: 0.375rem;
    cursor: pointer;
    /* Optimized: No transition for faster performance */
    text-decoration: none;
}

.ea-filter-option i {
    font-size: 0.7rem;
    opacity: 0.6;
}

.ea-filter-option:hover {
    color: var(--ea-filter-pill-hover-color);
    background: var(--ea-filter-pill-hover-bg);
    border-color: var(--ea-filter-pill-hover-color);
    text-decoration: none;
}

.ea-filter-option--active,
.ea-filter-option--active:hover {
    color: var(--ea-filter-pill-active-color);
    background: var(--ea-filter-pill-active-bg);
    border-color: var(--ea-filter-pill-active-bg);
    box-shadow: 0 2px 4px rgba(13, 110, 253, 0.25);
}

.ea-filter-option--active i {
    opacity: 1;
}

/* ─── Active Filters in Panel ──────────────────────────────────────────── */
.ea-active-filters-panel {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    margin-top: 0.5rem;
    background: var(--ea-filter-dropdown-bg);
    border: 1px solid var(--ea-border-color);
    border-radius: 0.625rem;
}

.ea-active-filters-panel .ea-active-filters-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--ea-muted-text);
    margin-right: 0.25rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7c. FILTER BAR — Two-Row Stacked Design (Option A)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Row 2: Stacked Filter Groups ─────────────────────────────────────── */
.ea-filter-row-stacked {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.625rem;
    padding-top: 0.625rem;
    border-top: 1px solid var(--ea-border-color);
}

/* ─── Inline Filter Group ──────────────────────────────────────────────── */
.ea-filter-group-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ea-filter-group-label-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ea-muted-text);
    white-space: nowrap;
    flex-shrink: 0;
}

.ea-filter-group-label-inline i {
    font-size: 0.75rem;
    opacity: 0.7;
}

.ea-filter-options-inline {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    flex: 1;
}

/* ─── Filter Chip Toggle Buttons ───────────────────────────────────────── */
.ea-filter-chip-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--ea-filter-pill-color);
    background: var(--ea-filter-pill-bg);
    border: 1.5px solid var(--ea-border-color);
    border-radius: 0.375rem;
    cursor: pointer;
    /* Optimized: No transition for faster performance */
}

.ea-filter-chip-toggle:hover {
    color: var(--ea-filter-pill-hover-color);
    background: var(--ea-filter-pill-hover-bg);
    border-color: var(--ea-filter-pill-hover-color);
}

.ea-filter-chip-toggle--active,
.ea-filter-chip-toggle--active:hover {
    color: var(--ea-filter-pill-active-color);
    background: var(--ea-filter-pill-active-bg);
    border-color: var(--ea-filter-pill-active-bg);
    box-shadow: 0 2px 4px rgba(13, 110, 253, 0.25);
}

/* ─── Clear All Button (Stacked Design) ────────────────────────────────── */
.ea-clear-all-stacked {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #dc3545;
    background: rgba(220, 53, 69, 0.08);
    border: 1.5px solid rgba(220, 53, 69, 0.2);
    border-radius: 0.375rem;
    cursor: pointer;
    /* Optimized: No transition for faster performance */
    margin-left: auto;
}

.ea-clear-all-stacked:hover {
    color: #fff;
    background: #dc3545;
    border-color: #dc3545;
}

/* ─── Responsive for Stacked Design ────────────────────────────────────── */
@media (max-width: 767.98px) {
    .ea-filter-row-stacked {
        gap: 0.625rem;
    }
    .ea-filter-group-inline {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.375rem;
    }
    .ea-filter-group-label-inline {
        width: 100%;
    }
    .ea-filter-options-inline {
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   7d. FILTER BAR — Slim/Custom Design (Option D)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Slim Filter Bar Container ────────────────────────────────────────────── */
.ea-filter-bar--slim {
    padding: 0.75rem 0;
}

.ea-filter-slim-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* ─── Slim Search Input ────────────────────────────────────────────────────── */
.ea-filter-search-slim {
    flex: 0 1 auto;
    min-width: 200px;
    max-width: 300px;
}

@media (max-width: 767.98px) {
    .ea-filter-search-slim {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* ─── Slim Dropdown Buttons ────────────────────────────────────────────────── */
.ea-dropdown--slim {
    flex: 0 0 auto;
}

.ea-dropdown--slim .ea-dropdown-toggle {
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

.ea-dropdown--slim .ea-dropdown-label {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── Slim Filter Badge ────────────────────────────────────────────────────── */
.ea-slim-filter-badge {
    flex: 0 0 auto;
    margin-left: auto;
}

.ea-slim-filter-badge .badge {
    font-size: 0.75rem;
    padding: 0.35rem 0.6rem;
}

/* ─── Slim Active Filters (Inline on same row) ─────────────────────────────── */
.ea-active-filters-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    flex: 0 1 auto;
}

/* ─── Slim Filter Icon Colors ──────────────────────────────────────────────── */
/* Search icon - Blue */
.ea-filter-search-slim .bi-search {
    color: #0d6efd;
}

/* Price icon - Green */
.ea-dropdown--slim[data-filter="price"] .bi-cash-stack {
    color: #198754;
}

/* Extension/TLD icon - Purple */
.ea-dropdown--slim[data-filter="tld"] .bi-globe {
    color: #6f42c1;
}

/* Niche icon - Orange */
.ea-dropdown--slim[data-filter="niche"] .bi-briefcase {
    color: #fd7e14;
}

/* Tags icon - Pink */
.ea-dropdown--slim[data-filter="tag"] .bi-tags {
    color: #d63384;
}

/* Source icon - Teal */
.ea-dropdown--slim[data-filter="source"] .bi-building {
    color: #20c997;
}

/* Sort icon - Indigo */
.ea-dropdown--slim[data-filter="sort"] .bi-sort-down {
    color: #6610f2;
}

/* ─── Disable Icon Colors (when setting is off) ────────────────────────────── */
/* Reason: Override all icon colors to inherit default text color when icon color setting is disabled */
.ea-filter-bar--no-icon-color .ea-filter-search-slim .bi-search,
.ea-filter-bar--no-icon-color .ea-dropdown--slim[data-filter="price"] .bi-cash-stack,
.ea-filter-bar--no-icon-color .ea-dropdown--slim[data-filter="tld"] .bi-globe,
.ea-filter-bar--no-icon-color .ea-dropdown--slim[data-filter="niche"] .bi-briefcase,
.ea-filter-bar--no-icon-color .ea-dropdown--slim[data-filter="tag"] .bi-tags,
.ea-filter-bar--no-icon-color .ea-dropdown--slim[data-filter="source"] .bi-building,
.ea-filter-bar--no-icon-color .ea-dropdown--slim[data-filter="sort"] .bi-sort-down {
    color: inherit;
}

/* ─── Responsive Adjustments ───────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .ea-filter-slim-row {
        gap: 0.4rem;
    }
    
    .ea-dropdown--slim .ea-dropdown-toggle {
        padding: 0.35rem 0.65rem;
        font-size: 0.8rem;
    }
    
    .ea-dropdown--slim .ea-dropdown-label {
        max-width: 100px;
    }
}

@media (max-width: 575.98px) {
    .ea-filter-bar--slim {
        padding: 0.5rem 0;
    }
    
    .ea-filter-slim-row {
        gap: 0.35rem;
    }
    
    .ea-dropdown--slim .ea-dropdown-toggle {
        padding: 0.3rem 0.5rem;
        font-size: 0.75rem;
    }
    
    .ea-dropdown--slim .ea-dropdown-toggle i:first-child {
        font-size: 0.85rem;
    }
    
    .ea-dropdown--slim .ea-dropdown-label {
        max-width: 80px;
    }
    
    .ea-dropdown--slim .ea-dropdown-arrow {
        font-size: 0.6rem;
    }
    
    .ea-slim-filter-badge {
        margin-left: 0;
        flex: 1 1 100%;
        text-align: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. DOMAIN CARD — GRID VIEW
   ═══════════════════════════════════════════════════════════════════════════ */

/* Reason: Wrapper link for clickable preview cards */
.ea-domain-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.2s ease;
}

.ea-domain-card-link:hover {
    text-decoration: none;
    color: inherit;
}

.ea-domain-card-link:hover .ea-domain-card {
    box-shadow: var(--ea-card-hover-shadow);
    transform: translateY(-2px);
}

.ea-domain-card {
    background: var(--ea-card-bg);
    border: 1px solid var(--ea-border-color);
    border-radius: var(--ea-card-border-radius);
    border-left: var(--ea-card-accent-width) solid var(--ea-rating-mid);
    box-shadow: var(--ea-card-shadow);
    /* Optimized: Removed transition, will-change for performance */
    overflow: hidden;
    position: relative;
}

/* Reason: Left border color reflects domain rating quality */
.ea-domain-card[data-rating-tier="high"] {
    border-left-color: var(--ea-rating-high);
}
.ea-domain-card[data-rating-tier="mid"] {
    border-left-color: var(--ea-rating-mid);
}
.ea-domain-card[data-rating-tier="low"] {
    border-left-color: var(--ea-rating-low);
}

/* Hover: Slight elevation increase */
.ea-domain-card:hover {
    box-shadow: var(--ea-card-hover-shadow);
    /* Optimized: Added subtle translate for Grid view hover effect */
    transform: translateY(-2px);
}

/* Card Header (source logo + countdown) */
.ea-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem 0;
    font-size: 0.8rem;
}

.ea-source-badge {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
}
.ea-source-badge.godaddy {
    background-color: rgba(0, 169, 224, 0.15);
    color: #00a9e0;
}
.ea-source-badge.namecheap {
    background-color: rgba(222, 81, 0, 0.15);
    color: #de5100;
}
.ea-source-badge.dynadot {
    background-color: rgba(0, 128, 0, 0.15);
    color: #008000;
}

/* Countdown Timer */
.ea-countdown {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ea-muted-text);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}
.ea-countdown.ea-ending-soon {
    color: var(--ea-rating-low);
    /* Optimized: Removed animation for faster performance */
}

@keyframes ea-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Card Body */
.ea-card-body {
    padding: 0.75rem 1rem;
}

/* Domain Name */
.ea-domain-name {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--bs-body-color);
    text-decoration: none;
    display: block;
    margin-bottom: 0.25rem;
    word-break: break-all;
    /* Optimized: No transition for faster performance */
}
.ea-domain-name:hover {
    color: var(--ea-primary);
}

/* Rating Display */
.ea-rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.ea-stars {
    display: inline-flex;
    gap: 1px;
    font-size: 0.85rem;
}
.ea-stars .bi-star-fill {
    color: #ffc107;
}
.ea-stars .bi-star-half {
    color: #ffc107;
}
.ea-stars .bi-star {
    color: var(--ea-muted-text);
    opacity: 0.4;
}

.ea-rating-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 0.25rem;
    line-height: 1;
}
.ea-rating-badge.high {
    background-color: rgba(25, 135, 84, 0.15);
    color: #198754;
}
.ea-rating-badge.mid {
    background-color: rgba(255, 193, 7, 0.15);
    color: #997404;
}
.ea-rating-badge.low {
    background-color: rgba(220, 53, 69, 0.15);
    color: #dc3545;
}

/* Dark mode rating badge adjustments */
[data-bs-theme="dark"] .ea-rating-badge.high {
    background-color: rgba(25, 135, 84, 0.25);
    color: #75b798;
}
[data-bs-theme="dark"] .ea-rating-badge.mid {
    background-color: rgba(255, 193, 7, 0.25);
    color: #ffda6a;
}
[data-bs-theme="dark"] .ea-rating-badge.low {
    background-color: rgba(220, 53, 69, 0.25);
    color: #ea868f;
}

/* Metrics Grid */
.ea-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
    font-size: 0.8rem;
}

.ea-metric {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--ea-muted-text);
}
.ea-metric i {
    font-size: 0.85rem;
    width: 1rem;
    text-align: center;
    flex-shrink: 0;
}
.ea-metric-value {
    font-weight: 600;
    color: var(--bs-body-color);
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. TAG BADGES
   ═══════════════════════════════════════════════════════════════════════════ */

.ea-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.ea-tag {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.15rem 0.45rem;
    border-radius: 50rem;
    text-decoration: none;
    /* Optimized: No transition for faster performance */
    line-height: 1.3;
}
.ea-tag:hover {
    /* Optimized: No transform for faster performance */
    filter: brightness(1.1);
}

/* Tag Color Variants — matching PLANNING.md section 3.3 */
.ea-tag-gold {
    background: linear-gradient(135deg, #ffd700, #ffb300);
    color: #5c4a00;
}
.ea-tag-silver {
    background: linear-gradient(135deg, #c0c0c0, #a8a8a8);
    color: #3d3d3d;
}
.ea-tag-red {
    background-color: rgba(220, 53, 69, 0.15);
    color: #dc3545;
}
.ea-tag-purple {
    background-color: rgba(111, 66, 193, 0.15);
    color: #6f42c1;
}
.ea-tag-green {
    background-color: rgba(25, 135, 84, 0.15);
    color: #198754;
}
.ea-tag-blue {
    background-color: rgba(13, 110, 253, 0.15);
    color: #0d6efd;
}
.ea-tag-teal {
    background-color: rgba(32, 201, 151, 0.15);
    color: #20c997;
}
.ea-tag-orange {
    background-color: rgba(253, 126, 20, 0.15);
    color: #fd7e14;
}
.ea-tag-pink {
    background-color: rgba(214, 51, 132, 0.15);
    color: #d63384;
}
.ea-tag-dark-blue {
    background-color: rgba(13, 110, 253, 0.2);
    color: #084298;
}
.ea-tag-cyan {
    background-color: rgba(13, 202, 240, 0.15);
    color: #0dcaf0;
}
.ea-tag-gradient-blue {
    background: linear-gradient(135deg, #0d6efd, #6610f2);
    color: #ffffff;
}
.ea-tag-yellow {
    background-color: rgba(255, 193, 7, 0.2);
    color: #997404;
}
.ea-tag-brown {
    background-color: rgba(139, 69, 19, 0.15);
    color: #8b4513;
}
.ea-tag-gold-outline {
    background: transparent;
    border: 1.5px solid #ffd700;
    color: #b8860b;
}

/* Dark mode tag adjustments */
[data-bs-theme="dark"] .ea-tag-red {
    background-color: rgba(220, 53, 69, 0.25);
    color: #ea868f;
}
[data-bs-theme="dark"] .ea-tag-purple {
    background-color: rgba(111, 66, 193, 0.25);
    color: #a98eda;
}
[data-bs-theme="dark"] .ea-tag-green {
    background-color: rgba(25, 135, 84, 0.25);
    color: #75b798;
}
[data-bs-theme="dark"] .ea-tag-blue {
    background-color: rgba(13, 110, 253, 0.25);
    color: #6ea8fe;
}
[data-bs-theme="dark"] .ea-tag-teal {
    background-color: rgba(32, 201, 151, 0.25);
    color: #79dfc1;
}
[data-bs-theme="dark"] .ea-tag-orange {
    background-color: rgba(253, 126, 20, 0.25);
    color: #feb272;
}
[data-bs-theme="dark"] .ea-tag-pink {
    background-color: rgba(214, 51, 132, 0.25);
    color: #e685b5;
}
[data-bs-theme="dark"] .ea-tag-dark-blue {
    background-color: rgba(13, 110, 253, 0.3);
    color: #6ea8fe;
}
[data-bs-theme="dark"] .ea-tag-cyan {
    background-color: rgba(13, 202, 240, 0.25);
    color: #6edff6;
}
[data-bs-theme="dark"] .ea-tag-yellow {
    background-color: rgba(255, 193, 7, 0.25);
    color: #ffda6a;
}
[data-bs-theme="dark"] .ea-tag-brown {
    background-color: rgba(139, 69, 19, 0.25);
    color: #c4956a;
}
[data-bs-theme="dark"] .ea-tag-gold-outline {
    border-color: #ffd700;
    color: #ffd700;
}

/* "+N more" tag overflow indicator */
.ea-tag-more {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.15rem 0.45rem;
    border-radius: 50rem;
    background-color: var(--ea-border-color);
    color: var(--ea-muted-text);
    cursor: pointer;
    /* Optimized: No transition for faster performance */
}
.ea-tag-more:hover {
    background-color: var(--ea-primary);
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. CARD ACTIONS (Buttons)
   ═══════════════════════════════════════════════════════════════════════════ */

.ea-card-actions {
    display: flex;
    gap: 0.5rem;
    padding: 0 1rem 0.75rem;
}

.ea-card-actions .btn {
    flex: 1;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.4rem 0.5rem;
    border-radius: 0.375rem;
    /* Optimized: No transition for faster performance */
}
.ea-card-actions .btn:hover {
    /* Optimized: No transform for faster performance */
}

.ea-btn-details {
    background-color: transparent;
    border: 1.5px solid var(--ea-border-color);
    color: var(--bs-body-color);
}
.ea-btn-details:hover {
    border-color: var(--ea-primary);
    color: var(--ea-primary);
    background-color: rgba(var(--ea-primary-rgb), 0.05);
}

.ea-btn-bid {
    background: linear-gradient(135deg, var(--ea-primary), #0b5ed7);
    border: none;
    color: #ffffff;
}
.ea-btn-bid:hover {
    background: linear-gradient(135deg, #0b5ed7, #0a58ca);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(var(--ea-primary-rgb), 0.35);
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. DOMAIN GRID LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */

.ea-domain-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

/* Responsive grid: 1 → 2 → 3 → 4 columns */
@media (min-width: 576px) {
    .ea-domain-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 992px) {
    .ea-domain-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 1200px) {
    .ea-domain-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. LIST VIEW ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

.ea-list-view {
    display: none;
}
.ea-grid-view {
    display: block;
}

/* Reason: Prevent FOUC (Flash of Unstyled Content) by hiding table until DataTables initializes */
.ea-list-view table:not(.initialized) {
    opacity: 0;
}

.ea-list-view table.initialized {
    opacity: 1;
    transition: opacity 0.2s ease-in;
}

/* Reason: Toggle visibility based on active view mode */
body[data-view="list"] .ea-list-view {
    display: block;
}
body[data-view="list"] .ea-grid-view {
    display: none;
}
body[data-view="grid"] .ea-list-view {
    display: none;
}
body[data-view="grid"] .ea-grid-view {
    display: block;
}

/* Domain link in list view */
.ea-list-domain-link {
    color: var(--bs-body-color);
    /* Optimized: No transition for faster performance */
    letter-spacing: -0.01em;
}
.ea-list-domain-link:hover {
    color: var(--ea-primary);
}

/* DataTables row hover - Optimized: No transition for faster performance */
.ea-list-view table tbody tr:hover {
    background-color: rgba(var(--ea-primary-rgb), 0.04) !important;
}

/* DataTables Bootstrap 5 integration overrides */
.ea-list-view .dataTables_wrapper .dataTables_filter input {
    border-radius: 0.375rem;
    border: 1px solid var(--ea-border-color);
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}
.ea-list-view .dataTables_wrapper .dataTables_info {
    font-size: 0.8rem;
    color: var(--ea-muted-text);
    padding-top: 0;
}
.ea-list-view .dataTables_wrapper .dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0;
}

/* Reason: Ensure DataTables sort icons align with Bootstrap 5 theme */
.ea-list-view table.dataTable thead th {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ea-muted-text);
    border-bottom: 2px solid var(--ea-border-color);
    white-space: nowrap;
}
.ea-list-view table.dataTable tbody td {
    font-size: 0.85rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--ea-border-color);
}

/* Reason: Compact table cells for dense data display */
.ea-list-view table.dataTable td,
.ea-list-view table.dataTable th {
    padding: 0.5rem 0.5rem;
}

/* Reason: Ensure last column (Actions) has extra padding to prevent cutoff */
.ea-list-view table.dataTable td:last-child,
.ea-list-view table.dataTable th:last-child {
    padding-right: 1rem;
}

/* Dark mode DataTables adjustments */
[data-bs-theme="dark"] .ea-list-view .dataTables_wrapper .dataTables_filter input {
    background-color: var(--ea-card-bg);
    color: var(--bs-body-color);
    border-color: var(--ea-border-color);
}
[data-bs-theme="dark"] .ea-list-view table.dataTable thead th {
    border-bottom-color: var(--ea-border-color);
}
[data-bs-theme="dark"] .ea-list-view table.dataTable tbody td {
    border-bottom-color: var(--ea-border-color);
}

/* Reason: Override table-light to table-dark styling in dark mode for better contrast */
[data-bs-theme="dark"] .ea-list-view .table-light {
    --bs-table-bg: #212529;
    --bs-table-color: #f8f9fa;
    --bs-table-border-color: var(--ea-border-color);
    background-color: var(--bs-table-bg);
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

/* ═══════════════════════════════════════════════════════════════════════════
   12b. LIST VIEW RESPONSIVE — Column Hiding Priority
   ═══════════════════════════════════════════════════════════════════════════ */

/* Reason: Hide columns progressively as viewport narrows.
   Priority order: TLD → Age → Source → Rating → Bids → Time Left
   Always show: Rank, Domain, Bid, Actions */

/* Hide TLD first (at 1200px) */
@media (max-width: 1199.98px) {
    .ea-list-view table th:nth-child(7),
    .ea-list-view table td:nth-child(7) {
        display: none;
    }
}

/* Hide Age second (at 1100px) */
@media (max-width: 1099.98px) {
    .ea-list-view table th:nth-child(8),
    .ea-list-view table td:nth-child(8) {
        display: none;
    }
}

/* Hide Source third (at 992px) */
@media (max-width: 991.98px) {
    .ea-list-view table th:nth-child(4),
    .ea-list-view table td:nth-child(4) {
        display: none;
    }
}

/* Hide Rating fourth (at 768px) */
@media (max-width: 767.98px) {
    .ea-list-view table th:nth-child(3),
    .ea-list-view table td:nth-child(3) {
        display: none;
    }
}

/* Hide Bids fifth (at 640px) */
@media (max-width: 639.98px) {
    .ea-list-view table th:nth-child(6),
    .ea-list-view table td:nth-child(6) {
        display: none;
    }
}

/* Hide Time Left sixth (at 576px) */
@media (max-width: 575.98px) {
    .ea-list-view table th:nth-child(9),
    .ea-list-view table td:nth-child(9) {
        display: none;
    }
}

/* Reason: On very small screens, make remaining columns more compact */
@media (max-width: 575.98px) {
    .ea-list-view table th:nth-child(1),
    .ea-list-view table td:nth-child(1) {
        width: 35px !important;
        font-size: 0.7rem;
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }
    
    .ea-list-view table th:nth-child(2),
    .ea-list-view table td:nth-child(2) {
        font-size: 0.75rem;
        padding-left: 0.35rem !important;
        padding-right: 0.35rem !important;
    }
    
    .ea-list-view table th:nth-child(5),
    .ea-list-view table td:nth-child(5) {
        font-size: 0.75rem;
        width: 70px !important;
        padding-left: 0.35rem !important;
        padding-right: 0.35rem !important;
    }
    
    /* Reason: Hide "ACTIONS" header text on mobile to save space, keep column functional */
    .ea-list-view table th:nth-child(10) {
        width: 75px !important;
        padding-left: 0.25rem !important;
        padding-right: 0.5rem !important;
        font-size: 0 !important;
        line-height: 0 !important;
    }
    
    .ea-list-view table td:nth-child(10) {
        width: 75px !important;
        padding-left: 0.25rem !important;
        padding-right: 0.5rem !important;
    }
    
    .ea-list-view .ea-btn-bid {
        font-size: 0.65rem !important;
        padding: 0.25rem 0.4rem !important;
    }
    
    /* Reduce overall table cell padding on mobile */
    .ea-list-view table.dataTable td,
    .ea-list-view table.dataTable th {
        padding: 0.4rem 0.3rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   13. FOOTER ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

.ea-footer-link {
    /* Optimized: No transition for faster performance */
}
.ea-footer-link:hover {
    color: var(--ea-primary) !important;
}

.ea-newsletter-form .btn {
    /* Optimized: No transition for faster performance */
}
.ea-newsletter-form .btn:hover {
    /* Optimized: No transform for faster performance */
}

/* ═══════════════════════════════════════════════════════════════════════════
   14. RANK BADGE (Top 10 / Top 25 indicator on cards)
   ═══════════════════════════════════════════════════════════════════════════ */

.ea-rank-badge {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 0 var(--ea-card-border-radius) 0 0.5rem;
    line-height: 1;
}
.ea-rank-badge.top-10 {
    background: linear-gradient(135deg, #ffd700, #ffb300);
    color: #5c4a00;
}
.ea-rank-badge.top-25 {
    background: linear-gradient(135deg, #c0c0c0, #a8a8a8);
    color: #3d3d3d;
}

/* ═══════════════════════════════════════════════════════════════════════════
   15. UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Optimized: Removed card entrance animations for faster initial render */

/* Truncate text with ellipsis */
.ea-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   16. RESPONSIVE ADJUSTMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Smaller card text on mobile */
@media (max-width: 575.98px) {
    .ea-domain-name {
        font-size: 0.95rem;
    }
    .ea-metrics {
        font-size: 0.75rem;
    }
    .ea-card-actions .btn {
        font-size: 0.72rem;
        padding: 0.35rem 0.4rem;
    }
    .ea-tag {
        font-size: 0.6rem;
    }
}

/* ─── Filter Bar v2 Responsive ─────────────────────────────────────────── */

/* Reason: On tablets, stack Row 1 vertically so search takes full width
   and pills scroll below it. Dropdowns wrap to multiple rows. */
@media (max-width: 991.98px) {
    .ea-filter-row-1 {
        flex-direction: column;
        gap: 0.5rem;
    }
    .ea-filter-search {
        width: 100%;
    }
    .ea-category-pills {
        width: 100%;
    }
    .ea-filter-row-2 {
        flex-direction: column;
        align-items: flex-start;
    }
    /* Reason: On tablets, allow dropdowns to wrap instead of scroll,
       because overflow-x: auto clips the dropdown menus */
    .ea-filter-dropdowns {
        width: 100%;
        flex-wrap: wrap;
        padding-bottom: 0.25rem;
    }
    .ea-active-filters {
        margin-left: 0;
        width: 100%;
    }
}

/* Reason: On mobile, make dropdowns slightly smaller and ensure
   the filter bar remains compact */
@media (max-width: 575.98px) {
    .ea-filter-bar {
        padding: 0.5rem 0 0.375rem;
    }
    .ea-filter-row-1 {
        margin-bottom: 0.375rem;
    }
    .ea-pill {
        padding: 0.25rem 0.55rem;
        font-size: 0.72rem;
    }
    .ea-pill i {
        font-size: 0.75rem;
    }
    .ea-dropdown-toggle {
        padding: 0.25rem 0.45rem;
        font-size: 0.7rem;
    }
    .ea-quick-filter {
        padding: 0.25rem 0.5rem;
        font-size: 0.7rem;
    }
    .ea-search-input {
        font-size: 0.75rem;
        padding: 0.35rem 1.75rem 0.35rem 1.75rem;
    }
    .ea-chip {
        font-size: 0.65rem;
    }
    .ea-dropdown-menu {
        min-width: 160px;
        /* Reason: On very small screens, anchor dropdown to left edge of container */
        left: 0;
        right: auto;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   17. ARCHIVE & FILTERED PAGE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Archive Header — Date navigation with prev/next arrows */
.ea-archive-header {
    position: relative;
}

.ea-archive-header .btn-outline-secondary {
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Optimized: No transition for faster performance */
}

.ea-archive-header .btn-outline-secondary:hover:not(:disabled) {
    /* Optimized: No transform for faster performance */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Calendar date picker styling */
#archiveDatePicker {
    border-radius: 0.5rem;
    border: 1px solid var(--bs-border-color);
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    /* Optimized: No transition for faster performance */
}

#archiveDatePicker:hover {
    border-color: var(--ea-primary);
}

#archiveDatePicker:focus {
    border-color: var(--ea-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--ea-primary-rgb), 0.25);
}

/* Filtered Header — Category/Tag page header */
.ea-filtered-header {
    position: relative;
}

.ea-filtered-header .badge {
    font-size: 1.25rem;
}

/* Purple badge (not in Bootstrap by default) */
.bg-purple {
    background-color: #6f42c1 !important;
    color: #fff;
}

/* Pink badge (not in Bootstrap by default) */
.bg-pink {
    background-color: #d63384 !important;
    color: #fff;
}

/* Archive ended status in cards */
.ea-domain-card .ea-countdown.ended {
    color: var(--ea-rating-low);
    font-weight: 600;
}

/* Responsive adjustments for archive navigation */
@media (max-width: 575.98px) {
    .ea-archive-header .btn-outline-secondary {
        width: 40px;
        height: 40px;
    }

    .ea-archive-header h1 {
        font-size: 1.25rem !important;
    }

    .ea-archive-header h2 {
        font-size: 1rem !important;
    }

    .ea-filtered-header h1 {
        font-size: 1.25rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   18. ACCESSIBILITY — Focus Indicators, Keyboard Navigation, Contrast
   ═══════════════════════════════════════════════════════════════════════════ */

/* Reason: High-visibility focus ring for keyboard navigation (WCAG 2.1 AA) */
*:focus-visible {
    outline: 3px solid var(--ea-primary, #0d6efd);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Reason: Remove default outline only when using mouse (not keyboard) */
*:focus:not(:focus-visible) {
    outline: none;
}

/* Reason: Ensure skip-to-content link is visible when focused */
.visually-hidden-focusable:focus {
    z-index: 9999;
    background: var(--ea-primary, #0d6efd);
    color: #fff;
    padding: 0.5rem 1rem;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0.25rem;
}

/* Reason: Enhanced focus for interactive card elements */
.ea-domain-card:focus-within {
    box-shadow: 0 0 0 3px rgba(var(--ea-primary-rgb, 13, 110, 253), 0.25);
}

/* Reason: Focus styles for buttons and links in navbar */
.navbar .btn:focus-visible,
.navbar .nav-link:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--ea-primary-rgb, 13, 110, 253), 0.35);
}

/* Reason: Ensure footer links have visible focus */
.ea-footer-link:focus-visible {
    text-decoration: underline;
    outline-offset: 4px;
}

/* Reason: Ensure sufficient contrast for muted text in both themes */
[data-bs-theme="light"] .text-body-secondary {
    color: #495057 !important; /* Contrast ratio ≥ 4.5:1 on white */
}

[data-bs-theme="dark"] .text-body-secondary {
    color: #adb5bd !important; /* Contrast ratio ≥ 4.5:1 on dark bg */
}

/* Reason: Ensure rating badge text has sufficient contrast */
.ea-rating-badge {
    font-weight: 700;
}

/* Reason: Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        /* Optimized: Already respecting reduced motion preference */
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   19. FOOTER NEWSLETTER BOX — Enhanced Newsletter Signup
   ═══════════════════════════════════════════════════════════════════════════ */

/* Reason: Make newsletter signup stand out with subtle background and border */
.ea-newsletter-box {
    background: linear-gradient(135deg, rgba(var(--ea-primary-rgb, 13, 110, 253), 0.03) 0%, rgba(var(--ea-primary-rgb, 13, 110, 253), 0.08) 100%);
    border-color: rgba(var(--ea-primary-rgb, 13, 110, 253), 0.2) !important;
    /* Optimized: No transition for faster performance */
}

.ea-newsletter-box:hover {
    background: linear-gradient(135deg, rgba(var(--ea-primary-rgb, 13, 110, 253), 0.05) 0%, rgba(var(--ea-primary-rgb, 13, 110, 253), 0.12) 100%);
    border-color: rgba(var(--ea-primary-rgb, 13, 110, 253), 0.3) !important;
    box-shadow: 0 4px 12px rgba(var(--ea-primary-rgb, 13, 110, 253), 0.1);
}

/* Reason: Icon styling for newsletter box */
.ea-newsletter-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--ea-primary, #0d6efd);
    color: white;
    border-radius: 50%;
    font-size: 0.875rem;
}

/* Reason: Enhanced newsletter form styling */
.ea-newsletter-form .form-control {
    border-color: rgba(var(--ea-primary-rgb, 13, 110, 253), 0.3);
}

.ea-newsletter-form .form-control:focus {
    border-color: var(--ea-primary, #0d6efd);
    box-shadow: 0 0 0 0.2rem rgba(var(--ea-primary-rgb, 13, 110, 253), 0.15);
}

.ea-newsletter-form .btn-primary {
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(var(--ea-primary-rgb, 13, 110, 253), 0.2);
}

.ea-newsletter-form .btn-primary:hover {
    /* Optimized: No transform for faster performance */
    box-shadow: 0 4px 8px rgba(var(--ea-primary-rgb, 13, 110, 253), 0.3);
}

/* Reason: Dark theme adjustments for newsletter box */
[data-bs-theme="dark"] .ea-newsletter-box {
    background: linear-gradient(135deg, rgba(var(--ea-primary-rgb, 13, 110, 253), 0.08) 0%, rgba(var(--ea-primary-rgb, 13, 110, 253), 0.15) 100%);
    border-color: rgba(var(--ea-primary-rgb, 13, 110, 253), 0.3) !important;
}

[data-bs-theme="dark"] .ea-newsletter-box:hover {
    background: linear-gradient(135deg, rgba(var(--ea-primary-rgb, 13, 110, 253), 0.12) 0%, rgba(var(--ea-primary-rgb, 13, 110, 253), 0.2) 100%);
    border-color: rgba(var(--ea-primary-rgb, 13, 110, 253), 0.4) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   20. SOCIAL MEDIA BUTTONS — X (Twitter) Follow Button
   ═══════════════════════════════════════════════════════════════════════════ */

/* Reason: Style the Follow Us on X button with official X branding */
.ea-social-x-button {
    margin-top: 1rem;
}

.ea-x-follow-btn {
    background-color: #000000;
    border-color: #000000;
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 9999px; /* Fully rounded pill shape */
    /* Optimized: No transition for faster performance */
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.ea-x-follow-btn:hover {
    background-color: #1a1a1a;
    border-color: #1a1a1a;
    color: #ffffff;
    /* Optimized: No transform for faster performance */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.ea-x-follow-btn:active {
    /* Optimized: No transform for faster performance */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.ea-x-follow-btn:focus-visible {
    outline: 3px solid rgba(0, 0, 0, 0.5);
    outline-offset: 2px;
}

/* Reason: Ensure X logo SVG scales properly */
.ea-x-follow-btn svg {
    flex-shrink: 0;
}

/* Reason: Dark theme adjustments for X button */
[data-bs-theme="dark"] .ea-x-follow-btn {
    background-color: #ffffff;
    border-color: #ffffff;
    color: #000000;
}

[data-bs-theme="dark"] .ea-x-follow-btn:hover {
    background-color: #e6e6e6;
    border-color: #e6e6e6;
    color: #000000;
}

[data-bs-theme="dark"] .ea-x-follow-btn:focus-visible {
    outline-color: rgba(255, 255, 255, 0.5);
}

/* Reason: Responsive adjustments for mobile */
@media (max-width: 576px) {
    .ea-x-follow-btn {
        font-size: 0.8125rem;
        padding: 0.4rem 0.875rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   21. DOMAIN DETAIL PAGE — Share Buttons & Mobile Layout
   ═══════════════════════════════════════════════════════════════════════════ */

/* Reason: Ensure email share button is visible in dark mode with white outline and icon */
[data-bs-theme="dark"] .ea-share-btn.btn-outline-dark {
    border-color: #ffffff;
    color: #ffffff;
}

[data-bs-theme="dark"] .ea-share-btn.btn-outline-dark:hover {
    background-color: #ffffff;
    border-color: #ffffff;
    color: #000000;
}

/* Reason: Hide mobile similar domains on desktop, show desktop version in sidebar */
.ea-similar-domains-mobile {
    display: none;
}

.ea-similar-domains-desktop {
    display: block;
}

/* Reason: Mobile layout reordering - action card after header, similar domains after rating breakdown */
@media (max-width: 991.98px) {
    /* Hide desktop similar domains, show mobile version */
    .ea-similar-domains-desktop {
        display: none;
    }
    
    .ea-similar-domains-mobile {
        display: block;
    }
    
    /* Make the two-column row use flexbox for reordering */
    .ea-detail-two-column {
        display: flex;
        flex-direction: column;
    }
    
    /* Left column (details) - order 2 */
    .ea-detail-left-col {
        order: 2;
    }
    
    /* Right column (action card) - order 1 to appear first on mobile */
    .ea-detail-right-col {
        order: 1;
        margin-bottom: 1.5rem;
    }
    
    /* Remove sticky positioning on mobile */
    .ea-action-card {
        position: static !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   22. PRINT STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

@media print {
    .ea-filter-bar,
    .ea-theme-toggle,
    .ea-view-toggle,
    .ea-card-actions,
    .ea-newsletter-form,
    .navbar,
    footer {
        display: none !important;
    }
    .ea-domain-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ccc;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BACK TO TOP BUTTON
   ═══════════════════════════════════════════════════════════════════════════ */

/* Reason: Fixed position button in bottom right corner with smooth transitions */
.ea-back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--bs-primary);
    color: #ffffff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(1rem);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background-color 0.2s ease;
}

/* Reason: Show button when visible class is added */
.ea-back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Reason: Hover effect for better UX - only when visible */
.ea-back-to-top.visible:hover {
    background-color: #0b5ed7;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
    transform: translateY(-0.125rem);
}

/* Reason: Active/pressed state - only when visible */
.ea-back-to-top.visible:active {
    transform: translateY(0);
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
}

/* Reason: Focus state for accessibility */
.ea-back-to-top:focus {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Reason: Dark theme adjustments */
[data-bs-theme="dark"] .ea-back-to-top {
    background-color: var(--bs-primary);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] .ea-back-to-top:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
}

/* Reason: Responsive adjustments for mobile devices */
@media (max-width: 768px) {
    .ea-back-to-top {
        bottom: 1.5rem;
        right: 1.5rem;
        width: 2.75rem;
        height: 2.75rem;
        font-size: 1.5rem;
    }
}

/* Reason: Smaller size for very small screens */
@media (max-width: 480px) {
    .ea-back-to-top {
        bottom: 1rem;
        right: 1rem;
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.25rem;
    }
}

/* Reason: Prevent horizontal scrollbar in list view on mobile */
@media (max-width: 768px) {
    /* Remove negative margins that cause horizontal overflow */
    body[data-view="list"] .table-responsive {
        overflow-x: hidden;
    }
    
    /* Ensure table fits within viewport */
    body[data-view="list"] .table {
        width: 100%;
        max-width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   20. TIMEZONE SELECTOR
   ═══════════════════════════════════════════════════════════════════════════ */

/* Reason: Timezone toggle button styling */
.ea-timezone-toggle {
    transition: all 0.2s ease;
}

.ea-timezone-toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
}

/* Reason: Hide timezone label on mobile for compact display */
@media (max-width: 991px) {
    #timezoneLabel {
        display: none !important;
    }
}

/* Reason: Timezone modal styling */
#timezoneModal .list-group-item {
    cursor: pointer;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

#timezoneModal .list-group-item:hover {
    border-left-color: var(--bs-primary);
    background-color: rgba(var(--ea-primary-rgb), 0.05);
}

#timezoneModal .list-group-item.active {
    border-left-color: var(--bs-primary);
    background-color: rgba(var(--ea-primary-rgb), 0.1);
    color: var(--bs-body-color);
}

#timezoneModal .list-group-item.active:hover {
    background-color: rgba(var(--ea-primary-rgb), 0.15);
}

/* Reason: Ensure active timezone text is black in light mode */
[data-bs-theme="light"] #timezoneModal .list-group-item.active {
    color: #000;
}

/* Reason: Ensure active timezone text is white in dark mode */
[data-bs-theme="dark"] #timezoneModal .list-group-item.active {
    color: #fff;
}

/* Reason: Current time badges in modal */
#timezoneModal .badge {
    min-width: 60px;
    font-family: 'Courier New', monospace;
}

/* Reason: Dark mode adjustments for timezone modal */
[data-bs-theme="dark"] #timezoneModal .list-group-item {
    background-color: var(--ea-card-bg);
    border-color: var(--ea-border-color);
}

[data-bs-theme="dark"] #timezoneModal .list-group-item:hover {
    background-color: rgba(var(--ea-primary-rgb), 0.15);
}

[data-bs-theme="dark"] #timezoneModal .list-group-item.active {
    background-color: rgba(var(--ea-primary-rgb), 0.2);
}

/* Reason: Mobile select hidden by default */
#timezoneMobileSelect {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Reason: Responsive modal width and mobile adjustments */
@media (max-width: 575.98px) {
    #timezoneModal .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    
    #timezoneModal .modal-body {
        padding: 1rem;
    }
    
    #timezoneModal .list-group-item {
        padding: 0.75rem;
    }
    
    #timezoneModal .list-group-item strong {
        font-size: 0.9rem;
    }
    
    #timezoneModal .list-group-item .small {
        font-size: 0.75rem;
    }
    
    #timezoneModal .badge {
        min-width: 50px;
        font-size: 0.7rem;
    }
}

@media (min-width: 576px) {
    #timezoneModal .modal-dialog {
        max-width: 600px;
    }
}