:root{
  --bg:#f3f7f8;
  --card:#ffffff;
  --muted:#6b7280;
  --accent:#0ea5a0; /* teal */
  --accent-2:#06b6d4; /* cyan */
  --danger:#ef4444;
  --rounded:14px;
  --shadow: 0 6px 18px rgba(15,23,42,0.08);
  font-family: Inter,system-ui,Arial, sans-serif;
  color:#0f172a;
}

/* --- DARK THEME OVERRIDES --- */
[data-theme="dark"] {
  --bg: #0f172a;        /* Dark Slate Background */
  --card: #1e293b;      /* Slightly lighter Slate for cards */
  --muted: #94a3b8;     /* Lighter gray for muted text */
  --accent: #2dd4bf;    /* Brighter Teal to pop against dark */
  --accent-2: #22d3ee;  /* Brighter Cyan */
  --danger: #f87171;    /* Softer Red */
  --shadow: 0 6px 18px rgba(0,0,0,0.5); /* Darker shadows */
  
  /* Text Color Override */
  color: #f1f5f9;       /* White-ish text */
}

/* Fix Heading Colors in Dark Mode */
[data-theme="dark"] .section-heading,
[data-theme="dark"] #profile .profile-group h1,
[data-theme="dark"] .listing-detail-title,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] strong {
    color: #f1f5f9 !important; /* Force bright white-ish text */
}

/* Fix "My Listings" specific container text if needed */
[data-theme="dark"] .profile-group {
    color: #f1f5f9;
}

/* Specific overrides for Dark Mode */
[data-theme="dark"] body {
    background-color: #020617; /* Very dark background for the whole page */
    color: #f1f5f9;
}

[data-theme="dark"] .appbar,
[data-theme="dark"] .sitefoot {
    background-color: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .search-input-group,
[data-theme="dark"] .results-header-container,
[data-theme="dark"] .category-tabs {
    background-color: #1e293b !important; /* Force dark background on search bars */
    border-color: #334155;
}

[data-theme="dark"] input, 
[data-theme="dark"] select, 
[data-theme="dark"] textarea {
    background-color: #0f172a !important;
    color: white !important;
    border-color: #334155 !important;
}

[data-theme="dark"] .seller-contact-box {
    background-color: #0f172a;
    border-color: #334155;
}

[data-theme="dark"] .category-tabs input[type="radio"]:checked + label {
    box-shadow: 0 4px 10px rgba(45, 212, 191, 0.2);
}

/* Hero Search Overlay - Dark Mode */
[data-theme="dark"] .search-form-overlay.simple-search-style {
    background-color: rgba(30, 41, 59, 0.85); /* Dark Slate with slight transparency */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); /* Stronger shadow */
    border: 1px solid #334155; /* Subtle border for definition */
}

/* Ensure the category tabs inside blend in */
[data-theme="dark"] .category-tabs {
    background-color: rgba(30, 41, 59, 0.5); 
    border-color: #334155;
}

/* Add this to your Dark Mode section if needed */
[data-theme="dark"] .form-section {
    background-color: rgba(45, 212, 191, 0.1); /* Slightly adjusted for dark bg */
    border-color: rgba(45, 212, 191, 0.2);
}



/* --- SMOOTH THEME TRANSITION ANIMATION --- */
body, 
.appbar, 
.sitefoot, 
.card, 
.form-card, 
.search-input-group, 
.results-header-container, 
.category-tabs, 
.category-tabs label, 
.seller-contact-box, 
.description-area, 
.info-column, 
.profile-group, 
.profile-header-card,
input, 
select, 
textarea, 
button, 
.btn {
    /* This creates a 0.4s fade effect when these properties change */
    transition: background-color 0.4s ease, 
                color 0.4s ease, 
                border-color 0.4s ease, 
                box-shadow 0.4s ease,
                transform 0.2s; /* Keeps hover effects snappy */
}

/* Rotate the theme toggle button when clicked */
#themeToggleBtn svg {
    transition: transform 0.5s ease;
}
#themeToggleBtn:active svg {
    transform: rotate(360deg) scale(0.8);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background-color: #e0e9ec; 
}

/* App Bar & Header */
.appbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* FIX 2: Reduce vertical padding from 12px to 6px for a shorter header */
  padding: 6px 30px; 
  background-color: var(--card);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04);
  position: sticky;
  top: 0;
  z-index: 10;
}

/* New styles for horizontal search input and buttons */
.search-input-group {
    display: flex;
    align-items: center;
    flex-grow: 1;
    border: 1px solid #e5e7eb;
    border-radius: 8px; 
    
    /* FIX: Allow dropdown to overflow */
    overflow: visible; 
    position: relative; /* Anchor for the dropdown */
    
    background-color: var(--card); 
    z-index: 50; /* Ensure it stays above other content */
}

.search-input-group input[type="text"] {
    flex-grow: 1; /* Make the input take up available space */
    border: none;
    padding: 8px 15px;
    font-size: 15px;
    background-color: transparent; /* Input background should be transparent */
}

.search-input-group .search-action-btn {
    border-radius: 0; /* Remove button rounding when part of the group */
    height: auto; /* Buttons fill the height of the group */
    padding: 8px 15px;
    /* Remove vertical margin that might interfere */
    margin: 0; 
}

.search-input-group .btn.secondary {
    border-right: 1px solid #e5e7eb; /* Add a separator line between Filter/Search */
}

/* Avatar styling */
.avatar-small {
    width: 32px; 
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    margin-left: 8px; /* Space between user name and avatar */
    border: 2px solid var(--accent);
}
.avatar-change-container {
    display: block; 
    margin-bottom: 10px; /* Space below the image */
}

.avatar-large {
        width: 240px !important; 
        height: 240px !important;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid var(--accent);
}

/* Style for the logo image */
#appLogo {
  height: 50px; 
  width: auto;
  margin-right: 8px; 
  
  /* CSS MAGIC: Hides the white background */
  mix-blend-mode: multiply; 
}

/* 1. Resetime filtrid, et pilt oleks puhas. Header logo */
[data-theme="dark"] #appLogo {
    filter: none !important;
    mix-blend-mode: normal !important;
    
    /* 2. Asendame pildi sisu uue failiga */
    /* Muuda failinimi, kui sul on see teise nimega salvestatud! */
    content: url("haldja kinnisvaraportaal dark mode.webp");
    
    /* Valikuline: lisa väike üleminek */
    transition: opacity 0.3s ease;
}

/* --- JALUSE (FOOTER) LOGO VAHETUS --- */

/* 1. Üleminek */
#footerLogo {
    transition: opacity 0.3s ease;
}

/* 2. Tume režiim: vaheta pilti */
[data-theme="dark"] #footerLogo {
    /* ASENDA SEE OMA TUMEDA FAILINIMEGA! */
    content: url("haldja footer dark mode.webp");
}

/* Logo & Navigation Links */
.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}
.logo {
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 18px;
  cursor: pointer;
}

.user-profile-link {
    display: flex;
    align-items: center;
    color: var(--muted);
    font-weight: 600;
    text-decoration: none;
    padding: 4px 0;
}
.user-profile-link:hover {
    color: var(--accent);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* General Layout */
.container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 20px 30px;
}
.page-content {
    min-height: 70vh; /* Keep content visible even if sparse */
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.1s;
  border: 1px solid transparent;
  background-color: var(--accent);
  color: white;
  /* FIX 5: Reduce vertical padding from 8px to 6px for a smaller button */
  padding: 6px 14px; 
  font-size: 14px;
}

.btn:hover {
  background-color: #0d9488;
}

.btn.secondary {
    background-color: transparent;
    color: var(--muted);
    border: 1px solid rgba(15,23,42,0.1);
    padding: 6px 14px;
}
.btn.secondary:hover {
    color: var(--accent);
    background-color: #f3f7f8;
}

.btn.primary {
    background-color: var(--accent);
    color: white;
}

.btn.accent {
    background-color: var(--accent-2);
}
.btn.accent:hover {
    background-color: #0891b2;
}


/* Page Switching */
.page {
  display: none;
}
.page.active {
  display: block;
}

/* Utility Class for JS Toggle */
.hidden {
    display: none !important;
}

/* --- Hero Section Styling --- */
.hero-section {
    background: url('Hero-background.webp') center 10% no-repeat; 
    background-size: cover; 
    
    display: flex;
    justify-content: center;
    /* MODIFIED: Align items to the bottom (Lower position) */
    align-items: flex-end;    
    
    min-height: 400px; 
    /* MODIFIED: Added bottom padding for spacing */
    padding: 0 30px 40px 30px; 
}

/* Override Hero Background for Dark Mode */
[data-theme="dark"] .hero-section {
    background-image: url('Hero-background dark.webp');
}

/* Ensure text is white for maximum readability over the dark background image */
.hero-section h2, 
.hero-section p {
    color: #fff !important; 
    text-align: center;
}

.hero-column.hero-center {
    max-width: 800px; /* Constrain the search bar width */
    width: 100%;
    padding: 0; 
}

