/* Locations page (loaded by /locations/ only), direction C: the list (search, type and
   region chips, the area select, the rows with their shortlist toggles) beside the map
   in its hairline frame, and the board card over the map (a sheet on phones).
   Tokens: site.css :root. Logical properties, so Arabic (dir=rtl) mirrors. */

.loc-page { padding-block: clamp(32px, 5vw, 56px) clamp(56px, 7vw, 88px); }
.loc-page h1 { font-size: clamp(2.25rem, 4.4vw, 3.5rem); margin: 16px 0 26px; }
.loc-tabs { display: none; }
.loc-body {
  position: relative; display: grid; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--night-2);
}
@media (min-width: 768px) {
  .loc-body { grid-template-columns: minmax(300px, 390px) minmax(0, 1fr); height: clamp(560px, calc(100vh - 200px), 860px); }
  .loc-side { overflow-y: auto; border-inline-end: 1px solid var(--line); scrollbar-width: thin; scrollbar-color: var(--night-3) transparent; }
}
.loc-side { background: var(--night); padding: 18px; min-width: 0; }

.loc-search {
  width: 100%; min-height: 48px; padding: 12px 20px; font: inherit; font-size: .9375rem; color: var(--ivory);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--night-2);
  transition: border-color var(--t-fast);
}
.loc-search::placeholder { color: var(--mute); }
.loc-search:hover { border-color: rgba(226, 234, 242, .4); }
.loc-search:focus-visible { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(63, 180, 230, .25); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
.chip {
  min-height: 34px; padding: 6px 14px; border-radius: var(--r-pill); border: 1px solid var(--line-strong);
  background: transparent; font-weight: 500; font-size: var(--fs-small); color: var(--pearl);
  transition: border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast);
}
.chip:hover { border-color: var(--cyan); color: #fff; }
/* Selected: ivory on navy, like the primary button. */
.chip[aria-pressed="true"] { background: var(--ivory); border-color: var(--ivory); color: var(--night); font-weight: 600; }
.chip-count { color: var(--cyan); font-weight: 700; }
.chip[aria-pressed="true"] .chip-count { color: var(--night); opacity: .6; }
.chips-regions { margin-top: 0; }
.page p.loc-count { color: var(--mute); font-size: .75rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; margin: 4px 0 10px; }
html[lang="ar"] .page p.loc-count { letter-spacing: 0; font-size: .875rem; }
.page p.loc-empty { color: var(--mute); font-size: .9375rem; }
.loc-area { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.loc-area-label { color: var(--mute); font-size: var(--fs-small); }
.loc-area-select {
  flex: 1; min-width: 0; min-height: 40px; padding: 8px 14px; font: inherit; font-size: var(--fs-small); color: var(--ivory);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--night-2);
}

.loc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* Each row's shortlist toggle sits over the row's inline end (a button cannot hold another). */
.loc-row { position: relative; }
.loc-row > .board-card { padding-inline-end: 58px; background: transparent; }
.loc-row > .board-card:hover { background: var(--night-2); }
.loc-pick {
  position: absolute; top: 50%; inset-inline-end: 12px; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--night);
  color: var(--ivory); font-size: 1rem; font-weight: 600; line-height: 1;
  transition: border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast);
}
.loc-pick:hover { border-color: var(--cyan); }
.loc-pick[aria-pressed="true"] { background: var(--ivory); border-color: var(--ivory); color: var(--night); }
.loc-card-pick[aria-pressed="true"] { border-color: var(--cyan); color: var(--ivory); box-shadow: inset 0 0 0 1px var(--cyan); }
.board-card[aria-current="true"], .loc-row > .board-card[aria-current="true"] { background: var(--night-3); border-color: var(--cyan-line); }

