@import url('https://fonts.googleapis.com/css2?family=Paytone+One&display=swap');

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.kinnisvarahai-cool-title {
    font-family: 'Paytone One', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    background: linear-gradient(90deg, #00f2fe, #ff007f, #00f2fe);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2px white;
    text-shadow: none !important;
    font-size: clamp(3rem, 6vw, 5rem) !important;
    animation: gradientMove 4s linear infinite;
}
.hai-intro-wrapper {
    transform: translateY(-80px);
}
.hai-intro-text {
    margin-top: 250px;
}
.hai-full-screen {
    min-height: 750px;
}

.mobile-only { display: none !important; }
@media (max-width: 600px) {
    .hai-full-screen {
        min-height: calc(100dvh - 80px);
    }
    .hai-intro-wrapper {
        transform: translateY(20px);
    }
    .hai-intro-text {
        margin-top: 80px;
    }
    .kinnisvarahai-cool-title {
        font-size: clamp(2.5rem, 10vw, 3.5rem) !important;
        -webkit-text-stroke: 1px white !important;
        line-height: 1.1 !important;
    }
    .mobile-only { display: inline !important; }
    .desktop-only { display: none !important; }
}

:root{
  --bg:#f3f7f8;
  --card:#ffffff;
  --muted:#6b7280;
  --accent:#0ea5a0; /* teal */
  --accent-dark:#0ea5e9; /* dark teal for gradients */
  --accent-2:#06b6d4; /* cyan */

  /* ------------------- No Results Banner ------------------- */
  .no-results-banner {
    /* Existing styles */

    display: none;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    padding: 15px 25px;
    border-radius: var(--rounded);
    margin-bottom: 20px;
    color: #fff;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.1);
    display: flex; /* ensure flex layout */
    position: relative;
    overflow: hidden;
    /* Text enhancements */
    h3 {
        font-weight: 600;
        text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        margin-bottom: 0.5rem;
    }
    p {
        text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    }
    .radar-bg-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 180px;
        height: 180px;
        opacity: 0.45;
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        filter: blur(1px);
    }
    .radar-bg-icon svg {
        width: 100%;
        height: 100%;
        color: #fff;
        filter: drop-shadow(0 0 15px currentColor);
    }

  }

  --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"] {
  /* existing dark theme vars */

  --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 */
  /* Dark mode banner background */
  .no-results-banner {
    background: linear-gradient(135deg, var(--bg) 0%, var(--card) 100%);
  }
  .no-results-banner .radar-bg-icon {
    opacity: 0.7;
  }
  .no-results-banner .radar-bg-icon svg {
    color: var(--accent);
  }
}

/* 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.2s ease, 
                color 0.2s ease, 
                border-color 0.2s 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, #hamburgerLogo {
  height: 50px; 
  width: auto;
  margin-right: 8px; 
  
  /* CSS MAGIC: Hides the white background */
  mix-blend-mode: multiply; 
}
#hamburgerLogo {
    height: 35px; /* Override height for hamburger menu */
    margin-right: 0;
}

/* 1. Resetime filtrid, et pilt oleks puhas. Header logo */
[data-theme="dark"] #appLogo,
[data-theme="dark"] #hamburgerLogo {
    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.primary:hover {
    filter: brightness(0.9);
}

.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-image: 
        linear-gradient(to bottom, rgba(220, 240, 255, 0.5) 0%, rgba(255, 255, 255, 0) 60%), 
        linear-gradient(to top, var(--bg) 0%, rgba(243, 247, 248, 0) 40%), 
        url('Hero-background.webp'); 
    background-position: center 10%;
    background-repeat: 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; 
}

a.card {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* --- 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;
    font-family: inherit;
    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;
}

/* =========================================
   PROMO NURGALINT & TOOLTIP (ALL PAREMAL)
   ========================================= */
