/* =============================================================================
   onboarding-v8.css — stratul peste onboardingul clasic (onboarding.css + onboarding-patch2.css rămân, neatinse).
   Telefon întâi: titlul aliniat cu câmpurile, butonul principal mereu sub deget, variantele ca răspunsuri scurte,
   disclaimerul medical ca document, rezumatul cu imaginea obiectivului.
   ============================================================================= */

/* ── bara de sus: pastila programului, cu miniatura obiectivului ales în landing ── */
.obar .eta { gap: 0.5rem; padding: 0.25rem 0.75rem 0.25rem 0.25rem; }
.oo-thumb { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #1a2030 center 28% / cover no-repeat; box-shadow: 0 0 0 1.5px rgba(var(--ok-rgb), 0.45); view-transition-name: obx-plan; }

/* ── bara de progres: „Înapoi" ca săgeată, lângă pas ── */
.prog .meta { align-items: center; gap: 0.5rem; }
.prog .stepno { flex: 1; }
.prog .stepname { display: none; }
.oo-back { flex: none; width: 2rem; height: 2rem; margin: -0.375rem 0 -0.375rem -0.5rem; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--fg-2); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.oo-back[hidden] { display: none; }
.oo-back svg { width: 1.25rem; height: 1.25rem; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.oo-back:active { background: rgba(255, 255, 255, 0.06); }

/* ── pașii: titlul și textul aliniate cu câmpurile; butonul principal fix jos ── */
.step { padding: 1.5rem 1rem calc(7rem + env(safe-area-inset-bottom)); }
.step h1 { font-size: 1.75rem; line-height: 1.15; text-align: left; margin-bottom: 0.25rem; }
.step .sub { text-align: left; margin: 0.375rem 0 0; max-width: none; font-size: 0.9375rem; color: var(--muted); line-height: 1.5; text-wrap: pretty; }
.step h1 + .glabel { margin-top: 1.5rem; }
.step h1 + .oo-sex, .step h1 + .oo-first { margin-top: 1.25rem; }
.step .sub + .fld, .step .sub + .oo-kit { margin-top: 1.25rem; }
.glabel { margin: 1.625rem 0 0.625rem; font-size: 0.71875rem; }
.oo-hint { margin-left: 0.375rem; font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 0.8125rem; color: var(--dim); opacity: 0.85; }
/* pasul intră prin copiii lui, nu prin el însuși: o animație pe transform ar face din pas containerul butonului fix */
.step.on, .step.on.from-l { animation: none; }
.step.on > :not(.nav) { animation: stepInR 0.34s var(--ease-emph) both; }
.step.on.from-l > :not(.nav) { animation-name: stepInL; }
.step .nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; margin: 0; padding: 1.5rem 1rem calc(0.875rem + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(8, 11, 18, 0) 0%, rgba(8, 11, 18, 0.92) 36%, #080b12 100%); }
.step .nav > * { max-width: var(--col); margin: 0 auto; }
.step .nav .btn-ghost { display: none; }
.step[data-step="8"] .nav { position: static; background: none; }
.btn { animation: none; background-size: 100% 100%; }
.ferr { text-align: left; }

/* contul (ultimul pas): un câmp pe rând, telefonul cu rostul lui, o singură parolă (cu ochi), regulile sub ea */
.step[data-step="1"] .fld { margin-bottom: 0.625rem; }
.step[data-step="1"] .rules { justify-content: flex-start; margin: -0.125rem 0 0.875rem; }
.step[data-step="1"] .consent { margin-top: 0.125rem; }
.step[data-step="1"] .rules + .fld.oo-hide + .consent { margin-top: 0.5rem; }
.oo-hide { display: none !important; }
.oo-fhint { margin: -0.25rem 0 0.875rem 0.125rem; font-size: 0.8125rem; line-height: 1.4; color: var(--dim); }
.fld.bad + .oo-fhint { display: none; }
.oo-pw input { padding-right: 3.25rem; }
.oo-eye { position: absolute; right: 0.375rem; top: 1.625rem; transform: translateY(-50%); width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--dim); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.oo-eye svg { width: 1.25rem; height: 1.25rem; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.oo-eye .x { opacity: 1; transition: opacity var(--dur-fast); }
.oo-eye.on { color: var(--fg-2); }
.oo-eye.on .x { opacity: 0; }
#err1 a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 0.15em; }
/* contul în trei ecrane (data-pane pe secțiune, data-p pe elemente); „edit" = numele, telefonul și emailul, din rezumat */
.oo-acc-step[data-pane="1"] [data-p]:not([data-p~="1"]),
.oo-acc-step[data-pane="2"] [data-p]:not([data-p~="2"]),
.oo-acc-step[data-pane="3"] [data-p]:not([data-p~="3"]),
.oo-acc-step[data-pane="edit"] [data-p]:not([data-p~="edit"]) { display: none; }
.step h1 + .fld { margin-top: 1.25rem; }
.oo-acc-step[data-pane="edit"] .fld + .fld { margin-top: 0; }
/* contul există deja pentru adresa din câmp: fără parolă, reguli și acorduri (date deja), cu confirmarea în loc */
.oo-accok { display: none; }
html.oo-reg .oo-acc-step[data-pane="3"] .oo-pw, html.oo-reg .oo-acc-step[data-pane="3"] .rules, html.oo-reg .oo-acc-step[data-pane="3"] .consent, html.oo-reg .oo-acc-step[data-pane="3"] .sub { display: none; }
html.oo-reg .oo-acc-step[data-pane="3"] .oo-accok { display: flex; align-items: center; gap: 0.5rem; margin: 0.25rem 0 0; font-size: 0.9375rem; font-weight: 600; color: var(--ok-text); }
.oo-accok svg { flex: none; width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* răsplata de la începutul contului: „Gata cu întrebările" (pastilă verde, bifa se desenează) */
.oo-yay { display: inline-flex; align-items: center; gap: 0.375rem; margin: 0 0 0.875rem; padding: 0.3125rem 0.75rem 0.3125rem 0.5625rem; border-radius: 999px; background: rgba(var(--ok-rgb), 0.12); box-shadow: inset 0 0 0 1px rgba(var(--ok-rgb), 0.3); color: var(--ok-text); font-size: 0.8125rem; font-weight: 700; line-height: 1.2; }
.oo-yay svg { width: 0.9375rem; height: 0.9375rem; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 0; }
.step.on .oo-yay svg { animation: ooDraw 0.5s 0.25s cubic-bezier(0.65, 0, 0.35, 1) both; }
@keyframes ooDraw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
/* salutul, după ce ne-ai spus numele: cald, fără pastilă */
.oo-yay.oo-hi { display: block; padding: 0; background: none; box-shadow: none; color: var(--fg-2); font-size: 1rem; font-weight: 600; }
.btn:disabled { opacity: 0.75; cursor: progress; }

/* pasul 2: femeie / bărbat, două jumătăți egale; unitățile în câmp; fără săgețile câmpurilor numerice */
.oo-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; }
.oo-two .pill span, .oo-grid .pill span { display: flex; justify-content: center; width: 100%; min-height: 3.25rem; border-radius: var(--r-md); font-size: 0.96875rem; }
.frow { gap: 0.625rem; }
.frow .fld { margin-bottom: 0; }
.fld input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.fld input[type="number"]::-webkit-outer-spin-button, .fld input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.oo-u input { padding-right: 2.75rem; }
.oo-u::after { content: attr(data-u); position: absolute; right: 0.875rem; top: 1.625rem; transform: translateY(-50%); font-size: 0.875rem; font-weight: 600; color: var(--dim); pointer-events: none; }
.oo-ins { margin: 0.625rem 0 0; min-height: 0; font-size: 0.875rem; line-height: 1.45; color: var(--fg-2); }
.oo-ins:empty { display: none; }
.oo-ins.on { padding: 0.625rem 0.75rem; border-radius: var(--r-sm); background: linear-gradient(135deg, rgba(0, 194, 255, 0.08), rgba(181, 33, 233, 0.08)); border: 1px solid rgba(var(--accent-rgb), 0.28); animation: stepInR 0.3s var(--ease-emph); }
.oo-ins b { color: #fff; font-weight: 750; }
.oo-ins.warn { padding: 0.625rem 0.75rem; border-radius: var(--r-sm); background: rgba(255, 184, 77, 0.08); border: 1px solid rgba(255, 184, 77, 0.35); color: #ffd79a; }

/* variantele (activitate, dietă, gătit): iconița în stânga, titlul-răspuns, exemplul dedesubt */
.oo-list { gap: 0.5rem; }
.oo-list .opt .box, .oo-meals .oo-rec .box { display: grid; grid-template-columns: auto 1fr; column-gap: 0.75rem; align-items: center; padding: 0.75rem 2.75rem 0.75rem 0.75rem; min-height: 3.75rem; }
.oo-list .opt .ic { grid-row: span 2; width: 2.375rem; height: 2.375rem; display: grid; place-items: center; border-radius: 0.75rem; background: rgba(255, 255, 255, 0.05); font-size: 1.1875rem; line-height: 1; }
.oo-list .opt .t { font-size: 0.96875rem; text-wrap: balance; }
.oo-list .opt .d { margin-top: 0.125rem; font-size: 0.8125rem; line-height: 1.4; color: var(--muted); }
.oo-list .opt .box:not(:has(.d)) .t { grid-row: span 2; }
.oo-list .opt .ck, .oo-meals .ck { top: 50%; transform: translateY(-50%); }

/* mesele: recomandarea sus, apoi numărul dintr-un rând de trei */
.oo-meals .oo-rec .box { grid-template-columns: 1fr; padding-left: 1rem; }
.oo-meals .tag { justify-self: start; margin-bottom: 0.3125rem; padding: 0.125rem 0.5rem; border-radius: 999px; background: rgba(var(--ok-rgb), 0.12); color: var(--ok-text); font-size: 0.65625rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.oo-meals .oo-rec .t { font-size: 0.96875rem; }
.oo-meals .oo-rec .d { margin-top: 0.125rem; font-size: 0.8125rem; color: var(--muted); line-height: 1.4; }
.oo-or { display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0 0.625rem; font-size: 0.8125rem; font-weight: 600; color: var(--dim); }
.oo-or::before, .oo-or::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.oo-n { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.oo-n .opt .box { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 4.5rem; padding: 0.625rem 0.5rem; text-align: center; }
.oo-n .opt .t { font-size: 1.5rem; line-height: 1; letter-spacing: -0.02em; }
.oo-n .opt .d { margin-top: 0.3125rem; font-size: 0.78125rem; color: var(--muted); }

/* jetoanele pentru ce nu mănânci / ce-ți place */
.oo-chips { display: flex; flex-wrap: wrap; gap: 0.4375rem; }
.oo-chip { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.5rem; padding: 0 0.9375rem; border-radius: 999px; border: 1px solid var(--card-bd); background: var(--bg-elev); color: var(--fg-2); font-family: inherit; font-size: 0.90625rem; font-weight: 600; line-height: 1; cursor: pointer; transition: transform var(--dur-fast) var(--ease-press), background var(--dur-base), border-color var(--dur-base), color var(--dur-base); }
.oo-chip:active { transform: scale(0.95); }
.oo-chip.on { background: rgba(var(--accent-rgb), 0.18); border-color: rgba(var(--accent-rgb), 0.7); color: #fff; }
.oo-chip.on::before { content: ""; width: 0.6875rem; height: 0.6875rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5 11-11'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5 11-11'/%3E%3C/svg%3E") center/contain no-repeat; }
.oo-extra { margin: 0.5rem 0 0; }
.oo-extra input { min-height: 2.875rem; padding-top: 1.125rem; font-size: 0.9375rem; }
.oo-extra label { top: 1.4375rem; font-size: 0.875rem; }

/* magazinele: două coloane egale */
.oo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.oo-grid .pill span { min-height: 3rem; }

/* bucătăria: o grilă de plăci, cu bifa în colț */
.oo-kit { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.oo-kit + .oo-kit { margin-top: 0.5rem; }
.step .sub + .glabel { margin-top: 1.25rem; }
.oo-kit .opt .box { display: flex; align-items: center; gap: 0.625rem; min-height: 3.5rem; padding: 0.625rem 2.5rem 0.625rem 0.625rem; }
.oo-kit .opt .ic { flex: none; width: 2.125rem; height: 2.125rem; display: grid; place-items: center; border-radius: 0.625rem; background: rgba(255, 255, 255, 0.05); font-size: 1.0625rem; }
.oo-kit .opt .t { font-size: 0.9375rem; }
.oo-kit .opt .ck { top: 50%; transform: translateY(-50%); right: 0.625rem; border-radius: 0.375rem; }
.oo-kit.bad .opt .box { border-color: var(--danger); animation: shake 360ms ease-out; }
.oo-kit-base .opt .box { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 0.75rem; min-height: 6rem; padding: 0.875rem; }
.oo-kit-base .opt .ic { width: 2.625rem; height: 2.625rem; border-radius: 0.75rem; font-size: 1.3125rem; }
.oo-kit-base .opt .t { font-size: 1rem; font-weight: 700; }
.oo-kit-base .opt .ck { top: 0.875rem; right: 0.875rem; transform: none; }
.oo-kit-base .opt input:checked ~ .box .ck { animation: ooCkB 0.42s var(--ease-press); }
@keyframes ooCkB { 30% { transform: scale(0.82); } 62% { transform: scale(1.1); } 100% { transform: none; } }

/* bifele: pline (fără gradient), bifa se desenează */
.opt input:checked ~ .box .ck, .consent input:checked { background: #7c5cfc; border-color: #7c5cfc; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 14px -6px rgba(124, 92, 252, 0.95); }
.opt input:checked ~ .box .ck { animation: ooCk 0.42s var(--ease-press); }
@keyframes ooCk { 0% { transform: translateY(-50%) scale(1); } 30% { transform: translateY(-50%) scale(0.82); } 62% { transform: translateY(-50%) scale(1.1); } 100% { transform: translateY(-50%) scale(1); } }
.oo-md-ok.bad input { border-color: var(--danger); animation: shake 360ms ease-out; }

/* ── disclaimerul medical: câteva propoziții, „fișierul", acordul ── */
.oo-sum .panel h2 { text-align: left; font-size: 1.375rem; margin-bottom: 0.875rem; }
/* disclaimerul medical (foaia dintre cont și rezumat) */
.oo-md .panel h2 { text-align: left; font-size: 1.375rem; margin-bottom: 0.625rem; }
.oo-md-eyebrow { margin: 0 0 0.25rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.01em; color: var(--accent-text); }
.oo-md-read { margin: 1rem 0 0.625rem; color: var(--fg-2); }
.oo-md-p { margin: 0 0 0.75rem; font-size: 0.90625rem; line-height: 1.55; color: var(--fg-body); text-wrap: pretty; }
.oo-errpay { margin: 0 0 0.5rem; text-align: center; }
.oo-doc { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.75rem; border-radius: var(--r-md); background: var(--bg-elev); border: 1px solid var(--hairline-strong); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: transform var(--dur-fast) var(--ease-press), border-color var(--dur-base); }
.oo-doc:active { transform: scale(0.98); border-color: rgba(var(--accent-rgb), 0.45); }
.oo-doc-ic { flex: none; width: 2.5rem; height: 2.875rem; display: grid; place-items: center; border-radius: 0.625rem; background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.3), rgba(var(--accent-rgb), 0.08)); box-shadow: inset 0 0 0 1px rgba(157, 124, 255, 0.35); }
.oo-doc-ic svg { width: 1.375rem; height: 1.375rem; stroke: #d4c5ff; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.oo-doc .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; font-size: 0.8125rem; color: var(--muted); line-height: 1.35; }
.oo-doc .t b { color: var(--fg); font-size: 0.9375rem; font-weight: 700; }
.oo-doc .nw, .oo-sum .nw { white-space: nowrap; }
.oo-doc .go { flex: none; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.06); }
.oo-doc .go svg { width: 0.9375rem; height: 0.9375rem; stroke: #cbbcff; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.oo-md-ok { margin-top: 0.5rem; padding: 0.875rem; border-radius: var(--r-md); background: var(--bg-elev); border: 1px solid var(--card-bd); color: var(--fg); font-size: 0.90625rem; }

/* textul complet: o fereastră mare, cu textul derulabil între antet și butoane */
.oo-docsheet { z-index: 90; }
.oo-docsheet .panel { display: flex; flex-direction: column; max-height: 90svh; padding: 0; overflow: hidden; }
.oo-docsheet-h { flex: none; display: flex; align-items: center; gap: 0.75rem; padding: 1rem 0.875rem 0.875rem 1.125rem; border-bottom: 1px solid var(--hairline); }
.oo-docsheet-h .t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; font-size: 0.8125rem; color: var(--muted); }
.oo-docsheet-h .t b { font-family: var(--font-display); font-size: 1.125rem; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.oo-x { flex: none; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.06); cursor: pointer; }
.oo-x svg { width: 1.125rem; height: 1.125rem; stroke: var(--fg); stroke-width: 2.2; fill: none; stroke-linecap: round; }
.oo-docsheet-b { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 1rem 1.25rem 1.375rem; color: var(--fg-body); font-size: 0.96875rem; line-height: 1.65; text-wrap: pretty; }
.oo-docsheet-b h4 { margin: 1.25rem 0 0.375rem; font-size: 0.96875rem; font-weight: 700; color: #fff; }
.oo-docsheet-b p { margin: 0 0 0.625rem; }
.oo-docsheet-b ul { margin: 0 0 0.625rem; padding-left: 1.25rem; }
.oo-docsheet-b li { margin: 0.25rem 0; }
.oo-docsheet-b .obc-md-note { padding: 0.625rem 0.75rem; border-radius: 0.75rem; background: rgba(255, 184, 77, 0.08); border: 1px solid rgba(255, 184, 77, 0.3); color: #ffd79a; font-size: 0.84375rem; line-height: 1.45; }
.oo-docsheet-f { flex: none; display: grid; gap: 0.25rem; padding: 0.75rem 1rem calc(0.875rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--hairline); }

/* ── rezumatul ── */
.oo-sum .panel { position: relative; padding-top: 1rem; }
.oo-sum-x { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 2; width: 2.25rem; height: 2.25rem; }
.oo-sum .panel h2 { padding-right: 2.5rem; }
.oo-sh { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 9rem; padding: 1rem 1.125rem; border-radius: var(--r-lg) var(--r-lg) 0 0; background: linear-gradient(180deg, rgba(13, 17, 26, 0.05) 0%, rgba(13, 17, 26, 0.6) 55%, #0f141f 100%), var(--img) center 28% / cover no-repeat, #0f141f; border: 1px solid var(--card-bd); border-bottom: 0; }
.oo-sh .k { font-size: 0.71875rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); }
.oo-sh .v { margin-top: 0.25rem; font-family: var(--font-display); font-size: 1.75rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: #fff; }
.oo-sh .s { margin-top: 0.25rem; font-size: 0.9375rem; color: #dfe0ea; }
.oo-hed { position: absolute; top: 0.75rem; right: 0.75rem; min-height: 2.25rem; padding: 0.5rem 0.875rem; border: 0; border-radius: 999px; background: rgba(8, 11, 18, 0.6); color: #fff; font-family: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.oo-team { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1.125rem; border-radius: 0 0 var(--r-lg) var(--r-lg); background: var(--bg-elev); border: 1px solid var(--card-bd); border-top: 1px solid var(--hairline); }
.oo-team img { flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(124, 92, 252, 0.6); }
.oo-team span { display: flex; flex-direction: column; font-size: 0.84375rem; line-height: 1.35; color: var(--ok-text); }
.oo-team b { color: var(--fg); font-size: 0.9375rem; font-weight: 700; }
.oo-price { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-top: 0.625rem; padding: 1rem 1.125rem; border-radius: var(--r-lg); background: var(--card-fill); border: 1px solid var(--card-bd); color: var(--muted); font-size: 0.875rem; font-weight: 600; }
.oo-price b { font-family: var(--font-display); font-size: 1.625rem; font-weight: 800; letter-spacing: -0.03em; color: #fff; margin-right: 0.125rem; }
.oo-price .ok { color: var(--ok-text); font-weight: 700; }
.oo-sub-h { margin: 1.25rem 0 0.5rem; font-size: 0.71875rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--dim); }
.oo-rows { border-radius: var(--r-lg); background: var(--card-fill); border: 1px solid var(--card-bd); overflow: hidden; }
.oo-row { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.8125rem 1rem; }
.oo-row + .oo-row { border-top: 1px solid var(--hairline); }
.oo-row .rk { flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.375rem; }
.oo-row .rk svg { width: 1.1875rem; height: 1.1875rem; stroke: #cbbcff; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.oo-row .rv { flex: 1; min-width: 0; }
.oo-row .rt { font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.oo-row .rd { margin-top: 0.125rem; font-size: 0.90625rem; line-height: 1.45; color: var(--fg); overflow-wrap: anywhere; text-wrap: pretty; }
.oo-row .re { flex: none; align-self: center; min-height: 2.25rem; padding: 0.5rem 0.25rem 0.5rem 0.5rem; border: 0; background: transparent; color: var(--accent-text); font-family: inherit; font-size: 0.84375rem; font-weight: 700; cursor: pointer; }
.oo-sum .nav { position: sticky; bottom: calc(-1.25rem - env(safe-area-inset-bottom)); margin: 1rem -1.125rem 0; padding: 1rem 1.125rem calc(1.25rem + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(13, 17, 23, 0) 0%, var(--panel) 28%); }
.oo-secure { display: flex; align-items: center; justify-content: center; gap: 0.375rem; margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--dim); }
.oo-secure svg { width: 0.9375rem; height: 0.9375rem; stroke: currentColor; stroke-width: 2; fill: none; }

/* în modul „Modifică": săgeata duce înapoi la rezumat, progresul se estompează */
html.oo-editing .prog .segs { opacity: 0.4; }

/* ── sosirea din landing: cartela aleasă zboară în pastila de sus (View Transition între pagini, pe compozitor),
   pagina apare peste ea, conținutul urcă scurt. Totul se termină în ~0,5 s după încărcare. ── */
::view-transition-group(obx-plan) { animation-duration: 0.46s; animation-timing-function: cubic-bezier(0.32, 0, 0.12, 1); }
::view-transition-old(obx-plan), ::view-transition-new(obx-plan) { height: 100%; object-fit: cover; overflow: hidden; animation-duration: 0.46s; animation-timing-function: cubic-bezier(0.32, 0, 0.12, 1); }
::view-transition-old(obx-plan) { animation-name: ooPlanOut; }
::view-transition-new(obx-plan) { animation-name: ooPlanIn; }
@keyframes ooPlanOut { 0% { border-radius: 18px; opacity: 1; } 55% { opacity: 1; } 100% { border-radius: 50%; opacity: 0; } }
@keyframes ooPlanIn { 0% { border-radius: 18px; opacity: 0; } 45% { opacity: 0; } 100% { border-radius: 50%; opacity: 1; } }
::view-transition-old(root) { animation: none; opacity: 0; }   /* vechea pagină era deja stinsă: nu o redesenăm */
::view-transition-new(root) { animation-duration: 0.26s; }
html.oo-arrive .step.on > :not(.nav) { animation: ooRise 0.42s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
html.oo-arrive .step.on > :nth-child(2) { animation-delay: 0.04s; }
html.oo-arrive .step.on > :nth-child(3) { animation-delay: 0.08s; }
html.oo-arrive .step.on > :nth-child(4) { animation-delay: 0.11s; }
html.oo-arrive .step.on > :nth-child(n+5) { animation-delay: 0.14s; }
html.oo-arrive .step.on > .nav, html.oo-arrive .prog { animation: ooFade 0.3s ease-out 0.06s both; }
@keyframes ooRise { from { opacity: 0; transform: translateY(0.625rem); } to { opacity: 1; transform: none; } }
@keyframes ooFade { from { opacity: 0; } to { opacity: 1; } }

@media (hover: hover) and (pointer: fine) {
  .oo-chip:hover, .oo-doc:hover { border-color: rgba(var(--accent-rgb), 0.45); color: #fff; }
  .oo-back:hover, .oo-x:hover { background: rgba(255, 255, 255, 0.08); }
  .oo-row .re:hover { color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  html.oo-arrive .step.on > *, html.oo-arrive .prog { animation: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 0.001ms !important; }
}
@media (min-width: 720px) {
  .step h1 { font-size: 2rem; }
  .oo-docsheet .panel { max-width: 38rem; max-height: min(84vh, 48rem); border-radius: var(--r-xl); }
  .oo-docsheet-f { grid-auto-flow: column; justify-content: end; padding-bottom: 0.875rem; }
  .oo-docsheet-f .btn { width: auto; }
  .oo-docsheet-f .btn-ghost { width: auto; order: -1; padding: 0 1rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   DESKTOP (≥1100px) — o singură axă, centrată: sigla și planul, progresul, întrebarea, butonul imediat sub ea.
   Nimic în lateral, nicio indicație în plus (Enter merge, tăcut). Text la mărime de citit. Telefonul rămâne cum e.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.oo-navprice { display: none; }
/* landing-ul micșorează tot site-ul la 75% pe laptop (1100–1535px) și 85% până la 1900px: pentru un formular, 9–11px nu se
   citesc — aici rămânem la 16px (peste 1900px, scara site-ului e deja 100% sau mai mare) */
@media (min-width: 1100px) and (max-width: 1899.98px) { html { font-size: 16px; } }
@media (min-width: 1100px) {
  :root { --col: 36rem; --hdr: 4.25rem; }
  /* antetul și progresul pe aceeași coloană cu întrebarea */
  .obar { padding-inline: max(1.5rem, calc((100vw - var(--col)) / 2)); }
  .obar .brand-logo { height: 2rem; }
  .prog { padding-inline: max(1.5rem, calc((100vw - var(--col)) / 2)); }
  .prog .inner { max-width: none; }
  .step { max-width: var(--col); margin: 0 auto; padding: 2.75rem 0 4rem; }
  .step h1 { font-size: 2.375rem; line-height: 1.1; letter-spacing: -0.02em; }
  .step .sub { font-size: 1.0625rem; margin-top: 0.5rem; }
  .glabel { margin: 2rem 0 0.75rem; font-size: 0.75rem; }
  .oo-hint { font-size: 0.8125rem; }
  .step h1 + .glabel, .step .sub + .glabel { margin-top: 1.75rem; }
  .step h1 + .oo-sex, .step h1 + .oo-first, .step h1 + .fld, .step .sub + .fld, .step .sub + .oo-kit { margin-top: 1.75rem; }

  /* butonul, imediat sub conținut (nu lipit de marginea ecranului) */
  .step .nav { position: static; margin: 2.25rem 0 0; padding: 0; background: none; }
  .step .nav > * { max-width: none; margin: 0; }
  .step .nav .btn { width: 100%; }

  /* grilele, pe lățimea coloanei: mai puțină derulare, totul dintr-o privire */
  .oo-list { gap: 0.625rem; }
  .oo-list .opt .box, .oo-meals .oo-rec .box { min-height: 4rem; padding: 0.8125rem 3rem 0.8125rem 0.875rem; }
  .oo-list .opt .t { font-size: 1.03125rem; }
  .oo-list .opt .d { font-size: 0.875rem; }
  .oo-first { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .oo-first .opt .box { grid-template-columns: 1fr; align-content: start; row-gap: 0.25rem; min-height: 8.75rem; height: 100%; padding: 1rem 1rem 1.125rem; }
  .oo-first .opt .ic { grid-row: auto; margin-bottom: 0.625rem; }
  .oo-first .opt .ck { top: 1.125rem; right: 1rem; transform: none; }
  .oo-first .opt input:checked ~ .box .ck { animation: ooCkB 0.42s var(--ease-press); }
  .step[data-step="5"] .oo-list { display: grid; grid-template-columns: 1fr 1fr; }
  .step[data-step="5"] .oo-list .opt .box { height: 100%; }
  .oo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.625rem; }
  .oo-two { gap: 0.75rem; }
  .oo-two .pill span, .oo-grid .pill span { min-height: 3.5rem; font-size: 1rem; }
  .oo-kit { gap: 0.625rem; }
  .oo-kit:not(.oo-kit-base) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .oo-kit-base .opt .box { min-height: 7rem; }
  .oo-n .opt .box { min-height: 5rem; }
  .oo-chip { min-height: 2.625rem; font-size: 0.9375rem; }

  /* ferestrele: rezumatul mai lat (rândurile pe două coloane, încape fără derulare), disclaimerul centrat */
  #sumSheet .panel { height: auto; max-height: min(94vh, 64rem); }   /* cât conținutul (96vh fix din patch2 lăsa aici un gol mare) */
  .oo-sum .panel { max-width: 50rem; padding: 1.5rem 1.75rem 0; }
  .oo-sum .panel h2 { font-size: 1.75rem; margin-bottom: 1rem; }
  .oo-sum-x { top: 1.125rem; right: 1.25rem; }
  .oo-sh { min-height: 8rem; }
  .oo-rows { display: grid; grid-template-columns: 1fr 1fr; }
  .oo-row + .oo-row { border-top: 0; }
  .oo-row { border-top: 1px solid var(--hairline); }
  .oo-row:nth-child(-n+2) { border-top: 0; }
  .oo-row:nth-child(odd) { border-right: 1px solid var(--hairline); }
  .oo-row:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
  /* bara de plată: prețul în stânga, butonul în dreapta (prețul din listă nu se mai repetă) */
  #sumBody .oo-price { display: none; }
  .oo-sum .nav { margin-inline: -1.75rem; padding: 1rem 1.75rem 1.375rem; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 1.25rem; row-gap: 0.125rem; }
  .oo-navprice { display: block; grid-column: 1; grid-row: 2; margin: 0; font-size: 0.9375rem; color: var(--muted); }
  .oo-navprice b { font-family: var(--font-display); font-size: 1.625rem; font-weight: 800; letter-spacing: -0.03em; color: #fff; }
  .oo-sum .nav .btn { grid-column: 2; grid-row: 2 / span 2; width: auto; min-width: 16rem; }
  .oo-sum .nav .oo-secure { grid-column: 1; grid-row: 3; justify-content: flex-start; margin: 0; }
  .oo-sum .nav .oo-errpay { grid-column: 1 / -1; grid-row: 1; }
  .oo-md .panel { max-width: 34rem; padding: 1.75rem 1.75rem 1.25rem; }
  .oo-md .nav { display: flex; flex-direction: row-reverse; justify-content: flex-start; gap: 0.75rem; }
  .oo-md .nav .btn { width: auto; min-width: 12rem; }
  .oo-md .nav .btn-ghost { width: auto; padding: 0 1.25rem; }
}
@media (min-width: 1100px) and (max-height: 820px) {
  .step { padding-top: 2.25rem; }
  .oo-sh { min-height: 6.5rem; }
}