:root {
    /* Core dark theme colors from your existing styles */
    --site-dark-bg: #1a1a1a;
    --site-light-text: #e0e0e0;
    --site-accent-green: #58d68d;
    --site-secondary-dark-bg: #222222; /* e.g., header, sidebar bg */
    --site-region-active-green: var(--site-accent-green);
    --site-input-bg: #282828;
    --site-input-border: #444;
    --site-input-placeholder: #888;
    --site-muted-text: #b0b0b0; /* e.g., card paragraph text, inactive tabs */

    /* --- Define variables expected by footer-dark-mode-channel.css --- */

    /* Backgrounds for Footer */
    --dark-bg-primary: var(--site-dark-bg);          /* Main page dark background */
    --dark-bg-secondary: var(--site-secondary-dark-bg); /* Footer's own background, slightly lighter */

    /* Text Colors for Footer */
    --dark-text-primary: var(--site-light-text);       /* Primary light text */
    --dark-text-secondary: var(--site-muted-text);     /* Secondary light text (e.g., links, less prominent text) */
    --dark-text-muted: var(--site-input-placeholder);  /* Muted light text (e.g., copyright, fine print) */

    /* Input-specific Colors for Footer Newsletter */
    --dark-input-bg: var(--site-input-bg);
    --dark-input-border: var(--site-input-border);
    --dark-input-placeholder: var(--site-input-placeholder);

    /* Accent Colors for Footer */
    --dark-accent-green: var(--site-accent-green);
    --dark-accent-green-hover: #4ac77c; /* You can create a variable for this too if needed */

    /* Border Color for Footer */
    --dark-border-color: var(--site-input-border); /* For dividers etc. */

    /* --- Variables from thq/dl namespace --- */
    /* This is crucial: if this variable is used for text, make it light in dark mode. */
    --dl-color-theme-neutral-dark: var(--dark-text-primary); /* Override to be light */

    /* If there are other 'dl-' or 'thq-' color variables used in the footer's HTML/CSS
       that need adjustment for dark mode, define their dark mode values here. For example:
       --dl-color-theme-primary: var(--site-accent-green);
       --thq-color-grey-600: var(--dark-text-secondary);
    */
}
/* General Body & Typography - DARK MODE BASE */
body {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    background-color: #1a1a1a; /* Ecosia-like dark background */
    color: #e0e0e0; /* Light text for dark mode */
    margin: 0; /* Ensure no default body margin */
}

h3,
summary {
    font-family: 'Merriweather', serif;
    color: #58d68d; /* Ecosia-like vibrant green for headings */
    margin-bottom: 1rem;
}

/* Header & Navigation - DARK MODE */
header.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    background: #222222; /* Dark header background */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); /* Stronger shadow on dark */
    flex-wrap: wrap;
    border-bottom: 1px solid #333; /* Darker border */
}

.navbar-logo img {
    height: 60px;
}

.tabs {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.tabs a {
    text-decoration: none;
    font-weight: 600;
    color: #b0b0b0; /* Light grey for inactive tabs */
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    transition: background-color 0.2s ease, color 0.2s ease;
    text-transform: capitalize;
    letter-spacing: normal;
    font-size: 1rem;
}

.tabs a.active,
.tabs a:hover {
    background-color: #2f6f35; /* Your brand green for active/hover */
    color: white; /* White text on green */
}

/* Main Layout */
main {
    display: flex;
    gap: 2.5rem;
    padding: 2.5rem 3rem;
    flex-wrap: nowrap;
    max-width: 1200px;
    margin: 0 auto;
}

.search-area {
    flex: 2;
    max-width: 68%;
    order: 1;
}

.search-input-wrapper {
    position: relative;
    flex-grow: 1;
    max-width: 650px;
}

#custom-search-input {
    width: 100%; /* Input must take 100% of its parent's content box */
    /* Initial padding on left/top/bottom */
    /* Adjusted padding-right. Fine-tune if text is too close to icon. */
    padding: 12px 2px 12px 20px;
    border: 1px solid #444;
    border-radius: 25px; /* This creates the curved visual */
    font-size: 1.05rem;
    background-color: #282828;
    color: #e0e0e0;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    outline: none; /* Remove default focus outline */
    margin: 0; /* CRITICAL: Ensure no default input margins */
    display: block; /* Ensure it behaves as a block for width calculation */
}