.promo-corner-wrapper {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 38px;  
    height: 38px; 
    z-index: 15;
    /* EEMALDATUD: overflow: hidden; et tooltip saaks kastist välja kasvada */
}

.promo-corner-triangle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 38px 38px; 
    border-color: transparent transparent #2563eb transparent; 
    filter: drop-shadow(-2px -2px 3px rgba(0,0,0,0.2)); 
}

.promo-corner-star {
    position: absolute;
    bottom: 5px;  
    right: 5px;   
    width: 14px;  
    height: 14px; 
    color: white; 
    z-index: 16;
    transform: rotate(-15deg); 
    filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.3));
}

/* --- HOVER INFOKAST (TOOLTIP) --- */
.promo-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 45px; /* Tõstame tähekese kohale */
    right: 0;     /* Joondame parema äärega */
    background-color: #1e293b; /* Tume taust */
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap; /* Ei lase teksti mitmele reale */
    box-shadow: 0 4px 15px rgba(0,0,0,0.25);
    z-index: 20;
    pointer-events: none; /* Hiir läheb läbi, ei sega klikkimist */
    transition: opacity 0.2s, transform 0.2s;
    transform: translateY(5px);
}

/* Väike nooleke infokasti alla, mis osutab tähele */
.promo-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 12px; /* Suunab täpselt tähekese peale */
    border-width: 5px;
    border-style: solid;
    border-color: #1e293b transparent transparent transparent;
}

/* Näita kasti, kui hiir läheb nurgalindi peale */
.promo-corner-wrapper:hover .promo-tooltip {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* --- 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%;
        width: 100%; /* See parandab vea, kus kast jäi mobiilis liiga kitsaks */
    }
    
    #listingDetailGallery {
        height: 350px !important; /* Tahvelarvutis natuke madalam */
    }
}

/* UUS: Spetsiaalne kohandus väikestele telefonidele */
@media (max-width: 768px) {
    #listingDetailGallery {
        height: 280px !important; /* Mobiilis ilus kompaktne kõrgus */
    }
    .image-thumbnails-container {
        margin-top: 5px !important; /* Tõmbab pisipildid peapildile lähemale */
        gap: 5px !important; /* Vähendab pisipiltide vahet */
        padding-bottom: 5px !important;
    }
    .thumbnail-item {
        flex: 0 0 80px !important; /* Mobiilis teeme pisipildid kitsamaks, et rohkem mahuks ritta */
        height: 60px !important;
    }
}

/* =========================
   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; 

    /* --- UUS iOS SAFARI KAITSE --- */
    overscroll-behavior-x: contain; /* Ei lase tervel lehel kaasa lohiseda */
    touch-action: pan-x pan-y;      /* Aitab brauseril aru saada, mis suunas liigutakse */
    
    /* 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;
    gap: 15px;
}

.seller-profile {
    display: flex; 
    align-items: center; 
    margin-bottom: 0;
    min-width: 0;
    flex: 1;
}

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

.seller-profile-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    flex: 1;
}

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

.seller-status-notice {
    color: var(--muted);
    font-style: italic;
    margin: 6px 0 0;
    line-height: 1.4;
    overflow-wrap: break-word;
    max-width: 100%;
}

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

.seller-contact-details {
    flex-shrink: 0;
    min-width: 0;
    text-align: right; 
}

/* 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;
    
    word-break: break-all; /* Lubab e-kirjal või telefoninumbril vajadusel murduda */
}

