/**
 * Travel Scratch Map — dedicated, isolated stylesheet.
 * Loaded ONLY on /travel-map/, never sitewide, so it can't affect
 * page weight anywhere else.
 *
 * style.css is deliberately NOT loaded on this page (see the
 * comment in travel-map/index.php) — it carries a separate, unused
 * legacy header/nav design (.site-header, .nav, .nav-links, .brand,
 * .menu-toggle) whose .nav-links rule collides by class name with
 * the real, currently-used shared header, which is what caused this
 * page's header to render differently from every other internal
 * page despite using the identical render_header(false) call.
 *
 * style.css's only genuine value to THIS file was five CSS custom
 * properties, defined inside its Tailwind @theme block. They're
 * copied here verbatim (values match style.css exactly) as an
 * ordinary :root block, so this file is fully self-contained and no
 * longer needs style.css at all — while still using the site's real
 * palette/type values, not new ones.
 */
:root {
  --color-blue: #0f62fe;
  --color-ink: #0b1320;
  --color-muted: #64748b;
  --ease-apple: cubic-bezier(0.16, 1, 0.3, 1);
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Matches the exact grid system used by the shared header
   (max-w-7xl, px-5 / md:px-8) and page_hero() above this page, so the
   Travel Footprint content visually belongs to the same layout as
   the rest of the site rather than floating in its own narrower
   column. The map/result content can use this full width comfortably
   since .tm-geo-map already caps its own height independently. */
.tm-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px 96px;
}

@media (min-width: 768px) {
  .tm-shell {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* A comfortable reading width for text-forward sections within the
   wider shell, matching editorial convention (wide container, narrower
   text blocks) rather than letting every paragraph stretch full width.
   Applied directly to each element's own rule further down this file
   (not as a blanket override here) to avoid fighting later, more
   specific margin rules already defined for those elements. */

/* --- Layer toggle (World / India) --- */
.tm-layer-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: #f1f5f9;
  border-radius: 999px;
  margin: 32px auto 28px;
}

.tm-layer-toggle button {
  border: 0;
  background: transparent;
  padding: 10px 22px;
  border-radius: 999px;
  font: 600 14px var(--font-sans);
  color: var(--color-muted);
  cursor: pointer;
  transition: background-color 0.25s var(--ease-apple), color 0.25s var(--ease-apple);
}

.tm-layer-toggle button.is-active {
  background-color: #0A4DA3;
  color: #ffffff;
}

/* --- Selector grid --- */
.tm-panel.hidden {
  display: none;
}

.tm-continent-group {
  margin-bottom: 28px;
}

.tm-continent-heading {
  font: 600 12px var(--font-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 12px;
}

.tm-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tm-chip {
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: var(--color-ink);
  padding: 9px 16px;
  border-radius: 999px;
  font: 500 14px var(--font-sans);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.2s var(--ease-apple);
}

.tm-chip:hover {
  border-color: var(--color-blue);
}

.tm-chip:focus-visible {
  outline: 3px solid var(--color-blue);
  outline-offset: 2px;
}

.tm-chip.is-selected,
button.tm-chip.is-selected {
  background-color: #0A4DA3;
  border-color: #0A4DA3;
  color: #ffffff;
}

.tm-chip.is-selected:hover,
button.tm-chip.is-selected:hover {
  background-color: #0A4DA3;
  border-color: #D4AF37;
  color: #ffffff;
}

/* A checkmark communicates selection alongside colour, not colour alone. */
.tm-chip.is-selected::before {
  content: '✓ ';
  font-weight: 700;
}

/* --- Statistics panel --- */
.tm-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 40px 0;
  padding: 28px 20px;
  border-radius: 24px;
  background: linear-gradient(135deg, #0A4DA3 0%, #071228 100%);
  color: #ffffff;
}

.tm-stat {
  text-align: center;
}

.tm-stat-value {
  font: 800 32px var(--font-sans);
  display: block;
}

.tm-stat-label {
  font: 600 11px var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 4px;
  display: block;
}

@media (max-width: 640px) {
  .tm-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Legend / instruction: see the consolidated .tm-legend rule
   further down this file (Phase 5) — the old dot-swatch markup was
   replaced by a single instruction line. --- */

/* --- Action row --- */
.tm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 40px;
}

/* --- Result / graphic preview --- */
#tm-result {
  margin-top: 56px;
  text-align: center;
}

#tm-result.hidden {
  display: none;
}

