/* kaek.gr — token layer. Φορτώνεται ΜΕΤΑ το bootstrap.min.css. */
:root {
  /* --- surfaces & ink --- */
  --kaek-bg:            #F4F6F8;
  --kaek-surface:       #FFFFFF;
  --kaek-surface-sunken:#EEF2F6;
  --kaek-border:        #D3DAE0;
  --kaek-border-strong: #C2CCD4;
  /* Περίγραμμα ΕΛΕΓΧΩΝ (inputs, outline κουμπιά). Ξεχωριστό από τα διακοσμητικά
     επίτηδες: το WCAG 1.4.11 θέλει 3:1 για το όριο ενός χειριστηρίου, και τα
     #D3DAE0/#C2CCD4 δίνουν 1.4:1 / 1.6:1 σε λευκό — φαίνονται ωραία, αλλά σε φως
     ημέρας σε laptop το πεδίο «εξαφανίζεται». Μετρημένο: 3.46:1 σε λευκό,
     3.19:1 στο φόντο σελίδας. */
  --kaek-border-control:#7C8C9A;
  --kaek-text-strong:   #10202E;
  --kaek-text:          #33495A;
  --kaek-text-muted:    #546A7B;

  /* --- roles --- */
  --kaek-primary:       #14456E;
  --kaek-primary-rgb:   20, 69, 110;
  --kaek-primary-hover: #0E3453;
  --kaek-success:       #1B6B45;
  --kaek-warning:       #8A5A00;
  --kaek-danger:        #9E2020;
  --kaek-focus:         #14456E;

  /* --- χάρτης --- */
  /* ⚠️ --kaek-map-accent: το handoff το προόριζε για το highlight του επιλεγμένου
     γεωτεμαχίου. ΑΠΟΦΑΣΗ ΧΡΗΣΤΗ: το highlight ΔΕΝ αλλάζει — μένει ως έχει στο
     kaek.js. Το token μένει εδώ αχρησιμοποίητο, να μην ξαναπροκύψει η συζήτηση. */
  --kaek-map-accent:    #FFC400;
  --kaek-map-panel:     rgba(255,255,255,.95);
  --kaek-map-panel-ink: #10202E;
  --kaek-map-shadow:    0 8px 24px rgba(0,0,0,.35);
  /* Διπλό δαχτυλίδι: σκούρο 1px για ταράτσες/δρόμους, λευκό 3px για δάση/σκιές.
     Χωρίς αυτό, ό,τι επιπλέει πάνω στο δορυφορικό «κολλάει» στην εικόνα. */
  --kaek-map-ring:      0 0 0 1px rgba(16,32,46,.55), 0 0 0 3px rgba(255,255,255,.9);

  /* --- ακτίνες (πηγή αλήθειας· τα --bs-border-radius-* παρακάτω δείχνουν εδώ) --- */
  --kaek-radius-sm: 4px;
  --kaek-radius-md: 6px;
  --kaek-radius-lg: 10px;

  /* --- type ---
     ΑΠΟΦΑΣΗ: μένουμε σε system stack — καμία web font δεν φορτώνεται (θα ήταν επιπλέον
     αίτημα δικτύου για μηδέν λειτουργικό κέρδος). Τα ονόματα 'Source Sans 3' /
     'IBM Plex Mono' αφαιρέθηκαν γιατί ΔΕΝ υπάρχουν πουθενά: ο browser τα προσπερνούσε
     και έπεφτε ούτως ή άλλως εδώ. Το mono ΜΕΝΕΙ: με tabular-nums οι συντεταγμένες και
     τα εμβαδά στοιχίζονται σε στήλη — αυτό είναι χρηστικότητα, όχι διακόσμηση. */
  --kaek-font:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kaek-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  --kaek-fs-xs: .75rem;  --kaek-fs-sm: .8125rem; --kaek-fs-md: .9375rem;
  --kaek-fs-lg: 1.0625rem; --kaek-fs-xl: 1.3125rem; --kaek-fs-2xl: 1.6875rem;

  /* --- πυκνότητα: 1 = σελίδες, .75 = εφαρμογή χάρτη --- */
  --kaek-space:  8px;
  --kaek-space-tight: 6px;

  /* --- Bootstrap 5.3.3 overrides --- */
  --bs-primary:        #14456E;
  --bs-primary-rgb:    20, 69, 110;
  --bs-link-color:     #14456E;
  --bs-link-hover-color: #0E3453;
  /* ΚΡΙΣΙΜΟ: το Bootstrap 5.3 βάφει τα <a> με `rgba(var(--bs-link-color-rgb), …)`,
     ΟΧΙ με το --bs-link-color. Χωρίς τα δύο -rgb από κάτω, ΟΛΑ τα links του site
     έμεναν στο μπλε #0d6efd — φάνηκε σε screenshot της σελίδας σύνδεσης. */
  --bs-link-color-rgb:       20, 69, 110;
  --bs-link-hover-color-rgb: 14, 52, 83;
  --bs-body-bg:        #F4F6F8;
  --bs-body-color:     #33495A;
  --bs-emphasis-color: #10202E;
  --bs-secondary-color:#546A7B;
  --bs-border-color:   #D3DAE0;
  --bs-border-radius:      6px;
  --bs-border-radius-sm:   4px;
  --bs-border-radius-lg:   10px;
  --bs-border-radius-xl:   10px;
  --bs-success:        #1B6B45;
  --bs-warning:        #8A5A00;
  --bs-danger:         #9E2020;
  --bs-secondary:      #546A7B;
  /* Τα .bg-* / .text-* ΔΕΝ διαβάζουν το --bs-success· διαβάζουν το -rgb. Χωρίς αυτά
     τα badge «ΣΥΜΒΑΤΟ/ΜΗ ΣΥΜΒΑΤΟ» έμεναν στα χρώματα του Bootstrap. */
  --bs-success-rgb:    27, 107, 69;
  --bs-warning-rgb:    138, 90, 0;
  --bs-danger-rgb:     158, 32, 32;
  --bs-secondary-rgb:  84, 106, 123;
  /* Τα alert-success / alert-danger χτίζονται από αυτά τα τρία ανά χρώμα. */
  --bs-success-text-emphasis: #124A30;
  --bs-success-bg-subtle:     #E3F1EA;
  --bs-success-border-subtle: #A9D2BF;
  --bs-danger-text-emphasis:  #6E1616;
  --bs-danger-bg-subtle:      #FBE9E9;
  --bs-danger-border-subtle:  #E7B4B4;
  --bs-font-sans-serif: var(--kaek-font);
  --bs-font-monospace:  var(--kaek-font-mono);
  --bs-body-font-size:  var(--kaek-fs-md);
  --bs-body-line-height: 1.5;
  --bs-box-shadow:    none;
  --bs-box-shadow-sm: none;
  --bs-focus-ring-color: rgba(20, 69, 110, .25);
}

