/* ==== Kūrimo langas =============================================== */

/* --- Viršutinė juosta ---------------------------------------------- */
.bbar{
  position:sticky;top:0;z-index:70;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--hair);
}
.bbar-in{
  width:min(100%,1420px);margin-inline:auto;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;align-items:center;
  padding:12px var(--pad);
}
.bbar-mid{display:grid;gap:7px;justify-items:center;min-width:0}
.bbar-step{
  margin:0;font-size:.88rem;color:var(--text-2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.bbar-step b{color:var(--accent);font-family:var(--font-mono)}
.bbar-mid .progressbar{width:min(320px,52vw)}

.savestate{
  margin:0;min-width:96px;text-align:right;
  font-size:.78rem;color:var(--text-3);
  opacity:0;transition:opacity var(--t) var(--e-out);
}
.savestate.show{opacity:1}
.savestate.busy{color:var(--text-2)}
@media(max-width:720px){
  .savestate{display:none}
  .bbar-in{grid-template-columns:auto minmax(0,1fr)}
}

/* --- Tinklelis ------------------------------------------------------ */
.build{
  width:min(100%,1420px);margin-inline:auto;
  display:grid;
  grid-template-columns:200px minmax(0,1fr) minmax(0,420px);
  gap:clamp(20px,3vw,44px);
  padding:clamp(24px,4vw,48px) var(--pad) 120px;
  align-items:start;
}
.rail{position:sticky;top:calc(var(--nav-h) + 28px);display:grid;gap:18px}
.rail-note{color:var(--text-3)}

/* --- Žingsniai ------------------------------------------------------ */
.form{min-width:0;max-width:620px}
.step{display:none}
.step.is-on{display:block;animation:stepIn var(--t) var(--e-out)}
@keyframes stepIn{from{opacity:0;transform:translateY(10px)}}
.step > .lead{margin:10px 0 30px}
.acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.acts .btn:first-child:not(.btn-primary){margin-right:auto}

/* --- Progos pasirinkimas -------------------------------------------- */
.pick-head{
  margin:26px 0 12px;font-size:1.02rem;font-weight:800;
}
.pick-head:first-of-type{margin-top:6px}

.occs{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.occ{
  position:relative;display:grid;gap:6px;justify-items:start;text-align:left;
  padding:16px;cursor:pointer;
  background:var(--surface);border:2.5px solid var(--hair);border-radius:var(--r-sm);
  color:var(--text);
  transition:border-color var(--t-fast) var(--e-out), background var(--t-fast) var(--e-out),
             transform var(--t-fast) var(--e-spring);
}
.occ:hover{transform:translateY(-2px);border-color:var(--hair-2)}
.occ[aria-checked="true"]{border-color:var(--o1);background:var(--otint)}
.occ-swatch{display:flex;gap:4px}
.occ-swatch i{width:20px;height:20px;border-radius:50%;box-shadow:0 2px 5px rgba(120,60,30,.18)}
.occ-swatch i:nth-child(1){background:var(--o1)}
.occ-swatch i:nth-child(2){background:var(--o2)}
.occ-swatch i:nth-child(3){background:var(--o3)}
.occ-name{font-size:1rem;font-weight:800}
.occ-tag{font-size:.82rem;font-weight:600;color:var(--text-3);line-height:1.4}

/* --- Šablonų pasirinkimas ------------------------------------------- */
.picker{display:grid;gap:12px}
.pick{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;
  align-items:center;width:100%;text-align:left;cursor:pointer;
  padding:16px;
  background:var(--surface);border:1.5px solid var(--hair);border-radius:var(--r);
  color:var(--text);
  transition:border-color var(--t) var(--e-out), background var(--t) var(--e-out),
             transform var(--t) var(--e-spring);
}
.pick:hover{transform:translateY(-2px);border-color:var(--hair-2)}

/* Redaguojant apmoketa dovana sablonas uzrakintas — nepasirinktus prigesinam */
.picker.is-locked .pick[disabled]{
  cursor:not-allowed;opacity:.42;filter:saturate(.5);
}
.picker.is-locked .pick[disabled]:hover{transform:none;border-color:var(--hair)}
.pick[aria-checked="true"]{
  border-color:var(--acc);
  background:linear-gradient(120deg,color-mix(in srgb,var(--acc) 12%,transparent),transparent 60%),var(--surface);
}
.pick .thumb{
  position:relative;flex:0 0 auto;width:74px;height:74px;border-radius:var(--r-sm);
  background:radial-gradient(120% 100% at 50% 0%,color-mix(in srgb,var(--acc) 40%,transparent),transparent 70%),
             var(--bg-2);
  display:grid;place-items:center;overflow:hidden;
}
.pick .thumb i{display:block;position:relative}
.pick b{display:block;font-size:1.02rem;font-weight:650;letter-spacing:-.01em}
.pick span.t{display:block;margin-top:3px;font-size:.86rem;color:var(--text-3);line-height:1.45}
.pick .tick{
  position:absolute;top:12px;right:12px;
  width:24px;height:24px;border-radius:50%;
  background:var(--acc);color:#fff;
  display:grid;place-items:center;
  opacity:0;transform:scale(.5);
  transition:opacity var(--t) var(--e-out), transform var(--t) var(--e-spring);
}
.pick[aria-checked="true"] .tick{opacity:1;transform:none}
.pick[aria-checked="true"]{padding-bottom:18px}

/* miniatiūros pagal šabloną */
/* Dėžutė — nuotrauka, ta pati kaip įžangoje ir rituale. Piešta ikona rodė
   vieną daiktą, o pasirinkus atsidarydavo visai kitas. */
.th-dezute i{
  width:62px;height:62px;
  background:url("/static/img/box-closed.webp") center/contain no-repeat;
  /* Miniatiuros fonas jau nudazytas progos spalva (`.pick .thumb`), todel
     dauginant dezute gauna ta pacia spalva kaip ir visur kitur. */
  mix-blend-mode:multiply;
  /* Ta pati kadro pataisa kaip ir visur (žr. `--box-nudge-*`). */
  transform:translate(var(--box-nudge-x),var(--box-nudge-y));
}
/* Vokas — toks pat kaip įžangoje ir rituale: popierius su kontūru, spalvota
   klostė ir vaško antspaudas. Anksčiau buvo blyškus stačiakampis, kurio ant
   šviesaus fono beveik nesimatė. */
.th-laiskas i{
  width:54px;height:37px;border-radius:3px;
  background:linear-gradient(168deg,#FFFDF9,#EFE4D2);
  border:1px solid rgba(26,18,8,.2);
  box-shadow:0 3px 7px rgba(120,60,30,.16);
}
.th-laiskas i::before{
  content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:23px;
  background:linear-gradient(168deg,color-mix(in srgb,var(--acc) 84%,#fff),var(--acc));
  clip-path:polygon(0 0,100% 0,50% 100%);
}
.th-laiskas i::after{
  content:"";position:absolute;left:calc(50% - 7px);top:12px;
  width:14px;height:14px;
  border-radius:47% 53% 48% 52% / 52% 46% 54% 48%;
  background:var(--acc2,var(--acc));border:1px solid rgba(26,18,8,.26);
  box-shadow:inset 0 -1.5px 3px rgba(0,0,0,.24);
}
.th-bilietas i{width:52px;height:28px;background:var(--paper-2);border-radius:3px}
.th-bilietas i::after{content:"";position:absolute;right:0;top:0;bottom:0;width:18px;
  border-left:2px dashed rgba(21,20,27,.4);background:#BFC3CD;border-radius:0 3px 3px 0}
.th-sutartis i{width:34px;height:42px;background:var(--paper-2);border-radius:2px}
.th-sutartis i::after{content:"";position:absolute;left:6px;top:8px;width:7px;height:7px;
  border:1.6px solid var(--ink);box-shadow:0 11px 0 -.5px var(--ink),0 22px 0 -.5px var(--ink)}

/* --- Sąlygų redaktorius --------------------------------------------- */
.clauses{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:8px}
.clause-row{display:flex;gap:8px;align-items:center}
.clause-row .input{flex:1}
.clause-row .mini-btn{
  flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;
  background:var(--bg-2);border:1px solid var(--hair);border-radius:var(--r-xs);
  color:var(--text-3);cursor:pointer;font-size:1rem;
  transition:all var(--t-fast) var(--e-out);
}
.clause-row .mini-btn:hover{color:var(--text);border-color:var(--hair-2)}
.clause-row .mini-btn.trick[aria-pressed="true"]{
  background:var(--accent);border-color:transparent;color:var(--accent-ink)}

/* --- Papildomi laukai ----------------------------------------------- */
.advanced{margin-top:20px;border-top:1px solid var(--hair);padding-top:6px}
.advanced > summary{
  list-style:none;cursor:pointer;padding:12px 2px;
  font-size:.88rem;color:var(--text-3);
  display:flex;align-items:center;gap:8px;
}
.advanced > summary::-webkit-details-marker{display:none}
.advanced > summary::before{content:"+";font-family:var(--font-mono);color:var(--accent)}
.advanced[open] > summary::before{content:"–"}
.advanced > summary:hover{color:var(--text-2)}

/* --- Dovanos tipas --------------------------------------------------- */
.types{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));margin-bottom:26px}
.type{
  position:relative;text-align:left;cursor:pointer;
  padding:16px;
  background:var(--surface);border:1.5px solid var(--hair);border-radius:var(--r-sm);
  color:var(--text);
  transition:border-color var(--t-fast) var(--e-out), background var(--t-fast) var(--e-out),
             transform var(--t-fast) var(--e-spring);
}
.type:hover{transform:translateY(-2px);border-color:var(--hair-2)}
.type[aria-checked="true"]{border-color:var(--accent);background:var(--accent-dim)}
.type b{display:block;font-size:.98rem;font-weight:650}
.type span{display:block;margin-top:4px;font-size:.83rem;color:var(--text-3);line-height:1.45}

.typebox{margin-bottom:22px;display:grid;gap:12px}

/* --- Apsauga --------------------------------------------------------- */
.protect{background:transparent}
.protect .reveal-panel .inner{padding-inline:2px}

/* --- Santrauka -------------------------------------------------------- */
.summary{margin-bottom:20px}
.summary dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 20px;margin:14px 0 0}
.summary dt{font-size:.8rem;color:var(--text-3);padding-top:2px}
.summary dd{margin:0;font-size:.96rem;word-break:break-word}
.summary dd.accent{color:var(--accent);font-weight:900;font-size:1.05rem}

/* --- Peržiūra --------------------------------------------------------- */
.preview{position:sticky;top:calc(var(--nav-h) + 28px);display:grid;gap:14px;justify-items:center}
.preview-head{display:flex;align-items:center;gap:10px;width:100%;justify-content:center}
.preview-close{display:none}

.preview-frame{
  width:100%;
  background:linear-gradient(160deg,#26262E,#131318);
  border:1px solid var(--hair-2);
  box-shadow:var(--sh-3);
  transition:border-radius var(--t) var(--e-out), padding var(--t) var(--e-out),
             max-width var(--t) var(--e-out);
}
.preview-frame[data-view="phone"]{max-width:340px;padding:10px;border-radius:38px}
.preview-frame[data-view="desktop"]{max-width:100%;padding:8px;border-radius:14px}

/* Scena — matoma anga. Ji ir nukerpa sumazinta darbastalio kadra. */
.pv-stage{
  position:relative;width:100%;overflow:hidden;background:var(--bg);
  transition:height var(--t) var(--e-out), border-radius var(--t) var(--e-out);
}
.preview-frame[data-view="phone"] .pv-stage{height:min(66svh,660px);border-radius:29px}
.preview-frame[data-view="desktop"] .pv-stage{height:min(56svh,520px);border-radius:8px}

.preview-frame iframe{display:block;border:0;background:var(--bg)}
.preview.is-syncing .pv-stage::after{
  content:"Atnaujinama…";
  position:absolute;inset:0;z-index:5;display:grid;place-items:center;
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  color:var(--text-2);font-size:.82rem;font-weight:800;letter-spacing:.04em;
  backdrop-filter:blur(2px);
}
.preview.is-syncing iframe{pointer-events:none}
/* Telefonas: kadras toks, kokia anga — jokio mastelio. */
.preview-frame[data-view="phone"] iframe{width:100%;height:100%}
/* Darbastalis: kadras tikro plocio, o i anga jis itelpinamas mazinant.
   `--pv-w` ir `--pv-scale` iraso builder.js pagal angos ploti. */
/* `transform` maketo nemazina — netilpes iframe'as tempia scena placiau, ir
   anga nustoja karpiusi. Todel darbastalio kadras isimamas is srauto. */
.preview-frame[data-view="desktop"] iframe{
  position:absolute;top:0;left:0;
  width:var(--pv-w,1180px);
  height:calc(100% / var(--pv-scale,1));
  transform:scale(var(--pv-scale,1));
  transform-origin:top left;
}
.preview-note{color:var(--text-3);text-align:center}

.pv-fab{display:none;position:fixed;right:16px;bottom:max(16px,env(safe-area-inset-bottom));z-index:65;
  box-shadow:var(--sh-2)}

/* ==== Prisitaikymas (visada po bazinių taisyklių) ================= */
@media(max-width:1240px){
  .build{grid-template-columns:minmax(0,1fr) minmax(0,360px)}
  .rail{display:none}
}
@media(max-width:940px){
  .build{grid-template-columns:minmax(0,1fr)}
  .form{max-width:none}
  .preview{
    position:fixed;inset:0;z-index:90;display:none;
    align-content:center;justify-items:center;gap:12px;
    padding:16px;background:rgba(6,6,9,.93);backdrop-filter:blur(8px);
  }
  .preview.open{display:grid}
  .preview-close{display:inline-flex}
  .preview-frame[data-view="phone"]{max-width:min(340px,86vw)}
  .preview-frame[data-view="phone"] .pv-stage{height:min(62svh,600px)}
  .pv-fab{display:inline-flex}
}