/* ========================================
   THENETWORK THEME STYLES
   Last updated: 2025-12-09 19:10 PST
   ======================================== */

:root {
    --color-search-background-hover: var(--tn-primary, #ff9c00);
    
    /* Category/Tab Colors - Light Mode */
    --color-categories-item-selected: var(--tn-primary, #ff9c00);
    --color-categories-item-selected-font: var(--tn-text-inverse, #000);
    --color-categories-item-border-selected: var(--tn-primary, #ff9c00);
    
    /* Button Colors - Light Mode (replace blue with orange) */
    --color-btn-background: var(--tn-primary, #ff9c00);
    --color-btn-font: var(--tn-btn-primary-text, #000);
    
    /* Toolkit Overrides - Light Mode (replace blue with orange) */
    --color-toolkit-checkbox-onoff-on-mark-background: var(--tn-primary, #ff9c00);
    --color-toolkit-checkbox-input-border: var(--tn-primary, #ff9c00);
    --color-toolkit-select-background: #f0f0f0;
    --color-toolkit-select-background-hover: #e0e0e0;
}

/* ========================================
   INDEX PAGE SEARCH BAR WIDTH
   ======================================== */

/* Constrain search bar width on start/index page */
.index .search_box,
#main_index .search_box,
.index #search_view,
#main_index #search_view {
    max-width: 32rem;  /* Narrower than default 44rem */
    margin: 0 auto;
}

/* ========================================
   NAVIGATION BAR STYLING
   ======================================== */

/* Position the nav bar properly */
#links_on_top {
    position: absolute;
    top: 0.8rem;
    right: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 100;
}

/* Show nav link text (base theme hides it) */
#links_on_top a span {
    display: inline !important;
    overflow: visible;
    white-space: nowrap;
}

/* Style nav links */
#links_on_top a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

#links_on_top a:hover {
    background-color: rgba(128, 128, 128, 0.1);
}

/* Response time styling in nav */
#links_on_top > div:last-of-type:not(.theme-toggle-wrapper) {
    margin-left: 0.5rem;
    font-size: 12px;
    opacity: 0.8;
}

/* Theme toggle wrapper alignment */
#links_on_top .theme-toggle-wrapper {
    margin-left: 0.5rem;
}

/* ========================================
   RESULTS CONTAINER LAYOUT
   ======================================== */

/* Move inline styles from template to CSS */
#urls {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
}

/* ========================================
   SEARCH BUTTON FIX
   ======================================== */

#send_search {
    background: none repeat scroll 0 0 var(--color-search-background) !important;
    color: var(--color-search-font) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.8rem !important;
    gap: 0.4rem !important;
}

#send_search:hover {
    background-color: var(--tn-primary, #ff9c00) !important;
    color: var(--tn-btn-primary-text, #000) !important;
}

/* Fix icon class mismatch - add ion-icon-big styles */
.ion-icon-big,
#send_search .ion-icon-big {
    vertical-align: bottom !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
    line-height: 1 !important;
    display: inline-block !important;
}

/* Show BOTH icon span AND text span */
html.js #send_search span.hide_if_nojs,
html #send_search span.hide_if_nojs,
#send_search span.hide_if_nojs,
html.js #send_search span.show_if_nojs,
html #send_search span.show_if_nojs,
#send_search span.show_if_nojs,
#send_search > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Force SVG to display properly */
#send_search svg,
#send_search .ion-icon-big svg {
    display: inline-block !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
    stroke: currentColor !important;
    fill: none !important;
}

#send_search:hover svg {
    stroke: var(--tn-btn-primary-text, #000) !important;
}

/* ========================================
   SEARCH FILTER BUTTONS
   ======================================== */

