@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   ΠΡΟΤΑΣΗ ΣΤ — Το σύστημα του νέου spourgitis.gr
   b2b.spourgitis.gr · Φύλλο μάρκας · GreatWay

   Πηγή: K:\08_FINAL_HTMLS\spourgitis\redesign_homepage_v25_2026-09-12.html
   (τρέχουσα ανακατασκευή, preview greatdev.gr/spourgitis-v25/)

   ⚠ ΤΟ ΣΗΜΑΝΤΙΚΟ ΕΥΡΗΜΑ
   Η ανακατασκευή ΔΕΝ χρησιμοποιεί το γαλάζιο #00A1ED. Δουλεύει σε:

       --navy #1B3C8F   η δομή — κεφαλίδα, πλαϊνή στήλη, ενεργά στοιχεία
       --red  #d80c18   ΜΟΝΟ το κύριο CTA (σχόλιο του ίδιου του αρχείου)

   Το #00A1ED είναι η παλέτα του **παλιού** Elementor site. Όλες οι προτάσεις
   μέχρι τώρα — και η Δ — στηρίχτηκαν σε αυτό, δηλαδή σε παλέτα που αποσύρεται.
   Εδώ διορθώνεται: το B2B ευθυγραμμίζεται με το site που θα υπάρχει, όχι με
   αυτό που φεύγει.

   Ο χαρακτήρας της «bold» διατηρείται χωρίς ξένη γραμματοσειρά: το v25 φορτώνει
   ήδη **Inter έως 800**, οπότε το βαρύ display βγαίνει από το ίδιο το σύστημα.
   Η Commissioner δεν χρειάζεται πια.

   Το --warm #fdfaf4 ΔΕΝ είναι καμβάς. Στο v25 είναι σημασιολογικό: σημειώσεις
   και προειδοποιήσεις (.onote, .oprint, .sec-warm). Κρατά τον ίδιο ρόλο εδώ.
   ========================================================================== */

:root {
  /* ---- Ακριβώς τα tokens του v25 ---- */
  --navy:        #1B3C8F;
  --navy-dark:   #132A63;
  --navy-bright: #7FA8F0;
  --red:         #d80c18;
  --red-dark:    #b3080f;
  --ink:         #1c1b1c;
  --ink-soft:    #45474a;
  --line:        #dbe0ea;
  --white:       #ffffff;
  --surface:     #f5f8fd;
  --warm:        #fdfaf4;
  --green:       #0f7b52;
  --gold:        #e8a33d;
  --err:         #8f2119;  --err-bg: #fdf3f2;
  --ok:          #0f7b52;  --ok-bg:  #f0f9f5;

  --sh-1: 0 1px 2px rgb(16 24 40/.06);
  --sh-2: 0 4px 14px rgb(16 24 40/.09);
  --sh-3: 0 14px 36px rgb(16 24 40/.14);

  --r-card: 16px;
  --r-btn:  10px;
  --ease:   cubic-bezier(.2, .6, .2, 1);
  --lh-body: 1.4;

  /* Ουδέτερα ενδιάμεσα, παραγόμενα από τη γραμμή του v25 */
  --n-25:  #fafbfe;
  --n-100: #eef1f6;
  --n-300: #c3cee4;
  --n-500: #8c9099;

  /* ---- Metronic ----
     Το πρωτεύον του προτύπου γίνεται NAVY, όχι κόκκινο: το κόκκινο είναι
     αποκλειστικά του κύριου CTA, όπως ορίζει το v25. Τα δευτερεύοντα κουμπιά
     του Metronic είναι κι αυτά .btn-primary, οπότε αν έβαφα το primary κόκκινο
     θα γέμιζε η οθόνη κόκκινα κουμπιά. */
  --bs-primary:               var(--navy);
  --bs-primary-rgb:           27, 60, 143;
  --bs-primary-active:        var(--navy-dark);
  --bs-primary-light:         #eaf0fb;
  --bs-primary-inverse:       #ffffff;
  --bs-primary-clarity:       rgba(27, 60, 143, .2);
  --bs-primary-bg-subtle:     #eaf0fb;
  --bs-primary-border-subtle: #b8c6e6;

  --bs-danger:         var(--red);
  --bs-danger-rgb:     216, 12, 24;
  --bs-danger-active:  var(--red-dark);
  --bs-danger-light:   var(--err-bg);
  --bs-danger-inverse: #ffffff;

  --bs-success:        var(--green);
  --bs-success-light:  var(--ok-bg);

  --bs-body-color:       var(--ink-soft);
  --bs-body-color-rgb:   69, 71, 74;
  --bs-body-font-family: "Inter", "Helvetica Neue", Arial, sans-serif;

  --bs-link-color:       var(--navy);
  --bs-link-color-rgb:   27, 60, 143;
  --bs-link-hover-color: var(--navy-dark);

  /* 296px: το «Υπολογιστής μεταφορικών» σε Inter 14px/600 θέλει 186px ωφέλιμα.
     Μετρημένο, όχι στρογγυλεμένο — στα 280px έλειπαν 5px και κοβόταν. */
  --bs-app-sidebar-width: 296px;
  --bs-app-sidebar-width-actual: 296px;
  --bs-app-header-height: 72px;          /* --header-h του v25 */
  --bs-app-header-height-actual: 72px;
}

