/*
 * Οι δημόσιες σελίδες εγγραφής μεμονωμένων και αποτελεσμάτων.
 *
 * Το πρώτο μισό είναι ΑΝΤΙΓΡΑΦΟ του <style> του resources/views/verify/index.blade.php,
 * ώστε οι σελίδες να μοιάζουν ίδιες με την επικύρωση πιστοποιητικού χωρίς να
 * αγγιχτεί εκείνη η όψη. Όποιος αλλάζει το ένα, ας δει και το άλλο.
 * Χρώματα: μόνο μεταβλητές --nylc-* και οι τοπικές --accent, --ink κ.λπ.
 */
/*
    Μόνο ό,τι δεν δίνει το θέμα: το μπλε των κουμπιών (το primary-600
    του AdminPanelProvider) και τα χρώματα αποτελέσματος, ίδια με το
    success/danger του Filament. Όλα τα άλλα είναι --nylc-*.
*/
:root {
    --accent: #215490; --accent-hover: #1b4576; --accent-ink: #fff;
    --ink: #0f172a; --muted: #64748b; --label: #334155;
    --ok-bg: #f0fdf4; --ok-line: #bbf7d0; --ok-ink: #15803d;
    --bad-bg: #fef2f2; --bad-line: #fecaca; --bad-ink: #b91c1c;
}
.dark {
    --accent: #3a6ba8; --accent-hover: #215490;
    --ink: #f1f5f9; --muted: #94a3b8; --label: #cbd5e1;
    --ok-bg: rgb(34 197 94 / 0.1); --ok-line: rgb(34 197 94 / 0.3); --ok-ink: #4ade80;
    --bad-bg: rgb(239 68 68 / 0.1); --bad-line: rgb(239 68 68 / 0.3); --bad-ink: #f87171;
}
html { color-scheme: light; }
html.dark { color-scheme: dark; }
* { box-sizing: border-box; }
body {
    margin: 0; padding: 48px 16px 32px;
    font-family: "Inter Variable", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px; color: var(--ink); background: var(--nylc-page); line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
/* Η κάρτα της σελίδας σύνδεσης: λευκό χαρτί με χρυσή γραμμή επάνω. */
.card {
    max-width: 32rem; margin: 0 auto; background: var(--nylc-surface);
    border-radius: var(--nylc-radius); border-top: 3px solid var(--nylc-gold);
    box-shadow: 0 0 0 1px var(--nylc-line), var(--nylc-shadow);
}
.head { padding: 32px 36px 0; text-align: center; }
.head img { height: 40px; display: block; margin: 0 auto; }
.head h1 { margin: 16px 0 6px; font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.015em; }
.head p { margin: 0; color: var(--muted); font-size: 14px; }
.body { padding: 24px 36px 32px; }
label { display: block; font-size: 14px; font-weight: 500; color: var(--label); margin-bottom: 6px; }
input[type=text] {
    width: 100%; padding: 7px 12px; font: inherit; font-size: 14px; line-height: 20px;
    border: 0; border-radius: 0.5rem; background: var(--nylc-surface); color: var(--ink);
    box-shadow: 0 0 0 1px var(--nylc-line); outline: none;
}
input[type=text]::placeholder { color: var(--muted); opacity: .7; }
input[type=text]:focus { box-shadow: 0 0 0 2px var(--accent); }
.field { margin-bottom: 16px; }
.captcha { display: flex; gap: 12px; align-items: center; }
.captcha img { flex: none; border-radius: 0.5rem; box-shadow: 0 0 0 1px var(--nylc-line); }
.captcha input { flex: 1; min-width: 0; }
button, .again {
    display: block; width: 100%; margin-top: 8px; padding: 8px 16px;
    font: inherit; font-size: 14px; font-weight: 600; line-height: 20px; text-align: center;
    text-decoration: none; color: var(--accent-ink); background: var(--accent);
    border: 0; border-radius: 0.5rem; cursor: pointer; transition: background-color 150ms;
}
button:hover, .again:hover { background: var(--accent-hover); }
button:focus-visible, .again:focus-visible { outline: 2px solid var(--nylc-gold); outline-offset: 2px; }
.again { margin-top: 20px; }
.again.secondary {
    margin-top: 10px;
    color: var(--ink); background: var(--nylc-surface);
    box-shadow: 0 0 0 1px var(--nylc-line);
}
.again.secondary:hover { background: var(--nylc-hover); }

.result {
    display: flex; gap: 12px; align-items: flex-start;
    border-radius: 0.5rem; padding: 14px 16px; margin-bottom: 20px;
}
.result svg { flex: none; width: 24px; height: 24px; margin-top: 1px; }
.valid { background: var(--ok-bg); box-shadow: 0 0 0 1px var(--ok-line); }
.invalid { background: var(--bad-bg); box-shadow: 0 0 0 1px var(--bad-line); }
.result h2 { margin: 0 0 2px; font-size: 16px; line-height: 24px; font-weight: 600; }
.valid h2, .valid svg { color: var(--ok-ink); }
.invalid h2, .invalid svg { color: var(--bad-ink); }
.result p { margin: 0; font-size: 14px; color: var(--muted); }

/* Τα στοιχεία του πιστοποιητικού: ίδια όψη με τις λίστες προβολής. */
table {
    width: 100%; border-collapse: collapse; font-size: 14px;
    border-radius: 0.5rem; overflow: hidden; box-shadow: 0 0 0 1px var(--nylc-line);
}
th, td { padding: 9px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--nylc-line-soft); }
th { width: 42%; font-weight: 500; color: var(--muted); font-size: 13px; background: var(--nylc-surface-alt); }
td { font-weight: 500; }
tr:last-child th, tr:last-child td { border-bottom: 0; }

