/* Check-in demo (/check-in, templates/type/check-in.php + check-in.js).
   The card of laceup.io's check-in in laceup.ch tokens; loaded after site.css
   on this page only. The map is Mapbox GL (its CSS comes with the script). */

body.is-bare { min-height: 100vh; min-height: 100dvh; background: #6f8fa8; }
body.is-bare.is-locked { overflow: hidden; }

.ci-bg { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; z-index: 0; }

.ci { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; padding: 10px 10px calc(14px + env(safe-area-inset-bottom)); }
@media (min-width: 640px) { .ci { justify-content: center; padding: 24px 16px; } }

/* padding-block: 0 undoes site.css's global `section { padding-block }` */
.ci-card { padding-block: 0; width: 100%; max-width: 448px; background: #fff; color: var(--lu-ink); border-radius: var(--lu-r-lg); box-shadow: var(--lu-shadow-lg); overflow: hidden; }

/* header */
.ci-card__head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px 18px; }
.ci-card__titles { min-width: 0; flex: 1; }
.ci-card__eyebrow { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--lu-coral-600); }
.ci-card__title { margin: 1px 0 0; font-size: 18px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.ci-icon-btn { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--lu-gray-100); color: var(--lu-ink-700); border: 0; cursor: pointer; }
.ci-icon-btn:hover { background: var(--lu-gray-200); color: var(--lu-ink); }
.ci-icon-btn svg { width: 20px; height: 20px; }

