/**
 * Rezideo catalog: card grid + filter panel.
 * Visual language follows the MIB card design (green palette), but every
 * selector is rezideo-namespaced so it cannot collide with the MIB CSS that
 * is also active on the dev site. Palette via custom properties.
 */
.rezideo-catalog {
    --rzc-primary: #0b5952;
    --rzc-secondary: #0d635b;
    --rzc-accent: #9bc837;
    --rzc-text-light: #ffffff;
    --rzc-muted: #b7cfcc;
    position: relative;
}

/*
 * MIB-compatible mode (card_style="mib"): the cards take their look from the
 * host page's own CSS, so the filter UI follows the host palette too. Site
 * CSS can override these custom properties.
 */
.rezideo-catalog--mib {
    --rzc-primary: #4e413c;
    --rzc-secondary: #4e413c;
    --rzc-accent: #4e413c;
    --rzc-chip-text: #4e413c;
    --rzc-chip-bg-active: #4e413c;
    --rzc-chip-text-active: #fef8ee;
}

.rezideo-catalog.is-loading { opacity: .6; pointer-events: none; }

.rezideo-catalog__spinner { display: none; }

/* --- Filter panel --- */
.rezideo-catalog__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: 16px 24px;
    margin-bottom: 24px;
}

.rezideo-catalog__project {
    min-width: 220px;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
}