.error {
    background: var(--bad-bg); box-shadow: 0 0 0 1px var(--bad-line); color: var(--bad-ink);
    border-radius: 0.5rem; padding: 10px 14px; font-size: 14px; margin-bottom: 18px;
}
.foot { text-align: center; font-size: 12px; color: var(--muted); margin-top: 20px; }
.foot + .foot { margin-top: 6px; }
.foot.contact { font-size: 15px; font-weight: 700; color: var(--ink); margin-top: 24px; }
.foot.contact a { font-weight: 700; }
.foot a { color: inherit; text-decoration: underline; }
.choice {
    margin: 20px 0 14px; padding-top: 16px; border-top: 1px solid var(--nylc-line-soft);
    font-size: 13px; color: var(--muted);
}
.choice strong { color: var(--nylc-gold-ink); }
.or {
    display: flex; align-items: center; gap: 10px; margin: -4px 0 12px;
    font-size: 12px; color: var(--muted);
}
.or::before, .or::after { content: ""; flex: 1; border-top: 1px dashed var(--nylc-line); }
.pair { display: flex; gap: 12px; }
.pair .field { flex: 1; min-width: 0; }

/* Ο επιλογέας γλώσσας της σελίδας σύνδεσης. */
.head .langs { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 14px; font-size: 14px; }
.langs a, .langs strong { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.langs a { color: var(--muted); }
.langs a:hover { color: var(--ink); }
.langs strong { color: var(--nylc-active-ink); font-weight: 600; }
.langs img { width: 20px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px rgb(0 0 0 / .1); }

@media (max-width: 30rem) {
    body { padding: 16px 12px 24px; }
    .head { padding: 24px 20px 0; }
    .body { padding: 20px 20px 24px; }
    .head h1 { font-size: 20px; line-height: 28px; }
    .pair { flex-direction: column; gap: 0; }
    .captcha img { width: 150px; height: auto; }
}

/* ---- Μόνο για τις σελίδες εγγραφής ---- */
.head img.logo { height: auto; width: 100%; max-width: 300px; }
input[type=email], input[type=date], input[type=tel], input[type=number], select, textarea {
    width: 100%; padding: 7px 12px; font: inherit; font-size: 14px; line-height: 20px;
    border: 0; border-radius: 0.5rem; background: var(--nylc-surface); color: var(--ink);
    box-shadow: 0 0 0 1px var(--nylc-line); outline: none;
}
input[type=email]:focus, input[type=date]:focus, input[type=tel]:focus, select:focus, textarea:focus { box-shadow: 0 0 0 2px var(--accent); }
.card.wide { max-width: 64rem; }
.card.wide .head { padding-bottom: 0; }
.card h3 { margin: 22px 0 12px; font-size: 15px; font-weight: 600; padding-top: 16px; border-top: 1px solid var(--nylc-line-soft); }
.card h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.hint { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); font-weight: 400; line-height: 1.35; }
.check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; }
.check input { margin-top: 3px; flex: none; }
.notice { background: var(--nylc-surface-alt); box-shadow: 0 0 0 1px var(--nylc-line); border-radius: 0.5rem; padding: 12px 16px; margin-bottom: 18px; font-size: 14px; }
.notice p { margin: 0 0 6px; } .notice p:last-child { margin-bottom: 0; }
.bank { margin: 6px 0 0; font-size: 13px; }
.bank code { font-size: 13px; letter-spacing: .5px; }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 14px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ocr { background: var(--nylc-surface-alt); border-radius: 0.5rem; padding: 10px 14px; margin: 0 0 16px; box-shadow: 0 0 0 1px var(--nylc-line); display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.ocr[hidden] { display: none; }
.ocr .hint { flex: 1 1 280px; margin: 0; }
.ocr button { width: auto; display: inline-block; margin: 0; }
.ocr .status { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--muted); }
.again.inline { display: inline-block; width: auto; }
.upper { text-transform: uppercase; }

