/**
 * Φόρμα εγγραφής μαθητών.
 *
 * Δεν εισάγει κανένα δικό της χρώμα, γραμματοσειρά ή καμπύλη — όλα βγαίνουν από
 * τα tokens του θέματος. Γι' αυτό η φόρμα δεν μοιάζει με ξένο εργαλείο που
 * κάθισε πάνω στο site: είναι φτιαγμένη από τα ίδια υλικά.
 *
 * 2026-08-10, αίτημα της πελάτισσας: το πλαίσιο μοβ «όπως εκεί που χτυπά η
 * καρδιά της ελληνικής γλώσσας», γράμματα λευκά, «Φόρμα εγγραφής» κεφαλαία.
 * Το gradient είναι κυριολεκτικά το ίδιο με το hero της αρχικής — δεν
 * ξαναγράφτηκε, ούτε προσεγγίστηκε «με το μάτι».
 *
 * Η αντιστροφή σε σκούρο φόντο αλλάζει κάθε χρώμα κειμένου μέσα στην κάρτα, όχι
 * μόνο το φόντο· ό,τι είχε βάρος ink γίνεται λευκό, και ό,τι πάτημα υπήρχε ως
 * λευκό πλακίδιο γίνεται πέπλο λευκού πάνω στο μοβ.
 *
 * --intake-veil: το πέπλο των πλακιδίων. 0.12 είναι ΤΑΒΑΝΙ, όχι γούστο: πάνω
 * από αυτό το λευκό κείμενο πέφτει κάτω από 4.5:1 στη μαγέντα γωνία του
 * gradient (μετρημένο 4.99:1 στο 0.12, 4.43:1 στο 0.18).
 */

.intake-wrap { max-width: var(--maxw-narrow); margin-inline: auto; }

.intake-card {
  --intake-veil: rgba(255, 255, 255, 0.12);
  --intake-veil-hi: rgba(255, 255, 255, 0.2);
  --intake-edge: rgba(255, 255, 255, 0.28);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Το gradient του hero της αρχικής, αυτούσιο. Λευκό κείμενο: 14.4:1 στο
     violet-deep, 7.3:1 στο violet, 6.3:1 στη μαγέντα — περνά παντού. */
  background: linear-gradient(115deg, var(--violet-deep) 0%, var(--violet) 48%, var(--magenta) 115%);
  color: var(--white);
  border: 1px solid var(--intake-edge);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

/* Οι ίδιοι αχνοί δίσκοι με hero, CTA και footer, ώστε τα χρωματιστά μπλοκ του
   site να μιλούν ένα λεξιλόγιο. */
.intake-card::before,
.intake-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  pointer-events: none;
}
.intake-card::before { top: -7rem; right: -5rem; width: 20rem; height: 20rem; }
.intake-card::after  { bottom: -8rem; left: -4rem; width: 14rem; height: 14rem; }

/**
 * «ΦΟΡΜΑ ΕΓΓΡΑΦΗΣ» — κεφαλαία, όπως τα ζήτησε.
 *
 * Τα ελληνικά κεφαλαία χάνουν τους τόνους μόνο όταν το <html> δηλώνει lang="el".
 * Το δηλώνει (η γλώσσα του site μπαίνει από το brand-assets.sh), αλλιώς θα
 * διαβάζαμε «ΦΌΡΜΑ ΕΓΓΡΑΦΉΣ». Η ίδια κλάση κρατά και το «ΒΗΜΑ 2 ΑΠΟ 3».
 */
.intake-eyebrow {
  font-family: var(--font-head);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0;
}

.intake-welcome {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.92);
  margin: 0.75rem 0 1.75rem;
}

.intake-step-title {
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 4vw, 1.875rem);
  line-height: 1.2;
  color: var(--white);
  margin: 0.75rem 0 0;
  outline: none;
}

.intake-step-help { color: rgba(255, 255, 255, 0.88); line-height: 1.65; margin: 0.5rem 0 0; }

/* Θέση μέσα στη φόρμα. Γεμάτο = περασμένο. Το περασμένο είναι λευκό, όχι
   μαγέντα: πάνω στο μοβ η μαγέντα δεν ξεχωρίζει από το φόντο. */
.intake-bar { display: flex; gap: 0.375rem; list-style: none; margin: 0.625rem 0 0; padding: 0; }
.intake-bar li { flex: 1; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.26); }
.intake-bar li.is-done { background: var(--white); }

.intake-fields { margin-top: 1.75rem; display: grid; gap: 1.5rem; }
.intake-field { display: block; }

