/* ============================================================
   ANYTOKENSWAP — PREMIUM ENHANCEMENT LAYER v3
   Strategy: target semantic elements + inject CSS custom props
   Backend (PancakeSwap router) is 100% untouched
   ============================================================ */

/* ── FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=JetBrains+Mono:wght@300;400;500&display=swap');

/* ── ROOT TOKENS ── */
:root {
  --ats-bg:        #06060e;
  --ats-bg2:       #0c0c1d;
  --ats-bg3:       #111128;
  --ats-surface:   #13132a;
  --ats-border:    rgba(120,120,255,0.10);
  --ats-border-hi: rgba(99,201,255,0.35);
  --ats-gold:      #F0B90B;
  --ats-gold2:     #FFD60A;
  --ats-cyan:      #63C9FF;
  --ats-purple:    #8B5CF6;
  --ats-green:     #22c55e;
  --ats-pink:      #f43f5e;
  --ats-txt:       #f1f1ff;
  --ats-txt2:      #9898bb;
  --ats-muted:     #44445a;
  --ats-radius:    20px;
  --ats-glow-gold: 0 0 30px rgba(240,185,11,0.15);
  --ats-glow-cyan: 0 0 30px rgba(99,201,255,0.12);
  --ats-font:      'Syne', sans-serif;
  --ats-mono:      'JetBrains Mono', monospace;
}

/* ── GLOBAL RESET LAYER ── */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--ats-bg) !important;
  scroll-behavior: smooth;
}

body {
  font-family: var(--ats-font) !important;
  background: var(--ats-bg) !important;
  color: var(--ats-txt) !important;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── ANIMATED BACKGROUND ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 15% 0%,   rgba(240,185,11,0.06) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 85% 5%,   rgba(99,201,255,0.07) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 50% 100%, rgba(139,92,246,0.06) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: bgPulse 12s ease-in-out infinite alternate;
}

@keyframes bgPulse {
  0%   { opacity: 0.7; }
  100% { opacity: 1; }
}

/* subtle dot grid */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

#root { position: relative; z-index: 1; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--ats-bg2); }
::-webkit-scrollbar-thumb { background: var(--ats-border-hi); border-radius: 99px; }

/* ── NAV / HEADER ── */
nav, header, [class*="Nav"], [class*="nav"], [class*="Header"], [class*="header"] {
  font-family: var(--ats-font) !important;
}

/* PancakeSwap nav bar — target by position */
body > div > div:first-child,
#root > div > div:first-child,
[class*="StyledNav"],
[class*="navbar"] {
  background: rgba(6,6,14,0.85) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 1px solid var(--ats-border) !important;
  box-shadow: 0 1px 40px rgba(0,0,0,0.4) !important;
}

/* Logo */
[class*="logo"] img,
[class*="Logo"] img,
nav img { filter: drop-shadow(0 0 8px rgba(240,185,11,0.5)) !important; }

/* ── ALL CARDS / PANELS ── */
[class*="Card"],
[class*="card"],
[class*="Panel"],
[class*="panel"],
[class*="Box"],
.clDYJB, .eanqiH, .eyYZsP,
.cLIOJY, .cmLQNq, .fXzYXZ, .gMfdlj,
.gSlOYD, .JiDun, .jqakCw, .QxBxB {
  background: var(--ats-surface) !important;
  border: 1px solid var(--ats-border) !important;
  border-radius: var(--ats-radius) !important;
  box-shadow: var(--ats-glow-cyan) !important;
  transition: border-color 0.3s, box-shadow 0.3s !important;
  font-family: var(--ats-font) !important;
}

[class*="Card"]:hover,
[class*="card"]:hover {
  border-color: var(--ats-border-hi) !important;
  box-shadow: 0 0 50px rgba(99,201,255,0.18), 0 0 100px rgba(99,201,255,0.06) !important;
}

/* Top glowing line on swap card */
[class*="SwapCard"]::before,
[class*="swapCard"]::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ats-gold), transparent);
  border-radius: 99px;
}

/* ── BACKGROUNDS ── */
.clDYJB, .eanqiH, .eyYZsP,
[class*="PageWrapper"],
[class*="pageWrapper"],
[class*="AppBody"],
[class*="Body"] {
  background: transparent !important;
}

