/* Local Guide map, trip route panel and the seller pin pickers.
   Kept apart from the page stylesheets so Leaflet's own rules only ever sit
   next to the overrides that answer them. */

.saren-map-shell {
  position: relative;
  border-radius: var(--radius-md, 22px);
  overflow: hidden;
  border: 1px solid var(--line, #dedee7);
  background: var(--sage, #eaeaef);
  box-shadow: var(--shadow, 0 24px 70px rgba(24, 20, 71, 0.14));
}

.saren-map {
  width: 100%;
  height: clamp(320px, 52vh, 560px);
  background: #eaeaef;
}

.saren-map-shell.compact .saren-map { height: clamp(240px, 36vh, 340px); }
.saren-map-shell.picker .saren-map { height: clamp(260px, 40vh, 380px); }

/* Leaflet paints its own attribution bar; match the site instead of its default blue. */
.saren-map .leaflet-container { font: 400 12px/1.5 var(--body, system-ui, sans-serif); }
.saren-map .leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink-soft, #666570);
  font-size: 11px;
}
.saren-map .leaflet-control-attribution a { color: var(--violet-dark, #4435ed); }
.saren-map .leaflet-bar a {
  color: var(--ink, #131316);
  border-bottom-color: var(--line, #dedee7);
}
.saren-map .leaflet-bar a:hover { background: var(--violet-soft, #eceaff); }
.saren-map .leaflet-popup-content-wrapper {
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(24, 20, 71, 0.2);
}
.saren-map .leaflet-popup-content { margin: 14px 16px; font-family: var(--body, system-ui, sans-serif); }

/* Mobile keeps one-finger scroll for the page; a hint says how to pan. */
.saren-map-locked::after {
  content: "ใช้สองนิ้วเพื่อเลื่อนแผนที่";
  position: absolute;
  inset-inline: 0;
  bottom: 26px;
  margin: auto;
  width: max-content;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(19, 19, 22, 0.78);
  color: #fff;
  font: 500 12px/1 var(--body, system-ui, sans-serif);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 500;
}
.saren-map-locked:active::after { opacity: 1; }

/* ---- Markers ------------------------------------------------------------ */

.saren-pin { background: none; border: 0; }
.saren-pin-dot {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  background: var(--pin-color, #5848ff);
  border: 2px solid #fff;
  box-shadow: 0 6px 14px rgba(19, 19, 22, 0.32);
}
.saren-pin-dot b {
  transform: rotate(45deg);
  color: #fff;
  font: 700 13px/1 var(--utility, "Space Grotesk", sans-serif);
}
.saren-pin-dot b .ico {
  display: block;
  width: 14px;
  height: 14px;
}
.leaflet-marker-icon.saren-pin:focus-visible .saren-pin-dot {
  outline: 3px solid var(--saffron, #c8f15a);
  outline-offset: 3px;
}

.saren-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 12px 16px;
  background: var(--surface, #fff);
  border-top: 1px solid var(--line, #dedee7);
}
.saren-map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 500 12px/1 var(--body, system-ui, sans-serif);
  color: var(--ink-soft, #666570);
}
.saren-map-legend i {
  width: 12px;
  height: 12px;
  border-radius: 50% 50% 50% 2px;
  transform: rotate(-45deg);
  background: var(--pin-color, #5848ff);
}

/* ---- Popups ------------------------------------------------------------- */

.saren-pin-card { display: grid; gap: 8px; min-width: 180px; }
.saren-pin-card img {
  width: 100%;
  height: 108px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.saren-pin-card small {
  font: 600 10px/1 var(--utility, "Space Grotesk", sans-serif);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft, #666570);
}
.saren-pin-card b { font-size: 15px; color: var(--ink, #131316); }
.saren-pin-card p { margin: 0; font-size: 12.5px; color: var(--ink-soft, #666570); }
.saren-pin-card .saren-pin-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.saren-pin-card .saren-pin-actions a,
.saren-pin-card .saren-pin-actions button {
  flex: 1 1 auto;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line, #dedee7);
  background: var(--surface, #fff);
  color: var(--ink, #131316);
  font: 600 12px/1 var(--body, system-ui, sans-serif);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.saren-pin-card .saren-pin-actions .primary {
  background: var(--violet, #5848ff);
  border-color: var(--violet, #5848ff);
  color: #fff;
}
.saren-pin-card .saren-pin-actions .primary.added {
  background: var(--saffron, #c8f15a);
  border-color: var(--saffron, #c8f15a);
  color: var(--ink, #131316);
}

/* ---- Trip route summary -------------------------------------------------- */

.saren-route-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding: 14px 16px;
  background: var(--surface, #fff);
  border-top: 1px solid var(--line, #dedee7);
}
.saren-route-bar dl { display: flex; gap: 18px; margin: 0; flex: 1 1 auto; }
.saren-route-bar dl > div { display: grid; gap: 2px; }
.saren-route-bar dt {
  font: 600 10px/1 var(--utility, "Space Grotesk", sans-serif);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft, #666570);
}
.saren-route-bar dd { margin: 0; font: 700 17px/1.2 var(--body, system-ui, sans-serif); color: var(--ink, #131316); }
.saren-route-bar .saren-route-note {
  flex: 1 1 100%;
  margin: 0;
  font-size: 12px;
  color: var(--ink-soft, #666570);
}
.saren-route-bar button {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--ink, #131316);
  background: var(--ink, #131316);
  color: #fff;
  font: 600 13px/1 var(--body, system-ui, sans-serif);
  cursor: pointer;
}
.saren-route-bar button[disabled] { opacity: 0.45; cursor: not-allowed; }
.saren-route-bar button.ghost { background: transparent; color: var(--ink, #131316); }

/* ---- Photo credit -------------------------------------------------------- */

/* Wikimedia photos are only licensed while the credit is shown, so this is
   part of the contract, not decoration. */
.saren-photo-credit {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-soft, #666570);
}
.saren-photo-credit a { color: inherit; }

.saren-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}
.saren-photo-grid figure {
  margin: 0;
  border: 1px solid var(--line, #dedee7);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface, #fff);
}
.saren-photo-grid img { width: 100%; height: 92px; object-fit: cover; display: block; }
.saren-photo-grid figcaption {
  padding: 7px 9px;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--ink-soft, #666570);
  /* Credits carry raw URLs; keep them inside the card instead of stretching it. */
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.saren-photo-grid button {
  width: 100%;
  padding: 7px;
  border: 0;
  border-top: 1px solid var(--line, #dedee7);
  background: transparent;
  color: var(--danger, #d84455);
  font: 600 11px/1 var(--body, system-ui, sans-serif);
  cursor: pointer;
}
.saren-photo-grid figure.selectable { cursor: pointer; }
.saren-photo-grid figure.selectable:hover { border-color: var(--violet, #5848ff); }

/* ---- Pin picker ---------------------------------------------------------- */

.saren-picker-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--violet-soft, #eceaff);
  border-top: 1px solid var(--line, #dedee7);
  font-size: 12.5px;
  color: var(--ink, #131316);
}
.saren-picker-hint output { font-family: var(--utility, "Space Grotesk", monospace); font-weight: 600; }
.saren-picker-hint button {
  margin-inline-start: auto;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--violet, #5848ff);
  background: var(--surface, #fff);
  color: var(--violet-dark, #4435ed);
  font: 600 12px/1 var(--body, system-ui, sans-serif);
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .saren-map-locked::after { transition: none; }
}

/* ---- Seller Center panels ------------------------------------------------ */

.seller-place-photos { display: grid; gap: 14px; }
.seller-place-photo-note { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-soft, #666570); }
.seller-place-photo-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.seller-place-photo-actions label { cursor: pointer; }
#sellerWikimediaResults h4 {
  margin: 4px 0 10px;
  font: 600 12px/1 var(--utility, "Space Grotesk", sans-serif);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft, #666570);
}
#sellerWikimediaGrid figure button { color: var(--violet-dark, #4435ed); }

.seller-map-visible {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink, #131316);
}
.seller-map-visible input { width: 18px; height: 18px; accent-color: var(--violet, #5848ff); }

/* The place editor lays its fields out on a grid; the picker spans it. */
.seller-guide-fields > .saren-map-shell.picker { grid-column: 1 / -1; }

/* Empty/error states are prose, not a card — let them span the whole grid. */
.saren-photo-grid > p { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--ink-soft, #666570); }

/* ---- Admin back office place dialog -------------------------------------- */

.admin-place-photos { display: grid; gap: 12px; margin-top: 14px; }
.admin-place-photos header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.admin-place-photos header b { font-size: 14px; color: var(--ink, #131316); }
.admin-place-photos header span { font-size: 12px; color: var(--ink-soft, #666570); }
.admin-place-photo-note { margin: 0; font-size: 12px; line-height: 1.6; color: var(--ink-soft, #666570); }
.admin-place-photo-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.admin-place-photo-actions label { cursor: pointer; }
#adminWikimediaResults h4 {
  margin: 4px 0 8px;
  font: 600 12px/1 var(--utility, "Space Grotesk", sans-serif);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft, #666570);
}