/* Resales Online – Frontend Styles
 * Natural Mediterranean palette – warm ivory, sage green, earth tones
 */

/* ── SUB-HEADER ── */
.ro-subheader {
    background: #1a3c5e;
    /* Break out of lsl-container's padding + max-width on all viewport sizes */
    margin-top: -64px;
    margin-bottom: 32px;
    padding-block: 22px;
    margin-inline: calc(-50vw + 50%);
    padding-inline: calc(50vw - 50%);
}
.ro-subheader__inner {
    max-width: 1240px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.ro-subheader__left { min-width: 0; flex-shrink: 1; }
.ro-subheader__search { flex: 1; max-width: 380px; min-width: 0; }
.ro-subheader__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.6rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 3px;
    line-height: 1.2;
}
.ro-subheader__summary {
    font-size: .8rem;
    color: rgba(255,255,255,.65);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 860px) {
    /* On tablet/mobile: stack search below title row */
    .ro-subheader__inner { flex-wrap: wrap; }
    .ro-subheader__search { order: 3; flex: 1 1 100%; max-width: none; }
}

/* ── CSS VARIABLES ── */
/* Defined at :root so sub-header (outside .ro-wrap) can also use them */
:root {
    --cream:        #f8f6f2;
    --ivory:        #ffffff;
    --sand:         #d6cfc4;
    --stone:        #a8a09a;
    --sage:         #1a3c5e;
    --sage2:        #112840;
    --earth:        #c8a96e;
    --earth2:       #b8955a;
    --dark:         #1c1c1e;
    --mid:          #3a3a3a;
    --muted:        #7a7a7a;
    --white:        #ffffff;
    --accent:       #1a3c5e;
    --accent-warm:  #c8a96e;
    --radius:       8px;
    --radius-lg:    16px;
    --shadow:       0 2px 8px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.04);
    --shadow-h:     0 8px 36px rgba(26,23,20,.13);
    --shadow-card:  0 2px 8px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.04);
    --shadow-hover: 0 8px 32px rgba(0,0,0,.12);
}
.ro-wrap {
    font-family: 'DM Sans', sans-serif;
    color: var(--dark);
}

/* ── RESET ── */
.ro-wrap *,
.ro-wrap *::before,
.ro-wrap *::after,
.ro-subheader *,
.ro-subheader *::before,
.ro-subheader *::after { box-sizing: border-box; }

/* ── TWO-COLUMN LAYOUT ── */
.ro-wrap {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}
.ro-main-col {
    flex: 1;
    min-width: 0;
}

/* ── SIDEBAR ── */
.ro-sidebar {
    width: 272px;
    flex-shrink: 0;
    background: var(--ivory);
    border: none;
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-card);
    position: static;
}

/* ── SIDEBAR COLLAPSE TOGGLE ── */
.ro-sidebar-toggle-btn {
    display: none; /* only shown in map view */
    position: absolute;
    top: 10px;
    right: -14px;
    z-index: 10;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--sand);
    background: var(--ivory);
    color: var(--muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 6px rgba(26,23,20,.1);
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: color .2s, background .2s;
}
.ro-sidebar-toggle-btn:hover { background: var(--cream); color: var(--dark); }
.ro-wrap.ro-map-active .ro-sidebar-toggle-btn {
    display: flex;
}

/* ── SIDEBAR MINI MAP ── */
.ro-mini-map-wrap {
    width: 100%;
    height: 148px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
    cursor: pointer;
    border: 1px solid var(--sand);
    transition: border-color .15s, box-shadow .15s;
}
.ro-mini-map-wrap:hover {
    border-color: #c9a96e;
    box-shadow: 0 2px 8px rgba(26,60,94,.1);
}
.ro-mini-map-wrap.hidden { display: none; }
#ro-mini-map {
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ── SIDEBAR ACTION BUTTONS (top of sidebar) ── */
.ro-sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--sand);
}
.ro-sb-btn {
    width: 100%;
    padding: 10px 16px;
    border-radius: var(--radius);
    font-family: 'DM Sans', sans-serif;
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--sand);
    background: transparent;
    color: var(--muted);
    transition: all .2s;
    text-align: center;
    letter-spacing: .03em;
}
.ro-sb-btn:hover {
    border-color: var(--sage);
    color: var(--sage);
}
.ro-sb-btn.active {
    background: var(--sage);
    border-color: var(--sage);
    color: var(--white);
}


/* ── Filter labels ── */
.ro-filter-label {
    display: block;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
}

/* ── Range row (price / built) ── */
.ro-range-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.ro-range-half {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ro-range-sep {
    padding-top: 9px;
    color: var(--muted);
    font-size: .85rem;
    flex-shrink: 0;
}
.ro-range-sel {
    width: 100%;
    background: var(--cream);
    border: 1px solid var(--sand);
    border-radius: var(--radius);
    padding: 7px 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: .8rem;
    color: var(--dark);
    outline: none;
    cursor: pointer;
}
.ro-range-sel:focus { border-color: var(--sage); }
.ro-range-custom {
    width: 100%;
    box-sizing: border-box;
    background: var(--white);
    border: 1px solid var(--sage);
    border-radius: var(--radius);
    padding: 7px 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: .8rem;
    color: var(--dark);
    outline: none;
}

/* ── Number boxes (beds / baths / floor / staat) ── */
.ro-num-boxes {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.ro-num-box {
    min-width: 38px;
    height: 36px;
    padding: 0 10px;
    background: var(--white);
    border: 1px solid var(--sand);
    border-radius: var(--radius);
    font-family: 'DM Sans', sans-serif;
    font-size: .82rem;
    color: var(--muted);
    cursor: pointer;
    transition: background .13s, color .13s, border-color .13s;
    white-space: nowrap;
}
.ro-num-box:hover { background: var(--cream); color: var(--dark); border-color: var(--earth); }
.ro-num-box.active { background: var(--sage); color: #fff; border-color: var(--sage); }
.ro-num-boxes--wide {
    flex-direction: column;
    gap: 4px;
}
.ro-num-boxes--wide .ro-num-box {
    flex: none;
    width: 100%;
    height: auto;
    padding: 9px 12px;
    text-align: left;
    white-space: normal;
}

/* ── Type vastgoed parent selector ── */
.ro-type-parent-boxes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    align-items: center;
}
.ro-type-group-label {
    grid-column: 1 / -1;
    font-size: 0.68rem;
    color: var(--muted);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding-bottom: 2px;
}
.ro-type-group-divider {
    grid-column: 1 / -1;
    border: none;
    border-top: 1px solid var(--sand);
    margin: 2px 0;
}

/* ── Feature chips (kenmerken) ── */
.ro-feat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.ro-feat-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    background: var(--white);
    border: 1px solid var(--sand);
    border-radius: 20px;
    font-family: 'DM Sans', sans-serif;
    font-size: .8rem;
    color: var(--muted);
    cursor: pointer;
    transition: background .13s, color .13s, border-color .13s;
    user-select: none;
}
.ro-feat-chip input[type="checkbox"] { display: none; }
.ro-feat-chip:hover { background: var(--cream); color: var(--dark); border-color: var(--earth); }
.ro-feat-chip.active,
.ro-feat-chip:has(input:checked) { background: var(--sage); color: #fff; border-color: var(--sage); }

/* ── FILTER FORM ── */
.ro-filters-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ro-filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.ro-filter-group label {
    font-size: .67rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
}
.ro-filter-group select,
.ro-filter-group input {
    background: var(--cream);
    border: 1px solid var(--sand);
    border-radius: var(--radius);
    padding: 8px 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: .85rem;
    color: var(--dark);
    outline: none;
    transition: border-color .2s, background .2s;
    width: 100%;
    min-width: 0;
}
.ro-filter-group select:focus,
.ro-filter-group input:focus {
    border-color: var(--sage);
    background: var(--white);
}

/* Extended filters */
.ro-filters-extra {
    padding-top: 12px;
    border-top: 1px solid var(--sand);
    margin-top: 4px;
}
.ro-filters-extra-inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ro-btn-search {
    background: var(--sage);
    color: var(--white);
    border: none;
    border-radius: var(--radius);
    padding: 10px 26px;
    font-family: 'DM Sans', sans-serif;
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .06em;
    cursor: pointer;
    transition: background .2s, transform .1s;
    width: 100%;
}
.ro-btn-search:hover {
    background: var(--sage2);
    transform: translateY(-1px);
}
.ro-btn-reset {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--sand);
    border-radius: var(--radius);
    padding: 9px 16px;
    font-family: 'DM Sans', sans-serif;
    font-size: .82rem;
    cursor: pointer;
    transition: all .2s;
    text-decoration: none;
    display: block;
    text-align: center;
    width: 100%;
}
.ro-btn-reset:hover {
    border-color: var(--sage);
    color: var(--sage);
}
.ro-filter-more-toggle {
    margin-top: 2px;
}

/* ── LOADING STATE ── */
#ro-results.ro-loading {
    opacity: .5;
    pointer-events: none;
    transition: opacity .15s;
}
#ro-results.ro-loading::after {
    content: '';
    display: block;
    width: 32px; height: 32px;
    margin: 40px auto 0;
    border: 3px solid var(--sand);
    border-top-color: var(--sage);
    border-radius: 50%;
    animation: ro-spin .7s linear infinite;
}
@keyframes ro-spin { to { transform: rotate(360deg); } }

/* ── PAGE HEADER ── */
.ro-page-header {
    margin-bottom: 24px;
}
.ro-page-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 400;
    color: var(--dark);
    margin: 0 0 6px;
    line-height: 1.2;
}
.ro-page-subtitle {
    font-size: .82rem;
    color: var(--muted);
    margin: 0;
    letter-spacing: .02em;
}

