/* ==========================================================================
   COMPONENT STYLES - DYNAMIC PROCESS ROADMAP SECTION
   ========================================================================== */

/* Color variables for Roadmap Cards (Step specific tints) */
:root {
  --roadmap-card-01-bg: rgba(99, 102, 241, 0.08);
  --roadmap-card-01-border: rgba(99, 102, 241, 0.18);
  --roadmap-card-02-bg: rgba(108, 93, 211, 0.08);
  --roadmap-card-02-border: rgba(108, 93, 211, 0.18);
  --roadmap-card-03-bg: rgba(168, 85, 247, 0.08);
  --roadmap-card-03-border: rgba(168, 85, 247, 0.18);
  --roadmap-card-04-bg: rgba(99, 102, 241, 0.08);
  --roadmap-card-04-border: rgba(99, 102, 241, 0.18);
  --roadmap-card-05-bg: rgba(108, 93, 211, 0.08);
  --roadmap-card-05-border: rgba(108, 93, 211, 0.18);
  --roadmap-card-06-bg: rgba(168, 85, 247, 0.08);
  --roadmap-card-06-border: rgba(168, 85, 247, 0.18);
  --roadmap-card-07-bg: rgba(99, 102, 241, 0.08);
  --roadmap-card-07-border: rgba(99, 102, 241, 0.18);
}

[data-theme="light"] {
  --roadmap-card-01-bg: rgba(99, 102, 241, 0.05);
  --roadmap-card-01-border: rgba(99, 102, 241, 0.12);
  --roadmap-card-02-bg: rgba(108, 93, 211, 0.05);
  --roadmap-card-02-border: rgba(108, 93, 211, 0.12);
  --roadmap-card-03-bg: rgba(168, 85, 247, 0.05);
  --roadmap-card-03-border: rgba(168, 85, 247, 0.12);
  --roadmap-card-04-bg: rgba(99, 102, 241, 0.05);
  --roadmap-card-04-border: rgba(99, 102, 241, 0.12);
  --roadmap-card-05-bg: rgba(108, 93, 211, 0.05);
  --roadmap-card-05-border: rgba(108, 93, 211, 0.12);
  --roadmap-card-06-bg: rgba(168, 85, 247, 0.05);
  --roadmap-card-06-border: rgba(168, 85, 247, 0.12);
  --roadmap-card-07-bg: rgba(99, 102, 241, 0.05);
  --roadmap-card-07-border: rgba(99, 102, 241, 0.12);
}

/* Sentinel: tall wrapper that gives the sticky section room to scroll */
.fda-roadmap-sentinel {
  position: relative; /* JS sets height dynamically */
}

.fda-roadmap-section {
  position: relative;
  padding: var(--spacing-section) 0;
  background-color: var(--color-bg-dark);
  overflow: hidden;
}

/* Background glows */
.fda-roadmap-bg-glow {
  position: absolute;
  bottom: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(108, 93, 211, 0.05) 0%, rgba(5, 5, 8, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

/* Scroll Container Wrappers */
.fda-roadmap-scroll-container {
  width: 100%;
  overflow: visible;
  position: relative;
  z-index: 1;
}

.fda-roadmap-scroll-wrap {
  display: flex;
  /* overflow-x:hidden means only scrollLeft controls what's visible.
     On mobile (JS inactive) the browser still allows touch scroll on
     overflow:hidden flex rows via the scroll-behavior property.
     We fall back to overflow-x:auto on mobile via the media query below. */
  overflow-x: hidden;
  gap: var(--spacing-md);
  /* padding-right leaves room for the mailbox and lets the last card
     fully scroll into view */
  padding: var(--spacing-sm) 270px var(--spacing-lg) var(--spacing-sm);
  scroll-behavior: auto;  /* JS sets scrollLeft directly; no smooth needed */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  position: relative;
  z-index: 2;

  /* Gradient mask fades cards behind the mailbox body */
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 350px), transparent calc(100% - 250px));
  mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 350px), transparent calc(100% - 250px));
}

/* Hide webkit scrollbar bar at the bottom */
.fda-roadmap-scroll-wrap::-webkit-scrollbar {
  display: none;
}

/* Compact Roadmap Card (Height driven by content + padding) */
.fda-roadmap-card {
  flex: 0 0 380px;
  width: 380px;
  background-color: var(--color-bg-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 22px 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 14px;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.fda-roadmap-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow);
}

/* Details inside Card */
.fda-roadmap-card-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fda-roadmap-card-title {
  font-family: var(--font-primary);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--color-text-light);
  margin: 0;
}

.fda-roadmap-card-desc {
  font-family: var(--font-secondary);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-base);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fda-roadmap-card-num {
  position: absolute;
  top: 6px;
  right: 14px;
  font-family: var(--font-primary);
  font-size: 3rem;
  font-weight: var(--fw-extrabold);
  line-height: 1;
  opacity: 0.12;
  pointer-events: none;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}

.fda-roadmap-card:hover .fda-roadmap-card-num {
  opacity: 0.25;
}

/* Card steps customizations */
.fda-roadmap-card[data-step="1"] {
  background-color: var(--roadmap-card-01-bg);
  border-color: var(--roadmap-card-01-border);
}

.fda-roadmap-card[data-step="1"] .fda-roadmap-card-num {
  color: var(--color-accent-blue);
}

.fda-roadmap-card[data-step="2"] {
  background-color: var(--roadmap-card-02-bg);
  border-color: var(--roadmap-card-02-border);
}

.fda-roadmap-card[data-step="2"] .fda-roadmap-card-num {
  color: var(--color-primary);
}

.fda-roadmap-card[data-step="3"] {
  background-color: var(--roadmap-card-03-bg);
  border-color: var(--roadmap-card-03-border);
}

.fda-roadmap-card[data-step="3"] .fda-roadmap-card-num {
  color: var(--color-accent-purple);
}

.fda-roadmap-card[data-step="4"] {
  background-color: var(--roadmap-card-04-bg);
  border-color: var(--roadmap-card-04-border);
}

.fda-roadmap-card[data-step="4"] .fda-roadmap-card-num {
  color: var(--color-accent-blue);
}

.fda-roadmap-card[data-step="5"] {
  background-color: var(--roadmap-card-05-bg);
  border-color: var(--roadmap-card-05-border);
}

.fda-roadmap-card[data-step="5"] .fda-roadmap-card-num {
  color: var(--color-primary);
}

.fda-roadmap-card[data-step="6"] {
  background-color: var(--roadmap-card-06-bg);
  border-color: var(--roadmap-card-06-border);
}

.fda-roadmap-card[data-step="6"] .fda-roadmap-card-num {
  color: var(--color-accent-purple);
}

.fda-roadmap-card[data-step="7"] {
  background-color: var(--roadmap-card-07-bg);
  border-color: var(--roadmap-card-07-border);
}

.fda-roadmap-card[data-step="7"] .fda-roadmap-card-num {
  color: var(--color-accent-blue);
}

/* Static Mailbox Layer (Fixed on the right side of the container) */
.fda-mailbox {
  position: absolute;
  right: -100px;
  top: 27%;
  transform: translateY(-38%);
  /* Centered vertically against the card row */
  width: 480px;
  /* Adjusted based on new flat asset proportions */
  height: auto;
  /* Scales naturally with the asset aspect ratio */
  pointer-events: none;
  object-fit: contain;
  z-index: 3;
  /* Sits in front of the cards (z-index 2) */
}

/* Mobile-only navigation (hidden on desktop) */
.fda-roadmap-mobile-controls {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  position: relative;
  z-index: 3;
}

.fda-roadmap-nav-btn:focus-visible {
  outline: 2px solid rgba(168, 85, 247, 0.9);
  outline-offset: 3px;
}

.fda-roadmap-nav-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.fda-roadmap-nav-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-text-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.fda-roadmap-nav-btn:hover {
  border-color: rgba(168, 85, 247, 0.45);
  background: rgba(168, 85, 247, 0.08);
  box-shadow: 0 0 0 4px rgba(108, 93, 211, 0.08);
}

.fda-roadmap-nav-btn:active {
  transform: scale(0.96);
}

.fda-roadmap-nav-btn:disabled {
  opacity: 0.32;
  cursor: not-allowed;
  box-shadow: none;
}

.fda-roadmap-nav-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2.25;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
  .fda-roadmap-section {
    padding: var(--spacing-xl) 0;
  }

  .fda-mailbox {
    width: 380px;
    right: -20px;
    transform: translateY(-38%);
  }

  .fda-roadmap-scroll-wrap {
    padding-right: 360px;
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 270px), transparent calc(100% - 200px));
    mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 270px), transparent calc(100% - 200px));
  }
}

@media (max-width: 767.98px) {
  .fda-mailbox {
    display: none;
  }

  .fda-roadmap-scroll-container {
    overflow: visible;
  }

  .fda-roadmap-scroll-wrap {
    overflow-x: auto;
    padding: 0;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .fda-roadmap-scroll-wrap::-webkit-scrollbar {
    display: none;
  }

  .fda-roadmap-card {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .fda-roadmap-card:hover {
    transform: none;
    box-shadow: none;
  }

  .fda-roadmap-card-desc {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }

  .fda-roadmap-mobile-controls {
    display: flex;
  }

  .fda-roadmap-nav-buttons {
    width: 100%;
  }

  .fda-roadmap-nav-btn {
    width: 48px;
    height: 48px;
  }
}

@media (max-width: 575.98px) {
  .fda-roadmap-card {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    padding: 24px 20px;
  }

  .fda-roadmap-card-title {
    font-size: var(--fs-sm);
  }

  .fda-roadmap-card-desc {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
  }
}