/**
 * dsgn.gr · Φόρμες (βήμα 7).
 * Τιμές αυτούσιες από τις προεπισκοπήσεις. Το γυαλί (.glass-card, .glass-input) είναι στο dsgn.css.
 */

/* ---------- Φόρμα επικοινωνίας (previews/09-epikoinonia.html) ---------- */
.cform2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
@media (max-width:520px){.cform2{grid-template-columns:minmax(0,1fr)}}
.cf2{display:flex;flex-direction:column;gap:6px}.cf2 label{font-size:13px;font-weight:600}
.cform2 .cf-full{grid-column:1/-1} /* όχι «.full»: είναι το σήμα «Όλα από εμάς» (erga.css) */
.in2{min-height:48px;padding:0 14px;border-radius:12px;font:inherit;font-size:16px;box-sizing:border-box;width:100%}
textarea.in2{padding:12px 14px;resize:vertical;min-height:120px}
.fnote{margin:0;font-size:12px;color:#4F5B6B}.okc{padding:14px;border-radius:14px;background:rgba(255,255,255,.75);font-weight:600}
.fnote a{color:inherit;font-weight:600}
.cform2 .in2{border-radius:12px}
.cform2 input[type=file].in2{background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.85);color:#122A49}
.cform2 .btn.cf-full{width:100%}

/* ---------- Οδηγός 4 βημάτων (previews/10-prosfora.html, #qWiz) ----------
   Τιμές αυτούσιες· όλοι οι κανόνες κάτω από .qform (οι κλάσεις .f/.step/.err κ.λπ. είναι γενικές). */
.qform{padding:30px;border-radius:28px 0 28px 28px;display:flex;flex-direction:column;gap:18px;color:#122A49}
.qform .prog{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;counter-reset:st}
.qform .prog li{counter-increment:st;font-size:12px;font-weight:600;color:#4F5B6B;padding-top:10px;border-top:4px solid rgba(18,42,73,.12);border-radius:2px}
.qform .prog li::before{content:counter(st)". "}.qform .prog li.on{color:#122A49;border-top-color:#122A49}.qform .prog li.ok{border-top-color:#4067B0;color:#2B4A72}
/* Κινητό: οι 4 ετικέτες δεν χωράνε (π.χ. «Λεπτομέρειες»). Μένουν οι μπάρες και μία γραμμή «Βήμα Χ από 4 · Όνομα». */
.qform .prog-label{display:none;margin:-10px 0 0;font-size:12px;font-weight:600;color:#122A49}
@media (max-width:560px){
	.qform .prog li{font-size:0;padding-top:0}
	.qform .prog li::before{content:none}
	.qform .prog-label{display:block}
	.qform .prog-label[hidden]{display:none}
}
/* Η αρχή της φόρμας να μη μένει κάτω από το σταθερό header, όταν αλλάζει βήμα. */
.qform{scroll-margin-top:110px}
.qform .qh{margin:0;font-size:26px;letter-spacing:-.02em;color:#122A49}.qform .qh:focus{outline:none}.qform .qh:focus-visible{outline:2px solid #4067B0;outline-offset:4px;border-radius:4px}
.qform .qs{margin:4px 0 14px;color:#34445A}
.qform .svs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:560px){.qform .svs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.qform .sv{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;border-radius:18px 0 18px 18px;border:1px solid rgba(255,255,255,.8);background:rgba(255,255,255,.55);color:#122A49;font:inherit;font-size:14px;font-weight:600;text-align:center;cursor:pointer;transition:background-color .2s,box-shadow .2s,transform .2s cubic-bezier(.23,1,.32,1)}
.qform .sv img{width:56px;height:56px;flex:none}.qform .sv[aria-pressed="true"]{background:#fff;box-shadow:inset 0 0 0 2px #122A49,0 8px 20px rgba(18,42,73,.12)}
/* Κείμενο σε δύο γραμμές όταν δεν χωράει (το reset των κουμπιών βάζει nowrap). */
.qform .sv{white-space:normal;min-width:0;line-height:1.25}
.qform .sv span{display:block;max-width:100%;white-space:normal;overflow-wrap:break-word;hyphens:auto;text-align:center}
/* Καταστάσεις: το reset του Hello (button:hover/focus → λευκό σε ροζ) και το kit του Elementor
   (button:hover/focus → κρεμ σε navy) άλλαζαν το χρώμα. Στο κινητό η κάρτα που πατήθηκε τελευταία μένει
   εστιασμένη → κρεμ γράμματα σε λευκό φόντο. Εδώ κάθε κατάσταση έχει ρητό χρώμα και φόντο. */
.qform .sv,.qform .sv:hover,.qform .sv:focus,.qform .sv:active{color:#122A49;background:rgba(255,255,255,.55);text-decoration:none;-webkit-tap-highlight-color:transparent}
.qform .sv[aria-pressed="true"],.qform .sv[aria-pressed="true"]:hover,.qform .sv[aria-pressed="true"]:focus,.qform .sv[aria-pressed="true"]:active{color:#122A49;background:#fff}
.qform .sv:focus{outline:none;box-shadow:none}
.qform .sv[aria-pressed="true"]:focus{box-shadow:inset 0 0 0 2px #122A49,0 8px 20px rgba(18,42,73,.12)}
.qform .sv:focus-visible{outline:2px solid #4067B0;outline-offset:2px}
@media (hover:hover){
	.qform .sv:not([aria-pressed="true"]):hover{transform:translateY(-2px);background:rgba(255,255,255,.8)}
	.qform .sv[aria-pressed="true"]:hover{transform:translateY(-2px)}
}
.qform .grp{border:0;margin:0 0 14px;padding:16px;border-radius:18px 0 18px 18px;background:rgba(255,255,255,.45);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;min-width:0}
.qform .grp[hidden]{display:none}.qform .grp legend{float:left;width:100%;grid-column:1/-1;font-weight:700;font-size:16px;margin-bottom:4px;padding:0}
@media (max-width:560px){.qform .grp,.qform .grid2{grid-template-columns:minmax(0,1fr)!important}}
.qform .grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
.qform .f{display:flex;flex-direction:column;gap:6px;min-width:0}.qform .f label,.qform .lbl{font-size:13px;font-weight:600}.qform .cf-full{grid-column:1/-1}.qform .op{font-weight:400;color:#4F5B6B}
.qform .in2{min-height:46px;padding:0 12px;border-radius:12px;border:1px solid rgba(255,255,255,.85);background:rgba(255,255,255,.75);color:#122A49;font:inherit;font-size:15px;box-sizing:border-box;width:100%}
.qform textarea.in2{padding:10px 12px;min-height:100px;resize:vertical}.qform .in2.file{padding:10px}
.qform .in2:focus{outline:none;background:#fff;border-color:#4067B0;box-shadow:0 0 0 3px rgba(64,103,176,.22)}
/* iOS μεγεθύνει τη σελίδα σε πεδία κάτω από 16px: στο κινητό 16px. */
@media (max-width:560px){.qform .in2{font-size:16px}}
.qform .tipbox{padding:12px;border-radius:12px;background:rgba(191,226,246,.6)}.qform .tipbox strong{font-size:13px}.qform .tipbox span{font-size:13px;color:#24384F}
.qform .tipbox .ferr{color:#A3261F}
.qform .hint{margin:0;font-size:14px}.qform .hint a{color:#122A49;font-weight:600}
.qform .rads{display:flex;flex-wrap:wrap;gap:8px}.qform .rad{position:relative}.qform .rad input{position:absolute;opacity:0}
.qform .rad span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.85);font-size:14px;font-weight:600;cursor:pointer}
.qform .rad input:checked+span{background:#122A49;color:#F7F3EC;border-color:#122A49}.qform .rad input:focus-visible+span{outline:2px solid #4067B0;outline-offset:2px}
.qform .sum{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px}.qform .sum span{font-size:12px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.7)}
.qform .err{margin:6px 0 0;color:#B42318;font-size:14px;font-weight:600}
.qform .nav2{display:flex;gap:10px;align-items:center}.qform .nav2[hidden]{display:none}
.qform .step[hidden]{display:none}
.qform .done{text-align:center;align-items:center}.qform .done .tick{width:60px;height:60px;margin:0 auto 10px;border-radius:18px 0 18px 18px;background:#122A49;color:#fff;display:grid;place-items:center}
.qform .fnote[hidden]{display:none}

/* ---------- Σύντομη φόρμα αρχικής (previews/01-arxiki.html, #prosfora) ---------- */
.hq-form{display:flex;flex-direction:column;gap:14px;color:#122A49}
.hq-form .fdrop:focus-within,.hq-form .fdrop.is-over{border-color:#4067B0!important;background:rgba(255,255,255,.7)!important}
.hq-form .fdrop:has(+ input:focus-visible){outline:2px solid #4067B0;outline-offset:2px}
.hq-form .fdrop svg{flex:none}
.hq-form .fdrop-name{display:block;margin-top:4px;font-size:13px;font-weight:600;color:#122A49;word-break:break-all}
.hq-form .fdrop-name[hidden]{display:none}
.hq-form .fnote{margin:0}
.hq-more{margin:0;font-size:14px;color:#34445A}.hq-more a{color:#122A49;font-weight:600}

/* ---------- Popup «Ζητήστε προσφορά» (previews 02–12, dialog#qf) ----------
   Τιμές αυτούσιες· αλλαγές: cf-full αντί για full, κινητό σχεδόν όλη η οθόνη με κολλημένη «Αποστολή»,
   πεδία 16px στο κινητό, ρητά χρώματα κουμπιών σε κάθε κατάσταση (κανόνας CLAUDE.md). */
html.qf-locked{overflow:hidden}
dialog#qf,dialog#qf *,dialog#qf *::before,dialog#qf *::after{box-sizing:border-box}
dialog#qf{position:fixed;inset:0;margin:0;padding:0;border:0;background:transparent;color:#122A49;max-width:none;max-height:none;width:100%;height:100%;overflow:visible;font-family:inherit}
dialog#qf:not([open]){display:none}
dialog#qf::backdrop{background:rgba(8,14,26,.45);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);opacity:0;transition:opacity .3s}
dialog#qf.show::backdrop{opacity:1}
#qf .sheet{position:absolute;left:50%;top:50%;width:min(620px,calc(100% - 32px));max-height:calc(100% - 40px);overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;transform:translate(-50%,-48%) scale(.97);opacity:0;transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .25s;border-radius:28px 0 28px 28px;background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(22px) saturate(1.8);backdrop-filter:blur(22px) saturate(1.8);border:1px solid rgba(255,255,255,.65);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 1px 2px rgba(18,42,73,.06),0 30px 80px rgba(8,14,26,.35);padding:28px 28px 24px}
dialog#qf.show .sheet{transform:translate(-50%,-50%) scale(1);opacity:1}
#qf .x{position:absolute;right:14px;top:14px;z-index:3;width:40px;height:40px;padding:0;border:1px solid rgba(255,255,255,.65);border-radius:12px;background:rgba(255,255,255,.6);color:#122A49;display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 4px 12px rgba(18,42,73,.12);cursor:pointer}
#qf .x:hover,#qf .x:focus,#qf .x:active{background:rgba(255,255,255,.6);color:#122A49;outline:none}
@media (hover:hover){#qf .x:hover{background:#fff}}
#qf .x:focus-visible{outline:2px solid #4067B0;outline-offset:2px}
#qf .qft{font-weight:700;margin:0 0 4px;font-size:26px;line-height:1.2;letter-spacing:-.02em;padding-right:48px;color:#122A49}
#qf .qft:focus{outline:none}
#qf .lead{margin:0 0 18px;color:#34445A;font-size:15px}
#qf form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
#qf .f{display:flex;flex-direction:column;gap:6px;min-width:0}
#qf .cf-full{grid-column:1/-1}
#qf label,#qf .lbl{font-size:13px;font-weight:600}
#qf label span{font-weight:400;color:#4F5B6B}
#qf .in,#qf select,#qf textarea{width:100%;min-height:46px;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.85);background:rgba(255,255,255,.72);color:#122A49;font:inherit;font-size:15px;transition:border-color .2s,box-shadow .2s,background-color .2s}
#qf textarea{min-height:84px;resize:vertical}
#qf .in:focus,#qf select:focus,#qf textarea:focus{outline:none;background:#fff;border-color:#4067B0;box-shadow:0 0 0 3px rgba(64,103,176,.22)}
#qf .drop{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 14px;border-radius:12px;border:1.5px dashed rgba(18,42,73,.28);background:rgba(255,255,255,.45);font-size:14px;font-weight:400;color:#34445A;cursor:pointer}
#qf .drop svg{flex:none}
#qf .drop small{display:block;color:#4F5B6B;font-size:12px}
#qf .drop.is-over,#qf .drop:has(+ input:focus-visible){border-color:#4067B0;background:rgba(255,255,255,.7)}
#qf .drop:has(+ input:focus-visible){outline:2px solid #4067B0;outline-offset:2px}
#qf .fdrop-name{display:block;margin-top:4px;font-size:13px;font-weight:600;color:#122A49;word-break:break-all}
#qf .fdrop-name[hidden]{display:none}
#qf .vh-file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
#qf .tip{padding:12px 14px;border-radius:14px;background:rgba(191,226,246,.55);border:1px solid rgba(255,255,255,.7);font-size:13px;color:#24384F}#qf .tip strong{display:block;margin-bottom:4px;font-size:13px;color:#122A49}#qf .tip ol{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:3px}
#qf .send-wrap{margin-top:4px}
#qf .send{width:100%;min-height:52px;border-radius:26px 0 26px 26px;font-size:16px}
#qf .send,#qf .send:hover,#qf .send:focus,#qf .send:active{background:#122A49;color:#F7F3EC}
#qf .send:focus-visible{outline:2px solid #4067B0;outline-offset:3px}
#qf .note{grid-column:1/-1;margin:0;font-size:12px;color:#4F5B6B}
#qf .note a{color:inherit;font-weight:600}
#qf .ok{display:none;flex-direction:column;gap:10px;align-items:flex-start;padding:8px 0}
#qf.done form,#qf.done .lead{display:none}#qf.done .ok{display:flex}
#qf .ok .tick{width:52px;height:52px;border-radius:16px 0 16px 16px;background:#122A49;color:#fff;display:grid;place-items:center}
#qf .ok-title{padding:0}
#qf .ok-text,#qf .ok-note{margin:0;color:#34445A}
#qf .ok-note[hidden]{display:none}
#qf #qfDone{min-height:46px;padding:0 22px;border-radius:24px 0 24px 24px}
#qf #qfDone,#qf #qfDone:hover,#qf #qfDone:focus,#qf #qfDone:active{background:#fff;color:#122A49}
#qf #qfDone:focus-visible{outline:2px solid #4067B0;outline-offset:2px}
@media (max-width:600px){
	/* Κινητό: σχεδόν όλη η οθόνη, κύλιση μέσα στο popup, «Αποστολή» πάντα ορατή (και πάνω από το πληκτρολόγιο). */
	#qf .sheet{left:0;right:0;top:auto;bottom:0;width:100%;height:calc(100% - 12px);max-height:none;transform:translateY(100%);border-radius:26px 0 0 0;padding:22px 18px calc(16px + env(safe-area-inset-bottom,0px))}
	dialog#qf.show .sheet{transform:none}
	#qf.done .sheet{height:auto} /* «Ευχαριστούμε!»: μόνο όσο χρειάζεται */
	#qf form{grid-template-columns:minmax(0,1fr)}
	#qf .in,#qf select,#qf textarea{font-size:16px}
	#qf .send-wrap{position:sticky;bottom:calc(-16px - env(safe-area-inset-bottom,0px));z-index:2;margin:4px -18px 0;padding:10px 18px calc(12px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,rgba(236,243,250,0),rgba(236,243,250,.96) 30%)}
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){dialog#qf::backdrop{background:rgba(8,14,26,.75)}#qf .sheet{background:#F7F5F1}}
@media (prefers-reduced-motion:reduce){#qf .sheet,dialog#qf::backdrop{transition:none}}

/* Το hidden κρύβει πάντα (το .btn{display:inline-flex} το υπερίσχυε: «← Πίσω» στο βήμα 1). */
.dsgn-form [hidden]{display:none!important}

/* Κείμενο μόνο για αναγνώστες οθόνης. */
.dsgn-form .screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Σφάλματα (κοινά για όλες τις φόρμες) ---------- */
/* Περίγραμμα #D23B3B όπως η προεπισκόπηση· κείμενο πιο σκούρο για αντίθεση ≥ 4,5:1. */
.dsgn-form [aria-invalid=true]{border-color:#D23B3B!important}
.dsgn-form [aria-invalid=true]:focus{box-shadow:0 0 0 3px rgba(210,59,59,.22)!important}
.dsgn-form .ferr{font-size:12px;line-height:1.4;color:#A3261F;font-weight:600}
.dsgn-form .ferr:empty{display:none}
.dsgn-form .ferr-all{margin:0;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.75);color:#A3261F;font-size:14px;font-weight:600}
.dsgn-form .ferr-all a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.dsgn-form .ferr-all[hidden],.dsgn-form .okc[hidden]{display:none}
.dsgn-form .okc:focus{outline:2px solid #4067B0;outline-offset:2px}
.dsgn-form[aria-busy=true] [type=submit]{opacity:.7;cursor:progress}
.dsgn-noscript{margin:0;font-size:14px;color:#122A49}
.dsgn-noscript a{color:inherit;font-weight:600}