/* =========================================================
   Get Started landing page (QR destination)
   Hero matches the home page; form shell mirrors the popup.
   ========================================================= */

/* Hero — same treatment as the home page hero */
.lp-hero { position: relative; overflow: hidden; padding: 64px 0 150px; }
.lp-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(760px 420px at 80% 40%, rgba(21, 150, 240, .14), transparent 62%),
    linear-gradient(180deg, #fff 0%, var(--bg-soft) 100%);
}
.lp-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; }
.lp-hero h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
.lp-hero h1 span { color: var(--blue); }
.lp-hero .lead { margin-bottom: 28px; }

.lp-stage { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 330px; }
.lp-stage::after {
  content: ""; position: absolute; left: 14%; right: 14%; bottom: -10px; height: 28px;
  background: radial-gradient(closest-side, rgba(31, 37, 46, .2), transparent);
}
.lp-stage img { position: relative; z-index: 1; width: auto; mix-blend-mode: multiply; }
.lp-stage .main { height: 330px; z-index: 2; }
.lp-stage .side { height: 268px; }
.lp-stage .side:first-child { margin-right: -12px; }
.lp-stage .side:nth-child(3) { margin-left: -12px; }
.lp-stage .hero__badge { left: auto; right: 0; bottom: 120px; z-index: 3; }

