/* ============================================================================
   ΠΟΛΙΤΙΚΗ ΑΠΟΡΡΗΤΟΥ ΜΕΣΑ ΣΕ ΠΛΑΙΣΙΟ   (29/8/2026, αίτημα Αντώνη)
   ----------------------------------------------------------------------------
   ΤΟ ΠΡΟΒΛΗΜΑ: ο γονέας συμπληρώνει τη φόρμα, πατά «Πολιτική Απορρήτου» και
   ΦΕΥΓΕΙ από τη σελίδα. Γυρίζοντας πίσω, ό,τι είχε γράψει μπορεί να έχει χαθεί —
   και συχνά δεν γυρίζει καν. Τώρα η πολιτική ανοίγει ΠΑΝΩ από τη φόρμα.

   ΦΟΡΤΩΝΕΤΑΙ ΜΟΝΟ ΣΤΙΣ ΔΥΟ ΣΕΛΙΔΕΣ ΜΕ ΦΟΡΜΑ (endiaferon, synergasia) και όχι
   μέσα στο style.css: οι υπόλοιπες 9 σελίδες δεν έχουν λόγο να το κατεβάζουν.

   ΤΟ ΚΕΙΜΕΝΟ ΔΕΝ ΑΝΤΙΓΡΑΦΕΤΑΙ: το politiki-modal.js το τραβά από την ΙΔΙΑ την
   privacy.html την ώρα που ζητείται. Ένα canonical σπίτι — αν αύριο αλλάξει η
   πολιτική, το πλαίσιο δείχνει αυτόματα τη νέα.

   ΤΟ ΥΨΟΣ (η καρδιά του αιτήματος): το κουτί δεν έχει ΣΤΑΘΕΡΟ ύψος. Είναι
   στήλη flex — κεφαλή και πόδι ΑΚΙΝΗΤΑ, κυλάει ΜΟΝΟ το σώμα — και το σύνολο
   δεσμεύεται από το ύψος του παραθύρου εκείνη τη στιγμή.
   ============================================================================ */

/* ── ΤΟ ΣΤΡΩΜΑ ────────────────────────────────────────────────────────────────
   z-index 300: πάνω από το modal του βίντεο (200), κάτω από τα φύλλα των μενού
   (1200) — δεν συνυπάρχουν ποτέ, αλλά η ιεραρχία μένει καθαρή.
   Το γέμισμα είναι το «αναπνευστικό» περιθώριο· σε κινητό μικραίνει ώστε το
   κουτί να πιάνει σχεδόν όλη την οθόνη. */
.pmodal{
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  padding: clamp(.6rem, 3vw, 2.5rem);
}
.pmodal[hidden]{ display: none; }
.pmodal__back{ position: absolute; inset: 0; background: rgba(10, 14, 20, .62); backdrop-filter: blur(3px); }

/* ── ΤΟ ΚΟΥΤΙ ─────────────────────────────────────────────────────────────────
   ⚠ ΓΙΑΤΙ ΔΥΟ ΦΟΡΕΣ max-height: η πρώτη γραμμή (vh) είναι το δίχτυ για παλιούς
   φυλλομετρητές· η δεύτερη τη ΣΚΕΠΑΖΕΙ όπου υποστηρίζεται το svh.
   ΓΙΑΤΙ svh ΚΑΙ ΟΧΙ dvh: το `dvh` αλλάζει ΟΣΟ κυλάει η μπάρα διευθύνσεων του
   iPhone — το κουτί θα «ανέπνεε» μπρος-πίσω όσο διαβάζει ο χρήστης. Το `svh`
   είναι το ΜΙΚΡΟΤΕΡΟ ύψος (με τη μπάρα ορατή): σταθερό, και δεν κόβεται ΠΟΤΕ.
   Το 900px είναι ταβάνι για μεγάλες οθόνες — γραμμή 40cm ύψος δεν διαβάζεται. */
.pmodal__box{
  position: relative;
  display: flex; flex-direction: column;
  width: min(100%, 760px);
  max-height: 88vh;
  max-height: min(88svh, 900px);
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-border-soft, #E1E3E8);
  border-radius: 16px;
  box-shadow: 0 30px 80px -24px rgba(8, 12, 20, .45);
  overflow: hidden;   /* οι γωνίες κόβουν το σώμα που κυλάει από μέσα */
}

