/*
 * Airbnb-style look for ShotHotspot.
 *
 * A layer on top of the normal styles. It also styles the parts added with the look (photo arrows on cards,
 * the hotspot sheet on the search and list pages, the hotspot page's full-width map), which need it.
 *
 * Rules start with :root so they beat the component stylesheets, which load later in the page.
 */

/* DM Sans: a free font close to Airbnb's Cereal */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2Hp2ywxg089UriCZ2IHTWEBlwu8Q.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dmsans/v17/rP2Hp2ywxg089UriCZOIHTWEBlw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --theme-text: #222222;
  --theme-text-secondary: #6a6a6a;
  --theme-border: #dddddd;
  --theme-border-light: #ebebeb;
  --theme-bg-soft: #f7f7f7;
  --theme-accent: #ff385c;
  /* The red of the home page's search button, for secondary buttons */
  --theme-red: #e31c5f;
  --theme-accent-gradient: linear-gradient(to right, #e61e4d 0%, #e31c5f 50%, #d70466 100%);
  --theme-radius: 12px;
  --theme-radius-small: 8px;
  --theme-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  --theme-shadow-small: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* ------------------------------------------------------------------ Base */

:root body {
  font-family: 'DM Sans', 'Sarabun', sans-serif;
  color: var(--theme-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

:root .heading1,
:root .heading4 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

:root .heading3 {
  text-transform: none;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0;
  color: var(--theme-text);
}

:root .sub-heading1 {
  font-weight: 600;
  font-size: clamp(22px, 2vw, 26px);
  letter-spacing: -0.01em;
}

:root .sub-heading4 {
  font-weight: 600;
  letter-spacing: -0.01em;
}

:root hr {
  background-color: var(--theme-border-light);
}

:root .link {
  color: var(--theme-text);
  text-decoration: underline;
  font-weight: 600;
}

:root .main-content.-dark {
  background-color: #fff;
  color: var(--theme-text);
}

/* ------------------------------------------------------------------ Header and menu */

:root .nav-burger-container {
  background-color: #fff;
  color: var(--theme-text);
  border: 1px solid var(--theme-border);
  border-radius: 999px;
  transition: box-shadow 0.2s;
}

:root .nav-burger-container:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
}

:root .nav-burger-container .component-icon {
  color: var(--theme-text);
}

/* Space in the pill for the burger lines, which sit on top of it (on desktop the pill's padding makes the room) */
:root .nav-burger-space {
  display: inline-block;
  width: 20px;
  height: 16px;
}

/*
 * The burger lines live outside the header (see app-header.js). They're white with "difference" blending, which
 * inverts whatever is behind them: dark on the white pill and light pages, light over photos and dark areas.
 * On desktop they stay on screen when the page scrolls.
 */
:root .site-header > .nav-burger {
  position: absolute;
  top: calc(var(--nav-height) / 2 - 8px);
  right: calc(var(--nav-padding-x) + 3px);
  z-index: 102;
  padding: 0;
  border: none;
  background: none;
  color: #fff;
  mix-blend-mode: difference;
  pointer-events: auto;
}

:root .site-header > .nav-burger::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
}

@media (min-width: 768px) {
  :root .nav-burger-space {
    display: none;
  }

  :root .site-header > .nav-burger {
    position: fixed;
    right: calc(var(--nav-padding-x) + 6px);
  }

  /* The map pages had the lines inside a narrower pill; give them the same room as every other page */
  :root .page-sidemap .nav-burger-container {
    padding-right: 35px;
  }
}

:root .page-sidemap .nav-burger-container {
  border: 1px solid var(--theme-border);
  box-shadow: var(--theme-shadow-small);
}

:root .explore-link {
  font-weight: 600;
}

/* More breathing room at the sides on desktop */
@media (min-width: 1200px) {
  :root {
    --nav-padding-x: 50px;
  }
}

/* On the map pages the logo was inverted on a black box, which showed as a white box on anything not white */
:root .page-sidemap .logo {
  background: none;
}

:root .nav-menu {
  border-radius: var(--theme-radius);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
  padding: 8px 0;
  min-width: 220px;
  overflow: hidden;
}

:root .nav-menu > a {
  color: var(--theme-text);
  font-weight: 400;
  font-size: 14px;
  padding: 11px 16px;
}

:root .nav-menu > a:hover {
  background-color: var(--theme-bg-soft);
}

:root .nav-menu .border-top {
  border-top: 1px solid var(--theme-border-light);
  margin-top: 8px;
  padding-top: 11px;
}

/* ------------------------------------------------------------------ Home hero and search box */

:root .hero-container .inner .heading,
:root .hero-container .heading.bg-clip {
  -webkit-text-fill-color: #fff;
  background-image: none !important;
  filter: none;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
}

:root .hero-container .inner .sub-heading {
  text-transform: none;
  font-size: 18px;
  font-weight: 500;
  opacity: 0.95;
}

:root .hero-container .search-box-container input {
  height: 64px;
  border-radius: 999px;
  border: 1px solid var(--theme-border);
  padding: 0 80px 0 32px;
  font-size: 17px;
  font-weight: 500;
  color: var(--theme-text);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}

:root .search-box-container .component-icon.-type-search {
  right: 8px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--theme-accent-gradient);
  color: #fff;
  transform: translateY(-50%);
}

