/* Shared topbar (header) + mobile drawer styles for ALL site pages.
   Source of truth — extracted from styles-v2.css so subpages can load just
   this small file instead of the full homepage CSS.
   Loaded by: index.html, about.html, early-access.html, terms.html, privacy.html.
*/

/* ── Topbar (mobile-first) ───────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:60;display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;padding:14px 16px 12px;background:#000;box-shadow:0 4px 14px rgba(0,0,0,.22);gap:10px}
.topbar-logolink{display:inline-flex;align-items:center;flex-shrink:0}
.topbar-logo{height:22px;width:auto;display:block}
.topbar-right{display:flex;align-items:center;gap:10px}

/* Region pill */
.region-pill{display:inline-flex;align-items:center;gap:6px;font-size:9.5px;font-weight:700;letter-spacing:.08em;font-style:italic;color:#fff;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.18);padding:5px 9px;border-radius:999px;white-space:nowrap}
.region-pill .flag{width:7px;height:7px;border-radius:999px;background:var(--red);box-shadow:0 0 0 1px rgba(255,255,255,.45);display:inline-block;flex-shrink:0}
.region-pill .sep{opacity:.4;margin:0 1px}
@media (max-width:359px){.region-pill>span:not(.flag):not(.sep){display:none}.region-pill .sep{display:none}.region-pill{padding:6px 8px;gap:0}}

/* Burger button (mobile only) */
.topbar-burger{background:none;border:none;color:#fff;cursor:pointer;padding:6px;display:flex;flex-direction:column;gap:4px}
.topbar-burger span{display:block;width:22px;height:2px;background:#fff;border-radius:1px;transition:transform .2s ease,opacity .2s ease}
.topbar-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.topbar-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.topbar-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Desktop inline nav */
.topbar-nav{display:none;gap:24px;font-size:15px;font-weight:500}
.topbar-nav a{color:#fff;opacity:.85;text-decoration:none;white-space:nowrap;padding-bottom:4px;border-bottom:2px solid transparent;transition:opacity .15s ease,border-color .15s ease}
.topbar-nav a:hover{opacity:1}
.topbar-nav a.is-active{opacity:1;border-bottom-color:#E11A2B}

/* Tablet */
@media (min-width:768px){.topbar{padding:18px 32px 14px;gap:14px}.topbar-logo{height:28px}.region-pill{font-size:11px;padding:6px 12px;gap:8px}.region-pill .flag{width:8px;height:8px}}

/* Desktop: fixed translucent overlay, centered logo, inline nav, no burger */
@media (min-width:1024px){.topbar{position:fixed;left:0;right:0;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:14px 32px;box-shadow:none;padding-left:max(32px,calc((100% - 1920px) / 2 + 32px));padding-right:max(32px,calc((100% - 1920px) / 2 + 32px))}.topbar-logo{height:26px}}@media (min-width:1000px){.topbar-burger{display:none}.topbar-nav{display:flex}}@media (min-width:1000px) and (max-width:1499.98px){.topbar-logolink{position:static !important;transform:none !important}.topbar-right{flex:1 1 auto}.topbar-right .region-pill{margin-inline:auto}}@media (min-width:1500px){.topbar-logolink{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.topbar-right{flex:1 1 100%;justify-content:space-between}}

/* ── Mobile drawer (slide-in panel) ──────────────────────────── */
.menu-backdrop{position:fixed;inset:0;z-index:9100;background:rgba(0,0,0,.45);opacity:0;transition:opacity .28s ease}
.menu-backdrop[hidden]{display:none}
.menu-backdrop.is-open{opacity:1}
.menu{position:fixed;top:0;right:0;bottom:0;z-index:9200;width:min(320px,86vw);background:#0f0f10;color:#fff;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);box-shadow:-20px 0 40px rgba(0,0,0,.35);font-family:var(--mdtv-font-body,'Inter',-apple-system,BlinkMacSystemFont,sans-serif)}
.menu[hidden]{display:none}
.menu.is-open{transform:translateX(0)}
.menu-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.menu-logo{height:22px;width:auto;display:block}
.menu-close{background:none;border:0;color:#fff;cursor:pointer;font-size:32px;line-height:1;padding:0 4px;opacity:.85}
.menu-close:hover{opacity:1}
.menu-list{list-style:none;margin:0;padding:18px 0 12px;flex:1;display:flex;flex-direction:column;gap:2px}
.menu-list a{display:block;padding:14px 24px;color:#fff;text-decoration:none;font-family:var(--mdtv-font-display,'Antonio',sans-serif);font-style:italic;font-weight:700;font-size:22px;letter-spacing:.005em;border-left:3px solid transparent;transition:background .15s ease,border-color .15s ease,color .15s ease}
.menu-list a:hover,.menu-list a:active,.menu-list a.is-active{background:rgba(225,26,43,.14);border-left-color:var(--red);color:#fff}
body.menu-locked{overflow:hidden}

/* Desktop never shows the drawer */
@media (min-width:1024px){.menu,.menu-backdrop{display:none !important}}

/* ── Sticky CTA «Με ενδιαφέρει» + popover menu (αντικατέστησε το back-to-top
     στις 25/05/2026, μέρος EXP-HOME-01). Wrap (.cta-interest-wrap) κάθεται
     fixed bottom-left· περιέχει το button και το popover menu που πετάγεται
     από πάνω. Σε mobile όλο το widget στα 16px insets, σε desktop στα 24px. */
.cta-interest-wrap{
  position:fixed;left:16px;bottom:16px;z-index:9050;
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  opacity:0;transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
.cta-interest-wrap[hidden]{display:none}
.cta-interest-wrap.is-visible{opacity:1;transform:translateY(0);pointer-events:auto}
/* Όσο υπάρχει ενεργό cookie banner, κρύβουμε το sticky CTA — αλλιώς
   επικαλύπτονται στο bottom σε mobile και ο user νομίζει ότι το ένα
   κάνει το άλλο. Όταν ο user αποδεχθεί/απορρίψει, το cookie-banner.js
   αφαιρεί το body.mdtv-cc-active class και το CTA επανεμφανίζεται. */
body.mdtv-cc-active .cta-interest-wrap{
  opacity:0!important;transform:translateY(8px)!important;pointer-events:none!important;
}
@media (min-width:1024px){.cta-interest-wrap{left:24px;bottom:24px}}
@media print{.cta-interest-wrap{display:none !important}}

/* Το button: pill shape, κόκκινο background, italic Antonio. */
.cta-interest{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 16px 11px 18px;border-radius:999px;
  background:var(--red,#E11A2B);color:#fff;border:0;
  font-family:var(--mdtv-font-display,'Antonio',sans-serif);
  font-style:italic;font-weight:700;font-size:14px;letter-spacing:.01em;
  box-shadow:0 8px 24px rgba(225,26,43,.35), 0 2px 6px rgba(0,0,0,.18);
  cursor:pointer;white-space:nowrap;
  transition:background .15s ease, box-shadow .15s ease;
}
.cta-interest:hover{background:var(--red-dark,#B6121F);box-shadow:0 10px 28px rgba(225,26,43,.45), 0 2px 6px rgba(0,0,0,.22)}
.cta-interest-text{display:inline-block;line-height:1}
.cta-interest-arrow{display:inline-flex;align-items:center;justify-content:center;transition:transform .15s ease}
.cta-interest-arrow svg{width:16px;height:16px;display:block}
.cta-interest:hover .cta-interest-arrow{transform:translateX(2px)}
.cta-interest[aria-expanded="true"] .cta-interest-arrow{transform:rotate(90deg)}
@media (min-width:1024px){
  .cta-interest{padding:13px 20px 13px 22px;font-size:15px;gap:10px}
  .cta-interest-arrow svg{width:18px;height:18px}
}

/* Popover menu — fades in από κάτω, εμφανίζεται ΠΑΝΩ από το button
   (γιατί το wrap κάθεται bottom-left). Card style με 2 options. */
.cta-interest-menu{
  background:#fff;border-radius:14px;
  box-shadow:0 16px 40px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.08);
  padding:6px;min-width:260px;max-width:calc(100vw - 32px);
  display:flex;flex-direction:column;gap:4px;
  opacity:0;transform:translateY(8px) scale(.96);transform-origin:bottom left;
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.cta-interest-menu[hidden]{display:none}
.cta-interest-menu.is-open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}

.cta-interest-opt{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:10px;border:0;background:transparent;
  cursor:pointer;text-align:left;width:100%;
  transition:background .12s ease;
  font-family:var(--mdtv-font-body,'Inter',-apple-system,sans-serif);
}
.cta-interest-opt:hover,.cta-interest-opt:focus-visible{background:rgba(0,0,0,.04);outline:none}
.cta-interest-opt-icon{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.06);color:#333;
}
.cta-interest-opt-icon svg{width:18px;height:18px;display:block}
.cta-interest-opt-text{display:flex;flex-direction:column;gap:2px;line-height:1.25;min-width:0}
.cta-interest-opt-title{font-weight:600;font-size:13.5px;color:#111;font-style:italic}
.cta-interest-opt-meta{font-size:11.5px;color:#666;font-weight:500}

/* Primary option (wizard) — κόκκινο accent στο icon */
.cta-interest-opt-primary .cta-interest-opt-icon{background:var(--red,#E11A2B);color:#fff}
.cta-interest-opt-primary:hover{background:rgba(225,26,43,.06)}
.cta-interest-opt-primary .cta-interest-opt-title{color:var(--red,#E11A2B)}

/* ── Zoho SalesIQ — force bottom-right (override dashboard placement) ──
   Το widget στήνει φωλιά elements (#zsiq_float, .zsiq_floatmain, .siqembed,
   .zsiq-floatbtn, .siqcontainer). Καλύπτουμε όλα τα γνωστά IDs/classes
   ώστε ανεξάρτητα από το release version του Zoho, να κάθεται δεξιά.
   Τα prefix selectors ([id^="zsiq_"], [id^="siqembed"], [id^="siq_chat"])
   πιάνουν και το chat window που εμφανίζεται μόνο μετά το άνοιγμα. */
#zsiq_float, #zsiq_floatmain, .zsiq_floatmain, .zsiq_float,
.siqembed, .siqembed-container, .siqembed-content,
.siq-floatbtn, .zsiq-floatbtn,
.zsiq-launcher, .zsiq_theme1,
.zsiq_cnt, .zsiq_cnt2, #zsiq_maincnt,
.zsiq-window, .siq-embedwindow, .siq-chat-window,
[id^="zsiq_"], [id^="siqembed"], [id^="siq_chat"]{
  right:16px !important;left:auto !important;
}
@media (min-width:1024px){
  #zsiq_float, #zsiq_floatmain, .zsiq_floatmain, .zsiq_float,
  .siqembed, .siqembed-container, .siqembed-content,
  .siq-floatbtn, .zsiq-floatbtn,
  .zsiq-launcher, .zsiq_theme1,
  .zsiq_cnt, .zsiq_cnt2, #zsiq_maincnt,
  .zsiq-window, .siq-embedwindow, .siq-chat-window,
  [id^="zsiq_"], [id^="siqembed"], [id^="siq_chat"]{
    right:24px !important;left:auto !important;
  }
}

/* Print */
@media print{.topbar,.topbar-burger,.topbar-nav,.menu,.menu-backdrop{display:none !important}}