/* Varijable na :root (ne na .zgn-form) - modal i toast se JS-om lijepe izravno na , izvan .zgn-form podstabla, pa se ondje ne bi nasljeđivale (CSS varijable prate DOM ugnježđenje, ne "pripadnost" komponenti). Bez ovoga background/border-color unutar modala tiho padaju na prozirno (nenasljedna svojstva), dok color ostaje čitljiv (nasljedan) - upravo bug koji je prijavljen. */ :root{ --zgnf-ink:#14181f; --zgnf-ink2:#5a6472; --zgnf-ink3:#8a94a3; --zgnf-line:#e6e9ee; --zgnf-acc:#1e9e5a; --zgnf-acc-soft:#e6f5ec; --zgnf-z1-bg:#fbecc4; --zgnf-z1-bd:#e0bd5e; --zgnf-z2-bg:#d8e9fc; --zgnf-z2-bd:#8fc0f2; --zgnf-z3-bg:#d7f0e0; --zgnf-z3-bd:#8ad6a8; --zgnf-z4-bg:#e9dbf8; --zgnf-z4-bd:#c39ce8; --zgnf-z5-bg:#d2f0ee; --zgnf-z5-bd:#7fd1cb; --zgnf-z6-bg:#fbdce9; --zgnf-z6-bd:#e992b3; --zgnf-bench-bg:#e9ebee; --zgnf-bench-bd:#c7cdd6; } .zgn-form{ font-family:inherit; color:var(--zgnf-ink); max-width:640px; margin:0 auto; -webkit-tap-highlight-color:transparent; } .zgn-form *,.zgn-form-overlay,.zgn-form-overlay *,.zgn-form-toast{box-sizing:border-box} /* ---- okidac ---- */ .zgn-form-trigger{ display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;font:inherit; width:100%;box-sizing:border-box; border:0;background:var(--zgnf-acc);color:#fff; font-weight:700;font-size:15px;padding:15px 18px;border-radius:14px;margin:14px 0; box-shadow:0 4px 14px rgba(30,158,90,.28);transition:transform .1s,box-shadow .15s; } .zgn-form-trigger-ico{font-size:16px;line-height:1} .zgn-form-trigger:hover{box-shadow:0 6px 18px rgba(30,158,90,.36)} .zgn-form-trigger:active{transform:scale(.99)} /* ---- modal ---- */ html.zgn-form-lock{overflow:hidden} .zgn-form-overlay{ position:fixed;inset:0;z-index:100000;display:flex;align-items:flex-end;justify-content:center; background:rgba(20,24,31,.55);opacity:0;pointer-events:none;transition:opacity .22s; } .zgn-form-overlay.zgn-show{opacity:1;pointer-events:auto} .zgn-form-modal{ width:100%;max-width:560px;max-height:88vh;background:#fff;color:var(--zgnf-ink); border-radius:20px 20px 0 0;display:flex;flex-direction:column; transform:translateY(24px);transition:transform .26s ease;font-family:inherit; box-shadow:0 -12px 40px rgba(20,24,31,.22); } .zgn-form-overlay.zgn-show .zgn-form-modal{transform:translateY(0)} .zgn-form-mhd{display:flex;align-items:flex-start;gap:12px;padding:18px 18px 12px;border-bottom:1px solid var(--zgnf-line)} .zgn-form-mhd>div{flex:1} .zgn-form-eyebrow{ font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--zgnf-acc);display:inline-flex;align-items:center;gap:7px; } .zgn-form-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--zgnf-acc)} .zgn-form-note{margin:8px 0 0;font-size:13px;color:var(--zgnf-ink2);line-height:1.45} .zgn-form-x{ flex:none;border:0;background:#f2f4f7;color:var(--zgnf-ink2);cursor:pointer; width:32px;height:32px;border-radius:50%;font-size:20px;line-height:1; } .zgn-form-modal .zgn-form-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 18px 18px} .zgn-form-empty{padding:16px 2px;font-size:13px;color:var(--zgnf-ink3)} @media (min-width:640px){ .zgn-form-overlay{align-items:center} .zgn-form-modal{border-radius:20px;transform:translateY(12px) scale(.98)} .zgn-form-overlay.zgn-show .zgn-form-modal{transform:translateY(0) scale(1)} } /* ---- tabovi Domaci/Gosti - neutralne boje, grb kluba ---- */ .zgn-form-tabs{display:flex;gap:8px;margin:14px 0 10px;position:sticky;top:0;background:#fff;padding-top:2px;z-index:1} .zgn-form-tab{ flex:1;border:1.5px solid var(--zgnf-line);cursor:pointer;font:inherit;font-weight:700;font-size:14px; display:flex;align-items:center;justify-content:center;gap:8px; padding:10px 6px;border-radius:12px;background:#f7f8fa;color:var(--zgnf-ink2); transition:.15s; } .zgn-form-tab-logo{width:22px;height:22px;object-fit:contain;display:block;flex:none} .zgn-form-tab-nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .zgn-form-tab.zgn-form-active{background:var(--zgnf-ink);color:#fff;border-color:var(--zgnf-ink)} /* ---- zone (linije) - svaka linija svoja boja da se odmah razlikuju, cak i prazne ---- */ .zgn-form-pitch{display:flex;flex-direction:column;gap:8px;padding:6px 0} .zgn-form-zone,.zgn-form-bench{ border:1.5px solid var(--zgnf-line);border-radius:14px;padding:10px 12px; transition:outline-color .15s;outline:2px solid transparent;outline-offset:-2px; } .zgn-form-zone-1{background:var(--zgnf-z1-bg);border-color:var(--zgnf-z1-bd)} .zgn-form-zone-2{background:var(--zgnf-z2-bg);border-color:var(--zgnf-z2-bd)} .zgn-form-zone-3{background:var(--zgnf-z3-bg);border-color:var(--zgnf-z3-bd)} .zgn-form-zone-4{background:var(--zgnf-z4-bg);border-color:var(--zgnf-z4-bd)} .zgn-form-zone-5{background:var(--zgnf-z5-bg);border-color:var(--zgnf-z5-bd)} .zgn-form-zone-6{background:var(--zgnf-z6-bg);border-color:var(--zgnf-z6-bd)} .zgn-form-bench{margin-top:10px;background:var(--zgnf-bench-bg);border-color:var(--zgnf-bench-bd)} .zgn-form-zone-hd{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--zgnf-ink2);margin-bottom:8px} .zgn-form-zone-list{display:flex;flex-wrap:wrap;gap:8px;min-height:38px} .zgn-form-zone-active{outline-color:var(--zgnf-acc)} .zgn-form-chip{ display:inline-flex;align-items:center;gap:6px;cursor:pointer;font:inherit; border:1.5px solid rgba(20,24,31,.14);background:#fff;color:var(--zgnf-ink); padding:7px 12px;border-radius:999px;font-size:13px;font-weight:600; transition:transform .12s,background .12s,border-color .12s,color .12s,box-shadow .12s; } .zgn-form-chip:active{transform:scale(.96)} .zgn-form-chip-num{font-variant-numeric:tabular-nums;color:var(--zgnf-ink3);font-weight:700} .zgn-form-chip-sub{opacity:.75} .zgn-form-chip-sel{ background:var(--zgnf-acc);border-color:var(--zgnf-acc);color:#fff; transform:scale(1.05);box-shadow:0 3px 10px rgba(30,158,90,.4); } .zgn-form-chip-sel .zgn-form-chip-num{color:rgba(255,255,255,.8)} /* ---- toast ---- */ .zgn-form-toast{ position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(18px); background:var(--zgnf-ink);color:#fff;font-size:13px;font-weight:600; padding:11px 17px;border-radius:999px;opacity:0;pointer-events:none;z-index:99999; transition:opacity .22s,transform .22s;box-shadow:0 8px 24px rgba(0,0,0,.25); max-width:88vw;text-align:center; } .zgn-form-toast.zgn-show{opacity:1;transform:translateX(-50%) translateY(0)} .zgn-form-toast-err{background:#b03a36}