/* ── HERO SEARCH BAR ── */
/* Search wrapper acts as the styled "input" field */
.ro-hero-search {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    min-height: 42px;
    padding: 6px 12px 6px 38px;
    background: rgba(255,255,255,.13);
    border: 1.5px solid rgba(255,255,255,.25);
    border-radius: var(--radius);
    cursor: text;
    transition: border-color .18s, background .18s, box-shadow .18s;
}
.ro-hero-search:focus-within {
    background: rgba(255,255,255,.2);
    border-color: rgba(201,169,110,.8);
    box-shadow: 0 0 0 3px rgba(201,169,110,.18);
}
.ro-hero-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: rgba(255,255,255,.55);
    pointer-events: none;
    flex-shrink: 0;
}
/* Chips container — display:contents makes chips direct flex children */
.ro-hero-chips { display: contents; }
/* Individual chip */
.ro-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 6px 3px 9px;
    background: rgba(255,255,255,.22);
    border-radius: 999px;
    font-size: .8rem;
    color: #fff;
    white-space: nowrap;
    line-height: 1.3;
}
.ro-hero-chip__remove {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: rgba(255,255,255,.7);
    cursor: pointer;
    font-size: .9rem;
    padding: 0 1px;
    line-height: 1;
    transition: color 120ms;
}
.ro-hero-chip__remove:hover { color: #fff; }
/* The actual text input — transparent, grows to fill remaining space */
.ro-hero-search-input {
    flex: 1;
    min-width: 80px;
    padding: 3px 0;
    font-family: inherit;
    font-size: .95rem;
    color: #fff;
    background: transparent;
    border: none;
    outline: none;
}
.ro-hero-search-input::placeholder { color: rgba(255,255,255,.5); }
/* Already-selected suggestion */
.ro-suggest-item.is-selected { opacity: .45; pointer-events: none; }

/* Suggestions dropdown */
.ro-hero-suggestions {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--white);
    border: 1.5px solid var(--sand);
    border-radius: var(--radius);
    box-shadow: var(--shadow-h);
    z-index: 200;
    overflow: hidden;
}
.ro-suggest-group {
    padding: 6px 14px 4px;
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--cream);
    border-bottom: 1px solid var(--sand);
}
.ro-suggest-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--cream);
    transition: background .12s;
}
.ro-suggest-item:last-child { border-bottom: none; }
.ro-suggest-item:hover,
.ro-suggest-item.is-active { background: var(--cream); }
.ro-suggest-val {
    font-size: .9rem;
    color: var(--dark);
}
.ro-suggest-count {
    font-size: .75rem;
    color: var(--muted);
    white-space: nowrap;
}

/* ── RESULTS BAR ── */
.ro-results-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 12px;
    flex-wrap: wrap;
}
.ro-result-info {
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0;
}
.ro-result-info strong {
    color: var(--accent);
    font-weight: 600;
}
.ro-results-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}
/* ── SORT SELECT ── */
.ro-sort-select {
    background: var(--white);
    border: 1px solid var(--sand);
    border-radius: var(--radius);
    padding: 7px 32px 7px 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: .8rem;
    color: var(--dark);
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237a7a7a' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color .15s;
    white-space: nowrap;
}
.ro-sort-select:focus { border-color: var(--accent); }
.ro-view-btn {
    width: 34px;
    height: 34px;
    border: 1px solid var(--sand);
    background: var(--white);
    border-radius: var(--radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--muted);
    transition: all .2s;
}
.ro-view-btn:hover { border-color: var(--sage); color: var(--sage); }
.ro-view-btn.active { background: var(--sage); border-color: var(--sage); color: var(--white); }

/* ── LIST ── */
.ro-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 40px;
}

/* ── CARD WRAP ── */
.ro-card-wrap {
    display: flex;
    flex-direction: column;
}

/* Square bottom corners when a note bar is attached below the card */
.ro-card-wrap:has(.ro-card-note-bar) .ro-card {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* ── NOTE BAR (below card) ── */
.ro-card-note-bar {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 16px 12px;
    background: #f8f5f0;
    border: 1px solid #e8e0d5;
    border-top: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    font-family: 'DM Sans', sans-serif;
    font-size: .82rem;
    color: #555;
    line-height: 1.5;
}
.ro-card-note-icon {
    flex-shrink: 0;
    color: #c9a96e;
    margin-top: 2px;
}
.ro-card-note-text {
    flex: 1;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}
.ro-card-note-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    align-self: flex-start;
}
.ro-card-note-btn {
    background: none;
    border: 1px solid #d0c9c0;
    border-radius: 4px;
    padding: 2px 9px;
    font-size: .75rem;
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
    color: #777;
    transition: color .13s, border-color .13s;
    white-space: nowrap;
}
.ro-card-note-btn:hover         { color: #1a3c5e; border-color: #1a3c5e; }
.ro-card-note-btn--del:hover    { color: #c0392b; border-color: #c0392b; }

/* ── CARD ── */
.ro-card {
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: none;
    box-shadow: var(--shadow-card);
    transition: transform 280ms ease, box-shadow 280ms ease;
    cursor: default;
    display: flex;
    flex-direction: row;
    align-items: stretch;
}
.ro-card[data-href] { cursor: pointer; }
.ro-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}
.ro-card-img {
    position: relative;
    flex: none;
    width: 100%;
    aspect-ratio: 3/2;
    overflow: hidden;
    background: var(--sand);
}
.ro-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 480ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: block;
    will-change: transform;
}
.ro-card:hover .ro-card-img img { transform: scale(1.04); }
/* Gradient overlay on hover */
.ro-card-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 50%, rgba(26,60,94,.16) 100%);
    opacity: 0;
    transition: opacity 360ms ease;
    pointer-events: none;
    z-index: 2;
}
.ro-card:hover .ro-card-img::after { opacity: 1; }

/* ── Card photo nav (prev/next) ── */
.ro-card-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(26,23,20,.48);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .18s, background .18s;
    z-index: 3;
    padding: 0;
}
.ro-card-prev { left: 8px; }
.ro-card-next { right: 8px; }
.ro-card-img:hover .ro-card-nav { opacity: 1; }
.ro-card-nav:hover { background: rgba(26,23,20,.75); }
.ro-card-counter {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(26,23,20,.5);
    color: #fff;
    font-size: .65rem;
    padding: 2px 8px;
    border-radius: 10px;
    pointer-events: none;
    z-index: 3;
}

.ro-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(26,23,20,.72);
    color: rgba(254,252,248,.92);
    font-size: .61rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 3px;
    font-weight: 500;
    backdrop-filter: blur(4px);
}
.ro-card-ref {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(26,23,20,.55);
    color: rgba(255,255,255,.65);
    font-size: .61rem;
    padding: 3px 8px;
    border-radius: 2px;
    letter-spacing: .06em;
}
.ro-no-img {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--muted);
    font-size: .8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}
/* ── Card left column (image + thumbs) ── */
.ro-card-left {
    width: 38%;
    max-width: 420px;
    min-width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

/* ── Card thumbnails ── */
.ro-card-thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    padding: 3px;
    background: var(--sand);
}
.ro-card-thumb {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 2px;
    padding: 0;
    background: none;
    transition: border-color .18s, opacity .18s;
    opacity: .6;
}
.ro-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ro-card-thumb:hover { opacity: .85; }
.ro-card-thumb.active { border-color: var(--sage); opacity: 1; }

.ro-card-body {
    flex: 1;
    min-width: 260px;
    padding: 20px 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.ro-card-location {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent-warm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}
.ro-card-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--dark);
    line-height: 1.3;
    margin-bottom: 8px;
}
.ro-card-price {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--accent);
    line-height: 1.2;
    letter-spacing: -.01em;
    margin-bottom: 10px;
}
.ro-card-specs {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 16px;
    align-items: center;
    margin-bottom: 14px;
}
.ro-spec {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .78rem;
    color: var(--muted);
}
.ro-card-desc {
    font-size: .82rem;
    color: var(--muted);
    line-height: 1.7;
    flex: 1;
    margin-bottom: 18px;
}
.ro-card-link {
    display: inline-block;
    background: var(--sage);
    color: var(--white) !important;
    padding: 9px 22px;
    border-radius: var(--radius);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-decoration: none;
    transition: background .2s;
    align-self: flex-start;
    margin-top: auto;
}
.ro-card-link:hover { background: var(--sage2); }
.ro-card-type {
    font-size: .65rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--stone);
}

/* ── NEW DEV BADGE ── */
.ro-badge-newdev {
    background: var(--sage) !important;
    color: var(--white) !important;
}

/* ── STATUS BADGE ── */
.ro-card-status {
    position: absolute;
    bottom: 36px;
    left: 12px;
    font-size: .61rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 3px;
    font-weight: 600;
    backdrop-filter: blur(4px);
}
.ro-status-under-offer { background: rgba(255,243,205,.9); color: #7a5c00; }
.ro-status-sale-agreed { background: rgba(248,215,218,.9); color: #6b1c22; }
.ro-status-sold        { background: rgba(248,215,218,.9); color: #6b1c22; }
.ro-status-rented      { background: rgba(212,237,218,.9); color: #1a4d2e; }

/* ── MORE FILTERS BUTTON ── */
.ro-btn-more {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--sand);
    border-radius: var(--radius);
    padding: 9px 14px;
    font-family: 'DM Sans', sans-serif;
    font-size: .78rem;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
    width: 100%;
}
.ro-btn-more:hover { border-color: var(--sage); color: var(--sage); }

/* ── PAGINATION ── */
.ro-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 0 0 40px;
    flex-wrap: wrap;
}
.ro-page-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    border: 1px solid var(--sand);
    background: var(--white);
    color: var(--mid);
    font-size: .85rem;
    text-decoration: none;
    transition: all .2s;
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
}
.ro-page-btn:hover { border-color: var(--sage); color: var(--sage); }
.ro-page-btn.active { background: var(--sage); border-color: var(--sage); color: var(--white); font-weight: 600; }
.ro-page-btn.disabled { opacity: .3; pointer-events: none; }
.ro-page-info { font-size: .78rem; color: var(--muted); letter-spacing: .06em; margin: 0 6px; }

/* ── EMPTY STATE ── */
.ro-empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.ro-empty-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    font-weight: 300;
    margin-bottom: 10px;
    color: var(--mid);
}

