/* ═══════════════════════════════════════════════════════
   ROADMAP — מסלול העלייה — CSS
   ═══════════════════════════════════════════════════════ */

/* ── Tab row ── */
.rm-tabs-row {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px;
}
.rm-tab {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
  background: var(--theme-card-bg, #fff); color: var(--theme-text, #374151);
  font-weight: 500; font-size: 0.87rem; font-family: inherit;
  border: 2px solid var(--theme-border, rgba(212,175,55,0.3));
  transition: all 0.2s;
}
.rm-tab:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,0.1); }
.rm-tab-active {
  background: #1B3A6B !important; color: #fff !important;
  border-color: #1B3A6B !important; font-weight: 700;
}
.rm-tab-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 0.8rem;
}

/* ── Settings row ── */
.rm-settings-row {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  padding: 10px 14px; margin-bottom: 18px;
  background: var(--theme-card-bg, #fff); border-radius: 12px;
  border: 1px solid var(--theme-border, rgba(212,175,55,0.3));
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.rm-setting {
  display: flex; align-items: center; gap: 6px;
}
.rm-setting-label {
  font-size: 0.85rem; font-weight: 600; color: var(--theme-heading, #1B3A6B);
}
.rm-select {
  padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--theme-border, #D4AF37);
  outline: none; background: var(--theme-card-bg, #fffbf0);
  font-weight: 600; font-family: inherit; font-size: 0.85rem;
  color: var(--theme-text, #374151);
}
.rm-btn-add {
  margin-right: auto; padding: 7px 16px; border-radius: 8px;
  background: linear-gradient(135deg, #1B3A6B, #2A5298);
  color: #fff; border: none; font-weight: 700; font-size: 0.85rem;
  cursor: pointer; font-family: inherit; transition: all 0.2s;
}
.rm-btn-add:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(27,58,107,0.3); }

/* ── Progress card ── */
.rm-progress-card {
  background: var(--theme-card-bg, #fff); border-radius: 16px;
  padding: 20px 24px; margin-bottom: 20px;
  border: 1px solid var(--theme-border, rgba(212,175,55,0.25));
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.rm-progress-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px; flex-wrap: wrap; gap: 12px;
}
.rm-progress-title {
  font-size: 1.15rem; font-weight: 800;
  color: var(--theme-heading, #1B3A6B);
}
.rm-progress-sub {
  font-size: 0.82rem; color: var(--theme-text-muted, #6b7280); margin-top: 2px;
}
.rm-progress-pct { text-align: center; }
.rm-pct-num {
  font-size: 2rem; font-weight: 900; color: #1B3A6B;
}
.rm-pct-label {
  font-size: 0.75rem; color: var(--theme-text-muted, #6b7280);
}
.rm-progress-bar-wrap {
  width: 100%; height: 12px; background: var(--theme-bg, #f0e8d0);
  border-radius: 999px; overflow: hidden;
}
.rm-progress-bar-fill {
  height: 100%; border-radius: 999px;
  transition: width 0.8s ease;
  box-shadow: 0 2px 8px rgba(27,58,107,0.3);
}
.rm-tags-row {
  display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap;
}
.rm-tag {
  font-size: 0.75rem; padding: 3px 12px; border-radius: 999px;
}
.rm-tag-good {
  background: rgba(123,160,91,0.12); color: #4d7c0f;
  border: 1px solid rgba(123,160,91,0.3);
}
.rm-tag-warn {
  background: rgba(220,53,69,0.08); color: #b91c1c;
  border: 1px solid rgba(220,53,69,0.2);
}

/* ── Visual Map ── */
.rm-map-container {
  position: relative; width: 100%; aspect-ratio: 16/9;
  border-radius: 20px; overflow: hidden; margin-bottom: 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.rm-bg-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.rm-bg-grad {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.rm-svg-path {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 2;
}
.rm-path-glow {
  filter: drop-shadow(0 0 6px rgba(212,175,55,0.6));
}

/* ── Station dots on map ── */
.rm-station {
  position: absolute; z-index: 5; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transform: translate(-50%, -50%); cursor: pointer;
  transition: all 0.25s ease;
}
.rm-station:hover {
  transform: translate(-50%, -50%) scale(1.25);
  z-index: 10;
}
.rm-station-done {
  animation: rm-pulse 2s infinite;
}
.rm-station-locked {
  opacity: 0.5; filter: grayscale(0.5);
}
.rm-station-label {
  position: absolute; top: 110%; left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.75); color: #fff;
  padding: 3px 10px; border-radius: 6px;
  font-size: 0.72rem; white-space: nowrap;
  pointer-events: none; font-weight: 600;
  opacity: 0; transition: opacity 0.2s;
}
.rm-station:hover .rm-station-label { opacity: 1; }

@keyframes rm-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(212,175,55,0.4); }
  50% { box-shadow: 0 0 24px rgba(212,175,55,0.8); }
}

/* ── Stations list (mobile friendly) ── */
.rm-stations-list {
  background: var(--theme-card-bg, #fff); border-radius: 16px;
  padding: 20px 18px;
  border: 1px solid var(--theme-border, rgba(212,175,55,0.2));
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.rm-list-title {
  font-size: 1rem; font-weight: 800; margin: 0 0 14px;
  color: var(--theme-heading, #1B3A6B);
}
.rm-list-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
  transition: all 0.15s; margin-bottom: 4px;
}
.rm-list-item:hover {
  background: rgba(27,58,107,0.06);
}
.rm-list-done { background: rgba(123,160,91,0.06); }
.rm-list-locked { opacity: 0.5; }
.rm-list-icon {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.rm-list-info { flex: 1; min-width: 0; }
.rm-list-name {
  font-size: 0.9rem; font-weight: 700;
  color: var(--theme-text, #1e293b);
}
.rm-list-sub {
  font-size: 0.78rem; color: var(--theme-text-muted, #94a3b8);
}
.rm-list-status { font-size: 1.1rem; flex-shrink: 0; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .rm-map-container { aspect-ratio: 4/3; }
  .rm-station { font-size: 0.9rem !important; }
  .rm-station[style*="width:54px"] { width: 40px !important; height: 40px !important; }
  .rm-settings-row { flex-direction: column; align-items: stretch; }
  .rm-btn-add { margin-right: 0; }
}