:root .search-box-container .component-icon.-type-search svg {
  width: 18px;
  height: 18px;
}

:root .search-box-container.-icon-chill .component-icon.-type-search {
  width: 34px;
  height: 34px;
  right: 6px;
  color: #fff;
  transform: translateY(-50%);
}

:root .search-box-container.-icon-chill .component-icon.-type-search svg {
  width: 14px;
  height: 14px;
}

:root .geocode-results {
  border-radius: 24px;
  box-shadow: var(--theme-shadow);
  padding: 12px 0;
  margin-top: 8px;
}

:root .geocode-results button {
  padding: 10px 24px;
}

:root .geocode-results button:hover {
  background-color: var(--theme-bg-soft);
}

/* ------------------------------------------------------------------ Sliders (home page sections) */

:root .component-slider.-theme-grey,
:root .component-slider.-theme-dark {
  --bg-color: #fff;
  background-color: #fff;
  color: var(--theme-text);
  border-top: none;
}

:root .component-slider + .component-slider {
  border-top: 1px solid var(--theme-border-light);
}

:root .component-slider--header a {
  font-weight: 600;
  text-decoration: underline;
}

:root .component-slider--scroll-wrapper::-webkit-scrollbar {
  height: 4px;
}

:root .component-slider--scroll-wrapper::-webkit-scrollbar-thumb {
  background: #b0b0b0;
  border-radius: 999px;
}

:root .component-slider--scroll-wrapper::-webkit-scrollbar-track {
  background: var(--theme-border-light);
  border-radius: 999px;
}

/* ------------------------------------------------------------------ Hotspot cards */

:root .component-hotspot-card {
  background-color: transparent;
  border-radius: var(--theme-radius);
}

:root .component-hotspot-card .img-container-outer,
:root .hotspot-outer .img-container-outer {
  border-radius: var(--theme-radius);
  overflow: hidden;
}

:root .component-hotspot-card .img-container {
  border-radius: var(--theme-radius);
}

:root .component-hotspot-card .content-container {
  border: none;
  border-radius: 0;
  padding: 12px 2px 4px;
}

:root .hotspot-card-name {
  margin-bottom: 2px;
}

:root .component-hotspot-card .stats {
  color: var(--theme-text-secondary);
}

:root .component-location-tag.-theme-grey {
  background: none;
  border: none;
  color: var(--theme-text-secondary);
  text-transform: none;
  font-size: 14px;
  padding: 0 0 0 16px;
  margin-bottom: 0;
}

:root .component-location-tag.-theme-grey .component-icon {
  top: 0;
  left: 0;
  opacity: 0.7;
}

:root .vote .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--theme-border);
  box-shadow: none;
  height: 32px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--theme-text);
  background-color: #fff;
}

/* The two halves share one divider */
:root .vote .button:last-child {
  border-left: 0;
}

:root .vote .component-icon {
  display: flex;
}

:root .vote .number {
  top: 0;
}

:root .vote .button:hover {
  background-color: var(--theme-bg-soft);
  color: var(--theme-accent);
}

:root .vote.-voted .button.-active {
  color: var(--theme-accent);
}

:root .vote svg {
  position: static;
  display: block;
  height: 16px !important;
  width: 16px !important;
}

:root .hotspot-more button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--theme-text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

/* Dark dots on the white button (the icon draws them as a white background image) */
:root .hotspot-more .component-icon.-type-more-bg::before {
  top: 0;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><circle cx="256" cy="256" r="48" fill="%23222222"/><circle cx="256" cy="416" r="48" fill="%23222222"/><circle cx="256" cy="96" r="48" fill="%23222222"/></svg>');
}

:root .hotspot-more .component-icon {
  display: flex;
}

/* Arrows to page through a card's photos, shown on hover */
:root .card-photo-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 28px;
  height: 28px;
  margin-top: -14px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.92);
  color: var(--theme-text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.9);
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s, background-color 0.2s;
}

