/* ============================================================
   koinoxrista.app — φύλλο στυλ
   ========================================================= */

:root {
  --ink:    #16232e;
  --ink-2:  #24384a;
  --paper:  #eff1ec;
  --card:   #ffffff;
  --line:   #d8ddd6;
  --line-2: #e9ece7;
  --accent: #1d6f5c;
  --accent-dark: #145244;
  --flag:   #b4531f;
  --danger: #a32f2f;
  --muted:  #6c7a80;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(22, 35, 46, .06), 0 4px 14px rgba(22, 35, 46, .05);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

/* Αριθμοί πάντα σε στοίχιση στήλης */
table, .num, input[type="number"], .stat-value, .price {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Κεφαλίδα ---------- */

.topbar {
  background: var(--ink);
  color: #fff;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 30;
}
.topbar-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 56px;
  flex-wrap: wrap;
}
.brand {
  color: #fff;
  font-weight: 600;
  letter-spacing: .02em;
  font-size: 16px;
  white-space: nowrap;
}
.brand:hover { text-decoration: none; opacity: .85; }
.brand-admin::after {
  content: "admin";
  margin-left: 8px;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--accent);
  padding: 2px 6px;
  border-radius: 3px;
  vertical-align: middle;
}
.topnav { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.topnav a {
  color: #c3ccd2;
  padding: 7px 11px;
  border-radius: 6px;
  font-size: 14px;
}
.topnav a:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.topnav a.on { background: rgba(255,255,255,.14); color: #fff; }

/* ---------- Σκελετός σελίδας ---------- */

.wrap { max-width: 1180px; margin: 0 auto; padding: 26px 20px 60px; }

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.page-head h1 { margin: 0; font-size: 23px; font-weight: 650; letter-spacing: -.01em; }
.page-head .sub { color: var(--muted); font-size: 14px; margin-top: 3px; }

.eyebrow {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

/* ---------- Κάρτες ---------- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 18px;
}
.card h2 { margin: 0 0 4px; font-size: 17px; font-weight: 620; }
.card .card-note { color: var(--muted); font-size: 13.5px; margin: 0 0 16px; }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ---------- Κάρτα πολυκατοικίας ----------
   Η αριστερή λωρίδα κωδικοποιεί το μοντέλο θέρμανσης. */

.bld {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
  display: block;
  color: inherit;
}
.bld:hover { text-decoration: none; border-color: var(--accent); }
.bld.mode-none     { border-left-color: #8a99a0; }
.bld.mode-central  { border-left-color: #b4531f; }
.bld.mode-hours    { border-left-color: #1d6f5c; }
.bld.mode-calories { border-left-color: #4b5bab; }
.bld-name { font-size: 17px; font-weight: 620; margin-bottom: 2px; }
.bld-addr { color: var(--muted); font-size: 13.5px; }
.bld-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-2);
  font-size: 13px;
  color: var(--muted);
}

/* ---------- Στατιστικά ---------- */

.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.stat-label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.stat-value { font-size: 26px; font-weight: 650; margin-top: 6px; letter-spacing: -.02em; }
.stat-foot { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* ---------- Σήματα ---------- */

.badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge-trial   { background: #eaf2ff; color: #24487d; border-color: #cfe0f7; }
.badge-active  { background: #e6f3ee; color: var(--accent-dark); border-color: #c7e5da; }
.badge-expired { background: #fbeae3; color: var(--flag); border-color: #f2d3c3; }
.badge-off     { background: #eef0ec; color: var(--muted); border-color: var(--line); }

/* ---------- Φόρμες ---------- */

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 5px; }
.field .hint { font-size: 12.5px; color: var(--muted); margin-top: 5px; }

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="tel"],
select, textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(29, 111, 92, .13);
}
textarea { min-height: 90px; resize: vertical; }
input[disabled], select[disabled] { background: #f4f6f3; color: var(--muted); }

.check { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 9px; font-size: 14.5px; }
.check input { margin-top: 3px; flex-shrink: 0; }

.form-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line-2);
}

/* ---------- Κουμπιά ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.btn:hover { text-decoration: none; background: #f7f8f6; border-color: #c3cabf; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-danger { color: var(--danger); border-color: #e6c9c9; }
.btn-danger:hover { background: #fbf0f0; border-color: var(--danger); }
.btn-sm { padding: 6px 11px; font-size: 13.5px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- Πίνακες ---------- */

.table-wrap { overflow-x: auto; margin: 0 -20px; padding: 0 20px; }
table.data { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.data th {
  text-align: left;
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 650;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.data td { padding: 10px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: #f9faf8; }
table.data td.r, table.data th.r { text-align: right; }
table.data td input, table.data td select { padding: 6px 8px; font-size: 14px; }

/* Χωρίς spinner: σε στενή στήλη έκρυβε τον ίδιο τον αριθμό. */
table.data td input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
table.data td input[type="number"]::-webkit-outer-spin-button,
table.data td input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---------- Ειδοποιήσεις ---------- */

.note {
  border-radius: 8px;
  padding: 12px 15px;
  margin-bottom: 16px;
  font-size: 14.5px;
  border: 1px solid;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.note-ok    { background: #e9f4ef; border-color: #c2e0d4; color: #17513f; }
.note-error { background: #fbeded; border-color: #eccccc; color: #8c2a2a; }
.note-warn  { background: #fdf3e8; border-color: #f0d9bd; color: #8a4415; }
.note-info  { background: #edf2fa; border-color: #cfdcf0; color: #274871; }
.note strong { font-weight: 650; }

.empty {
  text-align: center;
  padding: 46px 20px;
  color: var(--muted);
}
.empty h3 { margin: 0 0 6px; color: var(--ink); font-size: 17px; }
.empty p { margin: 0 0 18px; font-size: 14.5px; }

/* ---------- Σελίδες εισόδου ---------- */

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 18px;
  background: linear-gradient(180deg, #eff1ec 0%, #e4e8e2 100%);
}
.auth-box { width: 100%; max-width: 420px; }
.auth-brand { text-align: center; margin-bottom: 22px; }
.auth-brand .name { font-size: 21px; font-weight: 650; letter-spacing: -.01em; }
.auth-brand .tag { color: var(--muted); font-size: 14px; margin-top: 3px; }
.auth-foot { text-align: center; margin-top: 18px; font-size: 14px; color: var(--muted); }

/* ---------- Βοηθητικά ---------- */

.muted { color: var(--muted); }
.small { font-size: 13px; }
.mono  { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.mt0 { margin-top: 0; }
.mb0 { margin-bottom: 0; }
.divider { height: 1px; background: var(--line-2); margin: 20px 0; border: 0; }

@media (max-width: 620px) {
  .wrap { padding: 18px 14px 50px; }
  .card { padding: 16px; }
  .table-wrap { margin: 0 -16px; padding: 0 16px; }
  .page-head h1 { font-size: 20px; }
  .topnav { width: 100%; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

@media print {
  .topbar, .form-actions, .btn { display: none !important; }
  body { background: #fff; }
  .card { border: none; box-shadow: none; padding: 0; }
}

/* ============================================================
   ΕΓΓΡΑΦΗ — βήματα και επιλογή μοντέλου
   ========================================================= */

.auth-wide { align-items: flex-start; }
.auth-box-wide { max-width: 720px; }

.step-head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-2);
}
.step-num {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 650;
}

.mode-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.mode-opt {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 8px;
  cursor: pointer;
  background: #fff;
  transition: border-color .12s ease, background .12s ease;
}
.mode-opt:hover { background: #f9faf8; }
.mode-opt.is-off { opacity: .55; cursor: not-allowed; }
.mode-opt input { margin-top: 3px; flex-shrink: 0; }
.mode-opt:has(input:checked) { border-color: var(--accent); background: #f2f8f6; }
.mode-body { display: block; }
.mode-name { display: block; font-weight: 600; font-size: 14.5px; }
.mode-desc { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.mode-opt.mode-none     { border-left-color: #8a99a0; }
.mode-opt.mode-central  { border-left-color: #b4531f; }
.mode-opt.mode-hours    { border-left-color: #1d6f5c; }
.mode-opt.mode-calories { border-left-color: #4b5bab; }

.btn-lg { padding: 12px 24px; font-size: 15.5px; }

gmp-place-autocomplete {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-family: var(--font);
  font-size: 15px;
}

/* ============================================================
   LANDING — απαλή παλέτα, ζεστό φως, ήσυχη τυπογραφία
   ========================================================= */

body.ld {
  --l-ink:     #1b2a33;
  --l-ink-2:   #45585f;
  --l-mist:    #eef3f0;
  --l-sand:    #f8f2e9;
  --l-pine:    #2c7a66;
  --l-pine-d:  #1f5c4c;
  --l-apricot: #cf8f63;
  --l-line:    #dfe6e0;

  --l-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --l-body:    "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  background: #fff;
  color: var(--l-ink);
  font-family: var(--l-body);
  font-size: 16px;
}

body.ld h1, body.ld h2, body.ld h3, body.ld .ld-logo, body.ld .ld-plan-amount {
  font-family: var(--l-display);
  font-weight: 700;
  letter-spacing: -.022em;
}

.ld-in { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.ld-in-narrow { max-width: 780px; }

/* ---------- Πλοήγηση ---------- */

.ld-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(248, 250, 248, .82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background .2s ease;
}
.ld-nav.is-stuck { border-bottom-color: var(--l-line); background: rgba(255,255,255,.9); }

.ld-nav-in {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 26px;
}
.ld-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--l-ink);
  font-size: 17px;
  white-space: nowrap;
}
.ld-logo:hover { text-decoration: none; }
.kx-mark { display: block; }

.ld-logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--l-pine);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}
.ld-links { display: flex; gap: 2px; margin-left: 14px; }
.ld-links a {
  color: var(--l-ink-2);
  font-size: 15px;
  font-weight: 500;
  padding: 8px 13px;
  border-radius: 8px;
}
.ld-links a:hover { color: var(--l-ink); background: rgba(44,122,102,.09); text-decoration: none; }
.ld-actions { margin-left: auto; display: flex; gap: 9px; align-items: center; }

.ld-btn-ghost, .ld-btn-solid, .ld-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 19px;
  border-radius: 9px;
  font-family: var(--l-body);
  font-size: 15px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.ld-btn-ghost { color: var(--l-ink-2); }
.ld-btn-ghost:hover { color: var(--l-ink); background: rgba(27,42,51,.06); text-decoration: none; }
.ld-btn-solid { background: var(--l-pine); color: #fff; box-shadow: 0 1px 2px rgba(31,92,76,.28); }
.ld-btn-solid:hover { background: var(--l-pine-d); color: #fff; text-decoration: none; transform: translateY(-1px); }
.ld-btn-outline { color: var(--l-ink); border-color: #cfd9d2; background: rgba(255,255,255,.7); }
.ld-btn-outline:hover { border-color: var(--l-ink); text-decoration: none; }
.ld-btn-lg { padding: 14px 28px; font-size: 16.5px; }

/* ---------- Hero ---------- */

.ld-hero {
  position: relative;
  padding: 74px 0 0;
  background:
    radial-gradient(900px 520px at 78% 4%, rgba(207,143,99,.16), transparent 66%),
    linear-gradient(168deg, var(--l-mist) 0%, var(--l-sand) 72%, #fdfbf7 100%);
}
.ld-hero-in {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px 78px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;

  /* stretch και όχι center: η δεξιά εικόνα παίρνει όλο το ύψος της
     γραμμής, οπότε δεν μένει κενό από κάτω όταν η αριστερή στήλη
     ψηλώνει με τα έντυπα. */
  align-items: stretch;
}
.ld-hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ld-hero-art {
  display: flex;

  /* Το κάτω άκρο ευθυγραμμισμένο με τις λεζάντες: το αρνητικό περιθώριο
     είναι το ίδιο με αυτό της στοίβας (−52px), ώστε οι δύο στήλες να
     τελειώνουν στην ίδια γραμμή. */
  margin-top: 0;
  margin-bottom: -52px;
}

.ld-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--l-pine-d);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(44,122,102,.18);
  border-radius: 999px;
  padding: 5px 14px 5px 11px;
  margin: 0 0 20px;
}
.ld-eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--l-apricot);
  flex-shrink: 0;
}
.ld-eyebrow.dark { background: rgba(44,122,102,.07); }

.ld-hero h1 {
  margin: 0 0 18px;
  font-size: clamp(34px, 4.6vw, 52px);
  line-height: 1.08;
}
.ld-lead {
  font-size: 18.5px;
  line-height: 1.62;
  color: var(--l-ink-2);
  margin: 0 0 30px;
  max-width: 30em;
}
.ld-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.ld-fineprint { margin: 22px 0 0; font-size: 14.5px; color: #000; }

.ld-hero-text { position: relative; z-index: 2; }

/* ---------- Η εικόνα και το ειδοποιητήριο ---------- */

.ld-hero-art { position: relative; }

.ld-frame {
  position: relative;
  flex: 1;
  border-radius: 26px;
  overflow: hidden;
  background: var(--l-mist);
  box-shadow:
    0 2px 6px rgba(27,42,51,.06),
    0 24px 60px rgba(27,42,51,.14);

  /* Χωρίς σταθερή αναλογία: γεμίζει ό,τι ύψος δίνει η γραμμή. Η εικόνα
     από μέσα κόβεται με object-fit: cover, οπότε δεν παραμορφώνεται
     ούτε αφήνει κενά. */
  min-height: 520px;
}
.ld-frame img, .ld-frame .facade {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ld-doc {
  position: absolute;
  left: -34px;
  bottom: -28px;
  width: 265px;
  background: #fff;
  border-radius: 16px;
  padding: 17px 19px 15px;
  box-shadow: 0 18px 44px rgba(27,42,51,.22);
  font-variant-numeric: tabular-nums;
  animation: docIn .7s cubic-bezier(.22,.9,.3,1) .18s both;
}
@keyframes docIn {
  from { opacity: 0; transform: translateY(16px) rotate(-3deg); }
  to   { opacity: 1; transform: none; }
}
.ld-doc-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--l-line);
}
.ld-doc-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--l-pine-d);
}
.ld-doc-sub { font-size: 12.5px; color: #7b8a8f; margin-top: 3px; }
.ld-doc-apt {
  font-family: var(--l-display);
  font-size: 17px;
  font-weight: 700;
  background: var(--l-mist);
  border-radius: 9px;
  padding: 3px 11px;
  line-height: 1.35;
}
.ld-doc-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13.5px; }
.ld-doc-table td { padding: 5px 0; color: var(--l-ink-2); }
.ld-doc-table td.r { text-align: right; color: var(--l-ink); font-weight: 500; }
.ld-doc-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--l-line);
}
.ld-doc-total span { font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: #7b8a8f; }
.ld-doc-total strong { font-family: var(--l-display); font-size: 21px; }

/* ---------- Λωρίδα αριθμών ---------- */

.ld-strip { border-top: 1px solid rgba(27,42,51,.07); background: rgba(255,255,255,.5); }
.ld-strip-in {
  max-width: 1120px;
  margin: 0 auto;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  text-align: center;
}
.ld-strip-in > div { display: flex; flex-direction: column; gap: 3px; }
.ld-strip-in strong {
  display: block;
  font-family: var(--l-display);

  /* clamp και όχι σταθερό: οι τιμές δεν είναι πια μόνο νούμερα.
     Το «0 €» θέλει άλλο πλάτος από το «10 λεπτά». */
  font-size: clamp(21px, 2.1vw, 27px);
  color: var(--l-pine-d);
  line-height: 1.08;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.ld-strip-in span { display: block; margin-top: 4px; }
.ld-strip-in span { font-size: 13.5px; color: #7b8a8f; }

/* ---------- Ενότητες ---------- */

.ld-sec { padding: 44px 0; }
.ld-sec-alt { background: linear-gradient(180deg, #fbfcfb 0%, var(--l-mist) 100%); }
.ld-sec h2 { margin: 0 0 14px; font-size: clamp(25px, 3vw, 34px); line-height: 1.18; }
.ld-sec-lead { font-size: 17px; color: var(--l-ink-2); max-width: 52em; margin: 0 0 40px; line-height: 1.65; }

/* ---------- Μοντέλα ---------- */

.ld-models { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); }
.ld-model {
  position: relative;
  background: #fff;
  border: 1px solid var(--l-line);
  border-radius: 18px;
  padding: 24px 22px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ld-model:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(27,42,51,.09); }
/* Το εικονίδιο πάνω από τον τίτλο, σε στρογγυλεμένο πλαίσιο με το
   χρώμα του μοντέλου — έτσι ξεχωρίζουν τα τέσσερα με μια ματιά. */
.ld-model-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  font-size: 18px;
  margin-bottom: 16px;
  transition: transform .2s ease;
}
.ld-model:hover .ld-model-ic { transform: scale(1.06) rotate(-3deg); }
.ld-model h3 { margin: 0 0 9px; font-size: 17px; line-height: 1.34; letter-spacing: -.012em; }
.ld-model p { margin: 0 0 16px; font-size: 14.5px; color: var(--l-ink-2); line-height: 1.55; }
.ld-model.mode-none     .ld-model-ic { background: rgba(143,162,168,.16); color: #5e7076; }
.ld-model.mode-central  .ld-model-ic { background: rgba(207,143,99,.18);  color: #a4691f; }
.ld-model.mode-hours    .ld-model-ic { background: rgba(44,122,102,.14);  color: var(--l-pine-d); }
.ld-model.mode-calories .ld-model-ic { background: rgba(108,126,192,.16); color: #4c5da3; }

.ld-tag {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 999px;
  background: #eef1ee;
  color: #7b8a8f;
}
.ld-tag.is-on { background: rgba(44,122,102,.11); color: var(--l-pine-d); }

/* ---------- Δυνατότητες ---------- */

.ld-features {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(252px, 1fr));
}
.ld-feat {
  background: #fff;
  border: 1px solid var(--l-line);
  border-radius: 15px;
  padding: 19px 21px;
}
.ld-feat.is-core { background: linear-gradient(160deg, #fff 0%, #f2f7f4 100%); border-color: rgba(44,122,102,.2); }
.ld-feat-name { font-weight: 600; font-size: 15.5px; margin-bottom: 5px; }
.ld-feat-desc { font-size: 14px; color: var(--l-ink-2); line-height: 1.55; }

/* ---------- Βήματα ---------- */

.ld-how { display: grid; gap: 44px; align-items: center; }
.ld-how.has-photo { grid-template-columns: 1fr .82fr; }
.ld-how-photo { border-radius: 22px; overflow: hidden; box-shadow: 0 18px 44px rgba(27,42,51,.13); }
.ld-how-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.ld-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.ld-steps li { display: flex; gap: 17px; align-items: flex-start; }
.ld-step-n {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(44,122,102,.1);
  color: var(--l-pine-d);
  font-family: var(--l-display);
  font-weight: 700;
  font-size: 16px;
}
.ld-steps h3 { margin: 6px 0 6px; font-size: 17.5px; line-height: 1.35; }
.ld-steps p { margin: 0; font-size: 15px; color: var(--l-ink-2); line-height: 1.6; }

/* ---------- Πλάνα ---------- */

.ld-plans { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.ld-plan {
  position: relative;
  background: #fff;
  border: 1px solid var(--l-line);
  border-radius: 20px;
  padding: 30px 26px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ld-plan:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(27,42,51,.1); }
.ld-plan.is-featured {
  border-color: var(--l-pine);
  box-shadow: 0 14px 40px rgba(31,92,76,.14);
}
.ld-plan-badge {
  position: absolute;
  top: -13px;
  left: 26px;
  background: var(--l-pine);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 13px;
  border-radius: 999px;
}
.ld-plan h3 { margin: 4px 0 14px; font-size: 20px; }
.ld-plan-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.ld-plan-pre { font-size: 14px; color: #7b8a8f; }
.ld-plan-amount { font-size: 38px; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.ld-plan-per { font-size: 14px; color: #7b8a8f; }
.ld-plan-desc { font-size: 14.5px; color: var(--l-ink-2); line-height: 1.55; margin: 0 0 14px; }
.ld-plan-cap {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--l-pine-d);
  background: rgba(44,122,102,.09);
  border-radius: 9px;
  padding: 8px 13px;
  margin: 0 0 18px;
}
.ld-plan-list { list-style: none; margin: 0 0 20px; padding: 0; }
.ld-plan-list li {
  font-size: 14.5px;
  padding: 7px 0 7px 26px;
  position: relative;
  border-bottom: 1px solid #eef1ee;
}
.ld-plan-list li:last-child { border-bottom: none; }
.ld-plan-list li::before { position: absolute; left: 0; top: 7px; font-weight: 700; }
.ld-plan-list li.yes::before { content: "✓"; color: var(--l-pine); }
.ld-plan-list li.no { color: #a4b0b2; }
.ld-plan-list li.no::before { content: "–"; color: #c8d1cd; }
.ld-plan-tiers { margin: 0 0 20px; font-size: 14px; }
.ld-plan-tiers summary { cursor: pointer; color: var(--l-pine-d); font-weight: 600; }
.ld-plan-tiers table { width: 100%; margin-top: 11px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ld-plan-tiers td { padding: 6px 0; border-bottom: 1px solid #eef1ee; color: var(--l-ink-2); }
.ld-plan-tiers td.r { text-align: right; }
.ld-plan-cta { width: 100%; }
.ld-pay-note { margin: 30px 0 0; font-size: 14.5px; color: #7b8a8f; text-align: center; }

/* ---------- FAQ ---------- */

.ld-faq details {
  border: 1px solid var(--l-line);
  border-radius: 14px;
  background: #fff;
  margin-bottom: 10px;
  transition: border-color .18s ease;
}
.ld-faq details[open] { border-color: rgba(44,122,102,.35); }
.ld-faq summary {
  cursor: pointer;
  padding: 17px 52px 17px 20px;
  font-size: 16.5px;
  font-weight: 600;
  list-style: none;
  position: relative;
}
.ld-faq summary::-webkit-details-marker { display: none; }
.ld-faq summary::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 25px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--l-pine);
  border-bottom: 2px solid var(--l-pine);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.ld-faq details[open] summary::after { transform: rotate(-135deg); top: 28px; }
.ld-faq p { margin: 0 20px 18px; font-size: 15.5px; color: var(--l-ink-2); line-height: 1.65; }

/* ---------- Τελικό CTA ---------- */

.ld-final {
  padding: 84px 0;
  text-align: center;
  background:
    radial-gradient(700px 340px at 50% 0%, rgba(207,143,99,.18), transparent 70%),
    linear-gradient(180deg, var(--l-sand) 0%, var(--l-mist) 100%);
}
.ld-final h2 { margin: 0 0 12px; font-size: clamp(24px, 3vw, 32px); }
.ld-final p { margin: 0 0 28px; color: var(--l-ink-2); font-size: 17px; }

/* ---------- Υποσέλιδο ---------- */

.ld-foot { background: var(--l-ink); color: #97a7ac; padding: 40px 0; font-size: 14.5px; }
.ld-foot-in { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.ld-foot .ld-logo { color: #fff; margin-bottom: 8px; }
.ld-foot .kx-mark { display: block; }

.ld-logo-mark { background: rgba(255,255,255,.16); }
.ld-foot p { margin: 0; }
.ld-foot-links { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.ld-foot-links a { color: #b9c6ca; }
.ld-foot-links a:hover { color: #fff; }

/* ---------- Εμφάνιση με το scroll ---------- */

.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s cubic-bezier(.22,.9,.3,1); }

@media (max-width: 900px) {
  .ld-hero-in { grid-template-columns: 1fr; gap: 46px; padding-bottom: 60px; }
  .ld-hero { padding-top: 48px; }
  .ld-hero-art { max-width: 460px; margin: 0 auto; }
  .ld-hero-in { align-items: center; }
  .ld-hero-art { margin-top: 0; margin-bottom: 0; }
  .ld-frame { min-height: 0; aspect-ratio: 4 / 5; }
  .ld-doc { left: -10px; }
  .ld-how.has-photo { grid-template-columns: 1fr; }
  .ld-links { display: none; }
  .ld-sec { padding: 62px 0; }
}

@media (max-width: 560px) {
  .ld-doc { left: auto; right: -8px; bottom: -22px; width: 224px; padding: 14px 16px 12px; }
  .ld-strip-in { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; }
  .ld-hero-art { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ld-doc { animation: none; }
  .reveal { opacity: 1; transform: none; }
  .ld-model:hover, .ld-plan:hover, .ld-btn-solid:hover { transform: none; }
}

/* ============================================================
   ΕΝΤΥΠΑ ΠΕΡΙΟΔΟΥ — γενική κατάσταση, ειδοποιητήριο, απόδειξη
   ========================================================= */

.doc-body {
  background: #e7eae5;
  margin: 0;
  padding: 0 0 40px;
  --ds-ink: #16232e;
  --ds-line: #cfd6cd;
  --ds-soft: #6d7a80;
  --ds-accent: #1d6f5c;
  --ds-flag: #b4531f;
}

/* ---------- Μπάρα εργαλείων ---------- */

.doc-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--ds-ink);
  color: #fff;
  padding: 9px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.doc-tabs { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.doc-tabs a, .doc-tabs span {
  color: #b7c3c9;
  font-size: 14px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 7px;
}
.doc-tabs a:hover { background: rgba(255, 255, 255, .1); color: #fff; text-decoration: none; }
.doc-tabs .on { background: var(--ds-accent); color: #fff; font-weight: 600; }
.doc-bar .btn { margin-left: 6px; }

/* ---------- Το φύλλο ---------- */

.sheet {
  background: #fff;
  overflow-x: hidden;
  /* Πραγματικές διαστάσεις Α4, ώστε η οθόνη να δείχνει ό,τι θα τυπωθεί.
     Χωρίς το min-height, το φύλλο μάζευε στο ύψος του περιεχομένου και
     έμοιαζε σχεδόν τετράγωνο. */
  width: 210mm;
  min-height: 297mm;
  margin: 22px auto;
  padding: 14mm 15mm;
  box-shadow: 0 3px 16px rgba(22, 35, 46, .16);
  font-variant-numeric: tabular-nums;
  color: var(--ds-ink);
  font-size: 13px;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
}

/* Το υποσέλιδο κάθεται στο κάτω μέρος της σελίδας, όχι κάτω από το κείμενο. */
.sheet > .nt-foot, .sheet > .gs-foot { margin-top: auto; }

/* ============================================================
   ΓΕΝΙΚΗ ΚΑΤΑΣΤΑΣΗ
   ========================================================= */

.gs-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding-bottom: 11px;
  border-bottom: 2.5px solid var(--ds-ink);
}
.gs-kicker {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ds-accent);
}
.gs-head h1 { margin: 4px 0 2px; font-size: 20px; font-weight: 660; letter-spacing: -.016em; }
.gs-addr { font-size: 12.5px; color: var(--ds-soft); }

.gs-period { text-align: right; flex-shrink: 0; }
.gs-period-title { font-size: 16px; font-weight: 660; }
.gs-period-range { font-size: 12.5px; color: var(--ds-soft); margin-top: 1px; }
.gs-period-meta { font-size: 11px; color: var(--ds-soft); margin-top: 4px; }

.gs-sec { margin-top: 16px; }
.gs-sec h2 {
  margin: 0 0 7px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ds-soft);
  font-weight: 650;
}

.gs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  border: 2px solid var(--ds-ink);
}
.gs-table th {
  text-align: left;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ds-soft);
  font-weight: 650;
  padding: 6px 8px;
  background: #f7f9f6;
  border-bottom: 2px solid var(--ds-ink);
  border-right: 1px solid #dfe4dd;
}
.gs-table th:last-child { border-right: none; }
.gs-table th.r, .gs-table td.r { text-align: right; }
.gs-table td {
  padding: 5px 8px;
  border-bottom: 1px solid #dfe4dd;
  border-right: 1px solid #dfe4dd;
}
.gs-table td:last-child { border-right: none; }
.gs-table td.dim { color: var(--ds-soft); font-size: 11.5px; }
.gs-table td.b { font-weight: 650; }
.gs-table tfoot td {
  border-bottom: none;
  border-top: 2px solid var(--ds-ink);
  padding: 8px;
  font-weight: 700;
  background: #eef2ec;
}
.gs-table-sm { font-size: 11.5px; margin-top: 8px; }
/* Ο πίνακας κατανομής πρέπει να χωράει ΠΑΝΤΑ μέσα στο φύλλο.
   Το table-layout: fixed εμποδίζει μια μακριά λέξη να τον διευρύνει. */
.gs-alloc {
  /* Ίδιο με τον πίνακα δαπανών (.gs-table): τα ονόματα και τα ποσά
     έβγαιναν αισθητά μικρότερα από το μπλοκ ακριβώς από πάνω. */
  font-size: 12.5px;
  table-layout: fixed;
  width: 100%;
}
.gs-alloc td {
  padding: 4px 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Οι κεφαλίδες αναδιπλώνονται αντί να κόβονται: μικρότερα γράμματα,
   δύο σειρές αν χρειαστεί, ολόκληρη η λέξη. */
.gs-alloc th {
  padding: 4px 5px 5px;
  font-size: 11px;
  letter-spacing: .01em;
  line-height: 1.25;
  white-space: normal;
  vertical-align: bottom;
  hyphens: auto;
}

/* Ποσοστά και όχι pixel: ο αριθμός των αριθμητικών στηλών αλλάζει
   ανά πολυκατοικία, οπότε ό,τι περισσεύει μοιράζεται εξίσου σε αυτές
   αντί να το ρουφάει η στήλη του ονόματος. */
.gs-alloc th:first-child, .gs-alloc td:first-child { width: 6%; }
/* Η στήλη του ιδιοκτήτη στο ίδιο μέγεθος με τις υπόλοιπες.

   Ήταν 9,5px ενώ ο πίνακας είναι 12,5 — τα ονόματα έβγαιναν πολύ
   μικρότερα από τα ποσά δίπλα τους. Το πλάτος μένει, ώστε να μη
   στριμωχτούν οι στήλες των ποσών. */
.gs-alloc th:nth-child(2), .gs-alloc td:nth-child(2) { width: 19%; }
.gs-alloc tfoot td { padding: 6px 5px; }

.gs-fuel {
  background: #f6f8f5;
  border: 1px solid var(--ds-line);
  border-radius: 5px;
  padding: 10px 12px;
}
.gs-fuel-calc {
  display: flex;
  gap: 7px;
  align-items: baseline;
  flex-wrap: wrap;
  font-size: 13.5px;
}
.gs-fuel-calc em { font-style: normal; color: var(--ds-soft); }
.gs-fuel-calc strong { font-weight: 680; }

.gs-note {
  margin: 14px 0 0;
  font-size: 10.5px;
  color: var(--ds-soft);
  line-height: 1.5;
  padding-top: 8px;
  border-top: 1px solid #eceee9;
}
.gs-msg {
  margin-top: 12px;
  padding: 9px 12px;
  background: #f4f6f2;
  border-left: 3px solid var(--ds-accent);
  font-size: 12.5px;
}

.gs-foot {
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px solid var(--ds-line);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  font-size: 12px;
}
.gs-lbl {
  display: inline-block;
  min-width: 118px;
  color: var(--ds-soft);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.gs-sign { text-align: center; flex-shrink: 0; }
.gs-sign-line { border-top: 1px solid var(--ds-ink); padding-top: 4px; min-width: 165px; }
.gs-issued { font-size: 10.5px; color: var(--ds-soft); margin-top: 3px; }

/* ============================================================
   ΕΙΔΟΠΟΙΗΤΗΡΙΟ ΚΑΙ ΑΠΟΔΕΙΞΗ
   Ίδιο έντυπο, δύο ρόλοι. Αλλάζει μόνο ο τίτλος και η υπογραφή.
   ========================================================= */

.nt-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding-bottom: 10px;
  border-bottom: 2.5px solid var(--ds-ink);
}
.nt-kicker {
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ds-accent);
}
.nt-head h1 { margin: 4px 0 2px; font-size: 19px; font-weight: 660; letter-spacing: -.016em; }
.nt-addr { font-size: 12.5px; color: var(--ds-soft); }

.nt-apt { text-align: right; flex-shrink: 0; }
.nt-apt-code {
  display: inline-block;
  border: 2.5px solid var(--ds-ink);
  border-radius: 4px;
  padding: 1px 14px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.35;
}
.nt-apt-owner { font-size: 12px; color: var(--ds-soft); margin-top: 4px; max-width: 190px; }

.nt-meta {
  display: flex;
  gap: 60px;
  flex-wrap: wrap;
  padding: 9px 0;
  border-bottom: 1px solid var(--ds-line);
  font-size: 12.5px;
}
.nt-meta span {
  display: block;
  color: var(--ds-soft);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nt-meta strong { font-weight: 640; }

.nt-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.nt-table td { padding: 4px 0; border-bottom: 1px dotted #c9cfc7; }
.nt-table td.r { text-align: right; }
.nt-table tr.nt-sum td {
  border-bottom: none;
  border-top: 1.5px solid var(--ds-ink);
  padding-top: 6px;
  font-weight: 660;
}
.nt-table tr.nt-sub td {
  font-size: 11px;
  color: var(--ds-soft);
  padding: 1px 0 1px 12px;
  border-bottom: none;
}
.nt-table tr.nt-debt td { color: var(--ds-flag); }

.nt-meter {
  margin-top: 10px;
  padding: 7px 10px;
  background: #f4f6f2;
  border-radius: 4px;
  font-size: 12px;
}
.nt-meter span {
  display: block;
  color: var(--ds-soft);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nt-meter strong { font-size: 14px; font-weight: 660; }
.nt-meter em { font-style: normal; color: var(--ds-soft); margin-left: 5px; }

.nt-total {
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--ds-ink);
  color: #fff;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.nt-total span { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.nt-total strong { font-size: 21px; font-weight: 680; }

.nt-words {
  margin-top: 9px;
  padding: 8px 12px;
  border: 1px solid var(--ds-line);
  border-radius: 4px;
  font-size: 12px;
  font-style: italic;
  line-height: 1.45;
  color: #34434b;
}
.nt-words span {
  display: block;
  font-style: normal;
  color: var(--ds-soft);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.nt-msg {
  margin-top: 12px;
  padding: 8px 12px;
  background: #f4f6f2;
  border-left: 3px solid var(--ds-accent);
  font-size: 12px;
}

.nt-foot {
  margin-top: 18px;
  padding-top: 11px;
  border-top: 1px solid var(--ds-line);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  font-size: 12px;
}
.nt-lbl {
  display: block;
  color: var(--ds-soft);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nt-foot em { font-style: normal; color: var(--ds-soft); font-size: 11.5px; }

.nt-sign { text-align: center; flex-shrink: 0; }
.nt-sign .nt-lbl { display: block; margin-bottom: 22px; }
.nt-sign-line { border-top: 1px solid var(--ds-ink); padding-top: 4px; min-width: 165px; }
.nt-issued { font-size: 10.5px; color: var(--ds-soft); margin-top: 3px; }

.nt-paid { margin-bottom: 14px; }
.nt-blank {
  display: block;
  width: 165px;
  border-bottom: 1px solid var(--ds-ink);
  height: 17px;
  margin: 4px auto 0;
}

/* Η απόδειξη ξεχωρίζει με πράσινο, ώστε να μη μπερδεύεται στη στοίβα */
.nt-receipt .nt-head { border-bottom-color: var(--ds-accent); }
.nt-receipt .nt-total { background: var(--ds-accent); }

/* ---------- Σε οθόνη κινητού ----------
   ΠΡΟΣΟΧΗ: «screen and». Το ωφέλιμο πλάτος ενός Α4 είναι ~703px, οπότε
   χωρίς αυτό ο κανόνας έπιανε και στην εκτύπωση και στοίβαζε τις στήλες. */

@media screen and (max-width: 780px) {
  .sheet { width: auto; min-height: 0; margin: 14px 12px; padding: 18px 16px; display: block; }
  .gs-head, .nt-head { flex-direction: column; gap: 12px; }
  .gs-period, .nt-apt { text-align: left; }
  .gs-alloc { font-size: 11px; }
}

/* ---------- Εκτύπωση ---------- */

@media print {
  /* ΤΑ ΦΟΝΤΑ ΝΑ ΤΥΠΩΝΟΝΤΑΙ.

     Οι browsers πετούν φόντα και χρώματα στην εκτύπωση για να
     γλιτώσουν μελάνι. Σε ένα ειδοποιητήριο όμως τα γκρι πλαίσια και οι
     εναλλάξ γραμμές ΕΙΝΑΙ η δομή — χωρίς αυτά ο πίνακας γίνεται μια
     αδιάφορη στοίβα αριθμών.

     Τρεις γραφές για κάλυψη όλων: η παλιά του WebKit, η παλιά
     τυποποιημένη, και η σημερινή. */
  * {
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .doc-body { background: #fff; }
  .doc-bar { display: none !important; }
  .sheet {
    width: auto;
    /* Συντηρητικό ύψος. Το ωφέλιμο είναι 297 − 2×12 = 273mm, αλλά οι
       κεφαλίδες/υποσέλιδα του browser τρώνε κι άλλο. Με 240mm η
       υπογραφή πέφτει χαμηλά χωρίς κίνδυνο δεύτερης σελίδας. */
    min-height: 240mm;
    margin: 0;
    padding: 0;
    box-shadow: none;
    page-break-after: always;
    display: flex;
    flex-direction: column;
  }
  .sheet > .nt-foot, .sheet > .gs-foot { margin-top: 18px; }
  .sheet:last-child { page-break-after: auto; }

  /* Ένα φύλλο = μία σελίδα. Χωρίς αυτό, μια γραμμή που δεν χωράει
     σέρνει ολόκληρο το έντυπο σε δεύτερη σελίδα. */
  .sheet { break-inside: avoid; page-break-inside: avoid; }
  .nb, .nb-table, .hb { break-inside: avoid; page-break-inside: avoid; }

  /* Οι κεφαλίδες του πίνακα κατανομής δεν κόβονται ποτέ. */
  .gs-alloc th { white-space: normal !important; }

  /* Ρητά, ώστε καμία άλλη ρύθμιση να μη στοιβάξει τις στήλες. */
  .gs-head, .nt-head { flex-direction: row !important; }
  .gs-period, .nt-apt { text-align: right !important; }

  @page { size: A4; margin: 12mm; }
}

/* ============================================================
   ΚΛΕΙΔΩΜΕΝΕΣ ΔΥΝΑΤΟΤΗΤΕΣ
   ========================================================= */

.feat-card {
  position: relative;
  display: block;
  background: repeating-linear-gradient(
    135deg, #f7f8f6, #f7f8f6 9px, #f2f4f0 9px, #f2f4f0 18px
  );
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  color: var(--muted);
}
.feat-card:hover { text-decoration: none; border-color: var(--accent); background: #f4f8f6; }
.feat-card .bld-name { color: var(--ink); opacity: .72; }
.feat-lock {
  display: inline-block;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--flag);
  background: #fdf3e8;
  border: 1px solid #f0d9bd;
  border-radius: 20px;
  padding: 2px 9px;
  margin-bottom: 9px;
}

.locked-screen { text-align: center; padding: 44px 24px; }
.locked-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--flag);
  background: #fdf3e8;
  border: 1px solid #f0d9bd;
  border-radius: 20px;
  padding: 4px 12px;
  margin-bottom: 14px;
}
.locked-screen h2 { font-size: 22px; margin: 0 0 8px; }
.locked-desc { font-size: 15.5px; color: #4f5e68; margin: 0 auto 10px; max-width: 44em; }
.locked-plan { font-size: 14.5px; color: var(--accent-dark); font-weight: 600; margin: 0 0 22px; }
.locked-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.plan-feats { list-style: none; margin: 0; padding: 0; }
.plan-feats li {
  font-size: 14px;
  padding: 6px 0 6px 24px;
  position: relative;
  border-bottom: 1px solid var(--line-2);
}
.plan-feats li:last-child { border-bottom: none; }
.plan-feats li::before { position: absolute; left: 0; top: 6px; font-weight: 700; }
.plan-feats li.yes::before { content: "✓"; color: var(--accent); }
.plan-feats li.no { color: #9aa6ad; }
.plan-feats li.no::before { content: "–"; color: #c2cbd0; }
.plan-feats li.hl {
  background: #fdf6ec;
  font-weight: 650;
  margin: 0 -8px;
  padding-left: 32px;
  padding-right: 8px;
  border-radius: 5px;
}

/* ============================================================
   ΠΥΛΗ ΙΔΙΟΚΤΗΤΩΝ
   ========================================================= */

.owner-bar { background: var(--accent-dark); }
.brand-tag {
  margin-left: 8px;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(255,255,255,.2);
  padding: 2px 7px;
  border-radius: 3px;
  vertical-align: middle;
}

.owner-period {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 9px;
  background: #fff;
}
.owner-period summary {
  cursor: pointer;
  padding: 13px 16px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.owner-period summary::-webkit-details-marker { display: none; }
.owner-period .op-title { font-weight: 620; font-size: 15.5px; }
.owner-period .op-amount { font-weight: 680; font-variant-numeric: tabular-nums; white-space: nowrap; }
.owner-period[open] summary { border-bottom: 1px solid var(--line-2); }
.owner-period .op-body { padding: 6px 16px 16px; }

/* ---------- Συνεργάτες ---------- */

.partner {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--muted);
  border-radius: 9px;
  padding: 16px 18px;
}
.partner.is-urgent { border-left-color: var(--flag); background: #fffaf6; }
.partner-flag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--flag);
  margin-bottom: 7px;
}
.partner-cat {
  font-size: 11.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 650;
}
.partner-name { font-size: 16.5px; font-weight: 640; margin-top: 2px; }
.partner-note { font-size: 13.5px; color: var(--muted); margin-top: 3px; }
.partner-links { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; }
.partner-links a { font-size: 15px; font-weight: 600; }

/* ============================================================
   ΕΓΓΡΑΦΗ — επιλογή διαμερισμάτων και ζωντανή τιμή
   ========================================================= */

.apt-picker {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.apt-picker input[type="range"] {
  flex: 1 1 240px;
  min-width: 200px;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 50%, var(--line) 50%);
  background: var(--line);
  outline: none;
  padding: 0;
  border: 0;
}
.apt-picker input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid #fff;
  box-shadow: 0 1px 5px rgba(22,35,46,.28);
  cursor: pointer;
}
.apt-picker input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid #fff;
  box-shadow: 0 1px 5px rgba(22,35,46,.28);
  cursor: pointer;
}
.apt-picker input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.apt-count {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-shrink: 0;
}
.apt-count input[type="number"] {
  width: 88px;
  font-size: 26px;
  font-weight: 680;
  text-align: center;
  padding: 4px 6px;
  letter-spacing: -.02em;
}
.apt-count span { font-size: 14px; color: var(--muted); }

/* ---------- Πίνακας τιμών ---------- */

.price-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 20px;
}
.price-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.price-note { font-size: 13.5px; color: var(--accent-dark); font-weight: 600; }

.price-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.price-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px 15px;
  transition: border-color .12s ease;
}
.price-card.is-pick { border-color: var(--accent); border-width: 2px; padding: 12px 14px; }
.price-card.is-out { opacity: .5; }

.pc-name { font-size: 14.5px; font-weight: 640; margin-bottom: 6px; }
.pc-badge {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: #e6f3ee;
  color: var(--accent-dark);
  border-radius: 20px;
  padding: 2px 7px;
  vertical-align: middle;
  white-space: nowrap;
}
.pc-price {
  font-size: 23px;
  font-weight: 680;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.pc-price span { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.pc-sub  { font-size: 15px; color: var(--muted); margin-top: 2px; }
.pc-out  { font-size: 13.5px; color: var(--muted); padding: 5px 0; }
.pc-feat {
  font-size: 12px;
  color: var(--muted);
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--line-2);
}

@media (max-width: 520px) {
  .apt-picker { gap: 12px; }
  .apt-count input[type="number"] { font-size: 22px; width: 76px; }
}

/* ---------- Ανέβασμα εικόνων στο admin ---------- */

.img-slots {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.img-slot {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background: #fff;
}
.img-preview {
  flex-shrink: 0;
  width: 104px;
  height: 104px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-preview.is-empty {
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  padding: 8px;
}
.img-meta { min-width: 0; flex: 1; }
.img-name { font-weight: 640; font-size: 15px; }
.img-hint { font-size: 13px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.img-meta input[type="file"] { font-size: 13px; max-width: 100%; }

/* ---------- Κουμπί και γέφυρα προς τις εταιρείες ---------- */

.ld-btn-biz {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 17px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 600;
  color: var(--l-pine-d);
  background: rgba(44,122,102,.1);
  border: 1px solid rgba(44,122,102,.2);
  transition: background .15s ease, border-color .15s ease;
}
.ld-btn-biz:hover { background: rgba(44,122,102,.17); border-color: rgba(44,122,102,.4); text-decoration: none; }

.ld-biz {
  padding: 54px 0;
  background: linear-gradient(120deg, #f3f7f4 0%, #fbf6ef 100%);
  border-top: 1px solid var(--l-line);
  border-bottom: 1px solid var(--l-line);
}
.ld-biz-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.ld-biz h2 { margin: 0 0 8px; font-size: clamp(21px, 2.4vw, 27px); }
.ld-biz p  { margin: 0; color: var(--l-ink-2); font-size: 16px; max-width: 40em; line-height: 1.6; }

/* Η σελίδα εταιρειών: πιο ψυχρός τόνος για να ξεχωρίζει */
body.ld-b2b .ld-hero {
  background:
    radial-gradient(880px 500px at 80% 2%, rgba(44,122,102,.16), transparent 66%),
    linear-gradient(168deg, #eaf1ee 0%, #f3f5f1 68%, #fdfbf7 100%);
}
body.ld-b2b .ld-final {
  background:
    radial-gradient(700px 340px at 50% 0%, rgba(44,122,102,.16), transparent 70%),
    linear-gradient(180deg, #f4f7f4 0%, #e9f0ec 100%);
}

.ld-tier-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  margin: 4px 0 0;
}
.ld-tier-table th {
  text-align: left;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #7b8a8f;
  font-weight: 650;
  padding: 0 0 7px;
  border-bottom: 1px solid var(--l-line);
}
.ld-tier-table th.r, .ld-tier-table td.r { text-align: right; }
.ld-tier-table td { padding: 7px 0; border-bottom: 1px solid #eef1ee; }
.ld-tier-table td.muted { color: #7b8a8f; }

/* ---------- Προτροπή αναβάθμισης σε εταιρικό ---------- */

.upsell {
  background: linear-gradient(120deg, #f3f7f4 0%, #fbf6ef 100%);
  border-color: #d8e2da;
}
.upsell-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
}
.upsell-body p { color: var(--muted); font-size: 14.5px; line-height: 1.6; max-width: 46em; }
.upsell-body h2 { font-size: 19px; margin-bottom: 6px; }

/* ============================================================
   ΚΕΛΥΦΟΣ ΜΕ ΠΛΑΪΝΟ ΜΕΝΟΥ
   ========================================================= */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  z-index: 100;
}
.skip:focus { left: 10px; top: 10px; }

.side-toggle { position: absolute; opacity: 0; pointer-events: none; }

.shell { display: flex; min-height: 100vh; }

/* ---------- Η μπάρα ---------- */

.side {
  width: 258px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #1a2933 0%, #16232e 42%, #121d26 100%);
  color: #a9b8c0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.16) transparent;
}
.side::-webkit-scrollbar { width: 6px; }
.side::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 6px; }

/* ---------- Λογότυπο ---------- */

.side-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 20px 18px 16px;
}
.side-logo { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.side-logo:hover { text-decoration: none; }
.side-logo-text {
  color: #fff;
  font-weight: 660;
  font-size: 15.5px;
  letter-spacing: -.012em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.side-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(140deg, #2f8a72 0%, #1d6f5c 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(29,111,92,.4);
}
.side-close { display: none; cursor: pointer; color: #8397a3; padding: 6px; border-radius: 8px; }
.side-close { font-size: 17px; line-height: 1; }
.side-close:hover { color: #fff; background: rgba(255,255,255,.08); }

/* ---------- Επιλογή πολυκατοικίας ---------- */

.side-picker { padding: 0 12px 12px; }
.side-picker select {
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  font-size: 14px;
  padding: 10px 11px;
  border-radius: 10px;
}
.side-picker select:focus { border-color: var(--accent); box-shadow: none; }
.side-picker option { color: var(--ink); }

.side-one {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 11px;
  padding: 11px 12px;
}
.side-one .si { width: 19px; text-align: center; font-size: 14px; color: #7f939f; flex-shrink: 0; }
.side-one-txt { min-width: 0; }
.side-one-name {
  display: block;
  color: #fff;
  font-weight: 620;
  font-size: 14px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.side-one-addr {
  display: block;
  font-size: 12px;
  color: #7f939f;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Σύνδεσμοι ---------- */

.side-nav { padding: 4px 10px 16px; flex: 1; }

.side-group {
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #64798a;
  font-weight: 700;
  padding: 18px 12px 7px;
}

.side-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  color: #a9b8c0;
  font-size: 14.5px;
  padding: 9px 12px;
  border-radius: 9px;
  margin-bottom: 2px;
  line-height: 1.35;
  transition: background .14s ease, color .14s ease;
}
.side-link .si {
  width: 19px;
  flex-shrink: 0;
  font-size: 14.5px;
  text-align: center;
  opacity: .8;
  transition: opacity .14s ease;
}
.side-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.side-link:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.side-link:hover .si { opacity: 1; }

.side-link.on {
  background: linear-gradient(100deg, rgba(47,138,114,.28) 0%, rgba(47,138,114,.14) 100%);
  color: #fff;
  font-weight: 600;
}
.side-link.on .si { opacity: 1; color: #5cbfa2; }
.side-link.on::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: #5cbfa2;
}

.side-link.is-locked { color: #6f8391; }
.side-link.is-locked .si { opacity: .5; }
.side-link.is-locked:hover { color: #a9b8c0; }
.side-lock { font-size: 11px; flex-shrink: 0; opacity: .6; }

.side-out { margin-top: 4px; color: #8b9aa4; }
.side-out:hover { color: #e7a3a3; background: rgba(200,90,90,.12); }

/* ---------- Υποσέλιδο ---------- */

.side-foot { padding: 12px; border-top: 1px solid rgba(255,255,255,.07); }
.side-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  min-width: 0;
}
.side-user:hover { background: rgba(255,255,255,.06); text-decoration: none; }
.side-avatar {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: #cfe0d7;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.side-user-txt { min-width: 0; }
.side-user-name {
  display: block;
  color: #fff;
  font-size: 13.5px;
  font-weight: 620;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.side-user-mail {
  display: block;
  font-size: 11.5px;
  color: #7f939f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Περιοχή περιεχομένου ---------- */

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topline {
  display: none;
  box-shadow: 0 1px 0 rgba(22,35,46,.05);
  align-items: center;
  gap: 14px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 0 16px;
  min-height: 54px;
  position: sticky;
  top: 0;
  z-index: 25;
}
.topline-title { font-weight: 620; font-size: 15.5px; }

.side-open {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  cursor: pointer;
  color: var(--ink);
}
.side-open { font-size: 19px; }
.side-open:hover { background: var(--paper); }

.side-veil { display: none; }

/* Πλήρες πλάτος: ο πίνακας διαμερισμάτων έχει πολλές στήλες και
   κάθε pixel μετράει. Το όριο ανάγνωσης το βάζουν οι ίδιες οι κάρτες. */
body.has-side .wrap { max-width: none; width: 100%; margin: 0; padding: 24px 24px 60px; }

/* Το κείμενο δεν πρέπει να απλώνεται άπειρα — μόνο οι πίνακες. */
body.has-side .card > h2,
body.has-side .card > .card-note,
body.has-side .page-head .sub { max-width: none; }

/* Σε μεσαίες οθόνες η μπάρα στενεύει, ώστε να κερδίσει ο πίνακας. */
@media (min-width: 901px) and (max-width: 1400px) {
  .side { width: 216px; }
  .side-link { font-size: 14px; padding: 8px 10px; gap: 9px; }
  .side-link .si { width: 18px; font-size: 14px; }
  body.has-side .wrap { padding: 22px 16px 56px; }
}

@media (max-width: 900px) {
  .side {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 0 0 40px rgba(0,0,0,.3);
  }
  .side-toggle:checked ~ .shell .side { transform: none; }
  .side-link { padding: 11px 12px; font-size: 15px; }
  .side-toggle:checked ~ .shell .side-veil {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(22,35,46,.45);
    z-index: 55;
  }
  .side-close { display: block; }
  .topline { display: flex; }
  .side-open { display: flex; }
  body.has-side .wrap { padding: 18px 15px 50px; }
}

@media (prefers-reduced-motion: reduce) {
  .side { transition: none; }
}

/* ============================================================
   ΟΔΗΓΟΣ ΞΕΚΙΝΗΜΑΤΟΣ
   ========================================================= */

.ob {
  background: linear-gradient(135deg, #f2f7f4 0%, #fbf6ef 100%);
  border: 1px solid #d8e2da;
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 20px;
}
.ob-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.ob-head h2 { margin: 4px 0 0; font-size: 20px; font-weight: 650; letter-spacing: -.015em; }

.ob-ring {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background:
    conic-gradient(var(--accent) calc(var(--pct) * 1%), #dde5df 0);
}
.ob-ring span {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent-dark);
}

.ob-steps { list-style: none; margin: 0; padding: 0; }
.ob-steps li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 8px;
}
.ob-steps li.is-next { border-color: var(--accent); box-shadow: 0 2px 10px rgba(29,111,92,.12); }
.ob-steps li.is-done { background: rgba(255,255,255,.55); border-color: #e2e8e3; }
.ob-steps li.is-todo { opacity: .72; }

.ob-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  background: #eef1ee;
  color: var(--muted);
}
.ob-steps li.is-done .ob-num { background: var(--accent); color: #fff; }
.ob-steps li.is-next .ob-num { background: var(--ink); color: #fff; }

.ob-body { flex: 1; min-width: 0; }
.ob-title { font-weight: 620; font-size: 15px; }
.ob-steps li.is-done .ob-title { color: var(--muted); font-weight: 500; }
.ob-desc { font-size: 13.5px; color: var(--muted); margin-top: 2px; line-height: 1.45; }

.ob-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid #dde5df;
  font-size: 14.5px;
  color: var(--muted);
}

/* ---------- Λεπτή μπάρα στις υπόλοιπες σελίδες ---------- */

.ob-bar {
  display: flex;
  align-items: center;
  gap: 13px;
  flex-wrap: wrap;
  background: #f2f7f4;
  border: 1px solid #cfe0d7;
  border-radius: 9px;
  padding: 11px 15px;
  margin-bottom: 18px;
  font-size: 14px;
}
.ob-bar-count {
  flex-shrink: 0;
  background: var(--accent);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  font-variant-numeric: tabular-nums;
}
.ob-bar-text { flex: 1; min-width: 200px; color: #3f5158; }

@media (max-width: 620px) {
  .ob { padding: 18px 16px; }
  .ob-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .ob-steps li { flex-wrap: wrap; }
  .ob-steps li .btn { width: 100%; justify-content: center; margin-top: 4px; }
  .ob-foot .btn { width: 100%; justify-content: center; }
}

/* ---------- Τύπος υπολογισμού και επεξηγήσεις ---------- */

.formula {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 0 0 14px;
  font-size: 16px;
  text-align: center;
  line-height: 1.9;
  overflow-x: auto;
  white-space: nowrap;
}
.formula sub { font-size: .72em; }

ul.legend { list-style: none; margin: 0; padding: 0; }
ul.legend li {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  padding: 7px 0 7px 0;
  border-bottom: 1px solid var(--line-2);
}
ul.legend li:last-child { border-bottom: none; }
ul.legend b {
  display: inline-block;
  min-width: 26px;
  color: var(--ink);
  font-weight: 700;
}

/* ---------- Υπότιτλοι στηλών και ζωντανό eᵢ ---------- */

table.data th.nocaps { text-transform: none; font-size: 13px; letter-spacing: 0; }
table.data th .th-sub {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: none;
  color: #9aa6ad;
  margin-top: 2px;
}

.cell-ei {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- Πτυσσόμενες επεξηγήσεις ---------- */

.help-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }

details.help {
  flex: 1 1 280px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}
details.help[open] { border-color: #cfe0d7; background: #fbfdfc; }
details.help summary {
  cursor: pointer;
  list-style: none;
  padding: 11px 38px 11px 15px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-dark);
  position: relative;
  user-select: none;
}
details.help summary::-webkit-details-marker { display: none; }
details.help summary::before {
  content: "?";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  margin-right: 8px;
  vertical-align: -2px;
}
details.help summary::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 17px;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
details.help[open] summary::after { transform: rotate(-135deg); top: 20px; }
.help-body { padding: 0 15px 14px; font-size: 14px; line-height: 1.6; color: var(--ink-2, #45585f); }
.help-body p { margin: 0 0 10px; }
.help-body .formula { font-size: 15px; }

/* ---------- Στήλη σειράς ---------- */

.ord { display: flex; align-items: center; gap: 6px; }
.ord-grip {
  cursor: grab;
  color: #a9b4b9;
  font-size: 17px;
  line-height: 1;
  padding: 4px 2px;
  border-radius: 5px;
  user-select: none;
  flex-shrink: 0;
}
.ord-grip:hover { color: var(--accent); background: var(--paper); }
.ord-grip:active { cursor: grabbing; }
.ord-num {
  width: 48px;
  min-width: 48px;
  padding: 6px 4px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
table.data tr.is-dragging { opacity: .45; background: #eef4f1; }

.owner-name { font-weight: 500; }

/* Πυκνός πίνακας: πολλές στήλες, λίγος χώρος. */
table.data.table-tight th,
table.data.table-tight td { padding: 8px 6px; }
table.data.table-tight td input,
table.data.table-tight td select { padding: 6px 7px; }

/* Κάτω από αυτό οι στήλες θα άρχιζαν να κόβονται — καλύτερα να κυλάει. */
#aptTable { min-width: 1050px; }
#aptTable td input[type="text"],
#aptTable td input[type="email"] { min-width: 0; }

@media (prefers-reduced-motion: reduce) {
  details.help summary::after { transition: none; }
}

/* ---------- Ένδειξη επιμερισμού κάτω από την κατηγορία ---------- */

.cat-split {
  display: block;
  font-size: 12px;
  color: var(--accent-dark);
  font-weight: 600;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cat-split.is-empty { color: var(--flag); font-weight: 500; }

/* ---------- Κλειδωμένη γραμμή μετρητή ---------- */

tr.row-shut { background: #f7f8f6; }
tr.row-shut td input {
  background: #f0f2ef;
  color: var(--muted);
  border-color: var(--line-2);
  cursor: not-allowed;
}

/* ============================================================
   ΔΕΞΑΜΕΝΗ & ΚΑΥΣΙΜΟ
   ========================================================= */

.fuel-top { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.tank-wrap { display: flex; gap: 22px; align-items: stretch; }

.tank {
  position: relative;
  width: 88px;
  min-height: 190px;
  flex-shrink: 0;
  border: 3px solid var(--ink);
  border-radius: 10px 10px 14px 14px;
  background: repeating-linear-gradient(180deg, #f4f6f3, #f4f6f3 11px, #eef1ec 11px, #eef1ec 22px);
  overflow: hidden;
}
.tank-layer { position: absolute; left: 0; right: 0; opacity: .88; }
.tank-mark {
  position: absolute;
  left: -3px;
  right: -3px;
  height: 3px;
  background: var(--ink);
}
.tank-info { flex: 1; min-width: 0; }
.tank-info .stat-value small { font-size: 14px; font-weight: 500; color: var(--muted); }

.layer-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 7px;
  vertical-align: -1px;
}

.fifo {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 6px;
}
.fifo-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 10px;
}
.fifo-head strong { font-size: 21px; font-variant-numeric: tabular-nums; }
.fifo table.data { background: transparent; }

@media (max-width: 620px) {
  .tank-wrap { flex-direction: column; }
  .tank { width: 100%; min-height: 120px; }
}

/* ---------- Ο υπολογισμός της βέργας ---------- */

.fuel-calc {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 18px;
  margin: 4px 0 16px;
}
.fuel-calc.is-neg { border-color: var(--danger); background: #fbf0f0; }

.fc-line {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.fc-line + .fc-line { margin-top: 8px; padding-top: 8px; border-top: 1px dotted var(--line); }
.fc-line em { font-style: normal; color: var(--muted); font-size: 15px; }
.fc-line strong { font-size: 21px; font-weight: 680; color: var(--accent-dark); }
.fc-unit { font-size: 13.5px; color: var(--muted); }
.fc-second { font-size: 15.5px; }
.fc-second strong { font-size: 19px; }

/* ---------- Πεδίο μόνο για ανάγνωση ---------- */

.ro-value {
  padding: 9px 11px;
  border: 1px dashed var(--line);
  border-radius: 7px;
  background: var(--paper);
  font-size: 15px;
  font-weight: 620;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.ro-value span { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 3px; }

/* ---------- Οι παραλαβές της περιόδου ---------- */

.deliv-list { list-style: none; margin: -8px 0 16px; padding: 0; }
.deliv-list li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13.5px;
  padding: 7px 12px;
  border-left: 3px solid var(--accent);
  background: #f4f8f6;
  border-radius: 0 6px 6px 0;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.dl-date { font-weight: 600; min-width: 82px; }
.dl-lt { color: var(--ink); }
.dl-cm { color: var(--accent-dark); font-weight: 650; }
.dl-src { color: var(--muted); font-size: 12.5px; margin-left: auto; }

/* Ένδειξη που μεταφέρθηκε από την προηγούμενη περίοδο */
table.data td input.m-prev.is-carried {
  background: #f2f8f6;
  border-color: #cfe0d7;
  color: var(--accent-dark);
}

/* Επικεφαλίδα στοίβας — μόνο στην οθόνη */
.stack-label {
  width: 210mm;
  margin: 30px auto -6px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6d7a80;
  padding-bottom: 6px;
  border-bottom: 1px solid #cfd6cd;
}
@media screen and (max-width: 780px) { .stack-label { width: auto; margin: 24px 12px -4px; } }
@media print { .stack-label { display: none !important; } }

/* ---------- Υπογραφή πλατφόρμας ----------
   Κολλάει στο κάτω μέρος του φύλλου, με γραμμή που πιάνει όλο το πλάτος
   της σελίδας — γι' αυτό τα αρνητικά περιθώρια ίσα με το padding. */

/* Η γραμμή μένει ΜΕΣΑ στο περιθώριο του φύλλου, όπως η γραμμή κάτω από
   τη διεύθυνση. Το αρνητικό περιθώριο των -15mm την άπλωνε ως τις άκρες
   του χαρτιού και έσπαγε τη στοίχιση με τα υπόλοιπα. */
.doc-brand {
  margin: auto 0 0;
  padding: 9px 0 0;
  border-top: 2px solid var(--ds-ink);
  text-align: center;
  font-size: 10px;
  letter-spacing: .04em;
  color: #8b979d;
}
.doc-brand strong { font-weight: 650; color: #55646b; }
.doc-brand span { color: var(--ds-accent); font-weight: 650; }

/* Το υποσέλιδο δεν σπρώχνεται πια — η υπογραφή αναλαμβάνει το κενό. */
.sheet > .nt-foot, .sheet > .gs-foot { margin-top: 22px; }

/* ---------- Ανάλυση θέρμανσης στο ειδοποιητήριο ---------- */

.nt-heat {
  margin-top: 11px;
  border: 1px solid var(--ds-line);
  border-radius: 5px;
  padding: 9px 12px 8px;
  background: #f7f9f6;
}
.nt-heat-top {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e3e8e1;
}
.nt-heat-top .nt-lbl { flex: 1; margin: 0; }
.nt-heat-top strong { font-size: 19px; font-weight: 700; line-height: 1; }
.nt-heat-top em { font-style: normal; font-size: 12px; color: var(--ds-soft); }

.nt-heat-tbl { width: 100%; border-collapse: collapse; font-size: 11.5px; margin-top: 5px; }
.nt-heat-tbl td { padding: 2px 0; color: #45585f; }
.nt-heat-tbl td.r { text-align: right; font-variant-numeric: tabular-nums; }
.nt-heat-tbl strong { font-weight: 680; color: var(--ds-ink); }

.nt-heat-note {
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px dotted #d3dbd2;
  font-size: 11px;
  color: var(--ds-soft);
}

/* ============================================================
   ΕΙΔΟΠΟΙΗΤΗΡΙΟ — δαπάνες και αναλογία, το ένα κάτω από το άλλο
   ========================================================= */

.nb { margin-top: 16px; }
.nb-title {
  margin: 0 0 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: #f0ece2;
  border-left: 3px solid var(--ds-accent);
  padding: 6px 11px;
}

/* Πλέγμα: 1px για τις γραμμές δεδομένων, 2px για τα όρια των ομάδων.
   Η διαφορά πάχους είναι που κάνει τον πίνακα να διαβάζεται. */
.nb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  border: 2px solid var(--ds-ink);
}
.nb-table td {
  padding: 5px 9px;
  border-bottom: 1px solid #dfe4dd;
  border-right: 1px solid #dfe4dd;
}
.nb-table td:last-child { border-right: none; }
.nb-table td.r { text-align: right; }

.nb-table tr.nb-group td {
  background: #eef2ec;
  font-weight: 660;
  font-size: 12px;
  padding-top: 6px;
  padding-bottom: 6px;
  border-top: 2px solid var(--ds-ink);
  border-bottom: 1px solid var(--ds-ink);
  border-right: none;
}
.nb-table tr.nb-group:first-child td { border-top: none; }

.nb-table tr.nb-subtotal td {
  font-weight: 660;
  background: #f7f9f6;
  border-top: 1px solid var(--ds-ink);
  border-bottom: 1px solid var(--ds-ink);
}
.nb-table tr.nb-grand td {
  font-weight: 700;
  font-size: 13.5px;
  border-top: 2px solid var(--ds-ink);
  border-bottom: none;
  padding-top: 8px;
  padding-bottom: 8px;
  background: #eef2ec;
}

.nb-fuel {
  margin-top: 8px;
  padding: 6px 11px;
  background: #f6f8f5;
  border-radius: 4px;
  font-size: 11.5px;
  color: #45585f;
}

/* ---------- Ο υπολογισμός της αναλογίας ---------- */

.nb-share td { vertical-align: middle; }
.nb-l { width: 28px; font-weight: 660; color: var(--ds-soft); text-align: center; }
.nb-what { }
.nb-base { width: 104px; }
.nb-x, .nb-eq {
  width: 22px;
  text-align: center;
  color: var(--ds-soft);
  border-right: none !important;
  border-left: none !important;
}
.nb-share-v { width: 94px; font-weight: 620; }
.nb-res {
  width: 112px;
  font-weight: 700;
  background: #fdf3e8;
  border-left: 2px solid var(--ds-ink) !important;
}
.nb-table tr.nb-prev td {
  padding-top: 8px;
  border-top: 2px solid var(--ds-ink);
  background: #f7f9f6;
}
.nb-table tr.nb-prev.is-debt .nb-res { color: var(--ds-flag); }

.nb-table tr.nb-detail td {
  border-bottom: 1px solid var(--ds-ink);
  border-right: none;
  padding: 0 9px 9px;
  background: #fbfcfa;
}

/* ---------- Το κουτί του ωρομετρητή ---------- */

.hb {
  border: 1px solid var(--ds-line);
  border-radius: 5px;
  padding: 8px 11px;
  background: #fbfcfa;
}
.hb-title { font-size: 11px; color: var(--ds-soft); margin-bottom: 6px; }
.hb-row { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.hb-coef { display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; }
.hb-coef span {
  background: #fdf3e8;
  border: 1px solid #f0d9bd;
  border-radius: 3px;
  padding: 2px 9px;
  font-size: 11.5px;
  font-weight: 620;
  white-space: nowrap;
}

.hb-tbl { flex: 1; min-width: 260px; border-collapse: collapse; font-size: 11px; }
.hb-tbl th {
  text-align: left;
  font-weight: 620;
  color: var(--ds-soft);
  padding: 2px 6px;
  border-bottom: 1px solid var(--ds-line);
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hb-tbl th.c, .hb-tbl td.c { text-align: center; }
.hb-tbl td { padding: 4px 6px; border-bottom: none; }
.hb-tbl td.hb-dim { color: var(--ds-soft); }
.hb-tbl td.hb-v { background: #fdf3e8; border: 1px solid #f0d9bd; font-variant-numeric: tabular-nums; }

.hb-split {
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px dotted #d3dbd2;
  font-size: 11.5px;
  color: #45585f;
}
.hb-split em { font-style: normal; color: var(--ds-soft); }

/* ---------- Πληρωτέο και ολογράφως ---------- */

.nb-total {
  margin-top: 14px;
  padding: 11px 16px;
  background: var(--ds-ink);
  color: #fff;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.nb-total span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.nb-total strong { font-size: 23px; font-weight: 700; }
.nt-receipt .nb-total { background: var(--ds-accent); }

.nb-words {
  margin-top: 8px;
  padding: 7px 12px;
  border: 1px solid var(--ds-line);
  border-radius: 4px;
  font-size: 11.5px;
  font-style: italic;
  color: #34434b;
}
.nb-words span {
  font-style: normal;
  color: var(--ds-soft);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-right: 7px;
}

/* ---------- Ομάδες στη γενική κατάσταση ---------- */

.gs-table tr.gs-group td {
  background: #eef2ec;
  font-weight: 660;
  padding-top: 7px;
  padding-bottom: 7px;
  border-top: 2px solid var(--ds-ink);
  border-bottom: 1px solid var(--ds-ink);
  border-right: none;
}
.gs-table tr.gs-subtotal td {
  font-weight: 660;
  background: #f7f9f6;
  border-top: 1px solid var(--ds-ink);
  border-bottom: 1px solid var(--ds-ink);
}

/* ---------- Η υπογραφή ανά μέσο ----------
   Μπαίνουν στο τέλος του αρχείου επίτηδες: τα media queries δεν
   αυξάνουν την ειδικότητα, οπότε πρέπει να έρθουν μετά τον βασικό
   κανόνα για να τον υπερισχύσουν. */

@media screen and (max-width: 780px) {
  .doc-brand { margin: 22px 0 0; padding: 9px 0 0; }
}

@media print {
  .doc-brand { margin: auto 0 0; padding: 9px 0 0; }
}

/* ---------- Ενεργοποίηση συνδρομής ---------- */

.cta-card { background: linear-gradient(120deg, #f3f7f4 0%, #fbf6ef 100%); border-color: #d8e2da; }
.cta-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
}
.cta-body p { color: var(--muted); font-size: 15px; line-height: 1.6; }
.cta-list { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

.quote { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.quote-row { display: flex; justify-content: space-between; gap: 16px; background: #fff; padding: 11px 15px; font-size: 15px; }
.quote-row span { color: var(--muted); }

.cycles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cycle {
  display: block;
  border: 2px solid var(--line);
  border-radius: 11px;
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.cycle:hover { border-color: #cfd9d2; }
.cycle:has(input:checked) { border-color: var(--accent); background: #f4f8f6; }
.cycle input { margin-right: 8px; }
.cycle-name { font-weight: 650; font-size: 15.5px; }
.cycle-price { display: block; font-size: 27px; font-weight: 700; margin: 6px 0 2px; letter-spacing: -.02em; }
.cycle-sub { display: block; font-size: 13px; color: var(--muted); line-height: 1.45; }

.paym {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 16px 18px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.paym.is-off { opacity: .58; }
.paym-name { font-weight: 650; font-size: 15.5px; }
.paym-desc { margin: 4px 0 0; font-size: 14px; color: var(--muted); line-height: 1.55; max-width: 46em; }

.paydetails { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.pd-row { display: flex; align-items: center; gap: 14px; background: #fff; padding: 12px 15px; flex-wrap: wrap; }
.pd-lbl { min-width: 118px; color: var(--muted); font-size: 12px; letter-spacing: .07em; text-transform: uppercase; }
.pd-amount { font-size: 25px; font-weight: 700; }
.pd-ref {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .06em;
  background: #fdf3e8;
  border: 1px solid #f0d9bd;
  border-radius: 6px;
  padding: 4px 12px;
}

.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 18px; }
.tabs a {
  padding: 8px 15px;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--muted);
  background: var(--paper);
}
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a.on { background: var(--accent); color: #fff; font-weight: 600; }

/* ============================================================
   ΚΟΙΝΟΤΗΤΑ — έγγραφα, ανακοινώσεις, βλάβες, ψηφοφορίες, εργασίες
   ========================================================= */

/* ---------- Έγγραφα ---------- */

.doc-list { display: flex; flex-direction: column; gap: 8px; }
.doc {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.doc:hover { border-color: #cfd9d2; }
.doc-kind {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--paper);
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.doc-body { flex: 1; min-width: 0; }
.doc-title { font-weight: 620; font-size: 15px; color: var(--ink); }
.doc-title:hover { color: var(--accent-dark); }
.doc-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* ---------- Ανακοινώσεις ---------- */

.ann-list { display: flex; flex-direction: column; gap: 12px; }
.ann {
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 0 10px 10px 0;
  padding: 14px 16px;
  background: #fff;
}
.ann.is-pinned { border-left-color: var(--accent); background: #f8fbf9; }
.ann.is-expired { opacity: .6; }
.ann-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.ann h3 { margin: 6px 0 2px; font-size: 16.5px; }
.ann-pin {
  display: inline-block;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-dark);
  background: rgba(29,111,92,.1);
  padding: 2px 9px;
  border-radius: 20px;
}
.ann-date { font-size: 12.5px; color: var(--muted); }
.ann-body { margin-top: 9px; font-size: 14.5px; line-height: 1.6; color: #3f5158; }
.ann-acts { display: flex; gap: 6px; flex-shrink: 0; }

/* ---------- Βλάβες ---------- */

.issue { border-left: 3px solid var(--line); }
.issue.is-open { border-left-color: var(--danger); }
.issue.is-progress { border-left-color: #b4531f; }
.issue.is-done { border-left-color: var(--accent); }
.issue-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.issue h3 { margin: 7px 0 2px; font-size: 16.5px; }
.issue-meta { font-size: 12.5px; color: var(--muted); }
.issue-body { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: #3f5158; }
.issue-res {
  margin-top: 11px;
  padding: 9px 12px;
  background: var(--paper);
  border-radius: 8px;
  font-size: 14px;
}
.issue-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}
.issue-form select, .issue-form input { max-width: 220px; }

/* ---------- Ψηφοφορίες ---------- */

.poll + .poll { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.poll-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.poll h3 { margin: 7px 0 2px; font-size: 17px; }
.poll-meta { font-size: 12.5px; color: var(--muted); }
.poll-body { margin: 9px 0 0; font-size: 14.5px; line-height: 1.6; color: #3f5158; }
.poll-acts { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

.poll-results { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.pr-top { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; margin-bottom: 4px; }
.pr-top strong { font-variant-numeric: tabular-nums; }
.pr-bar { height: 9px; background: #eef1ee; border-radius: 20px; overflow: hidden; }
.pr-bar div { height: 100%; background: var(--accent); border-radius: 20px; transition: width .3s ease; }
.pr.is-mine .pr-bar div { background: var(--ink); }
.pr.is-mine .pr-top { font-weight: 620; }

.vote-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.vote-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 2px solid var(--line);
  border-radius: 10px;
  padding: 12px 15px;
  cursor: pointer;
  font-size: 15px;
}
.vote-opt:hover { border-color: #cfd9d2; }
.vote-opt:has(input:checked) { border-color: var(--accent); background: #f4f8f6; }

/* ---------- Εργασίες και ημερολόγιο ---------- */

.cal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.cal-head h2 { flex: 1; min-width: 180px; font-size: 18px; }

.cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.cal-dow {
  background: var(--paper);
  padding: 7px 6px;
  text-align: center;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.cal-day { background: #fff; min-height: 82px; padding: 5px 6px; }
.cal-day.is-out { background: #fafbfa; }
.cal-day.is-today { background: #f2f8f5; }
.cal-day.is-today .cal-num {
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cal-num { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.cal-item {
  font-size: 11px;
  line-height: 1.3;
  padding: 3px 6px;
  border-radius: 4px;
  background: rgba(29,111,92,.12);
  color: var(--accent-dark);
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-item.pr-urgent { background: rgba(180,45,45,.13); color: #96302f; }
.cal-item.is-done { opacity: .5; text-decoration: line-through; }

.task-list { display: flex; flex-direction: column; gap: 8px; }
.task-row {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 14px;
  background: #fff;
  flex-wrap: wrap;
}
.task { flex: 1; min-width: 200px; display: flex; gap: 12px; align-items: flex-start; }
.task.is-late .task-title { color: var(--danger); }
.task-title { font-weight: 620; font-size: 15px; }
.task-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.5; }
.task-urgent { color: var(--danger); font-weight: 620; }
.task-notes { color: var(--muted); font-style: italic; }
.task-acts { display: flex; gap: 6px; flex-shrink: 0; }

.task-done {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line-2);
  font-size: 14px;
}
.task-done span:first-child { flex: 1; }

.btn-muted { opacity: .6; }

/* Σε στενή οθόνη το ημερολόγιο γίνεται λίστα — 7 στήλες σε 380px
   δίνουν 50px ανά μέρα, όπου δεν χωράει τίποτα. */
@media (max-width: 700px) {
  .cal-day { min-height: 62px; padding: 4px; }
  .cal-num { font-size: 11px; }
  .cal-item { font-size: 9.5px; padding: 2px 4px; }
  .cal-dow { font-size: 9.5px; padding: 5px 2px; }
  .task-row { align-items: flex-start; }
  .task-acts { width: 100%; }
  .issue-form select, .issue-form input { max-width: none; flex: 1 1 140px; }
}
.task-body { flex: 1; min-width: 0; }

/* ============================================================
   ΚΟΙΝΟΤΗΤΑ — έγγραφα, ανακοινώσεις, βλάβες, ψηφοφορίες, εργασίες
   ========================================================= */

/* ---------- Έγγραφα ---------- */

.doclist { display: grid; gap: 8px; }
.doc {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.doc-kind {
  flex-shrink: 0;
  width: 44px;
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--accent-dark);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 0;
}
.doc-body { flex: 1; min-width: 0; }
.doc-title { font-weight: 620; font-size: 15px; }
.doc-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.btn.btn-muted { color: var(--muted); }

/* ---------- Ανακοινώσεις ---------- */

.ann.is-old { opacity: .6; }
.ann-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.ann-date { font-size: 13px; color: var(--muted); margin-top: 4px; }
.ann-actions { display: flex; gap: 6px; flex-shrink: 0; }
.ann-body { margin-top: 12px; font-size: 15px; line-height: 1.65; color: #34434b; }

/* ---------- Βλάβες ---------- */

.issue.is-done, .issue.is-rejected { opacity: .68; }
.issue-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }
.issue-meta { font-size: 13px; color: var(--muted); margin-top: 4px; }
.issue-body { margin-top: 11px; font-size: 14.5px; line-height: 1.6; color: #34434b; }
.issue-form {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}

/* ---------- Ψηφοφορίες ---------- */

.poll-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.poll-meta { font-size: 13px; color: var(--muted); margin-top: 4px; }
.poll-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.poll-body { margin-top: 11px; font-size: 14.5px; line-height: 1.6; color: #34434b; }

.poll-res { margin-top: 15px; display: grid; gap: 9px; }
.pr-row { display: flex; align-items: center; gap: 13px; }
.pr-label { width: 180px; flex-shrink: 0; font-size: 14.5px; font-weight: 550; }
.pr-bar { flex: 1; height: 22px; background: var(--paper); border-radius: 5px; overflow: hidden; }
.pr-bar span { display: block; height: 100%; background: var(--accent); border-radius: 5px; transition: width .3s ease; }
.pr-num { width: 84px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; }
.pr-num span { font-weight: 500; color: var(--muted); font-size: 13px; margin-left: 4px; }
.pr-row.is-mine .pr-label::after { content: " ✓"; color: var(--accent); }

.poll-turnout {
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
}

.vote-form { margin-top: 14px; display: grid; gap: 8px; }
.vote-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 2px solid var(--line);
  border-radius: 10px;
  padding: 13px 16px;
  cursor: pointer;
  font-size: 15px;
}
.vote-opt:hover { border-color: #cfd9d2; }
.vote-opt:has(input:checked) { border-color: var(--accent); background: #f4f8f6; }
.vote-form .btn { justify-self: start; margin-top: 4px; }

#optWrap { display: grid; gap: 7px; margin-bottom: 9px; }

/* ---------- Ημερολόγιο εργασιών ---------- */

.cal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.cal-head h2 { flex: 1; font-size: 18px; }

.cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-dow {
  text-align: center;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 4px;
}
.cal-cell {
  min-height: 82px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 6px;
  background: #fff;
}
.cal-cell.is-empty { border-color: transparent; background: transparent; }
.cal-cell.is-today { border-color: var(--accent); border-width: 2px; }
.cal-cell.has-items { background: #fbfcfa; }
.cal-num { font-size: 12px; font-weight: 620; color: var(--muted); margin-bottom: 4px; }
.cal-cell.is-today .cal-num { color: var(--accent-dark); }

.cal-task {
  font-size: 11px;
  line-height: 1.3;
  padding: 3px 5px;
  border-radius: 4px;
  background: rgba(29,111,92,.12);
  color: var(--accent-dark);
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-task.is-urgent { background: rgba(180,83,31,.15); color: #8d3f16; }
.cal-task.is-late { background: rgba(180,31,31,.13); color: #922; font-weight: 600; }
.cal-task.is-done { background: #eef1ee; color: #98a4a9; text-decoration: line-through; }

/* ---------- Λίστα εργασιών ---------- */

.tasklist { display: grid; gap: 8px; }
.task {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.task.is-late { border-color: #e8cdcd; background: #fdf7f7; }
.task.is-done { opacity: .6; }

.task-check {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: #fff;
  color: transparent;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  transition: border-color .15s ease, color .15s ease;
}
.task-check:hover { border-color: var(--accent); color: rgba(29,111,92,.4); }
.task-check.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }

.task-body { flex: 1; min-width: 0; }
.task-title { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.task-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.task.is-late .task-meta { color: var(--flag); font-weight: 550; }

@media (max-width: 700px) {
  .cal-cell { min-height: 60px; padding: 3px 4px; }
  .cal-task { font-size: 9.5px; }
  .pr-label { width: 110px; font-size: 13px; }
  .doc, .task { flex-wrap: wrap; }
}

/* Πεδίο επιλογής ψηφοφορίας */
.opt { margin-bottom: 0; }

/* ---------- Εικονίδια στην πάνω πλοήγηση ---------- */

.topnav a { display: inline-flex; align-items: center; gap: 7px; }
.topnav .si { width: 17px; text-align: center; font-size: 13.5px; opacity: .75; flex-shrink: 0; }
.topnav a:hover .si, .topnav a.on .si { opacity: 1; }

@media (max-width: 620px) {
  .topnav .si { display: none; }
}

/* ============================================================
   ΕΠΙΣΚΟΠΗΣΗ — συνδρομή και πλακίδια
   ========================================================= */

/* ---------- Η κάρτα συνδρομής ---------- */

.plan-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  padding: 24px 28px;
  margin-bottom: 22px;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(620px 220px at 100% 0%, rgba(29,111,92,.13), transparent 70%),
    linear-gradient(140deg, #ffffff 0%, #f7faf8 100%);
  border: 1px solid var(--line);
  box-shadow: 0 2px 4px rgba(22,35,46,.03), 0 12px 30px rgba(22,35,46,.06);
}

/* Λεπτή χρωματική κορδέλα αριστερά, αντί για χοντρό περίγραμμα */
.plan-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, #2f8a72, #1d6f5c);
}
.plan-card.is-trial::before   { background: linear-gradient(180deg, #dda45c, #c9883c); }
.plan-card.is-expired::before { background: linear-gradient(180deg, #d15c5c, #b42d2d); }
.plan-card.is-free::before    { background: linear-gradient(180deg, #9fb0b8, #7e8f98); }

.plan-card.is-trial {
  background:
    radial-gradient(620px 220px at 100% 0%, rgba(201,136,60,.14), transparent 70%),
    linear-gradient(140deg, #ffffff 0%, #fdfaf5 100%);
}
.plan-card.is-expired {
  background:
    radial-gradient(620px 220px at 100% 0%, rgba(180,45,45,.12), transparent 70%),
    linear-gradient(140deg, #ffffff 0%, #fdf6f5 100%);
}

/* ---------- Το δαχτυλίδι ημερών ---------- */

.pc-ring {
  flex-shrink: 0;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(var(--ring, #1d6f5c) calc(var(--pct) * 1%), #e7ebe6 0);
  box-shadow: 0 4px 14px rgba(22,35,46,.09);
}
.plan-card.is-trial   .pc-ring { --ring: #c9883c; }
.plan-card.is-expired .pc-ring { --ring: #b42d2d; }
.plan-card.is-free    .pc-ring { --ring: #8d9ba3; }

.pc-ring-in {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.pc-ring-in strong {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.pc-ring-in em {
  font-style: normal;
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 3px;
  letter-spacing: .04em;
}
.pc-ring-in i { font-size: 22px; color: var(--accent); }

/* ---------- Το κείμενο ---------- */

.pc-main { flex: 1; min-width: 240px; }

.pc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-dark);
}
.plan-card.is-trial   .pc-eyebrow { color: #a4691f; }
.plan-card.is-expired .pc-eyebrow { color: var(--danger); }
.plan-card.is-free    .pc-eyebrow { color: var(--muted); }
.pc-eyebrow i { font-size: 12px; }

.pc-plan {
  margin: 6px 0 3px;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -.024em;
  line-height: 1.18;
}
.pc-meta { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.5; }

.pc-locked {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 11px;
  font-size: 12.5px;
  font-weight: 620;
  color: #a4691f;
  background: rgba(201,136,60,.13);
  border-radius: 20px;
  padding: 5px 13px;
}
.pc-locked i { font-size: 10.5px; }

/* ---------- Η προτροπή ---------- */

.pc-act {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  text-align: center;
}
.pc-act .btn i { margin-right: 7px; }
.pc-act .btn-lg { padding: 13px 26px; font-size: 15.5px; }
.pc-price { font-size: 17px; color: var(--muted); }
.pc-price strong { color: var(--ink); font-weight: 680; }

@media (max-width: 760px) {
  .plan-card { padding: 20px; gap: 18px; }
  .pc-ring { width: 76px; height: 76px; }
  .pc-ring-in { width: 62px; height: 62px; }
  .pc-ring-in strong { font-size: 21px; }
  .pc-plan { font-size: 21px; }
  .pc-act { width: 100%; }
}

/* ---------- Επικεφαλίδες ενοτήτων ---------- */

.sec-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 30px 0 12px;
}
.sec-head { display: flex; align-items: baseline; gap: 12px; margin: 30px 0 12px; flex-wrap: wrap; }
.sec-head .sec-title { margin: 0; }
.sec-note {
  font-size: 12px;
  font-weight: 650;
  color: #a4691f;
  background: rgba(201,136,60,.13);
  padding: 3px 10px;
  border-radius: 20px;
}
.sec-sub { font-size: 14px; color: var(--muted); margin: -4px 0 14px; line-height: 1.6; }

/* ---------- Πλακίδια ---------- */

.tiles {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(296px, 1fr));
}

.tile {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 15px 16px;
  color: var(--ink);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
a.tile:hover {
  border-color: #c7d5cd;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(22,35,46,.08);
  text-decoration: none;
}

.tile-ic {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  background: var(--paper);
  color: var(--accent-dark);
  transition: background .15s ease, color .15s ease;
}
a.tile:hover .tile-ic { background: rgba(29,111,92,.12); }

.tile-body { flex: 1; min-width: 0; }
.tile-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 640;
  font-size: 15px;
  line-height: 1.3;
  flex-wrap: wrap;
}
.tile-desc {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.45;
}
.tile-go { color: #c3ccc6; font-size: 12px; flex-shrink: 0; transition: color .15s ease, transform .15s ease; }
a.tile:hover .tile-go { color: var(--accent); transform: translateX(2px); }

.tile-badge {
  font-size: 11px;
  font-weight: 650;
  color: var(--accent-dark);
  background: rgba(29,111,92,.1);
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

/* ---------- Κλειδωμένο πλακίδιο ---------- */

.tile.is-locked {
  background: #fbfcfb;
  border-style: dashed;
}
.tile.is-locked .tile-ic { background: #f1f3f0; color: #a9b4ad; }
.tile.is-locked .tile-name { color: #7c8b84; }
.tile.is-locked .tile-desc { color: #9aa6a0; }
.tile-lock { font-size: 11px; color: #b0bab4; }

.tile-up {
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--accent-dark);
  background: rgba(29,111,92,.09);
  border: 1px solid rgba(29,111,92,.16);
  padding: 6px 13px;
  border-radius: 20px;
  white-space: nowrap;
}
.tile-up:hover { background: var(--accent); color: #fff; border-color: var(--accent); text-decoration: none; }

/* ---------- Προτροπή αναβάθμισης ---------- */

.up-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding: 22px 24px;
  border-radius: var(--radius);
  background: linear-gradient(125deg, #16232e 0%, #1d3b3a 62%, #1d6f5c 140%);
  color: #fff;
}
.up-title { font-size: 18px; font-weight: 680; letter-spacing: -.015em; }
.up-sub { margin: 5px 0 0; font-size: 14px; color: #b6c6cd; line-height: 1.6; max-width: 52em; }
.up-bar .btn-primary { background: #fff; color: var(--ink); border-color: #fff; }
.up-bar .btn-primary:hover { background: #eaf1ee; color: var(--ink); }
.up-bar .btn i { margin-right: 7px; }

@media (max-width: 620px) {
  .tiles { grid-template-columns: 1fr; }
  .up-bar { padding: 18px; }
  .up-bar .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   ΠΕΡΙΟΔΟΙ — δείκτες και κάρτες
   ========================================================= */

/* ---------- Οι τρεις δείκτες ---------- */

.kpis {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-bottom: 22px;
}
.kpi {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 17px 18px;
}
.kpi-ic {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  background: var(--paper);
  color: var(--accent-dark);
}
.kpi.is-warn .kpi-ic { background: rgba(180,45,45,.09); color: var(--danger); }
.kpi-label {
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 650;
}
.kpi-value {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  margin: 3px 0 1px;
}
.kpi.is-warn .kpi-value { color: var(--danger); }
.kpi-foot { font-size: 12.5px; color: var(--muted); }

/* ---------- Οι κάρτες περιόδων ---------- */

.per-list { display: flex; flex-direction: column; gap: 12px; }

.per {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 22px;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.per:hover { border-color: #c7d5cd; box-shadow: 0 6px 20px rgba(22,35,46,.07); }

.per::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}
.per.is-issued::before { background: linear-gradient(180deg, #2f8a72, #1d6f5c); }
.per.is-draft::before  { background: linear-gradient(180deg, #c3ccc6, #a9b4ad); }
.per.is-closed::before { background: linear-gradient(180deg, #8fa2b0, #6d8393); }

.per.is-latest {
  background: linear-gradient(120deg, #f7fbf9 0%, #fff 46%);
  border-color: #cfe0d7;
}

.per-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.per-id { min-width: 0; }
.per-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }

.per-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 680;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
}
.per-tag i { font-size: 9.5px; }
.t-issued { background: rgba(29,111,92,.11); color: var(--accent-dark); }
.t-draft  { background: #eef1ee; color: #6d7a80; }
.t-closed { background: rgba(109,131,147,.14); color: #4d616f; }
.t-latest { background: var(--ink); color: #fff; }

.per h3 { margin: 0 0 4px; font-size: 19px; font-weight: 680; letter-spacing: -.018em; }
.per-when {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}
.per-when i { font-size: 11px; margin-right: 4px; opacity: .8; }
.per-due { white-space: nowrap; }

.per-acts { display: flex; gap: 6px; align-items: center; flex-shrink: 0; flex-wrap: wrap; }
.per-acts .btn i { margin-right: 5px; }
.per-acts .btn-danger i, .per-acts .btn-sm i:only-child { margin-right: 0; }

/* ---------- Τα νούμερα ---------- */

.per-nums {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
}
.pn { min-width: 92px; }
.pn-label {
  display: block;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 650;
}
.pn-value {
  display: block;
  font-size: 16.5px;
  font-weight: 680;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.pn-value.is-debt { color: var(--danger); }
.pn-value.is-ok { color: var(--accent-dark); }
.pn-count .pn-value, .pn-hint .pn-value { font-weight: 600; color: var(--muted); font-size: 15px; }

/* ---------- Πρόοδος είσπραξης ---------- */

.per-prog { display: flex; align-items: center; gap: 13px; margin-top: 13px; flex-wrap: wrap; }
.per-prog-bar {
  flex: 1;
  min-width: 160px;
  height: 8px;
  background: #eef1ee;
  border-radius: 20px;
  overflow: hidden;
}
.per-prog-bar div {
  height: 100%;
  border-radius: 20px;
  background: linear-gradient(90deg, #2f8a72, #1d6f5c);
  transition: width .35s ease;
}
.per-prog-bar.is-full div { background: linear-gradient(90deg, #3fa88a, #2f8a72); }
.per-prog-txt { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.per-prog-txt strong { color: var(--ink); }
.per-prog-bar.is-full + .per-prog-txt { color: var(--accent-dark); font-weight: 620; }
.per-prog-txt i { margin-right: 4px; }

@media (max-width: 700px) {
  .per { padding: 16px; }
  .per-head { flex-direction: column; gap: 12px; }
  .per-acts { width: 100%; }
  .per-nums { gap: 18px; }
  .pn { min-width: 78px; }
  .pn-value { font-size: 15px; }
}

/* ---------- Η πλαϊνή στήλη του admin ---------- */

.side-admin {
  background: linear-gradient(180deg, #1e2a3a 0%, #182333 45%, #131c29 100%);
}
.side-admin .side-mark {
  background: linear-gradient(140deg, #4a6b9a 0%, #34527d 100%);
  box-shadow: 0 2px 8px rgba(52,82,125,.42);
  font-size: 13px;
}
.side-admin .side-link.on {
  background: linear-gradient(100deg, rgba(74,107,154,.34) 0%, rgba(74,107,154,.16) 100%);
}
.side-admin .side-link.on .si { color: #8fb3e0; }
.side-admin .side-link.on::before { background: #8fb3e0; }
.side-admin .side-avatar { color: #a8c4e6; }

/* Σήμα με πλήθος, π.χ. εκκρεμείς πληρωμές */
.side-count {
  flex-shrink: 0;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 20px;
  background: #d2a03c;
  color: #1a2333;
  font-size: 11px;
  font-weight: 750;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

/* Στο admin ο χώρος περιεχομένου κρατάει αναγνώσιμο πλάτος */
body.is-admin .wrap { max-width: 1240px; }

/* ============================================================
   ΣΕΛΙΔΑ ΤΙΜΩΝ
   ========================================================= */

.pr-hero {
  padding: 76px 0 46px;
  text-align: center;
  background:
    radial-gradient(760px 400px at 50% 0%, rgba(44,122,102,.14), transparent 68%),
    linear-gradient(178deg, var(--l-mist) 0%, #fdfbf7 100%);
}
.pr-hero h1 {
  /* max-width και αναδίπλωση: ο τίτλος έχει μεγάλες ελληνικές λέξεις
     («πολυκατοικία» = 12 γράμματα) και σε μεσαία πλάτη ξεχείλιζε
     δεξιά αντί να σπάσει σε δεύτερη γραμμή. */
  margin: 0 auto 14px;
  max-width: 16em;
  font-size: clamp(28px, 3.8vw, 42px);
  line-height: 1.12;
  overflow-wrap: break-word;
  hyphens: auto;
}
.pr-lead {
  max-width: 34em;
  margin: 0 auto;
  font-size: 17.5px;
  line-height: 1.62;
  color: var(--l-ink-2);
}

.pr-calc-sec { padding-top: 34px; }

/* ---------- Ο υπολογιστής ---------- */

.pr-calc {
  background: linear-gradient(150deg, #1b2a33 0%, #16232e 100%);
  color: #fff;
  border-radius: 20px;
  padding: 26px 28px 22px;
  max-width: 720px;
  margin: 0 auto 30px;
  box-shadow: 0 16px 44px rgba(22,35,46,.18);
}
.pr-calc-label {
  display: block;
  font-size: 13px;
  color: #93a6ae;
  margin-bottom: 16px;
  letter-spacing: .01em;
}

.pr-slider { display: flex; align-items: center; gap: 14px; }
.pr-slider input[type="range"] {
  flex: 1;
  accent-color: #3fa88a;
  height: 5px;
  cursor: pointer;
}
.pr-step {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.07);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  transition: background .15s ease;
}
.pr-step:hover { background: rgba(255,255,255,.15); }

.pr-calc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.pr-count { display: flex; align-items: baseline; gap: 9px; }
.pr-count input {
  width: 86px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 10px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.pr-count input:focus { border-color: #3fa88a; box-shadow: none; }
.pr-count span { font-size: 14.5px; color: #93a6ae; }

.pr-cycle {
  display: flex;
  gap: 3px;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  padding: 3px;
}
.pr-cyc {
  border: 0;
  background: transparent;
  color: #b7c6cd;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 17px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.pr-cyc.is-on { background: #fff; color: var(--l-ink); }
.pr-save {
  font-size: 11.5px;
  font-weight: 700;
  color: #1d6f5c;
  background: rgba(63,168,138,.18);
  padding: 2px 7px;
  border-radius: 20px;
}
.pr-cyc.is-on .pr-save { background: rgba(29,111,92,.13); }

/* ---------- Οι κάρτες ---------- */

.pr-cards {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
  align-items: start;
}

.pr-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--l-line);
  border-radius: 18px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
}
.pr-card.is-star {
  border-color: var(--l-pine);
  box-shadow: 0 14px 40px rgba(31,92,76,.15);
}
.pr-card.is-out { opacity: .55; }

.pr-badge {
  position: absolute;
  top: -12px;
  left: 24px;
  background: var(--l-pine);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 4px 13px;
  border-radius: 999px;
}

.pr-name { font-size: 19px; font-weight: 700; letter-spacing: -.015em; }
.pr-desc { font-size: 13.5px; color: var(--l-ink-2); margin-top: 4px; line-height: 1.5; }

.pr-amount {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin: 18px 0 2px;
}
.pr-amount strong {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.pr-amount span { font-size: 14px; color: var(--l-ink-2); }
.pr-out { font-style: normal; font-size: 15px; color: var(--l-ink-2); font-weight: 600; }

.pr-per { font-size: 12.5px; color: #7b8a8f; margin-bottom: 18px; }

.pr-list { list-style: none; margin: 0 0 20px; padding: 0; flex: 1; }
.pr-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  padding: 6px 0;
  border-bottom: 1px solid #f0f2ef;
}
.pr-list li:last-child { border-bottom: none; }
.pr-list li i { font-size: 11px; margin-top: 4px; flex-shrink: 0; }
.pr-list li.yes i { color: var(--l-pine); }
.pr-list li.no { color: #a4b0b2; }
.pr-list li.no i { color: #ccd5d0; }
.pr-cta { width: 100%; }

/* ---------- Οι εγγυήσεις ---------- */

.pr-assure {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 30px;
  font-size: 13.5px;
  color: var(--l-ink-2);
}
.pr-assure i { color: var(--l-pine); margin-right: 7px; }
.pr-vat { text-align: center; font-size: 12.5px; color: #7b8a8f; margin-top: 14px; }

/* ---------- Ο πίνακας σύγκρισης ---------- */

.pr-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--l-line);
  border-radius: 14px;
  overflow: hidden;
  font-size: 14px;
}
.pr-table th {
  text-align: left;
  padding: 14px 16px;
  background: #f6f8f5;
  border-bottom: 2px solid var(--l-ink);
  font-size: 13px;
  font-weight: 700;
}
.pr-table th.c, .pr-table td.c { text-align: center; width: 116px; }
.pr-table th.is-star { color: var(--l-pine); }
.pr-table td { padding: 11px 16px; border-bottom: 1px solid #f0f2ef; vertical-align: top; }
.pr-table td.is-star { background: rgba(44,122,102,.045); }

.pr-table tr.pr-group td {
  background: #f6f8f5;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7b8a8f;
  padding: 10px 16px;
}
.pr-fname { display: block; font-weight: 600; }
.pr-fdesc { display: block; font-size: 12.5px; color: #7b8a8f; margin-top: 2px; line-height: 1.45; }
.pr-yes { color: var(--l-pine); font-size: 14px; }
.pr-no { color: #ccd5d0; font-size: 11px; }

/* ---------- Η γέφυρα προς τις εταιρείες ---------- */

.pr-biz {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  background: linear-gradient(120deg, #f3f7f4 0%, #fbf6ef 100%);
  border: 1px solid var(--l-line);
  border-radius: 18px;
  padding: 30px 32px;
}
.pr-biz h2 { margin: 6px 0 8px; font-size: clamp(21px, 2.4vw, 27px); }
.pr-biz p { margin: 0; color: var(--l-ink-2); font-size: 15.5px; line-height: 1.62; max-width: 46em; }

/* ---------- Σύνοψη τιμών στην αρχική ---------- */

.ld-price-teaser {
  display: flex;
  align-items: center;
  gap: 34px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--l-line);
  border-radius: 18px;
  padding: 26px 30px;
  box-shadow: 0 10px 30px rgba(27,42,51,.06);
}
.pt-item { display: flex; align-items: center; gap: 13px; }
.pt-big {
  font-family: var(--l-display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--l-pine-d);
  white-space: nowrap;
}
.pt-txt strong { display: block; font-size: 14.5px; }
.pt-txt span { display: block; font-size: 13px; color: var(--l-ink-2); }
.ld-price-teaser .ld-btn-lg { margin-left: auto; }

@media (max-width: 760px) {
  .pr-calc { padding: 20px; }
  .pr-calc-foot { flex-direction: column; align-items: stretch; }
  .pr-cycle { justify-content: center; }
  .pr-assure { gap: 14px; flex-direction: column; align-items: center; }
  .pr-table th.c, .pr-table td.c { width: 74px; }
  .pr-fdesc { display: none; }
  .ld-price-teaser { flex-direction: column; align-items: flex-start; gap: 18px; }
  .ld-price-teaser .ld-btn-lg { margin-left: 0; width: 100%; justify-content: center; }
}
.pr-card-top { min-height: 52px; }
body.ld-pricing .ld-links a.on { color: var(--l-ink); background: rgba(44,122,102,.11); }

/* ============================================================
   ΑΞΙΟΛΟΓΗΣΕΙΣ ΣΤΗΝ ΑΡΧΙΚΗ
   ========================================================= */

.rv-score {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--l-line);
  border-radius: 999px;
  padding: 10px 22px;
  margin-bottom: 28px;
  font-size: 15px;
}
.rv-stars { color: #e8b33c; letter-spacing: 2px; font-size: 16px; }
.rv-score strong { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.rv-count { color: var(--l-ink-2); font-size: 14px; }
.rv-score a { font-weight: 600; color: var(--l-pine-d); }

/* ---------- Η κυλιόμενη λωρίδα ---------- */

.rv-marq { position: relative; }

.rv-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: auto;
  padding: 6px 2px 10px;

  /* Η μπάρα κύλισης κρύβεται: η κίνηση είναι αυτόματη και τα βελάκια
     κάνουν τη δουλειά. Η κύλιση με το δάχτυλο δουλεύει κανονικά. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rv-track::-webkit-scrollbar { display: none; }

/* Ξεθώριασμα στις άκρες, ώστε οι κάρτες να μπαινοβγαίνουν ομαλά
   αντί να κόβονται απότομα στο περιθώριο. */
.rv-marq::before,
.rv-marq::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 64px;
  pointer-events: none;
  z-index: 2;
}
.rv-marq::before { left: -1px;  background: linear-gradient(90deg, var(--l-mist), transparent); }
.rv-marq::after  { right: -1px; background: linear-gradient(270deg, var(--l-mist), transparent); }

.rv-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--l-line);
  background: #fff;
  color: var(--l-ink);
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(27,42,51,.12);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.rv-arrow:hover { background: var(--l-pine); color: #fff; border-color: var(--l-pine); }
.rv-arrow:active { transform: translateY(-50%) scale(.94); }
.rv-arrow.is-prev { left: -8px; }
.rv-arrow.is-next { right: -8px; }

.rv {
  position: relative;
  flex: 0 0 330px;
  background: #fff;
  border: 1px solid var(--l-line);
  border-radius: 16px;
  padding: 24px 24px 20px;
  display: flex;
  flex-direction: column;
  transition: transform .16s ease, box-shadow .16s ease;
}
.rv:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(27,42,51,.09); }

.rv-mark {
  position: absolute;
  top: 6px;
  right: 20px;
  font-family: var(--l-display);
  font-size: 58px;
  line-height: 1;
  color: rgba(44,122,102,.13);
  pointer-events: none;
}
.rv-stars-sm { color: #e8b33c; font-size: 12.5px; margin-bottom: 12px; }
.rv-stars-sm i { margin-right: 2px; }
.rv-stars-sm i.is-dim { color: #dde1dc; }

.rv-quote {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--l-ink);
  flex: 1;
}

.rv-who { display: flex; align-items: center; gap: 12px; }
.rv-av {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rv-name { font-weight: 650; font-size: 15px; }
.rv-role { font-size: 13px; color: var(--l-ink-2); }

/* ---------- Διακόπτης στο admin ---------- */

.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: #ccd3ce;
  position: relative;
  transition: background .18s ease;
  flex-shrink: 0;
}
.switch-dot {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.22);
  transition: transform .18s ease;
}
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track .switch-dot { transform: translateX(20px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch-txt { font-size: 13.5px; color: var(--muted); font-weight: 600; }

.sec-card { transition: opacity .18s ease; }
.sec-card.is-off { opacity: .62; }
.sec-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

/* ---------- Λίστα αξιολογήσεων στο admin ---------- */

.tst-admin { display: flex; flex-direction: column; gap: 10px; }
.tst-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  background: #fff;
}
.tst-row.is-off { opacity: .5; background: #fafbfa; }
.tst-av {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tst-body { flex: 1; min-width: 0; }
.tst-stars { color: #e8b33c; font-size: 13px; letter-spacing: 1px; }
.tst-quote { font-size: 14.5px; line-height: 1.55; margin: 4px 0 6px; }
.tst-who { font-size: 13px; color: var(--muted); }
.tst-acts { display: flex; gap: 5px; flex-shrink: 0; }

@media (max-width: 620px) {
  .tst-row { flex-wrap: wrap; }
  .tst-acts { width: 100%; }
}

@media (max-width: 620px) {
  .rv { flex: 0 0 82vw; }
  .rv-arrow { display: none; }
  .rv-marq::before, .rv-marq::after { width: 24px; }
}

/* ============================================================
   Η ΣΤΟΙΒΑ ΤΩΝ ΕΝΤΥΠΩΝ ΣΤΗΝ ΚΕΦΑΛΙΔΑ
   ========================================================= */

.ld-papers {
  position: relative;
  margin-top: 32px;
  max-width: 560px;

  /* Το αρνητικό περιθώριο βάζει τη σύνθεση μέσα στο κάτω padding της
     κεφαλίδας, ώστε να φτάνει χαμηλά χωρίς να σπρώξει τη λωρίδα. */
  margin-bottom: -52px;
}

/* Μόνο τα φύλλα κόβονται. Οι λεζάντες είναι έξω από το κόψιμο, οπότε
   φαίνονται ολόκληρες. */
.ld-papers-clip {
  position: relative;
  height: 296px;
  overflow: hidden;

  /* Κενό γύρω-γύρω, ώστε η κίνηση του hover να μη βγάζει καμία γωνία
     έξω από το κόψιμο. Οι γυρισμένες γωνίες θέλουν παραπάνω χώρο
     απ' όσο δείχνει το μάτι. */
  padding: 22px 0 0 8px;
}

/* Κάθε φύλλο με την ετικέτα του σε ένα σύνολο, ώστε η ετικέτα να
   παίρνει την ίδια κλίση χωρίς να την υπολογίζουμε ξεχωριστά. */
.ld-stack { position: absolute; }
.ld-stack.is-back {
  width: 200px;
  top: 8px;
  left: 30px;
  transform: rotate(-5deg);
  z-index: 1;
}
.ld-stack.is-front {
  width: 232px;
  top: 48px;
  left: 214px;
  transform: rotate(3.5deg);
  z-index: 2;
}

/* Στο hover κινείται ΜΟΝΟ το φύλλο. Η ετικέτα μένει ακίνητη — αλλιώς
   χοροπηδάει το κείμενο και δυσκολεύει το διάβασμα. */
.ld-papers:hover .is-back  .ld-paper { transform: translate(-5px, 3px); }
.ld-papers:hover .is-front .ld-paper { transform: translate(6px, 3px); }

/* ---------- Οι λεζάντες, κάτω από τα φύλλα ---------- */

.ld-legend {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.ld-paper-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1px solid var(--l-line);
  border-radius: 999px;
  padding: 6px 15px;
  font-size: 12px;
  font-weight: 620;
  letter-spacing: .01em;
  color: var(--l-ink-2);
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(27, 42, 51, .07);
}

/* Χρωματική κουκκίδα που δένει κάθε λεζάντα με το φύλλο της */
.ld-paper-tag::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #b9c6bf;
  flex-shrink: 0;
}
.ld-paper-tag:last-child::before { background: var(--l-pine); }

/* ---------- Το φύλλο ---------- */

.ld-paper,
.ld-paper2 {
  background: #fff;
  border: 1px solid #dfe3dc;
  border-radius: 7px 7px 0 0;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(27, 42, 51, .16);
  transition: transform .25s ease, box-shadow .25s ease;
}
.ld-papers:hover .ld-paper,
.ld-papers:hover .ld-paper2 { box-shadow: 0 22px 50px rgba(27, 42, 51, .2); }
.ld-paper img,
.ld-paper2 img { display: block; width: 100%; height: auto; }

/* ---------- Η απλοποιημένη εκδοχή σε HTML ---------- */

.pp {
  padding: 9px 10px;
  font-size: 4.6px;
  line-height: 1.35;
  color: #16232e;
}
.is-front .pp { font-size: 5.2px; padding: 10px 11px; }

.pp-h {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 7px;
  border-bottom: 1.2px solid #16232e;
  padding-bottom: 4px;
}
.pp-kick {
  font-size: 3.8px;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--l-pine);
}
.is-front .pp-kick { font-size: 4.2px; }
.pp-name { font-weight: 700; font-size: 6.6px; margin-top: 2px; letter-spacing: -.01em; }
.is-front .pp-name { font-size: 7.4px; }
.pp-per { font-weight: 700; font-size: 6px; }
.pp-apt {
  border: 1.2px solid #16232e;
  border-radius: 2px;
  padding: 0 5px;
  font-weight: 700;
  font-size: 7.4px;
  line-height: 1.5;
}

.pp-title {
  background: #f0ece2;
  border-left: 1.8px solid var(--l-pine);
  padding: 2.5px 5px;
  font-weight: 700;
  font-size: 4.4px;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin: 6px 0 4px;
}

.pp-t { width: 100%; border-collapse: collapse; border: 1.2px solid #16232e; margin-top: 5px; }
.pp-t td {
  padding: 2px 4px;
  border-bottom: 1px solid #e6e9e4;
  border-right: 1px solid #e6e9e4;
}
.pp-t td:last-child { border-right: none; text-align: right; }
.pp-t tr.pp-g td {
  background: #eef2ec;
  font-weight: 650;
  border-top: 1.2px solid #16232e;
  border-bottom: 1px solid #16232e;
  border-right: none;
}
.pp-t tr.pp-s td {
  background: #f7f9f6;
  font-weight: 650;
  text-align: right;
  border-top: 1px solid #16232e;
  border-bottom: 1px solid #16232e;
}
.pp-t tr.pp-tot td {
  background: #eef2ec;
  font-weight: 700;
  text-align: right;
  border-top: 1.2px solid #16232e;
  border-bottom: none;
  padding: 3px 4px;
}
.pp-x { color: #55646b; }
.pp-r { background: #fdf3e8; border-left: 1.4px solid #16232e !important; font-weight: 700; }

.pp-pay {
  background: #16232e;
  color: #fff;
  border-radius: 2.5px;
  padding: 5px 8px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 6px;
}
.pp-pay span { font-size: 4.2px; letter-spacing: .1em; text-transform: uppercase; }
.pp-pay strong { font-size: 9.5px; }

@media (max-width: 900px) {
  .ld-papers { max-width: 470px; margin-top: 26px; margin-bottom: -34px; }
  .ld-papers-clip { height: 228px; }
  .ld-stack.is-back  { width: 172px; left: 20px; }
  .ld-stack.is-front { width: 198px; left: 182px; top: 40px; }
  .ld-paper-tag { font-size: 11px; padding: 5px 12px; }
}
@media (max-width: 480px) {
  .ld-papers { margin-bottom: -18px; }
  .ld-papers-clip { height: 190px; }
  .ld-stack.is-back  { width: 142px; left: 6px; }
  .ld-stack.is-front { width: 162px; left: 132px; top: 34px; }
  .ld-paper-tag { font-size: 10.5px; padding: 4px 11px; }
  .ld-legend { gap: 7px; }
}

/* ============================================================
   ΔΙΑΚΟΠΤΗΣ ΚΟΙΝΟΥ ΚΑΙ ΕΤΑΙΡΙΚΟ ΠΕΡΙΒΑΛΛΟΝ
   ========================================================= */

/* Δείχνει ότι υπάρχουν δύο εκδοχές του ίδιου προϊόντος και σε ποια
   βρίσκεσαι. Ένα κουμπί «Για εταιρείες» έμοιαζε με ενέργεια — αυτό
   μοιάζει με επιλογή, που είναι και η αλήθεια. */
.aud-switch {
  display: flex;
  gap: 2px;
  background: rgba(27, 42, 51, .06);
  border-radius: 999px;
  padding: 3px;
  flex-shrink: 0;
}
.aud-switch a {
  font-size: 13px;
  font-weight: 600;
  color: var(--l-ink-2);
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.aud-switch a:hover { color: var(--l-ink); text-decoration: none; }
.aud-switch a.on {
  background: #fff;
  color: var(--l-ink);
  box-shadow: 0 1px 4px rgba(27, 42, 51, .14);
}

/* ---------- Το εταιρικό σήμα ---------- */

.ld-biz-badge {
  margin-left: 9px;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #cfe0d7;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .2);
  padding: 3px 9px;
  border-radius: 999px;
  vertical-align: 3px;
}

/* ---------- Το εταιρικό περιβάλλον ---------- */

/* Σκουρότερη κεφαλίδα, ώστε το μάτι να καταλάβει σε μισό δευτερόλεπτο
   ότι άλλαξε περιβάλλον — και όχι ότι χάθηκε. */
.ld-biz-page .ld-nav {
  background: rgba(22, 35, 46, .94);
  border-bottom-color: rgba(255, 255, 255, .1);
}
.ld-biz-page .ld-nav.is-stuck { background: rgba(22, 35, 46, .98); }
.ld-biz-page .ld-logo { color: #fff; }
.ld-biz-page .ld-links a { color: #a9bcc4; }
.ld-biz-page .ld-links a:hover { color: #fff; }
.ld-biz-page .ld-btn-ghost { color: #cfe0d7; border-color: rgba(255,255,255,.24); }
.ld-biz-page .ld-btn-ghost:hover { background: rgba(255,255,255,.1); color: #fff; }

.ld-biz-page .aud-switch { background: rgba(255, 255, 255, .1); }
.ld-biz-page .aud-switch a { color: #a9bcc4; }
.ld-biz-page .aud-switch a:hover { color: #fff; }
.ld-biz-page .aud-switch a.on { background: var(--l-pine); color: #fff; }

.ld-biz-page .ld-hero {
  background:
    radial-gradient(880px 520px at 76% 6%, rgba(44,122,102,.2), transparent 66%),
    linear-gradient(168deg, #eef2f4 0%, #f6f4ef 74%, #fdfbf7 100%);
}

/* ---------- Η φόρμα εγγραφής μέσα στη σελίδα ---------- */

.biz-signup { background: linear-gradient(180deg, #fbfcfb 0%, var(--l-mist) 100%); }

.biz-form {
  background: #fff;
  border: 1px solid var(--l-line);
  border-radius: 18px;
  padding: 28px 30px;
  box-shadow: 0 12px 36px rgba(27, 42, 51, .08);
}
.biz-form .field { margin-bottom: 16px; }
.biz-form label { font-size: 13.5px; font-weight: 620; }

.biz-count { display: flex; align-items: center; gap: 14px; }
.biz-count input[type="range"] { flex: 1; accent-color: var(--l-pine); cursor: pointer; }
.biz-count input[type="number"] {
  width: 92px;
  text-align: center;
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

#bldPrice { min-height: 22px; font-size: 13.5px; }
#bldPrice strong { color: var(--l-pine-d); font-size: 15px; }

.biz-fine {
  margin: 14px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--l-ink-2);
}
.biz-alt { margin-top: 20px; text-align: center; font-size: 14.5px; color: var(--l-ink-2); }

@media (max-width: 860px) {
  .aud-switch a { font-size: 12px; padding: 5px 11px; }
  .ld-biz-badge { display: none; }
  .biz-form { padding: 20px; }
  .biz-count { flex-wrap: wrap; }
}

/* ---------- Λίστα δυνατοτήτων σε στήλες ----------
   Με δεκαπέντε γραμμές, μία στήλη γίνεται σεντόνι. Οι στήλες αφήνουν
   τη ματιά να τις σαρώσει αντί να τις διαβάσει. */

.ld-plan-list.is-cols {
  column-count: 3;
  column-gap: 30px;
  margin-bottom: 24px;
}
.ld-plan-list.is-cols li {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}

@media (max-width: 900px) {
  .ld-plan-list.is-cols { column-count: 2; column-gap: 22px; }
}
@media (max-width: 520px) {
  .ld-plan-list.is-cols { column-count: 1; }
}

/* ============================================================
   ΥΠΟΣΕΛΙΔΟ
   ========================================================= */

.ft {
  background: #16232e;
  color: #a9bcc4;
  margin-top: 0;
}
.ft-in {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 44px;
  padding-top: 52px;
  padding-bottom: 40px;
}

.ft-brand .ld-logo { color: #fff; margin-bottom: 14px; display: inline-flex; }
.ft-about { font-size: 14px; line-height: 1.65; margin: 0; max-width: 30em; }

.ft-social { display: flex; gap: 9px; margin-top: 18px; }
.ft-social a {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  color: #cfe0d7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: background .15s ease, color .15s ease;
}
.ft-social a:hover { background: var(--l-pine); color: #fff; text-decoration: none; }

.ft-col h3 {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 16px;
}
.ft-col a {
  display: block;
  font-size: 14.5px;
  color: #a9bcc4;
  padding: 5px 0;
  transition: color .15s ease;
}
.ft-col a:hover { color: #fff; text-decoration: none; }

.ft-bottom { border-top: 1px solid rgba(255, 255, 255, .09); }
.ft-bottom-in {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 18px;
  padding-bottom: 18px;
  font-size: 13px;
}
.ft-legal { display: flex; gap: 18px; flex-wrap: wrap; color: #8ba0aa; }
.ft-contact { display: flex; gap: 20px; flex-wrap: wrap; }
.ft-contact a { color: #a9bcc4; }
.ft-contact a:hover { color: #fff; text-decoration: none; }
.ft-contact i { margin-right: 6px; opacity: .8; }

@media (max-width: 900px) {
  .ft-in { grid-template-columns: 1fr 1fr; gap: 30px; }
  .ft-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .ft-in { grid-template-columns: 1fr; gap: 26px; }
  .ft-bottom-in { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ============================================================
   ΑΡΘΡΑ
   ========================================================= */

.bl-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
}

.bl {
  background: #fff;
  border: 1px solid var(--l-line);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.bl:hover {
  transform: translateY(-3px);
  border-color: #c9d8d0;
  box-shadow: 0 14px 34px rgba(27, 42, 51, .1);
}
.bl-link { display: block; color: inherit; }
.bl-link:hover { text-decoration: none; }

/* Το πρώτο άρθρο πιάνει δύο στήλες: είναι το πιο πρόσφατο και θέλουμε
   να το δει κανείς πριν σκρολάρει. */
.bl.is-lead { grid-column: span 2; }
.bl.is-lead .bl-link { display: grid; grid-template-columns: 1.1fr 1fr; }
.bl.is-lead .bl-img { height: 100%; min-height: 230px; }
.bl.is-lead h2 { font-size: 22px; }

.bl-img { height: 180px; overflow: hidden; background: var(--l-mist); }
.bl-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bl-img.is-blank {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #eef2ee 0%, #f7f3ec 100%);
}
.bl-img.is-blank span {
  font-family: var(--l-display);
  font-size: 40px;
  color: rgba(44, 122, 102, .3);
}

.bl-body { padding: 20px 22px 22px; }
.bl-cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--l-pine-d);
  background: rgba(44, 122, 102, .11);
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.bl h2 {
  font-size: 18px;
  line-height: 1.32;
  margin: 0 0 8px;
  letter-spacing: -.015em;
}
.bl p { font-size: 14.5px; color: var(--l-ink-2); line-height: 1.6; margin: 0 0 12px; }
.bl-meta { font-size: 12.5px; color: #8b979d; }

.bl-empty { text-align: center; padding: 50px 20px; color: var(--l-ink-2); }
.bl-empty i { font-size: 34px; color: rgba(44, 122, 102, .3); margin-bottom: 14px; }
.bl-empty h2 { margin: 0 0 8px; }

/* ---------- Η σελίδα του άρθρου ---------- */

.ar-head { padding: 44px 0 26px; background: linear-gradient(178deg, var(--l-mist) 0%, #fdfbf7 100%); }
.ar-crumbs { font-size: 13px; color: #8b979d; margin-bottom: 16px; }
.ar-crumbs a { color: var(--l-pine-d); }
.ar-crumbs span { margin: 0 6px; }
.ar-head h1 {
  font-size: clamp(27px, 3.6vw, 40px);
  line-height: 1.14;
  letter-spacing: -.026em;
  margin: 4px 0 14px;
}
.ar-lead { font-size: 18px; line-height: 1.6; color: var(--l-ink-2); margin: 0 0 18px; }
.ar-meta { display: flex; gap: 20px; flex-wrap: wrap; font-size: 13.5px; color: #8b979d; }
.ar-meta i { margin-right: 6px; opacity: .75; }

.ar-cover {
  border-radius: 16px;
  overflow: hidden;
  margin: 8px 0 6px;
  box-shadow: 0 14px 40px rgba(27, 42, 51, .13);
}
.ar-cover img { width: 100%; height: auto; display: block; }

/* Τυπογραφία κειμένου: μεγαλύτερο μέγεθος και άνετο ύψος γραμμής.
   Ένα άρθρο διαβάζεται, δεν σαρώνεται. */
.ar-body {
  padding: 30px 0 50px;
  font-size: 17px;
  line-height: 1.78;
  color: #2b3b43;
}
.ar-body > *:first-child { margin-top: 0; }
.ar-body p { margin: 0 0 20px; }
.ar-body h2 {
  font-family: var(--l-display);
  font-size: 25px;
  letter-spacing: -.018em;
  margin: 38px 0 14px;
  line-height: 1.25;
}
.ar-body h3 { font-size: 19px; margin: 28px 0 10px; line-height: 1.3; }
.ar-body ul, .ar-body ol { margin: 0 0 20px; padding-left: 24px; }
.ar-body li { margin-bottom: 8px; }
.ar-body a { color: var(--l-pine-d); text-decoration: underline; text-underline-offset: 3px; }
.ar-body img { max-width: 100%; height: auto; border-radius: 12px; margin: 8px 0 20px; }
.ar-body blockquote {
  margin: 26px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--l-pine);
  color: var(--l-ink-2);
  font-style: italic;
}
.ar-body table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 15.5px; }
.ar-body th, .ar-body td { padding: 9px 12px; border-bottom: 1px solid var(--l-line); text-align: left; }
.ar-body th { font-weight: 650; background: var(--l-mist); }
.ar-body code {
  background: var(--l-mist);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 14.5px;
}

@media (max-width: 760px) {
  .bl.is-lead { grid-column: span 1; }
  .bl.is-lead .bl-link { grid-template-columns: 1fr; }
  .bl.is-lead .bl-img { min-height: 0; height: 180px; }
  .ar-body { font-size: 16.5px; }
}
.url-card .sec-card-head { margin-bottom: 0; }
.url-card .note { margin-top: 14px; }

/* Το κουμπί αποθήκευσης μιας μακριάς φόρμας.
   Κολλάει στο κάτω μέρος όσο κυλάς, με λευκό φόντο και δική του γραμμή,
   ώστε να μην ακουμπάει την επόμενη κάρτα. */
.form-actions-sticky {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);

  /* Οριζόντιο padding: ήταν «14px 0» και το κουμπί ακουμπούσε την
     άκρη της λευκής μπάρας. */
  padding: 14px 16px;

  margin-bottom: 28px;
  box-shadow: 0 -6px 18px rgba(22, 35, 46, .05);
}


/* ---------- Το σήμα ----------
   Το SVG φέρνει τα δικά του χρώματα, οπότε το πλαίσιο μένει διαφανές.
   Κρατάει μόνο το μέγεθος και τη στοίχιση. */

.ld-logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  background: none !important;
  border-radius: 0;
  box-shadow: none;
  color: inherit;
  font-size: 0;
}

.side-mark {
  background: none !important;
  box-shadow: none !important;
  width: auto;
  height: auto;
  font-size: 0;
}

/* Το σήμα του admin κρατά το μπλε πλαίσιο με το εικονίδιο ασπίδας */
.side-admin .side-mark {
  width: 32px;
  height: 32px;
  font-size: 13px;
  background: linear-gradient(140deg, #4a6b9a 0%, #34527d 100%) !important;
  box-shadow: 0 2px 8px rgba(52,82,125,.42) !important;
}

/* ============================================================
   ΜΕΝΟΥ ΚΙΝΗΤΟΥ ΣΤΙΣ ΔΗΜΟΣΙΕΣ ΣΕΛΙΔΕΣ
   ========================================================= */

.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 9px;
  margin-left: auto;
  border-radius: 11px;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-burger span {
  display: block;
  height: 2px;
  background: var(--l-ink);
  border-radius: 2px;
  transition: transform .22s ease, opacity .18s ease;
}
.ld-biz-page .nav-burger span { background: #fff; }
.nav-burger:hover { background: rgba(27, 42, 51, .06); }

/* Το εικονίδιο γίνεται ✕ όταν ανοίξει */
.nav-toggle:checked ~ .ld-nav .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle:checked ~ .ld-nav .nav-burger span:nth-child(2) { opacity: 0; }
.nav-toggle:checked ~ .ld-nav .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Το συρτάρι ---------- */

.nav-drawer {
  display: none;
  overflow: hidden;
  max-height: 0;
  transition: max-height .28s cubic-bezier(.22, .9, .3, 1);
  background: #fff;
  border-top: 1px solid var(--l-line);
}
.ld-biz-page .nav-drawer { background: #16232e; border-top-color: rgba(255,255,255,.1); }

.nav-toggle:checked ~ .ld-nav .nav-drawer { max-height: 520px; }

.nav-drawer-in { padding: 16px 24px 22px; }

.nav-drawer-aud {
  display: flex;
  width: 100%;
  margin-bottom: 14px;
}
.nav-drawer-aud a { flex: 1; text-align: center; }

.nav-drawer-link {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--l-ink);
  padding: 12px 4px;
  border-bottom: 1px solid var(--l-line);
}
.nav-drawer-link:hover { color: var(--l-pine-d); text-decoration: none; }
.ld-biz-page .nav-drawer-link { color: #fff; border-bottom-color: rgba(255,255,255,.1); }

.nav-drawer-cta { display: flex; gap: 10px; margin-top: 18px; }
.nav-drawer-cta a { flex: 1; justify-content: center; }

.nav-veil { display: none; }

/* ---------- Το στένεμα ---------- */

@media (max-width: 1080px) {
  /* Πρώτα φεύγουν οι σύνδεσμοι: ο διακόπτης κοινού και τα κουμπιά
     είναι πιο σημαντικά. */
  .ld-nav-in { gap: 16px; }
  .ld-links { display: none; }
  .aud-switch a { font-size: 12.5px; padding: 6px 12px; }
}

@media (max-width: 860px) {
  /* Μετά φεύγουν και τα υπόλοιπα — μένει λογότυπο και χάμπουργκερ. */
  .ld-nav-in { min-height: 60px; padding: 0 18px; gap: 12px; }
  .ld-nav-in .aud-switch,
  .ld-nav-in .ld-actions { display: none; }
  .nav-burger { display: flex; }
  .nav-drawer { display: block; }

  .ld-logo { font-size: 15.5px; }
  .ld-biz-badge { display: inline-block; font-size: 9px; padding: 2px 7px; margin-left: 6px; }
}

@media (max-width: 380px) {
  .ld-logo { font-size: 14px; gap: 7px; }
  .ld-biz-badge { display: none; }
  .nav-drawer-cta { flex-direction: column; }
}

/* ============================================================
   ΤΟ ΜΕΝΟΥ ΛΟΓΑΡΙΑΣΜΟΥ
   ========================================================= */

.acct { position: relative; }
.acct summary { list-style: none; cursor: pointer; }
.acct summary::-webkit-details-marker { display: none; }

.acct-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.acct-caret {
  width: 11px;
  height: 8px;
  transition: transform .2s ease;
  opacity: .85;
}
.acct[open] .acct-caret { transform: rotate(180deg); }

.acct-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  min-width: 268px;
  background: #fff;
  border: 1px solid var(--l-line);
  border-radius: 14px;
  padding: 7px;
  box-shadow: 0 16px 44px rgba(27, 42, 51, .16);
  animation: acctIn .16s cubic-bezier(.2, .9, .3, 1);
}
@keyframes acctIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* Μυτούλα προς το κουμπί, ώστε να φαίνεται από πού βγήκε */
.acct-menu::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 22px;
  width: 11px;
  height: 11px;
  background: #fff;
  border-left: 1px solid var(--l-line);
  border-top: 1px solid var(--l-line);
  transform: rotate(45deg);
}

.acct-menu a {
  display: block;
  padding: 10px 13px;
  border-radius: 9px;
  color: var(--l-ink);
  transition: background .13s ease;
}
.acct-menu a:hover { background: var(--l-mist); text-decoration: none; }
.acct-menu strong { display: block; font-size: 14.5px; font-weight: 620; }
.acct-menu span { display: block; font-size: 12.5px; color: var(--l-ink-2); margin-top: 1px; }

.acct-sep { height: 1px; background: var(--l-line); margin: 6px 9px; }

.acct-new:hover { background: rgba(44, 122, 102, .1) !important; }
.acct-new strong { color: var(--l-pine-d); }

/* Σε σκούρο περιβάλλον το μενού μένει λευκό — είναι επιφάνεια πάνω από
   τη σελίδα, όχι κομμάτι της μπάρας. */
.ld-biz-page .acct-menu { background: #fff; }
.ld-biz-page .acct-menu::before { background: #fff; }

@media (max-width: 860px) {
  .acct { display: none; }
}

/* ============================================================
   Η ΕΤΑΙΡΙΚΗ ΚΑΡΤΑ ΤΙΜΩΝ
   ========================================================= */

.bplan { max-width: none; }

.bplan-grid {
  display: grid;
  grid-template-columns: 6fr 6fr;   /* μισά μισά */
  gap: 40px;
  align-items: start;
}

.bplan-price h3 { margin: 0 0 6px; }
.bplan-price .ld-tier-table { margin-top: 14px; }
.bplan-cta { width: 100%; justify-content: center; margin-top: 20px; }

/* Λεπτή γραμμή που χωρίζει τιμή από περιεχόμενο */
.bplan-feats {
  border-left: 1px solid var(--l-line);
  padding-left: 38px;
}
.bplan-feats h4 {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--l-ink-2);
}

.bplan-list {
  column-count: 2;
  column-gap: 30px;
  margin: 0;
}
.bplan-list li {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

@media (max-width: 1080px) {
  .bplan-list { column-gap: 24px; }
}
@media (max-width: 900px) {
  .bplan-grid { grid-template-columns: 1fr; gap: 26px; }
  .bplan-feats { border-left: 0; padding-left: 0; border-top: 1px solid var(--l-line); padding-top: 24px; }
}
@media (max-width: 560px) {
  .bplan-list { column-count: 1; }
}

/* ============================================================
   ΑΙΤΗΜΑΤΑ ΥΠΟΣΤΗΡΙΞΗΣ
   ========================================================= */

.tk-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: wrap;
}
.tk-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 3px;
}
.tk-meta { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* Στοιχεία επικοινωνίας στο admin: όλα σε ένα σημείο, ώστε να μπορείς
   να σηκώσεις τηλέφωνο χωρίς να ψάξεις. */
.tk-who {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px 26px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
  font-size: 14px;
}
.tk-k {
  display: block;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 650;
  margin-bottom: 2px;
}

/* ---------- Το νήμα ---------- */

.tk-thread { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }

.tk-msg {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 15px 18px;
  max-width: 82%;
}
/* Ο χρήστης αριστερά, η υποστήριξη δεξιά — όπως σε συνομιλία. */
.tk-msg.is-user { align-self: flex-start; border-left: 3px solid var(--line); }
.tk-msg.is-admin {
  align-self: flex-end;
  background: linear-gradient(120deg, #f4f9f7 0%, #fff 60%);
  border-left: 3px solid var(--accent);
}

.tk-msg-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 7px;
}
.tk-msg-head strong { color: var(--ink); font-size: 13.5px; }
.tk-msg-body { font-size: 14.5px; line-height: 1.62; }

.tk-file {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 11px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-dark);
  background: rgba(29, 111, 92, .08);
  padding: 6px 12px;
  border-radius: 8px;
}
.tk-file:hover { background: rgba(29, 111, 92, .15); text-decoration: none; }

/* ---------- Η λίστα ---------- */

.tk-list { display: flex; flex-direction: column; gap: 8px; }

.tk-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 16px;
  color: var(--ink);
  transition: border-color .15s ease, transform .15s ease;
}
.tk-row:hover { border-color: #c7d5cd; transform: translateY(-1px); text-decoration: none; }
.tk-row.is-new { border-left: 3px solid var(--accent); background: #fafcfb; }

.tk-row-body { flex: 1; min-width: 0; }
.tk-row-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 620;
  font-size: 15px;
  flex-wrap: wrap;
}
.tk-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .tk-msg { max-width: 100%; }
}

/* ============================================================
   ΕΠΙΛΟΓΗ ΠΛΑΝΟΥ
   ========================================================= */

.pick-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  margin-top: 20px;
}

.pick {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 20px 18px;
  display: flex;
  flex-direction: column;
}
.pick.is-star { border-color: var(--accent); box-shadow: 0 8px 26px rgba(29,111,92,.14); }

.pick-badge {
  position: absolute;
  top: -10px;
  left: 18px;
  background: var(--accent);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 3px 11px;
  border-radius: 999px;
}

.pick-name { font-size: 17px; font-weight: 680; letter-spacing: -.015em; }

.pick-price { display: flex; align-items: baseline; gap: 7px; margin-top: 10px; }
.pick-price strong {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.pick-price span { font-size: 13.5px; color: var(--muted); }
.pick-alt { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

.pick-feats {
  font-size: 12.5px;
  color: var(--muted);
  margin: 14px 0 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line-2);
}
.pick-miss { color: #a4691f; font-weight: 600; }

.pick-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  flex: 1;

  /* Δύο στήλες: δεκαεπτά δυνατότητες σε μία σειρά έκαναν την κάρτα
     τρεις οθόνες ψηλή, με τη μισή να είναι κενό δεξιά. */
  column-count: 2;
  column-gap: 22px;
}
.pick-list li {
  font-size: 13px;
  padding: 3px 0 3px 18px;
  position: relative;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
.pick-list li::before {
  position: absolute;
  left: 0;
  font-weight: 700;
}
.pick-list li.yes::before { content: "✓"; color: var(--accent); }
.pick-list li.no::before  { content: "−"; color: #ccd5d0; }
.pick-list li.no { color: #a4b0b2; }

.pick-cta { width: 100%; justify-content: center; }
.price-foot {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}
.price-foot strong { color: var(--ink); }

/* ---------- Κατάλογος δυνατοτήτων στην εγγραφή ---------- */

.pc-more { margin-top: 10px; }
.pc-more summary {
  list-style: none;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--muted);
  padding-top: 10px;
  border-top: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.pc-more summary::-webkit-details-marker { display: none; }

/* Βελάκι από CSS, ώστε να μη χρειάζεται εικονίδιο */
.pc-more summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .18s ease;
  margin-left: auto;
}
.pc-more[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.pc-more summary:hover { color: var(--ink); }

/* Χωρίς εσωτερική κύλιση.

   Είχε «max-height: 210px» γιατί η λίστα άνοιγε με κλικ και έπρεπε να
   χωρέσει κάπου. Τώρα είναι μόνιμα ανοιχτή: μια μπάρα κύλισης μέσα σε
   κάθε κάρτα θα έκρυβε ακριβώς αυτό που ήρθε να συγκρίνει ο πελάτης. */
.pc-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
.pc-list li {
  font-size: 12.5px;
  line-height: 1.5;
  padding: 3px 0 3px 17px;
  position: relative;
}
.pc-list li::before { position: absolute; left: 0; font-weight: 700; }
.pc-list li.yes::before { content: "✓"; color: var(--accent); }
.pc-list li.no::before  { content: "−"; color: #ccd5d0; }
.pc-list li.no { color: #a4b0b2; }
.badge-prio {
  background: linear-gradient(120deg, #e6c15e 0%, #d2a03c 100%);
  color: #3a2c08;
  font-weight: 700;
}
.badge-prio i { font-size: 9px; margin-right: 4px; }

/* ============================================================
   ΤΑ ΣΤΑΔΙΑ ΤΗΣ ΠΛΗΡΩΜΗΣ
   ========================================================= */

.pay-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.pay-steps li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  position: relative;
}

/* Ολοκληρωμένο: πράσινο. Τρέχον: τονισμένο. Επόμενο: ξεθωριασμένο. */
.pay-steps li.is-done { border-color: rgba(29,111,92,.32); background: #f6faf8; }
.pay-steps li.is-now  { border-color: var(--accent); box-shadow: 0 4px 16px rgba(29,111,92,.14); }
.pay-steps li:not(.is-done):not(.is-now) { opacity: .55; }

.ps-n {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--line);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pay-steps li.is-done .ps-n { background: var(--accent); color: #fff; }
.pay-steps li.is-now  .ps-n { background: var(--ink); color: #fff; }

.pay-steps strong { display: block; font-size: 14.5px; }
.pay-steps span   { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.5; }

.pay-resend {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 6px 0 20px;
}

@media (max-width: 760px) {
  .pay-steps { grid-template-columns: 1fr; }
  .pay-steps li:not(.is-done):not(.is-now) { opacity: .7; }
}

@media (max-width: 620px) {
  .pick-list { column-count: 1; }
}

/* Επιβεβαίωση αποσύνδεσης στην αρχική.
   Διακριτική λωρίδα και όχι πλαίσιο: ο χρήστης φεύγει, δεν χρειάζεται
   να του κλέψουμε την προσοχή. */
.bye-toggle { position: absolute; opacity: 0; pointer-events: none; }

.bye-bar {
  background: rgba(44, 122, 102, .1);
  border-bottom: 1px solid rgba(44, 122, 102, .2);
  font-size: 14px;
}
.bye-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 11px;
  padding-bottom: 11px;
}
.bye-bar > .ld-in > span > i { color: var(--l-pine-d); margin-right: 7px; }

/* Το κουμπί κλεισίματος */
.bye-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: -4px -6px -4px 0;
  border-radius: 8px;
  color: var(--l-ink-2);
  cursor: pointer;
  font-size: 14px;
  transition: background .14s ease, color .14s ease;
}
.bye-x:hover { background: rgba(44, 122, 102, .14); color: var(--l-pine-d); }

/* Μόλις τσεκαριστεί, η λωρίδα φεύγει εντελώς — όχι απλώς αόρατη. */
.bye-toggle:checked + .bye-bar { display: none; }

/* ---------- Ζωντανά σύνολα χιλιοστών ---------- */

.sum-cell {
  font-variant-numeric: tabular-nums;
  transition: color .15s ease;
}
.sum-cell.is-ok  { color: var(--accent-dark); }
.sum-cell.is-off { color: var(--flag); }

.sum-diff {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  margin-top: 2px;
  white-space: nowrap;
}
.sum-diff.is-ok  { color: var(--accent); }
.sum-diff.is-off { color: var(--flag); }

/* ============================================================
   ΔΟΚΙΜΑΣΤΙΚΗ ΠΡΟΒΟΛΗ
   ========================================================= */

/* ---------- Οι κάρτες στην αρχική ---------- */

.demo-pick-row { display: flex; gap: 10px; flex-wrap: wrap; }

.demo-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: 1px solid var(--l-line);
  border-radius: 11px;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--l-ink);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.demo-chip:hover {
  border-color: var(--l-pine);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(44, 122, 102, .14);
  text-decoration: none;
}
.demo-chip i { font-size: 14px; }

/* Ίδια χρώματα με τις κάρτες των μοντέλων, ώστε να συνδέονται οπτικά */
.demo-chip.mode-none     i { color: #5e7076; }
.demo-chip.mode-central  i { color: #a4691f; }
.demo-chip.mode-hours    i { color: var(--l-pine-d); }
.demo-chip.mode-calories i { color: #4c5da3; }

/* ---------- Η λωρίδα μέσα στην εφαρμογή ---------- */

.demo-bar {
  background: linear-gradient(100deg, #1f5c4c 0%, #2f8a72 100%);
  color: #fff;
  font-size: 14px;
}
/* Όταν μόλις απέτυχε αποθήκευση, γίνεται βερικοκί: ξεχωρίζει από τη
   μόνιμη λωρίδα, ώστε να προσεχθεί χωρίς να μοιάζει με σφάλμα. */
.demo-bar.is-hit { background: linear-gradient(100deg, #b4651f 0%, #cf8f63 100%); }

.demo-in {
  max-width: 1200px;
  margin: 0 auto;
  padding: 11px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.demo-in i { margin-right: 8px; opacity: .9; }

.demo-cta {
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
  font-weight: 620;
  font-size: 13.5px;
  padding: 7px 16px;
  border-radius: 9px;
  white-space: nowrap;
  transition: background .15s ease;
}
.demo-cta:hover { background: rgba(255, 255, 255, .28); text-decoration: none; }

@media (max-width: 620px) {
  .demo-in { padding: 10px 16px; font-size: 13px; }
  .demo-cta { width: 100%; text-align: center; }
  .demo-chip { flex: 1 1 100%; justify-content: center; }
}

/* Η ενότητα demo της αρχικής */
.ld-sec .demo-pick-row { margin-top: 24px; }

.demo-note {
  margin: 22px 0 0;
  font-size: 13.5px;
  color: var(--l-ink-2);
}
.demo-note i { color: var(--l-pine); margin-right: 7px; font-size: 12px; }

/* ============================================================
   Η ΕΝΟΤΗΤΑ DEMO
   ========================================================= */

/* Δικό της φόντο, διαφορετικό από το ld-sec-alt των τιμών: σκούρο με
   ζεστό τόνο, ώστε να σπάει τη σειρά των ανοιχτόχρωμων ενοτήτων. */
.ld-demo {
  background:
    radial-gradient(720px 400px at 88% 20%, rgba(207,143,99,.16), transparent 62%),
    linear-gradient(160deg, #16232e 0%, #1d3b3a 100%);
  color: #dfe8ea;
}
.ld-demo h2 { color: #fff; }
.ld-demo .ld-sec-lead { color: #a9bcc4; margin-bottom: 28px; }
.ld-demo .ld-eyebrow.dark {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.18);
  color: #cfe0d7;
}

.demo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.demo-text { min-width: 0; }

.ld-demo .demo-chip {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
  color: #fff;
}
.ld-demo .demo-chip:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.3);
  box-shadow: none;
}
.ld-demo .demo-chip i { color: #8fd9c3; }
.ld-demo .demo-note { color: #8fa3ab; }
.ld-demo .demo-note i { color: #8fd9c3; }

/* ---------- Η εικόνα ---------- */

.demo-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);

  /* Ελαφρύ περίγραμμα: το στιγμιότυπο έχει ανοιχτό φόντο και χωρίς
     αυτό «λιώνει» στο σκούρο της ενότητας. */
  border: 1px solid rgba(255, 255, 255, .12);
}

/* Απλοποιημένη όψη, όταν δεν έχει ανέβει στιγμιότυπο */
.shot {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.38);
}
.shot-bar {
  display: flex;
  gap: 6px;
  padding: 9px 12px;
  background: #eef1ec;
  border-bottom: 1px solid #e0e5df;
}
.shot-bar span { width: 9px; height: 9px; border-radius: 50%; background: #ccd4cd; }

.shot-body { display: flex; min-height: 240px; }

.shot-side { width: 30%; background: #16232e; padding: 14px 12px; }
.shot-logo { height: 9px; width: 62%; border-radius: 3px; background: rgba(255,255,255,.5); margin-bottom: 16px; }
.shot-li { height: 7px; border-radius: 3px; background: rgba(255,255,255,.14); margin-bottom: 11px; }
.shot-li.is-on { background: rgba(143,217,195,.7); width: 78%; }

.shot-main { flex: 1; padding: 16px 18px; }
.shot-h { height: 11px; width: 44%; border-radius: 4px; background: #dfe4dd; margin-bottom: 16px; }

.shot-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.shot-kpi {
  border: 1px solid #e6eae4;
  border-radius: 8px;
  padding: 9px 10px;
  background: #fbfcfa;
}
.shot-kpi b { display: block; font-size: 13px; color: #16232e; letter-spacing: -.02em; }
.shot-kpi span { display: block; font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: #97a3a8; margin-top: 2px; }
.shot-kpi.is-flag b { color: #b4531f; }

.shot-rows { border-top: 1px solid #eef1ec; }
.shot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f2f4f1;
  font-size: 11px;
}
.shot-row em { font-style: normal; font-weight: 650; color: #16232e; }
.shot-row .tag {
  font-style: normal;
  font-size: 9px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef1ec;
  color: #6c7a80;
}
.shot-row .tag.is-ok  { background: rgba(44,122,102,.14); color: #1f5c4c; }
.shot-row .tag.is-mut { background: rgba(108,126,192,.14); color: #4c5da3; }

@media (max-width: 900px) {
  .demo-grid { grid-template-columns: 1fr; gap: 30px; }
  .demo-shot { order: -1; }
  .shot-body { min-height: 0; }
}

/* ============================================================
   ΔΙΑΧΩΡΙΣΤΙΚΕΣ ΓΡΑΜΜΕΣ ΜΕΤΑΞΥ ΕΝΟΤΗΤΩΝ
   ========================================================= */

/* Γραμμή σε ΚΑΘΕ ενότητα.

   Πρώτα το είχα με τον επιλογέα «.ld-sec + .ld-sec», που απαιτεί οι δύο
   ενότητες να είναι διπλανές. Ανάμεσα σε μερικές όμως παρεμβάλλεται
   <script> — οπότε η γειτνίαση σπάει και η γραμμή έλειπε ακριβώς εκεί.

   Η απόδοση σε όλες και η αφαίρεση από τις εξαιρέσεις είναι πιο
   προβλέψιμη: δεν εξαρτάται από το τι θα μπει ανάμεσα αύριο. */
.ld-sec,
.ld-final {
  border-top: 1px solid rgba(27, 42, 51, .08);
}

/* Η σκούρα δεν παίρνει γραμμή, ούτε η επόμενη μετά από αυτήν: εκεί ο
   διαχωρισμός γίνεται από το ίδιο το χρώμα. */
.ld-demo { border-top: 0; }
.ld-demo + .ld-sec { border-top: 0; }

/* Οδηγός κλειδιών στο admin.

   Χρησιμοποιεί το ίδιο «details.help» με τη σελίδα άρθρων — ένα μοτίβο
   για τα ανοιγοκλειόμενα βοηθήματα, όχι δύο παρόμοια. Εδώ μένουν μόνο
   οι κανόνες του πίνακα που περιέχει. */
.hero-keys { margin-top: 12px; }
.hero-keys > summary { font-weight: 600; }
.hero-keys > table,
.hero-keys > p { margin-left: 15px; margin-right: 15px; }
.hero-keys > *:last-child { margin-bottom: 14px; }

.hero-keys table { width: auto; border-collapse: collapse; }
.hero-keys td { padding: 4px 0; vertical-align: top; }
.hero-keys td:first-child { width: 130px; white-space: nowrap; }
.hero-keys code {
  background: rgba(22, 35, 46, .07);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
}
.hero-keys p { margin: 0 0 8px; line-height: 1.55; }
.hero-keys[open] > p:last-child { margin-bottom: 0; }

/* Επαναφορά προεπιλογών ενότητας */
.reset-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0 0;
}
.reset-done {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-dark);
}

/* Ο πίνακας δυνατοτήτων στο admin */
.feat-table td { vertical-align: middle; }
.feat-table input[type="text"],
.feat-table input[type="number"] { margin: 0; }
.feat-code {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  letter-spacing: .02em;
}

/* Δείκτης προς τη σελίδα που διαχειρίζεται το περιεχόμενο */
.sec-goto {
  margin: 12px 0 0;
  padding: 10px 13px;
  background: var(--paper);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  font-size: 13.5px;
}
.sec-goto i { color: var(--accent); margin-right: 7px; font-size: 11px; }

/* Λογαριασμός με εσωτερική σημείωση */
.btn.has-note {
  border-color: #d9b96a;
  background: #fdf8ec;
  color: #8a6a1f;
}
.btn.has-note:hover { background: #f8f0dc; }
.demo-acts { display: inline-flex; align-items: center; gap: 14px; }
.demo-out {
  color: rgba(255, 255, 255, .78);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.demo-out:hover { color: #fff; }
.acct-out:hover { background: rgba(180, 45, 45, .08) !important; }
.acct-out strong { color: #96302f; }

/* ============================================================
   Η ΜΠΑΡΑ ΤΩΝ ΣΕΛΙΔΩΝ ΕΙΣΟΔΟΥ
   ========================================================= */

.auth-nav {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--l-line);
  position: sticky;
  top: 0;
  z-index: 40;
}
.auth-nav-in {
  max-width: 1120px;
  margin: 0 auto;
  padding: 13px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.auth-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--l-ink-2);
  padding: 7px 13px;
  border-radius: 9px;
  transition: color .14s ease, background .14s ease;
}
.auth-back:hover { color: var(--l-ink); background: rgba(27, 42, 51, .06); text-decoration: none; }
.auth-back i { font-size: 12px; }

/* Η σελίδα δεν κεντράρεται πια κατακόρυφα: με μπάρα από πάνω, το
   κέντρο πέφτει πολύ χαμηλά και η φόρμα «κρέμεται». */
.auth-page { min-height: calc(100vh - 58px); align-items: flex-start; padding-top: 44px; }

.auth-brand .name { font-size: 26px; letter-spacing: -.02em; }

@media (max-width: 560px) {
  .auth-nav-in { padding: 11px 16px; }
  .auth-page { padding-top: 28px; }
}

/* Ένδειξη αποθηκευτικού χώρου */
.stor { min-width: 190px; }
.stor-bar {
  height: 7px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.stor-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width .3s ease;
}
.stor-fill.is-warn { background: #d9a13c; }
.stor-fill.is-full { background: var(--danger); }
.stor-txt { font-size: 12px; color: var(--muted); margin-top: 5px; text-align: right; }

/* ---------- Η στήλη χώρου στους συνδρομητές ---------- */

.stor-cell { margin: 0; }
.stor-cell .stor-bar { height: 6px; margin-bottom: 6px; }

.stor-line {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  white-space: nowrap;
}
.stor-used { font-weight: 620; font-variant-numeric: tabular-nums; }

/* Στενό πεδίο: το όριο είναι διψήφιο ή τριψήφιο, δεν χρειάζεται άλλο */
.stor-in {
  width: 62px;
  padding: 3px 6px !important;
  font-size: 12.5px !important;
  text-align: right;
  margin: 0 !important;
}

.stor-go { padding: 4px 8px; line-height: 1; }
.stor-note {
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #a4691f;
  font-weight: 700;
  margin-top: 4px;
}



/* ============================================================
   ΚΕΦΑΛΙΔΑ — ΦΩΤΟΓΡΑΦΙΑ ΣΕ ΟΛΟ ΤΟ ΠΛΑΤΟΣ
   ========================================================= */

.ld-hero {
  position: relative;
  padding: 0;
  background: var(--l-mist);
  overflow: visible;
}

.ld-hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.ld-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
  display: block;
}

/* Το πέπλο σβήνει από αριστερά προς τα δεξιά: το κείμενο κάθεται σε
   σχεδόν αδιαφανές φόντο, ενώ η φωτογραφία μένει καθαρή δεξιά. */
.ld-hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg,
      rgba(244, 247, 243, .985) 0%,
      rgba(244, 247, 243, .95)  34%,
      rgba(244, 247, 243, .55)  56%,
      rgba(244, 247, 243, .12)  74%,
      rgba(244, 247, 243, 0)    88%),
    linear-gradient(180deg, rgba(244,247,243,.35) 0%, transparent 26%);
}

.ld-hero-in {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0px 24px 44px;
  min-height: 580px;
  display: flex;
  align-items: center;
}
.ld-hero-text { max-width: 560px; }
.ld-hero-text > .ld-eyebrow { align-self: flex-start; }

/* ---------- Τα έντυπα ---------- */

/* Μέσα στο πλαίσιο του κειμένου, ώστε το «κάτω» να είναι το κάτω άκρο
   της φωτογραφίας και όχι της ενότητας.

   Πριν μετριόταν από το κάτω άκρο της κεφαλίδας, που περιλαμβάνει τη
   λωρίδα αριθμών — και τα χαρτιά κρέμονταν πάνω σε δύο νούμερα. */
/* Οι παλιοί κανόνες αυτής της ενότητας αφαιρέθηκαν.

   Όριζαν «flex-direction: column» για τη δομή με τις στοίβες, και ο
   νέος κανόνας παρακάτω δεν το επανέφερε — οπότε τα δύο έντυπα
   στοιβάζονταν κατακόρυφα αντί να μπουν δίπλα-δίπλα, έβγαιναν έξω από
   την κεφαλίδα και κάλυπταν ό,τι ακολουθούσε.

   Το ενεργό μπλοκ είναι πιο κάτω, στην ενότητα «ΤΑ ΔΥΟ ΕΝΤΥΠΑ». */


/* Ο χώρος που χρειάζεται η επόμενη ενότητα ώστε να μην καλυφθεί */
.ld-strip { padding-bottom: 0; }

@media (max-width: 1080px) {
  .ld-hero-veil {
    background: linear-gradient(120deg,
      rgba(244,247,243,.985) 0%, rgba(244,247,243,.94) 46%,
      rgba(244,247,243,.62) 68%, rgba(244,247,243,.3) 100%);
  }
  /* Χωρίς scale εδώ: τα μεγέθη ρυθμίζονται πλέον με πραγματικά πλάτη
     στα breakpoints των εντύπων, ώστε να μη θολώνει το κείμενο. */
}

/* 1020 και όχι 940: με τα μεγαλύτερα χαρτιά (410px αντί για 350) το
   κείμενο και τα έντυπα συγκρούονται ήδη στα 1000. Κάθε φορά που
   μεγαλώνει ένα από τα δύο, το σημείο αλλαγής πρέπει να ανέβει. */


/* Η λωρίδα αριθμών κάθεται μέσα στην κεφαλίδα, οπότε χρειάζεται δικό
   της αδιαφανές φόντο — αλλιώς οι αριθμοί πέφτουν πάνω στη
   φωτογραφία και δεν διαβάζονται. Έτσι η φωτογραφία «τελειώνει» εκεί. */
/* Σκούρα λωρίδα: κλείνει τη φωτογραφία με βάρος αντί για λευκό κενό,
   και τα νούμερα διαβάζονται καθαρά. Το ίδιο ανθρακί με το υποσέλιδο,
   ώστε η σελίδα να ανοίγει και να κλείνει με τον ίδιο τόνο. */
.ld-hero .ld-strip {
  position: relative;
  z-index: 2;
  background: linear-gradient(100deg, #16232e 0%, #1d3b3a 100%);
  border: 0;
}
.ld-hero .ld-strip-in strong { color: #8fd9c3; }
.ld-hero .ld-strip-in span   { color: #a9bcc4; }

/* ============================================================
   ΤΑ ΔΥΟ ΕΝΤΥΠΑ ΤΗΣ ΚΕΦΑΛΙΔΑΣ
   ========================================================= */

.ld-hero-docs {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  min-width: 510px;
  min-height: 300px;
}

/* Στη μεγάλη οθόνη δεν κόβει τίποτα: τα φύλλα φαίνονται ολόκληρα και
   το περιτύλιγμα απλώς τα περιέχει. Το κόψιμο ενεργοποιείται μόνο σε
   στενή οθόνη, όπου δεν υπάρχει ύψος για ολόκληρα έντυπα. */
/* Και στη μεγάλη οθόνη κόβει οριζόντια: τα φύλλα είναι 360 pixel ψηλά
   μέσα σε περιτύλιγμα 240, οπότε το κάτω μέρος τους κόβεται σε ίσια
   γραμμή, όσο γερμένα κι αν είναι. */
/* 480 και όχι 100%: το πλαίσιο είναι 510 και τα φύλλα άφηναν 110
   pixel κενά δεξιά έναντι μόλις 4 αριστερά. */
.ld-hero-clip {
  position: relative;
  width: 480px;
  max-width: 100%;
  margin-left: auto;
  min-height: 400px;
  height: 400px;
  overflow: hidden;
  border-bottom: 2px solid rgba(27, 42, 51, .85);
}

/* Ακυρώνονται ΟΛΕΣ οι θέσεις, όχι μόνο όσες ορίζω εγώ.

   Οι ίδιες κλάσεις «.ld-stack.is-back» χρησιμοποιούνται και στη σελίδα
   εταιρειών, με δικά τους «left» και «top» σε media queries. Αν δεν τα
   μηδενίσω ρητά, περνούν εδώ και σπρώχνουν τα φύλλα το ένα κάτω από το
   άλλο — ακριβώς αυτό που φαινόταν στο κινητό. */
.ld-hero-docs .ld-stack,
.ld-hero-docs .ld-stack.is-back,
.ld-hero-docs .ld-stack.is-front {
  position: absolute;
  width: 280px;
  left: auto;
  bottom: auto;

  /* Με «top» και όχι «bottom»: το φύλλο πρέπει να ξεπερνά το κάτω άκρο
     του περιτυλίγματος ώστε να κοπεί εκεί. */
  top: 34px;
}
/* Το πίσω φύλλο ξεκινά ψηλά και ΚΟΒΕΤΑΙ από τη γραμμή. */
/* Οι μετατοπίσεις μετρήθηκαν ώστε τα δύο φύλλα να κάθονται στο κέντρο
   του clip: 30 pixel κενό αριστερά, 34 δεξιά.

   Πριν άφηναν 110 δεξιά και 4 αριστερά — φαινόταν σαν να έχουν
   ξεχαστεί στην άκρη. */
.ld-hero-docs .ld-stack.is-back {
  right: 150px;
  transform: rotate(-3deg);
  z-index: 1;
}

/* Το μπροστινό τοποθετείται με «top», όπως ζητήθηκε.

   Το «bottom: auto» είναι απαραίτητο: αν έμεναν ορισμένα και τα δύο
   μαζί με ύψος, ο browser κρατά το top και αγνοεί το bottom — αλλά
   σιωπηλά, και η επόμενη αλλαγή θα φαινόταν να μην κάνει τίποτα. */
.ld-hero-docs .ld-stack.is-front {
  right: 34px;
  top: 100px;
  bottom: auto;
  transform: rotate(2.4deg);
  z-index: 2;
}

.ld-hero-docs .ld-paper,
.ld-hero-docs .ld-paper2 {
  width: 280px;
  height: 390px;
  border: 1px solid rgba(27, 42, 51, .07);
  border-radius: 8px;

  /* Ήπια σκιά: η δυνατή χρειαζόταν 29 pixel πάνω από το χαρτί και δεν
     χωρούσε μέσα στο κόψιμο. */
  box-shadow: 0 14px 32px rgba(27, 42, 51, .3);
}

.ld-hero-docs .ld-legend {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.ld-hero-docs .ld-paper-tag {
  border-radius: 9px;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(27, 42, 51, .1);
  box-shadow: 0 4px 14px rgba(27, 42, 51, .12);
  white-space: nowrap;
}

/* Οι αριθμοί λευκοί */
.ld-hero .ld-strip-in strong { color: #fff; }

@media (max-width: 1020px) {
  /* Ο γονέας γίνεται στήλη.

     Το .ld-hero-in είναι flex σε σειρά, και μόλις τα έντυπα πάψουν να
     είναι απόλυτα, γίνονται στοιχείο flex ΔΙΠΛΑ στο κείμενο — δύο
     πράγματα των 560 και 410 pixel σε οθόνη 390. Γι' αυτό έβγαιναν
     έξω από τη σελίδα. */
  .ld-hero-in {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 62px 24px 40px;
    min-height: 0;
  }
  .ld-hero-text { max-width: 100%; }
  .ld-hero-veil {
    background: linear-gradient(180deg,
      rgba(244,247,243,.97) 0%, rgba(244,247,243,.92) 52%,
      rgba(244,247,243,.86) 100%);
  }

  /* Σε στενή οθόνη μπαίνουν στη ροή, κάτω από το κείμενο. */
  .ld-hero-docs {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    flex-direction: column;
    align-items: center;
    gap: 0;
    overflow: visible;
  }

  /* Το περιτύλιγμα κόβει οριζόντια. Τα φύλλα μέσα είναι πολύ
     ψηλότερα από αυτό — ό,τι περισσεύει κόβεται σε ίσια γραμμή, όσο
     γερμένα κι αν είναι. */
  /* Ο αέρας πάνω από τα φύλλα δίνεται με το «top» τους (34px) και όχι
     με padding: τα φύλλα είναι απόλυτα, οπότε το padding δεν τα
     μετακινεί. Έτσι η σκιά τους σβήνει ομαλά αντί να κόβεται. */
  /* Ύψος 232 με τα φύλλα να ξεκινούν στα 52: μένουν 52 pixel πάνω
     τους, αρκετά για τη γωνία που ανεβάζει η κλίση (12px) και για τη
     σκιά (29px). Πριν είχαν 34 και κόβονταν και τα δύο. */
  .ld-hero-clip {
    position: relative;
    width: 100%;
    height: 220px;
    min-height: 220px;
    overflow: hidden;
    border-bottom: 2px solid rgba(27, 42, 51, .85);
  }

  .ld-hero-docs .ld-stack,
  .ld-hero-docs .ld-stack.is-back,
  .ld-hero-docs .ld-stack.is-front {
    position: absolute;
    right: auto;
    bottom: auto;
    width: 196px;
    margin: 0;
  }

  /* Πιο ήπια σκιά: η δυνατή χρειαζόταν 29 pixel πάνω από το χαρτί και
     δεν χωρούσε μέσα στο κόψιμο. */
  .ld-hero-docs .ld-paper,
.ld-hero-docs .ld-paper2 {
    box-shadow: 0 12px 26px rgba(27, 42, 51, .28);
  }

  /* Το ένα μέσα στο άλλο: το δεύτερο ξεκινά στα 100 pixel από το
     πρώτο, οπότε επικαλύπτονται κατά 78. */
  /* Λιγότερη επικάλυψη: το αριστερό πιο αριστερά, το δεξί πιο δεξιά. */
  /* Κενό 32px πάνω: αρκετό για τη γωνία της κλίσης (12px) και την
     ήπια σκιά (13px), χωρίς περιττό αέρα. */
  .ld-hero-docs .ld-stack.is-back {
    left: calc(50% - 184px);
    top: 32px;
    transform: rotate(-6deg);
    z-index: 1;
  }
  .ld-hero-docs .ld-stack.is-front {
    left: calc(50% - 42px);
    top: 38px;
    transform: rotate(8deg);
    z-index: 2;
  }

  /* Αναλογία 1:1,20 αντί για 1:1,46 — πιο κοντά στο σχήμα των
     φωτογραφιών, όπως ζητήθηκε. */
  .ld-hero-docs .ld-paper,
.ld-hero-docs .ld-paper2 {
    width: 196px;
    height: 236px;
    border-radius: 7px;
    border-bottom: 1px solid rgba(27, 42, 51, .07);
  }

  .ld-hero-docs .ld-paper-tag {
    white-space: normal;
    text-align: center;
    line-height: 1.3;
    flex: 0 1 auto;
    min-width: 0;
  }
}

@media (max-width: 620px) {
  /* Υπόλειμμα παλιάς εκδοχής αφαιρέθηκε: όριζε width 148 και
     «top: auto», ακυρώνοντας ολόκληρη τη ρύθμιση του κοψίματος. Γι'
     αυτό τα φύλλα φαίνονταν ολόκληρα αντί να κόβονται. */
  .ld-hero-docs .ld-paper-tag { font-size: 10.5px; padding: 5px 9px; }

  /* Τα κουμπιά σε μία γραμμή, με μικρότερα γράμματα ώστε να χωρέσουν
     και τα δύο χωρίς να τυλιχθούν. */
  .ld-hero .ld-cta { flex-wrap: nowrap; gap: 9px; }
  .ld-hero .ld-cta .ld-btn-lg {
    font-size: 14.5px;
    padding: 12px 16px;
    white-space: nowrap;
    flex: 0 1 auto;
  }
}

/* Κάτω από 420 οι κλίσεις κοστίζουν πολύ πλάτος: ένα φύλλο 138×196
   γυρισμένο 15 μοίρες πιάνει 184 pixel αντί για 138. Τα δύο μαζί
   ξεπερνούσαν την οθόνη. */
@media (max-width: 420px) {
  /* 196 και όχι 240: με 240 το φύλλο των 220 pixel κοβόταν μόλις κατά
     8, δηλαδή η γραμμή δεν έκοβε τίποτα ορατό. Τώρα κόβει 52, όσο και
     στις υπόλοιπες ζώνες. */
  .ld-hero-clip { height: 196px; min-height: 196px; }
  .ld-hero-docs .ld-stack,
  .ld-hero-docs .ld-stack.is-back,
  .ld-hero-docs .ld-stack.is-front { width: 194px; }
  .ld-hero-docs .ld-paper,
.ld-hero-docs .ld-paper2 { width: 194px; height: 220px; }
  .ld-hero-docs .ld-stack.is-back  { left: calc(50% - 166px); top: 28px; }
  .ld-hero-docs .ld-stack.is-front { left: calc(50% - 48px);  top: 34px; }
}

/* Κάτω από 390 τα φύλλα των 194 pixel δεν χωράνε με άνετη μετατόπιση:
   το ζευγάρι θέλει 341 pixel και υπάρχουν 335. Μικραίνουν λίγο, ώστε
   να μη χρειαστεί να τα στριμώξουμε το ένα μέσα στο άλλο. */
@media (max-width: 390px) {
  .ld-hero-docs .ld-stack,
  .ld-hero-docs .ld-stack.is-back,
  .ld-hero-docs .ld-stack.is-front { width: 176px; }
  .ld-hero-docs .ld-paper,
.ld-hero-docs .ld-paper2 { width: 176px; height: 200px; }
  .ld-hero-clip { height: 178px; min-height: 178px; }
  .ld-hero-docs .ld-stack.is-back  { left: calc(50% - 152px); top: 26px; }
  .ld-hero-docs .ld-stack.is-front { left: calc(50% - 44px);  top: 32px; }
  .ld-hero-docs .ld-paper-tag { font-size: 9.5px; padding: 4px 8px; }
  .ld-hero .ld-cta .ld-btn-lg { font-size: 13.5px; padding: 11px 13px; }
}


/* ============================================================
   ΦΟΝΤΟ ΕΝΟΤΗΤΑΣ ΑΠΟ ΤΟ ADMIN
   ========================================================= */

/* Το «position: relative» είναι απαραίτητο: χωρίς αυτό η εικόνα θα
   τοποθετούνταν σε σχέση με ολόκληρη τη σελίδα. */
.has-bg { position: relative; overflow: hidden; }

.sec-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.sec-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Πέπλο που κρατά τα κείμενα ευανάγνωστα ό,τι εικόνα κι αν ανέβει —
   σκοτεινή, φωτεινή ή πολύχρωμη. Χωρίς αυτό, η επιλογή εικόνας θα
   μπορούσε να καταστρέψει την ενότητα.

   Τρεις τόνοι, ώστε κάθε ενότητα να κρατά το χρώμα της: λευκή, μέντα
   ή σκούρα. */
.sec-bg-veil {
  position: absolute;
  inset: 0;
  z-index: 1;

  /* Οι τρεις εντάσεις έρχονται από τη βάση, υπολογισμένες στην PHP.
     Οι τιμές εδώ είναι εφεδρεία αν λείψουν. */
  --veil: .88;
  --veil-edge: .94;
  --veil-end: .92;
}

/* Δύο στρώματα ανά τόνο: ένα σταθερό ελαφρύ στις άκρες, ώστε να μη
   χάνεται η ανάγνωση στα άκρα ακόμα κι όταν κατεβάσεις την ένταση,
   και ένα ρυθμιζόμενο στο κέντρο. */
.sec-bg-veil.is-light {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, var(--veil-edge)) 0%,
    rgba(255, 255, 255, var(--veil)) 45%,
    rgba(255, 255, 255, var(--veil-end)) 100%);
}
.sec-bg-veil.is-alt {
  background: linear-gradient(180deg,
    rgba(251, 252, 251, var(--veil-edge)) 0%,
    rgba(244, 247, 243, var(--veil)) 45%,
    rgba(244, 247, 243, var(--veil-end)) 100%);
}
.sec-bg-veil.is-warm {
  background: linear-gradient(120deg,
    rgba(243, 247, 244, var(--veil-edge)) 0%,
    rgba(250, 245, 236, var(--veil)) 50%,
    rgba(251, 246, 239, var(--veil-end)) 100%);
}

/* Για ενότητες με σκούρο φόντο και λευκά γράμματα. Καμία σήμερα. */
.sec-bg-veil.is-dark {
  background: linear-gradient(180deg,
    rgba(22, 35, 46, var(--veil-edge)) 0%,
    rgba(22, 35, 46, var(--veil)) 45%,
    rgba(22, 35, 46, var(--veil-end)) 100%);
}

/* Το περιεχόμενο πάνω από το πέπλο. Όλες οι ενότητες χρησιμοποιούν
   «ld-in», οπότε ένας κανόνας αρκεί. */
.has-bg > .ld-in { position: relative; z-index: 2; }

/* Ομάδες εικόνων στο admin */
.img-group {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 26px 0 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line-2);
}
.img-group:first-of-type { margin-top: 6px; padding-top: 0; border-top: 0; }

/* Ένταση φόντου, μέσα στη στήλη πληροφοριών κάθε εικόνας */
.veil-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  flex-wrap: nowrap;
}
.veil-row label {
  margin: 0;
  white-space: nowrap;
  font-weight: 600;
  font-size: 12.5px;
}
.veil-row input {
  width: 62px;
  flex: 0 0 62px;
  padding: 4px 6px !important;
  margin: 0 !important;
  text-align: right;
  font-size: 12.5px !important;
}
.veil-row .muted { white-space: nowrap; }

/* Ένδειξη ενοικιαστή στη γραμμή διαμερίσματος */
.rent-tick {
  margin: 7px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.rent-tick input { margin-right: 5px; }

/* Διαχωρισμός ιδιοκτήτη / ενοικιαστή στο έντυπο */
.nb-split { margin-top: 12px; border: 0; border-top: 1px solid #dfe4dd; }
.nb-split td {
  width: 50%;
  padding: 9px 14px;
  font-size: 13px;
  border: 0;
}

/* Λεπτή γραμμή ανάμεσα στις δύο στήλες, ώστε να διαβάζονται ως δύο
   ξεχωριστά ποσά και όχι ως μία πρόταση. */
.nb-split td + td { border-left: 1px solid #dfe4dd; }

.nb-split .nb-hint {
  display: block;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ds-soft);
  margin-bottom: 2px;
}
.nb-split strong { font-size: 14px; }

/* ---------- Η στήλη «Ιδιοκτήτη» στο ειδοποιητήριο ---------- */

/* Μεγαλύτερα γράμματα και περισσότερο περιθώριο: ο πίνακας κόλλαγε
   στις γραμμές και τα ποσά διαβάζονταν δύσκολα. */
.nb-share td { padding: 8px 14px; font-size: 13px; }

/* Τα σύμβολα × και = θέλουν αέρα εκατέρωθεν, αλλά όχι πλάτος: είναι
   ένας χαρακτήρας ο καθένας. */
.nb-share .nb-l  { padding-left: 12px; padding-right: 6px; }
.nb-share .nb-x,
.nb-share .nb-eq { padding-left: 8px; padding-right: 8px; }
.nb-share .nb-base,
.nb-share .nb-share-v { padding-right: 12px; }
.nb-share .nb-res { padding-left: 14px; padding-right: 14px; }

/* Και οι δύο πίνακες δαπανών, για να μη μένει ασυμφωνία */
.nb-table td { padding: 6px 12px; }

.nb-share .nb-head td {
  padding: 4px 12px;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ds-soft);
  border-bottom: 1px solid #dfe4dd;
  background: #fbfcfa;
}

.nb-own {
  width: 104px;
  padding-left: 14px;
  padding-right: 14px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ds-soft);
  background: #fbfcfa;
}

/* Τα ποσά του διαμερίσματος ξεχωρίζουν από της στήλης ιδιοκτήτη. */
.nb-share.has-own .nb-res { font-weight: 700; }



/* Οδηγίες πληρωμής με μετρητά */
.nt-cash {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11.5px;
  color: var(--ds-ink);
}
.nt-cash.has-iban {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--ds-line);
}
.nt-cash i { color: var(--ds-accent); font-size: 10px; }

/* Πολυκατοικία που σου έχει μοιραστεί */
.bld-shared {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(44, 122, 102, .1);
  border: 1px solid rgba(44, 122, 102, .2);
  color: var(--accent-dark);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.bld-shared i { font-size: 9px; }

/* Φόρμα μέσα σε κελί πίνακα */
.inline-form { margin: 0; display: inline-block; }

/* Άντληση δαπανών από το ταμείο */
.cash-pull .sec-card-head { margin-bottom: 6px; }
.cash-pool td { vertical-align: middle; }
.cash-pool .cash-pick { margin: 0; }

/* Οι κινήσεις χωρίς κατηγορία ξεχωρίζουν: χρειάζονται προσοχή πριν
   επιμεριστούν. */
.cash-pool tr.is-nocat { background: #fdf8ec; }
.cash-pool tr.is-nocat td:first-child { box-shadow: inset 3px 0 0 #d9a13c; }

/* Πόσες πληρωμές περιέχει μια συμπτυγμένη γραμμή */
.ln-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #eef1ec;
  color: var(--ds-soft);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .03em;
  vertical-align: middle;
}

/* ============================================================
   ΛΩΡΙΔΑ: ΕΙΣΟΔΟΣ ΣΕ ΛΟΓΑΡΙΑΣΜΟ ΠΕΛΑΤΗ
   ========================================================= */

/* Σκόπιμα έντονη. Δεν είναι διακόσμηση: αν ξεχάσεις ότι βρίσκεσαι σε
   ξένο λογαριασμό, θα νομίσεις ότι κοιτάς τα δικά σου. */
.imp-bar {
  background: linear-gradient(100deg, #1f4c6b, #2b6a8f);
  color: #fff;
  border-bottom: 2px solid #16354b;
}
.imp-bar.is-full {
  background: linear-gradient(100deg, #8a3d1a, #b4531f);
  border-bottom-color: #6d2f13;
}

.imp-in {
  max-width: 1180px;
  margin: 0 auto;
  padding: 9px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 13px;
  flex-wrap: wrap;
}
.imp-in i { margin-right: 5px; }
.imp-in strong { font-weight: 700; }

.imp-out {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 8px;
}
.imp-out:hover { background: rgba(255, 255, 255, .16); }

@media print { .imp-bar { display: none !important; } }

/* Επιλογή πληρωμής με κάρτα */
.paym.is-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.paym.is-card:hover {
  border-color: var(--accent);
  box-shadow: 0 6px 20px rgba(44, 122, 102, .12);
}
.paym-go {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   ΤΟ ΔΕΥΤΕΡΟ ΕΝΤΥΠΟ — ΜΙΚΡΟΤΕΡΟ
   ========================================================= */

/* Οι κανόνες παραπάνω δίνουν και στα δύο το ίδιο μέγεθος. Εδώ, και
   ΜΟΝΟ εδώ, το δεύτερο μικραίνει.

   Έτσι αλλάζεις μία τιμή αντί να κυνηγάς έξι σημεία σε πέντε
   breakpoints. */
.ld-hero-docs .ld-paper2 {
  width: 250px;
  height: 318px;
}

/* Το «ld-stack» καθορίζει το πλάτος της στοίβας, οπότε πρέπει να
   συμφωνεί — αλλιώς το φύλλο θα κάθεται μέσα σε πλαίσιο μεγαλύτερο
   από αυτό. */
.ld-hero-docs .ld-stack.is-front { width: 250px; }

/* Το περιεχόμενο συρρικνώνεται αναλογικά. Χωρίς αυτό, τα ίδια
   γράμματα σε στενότερο χαρτί θα τύλιγαν και το έντυπο θα έμοιαζε
   στριμωγμένο αντί για μικρότερο. */
/* Αναλογικά με το πλάτος: 250/280 = 0,89 · 4,1/4,6 = 0,89.
   Χωρίς αυτό, τα ίδια γράμματα σε στενότερο χαρτί τυλίγουν και το
   έντυπο μοιάζει στριμωγμένο αντί για μικρότερο. */
.ld-paper2 .pp { font-size: 4.1px; padding: 8px 9px; }

@media (max-width: 1020px) {
  .ld-hero-docs .ld-paper2 { width: 156px; height: 190px; }
  .ld-hero-docs .ld-stack.is-front { width: 156px; }
}
@media (max-width: 420px) {
  .ld-hero-docs .ld-paper2 { width: 148px; height: 178px; }
  .ld-hero-docs .ld-stack.is-front { width: 148px; }
}
@media (max-width: 390px) {
  .ld-hero-docs .ld-paper2 { width: 136px; height: 164px; }
  .ld-hero-docs .ld-stack.is-front { width: 136px; }
}