.intake-label {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--white);
  margin-bottom: 0.5rem;
}
.intake-optional { font-family: var(--font-body); font-weight: 400; color: rgba(255, 255, 255, 0.78); }

/**
 * Τα πεδία γραφής μένουν λευκά με σκούρο κείμενο, και είναι σκόπιμο.
 *
 * Ένα πεδίο που γράφεις πρέπει να μοιάζει με πεδίο· λευκά γράμματα πάνω σε
 * ημιδιάφανο μοβ διαβάζονται ως τοποθετημένο κείμενο, όχι ως κάτι που περιμένει
 * πληκτρολόγηση — και το autofill του browser επιβάλλει λευκό φόντο με σκούρο
 * κείμενο ούτως ή άλλως, οπότε θα έσπαγε μόνο του.
 */
.intake-input {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white, #fff);
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
/* Το γαλάζιο focus ring του θέματος χάνεται μέσα στο μοβ· εδώ το ring είναι
   λευκό, που είναι και το πιο δυνατό που έχει η κάρτα. */
.intake-input:focus-visible {
  outline: none;
  border-color: var(--violet-deep);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.65);
}
textarea.intake-input { resize: vertical; line-height: 1.6; }

.intake-group { border: 0; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.intake-group legend { padding: 0; }

/**
 * Πλακίδια επιλογής: πέπλο λευκού όσο δεν είναι διαλεγμένα, συμπαγές λευκό όταν
 * είναι. Η αντιστροφή είναι ξεκάθαρη με μια ματιά — το παλιό ζεύγος (λευκό vs
 * magenta-soft) ήταν δύο σχεδόν-λευκά, που πάνω στο μοβ θα ήταν το ίδιο πράγμα.
 */
.intake-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3rem;
  padding: 0.6875rem 1rem;
  color: var(--white);
  background: var(--intake-veil);
  border: 1px solid var(--intake-edge);
  border-radius: var(--radius);
  cursor: pointer;
  line-height: 1.4;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.intake-option:hover { background: var(--intake-veil-hi); border-color: var(--white); }
.intake-option.is-on {
  background: var(--white);
  border-color: var(--white);
  color: var(--violet-deep);
  font-weight: 600;
}
.intake-option input { width: 1.125rem; height: 1.125rem; accent-color: var(--violet-deep); flex: none; }
.intake-option.is-on input { accent-color: var(--magenta); }

.intake-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  color: var(--white);
  background: var(--intake-veil);
  border: 1px solid var(--intake-edge);
  border-radius: var(--radius);
  cursor: pointer;
  line-height: 1.6;
}
.intake-consent input { width: 1.125rem; height: 1.125rem; margin-top: 0.2rem; accent-color: var(--white); flex: none; }
/* Ο σύνδεσμος της πολιτικής είναι το ένα πράγμα που ΠΡΕΠΕΙ να φαίνεται
   πατήσιμο σε βήμα συγκατάθεσης, γι' αυτό κρατά υπογράμμιση και δεν βασίζεται
   στο χρώμα για να διαβαστεί ως σύνδεσμος. */
.intake-policy {
  display: inline-block;
  margin-top: 0.625rem;
  font-weight: 600;
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.6);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.intake-policy:hover { color: var(--white); text-decoration-color: var(--white); }

.intake-help { font-size: 0.875rem; line-height: 1.5; color: rgba(255, 255, 255, 0.82); margin: 0.5rem 0 0; }
/**
 * Το λάθος ήταν #b3261e — πάνω στο μοβ μετρά 1.12:1, δηλαδή αόρατο.
 * Ένα μήνυμα λάθους που δεν διαβάζεται είναι φόρμα που κολλάει χωρίς εξήγηση,
 * οπότε το κόκκινο πάει στη φωτεινή του άκρη: 5.05:1 στο χειρότερο σημείο.
 */