/* Media Query for Desktop (3-column layout) - Consolidated from multiple blocks */
@media (min-width: 1000px) {
    .hero-section {
        grid-template-columns: 1fr 800px 1fr; /* Fixed 800px center column */
        gap: 40px;
        align-items: flex-end; 
        min-height: 400px;
    }
}

/* ========================================================= */
/* --- Search Form & Category Tabs --- */
/* ========================================================= */

.search-form-overlay.simple-search-style {
    padding: 15px; /* Reduced from 20px */
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    /* ADDED: Box shadow for depth */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Hide superfluous text in search overlay to save space */
.search-form-overlay h2, 
.search-form-overlay p,
.search-form-overlay h1 {
    display: none; 
}

/* --- Scrollable Category Tabs --- */
.category-tabs {
    display: flex;
    align-items: center;
    gap: 5px;
    
    /* Scroll Logic */
    overflow-x: auto;         /* Allow sideways scrolling */
    white-space: nowrap;      /* Prevent wrapping to new lines */
    -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
    
    /* Layout constraints */
    max-width: 100%;          /* Ensure it fits on screen */
    width: fit-content;       /* Shrink to content on Desktop */
    margin: 0 auto 15px auto; /* Centered with bottom spacing */
    
    /* Visuals */
    background-color: rgba(255, 255, 255, 0.95);
    padding: 4px; 
    border-radius: var(--rounded); 
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); 
    
    /* Hide Scrollbar (Firefox) */
    scrollbar-width: none; 
}

/* HIDE the actual radio circles so only the buttons show */
.category-tabs input[type="radio"] {
    display: none;
}

/* Hide Scrollbar (Chrome/Safari) */
.category-tabs::-webkit-scrollbar {
    display: none; 
}

/* Individual Buttons */
.category-tabs label {
    flex-shrink: 0;           /* Prevent buttons from squishing */
    padding: 8px 20px;        /* Larger touch targets */
    font-size: 13px; 
    font-weight: 600;
    cursor: pointer;
    color: var(--muted);
    transition: all 0.2s ease;
    border-radius: var(--rounded);
    user-select: none;
}

/* Active State */
.category-tabs input[type="radio"]:checked + label {
    color: white; 
    background-color: var(--accent); 
    box-shadow: 0 4px 10px rgba(14, 165, 160, 0.4); 
    transform: translateY(-1px); 
}

/* Dark Mode Override */
[data-theme="dark"] .category-tabs {
    background-color: rgba(30, 41, 59, 0.5); 
    border-color: #334155;
}

/* --- Modal/Sidebar Styles for Detailed Filters --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    display: flex; 
    justify-content: flex-end; 
    align-items: center;
}

.modal-content {
    background-color: var(--card);
    max-width: 90%;
    overflow-y: auto;
    padding: 30px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    transform: translateX(0);
    transition: transform 0.3s ease-out;
}

.filter-content {
    width: 400px;
    height: 100%;
    border-radius: 0;
}

/* Styles for the Detailed Filter Form elements */
#detailedSearchForm .form-row {
    margin-bottom: 15px;
}

#detailedSearchForm .form-row-grid {
    display: grid;
    gap: 10px;
}
#detailedSearchForm .form-row-grid > .form-row {
    margin-bottom: 0;
}

.search-actions-row {
    display: flex;
    gap: 10px;
    margin-top: 20px; 
}
.search-actions-row .btn {
    flex-grow: 1;
}

#detailedSearchForm label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
    font-size: 14px;
}

#detailedSearchForm input[type="number"],
#detailedSearchForm input[type="text"], 
#detailedSearchForm select {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 15px;
    transition: border-color 0.2s;
}

/* Mobile adjustment for the filter modal */
@media (max-width: 450px) {
    .filter-content {
        width: 100%;
    }
}

/* Categories */
.categories-grid {
    display: flex;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}
.category-card {
    flex: 1;
    min-width: 150px;
    background: var(--card);
    padding: 20px;
    border-radius: var(--rounded);
    box-shadow: var(--shadow);
    cursor: pointer;
    border: 1px solid transparent;
    transition: border-color 0.2s;
}
.category-card:hover {
    border-color: var(--accent);
}
.category-card h3 {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 16px;
}
.category-card p {
    margin: 0;
    font-size: 13px;
    color: var(--muted);
}

/* Listings Grid */
.listings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}

.card {
  background: var(--card);
  border-radius: var(--rounded);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  
  /* ADD THIS LINE to keep badges inside the card */
  position: relative; 
}

/* --- Fix for "My Listings" Card Contrast --- */

/* Make cards inside the profile use the page background color */
#userListingsGrid .card {
    background-color: var(--bg); /* Grey in Light, Darker in Dark mode */
    border: 1px solid rgba(0,0,0,0.05); /* Subtle border */
    box-shadow: none; /* Flatten them slightly */
}

/* Restore pop effect on hover */
#userListingsGrid .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    background-color: var(--bg); /* Keep background consistent */
    filter: brightness(0.98); /* Slight dim to show interaction */
}

/* Wishlist Heart Button */
.card-wishlist-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    
    /* Remove default button "box" styles */
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
    outline: none;
    
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 25; /* Above everything */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: transform 0.2s, color 0.2s;
    
    /* Default Color (Inactive) */
    color: #cbd5e1; /* Light Grey */
}

.card-wishlist-btn:hover {
    transform: scale(1.1);
    color: #f87171; /* Light Red */
    background-color: #ffffff;
}

.card-wishlist-btn.active {
    color: #ef4444; /* Bright Red */
    background-color: #ffffff;
}

.card-wishlist-btn svg {
    width: 22px;
    height: 22px;
    stroke: currentColor; /* Uses the color defined above */
    stroke-width: 2;
    transition: fill 0.2s;
}

/* When active, fill the heart */
.card-wishlist-btn.active svg {
    fill: #ef4444; 
    stroke: #ef4444;
}

/* --- Detail Page Action Buttons (Heart & Share) --- */
.detail-action-btn {
    background: transparent;        /* Removes default button background */
    border: 2px solid var(--muted); /* Grey ring */
    color: var(--muted);            /* Grey icon color */
    
    width: 42px;
    height: 42px;
    border-radius: 50%;             /* Perfect circle */
    
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    outline: none;                  /* Removes focus outline */
}

/* 2. Hover Effect (Teal Border) */
.detail-action-btn:hover {
    border-color: var(--accent); 
    color: var(--accent);
    transform: scale(1.05);
}

/* 3. Active State (RED for Heart) */
.detail-action-btn.active {
    border-color: var(--danger);     /* Red Border */
    background-color: var(--danger); /* Red Background */
    color: white;                    /* White Icon */
}

/* 4. Hover on Active (Keep it Red) */
.detail-action-btn.active:hover {
    border-color: #dc2626;           /* Darker Red */
    background-color: #dc2626;
}

/* 5. SVG Styling */
.detail-action-btn svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    transition: fill 0.2s;
}

/* 6. Fill the Heart when Active */
.detail-action-btn.active svg {
    fill: white; 
    stroke: white;
}

/* Dark Mode specific border to make them visible */
[data-theme="dark"] #userListingsGrid .card {
    border: 1px solid rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] #userListingsGrid .card:hover {
    filter: brightness(1.2); /* Brighten in dark mode */
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
}

