/* ============================================================
   Swapoon — thème custom (override Bootstrap 5.3 dark)
   Palette : Indigo #6C5CE7 · Menthe #00D9A3 · Dark #0E0E1A
   À placer dans public/css/swapoon.css
   ============================================================ */

:root {
  /* Marque */
  --swp-indigo:        #6C5CE7;
  --swp-indigo-600:    #5A4BD4;
  --swp-indigo-700:    #4A3CB8;
  --swp-mint:          #00D9A3;
  --swp-mint-600:      #00BF8F;

  /* Fonds */
  --swp-bg:            #0E0E1A;
  --swp-surface:       #16162A;
  --swp-surface-2:     #1E1E38;
  --swp-border:        #2A2A45;
  --swp-border-strong: #3A3A5C;

  /* Texte */
  --swp-text:          #E8E8F0;
  --swp-text-muted:    #9494B0;
  --swp-text-dim:      #6B6B85;

  /* Override variables Bootstrap */
  --bs-body-bg:        var(--swp-bg);
  --bs-body-color:     var(--swp-text);
  --bs-primary:        var(--swp-indigo);
  --bs-primary-rgb:    108, 92, 231;
  --bs-border-color:   var(--swp-border);
  --bs-border-radius:  .75rem;
  --bs-link-color:     var(--swp-indigo);
  --bs-link-hover-color: #8B7CF0;
}

/* ---------- Base ---------- */
body {
  background:
    radial-gradient(900px 500px at 15% -5%, rgba(108, 92, 231, .12), transparent 60%),
    radial-gradient(800px 500px at 90% 0%, rgba(0, 217, 163, .08), transparent 55%),
    radial-gradient(700px 600px at 85% 40%, rgba(108, 92, 231, .07), transparent 60%),
    radial-gradient(600px 500px at 10% 55%, rgba(0, 217, 163, .05), transparent 60%),
    radial-gradient(900px 700px at 50% 110%, rgba(108, 92, 231, .06), transparent 60%),
    var(--swp-bg);
  background-attachment: fixed;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--swp-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Subtle grid overlay for texture (very faint) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(108, 92, 231, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108, 92, 231, .035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 40%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 40%, transparent 75%);
}

/* Keep all real content above the decorative layers */
.navbar, main, .swp-footer { position: relative; z-index: 1; }

/* Floating blurred orbs for depth (behind everything, animated slowly) */
.swp-orbs {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.swp-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .5;
  will-change: transform;
}
.swp-orb-1 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(108, 92, 231, .35), transparent 70%);
  top: 8%; left: -6%;
  animation: swp-float-1 22s ease-in-out infinite;
}
.swp-orb-2 {
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(0, 217, 163, .22), transparent 70%);
  top: 20%; right: -5%;
  animation: swp-float-2 26s ease-in-out infinite;
}
.swp-orb-3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(108, 92, 231, .20), transparent 70%);
  top: 60%; left: 55%;
  animation: swp-float-3 30s ease-in-out infinite;
}

@keyframes swp-float-1 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(40px, 30px); }
}
@keyframes swp-float-2 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-35px, 40px); }
}
@keyframes swp-float-3 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(25px, -35px); }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .swp-orb { animation: none; }
}

main { flex: 1 0 auto; }

::selection { background: rgba(108, 92, 231, .35); }

a { text-decoration: none; }

/* ---------- Logo ---------- */
.swp-logo {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -.5px;
  color: var(--swp-text);
}
.swp-logo:hover { color: var(--swp-text); }
.swp-logo .o-indigo { color: var(--swp-indigo); }
.swp-logo .o-mint   { color: var(--swp-mint); }

/* ---------- Navbar ---------- */
.navbar {
  background: rgba(14, 14, 26, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--swp-border);
}
.navbar .nav-link {
  color: var(--swp-text-muted);
  font-size: .93rem;
  font-weight: 500;
  transition: color .15s;
}
.navbar .nav-link:hover,
.navbar .nav-link.active { color: var(--swp-text); }

