/**
 * Condos in Puerto Vallarta — Enhancement Layer
 * Add this via: WordPress Admin → Appearance → Customize → Additional CSS
 * OR paste into: wp-content/themes/enfold-child/style.css (after existing rules)
 *
 * Version: 1.0
 * Purpose: 16:9 image standardization, gallery polish, luxury feel
 */

/* ============================================================
   1. SPARK CDN — LISTING CARD IMAGES (feed / search results)
   Fix: square 1:1 → cinematic 16:9, cover not contain
   ============================================================ */

/* The listing card background-image divs and slider containers currently cause layout shift
   Override them all to 16:9 to prevent masonry height calculation issues on load */
.playus-flexmls-back-image,
.back-punta,
.back-flex-img,
.flexmls-area-feed__slider,
.flexmls-area-feed__image,
.blaze-feed,
.property-card__image,
.propety-card__image {
    aspect-ratio: 16 / 9 !important;
    width: 100% !important;
    height: auto !important;       /* kill the fixed 379px height */
    min-height: unset !important;
    max-height: unset !important;
    background-size: cover !important;
    background-position: center center !important;
    overflow: hidden;
    border-radius: 4px;
}

.playus-flexmls-back-image a,
.property-card__image a,
.propety-card__image a {
    width: 100% !important;
    height: 100% !important;
    display: block;
    aspect-ratio: 16 / 9 !important;
}

/* ============================================================
   2. SPARK CDN — PROPERTY DETAIL SLIDER (Blaze Slider)
   Fix: mixed contain/cover → consistent 16:9 cover
   ============================================================ */

/* Container: use a clean vh height — no aspect-ratio here
   (aspect-ratio on the container breaks when 2 slides are shown side-by-side) */
.blaze-prop,
.blaze-prop.blaze-slider {
    background: #0f172a;  /* dark luxury background for letterbox fallback */
}

.blaze-prop .blaze-container {
    height: 65vh !important;
    max-height: 700px;
    min-height: 280px;
    margin-bottom: 0 !important;
    overflow: hidden;
}

.blaze-prop .blaze-track-container {
    height: 100%;
}

.blaze-prop .blaze-slide {
    height: 65vh !important;
    max-height: 700px;
    min-height: 280px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The images: fill the slide height exactly, cover crops neatly */
.blaze-prop img {
    width: 100%;
    height: 65vh !important;
    max-height: 700px;
    object-fit: cover;
    object-position: center center;
    display: block;
    cursor: zoom-in;
}

/* ============================================================
   3. SWIPER SLIDER (legacy / mobile) — same fix
   ============================================================ */

.swiper-prop {
    background: #0f172a;
    max-height: 65vh !important;
}

.swiper-prop .swiper-slide {
    height: 65vh !important;
    max-height: 65vh !important;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper-prop img {
    width: 100%;
    height: 65vh !important;
    max-height: 65vh !important;
    object-fit: var(--lpr-img-fit, cover);
    object-position: center center;
    display: block;
    cursor: zoom-in;
}

/* ============================================================
   4. ENFOLD NATIVE GALLERY (your professional photos)
   Fix: make thumbnails uniformly 16:9 with clean hover effect
   ============================================================ */

/* Already overridden to grid in style.css — enhance each thumb */
.avia-gallery-thumb a {
    display: block !important;
    height: auto !important;
    width: 100% !important;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 4px;
    position: relative;
}

.avia-gallery-thumb a img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center center;
    transition: transform 0.4s ease;
    display: block;
}

.avia-gallery-thumb a:hover img {
    transform: scale(1.04);
}

/* ============================================================
   5. LUXURY HOVER CARD (for map integration — future use)
   Pre-styled card for Mapbox hover popups
   ============================================================ */

.lpr-hover-card {
    background: rgba(15, 23, 42, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    overflow: hidden;
    width: 300px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    font-family: 'Raleway', 'Open Sans', sans-serif;
    color: #fff;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lpr-hover-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.6);
}

.lpr-hover-card__image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #0f172a;
}

.lpr-hover-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.lpr-hover-card__body {
    padding: 14px 16px;
}

.lpr-hover-card__price {
    font-size: 1.25rem;
    font-weight: 700;
    color: #475569;
    letter-spacing: 0.02em;
    margin: 0 0 4px;
}

.lpr-hover-card__title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lpr-hover-card__location {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.6);
    margin: 0 0 10px;
}

