:root {
  --ws-button: #f1f1f4;
  --ws-button-hover: #d6d6dc;
  --ws-button-pressed: #c7c7ce;
  --ws-button-surface: #18181e;
  --ws-button-surface-hover: #24242c;
  --ws-button-text: #101116;
  --ws-button-disabled: #292930;
  --ws-button-disabled-text: #b6b6c0;
}

body[data-page="home"] :is(.button.primary, .dialog-done),
body[data-page="media"] .media-application button,
body[data-page="coming"] .coming-copy a,
body[data-page="auth"] :is(.auth-submit, .auth-switch button.is-active),
body[data-page="checkout"] :is(.payment-periods__button.is-active, .payment-card__primary, .gift-modal__confirm),
body[data-page="account"] .button.primary {
  border-color: transparent !important;
  background: var(--ws-button) !important;
  color: var(--ws-button-text) !important;
  box-shadow: none !important;
  transition: background-color 0.16s ease, color 0.16s ease !important;
}

body[data-page="home"] :is(.button.primary, .dialog-done):hover,
body[data-page="media"] .media-application button:hover,
body[data-page="coming"] .coming-copy a:hover,
body[data-page="auth"] :is(.auth-submit, .auth-switch button.is-active):hover,
body[data-page="checkout"] :is(.payment-card__primary, .gift-modal__confirm):hover:not(:disabled),
body[data-page="account"] .button.primary:hover:not(:disabled) {
  background: var(--ws-button-hover) !important;
  color: var(--ws-button-text) !important;
  transform: none !important;
}

body[data-page="home"] :is(.button.primary, .dialog-done):active,
body[data-page="media"] .media-application button:active,
body[data-page="coming"] .coming-copy a:active,
body[data-page="auth"] .auth-submit:active,
body[data-page="checkout"] :is(.payment-card__primary, .gift-modal__confirm):active:not(:disabled),
body[data-page="account"] .button.primary:active:not(:disabled) {
  background: var(--ws-button-pressed) !important;
}

body[data-page="checkout"] :is(.payment-periods__button, .payment-card__gift),
body[data-page="account"] .button:not(.primary) {
  border-color: transparent !important;
  background: var(--ws-button-surface) !important;
  color: #f2f2f5 !important;
  box-shadow: none !important;
}

body[data-page="checkout"] :is(.payment-periods__button, .payment-card__gift):hover,
body[data-page="account"] .button:not(.primary):hover {
  background: var(--ws-button-surface-hover) !important;
  color: #ffffff !important;
  transform: none !important;
}

body[data-page="checkout"] .payment-periods__button.is-active:hover {
  background: var(--ws-button-hover) !important;
  color: var(--ws-button-text) !important;
}

body[data-page="auth"] .auth-demo,
body[data-page="auth"] .auth-demo:hover,
body[data-page="auth"] .auth-demo:active {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

body[data-page="auth"] .auth-demo {
  color: #aaaab4 !important;
}

body[data-page="auth"] .auth-demo:hover {
  color: #ffffff !important;
}

body[data-page="checkout"] :is(.payment-card__primary, .gift-modal__confirm):disabled,
body[data-page="auth"] :is(.auth-submit, .auth-demo):disabled,
body[data-page="account"] .button:disabled,
body[data-page="account"] .modal-form .button.primary:disabled {
  border-color: transparent !important;
  background: var(--ws-button-disabled) !important;
  color: var(--ws-button-disabled-text) !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

body[data-page="checkout"] .payment-days input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--ws-button) var(--range-progress, 0%), #303038 var(--range-progress, 0%));
}

body[data-page="checkout"] .payment-days input[type="range"]::-moz-range-track {
  background: #303038;
}

body[data-page="checkout"] .payment-days input[type="range"]::-moz-range-progress {
  background: var(--ws-button);
}

body[data-page="checkout"] .payment-days input[type="range"]::-webkit-slider-thumb {
  background: var(--ws-button);
}

body[data-page="checkout"] .payment-days input[type="range"]::-moz-range-thumb {
  background: var(--ws-button);
}

body[data-page="account"] .account-modal .modal-form .button.primary:not(:disabled) {
  border-color: transparent !important;
  background: var(--ws-button) !important;
  color: var(--ws-button-text) !important;
}

body[data-page="account"] .account-modal .modal-form .button.primary:hover:not(:disabled) {
  background: var(--ws-button-hover) !important;
  color: var(--ws-button-text) !important;
}

body[data-page="account"] .notice {
  border: 0 !important;
}

body[data-page="account"] :where(.account-modal, .dialog).account-modal {
  padding: 24px 24px 22px !important;
}

body[data-page="account"] .account-modal .dialog-head {
  margin-bottom: 14px !important;
}

body[data-page="account"] .account-modal .dialog-head p {
  margin-top: 6px !important;
  line-height: 1.42 !important;
}

body[data-page="account"] .account-modal .modal-form,
body[data-page="account"] .account-modal.settings-modal .modal-form,
body[data-page="account"] .account-modal.topup-modal .modal-form {
  gap: 9px !important;
}

body[data-page="account"] .account-modal .modal-form .field {
  margin-top: 0 !important;
}

body[data-page="account"] .account-modal .modal-form input:not([type="checkbox"]),
body[data-page="account"] .account-modal .modal-form .select-trigger {
  height: 43px !important;
  min-height: 43px !important;
}

body[data-page="account"] .account-modal .modal-form .button.primary {
  min-height: 44px !important;
  margin-top: 9px !important;
}

body[data-page="account"] .account-modal .cloudflare-check {
  min-height: 54px !important;
}