/* ===== מדריך הטיול — עיצוב (RTL, mobile-first, ידידותי לגיל 50+) ===== */
:root{
  --fs: 18px;                /* בסיס; נשלט ע"י כפתורי גודל טקסט */
  --bg:#f6f3ec; --surface:#fff; --surface-2:#f0ebe1; --text:#1f2933; --muted:#69707a;
  --accent:#0f766e; --accent-d:#0b4f49; --accent-2:#c2620a; --amber:#f59e0b;
  --line:#e7e2d6; --danger:#b91c1c; --ok:#15803d;
  --radius:16px; --shadow:0 2px 10px rgba(20,30,40,.08); --shadow-lg:0 8px 28px rgba(20,30,40,.16);
  --maxw:760px;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#11161c; --surface:#1b222b; --surface-2:#222b35; --text:#eef2f6; --muted:#9aa4b0;
         --line:#2c3742; --accent:#2dd4bf; --accent-d:#14b8a6; --accent-2:#fbbf24; --shadow:0 2px 12px rgba(0,0,0,.4); }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans Hebrew","Arial Hebrew",sans-serif;
  font-size:var(--fs); line-height:1.6; color:var(--text); background:var(--bg);
  -webkit-text-size-adjust:100%; overscroll-behavior-y:none;
}
#app{max-width:var(--maxw); margin:0 auto; padding-bottom:88px}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{margin:.2em 0 .35em; line-height:1.25}
p{margin:.3em 0}
button{font-family:inherit; font-size:1rem; cursor:pointer}