@media (min-width: 992px) {
  :root { --bs-app-sidebar-width: 296px; --bs-app-sidebar-width-actual: 296px; }
}

body, .form-control, .form-select, .btn, .menu, table, .card, input, select, textarea {
  font-family: var(--bs-body-font-family);
}
body { -webkit-font-smoothing: antialiased; font-size: 14px; line-height: var(--lh-body); }

h1, h2, h3, .card-title,
#kt_app_content h1, #kt_app_toolbar h1 { color: var(--ink); letter-spacing: -.016em; }

/* Η βαριά τυπογραφία — Inter 800, από το ίδιο το σύστημα.
   Κλίμακα εργαλείου: το v25 έχει h1 έως 3,25rem, αλλά εκεί είναι σελίδα
   προορισμού. Σε οθόνη παραγγελιών ο τίτλος δεν διεκδικεί τον χώρο. */
h1, #kt_app_content h1, #kt_app_toolbar h1 {
  font-size: 26px; font-weight: 800; line-height: 1.22; margin-bottom: 4px;
}
h2 { font-size: 20px; font-weight: 800; }
h3, .card-title { font-size: 16px; font-weight: 700; }
#kt_app_content h1 + .text-muted,
#kt_app_toolbar h1 + .text-muted { font-size: 14px; color: var(--n-500) !important; }

/* --------------------------------------------------------------------------
   1. Πλαϊνή στήλη — navy, όπως η topbar του v25
   -------------------------------------------------------------------------- */

[data-kt-app-layout="dark-sidebar"] .app-sidebar, .app-sidebar {
  background-color: var(--navy) !important;
  border-right: 0;
  box-shadow: none;
}

[data-kt-app-layout="dark-sidebar"] .app-sidebar .app-sidebar-logo,
.app-sidebar .app-sidebar-logo {
  border: 0 !important;
  background: var(--white);
  padding: 14px 18px !important;
  min-height: 72px;
  display: flex; align-items: center;
}
.app-sidebar .app-sidebar-logo a { margin-top: 0 !important; width: 100%; }
.app-sidebar .app-sidebar-logo img {
  height: auto !important; max-height: 38px; max-width: 100%;
  width: auto; object-fit: contain;
}

.app-sidebar .menu { padding-top: 10px; }

