/* Detail-page entry points: make the next action unmistakable. */
.ath-swap-shell .ath-swap-login-gate {
  --ath-login-accent: color-mix(in oklch, var(--ath-swap-c2) 72%, var(--ath-swap-c3));
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 11px !important;
  border: 1px solid color-mix(in oklch, var(--ath-login-accent) 28%, #ffffff1c) !important;
  border-radius: 12px !important;
  background:
    radial-gradient(18rem 10rem at 0% 0%, color-mix(in oklch, var(--ath-login-accent) 12%, transparent), transparent 74%),
    linear-gradient(135deg, color-mix(in oklch, var(--ath-swap-surface-2) 86%, black), color-mix(in oklch, var(--ath-swap-surface-0) 90%, black)) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 8%, transparent),
    0 10px 24px color-mix(in oklch, black 22%, transparent) !important;
}

.ath-swap-shell .ath-swap-login-gate__icon {
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  border: 1px solid color-mix(in oklch, var(--ath-login-accent) 42%, #ffffff20) !important;
  border-radius: 11px !important;
  background: color-mix(in oklch, var(--ath-login-accent) 12%, var(--ath-swap-surface-0)) !important;
  color: color-mix(in oklch, var(--ath-login-accent) 88%, white) !important;
  box-shadow: inset 0 1px 0 color-mix(in oklch, white 10%, transparent) !important;
}

.ath-swap-shell .ath-swap-login-gate__icon .ath-swap-icon {
  width: 20px !important;
  height: 20px !important;
}

.ath-swap-shell .ath-swap-login-gate__copy {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

.ath-swap-shell .ath-swap-login-gate__copy strong {
  color: var(--ath-swap-text) !important;
  font-size: calc(0.72rem * var(--ath-swap-font-scale)) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
}

.ath-swap-shell .ath-swap-login-gate__copy p {
  margin: 0 !important;
  color: var(--ath-swap-text-mid) !important;
  font-size: calc(0.56rem * var(--ath-swap-font-scale)) !important;
  line-height: 1.25 !important;
}

.ath-swap-shell .ath-swap-login-gate__action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-width: 90px !important;
  min-height: 36px !important;
  padding: 0 13px !important;
  border: 1px solid color-mix(in oklch, var(--ath-login-accent) 48%, #ffffff26) !important;
  border-radius: 9px !important;
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--ath-login-accent) 82%, white 7%), color-mix(in oklch, var(--ath-swap-c4) 54%, var(--ath-login-accent))) !important;
  color: #081116 !important;
  font-size: calc(0.58rem * var(--ath-swap-font-scale)) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 36%, transparent),
    0 7px 16px color-mix(in oklch, var(--ath-login-accent) 18%, transparent) !important;
  transition: transform 150ms ease, filter 150ms ease, box-shadow 150ms ease !important;
}

.ath-swap-shell .ath-swap-login-gate__action:hover,
.ath-swap-shell .ath-swap-login-gate__action:focus-visible {
  filter: brightness(1.08) saturate(1.05) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 42%, transparent),
    0 10px 20px color-mix(in oklch, var(--ath-login-accent) 25%, transparent) !important;
}

.ath-swap-shell .ath-swap-login-gate__action:focus-visible {
  outline: 2px solid var(--ath-swap-focus-strong) !important;
  outline-offset: 2px !important;
}

.ath-swap-shell .ath-swap-login-gate__action .ath-swap-icon {
  width: 15px !important;
  height: 15px !important;
}

