/**
 * Villa Sol Inmobiliaria - Modern CSS
 * Diseño moderno y contemporáneo para WordPress
 */

/* ==========================================================================
   Variables CSS Modernas
   ========================================================================== */
:root {
    --villasol-primary: #01C8EF;
    --villasol-primary-dark: #00A8CF;
    --villasol-secondary: #2C3E50;
    --villasol-text: #333333;
    --villasol-text-light: #666666;
    --villasol-border: #E0E0E0;
    --villasol-bg: #FFFFFF;
    --villasol-bg-light: #F8F9FA;
    --villasol-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    --villasol-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
    --villasol-radius: 12px;
    --villasol-radius-sm: 8px;
    --villasol-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Modern Hero Section
   ========================================================================== */
.villasol-hero {
    position: relative;
    height: 320px;
    background: linear-gradient(135deg, var(--villasol-primary) 0%, var(--villasol-primary-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: -60px;
}

.villasol-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
}

.villasol-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 100%);
}

.villasol-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
    padding: 40px 20px;
}

.villasol-hero-title {
    font-size: 48px;
    font-weight: 700;
    margin: 0 0 16px 0;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.villasol-hero-subtitle {
    font-size: 20px;
    font-weight: 400;
    margin: 0;
    opacity: 0.95;
}

@media (max-width: 768px) {
    .villasol-hero {
        height: 240px;
        margin-bottom: -40px;
    }

    .villasol-hero-title {
        font-size: 32px;
    }

    .villasol-hero-subtitle {
        font-size: 16px;
    }
}

/* ==========================================================================
   Modern Search Section
   ========================================================================== */
.villasol-search-section {
    position: relative;
    z-index: 10;
    padding: 0 0 60px 0;
}

.villasol-search-card {
    background: var(--villasol-bg);
    border-radius: var(--villasol-radius);
    box-shadow: var(--villasol-shadow-hover);
    padding: 32px;
    max-width: 1200px;
    margin: 0 auto;
}

.villasol-search-main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    align-items: end;
}

.villasol-search-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.villasol-search-field label,
.villasol-filter-group label {
    font-size: 14px;
    font-weight: 600;
    color: var(--villasol-text);
    display: flex;
    align-items: center;
    gap: 6px;
}

.villasol-search-field label i,
.villasol-filter-group label i {
    font-size: 18px;
    color: var(--villasol-primary);
}

.villasol-select,
.villasol-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--villasol-border);
    border-radius: var(--villasol-radius-sm);
    font-size: 15px;
    color: var(--villasol-text);
    background: var(--villasol-bg);
    transition: var(--villasol-transition);
    outline: none;
}

.villasol-select:focus,
.villasol-input:focus {
    border-color: var(--villasol-primary);
    box-shadow: 0 0 0 3px rgba(1, 200, 239, 0.1);
}

.villasol-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}

.villasol-btn-primary {
    padding: 12px 32px;
    background: var(--villasol-primary);
    color: white;
    border: none;
    border-radius: var(--villasol-radius-sm);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--villasol-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    box-shadow: 0 4px 12px rgba(1, 200, 239, 0.3);
}

.villasol-btn-primary:hover {
    background: var(--villasol-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(1, 200, 239, 0.4);
}

.villasol-btn-primary i {
    font-size: 20px;
}

/* Advanced Filters */
.villasol-filters-toggle {
    margin-top: 20px;
    text-align: center;
}

.villasol-btn-filters {
    background: none;
    border: none;
    color: var(--villasol-primary);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--villasol-transition);
}

.villasol-btn-filters:hover {
    color: var(--villasol-primary-dark);
}

.villasol-advanced-filters {
    display: none;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 2px solid var(--villasol-border);
}

.villasol-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.villasol-filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.villasol-filters-checkboxes {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.villasol-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.villasol-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--villasol-primary);
}

.villasol-checkbox span {
    font-size: 15px;
    color: var(--villasol-text);
    display: flex;
    align-items: center;
    gap: 6px;
}

.villasol-checkbox span i {
    font-size: 18px;
    color: var(--villasol-text-light);
}

@media (max-width: 768px) {
    .villasol-search-card {
        padding: 24px 16px;
    }

    .villasol-search-main {
        grid-template-columns: 1fr;
    }

    .villasol-filters-grid {
        grid-template-columns: 1fr;
    }

    .villasol-filters-checkboxes {
        flex-direction: column;
        gap: 12px;
    }
}

/* ==========================================================================
   Properties Section
   ========================================================================== */
.villasol-properties-section {
    padding: 60px 0;
}

.villasol-results-header {
    margin-bottom: 32px;
}

.villasol-results-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--villasol-text);
    margin: 0;
}

/* Properties Grid */
.villasol-properties-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 32px;
    margin-bottom: 48px;
}

@media (max-width: 768px) {
    .villasol-properties-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* ==========================================================================
   Modern Property Card
   ========================================================================== */
.villasol-property-card {
    background: var(--villasol-bg);
    border-radius: var(--villasol-radius);
    overflow: hidden;
    box-shadow: var(--villasol-shadow);
    transition: var(--villasol-transition);
    height: 100%;
}

.villasol-property-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--villasol-shadow-hover);
}

.villasol-property-link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

/* Property Image */
.villasol-property-image {
    position: relative;
    width: 100%;
    height: 260px;
    overflow: hidden;
    background: var(--villasol-bg-light);
    display: block;
}

