/* =============================================
   CRE-BOOK Property Lightbox Popup — Child Theme Styles
   ============================================= */

/* Keep .lightbox-gallery-wrap/.lightbox-gallery from ever becoming flex containers - breaks Slick's width math and stops sliding. */
.property-lightbox .lightbox-gallery,
.property-lightbox .lightbox-slider {
    height: 100%;
}

/* !important beats the inline height Slick's adaptiveHeight sets on #houzez-listing-lightbox's slider. */
.property-lightbox .lightbox-slider .slick-list,
.property-lightbox .lightbox-slider .slick-track,
.property-lightbox .lightbox-slider .slick-slide {
    height: 100% !important;
}

.property-lightbox .lightbox-slider .slick-slide > div {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.property-lightbox .lightbox-slider img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Widest desktop tier: 1200px modal instead of the parent theme's 1600px. */
@media (min-width: 1200px) {
    .property-lightbox .modal-dialog {
        width: 1200px;
    }
}

/* Redesign shared by #property-lightbox and #houzez-listing-lightbox; ID-scoped rules further down are #property-lightbox's form only. */
.property-lightbox .modal-dialog {
    max-height: 90vh;
}

.property-lightbox .modal-content {
    overflow: hidden;
    background-color: #fff;
    border: none;
}

/* Scrolling handled per-breakpoint below. */
.property-lightbox .modal-body.clearfix {
    display: flex;
    max-height: 78vh;
}

/* Floating transparent header + circular close button, instead of the parent theme's solid dark bar. */
.property-lightbox .modal-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    height: auto;
    background: transparent;
    border-bottom: none;
    padding: 15px;
}

.property-lightbox .lightbox-logo,
.property-lightbox .lightbox-tools {
    display: none;
}

.property-lightbox .btn-close {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 20px;
    height: 20px;
    margin: 0;
    border: none;
    border-radius: 50%;
    background-color: #fff;
    background-size: 14px;
    opacity: 1;
    filter: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* Redundant now the form is always visible; no-op on #houzez-listing-lightbox. */
.property-lightbox .btn-email {
    display: none !important;
}

/* =============================================
   Gallery Pane — Gradient, Title/Counter, Arrows, Dots
   ============================================= */
.property-lightbox .lightbox-gallery-wrap {
    position: relative;
    padding: 0;
    overflow: hidden;
    /* Letterboxing color around contained images. */
    background-color: #000;
}

.property-lightbox .lightbox-gallery {
    position: relative;
    top: auto;
    transform: none;
    height: 100%;
}

.property-lightbox .lightbox-gallery-wrap:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 45%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
    pointer-events: none;
    z-index: 5;
}

.property-lightbox .hz-lightbox-mobile-caption {
    position: absolute;
    left: 20px;
    right: 70px;
    bottom: 34px;
    z-index: 6;
    color: #fff;
    pointer-events: none;
}

.property-lightbox .hz-lightbox-mobile-caption .hz-lightbox-mobile-title {
    display: block;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 4px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.property-lightbox .hz-lightbox-mobile-caption .hz-lightbox-mobile-counter {
    display: block;
    font-size: 13px;
    opacity: 0.85;
}

/* Re-enables arrows; parent theme hides them below 768px. */
.property-lightbox .slick-prev,
.property-lightbox .slick-next {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.85);
    z-index: 10;
}

.property-lightbox .slick-prev:before,
.property-lightbox .slick-next:before {
    color: #2d2d2d;
    opacity: 1;
}

.property-lightbox .slick-prev {
    left: 15px;
}

.property-lightbox .slick-next {
    right: 15px;
}

/* Belt-and-suspenders: re-states display:flex at the exact breakpoint the parent theme hides arrows at (main.css line ~10594), in case the unscoped rule above isn't winning for some reason on this install. */
@media (max-width: 767.98px) {
    .property-lightbox .slick-prev,
    .property-lightbox .slick-next {
        display: flex !important;
    }
}

/* Dots enabled via JS - both sliders init with dots off. */
.property-lightbox .slick-dots {
    position: absolute;
    right: 20px;
    bottom: 36px;
    left: auto;
    width: auto;
    z-index: 6;
    line-height: 0;
}

.property-lightbox .slick-dots li {
    width: 6px;
    height: 6px;
    margin: 0 3px;
}

.property-lightbox .slick-dots li button {
    width: 6px;
    height: 6px;
    padding: 0;
}

.property-lightbox .slick-dots li button:before {
    width: 6px;
    height: 6px;
    font-size: 0;
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
}

.property-lightbox .slick-dots li.slick-active button:before {
    width: 16px;
    border-radius: 3px;
    background-color: #fff;
}

/* =============================================
   Layout — Stacked (<=991.98px)
   ============================================= */