/* Telefonivaate kohandused */
@media (max-width: 600px) {
    .seller-content-wrapper {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
    }
    
    .seller-profile {
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
    }
    
    .seller-profile div {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-top: 10px;
    }
    
    .seller-avatar {
        margin-right: 0;
    }
    
    .seller-contact-details {
        text-align: center;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .contact-line {
        justify-content: center;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        margin: 6px 0;
    }
    
    .contact-line a, .contact-line span {
        text-align: center;
    }
}

.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 jäävad ühte ritta (Hamburgeri jaoks) */
    .appbar {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 6px 15px;
        gap: 10px;
        position: relative;
    }

    .nav-links {
        width: auto;
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: 10px;
        padding-right: 45px; /* Jäta ruumi absolute hamburger nupule */
    }

    .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%; 
        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 MOBIILIVAADE --- */
@media (max-width: 768px) {
    .admin-header-mobile {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .admin-header-mobile > h2 {
        margin-bottom: 0 !important;
    }
    .admin-tabs {
        width: 100%;
        overflow-x: auto; /* Laseb nuppe horisontaalselt kerida */
        padding-bottom: 5px; /* Teeb kerimisribale ruumi */
        justify-content: flex-start !important;
    }
    .admin-tabs button {
        flex-shrink: 0; /* Keelab nuppudel kokku litsuda */
        white-space: nowrap; /* Hoiab teksti ühel real */
    }
}

/* --- 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-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Mobiili sujuvus */
    margin-bottom: 20px;
    border: 1px solid var(--border); /* Kui sul on muutuja, muidu pane #ccc */
    border-radius: 8px;
}

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

/* Eemalda nooled (spinners) numbriväljadelt */
/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Admin tabeli inputide stiil */
.token-input {
    width: 60px !important; /* Laiem kast */
    padding: 4px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-weight: 600;
}

/* Admin dashboard graafikud: mobiilis täislaius, ei venita lehte horisontaalselt */
.stats-grid.admin-charts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 30px;
    max-width: 100%;
}

.stats-grid.admin-charts-grid .chart-container {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

@media (min-width: 900px) {
    .stats-grid.admin-charts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --- 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 */
}

/* Laseb näpu/hiire kuumkaardist läbi otse kaardile */
.leaflet-heatmap-layer {
    pointer-events: none !important;
}

/* --- 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 */
    }
    
    /* Tühistame profiilimenüü jaoks selle keskele tsentreerimise */
    #userMenuDropdown {
        position: absolute !important;
        top: 100% !important;
        left: auto !important;
        right: 0 !important;
        transform: none !important;
        width: 220px !important;
    }
}

/* 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;
}

/* Automaatselt suurenev tekstikast */
#sellDesc {
    overflow-y: hidden; /* Peidab scrollbari */
    resize: none;       /* Peidab käsitsi venitamise nupu */
    min-height: 120px;  /* Algne kõrgus */
    transition: height 0.1s ease;
}

/* Kohustusliku välja tärn */
.required-star {
    color: var(--danger) !important; /* Muudab tärni punaseks */
    font-weight: 800;
    margin-left: 3px;
}

/* =========================================
   VAATE LÜLITI JA NIMEKIRJAVAADE (GRID / LIST)
   ========================================= */

.view-toggle {
    display: flex;
    gap: 5px;
}
.view-toggle button {
    background: var(--card);
    border: 1px solid var(--border, #e5e7eb);
    color: var(--muted);
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.view-toggle button:hover {
    color: var(--accent);
    border-color: var(--accent);
}
.view-toggle button.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

/* Dark mode tuuning nuppudele */
[data-theme="dark"] .view-toggle button {
    background: #1e293b;
    border-color: #334155;
}
[data-theme="dark"] .view-toggle button.active {
    background: var(--accent);
    color: white;
}

/* =========================================
   NIMEKIRJAVAATE (LIST VIEW) OVERRIDES
   ========================================= */

/* 1. Vaikimisi (Ruudustiku / Grid) vaade */
.card .card-info {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card .list-view-price {
    display: none; /* Peidame nimekirja hinna gridis */
}

.card .grid-view-price {
    display: block; /* Näitame vana hinda gridis */
}

.card .card-header-top {
    display: block; /* Laseme tekstil ja hinnal olla normaalselt */
}


/* 2. Nimekirjavaade (List View) */
.listings-grid.list-view {
    display: flex !important;
    flex-direction: column;
    gap: 15px;
}

/* Nimekirjavaate peamine kaardi struktuur */
.listings-grid.list-view .card {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 100%;
    
    /* UUS: SUNDKÕRGUS JA LUKUSTUS */
    height: 240px; 
    overflow: hidden; 
    
    padding: 0;
    align-items: stretch;
    position: relative;
}

.listings-grid.list-view .card .image-wrapper {
    width: 35%;
    min-width: 280px;
    flex-shrink: 0;
}

.listings-grid.list-view .card .image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--rounded) 0 0 var(--rounded);
}

.listings-grid.list-view .card .card-info {
    padding: 20px 25px; /* Suurem vahe nimekirjas */
    justify-content: center;
}

.listings-grid.list-view .card-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
}