.tm-result-preview {
  max-width: 320px;
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(10, 77, 163, 0.25);
  margin: 24px auto;
  display: block;
}

.tm-result-next {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid #e2e8f0;
}

/* ==========================================================================
   Phase 2 — Interactive SVG geographic maps (primary selector)
   ========================================================================== */

.tm-map-attribution {
  text-align: center;
  font: 500 11px var(--font-sans);
  color: #94a3b8;
  margin-bottom: 12px;
}

.tm-map-attribution a {
  color: #94a3b8;
  text-decoration: underline;
}

.tm-geo-map {
  width: 100%;
  max-height: 60vh;
  overflow: hidden;
  border-radius: 20px;
  background: #eef2f7;
  padding: 12px;
}

.tm-geo-map svg {
  width: 100%;
  height: auto;
  max-height: 56vh;
  display: block;
  margin: 0 auto; /* keeps taller maps (e.g. India) centred if height-constrained */
}

/* Default / hover / selected / focus states — colour is never the
   only signal: selected paths also get a heavier stroke, and focus
   gets its own visible outline, independent of colour. */
.tm-geo-path {
  fill: #cbd5e1;
  stroke: #ffffff;
  stroke-width: 0.5;
  cursor: pointer;
  transition: fill 0.2s ease, stroke-width 0.2s ease;
}

.tm-geo-path--not-selectable {
  cursor: default;
  opacity: 0.6;
}

.tm-geo-path:not(.tm-geo-path--not-selectable):hover {
  fill: #93b8e6;
}

.tm-geo-path.is-selected {
  fill: #0A4DA3;
  stroke: #D4AF37;
  stroke-width: 1.1;
}

.tm-geo-path:focus-visible {
  outline: 3px solid #D4AF37;
  outline-offset: 1px;
}

.tm-map-status {
  min-height: 20px;
  text-align: center;
  font: 600 13px var(--font-sans);
  color: var(--color-ink);
  margin: 10px 0 0;
}

.tm-map-note {
  text-align: center;
  font: 500 13px var(--font-sans);
  color: var(--color-muted);
  max-width: 520px;
  margin: 10px auto 0;
}

/* --- Fallback list disclosure ---
   Mobile-discoverability fix: the control itself, its wording, and its
   underlying list/search behaviour are unchanged — this only adds a
   visible pill/button treatment and a comfortable tap target so it
   reads as a deliberate secondary action instead of small helper text.
   Desktop keeps the same treatment, just width-capped so it doesn't
   stretch full-bleed like the primary CTA. */
.tm-fallback {
  margin-top: 20px;
  border-top: 1px solid #e2e8f0;
  padding-top: 16px;
}

.tm-fallback summary {
  cursor: pointer;
  font: 600 13px var(--font-sans);
  color: var(--color-blue);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 12px 16px;
  border: 1px solid #d6e4ff;
  border-radius: 12px;
  background: #eff4ff;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.tm-fallback summary:hover,
.tm-fallback summary:focus-visible {
  background: #e2ecff;
  border-color: #b9d0ff;
}

.tm-fallback summary:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}

.tm-fallback summary::-webkit-details-marker {
  display: none;
}

.tm-fallback summary::before {
  content: '+ ';
}

.tm-fallback[open] summary::before {
  content: '− ';
}

.tm-fallback > div {
  margin-top: 16px;
}

@media (max-width: 640px) {
  .tm-fallback {
    margin-top: 24px;
  }
  .tm-fallback summary {
    font-size: 15px;
    padding: 14px 16px;
  }
}

@media (min-width: 641px) {
  .tm-fallback summary {
    max-width: 420px;
  }
}

@media (max-width: 640px) {
  .tm-geo-map {
    max-height: 46vh;
    padding: 8px;
  }
  .tm-geo-map svg {
    max-height: 44vh;
  }
}

/* ==========================================================================
   Phase 3 — Name entry & personalised results
   ========================================================================== */

.tm-name-step {
  text-align: center;
  max-width: 480px;
  margin: 32px auto 40px;
  padding: 28px 24px;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 20px 50px rgba(10, 77, 163, 0.08);
}

.tm-name-step.hidden {
  display: none;
}

.tm-name-heading {
  font: 700 24px var(--font-sans);
  color: var(--color-ink);
  margin-bottom: 8px;
}

