/* explain.css - חלוניות הסבר צפות + חזרה למפת אתר (mapatatar) */

/* סרגל עליון צף: חזרה + סגור הכל */
.explain-topbar{
  position:fixed; top:14px; left:14px; z-index:9000;
  display:flex; gap:10px; align-items:center;
}
.etb-btn{
  font-family:'Heebo',sans-serif; font-weight:700; font-size:13px;
  border:1px solid rgba(180,168,228,0.22); border-radius:10px;
  padding:9px 15px; cursor:pointer; display:flex; align-items:center; gap:8px;
  background:#343043; color:#fff; transition:.15s; box-shadow:0 4px 16px rgba(0,0,0,.35);
}
.etb-btn:hover{ background:#403a52; border-color:rgba(180,168,228,0.5); }
.etb-back{
  background:linear-gradient(135deg,#4A3B7A,#896EC0); border-color:transparent;
  font-size:14.5px; font-weight:800; padding:12px 22px;
  box-shadow:0 4px 22px rgba(137,110,192,.55);
}
.etb-back:hover{ filter:brightness(1.12); transform:translateY(-1px); }
.etb-back-arrow{ font-size:18px; display:inline-block; }
.etb-closeall{ background:#25232B; color:#B4A8E4; }

/* חץ חזרה צף בצד ימין */
.etb-side-back{
  position:fixed; right:0; top:50%; transform:translateY(-50%);
  z-index:9000; border:none; cursor:pointer;
  background:linear-gradient(135deg,#4A3B7A,#896EC0); color:#fff;
  border-radius:16px 0 0 16px; padding:18px 12px 18px 16px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-family:'Heebo',sans-serif; font-weight:800; font-size:12.5px; line-height:1.25;
  box-shadow:-6px 6px 26px rgba(0,0,0,.45); transition:.18s;
}
.etb-side-back:hover{ padding-right:20px; filter:brightness(1.12); }
.etb-side-back .sb-arrow{ font-size:26px; line-height:1; }
.etb-side-back .sb-txt{ text-align:center; }
@media(max-width:600px){
  .etb-side-back{ padding:14px 9px 14px 12px; font-size:11px; }
  .etb-side-back .sb-arrow{ font-size:22px; }
}

/* חלונית הסבר צפה */
.explain-panel{
  position:fixed; width:440px; max-width:92vw;
  background:#2c2937; border:1px solid rgba(180,168,228,0.22);
  border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,.55);
  z-index:8000; display:flex; flex-direction:column; max-height:84vh;
  animation:epIn .18s ease; transition:width .2s ease, max-height .2s ease;
}
/* מצב מוגדל */
.explain-panel.maximized{ width:760px; max-width:94vw; max-height:90vh; }
/* מצב מכווץ - כותרת בלבד */
.explain-panel.minimized .ep-body,
.explain-panel.minimized .ep-foot{ display:none; }
.explain-panel.minimized .ep-head{ border-radius:14px; border-bottom:none; }
@keyframes epIn{ from{ opacity:0; transform:translateY(8px) scale(.98); } to{ opacity:1; transform:none; } }
.explain-panel.front{ z-index:8200; }

.ep-head{
  display:flex; align-items:center; gap:10px; padding:14px 16px;
  border-bottom:1px solid rgba(180,168,228,0.16);
  background:linear-gradient(135deg,rgba(74,59,122,.55),rgba(137,110,192,.35));
  border-radius:14px 14px 0 0; cursor:grab; user-select:none;
}
.ep-head:active{ cursor:grabbing; }
.ep-titles{ flex:1; min-width:0; }
.ep-title{ font-size:16px; font-weight:800; color:#fff; }
.ep-sub{ font-size:11.5px; color:#cabfe8; margin-top:2px; }
.ep-ctrls{ flex:none; display:flex; gap:6px; align-items:center; }
.ep-btn{
  flex:none; width:30px; height:30px; border-radius:8px; border:none; cursor:pointer;
  background:rgba(255,255,255,.1); color:#fff; font-size:15px; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:.15s;
}
.ep-btn:hover{ background:rgba(255,255,255,.22); }
.ep-x{ font-size:17px; }
.ep-x:hover{ background:rgba(255,107,107,.85); }

.ep-body{ overflow-y:auto; padding:16px 18px; }
.ep-lead{ font-size:13.5px; line-height:1.65; color:#e8e3f5; margin-bottom:6px; }
.ep-section{ margin-top:16px; }
.ep-h{ font-size:13px; font-weight:800; color:#B4A8E4; margin-bottom:8px; }
.ep-p{ font-size:12.5px; line-height:1.6; color:#ddd7ee; margin:6px 0; }
.ep-bullet{ font-size:12.5px; line-height:1.55; color:#ddd7ee; padding:5px 20px 5px 0; position:relative; }
.ep-bullet::before{ content:"◆"; position:absolute; right:0; top:6px; color:#896EC0; font-size:9px; }

.ep-foot{ padding:12px 16px; border-top:1px solid rgba(180,168,228,0.16); display:flex; justify-content:flex-start; }
.ep-dl{
  font-family:'Heebo'; font-weight:700; font-size:12.5px; color:#fff;
  background:#896EC0; border:none; border-radius:9px; padding:9px 16px; cursor:pointer;
  display:flex; align-items:center; gap:8px; transition:.15s;
}
.ep-dl:hover{ background:#7857B0; }

@media(max-width:600px){
  .explain-panel{ width:94vw; }
  .explain-topbar{ left:10px; top:10px; }
  .etb-btn{ font-size:12px; padding:8px 12px; }
}