/* Nimekirjas näitame hinda üleval... */
.listings-grid.list-view .list-view-price {
    display: block !important;
    font-size: 1.4rem;
    white-space: nowrap;
    color: var(--accent);
    font-weight: 800;
}

/* ...ja peidame alumise hinna ära */
.listings-grid.list-view .grid-view-price {
    display: none !important;
}

.listings-grid.list-view .card-header-top .titles-wrapper .address-line {
    font-size: 1.2rem;
}

.listings-grid.list-view .meta {
    align-items: center !important;
    margin-top: 10px !important;
}

/* Kirjelduse tekst */
.listing-desc-snippet {
    display: none;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.5;
    margin-top: 12px;
}

[data-theme="dark"] .listing-desc-snippet {
    border-top-color: rgba(255,255,255,0.05);
}

.listings-grid.list-view .listing-desc-snippet {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2; /* UUS RIDA: See teeb koodiredaktori hoiatusest puhtaks */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Südame nupp nimekirjavaates (liigub alla paremale) */
.listings-grid.list-view .card-wishlist-btn {
    top: auto;
    bottom: 20px;
    right: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* MOBIIL */
@media (max-width: 768px) {
    .listings-grid.list-view .card {
        flex-direction: column;
        height: auto; /* TAASTAB NORMAALSE KÕRGUSE MOBIILIS */
    }
    .listings-grid.list-view .card .image-wrapper {
        width: 100%;
        height: 250px;
    }
    .listings-grid.list-view .card .image-wrapper img {
        border-radius: var(--rounded) var(--rounded) 0 0;
    }
    .listings-grid.list-view .card .card-info {
        padding: 15px;
    }
    .listings-grid.list-view .card-header-top {
        flex-direction: column;
        gap: 5px;
    }
    .listings-grid.list-view .list-view-price {
        font-size: 1.2rem;
    }
    .listings-grid.list-view .card-wishlist-btn {
        top: 15px;
        right: 15px;
        bottom: auto;
    }
}

/* =========================================
   PILTIDE KERIMINE KAARDIL (THUMBNAIL CAROUSEL)
   ========================================= */

/* Tavalise ruudustiku (Grid) jaoks lukustame pildi wrapperi kõrguse */
.card .image-wrapper {
    width: 100%;
    height: 250px; /* RANGE KÕRGUS! */
    position: relative; 
    overflow: hidden;   
}

/* =========================================
   PILTIDE KERIMISE KONTROLL (iOS Safari Fix)
   ========================================= */
.image-wrapper {
    position: relative;
    overflow: hidden;
    
    /* 1. Luba vertikaalne kerimine, aga luba horisontaalsel swipe'il töötada */
    touch-action: pan-y pinch-zoom; 
    
    /* 2. Keela Safari horisontaalne lehe kaasa tõmbamine (Rubber-banding) */
    overscroll-behavior-x: none;
}

/* Pilt venitatakse alati wrapperi suuruseks ja lõigatakse üleliigne ära */
.card .image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover !important; /* LUKUSTAB PROPORTSIOONID (Lõikab, ei venita!) */
    object-position: center;
    display: block;
    will-change: transform; /* Optimeerib mobiilis libisemist */
}

/* Nimekirjavaates tühistame 250px kõrguse, kuna seal määrab kõrguse kaardi sisu */
.listings-grid.list-view .card .image-wrapper {
    height: 100%; 
}

.image-wrapper {
    position: relative; /* Tagab, et nooled ja lugeja püsivad pildi peal */
    overflow: hidden;   /* Et midagi üle ääre ei läheks */
    touch-action: pan-y;
}

/* Kerimise nupud (Nooled) */
.card-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    color: white;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0; /* Vaikimisi peidetud */
    transition: opacity 0.2s ease, background 0.2s ease;
    z-index: 10;
    font-size: 14px;
}

