/* GoldenSeat redesign — REAL design in code, preview-gated (?gsnew). 2026-06-19
   Loaded ONLY under ?gsnew (gated <link> in singlepage.php) → live agents unaffected.
   All search-page (step 2) design scoped under .gsx so it can't leak into the old app. */

@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600;700;800&display=swap');

/* ---- navbar restyle (shared element; only loads under the gate) ---- */
.navbar-inverse .navbar-inner{background:#101f37 !important;background-image:none !important;border:0 !important;border-bottom:2px solid #E6A91A !important;box-shadow:0 1px 6px rgba(0,0,0,.14) !important;font-family:Heebo,Arial,sans-serif !important}
.navbar .brand{color:#fff !important;font-weight:800 !important}
.navbar .nav>li>a{color:#bccae0 !important;font-weight:600 !important;text-shadow:none !important}
.navbar .nav>li>a:hover,.navbar .nav>.active>a{color:#fff !important;background:rgba(255,255,255,.10) !important}
/* navbar RTL mirror — Hebrew: menu → right, "logged in / logout" → left (class toggled by gsnew.js) */
.navbar-inner.gsx-nav-rtl .container-fluid{direction:rtl}
.navbar-inner.gsx-nav-rtl .brand{float:right}
.navbar-inner.gsx-nav-rtl .nav{float:right}
.navbar-inner.gsx-nav-rtl .navbar-text.pull-right{float:left;text-align:left}
.navbar-inner.gsx-nav-rtl .dropdown-menu{right:0;left:auto;text-align:right}

/* ============ the new search page (step 2) ============ */
.gsx{--navy:#16284A;--navy-2:#22375f;--gold:#E6A91A;--gold-deep:#c9900c;--gold-tint:#fcf4df;--green:#1f9d6b;--green-deep:#178055;--ink:#1a2433;--muted:#5d6b82;--faint:#9aa6bb;--line:#e6e9f1;--line-2:#eef1f6;--bg:#f7f8fa;
  font-family:Heebo,Arial,sans-serif;color:var(--ink);font-feature-settings:"tnum" 1;display:flex;flex-direction:column;overflow:hidden;height:calc(100vh - 160px)}
/* nudge the tiktik brand bar (reviews/lang/phone) below the navbar gold line so it isn't visually cut */
#tk-brandbar{padding-top:18px !important}
.gsx *{box-sizing:border-box}
.gsx bdi{unicode-bidi:isolate}
.gsx .gsx-langbar{display:none}
.gsx .gsx-lng{border:1px solid var(--line);background:#fff;color:var(--muted);font:inherit;font-size:12px;font-weight:700;padding:5px 13px;cursor:pointer}
.gsx .gsx-lng:first-child{border-radius:0 7px 7px 0}
.gsx .gsx-lng:last-child{border-radius:7px 0 0 7px;border-inline-start:0}
.gsx .gsx-lng.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.gsx .gsx-main{display:flex;gap:14px;align-items:stretch;padding:6px clamp(10px,1.6vw,22px) 8px;flex:1;min-height:0}
.gsx .gsx-grid-col{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
.gsx .gsx-aside{width:300px;flex:none;order:-1;display:flex;min-height:0}
@media(max-width:980px){.gsx .gsx-main{flex-direction:column}.gsx .gsx-aside{width:100%;order:0}}

/* hero band */
.gsx .gsx-hero{background:linear-gradient(180deg,#e9effb,#f7f8fa);border:1px solid var(--line);border-radius:10px;padding:16px 20px;margin-bottom:11px}
.gsx .gsx-htitle{font-size:19px;font-weight:800;color:var(--navy);margin:0 0 12px}
.gsx .gsx-hrow{display:flex;gap:10px;margin-bottom:11px}
.gsx .gsx-psearch{position:relative;flex:1;min-width:0}
.gsx .gsx-psearch input{width:100%;height:40px;border:1px solid var(--line);border-radius:9px;padding:0 38px 0 12px;font:inherit;font-size:15px;background:#fff}
.gsx .gsx-psearch input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(22,40,74,.12)}
.gsx .gsx-psearch svg{position:absolute;inset-inline-start:12px;top:12px;width:16px;height:16px;stroke:var(--faint);fill:none;stroke-width:1.8}
.gsx .gsx-searchbtn{height:40px;border:0;border-radius:9px;background:var(--navy);color:#fff;font:inherit;font-weight:800;font-size:14px;padding:0 22px;cursor:pointer;white-space:nowrap}
.gsx .gsx-searchbtn:hover{background:var(--navy-2)}
.gsx .gsx-searchbtn.full{width:100%;margin-top:4px;height:42px}
.gsx .gsx-pchips{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.gsx .gsx-pchip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 13px;border-radius:999px;font-size:12px;font-weight:700;color:var(--muted);background:#fff;border:1px solid var(--line);cursor:pointer;white-space:nowrap}
.gsx .gsx-pchip:hover{border-color:var(--navy);color:var(--navy)}
.gsx .gsx-pchip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.gsx .gsx-pchip.on:hover{color:#fff}
.gsx .gsx-pchip .dot{width:7px;height:7px;border-radius:50%;flex:none}

/* toolbar */
.gsx .gsx-toolbar{display:flex;align-items:center;gap:11px;margin-bottom:9px}
.gsx .gsx-count{font-size:13px;color:var(--muted)}.gsx .gsx-count b{color:var(--navy);font-weight:800}

/* the grid card */
.gsx .gsx-panel{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;flex:1;min-height:0;display:flex;flex-direction:column}
.gsx .gsx-scroll{flex:1;min-height:0;overflow:auto}
.gsx table.gsx-table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;table-layout:fixed}
.gsx .gsx-table thead th{position:sticky;top:0;z-index:2;background:var(--bg);color:var(--navy);text-align:start;font-weight:700;font-size:12.5px;padding:11px 12px 9px;white-space:nowrap;border-bottom:2px solid var(--gold)}
.gsx .gsx-table tbody td{padding:0 12px;height:46px;border-bottom:1px solid var(--line-2);text-align:start;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsx .gsx-table tbody tr{cursor:pointer}
.gsx .gsx-table tbody tr:hover{background:rgba(22,40,74,.045);box-shadow:inset 3px 0 0 var(--gold)}
.gsx .gsx-table td.date{font-weight:700;color:var(--navy)}
.gsx .gsx-table td.home,.gsx .gsx-table td.away{font-weight:600}
.gsx .gsx-table td.sub{color:var(--muted)}
.gsx .gsx-table td.venue,.gsx .gsx-table td.city{background:rgba(22,40,74,.022)}
.gsx .gsx-table td.venue{border-inline-start:1px solid var(--line-2)}
.gsx .gsx-table td.act{text-align:end;border-inline-start:1px solid var(--line-2);width:84px}
.gsx .gsx-book{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 15px;border-radius:7px;background:var(--green);color:#fff;font-weight:700;font-size:13px;border:0;cursor:pointer}
.gsx .gsx-book:hover{background:var(--green-deep)}
.gsx .gsx-empty{padding:34px 20px;text-align:center;color:var(--muted)}
.gsx col.cD{width:10%}.gsx col.cT{width:21%}.gsx col.cV{width:23%}.gsx col.cC{width:13%}.gsx col.cA{width:12%}
/* concert row (no away team) — clean centered: subtle ♪ + artist name */
.gsx .gsx-table th.th-concert{text-align:center}
.gsx .gsx-table td.concert{background:transparent;text-align:center}
.gsx .gsx-artist{display:inline-flex;align-items:center;gap:9px;justify-content:center;max-width:100%;font-weight:700;font-size:14.5px;color:var(--navy)}
.gsx .gsx-artist bdi{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gsx .gsx-note{color:var(--gold-deep);font-size:15px;opacity:.9;flex:none}
/* center the home/away (בית/חוץ) columns + their headers so mixed/all lists align with centered concerts */
.gsx .gsx-table td.home,.gsx .gsx-table td.away{text-align:center}
.gsx .gsx-table th.th-tc{text-align:center}
/* density toggle (צפוף / מרווח) — customer picks row height */
.gsx .gsx-seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;margin-inline-start:auto}
.gsx .gsx-seg button{border:0;background:transparent;font:inherit;font-size:12px;font-weight:700;color:var(--muted);padding:6px 13px;cursor:pointer}
.gsx .gsx-seg button.on{background:var(--navy);color:#fff}
.gsx .gsx-seglbl{font-size:12px;color:var(--faint);font-weight:600;margin-inline-start:auto}
.gsx .gsx-seglbl + .gsx-seg{margin-inline-start:8px}
.gsx table.gsx-table.gsx-cozy tbody td{height:46px}
.gsx table.gsx-table.gsx-compact tbody td{height:34px}

/* ============ event page (step 3) — eventpage.html mockup, scoped under .gsx-ev ============ */
/* hide the old generic "Back" button (the gsx-ev has its own back link) */
.gs-of-back{display:none !important}
.gsx-ev{--navy:#16284A;--navy-2:#22375f;--gold:#E6A91A;--gold-deep:#c9900c;--green:#1f9d6b;--green-deep:#178055;--ink:#1a2433;--muted:#5d6b82;--faint:#9aa6bb;--line:#e6e9f1;--line-2:#eef1f6;--bg:#f7f8fa;
  font-family:Heebo,Arial,sans-serif;color:var(--ink);padding:14px clamp(12px,2vw,28px) 36px;font-feature-settings:"tnum" 1;max-width:1480px;margin-inline:auto}
.gsx-ev *{box-sizing:border-box}
.gsx-ev bdi{unicode-bidi:isolate}
.gsx-ev .gsx-ev-back{display:flex;width:fit-content;margin-inline-start:auto;align-items:center;gap:8px;color:var(--navy);font-size:14px;font-weight:700;text-decoration:none;margin-bottom:13px;cursor:pointer;background:#fff;border:1.5px solid var(--navy);border-radius:9px;padding:9px 17px;box-shadow:0 1px 3px rgba(22,40,74,.1);transition:background .12s,box-shadow .12s}
.gsx-ev .gsx-ev-back:hover{background:var(--navy);color:#fff;box-shadow:0 4px 12px rgba(22,40,74,.18)}
.gsx-ev .gsx-ev-back .ar,.gsx-ev .gsx-evbook .ar{font-size:18px;line-height:1}
.gsx-ev[dir=ltr] .gsx-ev-back .ar,.gsx-ev[dir=ltr] .gsx-evbook .ar{display:inline-block;transform:scaleX(-1)}
.gsx-ev .gsx-wiz{display:flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:9px;padding:6px;margin-bottom:14px;overflow-x:auto;scrollbar-width:none}
.gsx-ev .gsx-wiz::-webkit-scrollbar{display:none}
.gsx-ev .gsx-step{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:7px;white-space:nowrap;color:var(--faint);font-size:13px;font-weight:700;flex:none}
.gsx-ev .gsx-step .n{width:21px;height:21px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;background:#eef1f6;color:var(--faint)}
.gsx-ev .gsx-step.done{color:var(--green-deep)}.gsx-ev .gsx-step.done .n{background:var(--green);color:#fff}
.gsx-ev .gsx-step.on{color:#fff;background:var(--navy)}.gsx-ev .gsx-step.on .n{background:var(--gold);color:#3d2c00}
.gsx-ev .gsx-wsep{color:var(--line);margin:0 1px;flex:none}
.gsx-ev .gsx-ebar{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 18px;margin-bottom:16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.gsx-ev .gsx-ematch{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.gsx-ev .gsx-tn{font-size:clamp(18px,1.6vw,23px);font-weight:800;letter-spacing:-.3px;color:var(--ink)}
.gsx-ev .gsx-vs{font-size:13px;color:var(--faint);font-weight:700}
.gsx-ev .gsx-emeta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:14px;margin-inline-start:auto}
.gsx-ev .gsx-em,.gsx-ev .gsx-elg{display:inline-flex;align-items:center;gap:7px}
.gsx-ev .gsx-elg{font-weight:700;font-size:12px}.gsx-ev .gsx-elg .dot{width:8px;height:8px;border-radius:50%;background:#c8102e;flex:none}
.gsx-ev .gsx-em svg{width:16px;height:16px;stroke:var(--navy);fill:none;stroke-width:1.8;flex:none}
.gsx-ev .gsx-ev-cols{display:flex;gap:18px;align-items:flex-start}
.gsx-ev .gsx-catcol{flex:1 1 560px;min-width:0}
.gsx-ev .gsx-mapcol{flex:0 1 580px;min-width:520px;max-width:600px;position:sticky;top:14px}
@media(max-width:900px){.gsx-ev .gsx-ev-cols{flex-direction:column}.gsx-ev .gsx-mapcol{position:static;width:100%}}
/* big screens: scale the whole event page up proportionally (like ~125% browser zoom) so it isn't tiny on a wide monitor.
   We slightly narrow the content while zooming (just like browser zoom shrinks the viewport) so the bigger scale still fits. */
@media(min-width:1700px){.gsx-ev{zoom:1.22;max-width:1300px}}
.gsx-ev .gsx-evhead{display:flex;align-items:center;gap:12px;margin-bottom:11px;flex-wrap:wrap}
.gsx-ev .gsx-secttl{font-size:16px;font-weight:800;color:var(--navy);margin:0}
.gsx-ev .gsx-secttl .sub{font-size:12px;font-weight:500;color:var(--muted)}
.gsx-ev .gsx-catfilter{margin-inline-start:auto}
.gsx-ev .gsx-catfilter select{height:34px;border:1px solid var(--line);border-radius:8px;padding:0 11px;font:inherit;font-size:13px;background:#fbfcfe;color:var(--ink);min-width:190px;cursor:pointer}
.gsx-ev .gsx-cats{display:flex;flex-direction:column;gap:9px}
.gsx-ev .gsx-cat{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-inline-start:4px solid var(--gold);border-radius:10px;padding:13px 16px;transition:box-shadow .12s;cursor:pointer}
.gsx-ev .gsx-cat:hover{box-shadow:0 4px 16px rgba(22,40,74,.08)}
.gsx-ev .gsx-cinfo{flex:1 1 220px;min-width:0}
.gsx-ev .gsx-cname{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px;color:var(--ink)}
.gsx-ev .gsx-cname .cdot{width:11px;height:11px;border-radius:3px;background:var(--gold);flex:none}
.gsx-ev .gsx-cname bdi{overflow:hidden;text-overflow:ellipsis}
.gsx-ev .gsx-cloc{color:var(--muted);font-size:13px;margin-top:4px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.gsx-ev .gsx-avail{font-size:12px;font-weight:700;color:var(--green-deep);background:#e7f6ef;padding:2px 9px;border-radius:6px}
.gsx-ev .gsx-cprice{text-align:center;flex:none}
.gsx-ev .gsx-cprice .p{font-size:18px;font-weight:800;color:var(--navy);white-space:nowrap}
.gsx-ev .gsx-cprice .pl{font-size:12px;color:var(--faint)}
.gsx-ev .gsx-evbook{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 18px;border-radius:8px;background:var(--green);color:#fff;font-weight:700;font-size:14px;border:0;cursor:pointer;flex:none}
.gsx-ev .gsx-evbook:hover{background:var(--green-deep)}
.gsx-ev .gsx-ev-empty{padding:30px;text-align:center;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:10px}
.gsx-ev .gsx-mapcard{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.gsx-ev .gsx-mapcard .mh{padding:11px 15px;border-bottom:1px solid var(--line);font-size:13px;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:7px}
.gsx-ev .gsx-mapcard .mh svg{width:15px;height:15px;stroke:var(--gold-deep);fill:none;stroke-width:2}
.gsx-ev .gsx-mapcard{position:relative}
.gsx-ev .gsx-mapcard img{display:block;width:100%;height:auto;cursor:zoom-in}
/* optional enlarge hint — a small expand badge in the map corner (always visible, pops on hover) */
.gsx-ev .gsx-mapcard::after{content:'\2922';position:absolute;inset-block-end:12px;inset-inline-end:12px;width:30px;height:30px;display:grid;place-items:center;background:rgba(16,31,55,.8);color:#fff;font-size:16px;border-radius:8px;opacity:.85;transition:opacity .15s,transform .15s;pointer-events:none}
.gsx-ev .gsx-mapcard:hover::after{opacity:1;transform:scale(1.08)}
/* map lightbox (optional click-to-enlarge — wired by gsnew.js) */
#gsx-lb{position:fixed;inset:0;background:rgba(8,14,28,.85);display:flex;align-items:center;justify-content:center;z-index:99999;cursor:zoom-out;padding:28px}
#gsx-lb img{max-width:96vw;max-height:92vh;border-radius:8px;box-shadow:0 12px 48px rgba(0,0,0,.55);background:#fff}
#gsx-lb .x{position:absolute;top:16px;inset-inline-end:24px;color:#fff;font-size:34px;font-weight:300;line-height:1;cursor:pointer}

/* sidebar */
.gsx .gsx-side{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;flex:1;min-height:0}
.gsx .gsx-sh{display:flex;align-items:center;justify-content:space-between;padding:13px 15px 11px;border-bottom:1px solid var(--line)}
.gsx .gsx-sh b{font-size:16px;font-weight:800;color:var(--navy)}
.gsx .gsx-sh a{font-size:12px;color:var(--gold-deep);font-weight:700;cursor:pointer}
.gsx .gsx-sbody{padding:13px 15px;display:flex;flex-direction:column;gap:11px}
.gsx .gsx-fld label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:5px}
.gsx .gsx-fld select,.gsx .gsx-fld input{width:100%;min-width:0;height:37px;border:1px solid var(--line);border-radius:8px;padding:0 11px;font:inherit;font-size:13px;color:var(--ink);background:#fbfcfe}
.gsx .gsx-fld select:focus,.gsx .gsx-fld input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(22,40,74,.12);background:#fff}
.gsx .gsx-r2{display:flex;gap:8px}.gsx .gsx-r2 .gsx-fld{flex:1;min-width:0}
.gsx .gsx-recent{border-top:1px solid var(--line);padding:12px 15px;background:#fbfcfe}
.gsx .gsx-recent b{font-size:13px;color:var(--navy)}
.gsx .gsx-rs{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.gsx .gsx-rs a{font-size:12px;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 10px;cursor:pointer}
.gsx .gsx-ai{margin:12px 15px;border:1px dashed #c7b6e8;border-radius:9px;padding:14px;background:linear-gradient(180deg,#f4eefb,#fbfcfe);flex:1 1 auto;display:flex;flex-direction:column;min-height:120px}
.gsx .gsx-ai .h{display:flex;align-items:center;gap:7px;margin-bottom:8px;font-size:13px;color:#5a2d86;font-weight:700}
.gsx .gsx-ai .h .soon{margin-inline-start:auto;font-size:10px;font-weight:800;color:#fff;background:#7a3fb0;padding:2px 8px;border-radius:999px}
.gsx .gsx-ai .ph{font-size:12px;color:#9a86b8;background:#fff;border:1px solid #e7ddf5;border-radius:7px;padding:9px 10px;line-height:1.45;flex:1 1 auto}
.gsx .gsx-help{border-top:1px solid var(--line);padding:13px 15px;background:#fbfcfe}
.gsx .gsx-help b{font-size:13px;color:var(--navy)}
.gsx .gsx-help p{font-size:12px;color:var(--muted);margin:5px 0 10px;line-height:1.5}
.gsx .gsx-wa{display:flex;align-items:center;justify-content:center;gap:8px;height:39px;border-radius:8px;background:#25d366;color:#063d20;font-weight:800;font-size:13px;text-decoration:none;margin-bottom:8px}
.gsx .gsx-phone{display:flex;align-items:center;justify-content:center;gap:8px;height:37px;border-radius:8px;background:#fff;border:1px solid var(--line);color:var(--navy);font-weight:800;font-size:14px;text-decoration:none}

/* ============ order form (step 4) — orderpage.html mockup, scoped under .gsx-of ============ */
.gsx-of{--navy:#16284A;--navy-2:#22375f;--navy-ink:#101f37;--gold:#E6A91A;--gold-deep:#c9900c;--green:#1f9d6b;--green-deep:#178055;--ink:#1a2433;--muted:#5d6b82;--faint:#9aa6bb;--line:#e6e9f1;--line-2:#eef1f6;--bg:#f7f8fa;
  font-family:Heebo,Arial,sans-serif;color:var(--ink);padding:14px clamp(12px,2vw,28px) 40px;font-feature-settings:"tnum" 1;max-width:1560px;margin-inline:auto}
.gsx-of *{box-sizing:border-box}
.gsx-of bdi{unicode-bidi:isolate}
/* back button — opposite side per language (he=left, en=right), arrow flips for LTR */
.gsx-of .gsx-of-back{display:flex;width:fit-content;margin-inline-start:auto;align-items:center;gap:8px;color:var(--navy);font-size:14px;font-weight:700;text-decoration:none;margin-bottom:13px;cursor:pointer;background:#fff;border:1.5px solid var(--navy);border-radius:9px;padding:9px 17px;box-shadow:0 1px 3px rgba(22,40,74,.1);transition:background .12s,box-shadow .12s}
.gsx-of .gsx-of-back:hover{background:var(--navy);color:#fff;box-shadow:0 4px 12px rgba(22,40,74,.18)}
.gsx-of .gsx-of-back .ar{font-size:18px;line-height:1}
.gsx-of[dir=ltr] .gsx-of-back .ar{display:inline-block;transform:scaleX(-1)}
/* wizard */
.gsx-of .gsx-of-wiz{display:flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:9px;padding:6px;margin-bottom:14px;overflow-x:auto;scrollbar-width:none}
.gsx-of .gsx-of-wiz::-webkit-scrollbar{display:none}
.gsx-of .gsx-of-step{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:7px;white-space:nowrap;color:var(--faint);font-size:13px;font-weight:700;flex:none}
.gsx-of .gsx-of-step .n{width:21px;height:21px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;background:#eef1f6;color:var(--faint)}
.gsx-of .gsx-of-step.done{color:var(--green-deep)}.gsx-of .gsx-of-step.done .n{background:var(--green);color:#fff}
.gsx-of .gsx-of-step.on{color:#fff;background:var(--navy)}.gsx-of .gsx-of-step.on .n{background:var(--gold);color:#3d2c00}
.gsx-of .gsx-of-wsep{color:var(--line);margin:0 1px;flex:none}
/* event bar */
.gsx-of .gsx-of-ebar{background:#fff;border:1px solid var(--line);border-radius:10px;padding:13px 18px;margin-bottom:16px;display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.gsx-of .gsx-of-ematch{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.gsx-of .gsx-of-tn{font-size:clamp(18px,1.5vw,22px);font-weight:800;letter-spacing:-.3px;color:var(--ink)}
.gsx-of .gsx-of-vs{font-size:13px;color:var(--faint);font-weight:700}
.gsx-of .gsx-of-cat{font-size:12px;font-weight:800;color:#3d2c00;background:var(--gold);padding:4px 11px;border-radius:7px}
.gsx-of .gsx-of-emeta{margin-inline-start:auto;color:var(--muted);font-size:14px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.gsx-of .gsx-of-emeta b{color:var(--navy)}
/* two columns */
.gsx-of .gsx-of-cols{display:flex;gap:18px;align-items:flex-start}
.gsx-of .gsx-of-formcol{flex:1 1 600px;min-width:0;display:flex;flex-direction:column;gap:16px}
.gsx-of .gsx-of-sidecol{flex:1 1 320px;min-width:290px;position:sticky;top:14px;align-self:flex-start;display:flex;flex-direction:column;gap:14px}
@media(max-width:880px){.gsx-of .gsx-of-cols{flex-direction:column}.gsx-of .gsx-of-sidecol{position:static;width:100%;flex-basis:auto}}
@media(min-width:1700px){.gsx-of{zoom:1.18;max-width:1340px}}
/* cards */
.gsx-of .gsx-of-card{background:#fff;border:1px solid var(--line);border-radius:11px;overflow:hidden}
.gsx-of .gsx-of-ch{display:flex;align-items:center;gap:8px;padding:13px 18px;border-bottom:1px solid var(--line);font-size:16px;font-weight:800;color:var(--navy)}
.gsx-of .gsx-of-ch .bar{width:4px;height:17px;border-radius:3px;background:var(--gold);flex:none}
.gsx-of .gsx-of-ch .tag{font-size:12px;font-weight:600;color:var(--faint)}
.gsx-of .gsx-of-cb{padding:16px 18px}
.gsx-of .gsx-of-g2{display:grid;grid-template-columns:1fr 1fr;gap:13px 16px}
@media(max-width:560px){.gsx-of .gsx-of-g2{grid-template-columns:1fr}}
.gsx-of .gsx-of-fld.full{grid-column:1/-1}
.gsx-of .gsx-of-fld label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:5px}
.gsx-of .gsx-of-fld label .hint{font-weight:600;color:var(--faint);font-size:11px}
.gsx-of .gsx-of-fld input,.gsx-of .gsx-of-fld select,.gsx-of .gsx-of-fld textarea{width:100%;height:39px;border:1px solid var(--line);border-radius:8px;padding-inline:11px;font:inherit;font-size:14px;color:var(--ink);background:#fbfcfe;transition:border-color .12s,box-shadow .12s,background .12s}
.gsx-of .gsx-of-fld textarea{height:74px;padding:9px 11px;resize:vertical}
.gsx-of .gsx-of-fld input:focus,.gsx-of .gsx-of-fld select:focus,.gsx-of .gsx-of-fld textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(22,40,74,.12);background:#fff}
.gsx-of .gsx-of-fld input[type=file]{padding:7px 9px;height:auto;background:#fff}
.gsx-of .gsx-of-fld input.mono{font-variant-numeric:tabular-nums;letter-spacing:.3px}
.gsx-of .gsx-of-warn{background:#FEF3C7;border:1px solid #FCE8B6;border-radius:9px;padding:8px 12px;font-size:12px;color:#92722A;margin-bottom:12px}
.gsx-of .gsx-of-netline{margin-top:12px;font-size:12.5px;color:var(--muted);background:#f7f8fa;border:1px solid var(--line);border-radius:8px;padding:8px 11px}
.gsx-of .gsx-of-netline b{color:var(--navy)}
/* summary */
.gsx-of .gsx-of-sum .gsx-of-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;font-size:14px;color:var(--muted)}
.gsx-of .gsx-of-sum .gsx-of-row b{color:var(--ink);font-weight:700}
.gsx-of .gsx-of-sum .gsx-of-row.hl{border-top:1px solid var(--line);margin-top:6px;padding-top:13px}
.gsx-of .gsx-of-sum .gsx-of-row .tt{font-weight:700;color:var(--navy)}
.gsx-of .gsx-of-sum .total{font-size:clamp(18px,1.5vw,22px);font-weight:800;color:var(--gold-deep);white-space:nowrap}
.gsx-of .gsx-of-tc{display:flex;align-items:flex-start;gap:9px;margin:13px 0;font-size:13px;color:var(--muted);cursor:pointer;line-height:1.4}
.gsx-of .gsx-of-tc input{width:17px;height:17px;accent-color:var(--green);flex:none;margin-top:1px}
.gsx-of .gsx-of-tc a{color:var(--gold-deep);font-weight:700;text-decoration:none;margin-inline-start:3px}
.gsx-of .gsx-of-place{width:100%;height:46px;border:0;border-radius:9px;background:var(--green);color:#fff;font:inherit;font-weight:800;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .12s}
.gsx-of .gsx-of-place:hover{background:var(--green-deep)}
.gsx-of .gsx-of-place:disabled{background:#bcd9cc;cursor:not-allowed}
.gsx-of .gsx-of-place svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.4}
/* whatsapp */
.gsx-of .gsx-of-wa .wahead{color:#0a7d3f}.gsx-of .gsx-of-wa .wahead .bar{background:#25d366}
.gsx-of .gsx-of-wabubble{font-size:13px;color:var(--ink);line-height:1.65;white-space:pre-wrap;background:#f6fcf8;border:1px solid #d7f0e0;border-radius:8px;padding:11px 13px;margin-bottom:11px;min-height:20px}
.gsx-of .gsx-of-warow{display:flex;gap:9px}
.gsx-of .gsx-of-wabtn{flex:1;height:39px;border-radius:8px;border:1px solid var(--line);background:#fff;font:inherit;font-weight:700;font-size:13px;color:var(--navy);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px}
.gsx-of .gsx-of-wabtn.g{background:#25d366;border-color:#1eb257;color:#063d20}
.gsx-of .gsx-of-waprofit{display:block;margin-top:10px;font-size:12.5px;font-weight:700;color:var(--green-deep)}

/* ---- review & confirm screen (step 5) extras ---- */
.gsx-of-review .gsx-of-pagehd{display:flex;align-items:baseline;gap:10px;margin:2px 0 14px;flex-wrap:wrap}
.gsx-of-review .gsx-of-pagehd h1{font-size:clamp(18px,1.5vw,22px);font-weight:800;color:var(--navy);margin:0;letter-spacing:-.3px}
.gsx-of-review .gsx-of-pagehd .sub{font-size:13px;color:var(--muted)}
.gsx-of .gsx-of-editlink{margin-inline-start:auto;font-size:12px;font-weight:700;color:var(--gold-deep);text-decoration:none;cursor:pointer}
.gsx-of .gsx-of-editlink:hover{text-decoration:underline}
.gsx-of .gsx-of-rev{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
@media(max-width:560px){.gsx-of .gsx-of-rev{grid-template-columns:1fr}}
.gsx-of .gsx-of-rev .r{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:14px}
.gsx-of .gsx-of-rev .r .k{color:var(--muted)}
.gsx-of .gsx-of-rev .r .v{color:var(--ink);font-weight:700;text-align:end}
.gsx-of .gsx-of-rev .r .v.muted{color:var(--faint);font-weight:500}
.gsx-of .gsx-of-rev .r.full{grid-column:1/-1}
.gsx-of .gsx-of-editback{display:block;text-align:center;margin-top:10px;font-size:13px;color:var(--muted);font-weight:600;text-decoration:none;cursor:pointer}
.gsx-of .gsx-of-editback:hover{color:var(--navy)}
.gsx-of .gsx-of-reassure{margin-top:11px;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:7px;justify-content:center}
.gsx-of .gsx-of-reassure svg{width:14px;height:14px;stroke:var(--green);fill:none;stroke-width:2.4;flex:none}
/* ====== step 6 — order confirmed / pending screen ====== */
.gsx-oc{display:flex;justify-content:center;padding-top:30px}
.gsx-oc .gsx-oc-card{width:100%;max-width:520px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 30px rgba(22,40,74,.08);padding:38px 34px 30px;text-align:center}
.gsx-oc .gsx-oc-check{width:74px;height:74px;margin:0 auto 18px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(31,157,107,.35)}
.gsx-oc .gsx-oc-check svg{width:38px;height:38px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.gsx-oc .gsx-oc-title{font-size:25px;font-weight:800;letter-spacing:-.4px;color:var(--ink);margin:0 0 9px}
.gsx-oc .gsx-oc-status{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--gold-deep);background:var(--gold-tint,#fcf4df);border:1px solid #f0dca6;border-radius:999px;padding:5px 14px}
.gsx-oc .gsx-oc-status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(230,169,26,.22)}
.gsx-oc .gsx-oc-sub{font-size:14px;line-height:1.6;color:var(--muted);margin:15px auto 22px;max-width:430px}
.gsx-oc .gsx-oc-num{display:flex;align-items:center;justify-content:space-between;background:var(--bg);border:1px dashed var(--line);border-radius:11px;padding:13px 18px;margin-bottom:6px}
.gsx-oc .gsx-oc-num .k{font-size:13px;color:var(--muted);font-weight:600}
.gsx-oc .gsx-oc-num b{font-size:21px;font-weight:800;color:var(--navy);font-feature-settings:"tnum" 1}
.gsx-oc .gsx-oc-rev{border:1px solid var(--line-2);border-radius:11px;padding:4px 16px;margin:14px 0 6px;text-align:start}
.gsx-oc .gsx-oc-rev .r{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--line-2)}
.gsx-oc .gsx-oc-rev .r:last-child{border-bottom:0}
.gsx-oc .gsx-oc-rev .r .k{color:var(--muted);font-size:13px;flex:none}
.gsx-oc .gsx-oc-rev .r .v{font-weight:700;text-align:end}
.gsx-oc .gsx-oc-rev .r.hl .k{color:var(--ink)}
.gsx-oc .gsx-oc-rev .r.hl .v{color:var(--green-deep);font-size:16px;font-weight:800}
.gsx-oc .gsx-oc-follow{font-size:12px;line-height:1.55;color:var(--faint);margin:16px auto 22px;max-width:420px}
.gsx-oc .gsx-oc-actions{display:flex;gap:11px;justify-content:center;flex-wrap:wrap}
.gsx-oc .gsx-oc-btn{flex:1;min-width:150px;height:46px;border-radius:10px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;border:1.5px solid var(--navy);background:#fff;color:var(--navy);transition:background .12s,box-shadow .12s}
.gsx-oc .gsx-oc-btn:hover{background:var(--bg)}
.gsx-oc .gsx-oc-btn.primary{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 3px 10px rgba(31,157,107,.28)}
.gsx-oc .gsx-oc-btn.primary:hover{background:var(--green-deep)}