/* ===== DentX — public patient map «Find a dentist» (views/find/*.ejs, public/js/find.js). Loaded only on /find pages.
   Logical properties only (English LTR / Arabic RTL). Map + list side by side ≥ 992 px, list ⇄ map tabs on phones. */
.fd-page { background: #f6f8fb; }
.fd-wrap { max-width: 1400px; margin-inline: auto; padding-inline: 16px; }
.fd-hd .lp-hd-in { gap: 1rem; }
.fd-hd-find { color: var(--lp-ink); font-weight: 700; text-decoration: none; white-space: nowrap; }
.fd-hd-find i { color: #e5364b; }
.fd-hd-pro { color: var(--lp-text); text-decoration: none; font-weight: 600; font-size: .9rem; white-space: nowrap; }
.fd-hd-pro:hover { color: var(--lp-blue); }
@media (max-width: 575.98px) { .fd-hd-pro span, .fd-hd-find { display: none; } .fd-hd .lp-logo img { height: 28px; } .fd-hd .lp-hd-act { gap: .6rem; } }
html:has(body.fd-page) { overflow-x: clip; }

.fd-top { background: #fff; border-bottom: 1px solid var(--lp-line); padding-block: 18px 14px; }
.fd-crumbs { font-size: .82rem; color: var(--lp-muted); margin-bottom: .35rem; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.fd-crumbs a { color: var(--lp-muted); text-decoration: none; } .fd-crumbs a:hover { color: var(--lp-blue); }
.fd-crumbs i { font-size: .65rem; }
.fd-h1 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; margin: 0 0 .25rem; color: var(--lp-ink); }
.fd-lead { color: var(--lp-muted); margin-bottom: .9rem; max-width: 760px; }
.fd-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.fd-filters .form-select { width: auto; min-width: 150px; flex: 1 1 160px; max-width: 240px; }
.fd-filters .fd-sort { flex: 0 1 170px; }
.fd-near { font-weight: 600; white-space: nowrap; border-radius: 10px; }
.fd-checks { display: flex; flex-wrap: wrap; gap: .25rem 1rem; padding-inline: .25rem; }
.fd-checks .form-check { margin: 0; }
.fd-status { min-height: 1.2em; margin-top: .4rem; color: var(--lp-blue); }
@media (max-width: 575.98px) {
  .fd-filters .form-select { max-width: none; flex: 1 1 45%; min-width: 0; }
  .fd-near { flex: 1 1 100%; }
}

.fd-body { padding-block: 14px 32px; }
.fd-grid { display: grid; grid-template-columns: minmax(340px, 470px) 1fr; gap: 16px; align-items: start; }
.fd-listcol { min-width: 0; }
.fd-mapcol { position: sticky; top: 78px; min-width: 0; }
.fd-map { height: calc(100vh - 100px); min-height: 420px; border-radius: 14px; overflow: hidden; background: #e8eef6; border: 1px solid var(--lp-line); position: relative; direction: ltr; }
.fd-map-sm { height: 340px; min-height: 0; }
.fd-map-ph { display: flex; height: 100%; align-items: center; justify-content: center; gap: .5rem; color: var(--lp-muted); font-size: .95rem; padding: 1rem; text-align: center; }
.fd-tabs { display: none; }
@media (max-width: 991.98px) {
  .fd-grid { grid-template-columns: 1fr; }
  .fd-mapcol { position: static; }
  .fd-map { height: 70vh; min-height: 360px; }
  .fd-tabs { display: flex; gap: 6px; margin-bottom: 10px; background: #fff; border: 1px solid var(--lp-line); border-radius: 12px; padding: 4px; position: sticky; top: 62px; z-index: 20; }
  .fd-tabs button { flex: 1; border: 0; background: transparent; padding: .5rem; border-radius: 9px; font-weight: 600; color: var(--lp-text); }
  .fd-tabs button.is-on { background: var(--lp-blue); color: #fff; }
  .fd-grid[data-view=list] .fd-mapcol { display: none; }
  .fd-grid[data-view=map] .fd-listcol { display: none; }
}
.fd-count { font-weight: 700; color: var(--lp-ink); margin-bottom: .5rem; }

.fd-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.fd-card { background: #fff; border: 1px solid var(--lp-line); border-radius: 14px; padding: 14px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.fd-card:hover, .fd-card.is-sel { border-color: #9cc3f5; box-shadow: 0 8px 22px -14px rgba(11,111,224,.45); }
.fd-card-lg { cursor: default; padding: 20px; }
.fd-card.is-demo { background: #fffdf5; }
.fd-card-h { display: flex; gap: 12px; align-items: flex-start; }
.fd-card-t { min-width: 0; flex: 1; }
.fd-av { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex: none; background: #eef3fa; }
.fd-av-lg { width: 88px; height: 88px; border-radius: 16px; }
.fd-av-i { display: inline-flex; align-items: center; justify-content: center; color: var(--lp-blue); font-size: 1.5rem; }
.fd-av-lg.fd-av-i { font-size: 2.3rem; }
.fd-name { font-size: 1.02rem; font-weight: 700; margin: 0 0 .2rem; color: var(--lp-ink); line-height: 1.35; }
.fd-name a { color: inherit; text-decoration: none; } .fd-name a:hover { color: var(--lp-blue); }
.fd-name-lg { font-size: 1.5rem; }
.fd-vf { color: #0b6fe0; font-size: .95em; }
.fd-meta { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; font-size: .82rem; color: var(--lp-muted); }
.fd-kind { font-weight: 600; }
.fd-open { padding: .05rem .5rem; border-radius: 99px; background: #f1f3f6; color: #6b7280; font-weight: 600; }
.fd-open.is-open { background: #e5f7ed; color: #0f7a3d; }
.fd-rate i { color: #f5a524; }
.fd-specs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.fd-specs span { font-size: .76rem; background: var(--lp-blue-s); color: #0a4fa8; padding: .15rem .55rem; border-radius: 99px; }
.fd-addr { font-size: .86rem; color: var(--lp-text); margin-top: 8px; display: flex; gap: .4rem; }
.fd-addr i { color: var(--lp-muted); }
.fd-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; align-items: center; }
.fd-acts .btn { border-radius: 9px; font-weight: 600; }
.fd-more { margin-inline-start: auto; text-decoration: none; }
.fd-empty { text-align: center; background: #fff; border: 1px dashed #c9d5e6; border-radius: 14px; padding: 28px 16px; }
.fd-empty > i { font-size: 2rem; color: var(--lp-blue); display: block; margin-bottom: .5rem; }

/* map markers */
.fd-pin, .fd-cl { position: absolute; transform: translate(-50%, -100%); border: 0; background: none; padding: 0; cursor: pointer; }
.fd-pin-b { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #0a1a3a; color: #fff; box-shadow: 0 4px 10px rgba(10,26,58,.35); border: 2px solid #fff; }
.fd-pin-b i { transform: rotate(45deg); font-size: .95rem; }
.fd-pin.is-vf .fd-pin-b { background: #0b6fe0; }
.fd-pin.is-demo .fd-pin-b { background: #b7791f; }
.fd-pin.is-sel .fd-pin-b { background: #e5364b; width: 40px; height: 40px; }
.fd-cl { transform: translate(-50%, -50%); }
.fd-cl span { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #0b6fe0; color: #fff; font-weight: 700; border: 3px solid rgba(255,255,255,.9); box-shadow: 0 0 0 5px rgba(11,111,224,.25); font-size: .85rem; }
.fd-cl.s1 span { width: 36px; height: 36px; } .fd-cl.s2 span { width: 44px; height: 44px; } .fd-cl.s3 span { width: 54px; height: 54px; }
.fd-me { position: absolute; transform: translate(-50%, -50%); }
.fd-me span { display: block; width: 16px; height: 16px; border-radius: 50%; background: #1e88ff; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(30,136,255,.25); }
.fd-lf { background: none; border: 0; }
.fd-pop { position: absolute; inset-inline: 12px; bottom: 12px; z-index: 1000; background: #fff; border-radius: 14px; padding: 14px; box-shadow: 0 18px 40px -12px rgba(10,26,58,.45); max-width: 460px; }
.fd-pop .fd-av { width: 48px; height: 48px; }
.fd-pop-x { position: absolute; top: 10px; inset-inline-end: 10px; }
.fd-pop .fd-card-t { padding-inline-end: 1.5rem; }

.fd-browse { margin-top: 28px; background: #fff; border: 1px solid var(--lp-line); border-radius: 14px; padding: 18px; }
.fd-browse ul { list-style: none; padding: 0; margin: 0; columns: 4 200px; column-gap: 1.5rem; }
.fd-browse li { break-inside: avoid; padding-block: .2rem; }
.fd-browse a { color: var(--lp-text); text-decoration: none; font-size: .9rem; } .fd-browse a:hover { color: var(--lp-blue); }
.fd-join { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 18px; background: linear-gradient(135deg, #0a1a3a, #0b63d6); color: #fff; border-radius: 14px; padding: 18px; }
.fd-join h2 { color: #fff; } .fd-join > div:first-child i { font-size: 1.8rem; }
.fd-join .btn { --bs-btn-color: #fff; --bs-btn-border-color: rgba(255,255,255,.6); --bs-btn-hover-bg: #fff; --bs-btn-hover-color: #0a1a3a; }
.fd-note { margin-top: 14px; }
.fd-place { padding-block: 18px 40px; }
.fd-hours tr.is-today th, .fd-hours tr.is-today td { font-weight: 700; color: var(--lp-blue); }
.fd-ft { background: #0a1a3a; color: #c9d4e8; padding-block: 20px calc(20px + var(--dx-sab, env(safe-area-inset-bottom, 0px))); font-size: .85rem; }
.fd-ft a { color: #c9d4e8; text-decoration: none; } .fd-ft a:hover { color: #fff; }
[dir=rtl] .dx-flip { transform: scaleX(-1); display: inline-block; }