.card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.card .meta {
  /*padding: 12px;*/
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card .meta div:first-child {
    line-height: 1.4;
}

.card .address-line {
    clear: both; 
    display: block; /* Ensure it behaves like a block element */
}

.card .price {
  font-weight: 800;
  font-size: 16px;
  color: var(--accent);
}

/* --- STATUS & FEATURED BADGES --- */

/* NEW: Container to stack badges (Reserved + Featured) */
.card-badges {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 6px; /* Space between stacked badges */
    align-items: flex-start;
}

/* The Badge Base Style */
.card-status-badge {
    /* Removed absolute positioning so they stack inside the container */
    position: relative; 
    display: inline-flex;
    align-items: center;
    gap: 4px;
    
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    letter-spacing: 0.5px;
    line-height: 1;
}

/* Color Variants */
.status-reserved {
    background-color: #f59e0b; /* Amber */
}

.status-sold {
    background-color: var(--danger); /* Red */
}

/* NEW: Featured Badge (Yellow/Gold) */
.status-featured {
    background-color: #fbbf24; /* Bright Gold */
    color: #78350f; /* Dark Brown text for contrast */
    border: 1px solid #fcd34d;
}

/* Sold Card Styling (Kept same) */
.card.is-sold {
    opacity: 1; 
    filter: none; 
    border: 2px solid var(--danger) !important; 
    box-shadow: none;
}
.card.is-sold .price {
    color: var(--danger) !important;
}

/* Seller Status Controls (Detail Page) */
.status-actions-container {
    margin-top: 25px;
    padding: 20px;
    background: var(--bg);
    border-radius: var(--rounded);
    border: 1px dashed var(--accent);
}

.status-btn-group {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.btn-status {
    flex: 1;
    background: transparent;
    border: 1px solid var(--muted);
    color: var(--muted);
    padding: 8px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-status:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.btn-status.active {
    background-color: var(--accent);
    color: white;
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(14, 165, 160, 0.3);
}

/* Specific active state for the SOLD button */
.btn-status.active[onclick*="sold"] {
    background-color: var(--danger);
    border-color: var(--danger);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Specific active state for the RESERVED button (Optional polish) */
.btn-status.active[onclick*="reserved"] {
    background-color: #f59e0b;
    border-color: #f59e0b;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

/* Disabled Button Style */
.btn-status:disabled,
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(1);
}

/* --- EXPIRED STATUS STYLING (Fixed) --- */
.status-expired {
    background-color: #1f2937; /* Dark Grey/Black */
    color: #d1d5db; 
    border: 1px solid #374151;
}

/* 1. The Container: Distinct border, but NO global dimming */
.card.is-expired {
    border: 2px dashed #cbd5e1 !important; /* Dashed grey border to show "Inactive" */
    background-color: #f8fafc;  /* Faint grey bg */
    box-shadow: none;
    opacity: 1; /* Keep full opacity so button works */
    filter: none; /* Remove global grayscale */
}

/* 2. Fog the IMAGE specifically */
.card.is-expired img {
    filter: grayscale(100%);
    opacity: 0.5; /* This creates the "Fogged" look */
}

/* 3. Fog the TEXT specifically */
/* We target the title and details to fade them out */
.card.is-expired div[style*="font-weight:700"], /* Title */
.card.is-expired .meta,
.card.is-expired .price {
    color: #94a3b8 !important; /* Muted Grey */
}

/* 4. The RENEW BUTTON: Make it POP! */
.card.is-expired .btn.primary {
    background-color: var(--accent); /* Restore Teal Color */
    color: white;
    filter: none;
    opacity: 1;
    box-shadow: 0 4px 10px rgba(14, 165, 160, 0.4); /* Add glow back */
    border: 1px solid transparent;
}

.card.is-expired .btn.primary:hover {
    background-color: #0d9488; /* Darker Teal on hover */
    transform: translateY(-2px);
}

/* New two-column layout for desktop screens */
.listing-layout-grid {
    display: grid;
    /* Default to a single column for mobile */
    grid-template-columns: 1fr; 
    gap: 30px;
}

/* Specific styling for the image container (lightbox on the left) */
.listing-gallery-container {
    /* Ensure the content inside is nicely spaced if needed */
    padding-bottom: 20px;
}

.main-image {
    width: 100%;
    /* Reduced height for a smaller lightbox appearance */
    height: 350px; 
    object-fit: cover;
    border-radius: var(--rounded);
}

.listing-info-content {
    /* Styles for the information panel */
    padding-bottom: 20px;
}

/* Original and simplified styles for listing info elements */
.price-large {
    font-size: 28px;
    font-weight: 800;
    color: var(--accent);
}
.type-badge {
    display: inline-block;
    background: var(--accent);
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 10px;
}
.details-meta {
    display: flex;
    gap: 20px;
    color: var(--muted);
    font-size: 14px;
}
.seller-info {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: var(--bg);
    border-radius: 8px;
}

.other-images {
    /* Span across the whole width if we decide to re-introduce a full-width gallery */
    grid-column: 1 / -1; 
    margin-top: 20px;
}
.thumbs-row {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.thumb-img {
    width: 130px; 
    height: 90px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0.8;
    transition: all 0.2s; 
    border: 3px solid transparent; 
}
.thumb-img:hover, .thumb-img.active {
    opacity: 1;
    border-color: var(--accent); 
}
.back-link {
    display: block;
    margin-bottom: 20px;
    color: var(--muted);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
}
.back-link:hover {
    color: var(--accent);
}

/* Forms */
.form-card {
    background: var(--card);
    padding: 30px;
    border-radius: var(--rounded);
    box-shadow: var(--shadow);
    max-width: 1200px;
    margin: 20px auto;
}
.form-group {
    margin-bottom: 15px;
}
.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 14px;
}
.form-group input, .form-group textarea, .form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid rgba(15,23,42,0.1);
    border-radius: 8px;
    font-size: 15px;
    background: var(--bg);
    outline: none;
    transition: border-color 0.2s;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
    border-color: var(--accent);
    background: white;
}
.form-group-row {
    display: flex;
    gap: 15px;
}
.form-group-row .form-group {
    flex: 1;
}
.form-hint {
    font-size: 12px;
    color: var(--muted);
    margin-top: 5px;
}



/* --- SOLD LISTING STYLING --- */

/* 1. Red Border for the card */
.card.is-sold {
    opacity: 1;
    filter: none;
    /* Bright Red Border */
    border: 2px solid var(--danger) !important; 
    /* Optional: Remove shadow to flatten it, or keep it */
    box-shadow: none;
}

/* 2. Red Price Text */
/* We use !important to override the default teal color */
.card.is-sold .price {
    color: var(--danger) !important;
}

/* 3. Red "Sold" Badge */
.status-sold {
    background-color: var(--danger);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

/* --- Sticky Action Bar (Opal Glass Effect) --- */
.sticky-action-bar {
    position: sticky;
    bottom: 20px;
    z-index: 99; /* Ensure it floats above other content */
    
    /* Glassmorphism Logic */
    background: rgba(255, 255, 255, 0.75); /* Semi-transparent white */
    backdrop-filter: blur(6px); /* The "Frosted" effect */
    -webkit-backdrop-filter: blur(12px); /* Safari support */
    
    padding: 20px;
    border-radius: var(--rounded);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15); /* Soft, deep shadow */
    border: 1px solid rgba(255, 255, 255, 0.4); /* Subtle white border */
    
    /* Layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

/* Dark Mode Override for Sticky Bar */
[data-theme="dark"] .sticky-action-bar {
    background: rgba(15, 23, 42, 0.65); /* Semi-transparent dark blue */
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

/* Profile Page Structure */
.profile-group {
        padding: 20px 30px;
        background: var(--card);
        border-radius: var(--rounded);
        box-shadow: var(--shadow);
        margin-bottom: 15px;
}

/* Sub-heading style for profile groups */
#profile .profile-group h1 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 24px;
    color: #0f172a;
    border-bottom: 1px solid rgba(15,23,42,0.05);
    padding-bottom: 15px;
    white-space: nowrap; 
}

/* Stats Page */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.metric {
  background: var(--bg);
  padding: 15px;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.metric .num {
  font-weight: 800;
  font-size: 24px;
  color: var(--accent);
}
.chart-container {
    max-width: 100%; /* FIX: Allow full width */
    width: 100%;     /* Force full width */
    margin: 0;       /* Remove centering margin */
    padding: 20px;
    background: var(--bg);
    border-radius: 10px;
    box-sizing: border-box; /* Ensure padding doesn't overflow */
}

/* Footer */
.sitefoot {
  padding: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  border-top: 1px solid rgba(15,23,42,0.05);
  margin-top: 40px;
}

/* --- VISUAL FORM IMPROVEMENTS (Missing Rules) --- */

/* 1. Grouping Wrapper (The "Color Accent") */
.form-section {
    /* CHANGED: Increased opacity from 0.04 to 0.12 for better visibility */
    background-color: rgba(14, 165, 160, 0.12); 
    
    /* CHANGED: Made the border slightly darker too (0.1 -> 0.25) */
    border: 1px solid rgba(14, 165, 160, 0.25);
    
    border-left: 5px solid var(--accent);
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 30px;
}

/* Make the headers inside feel integrated */
.form-section h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--text-color);
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 2. Compact Grid (For small number fields) */
/* Fits 4 items per row on desktop, 2 on tablet, 1 on mobile */
.form-grid-compact {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 15px;
}

/* 3. Tighter Inputs inside the compact grid */
.form-grid-compact .form-group {
    margin-bottom: 0; /* Remove bottom margin to keep grid tight */
}

/* Responsive adjustments for the grid */
@media (max-width: 900px) {
    .form-grid-compact {
        grid-template-columns: repeat(2, 1fr); /* 2 per row on tablets */
    }
}
@media (max-width: 500px) {
    .form-grid-compact {
        grid-template-columns: 1fr; /* Stack on mobile */
    }
}

/* Responsive adjustments */
@media (min-width: 1000px) {
    /* Header padding adjustment was repeated, keeping the final one */
    .appbar {
      padding: 6px 30px; /* Use the default from the beginning for consistency */
    }
    
    /* Listing Detail layout for desktop was reversed to 1 column. Keeping the mobile view where it is one column. */
    /* If the initial intent was a 2-column layout on desktop, this needs to be re-added, but for now, the existing 1000px media query is removing the 2-column layout. */
    .listing-detail-grid {
      grid-template-columns: 1fr;
      gap: 20px;
    }
    .listing-info, .other-images {
        grid-column: 1 / 2;
    }
    .stats-grid {
      /* The 1fr on desktop was likely a mistake, reverting to the 3-column default */
      grid-template-columns: repeat(3, 1fr); 
    }
    .hero-section {
        grid-template-columns: 1fr 800px 1fr;
        gap: 40px;
    }
}
@media (max-width: 1000px) {
    /* Only apply the one column layout for listing detail on smaller screens */
    .listing-detail-grid {
      grid-template-columns: 1fr;
    }
    .stats-grid {
        /* On smaller screens, fall back to one column for metrics */
        grid-template-columns: 1fr;
    }
}


@media (max-width: 600px) {
  .container {
    padding: 10px 15px;
  }
  .hero-title {
    font-size: 24px;
  }
  .main-image {
    height: 250px;
  }
  .thumbs-row {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .form-group-row {
      flex-direction: column;
      gap: 0;
  }
}

/* General Search Form styles - Consolidated/Cleaned up the repetitions */
.search-form-overlay {
    max-width: none; 
    padding: 10px 15px; 
}
.search-form-overlay input[type="text"],
.search-form-overlay input[type="number"],
.search-form-overlay select {
    width: 100%;
    padding: 8px 15px; 
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 15px;
    transition: border-color 0.2s;
}

.search-form-overlay input:focus,
.search-form-overlay select:focus {
    outline: none;
    border-color: var(--accent);
}

.search-form-overlay .form-row-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

@media (min-width: 600px) {
    .search-form-overlay .form-row-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* =========================================
   OTSINGULEHE (RESULTS PAGE) DESKTOP STIILID
   (Lisa see ENNE @media (max-width: 768px) rida)
   ========================================= */

.results-search-bar {
    display: flex;             /* Teeb asjad kõrvuti (Desktop) */
    align-items: center;       /* Joondab vertikaalselt keskele */
    width: 100%;
    background-color: var(--card);
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 5px;              /* Väike vahe äärest */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.results-search-input {
    flex-grow: 1;              /* Input võtab kogu vaba ruumi */
    border: none;
    padding: 10px 15px;
    font-size: 15px;
    background: transparent;
    outline: none;
    min-width: 200px;
}

.results-btn-group {
    display: flex;             /* Nupud kõrvuti */
    gap: 0;                    /* Vahe nuppude vahel */
    flex-shrink: 0;            /* Nupud ei lähe kortsu */
    border-left: 1px solid #e5e7eb; /* Eraldaja inputi ja nuppude vahel */
}

/* Nuppude stiil Desktopis */
.results-btn-group .btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    border-radius: 0;          /* Kandilised nupud grupis */
    height: 44px;              /* Fikseeritud kõrgus */
    border: none;
    background: transparent;
    color: var(--muted);
}

.results-btn-group .btn:hover {
    background-color: #f9fafb;
    color: var(--accent);
}

/* Otsi nupp Desktopis */
.results-btn-group .btn.primary {
    background-color: var(--accent);
    color: white !important;
    border-radius: 6px;        /* Otsi nupul on nurgad */
    margin-left: 5px;          /* Väike vahe */
}

/* Tume režiim Desktopile */
[data-theme="dark"] .results-search-bar {
    background-color: #1e293b;
    border-color: #334155;
}
[data-theme="dark"] .results-btn-group {
    border-left-color: #334155;
}
[data-theme="dark"] .results-search-input {
    color: white;
}

/* Detailed Filters Form Adjustments */
@media (max-width: 768px) {
    /* Removed redundant flex-wrap and search-field styles that were designed for a different form layout */
    .filter-actions-row .btn {
      flex-grow: 1;
    }
}
/* --- LISTING DETAIL LAYOUT --- */

/* Main container for the two-column layout */
/* Main container for the two-column layout */
.detail-content-wrapper,
.detail-page-content { 
    display: flex; 
    gap: 30px; 
    margin-top: 20px;
}

/* LEFT COLUMN: Image Gallery (FIXED TO 50%) */
.gallery-column {
    flex: 1; /* Was flex: 3. Set to 1 for equal 50% split */
    max-width: 50%; 
}

/* RIGHT COLUMN: Listing Details (FIXED TO 50%) */
.info-column {
    flex: 1; /* Was flex: 2. Set to 1 for equal 50% split */
    max-width: 50%;
    padding: 20px;
    background-color: var(--card);
    border-radius: var(--rounded);
    box-shadow: var(--shadow);
    align-self: flex-start;
}

/* Control the size of the initial image/lightbox element (Keeping the height you set) */
#listingDetailGallery {
    height: 454px; /* Keeping the height you set previously */
    overflow: hidden; 
    border-radius: var(--rounded);
}
#listingDetailGallery .lightgallery-item {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* The actual image inside the LightGallery wrapper */
.main-gallery-image {
    width: 100%;
    height: 100%; 
    object-fit: cover; /* Ensures image fills the container */
    display: block;
}

/* CRITICAL FIX: Ensure LightGallery Thumbnail bar is explicitly visible */
.lg-outer .lg-thumb-outer {
    display: block !important; 
}

/* Responsive adjustment for smaller screens (Stacks columns vertically below 992px) */
@media (max-width: 992px) {
    .detail-content-wrapper,
    .detail-page-content {
        flex-direction: column; 
        gap: 20px;
    }

    .gallery-column,
    .info-column {
        flex: none; 
        max-width: 100%; 
    }
    
    #listingDetailGallery {
        height: 300px; /* Smaller height for mobile viewing */
    }
}

/* =========================
   LISTING DETAIL THUMBNAILS
   ========================= */

/* Container for the visible thumbnails, placed below the main image area */
.image-thumbnails-container {
    display: flex;
    gap: 10px; 
    margin-top: 10px;
    justify-content: flex-start;
    
    /* FIX: Allow horizontal scrolling on small screens */
    overflow-x: auto; 
    
    /* Smooth scrolling feel on mobile */
    -webkit-overflow-scrolling: touch; 
    
    /* Hide the scrollbar visual but keep functionality (Optional) */
    scrollbar-width: none; 
    -ms-overflow-style: none;
    
    /* Ensure it doesn't touch the very edge */
    padding-bottom: 5px;
}

/* Hide webkit scrollbar */
.image-thumbnails-container::-webkit-scrollbar {
    display: none;
}

.thumbnail-item {
    /* UPDATED: Increased dimensions for larger thumbnails */
    width: 120px; 
    height: 80px; 
    
    flex-grow: 0; 
    flex-shrink: 0; 
    
    overflow: hidden;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    border: 1px solid #ddd;
    transition: all 0.2s ease;
}

.thumbnail-item:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.thumbnail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Style for the overlay showing the count of remaining photos (if more than 4 images) */
.thumbnail-count-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Darker overlay for text visibility */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 5px;
    pointer-events: none; /* Allows click-through to the underlying anchor tag */
}

/* =========================
   LISTING DETAIL PAGE LAYOUT
   ========================= */

/* Use Flexbox for the two-column layout */
.detail-page-content {
    display: flex; 
    gap: 20px; /* Space between the left and right columns */
    margin-top: 20px;
}

/* LEFT COLUMN: Image Gallery (60% width) */
.gallery-column {
    flex: 3; 
    max-width: 50%; 
}

/* RIGHT COLUMN: Listing Details (40% width) */
.info-column {
    flex: 1; 
    max-width: 50%;
    padding: 20px;
    background-color: var(--card);
    border-radius: var(--rounded);
    box-shadow: var(--shadow);
    /* Ensures the info panel starts at the top of the content area */
    align-self: flex-start; 
}

/* Control the size of the initial image/lightbox element (The "smaller lightbox" requested) */
#listingDetailGallery {
    height: 450px; /* Set this height to make the lightbox container smaller */
    overflow: hidden; 
    border-radius: var(--rounded);
}

/* NEW: Styles for the Description Area (Below the columns) */
.description-area {
    margin-top: 20px; 
    padding: 20px;
    background-color: var(--card);
    border-radius: var(--rounded);
    box-shadow: var(--shadow);
    /* Ensure it fills the column width */
    width: 100%; 
    box-sizing: border-box;
}

.description-area h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.5rem;
    color: var(--accent);
}

.description-area p {
    line-height: 1.6;
    color: var(--muted);
}

/* =========================
   SELLER CONTACT WIDGET STYLES
   ========================= */

.seller-contact-box {
    margin-top: 25px;
    padding: 20px;
    border: 1px solid var(--bg);
    border-radius: var(--rounded);
    background-color: #f7fbfd; /* A subtle light blue tint for contrast */
}

.seller-contact-box h4 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.1rem;
    color: var(--muted);
    border-bottom: 1px solid var(--bg);
    padding-bottom: 8px;
}

