/* Shared action-button language. Loaded after page-level styles. */
:root {
  --wel-btn-accent: #ff9c2e;
  --wel-btn-accent-hover: #ffad50;
  --wel-btn-accent-pressed: #e98216;
  --wel-btn-accent-text: #201407;
  --wel-btn-text: #f5f6f7;
  --wel-btn-muted: #9298a2;
  --wel-btn-outline: #3a3f47;
  --wel-btn-outline-hover: #555b64;
  --wel-btn-secondary-hover: rgba(255, 255, 255, .055);
  --wel-btn-disabled-bg: #20242a;
  --wel-btn-disabled-text: #696f78;
  --wel-btn-focus: rgba(255, 156, 46, .28);
  --wel-btn-danger: #f1595a;
  --wel-btn-danger-hover: #ff6a6b;
  --wel-btn-positive: #2bc784;
  --wel-btn-positive-hover: #36d18f;
}

html[data-theme="light"] body.calm-ui {
  --wel-btn-text: #17191d;
  --wel-btn-muted: #7a8089;
  --wel-btn-outline: #cfd4db;
  --wel-btn-outline-hover: #aeb5bf;
  --wel-btn-secondary-hover: rgba(11, 14, 19, .045);
  --wel-btn-disabled-bg: #eceef1;
  --wel-btn-disabled-text: #a1a6ad;
}

body.auth-shell {
  --wel-btn-text: #17191d;
  --wel-btn-muted: #7a8089;
  --wel-btn-outline: #cfd4db;
  --wel-btn-outline-hover: #aeb5bf;
  --wel-btn-secondary-hover: rgba(11, 14, 19, .045);
  --wel-btn-disabled-bg: #eceef1;
  --wel-btn-disabled-text: #a1a6ad;
}

body.verification-page-body {
  --wel-btn-text: #17191d;
  --wel-btn-muted: #7a8089;
  --wel-btn-outline: #cfd4db;
  --wel-btn-outline-hover: #aeb5bf;
  --wel-btn-secondary-hover: rgba(11, 14, 19, .045);
  --wel-btn-disabled-bg: #eceef1;
  --wel-btn-disabled-text: #a1a6ad;
}

/* Text actions: dimensions and typography stay stable between states. */
html body.welbit-buttons.welbit-buttons.welbit-buttons :is(
  .btn,
  .auth-next-btn,
  .auth-passkey-btn,
  .submit-btn,
  .dp-primary-button,
  .dp-secondary-button,
  .bc-continue,
  .transfer-submit,
  .hero__button,
  .view-more,
  .contact-btn,
  .button.primary,
  .button.outline,
  .btn.primary,
  .earn-btn,
  .main__default-btn,
  .dialog-refill__button,
  .choose-plan__btn,
  .exchange__content__btn,
  .main-exchange__form-button,
  .not-found-page__btn,
  .verification__btn,
  .verifications__btn,
  .verifications__btn-circuit,
  .kyc9-btn,
  .kyc9-back,
  .escrow-btn,
  .deal-action,
  .futures-primary-button,
  .futures-secondary-button,
  .futures-danger-button,
  .futures-transfer-button,
  .futures-account-guest button,
  .futures-auth-actions a,
  .banner__btn,
  .user_balance__btn-circuit,
  .lending-popup__btn,
  .trade-btn,
  .cookie__btn,
  .primary-button,
  .primary-big-button,
  .primary-huge-button,
  .verify-confirm
) {
  appearance: none;
  -webkit-appearance: none;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px !important;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700 !important;
  line-height: 1.2;
  letter-spacing: 0 !important;
  text-align: center;
  text-decoration: none;
  box-shadow: none !important;
  transform: none !important;
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, opacity 150ms ease !important;
}