.lpr-hover-card__stats {
    display: flex;
    gap: 12px;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.75);
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 10px;
}

.lpr-hover-card__stat {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ============================================================
   6. MAPBOX MAP PAGE (full-page map search — future use)
   ============================================================ */

#lpr-map-page {
    position: fixed;
    inset: 0;
    z-index: 9999;
}

#lpr-map-container {
    width: 100%;
    height: 100%;
}

/* Custom Mapbox price-tag markers */
.lpr-map-marker {
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(168, 144, 96, 0.6);
    border-radius: 20px;
    color: #fff;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 12px;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

.lpr-map-marker:hover,
.lpr-map-marker.active {
    background: #475569;
    border-color: #475569;
    transform: scale(1.08);
    box-shadow: 0 8px 25px rgba(168,144,96,0.4);
}

/* ============================================================
   7. GENERAL LUXURY POLISH
   ============================================================ */

/* Smooth image loading — prevent layout shift */

/* Price color — dark navy, almost black */
.flexmls-pricing {
    color: #0f172a !important;
    font-weight: 700;
}

/* Price block vertical alignment fix — switch floats to flexbox */
.grid-flexmls-initial-block {
    display: flex !important;
    align-items: center !important;
    width: 100%;
}

.grid-flexmls-initial-block .initial-block {
    float: none !important;
    width: auto !important;
    flex: 1 1 70%;
    padding-right: 30px;
}

.grid-flexmls-initial-block .initial-block:nth-child(2) {
    float: none !important;
    width: auto !important;
    flex: 0 0 auto;
    padding-right: 0;
    text-align: right;
}

.grid-flexmls-initial-block .initial-block .text-right {
    margin: 0;
}

@media (max-width: 768px) {
    .grid-flexmls-initial-block {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .grid-flexmls-initial-block .initial-block,
    .grid-flexmls-initial-block .initial-block:nth-child(2) {
        width: 100% !important;
        text-align: left;
        padding-right: 0;
    }
}

/* Blaze/Swiper pagination dots — luxury white style */
.flexmls-area-feed__blaze-pagination.blaze-pagination button {
    background: rgba(255,255,255,0.4) !important;
    opacity: 1 !important;
}

.flexmls-area-feed__blaze-pagination.blaze-pagination button.active {
    background: #fff !important;
}

/* Smooth transitions on all interactive elements */
.playus-flexmls-back-image a,
.blaze-prop .blaze-slide img,
.swiper-prop img {
    transition: transform 0.4s ease;
}

/* Responsive: compact on mobile */
@media (max-width: 767px) {
    .blaze-prop .blaze-container,
    .blaze-prop .blaze-slide,
    .blaze-prop img {
        height: 55vw !important;  /* ~16:9 ratio based on viewport width */
        max-height: 400px;
    }
    .swiper-prop,
    .swiper-prop .swiper-slide,
    .swiper-prop img {
        height: 55vw !important;
        max-height: 400px !important;
    }
}

/* Redesigned Property Details Section CSS */
.lpr-details-section {
    font-family: 'Inter', -apple-system, sans-serif;
    color: #111;
    margin-top: 48px;
}

.lpr-details-title {
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #111;
    border-bottom: 2px solid #111;
    padding-bottom: 12px;
    margin-bottom: 32px;
}

.lpr-specs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.lpr-spec-cell {
    border: 1px solid #eaeaea;
    padding: 16px 20px;
    background: #fff;
    transition: background-color 0.25s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.lpr-spec-cell:hover {
    background-color: #f1f5f9; /* Muted gold/beige tint */
}

.lpr-spec-cell-label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #888;
    margin-bottom: 6px;
}

.lpr-spec-cell-value {
    font-size: 16px;
    font-weight: 700;
    color: #111;
}

.lpr-amenities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 24px;
}

.lpr-amenity-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #222;
    letter-spacing: 0.03em;
}

.lpr-amenity-marker {
    color: #64748b; /* Elegant gold diamond marker */
    font-size: 14px;
}

.lpr-utility-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    font-size: 13px;
    color: #666;
    background: #fafafa;
    padding: 12px 20px;
    border: 1px solid #eaeaea;
}

