:root { --ofc-pane-h: 70vh; }

.ofc-map {
    height: var(--ofc-pane-h);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(19,20,31,.06);
}

.ofc-panel { position: sticky; top: 88px; z-index: 2; }
.ofc-panel__card {
    height: var(--ofc-pane-h);
    display: flex; flex-direction: column; gap: .5rem;
    border: 1px solid #F1F3F5; background: #fff; border-radius: 14px; padding: 1rem;
    box-shadow: 0 8px 18px rgba(19,20,31,.06);
}
.ofc-panel__list { flex: 1 1 auto; overflow: auto; display: grid; gap: .75rem; padding-bottom: .25rem; }

.ofc-card__thumbwrap { width: 96px; height: 96px; border-radius: 12px; overflow: hidden; flex: 0 0 96px; }
.ofc-card__img { width: 100%; height: 100%; object-fit: cover; display:block; }
.ofc-card__img--popup { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; }
.ofc-card__title { font-size: 1rem; line-height: 1.2; }
.ofc-card__addr { max-width: 34ch; }

#resultsList .p-3 { transition: box-shadow .2s, transform .1s; border: 1px solid #F1F3F5; border-radius: 12px; background: #fff; }
#resultsList .p-3:hover { box-shadow: 0 10px 24px rgba(19,20,31,.08); transform: translateY(-1px); }

.form-check-input { background-color: #F1F3F5; border-color: #1f1f20; }

@media (max-width: 991.98px) {
    :root { --ofc-pane-h: 50vh; }
    .ofc-panel { position: static; top: auto; }
}