.tm-name-subtext {
  font: 500 13px var(--font-sans);
  color: var(--color-muted);
  margin-bottom: 20px;
}

.tm-name-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.tm-name-form input {
  flex: 1 1 220px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  padding: 12px 20px;
  font: 500 14px var(--font-sans);
  color: var(--color-ink);
}

.tm-name-form input:focus-visible {
  outline: 3px solid var(--color-blue);
  outline-offset: 1px;
}

.tm-name-skip {
  display: inline-block;
  margin-top: 14px;
  border: 0;
  background: transparent;
  color: var(--color-muted);
  font: 500 13px var(--font-sans);
  text-decoration: underline;
  cursor: pointer;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Stat sub-labels ("/ 195", "/ 36") shown inline with the stat label */
.tm-stat-sub {
  display: block;
  font-weight: 500;
  opacity: 0.7;
}

/* --- Results summary: live stat + mini-map blocks, shown above the
   generated Canvas image preview --- */
.tm-result-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin: 28px 0;
}

.tm-result-empty {
  color: var(--color-muted);
  font: 500 15px var(--font-sans);
}

.tm-result-block {
  flex: 1 1 260px;
  max-width: 340px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 18px;
  text-align: center;
}

.tm-result-block-heading {
  font: 700 15px var(--font-sans);
  color: var(--color-ink);
  margin-bottom: 10px;
}

.tm-mini-map {
  width: 100%;
  max-height: 180px;
  overflow: hidden;
  border-radius: 12px;
  background: #eef2f7;
  margin-bottom: 12px;
}

.tm-mini-map svg {
  width: 100%;
  height: auto;
  max-height: 180px;
  display: block;
  margin: 0 auto;
}

.tm-result-figures {
  display: flex;
  justify-content: center;
  gap: 14px;
  align-items: baseline;
}

.tm-result-fraction {
  font: 800 22px var(--font-sans);
  color: var(--color-ink);
}

.tm-result-pct {
  font: 700 14px var(--font-sans);
  color: #0A4DA3;
}

/* ==========================================================================
   Phase 4 — Result reveal, travel identity, captions, What's Next
   ========================================================================== */

/* Reveal: a single subtle fade + rise on first show, never a loop,
   never confetti-style motion. Respects reduced-motion preferences. */
.tm-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.1s var(--ease-apple), transform 1.1s var(--ease-apple);
}

.tm-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .tm-reveal {
    transition: none;
    transform: none;
  }
}

.tm-result-heading-main {
  font: 700 30px var(--font-sans);
  color: var(--color-ink);
  text-align: center;
}

.tm-result-tagline {
  text-align: center;
  color: var(--color-muted);
  font: 500 15px var(--font-sans);
  margin-top: 4px;
}

.tm-result-identity {
  text-align: center;
  color: #0A4DA3;
  font: 600 16px var(--font-sans);
  margin-top: 14px;
}

/* --- Caption chips --- */
.tm-caption-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 24px 0;
}

.tm-caption-label {
  width: 100%;
  text-align: center;
  font: 600 12px var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 4px;
}

.tm-caption-chip {
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: var(--color-ink);
  padding: 8px 14px;
  border-radius: 999px;
  font: 500 13px var(--font-sans);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.tm-caption-chip:hover {
  border-color: var(--color-blue);
}

.tm-caption-chip:focus-visible {
  outline: 3px solid var(--color-blue);
  outline-offset: 2px;
}

.tm-caption-chip.is-selected {
  background-color: #0A4DA3;
  border-color: #0A4DA3;
  color: #ffffff;
}

/* --- What's Next discovery: editorial destination card --- */
.tm-whats-next {
  margin: 48px 0;
}

.tm-whats-next:empty {
  display: none;
}

.tm-next-card {
  max-width: 900px;
  margin: 0 auto;
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(10, 77, 163, 0.08);
}

/* Mobile-first: image, then body, stacked — matches DOM order. */
.tm-next-image-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.tm-next-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tm-next-body {
  padding: 28px 24px 32px;
  text-align: center;
}

.tm-next-eyebrow {
  font: 700 12px var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #0A4DA3;
  margin-bottom: 14px;
}

.tm-next-heading {
  font: 700 24px var(--font-sans);
  color: var(--color-ink);
  margin-bottom: 12px;
}

.tm-next-reason {
  font: 500 15px var(--font-sans);
  color: var(--color-muted);
  line-height: 1.7;
  margin-bottom: 24px;
}

/* Desktop: substantial image on one side, text hierarchy on the
   other — a genuine editorial composition, not a small centred card
   with excess whitespace. */
@media (min-width: 900px) {
  .tm-next-card {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: stretch;
  }

  .tm-next-image-wrap {
    aspect-ratio: auto;
    height: 100%;
  }

  .tm-next-body {
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 44px 48px;
  }

  .tm-next-reason {
    max-width: 420px;
  }
}

.tm-whats-next-empty {
  font: 500 14px var(--font-sans);
  color: var(--color-muted);
  text-align: center;
}

/* ==========================================================================
   Phase 5 — Self-contained button system, hero-stat hierarchy,
   simplified instruction, brand intro, hero CTA
   ========================================================================== */

/* --- Self-contained button system (never relies on the shared/global
   .btn rules, so nothing on this page can go visually missing if
   those rules are ever changed or absent elsewhere). --- */
.tm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  border-radius: 999px;
  padding: 14px 28px;
  font: 600 14px var(--font-sans);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.25s var(--ease-apple), background-color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}