#custom-search-input:focus {
    outline: none;
    border-color: #58d68d; /* Vibrant green focus */
}

/* NEW: Styles for the inline search icon button */
.search-icon-button {
    position: absolute;
    right: 15px; /* Keep this to position it from the right edge of the input wrapper */
    top: 50%;
    transform: translateY(-50%); /* Center vertically */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 1; /* Prevent extra spacing around SVG */
    display: flex; /* Helps in centering SVG */
    align-items: center;
    justify-content: center;
    color: #b0b0b0; /* Color for the icon */
    transition: color 0.2s ease;
    /* Ensure it's clickable and doesn't get hidden by input focus states */
    z-index: 1;
}

.search-icon-button:hover {
    color: #e0e0e0; /* Lighter color on hover */
}

.search-icon-button .search-icon {
    width: 20px; /* Adjusted icon size for a better fit. Was 24px */
    height: 20px; /* Adjusted icon size for a better fit. Was 24px */
    fill: currentColor; /* Inherit color from parent (.search-icon-button) */
}

/* ALL SIDEBAR AND CARD STYLES HAVE BEEN MOVED TO sidebar.css
*/

/* Styles for the new exclude websites card (specific to its elements) */
.exclude-websites-card {
    margin-top: 20px;
}
.exclude-websites-card input[type="text"] {
    width: calc(100% - 22px); /* Account for padding */
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #555;
    border-radius: 5px;
    background-color: #333;
    color: #eee;
}

#exclusion-list {
    margin-top: 15px;
    max-height: 150px;
    overflow-y: auto;
    border-top: 1px solid #444;
    padding-top: 10px;
}
#exclusion-list div {
    background-color: #444;
    padding: 8px;
    margin-bottom: 5px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#exclusion-list div span {
    color: #eee;
    flex-grow: 1;
}
#exclusion-list div button {
    width: auto;
    padding: 5px 10px;
    margin-left: 10px;
    background-color: #d9534f;
    font-weight: normal;
}
#exclusion-list div button:hover {
    background-color: #c9302c;
}
.exclusion-message {
    margin-top: 10px;
    padding: 8px;
    border-radius: 4px;
    font-size: 0.9em;
    text-align: center;
}
.exclusion-message.success {
    background-color: #28a745;
    color: white;
}
.exclusion-message.error {
    background-color: #dc3545;
    color: white;
}
.exclusion-message.info {
    background-color: #17a2b8;
    color: white;
}

/* Blurring effect for non-vegan results */
.non-vegan-result {
    filter: blur(4px);
    opacity: 0.5;
    transition: all 0.3s ease;
}
.non-vegan-result:hover {
    filter: blur(0);
    opacity: 1;
}

