/* GENERATED FILE - DO NOT EDIT.
   Source: shared/welcome-gift.css - run `npm run sync:shared` after editing. */

/* The welcome window (shared/welcome-gift.js, owner 2026-10-12) — app + website. A bottom sheet on phones (two
   steps), a centred window on a wide screen (both panes side by side). Motion stops under reduced motion. */
.lbw-back {
  --lbw-forest: #12673d;
  --lbw-deep: #0e5131;
  --lbw-ink: #13251e;
  --lbw-text: #1b2a23;
  --lbw-soft: #4f4d45;
  --lbw-gold: #f9ce7a;
  --lbw-amber: #f7bb50;
  --lbw-cream: #fbf6ec;
  --lbw-card: #fffdf8;
  --lbw-line: #e6dcc6;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(12, 24, 19, 0.55);
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--lbw-text);
  animation: lbwFade 0.25s ease both;
}
.lbw-back.is-closing { animation: lbwFadeOut 0.2s ease both; }
.lbw {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 30rem;
  max-height: calc(100dvh - 2.5rem);
  box-sizing: border-box;
  padding: 0.5rem 1.25rem calc(1.1rem + var(--safe-bot, env(safe-area-inset-bottom, 0px)));
  border-radius: 26px 26px 0 0;
  background: var(--lbw-cream);
  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.25);
  animation: lbwSheet 0.55s cubic-bezier(0.2, 0, 0, 1) both;
}
.lbw-handle { align-self: center; flex: none; width: 2.5rem; height: 0.26rem; margin-bottom: 0.6rem; border-radius: 999px; background: #d6ccb6; }

/* ——— the band: confetti, the plane on its route, LakBi waving ——— */
.lbw-band { position: relative; flex: none; height: 11.5rem; overflow: hidden; border-radius: 22px; background: var(--lbw-forest); color: #fff; }
.lbw-sky { position: absolute; inset: 0; width: 100%; height: 100%; }
.lbw-route { stroke-dasharray: 3 9; animation: lbwDash 7s linear infinite; }
.lbw-hero { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0.6rem; padding-bottom: 1rem; }
.lbw-lakbi-wrap { position: relative; width: 104px; height: 104px; }
.lbw-bob { animation: lbwBob 3.2s ease-in-out infinite; }
.lbw-lakbi { display: block; }
.lbw-wave { transform-box: view-box; transform-origin: 30px 47px; animation: lbwWave 2.8s ease-in-out 0.7s infinite; }
.lbw-blink { transform-box: fill-box; transform-origin: center; animation: lbwBlink 4.6s infinite; }
.lbw-spark { position: absolute; color: var(--lbw-gold); animation: lbwTwinkle 2.4s ease-in-out infinite; }
.lbw-pill { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; padding: 0.35rem 0.9rem; border-radius: 999px; background: rgba(14, 81, 49, 0.92); color: var(--lbw-gold); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.lbw-conf { position: absolute; top: 0; width: 7px; height: 11px; border-radius: 2px; animation: lbwFall 2.8s cubic-bezier(0.3, 0.6, 0.4, 1) both; pointer-events: none; }
.lbw-conf.is-round { width: 8px; height: 8px; border-radius: 50%; }
.lbw-x { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: #fff; cursor: pointer; }
.lbw-x:hover { background: rgba(255, 255, 255, 0.26); }
.lbw-pass { display: none; }

/* ——— the panes ——— */
.lbw-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-top: 1rem; }
.lbw[data-step="0"] .lbw-pane.is-included,
.lbw[data-step="1"] .lbw-pane.is-thanks,
.lbw[data-step="1"] .lbw-band { display: none; }
.lbw-pane { display: flex; flex-direction: column; gap: 0.7rem; }
.lbw-pane.is-thanks { align-items: center; text-align: center; }
.lbw h2 { margin: 0; font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-size: 1.75rem; line-height: 1.12; color: var(--lbw-ink); text-wrap: balance; }
.lbw-lede { max-width: 21rem; margin: 0; color: var(--lbw-soft); font-size: 0.95rem; line-height: 1.5; }
.lbw-report { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 1.1rem; border: 1.5px solid #c9bfa8; border-radius: 999px; background: var(--lbw-card); color: var(--lbw-text); font: 700 0.875rem "DM Sans", system-ui, sans-serif; text-decoration: none; cursor: pointer; }
.lbw-report:hover { border-color: var(--lbw-forest); }
.lbw-gift { position: relative; display: flex; flex-direction: column; gap: 0.45rem; width: 100%; box-sizing: border-box; margin-top: 0.4rem; padding: 1.1rem 1.15rem; overflow: hidden; border-radius: 22px; background: var(--lbw-forest); color: #fff; text-align: left; box-shadow: 0 14px 28px -16px rgba(14, 81, 49, 0.8); }
.lbw-gift::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, rgba(249, 206, 122, 0), rgba(249, 206, 122, 0.26), rgba(249, 206, 122, 0)); animation: lbwShine 4.6s ease-in-out 1.6s infinite; pointer-events: none; }
.lbw-gift-head { display: flex; align-items: center; gap: 0.6rem; }
.lbw-gift-ico { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 12px; background: rgba(249, 206, 122, 0.18); color: var(--lbw-gold); animation: lbwWiggle 4.6s ease-in-out 1.4s infinite; }
.lbw-kick { color: var(--lbw-gold); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.lbw-gift-title { margin: 0; font-family: "Playfair Display", Georgia, serif; font-size: 1.5rem; font-weight: 800; line-height: 1.18; }
.lbw-gift-line { margin: 0; color: #e3efe8; font-size: 0.875rem; line-height: 1.5; }

.lbw-h2 { font-size: 1.6rem !important; }
.lbw-sub { margin: -0.3rem 0 0.1rem; color: var(--lbw-soft); font-size: 0.875rem; line-height: 1.45; }
.lbw-list { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.8rem 0.9rem; border-radius: 18px; }
.lbw-list.is-free { border: 1px solid var(--lbw-line); background: var(--lbw-card); }
.lbw-list.is-book { background: var(--lbw-forest); color: #fff; }
.lbw-list h3 { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0 0 0.1rem; font-size: 0.95rem; font-weight: 800; }
.lbw-tag { padding: 0.18rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 800; }
.lbw-list.is-free .lbw-tag { background: #e3efe8; color: var(--lbw-deep); }
.lbw-list.is-book .lbw-tag { background: var(--lbw-gold); color: #3d2a05; }
.lbw-list ul { display: grid; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.lbw-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 0.55rem; font-size: 0.85rem; line-height: 1.3; }
.lbw-li-ico { margin-top: 1px; }
.lbw-list.is-free .lbw-li-ico { color: var(--lbw-forest); }
.lbw-list.is-book .lbw-li-ico { color: var(--lbw-gold); }
.lbw-soon { margin-left: 0.4rem; padding: 0.05rem 0.5rem; border-radius: 999px; background: var(--lbw-gold); color: #3d2a05; font-size: 0.68rem; font-style: normal; font-weight: 800; }
.lbw-pertrip { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.75rem 0.9rem; border: 1.5px dashed #c9bfa8; border-radius: 18px; background: var(--lbw-card); }
.lbw-pertrip-head { display: flex; align-items: center; gap: 0.6rem; }
.lbw-pertrip-head b { color: var(--lbw-ink); font-size: 0.95rem; line-height: 1.25; }
.lbw-pertrip-ico { display: grid; flex: none; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 11px; background: #fdf0d2; color: #8a5a06; }
.lbw-pertrip p { margin: 0; color: var(--lbw-soft); font-size: 0.8rem; line-height: 1.45; }
.lbw-pertrip.is-wide { display: none; }
.lbw:focus { outline: none; }

/* ——— the foot: Back · dots · See what's included / Let's plan my trip ——— */
.lbw-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.6rem; flex: none; padding-top: 0.9rem; }
.lbw-dots { display: flex; justify-content: center; gap: 6px; grid-column: 2; }
.lbw-dots span { width: 8px; height: 8px; border-radius: 999px; background: #d6ccb6; transition: width 0.2s ease, background 0.2s ease; }
.lbw[data-step="0"] .lbw-dots span:first-child,
.lbw[data-step="1"] .lbw-dots span:last-child { width: 22px; background: var(--lbw-forest); }
.lbw-btn { min-height: 3.2rem; padding: 0 1.3rem; border-radius: 999px; font: 800 1rem "DM Sans", system-ui, sans-serif; cursor: pointer; }
.lbw-btn.is-solid { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; grid-column: 1 / -1; grid-row: 2; border: 0; background: #1f3d30; color: #fff; }
.lbw-btn.is-solid:hover { background: #14291f; }
.lbw-btn.is-quiet { grid-column: 1; grid-row: 1; justify-self: start; min-height: 2.5rem; padding: 0 0.9rem; border: 1.5px solid #c9bfa8; background: transparent; color: var(--lbw-text); font-size: 0.875rem; }
.lbw[data-step="0"] .lbw-back-btn,
.lbw[data-step="0"] .lbw-done,
.lbw[data-step="1"] .lbw-next { display: none; }
.lbw-next svg { animation: lbwNudge 2.2s ease-in-out 2.2s infinite; }
.lbw button:focus-visible,
.lbw a:focus-visible { outline: 3px solid var(--lbw-amber); outline-offset: 2px; }
.lbw-in { animation: lbwIn 0.6s cubic-bezier(0.2, 0, 0, 1) both; }

/* ——— a wide screen: one window, both panes, the boarding pass ——— */
@media (min-width: 60rem) {
  .lbw-back { align-items: center; padding: 1.5rem; }
  .lbw { max-width: 58rem; max-height: calc(100dvh - 3rem); padding: 1.5rem 2rem 1.6rem; border-radius: 26px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5); animation-name: lbwPop; }
  .lbw-handle { display: none; }
  .lbw[data-step] .lbw-band { display: flex; height: 10rem; }
  .lbw-hero { position: relative; flex: 1 1 auto; flex-direction: row; justify-content: flex-start; align-items: center; gap: 1.1rem; padding: 0 1.75rem; }
  .lbw-pass { position: relative; display: flex; flex: none; flex-direction: column; justify-content: center; gap: 0.5rem; width: 17.5rem; box-sizing: border-box; padding: 2.4rem 1.25rem 2.2rem 1.5rem; border-left: 2px dashed rgba(249, 206, 122, 0.45); background: rgba(14, 81, 49, 0.55); }
  .lbw-pass-kick { color: var(--lbw-gold); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
  .lbw-pass dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.25rem 0.75rem; margin: 0; font-size: 0.8rem; }
  .lbw-pass dt { color: #b9d6c6; }
  .lbw-pass dd { margin: 0; font-weight: 700; }
  .lbw-stamp { position: absolute; right: 1.1rem; bottom: 0.55rem; padding: 0.2rem 0.5rem; border: 2px solid var(--lbw-gold); border-radius: 6px; color: var(--lbw-gold); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; animation: lbwStamp 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) 1s both; }
  .lbw-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.75rem; padding-top: 1.25rem; }
  .lbw[data-step] .lbw-pane.is-thanks,
  .lbw[data-step] .lbw-pane.is-included { display: flex; }
  .lbw-pane.is-thanks { align-items: flex-start; text-align: left; }
  .lbw-h2 { display: none; }
  .lbw-pertrip.is-wide { display: flex; margin-top: 0.4rem; }
  .lbw-pertrip.is-narrow { display: none; }
  .lbw-pane.is-thanks .lbw-pertrip { width: 100%; box-sizing: border-box; text-align: left; }
  .lbw-foot { display: flex; justify-content: flex-end; padding-top: 1.1rem; }
  .lbw-foot .lbw-back-btn,
  .lbw-foot .lbw-dots,
  .lbw-foot .lbw-next { display: none !important; }
  .lbw-foot .lbw-done { display: inline-flex !important; padding: 0 2.1rem; }
}

@keyframes lbwFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lbwFadeOut { to { opacity: 0; } }
@keyframes lbwSheet { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }
@keyframes lbwPop { from { opacity: 0; transform: translateY(24px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes lbwIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes lbwBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes lbwWave { 0%, 55%, 100% { transform: rotate(0); } 10% { transform: rotate(-24deg); } 20% { transform: rotate(8deg); } 30% { transform: rotate(-20deg); } 40% { transform: rotate(6deg); } }
@keyframes lbwBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.12); } }
@keyframes lbwTwinkle { 0%, 100% { opacity: 0.2; transform: scale(0.55) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
@keyframes lbwFall { 0% { opacity: 0; transform: translateY(-16px) rotate(0); } 12% { opacity: 1; } 100% { opacity: 0; transform: translateY(190px) rotate(var(--spin, 540deg)); } }
@keyframes lbwShine { 0%, 55% { transform: translateX(-120%) skewX(-18deg); } 85%, 100% { transform: translateX(280%) skewX(-18deg); } }
@keyframes lbwWiggle { 0%, 78%, 100% { transform: rotate(0); } 82% { transform: rotate(-14deg); } 86% { transform: rotate(11deg); } 90% { transform: rotate(-6deg); } }
@keyframes lbwNudge { 0%, 70%, 100% { transform: translateX(0); } 80% { transform: translateX(5px); } }
@keyframes lbwStamp { 0% { opacity: 0; transform: rotate(-14deg) scale(1.8); } 60% { opacity: 1; transform: rotate(-14deg) scale(0.92); } 100% { opacity: 1; transform: rotate(-14deg) scale(1); } }
@keyframes lbwDash { to { stroke-dashoffset: -130; } }
@media (prefers-reduced-motion: reduce) {
  .lbw-back, .lbw, .lbw-in, .lbw-bob, .lbw-wave, .lbw-blink, .lbw-spark, .lbw-route, .lbw-gift::after, .lbw-gift-ico, .lbw-next svg, .lbw-stamp { animation: none !important; }
  .lbw-conf, .lbw-plane { display: none; }
}