/* THE TWO VERIFIED MARKS (Chiran, 9 Nov 2026 — design https://claude.ai/artifact/9hg39mNoNhz4JdFNGKsCFj).
   Green #30B300 circle with a white tick-in-a-shield; light-green pill; notes float over the page and move nothing.
   Two-class selectors: the Traveler theme styles bare buttons gold and uppercase. */

.ss-vm { position: relative; display: inline-flex; vertical-align: middle; text-shadow: none; text-align: left; }
.ss-vm * { text-shadow: none; }

.ss-vm .ss-vm__dot { width: 24px; height: 24px; flex: none; box-sizing: border-box; border-radius: 50%; background: #30B300;
  display: inline-flex; align-items: center; justify-content: center; }
.ss-vm .ss-vm__dot svg { display: block; width: 14px; height: 14px; color: #fff; stroke: #fff; stroke-width: 1.9; }

/* 2 · VERIFIED SERVICE — the pill on the banner */
.ss-vm .ss-vm__pill { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px;
  border-radius: 999px; background: #EAF7E4; border: 1px solid #CBE9BE; color: #090920; cursor: pointer;
  font-family: var(--font-label, 'Google Sans', system-ui, sans-serif); font-size: 14px; font-weight: 500; line-height: 1.2;
  text-transform: none; letter-spacing: 0; white-space: nowrap; }
.ss-vm .ss-vm__pill b { font-weight: 700; }
.ss-vm .ss-vm__pill:hover { border-color: #30B300; }
.ss-vm .ss-vm__pill:focus-visible, .ss-vm .ss-vm__seal:focus-visible { outline: 2px solid #7700FF; outline-offset: 2px; }

/* 1 · VERIFIED PARTNER — the seal on the photo in the side box */
.ss-host__avw { position: relative; flex: none; display: inline-flex; }
.ss-vm.ss-vm--partner { position: absolute; right: -8px; bottom: -8px; }
.ss-vm .ss-vm__seal { all: unset; box-sizing: border-box; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; }
.ss-vm .ss-vm__seal .ss-vm__dot { border: 2px solid #fff; }

/* The note: floats, never pushes anything (Chiran: "it is just overlay") */
.ss-vm .ss-vm__note { position: absolute; z-index: 60; left: 0; width: 300px; max-width: calc(100vw - 32px); box-sizing: border-box;
  display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: #fff; color: #090920; border: 1px solid #e5e5e5;
  border-radius: 14px; box-shadow: 0 12px 36px rgba(9,9,32,.24); text-align: left; white-space: normal;
  font-family: var(--font-body, 'Google Sans', system-ui, sans-serif); font-size: 13px; font-weight: 400; line-height: 1.5; }
.ss-vm .ss-vm__note[hidden] { display: none; }
.ss-vm .ss-vm__note > b { display: flex; align-items: center; justify-content: flex-start; text-align: left; gap: 8px; font-size: 14.5px; font-weight: 700; color: #090920; }
.ss-vm .ss-vm__note > b .ss-vm__dot { width: 22px; height: 22px; }
.ss-vm .ss-vm__note > b .ss-vm__dot svg { width: 13px; height: 13px; }
.ss-vm .ss-vm__note > span { color: #4a4a60; }

/* The banner keeps its photos inside a frame that cuts off anything below it, so the service note opens upwards. */
.ss-vm.ss-vm--service .ss-vm__note { bottom: calc(100% + 10px); }
/* The side box note opens below the photo, over the lines under it. */
.ss-vm.ss-vm--partner .ss-vm__note { top: calc(100% + 8px); left: -40px; width: 280px; }

/* On the banner the pill sits in the facts row, after the town. */
.ss-hero--gallery .ss-gal__meta .ss-vm { display: inline-flex; }
@media (max-width: 899px) {
  .ss-hero--gallery .ss-gal__meta .ss-vm { display: inline-flex !important; }   /* the row hides its 3rd+ facts on a phone; never this one */
  .ss-vm .ss-vm__pill { font-size: 13px; }
}

/* The banner's facts row styles every span inside it (inline-flex, centred); the note is a span too, so put its own layout back. */
.ss-hero--gallery .ss-gal__meta .ss-vm .ss-vm__note { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.ss-hero--gallery .ss-gal__meta .ss-vm .ss-vm__note[hidden] { display: none; }
.ss-hero--gallery .ss-gal__meta .ss-vm .ss-vm__note > span { display: block; }