.rezideo-catalog__types {
    border: 0;
    padding: 0;
    margin: 0;
}
.rezideo-catalog__types legend {
    font-size: 13px;
    font-weight: 600;
    padding: 0;
    margin-bottom: 10px;
}
.rezideo-catalog__type-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
}
.rezideo-catalog__type { cursor: pointer; }
/* The real checkbox stays in the DOM for the JS but is visually hidden */
.rezideo-catalog__type input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.rezideo-catalog__type span {
    display: inline-flex;
    align-items: center;
    padding: 7px 18px;
    border: 1.5px solid var(--rzc-primary, #0b5952);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--rzc-chip-text, var(--rzc-primary, #0b5952));
    background: transparent;
    white-space: nowrap;
    user-select: none;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.rezideo-catalog__type:hover span { box-shadow: 0 1px 6px rgba(0, 0, 0, .18); }
.rezideo-catalog__type input:checked + span {
    background: var(--rzc-chip-bg-active, var(--rzc-primary, #0b5952));
    color: var(--rzc-chip-text-active, #fff);
}
.rezideo-catalog__type input:focus-visible + span {
    outline: 2px solid var(--rzc-primary, #0b5952);
    outline-offset: 2px;
}

.rezideo-catalog__slider-box { min-width: 210px; flex: 0 1 240px; }
.rezideo-catalog__slider-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 10px;
}
.rezideo-catalog-slider { margin: 8px 6px 6px; height: 6px; }
.rezideo-catalog-slider .noUi-connect { background: var(--rzc-primary, #0b5952); }
.rezideo-catalog-slider .noUi-handle {
    width: 18px;
    height: 18px;
    right: -9px;
    top: -7px;
    border-radius: 50%;
    background: var(--rzc-primary, #0b5952);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
    cursor: pointer;
}
.rezideo-catalog-slider .noUi-handle::before,
.rezideo-catalog-slider .noUi-handle::after { display: none; }
.rezideo-catalog__slider-value { font-size: 13px; margin: 6px 0 0; }

.rezideo-catalog__reset {
    padding: 8px 16px;
    border: 1px solid #999;
    border-radius: 20px;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
}
.rezideo-catalog__reset:hover { background: #f1f1f1; }

/* --- Toolbar: count and sort on their own rows --- */
.rezideo-catalog__toolbar { margin-bottom: 18px; }
.rezideo-catalog__count { margin: 0 0 10px; font-size: 14px; }
.rezideo-catalog__sort { display: flex; align-items: center; }
.rezideo-catalog__sort label { margin-right: 8px; font-size: 14px; }
.rezideo-catalog__sort select { padding: 6px 10px; border-radius: 6px; border: 1px solid #ccc; }

/* --- Card grid --- */
.rezideo-catalog__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 980px) { .rezideo-catalog__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .rezideo-catalog__grid { grid-template-columns: 1fr; } }

.rezideo-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    background: var(--rzc-secondary, #0d635b);
}

.rezideo-card__image {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--rzc-primary, #0b5952);
}
.rezideo-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.rezideo-card__placeholder {
    width: 100%;
    height: 100%;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .08) 25%, transparent 25%, transparent 50%,
            rgba(255, 255, 255, .08) 50%, rgba(255, 255, 255, .08) 75%, transparent 75%);
    background-size: 24px 24px;
}
.rezideo-card__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 56px;
    height: auto;
}

.rezideo-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 18px;
    color: var(--rzc-text-light, #fff);
}
.rezideo-card__body hr { border: 0; border-top: 1px solid rgba(255, 255, 255, .25); margin: 12px 0; }

.rezideo-card__head { display: flex; justify-content: space-between; gap: 10px; }
.rezideo-card__project { font-weight: 600; font-size: 15px; }
.rezideo-card__id-block { text-align: right; }
.rezideo-card__status { display: block; font-size: 12px; }
.rezideo-card__status.is-available { color: var(--rzc-accent, #9bc837); }
.rezideo-card__status.is-unavailable { color: var(--rzc-muted, #b7cfcc); }
.rezideo-card__name { font-size: 18px; }

.rezideo-card__facts { display: flex; justify-content: space-between; gap: 8px; }
.rezideo-card__facts small { display: block; color: var(--rzc-muted, #b7cfcc); font-size: 12px; }
.rezideo-card__facts strong { font-size: 18px; }
.rezideo-card__facts div:last-child { text-align: right; }

.rezideo-card__price { margin-bottom: 14px; }
.rezideo-card__price-value { font-size: 22px; color: var(--rzc-accent, #9bc837); }

.rezideo-card__cta {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 24px;
    background: #fff;
    color: var(--rzc-primary, #0b5952);
    text-decoration: none;
    font-weight: 600;
    transition: opacity .15s ease;
}
.rezideo-card__cta:hover { opacity: .85; color: var(--rzc-primary, #0b5952); }

.rezideo-catalog__empty { grid-column: 1 / -1; }

/* --- Pager --- */
.rezideo-catalog__pager { margin-top: 28px; }
.rezideo-catalog__pager .pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}
.rezideo-catalog__pager .page-link {
    display: block;
    padding: 8px 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    user-select: none;
}
.rezideo-catalog__pager .page-item.active .page-link {
    background: var(--rzc-primary, #0b5952);
    border-color: var(--rzc-primary, #0b5952);
    color: #fff;
    cursor: default;
}
.rezideo-catalog__pager .page-item.disabled .page-link { opacity: .45; cursor: default; }

/* --- Detail page --- */
.rezideo-detail__back { display: inline-block; margin-bottom: 18px; text-decoration: none; font-weight: 600; }
.rezideo-detail__layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; margin-bottom: 40px; }
@media (max-width: 900px) { .rezideo-detail__layout { grid-template-columns: 1fr; } }

.rezideo-detail__main-image { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; background: #eee; }
.rezideo-detail__main-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rezideo-detail__thumbs { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.rezideo-detail__thumb { padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; cursor: pointer; background: none; width: 90px; height: 68px; }
.rezideo-detail__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rezideo-detail__thumb:hover { border-color: #0b5952; }

.rezideo-detail__title { margin: 4px 0 2px; }
.rezideo-detail__project { font-weight: 600; margin-bottom: 2px; }
.rezideo-detail__address { font-weight: 400; color: #666; margin-left: 8px; font-size: 14px; }
.rezideo-detail__price { font-size: 28px; font-weight: 700; color: #0b5952; margin: 12px 0 18px; }

.rezideo-detail__facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 24px; margin: 0 0 18px; }
.rezideo-detail__facts > div { display: flex; justify-content: space-between; border-bottom: 1px solid #e4e4e4; padding: 6px 0; }
.rezideo-detail__facts dt { color: #666; font-size: 14px; }
.rezideo-detail__facts dd { margin: 0; font-weight: 600; font-size: 14px; }
@media (max-width: 640px) { .rezideo-detail__facts { grid-template-columns: 1fr; } }

.rezideo-detail__blueprint { display: inline-block; margin: 0 12px 12px 0; padding: 9px 18px; border: 1px solid #0b5952; border-radius: 20px; color: #0b5952; text-decoration: none; font-weight: 600; font-size: 14px; }
.rezideo-detail__blueprint:hover { background: #0b5952; color: #fff; }

.rezideo-detail__rooms { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 14px; }
.rezideo-detail__rooms th, .rezideo-detail__rooms td { text-align: left; padding: 6px 10px; border-bottom: 1px solid #e4e4e4; }

.rezideo-detail__recommended { margin: 30px 0 40px; }
.rezideo-detail__recommended h2 { margin-bottom: 18px; }
.rezideo-detail__contact { margin-top: 30px; }

.rezideo-detail__rooms-title { margin: 22px 0 6px; font-size: 17px; }