/* guide-steps.css — the one-step-at-a-time viewer for /guide/<slug>/ (see guide-steps.js).
   Loaded after the guide's own scoped CSS, so .tkg.gs wins over .tkg. */
body.gs-on{padding-bottom:84px}
.tkg.gs{max-width:1240px;display:grid;grid-template-columns:290px minmax(0,1fr);gap:26px;align-items:start;background:transparent;padding:18px 18px 40px}
.tkg.gs[hidden]{display:none}
.gs-main{min-width:0;background:var(--paper,#FFFDF8);border:1.5px solid #e8d9bf;border-radius:20px;padding:22px 26px 30px;box-shadow:0 10px 30px rgba(46,36,24,.08)}
.gs-hold{display:none!important}
.gs-page[hidden]{display:none}
.tkg.gs .gs-page>.part-title:first-child{margin-top:0;padding-top:0;border-top:0}
.tkg.gs .gs-page>.step{border-bottom:0;padding-top:0}
.tkg.gs .gs-page>.cover:first-child,.tkg.gs .gs-page>.head:first-child{margin-top:0}
.tkg.gs .gs-page img{cursor:zoom-in}
.tkg.gs .gs-page .chip img,.tkg.gs .gs-page .card img{cursor:default}
.tkg.gs .gs-page .map svg{cursor:zoom-in}

/* crumb: part · stage, above the step */
.gs-crumb{font-family:Marhey,Rubik,sans-serif;font-size:14px;color:var(--orange,#e8833a);margin:0 0 10px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.gs-crumb .sep{color:#c9bba6}
.gs-crumb span:last-child{color:var(--teal,#1e4548)}
.gs-crumb[hidden]{display:none}

/* done toggle on each step */
.gs-tick{float:inline-end;display:inline-flex;align-items:center;gap:8px;margin:0 0 8px 12px;font:600 13px Rubik,sans-serif;color:#7A6A54;
  padding:7px 12px;border:1.5px solid #e8d9bf;border-radius:99px;background:#fff;cursor:pointer}
.gs-tick .box{width:18px;height:18px;border-radius:5px;border:2px solid #CBBFA9;display:grid;place-items:center}
.gs-tick .ic{width:11px;height:11px;stroke-width:3.2;color:#fff;opacity:0}
.gs-tick.on{border-color:#2C5F63;color:#1E4548;background:#E2ECEB}
.gs-tick.on .box{background:#2C5F63;border-color:#2C5F63}
.gs-tick.on .ic{opacity:1}

/* finale */
.gs-fin{text-align:center;padding:40px 10px}
.gs-fin .ic{width:56px;height:56px;color:#E8833A}
.gs-fin h2{font-family:Marhey,sans-serif;font-size:30px;color:#2E2418;margin:10px 0}
.gs-fin p{max-width:460px;margin:0 auto 20px;color:#7A6A54}

/* side menu: parts, stages, steps */
.gs-nav{position:sticky;top:78px;max-height:calc(100vh - 78px - 96px);overflow:auto;overscroll-behavior:contain;background:var(--paper,#FFFDF8);
  border:1.5px solid #e8d9bf;border-radius:20px;padding:12px;font-family:Rubik,sans-serif;scrollbar-width:thin}
.gs-nhead{display:flex;align-items:baseline;gap:8px;padding:4px 6px 8px}
.gs-nhead b{font-family:Marhey,Rubik,sans-serif;font-size:17px;color:#2E2418}
.gs-nhead span{font-size:12px;color:#7A6A54;margin-inline-start:auto}
.gs-x{display:none;background:none;border:0;font-size:18px;color:#7A6A54;padding:2px 6px;cursor:pointer}
.gs-nbar{display:block;height:4px;border-radius:99px;background:#EADFCB;overflow:hidden;margin:0 6px 10px}
.gs-nbar i{display:block;height:100%;background:linear-gradient(90deg,#E8833A,#2C5F63);border-radius:99px;transition:width .3s}
.gs-ni{display:flex;align-items:center;gap:8px;width:100%;text-align:start;background:none;border:0;border-radius:11px;padding:8px 10px;cursor:pointer;
  font:inherit;font-size:14px;color:#2E2418;line-height:1.3}
.gs-ni:hover{background:#FAE7D6}
.gs-ni.cur{background:#2E2418;color:#FBF4EA}
.gs-ni .nm{flex:1;min-width:0}
.gs-ni .rg,.gs-ni .n{font-size:11.5px;color:#7A6A54;font-variant-numeric:tabular-nums;white-space:nowrap}
.gs-ni.cur .rg,.gs-ni.cur .n{color:#C9BBA6}
.gs-ni .ck{width:18px;height:18px;border-radius:50%;background:#2C5F63;display:none;place-items:center;flex:none}
.gs-ni .ck .ic{width:10px;height:10px;stroke-width:3.4;color:#fff}
.gs-ni.done .ck,.gs-part.done>.gs-ph .ck{display:grid}
.gs-intro{font-weight:600}
.gs-part{border-top:1.5px solid #EADFCB;margin-top:6px;padding-top:6px}
.gs-ph{flex-wrap:wrap;row-gap:4px}
.gs-ph .k{font-family:Marhey,Rubik,sans-serif;font-size:12px;color:#C96A26;flex-basis:100%}
.gs-ph.cur .k{color:#E8833A}
.gs-ph .nm{font-weight:600}
.gs-ph .gs-nbar{flex-basis:100%;margin:2px 0 0}
.gs-sg{padding-inline-start:18px;font-size:13.5px}
.gs-sg.done .nm{color:#2C5F63}
.gs-sg.cur.done .nm{color:#FBF4EA}
.gs-steps{margin:2px 0 4px;padding-inline-start:12px;border-inline-start:2px solid #EADFCB;margin-inline-start:16px}
.gs-st{font-size:13px;padding:6px 8px}
.gs-st .n{min-width:22px;text-align:center;font-weight:700}
.gs-st.done .nm{color:#7A6A54}
.gs-reset{display:block;margin:14px auto 4px;background:none;border:0;font:500 12px Rubik,sans-serif;color:#A7A29C;text-decoration:underline;cursor:pointer}

/* bottom bar: Back · Step n of N · Done, next */
.gs-bar{position:fixed;inset-inline:0;bottom:0;z-index:80;background:rgba(251,244,234,.96);backdrop-filter:blur(10px);border-top:1px solid #EADFCB;
  padding:0 0 env(safe-area-inset-bottom);font-family:Rubik,sans-serif}
.gs-prog{height:4px;background:#EADFCB}
.gs-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,#E8833A,#2C5F63);transition:width .4s}
.gs-barin{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:10px;padding:10px 18px}
.gs-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:0 18px;border-radius:14px;font:600 15px Rubik,sans-serif;cursor:pointer;border:2px solid transparent;white-space:nowrap}
html[lang=ar] .gs-btn{font-family:Marhey,Rubik,sans-serif;font-weight:600}
.gs-btn[disabled]{opacity:.35;cursor:default}
.gs-btn[hidden]{display:none}
.gs-ghost{background:#fff;border-color:#EADFCB;color:#2E2418}
.gs-primary{background:#E8833A;color:#fff;margin-inline-start:auto;box-shadow:0 6px 16px rgba(232,131,58,.3)}
.gs-primary:hover{background:#C96A26}
.gs-chev{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.gs-prev .gs-chev{transform:scaleX(-1)}
[dir=rtl] .gs-chev{transform:scaleX(-1)}
[dir=rtl] .gs-prev .gs-chev{transform:none}
.gs-count{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;background:none;border:0;cursor:pointer;padding:4px;border-radius:12px;color:#2E2418}
.gs-count:hover{background:#FAE7D6}
.gs-count b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
html[lang=ar] .gs-count b{font-family:Marhey,Rubik,sans-serif;font-weight:600}
.gs-count small{font-size:11.5px;color:#7A6A54;white-space:nowrap}

/* picture viewer */
.gs-lb{position:fixed;inset:0;z-index:300;background:rgba(46,36,24,.92);display:none}
.gs-lb.show{display:block}
.gs-lb-in{position:absolute;inset:0;overflow:auto;display:grid;place-items:center;padding:20px;cursor:zoom-in}
.gs-lb-in>*{max-width:100%;max-height:calc(100vh - 40px);width:auto;height:auto;background:#fff;border-radius:10px}
.gs-lb-in>svg{width:min(1100px,100%);height:auto;max-height:calc(100vh - 40px)}
.gs-lb.zoom .gs-lb-in{display:block;cursor:zoom-out;padding:0}
.gs-lb.zoom .gs-lb-in>*{max-width:none;max-height:none;width:240vw;border-radius:0}
@media(min-width:900px){.gs-lb.zoom .gs-lb-in>*{width:200vw}}
.gs-lb-x{position:absolute;top:14px;inset-inline-end:14px;z-index:2;width:42px;height:42px;border-radius:50%;border:0;background:#FBF4EA;color:#2E2418;font-size:18px;font-weight:700;cursor:pointer}
.gs-scrim{display:none}

/* phone and tablet: the menu slides in */
@media(max-width:900px){
  .tkg.gs{display:block;padding:10px 8px 30px}
  .gs-main{padding:16px 14px 24px;border-radius:16px}
  .gs-nav{position:fixed;top:0;bottom:0;inset-inline-start:0;z-index:90;width:min(340px,86vw);max-height:none;border-radius:0;border:0;
    box-shadow:0 0 40px rgba(46,36,24,.3);transform:translateX(-105%);transition:transform .25s ease;padding-top:16px}
  [dir=rtl] .gs-nav{transform:translateX(105%)}
  body.gs-open .gs-nav{transform:none}
  .gs-x{display:block}
  body.gs-open .gs-scrim{display:block;position:fixed;inset:0;z-index:85;background:rgba(46,36,24,.45)}
  .gs-barin{padding:8px 10px;gap:6px}
  .gs-btn{min-height:44px;padding:0 12px;font-size:14px}
  .gs-prev span{display:none}
  .gs-prev{padding:0 12px}
}
@media(max-width:380px){.gs-count small{display:none}}
@media print{.gs-bar,.gs-nav,.gs-tick{display:none!important}.gs-page[hidden]{display:block!important}}
/* the floating WhatsApp button sits above the bar, not on the Next button */
body.gs-on .tk-wa{bottom:calc(92px + env(safe-area-inset-bottom));width:48px;height:48px}
body.gs-open .tk-wa{display:none}