/* Noolte asukohad */
.card-nav-btn.prev-btn { left: 8px; }
.card-nav-btn.next-btn { right: 8px; }

/* Näitame elemente ainult siis, kui hiir on pildil */
.image-wrapper:hover .card-nav-btn,
.image-wrapper:hover .card-img-counter {
    opacity: 1;
}

/* Hover efekt nupule endale */
.card-nav-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* Piltide lugeja (nt "1 / 5") all keskel */
.card-img-counter {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    color: white;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    pointer-events: none; /* Et ei segaks klikkimist */
    opacity: 0; /* Vaikimisi peidetud */
    transition: opacity 0.2s ease;
    z-index: 10;
    letter-spacing: 0.5px;
}

/* =========================================
   OTSINGULEHE PÄISE JA NUPPUDE PAIGUTUS
   ========================================= */

/* Arvutivaade: Kõik on ilusti ühes reas */
.results-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 15px;
}

.results-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.sort-select {
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    font-weight: 600;
    color: var(--text-color);
    cursor: pointer;
    background-color: var(--bg);
}

[data-theme="dark"] .sort-select {
    border-color: #334155;
    background-color: #0f172a;
    color: white;
}

/* Mobiilivaade: Lükkame asjad üksteise alla */
@media (max-width: 768px) {
    .results-top-bar {
        flex-direction: column;
        align-items: flex-start; /* Joondab kogu ploki vasakule */
        gap: 15px;
    }
    
    .results-actions {
        width: 100%;
        flex-direction: column; /* Nupud kukuvad dropdowni alla */
        align-items: flex-start; 
        gap: 15px;
    }

    .sort-select {
        width: 100%; /* Dropdown on nüüd täislaiuses ja lihtsamini vajutatav */
    }

    .results-actions .view-toggle {
        margin-left: 0 !important; /* Eemaldame igasuguse sund-nihutamise */
        align-self: flex-start; /* Hoiame nupud vasakul servas */
    }
}

/* =========================================
   PILTIDE KERIMINE KAARDIL (JS CAROUSEL)
   ========================================= */

.image-wrapper {
    position: relative;
    overflow: hidden;
    /* BLOKEERI TAVALINE LEHE KERIMINE SELLEL ELEMENDIL AINULT HORISONTAALSELT */
    touch-action: pan-y; 
}

/* Veendume, et pilt on alati fikseeritud proportsioonidega ja täidab kasti */
.image-wrapper img {
    width: 100%;
    height: 100%; /* Arvutis: Ruudustikus 250px, nimekirjas 100% kaardi kõrgusest */
    object-fit: cover;
    display: block;
}

/* Noolte stiilid (Arvutis) */
.card-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    color: white;
    border: none;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease;
    z-index: 10;
    font-size: 12px !important;
}

.card-nav-btn.prev-btn { left: 8px; }
.card-nav-btn.next-btn { right: 8px; }

/* Hover näitab nooli */
.image-wrapper:hover .card-nav-btn,
.image-wrapper:hover .card-img-counter {
    opacity: 1;
}

.card-nav-btn:hover { background: rgba(0, 0, 0, 0.8); }