/* sidebar panels */
.eZDSdg, .idfqYu,
.eZvTTG, .jJHHJq, .jTSdtO {
  background: var(--ats-surface) !important;
  border-radius: var(--ats-radius) !important;
}

/* inner boxes */
.csbjYz, .LuBXn,
[class*="InputPanel"],
[class*="inputPanel"] {
  background: var(--ats-bg2) !important;
  border: 1px solid var(--ats-border) !important;
  border-radius: 16px !important;
  transition: border-color 0.2s !important;
}
[class*="InputPanel"]:focus-within,
[class*="inputPanel"]:focus-within {
  border-color: var(--ats-border-hi) !important;
  box-shadow: 0 0 0 2px rgba(99,201,255,0.08) !important;
}

/* ── BUTTONS ── */
button {
  font-family: var(--ats-font) !important;
  letter-spacing: 0.3px !important;
  transition: all 0.25s !important;
}

/* Primary swap button — gold gradient */
.BNcmP:not(:disabled):not(.pancake-button--disabled),
.fpqQbo:not(:disabled):not(.pancake-button--disabled),
[class*="Button"]:not([disabled]) {
  background: linear-gradient(135deg, #F0B90B 0%, #FFD60A 50%, #F0B90B 100%) !important;
  background-size: 200% 100% !important;
  color: #06060e !important;
  border: none !important;
  border-radius: 18px !important;
  font-weight: 700 !important;
  font-family: var(--ats-font) !important;
  box-shadow: 0 4px 24px rgba(240,185,11,0.35), inset 0 1px 0 rgba(255,255,255,0.2) !important;
  text-shadow: none !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.BNcmP:not(:disabled):not(.pancake-button--disabled)::after,
.fpqQbo:not(:disabled):not(.pancake-button--disabled)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 60%);
  pointer-events: none;
}

.BNcmP:not(:disabled):not(.pancake-button--disabled):hover,
.fpqQbo:not(:disabled):not(.pancake-button--disabled):hover {
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: 0 8px 40px rgba(240,185,11,0.55), inset 0 1px 0 rgba(255,255,255,0.2) !important;
  background-position: 100% 0 !important;
}

.BNcmP:not(:disabled):not(.pancake-button--disabled):active,
.fpqQbo:not(:disabled):not(.pancake-button--disabled):active {
  transform: translateY(0) scale(0.99) !important;
}