.lpr-utility-divider {
    color: #64748b;
    font-weight: 300;
}

.lpr-utility-val {
    font-weight: 500;
}

@media (max-width: 991px) {
    .lpr-specs-grid,
    .lpr-amenities-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .lpr-specs-grid,
    .lpr-amenities-grid {
        grid-template-columns: 1fr;
    }
    .lpr-spec-cell {
        padding: 12px 16px;
    }
}

/* Luxury Property Tabs Styling */
.lpr-tab-header,
.lpr-desc-tab-header {
    display: flex !important;
    gap: 24px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    margin-bottom: 32px !important;
    padding-bottom: 0 !important;
}

.lpr-tab-btn,
.lpr-desc-tab-btn {
    background: none !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    color: #718096 !important;
    padding: 10px 4px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: -1px !important;
    outline: none !important;
}

.lpr-tab-btn:hover,
.lpr-desc-tab-btn:hover {
    color: #1a202c !important;
}

.lpr-tab-btn.active,
.lpr-desc-tab-btn.active {
    color: #1a202c !important;
    border-bottom: 2px solid #1a202c !important;
    font-weight: 600 !important;
}

.lpr-tab-content,
.lpr-desc-tab-content {
    display: none;
    animation: lprFadeIn 0.3s ease;
}

.lpr-tab-content.active,
.lpr-desc-tab-content.active {
    display: block !important;
}

@keyframes lprFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* LPR Editorial Description Typography Flow */
.lpr-editorial-description {
    font-family: 'Inter', -apple-system, sans-serif !important;
    line-height: 1.8 !important;
    color: #333 !important;
}

.lpr-editorial-hook {
    font-family: inherit !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    line-height: 1.5 !important;
    color: #111 !important;
    margin-top: 0 !important;
    margin-bottom: 24px !important;
    border: none !important;
    padding: 0 !important;
}

.lpr-editorial-intro {
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.7 !important;
    color: #222 !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    border: none !important;
    padding: 0 !important;
}

.lpr-editorial-body {
    font-family: inherit !important;
    font-size: 14.5px !important;
    font-weight: 400 !important;
    color: #4a5568 !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    line-height: 1.75 !important;
}

/* ============================================================
   5. PROPERTY FEED - TYPOGRAPHY & LAYOUT ENHANCEMENTS
   ============================================================ */

/* Location text above title */
.prop-location {
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    color: #4a5568 !important;
    text-transform: none !important;
    margin: 4px 0 0 0 !important;
    display: block !important;
    line-height: 1.2 !important;
}

/* Title: uppercase, elegant serif typography */
.prop-name h2,
.prop-name h2 a {
    font-family: Georgia, serif !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
    padding: 0 !important;
}

