:root {
    --primary: #FDB813;
    --secondary: #F27022;
    --dark: #2C3E50;
    --light: #F7F9FC;
    --glass: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);
    --text-main: #2D3436;
    --text-muted: #636E72;
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Horizontal Scrolling Sections */
.scrolling-wrapper {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 20px;
    padding-bottom: 20px;
    /* Space for scrollbar */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Hide scrollbar Firefox */
}

.scrolling-wrapper::-webkit-scrollbar {
    display: none;
    /* Hide scrollbar Chrome/Safari */
}

/* Property Type Card */
.prop-type-card {
    flex: 0 0 auto;
    width: 280px;
    border-radius: 12px;
    overflow: hidden;
    /* background: white; */
    text-decoration: none;
    transition: transform 0.3s ease;
}

.prop-type-card:hover {
    transform: translateY(-5px);
}

.prop-img-container {
    height: 200px;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
}

.prop-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.prop-type-card:hover .prop-img-container img {
    transform: scale(1.05);
}

.prop-info h4 {
    color: var(--dark);
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
}

/* Destination Card */
.dest-card {
    flex: 0 0 auto;
    width: 250px;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.dest-card:hover {
    transform: translateY(-5px);
}

.dest-img-container {
    height: 160px;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.dest-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dest-info h4 {
    color: var(--dark);
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 4px 0;
}

.dest-info p {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0;
}

@media (max-width: 768px) {
    .prop-type-card {
        width: 240px;
    }

    .dest-card {
        width: 200px;
    }
}


body {
    font-family: var(--font-body);
    background-color: var(--light);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

/* Glassmorphism Utilities */
.glass-panel {
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.glass-btn {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    padding: 12px 24px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-weight: 600;
    cursor: pointer;
}

.glass-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

/* Layout */
.container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 10px;
}

/* Header */
header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    transition: background 0.3s ease;
    padding: 20px 0;
}

header.scrolled {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* Nav links white over dark hero image (home page only) */


header:not(.scrolled).hero-page .nav-links a::after {
    background-color: white;
}

header:not(.scrolled).hero-page .mobile-toggle span {
    background-color: white;
}

.nav-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--dark);
    letter-spacing: -1px;
}

.logo span {
    color: var(--primary);
}

.nav-links {
    display: flex;
    gap: 30px;
}

.nav-links a {
    font-weight: 500;
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: var(--primary);
    transition: width 0.3s;
}

.nav-links a:hover::after {
    width: 100%;
}

/* Hero Section */
.mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    z-index: 1002;
    background: transparent;
    border: none;
    padding: 5px;
}

.mobile-toggle span {
    width: 30px;
    height: 3px;
    background-color: var(--dark);
    border-radius: 3px;
    transition: all 0.3s ease;
}

.mobile-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 6px);
}

.mobile-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -6px);
}

.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6)), url('../img/vacation.png');
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.hero-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.6;
    z-index: 0;
    animation: floating 10s infinite alternate;
}

.blob-1 {
    width: 400px;
    height: 400px;
    background: var(--primary);
    top: -100px;
    left: -100px;
}

.blob-2 {
    width: 500px;
    height: 500px;
    background: var(--secondary);
    bottom: -150px;
    right: -150px;
    animation-delay: -5s;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
}