/* ── ERROR ── */
.ro-error {
    background: #f8f2ee;
    border: 1px solid #e4cfc4;
    border-radius: 6px;
    padding: 20px 24px;
    color: #8b3a2a;
    font-size: .88rem;
    margin-bottom: 24px;
}


/* ── MOBILE ── */
@media (max-width: 860px) {
    .ro-wrap:not(.ro-map-active) { flex-direction: column; }
    .ro-wrap:not(.ro-map-active) .ro-sidebar { width: 100%; position: static; }
    .ro-wrap.ro-map-active .ro-sidebar { width: 220px; }
    .ro-wrap.ro-map-active #ro-map-results-panel { display: none !important; }
}
@media (max-width: 700px) {
    .ro-wrap.ro-map-active .ro-sidebar { display: none; }
    .ro-results-bar { flex-direction: column; align-items: flex-start; }
    .ro-card { flex-direction: column; }
    .ro-card-left { width: 100%; min-width: 0; max-width: none; }
    .ro-card-img { aspect-ratio: 16/9; border-radius: 10px 10px 0 0; }
    .ro-card-price { font-size: 1.3rem; }
    #ro-map-container { height: 420px; }
}

/* ── MAP VIEW ── */
#ro-map-wrap {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--sand);
    box-shadow: var(--shadow);
    display: none;
}
#ro-map-container {
    height: 640px;
    min-height: 500px;
    width: 100%;
}


/* Map draw control — bottom-center pill */
.ro-map-draw-ctrl {
    position: absolute;
    bottom: 38px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 500;
    display: flex;
    flex-direction: row;
    gap: 8px;
    pointer-events: none; /* let children handle clicks */
}
.ro-draw-btn,
.ro-draw-clear {
    pointer-events: all;
    border: none;
    font-family: 'DM Sans', sans-serif;
    font-size: .82rem;
    font-weight: 500;
    padding: 9px 20px;
    border-radius: var(--radius);
    box-shadow: 0 3px 14px rgba(0,0,0,.25);
    cursor: pointer;
    transition: background .15s, transform .1s;
    white-space: nowrap;
    backdrop-filter: blur(4px);
}
.ro-draw-btn {
    background: rgba(255,255,255,.95);
    color: var(--mid);
}
.ro-draw-btn:hover { background: #fff; transform: translateY(-1px); }
.ro-draw-btn.active {
    background: var(--sage);
    color: #fff;
    box-shadow: 0 3px 14px rgba(26,60,94,.45);
}
.ro-draw-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--earth);
    color: #fff;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: .68rem;
    font-weight: 700;
    margin-left: 4px;
    vertical-align: middle;
    line-height: 1;
}
.ro-draw-clear {
    background: rgba(255,255,255,.95);
    color: #b0392b;
}
.ro-draw-clear:hover { background: #fff; transform: translateY(-1px); }

/* Draw hint bar — top-center inside map */
.ro-draw-hint {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 500;
    background: rgba(26,23,20,.78);
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: .78rem;
    padding: 7px 16px;
    border-radius: 24px;
    white-space: nowrap;
    pointer-events: none;
    backdrop-filter: blur(4px);
}
.ro-draw-hint-cancel {
    pointer-events: all;
    background: none;
    border: none;
    color: var(--sage2);
    font-family: 'DM Sans', sans-serif;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

/* Polygon filter banner in list view */
.ro-poly-banner {
    background: var(--cream);
    border: 1px solid var(--sage);
    border-radius: 6px;
    padding: 9px 16px;
    font-size: .82rem;
    color: var(--mid);
    margin-bottom: 14px;
}
.ro-poly-banner a { color: var(--sage); text-decoration: none; font-weight: 500; }
.ro-poly-banner a:hover { text-decoration: underline; }

/* Map layer switcher (bottom-left) */
.ro-map-layer-ctrl {
    position: absolute;
    bottom: 32px;
    left: 10px;
    z-index: 500;
    display: flex;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,.22);
    overflow: hidden;
}
.ro-layer-btn {
    border: none;
    background: #fff;
    color: var(--mid);
    font-family: 'DM Sans', sans-serif;
    font-size: .78rem;
    font-weight: 500;
    padding: 7px 14px;
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.ro-layer-btn:hover { background: var(--cream); }
.ro-layer-btn.active {
    background: var(--sage);
    color: #fff;
}
/* side panel */
#ro-map-panel {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 300px;
    background: #fff;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 24px rgba(0,0,0,.18);
    border-radius: 10px 0 0 10px;
}
#ro-map-panel.open { transform: translateX(0); }
.ro-panel-close {
    position: absolute;
    top: 10px; right: 10px;
    background: rgba(0,0,0,.45);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 28px; height: 28px;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}
.ro-panel-gallery {
    position: relative;
    flex-shrink: 0;
    height: 200px;
    background: var(--sand);
}
.ro-panel-gallery img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.ro-panel-arrow {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,.45);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 32px; height: 32px;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}
.ro-panel-prev { left:  8px; }
.ro-panel-next { right: 8px; }
.ro-panel-dots {
    position: absolute;
    bottom: 8px; left: 50%;
    transform: translateX(-50%);
    display: flex; gap: 5px;
}
.ro-pdot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    cursor: pointer;
}
.ro-pdot.active { background: #fff; }
.ro-panel-body {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ro-panel-price {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--accent);
}
.ro-panel-type  { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.ro-panel-specs { font-size: .82rem; color: var(--mid); font-weight: 500; }
.ro-panel-loc   { font-size: .8rem;  color: var(--muted); }
.ro-panel-desc  { font-size: .8rem;  color: var(--mid); line-height: 1.5; flex: 1; }
.ro-panel-link  {
    display: inline-block;
    margin-top: 8px;
    padding: 9px 18px;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    border-radius: var(--radius);
    font-size: .82rem;
    font-weight: 500;
    text-align: center;
    transition: background .15s;
}
.ro-panel-link:hover { background: var(--dark); }
/* stacked-dot badge (pre-jitter or same-building properties) */
.ro-map-stack {
    width: 24px; height: 24px;
    background: var(--accent);
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
    font-family: 'DM Sans', sans-serif;
    font-size: .7rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 5px rgba(0,0,0,.35);
    cursor: pointer;
}
/* panel list (stacked markers) */
.ro-panel-list-item {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--sand);
    text-decoration: none;
    color: inherit;
}
.ro-panel-list-item:last-child { border-bottom: none; }
.ro-panel-list-item img,
.ro-panel-list-nophoto {
    width: 64px; height: 50px;
    object-fit: cover;
    border-radius: 5px;
    flex-shrink: 0;
    background: var(--sand);
}
.ro-panel-list-body  { flex: 1; min-width: 0; }
.ro-panel-list-price { font-family: 'Cormorant Garamond', serif; font-size: 1rem; font-weight: 600; color: var(--accent); }
.ro-panel-list-meta  { font-size: .75rem; color: var(--muted); margin-top: 2px; }
/* dot marker (canvas, no CSS needed — styling via L.circleMarker options) */
/* pin marker */
.ro-map-pin {
    width: 14px; height: 14px;
    background: var(--accent);
    border: 2px solid #fff;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 1px 5px rgba(0,0,0,.35);
}
/* price label marker */
.ro-map-price-label {
    background: var(--accent);
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
    padding: 3px 7px;
    border-radius: 4px;
    box-shadow: 0 1px 5px rgba(0,0,0,.3);
    cursor: pointer;
    transform: translate(-50%, -100%);
    display: inline-block;
}
.ro-map-price-label::after {
    content: '';
    position: absolute;
    bottom: -4px; left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--accent);
    border-bottom: 0;
}

/* ── Hide search UI in map overlay ── */
.ro-wrap.ro-map-active .ro-page-header {
    display: none;
}

/* ── MAP ACTIVE STATE: full-page overlay ── */
.ro-wrap.ro-map-active {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: var(--ivory);
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
    gap: 0;
    border-radius: 0;
    /* Reset normal layout spacing */
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

/* Sidebar scrolls independently */
.ro-wrap.ro-map-active .ro-sidebar {
    position: relative;
    width: 272px;
    flex-shrink: 0;
    height: 100%;
    overflow-y: auto;
    border-radius: 0;
    border: none;
    box-shadow: 2px 0 12px rgba(26,23,20,.06);
    transition: width .25s ease;
    overflow-x: hidden;
}
.ro-wrap.ro-map-active .ro-sidebar.collapsed {
    width: 44px;
    overflow-y: hidden;
    padding: 0;
}
.ro-wrap.ro-map-active .ro-sidebar.collapsed .ro-sidebar-inner { display: none; }

/* Main column = map + results panel side by side */
.ro-wrap.ro-map-active .ro-main-col {
    flex: 1;
    display: flex;
    flex-direction: row;
    min-width: 0;
    overflow: hidden;
}
.ro-wrap.ro-map-active #ro-results   { display: none; }
.ro-wrap.ro-map-active #ro-rv-section { display: none !important; }

/* Map fills remaining space */
.ro-wrap.ro-map-active #ro-map-wrap {
    flex: 1;
    display: flex !important;
    flex-direction: column;
    border-radius: 0;
    border: none;
    border-right: 1px solid var(--sand);
    box-shadow: none;
    min-width: 0;
    min-height: 0;
}
.ro-wrap.ro-map-active #ro-map-container {
    flex: 1;
    height: auto;
    min-height: 0;
}

/* ── MAP RESULTS PANEL (right-side list of properties in viewport) ── */
/* ── MAP RESULTS PANEL ── */
#ro-map-results-panel {
    display: none;
}
.ro-wrap.ro-map-active #ro-map-results-panel {
    display: flex;
    flex-direction: column;
    width: 360px;
    flex-shrink: 0;
    background: var(--cream);
    border-left: 1px solid var(--sand);
    overflow: hidden;
}