/* Primary actions. */
html body.welbit-buttons.welbit-buttons.welbit-buttons :is(
  .btn-primary,
  .btn-success,
  .auth-next-btn,
  .submit-btn.active,
  .dp-primary-button,
  .bc-continue,
  .transfer-submit,
  .hero__button,
  .contact-btn,
  .button.primary,
  .btn.primary,
  .earn-btn,
  .main__default-btn,
  .dialog-refill__button,
  .choose-plan__btn,
  .exchange__content__btn,
  .main-exchange__form-button,
  .not-found-page__btn,
  .verification__btn,
  .verifications__btn,
  .kyc9-btn,
  .escrow-btn-primary,
  .deal-action.primary,
  .futures-primary-button,
  .futures-transfer-button,
  .futures-account-guest button,
  .futures-auth-actions a:first-child,
  .cookie__btn,
  .primary-button,
  .primary-big-button,
  .primary-huge-button,
  .verify-confirm
),
html body.welbit-buttons.welbit-buttons.welbit-buttons .signup-form > button,
html body.welbit-buttons.welbit-buttons.welbit-buttons .login-form > button {
  color: var(--wel-btn-accent-text) !important;
  border: 1px solid var(--wel-btn-accent) !important;
  background: var(--wel-btn-accent) !important;
  background-image: none !important;
}

html body.welbit-buttons.welbit-buttons.welbit-buttons :is(
  .btn-primary,
  .btn-success,
  .auth-next-btn,
  .submit-btn.active,
  .dp-primary-button,
  .bc-continue,
  .transfer-submit,
  .hero__button,
  .contact-btn,
  .button.primary,
  .btn.primary,
  .earn-btn,
  .main__default-btn,
  .dialog-refill__button,
  .choose-plan__btn,
  .exchange__content__btn,
  .main-exchange__form-button,
  .not-found-page__btn,
  .verification__btn,
  .verifications__btn,
  .kyc9-btn,
  .escrow-btn-primary,
  .deal-action.primary,
  .futures-primary-button,
  .futures-transfer-button,
  .futures-account-guest button,
  .futures-auth-actions a:first-child,
  .cookie__btn,
  .primary-button,
  .primary-big-button,
  .primary-huge-button,
  .verify-confirm
):hover:not(:disabled):not(.v-btn--disabled),
html body.welbit-buttons.welbit-buttons.welbit-buttons .signup-form > button:hover,
html body.welbit-buttons.welbit-buttons.welbit-buttons .login-form > button:hover {
  color: var(--wel-btn-accent-text) !important;
  border-color: var(--wel-btn-accent-hover) !important;
  background: var(--wel-btn-accent-hover) !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}

html body.welbit-buttons.welbit-buttons.welbit-buttons :is(
  .btn-primary,
  .btn-success,
  .auth-next-btn,
  .submit-btn.active,
  .dp-primary-button,
  .bc-continue,
  .transfer-submit,
  .hero__button,
  .contact-btn,
  .button.primary,
  .btn.primary,
  .earn-btn,
  .main__default-btn,
  .dialog-refill__button,
  .choose-plan__btn,
  .exchange__content__btn,
  .main-exchange__form-button,
  .not-found-page__btn,
  .verification__btn,
  .verifications__btn,
  .kyc9-btn,
  .escrow-btn-primary,
  .deal-action.primary,
  .futures-primary-button,
  .futures-transfer-button,
  .futures-account-guest button,
  .futures-auth-actions a:first-child,
  .cookie__btn,
  .primary-button,
  .primary-big-button,
  .primary-huge-button,
  .verify-confirm
):active:not(:disabled):not(.v-btn--disabled) {
  border-color: var(--wel-btn-accent-pressed) !important;
  background: var(--wel-btn-accent-pressed) !important;
}

/* Secondary and contextual actions. */
html body.welbit-buttons.welbit-buttons.welbit-buttons :is(
  .btn:not(.btn-primary):not(.btn-success):not(.primary),
  .auth-passkey-btn,
  .dp-secondary-button,
  .button.outline,
  .view-more,
  .verifications__btn-circuit,
  .kyc9-back,
  .escrow-btn-quiet,
  .deal-action.secondary,
  .futures-secondary-button,
  .futures-auth-actions a:last-child,
  .banner__btn,
  .user_balance__btn-circuit,
  .lending-popup__btn,
  .trade-btn
) {
  color: var(--wel-btn-text) !important;
  border: 1px solid var(--wel-btn-outline) !important;
  background: transparent !important;
  background-image: none !important;
}