.seller-content-wrapper {
    display: flex;
    justify-content: space-between; /* Pushes content to the left and right edges */
    align-items: center; /* Vertically center the profile and contact info */
    flex-wrap: wrap; /* Allows wrapping on very small screens */
    margin-bottom: 5px;
}

.seller-profile {
    display: flex; 
    align-items: center; 
    margin-bottom: 0; /* REMOVED vertical margin since it's now horizontal */
}

.seller-avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%; /* Circle avatar */
    object-fit: cover;
    margin-right: 15px;
    border: 2px solid var(--accent);
}

.seller-name {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-color);
}

.seller-contact-details a {
    /* Style for the buttons inside the contact box */
    margin-top: 5px;
}

.seller-contact-details {
    flex: 1;          /* Grow to fill available space */
    min-width: 0;     /* Critical flexbox trick: allows text truncation to work inside */
    text-align: right; 
    /* REMOVED: max-width: 60% */
}

/* 1. Container: Use 'baseline' to align the text bottoms perfectly */
.contact-line {
    display: flex;
    justify-content: flex-end; 
    align-items: baseline;    /* <--- FIX: Aligns text by the 'bottom' of the letters */
    width: 100%;
    margin: 2px 0;
    gap: 10px;
}

/* 2. Label: Clean reset */
.contact-label {
    margin: 0;
    font-weight: 400;
    color: var(--muted);
    font-size: 0.95rem;       /* Ensure comparable size to link */
    line-height: 1;
    flex-shrink: 0;
}