.hero h1 {
    font-size: 4rem;
    line-height: 1.1;
    margin-bottom: 20px;
    background: linear-gradient(to right, var(--dark), var(--primary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero p {
    font-size: 1.25rem;
    color: var(--text-muted);
    margin-bottom: 40px;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.btn {
    padding: 15px 35px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-size: 1rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-primary {
    background: var(--primary);
    color: white;
    box-shadow: 0 10px 20px rgba(255, 107, 107, 0.3);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 25px rgba(255, 107, 107, 0.4);
}

.btn-secondary {
    background: white;
    color: var(--dark);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.btn-secondary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
}

/* Animations */
@keyframes floating {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(30px, 30px);
    }
}

/* Decision Cards */
.decision-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    padding: 100px 0;
}

.card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
}

.card:hover {
    transform: translateY(-10px);
}

.card-img {
    height: 200px;
    background-color: #ddd;
    background-size: cover;
    background-position: center;
}

.card-body {
    padding: 25px;
}

.card-title {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.footer {
    background: var(--dark);
    color: white;
    padding: 60px 0;
    margin-top: auto;
}

/* Strict vs Lax Toggle UI */
.strict-lax-container {
    padding: 40px;
    text-align: center;
}

.toggle-switch {
    display: inline-flex;
    background: #eee;
    padding: 5px;
    border-radius: 50px;
    position: relative;
    cursor: pointer;
}

.toggle-option {
    padding: 10px 30px;
    border-radius: 40px;
    z-index: 1;
    transition: color 0.3s;
}

.toggle-switch.strict .strict-opt {
    color: white;
}

.toggle-switch.lax .lax-opt {
    color: white;
}

.toggle-bg {
    position: absolute;
    top: 5px;
    left: 5px;
    width: calc(50% - 5px);
    height: calc(100% - 10px);
    background: var(--primary);
    border-radius: 40px;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.toggle-switch.lax .toggle-bg {
    transform: translateX(100%);
    background: var(--secondary);
}

/* Medical Wizard */
.wizard-container {
    max-width: 800px;
    margin: 0 auto;
    min-height: 400px;
}

.wizard-step {
    display: none;
    animation: fadeIn 0.4s ease;
}

.wizard-step.active {
    display: block;
}

.wizard-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.wizard-option-card {
    background: white;
    border: 2px solid transparent;
    padding: 20px;
    border-radius: 12px;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.wizard-option-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.wizard-option-card.selected {
    border-color: var(--secondary);
    background: #f0fdfa;
}

.wizard-option-icon {
    font-size: 2rem;
    margin-bottom: 10px;
    display: block;
}

.progress-bar {
    width: 100%;
    height: 6px;
    background: #eee;
    margin-bottom: 40px;
    border-radius: 10px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--secondary);
    width: 25%;
    transition: width 0.3s ease;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .hero h1 {
        font-size: 3rem;
    }

    .blob-1,
    .blob-2 {
        width: 300px;
        height: 300px;
    }
}

@media (max-width: 768px) {
    .nav-wrapper {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
    }

    .mobile-toggle {
        display: flex;
    }

    .nav-links {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(15px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 1001;
        gap: 40px;
        font-size: 1.5rem;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        transform: translateY(-20px);
    }

    .nav-links.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .glass-btn {
        display: none;
        /* Hide CTA in menu for now or move it inside */
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .hero p {
        font-size: 1rem;
        padding: 0 10px;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
        padding: 0 40px;
    }

    .decision-grid {
        grid-template-columns: 1fr;
        padding: 50px 0;
    }

    .glass-panel[style*='display:flex'] {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .glass-panel select,
    .glass-panel button {
        width: 100% !important;
    }

    .wizard-options {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .wizard-option-card {
        padding: 15px;
    }

    .wizard-option-icon {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .nav-links {
        gap: 15px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .hero h1 {
        font-size: 2rem;
    }

}

/* ========================================
   SUNTHRILLS HERO SECTION STYLES
   ======================================== */

.hero-sunthrills {
    position: relative;
    height: 100vh;
    min-height: 700px;
    /* Ensure enough height for all content */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Image from user request context: */
    background-image: url('../img/hero_background.png');
    background-size: cover;
    background-position: center bottom;
    /* Align to show beach */
    background-repeat: no-repeat;
    overflow: hidden;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Subtle darkening for text readability */
    background: rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.hero-content-sunthrills {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 1100px;
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Sunthrills Logo */
.sunthrills-logo {
    display: block;
    margin-bottom: 20px;
}

.logo-image {
    max-width: 350px;
    /* Increased size */
    height: auto;
    display: block;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
}

/* Hide CSS Sun if img exists */
.sun-icon {
    display: none;
}

/* Hero Title */
.hero-title {
    font-family: var(--font-heading);
    font-size: 6rem;
    /* Huge */
    font-weight: 800;
    color: white;
    margin-bottom: 10px;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    line-height: 1;
}

.hero-title sup {
    font-size: 3rem;
    vertical-align: super;
    font-weight: 700;
    margin-left: 5px;
}

/* Hero Tagline */
.hero-tagline {
    font-size: 1.8rem;
    color: white;
    font-style: italic;
    margin-bottom: 50px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    font-weight: 400;
    letter-spacing: 0.5px;
    font-family: 'Inter', serif;
    /* Or serif if desired, image looks like sans-serif italic */
}

.tagline-text {
    border-bottom: 2px solid rgba(255, 255, 255, 0.7);
    padding-bottom: 8px;
    display: inline-block;
}



/* Search Mode Container - Desktop Default */
.search-mode-container {
    display: inline-flex;
    background: rgba(15, 23, 42, 0.6);
    /* Dark Glass */
    backdrop-filter: blur(12px);
    padding: 0;
    gap: 0;
    margin-bottom: 30px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.mode-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 24px 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 320px;
    border-radius: 0;
    margin: 0;
}

/* Strict Button */
.mode-btn.mode-strict {
    background: transparent;
    border-right: 1px solid rgba(255, 255, 255, 0.4);
    color: white;
}

.mode-btn.mode-strict:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Lax Button */
.mode-btn.mode-lax {
    background: transparent;
    color: white;
}

.mode-btn.mode-lax:hover {
    background: rgba(255, 255, 255, 0.1);
}

.mode-label {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 800;
    color: white;
    margin-right: 12px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    text-transform: capitalize;
}

.mode-separator {
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 300;
    margin-right: 12px;
}

.mode-desc {
    font-family: var(--font-body);
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 400;
}

/* Personalized Text */
.personalized-text {
    font-size: 1.2rem;
    color: white;
    margin-bottom: 40px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* Start Planning Button */
.btn-start-planning {
    display: inline-block;
    padding: 22px 70px;
    /* Wide */
    background: #6AA04D;
    /* Match image green */
    color: white;
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    border-radius: 6px;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    text-transform: none;
    /* Image shows "Start Planning Now" mixed case */
    letter-spacing: 0.5px;
}

.btn-start-planning:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    background: #7bb35c;
}

/* Responsive Styles */
@media (max-width: 1024px) {
    .hero-title {
        font-size: 4.5rem;
    }

    .hero-title sup {
        font-size: 2.5rem;
    }

    .logo-image {
        max-width: 300px;
    }

    .mode-btn {
        min-width: 260px;
        padding: 20px 30px;
    }

    .mode-label {
        font-size: 1.8rem;
    }

    .mode-desc {
        font-size: 1.3rem;
    }
}

@media (max-width: 768px) {
    .hero-sunthrills {
        min-height: 500px;
        padding: 20px 0;
    }

    .hero-content-sunthrills {
        padding: 20px;
    }

    /* Transform Toggle for Mobile */
    .search-mode-container {
        display: flex;
        width: 100%;
        max-width: 320px;
        margin: 0 auto 30px auto;
        background: rgba(230, 230, 230, 0.9);
        backdrop-filter: none;
        border-radius: 50px;
        border: none;
        padding: 3px;
    }

    .mode-btn {
        flex: 1;
        min-width: auto;
        padding: 12px 10px;
        border: none !important;
        border-radius: 40px !important;
        justify-content: center;
    }

    .mode-btn.mode-strict {
        background: transparent;
        color: #888;
    }

    .mode-btn.mode-strict.active,
    /* Handle active state logic if JS applies .active */
    .mode-btn.mode-strict:active {
        background: #FDB813;
        color: white;
    }

    /* Since we don't have JS toggling classes on these specific elements in the provided snippet,
       we might need to rely on the background colors provided in the base styles.
       However, the prompt image implies a toggle state.
       Assuming 'active' class is present or user wants static look for now.
       Let's style them to look like the image: Strict (Yellow) | Lax (Grey) */

    .mode-btn.mode-strict {
        background: #FDB813;
        color: white;
        box-shadow: 0 2px 10px rgba(253, 184, 19, 0.3);
    }

    .mode-btn.mode-lax {
        background: transparent;
        color: #999;
    }

    .mode-label {
        font-size: 1.1rem;
        margin: 0;
        text-transform: capitalize;
        text-shadow: none;
        color: inherit;
    }

    .mode-label::after {
        content: ' Mode';
    }

    .mode-separator,
    .mode-desc {
        display: none;
    }
}

@media (max-width: 768px) {
    .nav-links {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(15px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 1001;
        gap: 40px;
        font-size: 1.5rem;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        transform: translateY(-20px);
        display: flex;
    }

    .nav-links.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .mobile-toggle {
        display: flex;
        /* Ensure flex column from base styles is used */
        flex-direction: column;
        justify-content: center;
        gap: 6px;
    }

    .hero-sunthrills {
        min-height: 500px;
        padding: 20px 0;
    }

    .hero-content-sunthrills {
        padding: 20px;
    }

    .hero-title {
        font-size: 3rem;
    }

    .hero-title sup {
        font-size: 1.5rem;
    }

    .hero-tagline {
        font-size: 1.1rem;
        margin-bottom: 30px;
    }

    .logo-image {
        max-width: 250px;
    }

    /* Transform Toggle for Mobile: Pill Shape */
    .search-mode-container {
        display: flex;
        flex-direction: row;
        width: 100%;
        max-width: 320px;
        margin: 0 auto 30px auto;
        background: rgba(230, 230, 230, 0.9);
        backdrop-filter: none;
        border-radius: 50px;
        border: none;
        padding: 3px;
        overflow: visible;
        /* Allow box shadow */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    .mode-btn {
        flex: 1;
        min-width: auto;
        padding: 12px 10px;
        border: none !important;
        border-radius: 40px !important;
        justify-content: center;
        background: transparent;
        height: auto;
    }

    .mode-btn.mode-strict {
        background: transparent;
        color: #888;
        border-right: none;
    }

    .mode-btn.mode-strict.active,
    .mode-btn.mode-strict:active {
        background: #FDB813;
        color: white;
        box-shadow: 0 2px 10px rgba(253, 184, 19, 0.3);
    }

    .mode-btn.mode-lax {
        background: transparent;
        color: #999;
    }

    .mode-label {
        font-size: 1rem;
        margin: 0;
        text-transform: capitalize;
        text-shadow: none;
        color: inherit;
        font-weight: 700;
    }

    .mode-label::after {
        content: ' Mode';
    }

    .mode-separator,
    .mode-desc {
        display: none;
    }

    .btn-start-planning {
        padding: 18px 40px;
        font-size: 1.2rem;
        width: 100%;
        max-width: 320px;
    }
}



.btn-start-planning {
    padding: 16px 40px;
    font-size: 1.1rem;
    width: 100%;
    max-width: 350px;
}

.personalized-text {
    font-size: 0.9rem;
    margin-bottom: 25px;
}


@media (max-width: 480px) {
    .hero-title {
        font-size: 2.2rem;
    }

    .hero-title sup {
        font-size: 1.2rem;
    }

    .hero-tagline {
        font-size: 1rem;
    }

    .logo-text {
        font-size: 1.6rem;
    }

    .logo-image {
        max-width: 250px;
    }

    .sun-icon {
        width: 50px;
        height: 50px;
    }

    .sun-center {
        width: 25px;
        height: 25px;
    }

    .sun-ray {
        width: 3px;
        height: 12px;
    }

    .mode-label {
        font-size: 1.1rem;
    }

    .mode-desc {
        font-size: 0.85rem;
    }

    .btn-start-planning {
        padding: 14px 35px;
        font-size: 1rem;
        width: 90%;
    }

    .personalized-text {
        font-size: 0.9rem;
    }
}

/* Horizontal Filter Layout Styles */

/* Remove old layout styles if present, or override */
.page-layout {
    display: block;
    /* Stack vertically for top bar */
}

.filters-sidebar {
    display: none;
    /* Hide old sidebar if it persists */
}

/* Top Horizontal Bar */
.top-filter-bar-container {
    width: 100%;
    /* Fill container (1500px) to align with results */
    margin-bottom: 30px;
}

.refine-horizontal-panel {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 24px 30px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
    margin-bottom: 30px;
    animation: slideDown 0.3s ease-out;
}

.horizontal-scroll-filters {
    display: flex;
    overflow-x: auto;
    gap: 40px;
    padding-bottom: 10px;
    /* Space for scrollbar if needed */
    scrollbar-width: thin;
    scrollbar-color: #ddd transparent;
}

.horizontal-scroll-filters::-webkit-scrollbar {
    height: 6px;
}

.horizontal-scroll-filters::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 3px;
}

.filter-column {
    min-width: 200px;
    flex-shrink: 0;
}

.filter-column h4 {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #94a3b8;
    /* Slate-400 */
    margin-bottom: 15px;
    letter-spacing: 1px;
}

/* Horizontal Chip Styling - Compact */
.filter-column .chip-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    margin-bottom: 6px;
    border-radius: 6px;
    font-size: 0.9rem;
    color: var(--dark);
    background: transparent;
    border: 1px solid transparent;
    transition: all 0.2s;
    cursor: pointer;
    position: relative;
    padding-left: 20px;
    /* Space for indicator */
}

.filter-column .chip-btn:hover {
    background: #f8f9fa;
    color: var(--primary);
}

.filter-column .chip-btn.selected {
    background: #fffbf0;
    /* Very light yellow */
    color: var(--dark);
    font-weight: 700;
}

.filter-column .chip-btn.selected::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 14px;
    width: 3px;
    background-color: var(--primary);
    border-radius: 0 3px 3px 0;
}

/* Custom Selects - Premium Look */
.simple-select {
    width: 100%;
    padding: 10px 14px;
    padding-right: 30px;
    /* Space for arrow */
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background-color: #fff;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--dark);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Clean Arrow SVG */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.simple-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(253, 184, 19, 0.1);
}

/* Big Select for Destination */
.simple-select.big-select {
    height: 56px;
    font-size: 1.1rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    padding-left: 50px !important;
    /* Force space for icon */
}

/* Reset Button Style */
#reset-strict {
    background: white;
    border: 1px solid #cbd5e1;
    color: #64748b;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

#reset-strict:hover {
    background: #f1f5f9;
    color: #334155;
    border-color: #94a3b8;
}

/* Ensure results grid looks good full width */
.decision-grid.property-grid {
    display: grid;
    gap: 30px;
    /* Columns handled inline in PHP or default here */
}

/* Responsive */
@media (max-width: 900px) {
    .horizontal-scroll-filters {
        flex-direction: column;
        gap: 30px;
    }

    .filter-column {
        min-width: auto;
        width: 100%;
    }
}