@media (max-width: 991.98px) {
    
    /* Full-screen sheet pinned to the bottom edge. */
    .property-lightbox .modal-dialog {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        height: 100vh;
        max-height: 100vh;
        margin: 0;
        width: 100%;
        max-width: 100%;
    }

    /* Neutralizes #houzez-listing-lightbox's modal-dialog-centered so it sits flush at the bottom. */
    .property-lightbox .modal-dialog.modal-dialog-centered {
        display: block;
        min-height: 0;
    }

    /* Fills the full-height dialog so short content still shows a white background, not a gap. */
    .property-lightbox .modal-content {
        height: 100%;
    }

    /* Slide-up entrance instead of Bootstrap's default fade. */
    #property-lightbox.fade .modal-dialog,
    #houzez-listing-lightbox.fade .modal-dialog {
        transform: translateY(100%);
    }

    #property-lightbox.show .modal-dialog,
    #houzez-listing-lightbox.show .modal-dialog {
        transform: none;
    }

    .property-lightbox .modal-body.clearfix {
        flex-direction: column;
        /* Matches modal-content's full height. */
        max-height: 100%;
        /* Whole column scrolls together, image included. */
        overflow-y: auto;
    }

    .property-lightbox .lightbox-gallery-wrap,
    .property-lightbox .lightbox-form-wrap {
        transition: height 0.3s ease, padding 0.3s ease;
    }

    .property-lightbox .lightbox-gallery-wrap {
        order: 1;
        width: 100% !important;
        height: 38vh;
        min-height: 220px;
        flex-shrink: 0;
    }

    .property-lightbox .lightbox-form-wrap {
        order: 2;
        position: relative;
        visibility: visible;
        right: auto;
        width: 100% !important;
    }

    /* Stacked seam toggle: same .lightbox-gallery-full-wrap class as the desktop one (custom.js's existing .btn-expand handler already toggles it), but adjusts height here instead of width since gallery/form stack vertically at this width. */
    .property-lightbox .btn-expand {
        display: flex;
        align-items: center;
        justify-content: center;
        top: auto;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 30px;
        height: 30px;
        border-radius: 0;
        background-color: #fff;
        z-index: 11;
    }

    .property-lightbox .btn-expand i {
        display: none;
    }

    .property-lightbox .btn-expand:before {
        content: "";
        width: 7px;
        height: 7px;
        margin-top: -3px;
        border-right: 2px solid #2d2d2d;
        border-bottom: 2px solid #2d2d2d;
        transform: rotate(45deg);
        transition: transform 0.2s;
    }

    .property-lightbox .lightbox-gallery-wrap.lightbox-gallery-full-wrap {
        order: 1;
        height: 100%;
    }

    .property-lightbox .lightbox-gallery-wrap.lightbox-gallery-full-wrap + .lightbox-form-wrap {
        height: 0;
        padding: 0;
        overflow: hidden;
    }

    .property-lightbox .lightbox-gallery-wrap.lightbox-gallery-full-wrap .btn-expand:before {
        margin-top: 3px;
        transform: rotate(-135deg);
    }
}

/* =============================================
   Layout — Side by Side (>=992px)
   ============================================= */
@media (min-width: 992px) {
    /* Centers via .modal itself - repositioning .modal-dialog directly previously broke the layout. */
    #property-lightbox.modal,
    #houzez-listing-lightbox.modal {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .property-lightbox .modal-dialog {
        margin: 0;
    }

    /* Neutralizes #houzez-listing-lightbox's modal-dialog-centered min-height, which fights max-height. */
    .property-lightbox .modal-dialog.modal-dialog-centered {
        display: block;
        min-height: 0;
    }

    /* Explicit height (not just max-height) gives flex something definite to stretch/compress against. */
    .property-lightbox .modal-body.clearfix {
        height: 78vh;
        padding: 0 !important;
    }

    .property-lightbox .lightbox-gallery-wrap,
    .property-lightbox .lightbox-form-wrap {
        transition: width 0.3s ease, padding 0.3s ease;
    }

    .property-lightbox .lightbox-gallery-wrap:not(.lightbox-gallery-full-wrap) {
        order: 1;
        width: 60%;
        min-height: 0;
    }

    .property-lightbox .lightbox-form-wrap {
        order: 2;
        width: 40%;
        overflow-y: auto;
        /* min-height:0 lets this shrink so overflow-y:auto can actually trigger. */
        min-height: 0;
        padding-right: 15px;
    }

    /* Seam toggle: reuses custom.js's existing .btn-expand click handler (it already toggles .lightbox-gallery-full-wrap - no new JS needed), repurposed here to expand the form pane instead of the gallery. Sits on the gallery's right edge now, since the gallery is on the left and the form on the right. */
  .property-lightbox .btn-expand {
        top: 5%;
        right: 0;
        left: auto;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px 0 0 4px;
        background-color: #fff;
        z-index: 36;
    }

    .property-lightbox .btn-expand i {
        display: none;
    }

    .property-lightbox .btn-expand:before {
        content: "";
        width: 7px;
        height: 7px;
        margin-left: -3px;
        border-right: 2px solid #2d2d2d;
        border-bottom: 2px solid #2d2d2d;
        transform: rotate(-45deg);
        transition: transform 0.2s;
    }

    /* Toggled: form collapses, gallery takes the full width. order:1 re-set since it's lost when this class is added (only set in the :not() rule above). */
    .property-lightbox .lightbox-gallery-wrap.lightbox-gallery-full-wrap:has(+ .lightbox-form-wrap) {
        order: 1;
        width: 100%;
    }

    .property-lightbox .lightbox-gallery-wrap.lightbox-gallery-full-wrap + .lightbox-form-wrap {
        width: 0;
        padding: 0;
        overflow: hidden;
    }

    .property-lightbox .lightbox-gallery-wrap.lightbox-gallery-full-wrap .btn-expand:before {
        margin-left: 3px;
        transform: rotate(135deg);
    }
}

/* =============================================
   Form/Content Pane — Fields & Buttons
   ============================================= */
.property-lightbox .lightbox-form-wrap {
    background-color: #fff;
}

/* Adds the shared .fpc-tag classes (via JS) so tags match the listing cards; lets them wrap. */
.property-lightbox .labels-wrap {
    flex-wrap: wrap;
    gap: 6px;
}

/* #houzez-listing-lightbox's summary card content, matched to the .fpc-* card design tokens (property-listing-card.css). */
.property-lightbox .lightbox-content-wrap {
    font-family: var(--fpc-sans, Helvetica, Arial, sans-serif);
    color: var(--fpc-700, #54595f);
    padding-left: 15px;
}

.property-lightbox .lightbox-content-wrap .item-title {
    font-family: var(--fpc-sans, Helvetica, Arial, sans-serif);
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.4;
}

.property-lightbox .lightbox-content-wrap .item-title a {
    color: var(--fpc-black, #000);
    text-decoration: none;
    transition: color 0.15s;
}

.property-lightbox .lightbox-content-wrap .item-title a:hover {
    color: var(--fpc-hover, #5485d6);
}

.property-lightbox .lightbox-content-wrap .item-address {
    font-size: 0.85rem;
    color: var(--fpc-700, #54595f);
}

.property-lightbox .lightbox-content-wrap .item-price-wrap {
    font-family: var(--fpc-sans, Helvetica, Arial, sans-serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--fpc-700, #54595f);
}

.property-lightbox .lightbox-content-wrap > p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--fpc-700, #54595f);
}

.property-lightbox .lightbox-content-wrap .property-overview-data {
    font-family: var(--fpc-mono, 'Azeret Mono', monospace);
    font-size: 0.85rem;
    color: var(--fpc-700, #54595f);
}

/* #houzez-listing-lightbox's "Details" link, restyled to match. */
.property-lightbox .lightbox-content-wrap .btn-item {
    display: block;
    text-align: center;
    background-color: var(--fpc-black, #000);
    border-color: var(--fpc-black, #000);
    border-radius: 10px;
    font-weight: 600;
    color: #fff;
}

.property-lightbox .lightbox-content-wrap .btn-item:hover {
    background-color: var(--fpc-black, #000);
    border-color: var(--fpc-black, #000);
    color: var(--fpc-hover, #5485d6);
}

/* Removes the sidebar-card border/shadow only inside this modal. */
#property-lightbox .property-form-wrap,
#property-lightbox .property-form-wrap:hover {
    border: none;
    box-shadow: none;
}

#property-lightbox .lightbox-form-wrap .form-control {
    background-color: #f5f6f8;
    border: none;
    border-radius: 10px;
}

#property-lightbox .lightbox-form-wrap textarea.form-control {
    border-radius: 14px;
}

#property-lightbox .lightbox-form-wrap .btn-secondary {
    background-color: #5485d6;
    border-color: #5485d6;
    border-radius: 10px;
    font-weight: 600;
    padding: 12px 0;
}

#property-lightbox .lightbox-form-wrap .btn-secondary:hover,
#property-lightbox .lightbox-form-wrap .btn-secondary:focus {
    background-color: #3f6cb8;
    border-color: #3f6cb8;
}

#property-lightbox .lightbox-form-wrap .btn-call,
#property-lightbox .lightbox-form-wrap .btn-secondary-outlined {
    border-radius: 10px;
    font-weight: 600;
    color: #5485d6;
    border-color: #5485d6;
    padding: 12px 0;
}

#property-lightbox .lightbox-form-wrap .btn-call:hover,
#property-lightbox .lightbox-form-wrap .btn-secondary-outlined:hover {
    background-color: #eef2fb;
    color: #5485d6;
}

#property-lightbox .hz-lightbox-trust {
    display: block;
    text-align: center;
    font-size: 12px;
    color: #8a92a0;
    margin-top: 10px;
}