/* Loendur (1 / 5) */
.card-img-counter {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    color: white;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 10;
    letter-spacing: 0.5px;
}

/* Mobiili kohandused */
@media (max-width: 768px) {
    .image-wrapper img {
        height: 250px !important; /* Hoiab mobiilis kaardi kõrguse alati stabiilsena */
    }
    .card-img-counter {
        opacity: 0.8; /* Hoiame lugeja kogu aeg õrnalt nähtaval */
    }
    .card-nav-btn {
        display: none; /* Mobiilis nooli pole vaja, kasutame swipe'i */
    }
}

/* =========================================
   PILTIDE LOHISTAMINE (DRAG & DROP)
   ========================================= */

.preview-item {
    position: relative;
    cursor: grab;
    transition: transform 0.2s, box-shadow 0.2s;
}

.preview-item:active { cursor: grabbing; }
.preview-item.dragging { opacity: 0.4; transform: scale(0.95); z-index: 100; }
.preview-item.drag-over { border: 3px dashed var(--accent) !important; transform: scale(1.05); opacity: 0.8; }

/* KOGU AVAPILDI STIIL PANDAKSE NÜÜD AINULT CSS-IGA */
.preview-item.is-main-image {
    border: 2px solid #10b981 !important; /* Roheline raam */
}

.preview-item.is-main-image::after {
    content: attr(data-main-label);
    position: absolute;
    top: 5px;
    left: 5px;
    background: #10b981;
    color: white;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 6px;
    pointer-events: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.5);
}

/* --- KAMPANNIA MODAALI VÄRVIDE JÕUSTAMINE (FIX) --- */

/* 1. Pealkiri (Võida energiat) - alati roheline */
#campaignModal h2 {
    color: #0ea5a0 !important;
}

/* 2. Tavatekst JA paks kiri (strong) - alati tumehall */
#campaignModal p, 
#campaignModal li, 
#campaignModal span,
#campaignModal div,
#campaignModal strong, 
#campaignModal b {
    color: #333333 !important;
}

/* 3. Sulgemise rist ja nupp - alati valge tekstiga */
#campaignModal #closeCampaign,
#campaignModal a {
    color: #ffffff !important;
}

/* =========================================
   HINNALANGUSE INDIKAATOR
   ========================================= */
.price-drop-arrow {
    color: #e53935;
    margin-left: 5px;
    font-size: 0.85em;
    vertical-align: middle;
}

/* =========================================
   QUILL BLOG CONTENT (VIDEOS JA TABLES)
   ========================================= */
/* Teeme lisatud videod (iframe) automaatselt 100% laiuseks vastavalt lõigu laiusele */
#blogPostContainer .ql-video,
.ql-editor .ql-video {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    min-height: 300px;
    border-radius: 8px;
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    margin: 20px 0;
}

/* Tabelite baasstiilid Quill jaoks */
#blogPostContainer table,
.ql-editor table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

#blogPostContainer th,
#blogPostContainer td,
.ql-editor th,
.ql-editor td {
    border: 1px solid var(--border);
    padding: 10px;
    text-align: left;
}

#blogPostContainer th,
.ql-editor th {
    background-color: rgba(14, 165, 160, 0.05);
    font-weight: 600;
}

/* Blogipostituse sisu piltide parandus (kirjutame üle .card img 250px kõrguse) */
#blogPostContainer img,
.ql-editor img {
    height: auto !important;
    max-height: 600px;
    object-fit: contain;
    border-radius: 8px;
    margin: 20px auto;
    display: block;
}

/* --- PERMANENT PRICE TOOLTIP --- */
.price-label-tooltip {
    background-color: #2b82cb; /* Leafleti sinine */
    color: #fff;
    border: none;
    border-radius: 4px;
    font-weight: 700;
    font-size: 12px;
    padding: 3px 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
}