/* πινελιά 01 — borders αντί σκιών */
.card, .dropdown-menu, .modal-content, .list-group-item {
  box-shadow: none; border: 1px solid var(--kaek-border);
}

/* πινελιά 02 — αριθμοί.
   `.kaek-num`/`.kaek-code` είναι τα ονόματα του handoff· `.num`/`.kaek-coord`
   υπήρχαν ήδη στο project και κρατιούνται ώστε να μη χαθούν όσα τα χρησιμοποιούν. */
.kaek-num, .kaek-code, .num, .kaek-coord, td.num {
  font-family: var(--kaek-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* πινελιά 03 — ένα focus ring. Πάνω από τον χάρτη αντιστρέφεται (λευκό περίγραμμα,
   σκούρη άλως) — εκεί το φόντο είναι απρόβλεπτο. */
:focus-visible {
  outline: 2px solid var(--kaek-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(var(--kaek-primary-rgb), .18);
}
.kaek-over-map :focus-visible { outline-color: #FFFFFF; box-shadow: 0 0 0 4px var(--kaek-focus); }

/* πινελιά 04 — πάνελ πάνω από δορυφορικό υπόβαθρο.
   ΧΩΡΙΣ το `backdrop-filter: saturate(1.1)` του handoff: η ίδια η λίστα «Μην κάνεις»
   το απαγορεύει πάνω από τον χάρτη (repaint σε κάθε pan του Leaflet). */
.kaek-over-map {
  background: var(--kaek-map-panel);
  color: var(--kaek-map-panel-ink);
  border-radius: var(--kaek-radius-md);
  box-shadow: var(--kaek-map-ring), var(--kaek-map-shadow);
}

/* πινελιά 05 — πυκνότητα στη σελίδα του χάρτη (μικρότερο spacing & σώμα κειμένου) */
.kaek-dense {
  --kaek-space: 6px;
  --kaek-space-tight: 4px;
  --bs-body-font-size: var(--kaek-fs-sm);
}
/* Η πυκνότητα αφορά την ΕΦΑΡΜΟΓΗ (sidebar, πάνελ χάρτη) — όχι το κύριο μενού.
   Το navbar είναι το ίδιο στοιχείο σε όλες τις σελίδες και μίκραινε μόνο εδώ,
   επειδή κληρονομούσε το μικρότερο σώμα κειμένου. */
.kaek-dense .navbar { font-size: var(--kaek-fs-md); }

/* πινελιά 06 — επικεφαλίδες ενοτήτων.
   ΧΩΡΙΣ το `text-transform: uppercase` του handoff: το ίδιο το README προειδοποιεί
   να μη μπαίνουν κεφαλαία σε ελληνικά με τόνους («Έλεγχος» → «ΈΛΕΓΧΟΣ»). */
.kaek-section-head {
  font-size: var(--kaek-fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--kaek-text-muted);
  border-left: 3px solid var(--kaek-primary);
  padding-left: var(--kaek-space);
}

/* πινελιά 06 — states με βάθος */
.btn-primary { --bs-btn-bg: var(--kaek-primary); --bs-btn-border-color: var(--kaek-primary);
  --bs-btn-hover-bg: var(--kaek-primary-hover); --bs-btn-hover-border-color: var(--kaek-primary-hover);
  transition: background-color 120ms linear; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* ============================================================================
   πινελιά 07 — τα components που το Bootstrap 5.3.3 γράφει ΜΕ ΣΤΑΘΕΡΑ ΧΡΩΜΑΤΑ
   ----------------------------------------------------------------------------
   Δεν είναι όλα τα components παραμετρικά: το .btn-primary π.χ. γράφει
   `--bs-btn-bg:#0d6efd` μέσα του, οπότε το `--bs-primary` δεν το αγγίζει καθόλου.
   Χωρίς τις παρακάτω παρακάμψεις συνυπήρχαν δύο θέματα στην ίδια οθόνη: navy links
   δίπλα σε μπλε Bootstrap κουμπιά. Παρακάμπτονται ΜΟΝΟ όσα χρησιμοποιούνται
   πραγματικά (μετρημένα στον κώδικα) — όχι όλη η βιβλιοθήκη.
   ============================================================================ */

/* Συμπαγή κουμπιά (37 .btn-outline-secondary, 28 .btn-primary, 6 .btn-secondary …) */
.btn-secondary { --bs-btn-bg: var(--kaek-text-muted); --bs-btn-border-color: var(--kaek-text-muted);
  --bs-btn-hover-bg: #445A6B; --bs-btn-hover-border-color: #445A6B;
  --bs-btn-active-bg: #445A6B; --bs-btn-active-border-color: #445A6B; }
.btn-success { --bs-btn-bg: var(--kaek-success); --bs-btn-border-color: var(--kaek-success);
  --bs-btn-hover-bg: #155537; --bs-btn-hover-border-color: #155537;
  --bs-btn-active-bg: #155537; --bs-btn-active-border-color: #155537; }
.btn-danger { --bs-btn-bg: var(--kaek-danger); --bs-btn-border-color: var(--kaek-danger);
  --bs-btn-hover-bg: #801919; --bs-btn-hover-border-color: #801919;
  --bs-btn-active-bg: #801919; --bs-btn-active-border-color: #801919; }
.btn-warning { --bs-btn-color: #fff; --bs-btn-bg: var(--kaek-warning); --bs-btn-border-color: var(--kaek-warning);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #6F4900; --bs-btn-hover-border-color: #6F4900;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #6F4900; }

.btn-outline-primary { --bs-btn-color: var(--kaek-primary); --bs-btn-border-color: var(--kaek-primary);
  --bs-btn-hover-bg: var(--kaek-primary); --bs-btn-hover-border-color: var(--kaek-primary);
  --bs-btn-active-bg: var(--kaek-primary-hover); --bs-btn-active-border-color: var(--kaek-primary-hover); }
/* Το πιο πολυχρησιμοποιημένο κουμπί της εφαρμογής: ΗΣΥΧΟ. Σκούρο κείμενο σε λευκό
   (9.4:1) αντί για γκρι Bootstrap, και hover που ΔΕΝ γεμίζει με βαρύ γκρι — σε πυκνό
   sidebar με 8-10 κουμπιά μαζί, το γέμισμα τραβούσε το μάτι σαν να ήταν το κύριο. */
.btn-outline-secondary { --bs-btn-color: var(--kaek-text); --bs-btn-border-color: var(--kaek-border-control);
  --bs-btn-hover-color: var(--kaek-primary); --bs-btn-hover-bg: var(--kaek-surface-sunken);
  --bs-btn-hover-border-color: var(--kaek-primary);
  --bs-btn-active-color: var(--kaek-primary); --bs-btn-active-bg: var(--kaek-surface-sunken);
  --bs-btn-active-border-color: var(--kaek-primary);
  --bs-btn-disabled-color: var(--kaek-text-muted); --bs-btn-disabled-border-color: var(--kaek-border); }
.btn-outline-danger { --bs-btn-color: var(--kaek-danger); --bs-btn-border-color: var(--kaek-danger);
  --bs-btn-hover-bg: var(--kaek-danger); --bs-btn-hover-border-color: var(--kaek-danger);
  --bs-btn-active-bg: #801919; --bs-btn-active-border-color: #801919; }

/* Φόρμες (96 .form-control, 23 .form-check-input): το Bootstrap δίνει focus
   `border-color:#86b7fe` + γαλάζια σκιά — ήταν το πιο εμφανές «default Bootstrap». */
/* ΚΡΙΘΗΚΕ (14/08/2026): τα πεδία παίρνουν --kaek-border-control (#7C8C9A, 3.46:1) αντί για
   το --kaek-border-strong (#C2CCD4) του handoff, που μετρήθηκε 1.63:1 — κάτω από το 3:1 που
   ζητά το WCAG 1.4.11 για το όριο χειριστηρίου. Σε φως ημέρας σε laptop το πεδίο
   «εξαφανιζόταν». Εγκεκριμένη απόκλιση από το handoff· τα checkbox/input-group ήταν ήδη έτσι,
   οπότε τώρα όλα τα χειριστήρια έχουν το ίδιο περίγραμμα. */
.form-control, .form-select { border-color: var(--kaek-border-control); font-size: var(--kaek-fs-md); }
.form-control::placeholder { color: var(--kaek-text-muted); opacity: 1; }
.form-control:focus, .form-select:focus {
  border-color: var(--kaek-primary); box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); }
.form-check-input { border-color: var(--kaek-border-control); }
.form-check-input:checked { background-color: var(--kaek-primary); border-color: var(--kaek-primary); }
.form-check-input:focus { border-color: var(--kaek-primary); box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); }
/* Ο διακόπτης έχει το «κουμπάκι» του ως SVG με σταθερό γαλάζιο στο focus. */
.form-switch .form-check-input:focus {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%237C8C9A'/%3e%3c/svg%3e"); }
.input-group-text { border-color: var(--kaek-border-control); background-color: var(--kaek-surface-sunken); }

/* Υπόλοιπα σημεία με σταθερό μπλε: pills & dropdown */
.nav-pills { --bs-nav-pills-link-active-bg: var(--kaek-primary); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--kaek-primary); }
/* ── Σήματα καρτών & ισχυρής ταυτοποίησης ─────────────────────────────────────
   Υποχρέωση του εγχειριδίου της epay (§8), όχι διακόσμηση. Τα βγάζει το
   backsrc/partials/card_icons.php και εμφανίζονται σε τρία σημεία: υποσέλιδο,
   σελίδα πληρωμής, και κάτω κάτω στο sidebar της αρχικής.

   ⚠️ ΖΟΥΝ ΕΔΩ ΚΑΙ ΟΧΙ ΣΤΟ kaek-pages.css: εκείνο ΔΕΝ φορτώνει στην αρχική
   (head.php: `$inhome ? kaek.css : kaek-pages.css`), και η αρχική είναι ακριβώς
   η σελίδα που τα απαιτεί το εγχειρίδιο.

   Τα αρχεία είναι τα επίσημα της Euronet, σε παραλλαγή ανοιχτού φόντου. Δεν
   ξαναχρωματίζονται και δεν παραμορφώνονται — οι προδιαγραφές των Visa και
   Mastercard απαγορεύουν αλλαγή αναλογιών ή χρώματος. Γι' αυτό ορίζεται ΜΟΝΟ ύψος. */
.card-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 1.25rem;
}

.card-icons-mark   { height: 28px; width: auto; }
.card-icons-secure { height: 34px; width: auto; }

/* Το IRIS είναι λογότυπο **δύο σειρών** (IRIS πάνω, «online payments» κάτω), οπότε έχει δικό
   του ύψος — όπως και το `card-icons-tile` του «Visa Secure». Τα ύψη μπαίνουν ανά περιβάλλον.

   ⚠️ ΜΕΙΩΘΗΚΕ ΚΑΤΑ ΕΝΑ ΤΡΙΤΟ _(απόφαση χρήστη 11/09/2026)_: μπήκε στα 38 px και στέκει στα
   25. Ο υπότιτλος μικραίνει, αλλά η λέξη «IRIS» πιάνει τα δύο τρίτα του λογοτύπου και είναι
   αυτή που διαβάζεται — στα 38 px το σήμα κυριαρχούσε πάνω από τις κάρτες που είναι ο
   πραγματικός τρόπος πληρωμής. */
.card-icons-iris   { height: 25px; width: auto; }

/* Google Pay _(14/09/2026)_: το επίσημο SVG έχει ενσωματωμένο κενό γύρω από το σήμα (το «clear
   space» των οδηγιών), περίπου το μισό του ύψους του. Στα 50 px το ίδιο το σήμα φτάνει ~27 px,
   δηλαδή όσο οι κάρτες: οι οδηγίες απαγορεύουν να είναι μικρότερο από τα άλλα σήματα. Το αρνητικό
   κάθετο περιθώριο κρατά τη σειρά στο ύψος της, χωρίς να αγγίζει το οριζόντιο κενό. */
.card-icons-gpay   { height: 50px; width: auto; margin-block: -11px; }

/* ⛔ ΤΟ «VISA SECURE» ΜΠΑΙΝΕΙ ΟΠΩΣ ΕΙΝΑΙ — ΧΩΡΙΣ ΠΛΑΙΣΙΟ _(απόφαση χρήστη 05/09/2026: «να
   γίνει χωρίς περίγραμμα. το λευκό να εκτείνεται πάνω από το μπλε»)_.

   ΜΕΤΡΗΜΕΝΟ ΜΕΣΑ ΣΤΟ ΑΡΧΕΙΟ (661×660 px, με canvas σε πραγματικό Chrome): το μπλε κουτί
   πιάνει **όλο** το πλάτος και φτάνει ώς την κάτω ακμή· λευκό υπάρχει **μόνο επάνω**, 88 px
   πάνω από το μπλε. Δηλαδή η ίδια η εικόνα δίνει ακριβώς αυτό που ζητήθηκε: λευκό από πάνω,
   μπλε ώς την άκρη. Ένα padding ή μια στρογγυλή γωνία θα πρόσθετε λευκό **δικό μας** γύρω
   της — που ήταν και το «περίγραμμα» που φαινόταν.

   Η κλάση μένει ως **λαβή μεγέθους**: το σήμα είναι δύο σειρών (VISA πάνω, SECURE κάτω) και
   στο ίδιο ύψος με τα μονόσειρα φαίνεται μισό. Τα ύψη μπαίνουν ανά περιβάλλον. */

/* Το κενό στοιχείο που σπάει τη σειρά — αδρανές παντού εκτός όπου το ζητά το CSS. */
.card-icons-break { display: none; }

/* ══════════════════════════════════════════════════════════════════════════════
   ΤΟ ΜΕΝΟΥ ΚΑΙ ΤΟ ΥΠΟΣΕΛΙΔΟ
   ══════════════════════════════════════════════════════════════════════════════
   ⚠️ ΕΔΩ ΚΑΙ ΟΧΙ ΣΤΟ `kaek-pages.css` _(18/09/2026)_: εκείνο φορτώνεται **μόνο** σε
   inner-page — στην αρχική φορτώνεται το `parcels/kaek.css`. Το μενού είναι το ίδιο
   στοιχείο και στις δύο, οπότε κανόνας εκεί θα το άφηνε άβαφο πάνω από τον χάρτη.

   Ήταν inline `<style>` μέσα στο `head.php`: τέταρτο μέρος με CSS, εκτός των τριών
   αρχείων, και κανείς δεν το έψαχνε εκεί. */

/* Το φόντο του μενού και του υποσέλιδου. Ήταν το `#212529` του Bootstrap — η προεπιλογή
   της βιβλιοθήκης, δηλαδή το μόνο μεγάλο στοιχείο του ιστότοπου εκτός παλέτας. Το
   `#10202E` είναι το `--kaek-text-strong`, και δίνει 16.56:1 με λευκό κείμενο.
   ⚠️ ΚΑΙ ΤΟ `-rgb`: το `.bg-dark` του Bootstrap 5.3 διαβάζει `rgba(var(--bs-dark-rgb), …)`,
   όχι το `--bs-dark`. Χωρίς τη δεύτερη γραμμή δεν αλλάζει τίποτα — ίδια παγίδα με τα
   `--bs-link-color-rgb` παραπάνω. */
:root {
  --bs-dark:     #10202E;
  --bs-dark-rgb: 16, 32, 46;
}

/* ── Σύνδεσμοι του μενού ───────────────────────────────────────────────────── */
/* ΚΕΦΑΛΑΙΑ με `letter-spacing`: χωρίς αυτό τα γράμματα «μαζεύονται» και το μενού
   διαβάζεται σαν συμπαγής μάζα. Βάρος 500 αντί 400 — τα κεφαλαία σε κανονικό βάρος
   χάνουν βάρος οπτικά σε σκούρο φόντο. */
.navbar-dark .navbar-nav .nav-link {
  color: #f0f0f0;
  font-weight: 500;
  letter-spacing: .03em;
  position: relative;
  transition: color .15s ease;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus { color: #8FB8D8; }

/* ⚠️ ΤΟ «ΠΟΥ ΕΙΜΑΙ» ΗΤΑΝ ΑΟΡΑΤΟ _(εύρημα 18/09/2026)_. Ο παλιός κανόνας είχε
   `color: #f0f0f0 !important`, που ισοπέδωνε ΚΑΙ το `.active` — το Bootstrap θα έβαφε το
   ενεργό `#fff` έναντι `rgba(255,255,255,.55)` των υπολοίπων, αλλά το `!important` τα
   έκανε ένα. Δηλαδή η `isActive()` γραφόταν σε κάθε στοιχείο του μενού και **δεν
   ζωγράφιζε τίποτα**: ο δείκτης θέσης δεν υπήρχε, σε καμία σελίδα.

   Το σήμα είναι λευκό κείμενο ΚΑΙ γραμμή από κάτω — δύο ενδείξεις, γιατί μόνο το χρώμα
   δεν διακρίνεται από κάποιον με αχρωματοψία ούτε σε φως ημέρας σε laptop.
   Η γραμμή με `::after` και όχι `border-bottom`: το border θα μετακινούσε το κείμενο
   κατά 2px μόλις γίνεται ενεργό. */
.navbar-dark .navbar-nav .nav-link.active { color: #fff; }

/* Η υπογράμμιση ΜΟΝΟ σε οριζόντιο μενού. ⚠️ Μέσα στο hamburger το στοιχείο πιάνει όλο το
   πλάτος, οπότε η ίδια γραμμή απλωνόταν από άκρη σε άκρη και διαβαζόταν ως **διαχωριστικό
   ενοτήτων**, όχι ως δείκτης θέσης. Σε κάθετη λίστα το σήμα πάει αριστερά, όπως σε κάθε
   πλαϊνό μενού. _(εύρημα από δοκιμή σε 390px, 18/09/2026)_ */
@media (min-width: 1200px) {
  .navbar-dark .navbar-nav .nav-link.active::after {
    content: "";
    position: absolute;
    left: .5rem; right: .5rem; bottom: .125rem;
    height: 2px;
    background: #8FB8D8;
    border-radius: 1px;
  }
}
@media (max-width: 1199.98px) {
  .navbar-dark .navbar-nav .nav-link.active {
    border-left: 3px solid #8FB8D8;
    padding-left: .75rem;
    margin-left: -1rem;
  }
}

/* ⚠️ ΤΟ FOCUS ΤΟΥ ΠΛΗΚΤΡΟΛΟΓΙΟΥ ΗΤΑΝ ΤΟ ΜΠΛΕ ΤΟΥ BOOTSTRAP _(εύρημα 18/09/2026)_ —
   `rgba(13,110,253,.25)`, ακριβώς το `#0d6efd` που κυνηγά ρητά το `--bs-link-color-rgb`
   παραπάνω. Επέζησε στο μενού, όπου το σκούρο φόντο το κάνει και δυσδιάκριτο. */
.navbar-dark .navbar-nav .nav-link:focus-visible {
  outline: 2px solid #8FB8D8;
  outline-offset: 2px;
  box-shadow: none;
}

/* ── Δύο βαθμίδες έμφασης ──────────────────────────────────────────────────── */
/* ⛔ ΤΟ BRAND NAVY ΔΕΝ ΜΠΟΡΕΙ ΝΑ ΓΕΜΙΣΕΙ ΚΟΥΜΠΙ ΕΔΩ. Μετρήθηκε: `#14456E` πάνω στο φόντο
   του μενού δίνει **1.55:1**, ενώ χρειάζεται ≥3:1 για να διαβαστεί ως σχήμα — θα φαινόταν
   σκούρος λεκές, όχι κουμπί. Το `#8FB8D8` (ήδη το hover του μενού) δίνει 7.36:1 ξεχώρισμα
   και 7.90:1 για σκούρο κείμενο μέσα του. Κανένα νέο χρώμα.

   Η ιεραρχία _(απόφαση χρήστη 18/09/2026, μετά από τρία περάσματα την ίδια μέρα)_:
   **ΣΥΝΔΕΣΗ** γεμάτη > **ΕΓΓΡΑΦΗ** με περίγραμμα > **ΑΓΟΡΑ** και τα υπόλοιπα απλά. Η έμφαση
   είναι εκεί όπου ο επισκέπτης **μπαίνει στο προϊόν**, όχι εκεί όπου πληρώνει: ο χάρτης είναι
   ελεύθερος, οπότε όποιος φτάνει στο μενού θέλει συχνότερα να μπει παρά να αγοράσει.
   Ένα γεμάτο κουμπί ανά μενού — δύο δίπλα-δίπλα ανταγωνίζονται και δεν κερδίζει κανένα.

   ⚠️ ΜΟΝΟ ΣΕ ΟΡΙΖΟΝΤΙΟ ΜΕΝΟΥ (>= 1200px, το breakpoint του `navbar-expand-xl`). Κάτω από
   αυτό το μενού είναι κάθετη λίστα μέσα στο hamburger: εκεί τα κουμπιά απλώνονται σε όλο
   το πλάτος και γίνονται δύο μπλοκ που φωνάζουν μέσα σε επτά ήσυχες γραμμές. Η έμφαση έχει
   νόημα όταν τα στοιχεία ανταγωνίζονται για το βλέμμα στην ίδια σειρά — σε κάθετη λίστα
   που διαβάζεται από πάνω προς τα κάτω, όχι. _(εύρημα από δοκιμή σε 390px, 18/09/2026)_ */
@media (min-width: 1200px) {
  /* Περισσότερος αέρας ανάμεσα στα στοιχεία _(αίτημα χρήστη 18/09/2026)_. Προστίθεται στο
     `ms-3` (16px) που έχει ήδη κάθε `li` στο markup — δεν το αντικαθιστά, γιατί εκείνο
     δουλεύει και στο hamburger όπου το `gap` θα άνοιγε κάθετα κενά. Μετρημένο: με τα δύο
     κουμπιά, η δεξιά άκρη του μενού μένει μέσα στο πλάτος και στο στενότερο desktop. */
  .navbar-dark .navbar-nav { gap: .75rem; }

  .navbar-dark .navbar-nav .nav-cta,
  .navbar-dark .navbar-nav .nav-ghost {
    padding-inline: .9rem;
    border-radius: var(--kaek-radius-md);
    line-height: 1.6;
  }
  .navbar-dark .navbar-nav .nav-cta {
    background: #8FB8D8;
    color: #10202E;
  }
  .navbar-dark .navbar-nav .nav-cta:hover,
  .navbar-dark .navbar-nav .nav-cta:focus { background: #A8C9E3; color: #10202E; }

  .navbar-dark .navbar-nav .nav-ghost { border: 1px solid rgba(255,255,255,.35); }
  .navbar-dark .navbar-nav .nav-ghost:hover,
  .navbar-dark .navbar-nav .nav-ghost:focus { border-color: #8FB8D8; color: #8FB8D8; }

  /* ⚠️ ΤΑ ΚΟΥΜΠΙΑ ΔΕΙΧΝΟΥΝ ΑΛΛΙΩΣ ΟΤΙ ΕΙΝΑΙ ΕΝΕΡΓΑ. Η υπογράμμιση κόβεται — θα κρεμόταν
     κάτω από το περίγραμμα — αλλά ΔΕΝ μένουν χωρίς σήμα: το πρώτο πέρασμα το έκανε, και
     στη σελίδα σύνδεσης το «ΣΥΝΔΕΣΗ» ήταν ενεργό χωρίς να φαίνεται πουθενά. */
  .navbar-dark .navbar-nav .nav-cta.active::after,
  .navbar-dark .navbar-nav .nav-ghost.active::after { content: none; }

  .navbar-dark .navbar-nav .nav-ghost.active { border-color: #8FB8D8; color: #8FB8D8; }
  .navbar-dark .navbar-nav .nav-cta.active   { background: #A8C9E3; }
}

/* ── Υποσέλιδο ─────────────────────────────────────────────────────────────── */
/* Το hover ήταν δύο διαφορετικά γαλάζια (#6ab0ff / #adc9ff) από την παλέτα του Bootstrap.
   Ενοποιήθηκαν στον ίδιο τόνο με το μενού. */
#footer a { transition: color .2s ease; }
#footer a:hover,
#footer .footer a:hover,
footer a:hover { color: #8FB8D8; }