/* swap.css */

/* Always hide the real selects (we’re using JS-built divs instead) */
#fromCurrency,
#toCurrency {
  display: none;
}

/* Swap Panel Styling */
.swap-container {
  max-width: 500px;
  margin: 80px auto;
  padding: 30px 25px;
  background: #1d1d1d;
  border-radius: 14px;
  box-shadow: 0 0 30px rgba(55, 123, 255, 0.35);
  border: 2px solid #377BFF;
  text-align: center;
  position: relative;
  z-index: 1;
}

.swap-container h1 {
  color: #377BFF;
  font-size: 28px;
  margin-bottom: 20px;
}

/* Mode Toggle Buttons */
.swap-toggle {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  gap: 10px;
}
.swap-toggle button {
  flex: 1;
  padding: 10px 14px;
  font-weight: bold;
  border: none;
  background: #333;
  color: #fff;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.3s;
}
.swap-toggle button.active {
  background-color: #377BFF;
  color: #111;
}

/* From/To Boxes & Inputs */
.swap-input {
  width: 100%;
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 6px;
  border: none;
  background-color: #292929;
  color: #fff;
  font-size: 15px;
}

/* ─── Token-picker buttons styling ─── */
.swap-select {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  width: 100%;
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 6px;
  background-color: #292929;
  color: #fff;
  font-size: 15px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.swap-select-img {
  width: 24px;
  height: 24px;
}
.swap-select:focus,
.swap-input:focus {
  outline: none;
  border: 2px solid #377BFF;
}

/* Swap Button */
.swap-button {
  width: 100%;
  padding: 12px;
  background-color: #377BFF;
  border: none;
  color: #111;
  font-weight: bold;
  font-size: 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.swap-button:hover {
  background-color: #377BFF;
}

/* Footer Text */
.powered {
  margin-top: 20px;
  font-size: 13px;
  color: #999;
}

/* Modal Styling */
.modal-content {
  max-width: 400px !important;
  width: 90% !important;
  border: 2px solid #377BFF !important;
  box-shadow: 0 0 20px rgba(55, 123, 255, 0.5) !important;
  position: relative;
}
.modal-content h3 {
  color: #377BFF !important;
}
/* keep your #modalSearch, #popularTokens, etc. as-is */

/* Close Button */
.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 24px;
  line-height: 32px;
  text-align: center;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
}
.modal-close:hover {
  background: rgba(55, 123, 255, 0.2);
  color: #377BFF;
}

/* Hide number-input spinners */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

/* Remove any default dropdown arrow on selects */
select,
.swap-select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

/* Live-quote badge on the right of the Amount field */
.quote-wrapper { position: relative; }
.quote-display {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  background: #377BFF;
  color: #111;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  pointer-events: none;
}

/* Swap-select label & z-index */
.swap-select-label {
  margin-left: auto;
  color: #888;
  font-size: 13px;
  white-space: nowrap;
}
.swap-select {
  position: relative;
  z-index: 2;
}

/* ── Swap-page accent adjustments ── */
:root {
  --ct-accent: #377BFF;
  --ct-accent-rgb: 55, 123, 255;
}

/* 1) Revert page background to solid black (your background‐logo.png still shows) */
body {
  background-color: #000 !important;
} /* original from style.css :contentReference[oaicite:0]{index=0} */

/* 2) Restore nav bar styling to original black bar + dark border */
.top-nav-inline {
  background: #000 !important;
  border-bottom: 1px solid #333 !important;
} /* matches original style.css :contentReference[oaicite:1]{index=1} */

/* 3) Nav links only—turn their text blue */
.top-nav-links li a {
  color: var(--ct-accent) !important;
}
.top-nav-links li a:hover {
  color: #fff !important;
}

/* 4) Keep your news ticker lightly tinted & Live badge blue */
.news-ticker {
  background-color: rgba(var(--ct-accent-rgb), 0.1) !important;
  border-bottom-color: var(--ct-accent) !important;
}
.news-item,
.news-item a {
  color: var(--ct-accent) !important;
}
.live-badge {
  background-color: var(--ct-accent) !important;
  color: #111 !important;
}

/* ── Swap-page: make global stats numbers blue ── */
:root {
  --ct-accent: #377BFF;      /* your widget blue */
}

/* override the orange values from style.css :contentReference[oaicite:0]{index=0} */
.global-stats .gs-value {
  color: var(--ct-accent) !important;
}

/* ── Swap page fine-tuning ── */
:root {
  /* make sure your RGB var is still set */
  --ct-accent-rgb: 55, 123, 255;
}

/* 1) Tone down the CoinsTrending watermark */
#background-logo {
  opacity: 0.10 !important;
}

/* 2) Subtle hover “pop” on the Exchange button */
.swap-button {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.swap-button:hover {
  transform: scale(1.02);
  box-shadow: 0 0 8px rgba(var(--ct-accent-rgb), 0.6);
}

/* 1) Disable the original watermark */
body {
  background-image: none !important;
}

/* 2) Add back a faint watermark via a pseudo-element */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: url('background-logo.png') no-repeat center center;
  background-size: 500px;
  opacity: 0.19;
  pointer-events: none;
  z-index: 0;
}