:root .card-photo-arrow.-prev {
  left: 10px;
}

:root .card-photo-arrow.-next {
  right: 10px;
}

:root .card-photo-arrow svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  overflow: visible;
}

:root.no-touch .component-hotspot-card:hover .card-photo-arrow:not(.-hidden) {
  opacity: 1;
  visibility: visible;
  transform: none;
}

:root.no-touch .component-hotspot-card .card-photo-arrow:hover {
  background-color: #fff;
  transform: scale(1.06);
}

:root.touch .card-photo-arrow {
  display: none;
}

/* Let the arrows (and swipes) stop on a column of photos */
:root .component-hotspot-card.-lots .img-container {
  scroll-snap-type: x proximity;
}

:root .component-hotspot-card.-lots .img-container li {
  scroll-snap-align: start;
}

/* Light grey photo placeholders while images load, instead of black */
:root .img-container li {
  background-color: var(--theme-border-light);
}

/* ------------------------------------------------------------------ Hotspot page */

:root .page-hotspot .photo-gallery-container,
:root .page-hotspot .bg-color-grey {
  background-color: #fff;
  color: var(--theme-text);
}

:root .page-hotspot .photo-gallery-container .img-container li,
:root .component-hotspot-map,
:root .component-hotspot-types li {
  border-radius: var(--theme-radius);
  overflow: hidden;
}

/* ------------------------------------------------------------------ List and location cards */

:root .component-list-card,
:root .component-location-card {
  border-radius: var(--theme-radius);
  overflow: hidden;
}

:root .component-list-card .info .heading {
  font-weight: 600;
  letter-spacing: -0.01em;
}

:root .component-location-tag:not(.-theme-grey) {
  background-color: #fff;
  color: var(--theme-text);
  text-transform: none;
  font-weight: 600;
  font-size: 12px;
  border-radius: 999px;
  padding: 6px 10px 6px 22px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

:root .component-location-tag:not(.-theme-grey) .component-icon {
  top: 5px;
  left: 6px;
}

:root .component-location-card.-no-image {
  border-color: var(--theme-border);
}

/* ------------------------------------------------------------------ Buttons and forms */

:root .button {
  border-radius: var(--theme-radius-small);
  border: 2px solid var(--theme-red);
  background-color: #fff;
  color: var(--theme-red);
  font-weight: 600;
  letter-spacing: 0;
  transition: background-color 0.2s, transform 0.1s;
}

/* Secondary buttons (Load more, Show more, Add): a red outline with red text */
:root .button.-outline,
:root .button.-color-light {
  border-color: var(--theme-red);
  background-color: #fff;
  color: var(--theme-red);
}

:root .button:hover,
:root .button.-outline:hover,
:root .button.-color-light:hover {
  background-color: #fff2f5;
  color: var(--theme-red);
}

:root .button:active {
  transform: scale(0.98);
}

:root .button.-color-dark,
:root .button.-color-primary {
  background: var(--theme-accent-gradient);
  border-color: transparent;
  color: #fff;
}

:root .button.-color-dark:hover,
:root .button.-color-primary:hover {
  background: var(--theme-accent-gradient);
  color: #fff;
  filter: brightness(0.95);
}

:root .button.-color-grey {
  background-color: #fff;
  border-color: var(--theme-border);
}

:root .button.-pill {
  border-radius: 999px;
}

:root .form-control {
  border: 1px solid #b0b0b0;
  border-radius: var(--theme-radius-small);
  font-weight: 400;
  color: var(--theme-text);
}

:root .form-control:focus,
:root .form-control:active {
  border-color: var(--theme-text);
  box-shadow: 0 0 0 1px var(--theme-text);
}

:root .form-group:not(.-no-border) {
  border-bottom-color: var(--theme-border-light);
}

:root .component-tags li {
  background-color: #fff;
  border: 1px solid var(--theme-border);
  border-radius: 999px;
  color: var(--theme-text);
  padding: 0 14px;
}

/* ------------------------------------------------------------------ Map search pages */

:root .component-map-aside .results-header {
  font-weight: 700;
  letter-spacing: -0.02em;
}

:root .shs-breadcrumb {
  color: var(--theme-text-secondary);
}

:root .shs-breadcrumb a:hover {
  color: var(--theme-text);
  text-decoration: underline;
}

:root .map-filter-bar .search-box {
  border: 1px solid var(--theme-border);
  border-radius: 999px;
  box-shadow: var(--theme-shadow-small);
  background-color: #fff;
}

:root .hotspot-search-results {
  background-color: #fff;
}

/* Map credits, small, in the bottom left */
:root .component-hotspots-map .leaflet-bottom.leaflet-left {
  display: block;
}

:root .leaflet-control-attribution {
  font-size: 10px;
  line-height: 1.4;
  background-color: rgba(255, 255, 255, 0.8);
}

:root .map-marker-circle {
  background-color: var(--theme-text);
  box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0, 0, 0, 0.35);
}