.ci-progress { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: var(--lu-r-pill); background: var(--lu-gray-100); font-size: 13px; font-weight: 800; white-space: nowrap; }
.ci-progress[hidden] { display: none; }
.ci-progress__ring { width: 24px; height: 24px; border-radius: 50%; background: conic-gradient(var(--lu-forest) calc(var(--p, 0) * 1%), var(--lu-gray-300) 0); -webkit-mask: radial-gradient(circle, transparent 7px, #000 7.5px); mask: radial-gradient(circle, transparent 7px, #000 7.5px); transition: background var(--lu-dur) var(--lu-ease); }

/* map */
.ci-map { position: relative; height: 230px; margin: 0 12px; border-radius: var(--lu-r-md); overflow: hidden; background: #e8e6dc; }
/* Two classes: mapbox-gl.css sets .mapboxgl-map { position: relative } on this element. */
.ci-map .ci-map__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ci-map__hit { position: absolute; inset: 0; z-index: 2; border: 0; background: transparent; cursor: zoom-in; }
.ci-map__badge { position: absolute; top: 10px; right: 10px; z-index: 3; display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px; border-radius: var(--lu-r-pill); background: #fff; box-shadow: var(--lu-shadow-sm); font-size: 13px; font-weight: 800; pointer-events: none; }
.ci-map__badge svg { width: 16px; height: 16px; }
.ci-map__close { display: none; position: absolute; top: calc(12px + env(safe-area-inset-top)); left: 12px; z-index: 5; width: 44px; height: 44px; place-items: center; border: 0; border-radius: 50%; background: #fff; box-shadow: var(--lu-shadow-md); cursor: pointer; color: var(--lu-ink); }
.ci-map__close svg { width: 20px; height: 20px; }
.ci-map.is-fs { position: fixed; inset: 0; z-index: 60; height: auto; margin: 0; border-radius: 0; }
.ci-map.is-fs .ci-map__hit, .ci-map.is-fs .ci-map__badge { display: none; }
.ci-map.is-fs .ci-map__close { display: grid; }
.ci-map .mapboxgl-ctrl-attrib { font-size: 10px; }

/* pins (Mapbox HTML markers): number in the head, name below the tip. Mapbox
   positions the marker element (.ci-mk) with `transform`, so every effect of
   our own sits on the inner .ci-pin — scaling the outer one would scale its
   map offset too. */
.ci-mk { width: 30px; height: 40px; cursor: pointer; }
.ci-mk.is-sel { z-index: 2; }
.ci-pin { position: relative; width: 30px; height: 40px; transform-origin: 50% 100%; transition: scale var(--lu-dur) var(--lu-ease); }
.ci-pin svg { position: absolute; inset: 0; width: 30px; height: 40px; filter: drop-shadow(0 2px 3px rgba(20,20,20,.3)); }
.ci-pin__body { fill: var(--lu-ink); stroke: #fff; stroke-width: 2; transition: fill var(--lu-dur) var(--lu-ease); }
.ci-pin__num { position: absolute; left: 0; right: 0; top: 6px; text-align: center; font-size: 13px; font-weight: 800; line-height: 18px; color: var(--lu-yellow-400); }
.ci-pin__name { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 2px; white-space: nowrap; font-size: 12px; font-weight: 800; color: var(--lu-ink); text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff; pointer-events: none; }
.ci-mk.is-done .ci-pin__body { fill: var(--lu-forest); }
.ci-mk.is-done .ci-pin__num { color: #fff; }
.ci-mk.is-sel .ci-pin { scale: 1.2; }
.ci-mk.is-new .ci-pin, .ci-mk.is-new .ci-pin__name { animation: ci-drop 520ms var(--lu-ease-out) both; animation-delay: var(--d, 0ms); }
@keyframes ci-drop { from { opacity: 0; translate: 0 -26px; } 60% { opacity: 1; } to { opacity: 1; translate: 0 0; } }
.ci-mk.is-new .ci-pin__name { animation-name: ci-fade; }
@keyframes ci-fade { from { opacity: 0; } to { opacity: 1; } }

.ci-me { width: 18px; height: 18px; }
.ci-me__halo { position: absolute; inset: -9px; border-radius: 50%; background: rgba(33,125,222,.25); animation: ci-pulse 2s var(--lu-ease) infinite; }
.ci-me__dot { position: absolute; inset: 0; border-radius: 50%; background: #217dde; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(20,20,20,.15), 0 2px 6px rgba(20,20,20,.3); }
@keyframes ci-pulse { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

/* target chips */
.ci-chips-label { margin: 12px 18px 0; font-size: 12px; font-weight: 800; color: var(--lu-text-muted); max-width: none; }
.ci-chips { display: flex; gap: 8px; overflow-x: auto; padding: 8px 12px 2px; scroll-snap-type: x proximity; scrollbar-width: none; }
.ci-chips::-webkit-scrollbar { display: none; }
.ci-chip { flex: none; display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border: 1.5px solid var(--lu-border); border-radius: var(--lu-r-pill); background: #fff; font-size: 14px; font-weight: 800; color: var(--lu-ink); cursor: pointer; scroll-snap-align: start; }
.ci-chip:hover { border-color: var(--lu-gray-400); }
.ci-chip.is-sel { border-color: var(--lu-ink); box-shadow: inset 0 0 0 1px var(--lu-ink); }
.ci-chip small { font-size: 12px; font-weight: 700; color: var(--lu-text-muted); }
.ci-dot { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--lu-ink); color: var(--lu-yellow-400); font-size: 12px; font-weight: 800; }
.ci-dot.is-done { background: var(--lu-forest); color: #fff; }
.ci-dot--lg { width: 36px; height: 36px; font-size: 15px; }

/* panel + states */
.ci-panel { margin-top: 14px; padding: 18px 20px 22px; border-top: 1px solid var(--lu-border); }
.ci-state { text-align: center; }
.ci-state__title { margin: 8px 0 4px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.ci-state__text { margin: 0 auto; font-size: 15px; color: var(--lu-text-secondary); }
.ci-state__small { margin: 10px auto 0; font-size: 12.5px; color: var(--lu-text-muted); }
.ci-eyebrow { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--lu-coral-600); }

.btn.ci-btn { width: 100%; justify-content: center; height: 52px; margin-top: 16px; font-size: 15px; text-transform: uppercase; letter-spacing: .02em; }
.btn.ci-btn + .btn.ci-btn { margin-top: 8px; }
.btn.ci-btn:disabled { opacity: .55; cursor: default; transform: none; }
.btn.ci-btn--ink { background: var(--lu-ink); color: #fff; box-shadow: var(--lu-shadow-md); }
.btn.ci-btn--ink:hover { background: var(--lu-ink-800); color: #fff; }
.ci-btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.ci-btn-row .btn { width: 100%; justify-content: center; height: 46px; padding: 0 12px; font-size: 14px; }
.ci-btn-row svg { width: 18px; height: 18px; flex: none; }
.ci-link { display: block; margin: 14px auto 0; padding: 0; border: 0; background: none; font-size: 13px; font-weight: 700; color: var(--lu-text-muted); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.ci-link:hover { color: var(--lu-ink); }

.ci-badge { display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto; border-radius: 50%; color: #fff; }
.ci-badge svg { width: 30px; height: 30px; }
.ci-badge--ok { background: var(--lu-forest); box-shadow: 0 0 0 8px rgba(60,122,78,.14); animation: ci-pop 480ms var(--lu-ease-out) both; }
.ci-badge--warn { background: var(--lu-coral-600); }
@keyframes ci-pop { from { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } to { transform: scale(1); } }

.ci-spinner { width: 56px; height: 56px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--lu-yellow-100); }
.ci-spinner::after { content: ""; width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--lu-ink); border-right-color: transparent; animation: ci-spin .8s linear infinite; }
@keyframes ci-spin { to { transform: rotate(360deg); } }

.ci-countdown { position: relative; width: 96px; height: 96px; margin: 4px auto 6px; }
.ci-countdown svg { width: 96px; height: 96px; transform: rotate(-90deg); }
.ci-countdown circle { fill: none; stroke-width: 8; }
.ci-countdown__track { stroke: var(--lu-gray-200); }
.ci-countdown__arc { stroke: var(--lu-forest); stroke-linecap: round; stroke-dasharray: 276.46; transition: stroke-dashoffset 1s linear; }
.ci-countdown b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 32px; font-weight: 800; }

.ci-bar { height: 8px; margin-top: 16px; border-radius: var(--lu-r-pill); background: var(--lu-gray-100); overflow: hidden; }
.ci-bar span { display: block; height: 100%; border-radius: inherit; background: var(--lu-forest); transition: width 600ms var(--lu-ease-out); }
.ci-bar-label { margin-top: 6px; font-size: 13px; font-weight: 800; color: var(--lu-text-secondary); }

.ci-box { margin-top: 16px; padding: 14px; border: 1.5px solid var(--lu-border); border-radius: var(--lu-r-md); text-align: left; }
.ci-box__label { margin: 0 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--lu-text-muted); }
.ci-box--save { border-color: var(--lu-yellow-600); background: var(--lu-yellow-100); }
.ci-box--save h3 { font-size: 16px; letter-spacing: -.01em; margin: 0 0 2px; }
.ci-box--save p { margin: 0; font-size: 14px; color: var(--lu-ink-700); }
.ci-target { display: flex; align-items: center; gap: 12px; }
.ci-target__body b { display: block; font-size: 17px; line-height: 1.2; }
.ci-target__body span { display: block; font-size: 13px; color: var(--lu-text-muted); }
.ci-target__body { min-width: 0; flex: 1; }

.ci-form { display: grid; gap: 6px; margin-top: 12px; }
.ci-form label { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--lu-text-secondary); }
.ci-form input[type="email"] { width: 100%; border: 1.5px solid var(--lu-gray-300); border-radius: var(--lu-r-md); padding: 12px 14px; background: #fff; font-size: 16px; }
.ci-form input[type="email"]:focus-visible { outline: 3px solid var(--lu-coral-400); outline-offset: 1px; border-color: var(--lu-coral-400); }
.ci-form .btn.ci-btn { margin-top: 6px; }
.ci-form__note { margin: 4px 0 0; font-size: 12px; color: var(--lu-text-muted); }
.ci-form__note a { color: inherit; text-decoration: underline; }
.ci-form__hp { position: absolute; left: -9999px; }

.ci-note { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--lu-r-sm); background: var(--lu-gray-100); font-size: 13.5px; text-align: left; color: var(--lu-ink-700); }
.ci-note--warn { background: #fdecec; color: var(--lu-coral-700); font-weight: 700; }

.ci-cta { margin-top: 18px; padding: 18px; border-radius: var(--lu-r-md); background: var(--lu-ink); color: #fff; text-align: left; }
.ci-cta h3 { margin: 0 0 6px; font-size: 19px; letter-spacing: -.02em; }
.ci-cta p { margin: 0; font-size: 14px; color: rgba(255,255,255,.78); }
.ci-cta .btn { width: 100%; justify-content: center; height: 50px; margin-top: 14px; font-size: 15px; text-transform: uppercase; letter-spacing: .02em; }

.ci-foot { margin: 0; padding: 4px 12px; border-radius: var(--lu-r-pill); background: rgba(20,20,20,.45); font-size: 11.5px; color: rgba(255,255,255,.9); text-align: center; max-width: none; }
.ci-foot a { color: inherit; text-decoration: underline; }

.ci-toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 80; max-width: calc(100% - 32px); transform: translate(-50%, 16px); padding: 12px 18px; border-radius: var(--lu-r-md); background: var(--lu-ink); color: #fff; font-size: 14px; font-weight: 700; box-shadow: var(--lu-shadow-lg); opacity: 0; pointer-events: none; transition: opacity var(--lu-dur) var(--lu-ease), transform var(--lu-dur) var(--lu-ease); }
.ci-toast.is-on { opacity: 1; transform: translate(-50%, 0); }