/* BTPA Frontend Styles v1.7.6 — forms, status badges, checklist, tables, buttons */

/* ── BTPA Brand Tokens ────────────────────────────────────────────────────────
   Defined on :root so they work standalone if the theme doesn't provide them.
   The theme can override any of these to re-skin without touching plugin CSS.
   Values mirror the active theme stylesheet (custom-styles.css). */
:root {
    --btpa-accent-color:        #AC125A;  /* brand magenta — completed steps, progress bars, price */
    --btpa-mushroom-color:      #EAE7DD;  /* warm grey-beige — active step circle, input borders */
    --btpa-off-white:           #FCFAF6;  /* tab background, upload-area background */
    --btpa-secondary-dark-blue: #01226B;  /* primary CTA background */
    --btpa-primary-color-black: #081D23;  /* deepest text + completed-step text */
    --btpa-text-color:          #636366;  /* secondary/muted text */
    --btpa-font-size-14:        14px;
    --btpa-font-size-16:        16px;
    --btpa-fw-normal:           400;
    --btpa-fw-med:              500;
    --btpa-fw-bold:             700;
    --btpa-lh-20:               20px;
    --btpa-lh-24:               24px;
}
/* Alias for backwards compatibility with the rules below using non-prefixed names.
   If the theme defines these names with different values, the theme wins. */