/* Header */
.ro-mrp-header {
    padding: 13px 16px 11px;
    border-bottom: 1px solid var(--sand);
    background: var(--ivory);
    flex-shrink: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
}
#ro-mrp-count {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--accent);
    line-height: 1;
}
.ro-mrp-header-label {
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Scrollable card list — single column */
.ro-mrp-list {
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
}

/* Individual card */
.ro-mrp-card {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    border: 1px solid var(--sand);
    background: var(--white);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(26,23,20,.06);
    transition: box-shadow .18s, transform .18s;
    flex-shrink: 0;
}
.ro-mrp-card:hover {
    box-shadow: 0 4px 20px rgba(26,23,20,.13);
    transform: translateY(-2px);
}

/* Image area — full width, 16:9, with nav overlay */
.ro-mrp-img {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--sand);
    flex-shrink: 0;
}
.ro-mrp-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s;
}
.ro-mrp-card:hover .ro-mrp-img img { transform: scale(1.03); }

/* Prev / next nav buttons */
.ro-mrp-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(26,23,20,.45);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .18s, background .18s;
    z-index: 2;
    padding: 0;
}
.ro-mrp-prev { left: 8px; }
.ro-mrp-next { right: 8px; }
.ro-mrp-img:hover .ro-mrp-nav { opacity: 1; }
.ro-mrp-nav:hover { background: rgba(26,23,20,.72); }

/* Photo counter */
.ro-mrp-counter {
    position: absolute;
    bottom: 8px;
    right: 10px;
    background: rgba(26,23,20,.5);
    color: #fff;
    font-size: .68rem;
    padding: 2px 7px;
    border-radius: 10px;
    pointer-events: none;
    z-index: 2;
}

/* No photo placeholder */
.ro-mrp-nophoto {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    color: var(--stone);
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Card body */
.ro-mrp-body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ro-mrp-price {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--accent);
    line-height: 1.2;
}
.ro-mrp-loc {
    font-size: .78rem;
    color: var(--mid);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ro-mrp-type {
    font-size: .68rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.ro-mrp-specs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.ro-mrp-spec {
    font-size: .72rem;
    color: var(--mid);
    background: var(--cream);
    border: 1px solid var(--sand);
    border-radius: 4px;
    padding: 2px 8px;
    white-space: nowrap;
}

/* Empty / overflow states */
.ro-mrp-empty {
    padding: 48px 20px;
    text-align: center;
    color: var(--muted);
    font-size: .85rem;
    line-height: 1.7;
}
.ro-mrp-more {
    padding: 10px 14px;
    text-align: center;
    font-size: .78rem;
    color: var(--muted);
    background: var(--ivory);
    border: 1px solid var(--sand);
    border-radius: 6px;
    flex-shrink: 0;
}

/* ── RECENTLY VIEWED ── */
.ro-rv-section { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--sand); display: none; }
.ro-rv-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--dark);
    margin: 0 0 16px;
}
.ro-rv-strip {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--sand) transparent;
}
.ro-rv-strip::-webkit-scrollbar { height: 4px; }
.ro-rv-strip::-webkit-scrollbar-track { background: transparent; }
.ro-rv-strip::-webkit-scrollbar-thumb { background: var(--sand); border-radius: 2px; }
.ro-rv-card {
    min-width: 190px;
    max-width: 190px;
    background: var(--ivory);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: transform .2s, box-shadow .2s;
    flex-shrink: 0;
    display: block;
}
.ro-rv-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-h); }
.ro-rv-card img { width: 100%; height: 108px; object-fit: cover; display: block; }
.ro-rv-no-img { width: 100%; height: 108px; background: var(--sand); display: flex; align-items: center; justify-content: center; font-size: .72rem; color: var(--muted); letter-spacing: .08em; }
.ro-rv-card-body { padding: 10px 12px 12px; }
.ro-rv-card-price { font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; font-weight: 600; color: var(--accent); }
.ro-rv-card-type  { font-size: .72rem; color: var(--muted); margin-top: 2px; }

/* ── SIMILAR PROPERTIES (detail page) ── */
.ro-similar-section { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--sand); }
.ro-similar-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 16px;
    margin-top: 4px;
}
.ro-similar-card {
    background: var(--ivory);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform .2s, box-shadow .2s;
    cursor: pointer;
}
.ro-similar-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-h); }
.ro-similar-card img { width: 100%; height: 130px; object-fit: cover; display: block; }
.ro-similar-card-body { padding: 12px 14px 14px; }
.ro-similar-price { font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; font-weight: 600; color: var(--accent); margin-bottom: 2px; }
.ro-similar-type  { font-size: .75rem; color: var(--mid);   margin-bottom: 3px; }
.ro-similar-loc   { font-size: .72rem; color: var(--muted); margin-bottom: 6px; }
.ro-similar-specs { display: flex; gap: 12px; font-size: .74rem; color: var(--mid); margin-bottom: 8px; }
.ro-similar-link  { font-size: .74rem; color: var(--sage); font-weight: 500; text-decoration: none; }
.ro-similar-link:hover { color: var(--dark); }

/* ════════════════════════════════════════
   DETAIL PAGE  (rod- prefix)
   ════════════════════════════════════════ */
.ro-detail-wrap {
    display: block !important; /* override .ro-wrap flex layout */
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 0 80px;
}
.ro-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 20px;
    font-size: .8rem;
    color: var(--muted);
    text-decoration: none;
    letter-spacing: .06em;
    transition: color .2s;
}
.ro-back-link:hover { color: var(--sage); }

/* ── GALLERY GRID: hero (left) + 2×2 side (right) ── */
.rod-gallery-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 5px;
    border-radius: 14px;
    overflow: hidden;
    height: 460px;
    margin-bottom: 14px;
    background: var(--ivory); /* gap colour = white-ish */
}
.rod-gallery-hero {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: var(--sand);
}
.rod-gallery-hero img,
.rod-gallery-hero .rod-no-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s;
}
.rod-gallery-hero:hover img { transform: scale(1.025); }
.rod-gallery-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 5px;
}
.rod-side-cell {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: var(--sand);
}
.rod-side-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s, opacity .2s;
}
.rod-side-cell:hover img { transform: scale(1.05); opacity: .88; }
.rod-side-more-overlay {
    position: absolute;
    inset: 0;
    background: rgba(26,23,20,.48);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: .02em;
    pointer-events: none;
}

/* ── Save + Share button row ── */
.rod-action-btns {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 6px;
    z-index: 3;
}
.rod-save-btn,
.rod-share-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: rgba(255,255,255,.92);
    border: none;
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
    transition: background .15s, transform .15s;
    backdrop-filter: blur(4px);
    min-width: 54px;
}
.rod-save-btn:hover,
.rod-share-btn:hover { background: #fff; transform: scale(1.05); }
.rod-save-btn svg,
.rod-share-btn svg {
    width: 20px;
    height: 20px;
    stroke: var(--dark);
    fill: none;
    transition: fill .2s, stroke .2s;
}
.rod-save-btn.is-saved svg { fill: #e05050; stroke: #e05050; }
.rod-save-btn-label,
.rod-share-btn-label {
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--dark);
    line-height: 1;
}

/* ── Share popup ── */
.rod-share-popup {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(26,23,20,.45);
    padding: 16px;
}
.rod-share-popup.hidden { display: none; }
.rod-share-card {
    background: var(--ivory);
    border-radius: 14px;
    padding: 28px 28px 22px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 20px 60px rgba(26,23,20,.22);
    position: relative;
}
.rod-share-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1.4rem;
    color: var(--muted);
    cursor: pointer;
    line-height: 1;
    padding: 2px 6px;
    transition: color .15s;
}
.rod-share-close:hover { color: var(--dark); }
.rod-share-heading {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 6px;
}
.rod-share-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--dark);
    margin: 0 0 20px;
    line-height: 1.3;
}
.rod-copy-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.rod-copy-input {
    flex: 1;
    background: var(--cream);
    border: 1px solid var(--sand);
    border-radius: 6px;
    padding: 8px 11px;
    font-size: .78rem;
    color: var(--muted);
    font-family: 'DM Sans', sans-serif;
    outline: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: default;
}
.rod-copy-btn {
    flex-shrink: 0;
    background: var(--dark);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: .78rem;
    font-weight: 600;
    font-family: 'DM Sans', sans-serif;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}
.rod-copy-btn:hover { background: var(--mid); }
.rod-copy-btn.copied { background: var(--sage); }

.rod-share-divider {
    height: 1px;
    background: var(--sand);
    margin: 16px 0;
}

.rod-wa-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    background: #25D366;
    color: #fff;
    border-radius: 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, transform .15s;
}
.rod-wa-btn:hover { background: #1ebe5d; transform: translateY(-1px); }

/* Nav arrows on hero */
.rod-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(26,23,20,.46);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .18s, background .18s;
    z-index: 2;
    padding: 0;
}
.rod-gallery-prev { left: 14px; }
.rod-gallery-next { right: 14px; }
.rod-gallery-hero:hover .rod-gallery-nav { opacity: 1; }
.rod-gallery-nav:hover { background: rgba(26,23,20,.76); }
.rod-gallery-counter {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(26,23,20,.52);
    color: #fff;
    font-size: .7rem;
    padding: 3px 10px;
    border-radius: 20px;
    pointer-events: none;
    z-index: 2;
    letter-spacing: .05em;
}

/* ── GALLERY FOOTER ── */
.rod-gallery-footer {
    margin-bottom: 26px;
}
.rod-photos-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ivory);
    border: 1px solid var(--stone);
    border-radius: 7px;
    padding: 8px 18px;
    font-size: .8rem;
    font-family: 'DM Sans', sans-serif;
    color: var(--dark);
    cursor: pointer;
    letter-spacing: .05em;
    transition: background .15s, border-color .15s;
}
.rod-photos-btn:hover { background: var(--cream); border-color: var(--mid); }

/* ── DIVIDER ── */
.rod-divider {
    border: none;
    border-top: 1px solid var(--sand);
    margin: 0 0 28px;
}

