/* ========================================
   CABANILLAS RENTALS - CUSTOM STYLES
   Based on Demo PDF Designs
   ======================================== */

/* === GOOGLE FONTS === */
/* @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap'); - Removed */
@import url('properties-footer.css');

/* === RESET & BASE === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Colors - Matching PDF Design */
    --color-primary: #356e80;
    /* Teal oscuro para footer/CTA */
    --color-secondary: #e2a874;
    /* Gold para acentos */
    --color-accent: #E8D5B7;
    /* Beige claro para backgrounds */
    --color-bg-light: #f8f5f0;
    /* Beige muy claro */
    --color-bg-white: #ffffff;
    --color-text-dark: #00485f;
    --color-text-light: #a1a1a1;
    --color-text-black: #333;
    --color-overlay: rgba(26, 58, 58, 0.85);

    /* Typography */
    --font-heading: 'Libre Baskerville', serif;
    --font-body: 'Libre Baskerville', serif;

    /* Spacing */
    --section-padding: 5rem 0;
    --container-max: 1200px;
}

body {
    font-family: var(--font-body);
    color: var(--color-text-dark);
    line-height: 1.7;
    overflow-x: hidden;
    font-size: 16px;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

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

/* === TYPOGRAPHY === */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-primary);
}

h2 {
    color: var(--color-text-black);
}

h1 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

h3 {
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
}

p {
    margin-bottom: 1rem;
}

/* === HEADER === */
header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: transparent;
    box-shadow: none;
    z-index: 1000;
    padding: 1.5rem 0;
}



header .container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .logo img {
    height: 90px;
    width: auto;
    transition: height 0.3s ease;
}

header nav ul {
    list-style: none;
    display: flex;
    gap: 2.5rem;
}

header nav a {
    color: #ffffff;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    position: relative;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

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


header nav a:hover::after {
    width: 100%;
}

/* === HEADER LINK BUTTON STYLE === */

header nav a.nav-btn-external {
    border: 1px solid var(--color-secondary);
    /* Gold accent */
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
    transition: all 0.3s ease;
}

header nav a.nav-btn-external::after {
    display: none;
    /* Remove bottom underline hover effect */
}

header nav a.nav-btn-external:hover {
    color: var(--color-secondary);
    border-color: var(--color-secondary);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
}

/* === LANGUAGE SWITCHER === */
.nav-lang-switcher {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.7);
}

.nav-lang-switcher .lang-active {
    color: var(--color-secondary);
    font-weight: 700;
    font-size: 1.07em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    cursor: default;
}

.nav-lang-switcher .lang-link {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9em;
    opacity: 0.6;
    text-transform: uppercase;
    transition: color 0.3s ease, opacity 0.3s ease;
}

.nav-lang-switcher .lang-link:hover {
    color: var(--color-secondary);
    opacity: 1;
}

.nav-lang-switcher .lang-link::after {
    display: none; /* No underline effect for the lang switcher */
}

/* === HERO SECTIONS === */
.hero {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 39%;
    /* 0.39 aspect ratio */
    overflow: hidden;
}

.hero img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-content {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 10;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10vw;
}

.hero-text {
    flex: 1;
    max-width: 400;
    color: #e8e1d7;
}

.hero-content h1 {
    font-size: 3.5rem;
    font-weight: 400;
    color: #e8e1d7;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.hero-content p {
    font-size: 1.1rem;
    color: #e8e1d7;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
    line-height: 1.6;
}



/* Contact Hero Specifics */
.hero.hero-contact {
    padding-bottom: 22.8%;
    padding-top: 0;
    height: 0;
    min-height: 0;
}

/* Hero Form Overlay - "Alquila tu propiedad" */
.hero-form-overlay {
    flex-shrink: 0;
    /* background: linear-gradient(135deg, rgba(246, 219, 184, 0.98), rgba(232, 200, 150, 0.95)); */
    background-image: url('../img/cabanillas-rentals-form-bg1.png');
    background-size: cover;
    background-position: center;
    /* Refined Gradient */
    padding: 1.5rem;
    border-radius: 8px;
    /* border: 1px solid rgba(255,255,255,0.3); */
    max-width: 300px;
    width: 100%;
    margin-right: 5%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.hero-form-overlay h3 {
    color: var(--color-text-black);
    font-size: 1.3rem;
    margin-bottom: 0.3rem;
    font-family: var(--font-heading);
    line-height: 1.2;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    font-weight: 400;
}

.hero-form-overlay h3::after {
    content: '';
    display: block;
    height: 1px;
    background: var(--color-primary);
    margin: 0.8rem 0 1rem 0;
    border-radius: 2px;

}

.hero-form-overlay p {
    margin-bottom: 1.5rem;
}

/* === SEARCH FILTER COMPONENT === */
.search-filter-container {
    background: #ffffff;
    padding: 2rem 0;
    margin-top: -3rem;
    /* Overlap effect */
    position: relative;
    z-index: 20;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    margin-bottom: 2rem;
    border: none;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
}

/* === FEATURED PROPERTIES / HOT SPOTS === */
.featured-properties {
    padding: 150px 0 5rem 0;
    /* Removing top padding */
    position: relative;
    overflow: visible;
}

.featured-properties .container {
    padding: 0 2rem;
    max-width: 1300px;
}

.hotspots-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    position: relative;
}