/* 3. Link: Remove the margin that was pushing it down */
.contact-line a {
    margin: 0;                /* <--- CRITICAL FIX: Removes the 5px gap */
    padding: 0;
    
    font-size: 1.1rem;
    color: var(--accent);
    text-decoration: none;
    font-weight: 700;
    text-align: right;
    
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

/* Style for the 'Type' field */
.type-badge {
    background-color: var(--accent); /* Uses the teal accent color */
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

/* Container for Seller Contact Info */
.seller-contact-info {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid var(--bg); /* Light separator */
}

/* Style for individual phone/email links */
.contact-link {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
    font-size: 14px;
    text-decoration: none;
    color: var(--muted); 
    transition: color 0.1s;
}

.contact-link:hover {
    color: var(--accent);
    text-decoration: none; /* Keep it clean on hover */
}

.contact-link svg {
    color: var(--accent); /* Icon color */
    flex-shrink: 0;
}

/* --- Address Autocomplete Dropdown --- */
.autocomplete-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid rgba(15,23,42,0.1);
    border-top: none;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    z-index: 1000;
    max-height: 250px;
    overflow-y: auto;
    display: none; /* Hidden by default */
}

.autocomplete-item {
    padding: 10px 15px;
    cursor: pointer;
    font-size: 14px;
    border-bottom: 1px solid #f1f5f9;
    color: var(--text-color);
    transition: background 0.1s;
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item:hover {
    background-color: rgba(14, 165, 160, 0.05); /* Light Teal */
    color: var(--accent);
}

.autocomplete-item small {
    display: block;
    color: var(--muted);
    font-size: 11px;
    margin-top: 2px;
}

/* =========================
   LISTING DETAIL INFO CONTAINER STYLES 
   (For the content generated in openListing(id))
   ========================= */

/* Price and Address Header */
.detail-price-area {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap; /* Wrap on mobile */
    gap: 20px;
    
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--card);
}

/* Left side (Price + Address) */
.price-address-wrapper {
    flex: 1;
    min-width: 250px; /* Ensure it doesn't get too squished */
}

.detail-price {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--danger);
    margin-bottom: 5px;
}
.detail-address {
    font-size: 1rem;
    color: var(--muted);
    margin: 0;
}

/* Property Facts Box (The new consolidated facts table) */
.property-facts {
    padding: 20px;
    background-color: var(--bg);
    border-radius: var(--rounded);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
    margin-top: 25px; /* Use space from the removed .detail-summary */
}

.property-facts h4 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.1rem;
    color: var(--muted);
    border-bottom: 1px solid var(--card);
    padding-bottom: 8px;
}

.fact-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dashed var(--card);
}

.fact-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.fact-item span {
    color: var(--muted);
    font-weight: 400;
}

.fact-item strong {
    font-weight: 600;
    color: var(--text-color);
}

/* Highlighted facts (Rooms, Size) */
.fact-item.fact-highlight {
    background-color: var(--card); /* Add a subtle background to key facts */
    padding: 10px;
    margin: 5px -10px; /* Extend padding slightly */
    border-radius: 6px;
    border: 1px solid var(--card);
    border-bottom: 1px solid var(--card); /* Remove dashed line for highlighted items */
}
.fact-item.fact-highlight strong {
    font-size: 1.1rem; /* Make the values slightly larger */
    color: var(--accent); /* Highlight the values */
}

.section-heading {
    /* MODIFIED: Makes the text bold */
    font-weight: 700; 
    font-size: 24px;
    margin-top: 30px;
    margin-bottom: 15px;
    color: #0f172a;
}

/* Restrict width for Auth forms so they aren't huge */
#loginForm, 
#registerForm {
    max-width: 450px;
}

/* --- Checkbox List (Clean Vertical Style) --- */
.checkbox-grid {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    gap: 0; /* Remove gap, use borders instead */
    margin-top: 8px;
    
    /* Create a "Box" container */
    background: white;
    border: 1px solid rgba(15,23,42,0.1);
    border-radius: 8px;
    overflow: hidden; /* Clip inner corners */
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    
    font-size: 12px; /* Slightly smaller text for compact look */
    color: var(--text-color);
    cursor: pointer;
    
    /* CHANGED: Reduced padding for tighter spacing */
    padding: 6px 15px; 
    
    border: none; 
    border-bottom: 1px solid rgba(15,23,42,0.05); 
    background: transparent; 
    border-radius: 0; 
    transition: background 0.1s;
}

/* Remove border from the last item */
.checkbox-label:last-child {
    border-bottom: none;
}

.checkbox-label:hover {
    background-color: #f1f5f9; /* Light grey hover */
}

/* Checkbox Input Styling */
.checkbox-label input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin: 0;
    accent-color: var(--accent); /* Teal checkmark */
    cursor: pointer;
}

/* Dark Mode Adjustment */
[data-theme="dark"] .checkbox-grid {
    background: var(--card);
    border-color: rgba(255,255,255,0.1);
}
[data-theme="dark"] .checkbox-label {
    border-bottom-color: rgba(255,255,255,0.05);
}
[data-theme="dark"] .checkbox-label:hover {
    background-color: rgba(255,255,255,0.05);
}

/* =========================
   Q&A / COMMENTS SECTION
   ========================= */

.qa-section {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(15, 23, 42, 0.1);
}

.qa-section h3 {
    margin-bottom: 20px;
    font-size: 1.5rem;
    color: var(--text-color);
}

/* Ask Box */
.qa-ask-box {
    margin-bottom: 30px;
    background: var(--bg);
    padding: 20px;
    border-radius: var(--rounded);
}

.qa-ask-box textarea {
    width: 100%;
    resize: vertical;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    font-family: inherit;
}

.qa-login-hint {
    background-color: var(--bg);
    padding: 15px;
    border-radius: var(--rounded);
    text-align: center;
    color: var(--muted);
    margin-bottom: 30px;
}

.qa-login-hint a {
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
}

/* Question Card */
.qa-card {
    background: var(--card);
    border: 1px solid #e5e7eb;
    border-radius: var(--rounded);
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    position: relative;
    transition: transform 0.2s;
}

/* --- TRUST METRIC: Status Indicators --- */
/* We use a thick left border to indicate status */

/* Green: Fresh (< 24h) or Answered */
.qa-status-fresh {
    border-left: 5px solid var(--accent); /* Teal */
}

/* Yellow: Warning (24h - 72h unanswered) */
.qa-status-warning {
    border-left: 5px solid #fbbf24; /* Amber */
    background-color: #fffbeb;      /* NEW: Light Amber Background */
}

/* Dark Mode Override for Warning */
[data-theme="dark"] .qa-status-warning {
    background-color: rgba(251, 191, 36, 0.1); /* NEW: Subtle Amber Tint */
}

/* Red: Danger (> 72h unanswered) - Seller is avoiding/inactive */
.qa-status-danger {
    border-left: 5px solid var(--danger); /* Red */
    background-color: #fef2f2; /* Very light red tint background */
}
[data-theme="dark"] .qa-status-danger {
    background-color: rgba(239, 68, 68, 0.1); /* Dark mode tint */
}

/* Question Content */
.qa-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.qa-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 0.95rem;
}

.qa-date {
    font-size: 0.8rem;
    color: var(--muted);
}

.qa-text {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-color);
}

/* Seller Answer Box (Nested) */
.qa-answer {
    margin-top: 15px;
    padding: 15px;
    background-color: var(--bg); /* Slightly darker/lighter than card */
    border-radius: 8px;
    border-left: 3px solid var(--muted);
}

.qa-answer-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent); /* Highlight that seller replied */
    margin-bottom: 5px;
}

/* Input for Seller to Reply */
.qa-reply-input-area {
    margin-top: 15px;
    display: flex;
    gap: 10px;
}
.qa-reply-input-area input {
    flex-grow: 1;
}

/* --- NOTIFICATIONS SYSTEM --- */