/* ── ΚΕΦΑΛΗ — ΑΚΙΝΗΤΗ ───────────────────────────────────────────────────────── */
.pmodal__head{
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem clamp(1rem, 4vw, 1.75rem);
  border-bottom: 1px solid var(--c-border-soft, #E1E3E8);
  background: var(--c-surface, #fff);
}
.pmodal__title{
  margin: 0; font-size: clamp(1.05rem, 2.6vw, 1.3rem); font-weight: 600;
  color: var(--c-ink, #17191E); line-height: 1.25;
}
.pmodal__close{
  flex: none; width: 44px; height: 44px;   /* αφή: αρχή «tablet first, με δάχτυλο» */
  display: grid; place-items: center;
  background: transparent; border: 1px solid var(--c-border, #D7DAE0);
  border-radius: 999px; cursor: pointer; color: var(--c-ink-soft, #474C56);
  transition: background .15s, border-color .15s, color .15s;
}
.pmodal__close:hover{ background: var(--c-bg, #F7F8FC); border-color: var(--c-cta, #00807D); color: var(--c-cta, #00807D); }
.pmodal__close:focus-visible{ outline: none; border-color: var(--c-cta, #00807D); box-shadow: 0 0 0 3px rgba(0,128,125,.22); }
.pmodal__close svg{ width: 20px; height: 20px; }

/* ── ΣΩΜΑ — ΤΟ ΜΟΝΟ ΠΟΥ ΚΥΛΑΕΙ ───────────────────────────────────────────────
   ⚠ `min-height: 0` ΕΙΝΑΙ ΥΠΟΧΡΕΩΤΙΚΟ, ΟΧΙ ΔΙΑΚΟΣΜΗΤΙΚΟ: το προεπιλεγμένο
   `min-height:auto` ενός flex item ΑΡΝΕΙΤΑΙ να συρρικνωθεί κάτω από το
   περιεχόμενό του. Χωρίς αυτό, το κουτί θα φούσκωνε στα 60+ χιλιάδες pixel του
   κειμένου και θα ξεχείλιζε από την οθόνη αντί να κυλήσει από μέσα.
   `overscroll-behavior: contain`: όταν φτάσει στο τέλος, ΔΕΝ παρασύρει τη
   σελίδα από κάτω — αλλιώς ο χρήστης «τρυπάει» στη φόρμα ενώ διαβάζει. */
.pmodal__body{
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: clamp(1rem, 4vw, 1.75rem);
}

/* ΤΟ ΚΕΙΜΕΝΟ ΤΗΣ ΠΟΛΙΤΙΚΗΣ ΜΕΣΑ ΣΤΟ ΠΛΑΙΣΙΟ
   Έρχεται αυτούσιο από την privacy.html, άρα φέρνει μαζί του το `.container`
   της σελίδας — που έχει δικό του μέγιστο πλάτος και γεμίσματα. Μέσα στο
   πλαίσιο αυτά περισσεύουν: το κουτί ΕΙΝΑΙ ήδη η στήλη ανάγνωσης. */
.pmodal__body .container{ width: 100%; max-width: none; padding: 0; margin: 0; }
.pmodal__body > :first-child{ margin-top: 0; }
.pmodal__body > :last-child{ margin-bottom: 0; }
/* Οι πίνακες της §5 (χρόνοι διατήρησης) είναι φαρδιοί. Κυλούν ΜΟΝΟΙ ΤΟΥΣ
   οριζόντια μέσα στο δικό τους κουτί — ποτέ η σελίδα. */
.pmodal__body table{ display: block; width: 100%; overflow-x: auto; }

/* ── ΠΟΔΙ — ΑΚΙΝΗΤΟ ──────────────────────────────────────────────────────────
   Ο σύνδεσμος «σε νέα καρτέλα» μένει: κάποιος μπορεί να θέλει να την κρατήσει,
   να την τυπώσει ή να τη στείλει. Το πλαίσιο δεν του αφαιρεί την επιλογή. */
.pmodal__foot{
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap;
  padding: .85rem clamp(1rem, 4vw, 1.75rem);
  border-top: 1px solid var(--c-border-soft, #E1E3E8);
  background: var(--c-bg, #F7F8FC);
}
.pmodal__link{ font-size: .85rem; color: var(--c-ink-mute, #72777F); text-decoration: underline; }
.pmodal__link:hover{ color: var(--c-cta, #00807D); }
.pmodal__ok{
  min-height: 44px; padding: 0 1.5rem;
  background: var(--c-cta, #00807D); color: #fff;
  border: 0; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: .95rem; font-weight: 600;
  transition: background .15s;
}
.pmodal__ok:hover{ background: var(--c-cta-hover, #006B68); }
.pmodal__ok:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(0,128,125,.3); }

/* ── ΟΣΟ ΦΟΡΤΩΝΕΙ ───────────────────────────────────────────────────────────── */
.pmodal__load{ padding: 2.5rem 0; text-align: center; color: var(--c-ink-mute, #72777F); font-size: .95rem; }

/* ── ΑΝΟΙΓΜΑ ─────────────────────────────────────────────────────────────────
   Σύντομο και ήπιο: το πλαίσιο δεν είναι εντυπωσιασμός, είναι εξυπηρέτηση. */
@keyframes pmodalIn{ from{ opacity: 0; transform: translateY(10px) scale(.99); } to{ opacity: 1; transform: none; } }
@keyframes pmodalBack{ from{ opacity: 0; } to{ opacity: 1; } }
.pmodal:not([hidden]) .pmodal__box { animation: pmodalIn .22s cubic-bezier(.22, 1, .36, 1); }
.pmodal:not([hidden]) .pmodal__back{ animation: pmodalBack .22s ease; }

/* ── ΚΙΝΗΤΟ ──────────────────────────────────────────────────────────────────
   Σχεδόν όλη η οθόνη: σε 375px κάθε pixel περιθωρίου είναι pixel που δεν
   διαβάζεται. Το πόδι στοιβάζεται ώστε το κουμπί να πιάνει όλο το πλάτος. */
@media (max-width: 600px){
  .pmodal{ padding: .5rem; }
  .pmodal__box{ max-height: 94vh; max-height: 94svh; border-radius: 14px; }
  .pmodal__foot{ flex-direction: column-reverse; align-items: stretch; gap: .6rem; }
  .pmodal__ok{ width: 100%; }
  .pmodal__link{ text-align: center; }
}

@media (prefers-reduced-motion: reduce){
  .pmodal:not([hidden]) .pmodal__box,
  .pmodal:not([hidden]) .pmodal__back{ animation: none; }
  .pmodal__close, .pmodal__ok{ transition: none; }
}