/* Modern Single Property View */

/* =========================================
   FULL WIDTH & PAGE TITLE HIDING
   ========================================= */

/* Hide page titles when single property is present */
body:has(.wpl-single-property-modern) .entry-title,
body:has(.wpl-single-property-modern) .page-title,
body:has(.wpl-single-property-modern) .wp-block-post-title,
body:has(.wpl-single-property-modern) h1.has-text-align-center,
body:has(.wpl-single-property-modern) article > header,
body:has(.wpl-single-property-modern) .ast-archive-description {
    display: none !important;
}

/* Override WordPress block editor constrained layout */
body:has(.wpl-single-property-modern) .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: none !important;
}

/* Remove container padding for full-width */
body:has(.wpl-single-property-modern) .entry-content,
body:has(.wpl-single-property-modern) .page-content,
body:has(.wpl-single-property-modern) .wp-block-post-content,
body:has(.wpl-single-property-modern) .wp-site-blocks,
body:has(.wpl-single-property-modern) .has-global-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* JS fallback class for browsers without :has() */
body.wpl-has-single-property .entry-title,
body.wpl-has-single-property .page-title,
body.wpl-has-single-property .wp-block-post-title,
body.wpl-has-single-property article > header {
    display: none !important;
}

body.wpl-has-single-property .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: none !important;
}

body.wpl-has-single-property .entry-content,
body.wpl-has-single-property .wp-block-post-content,
body.wpl-has-single-property .has-global-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* =========================================
   MAIN CONTAINER STYLES
   ========================================= */

.wpl-single-view-container {
    display: block !important;
    width: 100%;
}

.wpl-single-property-modern {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 30px;
    font-family: inherit; /* Inherit from theme */
    color: #333;
    width: 100%;
    box-sizing: border-box;
}

/* Gallery */
.wpl-modern-gallery {
    display: flex;
    flex-direction: row;
    gap: 15px;
    margin-bottom: 40px;
    width: 100%;
}

.wpl-gallery-main {
    position: relative;
    flex: 1;
    height: 500px;
    border-radius: 12px;
    background: #f0f0f0;
}

.wpl-gallery-main img#wpl-main-display-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.3s ease;
    border-radius: 12px;
}

.wpl-gallery-badges {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    gap: 10px;
    z-index: 10;
}

.wpl-badge-status {
    padding: 6px 12px;
    border-radius: 4px;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85em;
}
.wpl-badge-status.sell { background-color: #2ecc71; }
.wpl-badge-status.rent { background-color: #3498db; }

/* Gallery Navigation */
.wpl-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--wpl-primary, #0073aa);
    color: #fff;
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.wpl-gallery-nav:hover {
    background: var(--wpl-primary-dark, #005a87);
    transform: translateY(-50%) scale(1.05);
}

.wpl-gallery-prev { left: 10px; }
.wpl-gallery-next { right: 10px; }

/* Gallery Counter */
.wpl-gallery-counter {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    z-index: 10;
}

/* Thumbnails Wrapper */
.wpl-gallery-thumbs-wrapper {
    position: relative;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wpl-gallery-thumbs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 500px;
    overflow: hidden;
}

.wpl-thumb-item {
    width: 120px;
    height: 118px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s, border-color 0.3s, transform 0.2s;
    position: relative;
    border: 3px solid transparent;
    flex-shrink: 0;
}

.wpl-thumb-item:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.wpl-thumb-item.active {
    opacity: 1;
    border-color: var(--wpl-primary, #0073aa);
}

.wpl-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Hide scroll buttons - using main image nav instead */
.wpl-thumbs-scroll {
    display: none;
}

/* Video Container */
.wpl-video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    background: #000;
}

.wpl-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*
 * Directly uploaded property video.
 *
 * The YouTube embed above is bounded by its 16:9 padding box, but the uploaded
 * <video> was only "width: 100%" with no height constraint, so a portrait clip
 * shot on a phone (1080x1920) rendered at roughly 1.8x the column width — well
 * over a thousand pixels tall — and pushed the rest of the page off screen.
 *
 * The height is capped instead of forcing a 16:9 box: object-fit: contain would
 * pillarbox a portrait video into a thin strip. Landscape video still fills the
 * width exactly as before; portrait video is clamped and centred against a dark
 * backdrop so the letterboxing reads as deliberate.
 */
.wpl-uploaded-video-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    background: #0b0f19;
    border-radius: 12px;
    overflow: hidden;
}

.wpl-uploaded-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 12px;
}

/* Fallback for browsers without aspect-ratio support. */
@supports not (aspect-ratio: 16 / 9) {
    .wpl-uploaded-video-wrap { height: 0; padding-bottom: 56.25%; }
    .wpl-uploaded-video { position: absolute; inset: 0; }
}

/* Layout Grid */
.wpl-property-container-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
}