/* Tooltip väike kolmnurk (suunaga paremale ehk left tooltipi puhul, või vastupidi) */
.price-label-tooltip.leaflet-tooltip-left::before {
    border-left-color: #2b82cb !important;
}
.price-label-tooltip.leaflet-tooltip-right::before {
    border-right-color: #2b82cb !important;
}
.price-label-tooltip.leaflet-tooltip-top::before {
    border-top-color: #2b82cb !important;
}
.price-label-tooltip.leaflet-tooltip-bottom::before {
    border-bottom-color: #2b82cb !important;
}

/* --- FULLSCREEN MAP CLASSES --- */
.fullscreen-map {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999 !important; /* Kõige peale */
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
}

/* --- LEAFLET POPUP DARK MODE --- */
[data-theme="dark"] .leaflet-popup-content-wrapper,
[data-theme="dark"] .leaflet-popup-tip {
    background-color: var(--card) !important;
    color: var(--text-color) !important;
}

[data-theme="dark"] .leaflet-popup-content {
    color: var(--text-color) !important;
}

[data-theme="dark"] .leaflet-popup-close-button {
    color: var(--text-color) !important;
}
[data-theme="dark"] .leaflet-popup-close-button:hover {
    color: var(--danger) !important;
}

/* --- HAMBURGER MENU OVERLAY --- */
.hamburger-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}
.hamburger-overlay.show {
    opacity: 1;
    visibility: visible;
}
.hamburger-content {
    position: absolute;
    top: 0; right: -300px;
    width: 280px; height: 100%;
    background: var(--card);
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}
.hamburger-overlay.show .hamburger-content {
    right: 0;
}
.hamburger-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--border);
}
.close-hamburger {
    background: none; border: none; font-size: 28px; cursor: pointer; color: var(--text-color);
}
.hamburger-links {
    padding: 20px;
    display: flex; flex-direction: column; gap: 15px;
    flex-grow: 1;
    overflow-y: auto;
}
.hamburger-links a {
    color: var(--text-color); font-size: 18px; font-weight: 600; text-decoration: none;
}
.hamburger-footer {
    padding: 20px 20px 40px 20px; 
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

#mobileMenuBtn {
    display: none;
}

/* --- Hamburger Accordion --- */
.hamburger-accordion {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    display: flex;
    flex-direction: column;
    padding-left: 15px;
    gap: 15px;
}
.hamburger-user-header.open .accordion-icon {
    transform: rotate(180deg);
}
.hamburger-accordion.open {
    max-height: 400px;
    margin-top: 15px;
}

@media (max-width: 1000px) {
    .appbar .lang-switch,
    .appbar #themeToggleBtn,
    .nav-links > a[href="#home"],
    .nav-links > a[href="#stats"],
    .nav-links > #loginBtn,
    .nav-links > #registerBtn,
    .nav-links > #userControls {
        display: none !important;
    }
    
    #mobileMenuBtn {
        display: flex !important;
    }
}

/* --- PREVENT NATIVE DRAG AND TEXT SELECTION ON UI ELEMENTS --- */
img, a {
    -webkit-user-drag: none;
}

.hamburger-overlay,
.hamburger-content,
.appbar,
.btn,
.nav-links,
.listing-card {
    -webkit-user-select: none;
    user-select: none;
}

/* Re-enable text selection where needed */
.description-area,
.listing-detail-title,
input,
textarea,
.profile-description,
.blog-content,
p, h1, h2, h3, h4, span {
    -webkit-user-select: auto;
    user-select: auto;
}

/* Enable dragging specifically for our upload preview images */
#imagePreviewContainer div {
    -webkit-user-drag: auto;
}

.chart-modal-header {
    display: grid;
    grid-template-areas: "title filter spacer reset close";
    grid-template-columns: auto auto 1fr auto auto;
    align-items: center;
    margin-bottom: 20px;
    gap: 15px;
}