.swap-single-shell .ath-swap-single-offer .ath-swap-single-builder__submit,
.swap-single-shell .ath-swap-single-offer .ath-swap-single-builder [data-ath-swap-submit] {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 24px !important;
  align-items: center !important;
  align-self: stretch !important;
  justify-content: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 66px !important;
  margin-top: 2px !important;
  padding: 10px 14px !important;
  border: 1px solid color-mix(in oklch, var(--ath-swap-success) 48%, #ffffff30) !important;
  border-radius: 12px !important;
  background:
    radial-gradient(18rem 12rem at 0% 0%, color-mix(in oklch, white 16%, transparent), transparent 72%),
    linear-gradient(135deg, color-mix(in oklch, var(--ath-swap-success) 78%, white 4%), color-mix(in oklch, var(--ath-swap-c2) 72%, var(--ath-swap-success))) !important;
  color: #081116 !important;
  text-align: left !important;
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 36%, transparent),
    0 10px 22px color-mix(in oklch, var(--ath-swap-success) 18%, transparent) !important;
  cursor: pointer !important;
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease !important;
}

.swap-single-shell .ath-swap-single-offer .ath-swap-single-builder__submit:hover,
.swap-single-shell .ath-swap-single-offer .ath-swap-single-builder [data-ath-swap-submit]:hover {
  filter: brightness(1.05) saturate(1.08) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 46%, transparent),
    0 14px 28px color-mix(in oklch, var(--ath-swap-success) 27%, transparent) !important;
}

.swap-single-shell .ath-swap-single-offer .ath-swap-single-builder__submit:focus-visible,
.swap-single-shell .ath-swap-single-offer .ath-swap-single-builder [data-ath-swap-submit]:focus-visible {
  outline: 3px solid var(--ath-swap-focus-strong) !important;
  outline-offset: 3px !important;
}

.swap-single-shell .ath-swap-single-offer .ath-swap-single-builder__submit:disabled,
.swap-single-shell .ath-swap-single-offer .ath-swap-single-builder [data-ath-swap-submit]:disabled {
  filter: saturate(0.35) brightness(0.82) !important;
  opacity: 0.68 !important;
  transform: none !important;
  cursor: wait !important;
}

.swap-single-shell .ath-swap-single-offer .ath-swap-single-builder__submit > .ath-swap-icon,
.swap-single-shell .ath-swap-single-offer .ath-swap-single-builder [data-ath-swap-submit] > .ath-swap-icon {
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  padding: 9px !important;
  border: 1px solid color-mix(in oklch, #081116 28%, transparent) !important;
  border-radius: 10px !important;
  background: color-mix(in oklch, white 20%, transparent) !important;
  fill: currentColor !important;
}

.swap-single-shell .ath-swap-single-offer .ath-swap-single-builder__submit-copy {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

.swap-single-shell .ath-swap-single-offer .ath-swap-single-builder__submit-copy strong {
  color: #081116 !important;
  font-size: calc(0.82rem * var(--ath-swap-font-scale)) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
}

.swap-single-shell .ath-swap-single-offer .ath-swap-single-builder__submit-copy small {
  overflow: hidden !important;
  color: color-mix(in oklch, #081116 70%, transparent) !important;
  font-size: calc(0.5rem * var(--ath-swap-font-scale)) !important;
  font-weight: 750 !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.swap-single-shell .ath-swap-single-offer .ath-swap-single-builder__submit-arrow {
  color: #081116 !important;
  font-size: calc(1.35rem * var(--ath-swap-font-scale)) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-align: right !important;
}

@media (max-width: 620px) {
  .ath-swap-shell .ath-swap-login-gate {
    grid-template-columns: 36px minmax(0, 1fr) !important;
    gap: 9px !important;
    padding: 9px !important;
  }

  .ath-swap-shell .ath-swap-login-gate__icon {
    width: 36px !important;
    height: 36px !important;
  }

  .ath-swap-shell .ath-swap-login-gate__action {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  .swap-single-shell .ath-swap-single-offer .ath-swap-single-builder__submit,
  .swap-single-shell .ath-swap-single-offer .ath-swap-single-builder [data-ath-swap-submit] {
    grid-template-columns: 36px minmax(0, 1fr) 20px !important;
    min-height: 60px !important;
    padding: 8px 10px !important;
  }

  .swap-single-shell .ath-swap-single-offer .ath-swap-single-builder__submit > .ath-swap-icon,
  .swap-single-shell .ath-swap-single-offer .ath-swap-single-builder [data-ath-swap-submit] > .ath-swap-icon {
    width: 36px !important;
    height: 36px !important;
    padding: 8px !important;
  }

  .swap-single-shell .ath-swap-single-offer .ath-swap-single-builder__submit-copy small {
    white-space: normal !important;
  }
}

/* Keep listing tags with the media instead of stretching the summary column. */
#brx-content .swap-single-shell .ath-swap-single-gallery--media {
  align-content: start !important;
  gap: 6px !important;
}

#brx-content .swap-single-shell .ath-swap-single-media__tags {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  margin: 0 !important;
}

#brx-content .swap-single-shell .ath-swap-single-media__tags .ath-swap-chip {
  min-height: 20px !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  font-size: 0.68rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Keep the compact login action readable against the detail template's button defaults. */
#brx-content .swap-single-shell .ath-swap-single-panel--offer .ath-swap-login-gate__action {
  min-height: 36px !important;
  padding: 0 13px !important;
  border: 1px solid color-mix(in oklch, var(--ath-login-accent) 48%, #ffffff26) !important;
  border-radius: 9px !important;
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--ath-login-accent) 82%, white 7%), color-mix(in oklch, var(--ath-swap-c4) 54%, var(--ath-login-accent))) !important;
  color: #081116 !important;
  font-size: calc(0.58rem * var(--ath-swap-font-scale)) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 36%, transparent),
    0 7px 16px color-mix(in oklch, var(--ath-login-accent) 18%, transparent) !important;
}

#brx-content .swap-single-shell .ath-swap-single-panel--offer .ath-swap-login-gate__action .ath-swap-icon {
  width: 15px !important;
  height: 15px !important;
}

@media (max-width: 620px) {
  #brx-content .swap-single-shell .ath-swap-single-panel--offer .ath-swap-login-gate__action {
    min-height: 36px !important;
    padding: 0 13px !important;
  }
}

/* Bricks specificity lock: the detail template prints a later inline stylesheet. */
#brx-content .swap-single-shell .ath-swap-single-offer .ath-swap-single-builder__submit,
#brx-content .swap-single-shell .ath-swap-single-offer .ath-swap-single-builder [data-ath-swap-submit] {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 24px !important;
  align-items: center !important;
  align-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 66px !important;
  margin-top: 2px !important;
  padding: 10px 14px !important;
  border: 1px solid color-mix(in oklch, var(--ath-swap-success) 48%, #ffffff30) !important;
  border-radius: 12px !important;
  background:
    radial-gradient(18rem 12rem at 0% 0%, color-mix(in oklch, white 16%, transparent), transparent 72%),
    linear-gradient(135deg, color-mix(in oklch, var(--ath-swap-success) 78%, white 4%), color-mix(in oklch, var(--ath-swap-c2) 72%, var(--ath-swap-success))) !important;
  color: #081116 !important;
  text-align: left !important;
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 36%, transparent),
    0 10px 22px color-mix(in oklch, var(--ath-swap-success) 18%, transparent) !important;
}

#brx-content .swap-single-shell .ath-swap-single-offer .ath-swap-single-builder__submit:hover,
#brx-content .swap-single-shell .ath-swap-single-offer .ath-swap-single-builder [data-ath-swap-submit]:hover {
  filter: brightness(1.05) saturate(1.08) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 46%, transparent),
    0 14px 28px color-mix(in oklch, var(--ath-swap-success) 27%, transparent) !important;
}

#brx-content .swap-single-shell .ath-swap-single-offer .ath-swap-single-builder__submit > .ath-swap-icon,
#brx-content .swap-single-shell .ath-swap-single-offer .ath-swap-single-builder [data-ath-swap-submit] > .ath-swap-icon {
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  padding: 9px !important;
  border: 1px solid color-mix(in oklch, #081116 28%, transparent) !important;
  border-radius: 10px !important;
  background: color-mix(in oklch, white 20%, transparent) !important;
  color: #081116 !important;
  fill: currentColor !important;
}