/* Header */
.wpl-header-modern {
    margin-bottom: 30px;
}

/* One flat sequence of children, placed by grid.

   The markup order is the order a phone should read: badges, title, price,
   location, actions. Desktop puts the price back at the top right by naming
   its cell, which is the only thing the old two-column markup was buying —
   and that markup made the mobile order impossible to fix, because `order`
   cannot interleave children of two different parents. */
.wpl-header-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 30px;
    row-gap: 4px;
    align-items: start;
}

.wpl-header-top > .wpl-header-badges { grid-column: 1 / -1; grid-row: 1; }
.wpl-header-top > .wpl-title-modern  { grid-column: 1;      grid-row: 2; }
.wpl-header-top > .wpl-location-modern { grid-column: 1;    grid-row: 3; }

/* Price sits opposite the title; the buttons sit opposite the location. Two
   rows, two pairs — which is the layout the owner drew, and it reads as two
   facts about the listing and then two rows of things you can do with it. */
.wpl-header-top > .wpl-header-price {
    grid-column: 2;
    grid-row: 2;
    text-align: right;
}

/* Back in the right-hand column, under the price — where it was.

   I moved this to a full-width row and it made the desktop header tall and
   left-heavy: four controls on their own line under an already-short title,
   with the chip and the unit switch stacking below that again. The buttons
   belong beside the price, which is the block they act on. */
.wpl-header-top > .wpl-header-actions {
    grid-column: 2;
    grid-row: 3;
    justify-content: flex-end;
    margin-top: 0;
}

/* The viewing chip and the unit switch, on one line under the gallery.

   They were in the header above the images, which pushed the gallery down and
   made them read as part of the title block. They are page-level controls, not
   header content. */
.wpl-under-gallery {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 14px 0 26px;
}

/* WPL_Social_Proof emits its own block; if it renders nothing the unit pill
   simply sits alone, which is what it did before. */
.wpl-under-gallery > .wpl-social-proof { margin: 0; }
.wpl-under-gallery > .wpl-area-unit-bar { margin: 0; }

/* The area-unit control.

   Defensive to the point of !important, and deliberately so. Themes routinely
   ship `select { width: 100% }` (often with a min-height and a border), and
   when that wins, this control stops being a small inline pill and becomes a
   full-width bordered box with the label orphaned on the line above it — which
   is exactly what was reported on the property page, twice.

   Everything here that carries !important is a *layout* declaration protecting
   the shape of the control; the colours are left overridable so a theme can
   still restyle it. */
.wpl-area-unit-bar {
    display: inline-flex !important;
    width: auto !important;
    max-width: 100%;
    justify-content: flex-start;
}
.wpl-area-unit-pill {
    display: inline-flex !important;
    width: auto !important;
    align-items: center;
    gap: 5px;
    font-size: 12px; color: #64748b;
    background: #f8fafc; border: 1px solid #e2e8f0;
    border-radius: 8px; padding: 3px 8px; line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;        /* the label must not wrap away from its select */
}
.wpl-area-unit-label { flex: 0 0 auto; }
.wpl-area-unit-pill .dashicons { font-size: 14px; width: 14px; height: 14px; }
.wpl-area-unit-pill select.wpl-area-unit-select {
    /* Size */
    width: auto !important;
    min-width: 0 !important;
    max-width: 150px;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 2px !important;
    /* Chrome */
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    /* Type */
    font-size: 12px !important;
    line-height: 1.4 !important;
    font-weight: 600;
    color: #0f172a;
    cursor: pointer;
    outline: none;
}

