/* =============================================================
   Marketing Portal — TRADING TERMINAL theme
   Distinct from any other transition in the wider product family.
   Forex/Bloomberg-style: ticker tape + candlestick chart + log lines.
   ============================================================= */

/* ─────────── Overlay shell ─────────── */
/* Note: aggressive blur + mask-image + conic-gradient cause severe rendering issues
   on iOS Safari (residual blur after the overlay is removed). Keeping this simple. */
#portalFx {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  font-family: 'JetBrains Mono', 'SF Mono', 'Courier New', monospace;
  color: #d8e1ff;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 184, 0, 0.06) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(0, 255, 135, 0.04) 0%, transparent 55%),
    #04060d;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: auto;
  /* Force its own compositing layer so it doesn't leak rendering artifacts onto the
     page beneath when removed (iOS Safari quirk). */
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  isolation: isolate;
  will-change: opacity;
}
#portalFx.active { opacity: 1; }
#portalFx.fading { opacity: 0; }

/* Background grid — pure CSS dot pattern, no mask, no filter */
.tfx-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 255, 135, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 135, 0.035) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  opacity: 0.6;
}

/* Scanline overlay (kept — light cost) */
.tfx-scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0px,
    rgba(255, 255, 255, 0) 3px,
    rgba(255, 255, 255, 0.012) 3px,
    rgba(255, 255, 255, 0.012) 4px
  );
  pointer-events: none;
}