.hotspots-left {
    width: 45%;
    padding-top: 4rem;
    padding-right: 2rem;
    z-index: 2;
}

.hotspots-left>* {
    max-width: 425px;
}

.hotspots-right {
    width: 55%;
    position: relative;
    /* padding-left: 2rem; */
}

/* Orange Background Block */
.hotspots-bg-block {
    position: absolute;
    top: 0;
    right: -100vw;
    /* Extend to edge */
    left: 0;
    height: 240%;
    /* Taller to go behind carousel */
    background: #E8B47E;
    /* Warmer color matching image */
    z-index: 0;
}

.hotspots-title-large {
    position: absolute;
    top: -5.2rem;
    right: 0;
    font-family: var(--font-heading);
    font-size: 5rem;
    color: #dd914a;
    z-index: 1;
    pointer-events: none;
    white-space: nowrap;
}

.hotspots-description {
    color: #fff;
    font-size: 0.8rem;
    max-width: 450px;
    margin-bottom: 2.5rem;
    position: relative;
    z-index: 2;
    line-height: 1.8;
    padding-top: 4rem;
    /* Push down below title */
    margin-left: 1rem;
    padding-left: 5rem;
    font-weight: 500;
}

.hotspots-description strong {
    font-style: italic;
    font-size: 0.9rem;
    display: block;
    margin-top: 0.5rem;
}

/* Carousel wrapper - controls overflow */
.carousel-wrapper {
    position: relative;
    z-index: 2;
    overflow: hidden;
    max-width: calc((320px * 3) + (1.5rem * 2));
    /* Show exactly 3 cards */
    margin: 0 auto 0;
    padding-top: 40px;
    /* Space for hotspot icon to pop out */
    padding-bottom: 0;
}

/* Inner carousel container - gets transformed */
.property-grid-hotspots {
    display: flex;
    justify-content: flex-start;
    gap: 1.5rem;
    transition: transform 0.5s ease;
}

.property-card-hotspot {
    flex: 0 0 320px;
    height: 320px;
    /* Fixed height for consistent layout */
    position: relative;
    border-radius: 0;
    /* Sharp corners */
    overflow: visible;
    /* Allow icon to pop out */
    cursor: pointer;
    transition: transform 0.3s ease;
}

.hotspot-img-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    /* Keep image zoom inside */
    z-index: 1;
}

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

.property-card-hotspot img.bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease, filter 0.3s ease;
}

.property-card-hotspot:hover img.bg-img {
    transform: scale(1.05);
    filter: brightness(0.85);
}

/* Hotspot Icon */
/* Hotspot Icon */
.hotspot-icon {
    position: absolute;
    /* Start smaller */
    width: 60px;
    height: auto;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) ease-in;
    z-index: 5;
    pointer-events: none;
}

.property-card-hotspot:hover .hotspot-icon {
    top: -30px;
    /* Pop out */
    right: 20px;
    /* Pop out */
    opacity: 1;
}

.card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    padding: 2rem;
    color: white;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.4s ease;
    z-index: 4;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.property-card-hotspot:hover .card-overlay {
    opacity: 1;
    transform: translateY(0);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3) 60%, transparent);
    /* Show gradient on hover */
}

.card-overlay h3 {
    color: white;
    font-size: 1.15rem;
    margin-bottom: 0.15rem;
    font-family: var(--font-heading);
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    line-height: 1.1;
    word-wrap: break-word;
}

.card-overlay .location {
    font-size: 0.75rem;
    opacity: 0.9;
    margin-bottom: 0;
    font-family: var(--font-heading);
    font-style: italic;
}

.card-overlay .details {
    font-weight: 700;
    margin-bottom: 0;
    line-height: 1.4;
    font-size: 0.75rem;
    font-family: var(--font-heading);
}

.card-overlay .price {
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0;
    margin-top: 0.3rem;
    font-family: var(--font-heading);
}

.link-arrow {
    display: inline-block;
    color: white;
    text-decoration: none;
    font-weight: 700;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    padding-top: 1rem;
    width: 100%;
    font-family: var(--font-heading);
    text-transform: none;
    /* Sentence case */
    font-size: 1.1rem;
}

.card-overlay .link-arrow {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0;
    padding-top: 0.5rem;
    display: block;
    border-top: 1px solid rgba(255, 255, 255, 0.8);
    border-bottom: none;
    width: 100%;
}

/* Nav Controls */
.hotspots-nav {
    display: flex;
    gap: 1rem;
    margin-top: 3rem;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.nav-circle {
    width: 40px;
    height: 40px;
    border: 1px solid #aaa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #999;
    transition: all 0.3s ease;
}

.nav-circle:hover {
    border-color: #386161;
    color: #386161;
    background: transparent;
}

.hotspots-contact-section {
    text-align: center;
    margin-top: 4rem;
}

.hotspots-contact-section h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--color-text-black);
}

.hotspots-contact-section .btn {
    background-color: #386161;
    /* Dark Teal to match image */
    color: #fff;
    padding: 0.8rem 2rem;
}

