* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--stot-font-body);
  color: var(--stot-color-text);
  background:
    radial-gradient(circle at 12% 8%, rgba(10, 103, 194, 0.1), transparent 34%),
    radial-gradient(circle at 88% 4%, rgba(22, 163, 74, 0.08), transparent 32%),
    var(--stot-color-bg);
  line-height: 1.5;
}

a {
  color: var(--stot-color-brand);
}

img {
  max-width: 100%;
  height: auto;
}

.stot-shell {
  /* Read the shell width from the design token (default 1280 px). The
     previous hardcoded 1120px contradicted the token and only "worked"
     because system.css resets the same selector later in the cascade —
     which made it easy to ship a page where main.css won and the
     header rendered 160 px narrower than the rest of the site. */
  max-width: var(--stot-shell-max, 1280px);
  margin: 0 auto;
  padding: 0 var(--stot-space-3);
}

.stot-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--stot-color-border);
  backdrop-filter: blur(10px);
}

.stot-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.92rem 0;
}

/* Legacy compat — kept for any plugin that references this class */
.stot-header__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.stot-brand {
  font-family: var(--stot-font-heading);
  font-weight: 800;
  letter-spacing: 0.01em;
  font-size: 1.15rem;
  text-decoration: none;
  color: var(--stot-color-text);
  display: inline-flex;
  align-items: center;
  min-height: 38px;
}

.stot-brand .custom-logo-link {
  display: inline-flex;
}

.stot-brand .custom-logo {
  max-height: 42px;
  width: auto;
  display: block;
}

