/* --- THEME & COLOR PALETTE --- */
:root {
    /* Primary Palette */
    --color-navy: #102A43;
    --color-gold: #D4AF37;
    --color-gold-dark: #B89B2E;
    --color-light-gray: #E2E8F0;
    --color-white: #FFFFFF;
    --color-slate: #486581;

    /* Light Mode */
    --bg-primary: var(--color-light-gray);
    --bg-secondary: var(--color-white);
    --text-primary: var(--color-navy);
    --text-secondary: var(--color-slate);
    --text-accent: var(--color-gold);
    --border-color: #CBD5E1;
}

html.dark {
    /* Dark Mode */
    --bg-primary: #0A192F;
    --bg-secondary: #102A43;
    --text-primary: var(--color-light-gray);
    --text-secondary: #9FB3C8;
    --text-accent: var(--color-gold);
    --border-color: #334E68;
}

/* --- TYPOGRAPHY --- */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Lora', serif;
    color: var(--text-primary);
}

/* --- GENERAL STYLES --- */
.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-accent { color: var(--text-accent); }
.border-theme { border-color: var(--border-color); }
.accent-gradient {
    background: linear-gradient(45deg, var(--color-gold), var(--color-gold-dark));
}

/* --- CUSTOM COMPONENT STYLES --- */

/* Property Card */
.property-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.property-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.card-carousel-container { position: relative; width: 100%; height: 12rem; overflow: hidden; }
.card-carousel-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; }
.card-carousel-slide.active { opacity: 1; }
.card-carousel-img { width: 100%; height: 100%; object-fit: cover; }


/* Map Styles */
#map {
    transition: height 0.4s ease;
}

/* Modal & Lightbox */
#property-modal-backdrop, #filter-modal-backdrop, #info-modal-backdrop {
    background-color: rgba(16, 42, 67, 0.8);
    backdrop-filter: blur(8px);
}
.custom-scrollbar::-webkit-scrollbar { width: 8px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

/* Hide scrollbar on modal photo scroller */
#modal-photo-scroller {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
#modal-photo-scroller::-webkit-scrollbar {
    display: none; /* Chrome, Safari, and Opera */
}


#lightbox { background-color: rgba(13, 36, 59, 0.95); }
.lightbox-btn { color: white; font-size: 3.5rem; font-weight: bold; cursor: pointer; user-select: none; transition: color 0.2s; }
.lightbox-btn:hover { color: var(--text-accent); }

/* Skeleton Loader */
.skeleton-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
}
.skeleton-image { background-color: var(--bg-primary); }
.skeleton-line { background-color: var(--bg-primary); }
@keyframes pulse { 50% { opacity: .6; } }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }