/* Page-specific styles for PrepverseLMS
   - Keeps CSS out of Razor views to avoid Razor parsing of @media, preserve caching and maintainability.
*/

.pathway-diagram {
  background: linear-gradient(180deg, rgba(250,250,252,0.6), rgba(245,247,250,0.6));
  border-radius: 12px;
  padding: 18px;
}
.path-node {
  fill: #ffffff;
  stroke: #3a7bff;
  stroke-width: 2;
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease;
  filter: drop-shadow(0 2px 6px rgba(58,123,255,0.12));
}
.path-node.hovered {
  transform: translateY(-6px) scale(1.03);
  filter: drop-shadow(0 6px 18px rgba(58,123,255,0.22));
}
.path-label { font-size: 0.9rem; fill: #0b2546; pointer-events: none; }

.journey-map {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 16px 8px;
}
.journey-step {
  flex: 1 1 auto;
  text-align:center;
  position:relative;
  cursor:pointer;
}
.journey-step .icon {
  width:72px;height:72px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#f6f9ff,#e9f2ff);
  border: 2px solid rgba(58,123,255,0.12);
  margin-bottom:8px;
  transition: transform .16s ease, box-shadow .16s ease;
}
.journey-step:hover .icon { transform: translateY(-6px); box-shadow: 0 10px 22px rgba(11,37,70,0.08); }
.journey-connector {
  height:4px; background: linear-gradient(90deg,#dbe9ff,#cfe3ff);
  position:absolute; left:50%; right:-50%; top:36px; z-index:-1;
}
.journey-step:first-child .journey-connector { left:calc(50% + 36px); }
.journey-step:last-child .journey-connector { right:calc(50% + 36px); left:auto; }

.cta-upgrade {
  background: linear-gradient(90deg,#f7f9ff,#ffffff);
  padding:28px;
  border-radius:14px;
  box-shadow: 0 6px 26px rgba(11,37,70,0.06);
}
.price-label { font-weight:700; font-size:1.5rem; }
.price-toggle { margin-bottom:12px; }
.animated-cta {
  background: linear-gradient(90deg,#3a7bff,#0066ff);
  color:white;
  border:none;
  padding:14px 28px;
  border-radius:8px;
  box-shadow: 0 8px 26px rgba(58,123,255,0.18);
  transition: transform .12s ease;
}
.animated-cta:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(58,123,255,0.22); }

/* capability card hover/focus */
.capability-card {
  background: linear-gradient(180deg,#ffffff,#f8fbff);
  border-radius: 12px;
  padding: 18px;
  position: relative;
  overflow: hidden;
  transition: transform .22s cubic-bezier(.2,.9,.2,1), box-shadow .22s ease, border-color .22s ease;
  border: 1px solid rgba(11,37,70,0.06);
}
.capability-card .icon-badge {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(180deg, rgba(58,123,255,0.08), rgba(58,123,255,0.04));
  border: 1px solid rgba(58,123,255,0.08);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.capability-card h5 { margin-bottom: 8px; font-weight: 600; color: #0b2546; }
.capability-card p { color: #334155; }
.capability-card:focus-within, .capability-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(11,37,70,0.12);
  border-color: rgba(58,123,255,0.12);
}
.capability-card:focus-within .icon-badge, .capability-card:hover .icon-badge {
  transform: translateY(-6px);
  box-shadow: 0 10px 20px rgba(58,123,255,0.08);
  background: linear-gradient(180deg, rgba(58,123,255,0.14), rgba(58,123,255,0.06));
}
.capability-card:focus { outline: 3px solid rgba(58,123,255,0.12); outline-offset: 3px; }

@media (max-width:767px) {
  .journey-connector { display:none; }
}