.notification-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* The Red Dot */
.notification-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background-color: var(--danger);
    color: white;
    font-size: 10px;
    font-weight: 800;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    border: 2px solid var(--card); /* Creates a cutout effect */
}

/* The Dropdown Menu */
.notification-dropdown {
    display: none; /* Toggled by JS */
    position: absolute;
    top: 100%;
    right: -80px; /* Shift slightly left so it doesn't go off screen */
    width: 320px;
    background-color: var(--card);
    border: 1px solid rgba(15,23,42,0.1);
    border-radius: var(--rounded);
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    z-index: 1000;
    margin-top: 15px;
    overflow: hidden;
    animation: scaleIn 0.15s ease-out;
}

/* Dark mode adjust for dropdown */
[data-theme="dark"] .notification-dropdown {
    border-color: rgba(255,255,255,0.1);
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid rgba(15,23,42,0.05);
    background-color: var(--bg);
}
.notification-header h4 {
    margin: 0;
    font-size: 14px;
    color: var(--text-color);
}

.notification-list {
    max-height: 300px;
    overflow-y: auto;
}

/* Individual Item */
.notif-item {
    padding: 12px 15px;
    border-bottom: 1px solid rgba(15,23,42,0.05);
    background-color: var(--card);
    border-left: 4px solid transparent; /* Vaikimisi ääris peidus */
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    
    /* Loetud olek on vaikimisi tuhmim */
    opacity: 0.7; 
    transition: all 0.3s ease;
}

.notif-item:hover {
    opacity: 1;
    background-color: rgba(0,0,0,0.02);
}

/* --- LUGEMATA OLEK (ÜLDINE) --- */
.notif-item.unread {
    background-color: rgba(14, 165, 160, 0.08); /* Vaikimisi Teal taust */
    border-left-color: var(--accent);          /* Vaikimisi Teal joon */
    opacity: 1; /* Täiesti ere */
}

/* Tekst paksuks ainult lugemata olekus */
.notif-item.unread .notif-msg {
    font-weight: 700;
    color: var(--text-color);
}

/* --- TÜÜBI PÕHISED VÄRVID (Ainult lugemata olekus) --- */

/* 1. KINGITUS / AUHIND (Lilla) */
.notif-item.unread.type-gift {
    background-color: #f3e8ff; /* Hele lilla taust */
    border-left-color: #9333ea; /* Tugev lilla joon */
}

/* 2. HOIATUS / OLULINE (Punane) */
.notif-item.unread.type-alert,
.notif-item.unread.type-danger {
    background-color: #fef2f2; /* Hele punane taust */
    border-left-color: #ef4444; /* Tugev punane joon */
}

/* 3. SÜSTEEM / INFO (Sinine) */
.notif-item.unread.type-system {
    background-color: #eff6ff; /* Hele sinine taust */
    border-left-color: #3b82f6; /* Tugev sinine joon */
}

/* Dark Mode tugi värvidele */
[data-theme="dark"] .notif-item.unread { background-color: rgba(45, 212, 191, 0.1); }
[data-theme="dark"] .notif-item.unread.type-gift { background-color: rgba(147, 51, 234, 0.15); }
[data-theme="dark"] .notif-item.unread.type-alert { background-color: rgba(239, 68, 68, 0.15); }
[data-theme="dark"] .notif-item.unread.type-system { background-color: rgba(59, 130, 246, 0.15); }

.notif-msg {
    font-size: 13px;
    color: var(--text-color);
    line-height: 1.4;
}
.notif-date {
    font-size: 11px;
    color: var(--muted);
}
/* --- Clean Icon Button (Ghost Style) --- */
.icon-btn {
    background: transparent; /* Removes grey background */
    border: none;            /* Removes border */
    cursor: pointer;
    padding: 8px;            /* Clickable area */
    border-radius: 50%;      /* Circle shape on hover */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
    color: var(--muted);     /* Default icon color */
}

/* Hover Effect: Subtle circle */
.icon-btn:hover {
    background-color: rgba(15, 23, 42, 0.05); 
    color: var(--accent);    /* Icon turns Teal */
}

/* Dark Mode Hover */
[data-theme="dark"] .icon-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* --- Center the Filter Modal (Card Style) --- */

#detailedFiltersModal {
    justify-content: center; /* Centers horizontally */
    align-items: center;     /* Centers vertically */
    padding: 20px;           /* Prevents touching screen edges on mobile */
}

#detailedFiltersModal .filter-content {
    height: auto;             /* No longer 100% height */
    max-height: 90vh;         /* Max 90% of screen height */
    width: 600px;             /* Slightly wider for a better grid layout */
    max-width: 100%;          /* Responsive safety */
    border-radius: 12px;      /* Restore rounded corners */
    
    /* Make sure internal scroll works if the screen is short */
    overflow-y: auto;         
}

/* Adjust grid for the wider layout */
#detailedFiltersModal .form-row-grid {
    gap: 20px; /* More breathing room */
}

/* --- Force Delete Modal to Center --- */
#deleteInterventionModal {
    justify-content: center !important; /* Override the global flex-end */
    align-items: center !important;
}

/* Optional: Ensure the box doesn't stretch */
#deleteInterventionModal .modal-content {
    margin: 0 20px; /* Add side margins on mobile */
    max-height: 90vh; /* Prevent overflowing screen */
    overflow-y: auto; /* Scroll if content is too tall */
}

/* --- RECENTLY SOLD SECTION --- */
.sold-section-container {
    padding: 20px 0;
    background-color: rgba(14, 165, 160, 0.03); /* Very faint teal bg */
    margin-bottom: 40px;
    border-top: 1px solid rgba(0,0,0,0.05);
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.sold-grid {
    display: grid;
    /* Smaller cards: min 180px instead of 220px */
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); 
    gap: 15px;
    justify-content: center; /* Tsentreerib veerud konteineris */
    max-width: 1300px;     /* Piirame laiust, et 6 tükki ei veniks liiga laiali */
    margin: 0 auto;
}

@media (max-width: 768px) {
    .sold-grid {
        /* Force exactly 2 columns on mobile */
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}

/* Compact Card (Recently Sold) */
.card-compact {
    background: var(--card);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    position: relative;
    
    /* NEW: Default border (light) */
    border: 1px solid rgba(0,0,0,0.05);
    opacity: 0.9;
    transition: transform 0.2s;
    
    /* NEW: Force RED border for sold items in this list */
    border-color: var(--danger) !important; 
}

.card-compact:hover {
    transform: translateY(-2px);
    opacity: 1;
    box-shadow: 0 5px 15px rgba(239, 68, 68, 0.15); /* Reddish shadow on hover */
}

.card-compact img {
    width: 100%;
    height: 120px;
    object-fit: cover;
}

.card-compact .info {
    padding: 10px;
}

/* NEW: Force Price to be RED in the sold ticker */
.card-compact .price {
    font-size: 14px;
    font-weight: 700;
    color: var(--danger) !important; /* Red */
}

.card-compact .sold-badge {
    position: absolute;
    top: 5px;
    left: 5px;
    background: var(--danger);
    color: white;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    z-index: 2;
}

/* --- Scroll to Top Button --- */
.scroll-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    
    background-color: var(--accent);
    color: white;
    border: none;
    border-radius: 50%;
    
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    
    /* Ensure it floats above everything (modals, sticky bars) */
    z-index: 9999; 
    
    /* Hidden by default */
    opacity: 0; 
    visibility: hidden;
    transform: translateY(20px); /* Pushed down slightly */
    transition: all 0.3s ease;
}

/* Visible State (Added by JS) */
.scroll-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Hover Effect */
.scroll-top-btn:hover {
    background-color: var(--accent-2); /* Cyan */
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}

/* --- Danger Zone Container --- */
.danger-zone-card {
    padding: 25px;
    background-color: #fef2f2; /* Light Red (Light Mode) */
    border-radius: var(--rounded);
    border: 1px solid #fecaca;
}

.danger-zone-title {
    margin-top: 0; 
    color: var(--danger); 
    font-size: 1.2rem; 
    display: flex; 
    align-items: center; 
    gap: 10px;
}

.danger-zone-text {
    font-size: 14px; 
    color: #7f1d1d; /* Dark Red Text */
    line-height: 1.5; 
    margin-bottom: 20px;
}

/* Dark Mode Overrides */
[data-theme="dark"] .danger-zone-card {
    background-color: rgba(239, 68, 68, 0.1); /* Transparent Dark Red */
    border-color: rgba(239, 68, 68, 0.3);
}

[data-theme="dark"] .danger-zone-text {
    color: #fca5a5; /* Light Red Text for readability on dark */
}

/* --- Cookie Banner --- */
.cookie-banner {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%); /* Center it horizontally */
    
    width: 90%;
    max-width: 500px;
    
    background-color: var(--card);
    border: 1px solid rgba(14, 165, 160, 0.2); /* Subtle teal border */
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    
    z-index: 10001; /* Highest priority (above modals) */
    padding: 20px;
    
    /* Animation */
    animation: slideUpFade 0.5s ease-out;
}