/* ---- Top bar ---- */
.topbar{position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:8px;
  background:var(--accent); color:#fff; padding:10px 14px; box-shadow:var(--shadow);}
.topbar .back{font-size:1.5rem; background:none; border:none; color:#fff; padding:4px 8px; border-radius:10px}
.topbar .back:active{background:rgba(255,255,255,.18)}
.topbar-title{flex:1; font-weight:700; font-size:1.05rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.topbar-actions{display:flex; gap:4px}
.icon-btn{background:rgba(255,255,255,.16); border:none; color:#fff; width:40px; height:40px;
  border-radius:12px; font-size:1.2rem; display:grid; place-items:center}
.icon-btn:active{background:rgba(255,255,255,.3)}

/* ---- offline / banners ---- */
.offline-banner{background:var(--amber); color:#3a2a00; text-align:center; padding:6px 10px; font-weight:600; font-size:.92rem}
.note{border-inline-start:4px solid var(--accent); background:var(--surface-2); padding:10px 12px; border-radius:10px; margin:10px 0; font-size:.96rem}
.note.warn{border-color:var(--amber); background:#fff7e6}
.note.urgent{border-color:var(--danger); background:#fde8e8}
@media (prefers-color-scheme: dark){ .note.warn{background:#2a2410} .note.urgent{background:#2a1414} }

/* ---- Hero (home) ---- */
.hero{padding:18px 16px 6px}
.hero h1{font-size:1.5rem}
.hero .sub{color:var(--muted); font-weight:600}
.hero .group{color:var(--muted); font-size:.9rem; margin-top:4px}
.meta-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.meta-chips .pill{background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:4px 10px; font-size:.82rem; box-shadow:var(--shadow)}

/* ---- Quick actions ---- */
.quick{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:14px 16px}
.quick-item{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px 4px;
  text-align:center; box-shadow:var(--shadow); display:flex; flex-direction:column; align-items:center; gap:6px}
.quick-item:active{transform:scale(.97)}
.quick-item .qi{font-size:1.5rem}
.quick-item .ql{font-size:.78rem; font-weight:600; color:var(--text)}
.quick.quick6{grid-template-columns:repeat(3,1fr)}

/* ---- sections ---- */
.section-title{padding:6px 16px; font-size:1.15rem; font-weight:800; display:flex; align-items:center; gap:8px}
.section-sub{padding:0 16px 6px; color:var(--muted); font-size:.9rem; margin-top:-4px}

/* ---- segment cards ---- */
.seg-grid{display:grid; gap:12px; padding:8px 16px}
.seg-card{display:flex; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow)}
.seg-card:active{transform:scale(.995)}
.seg-thumb{width:108px; min-width:108px; height:108px; position:relative; background:var(--surface-2)}
.seg-thumb img{width:100%; height:100%; object-fit:cover}
.seg-body{padding:10px 12px; flex:1; min-width:0}
.seg-body h3{font-size:1.08rem}
.seg-dates{color:var(--accent-2); font-weight:700; font-size:.86rem}
.seg-count{color:var(--muted); font-size:.85rem; margin-top:4px}
.seg-num{display:inline-grid; place-items:center; min-width:26px; height:26px; padding:0 6px; background:var(--accent);
  color:#fff; border-radius:999px; font-size:.8rem; font-weight:700; margin-inline-end:6px}

/* ---- generic card / detail ---- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:14px 16px; margin:12px 16px}
.detail{padding-bottom:10px}
.detail-hero{position:relative; background:var(--surface-2)}
.detail-hero img{width:100%; height:240px; object-fit:cover}
.carousel{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:0}
.carousel img{width:100%; min-width:100%; height:240px; object-fit:cover; scroll-snap-align:center}
.detail-body{padding:14px 16px}
.detail h2{font-size:1.35rem}
.detail .en{color:var(--muted); font-size:.9rem; font-weight:600; margin-top:-2px}
.kv{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0}
.kv .pill{background:var(--surface-2); border-radius:999px; padding:5px 11px; font-size:.86rem; font-weight:600}
.detail-section{margin-top:14px}
.detail-section h4{font-size:1rem; color:var(--accent); display:flex; align-items:center; gap:6px}
.detail-section p{white-space:pre-line}

/* ---- chips ---- */
.chip{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; font-size:.78rem;
  font-weight:700; color:#fff; white-space:nowrap}

/* ---- buttons ---- */
.btn-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:11px 14px; border-radius:12px;
  border:1px solid var(--line); background:var(--surface); color:var(--text); font-weight:700; font-size:.95rem; flex:1; min-width:max-content}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent); color:#fff; border-color:var(--accent)}
.btn-amber{background:var(--amber); color:#3a2a00; border-color:var(--amber)}
.btn-ghost{background:var(--surface-2)}
.btn.tts.playing{background:var(--accent-2); color:#fff; border-color:var(--accent-2)}
.btn[disabled]{opacity:.45; pointer-events:none}
.btn-block{width:100%; flex:none}

/* ---- site cards ---- */
.filters{display:flex; gap:8px; overflow-x:auto; padding:10px 16px; scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.fchip{flex:none; padding:7px 13px; border-radius:999px; border:1px solid var(--line); background:var(--surface);
  font-weight:700; font-size:.86rem; color:var(--text)}
.fchip.active{background:var(--accent); color:#fff; border-color:var(--accent)}
.site-list{display:grid; gap:12px; padding:4px 16px}
.site-card{display:flex; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow)}
.site-card:active{transform:scale(.995)}
.site-thumb{width:96px; min-width:96px; height:104px; position:relative; background:var(--surface-2)}
.site-thumb img{width:100%; height:100%; object-fit:cover}
.site-main{padding:10px 12px; flex:1; min-width:0}
.site-main h3{font-size:1.02rem; margin:0 0 4px}
.site-desc{color:var(--muted); font-size:.9rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.badge-book{display:inline-block; margin-inline-start:6px; background:var(--danger); color:#fff; border-radius:6px; padding:1px 6px; font-size:.7rem; font-weight:700; vertical-align:middle}

/* ---- image fallback ---- */
.img-fallback{width:100%; height:100%; display:grid; place-items:center; font-size:2rem;
  background:linear-gradient(135deg,var(--accent),var(--accent-d)); color:rgba(255,255,255,.9)}
.detail-hero .img-fallback{height:240px; font-size:3.4rem}

/* ---- nearby ---- */
.nearby-item{display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:10px 12px; margin:8px 16px; box-shadow:var(--shadow)}
.nearby-dist{min-width:78px; text-align:center}
.nearby-dist .km{font-size:1.15rem; font-weight:800; color:var(--accent)}
.nearby-dist .dir{font-size:.78rem; color:var(--muted)}
.nearby-item .nm{flex:1; min-width:0}
.nearby-item .nm h4{margin:0; font-size:1rem}
.nearby-item .nm .c{font-size:.82rem; color:var(--muted)}

/* ---- tables (jewish dates) ---- */
.tbl{width:calc(100% - 32px); margin:10px 16px; border-collapse:collapse; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; overflow:hidden; font-size:.88rem}
.tbl th,.tbl td{padding:8px 10px; border-bottom:1px solid var(--line); text-align:start; vertical-align:top}
.tbl th{background:var(--surface-2); font-weight:800}
.tbl tr:last-child td{border-bottom:none}

/* ---- settings / sheet ---- */
.setting-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line)}
.setting-row .lbl{font-weight:700}
.setting-row .desc{color:var(--muted); font-size:.84rem; font-weight:400}
.switch{position:relative; width:52px; height:30px; flex:none}
.switch input{opacity:0; width:0; height:0}
.slider{position:absolute; inset:0; background:#c7ccd2; border-radius:999px; transition:.2s}
.slider:before{content:""; position:absolute; height:24px; width:24px; right:3px; top:3px; background:#fff; border-radius:50%; transition:.2s}
.switch input:checked + .slider{background:var(--accent)}
.switch input:checked + .slider:before{transform:translateX(-22px)}
.seg-ctrl{display:flex; gap:6px}
.seg-ctrl button{padding:6px 12px; border-radius:10px; border:1px solid var(--line); background:var(--surface); font-weight:700}
.seg-ctrl button.on{background:var(--accent); color:#fff; border-color:var(--accent)}

/* ---- search ---- */
.search-box{padding:12px 16px}
.search-box input{width:100%; padding:13px 14px; border-radius:12px; border:1px solid var(--line);
  background:var(--surface); font-size:1rem; color:var(--text)}

/* ---- progress ---- */
.progress{height:10px; background:var(--surface-2); border-radius:999px; overflow:hidden; margin:10px 0}
.progress > i{display:block; height:100%; width:0; background:var(--accent); transition:width .2s}

/* ---- bottom nav ---- */
.bottomnav{position:fixed; bottom:0; inset-inline:0; max-width:var(--maxw); margin:0 auto; display:grid;
  grid-template-columns:repeat(4,1fr); background:var(--surface); border-top:1px solid var(--line); z-index:30;
  padding-bottom:env(safe-area-inset-bottom)}
.bottomnav a{display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 0; color:var(--muted); font-size:.72rem; font-weight:700}
.bottomnav a .bi{font-size:1.25rem}
.bottomnav a.active{color:var(--accent)}

.loading{padding:60px 20px; text-align:center; color:var(--muted)}
.empty{padding:30px 16px; text-align:center; color:var(--muted)}
.src{font-size:.8rem; color:var(--muted); word-break:break-all}
.src a{color:var(--accent); text-decoration:underline}
hr.soft{border:none; border-top:1px solid var(--line); margin:14px 0}
.muted-note{color:var(--muted); font-size:.85rem}

/* ===================================================================== */
/* ===== Phase 1: מפה · סימון ביקור · אלבום תמונות ===================== */
/* ===================================================================== */

/* ---- bottom nav: 5 פריטים ---- */
.bottomnav.nav5{grid-template-columns:repeat(5,1fr)}
.bottomnav.nav5 a{font-size:.75rem}
.bottomnav.nav5 a .bi{font-size:1.2rem}

/* ---- כרטיס התקדמות (בית / מקטע / הגדרות) ---- */
.progress-card .pc-top{display:flex; justify-content:space-between; align-items:center; gap:8px; font-weight:700; margin-bottom:8px}
.progress-card .pc-num{color:var(--accent); font-weight:800; white-space:nowrap}

/* ---- סימון "ביקרנו" ---- */
.visit-toggle{position:absolute; top:6px; inset-inline-start:6px; width:36px; height:36px; border-radius:50%;
  border:2px solid #fff; background:rgba(0,0,0,.4); color:#fff; font-weight:900; font-size:1rem; line-height:1;
  display:grid; place-items:center; padding:0; box-shadow:0 1px 4px rgba(0,0,0,.4); z-index:2}
.visit-toggle.on{background:var(--ok)}
.visit-toggle:active{transform:scale(.9)}
.site-card.visited{opacity:.62}
.site-card.visited .site-thumb img{filter:saturate(.55)}
.btn-visited.on{background:var(--ok); color:#fff; border-color:var(--ok)}
.btn-danger{background:var(--danger); color:#fff; border-color:var(--danger)}
.vfilters{padding-top:0}

/* ---- מפה (Leaflet) ---- */
.map-wrap{position:relative}
.map{height:60vh; min-height:320px; width:100%}
.leaflet-container{background:var(--surface-2)}
/* ניטרול מסגרת ברירת-המחדל של divIcon + מירכוז ה"סיכה" */
.leaflet-div-icon.mk, .mk{background:transparent; border:0; display:flex; align-items:center; justify-content:center}
.mk-pin{display:grid; place-items:center; width:30px; height:30px; border-radius:50%; border:2px solid #fff;
  box-shadow:0 1px 5px rgba(0,0,0,.45); font-size:16px; line-height:1; color:#fff}
.mk-pin.visited{box-shadow:0 0 0 3px var(--ok), 0 1px 5px rgba(0,0,0,.45)}
.map-actions{padding:10px 16px}
.map-segs{display:flex; gap:8px; overflow-x:auto; padding:2px 0 10px; scrollbar-width:none}
.map-segs::-webkit-scrollbar{display:none}
.map-legend{display:flex; flex-wrap:wrap; gap:10px; margin:8px 0}
.lg{display:inline-flex; align-items:center; gap:5px; font-size:.82rem; color:var(--muted)}
.lg-dot{display:grid; place-items:center; width:22px; height:22px; border-radius:50%; font-size:12px; color:#fff}
/* פופאפ — להתאים לערכת הצבעים של האפליקציה (כולל מצב כהה) + RTL */
.leaflet-popup-content-wrapper, .leaflet-popup-tip{background:var(--surface); color:var(--text); box-shadow:var(--shadow-lg)}
.leaflet-popup-content{direction:rtl; text-align:right; margin:10px 12px; font:inherit}
.mp-title{font-weight:800; font-size:1rem; margin-bottom:2px}
.mp-cat{color:var(--muted); font-size:.82rem; margin-bottom:7px}
.mp-btns{display:flex; flex-wrap:wrap; gap:6px}
.mp-btn{flex:1; min-width:80px; text-align:center; padding:9px 10px; border-radius:10px; font-weight:700;
  font-size:.86rem; background:var(--surface-2); color:var(--text); border:1px solid var(--line)}
.mp-btn.open{background:var(--accent); color:#fff; border-color:var(--accent)}
.mp-btn.nav{background:#1a73e8; color:#fff; border-color:#1a73e8}
.mp-btn.waze{background:#33ccff; color:#062a3a; border-color:#33ccff}

/* ---- אלבום + רצועת תמונות ---- */
.album-head .photo-add{margin-top:4px}
.photo-card h4{color:var(--accent)}
.photo-add{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:8px}
.photo-add .btn{flex:1; min-width:max-content}
.pa-status{flex-basis:100%; color:var(--muted); font-size:.85rem; min-height:1.1em}
.album-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:4px 0}
.alb-thumb{position:relative; aspect-ratio:1/1; border:none; padding:0; border-radius:10px; overflow:hidden;
  background:var(--surface-2); box-shadow:var(--shadow)}
.alb-thumb img{width:100%; height:100%; object-fit:cover}
.alb-thumb:active{transform:scale(.97)}
.alb-cap{position:absolute; inset-inline:0; bottom:0; padding:12px 5px 4px; text-align:start; color:#fff;
  font-size:.62rem; line-height:1.2; background:linear-gradient(transparent, rgba(0,0,0,.7));
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ---- לייטבוקס ---- */
.lightbox{position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center}
.lb-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.87)}
.lb-inner{position:relative; z-index:1; max-width:var(--maxw); width:100%; max-height:100%; display:flex;
  flex-direction:column; padding:14px; overflow:auto}
.lb-inner > img{width:100%; max-height:60vh; object-fit:contain; border-radius:12px; background:#000}
.lb-meta{margin-top:10px; color:#fff}
.lb-place{font-weight:700}
.lb-caption{width:100%; margin-top:8px; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.12); color:#fff; font-size:1rem}
.lb-caption::placeholder{color:rgba(255,255,255,.6)}
.lb-when{color:rgba(255,255,255,.75); font-size:.85rem; margin-top:6px}
.lb-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}

/* ---- toast ---- */
.toast{position:fixed; left:50%; bottom:96px; transform:translateX(-50%) translateY(16px); background:#111; color:#fff;
  padding:10px 18px; border-radius:999px; font-weight:700; opacity:0; transition:.25s; z-index:1100;
  pointer-events:none; max-width:90%; text-align:center}
.toast.show{opacity:.96; transform:translateX(-50%) translateY(0)}

/* ===================================================================== */
/* ===== Phase 2: הזמנות · תקציב · תגי מצב ============================= */
/* ===================================================================== */

/* ---- badges: ✅ הוזמן (ירוק) לעומת להזמין (אדום) ---- */
.badge-booked{display:inline-block; margin-inline-start:6px; background:var(--ok); color:#fff; border-radius:6px;
  padding:1px 7px; font-size:.7rem; font-weight:700; vertical-align:middle; white-space:nowrap}

/* ---- כרטיס פרטי הזמנה (מלון/רכב) ---- */
.booked-card{border:1px solid var(--ok); border-inline-start:5px solid var(--ok); background:rgba(21,128,61,.06);
  border-radius:14px; padding:12px 14px; margin:12px 0}
.car-booked{margin:12px 16px}
.booked-card .bk-head{font-weight:800; color:var(--ok); font-size:1.02rem; margin-bottom:8px}
.bk-row{display:flex; gap:10px; justify-content:space-between; padding:3px 0; font-size:.92rem; border-bottom:1px dashed var(--line)}
.bk-row:last-of-type{border-bottom:none}
.bk-k{color:var(--muted); font-weight:600; white-space:nowrap}
.bk-v{text-align:start; flex:1}
@media (prefers-color-scheme: dark){ .booked-card{background:rgba(45,212,191,.08)} }

/* ---- מסך אישורי הזמנה ---- */
.bk-status{display:inline-block; padding:3px 10px; border-radius:999px; font-size:.78rem; font-weight:800; white-space:nowrap}
.bk-status.ok{background:var(--ok); color:#fff}
.bk-status.pending{background:var(--danger); color:#fff}
.bk-status.partial{background:var(--amber); color:#3a2a00}
.bk-item{background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
  padding:12px 14px; margin:10px 16px}
.bk-item .bk-top{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px}
.bk-item h3{font-size:1.05rem; margin:0}
.bk-item .bk-sub{color:var(--muted); font-size:.86rem}
.bk-legend{display:flex; flex-wrap:wrap; gap:10px; padding:4px 16px 0}
.bk-summary{display:flex; gap:8px; flex-wrap:wrap; padding:6px 16px}
.bk-summary .pill{background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:5px 12px; font-size:.84rem; font-weight:700; box-shadow:var(--shadow)}

/* ---- מסך תקציב ---- */
.bud-couple{display:flex; gap:8px; overflow-x:auto; padding:8px 16px 2px; scrollbar-width:none}
.bud-couple::-webkit-scrollbar{display:none}
.bud-tot{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:6px 16px}
.bud-tot .box{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:10px; text-align:center; box-shadow:var(--shadow)}
.bud-tot .box .n{font-size:1.15rem; font-weight:800}
.bud-tot .box .l{font-size:.76rem; color:var(--muted)}
.bud-tot .box.paid .n{color:var(--ok)}
.bud-tot .box.left .n{color:var(--accent-2)}
.budtbl{width:calc(100% - 32px); margin:8px 16px; border-collapse:collapse; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; overflow:hidden; font-size:.86rem; box-shadow:var(--shadow)}
.budtbl th,.budtbl td{padding:8px 10px; border-bottom:1px solid var(--line); text-align:start; vertical-align:top}
.budtbl th{background:var(--surface-2); font-weight:800}
.budtbl td.num{text-align:end; white-space:nowrap; font-variant-numeric:tabular-nums}
.budtbl tr:last-child td{border-bottom:none}
.budtbl tr.paid-row td{background:rgba(21,128,61,.06)}
.budtbl tr.total-row td{font-weight:800; background:var(--surface-2)}
.bud-note{font-size:.8rem; color:var(--muted)}

/* ===================================================================== */
/* ===== Phase 4: GPS-once · PWA Install · TTS cards · Mobile polish ==== */
/* ===================================================================== */

#install-banner {
  position:fixed; bottom:90px; inset-inline:12px;
  background:var(--accent); color:#fff; border-radius:16px;
  padding:14px 16px; display:flex; align-items:center; gap:10px;
  box-shadow:var(--shadow-lg); z-index:50; font-weight:700;
}
#install-banner button {
  background:rgba(255,255,255,.22); border:none; color:#fff;
  border-radius:10px; padding:8px 14px; font-weight:700; cursor:pointer;
}

.tts-inline {
  min-width:44px; min-height:44px; border:none;
  background:var(--surface-2); border-radius:10px;
  font-size:1.1rem; cursor:pointer; margin-top:6px;
  display:inline-flex; align-items:center; justify-content:center;
}
.tts-inline.playing { background:var(--accent-2); color:#fff; }

@media (max-width: 400px) {
  .bud-tot { display:flex; flex-direction:column; }
  .bud-tot .box { width:100%; min-width:unset; }
}

/* ---- user picker overlay ---- */
#user-picker-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:200;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
#user-picker {
  background:var(--surface); border-radius:var(--radius); padding:24px;
  max-width:360px; width:100%; text-align:center; box-shadow:var(--shadow-lg);
}
#user-picker h2 { margin:0 0 8px; font-size:1.4rem; }
#user-picker-btns { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px; }
#user-picker-btns .btn { font-size:1rem; padding:14px 8px; }

/* ---- toast with HTML support ---- */
.toast { pointer-events:auto; }

/* ---- guide drawer ---- */
#guide-fab {
  position:fixed; bottom:96px; inset-inline-end:16px; z-index:60;
  width:56px; height:56px; border-radius:50%; border:none;
  background:var(--accent); color:#fff; font-size:1.6rem;
  box-shadow:var(--shadow-lg); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
#guide-fab:active { transform:scale(.93); }

#guide-drawer {
  position:fixed; inset-inline-end:0; bottom:0; top:0; z-index:80;
  width:min(100vw, 420px); background:var(--surface);
  box-shadow:var(--shadow-lg); display:flex; flex-direction:column;
  border-inline-start:1px solid var(--line);
}
#guide-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; background:var(--accent); color:#fff; font-weight:700;
}
#guide-header button { background:none; border:none; color:#fff; font-size:1.3rem; cursor:pointer; }
#guide-messages {
  flex:1; overflow-y:auto; padding:12px 14px;
  display:flex; flex-direction:column; gap:10px;
}
.guide-bubble { max-width:88%; padding:10px 13px; border-radius:14px; font-size:.95rem; line-height:1.5; }
.guide-user  { background:var(--accent); color:#fff; align-self:flex-end; border-radius:14px 14px 2px 14px; }
.guide-model { background:var(--surface-2); border:1px solid var(--line); align-self:flex-start; border-radius:14px 14px 14px 2px; }
.guide-tts-btn { background:none; border:none; cursor:pointer; font-size:.9rem; margin-inline-start:6px; opacity:.7; }
.guide-citations { font-size:.78rem; color:var(--muted); padding:2px 14px; }
#guide-input-row {
  display:flex; gap:8px; padding:10px 12px;
  border-top:1px solid var(--line); background:var(--surface);
}
#guide-input {
  flex:1; padding:10px 12px; border-radius:10px; border:1px solid var(--line);
  background:var(--surface); font-size:.95rem; color:var(--text);
}
#guide-send { background:var(--accent); color:#fff; border:none; border-radius:10px; padding:10px 14px; font-weight:700; cursor:pointer; }
#guide-mic  { background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:10px 12px; cursor:pointer; font-size:1rem; }
#guide-attach-btn { display:flex; align-items:center; padding:10px 8px; cursor:pointer; font-size:1.1rem; color:var(--muted); }
#guide-attach-preview { padding:6px 12px; background:var(--surface-2); font-size:.85rem; display:flex; align-items:center; gap:8px; }
@media (max-width:480px) { #guide-drawer { width:100vw; } }

/* ---- צ'קבוקס לפני הטיול ---- */
.check-item { display:flex; align-items:flex-start; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); cursor:pointer; }
.check-item input[type=checkbox] { width:22px; height:22px; flex:none; margin-top:2px; accent-color:var(--accent); cursor:pointer; }
.check-item.done span { text-decoration:line-through; color:var(--muted); }
/* ---- ניתוח מסמך נסיעה ---- */
#doc-analysis-result table td { padding:5px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
#doc-analysis-result table td:first-child { color:var(--muted); white-space:nowrap; width:5rem; font-size:.85rem; }