html body.welbit-buttons.welbit-buttons.welbit-buttons :is(
  .btn:not(.btn-primary):not(.btn-success):not(.primary),
  .auth-passkey-btn,
  .dp-secondary-button,
  .button.outline,
  .view-more,
  .verifications__btn-circuit,
  .kyc9-back,
  .escrow-btn-quiet,
  .deal-action.secondary,
  .futures-secondary-button,
  .futures-auth-actions a:last-child,
  .banner__btn,
  .user_balance__btn-circuit,
  .lending-popup__btn,
  .trade-btn
):hover:not(:disabled):not(.v-btn--disabled) {
  color: var(--wel-btn-text) !important;
  border-color: var(--wel-btn-outline-hover) !important;
  background: var(--wel-btn-secondary-hover) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Destructive and trading-side actions keep their semantic colors. */
html body.welbit-buttons.welbit-buttons.welbit-buttons :is(.futures-danger-button, .deal-action.danger) {
  color: #fff !important;
  border: 1px solid var(--wel-btn-danger) !important;
  background: var(--wel-btn-danger) !important;
  background-image: none !important;
}

html body.welbit-buttons.welbit-buttons.welbit-buttons :is(.futures-danger-button, .deal-action.danger):hover:not(:disabled) {
  border-color: var(--wel-btn-danger-hover) !important;
  background: var(--wel-btn-danger-hover) !important;
}

html body.welbit-buttons.welbit-buttons.welbit-buttons :is(.futures-long-button, .futures-short-button) {
  min-height: 44px;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  transform: none !important;
}

html body.welbit-buttons.welbit-buttons.welbit-buttons .futures-long-button {
  border-color: var(--wel-btn-positive) !important;
  background: var(--wel-btn-positive) !important;
}

html body.welbit-buttons.welbit-buttons.welbit-buttons .futures-long-button:hover:not(:disabled) {
  border-color: var(--wel-btn-positive-hover) !important;
  background: var(--wel-btn-positive-hover) !important;
}

html body.welbit-buttons.welbit-buttons.welbit-buttons .futures-short-button {
  border-color: var(--wel-btn-danger) !important;
  background: var(--wel-btn-danger) !important;
}

html body.welbit-buttons.welbit-buttons.welbit-buttons .futures-short-button:hover:not(:disabled) {
  border-color: var(--wel-btn-danger-hover) !important;
  background: var(--wel-btn-danger-hover) !important;
}

html body.welbit-buttons.welbit-buttons.welbit-buttons .order_btn-fbGht {
  min-height: 44px;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  transform: none !important;
}

/* Compact actions keep their density while using the same silhouette. */
html body.welbit-buttons.welbit-buttons.welbit-buttons :is(.btn-sm, .btn-xs, .trade-btn, .view-more, .user_balance__btn-circuit, .deal-action) {
  min-height: 34px;
  padding-inline: 15px;
  font-size: 12px;
}

html body.welbit-buttons.welbit-buttons.welbit-buttons :is(.signup-form > button, .login-form > button) {
  border-radius: 999px !important;
}

/* Disabled state is shared across native and legacy Vuetify buttons. */
html body.welbit-buttons.welbit-buttons.welbit-buttons :is(
  .btn,
  .auth-next-btn,
  .auth-passkey-btn,
  .submit-btn,
  .dp-primary-button,
  .dp-secondary-button,
  .bc-continue,
  .transfer-submit,
  .earn-btn,
  .main__default-btn,
  .dialog-refill__button,
  .main-exchange__form-button,
  .verification__btn,
  .verifications__btn,
  .verifications__btn-circuit,
  .kyc9-btn,
  .escrow-btn,
  .deal-action,
  .futures-primary-button,
  .futures-secondary-button,
  .futures-danger-button,
  .futures-account-guest button
):is(:disabled, .v-btn--disabled, [aria-disabled="true"]) {
  color: var(--wel-btn-disabled-text) !important;
  border-color: transparent !important;
  background: var(--wel-btn-disabled-bg) !important;
  background-image: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

html body.welbit-buttons.welbit-buttons.welbit-buttons #app button.v-btn[disabled].v-btn.v-btn--disabled {
  color: var(--wel-btn-disabled-text) !important;
  border-color: transparent !important;
  background: var(--wel-btn-disabled-bg) !important;
  background-image: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* Icon-only controls stay compact and do not inherit text-button padding. */
html body.welbit-buttons.welbit-buttons.welbit-buttons :is(
  .dp-icon-button,
  .dp-copy-button,
  .bc-icon-button,
  .bc-clear-amount,
  .icon-btn,
  .copy-btn,
  .wm-icon-btn,
  .futures-icon-command,
  .support-send-btn,
  .support-attach-btn,
  .main-exchange__section__change-button
) {
  border-radius: 999px !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Header follows Bybit's plain Log In + orange Sign Up/Deposit pairing. */
html body.welbit-buttons.welbit-buttons.welbit-buttons .site-header .auth-actions .btn,
html body.welbit-buttons.welbit-buttons.welbit-buttons .site-header .btn-primary.deposit-btn {
  min-height: 36px;
  height: 36px;
  padding: 0 17px;
  border-radius: 999px !important;
  font-size: 13px;
}

html body.welbit-buttons.welbit-buttons.welbit-buttons .site-header .auth-actions .btn.btn-ghost {
  color: var(--header-text, #f5f6f7) !important;
  border-color: transparent !important;
  background: transparent !important;
}

html body.welbit-buttons.welbit-buttons.welbit-buttons .site-header .auth-actions .btn.btn-ghost:hover {
  color: var(--header-text, #f5f6f7) !important;
  border-color: transparent !important;
  background: var(--header-hover, rgba(255, 255, 255, .05)) !important;
}

html body.welbit-buttons.welbit-buttons.welbit-buttons .site-header :is(.auth-actions .btn-success, .btn-primary.deposit-btn) {
  color: var(--wel-btn-accent-text) !important;
  border-color: var(--wel-btn-accent) !important;
  background: var(--wel-btn-accent) !important;
}

html body.welbit-buttons.welbit-buttons.welbit-buttons .site-header :is(.auth-actions .btn-success, .btn-primary.deposit-btn):hover {
  color: var(--wel-btn-accent-text) !important;
  border-color: var(--wel-btn-accent-hover) !important;
  background: var(--wel-btn-accent-hover) !important;
}

html body.welbit-buttons.welbit-buttons.welbit-buttons .site-header :is(.theme-toggle, .lang, .mobile-menu-btn, .m-theme-toggle) {
  border-radius: 999px !important;
}

/* Keyboard focus is visible without adding a permanent glow. */
html body.welbit-buttons.welbit-buttons.welbit-buttons :is(
  .btn,
  .auth-next-btn,
  .auth-passkey-btn,
  .submit-btn,
  .dp-primary-button,
  .dp-secondary-button,
  .bc-continue,
  .transfer-submit,
  .hero__button,
  .view-more,
  .contact-btn,
  .button.primary,
  .button.outline,
  .earn-btn,
  .main__default-btn,
  .dialog-refill__button,
  .exchange__content__btn,
  .not-found-page__btn,
  .verification__btn,
  .verifications__btn,
  .verifications__btn-circuit,
  .kyc9-btn,
  .kyc9-back,
  .escrow-btn,
  .deal-action,
  .futures-primary-button,
  .futures-secondary-button,
  .futures-danger-button,
  .futures-long-button,
  .futures-short-button,
  .futures-account-guest button
):focus-visible {
  outline: 3px solid var(--wel-btn-focus) !important;
  outline-offset: 2px;
}

@media (max-width: 640px) {
  html body.welbit-buttons.welbit-buttons.welbit-buttons :is(
    .dp-primary-button,
    .dp-secondary-button,
    .bc-continue,
    .transfer-submit,
    .verification__btn,
    .verifications__btn,
    .verifications__btn-circuit,
    .kyc9-btn,
    .kyc9-back
  ) {
    min-height: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.welbit-buttons.welbit-buttons.welbit-buttons :is(button, .btn, .button, [role="button"]) {
    transition: none !important;
  }
}