.tm-btn:focus-visible {
  outline: 3px solid #D4AF37;
  outline-offset: 2px;
}

.tm-btn-primary {
  background-color: #0A4DA3;
  color: #ffffff;
  border-color: #0A4DA3;
}

.tm-btn-primary:hover {
  transform: translateY(-2px);
  background-color: #083c80;
  color: #ffffff;
}

.tm-btn-secondary {
  background-color: #ffffff;
  color: #0A4DA3;
  border-color: #cbd5e1;
}

.tm-btn-secondary:hover {
  border-color: #0A4DA3;
  color: #0A4DA3;
}

.tm-btn-ghost {
  background-color: transparent;
  color: #0A4DA3;
  border-color: #cbd5e1;
  padding: 10px 22px;
  font-size: 13px;
}

.tm-btn-ghost:hover {
  border-color: #0A4DA3;
}

.tm-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  color: #ffffff;
  background-color: #94a3b8;
  border-color: #94a3b8;
  transform: none;
}

/* --- Simplified map instruction --- */
.tm-legend {
  text-align: center;
  margin-bottom: 16px;
}

.tm-legend-instruction {
  font: 500 14px var(--font-sans);
  color: var(--color-muted);
}

/* --- Hero-number statistics --- */
.tm-stats-hero {
  text-align: center;
  max-width: 720px;
  margin: 40px auto;
  padding: 32px 20px;
  border-radius: 24px;
  background: linear-gradient(135deg, #0A4DA3 0%, #071228 100%);
  color: #ffffff;
}

.tm-stat-hero-value {
  font: 800 56px var(--font-sans);
  line-height: 1;
}

.tm-stat-hero-label {
  font: 600 15px var(--font-sans);
  color: rgba(255, 255, 255, 0.85);
  margin-top: 10px;
}

.tm-stat-secondary {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

.tm-stat-secondary-chip {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 6px 14px;
  font: 600 12px var(--font-sans);
  color: rgba(255, 255, 255, 0.9);
}

/* --- Hero CTA (below the shared page_hero, above the app shell) --- */
#tm-hero-cta {
  min-width: 260px;
}

/* --- Brand intro (cold-visitor context, shown after the core result) --- */
.tm-brand-intro {
  text-align: center;
  max-width: 520px;
  margin: 48px auto 0;
  padding: 28px 24px;
  border-top: 1px solid #e2e8f0;
}

.tm-brand-intro-eyebrow {
  font: 700 12px var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #0A4DA3;
  margin-bottom: 10px;
}

.tm-brand-intro-copy {
  font: 500 14px var(--font-sans);
  color: var(--color-muted);
  line-height: 1.6;
}

.tm-brand-intro-rating {
  font: 600 13px var(--font-sans);
  color: var(--color-ink);
  margin-top: 14px;
}

.tm-brand-intro-link {
  display: inline-block;
  margin-top: 14px;
  font: 700 14px var(--font-sans);
  color: #0A4DA3;
  text-decoration: none;
}

.tm-brand-intro-link:hover {
  text-decoration: underline;
}

.tm-brand-stars {
  color: #fbbf24;
  font-weight: 700;
  margin-right: 4px;
}

.tm-result-next-heading {
  font: 600 16px var(--font-sans);
  color: var(--color-muted);
  text-align: center;
}

@media (max-width: 640px) {
  .tm-stat-hero-value {
    font-size: 44px;
  }
}

/* ==========================================================================
   Phase 6 — Hero explainer, icon buttons, final CTA copy,
   header spacing (this page only), attribution placement
   ========================================================================== */

.tm-hero-subcopy {
  max-width: 560px;
  margin: 0 auto 20px;
  color: var(--color-muted);
  font: 500 15px var(--font-sans);
  line-height: 1.6;
}

/* --- Icon buttons (Share / Download) --- */
.tm-btn-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tm-btn-icon svg {
  flex-shrink: 0;
}

/* --- Final CTA copy --- */
.tm-result-next-copy {
  text-align: center;
  color: var(--color-muted);
  font: 500 14px var(--font-sans);
  max-width: 420px;
  margin: 6px auto 18px;
}

/* --- Attribution: relocated to the very end of the result section,
   small and unobtrusive, never competing with the product. Only the
   amCharts credit remains — MapSVG's own published terms state no
   attribution is required for that map, verified against
   mapsvg.com's own licence pages (see travel-map-data.js). --- */
.tm-map-attribution {
  text-align: center;
  font: 500 11px var(--font-sans);
  color: #cbd5e1;
  margin-top: 40px;
}

.tm-map-attribution a {
  color: #cbd5e1;
  text-decoration: underline;
}

/* No page-specific header CSS remains here. Travel Footprint calls
   render_header(false) — the exact same call, with the exact same
   arguments, as About, Destinations, and Travel Bulletins — so its
   header is now byte-identical shared markup, not a customised or
   compensated variant. See includes/layout.php; nothing in this
   stylesheet targets the header at all any more. */

/* ==========================================================================
   Phase 7 — Follow the Journey (social), targeted correction pass
   ========================================================================== */

.tm-follow-journey {
  text-align: center;
  max-width: 480px;
  margin: 40px auto 0;
  padding: 8px 24px 0;
}

.tm-follow-copy {
  font: 500 14px var(--font-sans);
  color: var(--color-muted);
  margin-bottom: 18px;
}

.tm-follow-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* ==========================================================================
   Phase 8 — Custom Share sheet (mobile bottom-sheet / desktop modal)
   ========================================================================== */

.tm-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(8, 22, 45, 0.55);
}