.prop-name {
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Name group spans full width, with thin bottom divider */
.prop-name-group {
    grid-area: card-name-group !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 0 12px 0 !important;
    border-bottom: 1px solid rgba(30, 41, 59, 0.1) !important;
    width: 100% !important;
    min-width: 0 !important;
}

.prop-details-top {
    display: contents !important; /* Disappear so name-group and price align with main card grid */
}

/* Price block: right-aligned, matches mockup vertically alongside details */
.prop-price {
    grid-area: card-price !important;
    align-self: center !important; /* Align vertically alongside details */
    text-align: right !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 2px !important;
    margin: 0 !important;
}

.prop-price::before {
    content: "ASKING" !important;
    font-size: 9.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    color: #718096 !important;
    text-transform: uppercase !important;
    display: block !important;
    line-height: 1 !important;
}

.prop-price p {
    font-size: 16px !important; /* Reduced from 21px to match mockup and prevent spilling */
    font-weight: 700 !important;
    color: #1e293b !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* Stacked details rows matching the mockup */
.prop-details {
    grid-area: card-details !important;
    margin: 0 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

.prop-mls-row {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    line-height: 1.3 !important;
}

.prop-specs-row,
.prop-area-row {
    font-size: 12.5px !important;
    font-weight: 400 !important;
    color: #718096 !important;
    line-height: 1.4 !important;
}

.spec-divider {
    color: #cbd5e0 !important;
    margin: 0 8px !important;
    font-weight: 300 !important;
}

/* Property card container: 2-column layout to place details and price inline */
.property-card {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "card-image card-image"
      "card-name-group card-name-group"
      "card-details card-price"
      "card-desc card-desc" !important;
    column-gap: 20px !important;
    row-gap: 12px !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    padding-bottom: 25px !important;
    border-bottom: 1px solid #eaeaea !important;
    margin-bottom: 20px !important;
}

/* Property description & Drop Cap styling */
.prop-desc {
    grid-area: card-desc !important;
    margin: 4px 0 0 0 !important;
    width: 100% !important;
}

.prop-desc p {
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    color: #4a5568 !important;
    margin: 0 !important;
    text-align: justify !important;
}

.prop-desc p::first-letter {
    font-family: Georgia, serif !important;
    font-size: 38px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    float: left !important;
    line-height: 0.85 !important;
    margin-right: 6px !important;
    margin-top: 4px !important;
    text-transform: uppercase !important;
}

/* ============================================================
   8. NEIGHBORHOOD GUIDE IMAGE GALLERIES
   Fix: 200px hardcoded height -> cinematic 16:9 aspect-ratio
   ============================================================ */
.lpr-panel-gallery {
    aspect-ratio: 16 / 9 !important;
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
    position: relative !important;
    border-radius: 4px !important;
    margin-bottom: 20px !important;
    border: 1px solid #e2e3e6 !important;
}

.lpr-panel-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    border: none !important;
}








    /* Add Property Button and Modal Styles */
    .lpr-add-property-btn {
      position: absolute;
      top: 10px;
      right: 50px;
      z-index: 10;
      background: rgba(8, 12, 26, 0.82) !important;
      backdrop-filter: blur(8px) !important;
      border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
      color: #fff !important;
      padding: 8px 16px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.25);
      transition: all 0.2s ease;
      font-family: inherit;
    }
    .lpr-add-property-btn:hover {
      background: rgba(16, 185, 129, 0.95) !important;
      border-color: rgba(16, 185, 129, 1.0) !important;
      box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4);
    }
    .lpr-add-property-btn svg {
      width: 16px;
      height: 16px;
    }
    
    .lpr-property-modal-overlay {
      display: none;
      position: absolute;
      top: 130px;
      left: 20px;
      width: 900px;
      z-index: 10000;
      background: transparent;
      pointer-events: none;
    }
    body:not(.page-id-4172) .lpr-property-modal-overlay {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      width: 100vw !important;
      height: 100vh !important;
      background: rgba(8, 12, 26, 0.7) !important;
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
      display: none;
      align-items: center !important;
      justify-content: center !important;
      pointer-events: auto !important;
      z-index: 99999 !important;
    }
    body:not(.page-id-4172) .lpr-property-modal-overlay.open {
      display: flex !important;
    }
    body:not(.page-id-4172) .lpr-property-modal-content {
      width: 800px !important;
      max-width: 90vw !important;
      max-height: 90vh !important;
      margin: auto !important;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
    }
    .lpr-property-modal-overlay.open {
      display: flex;
    }
    .lpr-property-modal-content {
      background: rgba(15, 23, 42, 0.75);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border: 1px solid rgba(255, 255, 255, 0.12);
      width: 100%;
      border-radius: 12px;
      box-shadow: 0 20px 50px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15);
      display: flex;
      flex-direction: column;
      max-height: 75vh;
      color: #e2e8f0;
      font-family: inherit;
      pointer-events: auto;
    }
    .lpr-property-modal-header {
      padding: 16px 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .lpr-property-modal-header h3 {
      margin: 0;
      font-size: 18px;
      font-weight: 700;
      color: #fff;
    }
    .lpr-property-modal-close {
      background: transparent;
      border: none;
      color: #94a3b8;
      font-size: 24px;
      cursor: pointer;
      line-height: 1;
      padding: 0;
    }
    .lpr-property-modal-close:hover {
      color: #fff;
    }
    
    .lpr-property-modal-tabs {
      display: flex;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.02);
    }
    .lpr-property-modal-tabs .lpr-modal-tab-btn {
      flex: 1;
      background: transparent;
      border: none;
      padding: 12px;
      color: #ffffff !important;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      border-bottom: 2px solid transparent;
      opacity: 0.7;
    }
    .lpr-property-modal-tabs .lpr-modal-tab-btn:hover {
      opacity: 1;
    }
    .lpr-property-modal-tabs .lpr-modal-tab-btn.active {
      color: #10b981 !important;
      border-bottom-color: #10b981 !important;
      background: rgba(255, 255, 255, 0.02);
      opacity: 1;
    }
    
    .lpr-modal-tab-content {
      display: none;
      padding: 20px;
      overflow-y: auto;
    }
    .lpr-modal-tab-content.active {
      display: block;
    }
    
    .lpr-form-row {
      margin-bottom: 15px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .lpr-form-row label {
      font-size: 12px;
      font-weight: 600;
      color: #94a3b8;
    }
    .lpr-form-row input[type="text"],
    .lpr-form-row input[type="number"],
    .lpr-form-row select,
    .lpr-form-row textarea {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 6px;
      padding: 8px 12px;
      color: #fff;
      font-size: 13px;
      outline: none;
      transition: border-color 0.2s;
    }
    .lpr-form-row input:focus,
    .lpr-form-row select:focus,
    .lpr-form-row textarea:focus {
      border-color: #10b981;
    }
    
    .lpr-form-row input[type="text"],
    .lpr-form-row input[type="number"],
    .lpr-form-row select {
      height: 36px;
      box-sizing: border-box;
    }
    
    .lpr-input-group {
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .lpr-input-group input {
      flex: 1;
    }
    .lpr-input-group button,
    #lpr-scrape-btn {
      background: #10b981;
      color: #fff;
      border: none;
      padding: 0 16px;
      border-radius: 9999px;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.2s, transform 0.1s;
      white-space: nowrap;
      font-size: 12px;
      height: 36px;
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .lpr-input-group button:hover,
    #lpr-scrape-btn:hover {
      background: #059669;
    }
    .lpr-input-group button:active,
    #lpr-scrape-btn:active {
      transform: scale(0.95);
    }
    
    .lpr-form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px;
    }
    
    .lpr-checkbox-row {
      flex-direction: row !important;
      flex-wrap: wrap;
      gap: 15px !important;
      margin: 10px 0;
    }
    .lpr-checkbox-row label {
      display: flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      color: #e2e8f0;
      font-size: 12px;
    }
    
    .lpr-pin-instruction {
      background: rgba(16, 185, 129, 0.1);
      border: 1px solid rgba(16, 185, 129, 0.2);
      border-radius: 6px;
      padding: 8px 12px;
      margin: 10px 0;
    }
    .lpr-pin-instruction p {
      margin: 0;
      font-size: 12px;
      color: #34d399;
    }
    
    .lpr-status-message {
      font-size: 12px;
      font-weight: 600;
      margin-bottom: 10px;
    }
    .lpr-status-message.loading { color: #38bdf8; }
    .lpr-status-message.success { color: #4ade80; }
    .lpr-status-message.error { color: #f87171; }
    
    .lpr-modal-footer {
      margin-top: 15px;
      display: flex;
      justify-content: flex-end;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      padding-top: 15px;
    }
    .lpr-save-property-btn,
    .lpr-action-btn {
      background: #10b981;
      color: #fff;
      border: none;
      padding: 10px 20px;
      border-radius: 6px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s;
      font-size: 13px;
    }
    .lpr-save-property-btn:hover,
    .lpr-action-btn:hover {
      background: #059669;
    }
    
    /* Draggable Blue Map Marker */
    .lpr-draggable-blue-marker {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #38bdf8;
      border: 2px solid #fff;
      box-shadow: 0 0 10px rgba(56, 189, 248, 0.8), 0 0 4px rgba(0,0,0,0.5);
      cursor: move;
      transition: transform 0.2s;
    }
    .lpr-draggable-blue-marker:hover {
      transform: scale(1.3);
    }
    
    /* Saved White Map Marker */
    .lpr-draggable-white-marker {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #fff;
      border: 2px solid #10b981;
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 4px rgba(0,0,0,0.5);
      cursor: default;
    }
    
    /* CSV Helpers */
    .lpr-csv-help {
      background: rgba(255, 255, 255, 0.02);
      border: 1px dashed rgba(255, 255, 255, 0.1);
      border-radius: 6px;
      padding: 10px 15px;
      margin-bottom: 15px;
    }
    .lpr-csv-help p {
      margin: 0;
      font-size: 12px;
      color: #94a3b8;
    }
    .lpr-csv-help code {
      background: rgba(255,255,255,0.05);
      padding: 2px 6px;
      border-radius: 4px;
      color: #34d399;
    }
    
    #lpr-csv-queue-list {
      max-height: 250px;
      overflow-y: auto;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 6px;
      padding: 10px;
      background: rgba(0, 0, 0, 0.15);
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 15px;
    }
    
    .lpr-queue-item {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 6px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .lpr-queue-item-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 600;
      font-size: 13px;
    }
    .lpr-queue-item-title {
      color: #fff;
    }
    .lpr-queue-item-status {
      font-size: 11px;
      padding: 2px 6px;
      border-radius: 4px;
      background: rgba(255,255,255,0.08);
      color: #94a3b8;
    }
    .lpr-queue-item-status.scraping {
      background: rgba(56, 189, 248, 0.15);
      color: #38bdf8;
    }
    .lpr-queue-item-status.ready {
      background: rgba(74, 222, 128, 0.15);
      color: #4ade80;
    }
    .lpr-queue-item-status.saved {
      background: rgba(255, 255, 255, 0.15);
      color: #fff;
      border: 1px solid #10b981;
    }
    .lpr-queue-item-status.error {
      background: rgba(248, 113, 113, 0.15);
      color: #f87171;
    }
    .lpr-queue-item-fields {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .lpr-queue-item-fields .lpr-form-row {
      margin-bottom: 0;
    }
    .lpr-queue-item-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 5px;
    }
    .lpr-queue-action-btn {
      background: rgba(255, 255, 255, 0.08);
      color: #fff;
      border: none;
      padding: 4px 10px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
    }
    .lpr-queue-action-btn:hover {
      background: rgba(255, 255, 255, 0.15);
    }
    .lpr-queue-action-btn.primary {
      background: #10b981;
    }
    .lpr-queue-action-btn.primary:hover {
      background: #059669;
    }
    
    /* New Compact Horizontal Styling Layout Utilities */
    .lpr-form-flex-row {
      display: flex;
      gap: 12px;
      margin-bottom: 10px;
    }
    .lpr-form-flex-row .lpr-form-row {
      margin-bottom: 0;
    }
    .flex-1 { flex: 1; min-width: 0; }
    .flex-2 { flex: 2; min-width: 0; }
    .flex-3 { flex: 3; min-width: 0; }
    .lpr-checkbox-col-wrap {
      display: flex;
      flex-direction: column;
    }
    .lpr-checkbox-vertical-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-top: 4px;
    }
    .lpr-checkbox-vertical-list label {
      display: flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      font-size: 11px;
      color: #cbd5e1;
    }
    
    /* Coordinate Picker Modal */
    .lpr-coord-picker-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(15, 23, 42, 0.6);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      z-index: 20000;
      align-items: center;
      justify-content: center;
      pointer-events: auto;
    }
    .lpr-coord-picker-overlay.open {
      display: flex;
    }
    .lpr-form-two-cols {
      display: flex;
      gap: 20px;
      margin-bottom: 12px;
    }
    .lpr-form-col {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-width: 0;
    }
    .lpr-checkbox-horizontal-list {
      display: flex;
      gap: 15px;
      margin-top: 4px;
    }
    .lpr-checkbox-horizontal-list label {
      display: flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      font-size: 11px;
      color: #cbd5e1;
    }
    
    /* Zopim Chat launcher opacity control */
    #launcher,
    .zopim,
    iframe.zopim {
      opacity: 0.6 !important;
      transition: opacity 0.25s ease-in-out !important;
    }
    #launcher:hover,
    .zopim:hover,
    iframe.zopim:hover {
      opacity: 1.0 !important;
    }