#brx-content .swap-single-shell .ath-swap-single-offer .ath-swap-single-builder__submit-copy strong {
  color: #081116 !important;
  font-size: calc(0.82rem * var(--ath-swap-font-scale)) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

#brx-content .swap-single-shell .ath-swap-single-offer .ath-swap-single-builder__submit-copy small {
  color: color-mix(in oklch, #081116 70%, transparent) !important;
  font-size: calc(0.5rem * var(--ath-swap-font-scale)) !important;
  line-height: 1.15 !important;
}

#brx-content .swap-single-shell .ath-swap-single-offer .ath-swap-single-builder__submit-arrow {
  color: #081116 !important;
  font-size: calc(1.35rem * var(--ath-swap-font-scale)) !important;
}

@media (max-width: 620px) {
  #brx-content .swap-single-shell .ath-swap-single-offer .ath-swap-single-builder__submit,
  #brx-content .swap-single-shell .ath-swap-single-offer .ath-swap-single-builder [data-ath-swap-submit] {
    grid-template-columns: 36px minmax(0, 1fr) 20px !important;
    min-height: 60px !important;
    padding: 8px 10px !important;
  }

  #brx-content .swap-single-shell .ath-swap-single-offer .ath-swap-single-builder__submit > .ath-swap-icon,
  #brx-content .swap-single-shell .ath-swap-single-offer .ath-swap-single-builder [data-ath-swap-submit] > .ath-swap-icon {
    width: 36px !important;
    height: 36px !important;
    padding: 8px !important;
  }
}

/* Center the primary offer action and keep its color on the shared theme
 * tokens instead of the legacy success-green treatment. */
.swap-single-shell .ath-swap-single-offer .ath-swap-single-builder__submit,
.swap-single-shell .ath-swap-single-offer .ath-swap-single-builder [data-ath-swap-submit],
#brx-content .swap-single-shell .ath-swap-single-offer .ath-swap-single-builder__submit,
#brx-content .swap-single-shell .ath-swap-single-offer .ath-swap-single-builder [data-ath-swap-submit] {
  position: relative !important;
  display: flex !important;
  grid-template-columns: none !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: stretch !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 64px !important;
  margin-top: 4px !important;
  padding: 10px 52px 10px 16px !important;
  border: 1px solid color-mix(in oklch, var(--ath-swap-c2) 54%, var(--ath-swap-border)) !important;
  border-radius: 13px !important;
  background:
    radial-gradient(20rem 13rem at 0% 0%, color-mix(in oklch, var(--ath-swap-c2) 22%, transparent), transparent 72%),
    linear-gradient(135deg,
      color-mix(in oklch, var(--ath-swap-c2) 68%, var(--ath-swap-surface-1)),
      color-mix(in oklch, var(--ath-swap-c1) 68%, var(--ath-swap-surface-0))) !important;
  color: var(--ath-swap-text) !important;
  text-align: center !important;
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 18%, transparent),
    0 10px 24px color-mix(in oklch, var(--ath-swap-c2) 20%, transparent) !important;
}

.swap-single-shell .ath-swap-single-offer .ath-swap-single-builder__submit:hover,
.swap-single-shell .ath-swap-single-offer .ath-swap-single-builder [data-ath-swap-submit]:hover,
#brx-content .swap-single-shell .ath-swap-single-offer .ath-swap-single-builder__submit:hover,
#brx-content .swap-single-shell .ath-swap-single-offer .ath-swap-single-builder [data-ath-swap-submit]:hover {
  filter: brightness(1.06) saturate(1.06) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 28%, transparent),
    0 14px 30px color-mix(in oklch, var(--ath-swap-c2) 28%, transparent) !important;
}