/* ─────────── Ticker tape ─────────── */
.tfx-ticker {
  position: relative;
  height: 38px;
  background: rgba(0, 0, 0, 0.55);
  border-bottom: 1px solid rgba(0, 255, 135, 0.18);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.tfx-ticker::before,
.tfx-ticker::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; width: 80px;
  pointer-events: none;
  z-index: 2;
}
.tfx-ticker::before { left: 0; background: linear-gradient(90deg, #04060d, transparent); }
.tfx-ticker::after  { right: 0; background: linear-gradient(270deg, #04060d, transparent); }
.tfx-ticker-track {
  display: flex;
  white-space: nowrap;
  font-size: 13px;
  letter-spacing: 0.5px;
  animation: tfx-ticker-scroll 32s linear infinite;
  will-change: transform;
}
@keyframes tfx-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.tfx-ticker-item { padding: 0 22px; display: inline-flex; align-items: center; gap: 8px; }
.tfx-ticker-pair { color: #d8e1ff; font-weight: 600; }
.tfx-ticker-up   { color: #00ff87; }
.tfx-ticker-down { color: #ff3b5c; }

/* ─────────── Status bar (top) ─────────── */
.tfx-statusbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 22px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.2));
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 11px;
  letter-spacing: 1.4px;
  color: #6a7895;
  text-transform: uppercase;
}
.tfx-led {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #ffb800;
  box-shadow: 0 0 12px rgba(255, 184, 0, 0.7);
  animation: tfx-led-blink 1.1s ease-in-out infinite;
}
#portalFx.portal-fx-enter .tfx-led-final { background: #00ff87; box-shadow: 0 0 16px rgba(0, 255, 135, 0.8); }
#portalFx.portal-fx-exit  .tfx-led-final { background: #ff3b5c; box-shadow: 0 0 16px rgba(255, 59, 92, 0.8); }
.tfx-statusbar .right { margin-inline-start: auto; display: flex; gap: 14px; align-items: center; }
@keyframes tfx-led-blink { 50% { opacity: 0.45; } }

/* ─────────── Main stage (chart + console) ─────────── */
.tfx-stage {
  flex: 1;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0;
  min-height: 0;
}
@media (max-width: 720px) {
  .tfx-stage { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
}

/* Left: title + animated candlestick chart */
.tfx-chart-pane {
  position: relative;
  border-inline-end: 1px solid rgba(255, 255, 255, 0.05);
  padding: 28px 28px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}
.tfx-brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px;
  letter-spacing: 4px;
  color: #00ff87;
  text-transform: uppercase;
}
.tfx-brand .logo {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #ffb800, #ff8a00);
  display: flex; align-items: center; justify-content: center;
  color: #04060d; font-weight: 800; font-size: 16px;
  box-shadow: 0 0 18px rgba(255, 184, 0, 0.45);
}
.tfx-title {
  font-family: 'Tajawal', 'Inter', system-ui, sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: #fff;
  text-shadow: 0 0 24px rgba(255, 184, 0, 0.18);
}
.tfx-sub {
  font-size: 12px;
  letter-spacing: 0.5px;
  color: #6a7895;
}
@media (max-width: 720px) {
  .tfx-title { font-size: 20px; }
  .tfx-chart-pane { padding: 18px 18px 10px; }
}

/* Candlestick chart container */
.tfx-chart {
  flex: 1;
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 10px 0;
  border-radius: 8px;
}
.tfx-candle {
  position: relative;
  flex: 1;
  min-width: 6px;
  max-width: 16px;
  height: 0;
  background: #00ff87;
  border-radius: 1px;
  align-self: flex-end;
  box-shadow: 0 0 6px rgba(0, 255, 135, 0.35);
  opacity: 0;
  animation-fill-mode: forwards !important;
}
.tfx-candle.bear {
  background: #ff3b5c;
  box-shadow: 0 0 6px rgba(255, 59, 92, 0.35);
}
.tfx-candle .wick {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: 1.2px;
  background: inherit;
  top: -8px; bottom: -8px;
  opacity: 0.7;
}
#portalFx.portal-fx-enter .tfx-candle { animation: tfx-candle-in 3.8s ease-out forwards; }
#portalFx.portal-fx-exit  .tfx-candle { animation: tfx-candle-out 3.8s ease-in forwards; }
@keyframes tfx-candle-in {
  0%   { height: 0%; opacity: 0; }
  20%  { opacity: 1; }
  100% { height: var(--h, 60%); opacity: 0.95; }
}
@keyframes tfx-candle-out {
  0%   { height: var(--h, 60%); opacity: 0.95; }
  100% { height: 0%; opacity: 0; }
}

/* Right: terminal console */
.tfx-console-pane {
  display: flex;
  flex-direction: column;
  padding: 22px 22px 14px;
  gap: 8px;
  background: rgba(0, 0, 0, 0.35);
  min-height: 0;
}
.tfx-console-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 10.5px;
  letter-spacing: 1.6px;
  color: #6a7895;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.tfx-console-head::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #ffb800;
  box-shadow: 0 0 8px rgba(255, 184, 0, 0.6);
  animation: tfx-led-blink 1.1s ease-in-out infinite;
}
.tfx-log {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  line-height: 1.7;
  color: #aabbd6;
  overflow: hidden;
  min-height: 0;
}
.tfx-log-line {
  display: flex;
  gap: 8px;
  align-items: baseline;
  opacity: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tfx-log-line .prompt { color: #00ff87; flex-shrink: 0; }
.tfx-log-line .label  { color: #d8e1ff; }
.tfx-log-line .ok     { color: #00ff87; margin-inline-start: auto; flex-shrink: 0; }
.tfx-log-line .ok::before { content: "[ "; color: #6a7895; }
.tfx-log-line .ok::after  { content: " ]"; color: #6a7895; }

#portalFx.portal-fx-enter .tfx-log-line { animation: tfx-line-in 0.5s ease-out forwards; }
#portalFx.portal-fx-enter .tfx-log-line:nth-child(1) { animation-delay: 0.4s; }
#portalFx.portal-fx-enter .tfx-log-line:nth-child(2) { animation-delay: 1.0s; }
#portalFx.portal-fx-enter .tfx-log-line:nth-child(3) { animation-delay: 1.7s; }
#portalFx.portal-fx-enter .tfx-log-line:nth-child(4) { animation-delay: 2.4s; }
#portalFx.portal-fx-enter .tfx-log-line:nth-child(5) { animation-delay: 3.1s; }

#portalFx.portal-fx-exit .tfx-log-line { animation: tfx-line-out 0.4s ease-in forwards; }
#portalFx.portal-fx-exit .tfx-log-line:nth-child(1) { animation-delay: 0.1s; }
#portalFx.portal-fx-exit .tfx-log-line:nth-child(2) { animation-delay: 0.6s; }
#portalFx.portal-fx-exit .tfx-log-line:nth-child(3) { animation-delay: 1.1s; }
#portalFx.portal-fx-exit .tfx-log-line:nth-child(4) { animation-delay: 1.6s; }

@keyframes tfx-line-in {
  0%   { opacity: 0; transform: translateX(-6px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes tfx-line-out {
  0%   { opacity: 1; }
  100% { opacity: 0; transform: translateX(6px); }
}

/* ─────────── Footer: progress bar ─────────── */
.tfx-foot {
  padding: 14px 22px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  background: rgba(0, 0, 0, 0.4);
  display: flex; flex-direction: column; gap: 8px;
}
.tfx-foot-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10.5px;
  letter-spacing: 1.4px;
  color: #6a7895;
  text-transform: uppercase;
}
.tfx-progress {
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.tfx-progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #00ff87 0%, #ffb800 100%);
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(255, 184, 0, 0.35);
}
#portalFx.portal-fx-enter .tfx-progress-fill { animation: tfx-prog-fill 3.6s linear 0.3s forwards; }
#portalFx.portal-fx-exit  .tfx-progress-fill { animation: tfx-prog-empty 3.6s linear forwards; }
@keyframes tfx-prog-fill  { 0%{ width: 0; } 100%{ width: 100%; } }
@keyframes tfx-prog-empty { 0%{ width: 100%; } 100%{ width: 0; } }

/* ─────────── In-portal sidebar hide + Return button ─────────── */
body.fb-in-portal .sidebar { display: none !important; }
body.fb-in-portal .menu-toggle,
body.fb-in-portal .mobile-toggle { display: none !important; }
/* Reclaim the 260px grid column the sidebar used to occupy. Without this the
   .main was squeezed to the left half of the viewport (sidebar hidden but its
   grid track still reserved), and centered content inside .aff-hero appeared
   shifted ~130px left of the viewport center.
   .main also has grid-column: 2 in dashboard.css, so collapse the first column
   to 0 instead of removing it — keeps .main's column assignment valid. */
body.fb-in-portal .app {
  grid-template-columns: 0 1fr !important;
}
body.fb-in-portal .main {
  margin: 0 !important;
  padding: 0 !important;
}
body.fb-in-portal .topbar { display: none !important; }
body.fb-in-portal .content { padding-top: 64px !important; }

/* iOS Safari quirk: any element with backdrop-filter on the page can keep a stale
   blur layer after a heavy compositor pass. Strip backdrop-filter while inside the
   portal so the affiliate page renders crisp on iPhone. */
body.fb-in-portal,
body.fb-in-portal * {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* In-portal top bar: return button + brand + lang switch */
#portalTopBar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  background: linear-gradient(180deg, rgba(8, 12, 22, 0.92), rgba(8, 12, 22, 0.78));
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  font-family: 'Tajawal', 'Inter', system-ui, sans-serif;
}
body.fb-in-portal #portalTopBar { display: flex; }
body.fb-in-portal .content { padding-top: 76px !important; }

#portalTopBar .ptb-back {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffb800, #ff8a00);
  color: #04060d;
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.2px;
  border: none;
  cursor: pointer;
  box-shadow:
    0 4px 14px rgba(255, 184, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.40);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
#portalTopBar .ptb-back:hover { transform: translateY(-1px); filter: brightness(1.05); }
#portalTopBar .ptb-back:active { transform: translateY(0); }
#portalTopBar .ptb-back .arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
  font-size: 13px;
  font-weight: 900;
}
[dir="rtl"] #portalTopBar .ptb-back .arrow { transform: scaleX(-1); }

#portalTopBar .ptb-brand {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: rgba(216, 225, 255, 0.55);
  font-weight: 700;
  flex: 1;
  text-align: center;
}

#portalTopBar .ptb-lang {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 2px;
  flex-shrink: 0;
}
#portalTopBar .ptb-lang span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: rgba(216, 225, 255, 0.65);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
#portalTopBar .ptb-lang span.active {
  background: linear-gradient(135deg, #ffb800, #ff8a00);
  color: #04060d;
}

@media (max-width: 480px) {
  #portalTopBar { padding: 10px 12px; }
  #portalTopBar .ptb-brand { font-size: 9.5px; letter-spacing: 1.8px; }
  #portalTopBar .ptb-back { padding: 7px 12px; font-size: 11.5px; }
  #portalTopBar .ptb-back .lbl { display: none; }
  body.fb-in-portal .content { padding-top: 68px !important; }
}

/* ─────────── Skip / no-text-translation safety ─────────── */
#portalFx, #portalFx * { font-feature-settings: "tnum" 1; }