/* ── PROPERTY HEADER ── */
.rod-prop-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}
.rod-prop-header-main { flex: 1; min-width: 0; }
.rod-map-btn {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    background: var(--cream);
    border: 1px solid var(--sand);
    border-radius: 10px;
    padding: 12px 16px;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, border-color .15s, box-shadow .15s;
    color: var(--dark);
}
.rod-map-btn:hover {
    background: var(--sand);
    border-color: var(--stone);
    box-shadow: var(--shadow);
}
.rod-map-btn svg {
    width: 28px;
    height: 28px;
    color: var(--sage);
}
.rod-map-btn-label {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}
.rod-status-badge {
    display: inline-block;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 10px;
}
.rod-status-available   { background: #e8f2e6; color: #3a6a38; border: 1px solid #c4dcc2; }
.rod-status-under-offer { background: #fff3e0; color: #8a5a00; border: 1px solid #f5d28a; }
.rod-status-sold        { background: #f8eeee; color: #8a2020; border: 1px solid #e0c0c0; }
.rod-prop-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 400;
    color: var(--dark);
    line-height: 1.2;
    margin: 0 0 6px;
}
.rod-prop-location {
    font-size: .82rem;
    color: var(--muted);
    letter-spacing: .05em;
    margin-bottom: 14px;
}
.rod-prop-price {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--dark);
    letter-spacing: -.015em;
    line-height: 1;
}

/* ── SPECS ROW ── */
.rod-specs-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin: 18px 0 28px;
}
.rod-spec-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding-right: 22px;
    margin-right: 22px;
    border-right: 1px solid var(--sand);
    font-size: .88rem;
    color: var(--mid);
    white-space: nowrap;
}
.rod-spec-item:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.rod-spec-item strong { color: var(--dark); font-weight: 600; font-size: 1rem; }
.rod-spec-ico { font-size: .95rem; opacity: .55; }

/* ── TWEE-KOLOM LAYOUT (main + sticky sidebar) ── */
.rod-detail-columns {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 40px;
    align-items: start;
}
.rod-detail-main { min-width: 0; }
.rod-detail-sidebar {
    position: sticky;
    top: 24px;
}
@media (max-width: 900px) {
    .rod-detail-columns { grid-template-columns: 1fr; }
    .rod-detail-sidebar { position: static; }
}

/* ── SECTIONS ── */
.rod-section { margin-bottom: 42px; }
.rod-section-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--dark);
    margin: 0 0 16px;
}

/* ── DESCRIPTION with read-more ── */
.rod-desc-wrap { position: relative; }
.rod-desc {
    font-size: .9rem;
    line-height: 1.9;
    color: var(--mid);
    white-space: pre-line;
    max-height: 126px;
    overflow: hidden;
    transition: max-height .45s ease;
}
.rod-desc.is-expanded { max-height: 9999px; }
.rod-desc-fade {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 62px;
    background: linear-gradient(transparent, var(--ivory));
    pointer-events: none;
    transition: opacity .3s;
}
.rod-desc.is-expanded ~ .rod-desc-fade { opacity: 0; pointer-events: none; }
.rod-read-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    font-size: .82rem;
    color: var(--sage);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    letter-spacing: .03em;
    font-family: 'DM Sans', sans-serif;
    transition: color .15s;
}
.rod-read-more:hover { color: var(--dark); }

/* ── FEATURE GROUPS ── */
.rod-feat-groups { display: flex; flex-direction: column; gap: 20px; }
.rod-feat-group-title {
    font-size: .67rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent-warm);
    margin: 0 0 8px;
}
.rod-feat-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.rod-feat-tag {
    font-size: .78rem;
    color: var(--mid);
    background: var(--cream);
    border: 1px solid var(--sand);
    border-radius: 20px;
    padding: 4px 13px;
}

/* ── MAP ── */
#rod-map { height: 280px; border-radius: 10px; overflow: hidden; background: var(--cream); }

/* ── ENERGY ── */
.rod-energy-badge {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 3px;
    background: var(--sage);
    color: #fff;
    letter-spacing: .06em;
}

/* ── CONTACT SECTION ── */
.rod-contact-wrap {
    background: var(--cream);
    border: 1px solid var(--sand);
    border-radius: 12px;
    padding: 32px 36px;
    margin-bottom: 50px;
}
.rod-contact-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.45rem;
    font-weight: 400;
    color: var(--dark);
    margin: 0 0 20px;
}
.ro-lead-form { margin-top: 0; }
.ro-lead-row { display: flex; gap: 12px; margin-bottom: 12px; }
.ro-lead-field { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.ro-lead-field:not(.ro-lead-row .ro-lead-field) { margin-bottom: 12px; }
.ro-lead-field label {
    font-size: .65rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
}
.ro-required { color: var(--earth); }
.ro-lead-field input,
.ro-lead-field textarea {
    background: var(--ivory);
    border: 1px solid var(--sand);
    border-radius: var(--radius);
    padding: 9px 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: .85rem;
    color: var(--dark);
    outline: none;
    transition: border-color .2s;
    width: 100%;
}
.ro-lead-field input:focus,
.ro-lead-field textarea:focus { border-color: var(--sage); }
.ro-lead-field textarea { resize: vertical; min-height: 90px; }
.ro-lead-submit { margin-top: 6px; }
.ro-lead-feedback { padding: 10px 14px; border-radius: 4px; font-size: .82rem; margin-bottom: 12px; }
.ro-lead-success { background: #edf4eb; border: 1px solid #c4dcc2; color: #2a5228; }
.ro-lead-error   { background: #f8f2ee; border: 1px solid #e4cfc4; color: #8b3a2a; }

/* Legacy thumb (keep for backward compat) */
.rod-thumb {
    flex: 0 0 96px;
    height: 64px;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: outline-color .18s, opacity .18s;
    opacity: .55;
}
.rod-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.rod-thumb:hover { opacity: .82; }
.rod-thumb.active { opacity: 1; outline-color: var(--sage); }

/* ── LIGHTBOX ── */
.rod-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--lb-bg, #1a3c5e);
    display: flex;
    flex-direction: column;
}
.rod-lightbox.hidden { display: none; }

/* Stage: vult de ruimte tussen header en footer; foto wordt gecentreerd */
.rod-lb-stage {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 0;
}

/* Foto: past altijd in de beschikbare ruimte tussen header en footer */
.rod-lightbox-img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Header: altijd bovenaan het scherm, volledige breedte */
.rod-lb-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 16px;
    min-width: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.rod-lb-header-info {
    min-width: 0;
    flex: 1;
}
.rod-lb-header-title {
    font-size: .92rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.rod-lb-header-specs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 3px;
    font-size: .76rem;
    color: rgba(255,255,255,.65);
}
.rod-lb-sep {
    opacity: .35;
    font-size: .65rem;
}
/* Actie-knoppen in de lightbox header */
.rod-lb-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.rod-lb-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 20px;
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: .78rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
    line-height: 1;
}
.rod-lb-action-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}
.rod-lb-action-btn:hover {
    background: rgba(255,255,255,.22);
    border-color: rgba(255,255,255,.45);
    color: #fff;
    text-decoration: none;
}
/* Contact-knop wat prominenter — warm goud zodat hij altijd zichtbaar is */
.rod-lb-action-contact {
    background: var(--accent-warm, #c8a96e);
    border-color: var(--accent-warm, #c8a96e);
    color: #fff;
}
.rod-lb-action-contact:hover {
    background: var(--earth2, #b8955a);
    border-color: var(--earth2, #b8955a);
    color: #fff;
}

.rod-lightbox-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.8rem;
    cursor: pointer;
    line-height: 1;
    opacity: .65;
    transition: opacity .15s;
    padding: 0 0 0 8px;
    flex-shrink: 0;
    margin-left: auto;
}
.rod-lightbox-close:hover { opacity: 1; }

/* Footer: altijd onderaan het scherm, volledige breedte */
.rod-lb-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.rod-lightbox-count {
    color: rgba(255,255,255,.6);
    font-size: .78rem;
    letter-spacing: .08em;
    white-space: nowrap;
}

/* Navigatiepijlen over de volledige stage */
.rod-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,.15);
    border: none;
    color: #fff;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    font-size: 2.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    z-index: 3;
}
.rod-lightbox-nav:hover { background: rgba(255,255,255,.3); }
.rod-lb-prev { left: 20px; }
.rod-lb-next { right: 20px; }

@media (max-width: 600px) {
    .rod-lb-header { padding: 8px 12px; gap: 8px; }
    .rod-lb-header-title { font-size: .82rem; }
    .rod-lightbox-nav { width: 38px; height: 38px; font-size: 1.5rem; }
    .rod-lb-prev { left: 8px; }
    .rod-lb-next { right: 8px; }
    /* Verberg button-labels, toon alleen icoontjes op mobiel */
    .rod-lb-action-btn span,
    .rod-lb-action-btn { font-size: 0; padding: 7px; border-radius: 50%; }
    .rod-lb-action-btn svg { width: 16px; height: 16px; }
}

/* ── Detail page: partner sidebar-card ── */
.rod-hs-sidebar-card {
    background: #fff;
    border-radius: var(--radius-lg);
    border-top: 3px solid var(--accent-warm);
    box-shadow: var(--shadow-card);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rod-hs-sidebar-card .lsl-hs-label {
    display: inline-block;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent-warm);
    border: 1px solid var(--accent-warm);
    padding: 2px 8px;
    border-radius: 100px;
    align-self: flex-start;
}
.rod-hs-sidebar-card__img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: calc(var(--radius-lg) - 4px);
    display: block;
}
.rod-hs-sidebar-card__logo {
    max-height: 36px;
    max-width: 140px;
    object-fit: contain;
    object-position: left center;
    display: block;
}
.rod-hs-sidebar-card__name {
    font-size: .95rem;
    font-weight: 600;
    color: var(--navy);
    margin: 0;
}
.rod-hs-sidebar-card__tagline {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.05rem;
    color: var(--navy);
    margin: 0;
    line-height: 1.35;
}
.rod-hs-sidebar-card__desc {
    font-size: .85rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
}
.rod-hs-sidebar-card__btn { align-self: flex-start; }

/* ═══════════════════════════════════════════════
   AUTH MODAL
═══════════════════════════════════════════════ */
.ro-auth-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 100010;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.ro-auth-overlay.hidden { display: none; }