.intake-error { font-size: 0.875rem; font-weight: 600; color: #ffe0dc; margin: 0.5rem 0 0; }

.intake-actions { margin-top: 2rem; display: grid; gap: 0.875rem; justify-items: center; }

/**
 * Το κουμπί αντιστρέφεται σε λευκό.
 *
 * Το .btn-primary του θέματος είναι μαγέντα, και το gradient της κάρτας
 * ΚΑΤΑΛΗΓΕΙ σε μαγέντα — ακριβώς κάτω δεξιά, όπου κάθεται το κουμπί. Θα
 * χανόταν μέσα στο φόντο του.
 *
 * Δεν είναι νέα ιδέα: το CTA block του θέματος λύνει το ίδιο πρόβλημα με τον
 * ίδιο τρόπο (.cta-inner .btn-primary). Αντιγράφεται αυτούσιο, ώστε τα δύο
 * αντεστραμμένα κουμπιά του site να μη διαφέρουν χωρίς λόγο. 9.2:1.
 */
.intake-card .btn-primary {
  background: var(--white);
  color: var(--magenta-deep);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
}
.intake-card .btn-primary:hover {
  background: var(--paper-alt);
  color: var(--magenta-deep);
}

.intake-back {
  background: none;
  border: 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  min-height: 2.75rem;
}
.intake-back:hover { color: var(--white); }

.intake-note { font-size: 0.875rem; color: rgba(255, 255, 255, 0.82); text-align: center; margin: 0.875rem 0 0; }

.intake-card--done { text-align: center; }
/* Προσωρινή όψη ελέγχου: ζει μόνο όσο η υποβολή είναι κλειστή. Σκούρο πέπλο
   ώστε ο κώδικας να διαβάζεται χωρίς να γίνεται λευκό κουτί μέσα στο μοβ. */
.intake-dryrun {
  text-align: left;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--white);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--intake-edge);
  border-radius: var(--radius);
  padding: 1rem;
  overflow-x: auto;
  margin-top: 0.75rem;
}

/**
 * Η αιωρούμενη μπάρα δράσης δεν εμφανίζεται σε αυτή τη σελίδα.
 *
 * Δύο λόγοι, και ο δεύτερος είναι ο σοβαρός: πέφτει πάνω στα πεδία σε κινητό,
 * και το κουμπί της οδηγεί στην Επικοινωνία — δηλαδή ΕΞΩ από τη φόρμα. Όποιος
 * το πατήσει στο βήμα 5 χάνει ό,τι έγραψε.
 *
 * Το αρχείο φορτώνει μόνο στη σελίδα εγγραφής, γι' αυτό ο κανόνας δεν χρειάζεται
 * ούτε body class ούτε !important — απλώς έρχεται μετά το theme.css.
 */
.action-bar { display: none; }

/* Επιλογή ώρας: η μέρα είναι επικεφαλίδα, οι ώρες κουμπιά κάτω της. */
.intake-slot-day { margin-top: 1.25rem; }
.intake-slot-day:first-of-type { margin-top: 0.75rem; }
.intake-slot-daylabel {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--white);
  margin: 0 0 0.5rem;
}
.intake-slot-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.intake-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 3rem;
  padding: 0.5rem 0.875rem;
  color: var(--white);
  background: var(--intake-veil);
  border: 1px solid var(--intake-edge);
  border-radius: var(--radius);
  cursor: pointer;
  line-height: 1.25;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.intake-slot:hover { background: var(--intake-veil-hi); border-color: var(--white); }
.intake-slot.is-on {
  background: var(--white);
  border-color: var(--white);
  color: var(--violet-deep);
}
/* Το κουμπάκι κρύβεται· ολόκληρο το πλακίδιο είναι ο στόχος αφής. */
.intake-slot input { position: absolute; opacity: 0; width: 0; height: 0; }
.intake-slot:focus-within { outline: 2px solid var(--white); outline-offset: 2px; }
.intake-slot-time { font-weight: 600; font-variant-numeric: tabular-nums; }
/* Η ώρα Ελλάδας δίπλα στην τοπική: υποδεέστερη, αλλά όχι σβησμένη — είναι η
   πληροφορία που εξηγεί γιατί οι ώρες δεν είναι αυτές που περίμενε ο γονιός. */
.intake-slot-alt { font-size: 0.75rem; color: rgba(255, 255, 255, 0.82); }
.intake-slot.is-on .intake-slot-alt { color: var(--violet); }

/* Λωρίδα ημερών: κυλάει οριζόντια αντί να σπρώχνει τη σελίδα σε ύψος. */
.intake-daystrip {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  scrollbar-width: thin;
}
.intake-daychip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  flex: none;
  min-width: 5rem;
  min-height: 3.5rem;
  padding: 0.5rem 0.75rem;
  color: var(--white);
  background: var(--intake-veil);
  border: 1px solid var(--intake-edge);
  border-radius: var(--radius);
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.intake-daychip:hover { background: var(--intake-veil-hi); border-color: var(--white); }
.intake-daychip.is-on {
  background: var(--white);
  border-color: var(--white);
  color: var(--violet-deep);
}
.intake-daychip-weekday { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.82); }
.intake-daychip.is-on .intake-daychip-weekday { color: var(--magenta-deep); }
.intake-daychip-date { font-weight: 600; color: var(--white); white-space: nowrap; }
.intake-daychip.is-on .intake-daychip-date { color: var(--violet-deep); }

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.intake-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}