/* Disabled buttons */
.BNcmP.pancake-button--disabled,
.BNcmP:disabled,
.fpqQbo.pancake-button--disabled,
.fpqQbo:disabled {
  background: rgba(99,99,120,0.2) !important;
  border: 1px solid rgba(99,99,120,0.25) !important;
  color: var(--ats-muted) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

/* Ghost / secondary buttons */
[class*="ButtonMenu"],
[class*="buttonMenu"] {
  background: var(--ats-bg2) !important;
  border: 1px solid var(--ats-border) !important;
  border-radius: 14px !important;
  padding: 4px !important;
}

[class*="ButtonMenuItem"],
[class*="buttonMenuItem"] {
  border-radius: 12px !important;
  font-family: var(--ats-font) !important;
  font-weight: 600 !important;
  transition: all 0.2s !important;
}

/* ── INPUTS ── */
input, textarea, select {
  font-family: var(--ats-mono) !important;
  background: transparent !important;
  color: var(--ats-txt) !important;
  border-color: var(--ats-border) !important;
  outline: none !important;
}

input::placeholder { color: var(--ats-muted) !important; }
input:focus { border-color: var(--ats-border-hi) !important; }

/* Token amount inputs — make them bigger and monospaced */
[class*="NumericalInput"],
[class*="numericalInput"],
input[inputmode="decimal"] {
  font-family: var(--ats-mono) !important;
  font-size: 28px !important;
  font-weight: 500 !important;
  color: var(--ats-txt) !important;
  background: transparent !important;
  letter-spacing: -0.5px !important;
}

/* ── TYPOGRAPHY ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ats-font) !important;
  letter-spacing: -0.3px !important;
}

p, span, div, label, a {
  font-family: var(--ats-font) !important;
}

/* Price / USD values */
[class*="price"],
[class*="Price"],
[class*="amount"],
[class*="Amount"],
[class*="balance"],
[class*="Balance"] {
  font-family: var(--ats-mono) !important;
}

/* ── TOKEN SELECTOR BUTTON ── */
[class*="CurrencySelect"],
[class*="currencySelect"],
[class*="TokenSelect"],
[class*="tokenSelect"],
[class*="open-currency-select-button"],
button[aria-label*="token"] {
  background: rgba(240,185,11,0.08) !important;
  border: 1px solid rgba(240,185,11,0.2) !important;
  border-radius: 14px !important;
  color: var(--ats-txt) !important;
  font-family: var(--ats-font) !important;
  font-weight: 700 !important;
  transition: all 0.2s !important;
  padding: 8px 14px !important;
}

[class*="CurrencySelect"]:hover,
[class*="currencySelect"]:hover {
  background: rgba(240,185,11,0.15) !important;
  border-color: rgba(240,185,11,0.4) !important;
  transform: scale(1.02) !important;
}

/* ── SWAP ARROW BUTTON ── */
[class*="ArrowWrapper"],
[class*="arrowWrapper"],
button[aria-label*="swap direction"],
button[aria-label*="Swap"],
[class*="switchButton"] {
  background: var(--ats-bg3) !important;
  border: 2px solid var(--ats-border) !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
  cursor: pointer !important;
}

[class*="ArrowWrapper"]:hover,
[class*="arrowWrapper"]:hover,
button[aria-label*="swap direction"]:hover {
  border-color: var(--ats-gold) !important;
  transform: rotate(180deg) scale(1.12) !important;
  box-shadow: 0 4px 24px rgba(240,185,11,0.3) !important;
  background: rgba(240,185,11,0.08) !important;
}

/* Arrow SVG */
[class*="ArrowWrapper"] svg,
[class*="arrowWrapper"] svg {
  color: var(--ats-gold) !important;
  fill: var(--ats-gold) !important;
  stroke: var(--ats-gold) !important;
}

/* ── MODALS / POPUPS ── */
[class*="Modal"],
[class*="modal"],
[class*="Dialog"],
[class*="dialog"],
[class*="Popup"],
[role="dialog"],
[role="modal"] {
  background: var(--ats-surface) !important;
  border: 1px solid var(--ats-border-hi) !important;
  border-radius: 28px !important;
  box-shadow:
    0 0 0 1px rgba(99,201,255,0.1),
    0 40px 120px rgba(0,0,0,0.7),
    0 0 80px rgba(99,201,255,0.08) !important;
  font-family: var(--ats-font) !important;
  animation: modalSlideIn 0.3s cubic-bezier(0.34,1.56,0.64,1) !important;
}

@keyframes modalSlideIn {
  from { transform: translateY(24px) scale(0.96); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* Modal overlay */
[class*="Overlay"],
[class*="overlay"],
[class*="Backdrop"],
[class*="backdrop"] {
  background: rgba(0,0,0,0.75) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* ── DROPDOWN / SEARCH LISTS ── */
[class*="TokenSearch"],
[class*="tokenSearch"],
[class*="SearchInput"],
[class*="searchInput"] {
  background: var(--ats-bg2) !important;
  border: 1px solid var(--ats-border-hi) !important;
  border-radius: 14px !important;
  color: var(--ats-txt) !important;
  font-family: var(--ats-font) !important;
  padding: 12px 16px !important;
}

/* Token list items */
[class*="MenuItem"],
[class*="menuItem"],
[class*="TokenRow"],
[class*="tokenRow"] {
  border-radius: 14px !important;
  transition: background 0.15s !important;
  font-family: var(--ats-font) !important;
}

[class*="MenuItem"]:hover,
[class*="TokenRow"]:hover {
  background: rgba(240,185,11,0.06) !important;
}

/* ── TAGS / BADGES ── */
[class*="Tag"],
[class*="tag"],
[class*="Badge"],
[class*="badge"],
[class*="Pill"],
[class*="pill"] {
  border-radius: 99px !important;
  font-family: var(--ats-font) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
}

/* ── DIVIDERS ── */
.crlswz, .dptYkd {
  border-top: 1px solid var(--ats-border) !important;
}

.JiDun, .QxBxB {
  border-bottom: 1px solid var(--ats-border) !important;
}

/* ── LINKS ── */
a {
  color: var(--ats-cyan) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}
a:hover { color: var(--ats-gold) !important; }

/* ── TOGGLE SWITCH ── */
[class*="Toggle"],
[class*="toggle"] {
  transition: all 0.2s !important;
}

/* ── TOOLTIPS ── */
[class*="Tooltip"],
[class*="tooltip"] {
  background: var(--ats-bg3) !important;
  border: 1px solid var(--ats-border-hi) !important;
  border-radius: 12px !important;
  font-family: var(--ats-font) !important;
  font-size: 13px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}

/* ── PRICE IMPACT / WARNINGS ── */
[class*="ErrorText"],
[class*="errorText"],
[class*="Warning"],
[class*="warning"] {
  color: var(--ats-pink) !important;
  font-family: var(--ats-font) !important;
}

[class*="Success"],
[class*="success"] {
  color: var(--ats-green) !important;
}

/* ── LOADING / SPINNER ── */
[class*="Spinner"],
[class*="spinner"],
[class*="Loader"],
[class*="loader"] {
  color: var(--ats-gold) !important;
  border-color: var(--ats-gold) !important;
}

/* ── TAB BAR ── */
[role="tablist"],
[class*="TabMenu"],
[class*="tabMenu"] {
  background: var(--ats-bg2) !important;
  border-radius: 16px !important;
  border: 1px solid var(--ats-border) !important;
  padding: 4px !important;
  gap: 4px !important;
  display: flex !important;
}

[role="tab"],
[class*="Tab"],
[class*="tab"] {
  border-radius: 12px !important;
  font-family: var(--ats-font) !important;
  font-weight: 600 !important;
  transition: all 0.2s !important;
  flex: 1 !important;
}

[role="tab"][aria-selected="true"],
[class*="Tab"][class*="active"],
[class*="Tab"][class*="Active"] {
  background: var(--ats-surface) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4) !important;
  color: var(--ats-gold) !important;
}

/* ── CHARTS / CANDLES ── */
[class*="Chart"],
[class*="chart"] {
  border-radius: 16px !important;
}

/* ── SIDEBAR NAV ITEMS ── */
.eZDSdg, .idfqYu,
[class*="NavItem"],
[class*="navItem"],
[class*="MenuLink"],
[class*="menuLink"] {
  border-radius: 14px !important;
  transition: all 0.2s !important;
}

.eZvTTG:hover, .idfqYu:hover, .jJHHJq:hover, .jTSdtO:hover {
  background: rgba(240,185,11,0.08) !important;
}

/* ── MOBILE ICON ── */
.mobile-icon { width: 132px !important; }

/* ── PAGE TITLE GRADIENT ── */
[class*="Heading"],
[class*="heading"],
h2[class], h3[class] {
  font-family: var(--ats-font) !important;
  font-weight: 800 !important;
}

/* ── NUMBER ANIMATIONS ── */
[class*="Balance"],
[class*="Amount"],
[class*="Price"] {
  transition: opacity 0.2s !important;
}

/* ── SETTINGS GEAR ── */
[class*="SettingsButton"],
[class*="settingsButton"] {
  color: var(--ats-txt2) !important;
  transition: all 0.3s !important;
}

[class*="SettingsButton"]:hover {
  color: var(--ats-gold) !important;
  transform: rotate(45deg) !important;
}

/* ── INFO ROW (slippage etc) ── */
[class*="InfoRow"],
[class*="infoRow"],
[class*="TradePrice"],
[class*="tradePrice"] {
  font-family: var(--ats-mono) !important;
  font-size: 13px !important;
  color: var(--ats-txt2) !important;
}

/* ── ICON COLORS ── */
svg path[fill="#F0B90B"],
svg path[fill="#FFAF00"],
svg path[fill="#FFC700"] {
  fill: var(--ats-gold) !important;
}

/* ── ENTRY ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

#root > div {
  animation: fadeUp 0.5s ease both;
}

/* ── GLOW PULSE on connect wallet button area ── */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 4px 24px rgba(240,185,11,0.35); }
  50%       { box-shadow: 0 4px 48px rgba(240,185,11,0.65); }
}

/* ── RESPONSIVE TWEAKS ── */
@media (max-width: 576px) {
  [class*="NumericalInput"] input,
  input[inputmode="decimal"] {
    font-size: 22px !important;
  }
}

/* ── CUSTOM SELECTION ── */
::selection {
  background: rgba(240,185,11,0.3) !important;
  color: var(--ats-txt) !important;
}