/* Plan wizard and demo booking (funnel chrome). Hand-written on top of site.css: there is no prototype page for
   these steps, they are Rails forms with server state. Manual: docs/design/vendabo-site-2026/DESIGN.md § 6.25. */

.funnel { min-height: calc(100vh - 80px); padding: 32px 16px 120px; background: var(--cream); }
.funnel__frame { max-width: 640px; margin: 0 auto; }
.funnel__frame--wide { max-width: 880px; }
.funnel__frame--booking { max-width: 1040px; }
.funnel__card { border-radius: 16px; background: #ffffff; padding: 44px 48px 48px; border: 1px solid rgba(44, 62, 80, 0.06); }
.funnel .hidden { display: none !important; }

/* Step header: label, back link and progress */
.funnel__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.funnel__step { margin: 0; font-family: var(--mono); font-size: 13px; letter-spacing: 0.02em; color: var(--text-3); }
.funnel__back { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: 500 14px/1.4 var(--sans); color: var(--text-2); text-decoration: none; cursor: pointer; transition: color 200ms var(--ease); }
.funnel__back:hover { color: var(--navy); }
.funnel__back svg { width: 16px; height: 16px; }
.funnel__back:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 6px; }
.funnel__back + * { margin-top: 16px; }
.funnel__progress { margin: 12px 0 36px; height: 4px; border-radius: 999px; background: var(--sand); overflow: hidden; }
.funnel__progress i { display: block; height: 100%; border-radius: inherit; background: var(--orange); }

/* Type */
.funnel__title { margin: 0; font-family: var(--display); font-variation-settings: var(--display-fvs); font-weight: var(--display-wght); font-size: calc(40px * var(--ds)); line-height: 1.08; letter-spacing: var(--track-m); text-wrap: balance; }
.funnel__title--sm { font-size: calc(30px * var(--ds)); line-height: 1.12; letter-spacing: var(--track-s); }
.funnel__lead { margin: 14px 0 0; font-size: 18px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.funnel__body { margin: 12px 0 0; font-size: 16px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
.funnel__note { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text-3); text-wrap: pretty; }
.funnel__note a, .funnel__body a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; }
.funnel__center { text-align: center; }
.funnel .link-arrow svg { width: 16px; height: 16px; color: var(--orange); }
.funnel__notice { margin: 0 0 24px; padding: 14px 16px; border-radius: 12px; background: rgba(31, 157, 99, 0.1); color: #17694a; font-size: 15px; font-weight: 500; }
.funnel__alert { margin: 0 0 24px; padding: 14px 16px; border-radius: 12px; background: rgba(184, 50, 42, 0.08); color: #8f2620; font-size: 15px; font-weight: 500; }

/* Benefits and reasons */
.funnel__checks { list-style: none; margin: 24px 0 0; padding: 18px 20px; display: grid; gap: 10px; border-radius: 14px; background: var(--cream); }
.funnel__checks li { display: flex; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--text-2); }
.funnel__checks svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--orange); }