/* ============================================================
   8. HEADER GLASS STYLING OVERRIDES (60% Opacity Dark Mode)
   ============================================================ */

/* Main Header background and backdrop filter - always active (scrolled and transparent) */
#top #header,
#top #header #avia-sticky-header-clone {
  background: rgba(102, 102, 153, 0.8) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

/* Ensure all header links and text have high contrast white/grayscale color */
#top #header *,
#top #header #avia-sticky-header-clone * {
  color: #fff !important;
}
#top #header a,
#top #header #avia-sticky-header-clone a {
  color: rgba(255, 255, 255, 0.8) !important;
}
#top #header a:hover,
#top #header #avia-sticky-header-clone a:hover {
  color: #fff !important;
}

/* Sub-menu and Megamenu container overrides - Single unified 80% opacity background */
#top #header .sub-menu,
#top #header .avia_mega_div {
  background: rgba(102, 102, 153, 0.8) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
  padding: 16px !important;
}

/* Force correct text and links color inside dropdown submenus */
#top #header .sub-menu *,
#top #header .avia_mega_div * {
  color: #fff !important;
}

/* Remove default bullets, span bullets, and arrow indicators */
#top #header .sub-menu li,
#top #header .avia_mega_div li,
#top #header .sub-menu ul,
#top #header .avia_mega_div ul {
  list-style: none !important;
  list-style-type: none !important;
  background: none !important;
  background-image: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
