/*
 * Ajustes públicos generados desde el dashboard.
 * Los valores concretos se inyectan como variables CSS en el layout app.php.
 */

html {
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
}

body {
    background-color: var(--homdly-background, #f8f5f1);
    font-family: var(--homdly-body-font, "Inter", sans-serif);
}

h1,
h2,
h3,
h4,
h5,
h6,
.section-title,
.stats-title {
    font-family: var(--homdly-title-font, "Inter", sans-serif);
}

.home-configurable-sections {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.homdly-topbar,
.homdly-header,
.homdly-footer {
    --primary: var(--homdly-primary);
    --secondary: var(--homdly-secondary);
}

.homdly-page-home .home-featured-card__badge,
.homdly-page-home .home-featured-card__footer a,
.home-featured-clean__btn,
.property-popup__detail,
.home-hero-search__submit,
.settings-accent-button {
    background: var(--homdly-primary) !important;
    border-color: var(--homdly-primary) !important;
}

.homdly-page-home .home-featured-card__business,
.homdly-page-home .home-featured-carousel__btn,
.homdly-theme-toggle,
.home-hero-search__tab.is-active {
    background: var(--homdly-secondary) !important;
    border-color: var(--homdly-secondary) !important;
}

/* Flechas visibles del carrusel de propiedades destacadas */
.homdly-page-home .home-featured-carousel__btn {
    color: #ffffff !important;
}

.homdly-page-home .home-featured-carousel__btn i {
    color: #ffffff !important;
    font-size: 18px;
}

.homdly-page-home .home-featured-card__location i,
.homdly-page-home .home-featured-card__footer strong,
.property-popup__price {
    color: var(--homdly-secondary) !important;
}

.homdly-page-home .home-featured-carousel[data-columns="1"] .home-featured-card {
    flex-basis: 100% !important;
}

.homdly-page-home .home-featured-carousel[data-columns="2"] .home-featured-card {
    flex-basis: calc((100% - 24px) / 2) !important;
}

.homdly-page-home .home-featured-carousel[data-columns="3"] .home-featured-card {
    flex-basis: calc((100% - 48px) / 3) !important;
}

.homdly-page-home .home-featured-carousel[data-columns="4"] .home-featured-card {
    flex-basis: calc((100% - 72px) / 4) !important;
}

@media (max-width: 992px) {
    .homdly-page-home .home-featured-carousel[data-columns="2"] .home-featured-card,
    .homdly-page-home .home-featured-carousel[data-columns="3"] .home-featured-card,
    .homdly-page-home .home-featured-carousel[data-columns="4"] .home-featured-card {
        flex-basis: 100% !important;
    }
}

@media (max-width: 640px) {
    .homdly-page-home .home-featured-carousel .home-featured-card {
        flex-basis: 100% !important;
    }
}

html[data-theme="dark"] body {
    background: #10151d;
    color: #e7edf5;
}

html[data-theme="dark"] .homdly-header,
html[data-theme="dark"] .homdly-footer,
html[data-theme="dark"] .home-featured-clean,
html[data-theme="dark"] .stats-section,
html[data-theme="dark"] .services-section,
html[data-theme="dark"] .property-list-page,
html[data-theme="dark"] .property-detail-page,
html[data-theme="dark"] .contact-page,
html[data-theme="dark"] .support-page {
    background-color: #10151d !important;
    color: #e7edf5;
}

html[data-theme="dark"] .home-featured-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .comp-card,
html[data-theme="dark"] .property-card,
html[data-theme="dark"] .property-popup,
html[data-theme="dark"] .modal-box {
    background-color: #19212c !important;
    border-color: #2a3543 !important;
    color: #e7edf5 !important;
}

html[data-theme="dark"] .home-featured-card h3,
html[data-theme="dark"] .home-featured-card__code,
html[data-theme="dark"] .home-featured-card__location,
html[data-theme="dark"] .home-featured-card__stats,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .stats-title,
html[data-theme="dark"] .card__title,
html[data-theme="dark"] .card__desc,
html[data-theme="dark"] .comp-card__body,
html[data-theme="dark"] .property-popup__content,
html[data-theme="dark"] .property-popup__content h3,
html[data-theme="dark"] .property-popup__location {
    color: #e7edf5 !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background-color: #111923;
    border-color: #344252;
    color: #f4f7fb;
}

html[data-theme="dark"] a:not(.btn):not([class*="button"]) {
    text-decoration-color: currentColor;
}

button.homdly-scrolltop {
    border: 0;
    padding: 0;
    cursor: pointer;
}

.property-popup-overlay[hidden] {
    display: none !important;
}

.homdly-theme-toggle {
    display: none !important;
}

/* =========================================================
   BOTÓN CERRAR POPUP DE PROPIEDAD
   ========================================================= */
.property-popup__close {
    width: 40px;
    height: 40px;
    border: none !important;
    border-radius: 12px;

    background: #0b4c63 !important;
    color: #ffffff !important;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 24px;
    line-height: 1;
    font-weight: 400;

    cursor: pointer;

    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.property-popup__close:hover {
    background: #f7a915 !important;
    color: #0b4c63 !important;

    transform: scale(1.06);

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

.property-popup__close:focus {
    outline: none;
}

.property-popup__close:focus-visible {
    box-shadow:
        0 0 0 3px rgba(247, 169, 21, 0.35),
        0 6px 16px rgba(0, 0, 0, 0.18);
}

/* Botón volver al inicio */
.homdly-scrolltop {
    position: fixed !important;
    right: 100px !important;
    left: auto !important;
    bottom: 24px !important;

    width: 48px !important;
    height: 48px !important;

    border-radius: 50% !important;
    font-size: 22px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    z-index: 9999 !important;
}

.homdly-scrolltop i {
    font-size: 22px !important;
}

/* =========================================================
   RESPONSIVE - PRECIO + BOTÓN VER DETALLE
   HOME PROPIEDADES DESTACADAS
   ========================================================= */

/* Tablet y móvil */
@media (max-width: 991px) {

    .home-featured-card__footer {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 8px !important;

        width: 100% !important;
        min-width: 0 !important;
    }

    .home-featured-card__footer strong {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        font-size: 14px !important;
        line-height: 1.2 !important;

        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .home-featured-card__footer > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 10px 8px !important;

        box-sizing: border-box !important;

        white-space: nowrap !important;
    }
}

/* =========================================================
   DESTACADOS RESPONSIVE
   1 PROPIEDAD POR VISTA EN TABLET Y MÓVIL
   ========================================================= */

@media (max-width: 991px) {

    .home-featured-carousel {
        width: 100% !important;
        overflow: hidden !important;
    }

    .home-featured-carousel__viewport {
        width: 100% !important;
        overflow: hidden !important;
    }

    .home-featured-carousel__track {
        display: flex !important;
        width: 100% !important;
        gap: 0 !important;
    }

    .home-featured-card {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        border-radius: 18px !important;
    }

    .home-featured-card__image {
        height: 240px !important;
    }

    .home-featured-card__content {
        padding: 16px !important;
    }

    .home-featured-card__title {
        font-size: 18px !important;
        line-height: 1.3 !important;
    }

    /* =========================================================
   HOMDLY - DESTACADOS RESPONSIVE DEFINITIVO
   1 ANUNCIO POR VISTA EN MÓVIL Y TABLET
   ========================================================= */

@media (max-width: 991px) {

    /* Ventana del carrusel */
    .home-featured-carousel,
    .home-featured-carousel__viewport {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* Carril */
    .home-featured-carousel__track {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        width: 100% !important;
    }

    /* IMPORTANTE:
       fuerza cualquier elemento hijo del carril
       a ocupar una vista completa */
    .home-featured-carousel__track > * {
        flex: 0 0 100% !important;
        min-width: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Tarjeta */
    .home-featured-card {
        width: calc(100% - 32px) !important;
        max-width: none !important;
        margin: 0 16px !important;
        box-sizing: border-box !important;
    }

    /* Imagen más proporcionada */
    .home-featured-card__image {
        width: 100% !important;
        height: 220px !important;
        object-fit: cover !important;
    }

    /* Contenido */
    .home-featured-card__content {
        width: 100% !important;
        padding: 14px 16px !important;
        box-sizing: border-box !important;
    }

    /* Título */
    .home-featured-card__title {
        font-size: 17px !important;
        line-height: 1.25 !important;
    }

    /* Precio + botón:
       SEPARADOS para que nunca se monten */
    .home-featured-card__footer {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;

        width: 100% !important;
        gap: 10px !important;
    }

    /* Precio */
    .home-featured-card__footer strong {
        display: block !important;
        width: 100% !important;

        margin: 0 !important;

        font-size: 16px !important;
        line-height: 1.2 !important;

        white-space: normal !important;
        overflow: visible !important;
        text-overflow: initial !important;
    }

    /* Botón Ver detalle */
    .home-featured-card__footer > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 11px 15px !important;

        box-sizing: border-box !important;
        white-space: nowrap !important;
    }

    /* Flechas del carrusel */
    .home-featured-carousel__btn {
        width: 42px !important;
        height: 42px !important;
        z-index: 30 !important;
    }
}

/* Ocultar formulario de contacto en detalle de propiedad */
.contact-form-section {
    display: none !important;
}

/* =========================================================
   MAPA - DETALLE DE PROPIEDAD
   Mantenerlo en la columna derecha
   ========================================================= */

@media (min-width: 992px) {

    .detail-map-card {
        grid-column: 2 !important;
        align-self: start !important;
        width: 100% !important;
    }

    .detail-map-card iframe {
        width: 100% !important;
        min-height: 360px !important;
        border: 0 !important;
        border-radius: 14px !important;
    }
}

/* =========================================================
   FILTROS DE PROPIEDADES - SCROLL MÓVIL / TABLET
   ========================================================= */

@media (max-width: 991px) {

    #propertyFilterSidebar {
        height: 100dvh !important;
        max-height: 100dvh !important;

        overflow: hidden !important;

        display: flex !important;
        flex-direction: column !important;
    }

    #propertyFilterForm {
        flex: 1 1 auto !important;

        height: 100% !important;
        max-height: 100dvh !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;

        padding-bottom: 100px !important;
    }
}

@media (max-width: 991px) {

    #propertyFilterForm .filter-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 20 !important;

        background: #ffffff !important;
    }
}