.cookie-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.cookie-actions {
    display: flex;
    gap: 10px;
}

/* Mobile Responsiveness: Stack vertical on small screens */
@media (max-width: 600px) {
    .cookie-content {
        flex-direction: column;
        text-align: center;
    }
    .cookie-actions {
        width: 100%;
    }
    .cookie-actions .btn {
        flex: 1;
    }
}

/* Animation Definition */
@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translate(-50%, 50px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* Dark Mode Tweaks */
[data-theme="dark"] .cookie-banner {
    border-color: rgba(255,255,255,0.1);
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

/* =========================================
   MOBIILIVAADE (Max Width 768px)
   ========================================= */

@media (max-width: 768px) {

    /* 1. Päis: Logo ja Navigatsioon üksteise alla */
    .appbar {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
        position: relative;
    }

    .nav-links {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    .nav-links .btn {
        font-size: 13px;
        padding: 6px 10px;
    }

    /* 2. Hero Sektsioon */
    .hero-section {
        padding: 40px 15px;
        min-height: auto;
        background-position: center center;
    }

    /* --- 3. AVALEHE (HERO) OTSINGURIBA (.search-input-group) --- */
    .hero-section .search-input-group {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important; /* Sunnib inputi ja nupud eri ridadele */
        align-items: stretch !important;
        
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        
        background-color: #ffffff;
        border-radius: 12px;
        border: 1px solid #e5e7eb;
        overflow: hidden;
    }
    
    /* Avalehe Input (Ülemine rida) */
    .hero-section .search-input-group input.simple-search-input {
        width: 100% !important; /* Võtab terve laiuse */
        height: 50px !important;
        margin: 0 !important;
        padding: 0 15px !important;
        text-align: center;
        border: none !important;
        border-bottom: 1px solid #e5e7eb !important;
        border-radius: 0 !important;
    }

    /* Avalehe nupud (Alumine rida) */
    .hero-section .search-input-group .search-action-btn {
        flex: 1 !important; /* Jagavad ruumi võrdselt */
        width: auto !important;
        height: 60px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        border-right: 1px solid #e5e7eb !important;
        
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
        
        background-color: transparent !important;
        color: var(--muted);
        font-size: 11px !important;
    }

    /* Avalehe "Otsi" nupp - TEKST VALGEKS */
    .hero-section .search-input-group .btn.primary {
        background-color: var(--accent) !important;
        color: #ffffff !important;
        font-weight: 700;
        border: none !important;
    }

    /* Eemaldame viimase nupu parema ääre */
    .hero-section .search-input-group .search-action-btn:last-child {
        border-right: none !important;
    }


    /* --- 4. OTSINGULEHE (RESULTS) OTSINGURIBA (.results-search-bar) --- */
    .results-search-bar {
        flex-direction: column !important;
        padding: 0 !important;
        align-items: stretch !important;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid #e5e7eb;
        background: #ffffff;
        height: auto !important;
    }

    /* Input */
    .results-search-input {
        width: 100% !important;
        height: 50px !important;
        text-align: center;
        border: none !important;
        border-bottom: 1px solid #e5e7eb !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0 15px !important;
    }

    /* Nuppude grupp */
    .results-btn-group {
        display: flex !important;
        width: 100% !important;
        gap: 0 !important;
    }

    /* Nupud */
    .results-btn-group .btn {
        flex: 1 !important;
        height: 60px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        border-right: 1px solid #e5e7eb !important;
        
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
        
        background: transparent !important;
        color: var(--muted);
        font-size: 11px !important;
        font-weight: 500;
    }

    .results-btn-group .btn:last-child {
        border-right: none !important;
    }

    /* Otsingulehe "Otsi" nupp - TEKST VALGEKS */
    .results-btn-group .btn.primary {
        background-color: var(--accent) !important;
        color: #ffffff !important;
        flex: 1.2 !important;
        font-size: 13px !important;
    }

    .results-btn-group svg {
        width: 18px;
        height: 18px;
        margin: 0;
    }

    /* Abiklassid */
    .hide-on-mobile, 
    .results-btn-group .hide-on-mobile {
        display: none !important;
    }
    .mobile-label,
    .results-btn-group .mobile-label {
        display: block !important;
    }


    /* --- 5. Filter Modal (Täisekraan mobiilis) --- */
    .filter-content {
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        margin: 0;
    }
    
    #detailedSearchForm .form-row-grid {
        grid-template-columns: 1fr; /* Filtrid üksteise alla */
    }

    /* --- 6. Kuulutuse Detailvaade --- */
    .detail-content-wrapper,
    .detail-page-content {
        flex-direction: column; 
    }

    .gallery-column, 
    .info-column {
        max-width: 100%; 
    }

    #listingDetailGallery {
        height: 300px; 
    }

    .detail-price-area {
        text-align: center;
    }
    
    .property-facts {
        margin-top: 15px;
    }

    /* --- 7. Profiilileht --- */
    .profile-header-card {
        padding: 20px;
    }
    
    .profile-stats-row {
        gap: 15px; 
    }
    
    .avatar-large {
        width: 100px !important;
        height: 100px !important;
    }
    
    #profileSettingsContainer .form-grid {
        grid-template-columns: 1fr; 
    }
    
    #profileSettingsContainer div[style*="display: grid"] {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    /* --- 8. Vormid (Lisa kuulutus) --- */
    .form-group-row {
        flex-direction: column;
        gap: 0;
    }
    
    .form-grid-compact {
        grid-template-columns: repeat(2, 1fr); 
    }

    /* --- 9. Admin Tabel (Keritav) --- */
    .form-card div[style*="overflow-x: auto"] {
        -webkit-overflow-scrolling: touch; 
    }
    
    /* --- 10. COOKIE BANNER (SEE OLI PUUDU!) --- */
    .cookie-banner {
        width: 95%;
        bottom: 10px;
        padding: 15px;
    }
    
    .cookie-content {
        flex-direction: column;
        text-align: center;
    }
    
    .cookie-actions {
        width: 100%;
        margin-top: 10px;
    }
    
    .cookie-actions .btn {
        flex: 1;
    }

    /* --- 11. Teavitused (Notifications) --- */
    .notification-dropdown {
        position: fixed; 
        top: 80px; 
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: 90%; 
        max-width: 350px;
        box-shadow: 0 10px 100px rgba(0,0,0,0.3) !important;
        border: 1px solid rgba(14, 165, 160, 0.5);
    }
    .notification-dropdown::before {
        display: none;
    }
}

/* =================================================================
   LÕPLIK FIX: Avalehe "Otsi" nupp (ÕIGED KLASSID)
   HTML kasutab .results-btn-group, mitte .search-input-group!
   ================================================================= */

@media (max-width: 768px) {
    /* Sihime õiget konteinerit (.results-btn-group) avalehe vormi sees (#simpleSearchForm) */
    #simpleSearchForm .results-btn-group .btn.primary {
        background-color: var(--accent) !important;
        
        /* Sunnime teksti valgeks */
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important; /* iPhone/Safari fix */
        
        opacity: 1 !important;
        border: none !important;
    }

    /* Topeltkindlustus Dark Mode jaoks */
    [data-theme="dark"] #simpleSearchForm .results-btn-group .btn.primary {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }
}

/* --- PARANDUS: Otsingulehe "Otsi" nupp ALATI valge tekstiga --- */
#resultsSearchForm .results-btn-group .btn.primary {
    color: #ffffff !important;
    opacity: 1 !important; /* Igaks juhuks, et poleks läbipaistev */
}

/* Tume režiim - topeltkindlustus */
[data-theme="dark"] #resultsSearchForm .results-btn-group .btn.primary {
    color: #ffffff !important;
}

/* Väiksemad telefonid (< 400px) */
@media (max-width: 400px) {
    .form-grid-compact {
        grid-template-columns: 1fr; 
    }
    
    .card-badges {
        top: 10px;
        left: 10px;
    }
    
    .card-status-badge {
        font-size: 9px;
        padding: 3px 6px;
    }
}

/* --- Search Autocomplete (Global) --- */
.search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0; /* Full width of the search bar */
    background: var(--card);
    border: 1px solid var(--accent);
    border-top: none;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
    display: none;
    margin-top: 2px;
}

.suggestion-item {
    padding: 12px 15px;
    cursor: pointer;
    font-size: 14px;
    border-bottom: 1px solid rgba(15,23,42,0.05);
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

.suggestion-item:last-child {
    border-bottom: none;
}

.suggestion-item:hover {
    background-color: rgba(14, 165, 160, 0.08);
    color: var(--accent);
}

.suggestion-icon {
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.suggestion-icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

/* --- Admin Table Styling --- */
.agent-row {
    background-color: rgba(14, 165, 160, 0.08) !important; /* Light Teal Tint */
    border-left: 3px solid var(--accent);
}

[data-theme="dark"] .agent-row {
    background-color: rgba(45, 212, 191, 0.1) !important;
}

/* Table Input Styling */
.token-input {
    width: 60px;
    text-align: center;
    padding: 6px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
}

/* --- Force Chart Modal to Center --- */
#chartModal {
    justify-content: center !important; /* Override the global 'flex-end' */
    align-items: center !important;
}

/* Optional: Ensure the content box doesn't stick to the right edge on mobile */
#chartModal .modal-content {
    margin: 20px; 
    max-width: 1200px;
    width: 95%;
}

