/* ============================================================
     ONBOARDING — tematizat pe limbajul landing-ului (dark, Sora, gradient de brand).
     Feeling „comandă de pizza": progres vizibil + promisiunea livrării (ETA),
     UN pas = UN ecran, opțiuni mari tactile, tranziții direcționale, sumar înainte de plată.
     Câmpurile au EXACT numele din formularul real (vezi GHID-IMPLEMENTARE.md §11).
     ============================================================ */
  :root{
    --bg:#080B12; --bg-elev:#0F141C; --panel:#0D1117;
    --card-fill:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
    --card-bd:rgba(255,255,255,0.07);
    --fg:#ECECF3; --fg-2:#D3D3DD; --fg-body:#C8C8D4; --muted:#9B9BAC; --dim:#84879E;
    --accent-text:#D4C5FF; --ok-text:#A6F0C6; --focus:#9D7CFF;
    --grad-a:#00C2FF; --grad-b:#B521E9; --grad:linear-gradient(90deg,#00C2FF,#B521E9);
    --accent:#7C5CFC; --accent-rgb:124,92,252; --ok:#01DB69; --ok-rgb:1,219,105; --danger:#FF6B81;
    --font-display:'Sora','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --dur-fast:140ms; --dur-base:220ms; --dur-slow:320ms;
    --ease-out:cubic-bezier(.22,.61,.36,1); --ease-press:cubic-bezier(.34,1.4,.64,1); --ease-emph:cubic-bezier(.16,1,.3,1);
    --hairline:rgba(255,255,255,.08); --hairline-strong:rgba(255,255,255,.12);
    --sh-1:0 1px 2px rgba(0,0,0,.45); --sh-2:0 8px 24px -8px rgba(0,0,0,.55); --sh-3:0 20px 50px -12px rgba(0,0,0,.65);
    --inset-hi:inset 0 1px 0 rgba(255,255,255,.06);
    --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:22px; --col:520px; --hdr:58px;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
  html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
  body{margin:0; color:var(--fg); font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    background:
      radial-gradient(120% 56% at 88% -4%, rgba(181,33,233,.09), transparent 52%),
      radial-gradient(100% 52% at 3% 0%, rgba(0,194,255,.07), transparent 48%),
      var(--bg);
    overflow-x:hidden; min-height:100svh}
  h1,h2,h3{margin:0; font-family:var(--font-display); font-weight:800; letter-spacing:-.028em; text-wrap:balance}
  a{color:inherit; text-decoration:none}
  .gt{background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
  .ico{display:inline-flex; width:1em; height:1em; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:8px}
  :focus:not(:focus-visible){outline:none}

  /* ===== bara de sus: logo + ETA („pizza tracker"-ul nostru: promisiunea livrării) ===== */
  .obar{position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:8px 16px; background:rgba(8,11,18,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--hairline)}
  .obar .brand-logo{height:26px; width:auto; display:block}
  .eta{display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:800; letter-spacing:.02em; color:var(--ok-text);
    background:rgba(var(--ok-rgb),.1); border:1px solid rgba(var(--ok-rgb),.3); border-radius:999px; padding:6px 12px; white-space:nowrap}
  .eta .ico{width:12px; height:12px}

  /* ===== progresul (segmente cu gradient viu — echivalentul tracker-ului Domino's) ===== */
  .prog{position:sticky; top:var(--hdr); z-index:49; padding:10px 16px 12px;
    background:rgba(8,11,18,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--hairline)}
  .prog .inner{max-width:var(--col); margin:0 auto}
  .prog .meta{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:7px}
  .prog .stepno{font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--dim)}
  .prog .stepname{font-family:var(--font-display); font-size:13px; font-weight:700; color:var(--accent-text)}
  .prog .segs{display:flex; gap:5px}
  .prog .seg{flex:1; height:4px; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden; position:relative}
  .prog .seg i{position:absolute; inset:0; border-radius:3px; background:var(--grad); background-size:300% 100%;
    transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease-emph)}
  .prog .seg.done i,.prog .seg.now i{transform:none}
  .prog .seg.now i{animation:gradientShift 8s ease-in-out infinite}
  @keyframes gradientShift{0%{background-position:10% 50%} 50%{background-position:90% 50%} 100%{background-position:10% 50%}}

  /* ===== scena pașilor: un pas = un ecran, tranziții direcționale ca la carduri ===== */
  main{position:relative; z-index:1}
  .step{display:none; max-width:var(--col); margin:0 auto; padding:26px 16px calc(28px + env(safe-area-inset-bottom))}
  .step.on{display:block; animation:stepInR .42s var(--ease-emph) both}
  .step.on.from-l{animation-name:stepInL}
  @keyframes stepInR{from{opacity:0; transform:translateX(26px)} to{opacity:1; transform:none}}
  @keyframes stepInL{from{opacity:0; transform:translateX(-26px)} to{opacity:1; transform:none}}
  .step h1{font-size:25px; line-height:1.14; text-align:center; margin-bottom:6px}
  .step .sub{font-size:14px; color:var(--muted); text-align:center; max-width:40ch; margin:0 auto 22px}
  .glabel{font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--dim); margin:20px 0 9px}

  /* ===== câmpuri text (limbajul landing-ului) ===== */
  .fld{margin-bottom:12px}
  .fld input,.fld textarea{width:100%; min-height:52px; background:var(--bg-elev); border:1px solid var(--card-bd); border-radius:var(--r-sm);
    padding:14px; color:#fff; font:inherit; font-size:16px; box-shadow:inset 0 1px 2px rgba(0,0,0,.3);
    transition:border-color var(--dur-fast), box-shadow var(--dur-fast)}
  .fld textarea{min-height:84px; resize:vertical}
  .fld input::placeholder,.fld textarea::placeholder{color:var(--dim)}
  .fld input:focus-visible,.fld textarea:focus-visible{outline:none; border-color:rgba(var(--accent-rgb),.6);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 0 3px rgba(var(--accent-rgb),.18)}
  .fld input[aria-invalid="true"]{border-color:var(--danger); animation:shake 360ms ease-out}
  @keyframes shake{0%{transform:translateX(0)}15%{transform:translateX(-8px)}30%{transform:translateX(6px)}45%{transform:translateX(-4px)}60%{transform:translateX(2px)}100%{transform:translateX(0)}}
  .frow{display:grid; grid-template-columns:1fr 1fr; gap:10px}
  .phint{font-size:12px; color:var(--dim); text-align:center; margin:-2px 0 12px; line-height:1.45}
  .ferr{display:none; font-size:12.5px; color:var(--danger); font-weight:600; margin:8px 0 0; text-align:center}
  .ferr.show{display:block; animation:stepInR .3s var(--ease-emph)}

  /* ===== opțiuni mari, tactile: pastile (o linie) și carduri (cu descriere) ===== */
  .pills{display:flex; flex-wrap:wrap; gap:8px}
  .pill{position:relative; cursor:pointer}
  .pill input{position:absolute; opacity:0; pointer-events:none}
  .pill span{display:inline-flex; align-items:center; min-height:46px; padding:10px 16px; border-radius:999px;
    background:var(--bg-elev); border:1px solid var(--card-bd); font-size:14.5px; font-weight:600; color:var(--fg-2); line-height:1.25;
    transition:transform var(--dur-fast) var(--ease-press), border-color var(--dur-base), background var(--dur-base), color var(--dur-base)}
  .pill:active span{transform:scale(.96)}
  .pill input:checked + span{background:rgba(var(--accent-rgb),.16); border-color:rgba(var(--accent-rgb),.65); color:#fff;
    box-shadow:0 0 0 1px rgba(var(--accent-rgb),.35), 0 8px 22px -10px rgba(var(--accent-rgb),.55)}
  .pill input:focus-visible + span{outline:2px solid var(--focus); outline-offset:2px}

  .opts{display:grid; grid-template-columns:1fr; gap:10px}
  .opts.two{grid-template-columns:1fr 1fr}
  .opt{position:relative; cursor:pointer}
  .opt input{position:absolute; opacity:0; pointer-events:none}
  .opt .box{position:relative; display:block; padding:15px 44px 15px 17px; border-radius:var(--r-md);
    background:var(--card-fill); border:1px solid var(--card-bd); box-shadow:var(--inset-hi);
    transition:transform var(--dur-fast) var(--ease-press), border-color var(--dur-base), box-shadow var(--dur-base)}
  .opt:active .box{transform:scale(.98)}
  .opt .t{display:block; font-family:var(--font-display); font-weight:700; font-size:16px; color:#fff; line-height:1.3}
  .opt .d{display:block; font-size:13.5px; color:var(--fg-body); line-height:1.55; margin-top:5px}
  .opt .ck{position:absolute; top:12px; right:12px; width:22px; height:22px; border-radius:50%;
    border:1.5px solid var(--hairline-strong); display:flex; align-items:center; justify-content:center;
    transition:background var(--dur-fast), border-color var(--dur-fast)}
  .opt .ck .ico{width:12px; height:12px; stroke:#fff; stroke-width:3; opacity:0; transform:scale(.3);
    transition:opacity var(--dur-fast), transform var(--dur-base) var(--ease-press)}
  .opt input:checked ~ .box{border-color:rgba(var(--accent-rgb),.65);
    box-shadow:var(--inset-hi), 0 0 0 1px rgba(var(--accent-rgb),.35), 0 10px 28px -12px rgba(var(--accent-rgb),.5)}
  .opt input:checked ~ .box .ck{background:var(--accent); border-color:transparent}
  .opt input:checked ~ .box .ck .ico{opacity:1; transform:scale(1)}
  .opt input:focus-visible ~ .box{outline:2px solid var(--focus); outline-offset:2px}

  /* consimțăminte (identice ca stil cu landing-ul) */
  .consent{display:flex; gap:10px; align-items:flex-start; min-height:44px; margin-top:6px; padding:6px 0;
    font-size:13px; line-height:1.45; color:var(--muted); cursor:pointer}
  .consent a{color:var(--accent-text); text-decoration:underline; text-decoration-color:rgba(var(--accent-rgb),.5); text-underline-offset:2px}
  .consent input{appearance:none; -webkit-appearance:none; width:21px; height:21px; border-radius:6px; border:1.5px solid var(--hairline-strong);
    background:var(--bg-elev); flex-shrink:0; margin-top:1px; cursor:pointer; position:relative;
    transition:background var(--dur-fast), border-color var(--dur-fast)}
  .consent input:checked{background:var(--accent); border-color:transparent}
  .consent input:checked::after{content:""; position:absolute; inset:4px; background:#fff;
    -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='M3.5 12.5l5.2 5.2L20.5 6'/%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='M3.5 12.5l5.2 5.2L20.5 6'/%3E%3C/svg%3E") center/contain no-repeat;
    animation:ckIn .2s var(--ease-press)}
  @keyframes ckIn{from{transform:scale(.4); opacity:0} to{transform:scale(1); opacity:1}}

  /* ===== navigația pasului: CTA-ul cu gradientul viu original + „Înapoi" fantomă ===== */
  .nav{margin-top:24px; display:grid; gap:9px}
  .btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; cursor:pointer; font:inherit;
    font-weight:800; font-size:16px; border-radius:var(--r-md); padding:0 22px; min-height:54px; width:100%; color:#fff;
    background:var(--grad); background-size:150% 100%; animation:gradientShift 8s ease-in-out infinite;
    box-shadow:0 2px 8px rgba(0,0,0,.3),0 12px 28px -6px rgba(124,92,252,.45);
    touch-action:manipulation; overflow:hidden; transition:transform var(--dur-fast) var(--ease-press)}
  .btn:active{transform:scale(.97)}
  .btn-ghost{position:relative; display:inline-flex; align-items:center; justify-content:center; min-height:48px; width:100%;
    border:none; background:none; cursor:pointer; font:inherit; font-weight:700; font-size:14.5px; color:var(--muted);
    border-radius:var(--r-md); transition:color var(--dur-fast), transform var(--dur-fast) var(--ease-press)}
  .btn-ghost:active{transform:scale(.98)} .btn-ghost:hover{color:#fff}

  /* ===== modal generic (disclaimer + sumar) — foaie de jos pe mobil, ca în aplicații ===== */
  .sheet{position:fixed; inset:0; z-index:80; display:flex; align-items:flex-end; justify-content:center;
    background:rgba(4,6,10,.66); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s var(--ease-out), visibility 0s .3s}
  .sheet.open{opacity:1; visibility:visible; pointer-events:auto; transition:opacity .3s var(--ease-out)}
  .sheet .panel{width:100%; max-width:560px; max-height:88svh; overflow:auto; overscroll-behavior:contain;
    background:var(--panel); border:1px solid var(--card-bd); border-bottom:none; border-radius:var(--r-xl) var(--r-xl) 0 0;
    box-shadow:var(--sh-3); padding:20px 18px calc(20px + env(safe-area-inset-bottom));
    transform:translateY(40px); transition:transform .38s var(--ease-emph)}
  .sheet.open .panel{transform:none}
  .sheet .grab{width:40px; height:4px; border-radius:3px; background:var(--hairline-strong); margin:0 auto 14px}
  .sheet h2{font-size:20px; text-align:center; margin-bottom:4px}
  .sheet .note{font-size:13px; color:var(--muted); text-align:center; margin-bottom:16px}

  /* sumarul (rezumatul comenzii — ca la checkout-ul de pizza) */
  .sum-hl{text-align:center; background:var(--card-fill); border:1px solid rgba(var(--accent-rgb),.3); border-radius:var(--r-md);
    padding:14px; margin-bottom:14px; box-shadow:var(--inset-hi)}
  .sum-hl .d{font-size:13px; color:var(--muted)} .sum-hl .b{font-family:var(--font-display); font-size:22px; font-weight:800; color:#fff}
  .sum-g{font-size:12px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--dim); margin:16px 0 6px}
  .sum-r{display:flex; justify-content:space-between; gap:12px; font-size:13.5px; padding:8px 0; border-bottom:1px solid var(--hairline)}
  .sum-r:last-child{border-bottom:none}
  .sum-r .k{color:var(--muted)} .sum-r .v{color:var(--fg); font-weight:600; text-align:right; max-width:60%}
  .sum-r .v.gt{font-weight:800}
  .sheet .nav{margin-top:18px}

  /* ===== ecranul final: încredere + sărbătoare discretă (intrare în cascadă) ===== */
  .done-wrap{text-align:center; padding-top:5vh}
  .done-ico{position:relative; width:92px; height:92px; margin:0 auto 20px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; background:rgba(var(--ok-rgb),.1);
    animation:dnPop .6s var(--ease-press) .1s both}
  .done-ico::before{content:""; position:absolute; inset:0; border-radius:50%; padding:2px; background:var(--grad);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude}
  .done-ico::after{content:""; position:absolute; inset:-14px; border-radius:50%; z-index:-1;
    background:radial-gradient(circle, rgba(124,92,252,.35), transparent 70%); filter:blur(10px);
    animation:dnHalo 3.6s ease-in-out 1.2s infinite}
  .done-ico .ico{width:40px; height:40px; stroke:var(--ok); stroke-width:2.4; animation:ckIn .5s var(--ease-press) .45s both}
  @keyframes dnPop{from{opacity:0; transform:scale(.4)} 60%{transform:scale(1.08)} to{opacity:1; transform:scale(1)}}
  @keyframes dnHalo{0%,100%{opacity:.55; transform:scale(1)} 50%{opacity:1; transform:scale(1.08)}}
  @keyframes dnRise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
  .done-wrap h1{margin-bottom:10px; animation:dnRise .55s var(--ease-emph) .3s both}
  .done-wrap .lead{color:var(--fg-body); font-size:15px; max-width:36ch; margin:0 auto; animation:dnRise .55s var(--ease-emph) .45s both}
  .done-eta{max-width:340px; margin:22px auto 0; text-align:center; background:var(--card-fill);
    border:1px solid rgba(var(--accent-rgb),.3); border-radius:var(--r-md); padding:16px 14px;
    box-shadow:var(--inset-hi), 0 24px 60px -28px rgba(124,92,252,.45); animation:dnRise .55s var(--ease-emph) .6s both}
  .done-eta .d{font-size:13px; color:var(--muted)}
  .done-eta .b{font-family:var(--font-display); font-size:24px; font-weight:800; margin:2px 0 6px;
    background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
  .done-eta .d2{font-size:12.5px; color:var(--dim); line-height:1.5}
  .done-nav{max-width:320px; margin:24px auto 0; animation:dnRise .55s var(--ease-emph) .75s both}

  @media (prefers-reduced-motion:reduce){
    *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
    .btn,.prog .seg.now i{animation:none !important}
  }

  /* ===== desktop: coloana rămâne focalizată (formularele bune sunt înguste),
     dar respirația, tipografia și cardul cresc ===== */
  @media (min-width:720px){
    :root{--col:560px}
    .step h1{font-size:30px}
    /* cardurile de activitate pe 2 coloane — ca în original; textul rămâne mare și aerisit */
    #actWork,#actLeisure{grid-template-columns:1fr 1fr; gap:11px}
    #actWork .opt .box,#actLeisure .opt .box{height:100%}
    .step{padding-top:40px}
    .opts.two{gap:11px}
    .sheet{align-items:center}
    .sheet .panel{border-radius:var(--r-xl); border-bottom:1px solid var(--card-bd); max-height:82vh}
  }
  @media (min-width:1100px){
    :root{--col:620px; --hdr:64px}
    #actWork,#actLeisure{gap:12px}
    .opt .box{padding:17px 46px 17px 19px}
    .opt .d{font-size:14px}
    .obar{padding:12px clamp(24px,4vw,48px)}
    .obar .brand-logo{height:32px}
    .prog{padding:12px clamp(24px,4vw,48px) 14px}
    .step h1{font-size:34px}
    .step .sub{font-size:15px}
    .opt .box:hover{border-color:rgba(var(--accent-rgb),.4); transform:translateY(-1px)}
    .pill span:hover{border-color:rgba(var(--accent-rgb),.4); color:#fff}
    .btn:hover{box-shadow:0 4px 12px rgba(0,0,0,.35),0 16px 40px -6px rgba(124,92,252,.6)}
  }