/* Styles for the Safe Search toggle switch */
.safe-search-toggle { display: flex; align-items: center; gap: 8px; margin: 0 10px; }
.safe-search-toggle label { color: #ccc; font-size: 14px; user-select: none; }
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #4d5052; transition: .4s; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; }
input:checked + .slider { background-color: #26a269; }
input:checked + .slider:before { transform: translateX(20px); }
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }

/* Helper class to hide elements */
.hidden {
    display: none !important;
}

/* Search Labels/Buttons - DARK MODE */
.search-labels-wrapper {
    margin-top: 1.8rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap;
}

/* ===================================================================== */
/* ==== NEW ECOSIA-STYLE FILTER TABS (REPLACE OLD .label-button) ==== */
/* ===================================================================== */

/* Base style for all filter tabs (All, Videos, More, etc.) */
.label-button {
    /* 1. Reset button appearance to be text-based */
    background-color: transparent;
    border: none;
    border-radius: 0; /* No more rounded corners */
    text-decoration: none; /* For the 'Settings' <a> tag */

    /* 2. Reserve space for the underline to prevent layout shifts on activation */
    border-bottom: 3px solid transparent;

    /* 3. Typography and Text Color */
    font-size: 1rem; /* A legible font size */
    font-weight: 600;
    color: var(--site-muted-text, #b0b0b0); /* Muted color for inactive tabs */

    /* 4. Spacing */
    padding: 0.25rem 0.5rem; /* More minimal padding */

    /* 5. Behavior */
    cursor: pointer;
    transform: none !important; /* Disable the old transform effect */
    transition: color 0.2s ease, border-color 0.2s ease; /* Smooth transitions */
}

/* Hover state for any tab */
.label-button:hover {
    background-color: transparent; /* Ensure no background on hover */
    color: var(--site-light-text, #e0e0e0); /* Brighten text on hover for feedback */
}

/* Active state for the selected tab */
.label-button.active {
    color: var(--site-light-text, #e0e0e0); /* Use the primary light text color for active tab */
    /* The green underline that indicates the active tab */
    border-bottom-color: var(--site-accent-green, #58d68d);
}


/* Distinct styles for .region-button (US/UK selectors) */
.region-button {
    background-color: var(--site-input-bg, #282828);    /* Dark grey background, like input fields */
    border: 1px solid var(--site-input-border, #444); /* Subtle border */
    border-radius: 6px;                                 /* More rectangular shape */
    padding: 0.4rem 0.8rem;                             /* Slightly adjusted padding */
    font-weight: 500;                                   /* Less bold than label-buttons */
    color: var(--site-light-text, #e0e0e0);            /* Standard light text */
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
    font-size: 0.9rem;                                  /* Consistent font size for "US", "UK" text */
    line-height: 1.3;                                   /* Adjust for vertical alignment with flags */
}

.region-button:hover {
    background-color: #333333;                          /* Slightly lighter grey on hover */
    border-color: var(--site-muted-text, #b0b0b0);     /* Slightly more visible border */
    color: var(--site-light-text, #e0e0e0);
    transform: translateY(-1px);
}

.region-button.active {
    background-color: var(--site-region-active-green, #4AAE74); /* Use the new, slightly darker/muted green */
    color: var(--site-light-text, #e0e0e0);                     /* IMPORTANT: Use light text for better contrast */
    border-color: var(--site-region-active-green, #4AAE74);     /* Border matches the new active background */
    font-weight: 600;
    transform: translateY(0);
}

.label-buttons,
.region-toggle {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* --- Custom Sort By Dropdown Styling --- */
.custom-sort-by-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem; /* Adjust spacing as needed */
    margin-bottom: 1rem;
}

.custom-sort-by-wrapper label {
    color: #e0e0e0; /* Light text for "Sort by:" label */
    font-size: 0.95rem;
    font-weight: 600;
}

.custom-sort-by-wrapper select {
    padding: 0.4rem 0.6rem;
    border: 1px solid #444; /* Darker border */
    border-radius: 4px;
    background-color: #282828; /* Dark background */
    color: #e0e0e0; /* Light text */
    font-size: 0.95rem;
    cursor: pointer;
    -webkit-appearance: none; /* Remove default dropdown arrow on WebKit */
    -moz-appearance: none; /* Remove default dropdown arrow on Firefox */
    appearance: none; /* Remove default dropdown arrow */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="%23e0e0e0"><path d="M7 10l5 5 5-5z"/></svg>') !important; /* Custom arrow for dark mode */
    background-repeat: no-repeat !important;
    background-position: right 0.5rem center !important;
    background-size: 16px 16px !important;
    padding-right: 2rem !important; /* Make space for the custom arrow */
}

.custom-sort-by-wrapper select:focus {
    outline: none;
    border-color: #58d68d;
}

.custom-sort-by-wrapper select option {
    background-color: #222222; /* Dark background for options */
    color: #e0e0e0; /* Light text for options */
}

/* --- Google Custom Search Engine Overrides - DARK MODE --- */

/* Universal color override for Google CSE text elements to ensure readability */
.gsc-control-cse * {
    color: inherit !important;
}

/* Core Container Styles: Dark background, no borders/shadows, reset padding/margin */
#search-results-container,
.gsc-control-cse,
.gsc-control-cse-en,
.gsc-wrapper,
.gsc-results-wrapper-overlay,
.gsc-results-wrapper-nooverlay,
div[id^="___gcse_"] { /* General Google iframe wrappers */
    background-color: #1a1a1a !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Main results area */
.gsc-results {
    background-color: #1a1a1a !important;
    padding: 1.5rem 0 !important; /* Added top/bottom padding for the whole results block */
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* The results wrapper visible - ensure no zero padding that causes collapse */
.gsc-results-wrapper-visible {
    padding: 0 !important;
    margin: 0 !important;
    background-color: #1a1a1a !important;
}

/* Style the "Search for X on Google" link/box at the bottom */
.gsc-find-more-on-google {
    /* Re-enable display for this specific element as per branding requirements */
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background-color: #1a1a1a !important;
    color: #b0b0b0 !important;
    padding: 0.5rem 1rem !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 0.9rem !important;
    text-decoration: none !important;
}

/* Style the magnifying glass icon within "gsc-find-more-on-google" */
.gsc-find-more-on-google svg {
    fill: #b0b0b0 !important;
    margin-right: 5px !important;
}

/* Style the "Enhanced by Google" text */
.gsc-enhanced-by-google {
    /* Re-enable display for this specific element as per branding requirements */
    display: block !important;
    background-color: #1a1a1a !important;
    color: #888 !important;
    font-size: 0.8rem !important;
    text-align: right !important;
    padding: 0.5rem 1rem !important;
    border: none !important;
}

/* Style for the "About X results" info line */
.gsc-result-info {
    color: #b0b0b0 !important;
    background-color: #1a1a1a !important;
    padding: 0.5rem 0 !important;
}

/* Styles for Google's internal "Web" / "Image" tabs below search bar */
.gsc-tabs .gsc-tabhActive,
.gsc-tabs .gsc-tabhInactive {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.gsc-tabs .gsc-tabhActive {
    color: #58d68d !important;
    font-weight: bold !important;
    border-bottom: 2px solid #58d68d !important;
}
.gsc-tabs .gsc-tabhInactive {
    color: #b0b0b0 !important;
}
.gsc-tabs .gsc-tabhInactive:hover {
    color: #e0e0e0 !important;
}

/* --- Individual Search Result Items --- */
.gsc-results .gsc-webResult {
    /* Make the panel invisible */
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important; /* Ensure no borders at all */
    border-radius: 0 !important;

    /* Create vertical space between results */
    margin-bottom: 2rem !important; /* This creates the separation */

    /* Keep the padding within each result for breathing room */
    padding: 1rem 0.5rem !important;

    /* Keep the transition for any future hover effects */
    transition: background-color 0.2s ease;
    color: #e0e0e0 !important;
}

/* --- NEW: Styles for Minimalist Header Auth Links --- */
.header-auth-link {
    /* Reset button appearance */
    background: none;
    border: none;
    box-shadow: none;

    /* Typography and Text */
    text-decoration: none;
    color: var(--site-muted-text, #b0b0b0); /* Use a standard text color */
    font-weight: 600;
    font-size: 1rem; /* Match other header links */

    /* Spacing and Alignment */
    padding: 0.5rem 0.8rem;
    border-radius: 6px; /* Optional: for a subtle background on hover */
    margin-left: 0.5rem;
    cursor: pointer;

    /* Behavior */
    transition: color 0.2s ease, background-color 0.2s ease;
}

.header-auth-link:hover {
    color: var(--site-light-text, #e0e0e0); /* Brighten text on hover */
    background-color: #282828; /* Add a subtle background on hover */
}

/* A slightly more prominent style for the "Sign Up" link */
.header-auth-link.signup {
    color: var(--site-light-text, #e0e0e0); /* Make it a bit brighter by default */
}

.gsc-results .gsc-webResult:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
    background-color: #3a3a3a !important;
}

/* Highlighted search terms in results */
.gs-snippet b,
.gs-title b,
.gsc-highlight,
.gs-snippet em,
.gs-title em,
.gs-snippet strong,
.gs-title strong {
    color: #58d68d !important;
    font-weight: bold !important;
    background-color: transparent !important;
}

/* CSE Titles */
.gs-title {
    margin-bottom: 0.5rem !important; /* Add space below title */
}
.gs-title a.gs-title {
    font-size: 1.25rem !important;
    color: #8be08b !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}
.gs-title a.gs-title:hover {
    text-decoration: underline !important;
}

/* CSE URLs */
.gs-url {
    color: #a0a0a0 !important;
    font-size: 0.95rem !important;
    word-break: break-all;
    margin-bottom: 0.5rem !important; /* Add space below URL */
    display: block !important; /* Ensure it takes its own line if needed */
}

/* Specific targeting for the URL text - ensure spacing and layout */
.gsc-webResult .gs-visibleUrl,
.gsc-webResult .gs-visibleUrl span,
.gsc-webResult .gs-visibleUrl a {
    color: #a0a0a0 !important;
    background-color: transparent !important;
    background-image: none !important;
    text-decoration: none !important;
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
    word-break: break-all !important;
}

/* Ensure no pseudo-elements add problematic backgrounds around URL */
.gsc-webResult .gs-visibleUrl:before,
.gsc-webResult .gs-visibleUrl:after {
    background-image: none !important;
    background-color: transparent !important;
    content: none !important;
}

/* URL Images/Icons (like the 'TOFU' icon) */
.gsc-webResult .gs-url-top {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    background-image: none !important;
    background-color: transparent !important;
    margin-bottom: 0.5rem !important; /* Add space below the URL/icon line */
}
.gsc-webResult .gs-image-box, /* Common class for result images */
.gsc-webResult .gs-result-icon { /* Sometimes icons get their own box */
    background-image: none !important;
    background-color: transparent !important;
    margin-right: 5px !important;
    /* max-width: 20px !important; Adjust if the image is too large */
    /* max-height: 20px !important; */
}
.gsc-results .gsc-url-cse-container {
    background-image: none !important;
    background-color: transparent !important;
}

/* CSE Snippets */
.gs-snippet {
    color: #e0e0e0 !important;
    line-height: 1.6 !important;
    font-size: 0.98rem !important;
    margin-bottom: 0.8rem !important; /* Space below snippet */
}

/* Hide the original "Structured data" link from Google Search results */
.gs-richsnippet-box {
    display: none !important;
}


.structured-data-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
}

.structured-data-modal-content {
    background-color: #282828; /* Dark background for content */
    color: #f1f1f1; /* Light text */
    margin: 10% auto; /* 10% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    max-width: 700px;
    border-radius: 8px;
    position: relative;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.structured-data-modal-close {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 35px;
    font-weight: bold;
}

.structured-data-modal-close:hover,
.structured-data-modal-close:focus {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

/* --- CSE Pagination Styling --- */
.gsc-cursor-box .gsc-cursor-page {
    border: 1px solid #555 !important;
    background-color: #3a3a3a !important;
    color: #e0e0e0 !important;
    border-radius: 6px !important;
    padding: 0.5rem 1rem !important;
    margin: 0 0.2rem !important;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.gsc-cursor-box .gsc-cursor-page.active,
.gsc-cursor-box .gsc-cursor-page:hover {
    background-color: #58d68d !important;
    color: #1a1a1a !important;
    border-color: #58d68d !important;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    /* NEW: Hide the sidebar on mobile */
    aside {
        display: none;
    }

    /* HEADER & NAVIGATION */
    header.navbar {
        padding: 0.8rem 1rem; /* Slightly reduced padding */
        flex-direction: row; /* Keep logo and tabs side by side if possible */
        justify-content: center; /* Center items for tighter mobile look */
        flex-wrap: wrap; /* Allow wrapping if content is too wide */
    }

    .navbar-logo {
        margin-bottom: 0.5rem; /* Space below logo if tabs wrap */
        width: 100%; /* Take full width on small screens */
        text-align: center; /* Center the logo */
    }

    .navbar-logo img {
        height: 40px; /* Smaller logo for mobile */
    }

    .tabs {
        width: 100%;
        margin-top: 0.5rem; /* Reduced margin */
        justify-content: center;
        gap: 0.5rem; /* Smaller gap between tabs */
    }

    .tabs a {
        padding: 0.5rem 1rem; /* Smaller padding for tabs */
        font-size: 0.9rem; /* Slightly smaller font for tabs */
    }

    /* MAIN LAYOUT */
    main {
        flex-direction: column;
        padding: 1rem; /* Reduced main padding for mobile */
        gap: 1.5rem; /* Reduced gap between main sections */
    }

    .search-area {
        width: 100%; /* Ensure search area takes full width when sidebar is hidden */
        max-width: none;
        order: 1; /* Make search area the first element in the column flow */
        padding: 1rem; /* Adjust padding for search area */
    }

    #custom-search-input {
        width: 100%; /* Ensure input fills its wrapper */
        border-radius: 20px; /* Keep consistent rounded look */
        font-size: 1rem; /* Slightly smaller font size for input */
        /* Slightly reduced padding */
        /* Adjust padding for mobile icon size */
        padding: 10px 45px 10px 15px;
    }

    .search-icon-button {
        right: 10px; /* Adjust icon position for mobile */
    }

    /* SEARCH LABELS/BUTTONS */
    .search-labels-wrapper {
        margin-top: 1rem; /* Reduced top margin */
        margin-bottom: 1rem; /* Reduced bottom margin */
        gap: 0.8rem; /* Reduced gap between groups */
        justify-content: center; /* Center the label/region buttons */
    }

    .label-button,
    .region-button {
        padding: 0.4rem 0.8rem; /* Reduced padding for smaller buttons */
        font-size: 0.8rem; /* Smaller font for buttons */
    }

    .label-button {
        border-radius: 0; /* ensure no rounding on mobile either */
    }

    .region-button {
        border-radius: 16px; /* Slightly smaller border-radius */
    }

    /* GCSE SPECIFIC MOBILE ADJUSTMENTS */
    .gsc-results .gsc-webResult {
        padding: 1rem !important; /* Reduced padding for result cards */
        margin-bottom: 1rem !important; /* Reduced margin between results */
    }

    .gs-title a.gs-title {
        font-size: 1.15rem !important; /* Slightly smaller title font */
    }

    .gs-url {
        font-size: 0.9rem !important; /* Slightly smaller URL font */
    }

    .gs-snippet {
        font-size: 0.9rem !important; /* Slightly smaller snippet font */
        line-height: 1.5 !important; /* Adjusted line height */
    }

    /* Ensure pagination is also compact on mobile */
    .gsc-cursor-box .gsc-cursor-page {
        padding: 0.4rem 0.8rem !important;
        font-size: 0.9rem !important;
    }
}

/* Extra small screens (e.g., iPhone SE portrait) */
@media (max-width: 480px) {
    header.navbar {
        padding: 0.6rem 0.8rem;
    }

    .navbar-logo img {
        height: 35px;
    }

    .tabs a {
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
    }

    main {
        padding: 0.8rem;
        gap: 1rem;
    }

    /* The `aside` is already hidden by the 768px media query, no need to re-hide here */

    #custom-search-input {
        padding: 8px 12px;
        padding-right: 40px; /* Further adjust padding for very small screens */
        font-size: 0.95rem;
    }

    .search-icon-button {
        right: 8px; /* Further adjust icon position */
    }

    .search-labels-wrapper {
        margin-top: 0.8rem;
        margin-bottom: 0.8rem;
        gap: 0.6rem;
    }

    .label-button,
    .region-button {
        padding: 0.3rem 0.6rem;
        font-size: 0.75rem;
    }

    .gsc-results .gsc-webResult {
        padding: 0.8rem !important;
        margin-bottom: 0.8rem !important;
    }

    .gs-title a.gs-title {
        font-size: 1.1rem !important;
    }

    .gs-url,
    .gs-snippet {
        font-size: 0.85rem !important;
    }

    .gsc-cursor-box .gsc-cursor-page {
        padding: 0.3rem 0.6rem !important;
        font-size: 0.8rem !important;
    }
}