[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link,
.app-sidebar .menu .menu-item .menu-link {
  padding: 10px 13px;
  margin: 2px 10px;
  border-radius: var(--r-btn);
  min-height: 42px;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}

[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link .menu-title,
.app-sidebar .menu .menu-item .menu-link .menu-title {
  color: #e3eaf9 !important;                 /* το χρώμα κειμένου της topbar */
  font-size: 14px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}

[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link .menu-icon i,
.app-sidebar .menu .menu-item .menu-link .menu-icon i {
  color: var(--navy-bright) !important; font-size: 17px;
}

[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link .menu-arrow:after,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link .menu-bullet .bullet,
.app-sidebar .menu .menu-item .menu-link .menu-arrow:after,
.app-sidebar .menu .menu-item .menu-link .menu-bullet .bullet {
  background-color: var(--navy-bright) !important;
}

[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link:hover,
.app-sidebar .menu .menu-item .menu-link:hover {
  background-color: rgba(255, 255, 255, .09) !important;
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link:hover .menu-title,
.app-sidebar .menu .menu-item .menu-link:hover .menu-title { color: #fff !important; }

/* Το ενεργό γεμίζει λευκό — η αντιστροφή που κάνει το v25 στο .btn-ghost:hover */
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link.active,
.app-sidebar .menu .menu-item .menu-link.active { background-color: var(--white) !important; }

[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link.active .menu-title,
.app-sidebar .menu .menu-item .menu-link.active .menu-title {
  color: var(--navy) !important; font-weight: 700;
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link.active .menu-icon i,
.app-sidebar .menu .menu-item .menu-link.active .menu-icon i { color: var(--navy) !important; }

.app-sidebar-toggle {
  background-color: var(--white) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--sh-1) !important;
}
.app-sidebar-toggle i { color: var(--navy) !important; }
.app-sidebar-toggle:hover { border-color: var(--navy) !important; }

/* --------------------------------------------------------------------------
   2. Καμβάς — --surface του v25
   -------------------------------------------------------------------------- */

#kt_app_header {
  background-color: var(--white) !important;
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}
#kt_app_main, .app-main { background-color: var(--surface) !important; }
#kt_app_content .app-container, #kt_app_toolbar .app-container { padding-block: 16px; }

/* --------------------------------------------------------------------------
   3. Κάρτες — .card του v25: λευκό, γραμμή, 16px
   -------------------------------------------------------------------------- */

.card {
  background: var(--white);
  border: 1px solid var(--line) !important;
  border-radius: var(--r-card) !important;
  box-shadow: var(--sh-1) !important;
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.card > .card-header {
  border-bottom: 1px solid var(--line);
  min-height: 60px; padding: 14px 24px;
}
.card > .card-body { padding: 24px; }
.card > .card-footer { border-top: 1px solid var(--line); padding: 16px 24px; }

/* --------------------------------------------------------------------------
   4. Πίνακας δεδομένων
   -------------------------------------------------------------------------- */

.table { --bs-table-bg: transparent; margin-bottom: 0; }

.table > thead > tr > th {
  padding: 11px 16px !important;
  background-color: var(--surface);
  border-bottom: 1px solid var(--line);
  color: var(--n-500);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .045em; text-transform: uppercase;
  white-space: nowrap;
}

.table > tbody > tr > td {
  padding: 11px 16px !important;
  border-bottom: 1px solid var(--n-100);
  border-top: 0;
  font-size: 14px; color: var(--ink-soft);
  vertical-align: middle;
}
.table > tbody > tr:last-child > td { border-bottom: 0; }
.table > tbody > tr { transition: background-color .15s var(--ease); }
.table > tbody > tr:hover > td { background-color: var(--n-25); }

.table > tbody > tr > td:first-child,
.table > tbody > tr > td:first-child a {
  color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums;
}
.table > tbody > tr > td:first-child a:hover { color: var(--navy); }

/* Το ποσό — Inter 800, δεξιά, σταθερό ψηφίο */
.table > thead > tr > th:last-child,
.table > tbody > tr > td:last-child {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
  font-weight: 800; color: var(--ink); white-space: nowrap;
}
.table > tbody > tr > td:nth-child(2) {
  font-variant-numeric: tabular-nums; color: var(--n-500);
}

.badge {
  border-radius: var(--r-btn);
  padding: 4px 10px; font-size: 12px; font-weight: 700;
}
.badge.badge-light-success, .badge-success { background: var(--ok-bg) !important;  color: var(--ok) !important; }
.badge.badge-light-warning, .badge-warning { background: #fdf6e9 !important;        color: #a06a12 !important; }
.badge.badge-light-danger,  .badge-danger  { background: var(--err-bg) !important; color: var(--err) !important; }
.badge.badge-light-primary, .badge-primary { background: #eaf0fb !important;        color: var(--navy) !important; }

.page-link, .pagination .page-link {
  border: 1px solid transparent; border-radius: var(--r-btn);
  color: var(--ink-soft); font-size: 14px; font-weight: 600;
  min-width: 36px; height: 36px;
}
.pagination .page-item.active .page-link { background-color: var(--navy); color: #fff; }
.pagination .page-item:not(.active) .page-link:hover { background-color: #eaf0fb; }

.dataTables_length select, select.form-select-sm, .form-select[name$="_length"] {
  height: 36px; min-width: 72px; padding: 4px 28px 4px 12px;
  line-height: 1.6; font-size: 14px;
}

/* --------------------------------------------------------------------------
   5. Πεδία — input του v25: 46px, γραμμή 1px, radius 10px
   -------------------------------------------------------------------------- */

.form-label, label.required {
  font-size: 13px; font-weight: 600;
  color: var(--ink-soft); margin-bottom: 6px;
}

/* :not(.btn) — η ροή αποστολής βάζει `form-control` και στα κουμπιά («Προσθήκη»,
   «Επιλογή υπηρεσίας»). Χωρίς την εξαίρεση το λευκό !important του πεδίου σκέπαζε το
   `.btn-primary` και τα κύρια κουμπιά γίνονταν λευκά σε λευκό (17/09). */
.form-control:not(.btn), .form-select {
  min-height: 46px; height: 46px;
  padding: 11px 14px;
  background-color: var(--white) !important;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  font-size: 1rem; color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form-control:not(.btn):hover, .form-select:hover { border-color: var(--n-300); }
.form-control:not(.btn):focus, .form-select:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(27, 60, 143, .16);
  outline: none;
}
.form-control::placeholder { color: var(--n-500); }
.form-control:not(.btn):disabled, .form-control[readonly] {
  background-color: var(--surface) !important; color: var(--n-500);
}

.form-control.is-invalid, .form-control:not(.btn):invalid:not(:placeholder-shown) {
  border-color: var(--err); background-color: var(--err-bg) !important;
}

a:focus-visible, button:focus-visible, .btn:focus-visible,
.menu-link:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--navy); outline-offset: 2px; border-radius: var(--r-btn);
}

/* --------------------------------------------------------------------------
   6. Κουμπιά — .btn του v25

   ΠΡΟΣΟΧΗ στη ΣΕΙΡΑ ΠΡΟΤΕΡΑΙΟΤΗΤΑΣ: στο v25 το κόκκινο ανήκει **μόνο** στο
   κύριο CTA. Το Metronic όμως δίνει `.btn-primary` σε κάθε δευτερεύον κουμπί,
   οπότε αν το έβαφα κόκκινο θα γέμιζε η οθόνη επείγοντα. Το `.btn-primary`
   μένει navy· το κόκκινο μπαίνει όπου υπάρχει πραγματικά κύρια δράση —
   υποβολή φόρμας και το κουμπί δημιουργίας αποστολής.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 11px 22px;
  border-radius: var(--r-btn);
  font-size: 14px; font-weight: 700;
  border: 2px solid transparent;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.btn.btn-primary {
  background: var(--navy); border-color: var(--navy); color: #fff;
  box-shadow: var(--sh-1);
}
.btn.btn-primary:hover, .btn.btn-primary:focus {
  background: var(--navy-dark); border-color: var(--navy-dark);
  box-shadow: var(--sh-2);
}

/* ΤΟ ΚΟΚΚΙΝΟ CTA — και γιατί δεν μπαίνει με γενικό επιλογέα.
   Δοκιμάστηκε `.btn[type="submit"].btn-primary` και απέτυχε με τον χειρότερο
   τρόπο: έβαψε κόκκινα τα «Υποβολή» των modals (προσθήκη δέματος, διεύθυνσης
   — δευτερεύουσες ενέργειες) και άφησε navy το «Δημιουργία αποστολής», που
   είναι το πραγματικό CTA. Ακριβώς ανάποδα.

   Ποιο κουμπί είναι «το κύριο» δεν προκύπτει από το markup — είναι απόφαση
   περιεχομένου. Μένει λοιπόν μία κλάση που ο συντηρητής βάζει όπου πρέπει:

       <button class="btn btn-primary btn-cta">Δημιουργία αποστολής</button>

   Η μόνη περίπτωση που κρίνεται από εδώ είναι η σελίδα σύνδεσης: έχει ένα και
   μοναδικό κουμπί, οπότε δεν υπάρχει αμφιβολία. */
.btn.btn-cta,
body.app-blank #kt_sign_up_submit {
  background: var(--red); border-color: var(--red); color: #fff;
  box-shadow: var(--sh-2);
}
.btn.btn-cta:hover, .btn.btn-cta:focus,
body.app-blank #kt_sign_up_submit:hover,
body.app-blank #kt_sign_up_submit:focus {
  background: var(--red-dark); border-color: var(--red-dark);
}

.btn.btn-light, .btn.btn-secondary {
  background: var(--white);
  border: 2px solid var(--line);
  color: var(--ink);
}
.btn.btn-light:hover, .btn.btn-secondary:hover {
  background: var(--navy); border-color: var(--navy); color: #fff;   /* .btn-ghost:hover */
}
.btn:disabled, .btn.disabled { box-shadow: none; opacity: .55; }

/* --------------------------------------------------------------------------
   7. Σημειώσεις — ο ρόλος του --warm στο v25

   Δεν είναι καμβάς: είναι το φόντο των .onote / .oprint / .sec-warm, δηλαδή
   πληροφορίας που πρέπει να διαβαστεί χωρίς να τρομάξει.
   -------------------------------------------------------------------------- */

.alert:not(.alert-danger):not(.alert-success),
.note, .notice, .card .text-warning {
  background: var(--warm) !important;
  border: 1px solid #f0e3c9;
  border-radius: var(--r-btn);
  color: #6b5220;
}

.alert-danger  { background: var(--err-bg) !important; border: 1px solid #f5d5d2; color: var(--err); }
.alert-success { background: var(--ok-bg)  !important; border: 1px solid #cfe9dd; color: var(--ok); }

/* Το «Προαιρετικό πεδίο» γράφεται σήμερα κόκκινο — με το χρώμα που στο v25
   ανήκει στο κύριο CTA και στο σφάλμα. Γίνεται ουδέτερο. */
.card .text-danger:not(.required), .card small.text-danger {
  color: var(--n-500) !important; font-size: 12px; font-weight: 600;
}

/* --------------------------------------------------------------------------
   8. Αναδυόμενα · επιλογέας μήνα · αδιάβαστο
   -------------------------------------------------------------------------- */

.modal-content { border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh-3); }
.modal-header { border-bottom: 1px solid var(--line); padding: 18px 24px; }
.modal-body { padding: 24px; }
.modal-footer { border-top: 1px solid var(--line); padding: 16px 24px; }
.separator { border-color: var(--line) !important; }

.month_select {
  display: inline-block; width: 96px;
  padding: 8px 4px; margin-right: 4px;
  background: var(--white); color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: var(--r-btn);
  box-shadow: var(--sh-1);
  text-align: center; font-size: 15px; font-weight: 700; cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.month_select:hover { border-color: var(--navy); background: #eaf0fb; }
.month_select.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.month_select span { display: block; font-weight: 400; font-size: 12px; opacity: .85; }
@media only screen and (max-width: 480px) { .month_select { width: 92px; margin-bottom: 4px; } }

.unread_message {
  padding: 8px 12px;
  background: #eaf0fb;
  border-left: 3px solid var(--navy);
  border-radius: 0 var(--r-btn) var(--r-btn) 0;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   9. Σελίδα σύνδεσης — το navy του v25, με το CTA κόκκινο
   -------------------------------------------------------------------------- */

body.app-blank { background: var(--white); }
body.app-blank .bgi-size-cover {
  background-image: linear-gradient(150deg, var(--navy) 0%, var(--navy-dark) 62%, #0D1A3E 100%) !important;
  position: relative;
}
body.app-blank .bgi-size-cover::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 22% 20%, rgba(127, 168, 240, .22) 0, transparent 44%),
    radial-gradient(circle at 80% 80%, rgba(255, 255, 255, .09) 0, transparent 38%);
}
body.app-blank .bgi-size-cover > * { position: relative; z-index: 1; }
body.app-blank img[alt="Logo"] {
  padding: 16px 24px; background: #fff;
  border-radius: var(--r-card); box-shadow: var(--sh-3);
}
body.app-blank h1.text-gray-900 {
  color: var(--ink) !important; font-size: 29px; font-weight: 800;
}
body.app-blank .form-control { min-height: 50px; height: 50px; font-size: 1rem; }
body.app-blank .btn.btn-primary { min-height: 50px; font-size: 1.0625rem; }

/* --------------------------------------------------------------------------
   10. Σύνδεσμοι · κίνηση
   -------------------------------------------------------------------------- */

a:not(.btn):not(.menu-link) { color: var(--bs-link-color); text-decoration: none; }
a:not(.btn):not(.menu-link):hover { color: var(--bs-link-hover-color); }
.text-primary { color: var(--navy) !important; }
.text-muted { color: var(--n-500) !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ==========================================================================
   ΔΕΙΚΤΗΣ ΒΗΜΑΤΩΝ ΠΑΡΑΓΓΕΛΙΑΣ — κοινό τμήμα για όλες τις προτάσεις

   ΓΙΑΤΙ ΥΠΑΡΧΕΙ: το inline <style> του order.php δεν ήταν μόνο εικαστικό.
   Περιείχε και λειτουργία:

       .step-wrapper { display: none; }
       .step-wrapper.active { display: block; }

   Αφαιρώντας τα inline μπλοκ αδιακρίτως, ο δείκτης βημάτων κατέρρευσε σε απλή
   αριθμημένη λίστα: display table → block, κύκλος 64×64 με radius 50% → κουτί
   1054×19,5 με radius 0. Το σφάλμα φάνηκε στην οθόνη που παράγει τα έσοδα.

   Εδώ ξαναχτίζεται — και ανασχεδιάζεται: κύκλοι 44px αντί 64px, χρώματα από τη
   μάρκα αντί για τα #4183D7 και #04B440 που δεν της ανήκουν.

   Χρησιμοποιεί μόνο --bs-primary, που ορίζουν και τα πέντε φύλλα.
   ========================================================================== */

.step-wrapper { padding: 20px 0; display: none; }
.step-wrapper.active { display: block; }

.step-indicator {
  border-collapse: separate;
  display: table;
  table-layout: fixed;
  width: 100%;
  margin-left: 0;
  padding-left: 0;
  padding-top: 16px;
  position: relative;
  text-align: center;
  vertical-align: middle;
  list-style: none;
}

.step-indicator li {
  display: table-cell;
  position: relative;
  float: none;
  padding: 0;
  width: 1%;
  list-style: none;
}

/* Η γραμμή που ενώνει τα βήματα, στο ύψος του κέντρου του κύκλου */
.step-indicator li::after {
  background-color: #DFE5EE;
  content: "";
  display: block;
  height: 2px;
  position: absolute;
  width: 100%;
  top: 38px;
  left: 50%;
}
.step-indicator li:last-child::after { display: none; }

.step-indicator .step {
  background-color: #fff;
  border: 2px solid #DFE5EE;
  border-radius: 50%;
  color: #98A2B3;
  font-size: 17px;
  font-weight: 600;
  height: 44px;
  width: 44px;
  line-height: 40px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.step-indicator .step:hover { cursor: pointer; border-color: var(--bs-primary); }

.step-indicator .caption {
  color: #98A2B3;
  padding: 10px 12px 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}

/* Τρέχον βήμα */
.step-indicator li.active .step {
  border-color: var(--bs-primary);
  color: var(--bs-primary);
  box-shadow: 0 0 0 4px rgba(0, 161, 237, .14);
}
.step-indicator li.active .caption {
  color: var(--bs-primary);
  font-weight: 600;
}

/* Ολοκληρωμένο βήμα — γεμάτος κύκλος, ώστε να ξεχωρίζει από το τρέχον */
.step-indicator li.complete .step {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}
.step-indicator li.complete::after { background-color: var(--bs-primary); }
.step-indicator li.complete .caption { color: #414B5C; }

@media (max-width: 640px) {
  .step-indicator .step { height: 38px; width: 38px; line-height: 34px; font-size: 15px; }
  .step-indicator li::after { top: 34px; }
  .step-indicator .caption { font-size: 11.5px; padding: 8px 4px 0; }
}

/* Το inline μπλοκ έκρυβε και τα βελάκια των αριθμητικών πεδίων — σε φόρμα με
   διαστάσεις και βάρη, τα spinners του φυλλομετρητή κλέβουν χώρο και πατιούνται
   κατά λάθος. */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }