/* saas_new_customer_how_found.css — γραμμή «Πώς μας βρήκε» (παράθυρο νέου πελάτη + διόρθωση) και φύλλο επιλογής πηγής (.hf-).
   Ύφος docs/design/fason: ανοιχτό μπλε πλαίσιο, λεπτό μπλε περίγραμμα, γωνίες 12px. Το φόντο σελίδας δεν ορίζεται εδώ.
   Ετικέτες και τιμές δεν σπάνε σε δύο σειρές· ό,τι δεν χωρά (το κουμπί) κατεβαίνει ολόκληρο από κάτω. */

.hf-box { background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: 12px; padding: 10px 12px; margin: 8px 0; box-sizing: border-box; color: #0F172A; }
.hf-box.hf-missing { border-color: #B42318; background: #FEF3F2; }
.hf-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.hf-label { font-size: 14px; font-weight: 600; white-space: nowrap; }
.hf-req { color: #B42318; }
.hf-pick { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; background: #FFFFFF; border: 1px solid #BFDBFE; border-radius: 10px; color: #1D6FD8; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.hf-pick.hf-picked { color: #0F172A; }
.hf-chev { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -3px; }

.hf-ref { margin-top: 10px; }
.hf-ref-label { font-size: 13px; color: #475569; margin-bottom: 6px; }
.hf-search { width: 100%; box-sizing: border-box; min-height: 44px; padding: 0 12px; border: 1px solid #BFDBFE; border-radius: 10px; background: #FFFFFF; font: inherit; font-size: 15px; }
.hf-results { margin-top: 6px; background: #FFFFFF; border-radius: 10px; }
.hf-results:empty { display: none; }
.hf-res { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; width: 100%; min-height: 44px; padding: 8px 12px; text-align: left; background: #FFFFFF; border: 0; border-top: 1px solid #EEF2F7; font: inherit; cursor: pointer; }
.hf-res:first-child { border-top: 0; }
.hf-res-name { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.hf-res-meta { font-size: 13px; color: #64748B; white-space: nowrap; }
.hf-none { padding: 12px; font-size: 14px; color: #64748B; text-align: center; }
.hf-link { margin-top: 6px; min-height: 44px; background: none; border: 0; padding: 0; color: #1D6FD8; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.hf-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 6px 0 12px; background: #FFFFFF; border: 1px solid #BFDBFE; border-radius: 10px; max-width: 100%; box-sizing: border-box; }
.hf-chip-name { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.hf-chip-x { min-width: 44px; min-height: 44px; background: none; border: 0; color: #475569; font-size: 22px; line-height: 1; cursor: pointer; }

.hf-sheet-ov { position: fixed; inset: 0; z-index: 2000; background: rgba(15, 23, 42, 0.45); display: flex; align-items: flex-end; justify-content: center; }
.hf-sheet { width: 100%; max-width: 520px; max-height: 85vh; overflow-y: auto; background: #FFFFFF; border-radius: 16px 16px 0 0; padding: 8px 0 max(16px, env(safe-area-inset-bottom)); box-sizing: border-box; }
.hf-sheet-title { padding: 14px 20px 10px; font-size: 18px; font-weight: 700; color: #0F172A; }
.hf-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 56px; padding: 10px 20px; background: #FFFFFF; border: 0; border-top: 1px solid #EEF2F7; text-align: left; font: inherit; cursor: pointer; }
.hf-opt-on { background: #EFF6FF; }
.hf-opt-lab { font-size: 16px; font-weight: 600; color: #0F172A; }
.hf-opt-sub { font-size: 13px; color: #64748B; }
@media (min-width: 721px) { .hf-sheet-ov { align-items: center; } .hf-sheet { border-radius: 16px; padding-bottom: 12px; } }