/* ═══════════════════════════════════════════════════════════════════════════ ВОРОНКА 2026 — CSS МОКІВ, ЗАЛИТИЙ 1:1 Джерела: redesign-2026/05-seats-mock.html, 06-passengers-mock.html, 07-confirm-pay-mock.html Єдина зміна проти моків: корінь (.s2026/.p2026/.c2026) замінено на реальні контейнери прода (#trainDialog / #purchase / #confirm) і всі селектори скоуплено під них, щоб стилі не потекли на решту сторінки. Значення, коментарі й рішення авторів — не переписані. ПОРЯДОК: мок → бек. search.js/scheme.js/setup.js пишуть у .ctl-* хуки, які живуть УСЕРЕДИНІ класів мока. Бандл minified/purchase.js не чіпаємо — ./minify.sh із пісочниці не запустити. ⚠ ЩО З МОКА 06 СВІДОМО НЕ БЕРЕМО (перевірено в коді 16.07, хендофф): там половина — вигадка, і вона зламала б reserve: • «50 ₴» за білизну — ціна динамічна, з train_services_detail.price • «від 60 ₴» за багаж — приходить від УЗ ПІСЛЯ reserve • багаж одним чекбоксом — реально три типи (С/А/Б), per-passenger • дитина без дати народження — Reserve.php:289 кине Exception Тому звідти береться ВИГЛЯД, а поля лишаються ті, що вміє бек. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══ 06-passengers-mock.html ═══ */ /* ═══════════════════════════════════════════════════════════════════════════ PASSENGERS · кадр D «Аркуш» (Layout Bible §4) Питання екрана (IH2): «Хто їде?». Тиша паперу — тут не продають, тут пишуть. Пасажири існують ТІЛЬКИ на цьому кроці (П.42) — і ніде раніше. Апсели — «візок провідника»: після імен, згорнуто (П.59/AP-89). ═══════════════════════════════════════════════════════════════════════════ */ #purchase{ --scene:#0A1024; --page:#F6F7FB; --card:#FFFFFF; --field:#F6F7FB; --text:#101729; --text2:#4A5570; --muted:#667088; --amber:#FFB800; --on-amber:#231700; --link:#2F59B0; --focus:#3B6FD9; --error:#C4392E; --live:#3ECF8E; --line:#E4E8F1; --line2:#C6D2E8; --line-sc:#FFFFFF17; --fh:'Manrope',system-ui,sans-serif; --fb:'Source Sans 3',system-ui,sans-serif; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --block:32px; --between:56px; --r-in:12px; --r-card:16px; --r-panel:24px; --r-pill:999px; --sh-r:0 14px 34px -12px rgba(10,16,36,.22); --sh-glow:0 14px 30px -8px rgba(255,184,0,.55); --e:cubic-bezier(.16,1,.3,1); container-type:inline-size; container-name:root; background:var(--page); color:var(--text); font:400 16px/1.55 var(--fb); margin:0 auto; overflow-x:clip; padding-bottom:96px; } #purchase *, #purchase *::before, #purchase *::after{box-sizing:border-box} #purchase h1, #purchase h2, #purchase h3, #purchase .num{font-family:var(--fh)} #purchase .num, #purchase .tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} #purchase button{font:inherit;color:inherit;cursor:pointer} #purchase svg{display:block} #purchase .ic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} #purchase :focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px} #purchase .wrap{max-width:1240px;margin:0 auto;padding:0 40px} @container root (max-width:900px){.wrap{padding:0 18px}} #purchase .step{background:var(--scene);color:#fff;padding:var(--s5) 0 var(--between)} #purchase .step__in{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);flex-wrap:wrap} #purchase .back{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:#FFFFFFC7;background:none; border:0;padding:0;font-weight:600;font-size:14px} #purchase .back:hover{color:#fff} #purchase .step h1{margin:6px 0 0;font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:-.03em} #purchase .progress{display:flex;align-items:center;gap:10px;font-family:var(--fh);font-size:12px;font-weight:700; letter-spacing:.1em;text-transform:uppercase;color:#FFFFFF80} #purchase .progress i{width:8px;height:8px;border-radius:50%;background:#FFFFFF33;display:block} #purchase .progress i.done{background:#FFFFFF66} #purchase .progress i.on{background:#fff;width:10px;height:10px} /* Форма — лівий стовп ≤560px, бланк — липкий rail (AP-46/AP-47) */ #purchase .grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:var(--block); margin-top:calc(var(--between) * -1);position:relative;z-index:2;align-items:start} @container root (max-width:1080px){.grid{grid-template-columns:1fr}} #purchase .sheet{background:var(--card);border-radius:var(--r-panel);border:1px solid var(--line); box-shadow:var(--sh-r);padding:var(--s6);max-width:640px} #purchase .sheet h2{margin:0;font-size:20px;font-weight:800;letter-spacing:-.02em} #purchase .limit{margin:6px 0 var(--s5);font-size:14px;color:var(--muted)} /* межа спокійно, до упору (П.52) */ /* Збережені пасажири — сервіс поваги (CA2) */ #purchase .saved{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:var(--s5)} #purchase .saved__t{width:100%;font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:.11em; text-transform:uppercase;color:var(--muted);margin-bottom:2px} #purchase .pill{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 14px;border-radius:var(--r-pill); border:1px solid var(--line2);background:#fff;font-weight:600;font-size:14px;transition:border-color .18s} #purchase .pill:hover{border-color:var(--muted)} #purchase .pax{border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s5);margin-bottom:var(--s4)} #purchase .pax__h{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s4)} #purchase .pax__n{font-family:var(--fh);font-weight:800;font-size:15px} #purchase .pax__n span{color:var(--muted);font-weight:600;font-size:13px;margin-left:8px} #purchase .pax__x{width:36px;height:36px;display:grid;place-items:center;border:0;background:none;color:var(--muted);border-radius:8px} #purchase .pax__x:hover{background:var(--field);color:var(--text)} #purchase .two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)} @container root (max-width:560px){.two{grid-template-columns:1fr}} #purchase .fld label{display:block;font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:.11em; text-transform:uppercase;color:var(--muted);margin-bottom:6px} #purchase .fld input{width:100%;height:52px;padding:0 16px;border:1px solid var(--line);border-radius:var(--r-in); background:var(--field);color:var(--text);font:600 16px var(--fb);transition:border-color .18s,background .18s} #purchase .fld input::placeholder{font-weight:400;color:var(--muted)} #purchase .fld input:focus{background:#fff;border-color:var(--focus);outline:none} #purchase .fld--err input{border-color:var(--error);background:#FBEAEA} #purchase .err{display:none;align-items:center;gap:6px;margin-top:6px;font-size:13.5px;color:var(--error)} #purchase .fld--err .err{display:flex} /* помилка біля поля, ніколи модалкою (ER2/AP-53) */ /* Дитячий — card-row, а не голий чекбокс */ #purchase .row{display:flex;align-items:center;gap:var(--s3);padding:14px var(--s4);margin-top:var(--s3); border:1px solid var(--line);border-radius:var(--r-in);background:var(--field)} #purchase .row input{width:20px;height:20px;accent-color:var(--text);flex:0 0 auto} #purchase .row label{font-size:15px;cursor:pointer;flex:1} #purchase .row .p{font-family:var(--fh);font-weight:800;font-variant-numeric:tabular-nums} #purchase .add{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;width:100%; justify-content:center;border:1.5px dashed var(--line2);background:#fff;border-radius:var(--r-in); color:var(--text2);font-family:var(--fh);font-weight:700;font-size:14.5px;transition:border-color .18s,color .18s} #purchase .add:hover{border-color:var(--focus);color:var(--link)} #purchase .add[disabled]{opacity:.5;pointer-events:none} /* Візок провідника: ПІСЛЯ імен, згорнуто, з цінами */ #purchase .cart{margin-top:var(--s5);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden} #purchase .cart__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s3); min-height:60px;padding:0 var(--s5);background:#fff;border:0;text-align:left; font-family:var(--fh);font-weight:700;font-size:15px} #purchase .cart__q span{font-family:var(--fb);font-weight:400;font-size:13.5px;color:var(--muted)} #purchase .cart__q svg{transition:transform .24s var(--e)} #purchase .cart__q[aria-expanded="true"] svg{transform:rotate(180deg)} #purchase .cart__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .24s var(--e)} #purchase .cart__a[data-open="1"]{grid-template-rows:1fr} #purchase .cart__a>div{overflow:hidden} #purchase .cart__in{padding:0 var(--s5) var(--s5)} #purchase .contact{margin-top:var(--s5)} #purchase .contact h3{margin:0 0 4px;font-size:16px;font-weight:800;letter-spacing:-.02em} #purchase .contact p{margin:0 0 var(--s4);font-size:14px;color:var(--muted)} /* ── БЛАНК: збирається на очах, липкий (B1/П.51) ─────────────────────── */ #purchase .tk{position:sticky;top:var(--s5);background:var(--card);border:1px solid var(--line); border-radius:var(--r-card);box-shadow:var(--sh-r);overflow:hidden} #purchase .tk__top{padding:var(--s5);border-bottom:1px dashed var(--line2);position:relative} /* Перфорація-капсула — форма бренду (S2/П.27) */ #purchase .tk__top::after, #purchase .tk__top::before{content:'';position:absolute;bottom:-9px;width:18px;height:18px; border-radius:50%;background:var(--page)} #purchase .tk__top::before{left:-9px}.tk__top::after{right:-9px} #purchase .tk__r{display:flex;align-items:center;gap:10px;font-family:var(--fh);font-weight:800;font-size:19px; letter-spacing:-.02em} #purchase .tk__l{flex:1;height:1px;background:var(--line2);position:relative;min-width:20px} #purchase .tk__l::before, #purchase .tk__l::after{content:'';position:absolute;top:-2px;width:5px;height:5px;border-radius:50%; background:var(--line2)} #purchase .tk__l::before{left:0}.tk__l::after{right:0} #purchase .tk__d{margin:8px 0 0;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums} #purchase .tk__b{padding:var(--s5);display:flex;flex-direction:column;gap:12px} #purchase .tk__i{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);font-size:14.5px} #purchase .tk__i span{color:var(--muted)} #purchase .tk__i b{font-family:var(--fh);font-weight:700;font-variant-numeric:tabular-nums} #purchase .tk__sum{border-top:1px solid var(--line);padding-top:12px;margin-top:2px} #purchase .tk__sum b{font-size:22px;font-weight:800} /* Таймер-свічка: смуга, що тане, з людським дедлайном (П.57/B5) */ #purchase .tmr{padding:var(--s4) var(--s5);background:var(--field);border-top:1px solid var(--line)} #purchase .tmr__t{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text2);margin-bottom:8px} #purchase .tmr__b{height:4px;border-radius:2px;background:var(--line);overflow:hidden} #purchase .tmr__f{height:100%;width:72%;border-radius:2px;background:var(--live);transition:width 1s linear} #purchase .dock{position:sticky;bottom:0;z-index:40;background:#FFFFFFF2;backdrop-filter:blur(14px); border-top:1px solid var(--line);margin-top:var(--between)} #purchase .dock__in{display:flex;align-items:center;gap:var(--s4);padding:var(--s3) 0;flex-wrap:wrap} #purchase .dock__s{flex:1;font-size:14px;color:var(--muted);min-width:180px} #purchase .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 26px; border:0;border-radius:var(--r-in);font-family:var(--fh);font-weight:700;font-size:15px; transition:transform .18s var(--e),background .18s} #purchase .btn--primary{background:var(--amber);color:var(--on-amber);box-shadow:var(--sh-glow)} #purchase .btn--primary:hover{background:#E9A800;transform:translateY(-1px)} #purchase .btn--ghost{background:transparent;color:var(--text2)} #purchase .btn--ghost:hover{color:var(--text)} @media (prefers-reduced-motion:reduce){#purchase *{animation:none!important;transition:none!important}} /* ═══ 07-confirm-pay-mock.html ═══ */ /* ═══════════════════════════════════════════════════════════════════════════ CONFIRM + PAYMENT · кадр E «Каса-віконце» (Layout Bible §5–§6) Питання екрана (IH2): «Скільки?». Бланк квитка ПО ЦЕНТРІ — він і є контент. Комісія не згадується ніде (П.73/TR5/AP-6). Сума в кнопці — завжди (П.58). Міст у банк — той самий кадр: бланк «відʼїжджає у віконце». ═══════════════════════════════════════════════════════════════════════════ */ #confirm{ --scene:#0A1024; --page:#F6F7FB; --card:#FFFFFF; --field:#F6F7FB; --text:#101729; --text2:#4A5570; --muted:#667088; --amber:#FFB800; --on-amber:#231700; --link:#2F59B0; --focus:#3B6FD9; --error:#C4392E; --live:#3ECF8E; --line:#E4E8F1; --line2:#C6D2E8; --line-sc:#FFFFFF17; --fh:'Manrope',system-ui,sans-serif; --fb:'Source Sans 3',system-ui,sans-serif; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --block:32px; --between:56px; --r-in:12px; --r-card:16px; --r-panel:24px; --r-pill:999px; --sh-r:0 14px 34px -12px rgba(10,16,36,.22); --sh-o:0 32px 80px -18px rgba(5,8,20,.55); --sh-glow:0 14px 30px -8px rgba(255,184,0,.55); --e:cubic-bezier(.16,1,.3,1); container-type:inline-size; container-name:root; background:var(--page); color:var(--text); font:400 16px/1.55 var(--fb); margin:0 auto; overflow-x:clip; min-height:100vh; } #confirm *, #confirm *::before, #confirm *::after{box-sizing:border-box} #confirm h1, #confirm h2, #confirm h3, #confirm .num{font-family:var(--fh)} #confirm .num, #confirm .tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} #confirm button{font:inherit;color:inherit;cursor:pointer} #confirm svg{display:block} #confirm .ic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} #confirm :focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px} #confirm .wrap{max-width:1240px;margin:0 auto;padding:0 40px} #confirm .narrow{max-width:760px;margin:0 auto} /* П.21: читання/форми-соло */ @container root (max-width:900px){.wrap{padding:0 18px}} #confirm .step{background:var(--scene);color:#fff;padding:var(--s5) 0 var(--between);text-align:center} #confirm .back{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:#FFFFFFC7;background:none; border:0;padding:0;font-weight:600;font-size:14px} #confirm .back:hover{color:#fff} #confirm .step h1{margin:6px 0 0;font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:-.03em} #confirm .progress{display:inline-flex;align-items:center;gap:10px;margin-top:var(--s4);font-family:var(--fh); font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#FFFFFF80} #confirm .progress i{width:8px;height:8px;border-radius:50%;background:#FFFFFF33;display:block} #confirm .progress i.done{background:#FFFFFF66} #confirm .progress i.on{background:#fff;width:10px;height:10px} /* ── БЛАНК КВИТКА: капсула з перфорацією (S2/П.27). Це не «самарі» — це предмет, за який платять */ #confirm .tk{background:var(--card);border:1px solid var(--line);border-radius:var(--r-panel); box-shadow:var(--sh-r);overflow:hidden;margin-top:calc(var(--between) * -1);position:relative;z-index:2} #confirm .tk__top{padding:var(--s6);position:relative;border-bottom:1px dashed var(--line2)} #confirm .tk__top::before, #confirm .tk__top::after{content:'';position:absolute;bottom:-10px;width:20px;height:20px; border-radius:50%;background:var(--page)} #confirm .tk__top::before{left:-10px}.tk__top::after{right:-10px} #confirm .tk__k{font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--muted);margin:0 0 var(--s3)} #confirm .tk__r{display:flex;align-items:center;gap:var(--s4);font-family:var(--fh);font-weight:800; font-size:clamp(22px,2.6vw,30px);letter-spacing:-.03em;margin:0} #confirm .tk__l{flex:1;height:1px;background:var(--line2);position:relative;min-width:24px} #confirm .tk__l::before, #confirm .tk__l::after{content:'';position:absolute;top:-3px;width:7px;height:7px;border-radius:50%; background:var(--line2)} #confirm .tk__l::before{left:0}.tk__l::after{right:0} #confirm .tk__d{margin:var(--s3) 0 0;color:var(--muted);font-size:15px;font-variant-numeric:tabular-nums} #confirm .tk__b{padding:var(--s6)} #confirm .facts{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);margin-bottom:var(--s5)} @container root (max-width:640px){.facts{grid-template-columns:1fr 1fr}} #confirm .fact span{display:block;font-size:12px;color:var(--muted);margin-bottom:3px} #confirm .fact b{font-family:var(--fh);font-weight:800;font-size:17px;font-variant-numeric:tabular-nums} #confirm .pax{border-top:1px solid var(--line);padding-top:var(--s4)} #confirm .pax p{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin:0 0 8px;font-size:15px} #confirm .pax p span{color:var(--text2)} #confirm .pax p b{font-family:var(--fh);font-weight:700;font-variant-numeric:tabular-nums} /* Розбивка: усе видно ДО кнопки (B4/П.87). Слова «комісія» тут немає */ #confirm .calc{border-top:1px solid var(--line);margin-top:var(--s4);padding-top:var(--s4)} #confirm .calc p{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin:0 0 10px; font-size:15px;color:var(--text2)} #confirm .calc p b{font-family:var(--fh);font-weight:700;color:var(--text);font-variant-numeric:tabular-nums} #confirm .calc .total{border-top:1px solid var(--line);padding-top:var(--s4);margin-top:var(--s2);color:var(--text)} #confirm .calc .total b{font-size:clamp(28px,4vw,40px);font-weight:800;letter-spacing:-.03em} #confirm .tmr{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) var(--s6);background:var(--field); border-top:1px solid var(--line)} #confirm .tmr__t{flex:1;font-size:14px;color:var(--text2)} #confirm .tmr__t b{font-variant-numeric:tabular-nums} #confirm .tmr__b{width:120px;height:4px;border-radius:2px;background:var(--line);overflow:hidden;flex:0 0 auto} #confirm .tmr__f{height:100%;width:64%;border-radius:2px;background:var(--live)} /* Email — єдине поле кроку */ #confirm .mail{margin-top:var(--block)} #confirm .mail h2{margin:0 0 4px;font-size:18px;font-weight:800;letter-spacing:-.02em} #confirm .mail p{margin:0 0 var(--s4);font-size:14px;color:var(--muted)} #confirm .fld label{display:block;font-family:var(--fh);font-size:11px;font-weight:700;letter-spacing:.11em; text-transform:uppercase;color:var(--muted);margin-bottom:6px} #confirm .fld input{width:100%;height:52px;padding:0 16px;border:1px solid var(--line);border-radius:var(--r-in); background:var(--card);color:var(--text);font:600 16px var(--fb)} #confirm .fld input:focus{border-color:var(--focus);outline:none} /* Trust-смуга ОДРАЗУ під CTA, не в кінці сторінки (аудит №49) */ #confirm .trust{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;justify-content:center; margin-top:var(--s4);font-size:13.5px;color:var(--text2)} #confirm .trust span{display:inline-flex;align-items:center;gap:7px} #confirm .trust .ic{color:var(--muted)} #confirm .pays{display:flex;gap:6px;align-items:center} #confirm .pays i{display:inline-flex;align-items:center;height:24px;padding:0 8px;border:1px solid var(--line); border-radius:6px;font-family:var(--fh);font-style:normal;font-weight:700;font-size:10px; letter-spacing:.04em;color:var(--muted);background:#fff} #confirm .agree{margin:var(--s5) 0 0;font-size:13.5px;color:var(--muted);text-align:center} #confirm .agree a{color:var(--link)} #confirm .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:58px; padding:0 26px;border:0;border-radius:var(--r-in);font-family:var(--fh);font-weight:800;font-size:17px; transition:transform .18s var(--e),background .18s} #confirm .btn--primary{background:var(--amber);color:var(--on-amber);box-shadow:var(--sh-glow)} #confirm .btn--primary:hover{background:#E9A800;transform:translateY(-1px)} #confirm .btn--ghost{background:transparent;color:var(--text2);width:auto;min-height:44px;font-weight:700;font-size:14px} #confirm .acts{margin-top:var(--block)} #confirm .acts__b{text-align:center;margin-top:var(--s3)} /* ── МІСТ У БАНК: бланк відʼїжджає у віконце ─────────────────────────── */ #confirm .bridge{display:none;position:fixed;inset:0;z-index:100;background:var(--scene); align-items:center;justify-content:center;padding:var(--s5)} #confirm .bridge.on{display:flex} #confirm .bridge__in{text-align:center;max-width:420px;width:100%} #confirm .bridge__tk{background:#fff;border-radius:var(--r-card);padding:var(--s5);text-align:left; box-shadow:var(--sh-o);animation:away 2.4s var(--e) infinite} @keyframes away{ 0%{transform:translateY(0) scale(1);opacity:1} #confirm 70%{transform:translateY(-26px) scale(.94);opacity:.35} 100%{transform:translateY(-26px) scale(.94);opacity:.35} } #confirm .bridge__r{display:flex;align-items:center;gap:var(--s3);font-family:var(--fh);font-weight:800;font-size:18px; letter-spacing:-.02em} #confirm .bridge__d{margin:6px 0 0;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums} #confirm .bridge h2{color:#fff;font-size:22px;font-weight:800;letter-spacing:-.02em;margin:var(--block) 0 8px} #confirm .bridge p{color:#FFFFFFC7;margin:0 0 var(--s5);font-size:15px} #confirm .bridge__p{display:flex;gap:6px;justify-content:center;margin-bottom:var(--s5)} #confirm .bridge__p i{display:inline-flex;align-items:center;height:26px;padding:0 9px;border-radius:6px; border:1px solid var(--line-sc);background:#FFFFFF0F;color:#FFFFFFC7;font-family:var(--fh); font-style:normal;font-weight:700;font-size:10px;letter-spacing:.04em} #confirm .bridge .btn--ghost{color:#FFFFFFC7} #confirm .bridge .btn--ghost:hover{color:#fff} @media (prefers-reduced-motion:reduce){#confirm *,.bridge *{animation:none!important;transition:none!important}} /* ═══ 05-seats-mock.html ═══ */ /* ═══════════════════════════════════════════════════════════════════════════ SEATS · кадр C «Салон» (Layout Bible §3) Питання екрана (IH2): «Яке місце?». Схема — головний об'єкт, ≥55% висоти. Вагони — стрічка состава, а не стос однакових карток (проблема №33). Вибір місця — МОМЕНТ: місце загорається і одразу друкується в бланк (П.54). ═══════════════════════════════════════════════════════════════════════════ */ #trainDialog{ --scene:#0A1024; --panel:#111C3A; --page:#F6F7FB; --card:#FFFFFF; --text:#101729; --text2:#4A5570; --muted:#667088; --amber:#FFB800; --on-amber:#231700; --glow:#FFC63A; --link:#2F59B0; --focus:#3B6FD9; --live:#3ECF8E; --line:#E4E8F1; --line2:#C6D2E8; --line-sc:#FFFFFF17; --fh:'Manrope',system-ui,sans-serif; --fb:'Source Sans 3',system-ui,sans-serif; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --block:32px; --between:56px; --r-in:12px; --r-card:16px; --r-panel:24px; --r-pill:999px; --sh-r:0 14px 34px -12px rgba(10,16,36,.22); --sh-glow:0 14px 30px -8px rgba(255,184,0,.55); --e:cubic-bezier(.16,1,.3,1); container-type:inline-size; container-name:root; background:var(--page); color:var(--text); font:400 16px/1.55 var(--fb); margin:0 auto; overflow-x:clip; padding-bottom:96px; } #trainDialog *, #trainDialog *::before, #trainDialog *::after{box-sizing:border-box} #trainDialog h1, #trainDialog h2, #trainDialog h3, #trainDialog .num{font-family:var(--fh)} #trainDialog .num, #trainDialog .tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} #trainDialog button{font:inherit;color:inherit;cursor:pointer} #trainDialog svg{display:block} #trainDialog .ic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} #trainDialog :focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px} #trainDialog .wrap{max-width:1240px;margin:0 auto;padding:0 40px} @container root (max-width:900px){.wrap{padding:0 18px}} /* Контекст кроку */ #trainDialog .step{background:var(--scene);color:#fff;padding:var(--s5) 0 var(--between)} #trainDialog .step__in{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);flex-wrap:wrap} #trainDialog .back{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:#FFFFFFC7; background:none;border:0;padding:0;font-weight:600;font-size:14px} #trainDialog .back:hover{color:#fff} #trainDialog .step h1{margin:6px 0 0;font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:-.03em;line-height:1.1} #trainDialog .step__d{font-size:15px;color:#FFFFFFC7;margin:8px 0 0;font-variant-numeric:tabular-nums} #trainDialog .progress{display:flex;align-items:center;gap:10px;font-family:var(--fh);font-size:12px;font-weight:700; letter-spacing:.1em;text-transform:uppercase;color:#FFFFFF80} #trainDialog .progress i{width:8px;height:8px;border-radius:50%;background:#FFFFFF33;display:block} #trainDialog .progress i.done{background:#FFFFFF66} #trainDialog .progress i.on{background:#fff;width:10px;height:10px} /* ── СОСТАВ: стрічка вагонів. Вибір вагона — це вибір місця в поїзді, а не пункт списку. Обраний — з теплими вікнами (light.windows) ──── */ #trainDialog .train{background:var(--panel);border-radius:var(--r-panel);margin-top:calc(var(--between) * -1); box-shadow:var(--sh-r);position:relative;z-index:2;overflow:hidden} #trainDialog .train__hd{display:flex;align-items:center;justify-content:space-between;gap:var(--s4); padding:var(--s4) var(--s5);border-bottom:1px solid var(--line-sc);flex-wrap:wrap} #trainDialog .train__t{font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:#FFFFFFC7} #trainDialog .train__l{display:flex;align-items:center;gap:6px;font-size:13px;color:#FFFFFFC7} #trainDialog .train__l i{width:8px;height:8px;border-radius:50%;background:var(--live);display:block} #trainDialog .cars{display:flex;gap:10px;padding:var(--s5);overflow-x:auto} #trainDialog .car{flex:0 0 auto;width:126px;padding:var(--s3);border-radius:14px;text-align:left; background:#FFFFFF0D;border:1px solid var(--line-sc);color:#fff; transition:background .18s,border-color .18s,transform .24s var(--e)} #trainDialog .car:hover{background:#FFFFFF1A;transform:translateY(-2px)} #trainDialog .car__n{font-family:var(--fh);font-weight:800;font-size:17px;letter-spacing:-.02em} #trainDialog .car__t{font-size:12px;color:#FFFFFFC7;margin-top:1px} /* Силует вагона: вікна = життя. Зайнятий вагон — темні вікна */ #trainDialog .car__w{display:flex;gap:3px;margin:9px 0 8px} #trainDialog .car__w i{flex:1;height:9px;border-radius:2px;background:#FFFFFF26} #trainDialog .car.is-on{background:#fff;border-color:#fff;color:var(--text)} #trainDialog .car.is-on .car__t{color:var(--muted)} #trainDialog .car.is-on .car__w i{background:var(--glow)} #trainDialog .car.is-full{opacity:.42} #trainDialog .car.is-full .car__w i{background:#FFFFFF14} #trainDialog .car__p{font-family:var(--fh);font-weight:800;font-size:15px;font-variant-numeric:tabular-nums} #trainDialog .car__f{font-size:11.5px;color:#FFFFFFC7} #trainDialog .car.is-on .car__f{color:var(--muted)} /* ── САЛОН: корпус вагона на всю ширину контенту ─────────────────────── */ #trainDialog .hall{margin:var(--between) 0 0;background:var(--card);border-radius:var(--r-panel); border:1px solid var(--line);box-shadow:var(--sh-r);overflow:hidden} #trainDialog .hall__hd{display:flex;align-items:center;justify-content:space-between;gap:var(--s4); padding:var(--s4) var(--s5);border-bottom:1px solid var(--line);flex-wrap:wrap} #trainDialog .hall__t{font-family:var(--fh);font-weight:800;font-size:18px;letter-spacing:-.02em} #trainDialog .hall__t span{font-weight:600;color:var(--muted);font-size:14px;margin-left:8px} #trainDialog .legend{display:flex;gap:var(--s4);flex-wrap:wrap;font-size:13px;color:var(--text2)} #trainDialog .legend span{display:inline-flex;align-items:center;gap:7px} #trainDialog .legend i{width:16px;height:16px;border-radius:5px;display:block} #trainDialog .lg-free{border:1.5px solid var(--line2)} #trainDialog .lg-busy{background:#EDF0F7} #trainDialog .lg-sel{background:var(--amber);box-shadow:0 0 0 3px #FFB80033} /* Корпус: тамбури + коридор. Напрямок руху — тільки якщо API його дає (П.55) */ #trainDialog .body{padding:var(--s5);overflow-x:auto} #trainDialog .hull{min-width:640px;border:2px solid var(--line2);border-radius:18px;padding:var(--s4); position:relative;background:linear-gradient(180deg,#FBFCFE,#F6F7FB)} #trainDialog .hull__end{position:absolute;top:50%;transform:translateY(-50%);width:9px;height:52px; border-radius:4px;background:var(--line2)} #trainDialog .hull__end--l{left:-2px}.hull__end--r{right:-2px} #trainDialog .rows{display:flex;gap:10px;justify-content:center} #trainDialog .cpt{display:grid;grid-template-rows:auto 14px auto;gap:6px;padding:10px 8px;border-radius:12px; background:#fff;border:1px solid var(--line)} #trainDialog .pair{display:flex;gap:6px} #trainDialog .corr{border-top:1px dashed var(--line2)} #trainDialog .seat{width:42px;height:42px;border-radius:9px;border:1.5px solid var(--line2);background:#fff; font-family:var(--fh);font-weight:700;font-size:13px;color:var(--text2); font-variant-numeric:tabular-nums;transition:transform .24s var(--e),background .18s,box-shadow .18s} #trainDialog .seat:hover:not(.busy){border-color:var(--muted);transform:translateY(-1px)} #trainDialog .seat.busy{background:#EDF0F7;border-color:transparent;color:#8A93A8;cursor:not-allowed} #trainDialog .seat.sel{background:var(--amber);border-color:var(--amber);color:var(--on-amber); box-shadow:var(--sh-glow);transform:scale(1.06)} /* ── ЛИПКА ПАНЕЛЬ: бланк квитка збирається на очах (B1/П.51) ─────────── */ #trainDialog .dock{position:sticky;bottom:0;z-index:40;background:#FFFFFFF2;backdrop-filter:blur(14px); border-top:1px solid var(--line);margin-top:var(--between)} #trainDialog .dock__in{display:flex;align-items:center;gap:var(--s4);padding:var(--s3) 0;flex-wrap:wrap} #trainDialog .tk{display:flex;align-items:center;gap:var(--s4);flex:1;min-width:220px} #trainDialog .tk__i{display:flex;flex-direction:column} #trainDialog .tk__i b{font-family:var(--fh);font-weight:800;font-size:17px;letter-spacing:-.02em; font-variant-numeric:tabular-nums} #trainDialog .tk__i span{font-size:12px;color:var(--muted)} #trainDialog .tk__sep{width:1px;height:30px;background:var(--line)} #trainDialog .tk__empty{color:var(--muted);font-size:14px} #trainDialog .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px; padding:0 26px;border:0;border-radius:var(--r-in);font-family:var(--fh);font-weight:700;font-size:15px; transition:transform .18s var(--e),background .18s,box-shadow .18s} #trainDialog .btn--primary{background:var(--amber);color:var(--on-amber);box-shadow:var(--sh-glow)} #trainDialog .btn--primary:hover{background:#E9A800;transform:translateY(-1px)} #trainDialog .btn--primary[disabled]{opacity:.45;pointer-events:none;box-shadow:none} #trainDialog .btn--ghost{background:transparent;color:var(--text2)} #trainDialog .btn--ghost:hover{color:var(--text)} @container root (max-width:900px){ #trainDialog .dock__in{gap:var(--s2)} #trainDialog .btn--primary{flex:1} #trainDialog .tk{width:100%} } @media (prefers-reduced-motion:reduce){#trainDialog *{animation:none!important;transition:none!important}}