/* Ι.Ν. ΚΟΙΜΗΣΕΩΣ ΤΗΣ ΘΕΟΤΟΚΟΥ, 40 ΕΚΚΛΗΣΙΕΣ — ΚΟΜΜΑΤΙ A8 (12/10/2026): οι εθελοντές: η κάρτα και η φόρμα που ανοίγει στη θέση της (μαζί με το ethelontis.js).
   Φορτώνεται ΜΟΝΟ στη δημόσια σελίδα, μετά το selida.css.
   Χρώματα μόνο από το xromata.css (η γραμμή από κάτω μένει πρώτη). Κάθε κανόνας μέσα σε «@media screen».
   Μία πλατιά κάρτα είναι όλη η ενότητα: ο τίτλος, η μία γραμμή, ένα κουμπί· η φόρμα ανοίγει μέσα της. Πρώτα το κινητό (390), μετά από 900px. */
@import url("xromata.css") screen;

@media screen {
  /* ── η κάρτα ── */
  #ethelontes .eth-karta { background: var(--fyllo); border: 1px solid var(--grammi); border-top: 3px solid var(--xryso); border-radius: 6px; overflow: hidden; }
  #ethelontes .eth-pano { display: grid; gap: 24px; padding: 30px 22px 28px; }
  #ethelontes .eth-logia { min-width: 0; }
  #ethelontes .eth-eikonidio { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 0 18px; border: 1px solid var(--xryso); border-radius: 50%; color: var(--xryso); }
  #ethelontes .eth-eikonidio .eik-svg { width: 24px; height: 24px; }
  #ethelontes .eth-logia .etiketa { margin: 0; font-size: 14px; letter-spacing: .12em; }
  #ethelontes .eth-titlos { margin: 8px 0 12px; font-size: 34px; line-height: 1.1; text-wrap: balance; }
  #ethelontes .eth-lede { max-width: 30em; margin: 0; font-size: 18px; line-height: 1.5; color: var(--melani-2); text-wrap: balance; }

  /* ── το κουμπί που ανοίγει τη φόρμα: μεγάλο, πιάνει τον χώρο του· το βέλος του γυρίζει προς τα κάτω ── */
  #ethelontes .eth-drasi { display: grid; }
  #ethelontes .eth-anoigma { justify-content: center; gap: 12px; min-height: 58px; padding: 14px 28px; font-size: 19px; white-space: normal; text-align: center; -webkit-tap-highlight-color: transparent; }
  #ethelontes .eth-velos { display: inline-block; line-height: 1; transition: transform 420ms cubic-bezier(.22, .61, .36, 1); }
  #ethelontes .eth-anoigma[aria-expanded="true"] .eth-velos { transform: rotate(90deg); }
  /* (14/10/2026) ΑΝΟΙΧΤΗ Η ΦΟΡΜΑ: το κουμπί γίνεται ήσυχο «Κλείσιμο» με λεπτό × γραμμής, πάνω δεξιά στην κάρτα.
     Ένα μόνο γεμάτο κουμπί μένει στην κάρτα: η «Αποστολή». */
  #ethelontes .eth-pano { position: relative; }
  /* (14/10/2026) δύο κλάσεις μέσα στο κουμπί: ο κανόνας «.eth-sym { display: inline-block }» πιο κάτω έχει την ίδια βαρύτητα και κέρδιζε, κι έτσι το × φαινόταν στο κλειστό κουμπί */
  #ethelontes .eth-anoigma .eth-xi { display: none; width: 18px; height: 18px; }
  #ethelontes .eth-drasi.eth-drasi-anoixti { position: absolute; top: 14px; right: 14px; }
  #ethelontes .eth-anoigma.eth-anoixto { gap: 8px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--grammi); background: transparent; box-shadow: none; filter: none; font-size: 16px; letter-spacing: .02em; color: var(--kokkino-vathy); white-space: nowrap; }
  #ethelontes .eth-anoigma.eth-anoixto .eth-velos { display: none; }
  #ethelontes .eth-anoigma.eth-anoixto .eth-xi { display: inline-block; }
  #ethelontes .eth-anoigma.eth-anoixto:active { background: var(--simera-fonto); color: var(--kokkino-vathy); }
  @media (hover: hover) { #ethelontes .eth-anoigma.eth-anoixto:hover { border-color: var(--kokkino-vathy); background: var(--fyllo); color: var(--kokkino-vathy); } }
  #ethelontes .eth-anoigma.eth-anoixto:focus-visible { outline: 3px solid var(--xryso-fos); outline-offset: 2px; }

  /* ── η φόρμα: ένα φύλλο χαρτί μέσα στην κάρτα ── */
  #ethelontes .eth-forma { margin: 0; border-top: 1px solid var(--grammi); background: var(--xarti); }
  #ethelontes .eth-forma-mesa { display: grid; gap: 22px; padding: 26px 22px 28px; }
  #ethelontes .eth-tria { display: grid; gap: 18px; }
  #ethelontes .eth-pedio { min-width: 0; margin: 0; }
  #ethelontes .eth-etiketa { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 8px; font: 600 15px/1.35 var(--keimeno); color: var(--melani); }
  #ethelontes .eth-proairetiko { font: 400 15px/1.3 var(--etiketa); letter-spacing: .04em; color: var(--axno); }
  /* τα πεδία: το ίδιο ντύσιμο με κάθε φόρμα του επισκέπτη (esoteriki.css, «.es-pedio»): 52px, λεπτή γραμμή, κόκκινο με χρυσό δαχτυλίδι στην εστίαση */
  #ethelontes .eth-input { box-sizing: border-box; display: block; width: 100%; min-height: 52px; margin: 0; padding: 12px 14px; border: 1px solid var(--grammi); border-radius: 4px; background: var(--fyllo); font: 400 17px/1.3 var(--keimeno); color: var(--melani); -webkit-appearance: none; appearance: none; transition: border-color 260ms var(--kampyli), box-shadow 260ms var(--kampyli); }
  #ethelontes .eth-input::placeholder { color: var(--axno); opacity: 1; }
  #ethelontes .eth-input:focus { outline: none; border-color: var(--kokkino-vathy); box-shadow: 0 0 0 3px color-mix(in srgb, var(--xryso-fos) 70%, transparent); }
  #ethelontes .eth-input[aria-invalid="true"] { border-color: var(--prosoxi); border-bottom-width: 2px; }
  #ethelontes .eth-pedio-lathos { margin: 6px 0 0; font: 600 15px/1.4 var(--keimeno); color: var(--prosoxi); }
  #ethelontes .eth-sym { flex: none; display: inline-block; vertical-align: middle; overflow: visible; }

  /* τα τσιπάκια (πού, πότε): ίσο πλέγμα, για τον αντίχειρα· το διαλεγμένο γεμίζει κόκκινο, το σύμβολο χρυσό γίνεται ανοιχτό χρυσό */
  #ethelontes .eth-tsips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #ethelontes .eth-tsips + .eth-tsips { margin-top: 8px; }
  #ethelontes .eth-tsips-pou .eth-tsip:last-child:nth-child(odd) { grid-column: 1 / -1; }
  #ethelontes .eth-tsips-meres { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  /* (14/10/2026) στο στενό κινητό οι επτά μέρες σε μία σειρά έβγαιναν 39px πλάτος: κάτω από το 44 του δαχτύλου. Δύο γεμάτες σειρές, χωρίς κενό:
     οι πέντε καθημερινές πάνω, Σάββατο και Κυριακή κάτω, το καθένα μισή σειρά (πλέγμα 10 στηλών: 5 × 2, 2 × 5). */
  /* (15/10/2026, κριτική 13:40: «καθαρο grid») τέσσερα ίσα σε κάθε σειρά, όχι 5 μικρά και 2 πλατιά: καμία μέρα δεν μοιάζει πιο σημαντική */
  @media (max-width: 439.98px) {
    #ethelontes .eth-tsips-meres { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  }
  #ethelontes .eth-tsips-ores { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #ethelontes .eth-tsips-opote { grid-template-columns: minmax(0, 1fr); }
  #ethelontes .eth-tsip { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 52px; margin: 0; padding: 8px 10px; border: 1px solid var(--grammi); border-radius: 4px; background: var(--fyllo); font: 400 16px/1.2 var(--keimeno); color: var(--melani); text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 260ms var(--kampyli), border-color 260ms var(--kampyli), color 260ms var(--kampyli); }
  #ethelontes .eth-tsips-pou .eth-tsip { justify-content: flex-start; text-align: left; padding-inline: 12px; }
  #ethelontes .eth-tsips-meres .eth-tsip { padding-inline: 2px; font-variant-numeric: lining-nums; }
  #ethelontes .eth-tsips-ores .eth-tsip { flex-direction: column; gap: 4px; min-height: 64px; padding-inline: 4px; }
  #ethelontes .eth-tsip .eth-sym { width: 20px; height: 20px; color: var(--xryso); }
  #ethelontes .eth-tsip[aria-pressed="true"] { border-color: var(--kokkino-vathy); background: var(--kokkino-vathy); color: var(--fyllo); }
  #ethelontes .eth-tsip[aria-pressed="true"] .eth-sym { color: var(--xryso-fos); }
  @media (hover: hover) { #ethelontes .eth-tsip:not([aria-pressed="true"]):hover { border-color: var(--kokkino-vathy); } }

  #ethelontes .eth-istoselida { position: absolute; left: -9999px; width: 1px; height: 1px; visibility: hidden; }

  /* η ενημέρωση και το κουτάκι της */
  #ethelontes .eth-enimerosi { padding: 14px 16px; border: 1px solid var(--grammi); border-radius: 6px; background: var(--fyllo); font-size: 16px; line-height: 1.55; color: var(--melani); }
  #ethelontes .eth-enimerosi p { margin: 0 0 8px; }
  #ethelontes .eth-enimerosi > :last-child { margin-bottom: 0; }
  #ethelontes .eth-enimerosi details { margin-top: 4px; }
  #ethelontes .eth-enimerosi summary { display: flex; align-items: center; min-height: 44px; font-family: var(--etiketa); font-size: 17px; color: var(--kokkino-vathy); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  #ethelontes .eth-enimerosi dl { margin: 0; }
  #ethelontes .eth-enimerosi dt { margin-top: 10px; font-family: var(--etiketa); font-weight: 600; }
  #ethelontes .eth-enimerosi dd { margin: 2px 0 0; }
  #ethelontes .eth-tsek { position: relative; display: flex; align-items: center; gap: 14px; min-height: 48px; margin: -6px 0; font-size: 17px; line-height: 1.4; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  #ethelontes .eth-tsek input { position: absolute; left: -8px; top: 50%; width: 44px; height: 44px; margin: -22px 0 0; opacity: 0; cursor: pointer; }
  #ethelontes .eth-kouti { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 1.5px solid color-mix(in srgb, var(--melani-2) 60%, var(--fyllo)); border-radius: 4px; background: var(--fyllo); }
  #ethelontes .eth-kouti::after { content: ""; width: 7px; height: 14px; margin-bottom: 3px; border: solid var(--fyllo); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); opacity: 0; }
  #ethelontes .eth-tsek input:checked + .eth-kouti { border-color: var(--kokkino-vathy); background: var(--kokkino-vathy); }
  #ethelontes .eth-tsek input:checked + .eth-kouti::after { opacity: 1; }
  #ethelontes .eth-tsek input:focus-visible + .eth-kouti { outline: 3px solid var(--xryso-fos); outline-offset: 2px; }

  #ethelontes .eth-lathos { margin: 0; padding: 12px 16px; border-left: 3px solid var(--prosoxi); border-radius: 0 4px 4px 0; background: color-mix(in srgb, var(--prosoxi) 8%, var(--fyllo)); font-size: 17px; line-height: 1.45; color: var(--prosoxi); }
  #ethelontes .eth-lathos a { color: inherit; font-weight: 600; white-space: nowrap; }
  #ethelontes .eth-telika { display: grid; }
  #ethelontes .eth-apostoli { justify-content: center; gap: 10px; min-height: 52px; padding: 12px 40px; font-size: 17px; }
  #ethelontes .eth-apostoli:disabled { opacity: .7; cursor: default; }

  /* ── μετά την αποστολή ── */
  #ethelontes .eth-telos { border-top: 1px solid var(--grammi); background: var(--xarti); }
  #ethelontes .eth-telos-mesa { padding: 30px 22px 32px; }
  /* «έγινε»: χρυσός κύκλος με λεπτό κόκκινο τικ, το ίδιο σημάδι με κάθε «ευχαριστούμε» της σελίδας (κανένα πράσινο) */
  #ethelontes .eth-simadi { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 0 16px; border: 1.6px solid var(--xryso); border-radius: 50%; color: var(--kokkino-vathy); }
  #ethelontes .eth-telos-titlos { margin: 0 0 16px; font-size: 30px; line-height: 1.12; outline: 0; }
  /* (15/10/2026, κριτική 13:40· ο Bill για τους αριθμούς: «τι να τον κανει ο ανθρωπος … τον αριθμο») ο αριθμός είναι μια μικρή ήσυχη γραμμή, όχι κουτί */
  #ethelontes .eth-arithmos-kouti { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0 0 18px; font-size: 15px; color: var(--melani-2); }
  #ethelontes .eth-arithmos-kouti small { font: 400 13px/1.3 var(--etiketa); letter-spacing: .04em; color: var(--melani-2); }
  #ethelontes .eth-arithmos { font: 400 15px/1.3 var(--etiketa); letter-spacing: .04em; color: var(--melani-2); overflow-wrap: anywhere; }
  #ethelontes .eth-perilipsi { display: grid; margin: 0 0 20px; }
  #ethelontes .eth-perilipsi[hidden] { display: none; }
  #ethelontes .eth-seira { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--grammi); }
  #ethelontes .eth-seira:last-child { border-bottom: 1px solid var(--grammi); }
  #ethelontes .eth-seira dt { font: 400 14px/1.4 var(--etiketa); letter-spacing: .06em; color: var(--melani-2); }
  #ethelontes .eth-seira dd { margin: 0; font-size: 16px; color: var(--melani); }
  #ethelontes .eth-grafeio { display: grid; gap: 10px; max-width: 420px; }
  #ethelontes .eth-grafeio-etiketa { margin: 0; font: 400 13px/1.3 var(--etiketa); letter-spacing: .16em; text-transform: uppercase; color: var(--kokkino-vathy); }
  #ethelontes .eth-kalese { justify-content: center; gap: 10px; min-height: 52px; font-size: 18px; flex-wrap: wrap; }
  #ethelontes .eth-kalese-arithmos { font-size: 15px; letter-spacing: .06em; opacity: .88; }
  #ethelontes .eth-grafeio .eth-ores { margin: 0; font-size: 15px; color: var(--melani-2); }

  /* ── το τηλέφωνο του γραφείου (κλειστή φόρμα, και μετά την αποστολή) ── */
  #ethelontes .eth-til { margin: 0; font-size: 18px; line-height: 1.5; color: var(--melani); }
  #ethelontes .eth-til .eth-ores { font-size: 16px; color: var(--melani-2); }
  #ethelontes .eth-til a { display: inline; padding: 11px 0; font-weight: 600; color: var(--kokkino-vathy); white-space: nowrap; }
  #ethelontes .eth-kleisti { display: grid; gap: 14px; padding-top: 22px; border-top: 1px solid var(--grammi); }
  #ethelontes .eth-posta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
  #ethelontes .eth-posta li { padding: 6px 15px; border: 1px solid var(--grammi); border-radius: 100px; font: 400 17px/1.3 var(--etiketa); color: var(--melani-2); }

  /* ── από 900px: τα λόγια αριστερά, το κουμπί δεξιά· τα τρία υποχρεωτικά σε μία σειρά ── */
  @media (min-width: 900px) {
    #ethelontes .eth-pano { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 56px; padding: 52px 60px; }
    #ethelontes .eth-logia { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 28px; align-items: start; }
    #ethelontes .eth-eikonidio { grid-row: 1 / span 3; width: 64px; height: 64px; margin: 4px 0 0; }
    #ethelontes .eth-eikonidio .eik-svg { width: 30px; height: 30px; }
    #ethelontes .eth-logia > :not(.eth-eikonidio) { grid-column: 2; }
    #ethelontes .eth-titlos { margin: 8px 0 14px; font-size: 50px; }
    #ethelontes .eth-lede { font-size: 20px; }
    #ethelontes .eth-anoigma { min-height: 64px; padding: 16px 36px; font-size: 20px; white-space: nowrap; }
    #ethelontes .eth-forma-mesa { gap: 28px; padding: 40px 60px 44px; }
    #ethelontes .eth-tria { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
    /* το ίδιο πλέγμα των τριών στηλών: τα πόστα πέντε στη σειρά, οι μέρες επτά, οι ώρες τρεις κάτω από όνομα, επώνυμο, τηλέφωνο */
    #ethelontes .eth-tsips-pou { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    #ethelontes .eth-tsips-pou .eth-tsip:last-child:nth-child(odd) { grid-column: auto; }
    #ethelontes .eth-tsips-pou .eth-tsip { flex-direction: column; justify-content: center; gap: 6px; min-height: 76px; text-align: center; }
    #ethelontes .eth-tsips-ores { gap: 24px; }
    #ethelontes .eth-tsips-opote { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
    #ethelontes .eth-tsips-meres { gap: 8px; }
    /* (15/10/2026, κριτική 13:40) «Όποτε χρειαστεί» είναι η τέταρτη ίση στήλη δίπλα σε Πρωί, Απόγευμα, Βράδυ, όχι μόνο του σε δική του σειρά */
    #ethelontes .eth-pote:has(> .eth-tsips-opote) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; }
    #ethelontes .eth-pote:has(> .eth-tsips-opote) > * { grid-column: 1 / -1; }
    #ethelontes .eth-pote:has(> .eth-tsips-opote) > .eth-tsips-ores { grid-column: 1 / span 3; }
    #ethelontes .eth-pote:has(> .eth-tsips-opote) > .eth-tsips-opote { grid-column: 4 / span 1; grid-template-columns: minmax(0, 1fr); margin-top: 8px; }
    #ethelontes .eth-pote:has(> .eth-tsips-opote) > .eth-tsips-ores + .eth-tsips-opote { margin-top: 8px; }
    #ethelontes .eth-tsips-opote .eth-tsip { flex-direction: column; gap: 4px; min-height: 64px; padding-inline: 4px; }
    #ethelontes .eth-pedio:not(.eth-pou):not(.eth-pote):not(.eth-tria .eth-pedio) { max-width: 560px; }
    #ethelontes .eth-telika { justify-content: start; }
    #ethelontes .eth-apostoli { min-width: 260px; }
    #ethelontes .eth-telos-mesa { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 28px; padding: 44px 60px 48px; }
    #ethelontes .eth-simadi { grid-row: 1 / span 5; width: 64px; height: 64px; margin: 0; }
    #ethelontes .eth-telos-mesa > :not(.eth-simadi) { grid-column: 2; }
    #ethelontes .eth-telos-titlos { font-size: 38px; }
    #ethelontes .eth-kleisti { width: 330px; padding: 0 0 0 36px; border-top: 0; border-left: 1px solid var(--grammi); }
    #ethelontes .eth-xoris-forma .eth-pano { gap: 40px; }
    #ethelontes .eth-xoris-forma .eth-titlos { font-size: 46px; }
  }
}