/**
 * ura-route-cards-v1.css
 * Presentation-only: Public (ivory) + Shielded (orange) route chooser cards.
 * No purple/blue tints. Does not alter route selection logic.
 */

#app .swap-route-selector__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}

@media (max-width: 639px) {
  #app .swap-route-selector__cards {
    grid-template-columns: 1fr;
  }
}

/* Shared base — near-black family */
#app .swap-route-card.swap-route-card--compact,
#app .swap-route-card--compact.swap-route-card--public,
#app .swap-route-card--compact.swap-route-card--shielded {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  min-height: 100% !important;
  height: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 28px !important;
  border: 0 !important;
  border-radius: 20px !important;
  color: #f4f1eb !important;
  background:
    linear-gradient(145deg, #0a0e12 0%, #070a0d 65%, #06080b 100%) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease !important;
}

#app .swap-route-card--compact.swap-route-card--public {
  background:
    radial-gradient(circle at 15% 10%, rgba(244, 241, 235, 0.08), transparent 43%),
    linear-gradient(145deg, #0a0e12, #06090c) !important;
}

#app .swap-route-card--compact.swap-route-card--shielded {
  background:
    radial-gradient(circle at 85% 10%, rgba(255, 106, 0, 0.11), transparent 45%),
    linear-gradient(145deg, #0a0e12, #06090c) !important;
}

/* Kill old blue/purple corner-glow ::before and rebuild as fading outline */
#app .swap-route-card--compact::before,
#app .swap-route-card--compact.swap-route-card--public::before,
#app .swap-route-card--compact.swap-route-card--shielded::before,
#app .swap-route-card--compact.swap-route-card--public:hover::before,
#app .swap-route-card--compact.swap-route-card--shielded:hover::before,
#app .swap-route-card--compact.swap-route-card--selected.swap-route-card--public::before,
#app .swap-route-card--compact.swap-route-card--selected.swap-route-card--shielded::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  padding: 1.5px !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0) !important;
  mask-composite: exclude !important;
}

#app .swap-route-card--compact.swap-route-card--public::before,
#app .swap-route-card--compact.swap-route-card--public:hover::before,
#app .swap-route-card--compact.swap-route-card--selected.swap-route-card--public::before {
  background: linear-gradient(
    140deg,
    rgba(244, 241, 235, 0.95) 0%,
    rgba(244, 241, 235, 0.48) 40%,
    rgba(244, 241, 235, 0.1) 78%,
    rgba(244, 241, 235, 0.3) 100%
  ) !important;
}

#app .swap-route-card--compact.swap-route-card--shielded::before,
#app .swap-route-card--compact.swap-route-card--shielded:hover::before,
#app .swap-route-card--compact.swap-route-card--selected.swap-route-card--shielded::before {
  background: linear-gradient(
    140deg,
    rgba(255, 106, 0, 1) 0%,
    rgba(255, 106, 0, 0.62) 40%,
    rgba(255, 106, 0, 0.12) 78%,
    rgba(255, 106, 0, 0.42) 100%
  ) !important;
}

/* Soft inner-edge light via ::after (inside card only) */
#app .swap-route-card--compact::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: 0.9 !important;
  filter: none !important;
}

#app .swap-route-card--compact.swap-route-card--public::after {
  box-shadow: inset 0 0 28px rgba(244, 241, 235, 0.06) !important;
  background: transparent !important;
}

#app .swap-route-card--compact.swap-route-card--shielded::after {
  box-shadow: inset 0 0 30px rgba(255, 106, 0, 0.07) !important;
  background: transparent !important;
}

#app .swap-route-card--compact > * {
  position: relative !important;
  z-index: 1 !important;
}

/* Typography */
#app .swap-route-card--compact .swap-route-card__kicker {
  color: #9da1a6 !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

#app .swap-route-card--compact .swap-route-card__name {
  color: #f4f1eb !important;
  font-size: 1.15rem !important;
  font-weight: 650 !important;
  margin-bottom: 8px !important;
  letter-spacing: -0.02em !important;
}

#app .swap-route-card--compact .swap-route-card__desc {
  color: #9da1a6 !important;
  font-size: 0.8rem !important;
  line-height: 1.45 !important;
  margin-bottom: 14px !important;
}

/* Public accents ivory; shielded accents orange */
#app .swap-route-card--compact.swap-route-card--public .swap-route-card__kicker {
  color: rgba(244, 241, 235, 0.72) !important;
}