.villasol-property-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
    vertical-align: middle;
}

.villasol-property-card:hover .villasol-property-image img {
    transform: scale(1.08);
}

/* Property Badges */
.villasol-property-badge {
    position: absolute;
    top: 16px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    backdrop-filter: blur(10px);
    z-index: 2;
}

.villasol-property-badge.sold {
    right: 16px;
    background: rgba(231, 76, 60, 0.95);
    color: white;
}

.villasol-property-badge.reserved {
    right: 16px;
    background: rgba(243, 156, 18, 0.95);
    color: white;
}

.villasol-property-badge.operation {
    left: 16px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--villasol-text);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Property Carousel */
.villasol-property-carousel {
    height: 100%;
    position: relative;
}

.villasol-carousel-slide {
    height: 260px;
    display: block;
    position: relative;
}

.villasol-carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    vertical-align: middle;
}

/* Slick Carousel Custom Styles */
.villasol-property-carousel .slick-dots {
    bottom: 12px;
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 20px;
    width: auto;
    left: 50%;
    transform: translateX(-50%);
    max-width: 90%;
}

.villasol-property-carousel .slick-dots li {
    margin: 0 !important;
    width: 8px;
    height: 8px;
}

.villasol-property-carousel .slick-dots li button {
    width: 8px;
    height: 8px;
    padding: 0;
}

.villasol-property-carousel .slick-dots li button:before {
    color: white;
    opacity: 0.5;
    font-size: 8px;
    width: 8px;
    height: 8px;
    line-height: 8px;
}

.villasol-property-carousel .slick-dots li.slick-active button:before {
    color: white;
    opacity: 1;
}

.villasol-slick-prev,
.villasol-slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: var(--villasol-transition);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    opacity: 0;
}

.villasol-property-carousel:hover .villasol-slick-prev,
.villasol-property-carousel:hover .villasol-slick-next {
    opacity: 1;
}

.villasol-slick-prev {
    left: 12px !important;
    right: auto !important;
}

.villasol-slick-next {
    right: 12px !important;
    left: auto !important;
}

.villasol-slick-prev:hover,
.villasol-slick-next:hover {
    background: white;
    transform: translateY(-50%) scale(1.1);
}

.villasol-slick-prev i,
.villasol-slick-next i {
    font-size: 20px;
    color: var(--villasol-text);
}

/* Property Content */
.villasol-property-content {
    padding: 24px;
}

.villasol-property-price {
    font-size: 26px;
    font-weight: 700;
    color: var(--villasol-primary);
    margin-bottom: 12px;
}

.villasol-property-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--villasol-text);
    margin: 0 0 12px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.villasol-property-location {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--villasol-text-light);
    font-size: 14px;
    margin-bottom: 16px;
}

.villasol-property-location i {
    font-size: 16px;
    color: var(--villasol-primary);
}

/* Property Specs */
.villasol-property-specs {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid var(--villasol-border);
    border-bottom: 1px solid var(--villasol-border);
    margin-bottom: 12px;
}

.villasol-spec {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--villasol-text);
}

.villasol-spec i {
    font-size: 18px;
    color: var(--villasol-text-light);
}

.villasol-property-ref {
    font-size: 13px;
    color: var(--villasol-text-light);
    font-weight: 500;
}

/* ==========================================================================
   Modern Pagination
   ========================================================================== */
.villasol-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 48px;
}

.villasol-pagination-btn {
    padding: 12px 24px;
    background: var(--villasol-bg);
    color: var(--villasol-primary);
    border: 2px solid var(--villasol-primary);
    border-radius: var(--villasol-radius-sm);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--villasol-transition);
}

.villasol-pagination-btn:hover {
    background: var(--villasol-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--villasol-shadow);
}

.villasol-pagination-info {
    font-size: 15px;
    color: var(--villasol-text);
    font-weight: 500;
}

@media (max-width: 768px) {
    .villasol-pagination {
        flex-direction: column;
        gap: 12px;
    }

    .villasol-pagination-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   No Results
   ========================================================================== */
.villasol-no-results {
    text-align: center;
    padding: 80px 20px;
}

.villasol-no-results i {
    font-size: 64px;
    color: var(--villasol-border);
    margin-bottom: 24px;
}

.villasol-no-results h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--villasol-text);
    margin: 0 0 12px 0;
}

