/* css/disable-features.css */

/* LOW SPEC MODE - Extreme Performance Optimizations */
body.low-spec-mode *,
html.low-spec-mode body * {
    /* Disable expensive filters */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;

    /* Disable costly shadows */
    box-shadow: none !important;
    /* No shadows */
    text-shadow: none !important;

    /* Disable animations */
    animation: none !important;

    /* Simplify borders */
    border-radius: 4px !important;
    /* Cheaper than large radii or pills */
}

/* Disable hover transforms specifically, not layout transforms */
body.low-spec-mode .icon-card:hover,
body.low-spec-mode .trending-icon-card:hover,
html.low-spec-mode .icon-card:hover,
html.low-spec-mode .trending-icon-card:hover {
    transform: none !important;
}

body.low-spec-mode .icon-card:hover i,
body.low-spec-mode .trending-icon-card:hover i,
html.low-spec-mode .icon-card:hover i,
html.low-spec-mode .trending-icon-card:hover i {
    transform: none !important;
}

/* Fix trending-icon-name alignment in low-spec mode */
body.low-spec-mode .trending-icon-name,
html.low-spec-mode .trending-icon-name {
    /* Keep centering transform, remove only animation transforms */
    left: 50% !important;
    transform: translateX(-50%) !important;
    transition: opacity 0.2s ease !important; /* Keep opacity transition for show/hide */
}

/* Restore essential transitions for detail panel functionality */
body.low-spec-mode #detail-panel,
body.low-spec-mode #detail-overlay,
html.low-spec-mode #detail-panel,
html.low-spec-mode #detail-overlay {
    transition: transform 0.3s ease, opacity 0.3s ease !important;
}

body.low-spec-mode #detail-panel,
html.low-spec-mode #detail-panel {
    transform: translateX(100%) !important;
}

body.low-spec-mode #detail-panel.open,
html.low-spec-mode #detail-panel.open {
    transform: translateX(0) !important;
}

/* Force solid backgrounds instead of glassmorphism */
body.low-spec-mode .glass-nav,
body.low-spec-mode .icon-card,
body.low-spec-mode .search-container,
body.low-spec-mode .modal-content,
body.low-spec-mode .trending-icon-card,
html.low-spec-mode .glass-nav,
html.low-spec-mode .icon-card,
html.low-spec-mode .search-container,
html.low-spec-mode .modal-content,
html.low-spec-mode .trending-icon-card {
    background-color: #09090b !important;
    background-image: none !important;
    border: 1px solid #27272a !important;
    /* Zinc-800 */
}

/* Simplify gradients */
body.low-spec-mode .animate-blob,
html.low-spec-mode .animate-blob {
    display: none !important;
}

body.low-spec-mode .grid-pattern,
html.low-spec-mode .grid-pattern {
    opacity: 0.05 !important;
}

/* ===== CRITICAL LAYOUT FIXES FOR SEARCH PAGE ===== */
/* Preserve search icon centering */
body.low-spec-mode .search-box .search-icon,
html.low-spec-mode .search-box .search-icon {
    position: absolute !important;
    left: 0.75rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    transition: none !important;
}

/* Preserve topbar layout */
body.low-spec-mode .icons-topbar,
html.low-spec-mode .icons-topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
}

/* Preserve search-box layout */
body.low-spec-mode .search-box,
html.low-spec-mode .search-box {
    position: relative !important;
    display: block !important;
    flex: 1 !important;
    max-width: 24rem !important;
}

/* Preserve results-meta layout */
body.low-spec-mode .results-meta,
html.low-spec-mode .results-meta {
    display: flex !important;
    align-items: center !important;
    gap: 1.5rem !important;
    flex-shrink: 0 !important;
}

/* Preserve sort button layout */
body.low-spec-mode .sort-button,
html.low-spec-mode .sort-button {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

/* Allow essential transitions in low-spec mode */
body.low-spec-mode .mobile-menu-drawer,
body.low-spec-mode .mobile-menu-overlay,
body.low-spec-mode #detail-panel,
body.low-spec-mode #detail-overlay,
body.low-spec-mode button,
body.low-spec-mode a,
body.low-spec-mode input,
html.low-spec-mode .mobile-menu-drawer,
html.low-spec-mode .mobile-menu-overlay,
html.low-spec-mode #detail-panel,
html.low-spec-mode #detail-overlay,
html.low-spec-mode button,
html.low-spec-mode a,
html.low-spec-mode input {
    transition: all 0.2s ease !important;
}

/* Specific transitions for panels */
body.low-spec-mode .mobile-menu-drawer,
html.low-spec-mode .mobile-menu-drawer {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}