@media (max-width: 768px) {
    .chart-modal-content {
        margin: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        padding: 10px !important;
        box-sizing: border-box;
    }
    
    .chart-modal-header {
        grid-template-areas: 
            "title close"
            "filter reset";
        grid-template-columns: 1fr auto;
        gap: 10px;
    }
    .chart-modal-header h2 {
        font-size: 18px;
    }
}

/* =========================================
   IMAGE UPLOAD DRAG & DROP STYLES
   ========================================= */
.image-drop-zone {
    cursor: pointer;
}

.image-drop-zone.drag-active {
    background: rgba(37, 99, 235, 0.08) !important;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15) !important;
    transform: scale(1.01);
}

@media (max-width: 768px) {
    .drag-instruction-text,
    [data-i18n="text_or_drag_photos"] {
        display: none !important;
    }
}

/* =========================================
   THUMBNAIL DRAG & DROP REORDER ANIMATION
   ========================================= */
.preview-item,
.existing-thumb-item {
    transition: transform 0.22s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.2s ease, border-color 0.2s ease, opacity 0.2s ease !important;
    will-change: transform;
}

.preview-item.dragging,
.existing-thumb-item.dragging {
    opacity: 0.35 !important;
    transform: scale(0.92) !important;
}

.preview-item.shift-left,
.existing-thumb-item.shift-left {
    transform: translateX(-14px) scale(0.96) !important;
}

.preview-item.shift-right,
.existing-thumb-item.shift-right {
    transform: translateX(14px) scale(0.96) !important;
}

.preview-item.drop-target-gap,
.existing-thumb-item.drop-target-gap {
    border: 2px dashed var(--accent, #2563eb) !important;
    background: rgba(37, 99, 235, 0.08) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2) !important;
}

/* SweetAlert2 Dark Mode */
[data-theme="dark"] .swal2-popup {
    background-color: var(--card) !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] .swal2-title {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .swal2-html-container {
    color: var(--muted) !important;
}
[data-theme="dark"] .swal2-validation-message {
    background-color: var(--bg) !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] .swal2-icon.swal2-question {
    border-color: var(--muted) !important;
    color: var(--muted) !important;
}

/* SweetAlert2 Success Icon Theme */
.swal2-icon.swal2-success {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}
.swal2-icon.swal2-success [class^="swal2-success-line"] {
    background-color: var(--accent) !important;
}
.swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(14, 165, 160, 0.3) !important;
}
[data-theme="dark"] .swal2-icon.swal2-success {
    border-color: var(--accent-2) !important;
    color: var(--accent-2) !important;
}
[data-theme="dark"] .swal2-icon.swal2-success [class^="swal2-success-line"] {
    background-color: var(--accent-2) !important;
}
[data-theme="dark"] .swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(34, 211, 238, 0.3) !important;
}

/* SweetAlert2 Confirm Button Theme */
.swal2-styled.swal2-confirm {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
}
.swal2-styled.swal2-confirm:focus {
    box-shadow: 0 0 0 3px rgba(14, 165, 160, 0.5) !important;
}
[data-theme="dark"] .swal2-styled.swal2-confirm {
    background-color: var(--accent-2) !important;
    border-color: var(--accent-2) !important;
    color: #0f172a !important;
}
[data-theme="dark"] .swal2-styled.swal2-confirm:focus {
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.5) !important;
}
/* RADAR CARD IMAGE */
.radar-card-image { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.radar-card-image .radar-bg-icon { width: 150px; height: 150px; opacity: 0.45; }
[data-theme='dark'] .radar-card-image { background: linear-gradient(135deg, var(--bg) 0%, var(--card) 100%); }
[data-theme='dark'] .radar-card-image .radar-bg-icon { opacity: 0.7; }
[data-theme='dark'] .radar-card-image .radar-bg-icon svg { color: var(--accent) !important; }

.radar-card-image .radar-bg-icon svg { color: #fff; }