/* ============================================
   Token Icon Display - Dedicated CSS
   Controls sizing and positioning of coin icons
   in the DEX token selection buttons
   ============================================ */

/* Token row: provides positioning context for the icon overlay */
.token-row {
  position: relative;
  overflow: visible !important;
}

/* Don't clip coin bottoms against the input well */
.token-input {
  overflow: visible !important;
}

/* Token Icon Container - wraps ONLY the icon (not the button) */
.token-icon-container {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Nudge upward slightly so icon is visually centered in the field */
  transform: translate(-50%, -87%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 77px;
  height: 77px;
  overflow: visible; /* was hidden — clipped the bottom of circular logos */
  pointer-events: none; /* Prevent icon container from blocking clicks */
  flex-shrink: 0;
}

/* Token Icon Styling - Base (affects only the image) */
.token-icon {
  width: auto !important;
  height: 52px !important;
  max-width: 77px !important;
  border-radius: 50%;
  object-fit: contain;
  display: block;
}

/* FROM Section - Token Icon (optional fine-tuning) */
.token-input:first-of-type .token-icon,
#fromTokenIcon {
  width: auto !important;
  height: 52px !important;
  max-width: 77px !important;
}

/* TO Section - Token Icon (optional fine-tuning) */
.token-input:last-of-type .token-icon,
#toTokenIcon {
  width: auto !important;
  height: 52px !important;
  max-width: 77px !important;
}

/* ================= PER-TOKEN SIZE TUNING ================= */

/* XRP icon - 10% increase (63px -> 69px) */
.token-icon[src*="xrp-coin-logo"],
#fromTokenIcon[src*="xrp-coin-logo"],
#toTokenIcon[src*="xrp-coin-logo"] {
  width: auto !important;
  height: 71px !important;
  max-width: 77px !important;
  object-fit: contain;
}

/* RLUSD icon - 5% reduction (68px -> 65px) */
.token-icon[src*="rlusd-coin-logo"],
#fromTokenIcon[src*="rlusd-coin-logo"],
#toTokenIcon[src*="rlusd-coin-logo"] {
  width: auto !important;
  height: 65px !important;
  max-width: 77px !important;
  object-fit: contain;
}

/* KEN icon - 10% reduction (85px -> 76px) */
.token-icon[src*="ken-coin-logo"],
#fromTokenIcon[src*="ken-coin-logo"],
#toTokenIcon[src*="ken-coin-logo"] {
  width: auto !important;
  height: 76px !important;
  max-width: 77px !important;
  object-fit: contain;
}

/* AGENTIC — same slot as peers (mid of RLUSD/XRP/KEN); never drives cage width */
.token-icon[src*="agentic-token-logo"],
#fromTokenIcon[src*="agentic-token-logo"],
#toTokenIcon[src*="agentic-token-logo"] {
  width: 71px !important;
  height: 71px !important;
  max-width: 77px !important;
  object-fit: contain;
}

/* Keep token picker width stable across RLUSD / XRP / KEN / AGENTIC */
.token-select {
  min-width: 7.75rem !important;
  box-sizing: border-box !important;
  justify-content: space-between !important;
  flex-shrink: 0 !important;
}

/* Long AGENTIC rates must wrap inside the cage, not stretch it */
.swap-info .info-row {
  gap: 0.5rem !important;
}

.swap-info .info-row span:last-child {
  text-align: right !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  max-width: 68% !important;
}

/* Token select button layout is untouched here on purpose */