.stot-nav ul {
  display: flex;
  list-style: none;
  gap: 0.35rem;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

.stot-nav a {
  display: inline-block;
  text-decoration: none;
  color: var(--stot-color-text);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
  transition: background 0.18s ease, color 0.18s ease;
}

.stot-nav a:hover,
.stot-nav a:focus-visible {
  background: rgba(10, 77, 110, .08);
  color: var(--ocean, #0A4D6E);
  outline: none;
}

/* ── Activities / Get Around dropdown ────────────────────────────────────── */

.stot-nav-has-dd {
  position: relative;
}

/* <details> reset + trigger styling to match regular nav links */
.stot-nav-dd {
  position: static;
}

/* Kill the browser focus ring on the wrapper itself — the old version was
   producing a heavy dark teal halo around the whole "Get Around" pill. */
.stot-nav-dd,
.stot-nav-dd > summary,
.stot-nav-dd > summary:focus,
.stot-nav-dd > summary:focus-visible {
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.stot-nav-dd > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  color: var(--stot-color-text);
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  user-select: none;
  white-space: nowrap;
}

.stot-nav-dd > summary::-webkit-details-marker,
.stot-nav-dd > summary::marker {
  display: none;
}

.stot-nav-dd > summary:hover {
  background: rgba(10, 77, 110, .08);
  color: var(--ocean, #0A4D6E);
}

.stot-nav-dd[open] > summary {
  background: var(--ocean, #0A4D6E);
  color: var(--paper, #FBF8F2);
  box-shadow: 0 4px 12px rgba(10, 77, 110, .22);
}

/* Keyboard focus — visible but on-brand (subtle ocean ring on top of pill). */
.stot-nav-dd > summary:focus-visible {
  box-shadow: 0 0 0 3px rgba(10, 77, 110, .22);
}

.stot-nav-dd__caret {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
  color: currentColor;
}

.stot-nav-dd[open] .stot-nav-dd__caret {
  transform: rotate(180deg);
}

/* Dropdown panel */
.stot-nav-dd__list {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  opacity: 0;
  /* Hidden by default. Visibility flag closes the click-through gap that
     `pointer-events: none` alone left visible. */
  visibility: hidden;
  pointer-events: none;
  z-index: 300;
  background: #fff;
  border: 1px solid rgba(15, 31, 36, .06);
  border-radius: 16px;
  box-shadow:
    0 20px 48px -16px rgba(10, 77, 110, .25),
    0 8px 16px -4px rgba(15, 31, 36, .08);
  padding: 8px;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  margin: 0;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}

/* Tiny upward arrow connecting the panel to the trigger. */
.stot-nav-dd__list::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: #fff;
  border-top: 1px solid rgba(15, 31, 36, .06);
  border-left: 1px solid rgba(15, 31, 36, .06);
  border-top-left-radius: 3px;
}

/* Show the single-column dropdown on parent-li hover, focus-within, OR
   when the <details> is explicitly toggled open. Matches the megamenu
   trigger surface so all dropdowns behave identically. */
.stot-nav-has-dd:hover > .stot-nav-dd > .stot-nav-dd__list,
.stot-nav-has-dd:focus-within > .stot-nav-dd > .stot-nav-dd__list,
.stot-nav-dd[open] > .stot-nav-dd__list,
li.menu-item-has-children:hover > .stot-nav-dd > .stot-nav-dd__list,
li.menu-item-has-children:focus-within > .stot-nav-dd > .stot-nav-dd__list {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear 0s;
}

.stot-nav-dd__list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--stot-color-text);
  transition: background 0.15s ease, color 0.15s ease;
}

.stot-nav-dd__list a:hover,
.stot-nav-dd__list a:focus-visible {
  background: rgba(10, 77, 110, .08);
  color: var(--ocean, #0A4D6E);
  outline: none;
}

/* "Current page" highlight inside the panel — solid ocean pill so the user
   sees where they are without us having to mark it inline. */
.stot-nav-dd__list .current-menu-item > a,
.stot-nav-dd__list .current_page_item > a,
.stot-nav-dd__list a.is-current {
  background: var(--ocean, #0A4D6E);
  color: var(--paper, #FBF8F2);
}
.stot-nav-dd__list .current-menu-item > a .stot-nav__icon,
.stot-nav-dd__list .current_page_item > a .stot-nav__icon,
.stot-nav-dd__list a.is-current .stot-nav__icon {
  opacity: 1;
}

.stot-nav-dd__list .stot-nav__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.75;
}

/* Mobile: stack items below the trigger, no floating panel */
@media (max-width: 960px) {
  .stot-nav-has-dd {
    position: static;
    width: 100%;
  }

  .stot-nav-dd > summary {
    width: 100%;
    justify-content: flex-start;
  }

  .stot-nav-dd__list {
    position: static;
    transform: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0 0 0 20px;
    background: transparent;
    min-width: 0;
  }
}

/* ── Header utility buttons ──────────────────────────────────────────────── */

.stot-signin-btn,
.stot-login-btn {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  color: #ffffff;
  background: #0a67c2;
  border: 1.5px solid #0a67c2;
  transition: background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.stot-signin-btn:hover,
.stot-login-btn:hover {
  background: #0b56a0;
  border-color: #0b56a0;
  color: #fff;
}

.stot-btn-register {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  color: #0a67c2;
  background: transparent;
  border: 1.5px solid #0a67c2;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.stot-btn-register:hover {
  background: #edf3fb;
  color: #0b56a0;
}

body.stot-auth-modal-open {
  overflow: hidden;
}

.stot-auth-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.stot-auth-modal[hidden] {
  display: none !important;
}

.stot-auth-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 31, 36, 0.62);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}

.stot-auth-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 540px);
  max-height: min(90vh, 860px);
  overflow: auto;
  /* Match the brand 14 px card radius used everywhere else, not the
     legacy 24 px which read as a different design language. */
  border-radius: 14px;
  background: var(--paper, #FBF8F2);
  box-shadow: 0 32px 80px -16px rgba(15, 31, 36, 0.36),
              0 4px 12px rgba(15, 31, 36, 0.08);
  padding: 1.5rem 1.5rem 1.25rem;
  font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
  color: var(--ink, #0F1F24);
}

.stot-auth-modal__close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 36px;
  height: 36px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--paper-2, #F3EFE6);
  color: var(--ink-2, #2B3D44);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.stot-auth-modal__close:hover {
  background: var(--ocean-soft, #D3E3EC);
  border-color: var(--ocean, #0A4D6E);
  color: var(--ocean-deep, #063349);
}

.stot-auth-modal__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
  padding: 0.25rem;
  margin: 0.25rem 0 1rem;
  background: var(--paper-2, #F3EFE6);
  border: 1px solid var(--line, #DDD3BE);
  border-radius: 999px;
}

.stot-auth-modal__tab {
  appearance: none;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2, #2B3D44);
  font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.7rem 1rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.stot-auth-modal__tab:hover { color: var(--ink, #0F1F24); }

.stot-auth-modal__tab.is-active {
  background: var(--ocean, #0A4D6E);
  color: var(--paper, #FBF8F2);
}

.stot-auth-modal__panel {
  display: none;
}

.stot-auth-modal__panel.is-active {
  display: block;
}

.stot-auth-modal .ofa-auth-container {
  padding: 0;
  margin: 0;
  min-height: 0;
  display: block;
}

.stot-auth-modal .ofa-auth-card {
  max-width: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0.1rem 0 0;
  background: transparent;
}

.stot-auth-modal .ofa-auth-header,
.stot-auth-modal .ofa-auth-footer {
  display: none;
}

.stot-auth-modal .ofa-social-buttons {
  margin-bottom: 0.6rem;
}

.stot-auth-modal .ofa-social-buttons--signup {
  margin-bottom: 0.85rem;
}

.stot-auth-modal .ofa-form {
  margin: 0;
}

.stot-auth-modal .ofa-field,
.stot-auth-modal .ofa-field-row,
.stot-auth-modal .ofa-divider {
  margin-bottom: 0.9rem;
}

.stot-auth-modal .ofa-inline-note {
  margin: -0.2rem 0 0.8rem;
  color: var(--ink-3, #546870);
  font-size: 0.82rem;
  line-height: 1.45;
}

/* Brand pass for the inner ofa-auth fields and buttons. The
   oftimor-unified-auth plugin renders generic form chrome — we paint
   over it here so the modal feels like part of the SOT site. */
.stot-auth-modal .ofa-field input,
.stot-auth-modal .ofa-field textarea,
.stot-auth-modal .ofa-field select {
  width: 100%;
  min-height: var(--sot-search-input-h, 48px);
  border: 1px solid var(--line, #DDD3BE);
  border-radius: 10px;
  padding: 0.6rem 0.85rem;
  background: #fff;
  color: var(--ink, #0F1F24);
  font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
  font-size: 0.95rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.stot-auth-modal .ofa-field input:focus,
.stot-auth-modal .ofa-field textarea:focus,
.stot-auth-modal .ofa-field select:focus {
  outline: none;
  border-color: var(--ocean, #0A4D6E);
  box-shadow: 0 0 0 3px rgba(10, 77, 110, 0.18);
}
.stot-auth-modal .ofa-field label {
  display: block;
  font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2, #2B3D44);
  margin-bottom: 0.3rem;
}
.stot-auth-modal .ofa-btn,
.stot-auth-modal button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: var(--sot-search-input-h, 48px);
  border: 0;
  border-radius: 10px;
  background: var(--ocean, #0A4D6E);
  color: var(--paper, #FBF8F2);
  font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.stot-auth-modal .ofa-btn:hover,
.stot-auth-modal button[type="submit"]:hover {
  background: var(--ocean-deep, #063349);
}
.stot-auth-modal .ofa-btn--secondary,
.stot-auth-modal .ofa-btn-secondary {
  background: transparent;
  color: var(--ocean, #0A4D6E);
  border: 1px solid var(--line, #DDD3BE);
}
.stot-auth-modal .ofa-btn--secondary:hover,
.stot-auth-modal .ofa-btn-secondary:hover {
  background: var(--paper-2, #F3EFE6);
  border-color: var(--ocean, #0A4D6E);
}
.stot-auth-modal .ofa-social-buttons button,
.stot-auth-modal .ofa-social-btn {
  border-radius: 10px !important;
  border: 1px solid var(--line, #DDD3BE) !important;
  background: #fff !important;
  color: var(--ink, #0F1F24) !important;
  font-family: var(--sans, 'Inter Tight', system-ui, sans-serif) !important;
  font-weight: 600 !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}
.stot-auth-modal .ofa-social-buttons button:hover,
.stot-auth-modal .ofa-social-btn:hover {
  background: var(--paper-2, #F3EFE6) !important;
  border-color: var(--ocean, #0A4D6E) !important;
}
.stot-auth-modal .ofa-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--ink-3, #546870);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.stot-auth-modal .ofa-divider::before,
.stot-auth-modal .ofa-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line, #DDD3BE);
}
.stot-auth-modal a {
  color: var(--ocean, #0A4D6E);
  text-decoration-color: rgba(10, 77, 110, 0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.stot-auth-modal a:hover { color: var(--ocean-deep, #063349); }

.stot-auth-modal .ofa-auth-card .ofa-field:last-of-type {
  margin-bottom: 0.8rem;
}

.stot-auth-modal__footer {
  padding-top: 0.25rem;
  text-align: center;
}

.stot-auth-modal__footer p {
  margin: 0.2rem 0;
  color: var(--ink-3, #546870);
  font-size: 0.78rem;
}

.stot-account-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  overflow: hidden;
  background: #e2e8f0;
  flex-shrink: 0;
}

.stot-account-avatar__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 640px) {
  .stot-auth-modal {
    padding: 0.75rem;
  }

  .stot-auth-modal__dialog {
    width: 100%;
    padding: 1.1rem;
    border-radius: 14px;
  }
}

.stot-contact-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.42rem 0.72rem;
  border-radius: 999px;
  border: 1px solid #cad8ea;
  background: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--stot-color-text, #334155);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.stot-contact-icon svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.stot-contact-icon:hover {
  background: var(--paper-2, #F3EFE6);
  color: var(--ocean-deep, #063349);
  border-color: var(--ocean, #0A4D6E);
}

/* ── Utility dropdowns (currency + language) ─────────────────────────────
   The pill triggers + dropdown panels match the unified search-form
   tokens (12 px radius, line border, paper/ocean accents). Previously
   used generic #cad8ea / #0a67c2 blues that fought the SOT palette. */

.stot-currency,
.stot-lang {
  display: inline-flex;
  align-items: center;
}

.stot-util-dd {
  position: relative;
}

.stot-util-dd > summary {
  list-style: none;
  cursor: pointer;
  border: 1px solid var(--line, #DDD3BE);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink, #0F1F24);
  background: #fff;
  user-select: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.stot-util-dd > summary:hover {
  background: var(--paper-2, #F3EFE6);
  border-color: var(--ocean, #0A4D6E);
}

.stot-util-dd > summary::-webkit-details-marker {
  display: none;
}

.stot-util-dd[open] > summary {
  background: var(--ocean-soft, #D3E3EC);
  border-color: var(--ocean, #0A4D6E);
  color: var(--ocean-deep, #063349);
}

.stot-util-dd__icon svg,
.stot-util-dd__caret svg {
  width: 14px;
  height: 14px;
  display: block;
}

.stot-util-dd__flag {
  font-size: 1em;
  line-height: 1;
}

.stot-util-dd > ul {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--paper, #FBF8F2);
  border: 1px solid var(--line, #DDD3BE);
  border-radius: 14px;
  list-style: none;
  padding: 0.4rem 0;
  margin: 0;
  min-width: 200px;
  box-shadow: 0 24px 48px -16px rgba(15, 31, 36, 0.22),
              0 4px 12px -4px rgba(15, 31, 36, 0.08);
  z-index: 55;
}

.stot-util-dd__item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.55rem 1rem;
  font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink, #0F1F24);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease, color 0.12s ease;
}

.stot-util-dd__link {
  text-decoration: none;
}

.stot-util-dd__item:hover {
  background: var(--ocean-soft, #D3E3EC);
  color: var(--ocean-deep, #063349);
}

.stot-util-dd__item--active {
  font-weight: 700;
  color: var(--ocean, #0A4D6E);
}

.stot-account-dd > summary {
  max-width: 220px;
}

.stot-account-dd > ul {
  min-width: 220px;
}

/* ── Page article + prose typography ─────────────────────────────────── */

.stot-page {
  padding: 2rem 0 3rem;
}

.stot-page-article {
  max-width: 780px;
  padding: 2.5rem 2.75rem;
}

.stot-page-article__title {
  margin: 0 0 1.75rem;
  font-size: 2rem;
  font-weight: 800;
  color: var(--stot-color-text);
  letter-spacing: -0.02em;
  line-height: 1.2;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--stot-color-border);
}

/* Prose — rich text content from the_content() */
.stot-prose {
  color: var(--stot-color-text);
  line-height: 1.75;
  font-size: 0.97rem;
}

.stot-prose p {
  margin: 0 0 1.1rem;
}

.stot-prose h2 {
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--stot-color-dark);
  margin: 2rem 0 0.65rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--stot-color-border);
  letter-spacing: -0.01em;
}

.stot-prose h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--stot-color-dark);
  margin: 1.4rem 0 0.45rem;
}

.stot-prose ul,
.stot-prose ol {
  margin: 0 0 1.1rem 1.25rem;
  padding: 0;
}

.stot-prose li {
  margin-bottom: 0.45rem;
}

.stot-prose a {
  color: var(--stot-color-brand);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.stot-prose a:hover {
  color: var(--stot-color-brand-strong);
}

.stot-prose strong {
  font-weight: 700;
  color: var(--stot-color-dark);
}

.stot-prose .stot-policy-meta {
  color: var(--stot-color-muted);
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
}

.stot-prose .stot-policy-meta strong {
  color: var(--stot-color-muted);
}

@media (max-width: 760px) {
  .stot-page-article {
    padding: 1.5rem 1.25rem;
  }

  .stot-page-article__title {
    font-size: 1.5rem;
  }
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.stot-hero {
  padding: var(--stot-space-6) 0 var(--stot-space-5);
}

.stot-hero__panel {
  background: linear-gradient(145deg, #ffffff 0%, #f1f7ff 100%);
  border: 1px solid #d7e4f2;
  border-radius: var(--stot-radius);
  padding: var(--stot-space-5);
  box-shadow: var(--stot-shadow);
  animation: stotFadeUp 0.8s ease both;
}

.stot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--stot-space-3);
}

.stot-card {
  background: var(--stot-color-surface);
  border: 1px solid var(--stot-color-border);
  border-radius: var(--stot-radius);
  padding: var(--stot-space-4);
  box-shadow: var(--stot-shadow);
}

.stot-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--stot-space-2);
  margin-top: var(--stot-space-3);
}

.stot-btn {
  display: inline-block;
  border-radius: 12px;
  padding: 0.72rem 1.05rem;
  text-decoration: none;
  font-weight: 700;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stot-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(18, 36, 58, 0.14);
}

.stot-btn--primary {
  background: var(--stot-color-brand);
  border: 1px solid var(--stot-color-brand);
  color: #ffffff;
}

.stot-btn--secondary {
  background: #ffffff;
  border: 1px solid #cad8ea;
  color: #2f4763;
}

.stot-page {
  padding: var(--stot-space-5) 0;
}

.stot-footer {
  margin-top: var(--stot-space-6);
  padding: var(--stot-space-5) 0;
  border-top: 1px solid var(--stot-color-border);
  background: rgba(20, 33, 61, 0.04);
}

.stot-search-page {
  padding: 0 0 var(--stot-space-6);
}
.stot-search-page > .stot-shell {
  padding-top: 0;
}

.stot-search-head {
  background: linear-gradient(130deg, #f9fcff 0%, #edf5ff 100%);
  border: 1px solid #d5e3f3;
  border-radius: 18px;
  padding: var(--stot-space-4);
  margin-bottom: var(--stot-space-3);
}

.stot-search-kicker {
  margin: 0 0 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  color: #56708f;
}

.stot-search-head h1 {
  margin: 0 0 0.4rem;
  font-family: var(--stot-font-heading);
  font-size: clamp(1.6rem, 2.2vw, 2.2rem);
}

.stot-search-head p {
  margin: 0;
  color: var(--stot-color-muted);
  font-size: 1.04rem;
}

.stot-search-form {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.8rem;
  background: #fff;
  border: 1px solid #d5e3f3;
  border-radius: 18px;
  padding: var(--stot-space-3);
  box-shadow: var(--stot-shadow);
  margin-bottom: var(--stot-space-3);
  position: sticky;
  top: 63px;
  z-index: 30;
}

.stot-search-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.stot-search-field label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--stot-color-muted);
}

.stot-search-field select,
.stot-search-field input {
  width: 100%;
  border: 1px solid #c8d7e8;
  border-radius: 10px;
  padding: 0.58rem 0.68rem;
  background: #fff;
  color: var(--stot-color-text);
  font-family: var(--stot-font-body);
}

.stot-search-field select:focus,
.stot-search-field input:focus {
  outline: none;
  border-color: #0a67c2;
  box-shadow: 0 0 0 3px rgba(10, 103, 194, 0.14);
}

.stot-search-field--dates {
  grid-column: span 2;
}

.stot-search-actions {
  display: flex;
  align-items: flex-end;
  gap: 0.55rem;
  grid-column: span 1;
}

.stot-search-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--stot-space-3);
  align-items: start;
}

.stot-search-results {
  display: grid;
  gap: var(--stot-space-3);
}

.stot-results-head h2 {
  margin: 0;
  font-family: var(--stot-font-heading);
}

.stot-results-head p {
  margin: 0.2rem 0 0;
  color: var(--stot-color-muted);
}

.stot-listing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--stot-space-3);
}

.stot-listing-card {
  background: #fff;
  border: 1px solid #d6e3f2;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--stot-shadow);
  display: flex;
  flex-direction: column;
}

.stot-listing-cover {
  display: block;
  width: 100%;
  background: #eef3f8;
  position: relative;
}

.stot-verified-ribbon {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(21, 101, 192, 0.92);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  z-index: 2;
  pointer-events: none;
}

.stot-listing-cover img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  display: block;
}

/* Image-less property card cover — was a flat grey "No image yet"
   label that looked broken. Now a soft brand gradient + a friendly
   "Photo coming soon" caption with the SOT camera glyph. The card is
   still listed (visitors should be able to book even without a photo)
   but it visually reads as "intentional" rather than "broken". */
.stot-listing-noimg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 210px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--paper, #FBF8F2);
  background: linear-gradient(135deg,
      var(--ocean-deep, #063349) 0%,
      var(--forest-deep, #133A22) 100%);
  font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
}
.stot-listing-noimg::before {
  content: "";
  width: 28px;
  height: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF8F2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7h4l2-3h6l2 3h4v12H3z'/><circle cx='12' cy='13' r='4'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.85;
}

.stot-listing-body {
  padding: var(--stot-space-3);
  display: grid;
  gap: 0.45rem;
}

.stot-listing-body h3 {
  margin: 0;
  line-height: 1.2;
}

.stot-listing-body h3 a {
  text-decoration: none;
  color: var(--stot-color-text);
}

.stot-listing-body p {
  margin: 0;
  color: var(--stot-color-muted);
  font-size: 0.92rem;
}

.stot-listing-loc {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #0d7069;
}

.stot-listing-meta {
  font-size: 0.82rem;
}

.stot-listing-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.stot-listing-tags span {
  display: inline-block;
  border-radius: 999px;
  padding: 0.3rem 0.55rem;
  background: #edf3fb;
  color: #234465;
  font-size: 0.78rem;
  font-weight: 600;
}

.stot-listing-actions {
  margin-top: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.stot-listing-rating {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: auto;
}

.stot-listing-rating-star {
  color: #f59e0b;
  font-size: 0.9rem;
  line-height: 1;
}

.stot-listing-rating-score {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--stot-color-text);
}

.stot-listing-rating-count {
  font-size: 0.75rem;
  color: var(--stot-color-muted);
}

/* ═══════════════════════════════════════════════════════════════════════
   LISTING CARD V2 — Modern OTA-style search result card
   Rebuilt with photo carousel, favourite heart, amenity icons,
   distance-from-Dili line and a tighter price/CTA footer.
   Lives alongside the v1 .stot-listing-card rules above so any legacy
   templates still working off the basic class are not affected.
   ═══════════════════════════════════════════════════════════════════════ */

.stot-listing-card--v2 {
  background: var(--paper, #FBF8F2);
  border: 1px solid rgba(15, 31, 36, 0.08);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 31, 36, 0.04);
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.stot-listing-card--v2:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -14px rgba(15, 31, 36, 0.28);
}

.stot-listing-card--v2 .stot-listing-cover {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
  background: linear-gradient(135deg, var(--ocean-deep, #063349) 0%, var(--forest-deep, #133A22) 100%);
  overflow: hidden;
}

.stot-listing-card--v2 .stot-listing-photo-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.stot-listing-card--v2 .stot-listing-photos {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.stot-listing-card--v2 .stot-listing-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.2s ease;
}

/* Override the v1 `.stot-listing-cover img { height: 210px }` rule so the
   image fills the aspect-ratio frame edge-to-edge. */
.stot-listing-card--v2 .stot-listing-cover img {
  height: 100%;
}

.stot-listing-card--v2 .stot-listing-noimg {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--paper, #FBF8F2);
}

/* Photo nav arrows — semi-transparent paper circles, ink chevron.
   Always visible on touch devices, only on hover for pointer-fine. */
.stot-listing-photo-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 0;
  background: rgba(251, 248, 242, 0.88);
  color: var(--ink, #0F1F24);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.16s ease, background 0.16s ease, transform 0.16s ease;
  box-shadow: 0 2px 6px rgba(15, 31, 36, 0.18);
  padding: 0;
}

.stot-listing-photo-nav:hover {
  background: var(--paper, #FBF8F2);
}

.stot-listing-photo-nav:focus-visible {
  opacity: 1;
  outline: 2px solid var(--ocean, #0A4D6E);
  outline-offset: 2px;
}

.stot-listing-photo-nav--prev { left: 10px; }
.stot-listing-photo-nav--next { right: 10px; }

.stot-listing-card--v2:hover .stot-listing-photo-nav,
.stot-listing-card--v2:focus-within .stot-listing-photo-nav {
  opacity: 1;
}

@media (hover: none) {
  .stot-listing-photo-nav { opacity: 1; }
}

.stot-listing-photo-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 3;
  pointer-events: none;
}

.stot-listing-photo-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(251, 248, 242, 0.55);
  transition: background 0.15s ease, transform 0.15s ease;
}

.stot-listing-photo-dot.is-active {
  background: var(--paper, #FBF8F2);
  transform: scale(1.25);
}

/* Verified ribbon — top-left, forest pill. */
.stot-listing-card--v2 .stot-listing-verified {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: var(--forest-deep, #133A22);
  color: var(--paper, #FBF8F2);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 9px;
  border-radius: 8px;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(15, 31, 36, 0.18);
}

/* Sold-out badge — shown only when ?include_sold_out=1 surfaces a
   zero-availability property (QA / admin view). Sits below the verified
   pill on the left edge; sandy-orange so it doesn't compete with the
   ocean/forest brand colours used elsewhere on the card. */
.stot-listing-card--v2 .stot-listing-soldout {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: rgba(15, 31, 36, 0.78);
  color: var(--paper, #FBF8F2);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 9px;
  border-radius: 8px;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(15, 31, 36, 0.18);
}
/* When a card is both verified + sold out, stack them — sold out below
   verified, never overlapping. */
.stot-listing-card--v2 .stot-listing-verified + .stot-listing-soldout {
  top: 40px;
}

/* Favourite heart — top-right. Outline by default, ocean-filled when pressed. */
.stot-listing-fav {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 0;
  background: rgba(251, 248, 242, 0.92);
  color: var(--ink, #0F1F24);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 2px 6px rgba(15, 31, 36, 0.18);
  transition: background 0.16s ease, color 0.16s ease, transform 0.12s ease;
}

.stot-listing-fav:hover {
  background: var(--paper, #FBF8F2);
  transform: scale(1.06);
}

.stot-listing-fav:focus-visible {
  outline: 2px solid var(--ocean, #0A4D6E);
  outline-offset: 2px;
}

.stot-listing-fav svg {
  display: block;
}

.stot-listing-fav[aria-pressed="true"] {
  background: var(--paper, #FBF8F2);
  color: var(--ocean, #0A4D6E);
}

.stot-listing-fav[aria-pressed="true"] svg {
  fill: var(--ocean, #0A4D6E);
  stroke: var(--ocean, #0A4D6E);
}

/* Property type chip — bottom-left over photo. */
.stot-listing-type-chip {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 2;
  background: var(--paper, #FBF8F2);
  color: var(--ocean, #0A4D6E);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 6px rgba(15, 31, 36, 0.14);
  pointer-events: none;
}

/* ── Body ─────────────────────────────────────────────────────────────── */
.stot-listing-card--v2 .stot-listing-body {
  padding: 0.9rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.stot-listing-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.stot-listing-row--top {
  align-items: baseline;
}

.stot-listing-card--v2 .stot-listing-loc {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3, #546870);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70%;
}

.stot-listing-card--v2 .stot-listing-rating {
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  font-size: 0.82rem;
  white-space: nowrap;
}

.stot-listing-rating__stars {
  color: #C28E1B;
  font-weight: 700;
}

.stot-listing-rating__count {
  color: var(--ink-3, #546870);
  font-size: 0.78rem;
}

.stot-listing-title {
  margin: 0;
  font-family: var(--serif, 'Fraunces', Georgia, serif);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.25;
  color: var(--ink, #0F1F24);
  /* Two-line clamp for long property names. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.stot-listing-title a {
  color: inherit;
  text-decoration: none;
}

.stot-listing-title a:hover {
  color: var(--ocean, #0A4D6E);
}

.stot-listing-card--v2 .stot-listing-headline {
  margin: 0;
  font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--ink-2, #2B3D44);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Amenity icon row — small paper-2 circles, ocean stroke. */
.stot-listing-amenities {
  list-style: none;
  margin: 0.15rem 0 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.stot-listing-amenities li {
  display: flex;
  align-items: center;
}

.stot-listing-amenity {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--paper-2, #F3EFE6);
  color: var(--ocean, #0A4D6E);
}

.stot-listing-amenity svg {
  display: block;
}

.stot-listing-amenities__more {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ink-3, #546870);
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--paper-2, #F3EFE6);
}

.stot-listing-distance,
.stot-listing-rooms {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ink-3, #546870);
}

.stot-listing-rooms {
  font-weight: 600;
  color: var(--forest, #1F5A36);
}

/* Bottom row: price + CTA, baseline aligned. */
.stot-listing-row--bottom {
  margin-top: 0.35rem;
  align-items: flex-end;
  gap: 0.75rem;
}

.stot-listing-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem;
  min-width: 0;
}

.stot-listing-price__label {
  font-size: 0.75rem;
  color: var(--ink-3, #546870);
  font-weight: 500;
}

.stot-listing-price strong {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--ink, #0F1F24);
  letter-spacing: -0.01em;
}

.stot-listing-price__unit {
  font-size: 0.78rem;
  color: var(--ink-2, #2B3D44);
}

.stot-listing-price__total {
  width: 100%;
  font-size: 0.74rem;
  color: var(--ink-3, #546870);
  margin-top: 0.1rem;
}

.stot-listing-price__total strong {
  font-size: 0.82rem;
  color: var(--ink, #0F1F24);
  font-weight: 700;
}

.stot-listing-price__est {
  font-style: italic;
  margin-left: 0.15rem;
  color: var(--ink-3, #546870);
}

.stot-listing-price--noprice .stot-listing-price__label {
  font-size: 0.82rem;
  color: var(--ink-2, #2B3D44);
  font-weight: 600;
}

.stot-listing-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ocean, #0A4D6E);
  color: var(--paper, #FBF8F2);
  font-weight: 700;
  font-size: 0.88rem;
  padding: 0.55rem 1rem;
  border-radius: 10px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.12s ease;
  flex-shrink: 0;
}

.stot-listing-cta:hover {
  background: var(--ocean-deep, #063349);
  color: var(--paper, #FBF8F2);
}

.stot-listing-cta:focus-visible {
  outline: 2px solid var(--ocean, #0A4D6E);
  outline-offset: 2px;
}

/* ── Responsive tweaks for v2 cards ───────────────────────────────────── */
@media (max-width: 760px) {
  .stot-listing-card--v2 .stot-listing-cover {
    /* Keep ratio consistent on mobile too; original .stot-listing-cover img
       height override is no longer relevant for v2. */
    aspect-ratio: 4 / 3;
  }
  .stot-listing-card--v2 .stot-listing-body {
    padding: 0.8rem 0.9rem 0.9rem;
  }
  .stot-listing-title {
    font-size: 1.05rem;
  }
  .stot-listing-row--bottom {
    flex-wrap: wrap;
  }
  .stot-listing-cta {
    width: 100%;
    margin-top: 0.25rem;
  }
}

/* Price preview block on search result cards */
.stot-price-preview {
  background: linear-gradient(135deg, #edf5ff 0%, #e6f0fb 100%);
  border: 1px solid #c8ddf5;
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
  display: grid;
  gap: 0.18rem;
}

.stot-price-row {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.stot-price-label {
  font-size: 0.75rem;
  color: var(--stot-color-muted);
  font-weight: 500;
}

.stot-price-val {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--stot-color-navy, #0d2b4e);
  letter-spacing: -0.01em;
}

.stot-price-unit {
  font-size: 0.73rem;
  color: var(--stot-color-muted);
  font-weight: 500;
}

.stot-price-total {
  font-size: 0.82rem;
  color: var(--stot-color-text);
  font-weight: 500;
}

.stot-price-total strong {
  color: var(--stot-color-navy, #0d2b4e);
  font-weight: 800;
}

.stot-price-est {
  font-size: 0.7rem;
  color: var(--stot-color-muted);
  font-style: italic;
  margin-left: 0.15rem;
}

.stot-price-dates {
  font-size: 0.72rem;
  color: var(--stot-color-muted);
  margin-top: 0.05rem;
}

.stot-map-column {
  position: sticky;
  top: 162px;
}

.stot-search-map {
  border-radius: 18px;
  overflow: hidden;
  min-height: 700px;
  border: 0;
  box-shadow: var(--stot-shadow);
  background: #dfe8f4;
}

.stot-search-map-empty {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1rem;
}

.stot-search-map-empty p {
  margin: 0;
  max-width: 260px;
  color: #5e7187;
}

.stot-map-load-note {
  margin: 0;
  padding: 1rem;
  color: #556a84;
  font-size: 0.9rem;
}

@keyframes stotFadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 768px) {
  .stot-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .stot-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .stot-search-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    top: 63px;
  }

  .stot-search-actions {
    grid-column: span 1;
  }

  .stot-listing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .stot-search-form {
    grid-template-columns: 1fr;
    top: 63px;
  }

  .stot-search-actions {
    grid-column: span 1;
  }

  .stot-listing-grid {
    grid-template-columns: 1fr;
  }

  .stot-listing-cover img,
  .stot-listing-noimg {
    height: 190px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════ */

.stot-footer {
  background: #0c1e30;
  color: #c8d8e8;
  font-size: 0.875rem;
  line-height: 1.5;
  margin-top: auto;
}

/* ── Top band ─────────────────────────────────────────────────────────── */

.stot-footer__top {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2rem 0 1.5rem;
}

.stot-footer__top-inner {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
}

.stot-footer__brand {
  flex: 1 1 280px;
}

.stot-footer__brand .custom-logo-link img,
.stot-footer__brand .custom-logo {
  max-height: 44px;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.stot-footer__logo-link {
  display: inline-block;
}

.stot-footer__logo {
  max-height: 54px;
  width: auto;
  display: block;
}

.stot-footer__site-name {
  font-weight: 800;
  font-size: 1.1rem;
  color: #fff;
  letter-spacing: -0.01em;
}

.stot-footer__tagline {
  margin: 0.5rem 0 0;
  color: #7fa3bf;
  font-size: 0.82rem;
  max-width: 360px;
}

.stot-footer__social {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.stot-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #c8d8e8;
  transition: background 0.15s ease, color 0.15s ease;
  text-decoration: none;
}

.stot-footer__social-link:hover {
  background: #1768cf;
  color: #fff;
}

.stot-footer__social-link svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* ── Explore section ─────────────────────────────────────────────────── */

.stot-footer__explore-band {
  padding: 2rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.stot-footer__section-title {
  margin: 0 0 1.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #7fa3bf;
}

.stot-footer__explore-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem 2rem;
}

.stot-footer__group-title {
  margin: 0 0 0.65rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #9bbdd4;
}

.stot-footer__link-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.stot-footer__link-list li {
  margin-bottom: 0.3rem;
}

.stot-footer__link-list a {
  color: #c8d8e8;
  text-decoration: none;
  font-size: 0.84rem;
  transition: color 0.12s ease;
}

.stot-footer__link-list a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* Wrapping tag-cloud style for municipalities */
.stot-footer__link-list--wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
}

.stot-footer__link-list--wrap li {
  margin-bottom: 0;
}

.stot-footer__link-list--wrap a {
  display: inline-block;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 0.18rem 0.7rem;
  font-size: 0.8rem;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.stot-footer__link-list--wrap a:hover {
  background: #1768cf;
  border-color: #1768cf;
  color: #fff;
  text-decoration: none;
}

/* ── Main link columns ───────────────────────────────────────────────── */

.stot-footer__main {
  padding: 2rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.stot-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem 2rem;
}

.stot-footer__col-title {
  margin: 0 0 0.85rem;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #ffffff;
}

/* ── Bottom bar ─────────────────────────────────────────────────────── */

.stot-footer__bar {
  padding: 1.25rem 0;
}

.stot-footer__bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}

.stot-footer__bar-terms,
.stot-footer__bar-terms ul,
ul.stot-footer__bar-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.2rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.stot-footer__bar-terms li,
ul.stot-footer__bar-menu li {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

/* Bullet separator between items — keeps the row scannable without the
   browser-default disc markers that made the legal column look like a
   bulleted to-do list. */
.stot-footer__bar-terms li + li::before,
ul.stot-footer__bar-menu li + li::before {
  content: "·";
  position: absolute;
  left: -0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: currentColor;
  opacity: 0.5;
  pointer-events: none;
}

.stot-footer__bar-terms a {
  color: #7fa3bf;
  text-decoration: none;
  font-size: 0.78rem;
  transition: color 0.12s ease;
}

.stot-footer__bar-terms a:hover {
  color: #c8d8e8;
}

.stot-footer__bar-copy {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: #546e82;
  font-size: 0.78rem;
  flex-wrap: wrap;
}

.stot-footer__currency {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 0.18rem 0.65rem;
  font-size: 0.78rem;
  color: #9bbdd4;
}

.stot-footer__currency svg {
  width: 13px;
  height: 13px;
  display: block;
}

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .stot-footer__explore-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .stot-footer__explore-grid,
  .stot-footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stot-footer__bar-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .stot-footer__explore-grid,
  .stot-footer__cols {
    grid-template-columns: 1fr;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   Provider Listing Pages (Tours, Sport, Spa, Museum, Courses)
   ═══════════════════════════════════════════════════════════════════════ */

.stot-provider-listing {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
}

/* Hero */
.stot-provider-hero {
  padding: 3rem 0 2rem;
}
.stot-provider-hero__back {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .875rem;
  color: var(--stot-text-muted, #6b7280);
  text-decoration: none;
  margin-bottom: 1.25rem;
}
.stot-provider-hero__back:hover { color: var(--stot-primary, #1d4ed8); }
.stot-provider-hero__back svg { flex-shrink: 0; }
.stot-provider-hero h1 {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 .5rem;
  color: var(--stot-heading, #111827);
}
.stot-provider-hero p {
  font-size: 1rem;
  color: var(--stot-text-muted, #6b7280);
  max-width: 640px;
  margin: 0;
}

/* Filter bar */
.stot-provider-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 2rem;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  align-items: flex-end;
}
.stot-provider-filters label {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-size: .8125rem;
  font-weight: 600;
  color: #374151;
  flex: 1 1 160px;
}
.stot-provider-filters select {
  padding: .5rem .75rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: .875rem;
  background: #fff;
  color: #111827;
}
.stot-provider-filters button {
  padding: .55rem 1.25rem;
  background: var(--stot-primary, #1d4ed8);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  align-self: flex-end;
}
.stot-provider-filters button:hover { opacity: .88; }

/* Layout: grid + map */
.stot-provider-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 1.5rem;
  align-items: start;
}

/* Cards grid */
.stot-provider-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* Provider card */
.stot-prov-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .18s, transform .18s;
}
.stot-prov-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
  transform: translateY(-2px);
}
.stot-prov-card__img {
  width: 120px;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}
.stot-prov-card__img-placeholder {
  width: 120px;
  aspect-ratio: 1;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d1d5db;
}
.stot-prov-card__body {
  padding: .875rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.stot-prov-card__title {
  font-size: .9375rem;
  font-weight: 700;
  color: #111827;
  margin: 0;
}
.stot-prov-card__location {
  font-size: .8125rem;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: .25rem;
}
.stot-prov-card__headline {
  font-size: .8125rem;
  color: #374151;
  margin: .125rem 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.stot-prov-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: .375rem;
}
.stot-prov-card__price {
  font-size: .875rem;
  font-weight: 700;
  color: var(--stot-primary, #1d4ed8);
}
.stot-prov-card__price span {
  font-size: .75rem;
  font-weight: 400;
  color: #9ca3af;
}
.stot-prov-card__rating {
  font-size: .8125rem;
  color: #f59e0b;
  display: flex;
  align-items: center;
  gap: .2rem;
}
.stot-prov-card__btn {
  display: inline-block;
  padding: .35rem .875rem;
  background: var(--stot-primary, #1d4ed8);
  color: #fff !important;
  border-radius: 8px;
  font-size: .8125rem;
  font-weight: 600;
  text-decoration: none;
}
.stot-prov-card__btn:hover { opacity: .88; }

/* Empty state */
.stot-provider-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: #6b7280;
  grid-column: 1 / -1;
}
.stot-provider-empty svg { margin: 0 auto .75rem; display: block; opacity: .35; }

/* Map */
.stot-provider-map-wrap {
  position: sticky;
  top: 80px;
}
.stot-provider-map {
  width: 100%;
  height: 520px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
}

/* ═══════════════════════════════════════════════════════════════════════
   Activities Hub Page
   ═══════════════════════════════════════════════════════════════════════ */

.stot-activities-hub__hero {
  background:
    linear-gradient(135deg,
      var(--ocean-deep, #063349) 0%,
      var(--ocean, #0A4D6E) 55%,
      var(--forest-deep, #133A22) 100%);
  color: var(--paper, #FBF8F2);
  padding: clamp(3rem, 7vw, 5rem) 1.5rem clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
  font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
}
.stot-activities-hub__hero-inner {
  max-width: 640px;
  margin: 0 auto;
}
.stot-activities-hub__hero h1 {
  font-family: var(--serif, 'Fraunces', Georgia, serif);
  font-size: clamp(2rem, 4.5vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 .85rem;
}
.stot-activities-hub__hero p {
  font-size: 1.0625rem;
  line-height: 1.55;
  opacity: .88;
  margin: 0;
}

.stot-activities-hub__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  max-width: 900px;
  margin: 2.5rem auto 4rem;
  padding: 0 1.5rem;
}

.stot-act-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--line, #DDD3BE);
  border-top: 4px solid var(--act-color, var(--ocean, #0A4D6E));
  border-radius: var(--r-lg, 16px);
  background: var(--paper, #FBF8F2);
  text-decoration: none;
  color: inherit;
  font-family: var(--sans, 'Inter Tight', system-ui, sans-serif);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.stot-act-card:hover,
.stot-act-card:focus-visible {
  box-shadow: var(--shadow-card, 0 6px 24px rgba(15,31,36,.12));
  transform: translateY(-3px);
  border-color: var(--act-color, var(--ocean, #0A4D6E));
}
.stot-act-card:focus-visible {
  outline: 2px solid var(--act-color, var(--ocean, #0A4D6E));
  outline-offset: 3px;
}
.stot-act-card__icon {
  width: 48px;
  height: 48px;
  background: var(--act-color-soft, var(--ocean-soft, #D3E3EC));
  border-radius: var(--r-md, 10px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--act-color, var(--ocean, #0A4D6E));
}
.stot-act-card__icon svg { width: 24px; height: 24px; }
.stot-act-card__body { flex: 1; }
.stot-act-card__body h2 {
  font-family: var(--serif, 'Fraunces', Georgia, serif);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 .35rem;
  color: var(--ink, #0F1F24);
}
.stot-act-card__body p {
  font-size: .9rem;
  color: var(--ink-3, #546870);
  margin: 0 0 .65rem;
  line-height: 1.5;
}
.stot-act-card__count {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--act-color, var(--ocean, #0A4D6E));
  background: var(--act-color-soft, var(--ocean-soft, #D3E3EC));
  padding: .25rem .65rem;
  border-radius: 999px;
}
.stot-act-card__arrow {
  color: var(--ink-4, #8B9CA3);
  align-self: center;
  flex-shrink: 0;
  transition: color .15s ease, transform .15s ease;
}
.stot-act-card:hover .stot-act-card__arrow,
.stot-act-card:focus-visible .stot-act-card__arrow {
  color: var(--act-color, var(--ocean, #0A4D6E));
  transform: translateX(3px);
}

/* Responsive */
@media (max-width: 760px) {
  .stot-provider-layout {
    grid-template-columns: 1fr;
  }
  .stot-provider-map-wrap {
    position: static;
  }
  .stot-provider-map {
    height: 300px;
  }
  .stot-activities-hub__grid {
    grid-template-columns: 1fr;
  }
  .stot-activities-hub__hero h1 {
    font-size: 1.75rem;
  }
}

@media (max-width: 480px) {
  .stot-prov-card {
    grid-template-columns: 90px 1fr;
  }
  .stot-prov-card__img,
  .stot-prov-card__img-placeholder {
    width: 90px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Info Grid — type-specific details block on property profile
   ═══════════════════════════════════════════════════════════════════════ */

.sot-info-grid-card h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 0 0 1rem;
  color: #111827;
}
.sot-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .5rem 1.25rem;
  margin: 0;
}
.sot-info-grid dt {
  font-size: .75rem;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0;
}
.sot-info-grid dd {
  font-size: .9375rem;
  color: #111827;
  font-weight: 500;
  margin: 0 0 .5rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   Includes / Excludes checklist
   ═══════════════════════════════════════════════════════════════════════ */

.sot-includes-card h4,
.sot-excludes-block h4 {
  font-size: .9375rem;
  font-weight: 700;
  margin: 0 0 .625rem;
  color: #111827;
}
.sot-includes-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
@media (max-width: 600px) {
  .sot-includes-card { grid-template-columns: 1fr; }
}
.sot-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .375rem;
}
.sot-checklist li {
  font-size: .9rem;
  color: #374151;
  padding-left: 1.5rem;
  position: relative;
  line-height: 1.5;
}
.sot-checklist li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #22c55e;
  font-weight: 700;
}
.sot-checklist--no li::before {
  content: '✕';
  color: #ef4444;
}

/* ═══════════════════════════════════════════════════════════════════════
   Social / contact links bar
   ═══════════════════════════════════════════════════════════════════════ */

.sot-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.25rem;
}
.sot-social-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .875rem;
  border-radius: 24px;
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
  transition: opacity .15s, transform .15s;
}
.sot-social-link:hover { opacity: .85; transform: translateY(-1px); }
.sot-social-link--email { background: #f3f4f6; color: #374151; }
.sot-social-link--web   { background: #eff6ff; color: #1d4ed8; }
.sot-social-link--ig    { background: #fdf2f8; color: #9d174d; }
.sot-social-link--fb    { background: #eff6ff; color: #1d4ed8; }

/* ═══════════════════════════════════════════════════════════════════════
   Guest Reviews — summary, category bars, review list, submission form
   ═══════════════════════════════════════════════════════════════════════ */

.sot-reviews-card {
  margin-top: 1.5rem;
}
.sot-reviews-head h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 0 0 .875rem;
  color: #111827;
}
.sot-reviews-summary {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin-bottom: .875rem;
}
.sot-reviews-avg {
  font-size: 2.25rem;
  font-weight: 800;
  color: #111827;
  line-height: 1;
}
.sot-reviews-stars {
  font-size: 1.25rem;
  color: #f59e0b;
  line-height: 1;
}
.sot-reviews-count {
  font-size: .875rem;
  color: #6b7280;
}
.sot-reviews-none {
  font-size: .9rem;
  color: #9ca3af;
  margin: 0 0 .875rem;
}

/* Category bar breakdown */
.sot-reviews-cats {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  margin-bottom: 1.25rem;
}
.sot-reviews-cat {
  display: grid;
  grid-template-columns: 110px 1fr 36px;
  align-items: center;
  gap: .5rem;
}
.sot-reviews-cat-label {
  font-size: .8125rem;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sot-reviews-cat-bar {
  height: 6px;
  background: #e5e7eb;
  border-radius: 99px;
  overflow: hidden;
}
.sot-reviews-cat-fill {
  height: 100%;
  background: var(--stot-primary, #1d4ed8);
  border-radius: 99px;
  transition: width .3s;
}
.sot-reviews-cat-score {
  font-size: .8125rem;
  font-weight: 600;
  color: #111827;
  text-align: right;
}

/* Review items */
.sot-reviews-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.sot-review-item {
  border-top: 1px solid #f3f4f6;
  padding-top: .875rem;
}
.sot-review-meta {
  display: flex;
  align-items: center;
  gap: .625rem;
  flex-wrap: wrap;
  margin-bottom: .375rem;
}
.sot-review-meta strong {
  font-size: .9375rem;
  color: #111827;
}
.sot-review-date {
  font-size: .8125rem;
  color: #9ca3af;
}
.sot-review-score {
  font-size: .875rem;
  color: #f59e0b;
  font-weight: 600;
  margin-left: auto;
}
.sot-review-text {
  font-size: .9rem;
  color: #374151;
  line-height: 1.6;
  margin: 0 0 .375rem;
}
.sot-review-response {
  background: #f9fafb;
  border-left: 3px solid var(--stot-primary, #1d4ed8);
  padding: .625rem .875rem;
  border-radius: 0 8px 8px 0;
  font-size: .875rem;
  color: #4b5563;
  margin-top: .375rem;
}

/* Review submission form */
.sot-review-form-wrap {
  border-top: 1px solid #e5e7eb;
  padding-top: 1.25rem;
  margin-top: .5rem;
}
.sot-review-form-wrap h4 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 1rem;
  color: #111827;
}
.sot-review-rating-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .625rem;
  flex-wrap: wrap;
}
.sot-review-rating-row label {
  font-size: .875rem;
  color: #374151;
  min-width: 120px;
  font-weight: 500;
}
.sot-star-rating {
  display: flex;
  gap: .125rem;
}
.sot-star {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  color: #d1d5db;
  padding: 0 .1rem;
  line-height: 1;
  transition: color .1s, transform .1s;
}
.sot-star:hover,
.sot-star.active {
  color: #f59e0b;
  transform: scale(1.15);
}
.sot-review-form .sot-form-row {
  margin-bottom: 1rem;
}
.sot-review-form .sot-form-row label {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: .375rem;
}
.sot-review-form textarea {
  width: 100%;
  padding: .625rem .75rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: .9rem;
  resize: vertical;
  font-family: inherit;
  color: #111827;
}
.sot-review-form textarea:focus {
  outline: none;
  border-color: var(--stot-primary, #1d4ed8);
  box-shadow: 0 0 0 3px rgba(29,78,216,.12);
}
.sot-review-form-msg {
  margin-top: .75rem;
  padding: .625rem .875rem;
  border-radius: 8px;
  font-size: .9rem;
}
.sot-review-form-msg.is-success {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}
.sot-review-form-msg.is-error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

/* Responsive adjustments for reviews */
@media (max-width: 500px) {
  .sot-reviews-cat {
    grid-template-columns: 90px 1fr 32px;
  }
  .sot-review-rating-row {
    flex-direction: column;
    align-items: flex-start;
    gap: .375rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Safety Waiver Block (sport type)
   ═══════════════════════════════════════════════════════════════════════ */

.sot-waiver-block {
  border: 2px solid #fef3c7;
  background: #fffbeb;
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}
.sot-waiver-block h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #92400e;
  margin: 0 0 .75rem;
}
.sot-waiver-text {
  max-height: 140px;
  overflow-y: auto;
  font-size: .875rem;
  color: #78350f;
  line-height: 1.6;
  background: #fff;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: .75rem 1rem;
  margin-bottom: .875rem;
}
.sot-waiver-fields label {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .9rem;
  color: #374151;
  cursor: pointer;
}
.sot-waiver-fields input[type="checkbox"] {
  margin-top: .2rem;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: #d97706;
}
.sot-waiver-note {
  font-size: .8125rem;
  color: #9ca3af;
  margin: .625rem 0 0;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════
   Health Questionnaire Block (spa type)
   ═══════════════════════════════════════════════════════════════════════ */

.sot-health-q-block {
  border: 2px solid #d1fae5;
  background: #f0fdf4;
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}
.sot-health-q-block h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #065f46;
  margin: 0 0 .375rem;
}
.sot-health-q-intro {
  font-size: .875rem;
  color: #047857;
  margin: 0 0 1rem;
}
.sot-hq-row {
  margin-bottom: .75rem;
}
.sot-hq-row > label {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: #374151;
  font-weight: 500;
  cursor: pointer;
}
.sot-hq-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #059669;
  flex-shrink: 0;
}
.sot-hq-detail {
  margin: .5rem 0 0 1.75rem;
}
.sot-hq-detail textarea,
.sot-hq-detail input[type="text"],
.sot-hq-detail input[type="number"] {
  width: 100%;
  padding: .5rem .75rem;
  border: 1px solid #a7f3d0;
  border-radius: 8px;
  font-size: .875rem;
  background: #fff;
  color: #111827;
  font-family: inherit;
}
.sot-hq-row select {
  padding: .4rem .75rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: .875rem;
  background: #fff;
  color: #111827;
  margin-top: .25rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   Floor Plan / Table Map Canvas
   ═══════════════════════════════════════════════════════════════════════ */

.sot-floor-plan-canvas {
  position: relative;
  width: 700px;
  max-width: 100%;
  height: 500px;
  background: #f9fafb;
  border: 2px dashed #d1d5db;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.sot-table-tile {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #dbeafe;
  border: 2px solid #3b82f6;
  border-radius: 8px;
  cursor: move;
  font-size: .8rem;
  font-weight: 600;
  color: #1d4ed8;
  user-select: none;
  transition: box-shadow .15s;
}
.sot-table-tile:hover { box-shadow: 0 4px 12px rgba(59,130,246,.3); }
.sot-table-tile.is-selected {
  border-color: #1d4ed8;
  background: #bfdbfe;
  box-shadow: 0 0 0 3px rgba(59,130,246,.25);
}
.sot-table-tile.is-reserved {
  background: #fee2e2;
  border-color: #ef4444;
  color: #b91c1c;
}
.sot-table-tile.is-free {
  background: #dcfce7;
  border-color: #22c55e;
  color: #15803d;
}
.sot-table-tile span { font-size: .7rem; font-weight: 400; }

/* ═══════════════════════════════════════════════════════════════════════
   Group Pricing Table (museum/attraction frontend)
   ═══════════════════════════════════════════════════════════════════════ */

.sot-group-pricing {
  margin-top: .875rem;
}
.sot-group-pricing h5 {
  font-size: .9375rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 .625rem;
}
.sot-pricing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}
.sot-pricing-table th {
  background: #f3f4f6;
  font-weight: 600;
  color: #374151;
  padding: .5rem .75rem;
  text-align: left;
  border-bottom: 2px solid #e5e7eb;
}
.sot-pricing-table td {
  padding: .5rem .75rem;
  border-bottom: 1px solid #f3f4f6;
  color: #374151;
}
.sot-pricing-table tr:last-child td { border-bottom: none; }
.sot-pricing-table tr:hover td { background: #f9fafb; }

/* ═══════════════════════════════════════════════════════════════════════
   iCal Export admin panel
   ═══════════════════════════════════════════════════════════════════════ */

.sot-ical-panel {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 600px;
}
.sot-ical-panel h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 .5rem;
  color: #111827;
}
.sot-ical-url-row {
  display: flex;
  gap: .5rem;
  margin: .75rem 0;
}
.sot-ical-url-row input[type="text"] {
  flex: 1;
  padding: .5rem .75rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: .875rem;
  font-family: monospace;
  color: #374151;
  background: #f9fafb;
}
.sot-ical-hint {
  font-size: .8125rem;
  color: #6b7280;
  margin: 0 0 1rem;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════
   Certificate download button (public profile + admin)
   ═══════════════════════════════════════════════════════════════════════ */

.sot-cert-download-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1.125rem;
  background: linear-gradient(135deg, #d97706, #b45309);
  color: #fff;
  border-radius: 8px;
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity .15s;
}
.sot-cert-download-btn:hover { opacity: .88; color: #fff; }

/* Responsive: floor plan canvas */
@media (max-width: 760px) {
  .sot-floor-plan-canvas {
    width: 100%;
    height: 320px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Spa time slot picker
   ═══════════════════════════════════════════════════════════════════════ */

.sot-spa-slots {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .375rem;
}
.sot-spa-slot-btn {
  background: #f9fafb;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  padding: .5rem 1rem;
  font-size: .875rem;
  color: #374151;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  font-family: inherit;
}
.sot-spa-slot-btn:hover {
  border-color: var(--stot-primary, #1d4ed8);
  background: #eff6ff;
  color: #1d4ed8;
}
.sot-spa-slot-btn.is-selected {
  border-color: var(--stot-primary, #1d4ed8);
  background: var(--stot-primary, #1d4ed8);
  color: #fff;
}

/* Booking note (e.g. auto-assign seats) */
.sot-booking-note {
  font-size: .8125rem;
  color: #6b7280;
  margin: .25rem 0 0;
  font-style: italic;
}


/* ════════════════════════════════════════════════════════════════════
 *  Megamenu rules formerly lived here — now consolidated in
 *  `assets/css/sot-megamenu.css` (shared across the SOT network).
 *  See functions.php for the enqueue. Do NOT add new megamenu rules
 *  here — add them to sot-megamenu.css so sotcoin / stays / services /
 *  students stay in lockstep.
 * ════════════════════════════════════════════════════════════════════ */