#app .swap-route-card--compact.swap-route-card--shielded .swap-route-card__kicker {
  color: rgba(255, 106, 0, 0.85) !important;
}

/* Privacy / Recommended badge — orange, quiet (no purple) */
#app .swap-route-card--compact .ura-shielded-context-labels {
  margin: 0 0 12px !important;
}

#app .swap-route-card--compact .ura-shielded-context-labels__pill--privacy {
  color: #ff8a3d !important;
  border: 1px solid rgba(255, 106, 0, 0.65) !important;
  background: rgba(255, 106, 0, 0.08) !important;
  box-shadow: none !important;
}

#app .swap-route-card--compact .ura-shielded-context-labels__pill--env,
#app .swap-route-card--compact .ura-shielded-context-labels__pill--proof-strict,
#app .swap-route-card--compact .ura-shielded-context-labels__pill--proof-demo,
#app .swap-route-card--compact .ura-shielded-context-labels__pill--proof-pending {
  /* keep env/proof pills readable; no purple */
  border-color: #22272d !important;
}

/* Chain strips sit at bottom; equal card heights */
#app .swap-route-selector__public-strip-wrap,
#app .swap-route-selector__shield-strip-wrap {
  margin-top: auto !important;
  width: 100% !important;
  padding-top: 8px !important;
}

#app .swap-route-card--compact .shielded-chain-badge-strip__label {
  color: #9da1a6 !important;
}

/* Hover — lift ≤2px; strengthen outline slightly */
#app .swap-route-card--compact:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32) !important;
}

#app .swap-route-card--compact.swap-route-card--public:hover::before {
  background: linear-gradient(
    140deg,
    rgba(244, 241, 235, 1) 0%,
    rgba(244, 241, 235, 0.58) 40%,
    rgba(244, 241, 235, 0.16) 78%,
    rgba(244, 241, 235, 0.4) 100%
  ) !important;
}

#app .swap-route-card--compact.swap-route-card--shielded:hover::before {
  background: linear-gradient(
    140deg,
    rgba(255, 138, 61, 1) 0%,
    rgba(255, 106, 0, 0.72) 40%,
    rgba(255, 106, 0, 0.18) 78%,
    rgba(255, 106, 0, 0.5) 100%
  ) !important;
}

/* Selected */
#app .swap-route-card--compact.swap-route-card--selected {
  border: 0 !important;
}

#app .swap-route-card--compact.swap-route-card--selected.swap-route-card--public {
  box-shadow: inset 0 0 0 1px rgba(244, 241, 235, 0.18), 0 12px 32px rgba(0, 0, 0, 0.36) !important;
}

#app .swap-route-card--compact.swap-route-card--selected.swap-route-card--shielded {
  box-shadow: inset 0 0 0 1px rgba(255, 106, 0, 0.28), 0 12px 32px rgba(0, 0, 0, 0.36) !important;
}

#app .swap-route-card--compact.swap-route-card--selected.swap-route-card--public::before {
  background: linear-gradient(
    140deg,
    rgba(244, 241, 235, 1) 0%,
    rgba(244, 241, 235, 0.7) 38%,
    rgba(244, 241, 235, 0.22) 76%,
    rgba(244, 241, 235, 0.55) 100%
  ) !important;
}

#app .swap-route-card--compact.swap-route-card--selected.swap-route-card--shielded::before {
  background: linear-gradient(
    140deg,
    rgba(255, 138, 61, 1) 0%,
    rgba(255, 106, 0, 0.85) 38%,
    rgba(255, 106, 0, 0.28) 76%,
    rgba(255, 106, 0, 0.62) 100%
  ) !important;
}

/* Focus — no blue/purple */
#app .swap-route-card--compact:focus-visible {
  outline: 2px solid rgba(255, 106, 0, 0.75) !important;
  outline-offset: 3px !important;
}

#app .swap-route-card--compact.swap-route-card--public:focus-visible {
  outline-color: rgba(244, 241, 235, 0.8) !important;
}

/* Disabled */
#app .swap-route-card--compact:disabled,
#app .swap-route-card--compact[aria-disabled='true'] {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Neutralize any residual purple/blue on these cards only */
#app .swap-route-card--compact,
#app .swap-route-card--compact * {
  --tw-shadow-color: transparent;
}