#top #header .avia-bullet {
  display: none !important;
}
#top #header .sub-menu li a::before,
#top #header .avia_mega_div li a::before,
#top #header .sub-menu li a .mega-menu-icon,
#top #header .avia_mega_div li a .mega-menu-icon {
  display: none !important;
  content: "" !important;
}

/* Strip all background colors, borders, and nested shadows from inside the mega menu to prevent double layering */
#top #header .avia_mega_div ul,
#top #header .avia_mega_div li,
#top #header .avia_mega_div .sub-menu,
#top #header .avia_mega_div .menu-item {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Style link spacing and hover highlighting cleanly */
#top #header .sub-menu a,
#top #header .avia_mega_div a {
  padding: 8px 16px !important;
  display: block !important;
  transition: all 0.2s ease !important;
}
#top #header .sub-menu a:hover,
#top #header .avia_mega_div a:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.15) !important;
}

/* Fix dropdown menus overflow clipping on Enfold headers */
#top #header .menu-item {
  overflow: visible !important;
}

/* Stretch the header main & logo containers to restore left alignment of logos */
#top #header_main {
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  position: relative !important;
}
#top #header_main_alternate,
#top #header_meta {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
}
#top #header_main .container.av-logo-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 50px !important;
  position: static !important;
}
#top #header_main .inner-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  position: static !important;
}