body.tm-sheet-open {
  overflow: hidden;
}

.tm-share-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 201;
  background: #ffffff;
  border-radius: 24px 24px 0 0;
  padding: 12px 24px 28px;
  padding-bottom: max(28px, env(safe-area-inset-bottom, 0px)); /* stays above home-indicator/gesture-bar safe area on mobile */
  box-shadow: 0 -10px 40px rgba(8, 22, 45, 0.2);
  max-height: 85vh;
  overflow-y: auto;
}

.tm-share-sheet-handle {
  width: 44px;
  height: 4px;
  border-radius: 999px;
  background: #e2e8f0;
  margin: 4px auto 16px;
}

.tm-share-sheet-title {
  font: 700 20px var(--font-sans);
  color: var(--color-ink);
  text-align: center;
}

.tm-share-sheet-copy {
  font: 500 13px var(--font-sans);
  color: var(--color-muted);
  text-align: center;
  margin: 4px 0 20px;
}

.tm-share-sheet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.tm-share-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 16px;
  padding: 16px 8px;
  font: 600 12px var(--font-sans);
  color: var(--color-ink);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  min-height: 44px;
}

.tm-share-option:hover {
  border-color: #0A4DA3;
  background: #eef2f7;
}

.tm-share-option:focus-visible {
  outline: 3px solid #D4AF37;
  outline-offset: 2px;
}

.tm-share-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0A4DA3;
}

.tm-share-sheet-message {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #f1f5f9;
  color: var(--color-ink);
  font: 500 13px var(--font-sans);
  line-height: 1.6;
  text-align: center;
}

.tm-share-sheet-message-actions {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.tm-share-sheet-close-link {
  display: block;
  margin: 20px auto 0;
  border: 0;
  background: transparent;
  color: var(--color-muted);
  font: 600 13px var(--font-sans);
  cursor: pointer;
  text-align: center;
  width: 100%;
}

/* Desktop: centred modal instead of a full-width bottom sheet. */
@media (min-width: 640px) {
  .tm-share-sheet {
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 420px;
    border-radius: 24px;
    max-height: 90vh;
  }

  .tm-share-sheet-handle {
    display: none;
  }
}