/* ROTOCON Configurator — mobil / tabletă: PANOUL DE CONFIGURARE CA POPUP LATERAL.
   REGULĂ (14 sept 2026): structura paginii NU se schimbă nici pe mobil — nav, ticker, bara de
   specs rămân cele de pe desktop. Pe mobil doar: (1) poza presei integral, (2) sidebar-ul (.side)
   = popup din DREAPTA, deschis din ☰ → „Configure line", (3) footer-ul „Configured line —
   general arrangement" = bottom sheet.
   Activare: clasa `html.rwo-mobile` (pusă de index.html + useIsMobile() din app.jsx după lățimea
   ferestrei PĂRINTE ≤1024px — NU după media query pe iframe: iOS lărgește iframe-ul la lățimea
   conținutului, iar un media query pe iframe ar cădea). Elementele mobile există în DOM doar
   când clasa e activă. Fișier separat de styles.css ca să poată fi gated (?mobile=1) în preview.
   iOS: nimic nu are voie să depășească lățimea ecranului (altfel iframe-ul se lărgește) — de
   aici .nav { overflow:hidden }, meniul fixed, panoul/sheet-ul fără părți în afara ecranului. */

/* ---- ☰ în stânga nav-ului; nav-ul se clipează (nu mai lățește documentul) ---- */
html.rwo-mobile .nav { position: relative; z-index: 60; overflow: hidden; }
html.rwo-mobile .nav__burger { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; border: 1px solid var(--rwo-line-strong); background: #fff; border-radius: var(--rwo-r-sm); color: var(--rwo-text); cursor: pointer; padding: 0; }

/* meniul ☰: listă separată (fixed → nu e clipat de nav-ul cu overflow:hidden) */
html.rwo-mobile .nav__menu { position: fixed; top: var(--nav-h); left: 0; z-index: 95; width: min(360px, 100vw); display: flex; flex-direction: column; gap: .35rem; padding: .6rem .8rem 1rem; background: #fff; border: 1px solid var(--rwo-line); border-top: 0; border-radius: 0 0 var(--rwo-r-md) 0; box-shadow: var(--rwo-shadow-lg); }
html.rwo-mobile .nav__menu .btn { width: 100%; justify-content: flex-start; font-size: 15px; padding: .8rem 1rem; }
html.rwo-mobile .nav__drawer { display: flex; align-items: center; gap: .55em; width: 100%; margin: 0 0 .3rem; padding: .85rem 1rem; border: 0; border-radius: var(--rwo-r-sm); background: var(--rwo-black-grey); color: #fff; font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; }
html.rwo-mobile .nav__drawer b { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--rwo-r-pill); background: var(--ui-accent); color: #fff; font-size: 12px; font-weight: 600; }
html.rwo-mobile .nav__drawer svg:last-child { margin-left: auto; opacity: .7; }

/* ---- RESPONSIVE: poza presei integral + detaliile complete ---- */
html.rwo-mobile, html.rwo-mobile body { overflow-x: hidden; overflow-y: auto; height: auto; }
html.rwo-mobile .cfg { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--nav-h) var(--mtick-h) minmax(0, 1fr) auto; height: auto; min-height: 100vh; min-height: 100dvh; }
html.rwo-mobile .cfg__main { grid-template-columns: minmax(0, 1fr); }
/* viewport-ul = stivă: titlu → poza (întreagă, 16:9) → bara de specs */
html.rwo-mobile .vp { display: flex; flex-direction: column; min-height: 0; }
html.rwo-mobile .vp__topbar { position: static; order: -1; padding: 12px 14px 6px; flex-wrap: wrap; gap: .4rem .8rem; pointer-events: auto; }
html.rwo-mobile .vp__title h1 { font-size: 20px; }
html.rwo-mobile .vp__canvas, html.rwo-mobile .pstage { position: relative; inset: auto; height: auto; }
html.rwo-mobile .pstage__photo { position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 9; min-height: 56vw; }
html.rwo-mobile .pstage__scrim { display: none; }
/* footer-ul „Configured line — general arrangement" = BOTTOM SHEET: bara (44px) fixă jos,
   tap → se ridică (max-height animat, fără părți în afara ecranului). Toggle = app.jsx. */
html.rwo-mobile .pstage__line { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; padding: 0; max-height: 44px; overflow: hidden; background: #fff; border-top: 1px solid var(--rwo-line); box-shadow: 0 -8px 24px rgba(0,0,0,.12); transition: max-height .28s var(--rwo-ease); }
html.rwo-mobile .pstage__line.is-open { max-height: 70vh; }
html.rwo-mobile .pstage__linehdr { position: relative; height: 44px; margin: 0; padding: 0 .9rem 0 2.1rem; align-items: center; gap: .6rem; cursor: pointer; user-select: none; }
html.rwo-mobile .pstage__linehdr::before { content: ''; position: absolute; left: .95rem; top: 50%; width: 9px; height: 9px; border-left: 2px solid var(--rwo-text); border-top: 2px solid var(--rwo-text); transform: translateY(-30%) rotate(45deg); transition: transform .2s var(--rwo-ease); }
html.rwo-mobile .pstage__line.is-open .pstage__linehdr::before { transform: translateY(-70%) rotate(225deg); }
html.rwo-mobile .pstage__linelbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
html.rwo-mobile .pstage__linelen { flex: 0 0 auto; white-space: nowrap; }
html.rwo-mobile .pstage__chips { flex-wrap: wrap; overflow-y: auto; max-height: calc(70vh - 44px); padding: .5rem .8rem calc(.8rem + env(safe-area-inset-bottom, 0px)); }
html.rwo-mobile .pchip { flex: 1 1 calc(33.333% - .4rem); min-width: 0; max-width: none; }
html.rwo-mobile .specs { flex-wrap: wrap; height: auto; padding: .7rem .9rem calc(.7rem + 44px); gap: .4rem .9rem; } /* loc pentru bara sheet-ului */
html.rwo-mobile .specs__tiles { flex: 1 1 100%; flex-wrap: wrap; overflow: visible; gap: .55rem 1rem; }
html.rwo-mobile .spec { flex: 1 1 calc(33.333% - 1rem); min-width: 96px; }
html.rwo-mobile .specs__price { flex: 1 1 100%; justify-content: space-between; }
html.rwo-mobile .toast { bottom: 60px; }

/* clapeta de pe marginea DREAPTĂ a ecranului — intrarea vizibilă în panou („‹ CONFIGURE LINE 7"),
   text vertical citit de jos în sus; nu iese din ecran (fixed, right:0) */
html.rwo-mobile .drawer__tab { position: fixed; right: 0; top: 50%; z-index: 75; display: inline-flex; align-items: center; gap: .5em; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); padding: .9rem .55rem; border: 0; border-radius: 0 var(--rwo-r-md) var(--rwo-r-md) 0; background: var(--rwo-black-grey); color: #fff; font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; box-shadow: var(--rwo-shadow-lg); cursor: pointer; }
html.rwo-mobile .drawer__tab svg { transform: rotate(90deg); }
html.rwo-mobile .drawer__tab b { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--rwo-r-pill); background: var(--ui-accent); color: #fff; font-size: 11px; writing-mode: horizontal-tb; transform: rotate(180deg); }

/* ---- panoul de configurare = popup lateral din dreapta ----
   .side iese din grilă; închis = invizibil (visibility) ca să nu lase nimic în afara ecranului. */
html.rwo-mobile .drawer__bg { position: fixed; inset: 0; z-index: 80; background: rgba(28,27,26,.45); display: none; }
html.rwo-mobile .cfg.is-drawer .drawer__bg { display: block; }
html.rwo-mobile .side { position: fixed; top: 0; right: 0; bottom: 0; z-index: 90; width: min(420px, 92vw); transform: translateX(100%); visibility: hidden; transition: transform .28s var(--rwo-ease), visibility 0s .28s; border-left: 1px solid var(--rwo-line); }
html.rwo-mobile .cfg.is-drawer .side { transform: none; visibility: visible; transition: transform .28s var(--rwo-ease), visibility 0s; box-shadow: var(--rwo-shadow-lg); }
html.rwo-mobile .side__mhead { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .8rem .9rem .8rem 1.2rem; border-bottom: 1px solid var(--rwo-line); background: #fff; flex: 0 0 auto; }
html.rwo-mobile .side__mtitle { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
html.rwo-mobile .side__close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: var(--rwo-r-sm); background: rgba(64,62,61,.08); color: var(--rwo-text); cursor: pointer; }
html.rwo-mobile .side__scroll { flex: 1 1 auto; -webkit-overflow-scrolling: touch; }
/* toate datele vizibile: lățimile (4 tier-uri la S-Series) se înfășoară dacă nu încap pe un rând */
html.rwo-mobile .side .widths { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); }

/* ---- modalele (Request quote, BOM, Specifications, Library, Guided build, AI, cotații) ----
   O singură coloană, pe toată lățimea; poza de previzualizare din Request quote e ascunsă
   (sumarul rămâne), formularul ocupă tot ecranul; tabelul BOM derulează orizontal în loc să
   depășească caseta; rândurile de butoane se înfășoară. Conținutul nu se schimbă. */
html.rwo-mobile .modal { padding: .5rem; align-items: flex-start; }
html.rwo-mobile .modal__box, html.rwo-mobile .modal__box.spec, html.rwo-mobile .modal__box.mfg, html.rwo-mobile .modal__box.saved, html.rwo-mobile .modal__box.wiz, html.rwo-mobile .modal__box.quotes, html.rwo-mobile .modal__box.integ { width: 100%; max-width: 100%; max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); border-radius: var(--rwo-r-md); }
html.rwo-mobile .modal__box.wiz { padding: 1.4rem 1rem 1.2rem; }
html.rwo-mobile .modal__grid, html.rwo-mobile .spec__grid { grid-template-columns: 1fr; max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); overflow-y: auto; -webkit-overflow-scrolling: touch; }
html.rwo-mobile .modal__visual img { display: none; }
html.rwo-mobile .modal__vsum { border-top: 0; border-bottom: 1px solid var(--rwo-line); padding: .9rem 1rem; }
html.rwo-mobile .modal__panel { padding: 1.2rem 1rem 1.4rem; overflow: visible; }
html.rwo-mobile .modal__h { font-size: 20px; }
html.rwo-mobile .modal__cta { flex-wrap: wrap; gap: .7rem; }
html.rwo-mobile .spec__cols { grid-template-columns: 1fr; }
html.rwo-mobile .mfg__head { flex-wrap: wrap; padding: 1.2rem 1rem .9rem; }
html.rwo-mobile .mfg__scroll { padding: 1rem; }
html.rwo-mobile .mfg__ga { overflow-x: auto; -webkit-overflow-scrolling: touch; }
html.rwo-mobile table.bom { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
html.rwo-mobile .saved__grid { grid-template-columns: 1fr; }
html.rwo-mobile .modal__grid, html.rwo-mobile .spec__grid { grid-template-columns: minmax(0, 1fr); }
html.rwo-mobile .modal__panel, html.rwo-mobile .modal__visual { min-width: 0; }
html.rwo-mobile .qform input, html.rwo-mobile .qform textarea, html.rwo-mobile .qform select { width: 100%; max-width: 100%; box-sizing: border-box; }
html.rwo-mobile .mfg__util { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.rwo-mobile .mfg__actions { flex-wrap: wrap; padding: .9rem 1rem; }