.swap-single-shell .ath-swap-single-offer .ath-swap-single-builder__submit > .ath-swap-icon,
.swap-single-shell .ath-swap-single-offer .ath-swap-single-builder [data-ath-swap-submit] > .ath-swap-icon,
#brx-content .swap-single-shell .ath-swap-single-offer .ath-swap-single-builder__submit > .ath-swap-icon,
#brx-content .swap-single-shell .ath-swap-single-offer .ath-swap-single-builder [data-ath-swap-submit] > .ath-swap-icon {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
  width: 42px !important;
  height: 42px !important;
  padding: 9px !important;
  border: 1px solid color-mix(in oklch, var(--ath-swap-text) 22%, transparent) !important;
  border-radius: 11px !important;
  background: color-mix(in oklch, var(--ath-swap-surface-0) 30%, transparent) !important;
  color: var(--ath-swap-text) !important;
  fill: currentColor !important;
}

.swap-single-shell .ath-swap-single-offer .ath-swap-single-builder__submit-copy,
#brx-content .swap-single-shell .ath-swap-single-offer .ath-swap-single-builder__submit-copy {
  display: grid !important;
  flex: 0 1 auto !important;
  justify-items: center !important;
  min-width: 0 !important;
  text-align: center !important;
}

.swap-single-shell .ath-swap-single-offer .ath-swap-single-builder__submit-copy strong,
#brx-content .swap-single-shell .ath-swap-single-offer .ath-swap-single-builder__submit-copy strong {
  color: var(--ath-swap-text) !important;
  font-size: calc(1.2rem * var(--ath-swap-font-scale)) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

.swap-single-shell .ath-swap-single-offer .ath-swap-single-builder__submit-copy small,
#brx-content .swap-single-shell .ath-swap-single-offer .ath-swap-single-builder__submit-copy small {
  color: color-mix(in oklch, var(--ath-swap-text) 76%, transparent) !important;
  font-size: calc(0.6rem * var(--ath-swap-font-scale)) !important;
  line-height: 1.15 !important;
}

.swap-single-shell .ath-swap-single-offer .ath-swap-single-builder__submit-arrow,
#brx-content .swap-single-shell .ath-swap-single-offer .ath-swap-single-builder__submit-arrow {
  position: absolute !important;
  right: 18px !important;
  color: var(--ath-swap-text) !important;
  font-size: calc(1.35rem * var(--ath-swap-font-scale)) !important;
  line-height: 1 !important;
}

@media (max-width: 620px) {
  .swap-single-shell .ath-swap-single-offer .ath-swap-single-builder__submit,
  .swap-single-shell .ath-swap-single-offer .ath-swap-single-builder [data-ath-swap-submit],
  #brx-content .swap-single-shell .ath-swap-single-offer .ath-swap-single-builder__submit,
  #brx-content .swap-single-shell .ath-swap-single-offer .ath-swap-single-builder [data-ath-swap-submit] {
    min-height: 60px !important;
    padding: 8px 46px 8px 10px !important;
  }

  .swap-single-shell .ath-swap-single-offer .ath-swap-single-builder__submit > .ath-swap-icon,
  .swap-single-shell .ath-swap-single-offer .ath-swap-single-builder [data-ath-swap-submit] > .ath-swap-icon,
  #brx-content .swap-single-shell .ath-swap-single-offer .ath-swap-single-builder__submit > .ath-swap-icon,
  #brx-content .swap-single-shell .ath-swap-single-offer .ath-swap-single-builder [data-ath-swap-submit] > .ath-swap-icon {
    width: 36px !important;
    height: 36px !important;
    padding: 8px !important;
  }

  .swap-single-shell .ath-swap-single-offer .ath-swap-single-builder__submit-arrow,
  #brx-content .swap-single-shell .ath-swap-single-offer .ath-swap-single-builder__submit-arrow {
    right: 14px !important;
  }
}