/* Forms */
.funnel__form { display: grid; gap: 18px; margin-top: 28px; }
.funnel__form--tight { margin-top: 0; }
.wizard-label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.wizard-input { width: 100%; height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--sand); background: #ffffff; font: 400 16px/1.4 var(--sans); color: var(--navy); transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease); }
textarea.wizard-input { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; }
select.wizard-input { appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%), linear-gradient(135deg, var(--navy) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.wizard-input::placeholder { color: rgba(44, 62, 80, 0.45); }
.wizard-input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-16); }
.funnel__inline { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.funnel__inline label { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
.funnel__submit { width: 100%; }

/* Radio choices as cards */
.wizard-choice { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--sand); background: #ffffff; cursor: pointer; transition: border-color 200ms var(--ease), background-color 200ms var(--ease), box-shadow 200ms var(--ease); }
.wizard-choice:hover { border-color: var(--line); }
.wizard-choice:has(input:checked) { border-color: var(--orange); background: var(--orange-08); box-shadow: 0 0 0 1px var(--orange); }
.wizard-choice:has(input:focus-visible) { outline: 2px solid var(--orange); outline-offset: 3px; }
.wizard-choices { display: grid; gap: 10px; }
.wizard-radio-input { appearance: none; flex: none; width: 20px; height: 20px; margin: 2px 0 0; border-radius: 50%; border: 1.5px solid #c9bba6; background: #ffffff; transition: border-color 200ms var(--ease), border-width 200ms var(--ease); }
.wizard-radio-input:checked, .wizard-radio-input.is-checked { border: 6px solid var(--orange); }
.wizard-radio-input:focus-visible { outline: none; }
.wizard-choice__label { display: block; font-size: 16px; font-weight: 600; line-height: 1.35; }
.wizard-choice__desc { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.wizard-choice__hint { display: block; margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: var(--cream); font-size: 13px; line-height: 1.45; color: var(--text-2); }

/* Trust strip under the steps */
.funnel__trust { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--sand); text-align: center; }
.funnel__trust p { margin: 0; font-size: 14px; font-weight: 500; color: var(--text-2); }
.funnel__trust .logos { margin-top: 20px; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px 16px; }
.funnel__trust .logos img { max-height: 28px; max-width: 84px; }

/* Recommendation */
.rec__reasons { margin-top: 28px; padding: 20px 22px; border-radius: 14px; background: var(--orange-08); }
.rec__reasons h2, .rec__overline { margin: 0; font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: #a35612; }
.rec__reasons ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.rec__reasons li { display: flex; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--navy); text-wrap: pretty; }
.rec__reasons svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--orange); }
.rec__form { display: grid; gap: 36px; margin-top: 28px; }
.rec__invest { padding: 24px; border-radius: 14px; background: var(--navy); color: #ffffff; }
.rec__invest .rec__overline { color: rgba(255, 255, 255, 0.72); }
.wizard-price { margin: 10px 0 0; font-family: var(--display); font-size: 22px; line-height: 1.35; letter-spacing: var(--track-s); text-wrap: pretty; }
.rec__next { display: grid; gap: 10px; justify-items: center; }
.rec__block h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.rec__block > .funnel__body { margin-top: 6px; }
.wizard-selection { margin-top: 16px; padding: 18px 20px; border-radius: 14px; border: 1px solid var(--orange); box-shadow: 0 0 0 1px var(--orange); background: #ffffff; }
.wizard-selection .rec__overline { display: inline-flex; padding: 3px 8px; border-radius: 999px; background: var(--orange-16); font-size: 11.5px; }
.wizard-selection__name { margin: 10px 0 0; font-size: 17px; font-weight: 600; }
.wizard-selection__body { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.wizard-whatsapp-alt { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.wizard-whatsapp-alt:hover { color: var(--navy); text-decoration-color: var(--orange); }
.wizard-whatsapp-alt svg { width: 16px; height: 16px; color: var(--ok); }
.rec__whatsapp { text-align: center; }

/* Disclosures (other plan, commissions, package detail) */
.funnel-details { margin-top: 16px; border-top: 1px solid var(--sand); }
.funnel-details summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; font-size: 15px; font-weight: 600; cursor: pointer; }
.funnel-details summary::-webkit-details-marker { display: none; }
.funnel-details summary::after { content: '+'; font-size: 22px; font-weight: 400; line-height: 1; color: var(--orange); transition: transform 400ms var(--ease); }
.funnel-details[open] > summary::after { transform: rotate(45deg); }
.funnel-details summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 6px; }
.funnel-details__body { padding-bottom: 16px; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.funnel-details--quiet { margin-top: 4px; }
.funnel-details--quiet summary { font-size: 14px; font-weight: 500; color: var(--text-2); }

/* Plan comparison: cards on phones, a table on wide screens */
.plan-cards { display: grid; gap: 10px; }
.plan-card { display: block; padding: 0; }
.plan-card__head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px 12px; }
.wizard-plan-name { display: block; font-size: 16px; font-weight: 600; }
.plan-tag { display: inline-flex; margin: 6px 6px 0 0; padding: 2px 8px; border-radius: 999px; background: var(--orange-16); font-size: 11.5px; font-weight: 600; color: #a35612; }
.plan-tag--navy { background: var(--navy); color: #ffffff; }
.plan-meta { display: block; margin-top: 4px; font-size: 12.5px; color: var(--text-3); }
.plan-card dl { margin: 0; padding: 0 18px 8px 52px; }
.plan-row { padding: 10px 0; border-top: 1px solid var(--sand); }
.plan-row dt { font-size: 13px; color: var(--text-3); }
.plan-row dd { margin: 3px 0 0; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.plan-extra p { margin: 16px 0 6px; font-size: 14px; font-weight: 600; }
.plan-table-wrap { overflow-x: auto; }
.wizard-plan-compare-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.wizard-plan-compare-table--wide { min-width: 600px; }
.wizard-plan-compare-table--wider { min-width: 720px; }
.wizard-plan-compare-table th, .wizard-plan-compare-table td { padding: 0; vertical-align: middle; }
.wizard-plan-compare-table thead th { vertical-align: top; }
.wizard-plan-compare-table tbody td { border-top: 1px solid var(--sand); }
.wizard-plan-compare-table td:first-child { padding: 12px 12px 12px 0; color: var(--text-2); font-weight: 500; }
.wizard-plan-compare-table label { display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 48px; height: 100%; padding: 12px; text-align: center; cursor: pointer; transition: background-color 200ms var(--ease); }
.wizard-plan-compare-table thead label { justify-content: flex-start; min-height: 96px; border-radius: 12px 12px 0 0; }
.wizard-plan-compare-table label:hover { background: var(--cream); }
.wizard-plan-compare-table[data-selected-plan="shop"] label[data-plan-code="shop"],
.wizard-plan-compare-table[data-selected-plan="plus"] label[data-plan-code="plus"],
.wizard-plan-compare-table[data-selected-plan="premium"] label[data-plan-code="premium"] { background: var(--orange-08); }
.wizard-plan-desktop-radio { display: block; margin: 0 0 10px; }
.plan-cell--upgrade { font-weight: 600; color: var(--navy); }
.wizard-plan-cell-premium b { display: block; font-weight: 600; color: #a35612; }
.wizard-plan-cell-premium small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-3); }

.funnel__video { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000000; }
.funnel__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Mobile sticky call to action on the recommendation */
.wizard-summary-sticky { display: none; }
.wizard-checkout-cta { width: 100%; }

/* Not eligible */
.funnel__media { margin-top: 24px; padding: 24px; border-radius: 14px; background: var(--cream); text-align: center; }
.funnel__media video { display: block; width: 100%; max-width: 224px; margin: 0 auto; border-radius: 12px; }

/* Booking: sidebar and calendar in one card */
.booking { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); padding: 0; overflow: hidden; }
.booking__side { padding: 40px; border-right: 1px solid var(--sand); }
.booking__main { padding: 40px; }
.booking__main .funnel__title { margin-top: 10px; }
.booking__package { margin-top: 24px; padding: 18px 20px; border-radius: 14px; background: var(--cream); }
.booking__package b { display: block; margin-top: 6px; font-size: 16px; font-weight: 600; }
.booking__meet { display: flex; align-items: center; gap: 10px; margin-top: 24px; font-size: 15px; font-weight: 600; }
.booking__meet svg { width: 20px; height: 20px; color: var(--orange); }
.booking__guide { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--sand); }
.booking__guide h3 { margin: 0; font-size: 15px; font-weight: 600; }
.booking__guide ol { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 16px; counter-reset: guide; }
.booking__guide li { position: relative; padding-left: 40px; counter-increment: guide; }
.booking__guide li::before { content: counter(guide); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--orange-16); color: #a35612; font: 500 13px/26px var(--mono); text-align: center; }
.booking__guide li:last-child::before { background: var(--orange); color: #ffffff; }
.booking__guide b { display: block; font-size: 14.5px; font-weight: 600; }
.booking__guide span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.booking__step { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--sand); }
.booking__desc { margin-top: 16px; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }

.cal { margin-top: 24px; }
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cal__month { margin: 0; font-size: 17px; font-weight: 600; text-transform: capitalize; }
.cal__nav { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; background: var(--beige); color: var(--navy); transition: background-color 200ms var(--ease); }
.cal__nav:hover { background: var(--sand); }
.cal__nav.is-off { opacity: 0.35; pointer-events: none; }
.cal__nav svg { width: 18px; height: 18px; }
.cal__week, .cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal__week { margin-bottom: 6px; font-size: 12px; color: var(--text-3); text-align: center; }
.cal__day { height: 44px; display: grid; place-items: center; border-radius: 10px; font: 500 15px/1 var(--sans); font-variant-numeric: tabular-nums; color: rgba(44, 62, 80, 0.32); }
.cal__day--out { color: rgba(44, 62, 80, 0.14); }
button.cal__day { border: 1px solid var(--sand); background: #ffffff; color: var(--navy); font-weight: 600; cursor: pointer; transition: border-color 200ms var(--ease), background-color 200ms var(--ease), color 200ms var(--ease); }
button.cal__day:hover { border-color: var(--orange); }
button.cal__day.is-today { box-shadow: inset 0 0 0 1px var(--orange); }
button.cal__day.is-selected, .slot.is-selected { border-color: var(--navy); background: var(--navy); color: #ffffff; }
button.cal__day:focus-visible, .slot:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin-top: 16px; }
.slot { height: 44px; border-radius: 10px; border: 1px solid var(--sand); background: #ffffff; font: 600 15px/1 var(--sans); color: var(--navy); white-space: nowrap; cursor: pointer; transition: border-color 200ms var(--ease), background-color 200ms var(--ease), color 200ms var(--ease); }
.slot:hover { border-color: var(--orange); }
.booking__when { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 6px 12px; border-radius: 999px; background: var(--cream); font-size: 14px; font-weight: 500; }
.booking__when svg { width: 16px; height: 16px; color: var(--orange); }
.booking__guest { margin-top: 20px; padding: 18px 20px; border-radius: 14px; background: var(--cream); display: grid; gap: 4px; font-size: 14.5px; color: var(--text-2); }
.booking__guest b { font-size: 16px; color: var(--navy); }
.booking__guest p { margin: 0; }
.booking__guest .booking__plan { margin-top: 8px; color: var(--navy); }

/* Confirmation and cancel */
.done__mark { width: 64px; height: 64px; margin: 0 auto 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(31, 157, 99, 0.12); color: var(--ok); }
.done__mark svg { width: 30px; height: 30px; }
.done__panel { margin-top: 28px; padding: 22px 24px; border-radius: 14px; background: var(--cream); text-align: left; }
.done__panel + .done__panel { margin-top: 12px; }
.done__panel h2, .done__panel h3 { margin: 0; font-size: 16px; font-weight: 600; }
.done__panel p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.done__rows { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.done__rows li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--text-2); }
.done__rows svg { flex: none; width: 18px; height: 18px; color: var(--orange); }
.done__panel .pill { margin-top: 14px; }
.done__panel .funnel__video { margin-top: 16px; }
.done__foot { margin: 28px 0 0; font-size: 14px; color: var(--text-3); }
.done__foot a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; }
.funnel__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* Event types list */
.events { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
.event { display: flex; align-items: flex-start; gap: 14px; padding: 20px; border-radius: 14px; border: 1px solid var(--sand); background: #ffffff; color: var(--navy); text-decoration: none; transition: border-color 200ms var(--ease); }
.event:hover { border-color: var(--orange); }
.event b { display: block; font-size: 16px; font-weight: 600; }
.event span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--text-2); }

.desk-only { display: block; }
.mob-only { display: none; }

@media (max-width: 960px) {
  .funnel { padding: 16px 12px 112px; }
  .funnel__card { padding: 28px 20px 32px; }
  .funnel__title { font-size: calc(32px * var(--ds)); }
  .funnel__title--sm { font-size: calc(26px * var(--ds)); }
  .funnel__lead { font-size: 17px; }
  .funnel__progress { margin-bottom: 28px; }
  .funnel__trust .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .desk-only { display: none; }
  .mob-only { display: block; }
  .rec__invest { padding: 20px; }
  .wizard-price { font-size: 19px; }
  .wizard-summary-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--sand); }
  .wizard-summary-sticky__price { margin: 0; font-size: 13px; text-align: center; color: var(--text-2); }
  .booking { grid-template-columns: minmax(0, 1fr); }
  .booking__main { order: -1; padding: 28px 20px 32px; }
  .booking__side { padding: 28px 20px 32px; border-right: 0; border-top: 1px solid var(--sand); }
  .cal__week, .cal__grid { gap: 4px; }
  .cal__day { height: 42px; }
  .funnel__actions, .events { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .funnel *, .funnel *::after { transition: none !important; }
}