/* Center logo vertically inside the header navigation bar relative to #header_main */
#top .logo {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  -webkit-transform: translateY(-50%) !important;
  left: 50px !important;
  height: 50px !important;
  display: block !important;
}
#top .logo a {
  display: block !important;
  height: 100% !important;
}
#top .logo img {
  height: 100% !important;
  width: auto !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
}



/* ============================================================
   9. GLOBAL CONTAINER WIDTH RESTORATION
   Restore the global container width to Enfold's wide layout (1310px/1130px)
   for main body, footer, and socket areas while protecting header logo stretch.
   ============================================================ */
@media only screen and (min-width: 1340px) {
  .responsive #top #main .container,
  .responsive #top #footer .container,
  .responsive #top #socket .container {
    max-width: 1310px !important;
  }
}
@media only screen and (min-width: 1140px) and (max-width: 1339px) {
  .responsive #top #main .container,
  .responsive #top #footer .container,
  .responsive #top #socket .container {
    max-width: 1130px !important;
  }
}

/* ============================================================
   10. LOCATION MAP & INQUIRY FORM POLISH
   Fixes: close map-button gap, style region guide text/hover,
   and scale down inquiry form H1 header font size.
   ============================================================ */
#top .lpr-map-region-guide {
  margin-top: 0 !important;
}
#top .property-detail .lpr-map-region-btn {
  color: rgba(255, 255, 255, 0.75) !important;
}
#top .property-detail .lpr-map-region-btn:hover {
  color: #ffffff !important;
  background: #7a7f88 !important;
}
#top .property-contact-form h1 {
  font-size: 18px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  color: #07090f !important;
  margin-top: 5px !important;
  margin-bottom: 20px !important;
}

/* ============================================================
   11. DISABLE ENFOLD IMAGE LINK HOVER OVERLAYS GLOBALLY
   ============================================================ */
.image-overlay,
.image-overlay-inside,
#top .image-overlay {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* ============================================================
   12. CUSTOM CONDOMINIUMS FOOTER STYLING
   ============================================================ */
#top #footer-page {
  background-color: #666699 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Clear default Enfold container styling for footer page wrapper */
