/*
 * FlowEntry Tour - Shepherd.js theme overrides
 * Brand: dark + gold ("Luxury Terminal")
 *
 * Loaded after shepherd.css so these rules win on specificity / order.
 * Scope: every selector starts with .shepherd-element.fe-tour to avoid
 * leaking into anything else if Shepherd is ever used elsewhere.
 */

/* ============================================================
   FE-TOUR: Mobile fallback button styling
   The bottom-center "first-visit pill" toast was removed in favour of
   auto-opening the tour's welcome card directly. .fe-tour-pill-btn is
   kept here because the mobile fallback card still uses it for its
   "Got it" button.
   ============================================================ */
.fe-tour-pill-btn{
  background:#c9a227;border:none;border-radius:999px;
  color:#08090d;font-family:'Outfit',sans-serif;font-weight:700;font-size:12px;
  padding:6px 14px;cursor:pointer;transition:background 0.15s,transform 0.1s;
}
.fe-tour-pill-btn:hover{background:#e8c84a}
.fe-tour-pill-btn:active{transform:translateY(1px)}

/* ============================================================
   FE-TOUR: Confirm-redirect modal (shown if user isn't on BTC)
   ============================================================ */
.fe-tour-modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,0.6);
  z-index:9100;display:none;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);
  opacity:0;transition:opacity 0.25s;
}
.fe-tour-modal-backdrop.show{display:flex;opacity:1}
.fe-tour-modal{
  background:#0e1015;border:1px solid #1a1d28;border-top:2px solid #c9a227;
  border-radius:14px;padding:24px 24px 20px;max-width:380px;width:90%;
  font-family:'Outfit',sans-serif;color:#f0f0f2;
  box-shadow:0 30px 80px rgba(0,0,0,0.7);
}
.fe-tour-modal h3{font-size:16px;font-weight:700;color:#c9a227;margin-bottom:10px}
.fe-tour-modal p{font-size:13px;line-height:1.55;color:#c4c4cc;margin-bottom:16px}
.fe-tour-modal-actions{display:flex;gap:8px;justify-content:flex-end}
.fe-tour-modal-btn{
  font-family:'Outfit',sans-serif;font-weight:700;font-size:12px;
  padding:8px 16px;border-radius:8px;cursor:pointer;border:1px solid transparent;
  transition:all 0.15s;
}
.fe-tour-modal-btn.primary{background:#c9a227;color:#08090d;border-color:#c9a227}
.fe-tour-modal-btn.primary:hover{background:#e8c84a;border-color:#e8c84a}
.fe-tour-modal-btn.secondary{background:transparent;color:#c4c4cc;border-color:#1a1d28}
.fe-tour-modal-btn.secondary:hover{color:#f0f0f2;border-color:#252938}

/* ============================================================
   FE-TOUR: Mobile fallback card
   Shown on viewports < 1024px instead of running the tour.
   ============================================================ */
.fe-tour-mobile-card{
  position:fixed;left:12px;right:12px;bottom:18px;z-index:9000;
  background:#0e1015;border:1px solid #c9a227;border-radius:14px;
  padding:16px 18px 14px;font-family:'Outfit',sans-serif;color:#f0f0f2;
  box-shadow:0 20px 60px rgba(0,0,0,0.6);
  display:none;
}
.fe-tour-mobile-card.show{display:block}
.fe-tour-mobile-card h3{font-size:14px;font-weight:700;color:#c9a227;margin-bottom:8px}
.fe-tour-mobile-card p{font-size:12px;line-height:1.55;color:#c4c4cc;margin-bottom:12px}
.fe-tour-mobile-card .fe-tour-pill-btn{display:block;margin-left:auto}

/* ============================================================
   FE-TOUR: Soft dim - chart stays visible, page chrome dims
   Shepherd's built-in modal masks the entire page; we override
   by making the dark portion 40% (not 80%) and explicitly never
   covering the chart container.
   ============================================================ */
.shepherd-modal-overlay-container{
  fill:rgba(0,0,0,0.40);
  transition:opacity 0.25s;
  z-index:8000;
}
/* Keep the chart pane fully readable while the tour runs.
   We don't fight Shepherd's SVG mask - instead we punch a hole
   by NOT using attachTo's modal-cutout for chart steps and
   relying on a lower overlay opacity overall. The chart steps
   that DO use attachTo on #chart-container get a normal cutout. */

/* ============================================================
   FE-TOUR: Tooltip (the actual step balloon)
   Override Shepherd defaults to match FlowEntry's dark+gold look.
   ============================================================ */
.shepherd-element.fe-tour{
  background:#0e1015;
  border:1px solid #1a1d28;
  border-top:2px solid #c9a227;
  border-radius:12px;
  box-shadow:0 24px 60px rgba(0,0,0,0.7),0 0 0 4px rgba(201,162,39,0.05);
  font-family:'Outfit',-apple-system,sans-serif;
  color:#f0f0f2;
  max-width:340px;
  /* Above Shepherd's default overlay (9997) and tooltip (9999), and above
     anything else on the page. Use !important because Shepherd's CSS is
     appended to <head> AFTER tour.css and will otherwise override us. */
  z-index:10500 !important;
}
.shepherd-element.fe-tour .shepherd-arrow:before{
  background:#0e1015;
  border:1px solid #1a1d28;
}
.shepherd-element.fe-tour[data-popper-placement^="bottom"] .shepherd-arrow:before{
  border-top-color:#c9a227;
}

.shepherd-element.fe-tour .shepherd-header{
  background:transparent;
  padding:14px 18px 4px;
  border-radius:12px 12px 0 0;
}
.shepherd-element.fe-tour .shepherd-title{
  font-family:'Outfit',sans-serif;
  font-size:13px;
  font-weight:800;
  color:#c9a227;
  letter-spacing:0.4px;
  text-transform:uppercase;
}

.shepherd-element.fe-tour .shepherd-text{
  padding:8px 18px 14px;
  font-size:13px;
  line-height:1.6;
  color:#e6e6ea;
}
.shepherd-element.fe-tour .shepherd-text b{color:#e8c84a;font-weight:700}
.shepherd-element.fe-tour .shepherd-text em{color:#c4c4cc;font-style:normal}

/* Inline checklist used in the "setup three" step */
.shepherd-element.fe-tour .fe-tour-checklist{
  list-style:none;
  margin:6px 0 4px;
  padding:0;
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
}
.shepherd-element.fe-tour .fe-tour-checklist li{
  padding:6px 0;
  display:flex;
  align-items:center;
  gap:8px;
  color:#8b8b94;
  transition:color 0.2s;
}
.shepherd-element.fe-tour .fe-tour-checklist li.done{color:#22c55e}
.shepherd-element.fe-tour .fe-tour-checklist li::before{
  content:"○";
  display:inline-block;
  width:14px;
  font-weight:700;
}
.shepherd-element.fe-tour .fe-tour-checklist li.done::before{
  content:"✓";
  color:#22c55e;
}

.shepherd-element.fe-tour .shepherd-footer{
  padding:6px 18px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.shepherd-element.fe-tour .shepherd-button{
  font-family:'Outfit',sans-serif;
  font-weight:700;
  font-size:12px;
  border-radius:8px;
  padding:7px 14px;
  border:1px solid transparent;
  cursor:pointer;
  transition:all 0.15s;
  margin:0;
}
.shepherd-element.fe-tour .shepherd-button.fe-primary{
  background:#c9a227;
  color:#08090d;
  border-color:#c9a227;
}
.shepherd-element.fe-tour .shepherd-button.fe-primary:hover{
  background:#e8c84a;
  border-color:#e8c84a;
}
.shepherd-element.fe-tour .shepherd-button.fe-primary:disabled{
  background:#3a3320;
  color:#6a5a20;
  border-color:#3a3320;
  cursor:not-allowed;
}
.shepherd-element.fe-tour .shepherd-button.fe-skip{
  background:transparent;
  color:#8b8b94;
  border:none;
  padding:7px 8px;
}
.shepherd-element.fe-tour .shepherd-button.fe-skip:hover{
  color:#f0f0f2;
}

/* Step counter "3 / 13" left of the buttons */
.shepherd-element.fe-tour .fe-tour-counter{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  color:#71717a;
  margin-right:auto;
}

/* ============================================================
   FE-TOUR: Welcome + Closing centered cards
   Shepherd uses its own positioning - for centered/no-target
   steps we set attachTo: undefined and Shepherd centers it.
   We add a slightly larger feel for these "chapter" steps.
   ============================================================ */
.shepherd-element.fe-tour.fe-tour-center{
  max-width:420px;
}
.shepherd-element.fe-tour.fe-tour-center .shepherd-title{
  font-size:14px;
}
.shepherd-element.fe-tour.fe-tour-center .shepherd-text{
  font-size:14px;
  padding-top:10px;
}

/* Special closing-card flair - no border-top stripe, full gold border instead */
.shepherd-element.fe-tour.fe-tour-closing{
  border:1px solid #c9a227;
  background:linear-gradient(180deg,#12141b 0%,#0e1015 100%);
}
.shepherd-element.fe-tour.fe-tour-closing .shepherd-text{
  text-align:center;
  font-size:15px;
  line-height:1.6;
  color:#f0f0f2;
}
.shepherd-element.fe-tour.fe-tour-closing .shepherd-footer{
  justify-content:center;
}

/* ============================================================
   FE-TOUR: "Tour" relaunch button in the top nav-tabs row.
   Reuses .nav-tab class but adds an icon and gold pulse.
   ============================================================ */
.nav-tab.fe-tour-relaunch{
  position:relative;
  color:#c9a227;
  border-color:rgba(201,162,39,0.25);
}
.nav-tab.fe-tour-relaunch:hover{
  color:#e8c84a;
  background:rgba(201,162,39,0.08);
  border-color:rgba(201,162,39,0.4);
}
.nav-tab.fe-tour-relaunch::before{
  content:"";
  display:inline-block;
  width:6px;height:6px;border-radius:50%;
  background:#c9a227;
  margin-right:6px;
  vertical-align:middle;
  box-shadow:0 0 6px rgba(201,162,39,0.7);
  animation:fe-tour-pulse 2.4s infinite;
}
@keyframes fe-tour-pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:0.45;transform:scale(0.85)}
}

/* ============================================================
   FE-TOUR: Highlighted target - gold ring around the active
   element so the user knows exactly what to click.
   ============================================================ */
.shepherd-target.fe-tour-target{
  outline:2px solid #c9a227 !important;
  outline-offset:3px;
  border-radius:8px;
  box-shadow:0 0 0 4px rgba(201,162,39,0.18);
  transition:outline-color 0.2s,box-shadow 0.2s;
}

/* Hide tour relaunch button on small screens - mobile gets its own card */
@media(max-width:1023px){
  .nav-tab.fe-tour-relaunch{display:none}
}

/* ============================================================
   FE-TOUR: Attention overlay (rings + arrows over the chart)
   A single full-viewport SVG layer sits above the chart but below
   the Shepherd tooltip. Rings are absolutely-positioned divs (not
   SVG circles) so we can use box-shadow for the soft glow.
   pointer-events:none on the layer + each child so the user can
   still click chart, scroll, etc.
   ============================================================ */
.fe-tour-overlay{
  position:fixed;
  inset:0;
  z-index:10300;            /* above chart (default), below shepherd tooltip (10500) */
  pointer-events:none;
  overflow:hidden;
}
.fe-tour-overlay svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:visible;
}

/* Attention ring/spotlight - gold outline drawn over a bar/candle/button.
   Two flavors: .active = pulses + draws-on; .static = just sits there.
   FlowEntry gold-light (#e8c84a) - brighter than the chart's gold bars
   so the ring reads as separate from the bar it's highlighting. */
.fe-ring{
  position:absolute;
  border-radius:50%;
  border:3px solid #e8c84a;
  box-sizing:border-box;
  pointer-events:none;
  transform:translate(-50%,-50%);  /* center on its left/top coords */
  opacity:0;
}
.fe-ring.active{
  animation:fe-ring-pulse 1.4s ease-in-out infinite,
            fe-ring-in 0.35s ease-out forwards;
  box-shadow:0 0 0 6px rgba(232,200,74,0.18),
             0 0 22px rgba(232,200,74,0.55);
}
.fe-ring.static{
  opacity:0.85;
  border-color:rgba(232,200,74,0.85);
  box-shadow:0 0 0 4px rgba(232,200,74,0.12);
}
@keyframes fe-ring-in{
  from{opacity:0;transform:translate(-50%,-50%) scale(0.6)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@keyframes fe-ring-pulse{
  0%,100%{transform:translate(-50%,-50%) scale(1);    box-shadow:0 0 0 6px rgba(232,200,74,0.18),0 0 22px rgba(232,200,74,0.55)}
  50%    {transform:translate(-50%,-50%) scale(1.06); box-shadow:0 0 0 14px rgba(232,200,74,0.05),0 0 36px rgba(232,200,74,0.85)}
}

/* Full-height vertical date-range highlight (steps 4-12).
   Spans the entire chart frame (price + every indicator pane) and covers
   ±3 days around the step's narrative date. Replaces the per-bar/per-candle
   ring + spotlight oval used previously, which suffered from Y-axis drift.
   .active = current step (gold-light, pulsing); .static = prior step (dim). */
.fe-date-rect{
  position:absolute;
  pointer-events:none;
  box-sizing:border-box;
  border-left:2px solid #c9a227;
  border-right:2px solid #c9a227;
  background:rgba(232,200,74,0.08);
  border-radius:2px;
  opacity:0;
  animation:fe-rect-in 0.35s ease-out forwards;
}
.fe-date-rect.active{
  background:rgba(232,200,74,0.13);
  border-color:#e8c84a;
  box-shadow:0 0 22px rgba(232,200,74,0.45),
             inset 0 0 28px rgba(232,200,74,0.18);
  animation:fe-rect-in 0.35s ease-out forwards,
            fe-rect-pulse 1.8s ease-in-out 0.35s infinite;
}
.fe-date-rect.static{
  background:rgba(232,200,74,0.05);
  border-color:rgba(232,200,74,0.55);
}
@keyframes fe-rect-in{
  from{opacity:0}
  to{opacity:1}
}
@keyframes fe-rect-pulse{
  0%,100%{
    background:rgba(232,200,74,0.13);
    box-shadow:0 0 22px rgba(232,200,74,0.45),inset 0 0 28px rgba(232,200,74,0.18);
  }
  50%{
    background:rgba(232,200,74,0.20);
    box-shadow:0 0 36px rgba(232,200,74,0.65),inset 0 0 36px rgba(232,200,74,0.26);
  }
}

/* Trend arrows - green for price-up, red for price-down.
   Drawn as SVG paths inside the overlay's <svg>. Animated draw-on. */
.fe-arrow{
  fill:none;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.55));
  stroke-dasharray:1000;
  stroke-dashoffset:1000;
  animation:fe-arrow-draw 0.9s ease-out 0.3s forwards;
}
.fe-arrow.up{stroke:#22c55e}
.fe-arrow.down{stroke:#ef4444}
@keyframes fe-arrow-draw{
  to{stroke-dashoffset:0}
}

/* ============================================================
   FE-TOUR: Fixed-right card position (steps 4-12)
   Pin the Shepherd tooltip to the center-right of the viewport
   so it covers the Trades sidebar and leaves the chart unobstructed.
   We override Shepherd's popper-driven positioning with !important.
   ============================================================ */
.shepherd-element.fe-tour.fe-tour-fixed-right{
  position:fixed !important;
  top:50% !important;
  right:18px !important;
  left:auto !important;
  transform:translateY(-50%) !important;
  max-width:340px;
  width:340px;
}
/* Hide the pointer arrow when pinned-right - it would point at nothing. */
.shepherd-element.fe-tour.fe-tour-fixed-right .shepherd-arrow{display:none}