/* The tour player (site/js/tour/player.js): a full-screen dialog over the app. */
.tour-host { position: fixed; inset: 0; z-index: 1000; }
.tour {
  position: absolute; inset: 0; display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  gap: 10px; padding: max(12px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom));
  background: #1E1628; color: #FFF7F2; font-family: Nunito, system-ui, sans-serif;
}
.tour-top { display: flex; align-items: center; gap: 10px; }
.tour-top h2 { flex: 1; margin: 0; font: 600 1.15rem/1.2 Fredoka, Nunito, sans-serif; }
.tour-count { font-size: .85rem; opacity: .75; font-variant-numeric: tabular-nums; }
.tour-icon, .tour-btn {
  display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .12); color: inherit; cursor: pointer; font: inherit;
}
.tour-icon:hover, .tour-btn:hover { background: rgba(255, 255, 255, .2); }
.tour-icon:focus-visible, .tour-btn:focus-visible, .tour .btn:focus-visible { outline: 3px solid #FFB547; outline-offset: 2px; }
.tour-btn:disabled { opacity: .35; cursor: default; }
.tour-progress { display: flex; gap: 4px; }
.tour-progress i { flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .2); transition: background .3s; }
.tour-progress i.on { background: #FF5C8A; }
.tour-stage { margin: 0; min-height: 0; display: flex; align-items: center; justify-content: center; padding-top: 12px; }
.tour-device { position: relative; height: 100%; width: auto; max-width: 100%; aspect-ratio: var(--ar, 390 / 844); }
.tour-device[data-device="desk"] { height: auto; width: min(100%, 980px); max-height: 100%; }
.tour-label {
  position: absolute; top: -2px; left: 50%; transform: translate(-50%, -50%); z-index: 2; white-space: nowrap;
  padding: 3px 12px; border-radius: 999px; background: #FFB547; color: #2B2236; font-weight: 800; font-size: .8rem;
}
.tour-screen {
  position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 22px; background: #FFF7F2;
  box-shadow: 0 0 0 6px #3A2E48, 0 18px 50px rgba(0, 0, 0, .45);
}
.tour-zoom { position: absolute; inset: 0; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.tour-device[data-device="desk"] .tour-screen { border-radius: 12px; }
.tour-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.tour-ring {
  position: absolute; border: 3px solid #FF5C8A; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(30, 22, 40, .28); animation: tour-ring 1.6s ease-in-out infinite;
}
@keyframes tour-ring { 50% { border-color: #FFB547; } }
.tour-captions { text-align: center; min-height: 4.6em; }
.tour-caption { margin: 0 0 4px; font: 600 1.15rem/1.25 Fredoka, Nunito, sans-serif; }
.tour-line { margin: 0 auto; max-width: 46rem; font-size: .95rem; line-height: 1.4; opacity: .85; }
.tour-controls { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; }
.tour-main { min-width: 60px; min-height: 60px; background: #FF5C8A; color: #fff; }
.tour-main:hover { background: #E8457A; }
.tour-sound { padding: 0 14px; display: inline-flex; gap: 6px; font-weight: 700; font-size: .85rem; }
.tour-intro, .tour-end { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(30, 22, 40, .72); }
.tour-intro[hidden], .tour-end[hidden] { display: none; }
.tour-intro-card { max-width: 24rem; padding: 22px; border-radius: 22px; background: #FFF7F2; color: #2B2236; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, .4); }
.tour-intro-card h3 { margin: 0 0 6px; font: 600 1.3rem/1.2 Fredoka, Nunito, sans-serif; }
.tour-intro-card p { margin: 0 0 16px; color: #756A80; }
.tour-end-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.tour.still .tour-zoom, .tour.still .tour-progress i { transition: none; }
.tour.still .tour-ring { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .tour-zoom, .tour-progress i { transition: none; }
  .tour-ring { animation: none; }
}
@media (min-width: 900px) { .tour { padding-inline: 40px; } .tour-caption { font-size: 1.35rem; } }

/* Lists of tours: Settings, Tours, and the offer card */
.tour-list { display: grid; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.tour-list button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; text-align: left; border: 1px solid var(--line, #F0E6EC);
  border-radius: 14px; background: var(--surface, #fff); color: var(--ink, #2B2236); font: inherit; cursor: pointer;
}
.tour-list button:hover { border-color: var(--pink, #FF5C8A); }
.tour-list .tl-play { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--pink-soft, #FFE4EC); color: var(--pink-deep, #C93C6A); flex: none; }
.tour-list .tl-text { display: grid; }
.tour-list small { color: var(--soft, #756A80); }
.tour-offer { text-align: center; }
.tour-offer .tour-offer-cat { display: grid; place-items: center; margin: 4px 0 8px; }
.tour-offer .row { justify-content: center; }
.coach .coach-tour { display: block; margin: 6px 0 0; font-weight: 800; }

/* tour.html: the list of tours on its own page */
.tour-page { background: var(--bg, #FFF7F2); }
.tour-index { max-width: 34rem; margin: 0 auto; padding: 32px 16px 48px; }
.tour-index h1 { font: 600 1.8rem/1.2 Fredoka, Nunito, sans-serif; margin: 0 0 6px; }

/* Help: the row of tours with pictures, at the top (and the children's one tour) */
.help-tours { margin: 0 0 14px; }
.help-tours h3 { margin: 0 0 2px; font-size: 16px; }
.help-tours > p { margin: 0 0 8px; }
.tour-row { display: flex; gap: 10px; overflow-x: auto; margin: 0; padding: 2px 2px 8px; list-style: none; scroll-snap-type: x proximity; }
.tour-row li { flex: none; width: 132px; scroll-snap-align: start; }
.tour-tile { display: grid; gap: 6px; width: 100%; padding: 0; border: 0; background: none; color: var(--ink, #2B2236); font: inherit; font-size: 13px; line-height: 1.25; text-align: left; cursor: pointer; }
.tour-tile strong { font-weight: 800; }
.tt-pic { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--fill, #f3edf2); border: 1px solid var(--line, #F0E6EC); }
.tt-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tt-play { position: absolute; left: 8px; bottom: 8px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #FF5C8A; color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.tt-tick { position: absolute; right: 8px; top: 8px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--mint, #22B98F); color: #fff; }
.tour-tile:focus-visible .tt-pic { outline: 3px solid var(--pink, #FF5C8A); outline-offset: 2px; }
.tour-tile:hover .tt-pic { border-color: var(--pink, #FF5C8A); }

/* Get started: the tour step and "Show me" */
.gs-line { display: flex; align-items: center; gap: 6px; }
.gs-line .gs-row { flex: 1; min-width: 0; }
.gs-show { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 8px 4px; font-size: 13px; font-weight: 800; white-space: nowrap; }
div.gs-row .gs-show { margin-left: auto; }
.gs-play { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--pink, #FF5C8A); color: #fff; vertical-align: -5px; }