#top #footer-page .container_wrap,
#top #footer-page .container_wrap_first,
#top #footer-page .container,
#top #footer-page main,
#top #footer-page .post-entry,
#top #footer-page .entry-content-wrapper {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-shadow: none !important;
}

#top #socket {
  background-color: #414161 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.lpr-condos-footer {
  background: #666699 !important;
  color: #ffffff !important;
  padding: 60px 50px !important;
  font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  max-width: 1310px !important;
  margin: 0 auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.lpr-condos-footer a {
  color: rgba(255, 255, 255, 0.8) !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.lpr-condos-footer a:hover {
  color: #ffffff !important;
  padding-left: 4px !important;
}

/* Footer Top Row */
.lpr-footer-top-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  flex-wrap: wrap !important;
  gap: 30px !important;
  margin-bottom: 40px !important;
  padding: 0 !important;
}

.lpr-footer-brand-col {
  flex: 1 1 400px !important;
}

.lpr-footer-logo-link {
  display: inline-block !important;
  margin-bottom: 15px !important;
}

.lpr-footer-logo-link:hover {
  padding-left: 0 !important;
}

.lpr-footer-logo-img {
  height: 42px !important;
  width: auto !important;
  display: block !important;
}

.lpr-footer-tagline {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  margin: 10px 0 20px 0 !important;
  max-width: 380px !important;
}

.lpr-footer-socials {
  display: flex !important;
  gap: 12px !important;
}

.lpr-footer-socials a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  transition: all 0.2s ease !important;
}

.lpr-footer-socials a:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  padding-left: 0 !important;
}

.lpr-footer-socials a svg {
  display: block !important;
}

.lpr-footer-contact-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  align-items: flex-end !important;
  text-align: right !important;
  flex: 1 1 300px !important;
}

.lpr-footer-contact-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.lpr-contact-label {
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-weight: 600 !important;
}

.lpr-contact-value {
  font-size: 17px !important;
  font-weight: 500 !important;
  color: #ffffff !important;
}

.lpr-contact-value:hover {
  color: rgba(255, 255, 255, 0.8) !important;
  padding-left: 0 !important;
}

/* Divider */
.lpr-footer-divider {
  height: 1px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  margin-bottom: 40px !important;
}

/* Footer Grid */
.lpr-footer-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 40px !important;
  padding: 0 !important;
}

.lpr-footer-col {
  display: block !important;
}

.lpr-footer-col-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  color: #ffffff !important;
  margin-top: 0 !important;
  margin-bottom: 25px !important;
  text-transform: uppercase !important;
  border-left: 2px solid rgba(255, 255, 255, 0.4) !important;
  padding-left: 10px !important;
  line-height: 1.2 !important;
}

.lpr-footer-links {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.lpr-footer-links li {
  margin-bottom: 12px !important;
  padding: 0 !important;
  list-style-type: none !important;
  background: none !important;
}

.lpr-footer-links li:before {
  content: "" !important;
  display: none !important;
}

.lpr-footer-links a {
  font-size: 14px !important;
  display: inline-block !important;
}

/* Subgroups (in Column 2) */
.lpr-footer-subgroup {
  margin-bottom: 25px !important;
}

.lpr-footer-subgroup:last-child {
  margin-bottom: 0 !important;
}

.lpr-footer-subgroup-title {
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.6) !important;
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  letter-spacing: 0.05em !important;
}

/* Responsive Overrides */
@media only screen and (max-width: 989px) {
  .lpr-condos-footer {
    padding: 50px 30px !important;
  }
  
  .lpr-footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px !important;
  }
  
  .lpr-footer-contact-col {
    align-items: flex-start !important;
    text-align: left !important;
  }
}

@media only screen and (max-width: 767px) {
  .lpr-condos-footer {
    padding: 40px 15px !important;
  }
  
  .lpr-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
}

/* Custom footer preview page adjustments */
.page-id-66453 #main {
  background-color: #666699 !important;
}
.page-id-66453 #main .container_wrap {
  border-top: none !important;
  background-color: transparent !important;
}
.page-id-66453 #main .container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}
.page-id-66453 #main .post-entry {
  padding: 0 !important;
}
.page-id-66453 #main .entry-content-wrapper {
  padding: 0 !important;
}
.page-id-66453 #footer-page,
.page-id-66453 #socket {
  display: none !important; /* Hide duplicate footer and socket on the preview page */
}