/* =========================================================
   סטודיו עיצוב הקלפים — נטען רק בעמוד /studio.php
   ========================================================= */
.wrap--wide{max-width:1480px}
.studio{padding-bottom:60px}
.studio h2.h2{margin-bottom:.35em}

/* ---------- אשף השלבים ---------- */
.stp{display:flex;gap:8px;list-style:none;margin:0 0 26px;padding:0}
.stp li{flex:1;min-width:0}
.stp button{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 12px;border-radius:16px;border:2px solid var(--line);background:#fff;font:700 1.02rem var(--font);color:var(--muted);cursor:pointer;transition:border-color .15s,box-shadow .15s}
.stp button:disabled{opacity:.5;cursor:not-allowed}
.stp__n{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--paper-2);color:var(--ink);font-family:var(--font-h)}
.stp li.is-on button{border-color:var(--ink);color:var(--ink);box-shadow:var(--shadow)}
.stp li.is-on .stp__n{background:var(--accent);color:#fff}
.stp li.is-done .stp__n{background:var(--teal);color:#fff}
.stp li.is-done button{color:var(--ink)}
@media (max-width:640px){.stp{gap:5px}.stp button{flex-direction:column;gap:2px;padding:8px 4px;font-size:.85rem}}

.sp[hidden]{display:none}
.sp__nav{display:flex;justify-content:space-between;gap:12px;margin-top:24px;flex-wrap:wrap}
.hint--warn{color:#9a3412;font-weight:600}
.hint--info{background:#eef4ff;border-radius:10px;padding:8px 12px}

/* ---------- המשך עבודה ---------- */
.resume{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;background:#fff6e0;border:1px solid #f4d48a;border-radius:16px;padding:14px 18px;margin-bottom:22px}
.resume span{color:var(--ink-soft)}
.resume__btns{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- שלב 1: גדלים ---------- */
.orient{display:flex;align-items:center;gap:10px;margin:14px 0 6px;font-weight:700}
.seg{display:inline-flex;flex-wrap:wrap;border:2px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.seg__b{border:0;background:#fff;padding:7px 12px;font:600 .92rem var(--font);cursor:pointer;color:var(--ink)}
.seg__b+.seg__b{border-inline-start:1px solid var(--line)}
.seg__b.is-on{background:var(--ink);color:#fff}
.seg--tight .seg__b{padding:7px 14px;font-size:1rem}
.seg__b--i{font-style:italic}
.sz-g{margin:22px 0 4px;color:var(--ink-soft)}
.sz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin:12px 0 8px}
.sz{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 10px 14px;background:#fff;border:2px solid var(--line);border-radius:18px;cursor:pointer;font:inherit;color:var(--ink);transition:transform .15s,border-color .15s,box-shadow .15s}
.sz:hover{transform:translateY(-2px);border-color:var(--ink);box-shadow:var(--shadow)}
.sz.is-on{border-color:var(--accent);background:#fff6f2}
.sz__card{display:block;height:84px;border-radius:8px;background:linear-gradient(135deg,#fff,#f3ecdf);border:2px solid var(--ink);box-shadow:3px 3px 0 rgba(29,42,77,.16)}
.sz strong{font:800 1.05rem var(--font-h)}
.sz small{color:var(--muted);font-size:.86rem;min-height:1.2em}
.sz__tag{position:absolute;top:-10px;inset-inline-end:10px;background:var(--sun);color:var(--ink);font:700 .75rem var(--font);font-style:normal;padding:2px 9px;border-radius:99px}
.custom{margin-top:26px}
.custom__row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.custom .field{margin:0;width:130px}
.custom__x{font-size:1.5rem;padding-bottom:10px;color:var(--muted)}
.custom .hint.is-err{color:var(--accent-d);font-weight:700}
.box--tip{margin-top:22px;background:#eef6f4}

/* ---------- מדריך קצר ---------- */
.coach{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:12px 18px;margin-bottom:14px}
.coach summary{cursor:pointer;font-weight:800}
.coach ol{margin:10px 0 4px;padding-inline-start:1.4em}
.coach li{margin-bottom:5px;font-size:.98rem}

/* ---------- העורך ---------- */
.ed{--bar-top:74px}
.ed__bar{position:sticky;top:var(--bar-top);z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;box-shadow:var(--shadow)}
.grp{display:flex;gap:6px;align-items:center}
.grp+.grp{padding-inline-start:14px;border-inline-start:1px solid var(--line)}
.tb{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--line);background:#fff;border-radius:12px;padding:8px 14px;font:700 .98rem var(--font);color:var(--ink);cursor:pointer;transition:background .15s,border-color .15s}
.tb:hover{border-color:var(--ink)}
.tb.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
.tb:disabled{opacity:.4;cursor:not-allowed}
.tb--ic{padding:8px 12px;font-size:1.15rem;line-height:1}
.tb--zoom{min-width:64px;justify-content:center}
.tgl{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.95rem;cursor:pointer}
.tgl input{width:20px;height:20px;accent-color:var(--accent)}
.saved{margin-inline-start:auto;font-size:.85rem;color:var(--muted)}
.ed__tray{display:flex;flex-wrap:wrap;gap:8px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:10px;margin-top:8px}
.ed__tray[hidden]{display:none}
.tr{border:2px solid var(--line);background:#fff;border-radius:12px;padding:8px 14px;cursor:pointer;font:inherit;display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.tr:hover{border-color:var(--ink)}
.tr--em{font-size:1.6rem;padding:4px 9px;line-height:1.25}
.tr__i{font-size:1.3rem}
.tr__s--title{font:800 1.15rem var(--font-h)}
.tr__s--outline{color:#fff;font-weight:800;background:#9aa3b5;padding:0 8px;border-radius:6px;text-shadow:-1px -1px 0 #1d2a4d,1px -1px 0 #1d2a4d,-1px 1px 0 #1d2a4d,1px 1px 0 #1d2a4d}
.tr__s--body{font-weight:400}
.tr__s--label{background:var(--accent);color:#fff;padding:1px 12px;border-radius:8px;font-weight:700}
.tr__s--small{font-size:.8rem}

.ed__body{display:grid;grid-template-columns:128px minmax(0,1fr) 340px;gap:14px;align-items:start;margin-top:10px}
.ed__cards{display:flex;flex-direction:column;gap:10px;position:sticky;top:calc(var(--bar-top) + 62px)}
.cardlist{display:flex;flex-direction:column;align-items:center;gap:10px;max-height:calc(100vh - 380px);min-height:120px;overflow:auto;padding:6px 4px;background:var(--paper);border-radius:14px}
.cd{position:relative;flex:none;border:3px solid transparent;border-radius:10px;background:none;padding:2px;cursor:pointer}
.cd.is-on{border-color:var(--accent);background:#fff}
.cd canvas{display:block;border-radius:4px;box-shadow:0 1px 5px rgba(0,0,0,.25)}
.cd__n{position:absolute;inset-inline-start:0;top:0;background:var(--ink);color:#fff;font:700 .72rem var(--font);padding:1px 7px;border-radius:99px}
.cardbtns{display:grid;gap:6px}
.cb{border:2px solid var(--line);background:#fff;border-radius:10px;padding:7px 10px;font:700 .85rem var(--font);cursor:pointer;color:var(--ink);text-align:center}
.cb:hover{border-color:var(--ink)}
.cb:disabled{opacity:.4;cursor:not-allowed}
.cb--del{color:#b3261e}
.cb--ghost{border-style:dashed;margin-bottom:10px}
.cb.is-dis{opacity:.5;pointer-events:none}

.ed__tabs{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.tabs{display:inline-flex;gap:4px;background:var(--paper-2);padding:4px;border-radius:14px}
.tab{border:0;background:none;padding:8px 18px;border-radius:10px;font:700 1rem var(--font);cursor:pointer;color:var(--ink-soft)}
.tab.is-on{background:#fff;color:var(--ink);box-shadow:var(--shadow)}
.backmode{display:flex;flex-wrap:wrap;gap:6px 18px;font-weight:700;font-size:.95rem}
.backmode[hidden]{display:none}
.backmode label{display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.backmode input{width:18px;height:18px;accent-color:var(--accent)}
.hint--bar{margin:10px 0;padding:8px 12px;background:#fff6e0;border-radius:10px;font-size:.92rem}

.stagewrap{display:flex;overflow:auto;padding:30px;min-height:440px;max-height:calc(100vh - 150px);border-radius:var(--r-lg);border:1px solid var(--line);background-color:#ece6d8;background-image:radial-gradient(rgba(29,42,77,.16) 1px,transparent 1.3px);background-size:18px 18px}
.stagewrap.is-over{outline:3px dashed var(--accent);outline-offset:-8px}
.stagewrap.is-preview{background:radial-gradient(circle at 50% 35%,#faf6ec,#cfc6b0)}
.stage{position:relative;margin:auto;flex:none;touch-action:none;user-select:none;-webkit-user-select:none}
.stage canvas{display:block}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;padding:0;margin:10px 0 0;font-size:.85rem;color:var(--ink-soft)}
.lg{display:inline-block;width:18px;height:12px;vertical-align:-1px;margin-inline-end:6px;border-radius:2px;box-sizing:border-box}
.lg--bleed{background:rgba(20,29,54,.35)}
.lg--trim{border:2px dashed #2f6fed}
.lg--round{border:2px dotted #e4572e;border-radius:6px}
.lg--safe{border:2px dotted #2a9d8f}

/* ידיות בחירה */
.sel{position:absolute;pointer-events:none;border:2px solid #2f6fed;box-sizing:border-box;transform-origin:50% 50%}
.sel[hidden]{display:none}
.is-preview .sel{display:none}
.hd{position:absolute;pointer-events:auto;box-sizing:border-box;width:16px;height:16px;margin:-8px 0 0 -8px;background:#fff;border:2px solid #2f6fed;border-radius:50%;touch-action:none}
.hd::before{content:"";position:absolute;inset:-12px}
.hd--nw{left:0;top:0;cursor:nwse-resize}.hd--ne{left:100%;top:0;cursor:nesw-resize}
.hd--sw{left:0;top:100%;cursor:nesw-resize}.hd--se{left:100%;top:100%;cursor:nwse-resize}
.hd--w,.hd--e{width:10px;height:24px;margin:-12px 0 0 -5px;border-radius:5px;top:50%;cursor:ew-resize}
.hd--w{left:0}.hd--e{left:100%}
.hd--n,.hd--s{width:24px;height:10px;margin:-5px 0 0 -12px;border-radius:5px;left:50%;cursor:ns-resize}
.hd--n{top:0}.hd--s{top:100%}
.hd--rot{left:50%;top:-34px;width:18px;height:18px;margin:-9px 0 0 -9px;background:#2f6fed;cursor:grab}
.hd--rot::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:24px;margin-left:-1px;background:#2f6fed}
.sel[data-type="image"] .hd--w,.sel[data-type="image"] .hd--e,.sel[data-type="image"] .hd--n,.sel[data-type="image"] .hd--s,
.sel[data-type="text"] .hd--n,.sel[data-type="text"] .hd--s{display:none}
@media (pointer:coarse){.hd{width:22px;height:22px;margin:-11px 0 0 -11px}.hd--rot{width:26px;height:26px;margin:-13px 0 0 -13px}}

/* ---------- לוח מאפיינים ---------- */
.ed__panel{position:sticky;top:calc(var(--bar-top) + 62px);background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden}
.panel__toggle{display:none}
.panel__in{padding:14px 16px 18px;max-height:calc(100vh - 170px);overflow:auto}
.pf{margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--paper-2)}
.pf:last-child{border-bottom:0;margin-bottom:0}
.pf__h{font:800 .95rem var(--font-h);margin:0 0 10px;color:var(--ink-soft)}
.pf textarea{width:100%;font:inherit;font-size:1.05rem;padding:10px 12px;border:2px solid var(--line);border-radius:12px;margin-bottom:10px;resize:vertical}
.pf textarea:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 4px rgba(244,185,66,.35)}
.pr{margin-bottom:12px}
.pr label,.pr__l{display:block;font-weight:700;font-size:.9rem;margin-bottom:5px}
.pr--chk{display:flex;align-items:center;gap:9px}
.pr--chk label{margin:0;font-weight:600}
.pr--chk input{width:20px;height:20px;accent-color:var(--accent);flex:none}
.pr .seg{margin-bottom:6px}
.rng{display:flex;align-items:center;gap:10px}
.rng input{flex:1;min-width:0;accent-color:var(--accent)}
.rng output{min-width:70px;text-align:end;font-size:.85rem;color:var(--ink-soft)}
.sws{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.sw{width:25px;height:25px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #cfc7b6;cursor:pointer;padding:0}
.sw.is-on{box-shadow:0 0 0 2.5px var(--ink)}
.cp{width:34px;height:28px;padding:0;border:1px solid var(--line);border-radius:8px;background:none;cursor:pointer}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.chip{width:42px;height:28px;border-radius:9px;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0}
.acts{display:flex;flex-wrap:wrap;gap:6px}
.acts--top{margin-top:12px}
.dpi{margin:0 0 10px;padding:6px 10px;border-radius:10px;font-size:.88rem}
.dpi--ok{background:#e8f6f2;color:#14795f}.dpi--mid{background:#fff6e0;color:#8a5a00}.dpi--bad{background:#fde8e1;color:#a43b17}
.fp__btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;border:2px solid var(--line);border-radius:12px;background:#fff;font:inherit;font-size:1.1rem;cursor:pointer;color:var(--ink)}
.fp__btn:hover{border-color:var(--ink)}
.fp__list{margin-top:6px;max-height:300px;overflow:auto;border:2px solid var(--line);border-radius:12px;background:#fff}
.fp__list[hidden]{display:none}
.fp__g{padding:6px 12px;font:800 .78rem var(--font);color:var(--muted);background:var(--paper);position:sticky;top:0;z-index:1}
.fp__o{display:flex;justify-content:space-between;align-items:baseline;gap:8px;width:100%;padding:8px 12px;border:0;border-bottom:1px solid var(--paper-2);background:none;cursor:pointer;text-align:start;font:inherit;color:var(--ink)}
.fp__o:hover,.fp__o.is-on{background:#fff6e0}
.fp__s{font-size:1.2rem}
.fp__o small{color:var(--muted);font-size:.78rem;white-space:nowrap}
.ll{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.ll__b{display:flex;gap:8px;align-items:center;width:100%;padding:6px 10px;border:2px solid transparent;background:var(--paper);border-radius:10px;cursor:pointer;font:600 .9rem var(--font);text-align:start;color:var(--ink)}
.ll__b.is-on{border-color:var(--accent);background:#fff}
.ll__i{width:26px;text-align:center;flex:none}

/* ---------- שלב 3: בדיקה ---------- */
.rv__tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:6px}
.rv__tile{background:var(--paper);border-radius:16px;padding:14px 16px;display:grid;gap:2px}
.rv__tile b{font:800 1.45rem var(--font-h)}
.rv__tile span{color:var(--ink-soft);font-size:.9rem}
.iss{border-radius:16px;padding:14px 18px;background:#fff6e0;border:1px solid #f4d48a;margin:16px 0}
.iss--ok{background:#e8f6f2;border-color:#b5e2d6}
.iss__l{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.iss__l li{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:#fff;border-radius:12px;padding:8px 12px}
.iss__w{font-weight:800;white-space:nowrap}
.iss__l li>span:nth-child(2){flex:1;min-width:200px}
.rv__bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin:18px 0 12px}
.rv__bar .hint{margin:0}
.rv__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px 14px;padding:20px;background:#ece6d8;border-radius:var(--r-lg)}
.rv__c{margin:0;text-align:center}
.rv__c figcaption{font-weight:700;font-size:.85rem;color:var(--ink-soft);margin-top:6px}
.rv__b{border:0;background:none;padding:0;cursor:pointer;border-radius:10px;transition:transform .15s}
.rv__b:hover{transform:translateY(-3px)}
.rv__b canvas{max-width:100%;height:auto!important;filter:drop-shadow(0 4px 8px rgba(20,29,54,.28))}

/* ---------- שלב 4: שליחה ---------- */
.snd{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}
.snd__main .box{margin-bottom:22px}
.snd__aside{display:grid;gap:16px}
.snd__btns{display:flex;gap:12px;flex-wrap:wrap}
.snd__main .up__done{margin-top:10px}
@media (max-width:900px){.snd{grid-template-columns:1fr}}

/* ---------- הודעות ודיאלוגים ---------- */
.toast{position:fixed;inset-inline:16px;bottom:84px;margin-inline:auto;width:fit-content;max-width:min(560px,calc(100vw - 32px));background:var(--ink);color:#fff;padding:12px 20px;border-radius:14px;z-index:95;box-shadow:var(--shadow-lg);text-align:center;font-weight:600}
.toast[hidden]{display:none}
.dlg{border:0;border-radius:var(--r-lg);padding:24px;width:min(92vw,520px);box-shadow:var(--shadow-lg);color:var(--ink)}
.dlg::backdrop{background:rgba(20,29,54,.55)}
.dlg__btns{display:flex;gap:10px;margin-top:16px;justify-content:flex-end;flex-wrap:wrap}
.dlg__ta{width:100%;font:inherit;padding:10px 12px;border:2px solid var(--line);border-radius:12px;margin:10px 0}
.btn--danger{background:#b3261e;color:#fff}
.btn--danger:hover{background:#8f1d17;color:#fff}

/* ---------- נייד ---------- */
@media (max-width:1180px){.ed__body{grid-template-columns:112px minmax(0,1fr) 300px}}
@media (max-width:900px){
  .ed__bar{position:static}
  .saved{width:100%;margin:0}
  .grp+.grp{padding-inline-start:0;border-inline-start:0}
  .ed__body{grid-template-columns:minmax(0,1fr)}
  .ed__body>*{min-width:0}
  .ed__cards{position:static}
  .cardlist{flex-direction:row;max-height:none;min-height:0;overflow-x:auto;overflow-y:hidden;justify-content:flex-start;padding:8px}
  .cardbtns{display:flex;overflow-x:auto;gap:6px;padding-bottom:4px}
  .cardbtns .cb{white-space:nowrap;flex:none}
  .stagewrap{padding:18px 10px;min-height:340px;max-height:none}
  .ed__panel{position:fixed;top:auto;inset-inline:0;bottom:0;z-index:40;border-radius:18px 18px 0 0;border-bottom:0;box-shadow:0 -8px 30px rgba(29,42,77,.28);max-height:50vh;display:flex;flex-direction:column;transform:translateY(calc(100% - 54px));transition:transform .25s}
  .ed__panel.is-open{transform:none}
  .ed__panel.is-away{transform:translateY(115%)}
  .panel__toggle{display:flex;justify-content:space-between;align-items:center;width:100%;height:54px;flex:none;border:0;background:var(--ink);color:#fff;font:800 1rem var(--font);padding:0 18px;cursor:pointer}
  .panel__toggle span[aria-hidden]{transition:transform .2s}
  .ed__panel.is-open .panel__toggle span[aria-hidden]{transform:rotate(180deg)}
  .panel__in{max-height:none;overflow:auto;flex:1}
  .studio{padding-bottom:90px}
  .studio.has-sheet{padding-bottom:calc(50vh + 20px)}
}
@media (prefers-reduced-motion:reduce){.ed__panel,.sz,.rv__b{transition:none}}

/* תמיד לכבד את מאפיין hidden (גם כשיש display בכללי העיצוב) */
.studio [hidden]{display:none!important}

/* כפתור הוואטסאפ הצף מפריע לעורך – העזרה בוואטסאפ זמינה בשלב השליחה ובתחתית העמוד */
body.page-studio .wa-float{display:none}

.stage:focus-visible{outline:3px solid var(--accent);outline-offset:3px}