/* ---------- Cards / surfaces ---------- */
.swp-card {
  background: var(--swp-surface);
  border: 1px solid var(--swp-border);
  border-radius: 1.1rem;
}
.swp-card-glow {
  position: relative;
}
.swp-card-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(108, 92, 231, .5), rgba(0, 217, 163, .3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* ---------- Form controls ---------- */
.form-control, .form-select {
  background: var(--swp-surface-2);
  border: 1px solid var(--swp-border);
  color: var(--swp-text);
  border-radius: .7rem;
  padding: .7rem .9rem;
}
.form-control:focus, .form-select:focus {
  background: var(--swp-surface-2);
  border-color: var(--swp-indigo);
  color: var(--swp-text);
  box-shadow: 0 0 0 .2rem rgba(108, 92, 231, .22);
}
.form-control::placeholder { color: var(--swp-text-dim); }
.form-select option { background: var(--swp-surface); color: var(--swp-text); }
.form-label { color: var(--swp-text-muted); font-size: .85rem; font-weight: 500; margin-bottom: .4rem; }

/* Champ montant surdimensionné */
.swp-amount-input {
  font-size: 1.9rem;
  font-weight: 600;
  padding: .3rem 0;
  background: transparent;
  border: none;
  color: var(--swp-text);
  width: 100%;
}
.swp-amount-input:focus { outline: none; background: transparent; box-shadow: none; color: var(--swp-text); }
.swp-amount-input::placeholder { color: var(--swp-text-dim); }

/* Bloc token (from / to) */
.swp-token-box {
  background: var(--swp-surface-2);
  border: 1px solid var(--swp-border);
  border-radius: 1rem;
  padding: 1rem 1.1rem;
  transition: border-color .15s;
}
.swp-token-box:focus-within { border-color: var(--swp-indigo); }
.swp-token-select {
  background: var(--swp-surface);
  border: 1px solid var(--swp-border-strong);
  color: var(--swp-text);
  font-weight: 600;
  border-radius: 2rem;
  padding: .5rem 1rem;
  min-width: 130px;
  cursor: pointer;
}
.swp-token-select:focus {
  border-color: var(--swp-indigo);
  box-shadow: 0 0 0 .2rem rgba(108, 92, 231, .22);
  outline: none;
}

/* Bouton switch from/to */
.swp-switch-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--swp-surface);
  border: 3px solid var(--swp-bg);
  color: var(--swp-indigo);
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform .25s, color .15s;
  z-index: 2;
}
.swp-switch-btn:hover { color: var(--swp-mint); transform: rotate(180deg); }

/* ---------- Boutons ---------- */
.btn-swp-primary {
  background: linear-gradient(135deg, var(--swp-indigo), var(--swp-indigo-600));
  border: none;
  color: #fff;
  font-weight: 600;
  border-radius: .8rem;
  padding: .85rem 1.5rem;
  transition: filter .15s, transform .1s, box-shadow .15s;
  box-shadow: 0 8px 24px -8px rgba(108, 92, 231, .6);
}
.btn-swp-primary:hover { filter: brightness(1.08); color: #fff; box-shadow: 0 10px 30px -8px rgba(108, 92, 231, .75); }
.btn-swp-primary:active { transform: scale(.985); }
.btn-swp-primary:disabled { opacity: .55; box-shadow: none; }

.btn-swp-mint {
  background: linear-gradient(135deg, var(--swp-mint), var(--swp-mint-600));
  border: none;
  color: #04342C;
  font-weight: 600;
  border-radius: .8rem;
  padding: .85rem 1.5rem;
}
.btn-swp-mint:hover { filter: brightness(1.06); color: #04342C; }

.btn-swp-outline {
  background: transparent;
  border: 1px solid var(--swp-border-strong);
  color: var(--swp-text);
  font-weight: 500;
  border-radius: .8rem;
  padding: .7rem 1.3rem;
}
.btn-swp-outline:hover { border-color: var(--swp-indigo); color: var(--swp-text); background: rgba(108, 92, 231, .08); }

/* ---------- Badges ---------- */
.swp-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; font-weight: 500;
  padding: .3rem .7rem; border-radius: 2rem;
}
.swp-badge-mint   { background: rgba(0, 217, 163, .14); color: #4EE3BF; }
.swp-badge-indigo { background: rgba(108, 92, 231, .16); color: #A99CF5; }
.swp-badge-amber  { background: rgba(239, 159, 39, .15); color: #F0B15A; }
.swp-badge-red    { background: rgba(226, 75, 74, .15);  color: #EE7A79; }
.swp-badge-muted  { background: var(--swp-surface-2);    color: var(--swp-text-muted); }

/* ---------- Divider ---------- */
.swp-hr { border: none; border-top: 1px solid var(--swp-border); margin: 1.25rem 0; }

/* ---------- Rows d'info (récap quote/status) ---------- */
.swp-info-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: .6rem 0;
}
.swp-info-row + .swp-info-row { border-top: 1px solid var(--swp-border); }
.swp-info-label { color: var(--swp-text-muted); font-size: .9rem; }
.swp-info-value { font-weight: 500; font-size: .95rem; text-align: right; }

/* ---------- Adresse / dépôt monospace ---------- */
.swp-mono {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: .88rem;
  word-break: break-all;
}
.swp-copy-box {
  background: var(--swp-surface-2);
  border: 1px dashed var(--swp-border-strong);
  border-radius: .7rem;
  padding: .8rem .9rem;
  display: flex; align-items: center; gap: .6rem;
}

/* ---------- Timeline status ---------- */
.swp-steps { list-style: none; padding: 0; margin: 0; }
.swp-step {
  display: flex; gap: .85rem; align-items: flex-start;
  padding-bottom: 1.4rem; position: relative;
}
.swp-step:not(:last-child)::before {
  content: ""; position: absolute;
  left: 13px; top: 28px; bottom: 0;
  width: 2px; background: var(--swp-border);
}
.swp-step-dot {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--swp-surface-2); border: 2px solid var(--swp-border);
  color: var(--swp-text-dim); font-size: .8rem; z-index: 1;
}
.swp-step.is-done  .swp-step-dot { background: rgba(0,217,163,.15); border-color: var(--swp-mint); color: var(--swp-mint); }
.swp-step.is-active .swp-step-dot { background: rgba(108,92,231,.18); border-color: var(--swp-indigo); color: #A99CF5; animation: swp-pulse 1.6s infinite; }
.swp-step-label { font-weight: 500; font-size: .95rem; }
.swp-step-sub   { color: var(--swp-text-muted); font-size: .83rem; }
.swp-step.is-pending .swp-step-label { color: var(--swp-text-dim); }

@keyframes swp-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(108,92,231,.4); }
  50%     { box-shadow: 0 0 0 6px rgba(108,92,231,0); }
}

/* ---------- QR ---------- */
.swp-qr {
  background: #fff; padding: .8rem; border-radius: .8rem;
  display: inline-block; line-height: 0;
}

/* ---------- Alerts custom ---------- */
.swp-alert {
  border-radius: .8rem; border: 1px solid; padding: .85rem 1rem;
  font-size: .9rem; display: flex; gap: .6rem; align-items: flex-start;
}
.swp-alert-danger  { background: rgba(226,75,74,.10);  border-color: rgba(226,75,74,.35);  color: #EE9B9B; }
.swp-alert-info    { background: rgba(108,92,231,.10); border-color: rgba(108,92,231,.35); color: #B4AAF5; }
.swp-alert-success { background: rgba(0,217,163,.10);  border-color: rgba(0,217,163,.35);  color: #6FE5C6; }
.swp-alert-warning { background: rgba(239,159,39,.10); border-color: rgba(239,159,39,.35); color: #F0BE78; }

/* ---------- Footer ---------- */
.swp-footer {
  border-top: 1px solid var(--swp-border);
  color: var(--swp-text-muted);
  font-size: .88rem;
  padding: 2.5rem 0 2rem;
  margin-top: 4rem;
}
.swp-footer a { color: var(--swp-text-muted); }
.swp-footer a:hover { color: var(--swp-text); }

/* ---------- Utilities ---------- */
.text-muted-swp { color: var(--swp-text-muted) !important; }
.text-dim-swp   { color: var(--swp-text-dim) !important; }
.text-mint      { color: var(--swp-mint) !important; }
.text-indigo    { color: var(--swp-indigo) !important; }
.fw-num { font-variant-numeric: tabular-nums; }

/* ============================================================
   Landing sections (home page below the swap module)
   ============================================================ */

/* Section wrapper + eyebrow badge */
.swp-section { padding: 3rem 0; }
.swp-section-head { text-align: center; margin-bottom: 2rem; }
.swp-eyebrow {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; font-weight: 500;
  padding: .3rem .8rem; border-radius: 2rem; margin-bottom: .75rem;
}
.swp-section-title { font-size: 1.6rem; font-weight: 600; margin: 0; letter-spacing: -.5px; }
.swp-section-sub   { color: var(--swp-text-muted); margin-top: .5rem; margin-bottom: 0; }

/* Stat cards */
.swp-stat {
  background: var(--swp-surface);
  border: 1px solid var(--swp-border);
  border-radius: 1rem;
  padding: 1.2rem 1rem;
  text-align: center;
}
.swp-stat-value { font-size: 1.7rem; font-weight: 600; color: var(--swp-mint); line-height: 1.1; }
.swp-stat-label { font-size: .82rem; color: var(--swp-text-muted); margin-top: .25rem; }

/* Feature / step cards with hover lift */
.swp-feature {
  background: var(--swp-surface);
  border: 1px solid var(--swp-border);
  border-radius: 1rem;
  padding: 1.4rem;
  height: 100%;
  transition: border-color .18s, transform .18s;
}
.swp-feature:hover { border-color: var(--swp-border-strong); transform: translateY(-3px); }
.swp-feature-icon {
  width: 44px; height: 44px; border-radius: .8rem;
  display: grid; place-items: center; font-size: 1.3rem;
  margin-bottom: .9rem;
}
.swp-feature-icon.indigo { background: rgba(108, 92, 231, .16); color: #A99CF5; }
.swp-feature-icon.mint   { background: rgba(0, 217, 163, .15);  color: #4EE3BF; }
.swp-feature-title { font-weight: 600; font-size: 1.02rem; margin-bottom: .35rem; }
.swp-feature-text  { font-size: .9rem; color: var(--swp-text-muted); line-height: 1.55; margin: 0; }

/* Step number badge */
.swp-step-num {
  width: 36px; height: 36px; border-radius: .7rem;
  background: rgba(108, 92, 231, .16); color: #A99CF5;
  display: grid; place-items: center; font-weight: 600;
  margin-bottom: .8rem;
}
.swp-step-num.done { background: rgba(0, 217, 163, .15); color: #4EE3BF; }

/* Coin pills */
.swp-coin {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--swp-surface-2);
  border: 1px solid var(--swp-border);
  border-radius: 2rem;
  padding: .5rem 1rem;
  font-weight: 500; font-size: .9rem;
  transition: border-color .15s, background .15s;
}
.swp-coin:hover { border-color: var(--swp-indigo); background: rgba(108, 92, 231, .08); }
.swp-coin-sym {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--swp-indigo), var(--swp-mint));
  color: #fff; font-size: .7rem; font-weight: 600;
  display: grid; place-items: center;
}

/* FAQ accordion (override Bootstrap) */
.swp-accordion .accordion-item {
  background: var(--swp-surface);
  border: 1px solid var(--swp-border);
  border-radius: 1rem !important;
  margin-bottom: .6rem;
  overflow: hidden;
}
.swp-accordion .accordion-button {
  background: var(--swp-surface);
  color: var(--swp-text);
  font-weight: 500;
  font-size: .98rem;
  padding: 1.1rem 1.25rem;
  box-shadow: none;
}
.swp-accordion .accordion-button:not(.collapsed) { background: var(--swp-surface); color: var(--swp-text); }
.swp-accordion .accordion-button:focus { box-shadow: 0 0 0 .15rem rgba(108, 92, 231, .25); }
.swp-accordion .accordion-button::after {
  filter: invert(50%) sepia(60%) saturate(1200%) hue-rotate(215deg);
  width: 1rem; height: 1rem; background-size: 1rem;
}
.swp-accordion .accordion-body {
  color: var(--swp-text-muted); font-size: .92rem; line-height: 1.6;
  padding: 0 1.25rem 1.15rem;
}

/* Final CTA band */
.swp-cta-band {
  background: linear-gradient(135deg, rgba(108, 92, 231, .14), rgba(0, 217, 163, .10));
  border: 1px solid var(--swp-border);
  border-radius: 1.4rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
}

/* ============================================================
   Custom token dropdown (replaces native <select>)
   ============================================================ */
.swp-token-dd { position: relative; }

/* Trigger button */
.swp-dd-trigger {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--swp-surface);
  border: 1px solid var(--swp-border-strong);
  color: var(--swp-text);
  font-weight: 600; font-size: .95rem;
  border-radius: 2rem;
  padding: .5rem .7rem .5rem .55rem;
  cursor: pointer; white-space: nowrap;
  transition: border-color .15s;
}
.swp-dd-trigger:hover { border-color: var(--swp-indigo); }
.swp-dd-trigger:focus-visible { outline: none; border-color: var(--swp-indigo); box-shadow: 0 0 0 .2rem rgba(108,92,231,.22); }
.swp-dd-trigger .bi-chevron-down { font-size: .8rem; color: var(--swp-text-muted); margin-left: .15rem; transition: transform .18s; }
.swp-token-dd.open .swp-dd-trigger .bi-chevron-down { transform: rotate(180deg); }

/* Coin bubble */
.swp-dd-bubble {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--swp-indigo), var(--swp-mint));
  color: #fff; font-size: .62rem; font-weight: 700;
  display: grid; place-items: center; letter-spacing: -.5px;
}
.swp-dd-trigger .swp-dd-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.swp-dd-trigger .swp-dd-sym { font-weight: 600; font-size: .9rem; }
.swp-dd-trigger .swp-dd-chain { font-size: .68rem; color: var(--swp-text-muted); font-weight: 400; }

/* Panel */
.swp-dd-panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 300px; max-width: min(300px, 80vw);
  background: var(--swp-surface);
  border: 1px solid var(--swp-border-strong);
  border-radius: 1rem;
  box-shadow: 0 20px 50px -12px rgba(0,0,0,.7);
  z-index: 50; overflow: hidden;
  display: none;
}
.swp-token-dd.open .swp-dd-panel { display: block; }

/* Search */
.swp-dd-search-wrap { padding: .7rem; border-bottom: 1px solid var(--swp-border); }
.swp-dd-search {
  width: 100%; background: var(--swp-surface-2);
  border: 1px solid var(--swp-border); color: var(--swp-text);
  border-radius: .6rem; padding: .5rem .75rem; font-size: .9rem;
}
.swp-dd-search:focus { outline: none; border-color: var(--swp-indigo); box-shadow: 0 0 0 .2rem rgba(108,92,231,.18); }
.swp-dd-search::placeholder { color: var(--swp-text-dim); }

/* List */
.swp-dd-list { max-height: 280px; overflow-y: auto; padding: .4rem; }
.swp-dd-list::-webkit-scrollbar { width: 8px; }
.swp-dd-list::-webkit-scrollbar-thumb { background: var(--swp-border-strong); border-radius: 4px; }
.swp-dd-group-label {
  font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px;
  color: var(--swp-text-dim); padding: .6rem .6rem .3rem;
}
.swp-dd-option {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .6rem; border-radius: .6rem; cursor: pointer;
  transition: background .12s;
}
.swp-dd-option:hover { background: var(--swp-surface-2); }
.swp-dd-option.selected { background: rgba(108,92,231,.14); }
.swp-dd-option .swp-dd-bubble { width: 30px; height: 30px; font-size: .66rem; }
.swp-dd-opt-main { display: flex; flex-direction: column; line-height: 1.2; flex: 1; min-width: 0; }
.swp-dd-opt-sym  { font-weight: 600; font-size: .92rem; }
.swp-dd-opt-name { font-size: .78rem; color: var(--swp-text-muted); }
.swp-dd-option .bi-check-lg { color: var(--swp-mint); margin-left: auto; }
.swp-dd-option:not(.selected) .bi-check-lg { display: none; }
.swp-dd-empty { padding: 1.2rem; text-align: center; color: var(--swp-text-dim); font-size: .88rem; }

/* Disabled option (already picked on the other side) */
.swp-dd-option.disabled { opacity: .35; pointer-events: none; }

/* Real coin logos (via <x-coin-icon>) */
.swp-coin-img {
  border-radius: 50%;
  object-fit: contain;
  padding: 2px;
  flex-shrink: 0;
}

/* ============================================================
   Order details tiles (status page)
   ============================================================ */
.swp-detail-tile {
  background: var(--swp-surface-2);
  border: 1px solid var(--swp-border);
  border-radius: .8rem;
  padding: .7rem .85rem;
  height: 100%;
}
.swp-detail-k {
  font-size: .78rem;
  color: var(--swp-text-muted);
  font-weight: 500;
}
.swp-detail-v {
  font-size: 1rem;
  font-weight: 600;
  margin-top: .15rem;
  word-break: break-word;
}

/* Transaction explorer links (status page) */
.swp-tx-link {
  color: var(--swp-text);
  transition: color .15s;
}
.swp-tx-link:hover { color: var(--swp-indigo); }
.swp-tx-ext {
  font-size: .72rem;
  color: var(--swp-text-muted);
  margin-left: .35rem;
  vertical-align: 1px;
}
.swp-tx-link:hover .swp-tx-ext { color: var(--swp-indigo); }

/* ============================================================
   Token dropdown — mobile bottom sheet (≤ 576px)
   Reuses the same markup; only the presentation changes.
   ============================================================ */
@media (max-width: 576px) {

  /* Dark overlay behind the sheet */
  .swp-dd-overlay {
    position: fixed; inset: 0;
    background: rgba(6, 6, 14, .6);
    backdrop-filter: blur(2px);
    z-index: 1040;
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
  }
  body.swp-sheet-open .swp-dd-overlay { opacity: 1; pointer-events: auto; }

  /* Panel becomes a bottom sheet */
  .swp-token-dd.open .swp-dd-panel {
    position: fixed;
    left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; max-width: 100%;
    border-radius: 1.4rem 1.4rem 0 0;
    border: none;
    border-top: 1px solid var(--swp-border-strong);
    box-shadow: 0 -12px 40px rgba(0,0,0,.6);
    z-index: 1050;
    max-height: 82vh;
    display: flex; flex-direction: column;
    animation: swp-sheet-up .26s cubic-bezier(.22,.61,.36,1);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  @keyframes swp-sheet-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  /* Grabber handle at the top of the sheet */
  .swp-dd-panel::before {
    content: "";
    width: 40px; height: 4px; border-radius: 2px;
    background: var(--swp-border-strong);
    margin: .7rem auto .2rem;
    flex-shrink: 0;
  }

  /* Sheet header (title + close) — shown only on mobile */
  .swp-dd-sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: .2rem 1rem .4rem;
    flex-shrink: 0;
  }
  .swp-dd-sheet-title { font-weight: 600; font-size: 1rem; }
  .swp-dd-sheet-close {
    background: var(--swp-surface-2); border: 1px solid var(--swp-border);
    color: var(--swp-text-muted); border-radius: 50%;
    width: 32px; height: 32px; display: grid; place-items: center;
    font-size: 1.1rem; cursor: pointer;
  }

  /* Bigger tap targets + roomier search on mobile */
  .swp-dd-search-wrap { padding: .5rem 1rem 1rem; }
  .swp-dd-search { padding: .8rem 1rem; font-size: 1rem; border-radius: .8rem; }
  .swp-dd-list { max-height: none; flex: 1; padding: .4rem .6rem 1rem; }
  .swp-dd-option { padding: .85rem .7rem; }
  .swp-dd-option .swp-dd-bubble { width: 34px; height: 34px; }
  .swp-dd-opt-sym { font-size: 1rem; }
  .swp-dd-opt-name { font-size: .85rem; }
}

/* Sheet head is desktop-hidden by default (shown only in the media query) */
.swp-dd-sheet-head { display: none; }
@media (max-width: 576px) { .swp-dd-sheet-head { display: flex; } }

/* Prevent background scroll when a sheet is open (all sizes, harmless on desktop) */
body.swp-sheet-open { overflow: hidden; }

/* ============================================================
   Status / monitoring page
   ============================================================ */
.swp-status-hero {
  border-radius: 1.2rem;
  padding: 1.75rem 1.5rem;
  text-align: center;
  border: 1px solid var(--swp-border);
}
.swp-status-hero.is-operational { background: rgba(0,217,163,.10);  border-color: rgba(0,217,163,.35); }
.swp-status-hero.is-degraded    { background: rgba(239,159,39,.10); border-color: rgba(239,159,39,.35); }
.swp-status-hero.is-down        { background: rgba(226,75,74,.10);  border-color: rgba(226,75,74,.35); }

.swp-status-dot {
  width: 12px; height: 12px; border-radius: 50%; display: inline-block;
}
.swp-status-dot.is-operational { background: var(--swp-mint); box-shadow: 0 0 0 4px rgba(0,217,163,.2); }
.swp-status-dot.is-degraded    { background: #F0B15A;        box-shadow: 0 0 0 4px rgba(239,159,39,.2); }
.swp-status-dot.is-down        { background: #EE7A79;        box-shadow: 0 0 0 4px rgba(226,75,74,.2); }
.swp-status-dot.is-unknown     { background: var(--swp-text-dim); }

.swp-status-text.is-operational { color: #4EE3BF; }
.swp-status-text.is-degraded    { color: #F0B15A; }
.swp-status-text.is-down        { color: #EE7A79; }
.swp-status-text.is-unknown     { color: var(--swp-text-muted); }

/* Component row */
.swp-comp {
  background: var(--swp-surface);
  border: 1px solid var(--swp-border);
  border-radius: 1rem;
  padding: 1.1rem 1.25rem;
}

/* Uptime history bars (90 points) */
.swp-uptime-bars {
  display: flex; gap: 2px; align-items: flex-end;
  height: 34px; margin: .75rem 0 .5rem;
}
.swp-uptime-bar {
  flex: 1; min-width: 2px; height: 100%;
  border-radius: 2px;
  background: var(--swp-border);       /* unknown / no data */
}
.swp-uptime-bar.up   { background: var(--swp-mint); }
.swp-uptime-bar.down { background: #EE7A79; }
.swp-uptime-bar:hover { opacity: .75; }

/* Incident item */
.swp-incident {
  border-left: 2px solid var(--swp-border-strong);
  padding: .35rem 0 .35rem 1rem;
}
.swp-incident.sev-down    { border-left-color: #EE7A79; }
.swp-incident.sev-degraded{ border-left-color: #F0B15A; }

/* Affiliate — payout mode toggle active state */
.btn-swp-outline.active-mode {
  border-color: var(--swp-indigo);
  background: rgba(108,92,231,.12);
  color: var(--swp-text);
}

/* ============================================================
   Legal pages (terms / privacy) prose
   ============================================================ */
.swp-legal-body h2 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--swp-text);
  margin: 1.8rem 0 .6rem;
}
.swp-legal-body h2:first-child { margin-top: 0; }
.swp-legal-body p {
  color: var(--swp-text-muted);
  line-height: 1.7;
  margin-bottom: 1rem;
}
.swp-legal-body a { color: var(--swp-indigo); }
.swp-legal .swp-alert { margin-bottom: 1.5rem; }

/* ============================================================
   API documentation page
   ============================================================ */
.swp-api-nav {
  position: sticky; top: 80px;
  font-size: .9rem;
}
.swp-api-nav a {
  display: block; padding: .35rem .6rem;
  color: var(--swp-text-muted); border-radius: .5rem;
  border-left: 2px solid transparent;
}
.swp-api-nav a:hover { color: var(--swp-text); background: var(--swp-surface); }

.swp-endpoint {
  background: var(--swp-surface);
  border: 1px solid var(--swp-border);
  border-radius: 1rem;
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.25rem;
  scroll-margin-top: 90px;
}
.swp-endpoint-head {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin-bottom: .5rem;
}
.swp-method {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem; font-weight: 600;
  padding: .2rem .55rem; border-radius: .4rem;
  letter-spacing: .5px;
}
.swp-method.get  { background: rgba(0,217,163,.15);  color: #4EE3BF; }
.swp-method.post { background: rgba(108,92,231,.18); color: #A99CF5; }
.swp-endpoint-path {
  font-family: 'JetBrains Mono', monospace;
  font-size: .92rem; font-weight: 500; color: var(--swp-text);
}
.swp-auth-tag {
  font-size: .7rem; padding: .15rem .5rem; border-radius: 2rem;
  background: var(--swp-surface-2); color: var(--swp-text-muted);
  border: 1px solid var(--swp-border);
}
.swp-auth-tag.key { color: #F0B15A; border-color: rgba(239,159,39,.35); }

.swp-code {
  background: #0A0A14;
  border: 1px solid var(--swp-border);
  border-radius: .7rem;
  padding: .9rem 1rem;
  overflow-x: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: .82rem;
  line-height: 1.6;
  color: #C8C8E0;
  margin: .6rem 0;
}
.swp-code .tok-key  { color: #A99CF5; }
.swp-code .tok-str  { color: #4EE3BF; }
.swp-code .tok-num  { color: #F0B15A; }
.swp-code .tok-com  { color: var(--swp-text-dim); }

.swp-params-table {
  width: 100%; font-size: .86rem; border-collapse: collapse; margin: .5rem 0;
}
.swp-params-table th {
  text-align: left; color: var(--swp-text-muted); font-weight: 500;
  padding: .4rem .6rem; border-bottom: 1px solid var(--swp-border); font-size: .78rem;
}
.swp-params-table td {
  padding: .5rem .6rem; border-bottom: 1px solid var(--swp-border);
  vertical-align: top;
}
.swp-params-table td:first-child {
  font-family: 'JetBrains Mono', monospace; color: var(--swp-text); white-space: nowrap;
}
.swp-params-table .req { color: #EE7A79; font-size: .72rem; }

/* ============================================================
   Supported coins — larger pills + popular pairs
   ============================================================ */
/* Enlarge coin pills (override earlier .swp-coin) */
.swp-coin {
  padding: .6rem 1.15rem;
  font-size: 1rem;
  gap: .6rem;
}
.swp-coin .swp-coin-img,
.swp-coin .swp-dd-bubble {
  width: 30px !important;
  height: 30px !important;
}

/* Popular pair cards */
.swp-pair {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  background: var(--swp-surface);
  border: 1px solid var(--swp-border);
  border-radius: .9rem;
  padding: .85rem 1rem;
  transition: border-color .15s, transform .15s, background .15s;
  width: 100%;
}
.swp-pair:hover {
  border-color: var(--swp-indigo);
  background: rgba(108,92,231,.06);
  transform: translateY(-2px);
}
.swp-pair-coin {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; font-size: .95rem; color: var(--swp-text);
}
.swp-pair-coin .swp-coin-img,
.swp-pair-coin .swp-dd-bubble {
  width: 26px !important; height: 26px !important;
}
.swp-pair-arrow {
  color: var(--swp-indigo);
  font-size: .85rem;
  flex-shrink: 0;
}
.swp-pair:hover .swp-pair-arrow { color: var(--swp-mint); }

/* ============================================================
   Amount min/max validation (swap form)
   ============================================================ */
.swp-amount-error {
  display: flex; align-items: center; gap: .4rem;
  color: #EE7A79;
  font-size: .82rem;
  margin: .5rem .25rem 0;
}
.swp-token-box:has(.is-invalid-amount) {
  border-color: rgba(226, 75, 74, .5);
}

/* ============================================================
   Pair page — breadcrumb + reverse link
   ============================================================ */
.swp-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .5rem; list-style: none; padding: 0; margin: 0;
  font-size: .85rem;
}
.swp-breadcrumb li { display: flex; align-items: center; gap: .5rem; }
.swp-breadcrumb li:not(:last-child)::after {
  content: "/"; color: var(--swp-text-dim);
}
.swp-breadcrumb a { color: var(--swp-text-muted); }
.swp-breadcrumb a:hover { color: var(--swp-text); }
.swp-breadcrumb li[aria-current] { color: var(--swp-text); font-weight: 500; }

.swp-reverse-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .88rem; color: var(--swp-indigo);
  padding: .4rem .9rem; border-radius: 2rem;
  border: 1px solid var(--swp-border);
  transition: border-color .15s, background .15s;
}
.swp-reverse-link:hover {
  border-color: var(--swp-indigo);
  background: rgba(108,92,231,.08);
  color: var(--swp-indigo);
}

/* Brand logo image (header/footer) — keep aspect ratio, don't squash */
.swp-logo-img {
  height: 30px;
  width: auto;
  display: block;
  object-fit: contain;
}