/* Overlay voor tradecrypto + mint-nft.
 *
 * EIGENDOMSREGEL:
 * - Mag alleen design-aspect raken, niet HTML/JS van de dev
 * - Geen redeclaratie van selectors uit /crypto/tradecrypto-v2.css (wanneer die ooit deployt wint hij)
 * - Alle selectors gebruiken :where() voor specificiteit 0,0,0 zodat dev's CSS altijd wint
 *
 * Doelen:
 * - Dark navy theme (matcht /crypto-tools/ pagina's)
 * - Goede typografie + spacing op /page/tradecrypto en /page/mint-nft
 * - Werkt zelfs als /crypto/tradecrypto-v2.css ontbreekt (huidige toestand: 404)
 */

:where(.tradecrypto-v2) {
  --tcx-bg: #0b1424;
  --tcx-bg-2: #0f1c30;
  --tcx-card: #13203a;
  --tcx-line: #243a5e;
  --tcx-text: #e7eefb;
  --tcx-text-soft: #9fb3d1;
  --tcx-text-dim: #6c83a6;
  --tcx-accent: #4f8cff;
  --tcx-accent-2: #3b6fd6;
  --tcx-green: #2ec28b;
  --tcx-red: #ff5d6c;

  color: var(--tcx-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
}

:where(.tradecrypto-v2 .tc-shell) {
  background: var(--tcx-bg);
  border-radius: 16px;
  padding: 22px;
  border: 1px solid var(--tcx-line);
}

:where(.tradecrypto-v2 .tc-main-panel) { display: block; }

:where(.tradecrypto-v2 .tc-main-grid) {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 22px;
}
@media (max-width: 980px) {
  :where(.tradecrypto-v2 .tc-main-grid) { grid-template-columns: 1fr; }
}

:where(.tradecrypto-v2 .tc-chart-panel),
:where(.tradecrypto-v2 .tc-swap-panel) {
  background: var(--tcx-card);
  border: 1px solid var(--tcx-line);
  border-radius: 14px;
  padding: 18px;
}

/* Chart header */
:where(.tradecrypto-v2 .tc-chart-header) {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
:where(.tradecrypto-v2 .tc-panel-title) {
  margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -.01em;
}
:where(.tradecrypto-v2 .tc-panel-subtitle) {
  margin: 4px 0 0; font-size: 13.5px; color: var(--tcx-text-soft);
}
:where(.tradecrypto-v2 .tc-chart-markets) {
  display: flex; gap: 6px; flex-wrap: wrap;
}
:where(.tradecrypto-v2 .tc-market-btn) {
  background: var(--tcx-bg-2); color: var(--tcx-text-soft);
  border: 1px solid var(--tcx-line); border-radius: 999px;
  padding: 6px 12px; font-size: 13px; cursor: pointer; transition: all .15s;
  font-family: inherit;
}
:where(.tradecrypto-v2 .tc-market-btn:hover) { color: var(--tcx-text); border-color: var(--tcx-accent); }
:where(.tradecrypto-v2 .tc-market-btn.is-active) {
  background: rgba(79,140,255,.18); border-color: var(--tcx-accent); color: #cfe0ff;
}

:where(.tradecrypto-v2 .tc-chart-frame) {
  min-height: 360px; background: var(--tcx-bg-2);
  border-radius: 10px; overflow: hidden; margin-bottom: 14px;
}

/* Contract box (onder de chart) */
:where(.tradecrypto-v2 .tc-contract-box) {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  background: var(--tcx-bg-2); padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--tcx-line);
}
:where(.tradecrypto-v2 .tc-contract-box__main) { flex: 1; min-width: 0; }
:where(.tradecrypto-v2 .tc-contract-box__label) {
  display: block; font-size: 11.5px; color: var(--tcx-text-dim);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px;
}
:where(.tradecrypto-v2 .tc-contract-box__address) {
  font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px; color: var(--tcx-text); word-break: break-all;
}
:where(.tradecrypto-v2 .tc-contract-box__meta) {
  display: block; margin-top: 3px; font-size: 12px; color: var(--tcx-text-soft);
}
:where(.tradecrypto-v2 .tc-contract-box__actions) {
  display: flex; gap: 8px; flex-wrap: wrap;
}
:where(.tradecrypto-v2 .tc-contract-btn) {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 550;
  text-decoration: none; cursor: pointer; border: none; font-family: inherit;
}
:where(.tradecrypto-v2 .tc-contract-btn--ghost) {
  background: var(--tcx-card); color: var(--tcx-text); border: 1px solid var(--tcx-line);
}
:where(.tradecrypto-v2 .tc-contract-btn--primary) {
  background: linear-gradient(135deg, var(--tcx-accent), var(--tcx-accent-2)); color: #fff;
}

/* Swap panel — token search */
:where(.tradecrypto-v2 .tc-token-search) { margin-bottom: 14px; }
:where(.tradecrypto-v2 .tc-token-search__label) {
  display: block; font-size: 12px; color: var(--tcx-text-soft);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px;
}
:where(.tradecrypto-v2 .tc-token-search__wrap) { position: relative; }
:where(.tradecrypto-v2 #tc-token-search) {
  width: 100%; padding: 11px 13px; font-size: 14.5px;
  background: var(--tcx-bg-2); color: var(--tcx-text);
  border: 1px solid var(--tcx-line); border-radius: 9px; outline: none;
  font-family: inherit;
}
:where(.tradecrypto-v2 #tc-token-search:focus) {
  border-color: var(--tcx-accent); box-shadow: 0 0 0 3px rgba(79,140,255,.18);
}
:where(.tradecrypto-v2 .tc-token-results) {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 50;
  background: var(--tcx-card); border: 1px solid var(--tcx-line); border-radius: 9px;
  max-height: 280px; overflow-y: auto; box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
:where(.tradecrypto-v2 .tc-token-search__hint) {
  font-size: 12px; color: var(--tcx-text-dim); margin: 6px 0 0;
}

/* Swap tabs */
:where(.tradecrypto-v2 .tc-swap-tabs) {
  display: flex; gap: 4px; background: var(--tcx-bg-2);
  padding: 4px; border-radius: 10px; margin-bottom: 14px;
}
:where(.tradecrypto-v2 .tc-tab) {
  flex: 1; padding: 9px 12px; font-size: 13.5px; font-weight: 550; font-family: inherit;
  background: transparent; color: var(--tcx-text-soft); border: none; cursor: pointer;
  border-radius: 7px; transition: all .12s;
}
:where(.tradecrypto-v2 .tc-tab:hover) { color: var(--tcx-text); }
:where(.tradecrypto-v2 .tc-tab.is-active) {
  background: linear-gradient(135deg, var(--tcx-accent), var(--tcx-accent-2));
  color: #fff;
}

/* Mode copy block (tab description) */
:where(.tradecrypto-v2 .tc-mode-copy) { margin-bottom: 14px; }
:where(.tradecrypto-v2 .tc-mode-copy h3) {
  margin: 0 0 4px; font-size: 14.5px; font-weight: 650; color: var(--tcx-text);
}
:where(.tradecrypto-v2 .tc-mode-copy p) {
  margin: 0; font-size: 13.5px; color: var(--tcx-text-soft);
}
:where(.tradecrypto-v2 .tc-mode-meta) {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;
}
:where(.tradecrypto-v2 .tc-meta-chip) {
  font-size: 11.5px; padding: 4px 10px; border-radius: 999px;
  background: var(--tcx-bg-2); color: var(--tcx-text-soft); border: 1px solid var(--tcx-line);
}
:where(.tradecrypto-v2 .tc-disclaimer) {
  font-size: 12.5px; padding: 10px 12px; border-radius: 9px; margin-top: 10px;
  background: rgba(255,182,72,.08); color: #ffce85; border: 1px solid rgba(255,182,72,.25);
}

/* Swapbox — wraps de dev's eigen #swapWidget */
:where(.tradecrypto-v2 .tc-swapbox) {
  border-radius: 12px; overflow: hidden;
}

/* Algemene knoppen die nog niet styling hebben */
:where(.tradecrypto-v2 button:not([class])) {
  background: var(--tcx-card); color: var(--tcx-text);
  border: 1px solid var(--tcx-line); border-radius: 8px;
  padding: 8px 12px; cursor: pointer; font-family: inherit;
}

/* ============================
 * mint-nft polish
 * Gebruikt al Tailwind direct (bg-gray-900, bg-gray-800).
 * Hier maken we de gray-tonen iets warmer/koeler en harmoniseren met crypto-tools-thema.
 * ============================ */

/* UNA voegt een body-class per pagina toe (bv. bx-page-mint-nft). Scopen op die selector. */
:where(.bx-page-mint-nft) {
  --mn-bg: #0b1424;
  --mn-card: #13203a;
  --mn-line: #243a5e;
}

/* Map gray-900 → onze diepe navy. Gebruik attribute-selector zodat bestaande
 * inline Tailwind klasse niet weggepoetst hoeft te worden. */
:where(.bx-page-mint-nft .bg-gray-900) { background-color: var(--mn-bg) !important; }
:where(.bx-page-mint-nft .bg-gray-800) { background-color: var(--mn-card) !important; }
:where(.bx-page-mint-nft .bg-gray-700) { background-color: #182a49 !important; }
:where(.bx-page-mint-nft .border-gray-700),
:where(.bx-page-mint-nft .border-gray-600) { border-color: var(--mn-line) !important; }

/* Knoppen warmer accent matchen */
:where(.bx-page-mint-nft .bg-indigo-600) {
  background: linear-gradient(135deg, #4f8cff, #3b6fd6) !important;
}
:where(.bx-page-mint-nft .bg-indigo-600:hover) { filter: brightness(1.1); }