.villasol-no-results p {
    font-size: 16px;
    color: var(--villasol-text-light);
    margin: 0;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

@media (max-width: 1240px) {
    .container {
        padding: 0 24px;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 16px;
    }
}

/* ==========================================================================
   Single Property Page Styles - Ficha de Propiedad
   ========================================================================== */
.villasol-ficha-propiedad {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   Galería Moderna de Propiedad
   ========================================================================== */

.property-gallery-modern {
    margin-bottom: 30px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

.gallery-main {
    position: relative !important;
    width: 100% !important;
    height: 600px !important;
    background: #000 !important;
    overflow: hidden !important;
}

.gallery-slide {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease !important;
    pointer-events: none !important;
}

.gallery-slide.active {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.gallery-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    cursor: zoom-in !important;
}

/* Botones de navegación */
.gallery-nav {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 20 !important;
    width: 56px !important;
    height: 56px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

.gallery-nav:hover {
    background: #fff !important;
    transform: translateY(-50%) scale(1.1) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
}

.gallery-prev {
    left: 20px !important;
}

.gallery-next {
    right: 20px !important;
}

.gallery-nav i {
    font-size: 32px !important;
    color: #212529 !important;
    pointer-events: none !important;
}

/* Contador */
.gallery-counter {
    position: absolute !important;
    bottom: 20px !important;
    left: 20px !important;
    background: rgba(0, 0, 0, 0.75) !important;
    color: white !important;
    padding: 10px 16px !important;
    border-radius: 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    z-index: 20 !important;
}

.gallery-counter i {
    font-size: 20px !important;
}

/* Botón expandir */
.gallery-expand {
    position: absolute !important;
    bottom: 20px !important;
    right: 20px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    z-index: 20 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

.gallery-expand:hover {
    background: #fff !important;
    transform: scale(1.1) !important;
}

.gallery-expand i {
    font-size: 24px !important;
    color: #212529 !important;
}

/* Dots de navegación */
.gallery-dots {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 16px !important;
    background: #fff !important;
}

.gallery-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #CED4DA !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    padding: 0 !important;
}

.gallery-dot:hover {
    background: #ADB5BD !important;
    transform: scale(1.2) !important;
}

.gallery-dot.active {
    width: 32px !important;
    border-radius: 5px !important;
    background: #0099C2 !important;
}

/* ==========================================================================
   Lightbox
   ========================================================================== */

.villasol-lightbox {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.95) !important;
    z-index: 9999 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
}

.villasol-lightbox.active {
    display: flex !important;
}

.lightbox-close {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    width: 56px !important;
    height: 56px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    z-index: 10001 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: rotate(90deg) !important;
}

.lightbox-close i {
    font-size: 36px !important;
    color: white !important;
}

.lightbox-nav {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 64px !important;
    height: 64px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    z-index: 10001 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-50%) scale(1.1) !important;
}

.lightbox-prev {
    left: 40px !important;
}

.lightbox-next {
    right: 40px !important;
}

.lightbox-nav i {
    font-size: 40px !important;
    color: white !important;
}

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

.lightbox-slide {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.4s ease !important;
}

.lightbox-slide.active {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.lightbox-slide img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

.lightbox-counter {
    position: absolute !important;
    bottom: 40px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(0, 0, 0, 0.7) !important;
    color: white !important;
    padding: 12px 24px !important;
    border-radius: 24px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    z-index: 10001 !important;
}

/* Property Header */
.property-header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 30px;
    margin-bottom: 30px;
    padding: 30px;
    background: var(--villasol-bg);
    border-radius: var(--villasol-radius);
    box-shadow: var(--villasol-shadow);
    align-items: start;
}

.property-operation-badge {
    margin-bottom: 15px;
}

.operation-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-venta {
    background: rgba(1, 200, 239, 0.1);
    color: var(--villasol-primary);
}

.badge-alquiler {
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
}

.badge-reservado {
    background: rgba(243, 156, 18, 0.15);
    color: #f39c12;
    margin-left: 8px;
}

.badge-vendido {
    background: rgba(231, 76, 60, 0.15);
    color: #c0392b;
    margin-left: 8px;
}

.operation-badge i {
    font-size: 18px;
}

.property-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--villasol-text);
    margin: 0 0 12px 0;
    line-height: 1.2;
}

.property-state {
    color: var(--villasol-text-light);
    font-size: 28px;
    font-weight: 400;
}

.property-location {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--villasol-text-light);
    font-size: 18px;
    margin-bottom: 10px;
}

.property-location i {
    font-size: 22px;
    color: var(--villasol-primary);
}

.property-ref {
    font-size: 14px;
    color: var(--villasol-text-light);
    font-weight: 600;
}

.property-price-main {
    text-align: right;
}

.price-amount {
    font-size: 42px;
    font-weight: 700;
    color: var(--villasol-primary);
    line-height: 1;
}

.price-period {
    font-size: 24px;
    color: var(--villasol-text-light);
    font-weight: 400;
}

/* Property Features Main */
.property-features-main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.feature-box {
    background: var(--villasol-bg);
    padding: 24px;
    border-radius: var(--villasol-radius);
    box-shadow: var(--villasol-shadow);
    display: flex;
    align-items: center;
    gap: 16px;
    transition: var(--villasol-transition);
}

.feature-box:hover {
    transform: translateY(-4px);
    box-shadow: var(--villasol-shadow-hover);
}

.feature-box i {
    font-size: 36px;
    color: var(--villasol-primary);
}

.feature-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.feature-content strong {
    font-size: 24px;
    font-weight: 700;
    color: var(--villasol-text);
}

.feature-content span {
    font-size: 13px;
    color: var(--villasol-text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Property Description */
.property-description {
    background: var(--villasol-bg);
    padding: 30px;
    border-radius: var(--villasol-radius);
    box-shadow: var(--villasol-shadow);
    margin-bottom: 30px;
}

.property-description h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--villasol-text);
    margin: 0 0 20px 0;
}

.description-content {
    font-size: 16px;
    line-height: 1.8;
    color: var(--villasol-text);
}

/* Property Details */
.property-details {
    background: var(--villasol-bg);
    padding: 30px;
    border-radius: var(--villasol-radius);
    box-shadow: var(--villasol-shadow);
    margin-bottom: 30px;
}

.property-details > h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--villasol-text);
    margin: 0 0 30px 0;
}

.details-section {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 2px solid var(--villasol-border);
}

.details-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.details-section h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--villasol-text);
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.details-section h3 i {
    font-size: 24px;
    color: var(--villasol-primary);
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--villasol-bg-light);
    border-radius: var(--villasol-radius-sm);
}

.detail-label {
    font-size: 14px;
    color: var(--villasol-text-light);
    font-weight: 500;
}

.detail-value {
    font-size: 16px;
    color: var(--villasol-text);
    font-weight: 700;
}

.details-grid-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.badge-feature {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--villasol-bg-light);
    border-radius: 20px;
    font-size: 14px;
    color: var(--villasol-text);
    font-weight: 600;
    transition: var(--villasol-transition);
}

.badge-feature:hover {
    background: var(--villasol-primary);
    color: white;
    transform: translateY(-2px);
}

.badge-feature i {
    font-size: 18px;
}

.badge-feature.special {
    background: rgba(1, 200, 239, 0.1);
    color: var(--villasol-primary);
}

.badge-feature.special:hover {
    background: var(--villasol-primary);
    color: white;
}

/* Property Contact Actions */
.property-contact-action {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.property-contact-action.has-whatsapp {
    grid-template-columns: 1fr 1fr 1fr;
}

.btn-contact-large,
.btn-phone-large,
.btn-whatsapp-large {
    padding: 20px 32px;
    border-radius: var(--villasol-radius);
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-decoration: none;
    transition: var(--villasol-transition);
    box-shadow: var(--villasol-shadow);
}

.btn-contact-large {
    background: var(--villasol-primary);
    color: white;
}

.btn-contact-large:hover {
    background: var(--villasol-primary-dark);
    transform: translateY(-4px);
    box-shadow: var(--villasol-shadow-hover);
    color: white;
}

.btn-phone-large {
    background: white;
    color: var(--villasol-text);
    border: 2px solid var(--villasol-border);
}

.btn-phone-large:hover {
    border-color: var(--villasol-primary);
    color: var(--villasol-primary);
    transform: translateY(-4px);
    box-shadow: var(--villasol-shadow-hover);
}

.btn-whatsapp-large {
    background: #25D366;
    color: white;
    border: none;
}

.btn-whatsapp-large:hover {
    background: #128C7E;
    color: white;
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}

.btn-contact-large i,
.btn-phone-large i,
.btn-whatsapp-large i {
    font-size: 24px;
}

/* Responsive for contact buttons */
@media (max-width: 768px) {
    .property-contact-action.has-whatsapp {
        grid-template-columns: 1fr;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .slider-main {
        height: 300px;
    }

    .property-header {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .property-title {
        font-size: 24px;
    }

    .property-state {
        font-size: 20px;
    }

    .price-amount {
        font-size: 32px;
        text-align: left;
    }

    .property-price-main {
        text-align: left;
    }

    .property-features-main {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .feature-box {
        padding: 16px !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .feature-content strong {
        font-size: 20px !important;
    }

    .feature-content span {
        font-size: 12px !important;
        word-break: break-word !important;
    }

    .property-contact-action {
        grid-template-columns: 1fr;
    }

    .details-grid {
        grid-template-columns: 1fr;
    }

    /* Galería responsive */
    .gallery-main {
        height: 400px !important;
    }

    .gallery-nav {
        width: 44px !important;
        height: 44px !important;
    }

    .gallery-prev {
        left: 10px !important;
    }

    .gallery-next {
        right: 10px !important;
    }

    .gallery-nav i {
        font-size: 24px !important;
    }

    .gallery-expand {
        width: 40px !important;
        height: 40px !important;
    }

    .gallery-expand i {
        font-size: 20px !important;
    }

    .gallery-counter {
        font-size: 13px !important;
        padding: 8px 12px !important;
    }

    /* Lightbox responsive */
    .lightbox-nav {
        width: 48px !important;
        height: 48px !important;
    }

    .lightbox-prev {
        left: 10px !important;
    }

    .lightbox-next {
        right: 10px !important;
    }

    .lightbox-nav i {
        font-size: 28px !important;
    }

    .lightbox-close {
        top: 10px !important;
        right: 10px !important;
        width: 48px !important;
        height: 48px !important;
    }

    .lightbox-close i {
        font-size: 28px !important;
    }

    .lightbox-counter {
        bottom: 20px !important;
        font-size: 16px !important;
        padding: 10px 20px !important;
    }
}

/* ==========================================================================
   Contact Modal
   ========================================================================== */
.villasol-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.villasol-modal.active {
    display: flex;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1;
}

.modal-content {
    position: relative;
    z-index: 2;
    background: var(--villasol-bg);
    border-radius: var(--villasol-radius);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    background: var(--villasol-bg-light);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--villasol-transition);
    z-index: 10;
}

.modal-close:hover {
    background: var(--villasol-primary);
    color: white;
    transform: rotate(90deg);
}

.modal-close i {
    font-size: 24px;
}

.modal-header {
    padding: 30px 30px 20px;
    border-bottom: 2px solid var(--villasol-border);
}

.modal-header h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--villasol-text);
    margin: 0 0 8px 0;
}

.modal-property-ref {
    font-size: 14px;
    color: var(--villasol-text-light);
    margin: 0;
}

.modal-body {
    padding: 30px;
}

.villasol-contact-form .form-group {
    margin-bottom: 20px;
}

.villasol-contact-form label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--villasol-text);
    margin-bottom: 8px;
}

.villasol-contact-form input[type="text"],
.villasol-contact-form input[type="email"],
.villasol-contact-form input[type="tel"],
.villasol-contact-form textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--villasol-border);
    border-radius: var(--villasol-radius-sm);
    font-size: 15px;
    color: var(--villasol-text);
    transition: var(--villasol-transition);
}

.villasol-contact-form input:focus,
.villasol-contact-form textarea:focus {
    outline: none;
    border-color: var(--villasol-primary);
    box-shadow: 0 0 0 3px rgba(1, 200, 239, 0.1);
}

.villasol-contact-form textarea {
    resize: vertical;
    min-height: 100px;
}

.checkbox-group {
    display: flex;
    align-items: start;
}

.checkbox-group label {
    display: flex;
    align-items: start;
    gap: 10px;
    cursor: pointer;
    font-weight: normal;
}

.checkbox-group input[type="checkbox"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--villasol-primary);
}

.checkbox-group span {
    font-size: 13px;
    color: var(--villasol-text-light);
}

.checkbox-group a {
    color: var(--villasol-primary);
    text-decoration: underline;
}

.form-actions {
    margin-top: 25px;
}

.btn-submit {
    width: 100%;
    padding: 16px;
    background: var(--villasol-primary);
    color: white;
    border: none;
    border-radius: var(--villasol-radius-sm);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--villasol-transition);
    position: relative;
}

.btn-submit:hover:not(:disabled) {
    background: var(--villasol-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(1, 200, 239, 0.4);
}

.btn-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.form-message {
    margin-top: 20px;
    padding: 15px;
    border-radius: var(--villasol-radius-sm);
    font-size: 14px;
    text-align: center;
}

.form-message.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.form-message.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

@media (max-width: 768px) {
    .modal-content {
        max-height: 95vh;
    }

    .modal-header {
        padding: 20px 20px 15px;
    }

    .modal-body {
        padding: 20px;
    }

    .modal-close {
        top: 10px;
        right: 10px;
        width: 36px;
        height: 36px;
    }
}

/* ==========================================================================
   Social Share Buttons
   ========================================================================== */
.social-share-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 30px;
    background: var(--villasol-bg);
    border-radius: var(--villasol-radius);
    box-shadow: var(--villasol-shadow);
    margin-bottom: 30px;
}

.share-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--villasol-text);
    margin-right: 10px;
}

.share-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.share-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: var(--villasol-transition);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.share-btn i {
    font-size: 24px;
}

.share-whatsapp {
    background: #25D366;
    color: white;
}

.share-whatsapp:hover {
    background: #128C7E;
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
}

.share-facebook {
    background: #1877F2;
    color: white;
}

.share-facebook:hover {
    background: #145DBF;
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(24, 119, 242, 0.4);
}

.share-twitter {
    background: #1DA1F2;
    color: white;
}

.share-twitter:hover {
    background: #0C85D0;
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(29, 161, 242, 0.4);
}

.share-linkedin {
    background: #0077B5;
    color: white;
}

.share-linkedin:hover {
    background: #005E93;
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 119, 181, 0.4);
}

.share-email {
    background: #EA4335;
    color: white;
}

.share-email:hover {
    background: #C23321;
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(234, 67, 53, 0.4);
}

.share-copy {
    background: var(--villasol-text);
    color: white;
}

.share-copy:hover {
    background: var(--villasol-primary);
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(1, 200, 239, 0.4);
}

.share-copy.copied {
    background: #4CAF50;
}

/* Floating WhatsApp Button */
.social-share-floating {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
}

.share-float-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25D366;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
    transition: var(--villasol-transition);
    animation: pulse 2s infinite;
}

.share-float-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
}

.share-float-btn i {
    font-size: 32px;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
    }
    50% {
        box-shadow: 0 4px 20px rgba(37, 211, 102, 0.7);
    }
}

@media (max-width: 768px) {
    .social-share-buttons {
        flex-direction: column;
        text-align: center;
    }

    .share-label {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .social-share-floating {
        bottom: 20px;
        right: 20px;
    }

    .share-float-btn {
        width: 55px;
        height: 55px;
    }

    .share-float-btn i {
        font-size: 28px;
    }
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
/* Breadcrumbs - Con estilos forzados para sobrescribir tema */
.villasol-ficha-propiedad .villasol-breadcrumbs,
.villasol-breadcrumbs {
    margin-bottom: 20px !important;
    padding: 12px 0 !important;
    background: transparent !important;
}

.villasol-ficha-propiedad .breadcrumb-list,
.villasol-breadcrumbs .breadcrumb-list {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 8px !important;
}

.villasol-ficha-propiedad .breadcrumb-list li,
.villasol-breadcrumbs .breadcrumb-list li {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

.villasol-ficha-propiedad .breadcrumb-list a,
.villasol-breadcrumbs .breadcrumb-list a {
    color: #6C757D !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
    font-weight: 400 !important;
}

.villasol-ficha-propiedad .breadcrumb-list a:hover,
.villasol-breadcrumbs .breadcrumb-list a:hover {
    color: #0099C2 !important;
    text-decoration: none !important;
}

.villasol-ficha-propiedad .breadcrumb-current,
.villasol-breadcrumbs .breadcrumb-current {
    color: #212529 !important;
    font-weight: 600 !important;
}

.villasol-ficha-propiedad .breadcrumb-separator,
.villasol-breadcrumbs .breadcrumb-separator {
    color: #ADB5BD !important;
    display: flex !important;
    align-items: center !important;
}

.villasol-ficha-propiedad .breadcrumb-separator i,
.villasol-breadcrumbs .breadcrumb-separator i {
    font-size: 16px !important;
    line-height: 1 !important;
}

/* ==========================================================================
   Responsive Utilities
   ========================================================================== */
@media (max-width: 1024px) {
    .villasol-properties-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

@media (max-width: 768px) {
    .villasol-properties-section {
        padding: 40px 0;
    }

    .villasol-results-title {
        font-size: 22px;
    }

    .villasol-property-image {
        height: 220px;
    }

    .villasol-carousel-slide {
        height: 220px;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */
@media print {
    .villasol-hero,
    .villasol-search-section,
    .villasol-pagination {
        display: none;
    }

    .villasol-property-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid var(--villasol-border);
    }
}

/* ==========================================================================
   FIX: Forzar posicionamiento correcto de flechas del slider
   ========================================================================== */

/* Slick Carousel - Vista de Listado */
.villasol-property-carousel .slick-prev,
.villasol-property-carousel button.slick-prev,
button.villasol-slick-prev,
.villasol-property-image button.slick-prev {
    left: 12px !important;
    right: auto !important;
}

.villasol-property-carousel .slick-next,
.villasol-property-carousel button.slick-next,
button.villasol-slick-next,
.villasol-property-image button.slick-next {
    right: 12px !important;
    left: auto !important;
}

/* Slider Individual - Vista de Ficha */
.slider-main button.slider-nav.prev,
.slider-container button.slider-nav.prev,
.slider-main .slider-nav.prev,
.slider-container .slider-nav.prev,
button.slider-nav.prev {
    left: 20px !important;
    right: auto !important;
    position: absolute !important;
}

.slider-main button.slider-nav.next,
.slider-container button.slider-nav.next,
.slider-main .slider-nav.next,
.slider-container .slider-nav.next,
button.slider-nav.next {
    right: 20px !important;
    left: auto !important;
    position: absolute !important;
}

/* FIX: Puntos de paginación para muchas imágenes */
.villasol-property-carousel .slick-dots {
    max-width: 200px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

.villasol-property-carousel .slick-dots::-webkit-scrollbar {
    display: none !important;
}

.villasol-property-carousel .slick-dots li {
    flex-shrink: 0 !important;
    min-width: 8px !important;
}

/* ==========================================================================
   Estilos para Shortcodes (Grid de Propiedades)
   ========================================================================== */

/* Grid de propiedades del shortcode */
.villasol-grid {
    display: grid;
    gap: 32px;
    margin: 40px 0;
}

.villasol-grid-1 {
    grid-template-columns: 1fr;
}

.villasol-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.villasol-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.villasol-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Tarjeta de propiedad del shortcode */
.villasol-grid .villasol-property-card {
    background: var(--villasol-bg);
    border-radius: var(--villasol-radius);
    overflow: hidden;
    box-shadow: var(--villasol-shadow);
    transition: var(--villasol-transition);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.villasol-grid .villasol-property-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--villasol-shadow-hover);
}

/* Imagen de propiedad del shortcode */
.villasol-grid .property-image {
    position: relative;
    width: 100%;
    height: 260px;
    overflow: hidden;
    background: var(--villasol-bg-light);
}

.villasol-grid .property-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.villasol-grid .villasol-property-card:hover .property-image img {
    transform: scale(1.08);
}

.villasol-grid .no-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--villasol-bg-light);
    color: var(--villasol-text-light);
    font-size: 16px;
}

/* Badge destacado */
.villasol-grid .badge-destacado {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(1, 200, 239, 0.95);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
}

/* Badges de estado (Reservado/Vendido) */
.villasol-grid .card-badge-status {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
}

.villasol-grid .card-badge-status.badge-reservado {
    background: rgba(243, 156, 18, 0.95);
    color: white;
}

.villasol-grid .card-badge-status.badge-vendido {
    background: rgba(192, 57, 43, 0.95);
    color: white;
}

/* Overlay */
.villasol-grid .property-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--villasol-transition);
}

.villasol-grid .villasol-property-card:hover .property-overlay {
    opacity: 1;
}

.villasol-grid .btn-ver-mas {
    padding: 12px 24px;
    background: var(--villasol-primary);
    color: white;
    text-decoration: none;
    border-radius: var(--villasol-radius-sm);
    font-weight: 600;
    transition: var(--villasol-transition);
}

.villasol-grid .btn-ver-mas:hover {
    background: var(--villasol-primary-dark);
    transform: scale(1.05);
}

/* Contenido de propiedad */
.villasol-grid .property-content {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.villasol-grid .property-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.villasol-grid .property-title a {
    color: var(--villasol-text);
    text-decoration: none;
    transition: var(--villasol-transition);
}

.villasol-grid .property-title a:hover {
    color: var(--villasol-primary);
}

.villasol-grid .property-location {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--villasol-text-light);
    font-size: 14px;
    margin-bottom: 16px;
}

.villasol-grid .property-location i {
    font-size: 16px;
    color: var(--villasol-primary);
}

/* Características */
.villasol-grid .property-features {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.villasol-grid .property-features .feature {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--villasol-text);
}

.villasol-grid .property-features .feature i {
    font-size: 18px;
    color: var(--villasol-text-light);
}

/* Footer de propiedad */
.villasol-grid .property-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid var(--villasol-border);
    margin-top: auto;
}