:root .map-marker-circle:hover,
:root .map-marker-circle.-in {
  background-color: var(--theme-accent) !important;
}

:root .leaflet-bar {
  border: none;
  border-radius: var(--theme-radius-small);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

:root .leaflet-bar a {
  border-bottom-color: var(--theme-border-light);
  color: var(--theme-text);
}

/* Map buttons (Search here, Markers, Heatmap and the mobile ones): white pills with the icon beside the text */
:root .custom-control-container {
  border: none;
  border-radius: 999px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}

:root .map-button,
:root .map-button:hover {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  width: auto;
  padding: 0 14px;
  border: none;
  border-radius: 999px;
  box-shadow: none;
  background-color: #fff;
  color: var(--theme-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

:root .map-button:hover {
  background-color: var(--theme-bg-soft);
}

:root .map-button,
:root .map-button:active {
  transform: none;
  transition: background-color 0.2s;
}

:root .map-button::before {
  position: static;
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  line-height: 0;
  transform: none;
}

/* Markers and Heatmap form one pill with a divider */
@media (min-width: 768px) {
  :root .custom-control-container--markers,
  :root .custom-control-container--markers button {
    border-radius: 999px 0 0 999px;
  }

  :root .custom-control-container--heatmap,
  :root .custom-control-container--heatmap button {
    border-radius: 0 999px 999px 0;
  }

  :root .custom-control-container--heatmap button {
    border-left: 1px solid var(--theme-border-light);
  }

  /* Each half's shadow stops at the join, so they read as one pill */
  :root .custom-control-container--markers {
    clip-path: inset(-12px 0 -12px -12px);
  }

  :root .custom-control-container--heatmap {
    clip-path: inset(-12px -12px -12px 0);
  }

  :root .custom-control-container--search-again {
    margin-right: 8px;
  }

  :root .custom-control-container--heatmap {
    margin-right: 8px;
  }
}

/* The "on" icons in the accent color */
:root .component-hotspots-map:not(.map--hide-markers) .map-button--markers::before {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23ff385c" viewBox="0 0 24 24"><path d="M11.5 9C11.5 7.62 12.62 6.5 14 6.5C15.1 6.5 16.03 7.21 16.37 8.19C16.45 8.45 16.5 8.72 16.5 9C16.5 10.38 15.38 11.5 14 11.5C12.91 11.5 12 10.81 11.64 9.84C11.55 9.580 11.5 9.29 11.5 9M5 9C5 13.5 10.08 19.66 11 20.81L10 22C10 22 3 14.25 3 9C3 5.83 5.11 3.15 8 2.29C6.16 3.94 5 6.330 5 9M14 2C17.86 2 21 5.13 21 9C21 14.25 14 22 14 22C14 22 7 14.250 7 9C7 5.13 10.14 2 14 2M14 4C11.24 4 9 6.24 9 9C9 10 9 12 14 18.71C19 12 19 10 19 9C19 6.24 16.76 4 14 4Z" /></svg>');
}

:root .map--heatmap .map-button--heatmap::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff385c' viewBox='0 0 24 24'%3E%3Cpath d='M17.66 11.2C17.43 10.9 17.15 10.64 16.89 10.38C16.22 9.78 15.46 9.35 14.82 8.72C13.33 7.26 13 4.85 13.95 3C13 3.23 12.17 3.75 11.46 4.32C8.87 6.4 7.85 10.07 9.07 13.22C9.11 13.32 9.15 13.42 9.15 13.55C9.15 13.77 9 13.97 8.8 14.05C8.57 14.15 8.33 14.09 8.14 13.93C8.08 13.88 8.04 13.83 8 13.76C6.87 12.33 6.69 10.28 7.45 8.64C5.78 10 4.87 12.3 5 14.47C5.06 14.97 5.12 15.47 5.290 15.97C5.43 16.57 5.7 17.17 6 17.7C7.08 19.43 8.95 20.67 10.96 20.92C13.1 21.19 15.39 20.8 17.03 19.32C18.86 17.66 19.5 15 18.56 12.72L18.43 12.46C18.22 12 17.66 11.2 17.66 11.2M14.5 17.5C14.22 17.74 13.76 18 13.4 18.1C12.28 18.5 11.16 17.94 10.5 17.28C11.69 17 12.4 16.12 12.61 15.23C12.78 14.43 12.46 13.77 12.33 13C12.21 12.26 12.23 11.63 12.5 10.94C12.69 11.32 12.89 11.7 13.13 12C13.9 13 15.11 13.44 15.37 14.8C15.41 14.94 15.43 15.08 15.43 15.23C15.46 16.05 15.1 16.95 14.5 17.5H14.5Z' /%3E%3C/svg%3E");
}

:root .component-hotspots-map:not(.map--hide-markers) .map-button--markers,
:root .map--heatmap .map-button--heatmap {
  color: var(--theme-accent);
}

/* Phones: round floating buttons, spaced apart, like Airbnb's map controls */
@media (max-width: 767px) {
  :root .leaflet-bottom.leaflet-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    padding: 0 10px 10px 0;
  }

  :root .leaflet-bottom.leaflet-right .custom-control-container {
    margin: 0 !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    overflow: hidden;
  }

  :root .leaflet-bottom.leaflet-right .custom-control-container .button.map-button {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
  }

  :root .leaflet-bottom.leaflet-right .map-button::before {
    width: 18px;
    height: 18px;
  }

  :root .leaflet-bottom.leaflet-right .custom-control-container.-out {
    display: none;
  }
}

/* Hotspot card shown when a map marker is clicked: photos edge to edge, square inner corners, roomier text */
:root .leaflet-popup-content-wrapper {
  padding: 0;
  border-radius: var(--theme-radius);
  box-shadow: var(--theme-shadow);
}

:root .leaflet-popup-content-wrapper .leaflet-popup-content {
  margin: 0;
}

:root .leaflet-popup-content .component-hotspot-card,
:root .leaflet-popup-content .component-hotspot-card .img-container-outer,
:root .leaflet-popup-content .component-hotspot-card .img-container {
  border-radius: 0;
}

:root .leaflet-popup-content-wrapper .component-hotspot-card .content-container {
  padding: 14px 16px 16px;
}

/* ------------------------------------------------------------------ Modals, toasts, footer */

:root .component-modal .modal-container {
  border-radius: var(--theme-radius);
}

:root .component-modal .modal-container.-standard header,
:root .component-modal .modal-container.-standard footer {
  border-color: var(--theme-border-light);
}

:root .toast {
  border-radius: var(--theme-radius);
  border-color: var(--theme-border-light);
  box-shadow: var(--theme-shadow);
}

:root .site-footer {
  background-color: var(--theme-bg-soft);
  border-top: 1px solid var(--theme-border);
  color: var(--theme-text);
}

:root .site-footer a:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------------ Banner images (hotspot, lists, browse, home) */

/* The image scrolls with the banner and its gradient instead of staying fixed behind the page */
:root .bg-img-container {
  overflow: hidden;
}

:root .bg-img-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* A balanced gap under the icon buttons at the bottom of a banner */
:root .hero-container:has(.action-container.-page) .inner {
  padding-bottom: calc(var(--nav-height) + 48px);
}

:root .action-container.-page {
  padding-bottom: 40px;
}

@media (min-width: 768px) {
  :root .hero-container:has(.action-container.-page) .inner {
    padding-bottom: calc(var(--nav-height) + 72px);
  }

  :root .action-container.-page {
    padding-bottom: 64px;
  }
}

/* A small author photo in the banner ("by Photo-Locations") */
:root .hero-container .author-container figure {
  width: 28px;
  height: 28px;
  margin-right: 10px;
  border-width: 1.5px;
}

/* ------------------------------------------------------------------ Hotspot page: breadcrumbs, gallery, map */

/* Breadcrumbs on a bar under the banner (not shown when the hotspot opens as a sheet) */
:root .hotspot-breadcrumb-bar {
  position: relative;
  display: flex;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 13px;
  border-bottom: 1px solid var(--theme-border-light);
}

:root .hotspot-breadcrumb-bar .shs-breadcrumb {
  margin: 0;
  font-size: inherit;
  line-height: 1.6;
}

:root .hotspot-breadcrumb-bar a {
  color: var(--theme-text-secondary);
}

:root .hotspot-breadcrumb-bar a:hover {
  color: var(--theme-text);
  text-decoration: underline;
}

:root .hotspot-breadcrumb-bar .active {
  color: var(--theme-text);
}

:root .page-hotspot .photo-gallery-container {
  padding-bottom: 40px;
}

:root .hotspot-load-more {
  display: flex;
  justify-content: center;
  padding-top: 40px;
}

:root .hotspot-load-more .button {
  height: 48px;
  padding: 0 24px;
  font-size: 15px;
}

:root .hotspot-load-more__count {
  margin-left: 4px;
  font-weight: 400;
  opacity: 0.75;
}

:root .hotspot-description {
  position: relative;
  padding-bottom: 40px;
  background-color: #fff;
}

:root .hotspot-description .sub-heading1 {
  margin-top: 0;
}

/* The map runs the full width of the page */
:root .hotspot-map {
  position: relative;
  /* Keeps Leaflet's own z-indexes (400 and up) inside the map, below the header, menu and dialogs */
  z-index: 0;
  height: min(70vh, 640px);
  min-height: 360px;
  background-color: #e8ecef;
}

:root .hotspot-map .component-hotspot-map {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
}

:root .hotspot-map .leaflet-control-attribution {
  font-size: 10px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 6px 0 0 0;
}

/* Leaflet's normal corner layout (the search map's styles change it, and they're on the page when this opens as a sheet) */
:root .hotspot-map .leaflet-bottom.leaflet-right {
  display: block;
  padding: 0;
}

:root .hotspot-map .leaflet-bottom.leaflet-right .leaflet-control-zoom {
  margin: 0 16px 8px 0;
}

:root .map-layer-toggle {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 500;
  display: flex;
  padding: 3px;
  border-radius: 999px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

:root .map-layer-toggle button {
  height: 32px;
  padding: 0 14px;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--theme-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

:root .map-layer-toggle button:hover {
  background-color: var(--theme-bg-soft);
}

:root .map-layer-toggle button.-active {
  background-color: var(--theme-text);
  color: #fff;
}

/* Photo markers: round thumbnails that grow on hover and open the photo when clicked */
:root .map-marker-photo {
  cursor: pointer;
}

:root .map-marker-photo img,
:root .map-marker-photo:hover img {
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s;
}

:root .map-marker-photo:hover img {
  transform: scale(2);
}

:root .map-photo-popup .leaflet-popup-content-wrapper {
  overflow: hidden;
}

:root .map-photo-popup .leaflet-popup-content {
  width: 240px !important;
  margin: 0;
}

:root .map-photo-popup img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
}

:root .map-photo-popup a {
  display: block;
  padding: 10px 14px 12px;
  font-size: 13px;
  color: var(--theme-text-secondary);
}

:root .map-photo-popup a:hover {
  color: var(--theme-text);
  text-decoration: underline;
}

/* Coordinates and tags, under the map */
:root .hotspot-map-section {
  padding-bottom: 56px;
  background-color: #fff;
}

:root .hotspot-map-info {
  display: grid;
  gap: 20px;
  padding-top: 28px;
}

@media (min-width: 768px) {
  :root .hotspot-map-info {
    grid-template-columns: 260px 1fr;
    gap: 32px;
  }
}

:root .hotspot-map-info .label {
  display: block;
  margin-bottom: 8px;
}

:root .hotspot-map-info .value {
  font-size: 16px;
}

:root .hotspot-directions {
  display: inline-block;
  margin-top: 6px;
}

:root .hotspot-map-info .link + .hotspot-directions::before {
  content: "";
  display: block;
}

/* Light grey bands: "Best for" and "Featured in lists" on the hotspot page, "Featured lists" on the home page */
:root .hotspot-best-for,
:root .component-slider.hotspot-lists {
  --bg-color: #f7f7f7;
  background-color: var(--theme-bg-soft);
}

:root .component-slider.hotspot-nearby {
  background-color: #fff;
}

:root .hotspot-best-for .component-hotspot-types li {
  box-shadow: var(--theme-shadow-small);
}

:root .page-home .component-slider.-theme-dark {
  --bg-color: #f7f7f7;
  background-color: var(--theme-bg-soft);
}

:root .page-home .component-slider.-theme-dark,
:root .page-home .component-slider.-theme-dark + .component-slider {
  border-top: none;
}

/* Bigger section titles on the home page */
:root .page-home .component-slider--header .sub-heading1 {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* ------------------------------------------------------------------ Carousels: arrows on the title row, bigger hotspot cards */

:root .component-slider--header {
  align-items: center;
  gap: 16px;
}

:root .component-slider--arrows {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
  margin-left: auto;
}

:root .component-slider--header .link + .component-slider--arrows {
  margin-left: 0;
}

:root .component-slider--arrows button {
  width: 38px;
  height: 38px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--theme-border);
  border-radius: 50%;
  background-color: #fff;
  color: var(--theme-text);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}

:root .component-slider--arrows button:hover:not(:disabled) {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transform: scale(1.04);
}

:root .component-slider--arrows button:disabled {
  opacity: 0.35;
  cursor: default;
}

:root .component-slider--arrows svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.5;
  overflow: visible;
}

:root.touch .component-slider--arrows {
  display: none;
}

@media (max-width: 767px) {
  :root .component-slider--arrows {
    display: none;
  }
}

/* About 1.6, 2.4 and 3.2 hotspot cards across, rather than 2, 3 and 4 */
@media (min-width: 768px) {
  :root .component-slider--scroll-wrapper.-hotspot-mode .component-slider--container-large {
    grid-auto-columns: calc((100% - var(--gap) * 2) / 1.6);
  }
}

@media (min-width: 1200px) {
  :root .component-slider--scroll-wrapper.-hotspot-mode .component-slider--container-large {
    grid-auto-columns: calc((100% - var(--gap) * 3) / 2.4);
  }
}

@media (min-width: 1500px) {
  :root .component-slider--scroll-wrapper.-hotspot-mode .component-slider--container-large {
    grid-auto-columns: calc((100% - var(--gap) * 4) / 3.2);
  }
}

/* ------------------------------------------------------------------ Search, list and author pages: title block and sticky bar */

/* The title block lines up with the cards below it, with no line in between */
:root .component-map-aside .component-search-head {
  padding-left: var(--nav-padding-x);
  padding-right: var(--nav-padding-x);
  padding-bottom: 8px;
  border: none;
  background-color: #fff;
}

:root .component-map-aside .component-hotspot-cards .results-header {
  font-size: clamp(24px, 2.1vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

:root .component-map-aside .search-excerpt {
  color: var(--theme-text-secondary);
}

:root .component-map-aside.-with-search {
  box-shadow: none;
}

/* Few results: cards keep their size instead of stretching to fill the column */
:root .hotspot-search-results {
  align-content: start;
}

@media (min-width: 768px) {
  /* The bar with the count and search box tucks under the bottom of the title block and shows once that scrolls
     away, as a flat grey bar like Airbnb's (it used to sit below a blank strip, which left a line under the title) */
  :root .component-search-head::before {
    display: none;
  }

  /* The same height as the header row, so the floating search button lines up with the search box */
  :root .map-filter-bar.-bottom {
    box-sizing: border-box;
    height: var(--nav-height);
    margin-top: calc(var(--nav-height) * -1);
    background-color: var(--theme-bg-soft);
    border-bottom: 1px solid var(--theme-border-light);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* After a new search the title block hides, but keeps a white strip for the logo row, which the bar tucks under
     as usual (without it the bar sat behind the logo) */
  :root .component-map-aside .component-search-head.-hidden {
    max-height: var(--nav-height) !important;
    height: var(--nav-height);
  }

  :root .component-search-head.-hidden > * {
    visibility: hidden;
  }

  :root .map-filter-bar.-bottom > span {
    font-size: 15px;
    font-weight: 600;
    text-transform: lowercase;
  }
}

/* ------------------------------------------------------------------ Footers: the Flickr credits on one compact line */

:root .component-disclaimer {
  font-size: 12px;
  font-style: normal;
  line-height: 1.6;
  color: var(--theme-text-secondary);
}

:root .component-disclaimer {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 20px;
}

/* Each sentence wraps as a whole, so lines break between them */
:root .component-disclaimer > :not(link) {
  margin: 0;
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
}

:root .component-disclaimer .link {
  font-weight: 400;
  color: inherit;
}

:root .component-map-aside .disclaimer-outer,
:root .hotspot-disclaimer {
  padding-top: 16px;
  padding-bottom: 16px;
  background-color: #fff;
  border-top: 1px solid var(--theme-border-light);
}

:root .component-map-aside .disclaimer-outer {
  padding-left: var(--nav-padding-x);
  padding-right: var(--nav-padding-x);
}

:root .site-footer {
  padding-top: 14px;
  padding-bottom: 14px;
  font-size: 13px;
}

/* ------------------------------------------------------------------ Browse pages */

/* Dark under the banner, which fades into it */
:root .page-browse .main-content.-dark {
  background-color: #121212;
  color: #fff;
}

:root .page-browse .locations-container {
  padding-bottom: 64px;
}

:root .page-browse .hero-container .shs-breadcrumb,
:root .page-browse .hero-container .shs-breadcrumb a {
  color: rgba(255, 255, 255, 0.85);
}

:root .page-browse .hero-container .shs-breadcrumb a:hover {
  color: #fff;
}

/* Above the place name, a little bigger */
:root .page-browse .hero-container .shs-breadcrumb {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.5;
}

:root .page-browse .hero-container .shs-breadcrumb .active {
  color: #fff;
  opacity: 0.6;
}

:root .page-browse .hero-container .button {
  /* It had gradient text clipped to its background, which is now white */
  -webkit-text-fill-color: currentColor;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 22px;
  border: none;
  border-radius: var(--theme-radius-small);
  background: #fff;
  color: var(--theme-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
}

:root .page-browse .hero-container .button:hover {
  background: var(--theme-bg-soft);
  color: var(--theme-text);
}

/* Places without a photo */
:root .page-browse .component-location-card.-no-image {
  border: none;
  background: linear-gradient(160deg, #3a3a3a 0%, #222 100%);
  transition: background 0.2s, transform 0.2s;
}

:root .page-browse .component-location-card.-no-image:hover {
  background: linear-gradient(160deg, #484848 0%, #2a2a2a 100%);
  transform: translateY(-2px);
}

:root .page-browse .component-location-card .heading {
  color: #fff;
  font-weight: 600;
  letter-spacing: -0.01em;
}

:root .component-slider.browse-top-spots {
  background-color: #fff;
}

/* ------------------------------------------------------------------ List cards: a slow zoom on hover instead of the blur */

:root .background-image {
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (hover: hover) {
  :root a:hover .background-image,
  :root .pseudo-link:hover .background-image {
    filter: none;
    transform: scale(1.05);
  }
}

/* ------------------------------------------------------------------ Hotspot sheet (search, list and author pages) */

:root.hotspot-sheet-open {
  overflow: hidden;
}

:root .hotspot-sheet__backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 105;
  background-color: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

:root .hotspot-sheet__panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 16px;
  z-index: 106;
  overflow: hidden;
  border-radius: 16px 0 0 16px;
  background-color: #fff;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.18);
  /* Makes the panel the frame for anything fixed inside it */
  transform: translateZ(0);
}

@media (min-width: 768px) {
  :root .hotspot-sheet__panel {
    left: 48px;
  }
}

@media (min-width: 1200px) {
  :root .hotspot-sheet__panel {
    left: max(48px, 20vw);
  }
}

:root .hotspot-sheet__scroller {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

:root .hotspot-sheet__back {
  /* Centered in the left margin the page content has once it scrolls (the gallery's side padding) */
  --sheet-gutter: 25px;
  position: absolute;
  top: max(12px, calc((var(--sheet-gutter) - 40px) / 2));
  left: max(12px, calc((var(--sheet-gutter) - 40px) / 2));
  z-index: 10;
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background-color: #fff;
  color: var(--theme-text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.15s;
}

@media (min-width: 768px) {
  :root .hotspot-sheet__back {
    --sheet-gutter: 63px;
  }
}

@media (min-width: 992px) {
  :root .hotspot-sheet__back {
    --sheet-gutter: 80px;
  }
}

@media (min-width: 1200px) {
  :root .hotspot-sheet__back {
    --sheet-gutter: 100px;
  }
}

:root .hotspot-sheet__back:hover {
  transform: scale(1.06);
}

:root .hotspot-sheet__back svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:root .hotspot-sheet__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
}

:root .hotspot-sheet__loading svg {
  width: 56px;
  height: 56px;
}

/* No header in the sheet, so the hero doesn't need the room for it */
:root .hotspot-sheet .hero-container .inner {
  padding-top: 56px;
}

:root .hotspot-sheet-fade-enter-active,
:root .hotspot-sheet-fade-leave-active {
  transition: opacity 0.3s;
}

:root .hotspot-sheet-fade-enter,
:root .hotspot-sheet-fade-leave-to {
  opacity: 0;
}

:root .hotspot-sheet-slide-enter-active {
  transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}

:root .hotspot-sheet-slide-leave-active {
  transition: transform 0.28s cubic-bezier(0.4, 0, 1, 1);
}

:root .hotspot-sheet-slide-enter,
:root .hotspot-sheet-slide-leave-to {
  transform: translateX(100%);
}

/* ------------------------------------------------------------------ Page-to-page transitions */

/* Same-site page loads cross-fade, with the new page rising slightly; the logo and menu stay put */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: 160ms ease-in both theme-page-out;
}

::view-transition-new(root) {
  animation: 280ms cubic-bezier(0.2, 0.7, 0.2, 1) 40ms both theme-page-in;
}

.app-header .logo {
  view-transition-name: site-logo;
}

@keyframes theme-page-out {
  to {
    opacity: 0;
  }
}

@keyframes theme-page-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  :root .hotspot-sheet-slide-enter-active,
  :root .hotspot-sheet-slide-leave-active {
    transition: opacity 0.2s;
  }

  :root .hotspot-sheet-slide-enter,
  :root .hotspot-sheet-slide-leave-to {
    transform: none;
    opacity: 0;
  }
}