.timerange-btn,
.safesearch-btn {
    padding: 0.4rem 0.8rem;
    margin: 0 0.2rem;
    background: var(--tn-bg-secondary, #f5f5f5) !important;
    border: 1px solid var(--tn-border, #dddddd) !important;
    border-radius: 6px;
    color: var(--tn-text-primary, #333333) !important;
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.timerange-btn:hover,
.safesearch-btn:hover {
    background: var(--tn-bg-hover, #f9f9f9);
    border-color: var(--tn-primary, #ff9c00) !important;
}

.timerange-btn.active,
.safesearch-btn.active {
    background: var(--tn-primary, #ff9c00) !important;
    border-color: var(--tn-primary, #ff9c00) !important;
    color: var(--tn-btn-primary-text, #000) !important;
}

/* Dark mode overrides for filter buttons */
:root.theme-dark .timerange-btn,
:root.theme-dark .safesearch-btn {
    background: var(--tn-bg-secondary, #27272a) !important;
    border-color: var(--tn-border, #3f3f46) !important;
    color: var(--tn-text-primary, #fafafa) !important;
}

:root.theme-dark .timerange-btn:hover,
:root.theme-dark .safesearch-btn:hover {
    background: var(--tn-bg-hover, #3f3f46);
    border-color: var(--tn-primary, #ff9c00) !important;
}

:root.theme-dark .timerange-btn.active,
:root.theme-dark .safesearch-btn.active {
    background: var(--tn-primary, #ff9c00) !important;
    border-color: var(--tn-primary, #ff9c00) !important;
    color: var(--tn-btn-primary-text, #18181b) !important;
}

/* Language select styling */
select.language,
select#language {
    padding: 0.4rem 0.8rem;
    background: var(--tn-bg-secondary, #f5f5f5);
    border: 1px solid var(--tn-border, #dddddd);
    border-radius: 6px;
    color: var(--tn-text-primary, #333333);
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.2s ease;
}

select.language:hover,
select#language:hover,
select.language:focus,
select#language:focus {
    border-color: var(--tn-primary, #ff9c00) !important;
    outline: none;
}

:root.theme-dark select.language,
:root.theme-dark select#language {
    background: var(--tn-bg-secondary, #27272a);
    border-color: var(--tn-border, #3f3f46);
    color: var(--tn-text-primary, #fafafa);
}

:root.theme-dark select.language:hover,
:root.theme-dark select#language:hover,
:root.theme-dark select.language:focus,
:root.theme-dark select#language:focus {
    border-color: var(--tn-primary, #ff9c00) !important;
}

/* ========================================
   VIDEO RESULTS TILING
   ======================================== */

#results.only_template_videos #urls {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    align-content: flex-start !important;
}

#results.only_template_videos #urls .result-videos {
    flex: 0 0 300px !important;
    width: 300px !important;
    max-width: 300px !important;
    display: block !important;
    margin: 0 !important;
    background: var(--color-result-background, #fff) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1) !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}

#results.only_template_videos #urls .result-videos:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    transform: translateY(-2px) !important;
}

/* ========================================
   IMAGE RESULTS TILING
   ======================================== */

/* Image results - TILE LAYOUT (override base sxng-ltr.min.css) */
#results.only_template_images #urls {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px !important;
    align-content: flex-start !important;
}

/* CRITICAL: Override base .result-images which has flex-grow:1 and width:unset */
#results.only_template_images #urls .result-images,
#results.only_template_images #urls article.result-images,
.result-images {
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: 200px !important;
    width: 200px !important;
    max-width: 200px !important;
    height: auto !important;
    display: inline-block !important;
    margin: 4px !important;
    padding: 0 !important;
}

/* ========================================
   MAP CONTAINER
   ======================================== */

#map-results-container {
    width: 100%;
    height: 400px;
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
}

#results-map {
    width: 100%;
    height: 400px;
}

/* ========================================
   MISC
   ======================================== */

#clear_search {
    opacity: 0.25;
}

.answer {
    background: #f5f5f5;
    border: 1px solid #ddd;
    padding: 1rem;
    border-radius: 8px;
    margin: 10px 0;
}


/* ========================================
   PROPER TILE FIX - Override base .result width
   ======================================== */

/* Override .result width for videos */
#results.only_template_videos .result,
#results.only_template_videos article.result,
#results.only_template_videos .result-videos,
#results.only_template_videos article.result-videos {
    width: 280px !important;
    max-width: 280px !important;
    flex: 0 0 280px !important;
    margin: 8px !important;
}

/* Override .result width for images */
#results.only_template_images .result,
#results.only_template_images article.result,
#results.only_template_images .result-images,
#results.only_template_images article.result-images {
    width: 200px !important;
    max-width: 200px !important;
    flex: 0 0 200px !important;
    margin: 4px !important;
}

/* Ensure #urls uses flex for these categories */
#results.only_template_videos #urls,
#results.only_template_images #urls {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}


/* ========================================
   GRID OVERRIDE FOR VIDEO TILING
   ======================================== */

/* Override the grid template for videos to give more width */
#results.only_template_videos {
    grid-template-columns: 1fr 20rem !important;
    grid-template-areas: 
        "urls sidebar" !important;
}

#results.only_template_videos #urls {
    grid-area: urls;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    max-width: none !important;
    width: 100% !important;
}

#results.only_template_videos #sidebar {
    grid-area: sidebar;
    width: 20rem;
}

/* Override for images too */
#results.only_template_images {
    grid-template-columns: 1fr 20rem !important;
}

#results.only_template_images #urls {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    max-width: none !important;
}

/* Force the video cards to proper size */
#results.only_template_videos article.result {
    width: 280px !important;
    max-width: 280px !important;
    min-width: 280px !important;
    flex: 0 0 280px !important;
}


/* ========================================
   IMAGE DETAIL PANEL FIX
   ======================================== */

/* CRITICAL: Hide .detail by default - only show when selected */
.result-images .detail {
    display: none !important;
}

/* Don't shrink the images container - keep full width */
#results.image-detail-open.only_template_images {
    width: 100% !important;
    max-width: 100% !important;
}

/* Images container stays full width - detail overlays on top */
#results.image-detail-open.only_template_images #urls {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
}

/* Images maintain their normal tiling */
#results.image-detail-open.only_template_images #urls .result-images {
    width: 200px !important;
    max-width: 200px !important;
    flex: 0 0 200px !important;
    margin: 4px !important;
}

/* Detail panel overlays on the right - doesn't push content */
#results.image-detail-open article.result-images[data-vim-selected] .detail {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 450px !important;
    max-width: 90vw !important;
    height: 100vh !important;
    z-index: 10000 !important;
    background: var(--color-result-detail-background, #fff) !important;
    box-shadow: -4px 0 20px rgba(0,0,0,0.3) !important;
    overflow-y: auto !important;
    padding: 20px !important;
}

/* Dark mode detail panel */
:root.theme-dark #results.image-detail-open article.result-images[data-vim-selected] .detail {
    background: var(--color-result-detail-background, #1a1a2e) !important;
    box-shadow: -4px 0 20px rgba(0,0,0,0.6) !important;
}

/* Image selection indicator */
article.result-images[data-vim-selected] {
    outline: 3px solid var(--tn-primary, #ff9c00) !important;
    outline-offset: 2px !important;
    z-index: 100 !important;
}

/* ========================================
   DARK THEME OVERRIDES
   ======================================== */

:root.theme-dark {
    --color-search-background-hover: var(--tn-primary, #ff9c00);
    
    --color-base-background: #18181b;
    --color-base-background-mobile: #18181b;
    --color-base-font: #fafafa;
    --color-base-font-rgb: 250, 250, 250;
    
    --color-header-background: #1f1f23;
    --color-header-border: #3f3f46;
    
    --color-footer-background: #1f1f23;
    --color-footer-border: #3f3f46;
    
    --color-result-background: #1f1f23;
    --color-result-border: #3f3f46;
    --color-result-detail-background: #18181b;
    
    --color-btn-background: #3f3f46;
    --color-btn-font: #fafafa;
    
    --color-search-background: #27272a;
    --color-search-border: #3f3f46;
    --color-search-font: #fafafa;
    
    --color-autocomplete-background: #27272a;
    --color-autocomplete-background-hover: #3f3f46;
    --color-autocomplete-border: #3f3f46;
    --color-autocomplete-font: #fafafa;
    
    --color-answer-background: #27272a;
    --color-answer-font: #fafafa;
    
    --color-categories-item-selected: transparent;
    --color-categories-item-selected-font: var(--tn-primary, #ff9c00);
    --color-categories-item-border-selected: var(--tn-primary, #ff9c00);
    
    /* Button Colors - Dark Mode (replace blue with orange) */
    --color-btn-background: var(--tn-primary, #ff9c00);
    --color-btn-font: var(--tn-btn-primary-text, #18181b);
    
    /* Toolkit Overrides - Dark Mode (replace blue with orange) */
    --color-toolkit-checkbox-onoff-on-mark-background: var(--tn-primary, #ff9c00);
    --color-toolkit-checkbox-input-border: var(--tn-primary, #ff9c00);
    --color-toolkit-select-background: #27272a;
    --color-toolkit-select-background-hover: #3f3f46;
    
    --color-error: #f87171;
    --color-error-background: #450a0a;
    
    --color-loading-indicator: #ff9c00;
    --color-loading-indicator-gap: #18181b;
    
    --color-favicon-background-color: #27272a;
    --color-favicon-border-color: #3f3f46;
    
    --color-image-resolution-background: rgba(0, 0, 0, 0.7);
    --color-image-resolution-font: #fafafa;
    
    --color-backtotop-background: #3f3f46;
    --color-backtotop-border: #ff9c00;
    --color-backtotop-font: #fafafa;
    
    --color-bar-chart-primary: #ff9c00;
    --color-bar-chart-secondary: #3f3f46;
    
    --color-doc-code: #ff9c00;
    --color-doc-code-background: #27272a;
    
    --color-line-number: #71717a;
    
    --color-result-description-highlight-font: #ff9c00;
}

/* ========================================
   DARK MODE CATEGORY OVERRIDES
   Force transparent background with orange text for selected
   Force no background for unselected
   ======================================== */

/* Tab styles */
:root.theme-dark .tabs>label.active,
:root.theme-dark .tabs>li>a.active {
    background: transparent !important;
    color: var(--tn-primary, #ff9c00) !important;
}

/* Category checkbox - UNSELECTED (default state) */
:root.theme-dark .category_checkbox label {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--tn-text-primary, #fafafa) !important;
}

:root.theme-dark .category_checkbox label .category_name {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--tn-text-primary, #fafafa) !important;
}

/* Category checkbox - SELECTED */
:root.theme-dark .category_checkbox input[type=checkbox]:checked+label {
    background: transparent !important;
    color: var(--tn-primary, #ff9c00) !important;
}

:root.theme-dark .category_checkbox input[type=checkbox]:checked+label .category_name {
    background: transparent !important;
    color: var(--tn-primary, #ff9c00) !important;
}

/* Category buttons - UNSELECTED (default state) */
:root.theme-dark button.category_button {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--tn-text-primary, #fafafa) !important;
}

:root.theme-dark button.category_button .category_name {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--tn-text-primary, #fafafa) !important;
}

/* Category buttons - SELECTED */
:root.theme-dark button.category_button.selected,
:root.theme-dark button.category_button:active,
:root.theme-dark button.category_button:focus-within {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--tn-primary, #ff9c00) !important;
}

:root.theme-dark button.category_button.selected .category_name,
:root.theme-dark button.category_button:active .category_name,
:root.theme-dark button.category_button:focus-within .category_name {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--tn-primary, #ff9c00) !important;
}

/* Dark mode specific element overrides */
:root.theme-dark .answer {
    background: var(--color-answer-background);
    border-color: var(--color-result-border);
    color: var(--color-answer-font);
}

:root.theme-dark #links_on_top a {
    color: var(--color-base-font);
}

:root.theme-dark #links_on_top a:hover {
    color: var(--color-search-background-hover);
}

:root.theme-dark .result h3 a {
    color: var(--tn-primary, #ff9c00);
}

:root.theme-dark .result h3 a:visited {
    color: #a78bfa;
}

:root.theme-dark .result .url_wrapper {
    color: #6ee7b7;
}

:root.theme-dark .result .content {
    color: #a1a1aa;
}

:root.theme-dark input[type="text"],
:root.theme-dark input[type="search"] {
    background: var(--color-search-background);
    border-color: var(--color-search-border);
    color: var(--color-search-font);
}

:root.theme-dark select {
    background: var(--color-btn-background);
    border-color: var(--color-result-border);
    color: var(--color-btn-font);
}

:root.theme-dark button,
:root.theme-dark .btn {
    background: var(--color-btn-background);
    color: var(--color-btn-font);
}

:root.theme-dark #sidebar {
    background: var(--color-result-background);
    border-color: var(--color-result-border);
}

:root.theme-dark .infobox {
    background: var(--color-result-background);
    border-color: var(--color-result-border);
}

/* Smooth transitions for theme switching */
html {
    transition: background-color 0.3s ease, color 0.3s ease;
}

body, main, #results, .result, #sidebar, .infobox, input, select, button {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* ========================================
   FILES AND TORRENT TABLE ROW LAYOUT
   ======================================== */

/* File Result Row */
.result-files,
.result-torrent {
    padding: 1rem;
    margin-bottom: 0.5rem;
    background: var(--color-result-background, #fff);
    border: 1px solid var(--color-result-border, #ddd);
    border-radius: 8px;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.result-files:hover,
.result-torrent:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-color: var(--color-search-background-hover, #ff9c00);
}

.file-row,
.torrent-row {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

/* Left: Info Section */
.file-info,
.torrent-info {
    flex: 1;
    min-width: 0;
}

.file-source,
.torrent-source {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.file-source .favicon,
.torrent-source .favicon {
    width: 16px;
    height: 16px;
}

.source-url {
    font-size: 12px;
    color: #6ee7b7;
}

.file-title,
.torrent-title {
    margin: 0 0 6px 0;
    font-size: 1.1rem;
    line-height: 1.3;
}

.file-title a,
.torrent-title a {
    color: var(--tn-link, #ff9c00);
    text-decoration: none;
}

.file-title a:hover,
.torrent-title a:hover {
    text-decoration: underline;
}

.file-content,
.torrent-content {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-result-content, #666);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Middle: Metadata/Stats Section */
.file-metadata,
.torrent-stats {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 180px;
    font-size: 0.85rem;
}

.meta-item {
    color: var(--color-base-font, #333);
}

.meta-item strong {
    color: var(--color-base-font, #666);
    font-weight: 500;
}

.torrent-stats {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--color-btn-background, #f0f0f0);
    font-size: 0.85rem;
}

.stat-seeds {
    color: #22c55e;
}

.stat-seeds .stat-value {
    color: #22c55e;
    font-weight: 600;
}

.stat-leeches {
    color: #ef4444;
}

.stat-leeches .stat-value {
    color: #ef4444;
    font-weight: 600;
}

.stat-size .stat-value,
.stat-files .stat-value {
    color: var(--color-base-font, #333);
}

/* Right: Actions Section */
.file-actions,
.torrent-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 100px;
}

.action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.action-btn svg,
.action-btn .ion-icon-big {
    width: 18px;
    height: 18px;
}

.action-link {
    background: var(--color-btn-background, #e8e8e8);
    color: var(--color-btn-font, #333);
}

.action-link:hover {
    background: var(--color-search-background-hover, #ff9c00);
    color: #000;
}

.action-magnet {
    background: #7c3aed;
    color: #fff;
}

.action-magnet:hover {
    background: #6d28d9;
}

.action-torrent,
.action-download {
    background: #22c55e;
    color: #fff;
}

.action-torrent:hover,
.action-download:hover {
    background: #16a34a;
}

/* Footer */
.file-footer,
.torrent-footer {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--color-result-border, #eee);
}

.file-footer .engines,
.torrent-footer .engines {
    display: flex;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--color-base-font, #888);
}

.file-footer .engines span,
.torrent-footer .engines span {
    padding: 2px 6px;
    background: var(--color-btn-background, #f0f0f0);
    border-radius: 3px;
}

/* Media toggle */
.file-media-container {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--color-result-border, #ddd);
}

.media-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--color-btn-background, #e8e8e8);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
}

.media-toggle-btn:hover {
    background: var(--color-search-background-hover, #ff9c00);
}

.media-embed {
    margin-top: 10px;
}

/* Responsive */
@media (max-width: 768px) {
    .file-row,
    .torrent-row {
        flex-direction: column;
        gap: 1rem;
    }
    
    .file-metadata,
    .torrent-stats {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .file-actions,
    .torrent-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* Dark mode adjustments */
:root.theme-dark .result-files,
:root.theme-dark .result-torrent {
    background: var(--color-result-background);
    border-color: var(--color-result-border);
}

:root.theme-dark .file-title a,
:root.theme-dark .torrent-title a {
    color: var(--tn-primary, #ff9c00);
}

:root.theme-dark .stat-item {
    background: var(--color-btn-background);
}

:root.theme-dark .action-link {
    background: var(--color-btn-background);
    color: var(--color-btn-font);
}

/* ========================================
   MAP SIDE-BY-SIDE LAYOUT
   ======================================== */

/* Map view wrapper */
.map-results-wrapper {
    display: flex;
    gap: 20px;
    width: 100%;
    min-height: calc(100vh - 250px);
}

/* Map column - left side, 60% width */
.map-column {
    flex: 0 0 60%;
    min-width: 0;
}

.map-column #map-results-container {
    height: calc(100vh - 280px);
    min-height: 500px;
    position: sticky;
    top: 20px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.map-column #results-map {
    height: 100% !important;
}

/* Results column - right side, 40% width */
.results-column {
    flex: 0 0 38%;
    min-width: 0;
    max-height: calc(100vh - 250px);
    overflow-y: auto;
    padding-right: 10px;
}

.results-column #urls {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.results-column .result {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Hide sidebar in map view for more space */
#results.map-view-active #sidebar {
    display: none;
}

/* Override grid layout for map view to use full width */
#results.map-view-active {
    margin: 1rem !important;
    width: calc(100% - 2rem) !important;
    grid-template-areas: none !important;
    display: block !important;
    grid-template-columns: none !important;
    max-width: 100% !important;
}

/* Ensure map wrapper uses full width */
#results.map-view-active .map-results-wrapper {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 20px !important;
    gap: 20px;
    min-height: calc(100vh - 250px);
}

/* Map column in map view */
#results.map-view-active .map-column {
    flex: 0 0 60% !important;
    min-width: 0;
}

/* Results column in map view */
#results.map-view-active .results-column {
    flex: 0 0 38% !important;
    min-width: 0;
    max-height: calc(100vh - 250px);
    overflow-y: auto;
}

/* Custom scrollbar for results column */
.results-column::-webkit-scrollbar {
    width: 8px;
}

.results-column::-webkit-scrollbar-track {
    background: var(--color-result-border, #f0f0f0);
    border-radius: 4px;
}

.results-column::-webkit-scrollbar-thumb {
    background: var(--color-btn-background, #ccc);
    border-radius: 4px;
}

.results-column::-webkit-scrollbar-thumb:hover {
    background: var(--color-search-background-hover, #ff9c00);
}

/* Responsive: Stack on mobile */
@media (max-width: 900px) {
    .map-results-wrapper {
        flex-direction: column;
    }
    
    .map-column {
        flex: 1 1 auto;
        width: 100%;
    }
    
    .map-column #map-results-container {
        height: 350px;
        min-height: 350px;
        position: relative;
        top: 0;
    }
    
    .results-column {
        flex: 1 1 auto;
        width: 100%;
        max-height: none;
        overflow-y: visible;
        padding-right: 0;
    }
}

/* Dark mode map adjustments */
:root.theme-dark .map-column #map-results-container {
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

:root.theme-dark .results-column::-webkit-scrollbar-track {
    background: var(--color-result-border);
}

:root.theme-dark .results-column::-webkit-scrollbar-thumb {
    background: var(--color-btn-background);
}

/* ========================================
   IMPROVED ANSWER BOX STYLING
   ======================================== */

#answers {
    margin-bottom: 20px;
}

#answers .title {
    font-size: 0.9rem;
    color: var(--color-base-font, #666);
    margin-bottom: 10px;
}

.answer {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #dee2e6;
    border-left: 4px solid var(--color-search-background-hover, #ff9c00);
    padding: 1.25rem 1.5rem;
    border-radius: 8px;
    margin: 12px 0;
    font-size: 1.1rem;
    line-height: 1.5;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: all 0.2s ease;
}

.answer:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    border-color: var(--color-search-background-hover, #ff9c00);
}

.answer span {
    display: block;
}

.answer-url {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--tn-link, #ff9c00);
}

/* Dark mode answer styling */
:root.theme-dark .answer {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-color: #334155;
    border-left-color: var(--color-search-background-hover, #ff9c00);
    color: var(--color-base-font, #e4e4e7);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

:root.theme-dark .answer:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    border-color: var(--color-search-background-hover, #ff9c00);
}

:root.theme-dark .answer-url {
    color: var(--tn-primary, #ff9c00);
}

/* ========================================
   GEOLOCATION "NEAR ME" STYLES
   ======================================== */

.locate-me-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: #fff;
    border: 2px solid var(--tn-primary, #ff9c00);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--tn-primary, #ff9c00);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: all 0.2s;
}

.locate-me-btn:hover {
    background: var(--tn-primary, #ff9c00);
    color: #000;
}

.locate-me-btn:hover svg {
    stroke: #fff;
}

.locate-me-btn svg {
    stroke: var(--tn-primary, #ff9c00);
    transition: stroke 0.2s;
}

.locate-me-btn.locating {
    background: #fff3cd;
    border-color: #ffc107;
    color: #856404;
}

.locate-me-btn.locating svg {
    stroke: #856404;
    animation: pulse 1s infinite;
}

.locate-me-btn.located {
    background: #d4edda;
    border-color: #28a745;
    color: #155724;
}

.locate-me-btn.located svg {
    stroke: #155724;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* User location marker */
.user-location-marker {
    background: transparent;
}

.user-dot {
    width: 14px;
    height: 14px;
    background: var(--tn-primary, #ff9c00);
    border: 3px solid #fff;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.user-pulse {
    width: 40px;
    height: 40px;
    background: rgba(66, 133, 244, 0.3);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: user-pulse 2s infinite;
}

@keyframes user-pulse {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

/* Distance badge */
.distance-badge {
    display: inline-block;
    padding: 4px 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    border-radius: 12px;
    margin-bottom: 8px;
}

/* Dark mode adjustments */
:root.theme-dark .locate-me-btn {
    background: var(--color-result-background);
    color: var(--tn-primary, #ff9c00);
    border-color: var(--tn-primary, #ff9c00);
}

:root.theme-dark .locate-me-btn svg {
    stroke: var(--tn-primary, #ff9c00);
}

:root.theme-dark .locate-me-btn:hover {
    background: var(--tn-primary, #ff9c00);
    color: #000;
}

:root.theme-dark .locate-me-btn:hover svg {
    stroke: #000;
}

:root.theme-dark .locate-me-btn.located {
    background: #1e4620;
    border-color: #4caf50;
    color: #4caf50;
}

/* ============================================
   FILES TABLE STYLES
   ============================================ */

#files-results-wrapper {
    margin: 20px auto;
    max-width: 1400px;
    padding: 0 20px;
}

.files-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-result-background, #fff);
    border: 1px solid var(--color-result-border, #e0e0e0);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.files-table thead {
    background: var(--color-header-background, #f5f5f5);
    border-bottom: 2px solid var(--color-header-border, #ddd);
}

.files-table thead th {
    padding: 15px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-base-font, #333);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.files-table tbody tr {
    border-bottom: 1px solid var(--color-result-border, #e8e8e8);
    transition: background-color 0.2s ease;
}

.files-table tbody tr:hover {
    background: var(--color-search-background-hover, #f9f9f9);
}

.files-table tbody tr:last-child {
    border-bottom: none;
}

.files-table td {
    padding: 12px;
    vertical-align: top;
}

/* File Name Column */
.file-name-col {
    min-width: 300px;
    max-width: 500px;
}

.file-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.file-header .favicon {
    flex-shrink: 0;
}

.source-domain {
    font-size: 0.85rem;
    color: var(--color-result-url-font, #666);
}

.file-title a {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-link, #ff9c00);
    text-decoration: none;
    display: block;
    margin-bottom: 4px;
}

.file-title a:hover {
    text-decoration: underline;
    color: var(--color-link-hover, #cc7a00);
}

.file-description {
    font-size: 0.85rem;
    color: var(--color-result-description-font, #555);
    line-height: 1.4;
    margin-top: 4px;
}

/* Type Column */
.file-type-col {
    width: 100px;
    text-align: center;
}

.file-type-badge {
    display: inline-block;
    padding: 4px 10px;
    background: var(--color-category-background, #e8f4f8);
    color: var(--color-category-font, #cc7a00);
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
}

/* Size Column */
.file-size-col {
    width: 100px;
    text-align: right;
    font-size: 0.9rem;
    color: var(--color-base-font, #333);
    white-space: nowrap;
}

/* Date Column */
.file-date-col {
    width: 150px;
    font-size: 0.85rem;
    color: var(--color-result-description-font, #666);
}

/* Actions Column */
.file-actions-col {
    width: 150px;
    text-align: right;
}

.action-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 6px;
    background: var(--color-button-background, #f0f0f0);
    border: 1px solid var(--color-button-border, #d0d0d0);
    border-radius: 6px;
    color: var(--color-button-font, #333);
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.action-btn:hover {
    background: var(--color-button-hover-background, #e0e0e0);
    border-color: var(--color-button-hover-border, #999);
    transform: translateY(-1px);
}

.action-btn svg {
    width: 18px;
    height: 18px;
}

.btn-link {
    background: #4CAF50;
    border-color: #45a049;
    color: white;
}

.btn-link:hover {
    background: #45a049;
    border-color: #3d8b40;
}

.btn-download {
    background: #2196F3;
    border-color: #0b7dda;
    color: white;
}

.btn-download:hover {
    background: #0b7dda;
    border-color: #0a6bc4;
}

.btn-magnet {
    background: #FF5722;
    border-color: #e64a19;
    color: white;
}

.btn-magnet:hover {
    background: #e64a19;
    border-color: #d84315;
}

.btn-torrent {
    background: #9C27B0;
    border-color: #7b1fa2;
    color: white;
}

.btn-torrent:hover {
    background: #7b1fa2;
    border-color: #6a1b9a;
}

.text-muted {
    color: var(--color-result-description-font, #999);
    font-style: italic;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .file-name-col {
        min-width: 250px;
    }
    
    .file-date-col {
        width: 120px;
    }
}

@media (max-width: 768px) {
    .files-table {
        font-size: 0.9rem;
    }
    
    .files-table td,
    .files-table th {
        padding: 8px 6px;
    }
    
    .file-name-col {
        min-width: 200px;
    }
    
    .file-type-col,
    .file-size-col {
        display: none;
    }
    
    .file-date-col {
        width: auto;
        font-size: 0.75rem;
    }
    
    .action-buttons {
        flex-direction: column;
        gap: 4px;
    }
    
    .action-btn {
        width: 28px;
        height: 28px;
    }
}

/* Dark mode adjustments for files table */
:root.theme-dark .files-table {
    background: var(--color-result-background, #2a2a2a);
    border-color: var(--color-result-border, #444);
}

:root.theme-dark .files-table thead {
    background: var(--color-header-background, #1a1a1a);
    border-bottom-color: var(--color-header-border, #555);
}

:root.theme-dark .files-table tbody tr {
    border-bottom-color: var(--color-result-border, #333);
}

:root.theme-dark .files-table tbody tr:hover {
    background: var(--color-search-background-hover, #333);
}


/* ============================================
   FILES TABLE - CLEAN STYLES
   ============================================ */

#files-results-wrapper {
    margin: 20px auto;
    max-width: 1600px;
    padding: 0 15px;
}

.files-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--color-result-background, #fff);
    border: 1px solid var(--color-result-border, #e5e5e5);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Table Header */
.files-table thead th {
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-base-font, #444);
    background: var(--color-header-background, #fafafa);
    border-bottom: 2px solid var(--color-header-border, #e0e0e0);
    white-space: nowrap;
}

/* Table Rows */
.files-row {
    border-bottom: 1px solid var(--color-result-border, #f0f0f0);
    transition: background-color 0.15s ease;
}

.files-row:hover {
    background: var(--color-search-background-hover, #f8f9fa);
}

.files-row:last-child {
    border-bottom: none;
}

.files-row td {
    padding: 14px 16px;
    vertical-align: middle;
}

/* Name Column */
.files-col-name {
    min-width: 350px;
}

.files-name-wrapper {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.files-favicon {
    margin-top: 2px;
    flex-shrink: 0;
}

.files-name-content {
    flex: 1;
    min-width: 0;
}

.files-title a {
    max-width: 100%;
    font-size: 1rem;
    font-weight: 500;
    color: var(--tn-link, #ff9c00);
    text-decoration: none;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.files-title a:hover {
    text-decoration: underline;
}

.files-source {
    font-size: 0.8125rem;
    color: var(--color-result-url-font, #70757a);
    margin-top: 2px;
    line-height: 1.3;
}

.files-desc {
    font-size: 0.875rem;
    color: var(--color-result-description-font, #5f6368);
    line-height: 1.4;
    margin-top: 6px;
}

/* Source Column */
.files-col-source {
    width: 140px;
    text-align: left;
}

.files-source-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.files-engine-badge {
    display: inline-block;
    padding: 3px 8px;
    background: var(--color-engine-badge-bg, #f0f4f8);
    color: var(--tn-badge-text, #1967d2);
    border-radius: 12px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.2px;
    max-width: fit-content;
}

.files-domain {
    font-size: 0.75rem;
    color: var(--color-result-url-font, #70757a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}

/* Type Column */
.files-col-type {
    width: 90px;
    text-align: center;
}

.files-badge {
    display: inline-block;
    padding: 4px 12px;
    background: var(--color-category-background, #e8f0fe);
    color: var(--tn-badge-text, #1967d2);
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Size Column */
.files-col-size {
    width: 90px;
    text-align: right;
    font-size: 0.875rem;
    color: var(--color-base-font, #5f6368);
    white-space: nowrap;
}

/* Date Column */
.files-col-date {
    width: 130px;
    font-size: 0.875rem;
    color: var(--color-result-description-font, #70757a);
    white-space: nowrap;
}

/* Actions Column */
.files-col-actions {
    width: 140px;
}

.files-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.files-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 4px;
    border: none;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.files-btn svg {
    width: 16px;
    height: 16px;
}

.files-btn-view {
    background: #34a853;
    color: white;
}

.files-btn-view:hover {
    background: #2d8e47;
    box-shadow: 0 2px 4px rgba(52,168,83,0.3);
}

.files-btn-download {
    background: var(--tn-primary, #ff9c00);
    color: var(--tn-btn-primary-text, #000);
}

.files-btn-download:hover {
    background: #3367d6;
    box-shadow: 0 2px 4px rgba(66,133,244,0.3);
}

.files-btn-magnet {
    background: #ea4335;
    color: white;
}

.files-btn-magnet:hover {
    background: #d33426;
    box-shadow: 0 2px 4px rgba(234,67,53,0.3);
}

.files-btn-torrent {
    background: #9334e6;
    color: white;
}

.files-btn-torrent:hover {
    background: #7c2cc4;
    box-shadow: 0 2px 4px rgba(147,52,230,0.3);
}

.files-empty {
    color: var(--color-result-description-font, #bbb);
    font-size: 0.875rem;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .files-col-name {
        min-width: 280px;
    }
    
    .files-col-date {
        width: 110px;
        font-size: 0.8125rem;
    }
}

@media (max-width: 768px) {
    #files-results-wrapper {
        padding: 0 10px;
    }
    
    .files-table thead th {
        padding: 10px 8px;
        font-size: 0.8125rem;
    }
    
    .files-row td {
        padding: 10px 8px;
    }
    
    .files-col-name {
        min-width: 200px;
    }
    
    .files-col-type,
    .files-col-size {
        display: none;
    }
    
    .files-col-date {
        width: 80px;
        font-size: 0.75rem;
    }
    
    .files-col-actions {
        width: 100px;
    }
    
    .files-actions {
        gap: 4px;
    }
    
    .files-btn {
        width: 28px;
        height: 28px;
    }
    
    .files-btn svg {
        width: 14px;
        height: 14px;
    }
}

/* Dark Mode */
:root.theme-dark .files-table {
    background: var(--color-result-background, #202124);
    border-color: var(--color-result-border, #3c4043);
}

:root.theme-dark .files-table thead th {
    background: var(--color-header-background, #292a2d);
    border-bottom-color: var(--color-header-border, #3c4043);
    color: var(--color-base-font, #e8eaed);
}

:root.theme-dark .files-row {
    border-bottom-color: var(--color-result-border, #3c4043);
}

:root.theme-dark .files-row:hover {
    background: var(--color-search-background-hover, #292a2d);
}

:root.theme-dark .files-title a {
    color: var(--color-link, #8ab4f8);
}

:root.theme-dark .files-source,
:root.theme-dark .files-desc,
:root.theme-dark .files-col-size,
:root.theme-dark .files-col-date {
    color: var(--color-result-description-font, #9aa0a6);
}

:root.theme-dark .files-badge {
    background: var(--color-category-background, #1e3a5f);
    color: var(--color-category-font, #8ab4f8);
}

:root.theme-dark .files-engine-badge {
    background: var(--color-engine-badge-bg, #1e3a5f);
    color: var(--color-engine-badge-font, #8ab4f8);
}

:root.theme-dark .files-domain {
    color: var(--color-result-url-font, #9aa0a6);
}

:root.theme-dark .files-empty {
    color: var(--color-result-description-font, #5f6368);
}


/* Torrent stats in files table */
.files-torrent-stats {
    display: flex;
    gap: 12px;
    margin-top: 6px;
    font-size: 0.8125rem;
}

.torrent-stat-seeds {
    color: #34a853;
    font-weight: 500;
}

.torrent-stat-leeches {
    color: #ea4335;
    font-weight: 500;
}

:root.theme-dark .torrent-stat-seeds {
    color: #81c995;
}

:root.theme-dark .torrent-stat-leeches {
    color: #f28b82;
}


/* ============================================
   FILES TABLE - BETTER FIT
   ============================================ */

#files-results-wrapper {
    margin: 20px 0;
    width: 100%;
    padding: 0;
}

.files-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--color-result-background, #fff);
    border: 1px solid var(--color-result-border, #e5e5e5);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    table-layout: auto;
}

/* Table Header */
.files-table thead th {
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--color-base-font, #444);
    background: var(--color-header-background, #fafafa);
    border-bottom: 2px solid var(--color-header-border, #e0e0e0);
    white-space: nowrap;
}

/* Table Rows */
.files-row {
    border-bottom: 1px solid var(--color-result-border, #f0f0f0);
    transition: background-color 0.15s ease;
}

.files-row:hover {
    background: var(--color-search-background-hover, #f8f9fa);
}

.files-row:last-child {
    border-bottom: none;
}

.files-row td {
    padding: 10px 12px;
    vertical-align: middle;
}

/* Name Column - takes remaining space */
.files-col-name {
    width: auto;
}

.files-name-wrapper {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.files-favicon {
    margin-top: 2px;
    flex-shrink: 0;
}

.files-name-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.files-title a {
    max-width: 100%;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--tn-link, #ff9c00);
    text-decoration: none;
    line-height: 1.4;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    text-overflow: ellipsis;
}

.files-title a:hover {
    text-decoration: underline;
}

.files-source {
    font-size: 0.75rem;
    color: var(--color-result-url-font, #70757a);
    margin-top: 2px;
    line-height: 1.2;
}

.files-desc {
    font-size: 0.8125rem;
    color: var(--color-result-description-font, #5f6368);
    line-height: 1.3;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Type Column - compact */
.files-col-type {
    width: 80px;
    text-align: center;
}

.files-badge {
    display: inline-block;
    padding: 3px 8px;
    background: var(--color-category-background, #e8f0fe);
    color: var(--tn-badge-text, #1967d2);
    border-radius: 12px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Size Column - compact */
.files-col-size {
    width: 85px;
    text-align: right;
    font-size: 0.8125rem;
    color: var(--color-base-font, #5f6368);
    white-space: nowrap;
}

/* Date Column - compact */
.files-col-date {
    width: 110px;
    font-size: 0.8125rem;
    color: var(--color-result-description-font, #70757a);
    white-space: nowrap;
}

/* Actions Column - compact */
.files-col-actions {
    width: 110px;
}

.files-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

.files-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 4px;
    border: none;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.files-btn svg {
    width: 16px;
    height: 16px;
}

.files-btn-view {
    background: #34a853;
    color: white;
}

.files-btn-view:hover {
    background: #2d8e47;
    box-shadow: 0 2px 4px rgba(52,168,83,0.3);
}

.files-btn-download {
    background: var(--tn-primary, #ff9c00);
    color: var(--tn-btn-primary-text, #000);
}

.files-btn-download:hover {
    background: #3367d6;
    box-shadow: 0 2px 4px rgba(66,133,244,0.3);
}

.files-btn-magnet {
    background: #ea4335;
    color: white;
}

.files-btn-magnet:hover {
    background: #d33426;
    box-shadow: 0 2px 4px rgba(234,67,53,0.3);
}

.files-btn-torrent {
    background: #9334e6;
    color: white;
}

.files-btn-torrent:hover {
    background: #7c2cc4;
    box-shadow: 0 2px 4px rgba(147,52,230,0.3);
}

.files-empty {
    color: var(--color-result-description-font, #bbb);
    font-size: 0.8125rem;
}

/* Torrent stats - more compact */
.files-torrent-stats {
    display: flex;
    gap: 10px;
    margin-top: 4px;
    font-size: 0.75rem;
}

.torrent-stat-seeds {
    color: #34a853;
    font-weight: 500;
}

.torrent-stat-leeches {
    color: #ea4335;
    font-weight: 500;
}

/* Responsive Design */
@media (max-width: 1400px) {
    .files-col-date {
        width: 90px;
        font-size: 0.75rem;
    }
    
    .files-col-actions {
        width: 100px;
    }
}

@media (max-width: 1200px) {
    .files-col-type {
        display: none;
    }
    
    .files-col-size {
        width: 70px;
        font-size: 0.75rem;
    }
}

@media (max-width: 768px) {
    #files-results-wrapper {
        margin: 10px 0;
    }
    
    .files-table thead th {
        padding: 8px 6px;
        font-size: 0.75rem;
    }
    
    .files-row td {
        padding: 8px 6px;
    }
    
    .files-col-size,
    .files-col-date {
        display: none;
    }
    
    .files-col-actions {
        width: 80px;
    }
    
    .files-actions {
        gap: 3px;
        flex-wrap: wrap;
    }
    
    .files-btn {
        width: 26px;
        height: 26px;
    }
    
    .files-btn svg {
        width: 14px;
        height: 14px;
    }
}

/* Dark Mode */
:root.theme-dark .files-table {
    background: var(--color-result-background, #202124);
    border-color: var(--color-result-border, #3c4043);
}

:root.theme-dark .files-table thead th {
    background: var(--color-header-background, #292a2d);
    border-bottom-color: var(--color-header-border, #3c4043);
    color: var(--color-base-font, #e8eaed);
}

:root.theme-dark .files-row {
    border-bottom-color: var(--color-result-border, #3c4043);
}

:root.theme-dark .files-row:hover {
    background: var(--color-search-background-hover, #292a2d);
}

:root.theme-dark .files-title a {
    color: var(--color-link, #8ab4f8);
}

:root.theme-dark .files-source,
:root.theme-dark .files-desc,
:root.theme-dark .files-col-size,
:root.theme-dark .files-col-date {
    color: var(--color-result-description-font, #9aa0a6);
}

:root.theme-dark .files-badge {
    background: var(--color-category-background, #1e3a5f);
    color: var(--color-category-font, #8ab4f8);
}

:root.theme-dark .files-empty {
    color: var(--color-result-description-font, #5f6368);
}

:root.theme-dark .torrent-stat-seeds {
    color: #81c995;
}

:root.theme-dark .torrent-stat-leeches {
    color: #f28b82;
}


/* ============================================
   FILES TABLE - FULL WIDTH LAYOUT
   ============================================ */

/* Hide sidebar for files category */
body:has(#files-results-wrapper) #sidebar {
    display: none !important;
}

/* Make files wrapper full width */
#files-results-wrapper {
    margin: 20px 0;
    width: 100%;
    max-width: 100%;
    padding: 0;
    grid-column: 1 / -1;
}

/* Alternative: Use CSS when files category is active */
#results:has(#files-results-wrapper) {
    display: block !important;
}

#results:has(#files-results-wrapper) #sidebar {
    display: none !important;
}


/* ============================================
   THEME TOGGLE SWITCH - iOS Style
   ============================================ */

.theme-toggle-wrapper {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
}

.theme-toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
    cursor: pointer;
}

.theme-toggle-switch input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.theme-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 26px;
}

.theme-toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* When checked (dark mode) */
.theme-toggle-switch input:checked + .theme-toggle-slider {
    background-color: var(--tn-primary, #ff9c00);
}

.theme-toggle-switch input:checked + .theme-toggle-slider:before {
    transform: translateX(24px);
}

/* Hover effects */
.theme-toggle-slider:hover {
    background-color: #b0b0b0;
}

.theme-toggle-switch input:checked + .theme-toggle-slider:hover {
    background-color: var(--tn-link-hover, #cc7a00);
}

/* Focus outline for accessibility */
.theme-toggle-switch input:focus + .theme-toggle-slider {
    box-shadow: 0 0 0 2px rgba(255, 156, 0, 0.3);
}

/* Dark mode adjustments */
:root.theme-dark .theme-toggle-slider {
    background-color: #555;
}

:root.theme-dark .theme-toggle-slider:hover {
    background-color: #666;
}

/* Theme Icons (Sun/Moon) */
.theme-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--color-base-font, #666);
    opacity: 0.5;
    transition: opacity 0.3s, color 0.3s, transform 0.3s;
}

.theme-icon svg {
    width: 20px;
    height: 20px;
}

/* Sun icon is more visible in light mode */
:root:not(.theme-dark) .theme-icon-sun {
    opacity: 1;
    color: var(--tn-primary, #ff9c00);
}

/* Moon icon is more visible in dark mode */
:root.theme-dark .theme-icon-moon {
    opacity: 1;
    color: var(--tn-primary, #ff9c00);
}

/* Hover effects for icons */
.theme-icon:hover {
    opacity: 1;
    transform: scale(1.1);
}


/* ========================================
   IMAGE RESULTS - TILED GRID LAYOUT
   ======================================== */

/* Container for all image results - use CSS Grid */
#main_results .result-images {
    display: inline-block;
    width: auto;
    margin: 5px;
    vertical-align: top;
}

/* Make image results container use flexbox wrap */
#main_results article.result-images {
    float: left;
    margin: 8px;
    background: var(--color-result-background);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

#main_results article.result-images:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Disable hover transform when detail panel is open to prevent flickering */
#results.image-detail-open article.result-images:hover {
    transform: none !important;
}

/* Also disable for selected image */
article.result-images[data-vim-selected]:hover {
    transform: none !important;
}

/* Image thumbnail styling */
#main_results .result-images .image_thumbnail {
    width: 200px;
    height: 200px;
    object-fit: cover;
    display: block;
}

/* Image title and source */
#main_results .result-images .title {
    display: block;
    padding: 5px 8px;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

#main_results .result-images .source {
    display: block;
    padding: 0 8px 5px;
    font-size: 11px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* Clear floats after image results */
#main_results .result-images ~ .result:not(.result-images) {
    clear: both;
}

/* ========================================
   VIDEO RESULTS - TILED GRID LAYOUT
   ======================================== */

/* Video results container */
#main_results article.result-videos {
    display: inline-block;
    width: 320px;
    margin: 8px;
    vertical-align: top;
    background: var(--color-result-background);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

#main_results article.result-videos:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Video thumbnail */
.video-thumbnail {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    background: #000;
}

.video-thumbnail-container {
    position: relative;
    width: 100%;
    height: 180px;
    background: #1a1a1a;
}

/* Play button overlay for videos */
.video-thumbnail-container::after {
    content: "▶";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    color: rgba(255,255,255,0.8);
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
    pointer-events: none;
}

/* Video info */
.video-info {
    padding: 10px;
}

.video-info h3 {
    margin: 0 0 5px;
    font-size: 14px;
    line-height: 1.3;
}

.video-info .content {
    font-size: 12px;
    color: #666;
    margin: 0;
}

/* Video duration badge */
.video-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
}

/* ========================================
   MAP RESULTS - IMPROVED DISPLAY
   ======================================== */

/* Make map boxes larger and more prominent */
.osm-map-box {
    width: 100%;
    height: 300px !important;
    min-height: 300px;
    border-radius: 8px;
    overflow: hidden;
}

/* Map result container */
#main_results article[class*="map"] {
    margin-bottom: 15px;
}

/* Fix map images */
.osm-map-box img {
    max-width: 100%;
    height: auto;
}

/* Leaflet map container fix */
.leaflet-container {
    width: 100% !important;
    height: 300px !important;
}


/* ============================================
   SEARCH FIELD WIDTH OVERRIDE & NAVIGATION OVERLAP FIX
   ============================================ */

/* Reserve space for absolutely positioned #links_on_top navigation */
#search_header {
    padding-left: 2rem;
    padding-right: 22rem; /* Reserve space for About, Preferences, Theme Toggle */
}

body.results_endpoint #search_header {
    padding-right: 22rem; /* Ensure space on results page */
}

/* Make search box scale properly */
.search_box {
    width: 100%;
    max-width: 100%;
}

#search_view {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 1200px) {
    #search_header {
        padding-right: 20rem; /* Slightly less space on smaller screens */
    }
}

@media (max-width: 992px) {
    #search_header {
        padding-right: 18rem; /* Even less space */
    }
}

@media (max-width: 768px) {
    #search_header {
        padding-left: 0.5rem;
        padding-right: 0.5rem; /* Let navigation wrap or stack on mobile */
    }
    
    /* On mobile, the navigation may need to stack */
    #links_on_top {
        position: relative !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
        padding: 0.5rem !important;
    }
}

/* ============================================
   URL POSITION ADJUSTMENT
   ============================================ */

/* Add spacing above URL when it's below description */
.result .url_wrapper {
    margin-top: 8px;
    margin-bottom: 4px;
}

/* ========================================
   MUSIC RESULTS - Card Grid Layout
   ======================================== */

#music-results-wrapper {
    width: 100%;
    max-width: 100%;
    padding: 1rem;
}

.music-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.25rem;
    width: 100%;
}

.music-card {
    background: var(--color-result-background, #fff);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

.music-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.music-thumbnail-wrapper {
    position: relative;
    width: 100%;
    padding-top: 100%; /* 1:1 aspect ratio */
    background: var(--color-search-background, #f1f3f4);
    overflow: hidden;
}

.music-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.music-thumbnail.music-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.music-placeholder svg {
    width: 48px;
    height: 48px;
    color: rgba(255, 255, 255, 0.8);
}

.music-play-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--tn-btn-primary-bg, #ff9c00);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.music-play-btn svg {
    width: 24px;
    height: 24px;
    color: #fff;
}

.music-card:hover .music-play-btn {
    opacity: 1;
    transform: scale(1);
}

.music-play-btn:hover {
    background: var(--color-btn-background-hover, #cc7a00);
}

.music-info {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex: 1;
}

.music-title {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
}

.music-title a {
    color: var(--tn-link, #ff9c00);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.music-title a:hover {
    text-decoration: underline;
}

.music-artist {
    font-size: 0.8125rem;
    color: var(--color-result-description-font, #5f6368);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.music-meta {
    display: flex;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--color-result-url-font, #70757a);
}

.music-year,
.music-duration {
    display: flex;
    align-items: center;
}

.music-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-result-border, #e8eaed);
}

.music-source {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: capitalize;
    padding: 3px 8px;
    background: var(--color-category-background, #e8f0fe);
    color: var(--tn-badge-text, #1967d2);
    border-radius: 10px;
}

.music-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: var(--color-result-url-font, #70757a);
    transition: background 0.2s ease, color 0.2s ease;
}

.music-link:hover {
    background: var(--color-search-background, #f1f3f4);
    color: var(--tn-link, #ff9c00);
}

.music-link svg {
    width: 16px;
    height: 16px;
}

/* Music Dark Mode */
:root.theme-dark .music-card {
    background: var(--color-result-background, #202124);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

:root.theme-dark .music-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

:root.theme-dark .music-thumbnail-wrapper {
    background: var(--color-search-background, #303134);
}

:root.theme-dark .music-title a {
    color: var(--color-link, #8ab4f8);
}

:root.theme-dark .music-artist {
    color: var(--color-result-description-font, #9aa0a6);
}

:root.theme-dark .music-meta {
    color: var(--color-result-url-font, #9aa0a6);
}

:root.theme-dark .music-footer {
    border-top-color: var(--color-result-border, #3c4043);
}

:root.theme-dark .music-source {
    background: var(--color-category-background, #1e3a5f);
    color: var(--color-category-font, #8ab4f8);
}

:root.theme-dark .music-link:hover {
    background: var(--color-search-background-hover, #3c4043);
    color: var(--color-link, #8ab4f8);
}

/* Music Responsive */
@media (max-width: 768px) {
    .music-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 1rem;
    }
    
    .music-info {
        padding: 0.75rem;
    }
    
    .music-title {
        font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    .music-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
}

/* ========================================
   GAMES CATEGORY - Card Grid Layout
   ======================================== */

#games-results-wrapper {
    width: 100%;
    max-width: 100%;
    padding: 1rem;
}

.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
    width: 100%;
}

.games-card {
    background: var(--color-result-background, #fff);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

.games-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.games-thumbnail-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio */
    background: var(--color-search-background, #f1f3f4);
    overflow: hidden;
}

.games-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.games-thumbnail.games-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.games-placeholder svg {
    width: 48px;
    height: 48px;
    color: rgba(255, 255, 255, 0.8);
}

.games-price-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 10px;
    background: var(--tn-btn-primary-bg, #ff9c00);
    color: #fff;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
}

.games-price-badge.games-sale {
    background: #34a853;
}

.games-info {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.games-title {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
}

.games-title a {
    color: var(--tn-link, #ff9c00);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.games-title a:hover {
    text-decoration: underline;
}

.games-description {
    font-size: 0.8125rem;
    color: var(--color-result-description-font, #5f6368);
    line-height: 1.4;
}

.games-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.platform-badge {
    font-size: 0.6875rem;
    padding: 2px 6px;
    background: var(--color-search-background, #f1f3f4);
    border-radius: 4px;
    color: var(--color-result-description-font, #5f6368);
}

.games-rating {
    font-size: 0.8125rem;
    color: #f4b400;
    font-weight: 500;
}

.games-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-result-border, #e8eaed);
}

.games-source {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: capitalize;
    padding: 3px 8px;
    background: var(--color-category-background, #e8f0fe);
    color: var(--tn-badge-text, #1967d2);
    border-radius: 10px;
}

.games-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: var(--color-result-url-font, #70757a);
    transition: background 0.2s ease;
}

.games-link:hover {
    background: var(--color-search-background, #f1f3f4);
    color: var(--tn-link, #ff9c00);
}

.games-link svg {
    width: 16px;
    height: 16px;
}

/* ========================================
   SHOPPING CATEGORY - Product Cards
   ======================================== */

#shopping-results-wrapper {
    width: 100%;
    max-width: 100%;
    padding: 1rem;
}

.shopping-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.25rem;
    width: 100%;
}

.shopping-card {
    background: var(--color-result-background, #fff);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

.shopping-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.shopping-thumbnail-wrapper {
    position: relative;
    width: 100%;
    padding-top: 100%; /* 1:1 aspect ratio */
    background: #fff;
    overflow: hidden;
}

.shopping-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
}

.shopping-thumbnail.shopping-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    padding: 0;
}

.shopping-placeholder svg {
    width: 48px;
    height: 48px;
    color: rgba(255, 255, 255, 0.8);
}

.shopping-discount-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 8px;
    background: #ea4335;
    color: #fff;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
}

.shopping-info {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex: 1;
}

.shopping-title {
    font-size: 0.875rem;
    line-height: 1.3;
}

.shopping-title a {
    color: var(--color-base-font, #202124);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.shopping-title a:hover {
    color: var(--tn-link, #ff9c00);
}

.shopping-price-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.shopping-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-base-font, #202124);
}

.shopping-original-price {
    font-size: 0.875rem;
    color: var(--color-result-url-font, #70757a);
    text-decoration: line-through;
}

.shopping-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
}

.rating-stars {
    color: #f4b400;
    letter-spacing: -2px;
}

.rating-value {
    color: var(--color-result-description-font, #5f6368);
}

.shopping-description {
    font-size: 0.75rem;
    color: var(--color-result-description-font, #5f6368);
}

.shopping-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 0.5rem;
}

.shopping-source {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: capitalize;
    padding: 3px 8px;
    background: var(--color-category-background, #e8f0fe);
    color: var(--tn-badge-text, #1967d2);
    border-radius: 10px;
}

.shopping-free-shipping {
    font-size: 0.6875rem;
    color: #34a853;
    font-weight: 500;
}

/* ========================================
   BOOKS CATEGORY - Book Cards
   ======================================== */

#books-results-wrapper {
    width: 100%;
    max-width: 100%;
    padding: 1rem;
}

.books-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1.5rem;
    width: 100%;
}

.books-card {
    background: var(--color-result-background, #fff);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

.books-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.books-thumbnail-wrapper {
    position: relative;
    width: 100%;
    padding-top: 150%; /* 2:3 book cover ratio */
    background: var(--color-search-background, #f1f3f4);
    overflow: hidden;
}

.books-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.books-thumbnail.books-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.books-placeholder svg {
    width: 48px;
    height: 48px;
    color: rgba(255, 255, 255, 0.8);
}

.books-info {
    padding: 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex: 1;
}

.books-title {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
}

.books-title a {
    color: var(--tn-link, #ff9c00);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.books-title a:hover {
    text-decoration: underline;
}

.books-author {
    font-size: 0.8125rem;
    color: var(--color-result-description-font, #5f6368);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.books-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-result-url-font, #70757a);
}

.books-format-badge {
    padding: 2px 6px;
    background: var(--color-search-background, #f1f3f4);
    border-radius: 4px;
    font-size: 0.625rem;
    text-transform: uppercase;
}

.books-rating {
    font-size: 0.8125rem;
    color: #f4b400;
}

.books-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-result-border, #e8eaed);
}

.books-source {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: capitalize;
    padding: 2px 6px;
    background: var(--color-category-background, #e8f0fe);
    color: var(--tn-badge-text, #1967d2);
    border-radius: 8px;
}

.books-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    color: var(--color-result-url-font, #70757a);
}

.books-link:hover {
    background: var(--color-search-background, #f1f3f4);
    color: var(--tn-link, #ff9c00);
}

.books-link svg {
    width: 14px;
    height: 14px;
}

/* ========================================
   MOVIES CATEGORY - Poster Cards
   ======================================== */

#movies-results-wrapper {
    width: 100%;
    max-width: 100%;
    padding: 1rem;
}

.movies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.5rem;
    width: 100%;
}

.movies-card {
    background: var(--color-result-background, #fff);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

.movies-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

.movies-poster-wrapper {
    position: relative;
    width: 100%;
    padding-top: 150%; /* 2:3 movie poster ratio */
    background: #1a1a2e;
    overflow: hidden;
}

.movies-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.movies-poster.movies-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ee0979 0%, #ff6a00 100%);
}

.movies-placeholder svg {
    width: 48px;
    height: 48px;
    color: rgba(255, 255, 255, 0.8);
}

.movies-score-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.75);
    color: #f4b400;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    backdrop-filter: blur(4px);
}

.movies-info {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex: 1;
}

.movies-title {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
}

.movies-title a {
    color: var(--tn-link, #ff9c00);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.movies-title a:hover {
    text-decoration: underline;
}

.movies-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-result-url-font, #70757a);
}

.movies-rating-badge {
    padding: 2px 6px;
    background: var(--color-search-background, #f1f3f4);
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: 600;
}

.movies-genres {
    font-size: 0.75rem;
    color: var(--color-result-description-font, #5f6368);
}

.movies-description {
    font-size: 0.8125rem;
    color: var(--color-result-description-font, #5f6368);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.movies-streaming {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    padding: 4px 8px;
    background: var(--color-search-background, #f1f3f4);
    border-radius: 6px;
    margin-top: 0.25rem;
}

.streaming-label {
    font-size: 0.875rem;
}

.streaming-providers {
    color: var(--color-result-description-font, #5f6368);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.movies-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-result-border, #e8eaed);
}

.movies-source {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: capitalize;
    padding: 3px 8px;
    background: var(--color-category-background, #e8f0fe);
    color: var(--tn-badge-text, #1967d2);
    border-radius: 10px;
}

.movies-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: var(--color-result-url-font, #70757a);
}

.movies-link:hover {
    background: var(--color-search-background, #f1f3f4);
    color: var(--tn-link, #ff9c00);
}

.movies-link svg {
    width: 16px;
    height: 16px;
}

/* ========================================
   DARK MODE - All Categories
   ======================================== */

:root.theme-dark .games-card,
:root.theme-dark .shopping-card,
:root.theme-dark .books-card,
:root.theme-dark .movies-card {
    background: var(--color-result-background, #202124);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

:root.theme-dark .games-card:hover,
:root.theme-dark .shopping-card:hover,
:root.theme-dark .books-card:hover,
:root.theme-dark .movies-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

:root.theme-dark .games-thumbnail-wrapper,
:root.theme-dark .shopping-thumbnail-wrapper,
:root.theme-dark .books-thumbnail-wrapper {
    background: var(--color-search-background, #303134);
}

:root.theme-dark .games-title a,
:root.theme-dark .books-title a,
:root.theme-dark .movies-title a {
    color: var(--color-link, #8ab4f8);
}

:root.theme-dark .shopping-title a {
    color: var(--color-base-font, #e8eaed);
}

:root.theme-dark .shopping-title a:hover {
    color: var(--color-link, #8ab4f8);
}

:root.theme-dark .shopping-price {
    color: var(--color-base-font, #e8eaed);
}

:root.theme-dark .games-description,
:root.theme-dark .shopping-description,
:root.theme-dark .books-author,
:root.theme-dark .movies-genres,
:root.theme-dark .movies-description {
    color: var(--color-result-description-font, #9aa0a6);
}

:root.theme-dark .games-meta,
:root.theme-dark .books-meta,
:root.theme-dark .movies-meta {
    color: var(--color-result-url-font, #9aa0a6);
}

:root.theme-dark .games-footer,
:root.theme-dark .books-footer,
:root.theme-dark .movies-footer {
    border-top-color: var(--color-result-border, #3c4043);
}

:root.theme-dark .games-source,
:root.theme-dark .shopping-source,
:root.theme-dark .books-source,
:root.theme-dark .movies-source {
    background: var(--color-category-background, #1e3a5f);
    color: var(--color-category-font, #8ab4f8);
}

:root.theme-dark .platform-badge,
:root.theme-dark .books-format-badge,
:root.theme-dark .movies-rating-badge,
:root.theme-dark .movies-streaming {
    background: var(--color-search-background, #3c4043);
    color: var(--color-result-description-font, #9aa0a6);
}

:root.theme-dark .games-link:hover,
:root.theme-dark .books-link:hover,
:root.theme-dark .movies-link:hover {
    background: var(--color-search-background-hover, #3c4043);
    color: var(--color-link, #8ab4f8);
}

/* ========================================
   RESPONSIVE - All Categories
   ======================================== */

@media (max-width: 768px) {
    .games-grid,
    .shopping-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 1rem;
    }
    
    .books-grid,
    .movies-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .games-grid,
    .shopping-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .books-grid,
    .movies-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .games-info,
    .shopping-info,
    .books-info,
    .movies-info {
        padding: 0.75rem;
    }
}

/* ========================================
   INFOBOX ICON LINKS
   ======================================== */

.infobox-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-result-border, #e8eaed);
}

.infobox-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: all 0.2s ease;
    background: var(--color-search-background, #f1f3f4);
    color: var(--color-base-font, #202124);
}

.infobox-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
}

.link-label {
    white-space: nowrap;
}

/* Service-specific colors */
.link-wikipedia {
    background: #fff;
    border: 1px solid #a2a9b1;
}
.link-wikipedia:hover {
    background: #f8f9fa;
}
.link-wikipedia .link-icon {
    color: #000;
    font-family: 'Linux Libertine', 'Georgia', serif;
    font-size: 1rem;
}

.link-youtube {
    background: #ff0000;
    color: #fff;
}
.link-youtube:hover {
    background: #cc0000;
}

.link-twitter {
    background: #000;
    color: #fff;
}
.link-twitter:hover {
    background: #333;
}

.link-facebook {
    background: #1877f2;
    color: #fff;
}
.link-facebook:hover {
    background: #166fe5;
}
.link-facebook .link-icon {
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 700;
}

.link-instagram {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    color: #fff;
}
.link-instagram:hover {
    opacity: 0.9;
}

.link-musicbrainz {
    background: #eb743b;
    color: #fff;
}
.link-musicbrainz:hover {
    background: #d66835;
}

.link-wikidata {
    background: #006699;
    color: #fff;
}
.link-wikidata:hover {
    background: #005580;
}
.link-wikidata .link-icon {
    font-size: 0.625rem;
    font-weight: 700;
}

.link-spotify {
    background: #1db954;
    color: #fff;
}
.link-spotify:hover {
    background: #1aa34a;
}

.link-soundcloud {
    background: #ff5500;
    color: #fff;
}
.link-soundcloud:hover {
    background: #ee4400;
}

.link-github {
    background: #24292e;
    color: #fff;
}
.link-github:hover {
    background: #2f363d;
}

.link-linkedin {
    background: #0077b5;
    color: #fff;
}
.link-linkedin:hover {
    background: #006699;
}
.link-linkedin .link-icon {
    font-weight: 700;
    font-size: 0.75rem;
}

.link-imdb {
    background: #f5c518;
    color: #000;
}
.link-imdb:hover {
    background: #e4b508;
}
.link-imdb .link-icon {
    font-size: 0.625rem;
    font-weight: 700;
}

.link-official {
    background: var(--tn-btn-primary-bg, #ff9c00);
    color: #fff;
}
.link-official:hover {
    background: var(--color-btn-background-hover, #cc7a00);
}

.link-discord {
    background: #5865f2;
    color: #fff;
}
.link-discord:hover {
    background: #4752c4;
}

.link-tiktok {
    background: #000;
    color: #fff;
}
.link-tiktok:hover {
    background: #333;
}

.link-reddit {
    background: #ff4500;
    color: #fff;
}
.link-reddit:hover {
    background: #e03d00;
}
.link-reddit .link-icon {
    font-size: 0.75rem;
    font-weight: 700;
}

.link-twitch {
    background: #9146ff;
    color: #fff;
}
.link-twitch:hover {
    background: #7c3aed;
}

.link-default {
    background: var(--color-search-background, #f1f3f4);
    color: var(--tn-link, #ff9c00);
}
.link-default:hover {
    background: var(--color-search-background-hover, #e8eaed);
}

/* Dark mode adjustments */
:root.theme-dark .infobox-links {
    border-top-color: var(--color-result-border, #3c4043);
}

:root.theme-dark .infobox-link {
    background: var(--color-search-background, #303134);
    color: var(--color-base-font, #e8eaed);
}

:root.theme-dark .link-wikipedia {
    background: #303134;
    border-color: #5f6368;
}
:root.theme-dark .link-wikipedia:hover {
    background: #3c4043;
}
:root.theme-dark .link-wikipedia .link-icon {
    color: #e8eaed;
}

:root.theme-dark .link-default {
    background: var(--color-search-background, #303134);
    color: var(--color-link, #8ab4f8);
}

/* Responsive - stack on mobile */
@media (max-width: 480px) {
    .infobox-links {
        gap: 6px;
    }
    
    .infobox-link {
        padding: 5px 10px;
        font-size: 0.75rem;
    }
    
    .link-label {
        display: none;
    }
    
    .infobox-link {
        padding: 8px;
        border-radius: 50%;
    }
    
    .link-icon {
        font-size: 1rem;
    }
}

/* ========================================
   INFOBOX ICON LINKS - Square Icons
   ======================================== */

.infobox-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-result-border, #e8eaed);
}

.infobox-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
    background: var(--color-search-background, #f1f3f4);
    color: var(--color-base-font, #202124);
    position: relative;
}

.infobox-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
}

/* Hide label by default, show as tooltip on hover */
.link-label {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
    z-index: 100;
}

.link-label::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.85);
}

.infobox-link:hover .link-label {
    opacity: 1;
    visibility: visible;
}

/* Service-specific colors */
.link-wikipedia {
    background: #fff;
    border: 1px solid #a2a9b1;
}
.link-wikipedia:hover {
    background: #f8f9fa;
}
.link-wikipedia .link-icon {
    color: #000;
    font-family: 'Linux Libertine', 'Georgia', serif;
    font-size: 1.125rem;
}

.link-youtube {
    background: #ff0000;
    color: #fff;
}
.link-youtube:hover {
    background: #cc0000;
}

.link-twitter {
    background: #000;
    color: #fff;
}
.link-twitter:hover {
    background: #333;
}

.link-facebook {
    background: #1877f2;
    color: #fff;
}
.link-facebook:hover {
    background: #166fe5;
}
.link-facebook .link-icon {
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
}

.link-instagram {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    color: #fff;
}
.link-instagram:hover {
    opacity: 0.9;
}

.link-musicbrainz {
    background: #eb743b;
    color: #fff;
}
.link-musicbrainz:hover {
    background: #d66835;
}

.link-wikidata {
    background: #006699;
    color: #fff;
}
.link-wikidata:hover {
    background: #005580;
}
.link-wikidata .link-icon {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.link-spotify {
    background: #1db954;
    color: #fff;
}
.link-spotify:hover {
    background: #1aa34a;
}
.link-spotify .link-icon {
    font-size: 1.5rem;
}

.link-soundcloud {
    background: #ff5500;
    color: #fff;
}
.link-soundcloud:hover {
    background: #ee4400;
}

.link-github {
    background: #24292e;
    color: #fff;
}
.link-github:hover {
    background: #2f363d;
}

.link-linkedin {
    background: #0077b5;
    color: #fff;
}
.link-linkedin:hover {
    background: #006699;
}
.link-linkedin .link-icon {
    font-weight: 700;
    font-size: 0.875rem;
}

.link-imdb {
    background: #f5c518;
    color: #000;
}
.link-imdb:hover {
    background: #e4b508;
}
.link-imdb .link-icon {
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.link-official {
    background: var(--tn-btn-primary-bg, #ff9c00);
    color: #fff;
}
.link-official:hover {
    background: var(--color-btn-background-hover, #cc7a00);
}

.link-discord {
    background: #5865f2;
    color: #fff;
}
.link-discord:hover {
    background: #4752c4;
}

.link-tiktok {
    background: #000;
    color: #fff;
}
.link-tiktok:hover {
    background: #333;
}

.link-reddit {
    background: #ff4500;
    color: #fff;
}
.link-reddit:hover {
    background: #e03d00;
}
.link-reddit .link-icon {
    font-size: 0.75rem;
    font-weight: 700;
}

.link-twitch {
    background: #9146ff;
    color: #fff;
}
.link-twitch:hover {
    background: #7c3aed;
}

.link-default {
    background: var(--color-search-background, #f1f3f4);
    color: var(--tn-link, #ff9c00);
}
.link-default:hover {
    background: var(--color-search-background-hover, #e8eaed);
}

/* Dark mode adjustments */
:root.theme-dark .infobox-links {
    border-top-color: var(--color-result-border, #3c4043);
}

:root.theme-dark .infobox-link {
    background: var(--color-search-background, #303134);
    color: var(--color-base-font, #e8eaed);
}

:root.theme-dark .link-wikipedia {
    background: #303134;
    border-color: #5f6368;
}
:root.theme-dark .link-wikipedia:hover {
    background: #3c4043;
}
:root.theme-dark .link-wikipedia .link-icon {
    color: #e8eaed;
}

:root.theme-dark .link-default {
    background: var(--color-search-background, #303134);
    color: var(--color-link, #8ab4f8);
}

:root.theme-dark .link-label {
    background: rgba(255, 255, 255, 0.9);
    color: #202124;
}

:root.theme-dark .link-label::after {
    border-top-color: rgba(255, 255, 255, 0.9);
}

/* ========================================
   RESPONSE TIME AND EMPTY SIDEBAR - JavaScript-based
   ======================================== */

/* Add space above search header to prevent overlap */
body.results_endpoint #search_header {
    padding-top: 4.5rem;
}

/* When JavaScript adds .no-sidebar class, adjust layout */
#results.no-sidebar {
    grid-template-areas: 
        "corrections"
        "answers"
        "urls"
        "pagination" !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: min-content min-content 1fr min-content !important;
    max-width: 1400px !important;
    width: calc(100% - 12rem) !important;
    margin-left: 10rem !important;
    margin-right: 2rem !important;
}

#results.no-sidebar #urls,
#results.no-sidebar #movies-results-wrapper,
#results.no-sidebar #books-results-wrapper,
#results.no-sidebar #games-results-wrapper,
#results.no-sidebar #music-results-wrapper {
    width: 100% !important;
    max-width: 100% !important;
}

/* ========================================
   NEWS CATEGORY - TWO COLUMN LAYOUT
   ======================================== */

/* News results in two columns */
#urls.news-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
}

/* Make news articles fit in column layout */
#urls .result.category-news {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 !important;
}

/* Responsive: single column on smaller screens */
@media (max-width: 768px) {
    #urls.news-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ========================================
   FINAL BLUE COLOR OVERRIDES
   Override any remaining blue colors from base theme
   ======================================== */

/* Time range filter buttons - force orange on active/selected */
.search_filters button.active,
.search_filters button[selected],
.search_filters .button.active,
#search_filters button.active,
button.btn.active,
.btn.active,
input[type="radio"]:checked + label,
input[type="checkbox"]:checked + label {
    background-color: var(--tn-primary, #ff9c00) !important;
    background: var(--tn-primary, #ff9c00) !important;
    border-color: var(--tn-primary, #ff9c00) !important;
    color: var(--tn-btn-primary-text, #000) !important;
}

/* Search result link titles - force orange */
.result h3 a,
.result .url_wrapper a,
.result-link,
.result-title,
#urls h3 a,
#urls .result h3 a,
.article h3 a,
article h3 a {
    color: var(--tn-link, #ff9c00) !important;
}

.result h3 a:hover,
.result .url_wrapper a:hover,
.result-link:hover,
#urls h3 a:hover,
.article h3 a:hover {
    color: var(--tn-link-hover, #cc7a00) !important;
}

/* Base button color override */
:root {
    --color-btn-background: var(--tn-primary, #ff9c00) !important;
    --color-btn-background-hover: var(--tn-link-hover, #cc7a00) !important;
}

/* ========================================
   CATEGORY BUTTON AND RESULT STYLING FIXES
   ======================================== */

/* 1. Remove icon from selected category button */
button.category_button.selected svg,
button.category_button.selected .ion-icon,
button.category_button.selected .ion-icon-small,
button.category_button svg,
button.category_button .ion-icon,
button.category_button .ion-icon-small {
    display: none !important;
}

/* 2. Remove ALL borders from results - comprehensive rules */
.result.result-default.category-general,
.result.result-default,
.result,
#urls .result,
#urls .result.result-default,
#urls .result.result-default.category-general,
article.result,
.result-wrapper {
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* 3. Result text - dark gray in light mode */
.result.result-default.category-general,
.result.result-default.category-general .content,
.result.result-default.category-general p,
.result.result-default.category-general .result_content,
.result .content,
.result p,
#urls .result .content,
#urls .result p {
    color: #333333 !important;
}

/* 4. Result LINK colors - dark gray in light mode (override blue/yellow) */
.result.result-default.category-general a,
.result.result-default a,
.result a,
#urls .result a,
#urls .result.result-default.category-general a,
.result .url_wrapper a,
.result .content a {
    color: #333333 !important;
}

.result.result-default.category-general a:hover,
.result.result-default a:hover,
.result a:hover,
#urls .result a:hover {
    color: #555555 !important;
}

/* 5. Result text - light gray in dark mode */
:root.theme-dark .result.result-default.category-general,
:root.theme-dark .result.result-default.category-general .content,
:root.theme-dark .result.result-default.category-general p,
:root.theme-dark .result.result-default.category-general .result_content,
:root.theme-dark .result .content,
:root.theme-dark .result p,
:root.theme-dark #urls .result .content,
:root.theme-dark #urls .result p {
    color: #a1a1aa !important;
}

/* 6. Result LINK colors - light gray in dark mode (override blue/yellow) */
:root.theme-dark .result.result-default.category-general a,
:root.theme-dark .result.result-default a,
:root.theme-dark .result a,
:root.theme-dark #urls .result a,
:root.theme-dark #urls .result.result-default.category-general a,
:root.theme-dark .result .url_wrapper a,
:root.theme-dark .result .content a {
    color: #a1a1aa !important;
}

:root.theme-dark .result.result-default.category-general a:hover,
:root.theme-dark .result.result-default a:hover,
:root.theme-dark .result a:hover,
:root.theme-dark #urls .result a:hover {
    color: #d4d4d8 !important;
}

/* ========================================
   ADDITIONAL STYLING FIXES
   ======================================== */

/* 1. Fix Highlight Color - gray to match text */
.highlight,
.result .highlight,
#urls .result .highlight {
    color: #333333 !important;
    background: transparent !important;
}

:root.theme-dark .highlight,
:root.theme-dark .result .highlight,
:root.theme-dark #urls .result .highlight {
    color: #a1a1aa !important;
    background: transparent !important;
}

/* 2. Remove Gray Background from Results in Dark Mode */
:root.theme-dark .result.result-default.category-general,
:root.theme-dark .result.result-default,
:root.theme-dark .result,
:root.theme-dark #urls .result {
    background: transparent !important;
    background-color: transparent !important;
}

/* 3. Fix View Toggle Button in Dark Mode */
:root.theme-dark .view-toggle-btn {
    background: transparent !important;
    background-color: transparent !important;
    border-color: var(--tn-border, #3f3f46) !important;
    color: var(--tn-text-secondary, #a1a1aa) !important;
}

:root.theme-dark .view-toggle-btn.active,
:root.theme-dark .view-toggle-btn.selected,
:root.theme-dark .view-toggle-btn:checked {
    background: var(--tn-primary, #ff9c00) !important;
    border-color: var(--tn-primary, #ff9c00) !important;
    color: var(--tn-btn-primary-text, #000) !important;
}

/* 4. Remove Drop Shadow from Search Box */
.search_box {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}

/* 5. Remove Drop Shadow and Gradient from Information Box */
.infobox,
.info-box,
.information-box,
.answer-box,
.result-info {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    background: var(--tn-bg-secondary, #f5f5f5) !important;
    background-image: none !important;
}

:root.theme-dark .infobox,
:root.theme-dark .info-box,
:root.theme-dark .information-box,
:root.theme-dark .answer-box,
:root.theme-dark .result-info {
    box-shadow: none !important;
    background: var(--tn-bg-secondary, #27272a) !important;
    background-image: none !important;
}

/* ========================================
   STANDARDIZED BORDERS
   ======================================== */

/* Standardized Border - Search Box */
.search_box {
    border: var(--tn-border-style, 1px solid #dddddd) !important;
    border-radius: var(--tn-border-radius, 8px) !important;
}

:root.theme-dark .search_box {
    border: 1px solid var(--tn-border, #3f3f46) !important;
}

/* Standardized Border - Answer Box */
.answer {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    background: transparent !important;
    background-image: none !important;
    border: var(--tn-border-style, 1px solid #dddddd) !important;
    border-radius: var(--tn-border-radius, 8px) !important;
}

:root.theme-dark .answer {
    box-shadow: none !important;
    background: transparent !important;
    background-image: none !important;
    border: 1px solid var(--tn-border, #3f3f46) !important;
}

/* ========================================
   H3 TEXT COLOR FIX
   ======================================== */

/* H3 text - gray in light mode (override yellow) */
.result h3,
.result h3 a,
#urls .result h3,
#urls .result h3 a,
.result-default h3,
.result-default h3 a,
article h3,
article h3 a {
    color: #333333 !important;
}

/* H3 text - light gray in dark mode */
:root.theme-dark .result h3,
:root.theme-dark .result h3 a,
:root.theme-dark #urls .result h3,
:root.theme-dark #urls .result h3 a,
:root.theme-dark .result-default h3,
:root.theme-dark .result-default h3 a,
:root.theme-dark article h3,
:root.theme-dark article h3 a {
    color: #a1a1aa !important;
}