/* =======================================================
   PROFESSIONAL LEARNING MAP UPGRADE (RIA ACADEMY)
   ======================================================= */
:root {
  --bg-deep: #050509;
  --bg-surface: rgba(15, 15, 20, 0.6);
  --color-cyber: #ff2a5f;
  --color-prog: #00f0ff;
  --color-ai: #b534ff;
  --glow-spread: 25px;
}

body.learning-map-page {
  background: radial-gradient(circle at 50% 0%, #151525 0%, #050509 60%, #000000 100%);
  font-family: 'Outfit', 'Tajawal', sans-serif; /* Adding Tajawal for Arabic */
}

/* Background Refinements */
.bg-mesh, .bg-grid {
  opacity: 0.3;
}

/* Header & Sidebar Polish */
.learning-nav {
  background: rgba(12, 12, 18, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(25px) saturate(180%) !important;
}

.sidebar-widget {
  background: linear-gradient(180deg, rgba(20, 20, 25, 0.45) 0%, rgba(10, 10, 15, 0.85) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
  border-radius: 28px !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sidebar-widget:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6) !important;
}

.user-avatar-large {
  background: linear-gradient(135deg, var(--color-prog), #0077ff) !important;
  box-shadow: 0 0 0 4px rgba(0, 229, 255, 0.1), 0 0 25px rgba(0, 229, 255, 0.3) !important;
}

/* Nodes Styling - Glassmorphism & Depth */
.node-btn {
  background: linear-gradient(135deg, rgba(30, 30, 40, 0.7), rgba(15, 15, 20, 0.95)) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.02), 0 15px 35px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(10px) !important;
}

.node-group:hover .node-btn:not(.locked) {
  transform: scale(1.12) translateY(-10px) !important;
  box-shadow: 
    inset 0 0 40px rgba(var(--node-color-rgb), 0.15), 
    0 25px 45px rgba(0, 0, 0, 0.7), 
    0 0 var(--glow-spread) var(--node-glow) !important;
  border-color: rgba(var(--node-color-rgb), 0.6) !important;
}

.node-info-card {
  background: linear-gradient(180deg, rgba(25, 25, 32, 0.95), rgba(12, 12, 16, 0.98)) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.5) !important;
  border-radius: 20px !important;
  padding: 24px !important;
}

.node-info-card::before {
  background: rgba(25, 25, 32, 1) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.node-title {
  font-size: 1.4rem !important;
  letter-spacing: 0.5px;
}

/* SVG Path Enhancements */
.neon-path-active {
  filter: drop-shadow(0 0 12px var(--color-prog-glow)) drop-shadow(0 0 4px var(--color-prog)) !important;
  stroke-width: 4 !important;
  opacity: 0.8;
}

.neon-path-bg {
  stroke-width: 3 !important;
  stroke: rgba(255, 255, 255, 0.07) !important;
  stroke-dasharray: 6 12 !important;
}

/* Typography Enhancements */
.map-header h1 {
  background: linear-gradient(135deg, #ffffff 0%, #94a3b8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  font-size: 4.5rem !important;
  letter-spacing: -1.5px !important;
}

.map-header p {
  color: #a1a1aa !important;
  font-size: 1.25rem !important;
}

.node-btn i.main-icon {
  background: linear-gradient(135deg, #ffffff 0%, #b0b5c0 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.node-group:hover .node-btn:not(.locked) i.main-icon {
  background: linear-gradient(135deg, #ffffff 0%, var(--node-color) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* UI Elements Enhancements */
.quest-card {
  background: linear-gradient(135deg, rgba(30, 30, 40, 0.4), rgba(15, 15, 20, 0.6)) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 18px !important;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.quest-card:hover {
  transform: scale(1.02);
  border-color: rgba(0, 229, 255, 0.3) !important;
}

.quest-btn {
  background: linear-gradient(90deg, rgba(0, 229, 255, 0.1), rgba(0, 229, 255, 0.05)) !important;
  border: 1px solid rgba(0, 229, 255, 0.25) !important;
}

.quest-btn:hover {
  background: linear-gradient(90deg, rgba(0, 229, 255, 0.2), rgba(0, 229, 255, 0.1)) !important;
  border-color: rgba(0, 229, 255, 0.5) !important;
}

.badge-item {
  background: linear-gradient(135deg, rgba(35, 35, 45, 0.6), rgba(20, 20, 25, 0.9)) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.badge-item:hover {
  background: linear-gradient(135deg, rgba(45, 45, 55, 0.8), rgba(25, 25, 35, 1)) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.crown-badge {
  background: linear-gradient(135deg, #fef08a, #f59e0b) !important;
  border: 2px solid #27272a !important;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.6), inset 0 2px 4px rgba(255,255,255,0.5) !important;
}

/* Arabic RTL Adjustments */
html[dir="rtl"] .node-info-card {
  text-align: right;
}

html[dir="rtl"] .widget-title,
html[dir="rtl"] .breadcrumb-container,
html[dir="rtl"] .user-welcome {
  flex-direction: row-reverse;
}

html[dir="rtl"] .node-meta {
  flex-direction: row-reverse;
  justify-content: flex-end;
}
html[dir="rtl"] .node-action-btn i {
  transform: rotate(180deg);
}

html[dir="rtl"] .node-action-btn {
  flex-direction: row-reverse;
}