.ro-auth-modal {
    background: #fff;
    border-radius: 12px;
    padding: 36px 32px 28px;
    width: 100%;
    max-width: 420px;
    position: relative;
    box-shadow: 0 8px 40px rgba(0,0,0,.18);
    max-height: 90vh;
    overflow-y: auto;
}

.ro-auth-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: #aaa;
    cursor: pointer;
    padding: 4px 8px;
}
.ro-auth-close:hover { color: #333; }

.ro-auth-icon {
    text-align: center;
    margin-bottom: 16px;
    color: #c9a96e;
}

.ro-auth-tabs {
    display: flex;
    border-bottom: 1px solid #eee;
    margin-bottom: 22px;
    gap: 0;
}
.ro-auth-tab {
    flex: 1;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 8px 12px 10px;
    font-size: .88rem;
    font-weight: 500;
    color: #aaa;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.ro-auth-tab.is-active {
    color: #8b6914;
    border-bottom-color: #c9a96e;
}

.ro-auth-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 6px;
    color: #2a2118;
}
.ro-auth-desc {
    font-size: .85rem;
    color: #888;
    margin: 0 0 20px;
    line-height: 1.5;
}

.ro-auth-pane.hidden { display: none; }

.ro-auth-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 14px;
}
.ro-auth-label {
    font-size: .82rem;
    font-weight: 500;
    color: #555;
}
.ro-auth-input {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 9px 12px;
    font-size: .9rem;
    width: 100%;
    box-sizing: border-box;
    transition: border-color .15s;
}
.ro-auth-input:focus {
    outline: none;
    border-color: #c9a96e;
}
.ro-auth-input.ro-auth-field-error {
    border-color: #c0392b;
}
.ro-auth-hint {
    font-size: .75rem;
    color: #aaa;
}

.ro-auth-error {
    background: #fdf0ef;
    border: 1px solid #f5c6c3;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: .83rem;
    color: #c0392b;
    margin-bottom: 12px;
}
.ro-auth-error.hidden { display: none; }
.ro-auth-success {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: .83rem;
    color: #155724;
    margin-bottom: 12px;
}
.ro-auth-success.hidden { display: none; }

.ro-auth-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: .83rem;
    color: #555;
    margin-bottom: 10px;
    cursor: pointer;
    line-height: 1.4;
}
.ro-auth-checkbox input[type=checkbox] {
    flex-shrink: 0;
    margin-top: 2px;
    width: 16px;
    height: 16px;
    accent-color: #c9a96e;
    cursor: pointer;
}
.ro-auth-checkbox a {
    color: #8b6914;
    text-decoration: underline;
}

