/* ============================================
   css/hero-mocks.css — τα 3 «παράθυρα» του hero (Πλάνο, Συμβόλαιο, Πελατολόγιο)
   Καθαρό HTML/CSS, καμία εικόνα. Το markup είναι στο includes/hero-mocks.php.
   Τα animations τρέχουν κάθε φορά που ένα παράθυρο έρχεται μπροστά (.pos-c).
   Όλες οι κλάσεις έχουν πρόθεμα mk- για να μη συγκρούονται με το custom.css.
   ============================================ */
.hw-body.mk-plan{font-size:clamp(6px,1.4cqw,11px)}
.hw-body.mk-contract{font-size:clamp(6px,1.22cqw,10px)}
.hw-body.mk-aade{font-size:clamp(6px,1.3cqw,10px)}
.hw-body[class*="mk-"]{font-family:Inter,system-ui,sans-serif;color:#1f2d3d;line-height:1.3}
:where(.hw-body[class*="mk-"]) *{box-sizing:border-box;margin:0;padding:0;line-height:1.3}



/* ---- common app chrome (ίδιο με την εφαρμογή) ---- */
.mk-app-top{background:#2c3e50;color:#fff;height:4.6em;display:flex;align-items:center;padding:0 1.6em;gap:1em}
.mk-logo{background:#fff;border-radius:.45em;padding:.35em .7em;display:flex;align-items:center;height:2.9em}
.mk-logo img{height:100%;width:auto;display:block}
.mk-app-top .mk-ttl{margin:0 auto;font-size:1.25em;font-weight:500;opacity:.95}
.mk-tb{background:#1a9fb5;color:#fff;border-radius:.4em;padding:.55em 1.1em;font-size:1em;font-weight:500}
.mk-lang{display:flex;gap:.3em}.mk-lang span{padding:.4em .7em;border-radius:.3em;font-size:.9em}.mk-lang .mk-on{background:#4a5c70}

/* ---- 1. ΠΛΑΝΟ ΔΙΑΘΕΣΙΜΟΤΗΤΑΣ ---- */
.mk-pl-head{display:flex;align-items:center;gap:1.2em;padding:.8em 1.4em;border-bottom:1px solid #e9eef3;background:#fff}
.mk-pl-head h3{white-space:nowrap;font-size:1.4em;font-weight:600;color:#2c3e50;display:flex;align-items:center;gap:.4em}
.mk-pl-head .mk-kv{white-space:nowrap;color:#5f6f80;font-size:.95em}.mk-pl-head .mk-kv b{color:#1e73e8;font-weight:600}
.mk-pl-head .mk-sp{flex:1}
.mk-seg{display:flex;background:#eef1f5;border-radius:.4em;padding:.2em}.mk-seg span{padding:.45em 1em;border-radius:.3em;font-size:.95em;color:#4b5a6a}.mk-seg .mk-on{background:#1e73e8;color:#fff;font-weight:500}
.mk-bb{background:#1e73e8;color:#fff;border-radius:.4em;padding:.55em 1em;font-size:.95em;font-weight:500}
.mk-pl-filters{display:flex;gap:.8em;padding:.9em 1.4em;border-bottom:1px solid #e9eef3}
.mk-pl-filters span{border:1px solid #d9e0e8;border-radius:.4em;padding:.5em 1em;color:#3b4b5c;font-size:.95em}
.mk-pl-filters .mk-src{flex:1;color:#9aa8b6}
.mk-gantt{display:grid;grid-template-columns:13.5em 1fr;position:relative}
.mk-g-hd{grid-column:1/-1;display:grid;grid-template-columns:13.5em 1fr;background:#f7f9fb;border-bottom:1px solid #e3e8ee}
.mk-g-hd .m{grid-column:2;text-align:center;color:#1e73e8;font-weight:600;font-size:.95em;padding:.35em 0;border-bottom:1px solid #e3e8ee}
.mk-g-hd .mk-rng{grid-row:1/3;display:flex;align-items:center;justify-content:center;font-size:.95em;color:#3b4b5c;border-right:1px solid #e3e8ee}
.mk-days{display:grid;grid-template-columns:repeat(12,1fr)}
.mk-days i{font-style:normal;text-align:center;font-size:.9em;color:#3b4b5c;padding:.4em 0;border-right:1px solid #eef1f4}
.mk-days i.mk-we{background:#fff1f0;color:#c0392b}
.mk-cat{grid-column:1/-1;display:flex;align-items:center;gap:.5em;padding:.6em 1em;font-weight:600;color:#2c3e50;font-size:1.05em;border-bottom:1px solid #e3e8ee;background:#fff}
.mk-cat small{margin-left:auto;font-weight:500;color:#6b7b8b}
.mk-row{display:contents}
.mk-row .mk-veh{padding:.55em 1em;font-size:.95em;color:#2c3e50;border-bottom:1px solid #eef1f4;border-right:1px solid #e3e8ee;white-space:nowrap;overflow:hidden}
.mk-row .mk-veh small{color:#8a98a6;margin-left:.5em;font-size:.85em}
.mk-row .mk-veh.mk-off{background:#f3f6fa}.mk-row .mk-veh.mk-off em{font-style:normal;background:#1e73e8;color:#fff;font-size:.7em;padding:.15em .4em;border-radius:.25em;margin-right:.4em;font-weight:700}
.mk-trk{position:relative;border-bottom:1px solid #eef1f4;background:
  linear-gradient(90deg,transparent calc(100%/12*1 - 1px),#eef1f4 0 calc(100%/12*1)),
  linear-gradient(90deg,#fff1f0 0 calc(100%/12*1),transparent 0 calc(100%/12*6),#fff1f0 0 calc(100%/12*8),transparent 0)}
.hwin.pos-c .mk-trk b{position:absolute;top:.35em;bottom:.35em;border-radius:.2em;color:#fff;font-weight:500;font-size:.9em;line-height:1;display:flex;align-items:center;padding:0 .6em;white-space:nowrap;overflow:hidden;transform-origin:left;animation:grow .7s cubic-bezier(.22,1,.3,1) both}
.mk-trk b.g{background:linear-gradient(#28c53e,#1faa33)}.mk-trk b.n{background:linear-gradient(#1f7be8,#1660c2)}.mk-trk b.s{background:linear-gradient(#7d8894,#5f6a76)}.mk-trk b.r{background:linear-gradient(#f0463c,#d9342a)}.mk-trk b.o{background:linear-gradient(#ff8a2a,#f06d10)}
.mk-today{position:absolute;top:4.3em;bottom:0;left:calc(13.5em + (100% - 13.5em)/12*5.5);width:2px;background:#e8232f;z-index:3}
.mk-today i{position:absolute;top:-.1em;left:50%;transform:translateX(-50%);background:#e8232f;color:#fff;font-style:normal;font-weight:700;font-size:.85em;padding:.2em .5em;border-radius:.25em}
.mk-today u{display:none}
.mk-legend{position:absolute;left:0;right:0;bottom:0;background:#fff;border-top:1px solid #e3e8ee;display:flex;justify-content:center;gap:1.4em;padding:.6em;font-size:.9em;color:#3b4b5c}
.mk-legend span::before{content:"";display:inline-block;width:1em;height:1em;border-radius:.2em;vertical-align:-.15em;margin-right:.35em;background:var(--c)}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---- 3. ΨΗΦΙΑΚΟ ΠΕΛΑΤΟΛΟΓΙΟ ---- */
.mk-pt{height:100%;background:linear-gradient(135deg,#4f6ff0 0%,#7c5ce6 55%,#b06ad8 100%)}
.mk-pt-top{background:#1f2a44;color:#e6e9f3;height:5.4em;display:flex;align-items:center;padding:0 1.3em;gap:1.6em;font-size:.9em}
.mk-pt-top .mk-lg{display:flex;align-items:center;gap:.6em;font-weight:700;font-size:1.15em;color:#fff;line-height:1.1;margin-right:.6em}
.mk-pt-top .mk-lg i{width:2em;height:2em;border-radius:.4em;background:#7b61ff;display:block}
.mk-pt-top span{white-space:nowrap}
.mk-pt-top .mk-lang{margin-left:auto}.mk-pt-top .mk-lang span{background:#3a4a6b}.mk-pt-top .mk-lang .mk-on{background:#3b82f6}
.mk-pt-wrap{padding:1.6em 11%;}
.mk-pt-hero{background:linear-gradient(135deg,#dde4ff,#c9d4ff);border-radius:.7em;text-align:center;padding:1.8em 1em;margin-bottom:1.6em;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.mk-pt-hero h3{font-size:1.9em;font-weight:600;color:#2c3e50}
.mk-pt-hero p{color:#5a6a85;font-size:1em;margin-top:.5em}
.mk-pt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5em}
.hwin.pos-c .mk-pt-card{background:#fff;border-radius:.7em;text-align:center;padding:1.9em 1em 1.6em;box-shadow:0 8px 24px rgba(0,0,0,.12);animation:pop .6s cubic-bezier(.34,1.56,.64,1) both;animation-delay:var(--d)}
.mk-pt-card b{display:block;font-size:3.2em;font-weight:700;color:var(--c);line-height:1}
.mk-pt-card small{display:block;margin-top:.9em;color:#5a6a85;font-size:1em;font-weight:500}
@keyframes pop{from{opacity:0;transform:scale(.85) translateY(8px)}to{opacity:1;transform:none}}


.mk-g10 .mk-days{grid-template-columns:repeat(10,1fr)}
.mk-g10 .mk-trk{background:linear-gradient(90deg,transparent calc(10% - 1px),#eef1f4 0 10%),linear-gradient(90deg,transparent 0 40%,#fff1f0 0 60%,transparent 0)}
.mk-g10 .mk-trk b{top:.45em;bottom:.45em;font-size:.95em;padding:0 .8em}
.mk-g10 .mk-row .mk-veh{padding:.7em 1em;font-size:1em}
.mk-g10 .mk-trk b{top:.35em;bottom:.35em}
.mk-g10 .mk-cat{padding:.45em 1em}
.mk-g10 .mk-g-hd .m{padding:.25em 0}.mk-g10 .mk-days i{padding:.3em 0}
.mk-today.mk-t10{left:calc(13.5em + (100% - 13.5em)/10*4.4)}
.hwin.pos-c .mk-trk b.mk-new{animation:grow .55s 1.2s cubic-bezier(.34,1.56,.64,1) both,ring 1.4s 1.8s ease-out 2}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(40,197,62,.6)}100%{box-shadow:0 0 0 .8em rgba(40,197,62,0)}}

.mk-pt-wrap{padding:1.3em 6%}
.mk-pt-hero{padding:1.1em 1em;margin-bottom:1.2em}
.mk-pt-hero h3{font-size:1.6em}
.mk-pt-grid{gap:1.2em;margin-bottom:1.2em}
.mk-pt-card{padding:1.2em 1em 1em}.mk-pt-card b{font-size:2.6em}.mk-pt-card small{margin-top:.6em}
.hwin.pos-c .mk-pt-tbl{background:#fff;border-radius:.7em;box-shadow:0 8px 24px rgba(0,0,0,.12);overflow:hidden;animation:pop .6s .6s cubic-bezier(.34,1.56,.64,1) both}
.mk-pt-th,.mk-pt-tr{display:grid;grid-template-columns:1.3fr 1.3fr 1.7fr 1.1fr 1.2fr;gap:.8em;padding:.75em 1.2em;font-size:1em;align-items:center}
.mk-pt-th{background:#f3f4fb;color:#6b7280;font-weight:600;font-size:.85em;text-transform:uppercase;letter-spacing:.04em}
.mk-pt-tr{border-top:1px solid #eef0f6;color:#2c3e50}.mk-pt-tr span:first-child{color:#6b7280}
.mk-pt-tr em{font-style:normal;font-weight:600;font-size:.9em;padding:.3em .7em;border-radius:1em;white-space:nowrap}
.mk-pt-tr em.mk-ok{background:#e3f6ea;color:#1e8e4a}.mk-pt-tr em.mk-pd{background:#fff4dd;color:#b7791f}

.mk-pt-tr.mk-live span:last-child{position:relative;min-height:1.8em}
.mk-pt-tr.mk-live em{position:absolute;left:0;top:0}
.hwin.pos-c .mk-pt-tr.mk-live em.mk-pd{animation:fadeout .3s calc(var(--d,2.6s) + 1.2s) forwards}
.hwin.pos-c .mk-pt-tr.mk-live em.mk-done{opacity:0;animation:popin .5s calc(var(--d,2.6s) + 1.4s) cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes fadeout{to{opacity:0}}@keyframes popin{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}

.mk-ct{display:grid;grid-template-columns:1fr 15em;gap:1.4em;padding:1.4em;background:#f4f6f9;height:calc(100% - 4.6em)}
.mk-ct-doc{background:#fff;border-radius:.6em;box-shadow:0 1px 4px rgba(0,0,0,.06);padding:1.1em 1.4em;position:relative;overflow:hidden}
.mk-ct-hd{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e9eef3;padding-bottom:.7em;margin-bottom:.8em}
.mk-ct-hd b{display:block;font-size:1.35em;color:#2c3e50}.mk-ct-hd small{color:#7b8794;font-size:.9em}
.hwin.pos-c .mk-ct-chip{background:#fff4dd;color:#b7791f;font-weight:600;font-size:.85em;padding:.35em .8em;border-radius:1em;animation:chipflip 0s 3.4s forwards}
@keyframes chipflip{to{background:#e3f6ea;color:#1e8e4a}}
.mk-ct-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6em 1.4em;margin-bottom:.8em}
.mk-ct-grid small{display:block;color:#8a98a6;font-size:.8em;text-transform:uppercase;letter-spacing:.04em}
.mk-ct-grid b{display:block;color:#2c3e50;font-size:1.05em;margin:.15em 0}.mk-ct-grid span{color:#5f6f80;font-size:.9em}
.mk-ct-tot{display:flex;align-items:center;gap:1em;background:#f7f9fb;border-radius:.4em;padding:.55em 1em;margin-bottom:.8em;color:#5f6f80}
.mk-ct-tot b{font-size:1.5em;color:#1e73e8}.mk-ct-ins{margin-left:auto;color:#1e8e4a;font-weight:500;font-size:.9em}
.mk-ct-sig{position:relative;border:1px dashed #b9c4d0;border-radius:.5em;background:#fbfcfd;padding:.5em .8em}
.mk-ct-sig small{color:#8a98a6;font-size:.8em;text-transform:uppercase;letter-spacing:.04em}
.mk-ct-sig svg{width:100%;height:auto;display:block}
.hwin.pos-c .mk-sig{stroke-dasharray:700;stroke-dashoffset:700;animation:sign 2.2s 1s cubic-bezier(.4,0,.6,1) forwards}
@keyframes sign{to{stroke-dashoffset:0}}
.hwin.pos-c .mk-ct-pen{position:absolute;font-size:1.8em;left:4%;bottom:18%;opacity:0;animation:pen 2.2s 1s cubic-bezier(.4,0,.6,1) forwards}
@keyframes pen{0%{opacity:1;left:4%}95%{opacity:1}100%{opacity:0;left:88%}}
.hwin.pos-c .mk-ct-stamp{position:absolute;right:1.6em;bottom:6.2em;background:#1e8e4a;color:#fff;font-weight:700;font-size:1em;padding:.5em .9em;border-radius:.4em;transform:rotate(-6deg) scale(0);opacity:0;animation:stamp .5s 3.4s cubic-bezier(.34,1.56,.64,1) forwards;box-shadow:0 6px 16px rgba(30,142,74,.35)}
@keyframes stamp{to{transform:rotate(-6deg) scale(1);opacity:1}}
.mk-ct-side{display:flex;flex-direction:column;gap:.7em}
.mk-ct-step{display:flex;gap:.8em;align-items:flex-start;background:#fff;border-radius:.5em;padding:.8em .9em;box-shadow:0 1px 4px rgba(0,0,0,.05);border-left:.3em solid #d9e0e8}
.mk-ct-step i{font-style:normal;width:1.8em;height:1.8em;border-radius:50%;background:#e9eef3;color:#5f6f80;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9em;flex:none}
.mk-ct-step b{display:block;color:#2c3e50;font-size:.95em}.mk-ct-step small{color:#8a98a6;font-size:.85em}
.mk-ct-step.mk-done{border-left-color:#1e8e4a}.mk-ct-step.mk-done i{background:#1e8e4a;color:#fff}
.mk-ct-step.mk-act{border-left-color:#1e73e8}.mk-ct-step.mk-act i{background:#1e73e8;color:#fff}
.mk-ct-step.mk-last{opacity:.55}
.mk-ct-btn{margin-top:auto;background:#1e73e8;color:#fff;text-align:center;border-radius:.4em;padding:.8em;font-weight:600;font-size:.95em}

/* πριν «έρθει μπροστά» το παράθυρο: τα animated στοιχεία στην αρχική τους κατάσταση */
.hwin:not(.pos-c) .mk-ct-stamp,.hwin:not(.pos-c) .mk-pt-tr.mk-live em.mk-done{opacity:0}
.hwin:not(.pos-c) .mk-sig{stroke-dashoffset:700}
@media(prefers-reduced-motion:reduce){
  .hw-body [class*="mk-"],.hw-body .mk-sig{animation:none!important}
  .mk-sig{stroke-dashoffset:0!important}.mk-ct-stamp{opacity:1;transform:rotate(-6deg)}
  .mk-pt-tr.mk-live em.mk-pd{opacity:0}.mk-pt-tr.mk-live em.mk-done{opacity:1}
}

/* ============================================
   Σειρά «Σύνδεση με brokers» — animated διάγραμμα (includes/row-brokers.php)
   Κύκλος 11": 5 κανάλια × 2,2". Κάθε στοιχείο παίρνει --i (0-4) και --c (χρώμα καναλιού).
   ============================================ */
:where(.page-index10) .zscr.has-mock .zscr-ph{display:none}
:where(.page-index10) .zscr{container-type:inline-size}
.bk{position:absolute;inset:0;z-index:1;display:grid;grid-template-columns:29% 13% 18% 8% 32%;align-items:stretch;padding:3cqw 2.5cqw;gap:0;
  font-family:Inter,system-ui,sans-serif;font-size:clamp(6px,1.75cqw,13px);color:#1f2d3d;line-height:1.3;
  background:linear-gradient(160deg,#fbfcfa,#f1f6ea)}
.bk *{box-sizing:border-box;margin:0;padding:0}
/* κανάλια */
.bk-ch{display:grid;align-content:space-between;height:100%}
.bk-c{display:flex;align-items:center;gap:.9em;padding:.8em 1em;border-radius:1em;background:#fff;border:1px solid rgba(36,62,90,.1);box-shadow:0 6px 16px -12px rgba(22,38,58,.5);
  animation:bk-c 11s calc(var(--i) * 2.2s) infinite}
.bk-c i{flex:none;width:2.6em;height:2.6em;border-radius:.8em;display:grid;place-items:center;color:#fff;background:var(--c);font-size:1.1em}
.bk-c b{display:block;font-size:1.05em;color:#243e5a}
.bk-c small{display:block;font-size:.85em;color:rgba(36,62,90,.6)}
@keyframes bk-c{0%,12%{box-shadow:0 6px 16px -12px rgba(22,38,58,.5);transform:none;border-color:rgba(36,62,90,.1)}
  2%{box-shadow:0 0 0 .3em color-mix(in srgb,var(--c) 30%,transparent),0 10px 22px -12px rgba(22,38,58,.6);transform:translateX(.3em);border-color:var(--c)}
  100%{box-shadow:0 6px 16px -12px rgba(22,38,58,.5);transform:none;border-color:rgba(36,62,90,.1)}}
/* γραμμές + κουκκίδες προς το EzCar */
.bk-mid{position:relative;height:100%}
.bk-lines{position:absolute;inset:0;width:100%;height:100%}
.bk-lines path{fill:none;stroke:rgba(36,62,90,.18);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:3 3}
.bk-dot{position:absolute;width:1.1em;height:1.1em;border-radius:50%;background:var(--c);box-shadow:0 0 0 .35em color-mix(in srgb,var(--c) 25%,transparent);
  left:0;top:var(--y);translate:-50% -50%;opacity:0;animation:bk-dot 11s calc(var(--i) * 2.2s) infinite cubic-bezier(.4,0,.6,1)}
@keyframes bk-dot{0%{left:0;top:var(--y);opacity:0} 1%{opacity:1} 8%{left:100%;top:50%;opacity:1} 8.5%,100%{left:100%;top:50%;opacity:0}}
/* EzCar στη μέση */
.bk-hub{position:relative;display:grid;justify-items:center;align-content:center;gap:.6em}
.bk-logo{position:relative;z-index:1;background:#fff;border-radius:1.2em;padding:1em 1.3em;box-shadow:0 14px 30px -16px rgba(22,38,58,.55);border:1px solid rgba(36,62,90,.1)}
.bk-logo img{display:block;height:3.2em;width:auto}
.bk-hub small{position:relative;z-index:1;white-space:nowrap;font-size:.85em;font-weight:600;color:#243e5a;background:#eef6dc;border-radius:1em;padding:.3em .8em}
.bk-ring{position:absolute;left:50%;top:44%;width:7em;height:7em;border-radius:50%;translate:-50% -50%;border:.18em solid rgba(161,202,66,.7);opacity:0;animation:bk-ring 2.2s .85s infinite ease-out}
.bk-ring.r2{animation-delay:1.15s}
@keyframes bk-ring{0%{transform:scale(.6);opacity:.9} 100%{transform:scale(1.7);opacity:0}}
/* γραμμή + κουκκίδες προς το πλάνο */
.bk-out{position:relative;height:100%}
.bk-out svg{position:absolute;inset:0;width:100%;height:100%}
.bk-out path{fill:none;stroke:rgba(36,62,90,.18);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:3 3}
.bk-dot2{position:absolute;width:1.1em;height:1.1em;border-radius:50%;background:var(--c);left:0;top:50%;translate:-50% -50%;opacity:0;animation:bk-dot2 11s calc(var(--i) * 2.2s) infinite ease-in}
@keyframes bk-dot2{0%,8.5%{left:0;opacity:0} 9%{opacity:1} 12%{left:100%;opacity:1} 12.5%,100%{left:100%;opacity:0}}
/* μικρό πλάνο */
.bk-plan{display:flex;flex-direction:column;height:100%;background:#fff;border-radius:1em;border:1px solid rgba(36,62,90,.1);box-shadow:0 14px 30px -18px rgba(22,38,58,.5);overflow:hidden}
.bk-ph{display:flex;justify-content:space-between;align-items:center;gap:.5em;white-space:nowrap;padding:.7em .9em;background:#2c3e50;color:#fff}
.bk-ph b{font-size:.9em}.bk-ph span{font-size:.85em;opacity:.8}
.bk-row{flex:1;display:grid;grid-template-columns:5.6em 1fr;align-items:stretch;border-top:1px solid #eef1f4}
.bk-row span{display:flex;align-items:center;padding:0 .6em;font-size:.85em;color:#2c3e50;white-space:nowrap;overflow:hidden}
.bk-row i{position:relative;height:100%;background:linear-gradient(90deg,#f3f6fa 1px,transparent 1px) 0 0/12.5% 100%}
.bk-row em{position:absolute;top:26%;bottom:26%;border-radius:.3em;background:var(--c);color:#fff;font-style:normal;font-weight:600;font-size:.85em;display:flex;align-items:center;padding:0 .7em;white-space:nowrap;overflow:hidden;
  transform-origin:left;transform:scaleX(0);animation:bk-bar 11s calc(var(--i) * 2.2s) infinite cubic-bezier(.22,1,.3,1)}
@keyframes bk-bar{0%,12%{transform:scaleX(0)} 16%{transform:scaleX(1)} 100%{transform:scaleX(1)}}
.bk-pf{margin-top:auto;padding:.6em 1em;border-top:1px solid #eef1f4;background:#fafcf6}
.bk-ok{display:inline-flex;align-items:center;gap:.5em;font-size:.9em;font-weight:600;color:#1e8e4a}
@media(prefers-reduced-motion:reduce){.bk *{animation:none!important}.bk-row em{transform:none}.bk-dot,.bk-dot2,.bk-ring{display:none}}

/* ============================================
   Σειρά «Δωρεάν υποστήριξη» — mock συνομιλίας (includes/row-support.php). Κύκλος 14".
   ============================================ */
.sp{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;font-family:Inter,system-ui,sans-serif;font-size:clamp(7px,1.9cqw,14px);color:#1f2d3d;line-height:1.35;background:#eef2ee}
.sp *{box-sizing:border-box;margin:0;padding:0}
.sp-hd{display:flex;align-items:center;gap:.8em;padding:.9em 1.2em;background:#2c3e50;color:#fff}
.sp-av{flex:none;width:2.6em;height:2.6em;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:1.1em;color:#1f2d3d;background:#a1ca42}
.sp-hd b{display:block;font-size:1em}
.sp-hd small{display:flex;align-items:center;gap:.4em;font-size:.8em;opacity:.85}
.sp-hd small i{width:.6em;height:.6em;border-radius:50%;background:#28c840;box-shadow:0 0 0 .2em rgba(40,200,64,.3)}
.sp-ic{margin-left:auto;width:2.2em;height:2.2em;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);font-size:.9em}
.sp-body{flex:1;min-height:0;padding:1em 1.2em;display:flex;flex-direction:column;gap:.55em;overflow:hidden;
  background-image:radial-gradient(rgba(36,62,90,.06) 1px,transparent 1.2px);background-size:14px 14px}
.sp-day{align-self:center;font-size:.75em;color:#5f6f80;background:#fff;border-radius:1em;padding:.2em .8em;margin-bottom:.3em}
.sp-m{position:relative;max-width:78%;align-self:flex-start;background:#fff;border-radius:1em 1em 1em .25em;padding:.65em .9em .9em;box-shadow:0 2px 6px -3px rgba(22,38,58,.35);
  opacity:0;transform:translateY(.6em) scale(.98);animation:sp-m 14s var(--t) cubic-bezier(.2,.8,.2,1) both infinite}
.sp-m.me{align-self:flex-end;background:#e2f3c6;border-radius:1em 1em .25em 1em}
.sp-m p{font-size:.95em}
.sp-m time{position:absolute;right:.8em;bottom:.3em;font-size:.68em;color:rgba(36,62,90,.55)}
@keyframes sp-m{0%{opacity:0;transform:translateY(.6em) scale(.98)} 2.5%{opacity:1;transform:none} 100%{opacity:1;transform:none}}
.sp-typing{align-self:flex-start;display:flex;gap:.3em;padding:.7em .9em;background:#fff;border-radius:1em 1em 1em .25em;box-shadow:0 2px 6px -3px rgba(22,38,58,.35);
  opacity:0;height:0;padding-top:0;padding-bottom:0;overflow:hidden;animation:sp-typing 14s var(--a) both infinite}
.sp-typing i{width:.5em;height:.5em;border-radius:50%;background:#8a98a6;animation:sp-dot 1s infinite ease-in-out}
.sp-typing i:nth-child(2){animation-delay:.15s}.sp-typing i:nth-child(3){animation-delay:.3s}
/* το typing μένει ορατό από --a μέχρι --b: 1.4" = 10% του κύκλου των 14" */
@keyframes sp-typing{0%{opacity:0;height:0;padding-top:0;padding-bottom:0} 1%{opacity:1;height:2.2em;padding-top:.7em;padding-bottom:.7em} 10%{opacity:1;height:2.2em;padding-top:.7em;padding-bottom:.7em} 11%,100%{opacity:0;height:0;padding-top:0;padding-bottom:0}}
@keyframes sp-dot{0%,100%{transform:translateY(0);opacity:.5} 50%{transform:translateY(-.25em);opacity:1}}
.sp-ft{display:flex;justify-content:flex-start;gap:1.4em;flex-wrap:wrap;padding:.7em 1.2em 1.2em;background:#fff;border-top:1px solid rgba(36,62,90,.1);font-size:.8em;font-weight:600;color:#243e5a}
.sp-ft i{color:#7fa827;margin-right:.3em}
@media(prefers-reduced-motion:reduce){.sp-m{animation:none;opacity:1;transform:none}.sp-typing{display:none}}

/* ============================================
   Σειρά «Online check-in & συμβόλαιο» — animation (includes/row-checkin.php). Κύκλος 18" = 4 × 4,5".
   Παράθυρα: βήμα 1: 0–25%, 2: 25–50%, 3: 50–75%, 4: 75–100%.
   ============================================ */
.ck{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;font-family:Inter,system-ui,sans-serif;font-size:clamp(7px,1.75cqw,13px);color:#1f2d3d;line-height:1.3;background:linear-gradient(160deg,#fbfcfa,#f1f6ea)}
.ck *{box-sizing:border-box;margin:0;padding:0}
.ck ul{list-style:none}
/* stepper */
.ck-steps{display:flex;align-items:center;gap:.6em;padding:1em 1.4em .6em}
.ck-st{display:flex;align-items:center;gap:.5em;white-space:nowrap;animation:ck-st 18s infinite}
.ck-st i{width:1.9em;height:1.9em;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:.85em;background:#e3e8ee;color:#5f6f80;transition:.3s}
.ck-st b{font-size:.9em;color:#8a98a6;font-weight:600;transition:.3s}
.ck-ln{flex:1;height:2px;background:#e3e8ee;border-radius:1px}
.ck-st.on i,.ck-st.s1 i{background:#1e73e8;color:#fff}
.ck-st.s1{animation-name:ck-st1}.ck-st.s2{animation-name:ck-st2}.ck-st.s3{animation-name:ck-st3}.ck-st.s4{animation-name:ck-st4}
@keyframes ck-st1{0%,24%{filter:none;opacity:1} 26%,100%{opacity:.55}}
@keyframes ck-st2{0%,24%{opacity:.55} 26%,49%{opacity:1} 51%,100%{opacity:.55}}
@keyframes ck-st3{0%,49%{opacity:.55} 51%,74%{opacity:1} 76%,100%{opacity:.55}}
@keyframes ck-st4{0%,74%{opacity:.55} 76%,100%{opacity:1}}
.ck-st.s2 i,.ck-st.s3 i,.ck-st.s4 i{background:#1e73e8;color:#fff}
.ck-st.s2 b,.ck-st.s3 b,.ck-st.s4 b,.ck-st.s1 b{color:#243e5a}
/* σκηνές */
.ck-stage{position:relative;flex:1;min-height:0}
.ck-sc{position:absolute;inset:0;padding:.4em 1.4em 1.2em;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8em;opacity:0;animation:18s infinite}
.ck-sc.s1{animation-name:ck-sc1}.ck-sc.s2{animation-name:ck-sc2}.ck-sc.s3{animation-name:ck-sc3}.ck-sc.s4{animation-name:ck-sc4}
@keyframes ck-sc1{0%{opacity:0;transform:translateY(.5em)} 2%,23%{opacity:1;transform:none} 25%,100%{opacity:0;transform:translateY(-.5em)}}
@keyframes ck-sc2{0%,25%{opacity:0;transform:translateY(.5em)} 27%,48%{opacity:1;transform:none} 50%,100%{opacity:0;transform:translateY(-.5em)}}
@keyframes ck-sc3{0%,50%{opacity:0;transform:translateY(.5em)} 52%,73%{opacity:1;transform:none} 75%,100%{opacity:0;transform:translateY(-.5em)}}
@keyframes ck-sc4{0%,75%{opacity:0;transform:translateY(.5em)} 77%,98%{opacity:1;transform:none} 100%{opacity:0}}
/* 1 · κάρτα κράτησης + email */
.ck-card{width:min(100%,38em);background:#fff;border-radius:.9em;border:1px solid rgba(36,62,90,.1);box-shadow:0 10px 24px -16px rgba(22,38,58,.5);overflow:hidden}
.ck-ch{display:flex;justify-content:space-between;align-items:center;padding:.7em 1em;background:#2c3e50;color:#fff;font-size:.95em}
.ck-ok{background:#28c53e;color:#fff;font-size:.8em;font-weight:600;padding:.25em .7em;border-radius:1em}
.ck-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7em 1.2em;padding:.9em 1em}
.ck-grid small{display:block;font-size:.75em;color:#8a98a6;text-transform:uppercase;letter-spacing:.04em}
.ck-grid b{display:block;font-size:.95em;color:#2c3e50}
.ck-mail{width:min(100%,38em);display:flex;align-items:center;gap:.8em;padding:.7em 1em;background:#fff;border-radius:.8em;border:1px solid rgba(36,62,90,.1);box-shadow:0 10px 24px -16px rgba(22,38,58,.5);
  opacity:0;transform:translateX(2em);animation:ck-mail 18s infinite cubic-bezier(.2,.8,.2,1)}
@keyframes ck-mail{0%,8%{opacity:0;transform:translateX(2em)} 11%,23%{opacity:1;transform:none} 25%,100%{opacity:0}}
.ck-mi{flex:none;width:2.4em;height:2.4em;border-radius:.7em;display:grid;place-items:center;color:#fff;background:#1e73e8}
.ck-mail b{display:block;font-size:.95em;color:#2c3e50}.ck-mail small{font-size:.85em;color:#5f6f80}
.ck-mail em{margin-left:auto;font-style:normal;font-size:.8em;font-weight:600;color:#1e8e4a;white-space:nowrap}
/* κινητό */
.ck-phone{width:min(100%,24em);background:#fff;border-radius:1.4em;border:.45em solid #1f2a44;box-shadow:0 16px 36px -18px rgba(22,38,58,.7);padding:.9em .9em 1em;display:grid;gap:.6em}
.ck-ph b{display:block;font-size:1em;color:#2c3e50}.ck-ph small{font-size:.8em;color:#8a98a6}
.ck-doc{display:flex;align-items:center;gap:.7em;padding:.6em .7em;border-radius:.7em;border:1px dashed #b9c4d0;background:#fbfcfd;animation:18s infinite}
.ck-doc b{display:block;font-size:.9em;color:#2c3e50}.ck-doc small{font-size:.78em;color:#8a98a6}
.ck-dic{flex:none;width:2.2em;height:2.2em;border-radius:.6em;display:grid;place-items:center;background:#eef1f5;color:#5f6f80}
.ck-doc em{margin-left:auto;width:1.7em;height:1.7em;border-radius:50%;display:grid;place-items:center;background:#28c53e;color:#fff;font-size:.8em;transform:scale(0);animation:18s infinite cubic-bezier(.34,1.56,.64,1)}
.ck-doc.d1 em{animation-name:ck-d1}.ck-doc.d2 em{animation-name:ck-d2}.ck-doc.d3 em{animation-name:ck-d3}
.ck-doc.d1{animation-name:ck-db1}.ck-doc.d2{animation-name:ck-db2}.ck-doc.d3{animation-name:ck-db3}
@keyframes ck-d1{0%,31%{transform:scale(0)} 34%,100%{transform:scale(1)}}
@keyframes ck-d2{0%,36%{transform:scale(0)} 39%,100%{transform:scale(1)}}
@keyframes ck-d3{0%,41%{transform:scale(0)} 44%,100%{transform:scale(1)}}
@keyframes ck-db1{0%,31%{border-style:dashed;border-color:#b9c4d0;background:#fbfcfd} 34%,100%{border-style:solid;border-color:#28c53e;background:#f1fbf3}}
@keyframes ck-db2{0%,36%{border-style:dashed;border-color:#b9c4d0;background:#fbfcfd} 39%,100%{border-style:solid;border-color:#28c53e;background:#f1fbf3}}
@keyframes ck-db3{0%,41%{border-style:dashed;border-color:#b9c4d0;background:#fbfcfd} 44%,100%{border-style:solid;border-color:#28c53e;background:#f1fbf3}}
.ck-btn{margin-top:.2em;text-align:center;padding:.7em;border-radius:.6em;background:#e3e8ee;color:#8a98a6;font-weight:600;font-size:.9em;animation:ck-btn 18s infinite}
@keyframes ck-btn{0%,45%{background:#e3e8ee;color:#8a98a6} 47%,100%{background:#1e73e8;color:#fff}}
.ck-note{font-size:.85em;color:#5f6f80;background:#fff;border-radius:1em;padding:.4em .9em;border:1px solid rgba(36,62,90,.1)}
.ck-note i{color:#7fa827;margin-right:.3em}
/* 3 · συμβόλαιο */
.ck-lines{display:grid;gap:.45em;padding:.2em 0}
.ck-lines i{display:block;height:.55em;border-radius:.3em;background:#e9eef3}
.ck-sig{position:relative;border:1px dashed #b9c4d0;border-radius:.6em;background:#fbfcfd;padding:.4em .6em .2em}
.ck-sig small{font-size:.72em;color:#8a98a6;text-transform:uppercase;letter-spacing:.04em}
.ck-sig svg{width:100%;height:auto;display:block}
.ck-path{stroke-dasharray:700;stroke-dashoffset:700;animation:ck-sign 18s infinite}
@keyframes ck-sign{0%,54%{stroke-dashoffset:700} 64%,100%{stroke-dashoffset:0}}
.ck-stamp{justify-self:end;background:#1e8e4a;color:#fff;font-weight:700;font-size:.85em;padding:.4em .8em;border-radius:.4em;transform:rotate(-4deg) scale(0);opacity:0;animation:ck-stamp 18s infinite cubic-bezier(.34,1.56,.64,1)}
@keyframes ck-stamp{0%,65%{transform:rotate(-4deg) scale(0);opacity:0} 68%,100%{transform:rotate(-4deg) scale(1);opacity:1}}
/* 4 · παραλαβή */
.ck-done{display:grid;justify-items:center;gap:.7em;text-align:center}
.ck-key{width:4.2em;height:4.2em;border-radius:50%;display:grid;place-items:center;font-size:1.3em;color:#fff;background:linear-gradient(135deg,#a1ca42,#7fa827);box-shadow:0 14px 30px -14px rgba(127,168,39,.8);transform:scale(0);animation:ck-key 18s infinite cubic-bezier(.34,1.56,.64,1)}
@keyframes ck-key{0%,76%{transform:scale(0)} 80%,100%{transform:scale(1)}}
.ck-done > b{font-size:1.35em;color:#243e5a}
.ck-done ul{display:flex;flex-wrap:wrap;justify-content:center;gap:.5em .8em}
.ck-done li{font-size:.85em;color:#2c3e50;background:#fff;border:1px solid rgba(36,62,90,.1);border-radius:1em;padding:.35em .8em;opacity:0;animation:18s infinite}
.ck-done li i{color:#1e8e4a;margin-right:.3em}
.ck-done li:nth-child(1){animation-name:ck-li1}.ck-done li:nth-child(2){animation-name:ck-li2}.ck-done li:nth-child(3){animation-name:ck-li3}.ck-done li:nth-child(4){animation-name:ck-li4}
@keyframes ck-li1{0%,80%{opacity:0;transform:translateY(.4em)} 82%,100%{opacity:1;transform:none}}
@keyframes ck-li2{0%,82%{opacity:0;transform:translateY(.4em)} 84%,100%{opacity:1;transform:none}}
@keyframes ck-li3{0%,84%{opacity:0;transform:translateY(.4em)} 86%,100%{opacity:1;transform:none}}
@keyframes ck-li4{0%,86%{opacity:0;transform:translateY(.4em)} 88%,100%{opacity:1;transform:none}}
.ck-time{display:flex;align-items:baseline;gap:.6em;margin-top:.2em;opacity:0;animation:ck-time 18s infinite cubic-bezier(.34,1.56,.64,1)}
@keyframes ck-time{0%,89%{opacity:0;transform:scale(.8)} 92%,100%{opacity:1;transform:none}}
.ck-time s{font-size:1.1em;color:#c0392b;opacity:.7}
.ck-time strong{font-size:2.4em;font-weight:800;color:#1e8e4a;line-height:1}
.ck-time small{font-size:.95em;color:#5f6f80}
@media(prefers-reduced-motion:reduce){.ck *{animation:none!important}.ck-sc{opacity:0}.ck-sc.s4{opacity:1}.ck-key,.ck-done li,.ck-time{opacity:1;transform:none}}

/* ── Τα animated mock των σειρών τρέχουν μόνο όσο το κουτί είναι στην οθόνη (.zrun από το script του index) ── */
.zscr:not(.zrun) .bk *,.zscr:not(.zrun) .sp *,.zscr:not(.zrun) .ck *{animation-play-state:paused!important}