/* --- Bang for Buck Meter --- */
.value-meter-wrapper {
    flex: 1;
    min-width: 200px;
    max-width: 300px;
    background: var(--card);
    border: 1px solid rgba(15,23,42,0.05);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.meter-header {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.meter-track {
    height: 8px;
    background: linear-gradient(90deg, #22c55e 0%, #e5e7eb 50%, #a855f7 100%);
    border-radius: 4px;
    position: relative;
    margin-bottom: 8px;
}

.meter-needle {
    position: absolute;
    top: -4px;
    width: 4px;
    height: 16px;
    background: #0f172a;
    border-radius: 2px;
    transform: translateX(-50%);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transition: left 1s ease-out;
}

.meter-text {
    font-size: 12px;
    text-align: center;
    color: var(--text-color);
    font-weight: 500;
}

.meter-text strong {
    font-weight: 700;
}

/* Dark Mode */
[data-theme="dark"] .value-meter-wrapper {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.1);
}
[data-theme="dark"] .meter-track {
    background: linear-gradient(90deg, #22c55e 0%, #475569 50%, #a855f7 100%);
}
[data-theme="dark"] .meter-needle, 
[data-theme="dark"] .meter-needle::after {
    background: #f1f5f9;
    border-top-color: #f1f5f9;
}

/* --- BFB INFO TOOLTIP --- */
.bfb-info-wrapper {
    position: relative;
    display: inline-flex;
    margin-left: 8px;
    cursor: help;
    vertical-align: middle;
}

.bfb-info-icon {
    width: 16px;
    height: 16px;
    border: 1px solid var(--muted);
    color: var(--muted);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: serif; 
    transition: all 0.2s;
    background: transparent;
}

/* Hover efekt */
.bfb-info-wrapper:hover .bfb-info-icon {
    border-color: var(--accent);
    color: var(--accent);
    background-color: rgba(14, 165, 160, 0.1);
}

/* Tooltipi kast */
.bfb-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 135%; /* Ikooni kohal */
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    width: 200px;
    padding: 10px;
    background-color: #1e293b; /* Tume taust */
    color: #fff;
    font-size: 11px;
    line-height: 1.4;
    font-weight: 400;
    text-align: center;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.25);
    z-index: 100;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
}

/* Väike nooleke kasti all */
.bfb-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #1e293b transparent transparent transparent;
}

/* Näita kasti hoveril */
.bfb-info-wrapper:hover .bfb-tooltip {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* --- DARK MODE PARANDUSED OTSINGULEHELE (.results-search-bar) --- */

/* 1. Tume taust ja ääred otsingukastile */
[data-theme="dark"] .results-search-bar {
    background-color: var(--card) !important; /* Tume taust (#1e293b) */
    border-color: #334155 !important;         /* Tumedam ääris */
}

/* 2. Tekstivärv sisestusväljal */
[data-theme="dark"] .results-search-input {
    color: #f1f5f9 !important; /* Valge tekst */
}

/* 3. Placeholderi (vihjeteksti) värv */
[data-theme="dark"] .results-search-input::placeholder {
    color: #64748b;
}

/* 4. MOBIILIVAADE: Jooned nuppude vahel tumedaks */
@media (max-width: 768px) {
    
    /* Inputi alumine joon */
    [data-theme="dark"] .results-search-input {
        border-bottom-color: #334155 !important;
    }

    /* Püstised jooned nuppude vahel */
    [data-theme="dark"] .results-btn-group .btn {
        border-right-color: #334155 !important;
        color: var(--muted) !important; /* Hallikas tekst */
    }
    
    /* Aktiivne olek (kui vajutad) */
    [data-theme="dark"] .results-btn-group .btn:active {
        background-color: rgba(255,255,255,0.05) !important;
    }
}

/* --- COMPACT STATS CARDS --- */
.stats-wrapper {
    max-width: 1233px; 
    margin: 0 auto; 
    width: 100%;
}

.stats-row {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
    justify-content: center;
}

.stat-card-compact {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--rounded);
    padding: 20px 15px; /* Reduced padding */
    flex: 1;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.stat-number {
    font-size: 1.8rem; /* Much smaller than the old 3rem */
    font-weight: 800;
    margin-bottom: 5px;
    line-height: 1;
}

.stat-label {
    font-size: 0.85rem;
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Pro Stats Section (Theme Adaptive) --- */
.pro-stats-container {
    padding: 40px 0;
    margin-top: 40px;
    background-color: #f8fafc;       /* Light Mode: Very light gray */
    border-top: 1px solid #e2e8f0;
}

/* Dark Mode Overrides */
[data-theme="dark"] .pro-stats-container {
    background-color: #1e293b;       /* Dark Mode: Slate Blue/Grey */
    border-top: 1px solid #334155;   /* Darker border */
}

/* Add this to your CSS for the User Dropdown */
.notification-dropdown.show {
    display: block;
    animation: fadeIn 0.2s ease-out;
}

/* =========================
   HEATMAP CONTROLS VISIBILITY
   ========================= */

#mapLayerSelect, 
#mapTypeSelect, 
#mapSubtypeSelect {
    /* 1. Stronger Border for Light Mode */
    border: 1px solid #666 !important;  /* Dark grey border */
    background-color: #fff;             /* Clean white background */
    color: #000;                        /* Sharp black text */
    
    /* 2. Spacing & Shape (Optional for better feel) */
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    outline: none;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Hover Effect - Makes it even clearer when user interacts */
#mapLayerSelect:hover, 
#mapTypeSelect:hover, 
#mapSubtypeSelect:hover {
    border-color: #000 !important;      /* Black border on hover */
    background-color: #f9f9f9;
}

/* =========================
   DARK MODE OVERRIDES
   (If your site uses .dark or .dark-mode class on body)
   ========================= */
.dark #mapLayerSelect, 
.dark #mapTypeSelect, 
.dark #mapSubtypeSelect,
.dark-mode #mapLayerSelect, 
.dark-mode #mapTypeSelect, 
.dark-mode #mapSubtypeSelect {
    border: 1px solid #555 !important;
    background-color: #2d3748;          /* Dark grey background */
    color: #e2e8f0;                     /* Light text */
}

/* --- Z-INDEX PARANDUSED --- */

/* 1. Tõsta päis (Appbar) kõrgemale kui ülejäänud leht */
.appbar {
    position: relative; /* Või sticky, olenevalt sinu disainist */
    z-index: 1000 !important; /* Tõstame terve päise sisu (sh menüüd) teistest ette */
}

/* 2. Tõsta rippmenüüd (Dropdowns) omakorda päise sees kõige peale */
#userMenuDropdown, 
.notification-dropdown,
.dropdown-menu {
    z-index: 9999 !important; /* Maksimaalne kõrgus */
}

/* 3. Suru otsinguvorm (Simple Search Form) madalamale */
/* Kasuta seda klassi, mis sinu vormil tegelikult on (nt .search-form-overlay või #simpleSearchForm) */
.search-form-overlay,
.simple-search-style,
#simpleSearchForm {
    z-index: 10 !important; /* Madalam kui päis (1000) */
    position: relative; /* Vajalik, et z-index töötaks */
}

/* ERIJUHT: Kui otsinguriba on päises (.search-input-group) ja see katab menüüd */
.search-input-group {
    z-index: 50 !important; /* Madalam kui dropdowni 9999 */
}

/* --- MOBIILI TEAVITUSTE PARANDUS --- */
@media (max-width: 768px) {
    .notification-dropdown {
        /* Vabastame menüü nupu küljest */
        position: fixed; 
        
        /* Paigutame ekraani keskele */
        top: 80px; /* Natuke allpool päist (säti vastavalt vajadusele) */
        left: 50%;
        right: auto; /* Tühistame vana 'right' väärtuse */
        transform: translateX(-50%); /* Tsentreerib täpselt keskele */
        
        /* Määrame mobiilisõbraliku laiuse */
        width: 90%; 
        max-width: 350px;
        
        /* Lisame tugevama varju, et eristuks taustast */
        box-shadow: 0 10px 100px rgba(0,0,0,0.3) !important;
        border: 1px solid rgba(14, 165, 160, 0.5);
    }
    
    /* Lisame väikese noolekese üles, et näidata seost (valikuline) */
    .notification-dropdown::before {
        display: none; /* Mobiilis pole noolt vaja, kuna see on keskel */
    }
}

/* Tume režiim: Keele nupud valgeks */
[data-theme="dark"] .btn-lang {
    color: #ffffff !important;
    transition: color 0.3s ease;
}

[data-theme="dark"] .btn-lang:hover {
    color: var(--accent) !important;
}