.loc-mapwrap { display: flex; flex-direction: column; min-width: 0; }
.page p.loc-map-count {
  margin: 0; max-width: none; padding: 10px 18px; color: var(--mute);
  font-size: .6875rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  background: var(--night-2); border-bottom: 1px solid var(--line);
}
html[lang="ar"] .page p.loc-map-count { letter-spacing: 0; font-size: .8125rem; }
.loc-map { flex: 1; min-height: 0; background: var(--night-2); }
.pin.is-selected .pin-dot { background: var(--ivory); color: var(--night); transform: scale(1.25); }
.pin.is-selected .pin-dot:empty::after { background: var(--night); }
.pin-list-title { margin: 0 0 10px; font-weight: 600; font-size: var(--fs-small); color: var(--pearl); }
.pin-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.board-card-compact { gap: 10px; padding: 6px; border-radius: 10px; font-size: var(--fs-small); }
.board-card-compact .board-card-thumb { width: 44px; height: 44px; border-radius: 8px; }
.board-card-compact .board-card-title { font-size: var(--fs-small); }
.board-card-compact .board-card-meta { font-size: .75rem; }

/* ---- The board card over the map ---- */
.loc-card {
  position: absolute; top: 56px; inset-inline-end: 16px; z-index: 1100;
  width: min(350px, calc(100% - 32px)); max-height: calc(100% - 72px); overflow-y: auto;
  background: var(--night-2); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow);
  scrollbar-width: thin; scrollbar-color: var(--night-3) transparent;
}
.loc-card-close, .loc-card-step {
  position: absolute; z-index: 2; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--glass); color: var(--ivory);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color var(--t-fast);
}
.loc-card-close:hover, .loc-card-step:hover { border-color: var(--cyan); }
.loc-card-close { top: 12px; inset-inline-end: 12px; font-size: .875rem; }
.loc-card-photo { position: relative; aspect-ratio: 16 / 10; }
.loc-card-img { width: 100%; height: 100%; object-fit: cover; }
.loc-card-counter {
  position: absolute; bottom: 10px; inset-inline-end: 12px; padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--glass); color: var(--ivory); font-size: .75rem; font-weight: 600;
}
.loc-card-step { top: 50%; transform: translateY(-50%); font-size: 1.375rem; line-height: 1; }
.loc-card-step.prev { inset-inline-start: 10px; }
.loc-card-step.next { inset-inline-end: 10px; }
[dir="rtl"] .loc-card-step { transform: translateY(-50%) scaleX(-1); }
.loc-card-in { padding: 20px 22px 22px; }
.loc-card-title { font-size: 1.5rem; line-height: 1.2; padding-inline-end: 44px; }
.loc-card-title .board-card-code { font-family: var(--sans); font-size: .875rem; }
.loc-card-title:focus { outline: none; }
.page p.loc-card-note { color: var(--cyan); font-weight: 600; font-size: var(--fs-small); margin: 8px 0 0; }
.loc-card dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 18px 0; font-size: .9375rem; }
.loc-card dt { color: var(--mute); }
.loc-card dd { margin: 0; font-weight: 500; }
.loc-card-art { margin: 0 0 16px; padding: 12px 0; border-block: 1px solid var(--line); font-size: .875rem; }
.loc-card-art summary { cursor: pointer; font-weight: 600; color: var(--pearl); }
.loc-card-art summary:hover { color: #fff; }
.loc-card-art ul { margin: 10px 0 0; padding-inline-start: 18px; color: var(--mute); display: grid; gap: 6px; }
.loc-card-art li::marker { color: var(--cyan); }
.loc-card-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.loc-card-actions { display: grid; gap: 8px; }
.page .loc-card .btn { margin-top: 0; min-height: 46px; padding: 11px 18px; white-space: normal; text-align: center; font-size: var(--fs-small); }

@media (max-width: 767px) {
  .loc-tabs { display: flex; gap: 6px; margin-bottom: 14px; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-pill); }
  .loc-tabs [role="tab"] {
    flex: 1; min-height: 40px; padding: 8px; border-radius: var(--r-pill); border: 0; background: transparent;
    font-weight: 600; font-size: var(--fs-small); color: var(--pearl);
  }
  .loc-tabs [aria-selected="true"] { background: var(--ivory); color: var(--night); }
  .loc-app[data-tab="list"] .loc-mapwrap, .loc-app[data-tab="map"] .loc-side { display: none; }
  .loc-map { flex: none; height: 70vh; min-height: 360px; }
  /* The card becomes a sheet at the bottom of the screen, over either tab. */
  .loc-card {
    position: fixed; inset: auto 0 0 0; width: auto; max-height: 85vh;
    border-radius: var(--r-card) var(--r-card) 0 0; border-bottom: 0; box-shadow: 0 -16px 48px rgba(0, 0, 0, .5);
  }
}