/* =========================================================
   DDF Listings — Frontend Styles (clean rebuild)
   ========================================================= */

:root {
    --ddf-primary:   #c8102e;
    --ddf-dark:      #1a1a2e;
    --ddf-gray:      #6b7280;
    --ddf-light:     #f9fafb;
    --ddf-border:    #e5e7eb;
    --ddf-radius:    10px;
    --ddf-shadow:    0 2px 8px rgba(0,0,0,0.08);
    --ddf-shadow-lg: 0 8px 32px rgba(0,0,0,0.15);
}

/* =========================================================
   LISTING GRID
   ========================================================= */
.ddf-listings-grid { display: grid; gap: 24px; margin: 24px 0; }
.ddf-cols-1 { grid-template-columns: 1fr; }
.ddf-cols-2 { grid-template-columns: repeat(2, 1fr); }
.ddf-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ddf-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media(max-width:1024px) { .ddf-cols-3,.ddf-cols-4 { grid-template-columns: repeat(2,1fr); } }
@media(max-width:640px)  { .ddf-listings-grid { grid-template-columns: 1fr; } }

/* =========================================================
   LISTING CARD
   ========================================================= */
.ddf-card {
    background: #fff;
    border: 1px solid var(--ddf-border);
    border-radius: var(--ddf-radius);
    overflow: hidden;
    box-shadow: var(--ddf-shadow);
    transition: transform .2s, box-shadow .2s;
}
.ddf-card:hover { transform: translateY(-3px); box-shadow: var(--ddf-shadow-lg); }
.ddf-card-image-link { display: block; position: relative; }
.ddf-card-image { width: 100%; height: 210px; object-fit: cover; display: block; }
.ddf-no-image { height: 210px; display: flex; align-items: center; justify-content: center; background: #f3f4f6; color: var(--ddf-gray); font-size: 14px; }
.ddf-card-body { padding: 16px; }
.ddf-card-price { font-size: 22px; font-weight: 700; color: var(--ddf-primary); margin-bottom: 4px; }
.ddf-card-address { font-size: 15px; font-weight: 600; margin: 0 0 2px; line-height: 1.4; }
.ddf-card-address a { color: var(--ddf-dark); text-decoration: none; }
.ddf-card-address a:hover { color: var(--ddf-primary); }
.ddf-card-city { font-size: 13px; color: var(--ddf-gray); margin: 0 0 10px; }
.ddf-card-mls { font-size: 11px; color: #9ca3af; margin: 8px 0 0; }
.ddf-open-house-time { font-size: 12px; color: #059669; font-weight: 600; margin: 4px 0; }

/* Card stats — label above value */
.ddf-card-stats { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.ddf-card-stat { display: flex; flex-direction: column; align-items: center; min-width: 40px; }
.ddf-card-stat-label { font-size: 10px; font-weight: 700; color: var(--ddf-gray); text-transform: uppercase; letter-spacing: .5px; line-height: 1; margin-bottom: 2px; }
.ddf-card-stat-val { font-size: 15px; font-weight: 700; color: var(--ddf-dark); line-height: 1; }

/* Card snippet */
.ddf-card-snippet { font-size: 12px; color: var(--ddf-gray); line-height: 1.5; margin: 6px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* =========================================================
   BADGES
   ========================================================= */
.ddf-badge { position: absolute; padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; }
.ddf-badge-open-house { top: 10px; left: 10px; background: #059669; color: #fff; }
.ddf-badge-type { top: 10px; right: 10px; background: rgba(0,0,0,.55); color: #fff; }
.ddf-badge-lg { position: static; display: inline-block; font-size: 13px; padding: 6px 14px; margin-bottom: 12px; }

/* =========================================================
   SEARCH FORM
   ========================================================= */
.ddf-search-form { background: var(--ddf-light); border: 1px solid var(--ddf-border); border-radius: var(--ddf-radius); margin-bottom: 24px; overflow: visible; } /* visible so tooltip can float above */

/* Single combined top row: type chips + results count + sort + per-page */
.ddf-type-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 16px;
    background: #f3f4f6;
    border-bottom: 1px solid var(--ddf-border);
}
.ddf-type-row-label { font-size: 11px; font-weight: 700; color: var(--ddf-gray); text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; margin-right: 4px; }
.ddf-type-chip { display: inline-flex; align-items: center; cursor: pointer; user-select: none; }
.ddf-type-chip input[type="checkbox"] { display: none; }
.ddf-type-chip span {
    display: inline-block;
    position: static;
    padding: 4px 12px;
    border: 1px solid var(--ddf-border);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: #374151;
    background: #fff;
    transition: all .15s;
    white-space: nowrap;
}
.ddf-type-chip input:checked + span { background: var(--ddf-primary); border-color: var(--ddf-primary); color: #fff; }
.ddf-type-chip:hover span { border-color: var(--ddf-primary); }

/* Tooltip text hidden in DOM — JS reads it and shows the fixed popup instead */
.ddf-chip-tooltip { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; overflow: hidden !important; position: absolute !important; }

/* The floating tooltip div injected by JS */
#ddf-chip-tooltip-popup {
    position: fixed;
    background: #1a1a2e;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
    padding: 8px 14px;
    border-radius: 6px;
    white-space: normal;
    max-width: 260px;
    box-shadow: 0 4px 16px rgba(0,0,0,.3);
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
}
#ddf-chip-tooltip-popup.visible { opacity: 1; }

/* Spacer pushes sort/results to the right */
.ddf-type-row-spacer { flex: 1; min-width: 16px; }

/* Inline sort controls in the type row */
.ddf-type-row .ddf-results-count { font-size: 12px; color: var(--ddf-gray); font-style: italic; white-space: nowrap; }
.ddf-type-row .ddf-sort-label { font-size: 11px; font-weight: 600; color: var(--ddf-gray); text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
.ddf-type-row select {
    padding: 4px 8px !important;
    border: 1px solid var(--ddf-border) !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    background: #fff !important;
    cursor: pointer !important;
    height: 28px !important;
    width: auto !important;
    max-width: 140px !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    display: inline-block !important;
}

/* Filter row */
.ddf-search-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; padding: 16px; }
.ddf-field { display: flex; flex-direction: column; gap: 4px; min-width: 130px; flex: 1; }
.ddf-field label { font-size: 12px; font-weight: 600; color: var(--ddf-gray); text-transform: uppercase; letter-spacing: .4px; }
.ddf-field select, .ddf-field input { padding: 8px 12px; border: 1px solid var(--ddf-border); border-radius: 6px; font-size: 14px; background: #fff; }
.ddf-field-btn { flex-direction: row; gap: 8px; min-width: auto; align-items: flex-end; }

/* Buttons */
.ddf-btn { padding: 9px 20px; border-radius: 6px; border: none; cursor: pointer; font-size: 14px; font-weight: 600; transition: opacity .2s; white-space: nowrap; }
.ddf-btn:hover { opacity: .88; }
.ddf-btn-search { background: var(--ddf-primary); color: #fff; }
.ddf-btn-save   { background: var(--ddf-dark); color: #fff; }
.ddf-btn-lead   { background: var(--ddf-primary); color: #fff; width: 100%; padding: 12px; font-size: 15px; }
.ddf-btn-calc   { background: var(--ddf-accent, #2563eb); color: #fff; width: 100%; margin-top: 8px; }

.ddf-no-results { color: var(--ddf-gray); font-style: italic; padding: 32px; text-align: center; grid-column: 1/-1; }

/* =========================================================
   SINGLE LISTING PAGE
   ========================================================= */
.ddf-single-listing { max-width: 1200px; margin: 0 auto; padding: 24px 16px; }
.ddf-single-layout { display: grid; grid-template-columns: 1fr 360px; gap: 32px; align-items: start; }
@media(max-width:900px) { .ddf-single-layout { grid-template-columns: 1fr; } }

/* H1 */
.ddf-listing-h1 { font-size: 26px; font-weight: 800; color: var(--ddf-dark); line-height: 1.25; margin: 0 0 12px; }
@media(max-width:640px) { .ddf-listing-h1 { font-size: 20px; } }

/* Price row */
.ddf-listing-price-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ddf-listing-price { font-size: 28px; font-weight: 800; color: var(--ddf-primary); }
.ddf-listing-location { font-size: 14px; color: var(--ddf-gray); margin: 0 0 20px; }

/* Removed from feed notice */
.ddf-removed-notice { display: block; font-size: 28px; font-weight: 700; color: #cc0000; margin-bottom: 20px; line-height: 1.3; }

/* =========================================================
   MEDIA — Featured image + thumb strip
   ========================================================= */
.ddf-media-section { margin-bottom: 28px; }

.ddf-media-featured { position: relative; margin-bottom: 10px; }
.ddf-featured-img {
    width: 100%;
    height: 460px;
    object-fit: cover;
    border-radius: var(--ddf-radius);
    display: block;
    cursor: pointer;
    transition: opacity .15s;
}
.ddf-featured-img:hover { opacity: .93; }
.ddf-photo-badge {
    position: absolute;
    bottom: 12px; right: 12px;
    background: rgba(0,0,0,.6);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    pointer-events: none;
}

/* Horizontal scrolling thumbnail strip */
.ddf-media-section {
    /* Prevent any child from exceeding the column width */
    overflow: hidden;
    width: 100%;
}
.ddf-thumb-strip {
    display: flex;
    gap: 6px;
    overflow-x: scroll;
    overflow-y: hidden;
    padding-bottom: 10px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: #9ca3af #f3f4f6;
    /* Hard-clamp to parent width — never wider than featured image */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}
.ddf-thumb-strip::-webkit-scrollbar { height: 8px; }
.ddf-thumb-strip::-webkit-scrollbar-track { background: #f3f4f6; border-radius: 4px; }
.ddf-thumb-strip::-webkit-scrollbar-thumb { background: #9ca3af; border-radius: 4px; }
.ddf-thumb-strip::-webkit-scrollbar-thumb:hover { background: #6b7280; }

.ddf-thumb-btn {
    /* Fixed pixel width — 4 across with gaps = (parent - 3*6px) / 4 ≈ 23.5% */
    flex: 0 0 23%;
    padding: 0;
    border: 3px solid transparent;
    background: none;
    cursor: pointer;
    border-radius: 6px;
    overflow: hidden;
    scroll-snap-align: start;
    transition: border-color .15s;
    /* Critical: never shrink, never grow beyond set size */
    min-width: 0;
    max-width: 23%;
}
.ddf-thumb-btn img { width: 100%; height: 70px; object-fit: cover; display: block; }
.ddf-thumb-btn:hover { border-color: #9ca3af; }
.ddf-thumb-btn.ddf-thumb-active { border-color: var(--ddf-primary); }

/* =========================================================
   DESCRIPTION
   ========================================================= */
.ddf-listing-desc-section {
    margin-bottom: 28px;
    padding: 20px;
    background: var(--ddf-light);
    border-radius: var(--ddf-radius);
    border: 1px solid var(--ddf-border);
}
.ddf-listing-desc-text { font-size: 15px; line-height: 1.75; color: #374151; margin: 0; }

/* =========================================================
   FEATURES TABLE
   ========================================================= */
.ddf-features-section { margin-bottom: 28px; }
.ddf-features-h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--ddf-dark);
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--ddf-primary);
    display: inline-block;
}
/* =========================================================
   FEATURES — Option C: two-column card layout
   Label on top (grey), value below (white), stacked per field
   ========================================================= */
.ddf-features-section .ddf-features-table-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    border: none;
    background: none;
}
/* Hide the actual table — we render via PHP into divs now */
.ddf-features-table { display: none; }

/* Card grid is rendered by PHP as .ddf-feat-grid */
.ddf-feat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.ddf-feat-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ddf-feat-item {
    background: var(--ddf-border, #e5e7eb);
    border-radius: 8px;
    overflow: hidden;
    border: none;
}
.ddf-feat-label {
    display: block;
    padding: 6px 14px 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #4b4b4b;
    background: #d4d4cf;
}
.ddf-feat-value {
    display: block;
    padding: 5px 14px 10px;
    font-size: 14px;
    color: var(--ddf-dark);
    background: #fff;
    line-height: 1.5;
}
@media(max-width:640px) { .ddf-feat-grid { grid-template-columns: 1fr; } }

/* =========================================================
   DIRECTIONS + REALTOR
   ========================================================= */
.ddf-directions-section { margin-bottom: 24px; }
.ddf-btn-directions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    background: #4b5563;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
    transition: background .2s, transform .15s;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.ddf-btn-directions:hover { background: #374151; color: #fff !important; transform: translateY(-1px); text-decoration: none; }
.ddf-btn-directions,
.ddf-btn-directions:visited,
.ddf-btn-directions:active { color: #fff !important; }

.ddf-realtor-section {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--ddf-light);
    border: 1px solid var(--ddf-border);
    border-radius: var(--ddf-radius);
    margin-bottom: 28px;
    font-size: 14px;
}
.ddf-realtor-label { color: var(--ddf-gray); font-size: 13px; }
.ddf-realtor-office { font-weight: 600; color: var(--ddf-dark); }
.ddf-mls-tag { margin-left: auto; font-size: 12px; color: var(--ddf-gray); background: #fff; border: 1px solid var(--ddf-border); border-radius: 4px; padding: 3px 8px; }

/* =========================================================
   SIMILAR LISTINGS
   ========================================================= */
.ddf-similar-section { margin-bottom: 32px; }
.ddf-similar-h3 { font-size: 20px; font-weight: 700; color: var(--ddf-dark); margin: 0 0 16px; padding-bottom: 10px; border-bottom: 2px solid var(--ddf-primary); display: inline-block; }
.ddf-similar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media(max-width:700px) { .ddf-similar-grid { grid-template-columns: 1fr; } }
.ddf-similar-card { background: #fff; border: 1px solid var(--ddf-border); border-radius: var(--ddf-radius); overflow: hidden; box-shadow: var(--ddf-shadow); transition: transform .2s, box-shadow .2s; }
.ddf-similar-card:hover { transform: translateY(-3px); box-shadow: var(--ddf-shadow-lg); }
.ddf-similar-img-link { display: block; position: relative; }
.ddf-similar-img { width: 100%; height: 150px; object-fit: cover; display: block; }
.ddf-similar-type-badge { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.55); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: .3px; }
.ddf-similar-body { padding: 12px; }
.ddf-similar-price { font-size: 17px; font-weight: 800; color: var(--ddf-primary); margin-bottom: 3px; }
.ddf-similar-address { font-size: 13px; font-weight: 600; margin: 0 0 2px; line-height: 1.35; }
.ddf-similar-address a { color: var(--ddf-dark); text-decoration: none; }
.ddf-similar-address a:hover { color: var(--ddf-primary); }
.ddf-similar-location { font-size: 12px; color: var(--ddf-gray); margin: 0 0 6px; }
.ddf-similar-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.ddf-similar-stat { display: flex; flex-direction: column; align-items: center; min-width: 36px; }
.ddf-stat-label { font-size: 10px; font-weight: 700; color: var(--ddf-gray); text-transform: uppercase; letter-spacing: .4px; line-height: 1; margin-bottom: 2px; }
.ddf-stat-val { font-size: 14px; font-weight: 700; color: var(--ddf-dark); line-height: 1; }
.ddf-similar-snippet { font-size: 12px; color: var(--ddf-gray); line-height: 1.45; margin: 4px 0 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* =========================================================
   SIDEBAR
   ========================================================= */
.ddf-single-sidebar { display: flex; flex-direction: column; gap: 20px; }
.ddf-widget-card { background: #fff; border: 1px solid var(--ddf-border); border-radius: var(--ddf-radius); padding: 20px; box-shadow: var(--ddf-shadow); }
.ddf-widget-title { font-size: 15px; font-weight: 700; color: var(--ddf-dark); margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--ddf-border); }

/* Lead form */
.ddf-lead-form-wrap { background: #fff; border: 1px solid var(--ddf-border); border-radius: var(--ddf-radius); padding: 20px; box-shadow: var(--ddf-shadow); }
.ddf-lead-form-title { font-size: 16px; font-weight: 700; color: var(--ddf-dark); margin: 0 0 4px; }
.ddf-lead-form-address { font-size: 12px; color: var(--ddf-gray); margin: 0 0 16px; }
.ddf-form-row { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.ddf-form-field { display: flex; flex-direction: column; gap: 4px; }
.ddf-form-field label { font-size: 12px; font-weight: 600; color: var(--ddf-gray); text-transform: uppercase; letter-spacing: .4px; }
.ddf-form-field input, .ddf-form-field textarea { padding: 9px 12px; border: 1px solid var(--ddf-border); border-radius: 6px; font-size: 14px; font-family: inherit; resize: vertical; }
.ddf-form-field input:focus, .ddf-form-field textarea:focus { outline: none; border-color: var(--ddf-primary); box-shadow: 0 0 0 3px rgba(200,16,46,.1); }
.ddf-form-status { margin-top: 12px; padding: 10px; border-radius: 6px; font-size: 14px; display: none; }
.ddf-form-status.success { background: #d1fae5; color: #065f46; display: block; }
.ddf-form-status.error   { background: #fee2e2; color: #991b1b; display: block; }

/* Mortgage calculator */
.ddf-mortgage-fields { display: flex; flex-direction: column; gap: 8px; }
.ddf-mortgage-fields label { font-size: 12px; font-weight: 600; color: var(--ddf-gray); text-transform: uppercase; letter-spacing: .4px; }
.ddf-mortgage-fields input, .ddf-mortgage-fields select { padding: 8px 10px; border: 1px solid var(--ddf-border); border-radius: 6px; font-size: 14px; }
.ddf-mortgage-result { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ddf-border); text-align: center; }
.mc-monthly { font-size: 26px; font-weight: 800; color: var(--ddf-primary); }
.mc-monthly small { font-size: 14px; font-weight: 400; color: var(--ddf-gray); }
#mc-freq-label { font-size: 14px; font-weight: 400; color: var(--ddf-gray); margin-left: 2px; }
.mc-breakdown { font-size: 12px; color: var(--ddf-gray); margin: 6px 0; }
.mc-disclaimer { font-size: 11px; color: #9ca3af; margin-top: 8px; line-height: 1.5; }

/* Saved searches */
.ddf-saved-list { list-style: none; margin: 0; padding: 0; }
.ddf-saved-list li { padding: 8px 0; border-bottom: 1px solid var(--ddf-border); font-size: 13px; display: flex; justify-content: space-between; align-items: center; }
.ddf-saved-list li:last-child { border-bottom: none; }
.ddf-saved-list a { color: var(--ddf-primary); text-decoration: none; flex: 1; }
.ddf-saved-list a:hover { text-decoration: underline; }
.ddf-saved-delete { background: none; border: none; color: #9ca3af; cursor: pointer; font-size: 16px; padding: 0 4px; }
.ddf-saved-delete:hover { color: var(--ddf-primary); }
.ddf-saved-loading { color: var(--ddf-gray); font-style: italic; }

/* =========================================================
   MAP
   ========================================================= */
.ddf-map-wrap { margin: 20px 0; }
#ddf-map { border-radius: var(--ddf-radius); overflow: hidden; border: 1px solid var(--ddf-border); }
.ddf-map-notice { display: flex; align-items: center; justify-content: center; height: 100%; background: var(--ddf-light); color: var(--ddf-gray); font-size: 14px; text-align: center; padding: 32px; }

/* =========================================================
   LIGHTBOX
   ========================================================= */
.ddf-lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 99999; align-items: center; justify-content: center; }
.ddf-lightbox.active { display: flex; }
.ddf-lb-img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 6px; }
.ddf-lb-close, .ddf-lb-prev, .ddf-lb-next { position: fixed; background: rgba(255,255,255,.15); border: none; color: #fff; cursor: pointer; font-size: 28px; border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.ddf-lb-close:hover,.ddf-lb-prev:hover,.ddf-lb-next:hover { background: rgba(255,255,255,.3); }
.ddf-lb-close { top: 20px; right: 20px; }
.ddf-lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.ddf-lb-next { right: 16px; top: 50%; transform: translateY(-50%); }
.ddf-lb-inner { position: relative; display: flex; flex-direction: column; align-items: center; }
.ddf-lb-counter { color: rgba(255,255,255,.75); font-size: 13px; margin-top: 10px; letter-spacing: .5px; }

/* =========================================================
   DISCLAIMER / REALTOR.CA BADGE
   ========================================================= */
.ddf-disclaimer-footer { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--ddf-border); }
.ddf-disclaimer-footer p { font-size: 11px; color: #9ca3af; margin: 0 0 12px; }
.ddf-realtor-badge { display: inline-block; }
.ddf-realtor-badge img { display: block; }

/* =========================================================
   SITEWIDE TRADEMARK STATEMENT
   ========================================================= */
#ddf-trademark-statement { width: 100%; background: #f9fafb; border-top: 1px solid #e5e7eb; color: #6b7280; font-size: 11px; line-height: 1.6; text-align: center; padding: 12px 24px; box-sizing: border-box; }

/* =========================================================
   OPEN HOUSES
   ========================================================= */
.ddf-open-houses { margin: 24px 0; }
.ddf-section-title { font-size: 20px; font-weight: 700; color: var(--ddf-dark); margin-bottom: 16px; }

/* =========================================================
   TOAST
   ========================================================= */
.ddf-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: #1a1a2e; color: #fff; padding: 10px 24px; border-radius: 24px; font-size: 14px; font-weight: 600; opacity: 0; transition: all .3s; z-index: 99998; pointer-events: none; }
.ddf-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Hide breadcrumbs on listing pages */
.ddf-breadcrumb { display: none !important; }

/* =========================================================
   HERO SEARCH — [ddf_hero_search]
   ========================================================= */
.ddf-hero-search-wrap {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    overflow: hidden;
    min-height: 280px;
}
/* Full-cover overlay — covers the .ddf-hero-search-wrap area.
   background colour + opacity are set via inline style from shortcode. */
.ddf-hero-search-bg-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
}
.ddf-hero-search-overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 700px;
    padding: 48px 32px;
    text-align: center;
    background: transparent;
    margin: 0 auto;
}
.ddf-hero-search-title {
    color: #fff;
    font-size: 32px;
    font-weight: 800;
    margin: 0 0 24px;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
@media(max-width:640px) { .ddf-hero-search-title { font-size: 22px; } }

.ddf-hero-search-row {
    display: flex;
    gap: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,.3);
}
.ddf-hero-input {
    flex: 1;
    padding: 18px 24px;
    font-size: 16px;
    border: none;
    outline: none;
    background: #fff;
    color: #1a1a2e;
    border-radius: 8px 0 0 8px;
    min-width: 0;
}
.ddf-hero-input::placeholder { color: #9ca3af; }
.ddf-hero-btn {
    padding: 18px 32px;
    background: var(--ddf-primary);
    color: #fff;
    border: none;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 0 8px 8px 0;
    white-space: nowrap;
    transition: background .2s;
}
.ddf-hero-btn:hover { background: #a00d24; }

/* Hero results dropdown */
.ddf-hero-results {
    display: none;
    background: #fff;
    border-radius: 8px;
    margin-top: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,.25);
    overflow: hidden;
    text-align: left;
}
.ddf-hero-result-list { list-style: none; margin: 0; padding: 0; }
.ddf-hero-result-item { border-bottom: 1px solid var(--ddf-border); }
.ddf-hero-result-item:last-child { border-bottom: none; }
.ddf-hero-result-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none;
    color: var(--ddf-dark);
    transition: background .15s;
}
.ddf-hero-result-link:hover { background: #f9fafb; color: var(--ddf-dark); }
.ddf-hero-result-img { width: 56px; height: 42px; object-fit: cover; border-radius: 5px; flex-shrink: 0; }
.ddf-hero-result-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ddf-hero-result-address { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ddf-hero-result-meta { font-size: 12px; color: var(--ddf-gray); }
.ddf-hero-result-mls { font-size: 11px; color: #9ca3af; }
.ddf-hero-no-results { font-size: 14px; color: var(--ddf-gray); padding: 16px; margin: 0; text-align: center; }

/* ---- Elementor override — prevent it resetting our gallery images ---- */
.ddf-thumb-strip img,
.ddf-thumb-btn img {
    width: 100% !important;
    height: 70px !important;
    object-fit: cover !important;
    display: block !important;
    max-width: 100% !important;
    margin: 0 !important;
    min-width: 0 !important;
}
/* Prevent thumb strip from ever overflowing the page */
.ddf-single-main {
    min-width: 0;
    overflow: hidden;
}
.ddf-featured-img {
    width: 100% !important;
    height: 460px !important;
    object-fit: cover !important;
    display: block !important;
    cursor: pointer;
}

/* =========================================================
   LISTING NAV — prev/next + back to results
   ========================================================= */
.ddf-listing-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: var(--ddf-light);
    border: 1px solid var(--ddf-border);
    border-radius: var(--ddf-radius);
    flex-wrap: wrap;
    gap: 8px;
}
.ddf-nav-back {
    font-size: 14px;
    font-weight: 600;
    color: var(--ddf-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ddf-nav-back:hover { text-decoration: underline; color: var(--ddf-primary); }
.ddf-listing-nav-arrows { display: flex; gap: 8px; }
.ddf-nav-arrow {
    font-size: 13px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 6px;
    border: 1px solid var(--ddf-border);
    background: #fff;
    color: var(--ddf-dark);
    text-decoration: none;
    transition: background .15s;
}
.ddf-nav-arrow:hover { background: var(--ddf-light); color: var(--ddf-dark); text-decoration: none; }
.ddf-nav-disabled {
    font-size: 13px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 6px;
    border: 1px solid var(--ddf-border);
    background: #f9fafb;
    color: #9ca3af;
    cursor: default;
}

/* =========================================================
   SORT ROW + PER PAGE
   ========================================================= */
/* Sort controls now live inside .ddf-type-row — see above */

/* =========================================================
   PAGINATION
   ========================================================= */
.ddf-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 28px 0 8px;
    padding: 16px 0;
    border-top: 1px solid var(--ddf-border);
}
.ddf-pagination-info {
    font-size: 13px;
    color: var(--ddf-gray);
}
.ddf-pagination-pages {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.ddf-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--ddf-border);
    border-radius: 6px;
    background: #fff;
    color: var(--ddf-dark);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all .15s;
    cursor: pointer;
}
.ddf-page-btn:hover { background: var(--ddf-light); border-color: var(--ddf-primary); color: var(--ddf-primary); text-decoration: none; }
.ddf-page-current { background: var(--ddf-primary) !important; border-color: var(--ddf-primary) !important; color: #fff !important; cursor: default; }
.ddf-page-disabled { background: #f9fafb; color: #9ca3af; cursor: default; pointer-events: none; }
.ddf-page-ellipsis { font-size: 13px; color: var(--ddf-gray); padding: 0 4px; line-height: 36px; }

/* =========================================================
   LISTING CAROUSEL — [ddf_carousel]
   ========================================================= */
.ddf-carousel-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--ddf-dark);
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--ddf-primary);
    display: inline-block;
}
.ddf-carousel-wrap {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 28px;
}
.ddf-carousel-track-wrap {
    flex: 1;
    overflow: hidden;
}
.ddf-carousel-track {
    display: flex;
    transition: transform .35s ease;
    will-change: transform;
}
.ddf-carousel-card {
    flex-shrink: 0;
    padding: 0 6px;
    box-sizing: border-box;
}
.ddf-carousel-card > a.ddf-carousel-img-link {
    display: block;
    position: relative;
    border-radius: var(--ddf-radius) var(--ddf-radius) 0 0;
    overflow: hidden;
}
.ddf-carousel-card img {
    width: 100%;
    object-fit: cover;
    display: block;
    border-radius: var(--ddf-radius) var(--ddf-radius) 0 0;
}
.ddf-carousel-no-img {
    width: 100%;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ddf-gray);
    font-size: 13px;
    border-radius: var(--ddf-radius) var(--ddf-radius) 0 0;
}
.ddf-carousel-body {
    background: #fff;
    border: 1px solid var(--ddf-border);
    border-top: none;
    border-radius: 0 0 var(--ddf-radius) var(--ddf-radius);
    padding: 12px 14px;
}
.ddf-carousel-price { font-size: 18px; font-weight: 800; color: var(--ddf-primary); margin-bottom: 3px; }
.ddf-carousel-address { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.ddf-carousel-address a { color: var(--ddf-dark); text-decoration: none; }
.ddf-carousel-address a:hover { color: var(--ddf-primary); }
.ddf-carousel-location { font-size: 12px; color: var(--ddf-gray); margin-bottom: 4px; }
.ddf-carousel-stats { font-size: 12px; color: var(--ddf-gray); }

/* Prev/Next buttons */
.ddf-carousel-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--ddf-border);
    background: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ddf-dark);
    transition: all .15s;
    z-index: 2;
    margin: 0 6px;
}
.ddf-carousel-btn:hover { background: var(--ddf-primary); border-color: var(--ddf-primary); color: #fff; }
.ddf-carousel-btn:disabled { opacity: .35; cursor: default; pointer-events: none; }

/* =========================================================
   FLOATING ACTION BUTTON STACK
   ========================================================= */
#ddf-float-stack {
    position: fixed;
    bottom: 100px; /* room for chat widget below */
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9998;
    align-items: flex-end;
}

/* Shared pill button style */
.ddf-float-action-btn,
#ddf-saved-float-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px 10px 14px;
    border-radius: 28px;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    box-shadow: 0 3px 12px rgba(0,0,0,.22);
    transition: transform .15s, box-shadow .15s;
    text-decoration: none;
    position: relative;
}
.ddf-float-action-btn:hover,
#ddf-saved-float-btn:hover {
    transform: translateX(-3px);
    box-shadow: 0 5px 18px rgba(0,0,0,.3);
    color: #fff;
    text-decoration: none;
}

/* Get Listings — mid-dark grey */
.ddf-float-listings-btn {
    background: #4b5563;
    font-size: 14px;
}
.ddf-float-listings-btn:hover { background: #374151; }
.ddf-float-listings-btn,
.ddf-float-listings-btn:hover,
.ddf-float-listings-btn:visited,
.ddf-float-listings-btn:active { color: #fff !important; }

/* Saved Searches — primary red */
#ddf-saved-float-btn {
    background: var(--ddf-primary);
}

/* Badge on saved searches button */
.ddf-float-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--ddf-dark);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid #fff;
}

/* Slide-up panel */
#ddf-saved-float-panel {
    position: fixed;
    bottom: 190px; /* above the button stack */
    right: 20px;
    width: 320px;
    max-height: 60vh;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,.2);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(16px) scale(.97);
    opacity: 0;
    pointer-events: none;
    transition: transform .25s ease, opacity .25s ease;
}
#ddf-saved-float-panel.open {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: all;
}

.ddf-float-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    background: var(--ddf-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}
#ddf-saved-float-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    opacity: .8;
}
#ddf-saved-float-close:hover { opacity: 1; }

.ddf-float-panel-body {
    padding: 8px 0;
    overflow-y: auto;
    flex: 1;
}
#ddf-saved-list-float {
    list-style: none;
    margin: 0;
    padding: 0;
}
#ddf-saved-list-float li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    border-bottom: 1px solid var(--ddf-border);
    font-size: 13px;
}
#ddf-saved-list-float li:last-child { border-bottom: none; }
#ddf-saved-list-float a {
    color: var(--ddf-dark);
    text-decoration: none;
    flex: 1;
    font-weight: 500;
    line-height: 1.4;
}
#ddf-saved-list-float a:hover { color: var(--ddf-primary); text-decoration: none; }
#ddf-saved-list-float .ddf-saved-delete {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    font-size: 14px;
    padding: 0 0 0 10px;
    flex-shrink: 0;
}
#ddf-saved-list-float .ddf-saved-delete:hover { color: var(--ddf-primary); }
#ddf-saved-empty-float {
    padding: 20px 18px;
    font-size: 13px;
    color: var(--ddf-gray);
    line-height: 1.6;
}

/* Backdrop */
#ddf-saved-float-backdrop {
    display: none;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(0,0,0,.25);
    z-index: 9997;
}
#ddf-saved-float-backdrop.open { display: block; }

@media(max-width:640px) {
    #ddf-float-stack { bottom: 80px; right: 12px; }
    #ddf-saved-float-panel {
        right: 8px; left: 8px;
        width: auto;
        bottom: 170px;
    }
}