.search-filter-form {
    display: flex;
    align-items: flex-end;
    /* Align inputs and button at bottom */
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.filter-group {
    flex: 1;
    min-width: 180px;
    max-width: 250px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.filter-group label {
    display: block;
    margin-bottom: 0.6rem;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-primary);
    font-size: 1.1rem;
    letter-spacing: 0.5px;
}

.filter-group .select-wrapper,
.filter-group .date-wrapper {
    width: 100%;
    position: relative;
}

.filter-group select,
.filter-group input {
    width: 100%;
    padding: 1rem 1.2rem;
    border: 1px solid #d1d1d1;
    background: #f9f9f9;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #444;
    appearance: none;
    text-align: left;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.filter-group select:focus,
.filter-group input:focus {
    border-color: var(--color-secondary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

/* Custom Select Arrow */
.select-wrapper::after {
    content: '';
    position: absolute;
    right: 18px;
    top: 55%;
    transform: translateY(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--color-primary);
    pointer-events: none;
}

/* Date Icon */
.calendar-icon {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0.6;
    font-size: 1.1rem;
}

.filter-btn {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    padding-bottom: 0;
}

.filter-btn .btn {
    padding: 1rem 3.5rem;
    background: #2c5252;
    /* Darker polished teal */
    border-radius: 4px;
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 1rem;
}

.filter-btn .btn:hover {
    background: #1a3a3a;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Custom styles for Hero Form inputs to match Image 2 */
.hero-form-overlay form input {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--color-primary);
    border-radius: 4px;
    padding: 0.6rem;
    color: var(--color-text-black);
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.hero-form-overlay form input:focus {
    background: #fff;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(26, 58, 58, 0.1);
    outline: none;
}

.hero-form-overlay form label {
    font-size: 0.45rem;
    font-weight: 700;
    color: var(--color-text-black);
    margin-bottom: 0.2rem;
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hero-form-overlay .btn-whatsapp {
    background: #25D366;
    border: 2px solid #25D366;
    color: #fff;
    font-family: var(--font-heading);
    margin-right: 0.5rem;
    font-weight: 700;
    padding: 0.6rem 0.8rem;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.hero-form-overlay .btn-whatsapp:hover {
    background: #1fb855;
    border-color: #1fb855;
    color: #fff;
}

.hero-form-overlay .btn-whatsapp svg {
    width: 20px;
    height: 20px;
    fill: white;
}

.hero-form-overlay .btn-submit {
    background: var(--color-primary);
    color: white;
    font-family: var(--font-heading);
    border: 2px solid var(--color-primary);
    padding: 0.6rem 0.8rem;
    font-weight: 700;
    font-size: 0.9rem;
}

.hero-form-overlay .btn-submit:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.7rem;
    line-height: 1.3;
    color: #555;
    margin-top: 1rem;
}

.form-check input {
    margin-top: 3px;
}


/* === SECTIONS === */
section {
    padding: var(--section-padding);
}

/* Fix properties grid for search bar interaction */
.hero+.search-filter-container+section {
    padding-top: 5rem;
}

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 2rem;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 500;
    color: var(--color-text-black);
    margin-bottom: 1rem;
    text-align: center;
    font-family: var(--font-heading);
}


/* === CONTACT PAGE REDESIGN === */

/* Top Section: Info & Map */
.contact-info-section {
    position: relative;
    padding: 5rem 0;
    overflow: hidden;
}

.contact-bg-split {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(to right, var(--color-bg-light) 76.5%, white 76.5%);
}

.contact-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4rem;
}

.contact-info-content {
    flex: 1;
    min-width: 300px;
    padding-right: 2rem;
}

.contact-title {
    font-size: 3.5rem;
    color: #e2a874;
    /* Light Gold/Beige Text */
    line-height: 1;
    margin-bottom: 3rem;
    font-family: var(--font-heading);
}

.contact-details-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.contact-item {
    display: flex;
    flex-direction: column;
}

.contact-label {
    font-size: 1rem;
    font-weight: 700;
    color: #e2a874;
    /* Orange/Gold Label */
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    font-family: var(--font-heading);
    letter-spacing: 1px;
}

.contact-value {
    font-size: 1.1rem;
    color: var(--color-primary);
    /* Dark Teal */
    font-weight: 700;
    font-family: var(--font-heading);
    line-height: 1.4;
}

.contact-map-container {
    flex: 1;
    min-width: 300px;
    position: relative;
}

.map-wrapper {
    /* Styles to make map look grayscale if possible or just container */
    background: #eee;
    width: 100%;
    /* border-radius: 4px; */
    overflow: hidden;
    aspect-ratio: 1 / 1;
}

.map-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    /* Force grayscale specifically */
}

/* Bottom Section: Form */
.contact-bottom-section {
    position: relative;
    background-image: url('../img/cabanillas-rentals-contacto-bg.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding: 0;
    width: 100%;
    aspect-ratio: 1 / 0.267;
    margin-top: 20rem;
}

.contact-form-card {
    background: transparent;
    background-image: url('../img/cabanillas-rentals-propiedades-individual-form-bg.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    max-width: 1000px;
    width: 100%;
    aspect-ratio: 1 / 0.527;
    padding: 2rem 3rem;
    box-shadow: none;
    position: absolute;
    top: -15rem;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 8px;
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.form-watermark {
    display: none;
}

.form-watermark svg {
    width: 100%;
    height: 100%;
    color: #E8D5B7;
    /* Light accent color */
}

.contact-form-new {
    position: relative;
    z-index: 2;
}

.form-row {
    display: flex;
    gap: 2rem;
    margin-bottom: 1rem;
}

.form-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    justify-content: space-between;
}

.form-group-new {
    display: flex;
    flex-direction: column;
}

.form-group-new label {
    font-size: 0.7rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
    font-family: var(--font-heading);
    color: #333;
}

.form-group-new.h-100 {
    height: 100%;
}

.form-group-new input,
.form-group-new textarea {
    padding: 0.6rem;
    border: 1px solid #ddd;
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: #555;
    background: rgba(255, 255, 255, 0.85);
    width: 100%;
}

.form-group-new input:focus,
.form-group-new textarea:focus {
    border-color: var(--color-primary);
    outline: none;
}

.form-group-new textarea {
    height: 100%;
    min-height: 100px;
    resize: none;
    box-sizing: border-box;
}

.form-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: center;
    max-width: 300px;
    margin: 0.8rem auto 1rem;
}

.btn-primary-dark {
    background: var(--color-primary);
    color: white;
    width: 100%;
    text-align: center;
    padding: 0.6rem;
    font-weight: 700;
    border: 2px solid var(--color-primary);
    font-size: 0.85rem;
    box-sizing: border-box;
}

/* Compound selector (.btn.btn-whatsapp-new instead of just .btn-whatsapp-new):
   the markup always carries both classes, and the generic .btn rule further
   down this file has equal specificity but comes later in source order, so it
   was winning the cascade and silently overriding this rule's background/
   color/border — the button rendered identical to the submit button despite
   these properties being set correctly. The compound selector raises
   specificity so this rule wins regardless of source order. */
.btn.btn-whatsapp-new {
    background: white;
    color: #25D366;
    width: 100%;
    text-align: center;
    padding: 0.6rem;
    font-weight: 700;
    border: 2px solid #25D366;
    font-size: 0.85rem;
    box-sizing: border-box;
}

.form-legal {
    text-align: center;
    font-size: 0.65rem;
    color: #777;
}



/* Property page contact form - no background image */
.contact-form-property {
    background-image: none !important;
    background: transparent;
    margin-top: 4rem;
    padding: 4rem 0;
    aspect-ratio: auto;
}

.contact-form-property .contact-form-card {
    position: static;
    transform: none;
    margin: 0 auto;
    top: auto;
    left: auto;
}

/* Privacy Policy Page */
.privacy-policy-section {
    padding: 4rem 0;
    background: var(--color-bg-white);
}

.privacy-content {
    margin: 0 auto;
    line-height: 1.8;
}

.privacy-content h1 {
    font-family: var(--font-heading);
    color: var(--color-text-black);
    font-size: 1.8rem;
    margin-bottom: 4rem;
    text-align: center;
}

.privacy-content h2 {
    font-family: var(--font-heading);
    color: var(--color-text-black);
    font-size: 2rem;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    border-top: 2px solid var(--color-bg-light);
    padding-top: 2rem;
}

.privacy-content h3 {
    font-family: var(--font-heading);
    color: var(--color-text-black);
    font-size: 1.2rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.privacy-content p {
    font-family: var(--font-body);
    color: var(--color-text-black);
    margin-bottom: 1rem;
    font-size: 1rem;
}

.privacy-content ul {
    margin-left: 2rem;
    margin-bottom: 1.5rem;
}

.privacy-content ul li {
    font-family: var(--font-body);
    color: var(--color-text-black);
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.privacy-content hr {
    border: none;
    border-top: 2px solid var(--color-bg-light);
    margin: 3rem 0;
}

.privacy-content strong {
    color: var(--color-text-black);
    font-weight: 700;
}


/* === PROPERTY GRID (Standard - Keep for Listing Page) === */
.property-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    /* Slightly wider cards */
    gap: 2.5rem;
    margin-top: 2rem;
}

/* === PROPERTY CARD REDESIGN === */
.property-card {
    background: var(--color-bg-light);
    padding-bottom: 0;
    transition: transform 0.3s ease;
    position: relative;
    aspect-ratio: 1 / 2;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

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

.property-img-wrapper {
    position: relative;
    width: 100%;
    flex: 0 0 auto;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.property-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.property-card:hover .property-img-wrapper img {
    transform: scale(1.05);
}

/* Icon Overlay */
/* Icon Overlay */
.property-icon-overlay {
    position: absolute;
    top: 0;
    transform: translateY(-45%);
    right: 20px;
    width: 60px;
    height: 60px;
    padding: 0;
    background: transparent;
    border: none;
    z-index: 10;
    pointer-events: none;
}

.property-card-content {
    padding: 2rem 2.5rem;
    text-align: left;
    flex: 0 0 auto;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.property-id {
    font-size: 0.9rem;
    color: var(--color-primary);
    font-weight: 700;
    margin-bottom: 1rem;
    letter-spacing: 0.5px;
    min-height: 1.3rem;
}

.property-type {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--color-primary);
    margin-bottom: 0.2rem;
    font-weight: 700;
    line-height: 1.1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.property-location {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--color-primary);
    margin-bottom: 1.5rem;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.property-details-list {
    margin-bottom: 1rem;
}

.property-details-list div {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--color-primary);
    margin-bottom: 0.3rem;
    font-weight: 500;
}

.property-details-list strong {
    font-weight: 700;
}

.property-link {
    display: inline-block;
    color: #d4af37;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border-top: 1px solid #ddd;
    padding-top: 1rem;
    width: 100%;
    margin-top: 1rem;
}

.property-link:hover {
    color: var(--color-primary);
    transform: translateX(5px);
}

/* === BUTTONS === */
.btn {
    display: inline-block;
    padding: 0.9rem 2.5rem;
    background: var(--color-primary);
    color: var(--color-bg-white);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    font-family: var(--font-body);
    line-height: normal
}

.btn:hover {
    background: #0f2424;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

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

.btn-secondary:hover {
    background: #c49b2d;
}

/* === FORMS === */
.contact-form {
    background: var(--color-bg-white);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--color-text-dark);
    font-size: 0.95rem;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.85rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-secondary);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* === HOT SPOTS / IMAGE OVERLAYS === */
.hotspot-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    height: 350px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

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

.hotspot-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2.5rem;
    background: linear-gradient(to top, var(--color-overlay), transparent);
    text-align: center;
}

.hotspot-overlay h3 {
    color: white;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 1.3rem;
}

/* === FOOTER === */
/* === FOOTER === */
footer {
    background: #356e80;
    color: #ffffff;
    padding: 3rem 0 0;
    font-family: var(--font-body);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 3rem;
    flex-wrap: wrap;
    gap: 2rem;
}

.footer-logo img {
    height: 85px;
    /* Adjust size to match */
    width: auto;
}

.footer-info {
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.6;
}

.footer-info p {
    margin-bottom: 0.3rem;
    color: #ffffff;
}

.footer-info a {
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.footer-info a:hover {
    opacity: 0.8;
}

.privacy-link {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    text-decoration: underline;
}

.footer-social {
    display: flex;
    gap: 0.8rem;
    align-items: center;
}

/* White circle background for icons */
/* White circle background for icons */
.footer-social a {
    display: inline-block;
    transition: all 0.3s ease;
}

.footer-social a:hover {
    opacity: 0.8;
    transform: translateY(-3px);
}

.footer-social img {
    width: 35px;
    /* Bigger size */
    height: auto;
    /* Removed filter brightness(0) and opacity */
}

.footer-bottom {
    background: #234a56;
    /* Darker shade */
    padding: 1.5rem 0;
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    /* Full width trick */
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* === RESPONSIVE === */



/* === EXPLORA NUESTRAS ZONAS SECTION === */
.zones-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

.zone-card {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    height: 400px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.zone-card-large {
    grid-column: span 2;
    height: 500px;
}

.zone-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.zone-card:hover img {
    transform: scale(1.05);
}

.zone-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.zone-overlay .zone-icon {
    position: absolute;
    top: auto;
    right: auto;
    width: 50px !important;
    height: auto !important;
    opacity: 1;
    max-width: 50px;
    max-height: 50px;
    z-index: 10;
}

.zone-content {
    background: #00485f;
    padding: 2rem;
    max-width: 350px;
    display: inline-block;
    position: relative;
    padding-top: 3rem;
}

.zone-content .zone-icon {
    position: absolute;
    top: -25px;
    right: 20px;
    width: 50px !important;
    height: 50px !important;
}

.zone-card-large .zone-content {
    max-width: 450px;
}

.zone-content h3 {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1rem;
    line-height: 1.1;
    letter-spacing: 2px;
}

.zone-card-large .zone-content h3 {
    font-size: 2.5rem;
}

.zone-content p {
    color: white;
    font-size: 0.85rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    font-weight: 400;
}

.btn-zone {
    background: transparent;
    color: white;
    border: 2px solid white;
    padding: 0.75rem 2rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    display: inline-block;
    border-radius: 4px;
}

.btn-zone:hover {
    background: white;
    color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.3);
}

/* Responsive */


/* === ABOUT SECTION REDESIGN === */
.about-section {
    padding: 6rem 0;
    position: relative;
    /* Beige/white split, positioned to land between the 3rd and 4th column of
       .about-trust-grid instead of at a fixed % of the viewport. The grid sits
       inside .container (max-width: 1200px, centered), so above that width the
       split point stays a fixed distance from the viewport's horizontal center
       rather than a fixed percentage of it — a flat percentage only lines up
       with the gap at one specific viewport width and drifts into a column at
       every other one. 296px = the gap's midpoint offset from the container's
       own center at 1200px (half of 1200px container minus half of 1136px
       content width, plus the content-relative gap position), verified against
       measured column positions at 1440px and 1920px. Widths under 1200px
       (where .container itself becomes fluid) are handled by the override
       below; under 992px, where the grid stacks to fewer columns, see the
       flat-color fallback in responsive.css. */
    background: linear-gradient(90deg, var(--color-bg-light) calc(50% + 296px), #ffffff calc(50% + 296px));
}

/* .container is fluid (no longer capped at 1200px) between this breakpoint and
   992px, where the grid still shows all 4 columns in a row (see responsive.css
   for the ≤992px layout change). In this band the gap position stays close to
   a constant percentage of the viewport, so a flat value works; measured
   constant at ~74.6% across 993–1199px. */
@media (max-width: 1199px) {
    .about-section {
        background: linear-gradient(90deg, var(--color-bg-light) 74.6%, #ffffff 74.6%);
    }
}



/* Row 1: Content + Image */
.about-top-row {
    display: flex;
    align-items: center;
    /* Center vertically specifically for image/text balance? Or stretch? */
    justify-content: space-between;
    margin-bottom: 5rem;
    gap: 4rem;
}

.about-text-col {
    width: 45%;
    /* Fits within the 65% beige area comfortably */
    padding-right: 2rem;
}

.about-image-col {
    width: 60%;
    /* Allow image to overlap/extend */
    position: relative;
    /* right: -2rem; Removed to align with container standard padding */
}

.about-label {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
    /* border-bottom: 2px solid var(--color-primary); */
    /* display: inline-block; */
    /* padding-bottom: 0.2rem; */
}



.about-text-col p {
    font-size: 1rem;
    line-height: 1.8;
    color: #666;
    max-width: 500px;
}

.about-img-wrapper {
    position: relative;
    width: 100%;
    height: auto;
    /* Maintain proportions */
    overflow: hidden;
    /* box-shadow: 0 20px 40px rgba(0,0,0,0.1); */
}

.about-img-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

/* Row 2: Trust Grid */
.about-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
    padding-top: 2rem;
    /* border-top: 1px solid rgba(0,0,0,0.05); */
}

.trust-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.trust-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 1.5rem;
    /* Use a gold/orange circle or just the icon */
    background: transparent;
}

.trust-icon img {
    width: 100%;
    height: auto;
    filter: sepia(100%) saturate(1000%) hue-rotate(320deg) brightness(80%) contrast(100%);
    /* Attempt to tint golden/orange if it's the iso.png */
    opacity: 0.8;
}

.trust-item h3 {
    font-size: 1.25rem;
    line-height: 1.3;
    margin-bottom: 1rem;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 700;
}

.trust-item p {
    font-size: 0.85rem;
    line-height: 1.6;
    color: #555;
}

/* Responsive */




/* === PROPERTY PAGE REDESIGN === */

/* Gallery Grid */
.gallery-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 1rem;
    height: 500px;
}



/* Specs Bar */
.specs-bar {
    display: flex;
    justify-content: flex-start;
    gap: 3rem;
    padding: 1.5rem 2rem;
    border-radius: 8px;
    align-items: center;
    color: #777;
}

.specs-bar strong {
    color: var(--color-primary);
    font-size: 1.2rem;
}

/* Similar Properties Background Split */
.property-similar {
    position: relative;
    padding-top: 4rem;
}

/* .property-similar styles refactored below at line 2227 */

/* === SINGLE PROPERTY PAGE REFACTOR === */
.hero-img-contact {
    object-fit: cover;
    object-position: center;
}

.property-header-info {
    background: linear-gradient(90deg, var(--color-bg-light) 50%, #ffffff 50%);
    padding: 2rem 0 3rem 0;
}

/* Breadcrumbs */
.breadcrumbs {
    font-size: 0.85rem;
    letter-spacing: 1px;
    color: #999;
    margin-bottom: 2rem;
    text-transform: uppercase;
}

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

/* Header Layout */
.property-header-info .header-layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}

.property-header-info .header-left {
    flex: 0 0 50%;
    max-width: 50%;
    width: 50%;
    padding-right: 2rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
}

.prop-id-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.prop-title {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    line-height: 1.1;
    color: var(--color-primary);
    font-family: var(--font-heading);
}

.header-location {
    font-size: 1.2rem;
    color: var(--color-text-light);
    margin-bottom: 0;
}

.property-header-info .header-right {
    flex: 0 0 50%;
    max-width: 50%;
    width: 50%;
    text-align: left;
    padding-left: 2rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1.2rem;
}

/* Action buttons pushed to the bottom of the right column */
.property-header-info .header-right .action-buttons {
    margin-top: auto;
    padding-top: 0.5rem;
    align-self: flex-end;
    justify-content: flex-end;
}

.price-block {
    margin-bottom: 1rem;
}

.price-label {
    font-size: 0.9rem;
    color: #999;
    display: block;
    margin-bottom: 0.2rem;
}

.price-value {
    font-size: 2rem;
    color: var(--color-primary);
    font-weight: 700;
}

.price-period {
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--color-text-light);
}

/* Date Inputs */
.date-inputs {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: flex-start;
    /* Align left */
    margin-bottom: 1rem;
}

.date-label {
    font-size: 0.9rem;
    color: #999;
}

.date-fields {
    display: flex;
    gap: 0.5rem;
}

.date-input {
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #777;
    font-family: var(--font-body);
}

/* Header Details Row (Price + Dates) */
.property-header-info .header-details-row {
    display: flex;
    flex-direction: column !important;
    /* Force vertical stack */
    align-items: flex-start;
    gap: 1rem;
    margin-top: 1.5rem;
}

.header-details-row .price-block {
    margin-bottom: 0;
}

.header-details-row .date-inputs {
    margin-bottom: 0;
}

/* Action Buttons */
.action-buttons {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    font-size: 0.8rem;
    color: var(--color-primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    align-items: flex-end;
    height: 100%;
    padding-bottom: 5px;
    /* Visual alignment */
}

.action-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-primary);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease;
}

.action-link:hover,
.action-link:focus-visible {
    color: #00485f;
    outline: none;
}

.action-icon {
    border: 1px solid var(--color-primary);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    background: transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.action-link:hover .action-icon,
.action-link:focus-visible .action-icon {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.action-icon svg {
    display: block;
}

/* Gallery */
.property-gallery {
    /* 50% Beige (Left) / 50% White (Right) Split */
    background: linear-gradient(90deg, var(--color-bg-light) 50%, #ffffff 50%);
    padding-bottom: 0;
}

.property-gallery .container {
    padding: 0;
}

.gallery-grid {
    display: grid;
    /* Main: 42.17%, Rest: 57.025% */
    grid-template-columns: 42.17% 1fr;
    gap: 0.8%;
    /* 1.61% total gap / 2 gaps approx */
    height: 500px;
}

.gallery-main {
    position: relative;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
}

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

/* ── Date Box Inputs (Google Flights style) ── */
.gf-input-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    width: 100%;
}

.gf-date-box {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1.5px solid #d1d5db;
    border-radius: 10px;
    padding: 9px 14px;
    background: #fff;
    cursor: pointer;
    flex: 1;
    min-width: 0;
    transition: border-color .18s, box-shadow .18s;
    position: relative;
}

.gf-date-box:hover {
    border-color: var(--color-primary, #1e3a5f);
    box-shadow: 0 2px 10px rgba(30, 58, 95, .1);
}

.gf-date-box.gf-has-value {
    border-color: var(--color-primary, #1e3a5f);
}

.gf-cal-icon {
    color: #9ca3af;
    flex-shrink: 0;
}

.gf-date-box.gf-has-value .gf-cal-icon {
    color: var(--color-primary, #1e3a5f);
}

.gf-date-content {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.gf-date-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #9ca3af;
}

.gf-date-value {
    font-size: 13px;
    font-weight: 600;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Editable box look */
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 3px 8px;
    transition: border-color .15s, background .15s;
    cursor: text;
}

.gf-date-box:hover .gf-date-value,
.gf-date-box.gf-has-value .gf-date-value {
    background: #fff;
    border-color: var(--color-primary, #1e3a5f);
}

.gf-date-box.gf-has-value .gf-date-value {
    color: var(--color-primary, #1e3a5f);
}

.gf-date-arrows {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    margin-left: auto;
}

.gf-arrow {
    background: none;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    color: #374151;
    line-height: 1;
    padding: 0;
    transition: background .12s, border-color .12s;
}

.gf-arrow:hover:not(:disabled) {
    background: var(--color-primary, #1e3a5f);
    border-color: var(--color-primary, #1e3a5f);
    color: #fff;
}

.gf-arrow:disabled {
    opacity: .3;
    cursor: not-allowed;
}

.gf-bar-sep {
    width: 1px;
    height: 36px;
    background: #e5e7eb;
    flex-shrink: 0;
}

.gf-clear-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    font-size: 18px;
    line-height: 1;
    padding: 0 2px;
    flex-shrink: 0;
    display: none;
    align-items: center;
    transition: color .15s;
}

.gf-clear-btn:hover {
    color: #ef4444;
}



.gallery-secondary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    /* Gap relative to secondary width (approx 57% of parent) 
       0.8% of parent is approx 1.4% of secondary */
    gap: 1.4%;
    height: 100%;
    max-height: 500px;
}

.gallery-item {
    position: relative;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.06);
    /* Lightly darkened translucent background */
    backdrop-filter: blur(5px);
    /* Blur effect */
}

/* Gallery Count Badge */
.gallery-count-badge {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, 0.9);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #000;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    box-shadow: none;
    backdrop-filter: blur(4px);
    transition: none;
}

.gallery-count-badge:hover {
    transform: none;
}

.gallery-count-badge svg {
    width: 18px;
    height: 18px;
}

/* Specs Bar */
.spec-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #555;
}

.spec-icon {
    margin-top: -2px;
    fill: #555;
}

.spec-icon-stroke {
    margin-top: -2px;
    fill: none;
    stroke: #555;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.spec-value {
    font-size: 0.9rem;
    font-weight: 600;
}

.term-icon {
    margin-top: -2px;
    fill: currentColor;
}

/* Description */
.property-description {
    padding: 4rem 0;
}

.desc-title {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    color: #333;
}

.desc-content {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #666;
}

.contact-note {
    margin-top: 2rem;
    color: #999;
    font-size: 0.9rem;
    font-style: italic;
}

/* Location */
.property-location-section {
    padding: 4rem 0;
}

.map-container {
    width: 100%;
    height: 400px;
    background: #eee;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.map-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    opacity: 0.7;
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.map-marker {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-primary);
    font-size: 3rem;
}

/* Similar Properties */
/* Similar Properties */
.property-similar {
    padding-bottom: 0;
    padding-top: 0;
    position: relative;
    overflow-x: clip;
    /* Prevent horizontal scroll from 100vw interactions if any */
}

.similar-bg {
    display: none;
}

.relative-z1 {
    position: relative;
    z-index: 1;
}

.similar-header {
    text-align: center;
    background: #ffffff;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);
    padding-bottom: 6rem;
    /* Space for overlap */
    padding-top: 4rem;
    position: relative;
    z-index: 5;
}

.similar-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: #333;
}

.similar-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;

    /* Full width beige background */
    background: var(--color-bg-light);
    /* Beige */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);

    /* Overlap and spacing */
    margin-top: -4rem;
    padding-bottom: 6rem;
    position: relative;
    /* z-index: 1 removed to prevent stacking context trapping children below header */
}

.similar-card {
    background: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 10;
}

.similar-icon-overlay {
    right: 2rem;
    top: -25px;
}

/* === CUSTOM VIDEO PLAYER === */
.video-container {
    position: relative;
    overflow: hidden;
    background: #000;
}

.custom-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background-color: white;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    z-index: 10;
}

.custom-play-btn:hover {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.custom-play-btn svg {
    width: 32px;
    height: 32px;
    fill: black;
    margin-left: 4px;
    /* Optical adjustment */
}

/* === LIGHTBOX GALLERY === */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.lightbox-overlay.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-content {
    position: relative;
    width: 90%;
    height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    background: none;
    border: none;
    color: white;
    font-size: 40px;
    cursor: pointer;
    z-index: 10000;
}

.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: white;
    font-size: 40px;
    cursor: pointer;
    padding: 20px;
    z-index: 10000;
    transition: transform 0.2s;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    transform: translateY(-50%) scale(1.2);
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

.lightbox-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-family: var(--font-heading);
    font-size: 16px;
}

/* ================================================================
   GOOGLE FLIGHTS-STYLE CALENDAR WIDGET — Property Page
   ================================================================ */

.gf-calendar-widget {
    margin-top: 0.5rem;
    width: 100%;
    /* No max-width constraint — fills the right column */
}

/* ── Input Bar ── */
.gf-input-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    width: 100%;
    margin-bottom: 12px;
}

/* ── Calendar Panel ── */
.gf-calendar-panel {
    background: #fff;
    border-radius: 14px;
    border: 1.5px solid #e5e7eb;
    overflow: hidden;
    box-shadow: 0 3px 18px rgba(0, 0, 0, .06);
    padding: 14px 16px 10px;
}

.gf-input-field {
    flex: 1;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: background .15s;
    position: relative;
}

.gf-input-field:first-child {
    border-right: 1px solid #e2e8f0;
}

.gf-input-field:hover {
    background: #f8fafc;
}

.gf-input-field.gf-has-value .gf-input-value {
    color: var(--color-primary, #1e3a5f);
    font-weight: 600;
}

.gf-input-icon {
    color: #94a3b8;
    display: flex;
    flex-shrink: 0;
}

.gf-input-field.gf-has-value .gf-input-icon {
    color: var(--color-primary, #1e3a5f);
}

.gf-input-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.gf-input-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: #94a3b8;
}

.gf-input-value {
    font-size: 14px;
    color: #94a3b8;
    white-space: nowrap;
}

.gf-separator {
    display: flex;
    align-items: center;
    padding: 0 10px;
    color: #cbd5e1;
    font-size: 18px;
    flex-shrink: 0;
}

.gf-clear-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    font-size: 20px;
    line-height: 1;
    padding: 0 4px;
    margin-left: auto;
    display: none;
    align-items: center;
    transition: color .15s;
}

.gf-clear-btn:hover {
    color: #ef4444;
}

/* ── Calendar Panel ── */
.gf-calendar-panel {
    background: #fff;
    border-radius: 16px;
    border: 2px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .07);
    padding: 18px 18px 12px;
}

/* Legend */
.gf-calendar-legend {
    display: flex;
    gap: 18px;
    margin-bottom: 14px;
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
}

.legend-dot {
    width: 13px;
    height: 13px;
    border-radius: 3px;
    /* square with slight rounding */
    flex-shrink: 0;
    display: inline-block;
}

.legend-booked {
    background: #fca5a5;
    border: 1.5px solid #ef4444;
}

.legend-available {
    background: #86efac;
    border: 1.5px solid #22c55e;
}

.legend-selected {
    background: #1a73e8;
}

/* ── Litepicker customization — Google-blue range selection ── */
#property-litepicker-root .litepicker {
    width: 100% !important;
    --litepicker-container-months-color-bg: transparent;
    --litepicker-month-header-color: var(--color-primary, #1e3a5f);
    --litepicker-button-prev-month-color: var(--color-primary, #1e3a5f);
    --litepicker-button-next-month-color: var(--color-primary, #1e3a5f);
    --litepicker-day-color: #1e293b;
    --litepicker-day-color-hover: #1a73e8;
    /* Start / End: solid Google blue */
    --litepicker-is-start-color: #fff;
    --litepicker-is-start-color-bg: #1a73e8;
    --litepicker-is-end-color: #fff;
    --litepicker-is-end-color-bg: #1a73e8;
    /* In-range: very light Google blue */
    --litepicker-is-in-range-color: #1a73e8;
    --litepicker-is-in-range-color-bg: #e8f0fe;
    /* Today indicator */
    --litepicker-is-today-color: #1a73e8;
    font-family: var(--font-body, inherit);
    border: none !important;
    box-shadow: none !important;
}

/* Disabled / booked dates */
#property-litepicker-root .litepicker .day-item.is-locked {
    background: #fee2e2 !important;
    color: #991b1b !important;
    text-decoration: line-through;
    opacity: 1 !important;
    cursor: not-allowed !important;
}

/* Full-width months */
#property-litepicker-root .litepicker .container__months {
    display: flex;
    gap: 16px;
    width: 100%;
    box-shadow: none !important;
}

#property-litepicker-root .litepicker .month-item {
    flex: 1;
}

/* Responsive: stack months vertically on small screens */
@media (max-width: 580px) {
    .gf-input-bar {
        flex-direction: column;
        border-radius: 12px;
    }

    .gf-input-field:first-child {
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
    }

    .gf-separator {
        display: none;
    }

    #property-litepicker-root .litepicker .container__months {
        flex-direction: column;
    }

    .gf-calendar-widget {
        max-width: 100%;
    }
}