.ro-auth-submit {
    display: block;
    width: 100%;
    background: #c9a96e;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 11px 16px;
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 16px;
    transition: background .15s;
}
.ro-auth-submit:hover    { background: #a07840; }
.ro-auth-submit:disabled { opacity: .6; cursor: default; }

.ro-auth-switch {
    text-align: center;
    font-size: .82rem;
    color: #aaa;
    margin: 16px 0 0;
}
.ro-auth-link {
    background: none;
    border: none;
    color: #8b6914;
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit;
    padding: 0;
}

/* ── PROFILE PAGE ─────────────────────────────────────────────────────────── */

.ropro-wrap {
    max-width: 640px;
    margin: 2rem auto;
    padding: 0 1rem;
    font-family: inherit;
    color: #1c1c1e;
}

.ropro-guest {
    text-align: center;
    padding: 3rem 1rem;
}

.ropro-open-login {
    margin-top: 1rem;
    padding: .6rem 1.6rem;
    background: #1a3c5e;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: .95rem;
    cursor: pointer;
}
.ropro-open-login:hover { background: #112840; }

/* Header */
.ropro-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 1rem;
}
.ropro-title {
    margin: 0;
    font-size: 1.5rem;
    color: #1a3c5e;
}
.ropro-logout-btn {
    padding: .45rem 1rem;
    background: transparent;
    border: 1.5px solid #a8a09a;
    border-radius: 6px;
    color: #3a3a3a;
    font-size: .85rem;
    cursor: pointer;
    white-space: nowrap;
}
.ropro-logout-btn:hover { background: #f8f6f2; }

/* Flash notice */
.ropro-flash {
    padding: .75rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: .9rem;
}
.ropro-flash--success { background: #e8f5e9; color: #2e7d32; }
.ropro-flash--error   { background: #fdecea; color: #c62828; }

/* Sections */
.ropro-section {
    background: #fff;
    border: 1px solid #e0ddd8;
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.ropro-section--danger {
    border-color: #f5c6cb;
    background: #fff9f9;
}
.ropro-section-title {
    margin: 0 0 1.2rem;
    font-size: 1.05rem;
    color: #1a3c5e;
}
.ropro-section-title--danger { color: #c62828; }
.ropro-danger-desc {
    font-size: .88rem;
    color: #7a7a7a;
    margin-bottom: 1rem;
}

/* Form */
.ropro-form { display: flex; flex-direction: column; gap: .9rem; }
.ropro-field { display: flex; flex-direction: column; gap: .25rem; }
.ropro-field--checkbox { flex-direction: row; align-items: flex-start; gap: .5rem; }
.ropro-label { font-size: .85rem; font-weight: 600; color: #3a3a3a; }
.ropro-static { margin: 0; font-size: .95rem; color: #7a7a7a; }
.ropro-hint { font-size: .78rem; color: #7a7a7a; }

.ropro-input {
    padding: .6rem .75rem;
    border: 1.5px solid #d6cfc4;
    border-radius: 6px;
    font-size: .95rem;
    color: #1c1c1e;
    background: #faf9f7;
    transition: border-color .15s;
}
.ropro-input:focus { outline: none; border-color: #1a3c5e; background: #fff; }

.ropro-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .88rem;
    color: #3a3a3a;
    cursor: pointer;
    line-height: 1.4;
}
.ropro-checkbox-label input[type="checkbox"] { margin-top: .15rem; flex-shrink: 0; }

.ropro-error {
    background: #fdecea;
    color: #c62828;
    border-radius: 5px;
    padding: .5rem .75rem;
    font-size: .85rem;
}

/* Buttons */
.ropro-btn {
    align-self: flex-start;
    padding: .6rem 1.4rem;
    border: none;
    border-radius: 6px;
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.ropro-btn:disabled { opacity: .65; cursor: not-allowed; }
.ropro-btn--primary { background: #1a3c5e; color: #fff; }
.ropro-btn--primary:hover:not(:disabled) { background: #112840; }
.ropro-btn--danger  { background: #c62828; color: #fff; }
.ropro-btn--danger:hover:not(:disabled)  { background: #a31515; }

@media (max-width: 480px) {
    .ropro-wrap { padding: 0 .75rem; }
    .ropro-btn  { width: 100%; text-align: center; align-self: stretch; }
}

/* ═══════════════════════════════════════════════════════════════════
   HEART / CARD ACTIONS
   ══════════════════════════════════════════════════════════════════ */

/* Action bar below card body */
/* Card action overlay — top-right on every card across the site. */
.ro-card { position: relative; }

.ro-card-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 8px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .10);
    z-index: 2;
}

.ro-card-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: #aaa;
    transition: color .15s, background .15s;
    padding: 0;
    flex-shrink: 0;
}
.ro-card-action-btn svg { width: 20px; height: 20px; }
.ro-card-action-btn:hover { color: #1a3c5e; background: #f0ece6; }

/* Heart — filled gold when active */
.ro-heart { color: #ccc; }
.ro-heart svg { fill: currentColor; stroke: currentColor; }
.ro-heart:hover { color: #c9a96e; }
.ro-heart.is-fav { color: #c9a96e; }
.ro-heart.is-fav:hover { color: #a07840; }

/* Note button — accent dot when note exists */
.ro-note-btn { position: relative; }
.ro-note-btn.has-note::after {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #c9a96e;
}

/* Detail page action buttons (rod-lb-action-btn extends) */
.rod-lb-action-btn.ro-heart { font-size: 0; gap: 0; }
.rod-lb-action-btn.ro-heart span { font-size: .82rem; }
.rod-lb-action-btn.ro-heart.is-fav { color: #c9a96e; }
.rod-lb-action-btn.ro-heart.is-fav:hover { background: rgba(201,169,110,.12); }
.rod-lb-action-btn.ro-note-btn.has-note { color: #c9a96e; }

/* ═══════════════════════════════════════════════════════════════════
   HEADER FAVOURITES BADGE
   ══════════════════════════════════════════════════════════════════ */

.lsl-header__favs {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    color: #4a4a4a;
    text-decoration: none;
    transition: color .15s, background .15s;
    position: relative;
    flex-shrink: 0;
}
.lsl-header__favs:hover { color: #c9a96e; background: #f5f0e8; }
.lsl-header__favs svg { fill: currentColor; stroke: currentColor; stroke-width: 1.4; }

.lsl-favs-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    background: #c9a96e;
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    line-height: 1;
    min-width: 14px;
    height: 14px;
    padding: 2px 3px;
    border-radius: 7px;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════
   PARTNER ADVERTENTIE – card in woningenlijst
   ══════════════════════════════════════════════════════════════════ */

/* Outer wrapper: zelfde look als .ro-card-wrap */
.lsl-hs-ad-card {
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    border-top: 3px solid var(--accent-warm);
    display: flex;
    flex-direction: row;
    align-items: stretch;
    position: relative;
    transition: transform 280ms ease, box-shadow 280ms ease;
}
.lsl-hs-ad-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

/* "Advertentie" label in de body — gedeelde stijl met .lsl-hs-label in het thema */
.lsl-hs-ad-card .lsl-hs-label {
    display: inline-block;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent-warm);
    border: 1px solid var(--accent-warm);
    padding: 2px 8px;
    border-radius: 100px;
    margin-bottom: 8px;
    align-self: flex-start;
}

/* Afbeelding: zelfde afmetingen als .ro-card-left / .ro-card-img */
.resales-card__img-wrap {
    width: 38%;
    max-width: 420px;
    min-width: 200px;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    aspect-ratio: 3/2;
}
.resales-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 480ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.lsl-hs-ad-card:hover .resales-card__img { transform: scale(1.04); }

/* Tekstblok rechts */
.lsl-hs-ad-card__body {
    flex: 1;
    min-width: 0;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}
.lsl-hs-ad-card__logo {
    max-height: 40px;
    max-width: 160px;
    object-fit: contain;
    object-position: left center;
    display: block;
}
.lsl-hs-ad-card__name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--navy);
    margin: 0;
}
.lsl-hs-ad-card__tagline {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--navy);
    margin: 0;
    line-height: 1.3;
}
.lsl-hs-ad-card__desc {
    color: #666;
    font-size: .875rem;
    line-height: 1.6;
    margin: 0;
}
.lsl-hs-ad-card__btn { align-self: flex-start; margin-top: 4px; }

/* Responsive: stapelen op kleine schermen */
@media (max-width: 700px) {
    .lsl-hs-ad-card { flex-direction: column; }
    .resales-card__img-wrap {
        width: 100%;
        min-width: 0;
        max-width: none;
        aspect-ratio: 16/9;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   FAVORITES PAGE
   ══════════════════════════════════════════════════════════════════ */

/* Generic utility — used throughout the plugin to toggle visibility. */
.hidden { display: none !important; }

.rofp-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
    font-family: inherit;
    color: #1c1c1e;
}

/* ── Guest state ── */
.rofp-guest {
    text-align: center;
    padding: 4rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.rofp-guest h2  { font-size: 1.4rem; font-weight: 600; margin: 0; }
.rofp-guest p   { color: #666; margin: 0; }

/* ── Loading ── */
.rofp-loading {
    display: flex;
    justify-content: center;
    padding: 4rem 0;
}
.rofp-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #e8e0d5;
    border-top-color: #c9a96e;
    border-radius: 50%;
    animation: rofpSpin .7s linear infinite;
}
.rofp-spinner-inline {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 2px solid #e8e0d5;
    border-top-color: #c9a96e;
    border-radius: 50%;
    animation: rofpSpin .7s linear infinite;
    margin: 2rem auto;
}
@keyframes rofpSpin { to { transform: rotate(360deg); } }

/* ── Empty state ── */
.rofp-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: #888;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
}
.rofp-empty p { margin: 0; font-size: .95rem; }

/* ── Tabs ── */
.rofp-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid #e8e0d5;
    margin-bottom: 1.5rem;
}

.rofp-tab {
    background: none;
    border: none;
    padding: .65rem 1.1rem;
    font-size: .92rem;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    border-radius: 4px 4px 0 0;
    transition: color .15s;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.rofp-tab:hover    { color: #1a3c5e; }
.rofp-tab.is-active {
    color: #1a3c5e;
    border-bottom-color: #1a3c5e;
    font-weight: 600;
}

.rofp-tab-count {
    background: #c9a96e;
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    text-align: center;
    display: none;
}

/* ── Pane ── */
.rofp-pane { min-height: 200px; }

/* ── Lists toolbar ── */
.rofp-lists-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

/* ── Lists grid ── */
.rofp-lists-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.rofp-list-card {
    background: #fff;
    border: 1.5px solid #e8e0d5;
    border-radius: 10px;
    padding: 1.1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    transition: box-shadow .15s, border-color .15s;
}
.rofp-list-card:hover { box-shadow: 0 4px 14px rgba(26,60,94,.08); border-color: #c9a96e; }

.rofp-list-card-name  { font-size: .95rem; font-weight: 600; color: #1a3c5e; }
.rofp-list-card-count { font-size: .8rem; color: #888; }
.rofp-list-card-actions { margin-top: auto; display: flex; gap: 6px; }

/* ── Searches list ── */
.rofp-searches-list { display: flex; flex-direction: column; gap: .75rem; }

.rofp-search-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #faf9f7;
    border: 1px solid #e8e0d5;
    border-radius: 8px;
    padding: .875rem 1rem;
    transition: border-color .15s, box-shadow .15s;
}
.rofp-search-card:hover { border-color: #c9a96e; box-shadow: 0 2px 8px rgba(26,60,94,.06); }
.rofp-search-card-info { flex: 1; min-width: 0; }
.rofp-search-card-name { font-size: .9rem; font-weight: 600; color: #1a3c5e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rofp-search-card-date { font-size: .76rem; color: #888; margin-top: 2px; }
.rofp-search-card-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ── Notes list ── */
.rofp-notes-list { display: flex; flex-direction: column; gap: .75rem; }

.rofp-note-item {
    background: #faf9f7;
    border: 1px solid #e8e0d5;
    border-radius: 8px;
    padding: .9rem 1rem;
}
.rofp-note-item-ref  { font-size: .75rem; color: #888; font-weight: 600; margin-bottom: .3rem; }
.rofp-note-item-text { margin: 0 0 .75rem; font-size: .92rem; color: #3a3a3a; line-height: 1.5; }
.rofp-note-item-actions { display: flex; gap: 6px; }

/* ── List detail ── */
.rofp-list-detail { min-height: 200px; }

.rofp-back {
    background: none;
    border: none;
    color: #1a3c5e;
    font-size: .88rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    margin-bottom: 1.2rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.rofp-back:hover { text-decoration: underline; }

.rofp-list-detail-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.rofp-list-detail-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0;
    flex: 1;
}
.rofp-list-detail-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Modals ── */
.rofp-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 100020;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.rofp-overlay.hidden { display: none; }

.rofp-modal {
    background: #fff;
    border-radius: 12px;
    padding: 28px 24px 22px;
    width: 100%;
    max-width: 440px;
    position: relative;
    box-shadow: 0 8px 40px rgba(0,0,0,.16);
    max-height: 90vh;
    overflow-y: auto;
}

.rofp-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 1.3rem;
    line-height: 1;
    color: #999;
    cursor: pointer;
    padding: 4px;
}
.rofp-modal-close:hover { color: #333; }

.rofp-modal-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 .5rem;
    padding-right: 24px;
}
.rofp-modal-desc { font-size: .88rem; color: #666; margin: 0 0 1rem; }

.rofp-modal-actions {
    display: flex;
    gap: 8px;
    margin-top: 1.2rem;
    flex-wrap: wrap;
}

/* Share modal */
.rofp-share-option {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .9rem;
    cursor: pointer;
    margin-bottom: .75rem;
}
.rofp-share-result { margin-top: .75rem; }
.rofp-share-url-wrap {
    display: flex;
    gap: 6px;
    align-items: center;
}
.rofp-share-url-input {
    flex: 1;
    padding: .5rem .7rem;
    border: 1.5px solid #d6cfc4;
    border-radius: 6px;
    font-size: .82rem;
    color: #555;
    background: #faf9f7;
    min-width: 0;
}
.rofp-share-copied { font-size: .82rem; color: #2e7d32; margin: .3rem 0 0; }

/* Note textarea */
.rofp-note-textarea {
    width: 100%;
    padding: .6rem .75rem;
    border: 1.5px solid #d6cfc4;
    border-radius: 6px;
    font-size: .93rem;
    font-family: inherit;
    color: #1c1c1e;
    background: #faf9f7;
    resize: vertical;
    transition: border-color .15s;
    box-sizing: border-box;
}
.rofp-note-textarea:focus { outline: none; border-color: #1a3c5e; background: #fff; }

/* List name input (create / rename modal) */
.rofp-listname-input {
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid #d4c9bc;
    border-radius: 4px;
    font-size: .95rem;
    background: #faf8f5;
    color: #1a1a1a;
    box-sizing: border-box;
    margin-top: .5rem;
}
.rofp-listname-input:focus { outline: none; border-color: #1a3c5e; background: #fff; }

/* Add-to-list modal */
.rofp-addlist-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: .75rem;
}
.rofp-addlist-item {
    text-align: left;
    background: #faf9f7;
    border: 1.5px solid #e8e0d5;
    border-radius: 6px;
    padding: .5rem .75rem;
    font-size: .9rem;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.rofp-addlist-item:hover    { border-color: #c9a96e; background: #fdf8f0; }
.rofp-addlist-item.is-in-list { border-color: #c9a96e; background: #fdf8f0; color: #8b6914; font-weight: 500; }
.rofp-addlist-none { font-size: .85rem; color: #888; margin: 0; padding: .4rem 0; }

.rofp-addlist-new {
    display: flex;
    gap: 6px;
    align-items: center;
    border-top: 1px solid #e8e0d5;
    padding-top: .75rem;
}
.rofp-addlist-input {
    flex: 1;
    padding: .5rem .7rem;
    border: 1.5px solid #d6cfc4;
    border-radius: 6px;
    font-size: .88rem;
    color: #1c1c1e;
    background: #faf9f7;
    min-width: 0;
}
.rofp-addlist-input:focus { outline: none; border-color: #1a3c5e; background: #fff; }

/* ── Buttons ── */
.rofp-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: none;
    border-radius: 6px;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, opacity .15s;
    text-decoration: none;
    padding: .55rem 1.1rem;
    white-space: nowrap;
}
.rofp-btn--sm   { font-size: .8rem; padding: .38rem .75rem; }
.rofp-btn--xs   { font-size: .74rem; padding: .28rem .6rem; }
.rofp-btn--primary { background: #1a3c5e; color: #fff; }
.rofp-btn--primary:hover { background: #112840; }
.rofp-btn--gold    { background: #c9a96e; color: #fff; }
.rofp-btn--gold:hover { background: #a07840; }
.rofp-btn--ghost   { background: #f0ece6; color: #3a3a3a; }
.rofp-btn--ghost:hover { background: #e0d8ce; }
.rofp-btn--danger  { background: #c62828; color: #fff; }
.rofp-btn--danger:hover { background: #a31515; }
.rofp-btn:disabled { opacity: .6; cursor: not-allowed; }

/* Card overlay buttons (inside fetched HTML) */
/*
 * On the favourites page the fetched card HTML already contains .ro-card-actions.
 * decorateCards() adds its own .rofp-card-overlay on top, so hide the duplicate.
 * Both overlays share identical positioning and button sizes — same look everywhere.
 */
.rofp-wrap .ro-card-actions { display: none !important; }

.rofp-card-overlay {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 8px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 1px 6px rgba(0,0,0,.10);
    z-index: 2;
}
.rofp-card-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: #aaa;
    transition: color .13s, background .13s;
    padding: 0;
}
.rofp-card-btn svg { width: 20px; height: 20px; }
.rofp-card-btn:hover { color: #1a3c5e; background: #f0ece6; }
.rofp-card-btn.is-fav { color: #c9a96e; }
.rofp-card-btn.has-note { color: #c9a96e; }

@media (max-width: 600px) {
    .rofp-tabs { gap: 0; }
    .rofp-tab  { padding: .55rem .7rem; font-size: .82rem; }
    .rofp-lists-grid { grid-template-columns: 1fr 1fr; }
    .rofp-list-detail-header { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 380px) {
    .rofp-lists-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   SHARED LIST PAGE
   ══════════════════════════════════════════════════════════════════ */

.rosl-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
    font-family: inherit;
    color: #1c1c1e;
}

.rosl-header { margin-bottom: 1.5rem; }
.rosl-title  { font-size: 1.5rem; font-weight: 600; margin: 0 0 .3rem; }
.rosl-expires { font-size: .82rem; color: #888; margin: .2rem 0; }
.rosl-count   { font-size: .88rem; color: #666; margin: .2rem 0 0; }

.rosl-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: #888;
    font-size: .95rem;
}

.rosl-grid { margin-top: 0; }

.rosl-error {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: #fdecea;
    border-radius: 8px;
    padding: 1.2rem 1rem;
    color: #c62828;
    font-size: .95rem;
}

.rosl-notes-section {
    margin-top: 2.5rem;
    border-top: 1px solid #e8e0d5;
    padding-top: 1.5rem;
}
.rosl-notes-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 1rem;
}
.rosl-notes-list { display: flex; flex-direction: column; gap: .75rem; }
.rosl-note {
    background: #faf9f7;
    border: 1px solid #e8e0d5;
    border-radius: 8px;
    padding: .9rem 1rem;
}
.rosl-note-ref  { font-size: .75rem; color: #888; font-weight: 600; display: block; margin-bottom: .3rem; }
.rosl-note-text { margin: 0; font-size: .92rem; color: #3a3a3a; line-height: 1.5; }

/* ═══════════════════════════════════════════════════════
   UI IMPROVEMENTS — 2026-04
   1. Sort pills  2. Grid view  3. Load more  4. Price slider
   5. Filter badge  6. Empty state reset  7. Search in area
   8. Mobile filter sheet  9. Save search
   ═══════════════════════════════════════════════════════ */

/* ── 1. SORT PILLS ── */
.ro-sort-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 0 4px;
}
.ro-sort-pill {
    padding: .3rem .8rem;
    font-size: .78rem;
    font-weight: 500;
    border: 1px solid var(--sand);
    border-radius: 100px;
    background: var(--white);
    color: var(--muted);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.ro-sort-pill:hover { border-color: var(--accent); color: var(--accent); }
.ro-sort-pill.active { background: var(--accent); border-color: var(--accent); color: var(--white); }

/* ── 2. GRID VIEW TOGGLE ── */
/* New view buttons for list/grid share same .ro-view-btn styles */
.ro-view-btn--list,
.ro-view-btn--grid { font-size: 1rem; }

/* Grid layout when toggled */
.ro-grid.ro-grid-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}
.ro-grid.ro-grid-view .ro-card {
    flex-direction: column;
}
.ro-grid.ro-grid-view .ro-card-left {
    width: 100%;
    max-width: none;
    min-width: 0;
}
.ro-grid.ro-grid-view .ro-card-img {
    aspect-ratio: 4/3;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.ro-grid.ro-grid-view .ro-card-body {
    padding: 14px 16px 16px;
    min-width: 0;
}
.ro-grid.ro-grid-view .ro-card-desc { display: none; }
.ro-grid.ro-grid-view .ro-card-thumbs { display: none; }
.ro-grid.ro-grid-view .ro-card-wrap:has(.ro-card-note-bar) .ro-card {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* ── 3. LOAD MORE ── */
.ro-load-more-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 32px 0 16px;
}
.ro-load-more-btn {
    padding: .65rem 2rem;
    font-size: .92rem;
    font-weight: 600;
    background: var(--white);
    border: 2px solid var(--accent);
    color: var(--accent);
    border-radius: 100px;
    cursor: pointer;
    transition: all .2s;
}
.ro-load-more-btn:hover { background: var(--accent); color: var(--white); }
.ro-load-more-btn:disabled { opacity: .5; cursor: default; }
.ro-lm-info { font-size: .8rem; color: var(--muted); margin: 0; }
.ro-all-loaded { text-align: center; font-size: .82rem; color: var(--muted); padding: 24px 0 8px; }

/* ── 4. DUAL-RANGE PRICE SLIDER ── */
.ro-filter-label { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px; }
.ro-slider-labels { font-size: .8rem; font-weight: 400; color: var(--accent); white-space: nowrap; }

.ro-dual-slider {
    position: relative;
    padding: 14px 0 4px;
}
.ro-dual-slider__track {
    position: relative;
    height: 4px;
    background: var(--sand);
    border-radius: 2px;
    margin: 0 9px; /* half-thumb offset */
}
.ro-dual-slider__fill {
    position: absolute;
    top: 0;
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
}
.ro-dual-slider__range {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    pointer-events: none;
    outline: none;
    margin: 0;
    padding: 0;
    border: none;
}
.ro-dual-slider__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--accent);
    border: 2.5px solid var(--white);
    box-shadow: 0 1px 5px rgba(0,0,0,0.22);
    pointer-events: all;
    cursor: pointer;
    position: relative;
    z-index: 1;
}
.ro-dual-slider__range::-moz-range-thumb {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--accent);
    border: 2.5px solid var(--white);
    box-shadow: 0 1px 5px rgba(0,0,0,0.22);
    pointer-events: all;
    cursor: pointer;
}
.ro-dual-slider__range--lo { z-index: 1; }
.ro-dual-slider__range--hi { z-index: 2; }

/* ── 5. ACTIVE FILTER BADGE ── */
.ro-sidebar-toggle-btn { position: relative; }
.ro-filter-badge {
    position: absolute;
    top: -6px; right: -6px;
    min-width: 18px; height: 18px;
    background: var(--accent-warm);
    color: var(--white);
    font-size: .68rem;
    font-weight: 700;
    border-radius: 100px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px;
    line-height: 1;
    pointer-events: none;
}

/* ── 6. EMPTY STATE RESET LINK ── */
.ro-empty-reset {
    display: inline-block;
    margin-top: 14px;
    padding: .5rem 1.4rem;
    background: var(--accent);
    color: var(--white);
    border-radius: 100px;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s;
}
.ro-empty-reset:hover { background: #112840; }

/* ── 7. "ZOEK IN DIT GEBIED" MAP BUTTON ── */
.ro-search-area-btn {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 500;
    background: var(--white);
    border: 2px solid var(--accent);
    color: var(--accent);
    padding: .45rem 1.2rem;
    border-radius: 100px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    transition: all .2s;
    white-space: nowrap;
}
.ro-search-area-btn:hover { background: var(--accent); color: var(--white); }
.ro-search-area-btn--hidden { display: none !important; }

/* ── 8. MOBILE FILTER BOTTOM SHEET ── */
.ro-mobile-filter-btn {
    display: none;
}
.ro-mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 900;
    opacity: 0;
    transition: opacity .25s;
}
.ro-mobile-overlay.active { opacity: 1; }
.ro-sidebar-mobile-close {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 1001;
    background: var(--white);
    border: none;
    border-top: 1px solid var(--sand);
    padding: 14px;
    font-size: .92rem;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
    text-align: center;
}

@media (max-width: 820px) {
    /* FAB */
    .ro-mobile-filter-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        position: fixed;
        bottom: 24px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 950;
        background: var(--accent);
        color: var(--white);
        border: none;
        border-radius: 100px;
        padding: 13px 28px;
        font-size: .95rem;
        font-weight: 600;
        box-shadow: 0 4px 20px rgba(0,0,0,.25);
        cursor: pointer;
        white-space: nowrap;
    }
    .ro-mobile-filter-btn .ro-filter-badge {
        position: static;
        width: auto;
        height: auto;
        background: var(--accent-warm);
        border-radius: 100px;
        padding: 1px 7px;
        font-size: .72rem;
    }
    /* Overlay */
    .ro-mobile-overlay { display: block; pointer-events: none; }
    .ro-mobile-overlay.active { pointer-events: all; }
    /* Sidebar as bottom sheet */
    .ro-sidebar {
        position: fixed !important;
        left: 0; right: 0;
        bottom: 0;
        top: auto !important;
        width: 100% !important;
        max-height: 85vh;
        overflow-y: auto;
        z-index: 1000;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -6px 40px rgba(0,0,0,.18);
        transform: translateY(100%);
        transition: transform .28s cubic-bezier(.4,0,.2,1);
    }
    .ro-sidebar.ro-sidebar--open { transform: translateY(0); }
    .ro-sidebar-mobile-close { display: block; }
    /* Keep toggle button hidden on mobile (replaced by FAB) */
    .ro-sidebar-toggle-btn { display: none !important; }
    /* Body scroll lock */
    body.ro-filter-open { overflow: hidden; }
    /* FAB off when map is open */
    .ro-wrap.ro-map-active .ro-mobile-filter-btn { display: none; }
    /* Sort pills compact */
    .ro-sort-pills { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
    .ro-sort-pills::-webkit-scrollbar { display: none; }
}

/* ── 9. SAVE SEARCH BUTTON ── */
.ro-save-search-btn {
    font-size: .78rem;
    font-weight: 500;
    padding: .3rem .75rem;
    border: 1px solid var(--sand);
    border-radius: 100px;
    background: var(--white);
    color: var(--muted);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.ro-save-search-btn:hover { border-color: var(--accent-warm); color: var(--accent-warm); }
.ro-save-search-btn--saved { background: #eef6ee; border-color: #4caf50; color: #2e7d32; }