:root {
    --accent-color:             var(--btpa-accent-color);
    --mushroom-color:           var(--btpa-mushroom-color);
    --off-white:                var(--btpa-off-white);
    --secondary-dark-blue:      var(--btpa-secondary-dark-blue);
    --primary-color-black:      var(--btpa-primary-color-black);
    --text-color:               var(--btpa-text-color);
    --font-size-14:             var(--btpa-font-size-14);
    --font-size-16:             var(--btpa-font-size-16);
    --fw-normal:                var(--btpa-fw-normal);
    --fw-med:                   var(--btpa-fw-med);
    --fw-bold:                  var(--btpa-fw-bold);
    --lh-20:                    var(--btpa-lh-20);
    --lh-24:                    var(--btpa-lh-24);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btpa-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 20px;border-radius:6px;font-size:14px;font-weight:500;border:1px solid #d1d5db;background:#fff;color:#1f2937;cursor:pointer;text-decoration:none;transition:all .15s;white-space:nowrap;line-height:1}
.btpa-btn:hover{background:#f9fafb;border-color:#9ca3af;text-decoration:none}
.btpa-btn-primary{background:#0d1b2e;color:#fff;border-color:#0d1b2e}
.btpa-btn-primary:hover{background:#162540;border-color:#162540;color:#fff}
.btpa-btn-outline{background:#fff;border-color:#d1d5db;color:#374151}
.btpa-btn-sm{padding:5px 12px;font-size:12px}
.btpa-btn:disabled{opacity:.6;cursor:not-allowed}

/* ── Status badges ────────────────────────────────────────────────────────── */
.btpa-status-badge{display:inline-block;padding:3px 12px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff;line-height:1.6}
.btpa-status--live{background:#16a34a}.btpa-status--sold{background:#dc2626}
.btpa-status--draft{background:#9ca3af}.btpa-status--withdrawn{background:#f59e0b}

/* ── Notices ──────────────────────────────────────────────────────────────── */
.btpa-notice{padding:14px 16px;background:#eff6ff;border-left:3px solid #3b82f6;border-radius:0 6px 6px 0;font-size:14px;color:#1e3a8a}
.btpa-form-notice{padding:12px 16px;border-radius:6px;font-size:14px;margin-top:12px}
.btpa-notice--success{background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d}
.btpa-notice--error{background:#fef2f2;border:1px solid #fecaca;color:#dc2626}
.btpa-notice--no-listing{background:#fafafa;border-left-color:#d1d5db;color:#374151}
.btpa-notice--no-listing a{color:#0d1b2e;font-weight:600;text-decoration:underline}
.btpa-notice--no-listing a:hover{color:var(--btpa-accent-color,#9d174d)}

/* ── Tables ───────────────────────────────────────────────────────────────── */
.btpa-table{width:100%;border-collapse:collapse;font-size:14px}
.btpa-table th{text-align:left;padding:9px 12px;background:#0d1b2e;color:#fff;font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.btpa-table td{padding:10px 12px;border-bottom:1px solid #f0ece4;vertical-align:middle}
.btpa-table tr:last-child td{border-bottom:none}
.btpa-table tr:nth-child(even) td{background:rgba(0,0,0,.02)}
.btpa-listing-row__actions{display:flex;gap:6px;white-space:nowrap}
.btpa-avatar{width:32px;height:32px;border-radius:50%;overflow:hidden;vertical-align:middle;margin-right:8px;display:inline-block;}

/* ── Form wrapper ─────────────────────────────────────────────────────────── */
.btpa-form-wrap{max-width:780px}

/* ── Step indicator ───────────────────────────────────────────────────────── */
.btpa-steps{display:flex;gap:0;margin-bottom:32px;border-bottom:2px solid #e5e7eb}
.btpa-step{flex:1;padding:12px 16px;font-size:13px;font-weight:500;color:#6b7280;display:flex;align-items:center;gap:8px;border-bottom:2px solid transparent;margin-bottom:-2px}
.btpa-step span{width:24px;height:24px;border-radius:50%;background:#e5e7eb;color:#374151;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.btpa-step.active{color:#0d1b2e;border-bottom-color:#0d1b2e}
.btpa-step.active span{background:#0d1b2e;color:#fff}
.btpa-step.complete{color:#16a34a}
.btpa-step.complete span{background:#16a34a;color:#fff}

/* ── Form fields ──────────────────────────────────────────────────────────── */
.btpa-step-title{font-size:20px;font-weight:600;margin-bottom:6px}
.btpa-step-desc{font-size:14px;color:#6b7280;margin-bottom:24px}
.btpa-field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
@media(max-width:600px){.btpa-field-row{grid-template-columns:1fr}}
.btpa-field{display:flex;flex-direction:column;gap:5px;margin-bottom:16px}
.btpa-field label{font-size:13px;font-weight:500;color:#374151}
.btpa-field input,.btpa-field select,.btpa-field textarea{padding:9px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;color:#111827;background:#fff;transition:border-color .15s;width:100%;box-sizing:border-box}
.btpa-field input:focus,.btpa-field select:focus,.btpa-field textarea:focus{outline:none;border-color:#0d1b2e;box-shadow:0 0 0 3px rgba(13,27,46,.08)}
.btpa-field textarea{resize:vertical;min-height:120px}
.btpa-error{font-size:12px;color:#dc2626;display:none}
.btpa-char-count{font-size:11px;color:#9ca3af;text-align:right}
.req{color:#dc2626}
.btpa-private{font-size:11px;color:#9ca3af;font-style:normal;margin-left:4px}
.optional{font-size:11px;color:#9ca3af;font-style:normal;margin-left:4px}
.btpa-form-actions{display:flex;gap:12px;align-items:center;margin-top:24px;padding-top:20px;border-top:1px solid #e5e7eb}

/* ── Photo upload ─────────────────────────────────────────────────────────── */
.btpa-upload-area{border:2px dashed #d1d5db;border-radius:8px;padding:24px;text-align:center;transition:border-color .15s}
.btpa-upload-area--drag,.btpa-upload-area:hover{border-color:#0d1b2e;background:#fafafa}
.btpa-upload-hint{font-size:12px;color:#9ca3af;margin-top:8px}
.btpa-photo-preview{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.btpa-photo-thumb{position:relative;width:80px;height:60px;border-radius:6px;overflow:hidden;border:1px solid #e5e7eb}
.btpa-photo-thumb img{width:100%;height:100%;object-fit:cover}
.btpa-photo-thumb--loading{display:flex;align-items:center;justify-content:center;background:#f3f4f6;font-size:10px;color:#9ca3af}
.btpa-remove-photo{position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;background:rgba(220,38,38,.85);color:#fff;border:none;cursor:pointer;font-size:10px;display:flex;align-items:center;justify-content:center;line-height:1}

/* ── Toggle group (amenities) ─────────────────────────────────────────────── */
.btpa-toggle-group{display:flex;flex-wrap:wrap;gap:12px}
.btpa-toggle-label{display:flex;align-items:center;gap:10px;font-size:14px;cursor:pointer;padding:10px 14px;border:1px solid #e5e7eb;border-radius:8px;transition:all .15s}
.btpa-toggle-label:hover{border-color:#0d1b2e;background:#f9fafb}
.btpa-toggle-label input{display:none}
.btpa-toggle-switch{width:36px;height:20px;background:#d1d5db;border-radius:20px;position:relative;transition:background .2s;flex-shrink:0}
.btpa-toggle-switch::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.btpa-toggle-label input:checked ~ .btpa-toggle-switch{background:#16a34a}
.btpa-toggle-label input:checked ~ .btpa-toggle-switch::after{left:18px}

/* ── Preview page ─────────────────────────────────────────────────────────── */
.btpa-preview-wrap{max-width:780px}
.btpa-preview-header{display:flex;justify-content:space-between;align-items:flex-start;margin:24px 0;gap:20px}
.btpa-preview-title{font-size:22px;font-weight:700;margin-bottom:4px}
.btpa-preview-location{font-size:14px;color:#6b7280}
.btpa-preview-price{font-size:24px;font-weight:700;color:var(--btpa-accent-color);white-space:nowrap}
.btpa-preview-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:24px}
.btpa-preview-photo img{width:100%;height:140px;object-fit:cover;border-radius:8px;display:block}
.btpa-preview-photo--cover img{height:280px}
.btpa-preview-section{margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid #f0ece4}
.btpa-preview-section:last-of-type{border-bottom:none}
.btpa-preview-section-title{font-size:16px;font-weight:600;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}
.btpa-edit-link{font-size:13px;font-weight:400;color:#0d1b2e;text-decoration:none;padding:4px 10px;border:1px solid #d1d5db;border-radius:4px}
.btpa-edit-link:hover{background:#f9fafb}
.btpa-preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.btpa-preview-item{display:flex;flex-direction:column;gap:2px}
.btpa-preview-item .label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#9ca3af;font-weight:500}
.btpa-preview-item span:last-child{font-size:14px;color:#1f2937}
.btpa-preview-desc{font-size:14px;line-height:1.7;color:#374151}
.btpa-preview-amenities{display:flex;flex-wrap:wrap;gap:8px}
.btpa-amenity-tag{padding:5px 12px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:20px;font-size:12px;color:#15803d;font-weight:500}
.btpa-preview-actions{display:flex;gap:12px;align-items:center;margin-top:28px;padding-top:20px;border-top:1px solid #e5e7eb}

/* ═══════════════════════════════════════════════════════════════════════════
   Selling Checklist — Full-page layout  [btpa_selling_checklist]
   ═══════════════════════════════════════════════════════════════════════════ */

/* Shared spin animation (used by spinner) */
@keyframes btpa-spin { to { transform: rotate(360deg); } }

/* ── Page wrapper ─────────────────────────────────────────────────────────── */
.btpa-cl-page {
    /* max-width and padding intentionally removed — container sizing
       is handled by the Elementor section wrapping this shortcode. */
}

/* ── Breadcrumb ───────────────────────────────────────────────────────────── */
.btpa-cl-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.btpa-cl-breadcrumb a {
    color: #6b7280;
    text-decoration: none;
    transition: color .15s;
}
.btpa-cl-breadcrumb a:hover { color: #0d1b2e; }
.btpa-cl-breadcrumb svg { color: #c4c9d4; flex-shrink: 0; }
.btpa-cl-breadcrumb span { color: #374151; font-weight: 500; }

/* ── Page heading ─────────────────────────────────────────────────────────── */
.btpa-cl-heading { margin-bottom: 32px; }
.btpa-cl-heading__title {
    font-size: 26px;
    font-weight: 700;
    color: #0d1b2e;
    margin: 0 0 8px;
}
.btpa-cl-heading__sub {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
    line-height: 1.55;
}

/* ── Two-column layout ────────────────────────────────────────────────────── */
.btpa-cl-layout {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 40px;
    align-items: start;
}

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.btpa-cl-sidebar { position: sticky; top: 80px; }
.btpa-cl-sidebar__inner {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
}

/* Top section — heading + property card — #FCFAF4 background */
.btpa-cl-sidebar__top {
    background: #FCFAF4;
    padding: 20px 20px 18px;
    border-bottom: 1px solid #e5e7eb;
}

/* Bottom section — ring + phase list — white */
.btpa-cl-sidebar__bottom {
    padding: 20px 20px 22px;
}

.btpa-cl-sidebar__heading {
    font-size: 16px;
    font-weight: 700;
    color: #0d1b2e;
    text-transform: none;
    letter-spacing: normal;
    margin: 0 0 14px;
}

/* Property name + location */
.btpa-cl-property { margin-bottom: 0; }
.btpa-cl-property__name {
    font-size: 15px;
    font-weight: 700;
    color: #0d1b2e;
    margin: 0 0 4px;
    line-height: 1.35;
}
.btpa-cl-property__location {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}
.btpa-cl-property__location svg { flex-shrink: 0; color: var(--btpa-accent-color, #9d174d); }

/* Circular progress ring — 90px, left-aligned */
.btpa-cl-ring-wrap {
    position: relative;
    width: 90px;
    height: 90px;
    margin: 0 0 20px;
}
.btpa-cl-ring {
    width: 90px;
    height: 90px;
    transform: rotate(-90deg);
}
.btpa-cl-ring__track {
    stroke: #ece8e1;
}
.btpa-cl-ring__fill {
    stroke: var(--btpa-accent-color, #9d174d);
    transition: stroke-dashoffset .5s ease;
}
.btpa-cl-ring__label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-left: 14px;
    pointer-events: none;
}
.btpa-cl-ring__pct {
    font-size: 18px;
    font-weight: 700;
    color: #0d1b2e;
    line-height: 1;
}

/* Phase status list */
.btpa-cl-phases {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.btpa-cl-phase-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6;
}
.btpa-cl-phase-status:last-child { border-bottom: none; padding-bottom: 0; }
.btpa-cl-phase-status:first-child { padding-top: 0; }
.btpa-cl-phase-status__label { line-height: 1.3; }
.btpa-cl-phase-status__dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--btpa-accent-color, #9d174d);
    background: #fff;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .25s, border-color .25s;
}
.btpa-cl-phase-status--done .btpa-cl-phase-status__dot {
    background: var(--btpa-accent-color, #9d174d);
    border-color: var(--btpa-accent-color, #9d174d);
}

/* ── Accordion (details/summary phases) ──────────────────────────────────── */
.btpa-cl-accordion {
    background: #fff;
    border: 1px solid #EAE7DD;
    border-radius: 6px;
    margin-bottom: 12px;
    overflow: hidden;
}
.btpa-cl-accordion[open] { }

.btpa-cl-accordion__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    cursor: pointer;
    user-select: none;
    list-style: none;
    gap: 12px;
    min-height: 56px;
}
.btpa-cl-accordion__header::-webkit-details-marker { display: none; }
.btpa-cl-accordion__header::marker { display: none; }

.btpa-cl-accordion__title-wrap {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.btpa-cl-accordion__step-num {
    font-family: "Funnel Display", sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: #081D23;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 56px;
}
.btpa-cl-accordion__step-text {
    font-family: "Funnel Display", sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: #081D23;
    line-height: 56px;
}
.btpa-cl-accordion__chevron {
    color: #081D23;
    flex-shrink: 0;
    transition: transform .25s ease;
}
.btpa-cl-accordion[open] .btpa-cl-accordion__chevron {
    transform: rotate(180deg);
}

/* ── Checklist items ─────────────────────────────────────────────────────── */
.btpa-cl-items {
    list-style: none;
    margin: 0;
    padding: 0;
}
.btpa-cl-item {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: 0 0 0 24px;
    border-top: 1px solid #EAE7DD;
    transition: background .15s;
    position: relative;
    /* Left border: blue when unchecked, accent when checked (via ::before) */
    border-left: 2px solid #01226B;
}
.btpa-cl-item--done {
    border-left-color: #AC125A;
}
.btpa-cl-item:hover { background: #fafafa; }

.btpa-cl-item__label {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    cursor: pointer;
    flex: 1;
    min-width: 0;
    padding: 12px 24px 12px 0;
}

/* Custom checkbox */
.btpa-cl-item__check-wrap {
    position: relative;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 10px;
}
.btpa-cl-item__checkbox {
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    margin: 0;
}
.btpa-cl-item__check-icon {
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    transition: background .15s, border-color .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.btpa-cl-item__check-icon svg { opacity: 0; transition: opacity .15s; }

/* Checked state */
.btpa-cl-item--done .btpa-cl-item__check-icon {
    background: var(--btpa-accent-color, #AC125A);
    border-color: var(--btpa-accent-color, #AC125A);
}
.btpa-cl-item--done .btpa-cl-item__check-icon svg { opacity: 1; }

/* Hover on unchecked */
.btpa-cl-item__label:hover .btpa-cl-item__check-icon {
    border-color: #9ca3af;
}

.btpa-cl-item__body {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    min-width: 0;
}
.btpa-cl-item__title {
    font-family: "Funnel Display", sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #081D23;
    line-height: 36px;
    transition: color .15s;
}
.btpa-cl-item__desc {
    font-family: "Funnel Display", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #081D23;
    line-height: 32px;
}
/* Muted on done */
.btpa-cl-item--done .btpa-cl-item__title {
    color: #9ca3af;
}
.btpa-cl-item--done .btpa-cl-item__desc {
    color: #b0b7c3;
}

/* Remove the old pseudo-element left border (replaced by real border-left above) */
.btpa-cl-item::before { display: none; }

/* Spinner */
.btpa-cl-item__spinner {
    width: 14px;
    height: 14px;
    border: 2px solid #e5e7eb;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px;
    display: block;
}
.btpa-cl-item__spinner--active {
    border-top-color: var(--btpa-accent-color, #9d174d);
    animation: btpa-spin .6s linear infinite;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .btpa-cl-layout {
        grid-template-columns: 1fr;
    }
    .btpa-cl-sidebar {
        position: static;
    }
    .btpa-cl-sidebar__bottom {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 16px 20px;
        align-items: start;
    }
    .btpa-cl-ring-wrap { margin: 0; }
    .btpa-cl-phases { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .btpa-cl-sidebar__bottom { grid-template-columns: 1fr; }
    .btpa-cl-phases { flex-direction: column; }
    .btpa-cl-accordion__header { padding: 14px 16px; }
    .btpa-cl-item { padding: 12px 16px; }
}

/* ── Single-page form section titles (matching original design) ─────────────── */
.btpa-section-title {
    font-size: 18px;
    font-weight: 600;
    margin: 28px 0 4px;
    color: #1f2937;
}
.btpa-section-title em.optional {
    font-size: 13px;
    font-weight: 400;
    color: #9ca3af;
    font-style: normal;
}
.btpa-section-desc {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 16px;
}
/* "Don't have a floor plan? Buy a floor plan" line */
.btpa-floor-plan-cta {
    font-size: 13px;
    color: #6b7280;
    margin: 6px 0 10px;
}
.btpa-floor-plan-buy-link {
    color: var(--accent-color, #9d174d);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.btpa-floor-plan-buy-link:hover { opacity: .8; }
/* Upload area matches design */
.btpa-upload-area {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 32px 24px;
    text-align: center;
    background: #fafaf8;
    transition: border-color .15s;
}
.btpa-upload-area p {
    font-size: 13px;
    color: #9ca3af;
    margin-bottom: 12px;
}
.btpa-upload-area--drag { border-color: #0d1b2e; background: #f0f0ff; }

/* ── Preview Listing Page (matches design) ───────────────────────────────── */
.btpa-preview-page { max-width: 860px; }

.btpa-preview-header-section { margin: 24px 0 32px; }
.btpa-preview-header-section h2 { font-size: 22px; font-weight: 600; margin-bottom: 8px; }
.btpa-preview-header-section p  { font-size: 14px; color: #6b7280; line-height: 1.6; }

/* Section blocks with border */
.btpa-preview-section-block {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 20px;
}

/* Section head: title + edit icon on right */
.btpa-preview-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.btpa-preview-section-head h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}
.btpa-preview-edit-icon {
    color: #6b7280;
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 4px;
    border-radius: 4px;
    transition: color .15s, background .15s;
}
.btpa-preview-edit-icon:hover { color: #0d1b2e; background: #f3f4f6; }

/* Two-column detail grid */
.btpa-preview-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 32px;
}
@media(max-width:580px){ .btpa-preview-detail-grid { grid-template-columns: 1fr; } }

.btpa-preview-detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.btpa-preview-detail-label {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
}
.btpa-preview-detail-value {
    font-size: 14px;
    color: #111827;
}
.btpa-preview-yes { color: #16a34a; font-weight: 500; }

/* Gallery grid — 3 per row matching design */
.btpa-preview-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
@media(max-width:580px){ .btpa-preview-gallery-grid { grid-template-columns: repeat(2, 1fr); } }
.btpa-preview-gallery-item img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

.btpa-preview-description { font-size: 14px; line-height: 1.75; color: #374151; }
.btpa-preview-empty { font-size: 13px; color: #9ca3af; }

/* Publish row */
.btpa-preview-publish-row { margin-top: 28px; padding-top: 24px; }
.btpa-btn-publish {
    background: #0d1b2e;
    color: #fff;
    border: none;
    padding: 12px 28px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.btpa-btn-publish:hover { background: #162540; }
.btpa-btn-publish:disabled { opacity: .6; cursor: not-allowed; }

/* ── Featured Image upload ───────────────────────────────────────────────── */
.btpa-featured-thumb { position: relative; margin-bottom: 12px; }
.btpa-featured-thumb img { border-radius: 6px; display: block; }
#btpa-remove-featured {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 8px; padding: 5px 12px;
    background: #fee2e2; color: #dc2626; border: 1px solid #fecaca;
    border-radius: 4px; font-size: 12px; cursor: pointer;
}
#btpa-remove-featured:hover { background: #fecaca; }

/* Profile video upload */
.btpa-video-thumb { margin-bottom: 12px; }
.btpa-video-player {
    display: block;
    width: 100%;
    max-width: 480px;
    border-radius: 6px;
    background: #000;
    outline: none;
}
.btpa-video-thumb--loading {
    display: flex; align-items: center; justify-content: center;
    width: 100%; max-width: 480px; height: 80px;
    background: #f3f4f6; border-radius: 6px;
    font-size: 13px; color: #6b7280;
}
#btpa-remove-pro-video {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 8px; padding: 5px 12px;
    background: #fee2e2; color: #dc2626; border: 1px solid #fecaca;
    border-radius: 4px; font-size: 12px; cursor: pointer;
}
#btpa-remove-pro-video:hover { background: #fecaca; }

/* ── My Listings — bulk delete bar only (table styled via Elementor) ─────── */
.btpa-bulk-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    margin-bottom: 12px;
    font-size: 14px;
}
.btpa-bulk-count { color: #374151; font-weight: 500; margin-right: auto; }
.btpa-bulk-delete-btn {
    padding: 7px 16px;
    background: #dc2626;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.btpa-bulk-delete-btn:hover { background: #b91c1c; }
.btpa-bulk-delete-btn:disabled { opacity: .6; cursor: not-allowed; }
.btpa-bulk-cancel-btn {
    padding: 7px 16px;
    background: #fff;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
}
.btpa-bulk-cancel-btn:hover { border-color: #374151; }

/* ── View All Listings button ────────────────────────────────────────────── */
.btpa-view-all-row {
    display: flex;
    justify-content: flex-end;
    padding: 14px 16px;
    border-top: 1px solid #f3f4f6;
    background: #fff;
}
.btpa-view-all-btn {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    text-decoration: none;
    padding: 7px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    transition: all .15s;
    display: inline-block;
}
.btpa-view-all-btn:hover {
    border-color: #0d1b2e;
    color: #0d1b2e;
    text-decoration: none;
}

/* Empty-state Create button — shown when [btpa_my_listings show_create_button="yes"] and user has no listings */
.btpa-empty-cta {
    margin-top: 16px;
}
.btpa-empty-cta .btpa-create-btn {
    display: inline-block;
    background: #0a1f5c;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    padding: 12px 24px;
    border-radius: 6px;
    text-decoration: none;
    transition: background .15s;
}
.btpa-empty-cta .btpa-create-btn:hover {
    background: #081848;
    color: #fff;
    text-decoration: none;
}

/* Upload icon — placed inside .btpa-btn-primary buttons on Create / Edit Listing forms.
   Inherits button text color via fill="currentColor". */
.btpa-upload-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
    line-height: 0;
}
.btpa-upload-icon svg {
    display: block;
    width: 16px;
    height: 16px;
}
.btpa-upload-label {
    display: inline-block;
}

/* ───────────────────────────────────────────────────────────────────────────
   Step 3 — Listing Live success view
   ─────────────────────────────────────────────────────────────────────────── */
.btpa-preview-step3 {
    padding-top: 8px;
}
.btpa-step3-title {
    font-size: 22px;
    font-weight: 700;
    color: #0d1b2e;
    margin: 0 0 10px;
    line-height: 1.3;
}
.btpa-step3-emoji {
    display: inline-block;
    margin-left: 4px;
    font-size: 20px;
    vertical-align: baseline;
}
.btpa-step3-lead {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.6;
    margin: 0 0 32px;
    max-width: 600px;
}
.btpa-step3-subtitle {
    font-size: 16px;
    font-weight: 700;
    color: #0d1b2e;
    margin: 0 0 16px;
}
.btpa-step3-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    margin-bottom: 32px;
    max-width: 700px;
}
.btpa-step3-col-title {
    font-size: 15px;
    font-weight: 700;
    color: #0d1b2e;
    margin: 0 0 12px;
}
.btpa-step3-list {
    list-style: disc;
    padding-left: 20px;
    margin: 0;
}
.btpa-step3-list li {
    font-size: 14px;
    color: #374151;
    line-height: 1.8;
    margin-bottom: 4px;
}
.btpa-step3-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
}
.btpa-step3-view-btn {
    background: #0d1b2e;
    color: #fff;
    border: 1px solid #0d1b2e;
    padding: 12px 28px;
    font-weight: 600;
    text-decoration: none;
}
.btpa-step3-view-btn:hover {
    background: #162540;
    color: #fff;
    text-decoration: none;
}
.btpa-step3-dash-btn {
    background: #fff;
    color: #0d1b2e;
    border: 1px solid #d1d5db;
    padding: 12px 28px;
    font-weight: 500;
    text-decoration: none;
}
.btpa-step3-dash-btn:hover {
    background: #f9fafb;
    border-color: #0d1b2e;
    text-decoration: none;
}
@media (max-width: 600px) {
    .btpa-step3-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .btpa-step3-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .btpa-step3-view-btn,
    .btpa-step3-dash-btn {
        text-align: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Create / Edit / Preview Listing — Layout + Brand-aligned restyle (v1.7.6)
   These rules use --accent-color, --mushroom-color, --off-white, etc. which
   are defined at the top of this file (with theme-overridable aliases).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Full width wrapper */
#btpa-create-listing-form,
.btpa-preview-page {
    width: 100% !important;
    max-width: 100% !important;
}

/* Full width steps bar */
#btpa-create-listing-form .btpa-steps {
    width: 100% !important;
    max-width: 100% !important;
}

/* Constrain only the form to 900px centered */
#btpa-listing-form,
.btpa-preview-section-block {
    width: 100% !important;
    max-width: 900px !important;
}

/* Also constrain the notice div */
#btpa-form-notice {
    width: 100% !important;
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ── Create Listing — step indicator ─────────────────────────────────────── */
.btpa-steps {
    border-bottom: 0;
    margin-bottom: 55px;
}
.btpa-step {
    border: 1px solid var(--mushroom-color);
    font-size: 16px;
    gap: 12px;
}
.btpa-step:nth-child(2) {
    border-left: 0;
    border-right: 0;
}
.btpa-step.active,
.btpa-step.complete {
    border-radius: 6px 0 0 6px;
    background: var(--off-white);
    border-bottom-color: var(--mushroom-color);
    color: #081D23;
}
.btpa-step.active[data-step="2"] {
    border-radius: 0;
}
.btpa-step span,
.btpa-step.complete span {
    width: 32px;
    height: 32px;
    font-size: var(--font-size-16);
    color: var(--text-color);
    background: var(--off-white);
    font-weight: var(--fw-normal);
}
.btpa-step.active span {
    background: var(--mushroom-color);
    color: var(--secondary-dark-blue);
}
.btpa-step.complete span {
    background: var(--accent-color);
    color: #fff;
    font-size: var(--font-size-14);
}

/* ── Form fields ─────────────────────────────────────────────────────────── */
.btpa-field-row { gap: 20px; }
.btpa-field     { gap: 12px; }
.btpa-field label {
    font-size: var(--font-size-14);
    font-weight: 500;
    color: var(--primary-color-black);
}
.btpa-section-title,
.btpa-preview-section-head h3 {
    font-size: 20px;
    font-weight: var(--fw-med);
    color: var(--primary-color-black);
    margin-bottom: 15px;
}
#btpa-listing-form > .btpa-section-title:nth-of-type(3) {
    margin-bottom: 30px;
}
.btpa-section-desc {
    font-size: var(--font-size-16);
    color: var(--text-color);
    margin-bottom: 20px;
}
#btpa-listing-form > .btpa-section-desc:first-of-type {
    margin-bottom: 40px;
}
.btpa-field input,
.btpa-field select,
.btpa-field textarea {
    padding: 16px 12px;
    border: 1px solid var(--mushroom-color);
}
.btpa-field input:focus,
.btpa-field select:focus,
.btpa-field textarea:focus {
    border-color: var(--mushroom-color);
    box-shadow: 0 0 0 2px rgba(13, 27, 46, .05);
}
.btpa-field input::placeholder,
.btpa-preview-header-section p {
    font-size: var(--font-size-16);
    color: var(--text-color);
}

/* ── Upload area ─────────────────────────────────────────────────────────── */
.btpa-upload-area {
    border: 1px solid var(--mushroom-color);
    border-radius: 6px;
    padding: 40px 24px;
    text-align: center;
    background: var(--off-white);
    margin-bottom: 30px;
}
.btpa-upload-area button,
.btpa-form-actions button,
.btpa-preview-publish-row .btpa-btn {
    background-color: var(--secondary-dark-blue);
    color: #fff;
    border-radius: 6px;
    letter-spacing: .5px;
    border: none;
    padding: 16px 16px;
}
.btpa-form-actions button.btpa-btn {
    padding-left: 16px;
    padding-right: 16px;
}
.btpa-upload-area button:hover,
.btpa-form-actions button:hover,
.btpa-photo-thumb button:hover,
.btpa-upload-area button:focus,
.btpa-preview-publish-row .btpa-btn:hover,
.btpa-preview-publish-row .btpa-btn:focus {
    background-color: var(--primary-color-black);
}
.btpa-photo-thumb {
    width: 95px;
    height: 85px;
}
.btpa-photo-thumb button {
    padding: 4px 5px;
}

/* ── Toggle group ────────────────────────────────────────────────────────── */
.btpa-toggle-group { margin-top: 35px; }
.btpa-toggle-switch {
    width: 50px;
    height: 28px;
}
.btpa-toggle-switch::after {
    width: 24px;
    height: 24px;
}

/* ── Preview listing ─────────────────────────────────────────────────────── */
.btpa-preview-section-block {
    border: none;
    padding: 0;
    margin-top: 45px;
}
.btpa-preview-section-block:first-child {
    margin-top: 20px;
}
.btpa-preview-section-head {
    margin-bottom: 10px;
}
.btpa-preview-section-head h3 {
    margin-bottom: 0;
}
.btpa-preview-detail-label {
    font-size: 14px;
    color: var(--primary-color-black);
}
.btpa-preview-detail-value {
    color: var(--text-color);
    font-size: 16px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Responsive — Create/Preview/Publish listing tabs + typography on mobile
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* ── Step indicator — circles only, active step expands to show label ── */
    .btpa-steps {
        display: flex;
        gap: 12px;
        margin-bottom: 32px;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: nowrap;
    }
    /* Each step collapses to a circle-only pill by default */
    .btpa-step,
    .btpa-step.complete,
    .btpa-step.active {
        flex: 0 0 auto;
        border: 1px solid var(--mushroom-color);
        border-radius: 999px;
        padding: 6px;
        gap: 8px;
        background: transparent;
        font-size: 14px;
    }
    /* Reset the desktop-only "middle step has no left/right border" rule */
    .btpa-step:nth-child(2) {
        border-left: 1px solid var(--mushroom-color);
        border-right: 1px solid var(--mushroom-color);
    }
    /* Hide labels on inactive + completed steps — show circle only.
       Only the ACTIVE step shows its text label. */
    .btpa-step {
        color: transparent;
        font-size: 0;
        line-height: 0;
        padding: 6px;
    }
    /* Completed steps: stay circle-only (no label, matches design) */
    .btpa-step.complete {
        padding: 6px;
        font-size: 0;
    }
    /* Active step: expands to a pill, shows its label */
    .btpa-step.active {
        font-size: 14px;
        line-height: 1.2;
        color: var(--primary-color-black);
        padding: 6px 16px 6px 6px;
    }
    /* Step circles stay the same size everywhere */
    .btpa-step span,
    .btpa-step.active span,
    .btpa-step.complete span {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
        font-size: 14px;
    }
    /* Completed circle: magenta with white check */
    .btpa-step.complete span {
        background: var(--accent-color);
        color: #fff;
    }
    /* Active circle: mushroom-filled with dark navy number (matches desktop style + design) */
    .btpa-step.active span {
        background: var(--mushroom-color);
        color: var(--secondary-dark-blue);
    }
    /* Future/inactive circle: off-white fill with muted number, mushroom border on the pill */
    .btpa-step span {
        background: var(--off-white);
        color: var(--text-color);
    }

    /* ── Typography ─────────────────────────────────────────────────────── */
    .btpa-field label {
        font-size: 14px;
    }
    .btpa-preview-section-head h3 {
        font-size: 16px;
    }
    .btpa-preview-detail-value {
        font-size: 14px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   [btpa_listing_features] — feature grid on single property page
   ═══════════════════════════════════════════════════════════════════════════ */
.btpa-features-block {
    width: 100%;
}
.btpa-features-title {
    font-size: 20px;
    font-weight: var(--fw-med);
    color: var(--primary-color-black);
    margin: 0 0 16px;
}
.btpa-features-grid {
    display: grid;
    grid-template-columns: repeat(var(--btpa-features-cols, 2), minmax(0, 1fr));
    gap: 16px 32px;
    border: 1px solid var(--mushroom-color);
    border-radius: 8px;
    padding: 20px 24px;
    background: #fff;
}
.btpa-feature-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    color: var(--text-color);
    line-height: 1.5;
}
.btpa-feature-check {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--secondary-dark-blue); /* circle fill via currentColor */
    line-height: 0;
}
.btpa-feature-check svg {
    display: block;
    width: 16px;
    height: 16px;
}
.btpa-feature-label {
    flex: 1;
}
@media (max-width: 600px) {
    .btpa-features-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 16px 20px;
    }
    .btpa-feature-row {
        font-size: 14px;
    }
}

/* Floor plan image inside preview section */
.btpa-preview-floor-image {
    margin-top: 12px;
}
.btpa-preview-floor-image img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    border: 1px solid var(--mushroom-color);
}

/* Listing title link inside [btpa_my_listings] — inherits surrounding text style,
   underlines on hover for affordance. */
.btpa-listing-title {
    color: inherit;
    text-decoration: none;
    font-weight: 500;
    transition: color .15s;
}
.btpa-listing-title:hover,
.btpa-listing-title:focus {
    color: var(--accent-color);
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Professional Application Form  [btpa_professional_application]
   ═══════════════════════════════════════════════════════════════════════════ */
.btpa-pro-form-wrap {
    max-width: 900px;
    margin: 0 auto;
}
.btpa-services-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 16px;
}
@media (max-width: 600px) {
    .btpa-services-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}
.btpa-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}
#btpa-add-service-btn {
    margin-top: 4px;
    margin-bottom: 32px;
}

/* Approved-state CTA row + small field hints on the pro form */
.btpa-pro-cta-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
}
.btpa-field-hint {
    font-size: 13px;
    color: var(--text-color);
    margin: 6px 0 12px;
    line-height: 1.4;
}
.btpa-field-hint a { color: var(--accent-color); text-decoration: underline; }
.btpa-field-hint a:hover { opacity: .8; }

/* ── Description field — live formatted preview ─────────────────────────── */
.btpa-desc-editor-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}
.btpa-desc-editor-wrap > .btpa-desc-raw-col { min-width: 0; }
.btpa-desc-preview-col {
    min-width: 0;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 14px 16px;
    background: #fafafa;
    font-size: 14px;
    line-height: 1.7;
    max-height: 600px;
    overflow-y: auto;
    position: sticky;
    top: 80px;
}
.btpa-desc-preview-col p { margin: 0 0 4px; }
/* *Heading lines */
.btpa-desc-preview-col .desc-heading {
    font-weight: 700;
    font-size: 15px;
    color: #0d1b2e;
    margin: 20px 0 6px;
    display: block;
}
.btpa-desc-preview-col .desc-heading:first-child { margin-top: 0; }
/* Bracketed prompt text */
.btpa-desc-preview-col .desc-prompt {
    color: #b0b7c3;
    font-style: italic;
    font-size: 13px;
}
/* Normal filled-in text */
.btpa-desc-preview-col .desc-text { color: #374151; }
/* Bullet list in preview */
.btpa-desc-preview-col .desc-list {
    margin: 4px 0 8px 16px;
    padding: 0;
}
.btpa-desc-preview-col .desc-list li { color: #374151; margin-bottom: 2px; }
.btpa-desc-preview-label {
    font-size: 13px;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 12px;
    display: block;
}
@media (max-width: 860px) {
    .btpa-desc-editor-wrap { grid-template-columns: 1fr; }
    .btpa-desc-preview-col { position: static; max-height: 400px; }
}

/* ── Formatting toolbar ──────────────────────────────────────────────────── */
.btpa-desc-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    flex-wrap: wrap;
}
.btpa-desc-toolbar + textarea {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.btpa-fmt-btn {
    padding: 4px 10px;
    font-size: 13px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1.4;
    transition: background .12s, border-color .12s;
}
.btpa-fmt-btn:hover { background: #f3f4f6; border-color: #9ca3af; }
.btpa-fmt-hint {
    font-size: 11px;
    color: #9ca3af;
    margin-left: 8px;
}

/* ── Frontend description display ────────────────────────────────────────── */
.btpa-preview-description .btpa-desc-heading,
.btpa-listing-description .btpa-desc-heading {
    font-size: 16px;
    font-weight: 700;
    color: #0d1b2e;
    margin: 24px 0 8px;
    display: block;
}
.btpa-preview-description .btpa-desc-heading:first-child,
.btpa-listing-description .btpa-desc-heading:first-child { margin-top: 0; }
.btpa-preview-description .btpa-desc-para,
.btpa-listing-description .btpa-desc-para {
    margin: 0 0 8px;
    color: #374151;
    line-height: 1.75;
}
.btpa-preview-description .btpa-desc-list,
.btpa-listing-description .btpa-desc-list {
    margin: 4px 0 12px 20px;
    padding: 0;
}
.btpa-preview-description .btpa-desc-list li,
.btpa-listing-description .btpa-desc-list li {
    color: #374151;
    margin-bottom: 4px;
    line-height: 1.6;
}
/* Spacing between plain-text paragraphs */
.btpa-preview-description p,
.btpa-listing-description p {
    margin: 0 0 6px;
}

/* Professional CTA — pending application notice */
.btpa-pro-pending-note {
    display: inline-block;
    font-size: 14px;
    color: #6b7280;
    font-style: italic;
}
/* Guest (logged-out) CTA on professional profile page */
.btpa-pro-guest-cta {
    margin: 8px 0 24px;
}
.btpa-pro-guest-btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 28px;
    font-size: 15px;
    background-color: #01226B !important;
    border-color: #01226B !important;
}
.btpa-pro-guest-btn:hover {
    background-color: #011a55 !important;
    border-color: #011a55 !important;
}

/* ── Edit Listing button (single property page) ──────────────────────────── */
.btpa-edit-listing-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--primary-color-black, #0d1b2e);
    background: #fff;
    border: 1.5px solid var(--primary-color-black, #0d1b2e);
    border-radius: 6px;
    text-decoration: none;
    transition: background .15s, color .15s;
    cursor: pointer;
}
.btpa-edit-listing-btn:hover {
    background: var(--primary-color-black, #0d1b2e);
    color: #fff;
    text-decoration: none;
}

/* ── Parking & Outside Space — compact label + toggle spacing ────────────── */
/* Reduce the default 12px gap to 6px for checkbox toggle fields */
.btpa-field:has(> label + .btpa-toggle-group) {
    gap: 6px;
}
/* Fallback for browsers without :has() support */
.btpa-field--compact { gap: 6px !important; }
.btpa-toggle-group { margin-top: 0; }

/* ── Floor plan gallery ──────────────────────────────────────────────────── */
.btpa-floor-gallery-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}
.btpa-floor-gallery-item {
    position: relative;
    width: 100px;
    height: 80px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}
.btpa-floor-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.btpa-floor-gallery-remove {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0,0,0,.55);
    color: #fff;
    border: none;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.btpa-floor-gallery-remove:hover { background: #dc2626; }

/* ── Listing Type — Residential / Commercial radio ───────────────────────── */
.btpa-listing-type-field { margin-bottom: 8px; }
.btpa-listing-type-field .btpa-radio-group { gap: 12px; }
.btpa-listing-type-field .btpa-radio-label {
    padding: 8px 20px;
    font-weight: 500;
    border-width: 1.5px;
}
.btpa-listing-type-field .btpa-radio-label:has(input:checked) {
    border-color: #01226B;
    background: #f0f4ff;
    color: #01226B;
}
/* When Commercial is selected, residential-only fields are hidden via JS toggle()
   but this class allows external CSS targeting on the frontend */
.btpa-listing--commercial .btpa-residential-only { display: none !important; }

/* ── Utilities & Energy — radio button groups ────────────────────────────── */
.btpa-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}
.btpa-radio-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    padding: 6px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    transition: border-color .15s;
}
.btpa-radio-label:hover { border-color: #9ca3af; }
.btpa-radio-label input[type="radio"] { accent-color: var(--accent-color, #9d174d); }

/* ── Flatpickr — multi-date picker theme ─────────────────────────────────── */
.btpa-flatpickr-dates {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 14px;
    color: #374151;
    background: #fff;
    cursor: pointer;
    box-sizing: border-box;
}
.btpa-flatpickr-dates:focus { outline: 2px solid var(--accent-color, #9d174d); outline-offset: 1px; }

.btpa-flatpickr-cal .flatpickr-day.selected,
.btpa-flatpickr-cal .flatpickr-day.selected:hover {
    background: var(--accent-color, #9d174d);
    border-color: var(--accent-color, #9d174d);
}
.btpa-flatpickr-cal .flatpickr-day:hover {
    background: #f9f0f4;
}
.btpa-flatpickr-cal .flatpickr-months .flatpickr-month {
    background: var(--primary-color-black, #0d1b2e);
    color: #fff;
    border-radius: 6px 6px 0 0;
}
.btpa-flatpickr-cal .flatpickr-current-month .flatpickr-monthDropdown-months,
.btpa-flatpickr-cal .flatpickr-current-month input.cur-year {
    color: #fff;
}
.btpa-flatpickr-cal .flatpickr-weekdays { background: var(--primary-color-black, #0d1b2e); }
.btpa-flatpickr-cal span.flatpickr-weekday {
    background: var(--primary-color-black, #0d1b2e);
    color: rgba(255,255,255,.7);
}
.btpa-flatpickr-cal .flatpickr-months .flatpickr-prev-month svg,
.btpa-flatpickr-cal .flatpickr-months .flatpickr-next-month svg { fill: #fff; }

/* ── Seller Declaration checkbox ─────────────────────────────────────────── */
.btpa-seller-declaration {
    margin: 28px 0 0;
    padding: 18px 20px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-left: 3px solid var(--accent-color, #9d174d);
    border-radius: 0 6px 6px 0;
}
.btpa-declaration-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}
.btpa-declaration-label input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--accent-color, #9d174d);
    cursor: pointer;
}
.btpa-declaration-text {
    font-size: 14px;
    color: #374151;
    line-height: 1.6;
}
.btpa-declaration-text strong { color: #0d1b2e; }

/* Label note — "(if applicable)" small text beside a label */
.btpa-label-note {
    font-size: 12px;
    font-weight: 400;
    color: #9ca3af;
    margin-left: 2px;
}

/* ── Tooltip (? button beside form labels) ──────────────────────────────── */
.btpa-tooltip-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    vertical-align: middle;
}
/* .btpa-tooltip-btn base styles removed — handled via theme/Elementor custom CSS */
.btpa-tooltip-btn:hover,
.btpa-tooltip-btn[aria-expanded="true"] {
    border-color: var(--accent-color);
    color: var(--accent-color);
}
.btpa-tooltip-box {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    background: #1f2937;
    color: #f9fafb;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.55;
    padding: 10px 14px;
    border-radius: 6px;
    z-index: 100;
    pointer-events: none;
    /* Arrow pointing down */
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.18));
}
.btpa-tooltip-box::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1f2937;
}
.btpa-tooltip-wrap.is-open .btpa-tooltip-box,
.btpa-tooltip-wrap:hover .btpa-tooltip-box {
    display: block;
}
/* On narrow screens, pin tooltip to the left so it doesn't overflow */
@media (max-width: 480px) {
    .btpa-tooltip-box {
        left: 0;
        transform: none;
    }
    .btpa-tooltip-box::after { left: 18px; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Make an Offer — modal popup + header bell + button
   ═══════════════════════════════════════════════════════════════════════════ */

/* Header bell ------------------------------------------------------------- */
.btpa-header-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color-black);
    text-decoration: none;
    line-height: 0;
    padding: 4px;
}
.btpa-header-bell:hover,
.btpa-header-bell:focus { color: var(--accent-color); }

/* The Better Messages counter renders inside as a <span>. Style it as a badge. */
.btpa-header-bell__count > span,
.btpa-header-bell__count .bp-better-messages-counter,
.btpa-header-bell__count .better-messages-counter {
    position: absolute;
    top: -2px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--accent-color);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-sizing: border-box;
}
/* If BM renders no count (zero / preserve_space), the wrapper span sits empty —
   keep it from leaving a visible artefact. */
.btpa-header-bell__count:empty { display: none; }

/* Modal -------------------------------------------------------------------- */
body.btpa-offer-modal-open { overflow: hidden; }

.btpa-offer-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.btpa-offer-modal[hidden] { display: none; }

.btpa-offer-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 29, 35, 0.55);
}
.btpa-offer-modal__panel {
    position: relative;
    width: 100%;
    max-width: 1000px;
    /* Use height (not just max-height) so the flex column has a defined size
       to distribute — without this, the chat area's flex: 1 has nothing to
       expand into and collapses to its min-height. */
    height: calc(100vh - 48px);
    max-height: calc(100vh - 48px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Responsive padding lives in the breakpoint blocks below. Children that
       used to have their own horizontal padding now inherit spacing from this. */
    padding: 40px;
    box-sizing: border-box;
}
/* Tablet — laptop padding scales down */
@media (max-width: 1024px) {
    .btpa-offer-modal__panel { padding: 25px; }
}
.btpa-offer-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    color: var(--text-color);
    cursor: pointer;
    border-radius: 50%;
    z-index: 2;
    outline: none;
}
.btpa-offer-modal__close:hover { background: var(--mushroom-color); }
.btpa-offer-modal__close:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Header — padding removed per design spec. The panel's padding handles the
   spacing from the panel edge. We still pad the title's right side so it
   doesn't run under the close button. */
.btpa-offer-modal__header {
    padding: 0;
}
.btpa-offer-modal__header h2 {
    margin: 0 0 6px;
    padding-right: 48px; /* leave room for the close button */
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color-black);
}
.btpa-offer-modal__subtitle {
    margin: 0;
    font-size: 13px;
    color: var(--text-color);
    line-height: 1.5;
}
/* Property + chat-heading: vertical padding only (horizontal handled by panel) */
.btpa-offer-modal__property {
    padding: 16px 0 4px;
    background: transparent;
}
.btpa-offer-modal__chat-heading {
    margin: 0;
    padding: 16px 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color-black);
    background: transparent;
}
/* Chat area bleeds out via negative margin so the iframe reaches the panel's
   rounded edges instead of sitting in a 40px white frame. Margin values mirror
   the panel padding at each breakpoint. */
.btpa-offer-modal__chat {
    flex: 1 1 auto;
    overflow: hidden;
    min-height: 0;
    padding: 0;
    background: #fff;
    margin: 0 -40px -40px;
}
@media (max-width: 1024px) {
    .btpa-offer-modal__chat { margin: 0 -25px -25px; }
}
.btpa-offer-modal__loading {
    padding: 40px 24px;
    text-align: center;
    color: var(--text-color);
    font-size: 14px;
}

/* Property summary inside modal ------------------------------------------- */
.btpa-offer-property {
    display: flex;
    gap: 20px;
    align-items: center;
}
.btpa-offer-property__image {
    width: 240px;
    height: 160px;
    flex-shrink: 0;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-color: var(--mushroom-color);
}
.btpa-offer-property__body { flex: 1; min-width: 0; }
.btpa-offer-property__title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color-black);
    line-height: 1.3;
}
.btpa-offer-property__location {
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 4px;
}
.btpa-offer-property__price {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color-black);
}

/* Mobile sizing — fullscreen modal + STACKED property card (image on top).
   On mobile the panel is exactly 100vh with no overflow, so every section's
   total height MUST fit. The chat area is the only flex-grow item and the
   iframe inside it must NOT carry a min-height (the iframe must shrink with
   its parent so the input always stays visible at the viewport bottom). */
@media (max-width: 600px) {
    .btpa-offer-modal { padding: 0; }
    .btpa-offer-modal__panel {
        max-width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        padding: 16px;
    }
    .btpa-offer-modal__header h2 { font-size: 17px; margin-bottom: 4px; padding-right: 40px; }
    .btpa-offer-modal__subtitle { font-size: 12px; }
    .btpa-offer-modal__property { padding: 12px 0 4px; }
    .btpa-offer-modal__chat-heading { padding: 8px 0; font-size: 14px; }
    /* Chat bleed mirrors mobile panel padding */
    .btpa-offer-modal__chat { margin: 0 -16px -16px; }

    /* Stack the property card on mobile: image full-width on top, info below.
       Keep image SHORT (140px) so the chat area has enough vertical room. */
    .btpa-offer-property {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .btpa-offer-property__image {
        width: 100%;
        height: 140px;
        border-radius: 6px;
    }
    .btpa-offer-property__title { font-size: 15px; margin-bottom: 2px; }
    .btpa-offer-property__location { margin-bottom: 4px; font-size: 12px; }
    .btpa-offer-property__price { font-size: 15px; }

    /* Critical: kill min-height on the chat area and iframe on mobile so they
       can shrink to fit. The iframe stretches to fill whatever the flex-1 chat
       area gives it, and BM's internal scrolling handles the message overflow.
       The input bar at iframe's bottom stays visible. */
    .btpa-offer-modal__chat {
        min-height: 0;
        flex: 1 1 auto;
    }
    .btpa-offer-modal__iframe {
        min-height: 0;
        height: 100%;
    }
}

/* ─── Make an Offer button — magenta outline style ────────────────────────── */
.btpa-make-offer-btn {
    background: transparent;
    border: 1.5px solid var(--accent-color);
    color: var(--accent-color);
    padding: 10px 24px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
    display: inline-block;
    line-height: 1.2;
}
.btpa-make-offer-btn:hover,
.btpa-make-offer-btn:focus {
    background: var(--accent-color);
    color: #fff;
}

/* ─── Modal chat iframe ───────────────────────────────────────────────────── */
.btpa-offer-modal__iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #fff;
}
/* Note: mobile sizing for .btpa-offer-modal__chat and .btpa-offer-modal__iframe
   lives in the @media (max-width: 600px) block above. Don't add min-height
   rules here — they break mobile flex-shrink and push the input off-screen. */

/* ═══════════════════════════════════════════════════════════════════════════
   Buyer Enquiries table — matches design with avatars and outline buttons
   ═══════════════════════════════════════════════════════════════════════════ */
.btpa-enquiries-card {
    border: 1px solid var(--mushroom-color);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}
.btpa-enquiries-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}
.btpa-enquiries-table thead tr {
    background: var(--off-white);
}
.btpa-enquiries-table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
    border-bottom: 1px solid var(--mushroom-color);
}
.btpa-enquiries-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--mushroom-color);
    font-size: 14px;
    color: var(--primary-color-black);
    vertical-align: middle;
}
.btpa-enquiries-table tbody tr:last-child td {
    border-bottom: none;
}

/* Avatar + name combo */
.btpa-enquiry-buyer {
    display: flex;
    align-items: center;
    gap: 10px;
}
.btpa-enquiry-avatar {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mushroom-color);
    color: var(--secondary-dark-blue);
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
    object-fit: cover;
}
img.btpa-enquiry-avatar { object-fit: cover; }
.btpa-enquiry-avatar--placeholder {
    text-transform: uppercase;
}
.btpa-enquiry-name {
    font-weight: 500;
    color: var(--primary-color-black);
}

/* Action button columns — keep them tight, right-aligned */
.btpa-enquiries-table .btpa-col-action {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}
.btpa-enquiries-table .btpa-col-time {
    color: var(--text-color);
    white-space: nowrap;
}

/* Small outline buttons inside the table */
.btpa-btn-sm {
    padding: 6px 16px;
    font-size: 13px;
    border-radius: 6px;
}
.btpa-btn-outline {
    background: transparent;
    border: 1px solid var(--mushroom-color);
    color: var(--primary-color-black);
    text-decoration: none;
    display: inline-block;
    line-height: 1.4;
    font-weight: 500;
    transition: border-color .15s, color .15s, background .15s;
}
.btpa-btn-outline:hover,
.btpa-btn-outline:focus {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.btpa-enquiries-footer {
    padding: 14px 16px;
    text-align: right;
    background: var(--off-white);
    border-top: 1px solid var(--mushroom-color);
}

/* Mobile — horizontal scroll (wrapper handled by theme/Elementor) */
@media (max-width: 700px) {
    .btpa-enquiries-table {
        min-width: 600px;
        overflow-x: unset !important;
    }
    /* Footer sits outside the scrollable table — keep it full width of the card */
    .btpa-enquiries-footer {
        position: sticky;
        left: 0;
        width: 100%;
        box-sizing: border-box;
    }
}

/* Disabled outline button (e.g. Checklist when page not configured) */
.btpa-btn-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   [btpa_property_search] — search page layout, sidebar, grid/list, cards
   ═══════════════════════════════════════════════════════════════════════════ */

.btpa-property-search {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 28px;
    align-items: start;
}

/* ─── Filter sidebar ──────────────────────────────────────────────────────── */
.btpa-property-search__sidebar {
    position: sticky;
    top: 24px;
}
.btpa-filters-card {
    background: #fff;
    border: 1px solid var(--mushroom-color);
    border-radius: 8px;
    padding: 20px;
}
.btpa-filters-card__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mushroom-color);
}
.btpa-filters-card__header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color-black);
}
.btpa-filters-clear-all,
.btpa-filter-clear {
    background: transparent !important;
    border: none !important;
    color: var(--primary-color-black) !important;
    padding: 0 !important;
    text-decoration: underline;
    cursor: pointer;
    outline: none !important;
    box-shadow: none !important;
    font-weight: 500;
}
.btpa-filters-clear-all { font-size: 12px; }
.btpa-filter-clear     { font-size: 11px; }
.btpa-filters-clear-all:hover,
.btpa-filter-clear:hover { color: var(--accent-color) !important; }

.btpa-filter-group {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--mushroom-color);
}
.btpa-filter-group:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.btpa-filter-group__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}
.btpa-filter-group__title {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color-black);
}
.btpa-filter-group__head .btpa-filter-group__title { margin-bottom: 0; }

/* Search input with icon */
.btpa-filter-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--mushroom-color);
    border-radius: 6px;
    background: #fff;
}
.btpa-filter-search svg { color: var(--text-color); flex-shrink: 0; }
.btpa-filter-search input {
    border: none !important;
    background: none !important;
    outline: none !important;
    box-shadow: none !important;
    flex: 1;
    font-size: 14px;
    padding: 0;
}

/* Generic input */
.btpa-filters-form input[type="text"],
.btpa-filters-form input[type="number"],
.btpa-filters-form select,
.btpa-filter-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--mushroom-color);
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
    background-color: #fff;
    appearance: auto;
}

/* Category pills (Residential / Commercial) */
.btpa-filter-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.btpa-filter-pill {
    cursor: pointer;
    border: 1px solid var(--mushroom-color);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 13px;
    background: #fff;
    color: var(--primary-color-black);
    transition: all 0.15s;
}
.btpa-filter-pill input { display: none; }
.btpa-filter-pill:hover { border-color: var(--accent-color); }
.btpa-filter-pill.is-active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
}

/* Checkbox rows (bedrooms, tenants) */
.btpa-filter-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.btpa-filter-checkboxes--stack {
    flex-direction: column;
    gap: 8px;
}
.btpa-filter-check {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--mushroom-color);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 13px;
    background: #fff;
    transition: all 0.15s;
}
.btpa-filter-check input { margin-right: 6px; accent-color: var(--accent-color); }
.btpa-filter-check:hover { border-color: var(--accent-color); }
.btpa-filter-check:has(input:checked) {
    border-color: var(--accent-color);
    background: rgba(172, 18, 90, 0.05);
}
/* Stacked variant (furnishing) — checkbox + label as a row */
.btpa-filter-check--row {
    border: none;
    padding: 4px 0;
    background: transparent;
}
.btpa-filter-check--row:hover { background: transparent; }
.btpa-filter-check--row:has(input:checked) { background: transparent; }

/* Price range */
.btpa-filter-range { display: flex; align-items: center; gap: 8px; }
.btpa-filter-range input,
.btpa-filter-range select { width: 100%; flex: 1; }
.btpa-price-select {
    padding: 8px 10px;
    border: 1px solid var(--mushroom-color);
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
    appearance: auto;
    box-sizing: border-box;
}
.btpa-filter-range__sep { color: var(--text-color); flex-shrink: 0; }

/* ─── Main area + toolbar ─────────────────────────────────────────────────── */
.btpa-property-search__main { min-width: 0; }

.btpa-property-search__toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding: 0;
    background: transparent;
    border: none;
}
.btpa-view-toggle {
    display: flex;
    gap: 4px;
}
.btpa-view-toggle__btn {
    width: 32px; height: 32px;
    border: none !important;
    background: transparent !important;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color-black) !important;
    padding: 0;
    outline: none !important;
    box-shadow: none !important;
}
.btpa-view-toggle__btn:hover { background: var(--mushroom-color) !important; }
.btpa-view-toggle__btn.is-active {
    background: var(--mushroom-color) !important;
    color: var(--primary-color-black) !important;
}

.btpa-sort-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.btpa-sort-label {
    font-size: 13px;
    color: var(--text-color);
    white-space: nowrap;
}
.btpa-sort {
    padding: 6px 28px 6px 10px;
    border: 1px solid var(--mushroom-color);
    border-radius: 4px;
    background: #fff;
    font-size: 13px;
    cursor: pointer;
}

/* Category pills — horizontally scrollable. Claims all remaining toolbar
   width via flex:1, starts pills from the left so overflow-x:auto scrolls
   naturally to the right. margin-left:auto pushes the block to the right
   side of the toolbar when there's space. */
.btpa-category-pills {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    /* No margin-left here — the first pill carries it (see below).
       Take all remaining toolbar width so overflow-x:auto has a
       constrained width to scroll within. */
    flex: 1 1 0;
    min-width: 0;
    overflow-x: auto;
    padding: 4px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--mushroom-color) transparent;
    -webkit-overflow-scrolling: touch;
    /* Override any external max-width that would break scrolling */
    max-width: none !important;
}
/* Push all pills to the right when they fit by giving the first pill
   auto left-margin. When pills overflow, this collapses to 0 and the
   row scrolls left→right naturally. */
.btpa-cat-pill:first-child {
    margin-left: auto;
}
.btpa-category-pills::-webkit-scrollbar {
    height: 4px;
}
.btpa-category-pills::-webkit-scrollbar-track {
    background: transparent;
}
.btpa-category-pills::-webkit-scrollbar-thumb {
    background: var(--mushroom-color);
    border-radius: 2px;
}
.btpa-cat-pill {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 7px 18px;
    border: 1.5px solid var(--accent-color);
    border-radius: 20px;
    background: #fff;
    color: var(--accent-color);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    transition: background 0.15s, color 0.15s;
    outline: none;
}
.btpa-cat-pill:hover {
    background: rgba(172, 18, 90, 0.06);
}
.btpa-cat-pill.is-active {
    background: var(--accent-color);
    color: #fff;
}
.btpa-cat-pill:focus-visible {
    box-shadow: 0 0 0 3px rgba(172, 18, 90, 0.25);
}

/* ─── Results grid + cards ────────────────────────────────────────────────── */
.btpa-property-search__results.is-loading { opacity: 0.5; pointer-events: none; transition: opacity 0.2s; }

.btpa-listing-grid {
    display: grid;
    gap: 20px;
}
.btpa-listing-grid.btpa-view-grid {
    /* Column count is controlled by the `columns` shortcode attribute, which
       renders as --btpa-grid-cols on the .btpa-search-results parent.
       Fallback of 2 preserves the previous default. Tablet + mobile media
       queries below override this for narrower screens. */
    grid-template-columns: repeat(var(--btpa-grid-cols, 2), minmax(0, 1fr));
}
.btpa-listing-grid.btpa-view-list {
    grid-template-columns: 1fr;
}

.btpa-listing-card {
    background: #fff;
    border: 1px solid var(--mushroom-color);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.15s, transform 0.15s;
}
.btpa-listing-card:hover {
    box-shadow: 0 6px 20px rgba(8, 29, 35, 0.08);
    transform: translateY(-2px);
}
.btpa-listing-card__image-wrap {
    display: block;
    aspect-ratio: 16 / 10;
    background: var(--mushroom-color);
    overflow: hidden;
}
.btpa-listing-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.btpa-listing-card__image--placeholder { width: 100%; height: 100%; }
.btpa-listing-card__body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.btpa-listing-card__title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--primary-color-black);
}
.btpa-listing-card__title a {
    color: inherit;
    text-decoration: none;
}
.btpa-listing-card__title a:hover { color: var(--accent-color); }

.btpa-listing-card__location {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-color);
}
.btpa-listing-card__location svg { color: var(--accent-color); flex-shrink: 0; }

.btpa-listing-card__specs {
    display: flex;
    gap: 16px;
    padding: 4px 0;
    margin: 4px 0;
}
.btpa-listing-card__spec {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-color);
}
.btpa-listing-card__spec svg { color: var(--text-color); }

.btpa-listing-card__price {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--secondary-dark-blue);
    margin-top: auto;
}

/* List view variant — image left, content right, single column */
.btpa-listing-grid.btpa-view-list .btpa-listing-card {
    flex-direction: row;
}
.btpa-listing-grid.btpa-view-list .btpa-listing-card__image-wrap {
    width: 300px;
    aspect-ratio: auto;
    flex-shrink: 0;
}
.btpa-listing-grid.btpa-view-list .btpa-listing-card__body { padding: 20px; }

/* ─── Empty state + footer (count + pagination) ───────────────────────────── */
/* ── Professional Directory Filter [btpa_professional_filter] ────────────── */
.btpa-pro-filter-wrap { width: 100%; }
.btpa-pro-filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}
.btpa-pro-filter-field { flex: 1 1 200px; min-width: 0; }
.btpa-pro-filter-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--mushroom-color);
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
    color: var(--primary-color-black);
    box-sizing: border-box;
    appearance: auto;
}
.btpa-pro-filter-select:focus { outline: 2px solid var(--accent-color); outline-offset: 1px; }
.btpa-pro-filter-select:disabled { background: #f3f4f6; color: #9ca3af; }
.btpa-pro-filter-actions {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
}
.btpa-pro-filter-clear-all {
    font-size: 14px;
    color: #6b7280;
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
}
.btpa-pro-filter-clear-all:hover { color: var(--accent-color); }
@media (max-width: 600px) {
    .btpa-pro-filter-field { flex-basis: 100%; }
    .btpa-pro-filter-actions { width: 100%; }
}

.btpa-archive-heading {
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-color-black);
    margin: 0 0 20px;
}
.btpa-search-empty {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border: 1px solid var(--mushroom-color);
    border-radius: 8px;
    color: var(--text-color);
}
.btpa-search-empty p { margin: 0 0 8px; }

.btpa-property-search__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}
.btpa-property-search__count {
    font-size: 13px;
    color: var(--text-color);
}
.btpa-result-count {
    font-weight: 600;
    color: var(--primary-color-black);
}

.btpa-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
}
.btpa-page-btn {
    min-width: 36px;
    padding: 8px 14px;
    border: 1px solid var(--mushroom-color);
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.2;
    color: var(--primary-color-black);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btpa-page-btn:hover:not(:disabled):not(.is-current) {
    border-color: var(--accent-color);
    color: var(--accent-color);
}
.btpa-page-btn.is-current {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
}
.btpa-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .btpa-property-search {
        grid-template-columns: 1fr;
    }
    .btpa-property-search__sidebar {
        position: static;
    }
    .btpa-listing-grid.btpa-view-list .btpa-listing-card {
        flex-direction: column;
    }
    .btpa-listing-grid.btpa-view-list .btpa-listing-card__image-wrap {
        width: 100%;
        aspect-ratio: 16 / 10;
    }
    .btpa-listing-grid.btpa-view-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 600px) {
    .btpa-property-search__toolbar {
        flex-wrap: wrap;
        gap: 10px;
    }
    /* On narrow widths, pills take full row below sort/view */
    .btpa-category-pills {
        margin-left: 0;
        width: 100%;
        flex-basis: 100%;
        max-width: none !important;
    }
    /* On mobile, start pills from the left (no right-push needed) */
    .btpa-cat-pill:first-child {
        margin-left: 0;
    }
    .btpa-listing-grid.btpa-view-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Professional onboarding notice (dashboard) ──────────────────────────── */
.btpa-pro-onboarding {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
  padding: 18px 20px;
  margin: 0 0 24px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-left: 4px solid #01226B;
  border-radius: 8px;
}
.btpa-pro-onboarding__text {
  margin: 0;
  flex: 1 1 260px;
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: #0d1b2e;
}
.btpa-pro-onboarding__btn {
  flex: 0 0 auto;
  background: #01226B;
  border-color: #01226B;
  color: #fff;
  white-space: nowrap;
}
.btpa-pro-onboarding__btn:hover,
.btpa-pro-onboarding__btn:focus {
  background: #011a54;
  border-color: #011a54;
  color: #fff;
}
.btpa-pro-onboarding--pending {
  border-left-color: #b45309;
}
.btpa-pro-onboarding--approved {
  border-left-color: #15803d;
}

@media (max-width: 600px) {
  .btpa-pro-onboarding {
    flex-direction: column;
    align-items: stretch;
  }
  .btpa-pro-onboarding__btn {
    text-align: center;
  }
}