/* "See what your restaurant could look like" (/try, 2.0). Loaded after site.css, so it uses the website's own colours,
   type and buttons. Without JavaScript the first three steps show as one page (the designs and their live demos);
   public/try.js adds .try-live and shows one step at a time. */

.try-hero { padding: clamp(28px, 3vw + 12px, 56px) 0 clamp(20px, 2vw + 8px, 32px); background: radial-gradient(100% 120% at 100% 0%, var(--tangerine-50) 0%, rgba(255, 244, 236, 0) 55%), linear-gradient(180deg, #fff, var(--stone-50)); border-bottom: 1px solid var(--line); }
.try-hero h1 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.2rem); max-width: 18ch; }
.try-hero .lead { margin-top: 14px; max-width: 46rem; }
.try-app-sec { padding-top: clamp(24px, 2vw + 12px, 40px); background: var(--stone-50); }
.try-app { position: relative; max-width: 1120px; margin: 0 auto; padding: clamp(18px, 2vw + 8px, 36px); border: 1px solid var(--line); border-radius: 26px; background: #fff; box-shadow: var(--shadow-2); }

/* progress: five numbered steps; done steps can be opened again */
.try-progress { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.try-progress li { min-width: 0; }
.try-progress li > span, .try-progress button { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 2px 6px; border: 0; background: none; font: 600 .875rem/1.25 var(--text); color: var(--ink-3); text-align: left; }
.try-progress button:not(:disabled) { cursor: pointer; }
.try-progress button:not(:disabled):hover { color: var(--ink); }
.try-progress button:disabled { cursor: default; }
.try-progress li > span::before, .try-progress button::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 4px; background: var(--line); transition: background-color .3s ease; }
.try-progress .is-done button::before { background: var(--teal-600); }
.try-progress .is-on button::before { background: var(--tangerine); }
.tp-n { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--stone-100); color: var(--ink-2); font: 700 .75rem/1 var(--text); transition: background-color .3s ease, color .3s ease; }
.is-done .tp-n { background: var(--teal-700); color: #fff; }
.is-on .tp-n { background: var(--tangerine); color: var(--teal-950); }
.is-on .tp-t, .is-done .tp-t { color: var(--ink); }
.try-summary { margin: -4px 0 14px !important; display: inline-flex; padding: 6px 12px; border-radius: 999px; background: var(--teal-50); font: 600 .875rem/1.3 var(--text); color: var(--teal-800); }

.try-step { min-width: 0; }
.try-live .try-step { animation: ts-in .45s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes ts-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ts-head { margin-bottom: 20px; }
.ts-kicker { margin: 0 0 6px !important; font: 600 .875rem/1.2 var(--text); color: var(--teal-700); }
.ts-head h2 { font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.15rem); }
.ts-head h2:focus { outline: none; }
.ts-head h2:focus-visible { outline: 3px solid var(--teal-700); outline-offset: 4px; }
.ts-head .lead { margin-top: 8px; font-size: 1.0625rem; }

/* step 1 and 2: bigger chips and food photos than on the home page */
.tq-chips-lg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tq-chips-lg .tq-chip > span { width: 100%; min-height: 64px; padding: 12px 16px; border-radius: 16px; font-size: 1.0313rem; }
.tq-chips-lg .tq-chip > span svg { width: 24px; height: 24px; }
.tq-foods-lg { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.tq-foods-lg .tq-name { font-size: .9375rem; }

/* step 3: the designs, best first */
.td-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.td-card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.td-card.td-more { display: none; }
.td-pick { flex: 1; display: flex; flex-direction: column; border: 1.5px solid var(--line); border-radius: 18px; overflow: hidden; background: #fff; cursor: pointer; transition: border-color .2s ease, box-shadow .25s ease, transform .3s cubic-bezier(.2, .7, .2, 1); }
.td-pick:hover { border-color: var(--line-2); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.td-pick:has(input:checked) { border-color: var(--look, var(--teal-700)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--look, var(--teal-700)) 30%, transparent), var(--shadow-2); }
.td-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--stone-100); }
.td-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.td-pick:hover .td-media img { transform: scale(1.04); }
.td-badge { position: absolute; left: 10px; top: 10px; padding: 5px 10px; border-radius: 999px; background: var(--tangerine); color: var(--teal-950); font: 700 .75rem/1 var(--text); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.td-body { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; border-top: 4px solid var(--look, var(--teal-700)); }
.td-name { font: 700 1.125rem/1.2 var(--display); letter-spacing: -0.01em; }
.td-mood { font-size: .875rem; color: var(--teal-700); font-weight: 600; }
.td-sum { font-size: .9063rem; line-height: 1.45; color: var(--ink-2); }
.td-choose { margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 8px; font: 600 .9063rem/1.2 var(--text); color: var(--ink-2); }
.td-choose::before { content: ''; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-2); background: #fff; transition: all .2s ease; }
.td-pick:has(input:checked) .td-choose { color: var(--ink); }
.td-pick:has(input:checked) .td-choose::before { border-color: var(--look, var(--teal-700)); background: var(--look, var(--teal-700)); box-shadow: inset 0 0 0 4px #fff; }
.td-pick:has(input:checked) .td-choose { font-size: 0; }
.td-pick:has(input:checked) .td-choose::after { content: 'Your design'; font: 600 .9063rem/1.2 var(--text); }
.td-pick input:focus-visible ~ .td-body .td-name { outline: 3px solid var(--teal-700); outline-offset: 3px; border-radius: 4px; }
.td-demo { align-self: flex-start; margin: 8px 4px 0; font-size: .875rem; font-weight: 600; }
.td-all { margin: 20px 0 0 !important; text-align: center; }

/* step 4: name, logo and colour, with a small live preview beside them */
.try-mine { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
.tm-fields { display: grid; gap: 22px; }
.tm-fields .field { margin: 0; }
.tm-fields .field input[type=text], .tm-fields .field input:not([type]) { width: 100%; }
.tm-label { display: block; margin-bottom: 8px; font-weight: 600; }
.tm-logo-row { display: flex; align-items: center; gap: 16px; }
.tm-logo-prev { flex: none; display: grid; place-items: center; width: 76px; height: 76px; border: 1.5px dashed var(--line-2); border-radius: 18px; background: var(--stone-50); color: var(--ink-3); overflow: hidden; }
.tm-logo-prev.has-logo { border-style: solid; background: #fff; }
.tm-logo-prev img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.tm-logo-act .actions { gap: 8px; }
.tm-logo-act p { margin: 6px 0 0 !important; }
.tm-logo-status:empty { display: none; }
.tm-logo-status.is-bad { color: var(--bad); font-weight: 600; }
.tm-colours { margin: 0; padding: 0; border: 0; min-width: 0; }
.tm-colours legend { margin-bottom: 10px; padding: 0; font-weight: 600; }
.tm-swatches { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tm-sw { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.tm-sw > span { display: block; width: 40px; height: 40px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); transition: box-shadow .15s ease, transform .2s ease; }
.tm-sw:hover > span { transform: scale(1.06); }
.tm-sw input:checked + span { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink); }
.tm-sw input:focus-visible + span { outline: 3px solid var(--teal-700); outline-offset: 5px; }
.tm-sw-own { padding-right: 10px; margin-right: 4px; border-right: 1px solid var(--line); }
.tm-sw-own b { font: 600 .875rem/1.2 var(--text); color: var(--ink-2); }
.tm-sw-custom { gap: 6px; }
.tm-custom-sw { background: conic-gradient(from 0deg, #e53935, #fb8c00, #fdd835, #43a047, #1e88e5, #8e24aa, #e53935) !important; position: relative; }
.tm-custom-sw::after { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--sw, #fff); box-shadow: 0 0 0 2px #fff; }
.tm-sw-custom input[type=color] { width: 44px; height: 40px; padding: 2px; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; cursor: pointer; }
[data-colour-note] { margin: 10px 0 0 !important; }
[data-colour-note].is-warn { color: #8a3b00; font-weight: 600; }
.tm-preview { position: sticky; top: calc(var(--header-h) + 20px); }
.tm-mini { --mini: #0e5751; --mini-ink: #fff; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: #fff; box-shadow: var(--shadow-2); transition: box-shadow .3s ease; }
.tm-mini-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 3px solid var(--mini); transition: border-color .3s ease; }
.tm-mini-logo { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--mini); color: var(--mini-ink); font: 700 1.125rem/1 var(--display); overflow: hidden; transition: background-color .3s ease; }
.tm-mini-logo.has-logo { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.tm-mini-logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.tm-mini-head b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 1.0625rem/1.2 var(--display); }
.tm-mini-bag { margin-left: auto; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--mini); transition: background-color .3s ease; }
.tm-mini-photo { aspect-ratio: 16 / 9; background: var(--stone-100); overflow: hidden; }
.tm-mini-photo img { width: 100%; height: 100%; object-fit: cover; }
.tm-mini-body { display: grid; gap: 8px; padding: 16px; }
.tm-mini-line { height: 10px; border-radius: 6px; background: var(--stone-100); }
.tm-mini-line.tm-short { width: 62%; }
.tm-mini-btn { justify-self: start; margin-top: 6px; padding: 10px 16px; border-radius: 12px; background: var(--mini); color: var(--mini-ink); font: 600 .9063rem/1 var(--text); transition: background-color .3s ease, color .3s ease; }
.tm-preview > p { margin: 10px 4px 0 !important; }

/* step 5: the real website in a frame */
.tp-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 14px; }
.tp-what { margin: 0 !important; font: 600 1rem/1.35 var(--text); color: var(--ink); }
.tp-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tp-seg { display: inline-flex; padding: 4px; border-radius: 12px; background: var(--stone-100); }
.tp-seg button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px; border: 0; border-radius: 9px; background: none; font: 600 .875rem/1 var(--text); color: var(--ink-2); cursor: pointer; }
.tp-seg button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: var(--shadow-1); }
.tp-stage { position: relative; display: flex; justify-content: center; padding: clamp(10px, 2vw, 24px); border-radius: 20px; background: linear-gradient(180deg, var(--stone-100), var(--stone-50)); overflow: hidden; }
.tp-device { position: relative; display: flex; flex-direction: column; max-width: 100%; border-radius: 14px; background: #0D1A19; box-shadow: var(--shadow-3); overflow: hidden; transition: border-radius .3s ease; }
.tp-chrome { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; background: #1E2A28; }
.tp-chrome i { width: 10px; height: 10px; border-radius: 50%; background: #3A4846; }
.tp-chrome span { margin-left: 10px; flex: 1; max-width: 360px; height: 22px; padding: 0 10px; border-radius: 6px; background: #0F1716; color: #A9B6B3; font: 500 .75rem/22px var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-viewport { position: relative; overflow: hidden; background: #fff; }
.tp-viewport iframe { display: block; border: 0; transform-origin: 0 0; background: #fff; }
.tp-stage[data-device="mobile"] .tp-device { padding: 12px; border-radius: 44px; }
.tp-stage[data-device="mobile"] .tp-chrome { display: none; }
.tp-stage[data-device="mobile"] .tp-viewport { border-radius: 32px; }
.tp-loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0 !important; background: rgba(247, 247, 246, .82); font: 600 1rem/1 var(--text); color: var(--ink-2); }
.tp-loading::before { content: ''; width: 34px; height: 34px; margin: 0 auto 12px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--teal-700); animation: tp-spin .9s linear infinite; display: block; }
.tp-loading { align-content: center; justify-items: center; }
@keyframes tp-spin { to { transform: rotate(360deg); } }
.tp-note { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0 !important; font-size: .9063rem; color: var(--ink-2); }
.tp-note svg { flex: none; color: var(--teal-700); margin-top: 2px; }
.tp-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 18px; }
.tp-switch-l { margin: 0 !important; font-weight: 600; }
.tp-switch-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-other { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px 6px 10px; border: 1.5px solid var(--line-2); border-radius: 999px; background: #fff; font: 600 .875rem/1.2 var(--text); color: var(--ink-2); cursor: pointer; }
.tp-other:hover { border-color: var(--teal-700); color: var(--ink); }
.tp-other i { width: 14px; height: 14px; border-radius: 50%; background: var(--look); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.try-convert { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 28px; align-items: center; margin-top: 24px; padding: clamp(18px, 2vw + 8px, 30px); border-radius: 20px; background: var(--teal-900); color: rgba(255, 255, 255, .9); }
.try-convert h3 { font: 700 clamp(1.25rem, 1rem + .9vw, 1.6rem)/1.2 var(--display); letter-spacing: -0.02em; color: #fff; }
.try-convert p { margin: 8px 0 0 !important; color: rgba(255, 255, 255, .75); }
.try-convert .btn-ghost { border-color: rgba(255, 255, 255, .35); color: #fff !important; }
.try-convert .btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.try-convert :focus-visible { outline-color: var(--tangerine); }

.try-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.try-nav [data-try-next] { margin-left: auto; }
.try-nav .btn svg { flex: none; }
.try-app .form-error { margin-top: 16px; }

/* without JavaScript: the first three steps as one page; the rest needs the script */
.try-app:not(.try-live) .try-progress, .try-app:not(.try-live) .try-nav, .try-app:not(.try-live) .try-step[data-step="4"], .try-app:not(.try-live) .try-step[data-step="5"] { display: none; }
.try-app:not(.try-live) .td-card.td-more { display: flex; }
.try-app:not(.try-live) .td-all { display: none; }
.try-app:not(.try-live) .try-step + .try-step { margin-top: 40px; }

@media (max-width: 1023px) {
  .tq-foods-lg { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .td-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .try-mine { grid-template-columns: minmax(0, 1fr); }
  .tm-preview { position: static; max-width: 420px; }
  .try-convert { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .try-app { padding: 16px; border-radius: 20px; margin: 0 calc(var(--gutter) * -0.5); }
  .try-progress { gap: 4px; }
  .try-progress .tp-t { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .try-progress li > span, .try-progress button { justify-content: center; }
  .tq-chips-lg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tq-chips-lg .tq-chip > span { min-height: 56px; padding: 10px 12px; font-size: .9688rem; }
  .tq-foods-lg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .td-grid { grid-template-columns: minmax(0, 1fr); }
  /* Next and Back stay in reach on a phone while choosing (not on the website preview, which has its own basket bar) */
  .try-live:not([data-step="5"]) .try-nav { position: sticky; bottom: 0; z-index: 5; margin: 20px -16px -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); border-radius: 0 0 20px 20px; box-shadow: 0 -10px 24px -18px rgba(7, 45, 42, .5); }
  .try-nav .btn { flex: 1; }
  .tp-bar { flex-direction: column; align-items: stretch; }
  .tp-tools { justify-content: space-between; }
  .tp-stage { padding: 10px 6px; margin: 0 -8px; border-radius: 16px; }
  .try-convert .actions .btn { width: 100%; }
  .tm-swatches { gap: 8px; }
  .tm-sw > span { width: 38px; height: 38px; }
  .tm-sw-own { width: 100%; border-right: 0; padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .try-live .try-step { animation: none; }
  .td-pick:hover { transform: none; }
}