/* ============================================================================
   Family Frost mock – közös stílusok (idősbarát: nagy gombok/betűk, kontraszt)
   ============================================================================ */
:root{
  /* Family Frost arculat – arculati kézikönyv 2022 (brandbook) */
  --ff-blue:#329BFF; --ff-blue-dark:#1F7BE0; --ff-red:#FF464B; --ff-navy:#203058; --ff-yellow:#FFDF5E;
  --ff-bg:#FCF6E9; --ff-card:#fff; --ff-text:#203058; --ff-muted:#6E6656;
  --ff-ok:#1a7f37; --ff-warn:#b54708; --ff-line:#E6DCC6;
  --radius:18px; --tap:60px; --fs:20px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Segoe UI",system-ui,Arial,Helvetica,sans-serif;background:var(--ff-bg);
  color:var(--ff-text);font-size:var(--fs);line-height:1.45;-webkit-font-smoothing:antialiased}
.app{max-width:1000px;margin:0 auto;padding:18px}

/* fejléc + navigáció a különálló oldalak között */
header.top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:linear-gradient(135deg,var(--ff-blue),var(--ff-blue-dark));color:#fff;
  border-radius:var(--radius);padding:14px 18px;margin-bottom:14px;box-shadow:0 6px 18px rgba(11,92,171,.25)}
