/* The travel guide (owner 2026-10-23: moved from ProcessWire into Craft) -- on top of the site's style.css (Bootstrap,
   the brand's fonts and colours). The brand's blue: #1f4365; gold: #d1bf6d. */
.guide-map-page { position: relative; }
.guide-map { height: calc(100vh - 160px); min-height: 420px; width: 100%; background: #a8cfdf; }
.guide-filter { display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between; align-items: center; padding-top: .75rem; padding-bottom: .75rem; }
.guide-filter__selects { display: flex; flex-wrap: wrap; gap: .5rem; }
.guide-filter__selects .form-select { width: auto; min-width: 12rem; min-height: 44px; }
.guide-filter__actions { display: flex; gap: .5rem; }
.guide-filter__actions .btn { min-height: 44px; }

.guide-welcome { position: fixed; inset: 0; z-index: 1050; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(31, 67, 101, .55); }
.guide-welcome[hidden] { display: none; }
.guide-welcome__box { position: relative; max-width: 40rem; width: 100%; padding: 2rem 1.75rem 1.25rem; background: #fff; color: #1f4365; border-radius: .25rem; box-shadow: 0 1rem 3rem rgba(0, 0, 0, .25); }
.guide-welcome__close { position: absolute; top: .25rem; right: .5rem; width: 44px; height: 44px; border: 0; background: none; font-size: 1.75rem; line-height: 1; color: #1f4365; }

.guide-bubble { max-width: 280px; color: #1f4365; }
.guide-bubble p { margin: 0 0 .4rem; }
/* the pin's bubble: the name in Google's header row beside the cross, little space above it (owner 2026-10-23) */
.guide-bubble__head { color: #1f4365; font-size: 1rem; line-height: 1.3; padding-top: 8px; }
.guide-map .gm-style .gm-style-iw-ch { padding-top: 0 !important; }
.guide-bubble__head .guide-stars { display: inline-block; margin-left: .2rem; white-space: nowrap; }
.guide-bubble__head .guide-stars i { font-size: 12px !important; width: auto; }
.guide-map .gm-style .gm-style-iw-c { padding-top: 0 !important; padding-left: 14px !important; }
.guide-map .gm-style .gm-style-iw-chr { align-items: flex-start; }
.guide-map .gm-style .gm-style-iw-chr button.gm-ui-hover-effect { width: 36px !important; height: 36px !important; }
.guide-map .gm-style .gm-style-iw-chr button.gm-ui-hover-effect span { margin: 6px !important; }
.guide-map .gm-style .gm-style-iw-d { padding-top: .25rem; }
.guide-bubble__icons { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: .35rem; }
.guide-bubble a { font-weight: 600; }

.guide-stars { color: #c8ccd2; white-space: nowrap; }
.guide-stars .is-on { color: #f2b01e; }
.guide-votes { font-size: .85rem; color: #6c7a89; }

.guide-photos { position: relative; }
.guide-photos__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; list-style: none; padding: 0; margin: 0; }
.guide-photos__track::-webkit-scrollbar { display: none; }
.guide-photos__track li { flex: 0 0 100%; scroll-snap-align: start; }
.guide-photos__track img { width: 100%; height: auto; aspect-ratio: 650 / 370; object-fit: cover; display: block; }
.guide-photos__nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .25rem; color: #1f4365; }
.guide-photos__nav button { min-width: 44px; min-height: 44px; border: 0; background: none; font-size: 2rem; line-height: 1; color: #1f4365; }

.guide-directions { width: 100%; height: 450px; border: 0; margin-top: 1.5rem; }
.guide-address { margin-top: .5rem; color: #1f4365; }
.guide-weather { margin-top: 1.5rem; text-align: center; color: #1f4365; }
.guide-weather__box h2 { color: #8fb3cb; text-transform: uppercase; border-bottom: 2px solid #e5e9ee; padding-bottom: .5rem; }
.guide-weather__temp { font-size: 1.75rem; font-weight: 700; }
.guide-weather__credit { font-size: .8rem; margin-top: 1rem; border-top: 2px solid #e5e9ee; padding-top: .75rem; }

.guide-info__cat a, .guide-info__subcats a { text-decoration: none; }
.guide-info__subcats { color: #6c8aa5; }
.guide-info__rating, .guide-info__meta { color: #6c8aa5; }
.guide-icons { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: .5rem 0 1rem; }
.guide-text { margin-bottom: 1rem; }
/* the site takes every list's bullets away (ol li, ul li: none) -- a place's text keeps them, as in ProcessWire (owner 2026-10-23) */
.guide-text ul, .guide-text ol { padding-left: 1.4rem; margin-bottom: 1rem; }
.guide-text ul li { list-style-type: disc; }
.guide-text ol li { list-style-type: decimal; }
.guide-text img { max-width: 100%; height: auto; }
.guide-video { position: relative; aspect-ratio: 16 / 9; margin: 1rem 0; }
.guide-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.guide-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.guide-comments { list-style: none; padding: 0; }
.guide-comments li { margin-bottom: 1rem; }
.guide-comments blockquote { margin: .25rem 0; padding: 1rem 1.25rem; background: #dfeaf2; border-radius: 1rem; font-style: italic; color: #1f4365; }
.guide-comments small { color: #6c7a89; }
.guide-note { padding: .75rem 1rem; background: #e3f1e5; color: #1d5c2a; border-radius: .25rem; }
.guide-note--bad { background: #fbe6e3; color: #8a2b1e; }

.guide-form label { display: block; margin-top: .75rem; font-weight: 600; color: #1f4365; }
.guide-form .form-control, .guide-form .form-select { min-height: 44px; }
.guide-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* "Rate this place": the stars are buttons, a click is the vote; right to left so a hover lights the ones before it */
.guide-rate { display: inline-flex; flex-direction: row-reverse; margin: .25rem 0 .5rem; }
.guide-rate button { border: 0; background: none; margin: 0; padding: 0 .1rem; font-size: 1.75rem; color: #c8ccd2; cursor: pointer; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.guide-rate button:hover, .guide-rate button:hover ~ button, .guide-rate button.is-on, .guide-rate button.is-on ~ button { color: #f2b01e; }
.guide-rate button:focus-visible { outline: 2px solid #1f4365; outline-offset: 2px; }
.guide-rate button i { color: inherit !important; }   /* the site greys every .fa-solid */
.guide-rate[aria-disabled="true"] button { cursor: default; pointer-events: none; }

.guide-suggest-map { height: 520px; width: 100%; background: #a8cfdf; }
.guide-features { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .5rem; border: 0; padding: 0; margin-top: .75rem; }
.guide-features legend { font-weight: 600; color: #1f4365; font-size: 1rem; }
.guide-feature { display: flex !important; flex-direction: column; align-items: center; gap: .25rem; margin: 0 !important; padding: .5rem; font-weight: 400 !important; text-align: center; border: 1px solid #e5e9ee; border-radius: .25rem; cursor: pointer; }
.guide-feature span { font-size: .85rem; }
.guide-check { display: flex !important; gap: .5rem; align-items: flex-start; font-weight: 400 !important; }
.guide-check input { margin-top: .3rem; min-width: 1.1rem; min-height: 1.1rem; }

@media (max-width: 767.98px) {
  .guide-map { height: calc(100vh - 220px); }
  .guide-filter__selects .form-select { min-width: 0; flex: 1 1 10rem; }
  .guide-directions { height: 320px; }
  .guide-suggest-map { height: 340px; }
}

/* phones: the site's header is fixed over the top 101 px (the logo to 144) and the site leaves no room below 576 px --
   the place's and suggest pages start under it (2026-10-23, seen live) */
@media (max-width: 575.98px) {
  .guide-place, .guide-suggest { padding-top: 7rem !important; }
}

/* Google Maps waits for consent ("functional"): the note on the map until then */
.guide-map, .guide-suggest-map { position: relative; }
.guide-consent { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; padding: 1.5rem;
  text-align: center; color: #1f4365; background: #dfeaf2; }
.guide-consent p { margin: 0; max-width: 22rem; }
.guide-btn-text { margin-left: .4rem; }

/* phone and small tablet: the map is the screen (owner 2026-10-23: "can make the guide work on mobile? so we don't have
   this massive footer and chat") -- under the site's fixed header (101 px), the filters one row at the foot, the page
   doesn't scroll: the footer, the Trustpilot bar and the chat stay out of sight */
@media (max-width: 991.98px) {
  body:has(.guide-map-page) { overflow: hidden; }
  .guide-map-page { position: fixed; top: 101px; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; flex-direction: column; background: #fff; }
  /* a firm height (the screen less the header and the filter row) -- Safari built the map before a flexible one was sized */
  .guide-map { flex: 1 1 auto; height: calc(100vh - 101px - 64px); height: calc(100dvh - 101px - 64px); min-height: 280px; }
  .guide-filter { flex-wrap: nowrap; gap: .4rem; max-width: none; padding: .5rem .5rem calc(.5rem + env(safe-area-inset-bottom)); }
  .guide-filter__selects { flex: 1 1 auto; flex-wrap: nowrap; gap: .4rem; min-width: 0; }
  .guide-filter__selects .form-select { flex: 1 1 0; min-width: 0; font-size: .9rem; padding-left: .6rem; padding-right: 1.8rem; }
  .guide-filter__actions { flex: 0 0 auto; gap: .4rem; }
  .guide-filter__actions .btn { width: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
  .guide-btn-text { display: none; }
  /* the chat's frames (tawk.to), in case it loads before it can be told to hide */
  body:has(.guide-map-page, .guide-place, .guide-suggest) iframe[title*="chat" i] { display: none !important; }
}