/*
Theme Name: Houzez Child
Theme URI: http://www.favethemes.com/
Author: Favethemes
Author URI: http://www.favethemes.com/
Description: Houzez is a premium WordPress theme for real estate agents where modern aesthetics are combined with tasteful simplicity, and where the ease of use is achieved without compromise in your ability to customise the design. Whether you are a real estate agent looking to build a website for your company or a web developer seeking a perfect WordPress theme for your next project, you are certain to appreciate the numerous features and benefits that our theme provides.
Version: 1.0
Tags: white, right-sidebar, left-sidebar, custom-colors, custom-menu, featured-images, post-formats, theme-options, translation-ready
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: houzez
Template: houzez
*/


/* Parent theme styles are loaded via functions.php (wp_enqueue_scripts) */

/* Floating nav: center content, keep back-to-top pinned left */
.property-navigation-wrap .property-navigation {
    justify-content: center !important;
    position: relative;
}
.property-navigation-wrap .property-navigation > li:first-child {
    position: absolute;
    left: 0;
}

/* Floating nav: group the 6 buttons tightly */
.property-navigation-wrap .mn-property-nav {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

/* Floating nav: mn-nav-btn same style as top title area size buttons */
.property-navigation-wrap .mn-nav-btn {
    display: inline-block;
    background: #fff !important;
    border: 1.5px solid #c0cad4 !important;
    color: #333 !important;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 6px;
    text-decoration: none !important;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    line-height: 1.4;
}
.property-navigation-wrap .mn-nav-btn:hover,
.property-navigation-wrap .mn-nav-btn.mn-nav-active {
    background: #651223 !important;
    border-color: #651223 !important;
    color: #fff !important;
    opacity: 1;
    outline: none;
}

/* Property title section: center title, description and nav buttons */
.page-title-wrap .property-header-wrap {
    justify-content: center !important;
}
.page-title-wrap .property-title-wrap {
    align-items: center;
    text-align: center;
}
.page-title-wrap .mn-property-nav {
    justify-content: center;
}

/* Property detail page: navigation buttons — styled like "Sizes available" size buttons */
.page-title-wrap .mn-nav-btn {
    display: inline-block;
    background: #fff !important;
    border: 1.5px solid #c0cad4 !important;
    color: #333 !important;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 6px;
    text-decoration: none !important;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    line-height: 1.4;
}
.page-title-wrap .mn-nav-btn:hover,
.page-title-wrap .mn-nav-btn.mn-nav-active {
    background: #651223 !important;
    border-color: #651223 !important;
    color: #fff !important;
    opacity: 1;
    outline: none;
}

/* Facade gallery section — mirrors .property-detail-v3/v4 .top-gallery-section
   (site uses v1 so those selectors don't apply here) */
#mn-facade-section {
    position: relative;
    aspect-ratio: 4/3;   /* holds height while slider loads */
    overflow: hidden;
    width: 100%;
}
/* Once lightSlider fires onSliderLoad it adds .slider-loaded; release fixed ratio */
#mn-facade-section.slider-loaded {
    aspect-ratio: auto;
    overflow: visible;
}
/* Each slide must have defined height so lightSlider can measure it */
#mn-facade-section .lslide {
    aspect-ratio: 4/3;
    overflow: hidden;
}
#mn-facade-section .lslide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Thumbnail strip images */
#mn-facade-section .lSGallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Placeholder fade-out (parent .gallery-featured-placeholder already has position/size) */
#mn-facade-placeholder {
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* Property detail page: full width, hide sidebar and price */
.single-property .bt-sidebar-wrap { display: none !important; }
.single-property .bt-content-wrap {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}
.single-property .property-price-wrap { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   Floor Plan Viewer  —  mn-fp-* components
   ═══════════════════════════════════════════════════════════ */

#mn-section-floorplan { padding: 48px 0; }

/* ── Title row ── */
.mn-fp-title-row { gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.mn-fp-heading { font-size: 22px; font-weight: 700; margin: 0; }

/* ── Size tabs ── */
.mn-fp-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.mn-fp-tab {
    background: #fff;
    border: 1.5px solid #c0cad4;
    color: #333;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.mn-fp-tab.active,
.mn-fp-tab:hover {
    background: #651223;
    border-color: #651223;
    color: #fff;
}

/* ── Brochure button ── */
.mn-fp-brochure-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    border: 1.5px solid #c0cad4;
    border-radius: 6px;
    padding: 6px 14px;
    text-decoration: none;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.mn-fp-brochure-btn:hover { background: #f5f5f5; }
.mn-hidden { display: none !important; }

/* ── Panels (one per size) ── */
.mn-fp-panel { display: none; }
.mn-fp-panel.active { display: block; }

/* ── Stats bar ── */
.mn-fp-stats {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 28px;
}
.mn-fp-stat {
    flex: 1;
    min-width: 110px;
    padding: 12px 16px;
    border-right: 1px solid #e0e0e0;
    text-align: center;
}
.mn-fp-stat:last-child { border-right: none; }
.mn-fp-stat__label {
    display: block;
    font-size: 11px;
    color: #888;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.mn-fp-stat__value { font-size: 14px; font-weight: 700; color: #222; }

/* ── Body: left info panel + right SVG panel ── */
.mn-fp-body {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 40px;
    align-items: start;
}
@media (max-width: 900px) {
    .mn-fp-body { grid-template-columns: 1fr; }
}

/* ── Left panel ── */
.mn-fp-plan-title { font-size: 18px; font-weight: 700; margin: 0 0 16px; }

/* Feature icons (bed / bath / garage etc.) */
.mn-fp-icons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin: 12px 0 20px;
}
.mn-feature { display: flex; align-items: center; gap: 5px; font-size: 14px; color: #333; }
.mn-feature__icon { display: flex; color: #555; }
.mn-feature__value { font-weight: 600; }

/* Room dimensions */
.mn-fp-features { margin: 16px 0; }
.mn-fp-features__label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    color: #888;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.mn-fp-features__content ul { margin: 0; padding-left: 0; list-style: none; }
.mn-fp-features__content li {
    font-size: 13px;
    color: #444;
    padding: 4px 0;
    border-bottom: 1px solid #f0f0f0;
}

/* ── Design options ── */
.mn-fp-do { margin-top: 24px; }
.mn-fp-do__floor-heading {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    color: #888;
    text-transform: uppercase;
    margin: 12px 0 6px;
}
.mn-fp-do__item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
}
.mn-fp-do__item input[type="checkbox"] {
    accent-color: #651223;
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}
.mn-fp-do__item:has(input:checked) {
    border-radius: 4px;
}

/* ── Right panel ── */
.mn-fp-right { position: relative; }

/* Control buttons row */
.mn-fp-controls { display: flex; gap: 8px; margin-bottom: 10px; }
.mn-fp-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #444;
    background: #fff;
    border: 1.5px solid #c0cad4;
    border-radius: 6px;
    padding: 5px 12px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.mn-fp-btn:hover { background: #f5f5f5; border-color: #aaa; }

/* SVG wrap: ground + first floor side by side */
.mn-fp-svg-wrap { display: flex; gap: 20px; align-items: flex-start; }
.mn-fp-svg-panel { flex: 1; }

/* ── Canvas: stacking context — CRITICAL for overlay to work ── */
.mn-fp-canvas {
    position: relative;
    display: block;
    line-height: 0;
}
.mn-fp-canvas.mn-fp-flipped { transform: scaleX(-1); }

/* Base SVG image — defines the canvas size */
.mn-fp-base-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Overlay SVG image — CRITICAL: absolute on top of base */
.mn-fp-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

/* Floor label */
.mn-fp-floor-label {
    text-align: center;
    font-size: 12px;
    color: #888;
    margin-top: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Lightbox ── */
.mn-fp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mn-fp-lightbox[aria-hidden="true"] { display: none; }
.mn-fp-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .75);
}
.mn-fp-lightbox__inner {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 10px;
    padding: 40px 32px 32px;
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
}
.mn-fp-lightbox__close {
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 26px;
    line-height: 1;
    background: none;
    border: none;
    cursor: pointer;
    color: #555;
}
.mn-fp-lightbox__close:hover { color: #000; }
.mn-fp-lightbox__content .mn-fp-svg-wrap { width: 65vw; }

/* ── Inline SVG base image ── */
.mn-fp-base-svg {
    width: 100%;
    height: auto;
    display: block;
}

/* ── Inline SVG overlay — same absolute stacking as <img> overlay ── */
svg.mn-fp-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* ── Overlay background fix: hide white background rects inside overlay SVGs.
   SVGs exported from Illustrator include a full-size white <rect> background.
   This covers the base floor plan — hide it so only the design elements show. ── */
svg.mn-fp-overlay rect[fill="#FFFFFF"],
svg.mn-fp-overlay rect[fill="#ffffff"],
svg.mn-fp-overlay rect[fill="white"],
svg.mn-fp-overlay rect[fill="#FFF"],
svg.mn-fp-overlay rect[fill="#fff"] {
    display: none;
}

/* Disabled design option — child of an unselected parent */
.mn-fp-do__item.mn-do-disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
}

/* Hide cyan/turquoise background rect in base SVG (CorelDRAW export artifact) */
svg.mn-fp-base-svg rect[fill="#00FFFF"],
svg.mn-fp-base-svg rect[fill="#00ffff"],
svg.mn-fp-base-svg rect[fill="cyan"],
svg.mn-fp-base-svg rect[fill="aqua"],
svg.mn-fp-base-svg rect[fill="#0FF"],
svg.mn-fp-base-svg rect[fill="#0ff"] {
    display: none;
}