.logo{font-weight:800;font-size:24px;display:flex;align-items:center;gap:8px}
.logo b{color:var(--ff-yellow)}
.logo-img{height:36px;width:auto;display:block}
.top .tag{font-size:15px;opacity:.92}
.top .spacer{flex:1}
.a11y-bar{display:flex;gap:8px;align-items:center}
.a11y-bar button{background:rgba(255,255,255,.18);color:#fff;border:none;border-radius:8px;width:40px;height:40px;font-size:20px;cursor:pointer;font-weight:800}
.badge{background:rgba(255,255,255,.18);padding:6px 12px;border-radius:999px;font-size:14px}

nav.ffnav{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
nav.ffnav a{flex:1 1 auto;text-align:center;min-height:52px;display:flex;align-items:center;justify-content:center;gap:8px;
  text-decoration:none;font-weight:700;border-radius:14px;border:2px solid var(--ff-line);background:#fff;color:var(--ff-blue);padding:8px 14px}
nav.ffnav a.active{background:var(--ff-blue);color:#fff;border-color:var(--ff-blue)}

.card{background:var(--ff-card);border:1px solid var(--ff-line);border-radius:var(--radius);box-shadow:0 4px 14px rgba(16,35,58,.06);overflow:hidden}
.card h2{margin:0;padding:14px 18px;font-size:19px;background:#f5f9ff;border-bottom:1px solid var(--ff-line);display:flex;align-items:center;gap:10px}
.card .body{padding:16px 18px}
.legend{font-size:14px;color:var(--ff-muted)}
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:13px;font-weight:700}
.pill.ok{background:#e7f6ec;color:var(--ff-ok)} .pill.warn{background:#fff1e6;color:var(--ff-warn)} .pill.info{background:#e7f0fb;color:var(--ff-blue)}
.footer{margin-top:18px;text-align:center;color:var(--ff-muted);font-size:14px}

/* chat */
.chat{display:flex;flex-direction:column;height:560px}
.messages{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:12px;background:#fbfdff}
.msg{max-width:88%;padding:12px 15px;border-radius:16px;font-size:1em;white-space:pre-wrap;word-wrap:break-word}
.msg.bot{background:#eaf2fc;border:1px solid #d3e3f7;align-self:flex-start;border-bottom-left-radius:4px}
.msg.user{background:var(--ff-blue);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.msg.sys{align-self:center;background:#fff7e6;border:1px solid #ffe3a3;color:#7a5200;font-size:.78em;text-align:center;max-width:95%}

.quick{display:flex;flex-wrap:wrap;gap:10px;padding:12px 18px;border-top:1px solid var(--ff-line);background:#f5f9ff}
.qbtn{min-height:var(--tap);flex:1 1 auto;border:2px solid var(--ff-blue);background:#fff;color:var(--ff-blue);border-radius:14px;font-size:.92em;font-weight:700;padding:10px 16px;cursor:pointer;display:flex;align-items:center;gap:10px;justify-content:center}
.qbtn:hover{background:#eaf2fc}.qbtn:active{transform:scale(.98)}
.qbtn .ico{font-size:1.2em}
.qbtn.primary{background:var(--ff-blue);color:#fff}.qbtn.primary:hover{background:var(--ff-blue-dark)}
.qbtn.ghost{border-color:var(--ff-line);color:var(--ff-muted)}
.qbtn.full{flex-basis:100%}
.typerow{display:flex;gap:10px;padding:12px 18px;border-top:1px solid var(--ff-line);background:#fff;align-items:center}
.typerow input{flex:1;min-width:0;min-height:var(--tap);border:2px solid var(--ff-line);border-radius:14px;padding:10px 16px;font-size:max(16px,.92em)}
.typerow input:focus{outline:none;border-color:var(--ff-blue)}
.typerow button{min-height:var(--tap);min-width:64px;border:none;background:var(--ff-blue);color:#fff;border-radius:14px;font-size:1.1em;cursor:pointer}
.hint{font-size:.72em;color:var(--ff-muted);padding:0 18px 12px;background:#fff}

/* választók (gépelés helyett) */
.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.choice{min-height:var(--tap);border:2px solid var(--ff-line);background:#fff;border-radius:14px;cursor:pointer;padding:10px;font-size:.85em;font-weight:600;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.choice:hover{border-color:var(--ff-blue);background:#f3f8ff}
.choice .pic{font-size:1.5em}.choice .sub{font-size:.7em;color:var(--ff-muted);font-weight:500}

/* korábbi címek (prefill) */
.recent{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px}
.recent .chip{border:2px solid var(--ff-ok);background:#f1faf3;color:var(--ff-ok);border-radius:999px;padding:8px 14px;font-weight:700;cursor:pointer;font-size:.85em;min-height:44px}
.recent .chip:hover{background:#e2f5e8}
.recent .chip .star{margin-right:4px}

/* sofőr feed / kártyák */
.feed{display:flex;flex-direction:column;gap:10px}
.dnote{border:1px solid #cfe6d6;background:#f1faf3;border-radius:12px;padding:10px 12px;font-size:.8em}
.dnote .t{font-weight:700;color:var(--ff-ok)} .dnote .meta{font-size:.85em;color:var(--ff-muted);margin-top:4px}
.empty{color:var(--ff-muted);font-size:.85em;font-style:italic}

/* tanítás */
.learnrow{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--ff-line);border-radius:12px;margin-bottom:10px;font-size:.85em;background:#fff}
.learnrow .q{font-weight:600}.learnrow .cnt{font-size:.8em;color:var(--ff-muted)}
.learnrow textarea{width:100%;min-height:56px;border:1px solid var(--ff-line);border-radius:8px;padding:8px;font-family:inherit;font-size:.95em}
.learnrow .act{display:flex;gap:8px;align-items:center}
.learnrow select{border:1px solid var(--ff-line);border-radius:8px;padding:8px}
.learnrow button{border:none;background:var(--ff-ok);color:#fff;border-radius:8px;padding:10px 14px;cursor:pointer;font-weight:700}

/* voice */
.voicewrap{display:flex;flex-direction:column;gap:14px}
.mic{width:130px;height:130px;border-radius:50%;border:none;background:var(--ff-blue);color:#fff;font-size:48px;cursor:pointer;margin:8px auto;display:block;box-shadow:0 8px 22px rgba(11,92,171,.35);transition:transform .1s}
.mic:active{transform:scale(.96)}
.mic.listening{background:var(--ff-red);animation:pulse 1.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(226,35,26,.5)}70%{box-shadow:0 0 0 24px rgba(226,35,26,0)}100%{box-shadow:0 0 0 0 rgba(226,35,26,0)}}
.micstate{text-align:center;font-weight:700;color:var(--ff-muted)}
.transcript{min-height:80px;background:#0c2030;border-radius:14px;padding:14px;color:#cfe3f5}
.transcript .line{margin:8px 0;font-size:.9em}
.transcript .who{font-weight:800;margin-right:8px}
.transcript .cust{color:#ffd27f}.transcript .bot{color:#7fd1ff}.transcript .op{color:#a6f0b6}
.callbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;min-height:var(--tap);background:var(--ff-ok);color:#fff;border-radius:14px;font-weight:800;padding:0 20px;font-size:1em}
.warnbox{background:#fff7ef;border:1px solid #ffd9b0;color:var(--ff-warn);border-radius:12px;padding:12px;font-size:.85em}

/* ===== Uber-szerű helyszínválasztó képernyő (overlay) ===== */
.overlay{position:fixed;inset:0;background:rgba(7,20,40,.5);z-index:1000;display:flex;align-items:stretch;justify-content:center;padding:12px}
.overlay[hidden]{display:none}
.picker{background:#fff;width:100%;max-width:560px;margin:auto;border-radius:18px;display:flex;flex-direction:column;max-height:96vh;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.picker-head{display:flex;align-items:center;gap:10px;padding:14px 16px;background:linear-gradient(135deg,var(--ff-blue),var(--ff-blue-dark));color:#fff}
.picker-head .iconbtn{background:rgba(255,255,255,.2);border:none;color:#fff;width:44px;height:44px;border-radius:12px;font-size:22px;cursor:pointer}
.picker-title{font-weight:800;font-size:1em}
.picker-body{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.picker-recent{display:flex;flex-wrap:wrap;gap:8px}
.picker-zip{display:flex;gap:8px}
.picker-zip input{flex:1;min-height:50px;border:2px solid var(--ff-line);border-radius:12px;text-align:center;font-size:1.1em;letter-spacing:4px}
.picker-zip button{min-height:50px;border:none;background:var(--ff-blue);color:#fff;border-radius:12px;padding:0 16px;font-weight:700;cursor:pointer}

/* valódi térkép (Leaflet + OpenStreetMap) */
.picker-search{display:flex;gap:8px}
.picker-search input{flex:1;min-height:48px;border:2px solid var(--ff-line);border-radius:12px;padding:8px 14px;font-size:max(16px,.95em)}
.picker-search button{min-height:48px;border:none;background:var(--ff-blue);color:#fff;border-radius:12px;padding:0 16px;font-weight:700;cursor:pointer}
.mapwrap{position:relative;height:340px;border-radius:14px;overflow:hidden;border:1px solid var(--ff-line);background:#e9eef1}
#ffmap{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.leaflet-container{font:inherit}
/* fix középső tű – a térkép mozog alatta (Uber-stílus) */
.centerpin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);font-size:40px;pointer-events:none;z-index:500;filter:drop-shadow(0 3px 3px rgba(0,0,0,.4));animation:drop .3s ease}
.centerpin .pulse{position:absolute;left:50%;bottom:-4px;width:14px;height:6px;background:rgba(0,0,0,.25);border-radius:50%;transform:translateX(-50%)}
@keyframes drop{from{transform:translate(-50%,-130%)}to{transform:translate(-50%,-100%)}}
.locbtn{position:absolute;right:12px;bottom:18px;width:52px;height:52px;border-radius:50%;border:none;background:#fff;box-shadow:0 3px 10px rgba(0,0,0,.3);font-size:24px;cursor:pointer;z-index:600}
.maphint{font-size:.74em;color:var(--ff-muted);text-align:center}
.mapwarn{background:#fff7ef;border:1px solid #ffd9b0;color:var(--ff-warn);border-radius:12px;padding:12px;font-size:.85em}

/* admin statisztika */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:4px 0 14px}
@media(max-width:720px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{background:#f5f9ff;border:1px solid var(--ff-line);border-radius:12px;padding:10px 8px;text-align:center}
.kpi .v{font-size:1.5em;font-weight:800;color:var(--ff-blue)}
.kpi .l{font-size:.72em;color:var(--ff-muted)}
.bar{display:flex;align-items:center;gap:8px;margin:5px 0;font-size:.85em}
.bar .lab{flex:0 1 170px;min-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .track{flex:1;min-width:70px;background:#eef4fb;border-radius:6px;height:16px;overflow:hidden}
.bar .fill{display:block;height:100%;background:var(--ff-blue);border-radius:6px}
.bar .num{flex:0 0 40px;text-align:right;color:var(--ff-muted)}
.nps-prom{color:var(--ff-ok)} .nps-pas{color:var(--ff-warn)} .nps-det{color:var(--ff-red)}

.confirmbar{border-top:1px solid var(--ff-line);padding:12px 16px;background:#fff;display:flex;flex-direction:column;gap:10px}
.confirm-addr{font-weight:700;display:flex;align-items:center;gap:8px}
.confirm-addr .muted{color:var(--ff-muted);font-weight:500}
.confirmbtn{min-height:var(--tap);border:none;background:var(--ff-ok);color:#fff;border-radius:14px;font-size:1em;font-weight:800;cursor:pointer}
.confirmbtn:disabled{background:#aac9b5;cursor:not-allowed}

@media(max-width:720px){ .choices{grid-template-columns:1fr 1fr} .mapwrap{height:300px} }