/* Το μορφοποιημένο κείμενο των Παραμέτρων. */
.rich > :first-child { margin-top: 0; } .rich > :last-child { margin-bottom: 0; }
.rich p { margin: 0 0 8px; }
.rich ul, .rich ol { margin: 0 0 8px; padding-left: 22px; }
.rich h3 { margin: 10px 0 6px; padding: 0; border: 0; font-size: 15px; }
.rich blockquote { margin: 0 0 8px; padding-left: 12px; border-left: 3px solid var(--nylc-gold); color: var(--muted); }
.rich a { color: var(--accent); text-decoration: underline; }

/* Περιοχή απόθεσης αρχείου: το ίδιο το input καλύπτει το πλαίσιο με opacity 0,
   άρα το σύρσιμο ενός αρχείου πάνω του δουλεύει χωρίς κώδικα και το κλικ ανοίγει
   τον επιλογέα. Το JS προσθέτει μόνο την όψη (dragover) και το όνομα αρχείου. */
.drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 96px; padding: 12px; text-align: center; border-radius: 0.5rem;
    border: 2px dashed var(--nylc-line); background: var(--nylc-surface-alt); transition: border-color 150ms, background-color 150ms; }
.drop:hover, .drop.is-over { border-color: var(--accent); background: var(--nylc-hover); }
.drop.has-file { border-style: solid; border-color: var(--ok-line); background: var(--ok-bg); }
.drop input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.drop svg { width: 24px; height: 24px; color: var(--muted); }
.drop__text { font-size: 13px; color: var(--ink); }
.drop__name { font-size: 12px; color: var(--ok-ink); font-weight: 600; word-break: break-all; }
.sample { display: block; width: 100%; max-width: 130px; margin-top: 8px; border-radius: 0.5rem; box-shadow: 0 0 0 1px var(--nylc-line); }
.sample-cap { display: block; font-size: 11px; color: var(--muted); }
@media (max-width: 52rem) { .grid3, .grid4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 36rem) { .grid2, .grid3, .grid4 { grid-template-columns: 1fr; } }