.villasol-grid .property-price {
    font-size: 24px;
    font-weight: 700;
    color: var(--villasol-primary);
}

.villasol-grid .property-price .precio-tipo {
    font-size: 16px;
    font-weight: 400;
    color: var(--villasol-text-light);
}

.villasol-grid .property-ref {
    font-size: 13px;
    color: var(--villasol-text-light);
    font-weight: 500;
}

/* ==========================================================================
   Property Card Badges (Grid y Archive)
   ========================================================================== */
.property-card .card-badge {
    position: absolute;
    top: 12px;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
}

.property-card .card-badge:not(.card-badge-status) {
    left: 12px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--villasol-text);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.property-card .card-badge.badge-alquiler:not(.card-badge-status) {
    background: rgba(231, 76, 60, 0.95);
    color: white;
}

.property-card .card-badge.badge-venta:not(.card-badge-status) {
    background: rgba(1, 200, 239, 0.95);
    color: white;
}

.property-card .card-badge-status {
    right: 12px;
    left: auto;
}

.property-card .card-badge-status.badge-reservado {
    background: rgba(243, 156, 18, 0.95);
    color: white;
}

.property-card .card-badge-status.badge-vendido {
    background: rgba(192, 57, 43, 0.95);
    color: white;
}

.property-card .card-ref {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    z-index: 2;
}

/* Responsive para shortcode grid */
@media (max-width: 1024px) {
    .villasol-grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .villasol-grid-2,
    .villasol-grid-3,
    .villasol-grid-4 {
        grid-template-columns: 1fr;
    }

    .villasol-grid {
        gap: 24px;
    }

    .villasol-grid .property-image {
        height: 220px;
    }
}

/* ==========================================================================
   Estilos para Shortcode Buscador - Soft UI Compacto
   Colores Corporativos: Principal #FBBA20, Secundario #0099C2
   ========================================================================== */

:root {
    --villasol-gold: #FBBA20;
    --villasol-gold-light: #FDD45E;
    --villasol-gold-dark: #E5A616;
    --villasol-cyan: #0099C2;
    --villasol-cyan-light: #00B8E6;
    --villasol-cyan-dark: #007A9A;
}

/* Contenedor del buscador - Más compacto */
.villasol-buscador {
    background: #FFFFFF !important;
    padding: 28px 32px !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    margin: 40px 0 !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* Reset de variables del tema para el buscador */
.villasol-buscador,
.villasol-buscador * {
    --wd-form-brd-radius: 10px;
    --wd-form-height: auto;
    --wd-brd-radius: 10px;
}

/* Reset de variables del tema para la ficha de propiedad */
.villasol-ficha-propiedad,
.villasol-ficha-propiedad * {
    --wd-col-lg: initial !important;
    --wd-gap-lg: initial !important;
    --wd-gap-sm: initial !important;
    --wd-form-brd-radius: initial !important;
    --wd-form-height: initial !important;
    --wd-brd-radius: initial !important;
}

/* Formulario */
.villasol-search-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Tabs de operación - Estilo compacto */
.villasol-buscador .operacion-tabs,
.villasol-search-form .operacion-tabs {
    margin-bottom: 0 !important;
}

.villasol-buscador .tab-buttons,
.villasol-search-form .tab-buttons {
    display: flex !important;
    gap: 8px !important;
    background: #F8F9FA !important;
    padding: 4px !important;
    border-radius: 10px !important;
}

.villasol-buscador .tab-btn,
.villasol-search-form .tab-btn {
    flex: 1 !important;
    padding: 12px 20px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #6C757D !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    height: auto !important;
}

.villasol-buscador .tab-btn:hover,
.villasol-search-form .tab-btn:hover {
    color: #E5A616 !important;
    background: rgba(251, 186, 32, 0.1) !important;
}

.villasol-buscador .tab-btn.active,
.villasol-search-form .tab-btn.active {
    background: linear-gradient(135deg, #FBBA20 0%, #FDD45E 100%) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(251, 186, 32, 0.3) !important;
}

/* Filas de formulario */
.villasol-buscador .form-row,
.villasol-search-form .form-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 16px !important;
}

/* Grupos de formulario */
.villasol-buscador .form-group,
.villasol-search-form .form-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.villasol-buscador .form-group label,
.villasol-search-form .form-group label,
.villasol-search-form label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #495057 !important;
    margin-left: 2px !important;
    margin-bottom: 0 !important;
}

/* Inputs y selects - Estilo limpio con !important para sobrescribir tema */
.villasol-buscador .form-control,
.villasol-buscador input.form-control,
.villasol-buscador select.form-control,
.villasol-search-form .form-control,
.villasol-search-form input[type="text"],
.villasol-search-form input[type="number"],
.villasol-search-form select {
    width: 100% !important;
    padding: 12px 16px !important;
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    border: 1.5px solid #E9ECEF !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    color: #212529 !important;
    transition: all 0.2s ease !important;
    outline: none !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: 44px !important;
}