/* Shell — mirrors the popup: white form + dark side panel */
.lp-shell {
  position: relative; z-index: 2; margin-top: -96px;
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-lg); overflow: hidden;
  scroll-margin-top: 96px;
}
.lp-form { padding: 44px 48px 40px; }
.lp-side {
  position: relative; overflow: hidden; padding: 44px 40px;
  background: linear-gradient(160deg, var(--slate-900), var(--slate)); color: #b6bfcb;
}
.lp-side::after {
  content: ""; position: absolute; right: -140px; top: -140px; width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(21, 150, 240, .32), transparent 70%); pointer-events: none;
}
.lp-side > * { position: relative; z-index: 1; }
.lp-side h3 { color: #fff; font-size: 1.35rem; margin-bottom: 24px; }
.lp-side .eyebrow { color: #6cc0ff; margin-bottom: 10px; }

.lp-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; counter-reset: lps; }
.lp-steps li { display: grid; grid-template-columns: 32px 1fr; gap: 14px; font-size: .92rem; line-height: 1.5; }
.lp-steps li::before {
  counter-increment: lps; content: counter(lps); width: 32px; height: 32px; border-radius: 50%;
  background: rgba(21, 150, 240, .18); color: #6cc0ff; display: grid; place-items: center;
  font-family: var(--head); font-weight: 700; font-size: .85rem;
}
.lp-steps strong { display: block; color: #fff; font-family: var(--head); font-weight: 600; font-size: .98rem; }

/* Progress */
.lp-progress { list-style: none; padding: 0; margin: 0 0 34px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lp-progress li {
  font-family: var(--head); font-weight: 600; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #9aa3af;
  transition: color .25s;
}
.lp-progress li::before {
  content: ""; display: block; height: 4px; border-radius: 4px; background: var(--line); margin-bottom: 10px; transition: background .25s;
}
.lp-progress li.is-active, .lp-progress li.is-done { color: var(--slate-900); }
.lp-progress li.is-active::before, .lp-progress li.is-done::before { background: var(--blue); }
.lead-form.is-done .lp-progress { display: none; }

.lp-panel { display: none; border: 0; padding: 0; margin: 0; min-width: 0; }
.lp-panel.is-active { display: block; animation: rise .35s cubic-bezier(.2, .8, .2, 1); }
.lp-panel > h2 { font-size: 1.65rem; margin-bottom: 6px; }
.lp-panel > .sub { color: var(--muted); margin-bottom: 28px; }

.lp-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.lp-nav .btn--primary { min-width: 180px; }
.lp-nav [data-back][hidden] { display: inline-flex; visibility: hidden; }
.lp-nav .btn svg { width: 18px; height: 18px; }
.lp-note { font-size: .8rem; color: var(--muted); margin: 16px 0 0; }

/* Fields */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid--addr { grid-template-columns: 2fr 1fr 1fr; }
.form-grid > *, .field, .field select { min-width: 0; }
.field select, .field textarea {
  font: inherit; padding: 13px 16px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--ink);
  transition: border-color .2s, box-shadow .2s; width: 100%;
}
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6977' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px;
}
.field select:invalid { color: #8a93a0; }
.field select option { color: var(--ink); }
.field textarea { min-height: 96px; resize: vertical; }
.field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(21, 150, 240, .15); }
.field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #d9443b; }
.field .opt { font-weight: 400; color: var(--muted); }

.lp-form .form-success { padding: 56px 0 40px; }
.lp-form .form-success h2 { font-size: 1.8rem; }
.lp-form .form-success p { color: var(--muted); max-width: 420px; margin: 0 auto 1.2em; }

.lp-after { padding: 72px 0 96px; }

@media (max-width: 1000px) {
  .lp-shell { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .lp-hero { padding: 40px 0 120px; }
  .lp-hero__grid { grid-template-columns: 1fr; }
  .lp-stage { display: none; }
}
@media (max-width: 600px) {
  .lp-form { padding: 28px 20px 26px; }
  .lp-side { padding: 32px 24px; }
  .lp-shell { border-radius: 18px; margin-top: -88px; }
  .form-grid, .form-grid--addr { grid-template-columns: 1fr; }
  .lp-nav .btn--primary { min-width: 0; flex: 1; }
}

/* Product bubbles */
.label-like { display: block; font-size: .82rem; font-weight: 600; color: var(--slate-700); margin-bottom: 4px; }
.pill-hint { font-size: .82rem; color: var(--muted); margin: 0 0 10px; }
.pill-hint b { color: var(--blue-600); font-weight: 600; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 22px; }
.pill { cursor: pointer; }
.pill input { position: absolute; opacity: 0; pointer-events: none; }
.pill span {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--line);
  font-size: .9rem; color: var(--slate-700); background: #fff; transition: all .15s; user-select: none;
}
.pill.is-suggested span { border-color: #b9dcf8; background: var(--blue-50); color: var(--slate-900); }
.pill.is-suggested span::before { content: "★"; font-size: .75rem; color: var(--blue); }
.pill:hover span { border-color: #9fcff5; }
.pill input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; }
.pill input:checked + span::before { color: #fff; }
.pill--green input:checked + span { background: var(--green); border-color: var(--green); }
.pill input:focus-visible + span { box-shadow: 0 0 0 4px rgba(21, 150, 240, .25); }

/* Fast path in the dark panel */
.lp-fast {
  margin-top: 34px; padding: 26px 24px; border-radius: 18px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
}
.lp-fast h3 { margin-bottom: 8px; }
.lp-fast > p { font-size: .92rem; margin: 0 0 18px; }
.lp-fast .btn svg { width: 18px; height: 18px; }
.lp-fast__alt { font-size: .85rem !important; margin: 14px 0 0 !important; text-align: center; }
.lp-fast__alt a { color: #fff; font-weight: 600; }

/* Booking pop-up */
.bk { position: fixed; inset: 0; z-index: 110; display: none; align-items: center; justify-content: center; padding: 20px; }
.bk.is-open { display: flex; }
.bk__backdrop { position: absolute; inset: 0; background: rgba(20, 25, 32, .6); backdrop-filter: blur(4px); animation: fade .25s ease; }
.bk__dialog {
  position: relative; width: 100%; max-width: 960px; height: min(760px, calc(100vh - 40px)); background: #fff; border-radius: 22px;
  box-shadow: var(--shadow-lg); overflow: hidden; display: flex; flex-direction: column; animation: rise .3s cubic-bezier(.2, .8, .2, 1);
}
.bk__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.bk__head strong { font-family: var(--head); font-size: 1.05rem; color: var(--slate-900); }
.bk__close { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--bg-soft); color: var(--slate-900); cursor: pointer; display: grid; place-items: center; flex: none; }
.bk__close svg { width: 18px; height: 18px; }
.bk__body { flex: 1; min-height: 0; }
.bk__body iframe { width: 100%; height: 100%; border: 0; display: block; }
.bk__empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px; }
.bk__empty .icon { margin: 0 auto 18px; }
.bk__empty p { color: var(--muted); max-width: 380px; }
.bk__empty .actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }
@media (max-width: 600px) {
  .bk { padding: 0; align-items: flex-end; }
  .bk__dialog { height: 92vh; border-radius: 20px 20px 0 0; }
}

/* After submit: one lane only — thank-you + optional booking, no side panel */
.lp-shell.is-done { grid-template-columns: 1fr; }
.lp-shell.is-done .lp-side { display: none; }
.lp-shell.is-done .lp-form { padding: 56px 48px; }
.lp-form .form-success { max-width: 520px; margin: 0 auto; padding: 8px 0; }
.lp-done-book {
  margin-top: 28px; padding: 24px; border-radius: 16px; background: var(--blue-50);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.lp-done-book strong { font-family: var(--head); font-weight: 600; color: var(--slate-900); font-size: 1.05rem; }
.lp-done-book span { color: var(--muted); font-size: .95rem; margin-bottom: 14px; }
.lp-done-book .btn svg { width: 18px; height: 18px; }
@media (max-width: 600px) { .lp-shell.is-done .lp-form { padding: 36px 20px; } }