.wpl-header-badges {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.wpl-badge-verified {
    display: inline-flex;
    align-items: center;
    background-color: #dcfce7;
    color: #166534;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: 600;
}

.wpl-badge-verified .wpl-dot {
    width: 6px;
    height: 6px;
    background: #22c55e;
    border-radius: 50%;
    margin-right: 6px;
}

.wpl-badge-pending {
    display: inline-flex;
    align-items: center;
    background-color: #fef3c7;
    color: #92400e;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: 600;
}

.wpl-badge-pending .wpl-dot {
    width: 6px;
    height: 6px;
    background: #f59e0b;
    border-radius: 50%;
    margin-right: 6px;
}

.wpl-badge-status {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: 600;
}

.wpl-badge-status.sell {
    background: var(--wpl-primary, #be0e0e);
    color: var(--wpl-btn-text, #ffffff);
}

.wpl-badge-status.rent {
    background: var(--wpl-secondary, #d1ae00);
    color: var(--wpl-btn-text, #ffffff);
}

.wpl-title-modern {
    font-size: 1.75em;
    margin: 0 0 10px 0;
    line-height: 1.3;
    font-weight: 700;
    color: #1f2937;
}

.wpl-location-modern {
    color: #6b7280;
    font-size: 0.95em;
    display: flex;
    align-items: center;
    gap: 4px;
}

.wpl-location-modern .dashicons {
    color: var(--wpl-primary, #0073aa);
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.wpl-price-modern {
    font-size: 1.875em;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 4px;
}

.wpl-price-per-sqft {
    font-size: 0.875em;
    color: #6b7280;
    margin-bottom: 15px;
}

.wpl-header-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    /* Four buttons plus a heart do not fit one phone-width line. */
    flex-wrap: wrap;
}

.wpl-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.875em;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s;
}

.wpl-action-btn:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

.wpl-action-btn .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

/* Quick Info Card */
.wpl-quick-info-card {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.wpl-quick-info-item {
    text-align: center;
    padding: 10px;
    border-right: 1px solid #e5e7eb;
}

.wpl-quick-info-item:last-child {
    border-right: none;
}

.wpl-quick-label {
    display: block;
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    font-weight: 600;
    margin-bottom: 6px;
}

.wpl-quick-value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 700;
    color: #1f2937;
    font-size: 0.95em;
}

.wpl-quick-value .dashicons {
    color: var(--wpl-primary, #0073aa);
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Card Sections */
.wpl-card-section {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* Highlight Section - For listing-type specific primary info */
.wpl-highlight-section {
    background: linear-gradient(135deg, #f8fafc 0%, #f0f9ff 100%);
    border: 2px solid var(--wpl-primary, #0073aa);
    border-left-width: 4px;
    position: relative;
}

.wpl-highlight-section::before {
    content: "Key Details";
    position: absolute;
    top: -12px;
    left: 20px;
    background: var(--wpl-primary, #0073aa);
    color: #fff;
    padding: 4px 12px;
    font-size: 0.75em;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wpl-section-title {
    display: flex;
    align-items: center;
    font-size: 1.25em;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 20px 0;
    padding: 0;
    border: none;
}

.wpl-title-bar {
    width: 4px;
    height: 24px;
    background: var(--wpl-primary, #0073aa);
    border-radius: 2px;
    margin-right: 12px;
}

.wpl-description-text {
    line-height: 1.7;
    color: #6b7280;
    font-size: 0.95em;
}

.wpl-description-text p {
    margin-bottom: 16px;
}

/* Details Grid */
.wpl-details-grid-modern {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    column-gap: 2em;
}

.wpl-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #f3f4f6;
}

.wpl-detail-row:last-child {
    border-bottom: none;
}

.wpl-detail-label {
    color: #6b7280;
    font-size: 0.95em;
}

.wpl-detail-value {
    font-weight: 500;
    color: #1f2937;
    font-size: 0.95em;
}

/* Amenities Grid */
.wpl-amenities-grid-modern {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.wpl-amenity-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #f9fafb;
    border-radius: 8px;
    font-size: 0.9em;
    color: #374151;
}

.wpl-amenity-item .dashicons {
    color: var(--wpl-primary, #0073aa);
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Contact Card (Sidebar) */
.wpl-contact-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.wpl-agent-header-new {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e5e7eb;
    align-items: center;
}

.wpl-agent-avatar-new {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.wpl-agent-avatar-new img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wpl-agent-info-new h4 {
    margin: 0 0 2px 0;
    font-size: 0.9em;
    font-weight: 600;
    color: #1f2937;
}

.wpl-agent-company {
    font-size: 0.75em;
    color: #6b7280;
    display: block;
    margin-bottom: 2px;
}

.wpl-agent-phone {
    font-size: 0.75em;
    color: #6b7280;
    display: block;
}

.wpl-form-group-new {
    margin-bottom: 12px;
}

.wpl-form-group-new label {
    display: block;
    font-size: 0.75em;
    font-weight: 500;
    color: #374151;
    margin-bottom: 4px;
}

.wpl-form-group-new input,
.wpl-form-group-new textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.8em;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.wpl-form-group-new input:focus,
.wpl-form-group-new textarea:focus {
    outline: none;
    border-color: var(--wpl-primary, #0073aa);
    box-shadow: 0 0 0 2px rgba(var(--wpl-primary-rgb, 0, 115, 170), 0.1);
}

.wpl-form-group-new textarea {
    resize: vertical;
    min-height: 70px;
}

.wpl-btn-send-inquiry {
    width: 100%;
    padding: 9px 16px;
    background: var(--wpl-primary, #0073aa);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.8em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    margin-bottom: 8px;
}

.wpl-btn-send-inquiry:hover {
    background: var(--wpl-primary-dark, #005a87);
}

.wpl-btn-whatsapp {
    padding: 9px 16px;
    background: #25d366;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.8em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
}

.wpl-btn-whatsapp:hover {
    background: #128c7e;
    color: #fff;
}

.wpl-btn-whatsapp .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

.wpl-whatsapp-standalone {
    margin-top: 16px;
}

/* Old Agent Card (legacy support) */
.wpl-agent-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.wpl-agent-header {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    align-items: center;
}

.wpl-agent-avatar img {
    border-radius: 50%;
    width: 60px;
    height: 60px;
    object-fit: cover;
}

.wpl-agent-info h4 {
    margin: 0 0 5px 0;
    font-size: 1.1em;
}

.wpl-agent-label {
    font-size: 0.85em;
    color: #888;
    display: block;
    margin-bottom: 5px;
}

.wpl-agent-rating {
    font-size: 0.8em;
    color: #666;
}

.wpl-agent-contact-info p {
    margin: 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #555;
}

.wpl-btn-reply {
    width: 100%;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--wpl-primary, #0073aa);
    color: var(--wpl-primary, #0073aa);
    border-radius: 6px;
    font-weight: 600;
    margin-top: 20px;
    cursor: pointer;
    transition: all 0.3s;
}

.wpl-btn-reply:hover {
    background: var(--wpl-primary, #0073aa);
    color: #fff;
}

.wpl-sidebar-widget {
    margin-top: 30px;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
}



.wpl-sidebar-sticky-wrapper {
    position: sticky;
    top: 20px;
}

/* Similar Properties Section */
.wpl-similar-properties-section {
    margin-top: 50px;
    padding-top: 40px;
    border-top: 1px solid #e5e7eb;
}

.wpl-similar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.wpl-similar-header h3 {
    display: flex;
    align-items: center;
    font-size: 1.5em;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}

.wpl-similar-header h3::before {
    content: '';
    width: 4px;
    height: 28px;
    background: var(--wpl-primary, #0073aa);
    border-radius: 2px;
    margin-right: 12px;
}

.wpl-view-all-link {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--wpl-primary, #0073aa);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95em;
}

.wpl-view-all-link:hover {
    text-decoration: underline;
}

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

/* Similar Properties now uses the modern card design from wpl-listings.css */
.wpl-similar-properties-section .wpl-property-card-modern {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.wpl-similar-properties-section .wpl-property-card-modern:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* Old similar card styles kept for backward compatibility */
.wpl-similar-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.wpl-similar-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.wpl-similar-card-image {
    position: relative;
    height: 180px;
    overflow: hidden;
}

.wpl-similar-card-image a {
    display: block;
    width: 100%;
    height: 100%;
}

.wpl-similar-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.wpl-similar-card:hover .wpl-similar-card-image img {
    transform: scale(1.05);
}

.wpl-similar-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.7em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wpl-similar-badge.sell {
    background: var(--wpl-primary, #be0e0e);
    color: var(--wpl-btn-text, #ffffff);
}

.wpl-similar-badge.rent {
    background: var(--wpl-secondary, #d1ae00);
    color: var(--wpl-btn-text, #ffffff);
}

.wpl-similar-fav {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.wpl-similar-fav:hover {
    background: #fff;
}

.wpl-similar-fav .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: #6b7280;
}

.wpl-similar-fav:hover .dashicons {
    color: #ef4444;
}

.wpl-similar-price-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
}

.wpl-similar-price {
    color: #fff;
    font-size: 1.25em;
    font-weight: 700;
}

.wpl-similar-card-content {
    padding: 16px;
}

.wpl-similar-title {
    font-size: 0.95em;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.wpl-similar-title a {
    color: inherit;
    text-decoration: none;
}

.wpl-similar-title a:hover {
    color: var(--wpl-primary, #0073aa);
}

.wpl-similar-location {
    font-size: 0.85em;
    color: #6b7280;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.wpl-similar-location .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    color: var(--wpl-primary, #0073aa);
}

.wpl-similar-meta {
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid #f3f4f6;
}

.wpl-similar-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8em;
    color: #6b7280;
}

.wpl-similar-meta span .dashicons {
    color: var(--wpl-primary, #0073aa);
    font-size: 14px;
    width: 14px;
    height: 14px;
}

/* Contact Form Additions */
.wpl-contact-title {
    font-size: 0.9em;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 12px 0;
}

.wpl-call-section {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
    text-align: center;
}

.wpl-call-section p {
    font-size: 0.75em;
    color: #6b7280;
    margin: 0 0 6px 0;
}

.wpl-call-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--wpl-primary, #0073aa);
    font-weight: 600;
    font-size: 0.85em;
    text-decoration: none;
}

.wpl-call-link:hover {
    text-decoration: underline;
}

.wpl-whatsapp-chat-section {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
    text-align: center;
}

.wpl-whatsapp-chat-section p {
    font-size: 0.75em;
    color: #6b7280;
    margin: 0 0 8px 0;
}

.wpl-btn-whatsapp-chat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    background: #25D366;
    color: #fff !important;
    border: none;
    border-radius: 8px;
    font-size: 0.9em;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.wpl-btn-whatsapp-chat:hover {
    background: #1DA851;
    transform: translateY(-1px);
}

.wpl-btn-whatsapp-chat svg {
    flex-shrink: 0;
}

.wpl-agent-label-new {
    font-size: 0.65em;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 2px;
}

.wpl-agent-name-new {
    margin: 0 0 4px 0;
    font-size: 0.9em;
    font-weight: 600;
    color: #1f2937;
}

.wpl-agent-rating-new {
    display: flex;
    gap: 1px;
}

.wpl-agent-rating-new .dashicons {
    font-size: 12px;
    width: 12px;
    height: 12px;
    color: #fbbf24;
}

/* Lightbox Modal */
.wpl-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
}

.wpl-lightbox.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.wpl-lightbox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
}

.wpl-lightbox-content {
    position: relative;
    width: 90%;
    max-width: 1200px;
    height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.wpl-lightbox-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 40px;
    cursor: pointer;
    z-index: 10;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.wpl-lightbox-close:hover {
    transform: scale(1.2);
}

.wpl-lightbox-image-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
}

.wpl-lightbox-image-wrapper img {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 4px;
}

.wpl-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--wpl-primary, #0073aa);
    color: #fff;
    border: none;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.wpl-lightbox-nav:hover {
    background: var(--wpl-primary-dark, #005a87);
    transform: translateY(-50%) scale(1.1);
}

.wpl-lightbox-prev { left: 20px; }
.wpl-lightbox-next { right: 20px; }

.wpl-lightbox-counter {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 500;
}

.wpl-lightbox-thumbs {
    display: flex;
    gap: 10px;
    padding: 15px 0;
    overflow-x: auto;
    max-width: 100%;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.3) transparent;
}

.wpl-lightbox-thumbs::-webkit-scrollbar {
    height: 6px;
}

.wpl-lightbox-thumbs::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.3);
    border-radius: 3px;
}

.wpl-lightbox-thumb {
    flex: 0 0 80px;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.3s, border-color 0.3s;
    border: 3px solid transparent;
}

.wpl-lightbox-thumb:hover {
    opacity: 0.8;
}

.wpl-lightbox-thumb.active {
    opacity: 1;
    border-color: var(--wpl-primary, #0073aa);
}

.wpl-lightbox-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Responsive */
@media (max-width: 1024px) {
    .wpl-similar-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .wpl-modern-gallery {
        flex-direction: column;
    }
    
    .wpl-gallery-thumbs-wrapper {
        width: 100%;
        flex-direction: row;
    }
    
    .wpl-gallery-thumbs {
        flex-direction: row;
        max-height: none;
        overflow-x: auto;
        gap: 8px;
    }
    
    .wpl-thumb-item {
        width: 80px;
        height: 60px;
    }
    
    .wpl-property-container-grid {
        grid-template-columns: 1fr;
    }
    
    /* One column, so every child falls into source order: badges, title,
       price, location, actions — which is the order asked for. */
    .wpl-header-top {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 6px;
    }

    .wpl-header-top > .wpl-header-badges,
    .wpl-header-top > .wpl-title-modern,
    .wpl-header-top > .wpl-header-price,
    .wpl-header-top > .wpl-location-modern,
    .wpl-header-top > .wpl-header-actions {
        grid-column: 1;
        grid-row: auto;
        text-align: left;
    }

    .wpl-header-top > .wpl-header-actions {
        justify-content: flex-start;
        margin-top: 10px;
    }

    /* Stacked again on a phone: side by side they wrap mid-chip. */
    .wpl-under-gallery {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    /* Long titles and price ranges ("₹ 1.98 Cr - ₹ 5 Cr") need room to break. */
    .wpl-title-modern {
        font-size: 1.35em;
        overflow-wrap: anywhere;
    }

    .wpl-price-modern {
        font-size: 1.5em;
        overflow-wrap: anywhere;
    }

    .wpl-price-per-sqft {
        margin-bottom: 12px;
    }
    
    .wpl-quick-info-card {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .wpl-quick-info-item:nth-child(2) {
        border-right: none;
    }
    
    .wpl-quick-info-item:nth-child(3),
    .wpl-quick-info-item:nth-child(4) {
        border-top: 1px solid #e5e7eb;
    }
    
    .wpl-details-grid-modern {
        grid-template-columns: 1fr;
    }
    
    .wpl-amenities-grid-modern {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .wpl-similar-grid {
        grid-template-columns: 1fr;
    }
    
    .wpl-gallery-main {
        height: 300px;
    }
    
    .wpl-gallery-nav {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    
    .wpl-gallery-prev { left: 10px; }
    .wpl-gallery-next { right: 10px; }
    
    /* Lightbox Mobile */
    .wpl-lightbox-nav {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    
    .wpl-lightbox-prev { left: 10px; }
    .wpl-lightbox-next { right: 10px; }
    
    .wpl-lightbox-image-wrapper img {
        max-height: 50vh;
    }
    
    .wpl-lightbox-thumb {
        flex: 0 0 60px;
        height: 45px;
    }
    
    #wpl-inquiry-form-wrapper {
        position: static;
    }
}

/* =========================================
   PROJECT HIGHLIGHTS SECTION (Builder Projects)
   ========================================= */

.wpl-project-feature-section {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
}

.wpl-project-feature-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.wpl-feature-title {
    font-size: 15px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wpl-feature-title .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: var(--wpl-primary, #0064d1);
}

.wpl-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.wpl-feature-tag {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.wpl-config-tag {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
    border: 1px solid #93c5fd;
}

.wpl-config-tag:hover {
    background: linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%);
    transform: translateY(-2px);
}

.wpl-type-tag {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #065f46;
    border: 1px solid #6ee7b7;
}

.wpl-type-tag:hover {
    background: linear-gradient(135deg, #a7f3d0 0%, #6ee7b7 100%);
    transform: translateY(-2px);
}

.wpl-facing-tag {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border: 1px solid #fcd34d;
}

.wpl-facing-tag:hover {
    background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%);
    transform: translateY(-2px);
}

/* =========================================
   FLOOR PLANS SECTION
   ========================================= */

.wpl-floor-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.wpl-floor-plan-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

.wpl-floor-plan-item:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    transform: translateY(-3px);
}

.wpl-floor-plan-item a {
    display: block;
    position: relative;
}

.wpl-floor-plan-item img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

.wpl-zoom-icon {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.wpl-floor-plan-item:hover .wpl-zoom-icon {
    opacity: 1;
}

.wpl-zoom-icon .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

@media (max-width: 768px) {
    .wpl-floor-plans-grid {
        grid-template-columns: 1fr;
    }
    
    .wpl-floor-plan-item img {
        height: 180px;
    }
    
    .wpl-tags-container {
        gap: 8px;
    }
    
    .wpl-feature-tag {
        padding: 6px 12px;
        font-size: 12px;
    }
    
    /* Remove padding on mobile */
    .wpl-single-property-modern {
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    /*
     * Anything not named below sorts AFTER the named blocks, not before them.
     *
     * The rules under this one reorder the page for mobile, and a flex child
     * with no `order` gets 0 — which sorts ahead of everything carrying
     * order:1..5. So "Recently Viewed", the last block in the markup, was
     * rendering first on every phone, and any block added to this template in
     * future would have done the same. The default belongs here, once, rather
     * than as a rule per section somebody has to remember to add.
     */
    .wpl-single-property-modern > * {
        order: 6;
    }

    /*
     * padding: 0 above is for the gallery, which should run edge to edge on a
     * phone. Everything else is text, and text against the bezel is the thing
     * that makes a page look unfinished rather than full-bleed. So the padding
     * moves onto the blocks that need it instead of coming off the page.
     */
    .wpl-single-property-modern > .wpl-header-modern,
    .wpl-single-property-modern > .wpl-property-container-grid,
    .wpl-single-property-modern > .wpl-similar-properties-section,
    .wpl-single-property-modern > .wpl-recently-viewed {
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
        max-width: 100%;
    }

    /* Swap order - Gallery first on mobile */
    .wpl-modern-gallery {
        order: 1 !important;
        margin-bottom: 0;
    }
    
    .wpl-header-modern {
        order: 2 !important;
        padding-top: 16px;
    }
    
    /* Lightbox stays hidden but needs order */
    .wpl-lightbox {
        order: 3 !important;
    }
    
    .wpl-property-container-grid {
        order: 4 !important;
    }
    
    .wpl-similar-properties-section {
        order: 5 !important;
    }
    .wpl-single-property-modern > script {
        order: 99 !important;
    }
}

/* =========================================
   FLOATING INQUIRE BUTTON
   ========================================= */

.wpl-floating-inquire-btn {
    display: none;
}

@media (max-width: 768px) {
    .wpl-floating-inquire-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        position: fixed;
        bottom: 20px;
        right: 16px;
        padding: 14px 24px;
        background: var(--wpl-primary, #4f46e5);
        color: #fff;
        border: none;
        border-radius: 50px;
        font-size: 1em;
        font-weight: 600;
        cursor: pointer;
        z-index: 998;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        transition: transform 0.2s, opacity 0.3s;
    }
    
    .wpl-floating-inquire-btn:hover {
        transform: translateY(-2px);
    }
    
    .wpl-floating-inquire-btn .dashicons {
        font-size: 18px;
        width: 18px;
        height: 18px;
    }
    
    .wpl-floating-inquire-btn.hidden {
        opacity: 0;
        pointer-events: none;
        transform: translateY(20px);
    }
}

/* =========================================
   MEDIA — video, 360 tour, brochure
   =========================================
   A section each, so the tab strip gives each its own tab. Shared styling only
   — the sections themselves live in wpl-single-property.php. */

.wpl-media-aside {
    margin: 8px 0 0;
    text-align: right;
    font-size: 0.85em;
}

.wpl-virtual-tour-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 10px;
}
.wpl-virtual-tour-container iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.wpl-brochure-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
}
.wpl-brochure-link:hover { border-color: var(--wpl-primary, #0073aa); }
.wpl-brochure-link strong { display: block; }
.wpl-brochure-link small { color: #6b7280; }
.wpl-brochure-ico { font-size: 22px; }

/* Specifications — free text the agent typed, so it needs reading width and
   paragraph spacing rather than the tight rhythm of a spec table. */
.wpl-specs-body {
    max-width: 68ch;
    color: #374151;
    line-height: 1.65;
}
.wpl-specs-body p { margin: 0 0 12px; }
.wpl-specs-body p:last-child { margin-bottom: 0; }