.villasol-buscador .form-control:hover,
.villasol-search-form .form-control:hover,
.villasol-search-form input:hover,
.villasol-search-form select:hover {
    border-color: #CED4DA !important;
    background: #FFFFFF !important;
}

.villasol-buscador .form-control:focus,
.villasol-search-form .form-control:focus,
.villasol-search-form input:focus,
.villasol-search-form select:focus {
    border-color: #0099C2 !important;
    box-shadow: 0 0 0 3px rgba(0, 153, 194, 0.1) !important;
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
}

.villasol-buscador .form-control::placeholder,
.villasol-search-form input::placeholder {
    color: #ADB5BD !important;
}

/* Select con flecha personalizada */
.villasol-buscador select.form-control,
.villasol-search-form select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%236C757D' d='M7 10L2 5h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 40px !important;
    cursor: pointer !important;
    color: #212529 !important;
}

.villasol-buscador select.form-control option,
.villasol-search-form select option {
    color: #212529 !important;
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    padding: 8px !important;
}

/* Botón toggle filtros avanzados */
.villasol-buscador .btn-toggle-advanced,
.villasol-search-form .btn-toggle-advanced {
    background: transparent !important;
    border: 1.5px solid #0099C2 !important;
    padding: 10px 20px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0099C2 !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    align-self: flex-start !important;
    height: auto !important;
}

.villasol-buscador .btn-toggle-advanced:hover,
.villasol-search-form .btn-toggle-advanced:hover {
    background: rgba(0, 153, 194, 0.05) !important;
    border-color: #007A9A !important;
    color: #007A9A !important;
}

.villasol-buscador .btn-toggle-advanced:active,
.villasol-search-form .btn-toggle-advanced:active {
    background: rgba(0, 153, 194, 0.1) !important;
}

/* Filtros avanzados */
.villasol-buscador .form-advanced,
.villasol-search-form .form-advanced {
    display: none !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 20px !important;
    background: #F8F9FA !important;
    border-radius: 12px !important;
    border: 1px solid #E9ECEF !important;
}

.villasol-buscador .form-advanced.show,
.villasol-search-form .form-advanced.show {
    display: flex !important;
}

/* Checkboxes - Estilo limpio */
.villasol-buscador .form-checkboxes,
.villasol-search-form .form-checkboxes {
    display: flex !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}

.villasol-buscador .form-checkboxes label,
.villasol-search-form .form-checkboxes label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    padding: 10px 16px !important;
    background: #FFFFFF !important;
    border: 1.5px solid #E9ECEF !important;
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    font-size: 14px !important;
    color: #495057 !important;
    font-weight: 500 !important;
    margin: 0 !important;
}

.villasol-buscador .form-checkboxes label:hover,
.villasol-search-form .form-checkboxes label:hover {
    border-color: #0099C2 !important;
    background: rgba(0, 153, 194, 0.02) !important;
}

.villasol-buscador .form-checkboxes input[type="checkbox"],
.villasol-search-form .form-checkboxes input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
    accent-color: #0099C2 !important;
    margin: 0 !important;
}

.villasol-buscador .form-checkboxes input[type="checkbox"]:checked + span,
.villasol-search-form .form-checkboxes input[type="checkbox"]:checked + span {
    color: #0099C2 !important;
    font-weight: 600 !important;
}

.villasol-buscador .form-checkboxes span,
.villasol-search-form .form-checkboxes span {
    font-size: 14px !important;
    color: #495057 !important;
    font-weight: 500 !important;
}

/* Botón de búsqueda - Gradient limpio */
.villasol-buscador .form-actions,
.villasol-search-form .form-actions {
    margin-top: 4px !important;
}

.villasol-buscador .btn-search,
.villasol-search-form .btn-search,
.villasol-search-form button[type="submit"] {
    width: 100% !important;
    padding: 14px 28px !important;
    background: linear-gradient(135deg, #0099C2 0%, #00B8E6 100%) !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: white !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 12px rgba(0, 153, 194, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    height: auto !important;
    min-height: 50px !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 10 !important;
}

.villasol-buscador .btn-search:hover,
.villasol-search-form .btn-search:hover,
.villasol-search-form button[type="submit"]:hover {
    background: linear-gradient(135deg, #007A9A 0%, #0099C2 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 153, 194, 0.35) !important;
}

.villasol-buscador .btn-search:active,
.villasol-search-form .btn-search:active,
.villasol-search-form button[type="submit"]:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(0, 153, 194, 0.3) !important;
}

.villasol-buscador .btn-search:focus,
.villasol-search-form .btn-search:focus,
.villasol-search-form button[type="submit"]:focus {
    outline: 2px solid #0099C2 !important;
    outline-offset: 2px !important;
}

.villasol-buscador .btn-search i,
.villasol-search-form .btn-search i {
    font-size: 20px !important;
    pointer-events: none !important;
}

/* Responsive para buscador */
@media (max-width: 768px) {
    .villasol-buscador {
        padding: 20px 16px;
        border-radius: 12px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .tab-buttons {
        flex-direction: column;
        gap: 6px;
    }

    .form-checkboxes {
        flex-direction: column;
        gap: 10px;
    }

    .form-checkboxes label {
        width: 100%;
    }
}