/* A9SKINS brand override: keep the native POP geometry and interaction, change only action colors. */
html:root {
  --primary-color: #20d879;
  --success-color: #20d879;
  --text-color-number: #20d879;
  --primary-01: #20d879;
  --primary-02: rgba(32, 216, 121, .7);
  --primary-03: rgba(32, 216, 121, .6);
  --primary-04: rgba(32, 216, 121, .5);
  --primary-05: rgba(32, 216, 121, .3);
  --primary-06: rgba(32, 216, 121, .2);
  --primary-07: rgba(32, 216, 121, .2);
  --primary-08: #00c8a0;
  --primary-18: #20d879;
  --primary-23: #00a080;
  --primary-29: #008f61;
}

/* The native button uses literal gold values in its compiled component CSS. */
html body .ui-btn.ui-btn--primary:not(:disabled) {
  background: linear-gradient(210.78deg, rgba(32, 216, 121, .55) 8.58%, rgba(0, 160, 128, .65) 83.87%), linear-gradient(210.78deg, #9af5c5 8.58%, #00c8a0 83.87%);
  box-shadow: inset 0 0 4px #20d879;
  color: #07150e;
  text-shadow: 0 0 2px #8ff2be;
}

html body .ui-btn.ui-btn--secondary:not(:disabled),
html body .ui-btn.ui-btn--tertiary:not(:disabled) {
  background: linear-gradient(209deg, rgba(0, 143, 97, .85) 6.64%, rgba(0, 96, 77, .85) 83.53%), linear-gradient(209deg, #008f61 6.64%, #063d31 83.53%);
  border-color: #20d879;
  box-shadow: inset 0 0 4px rgba(32, 216, 121, .75);
  color: #fff;
  text-shadow: 0 0 6px rgba(0, 0, 0, .75);
}

html body .ui-btn.ui-btn--primary.ui-btn--show-focus:not(:disabled):focus,
html body .ui-btn.ui-btn--primary.ui-btn--show-focus:not(:disabled):focus-visible {
  box-shadow: inset 0 0 4px #20d879, 0 0 0 3px rgba(32, 216, 121, .4);
}

html body .ui-btn.ui-btn--highlight:not(:disabled) {
  filter: hue-rotate(85deg) saturate(1.15);
}

html body .case-prize__exchange-button:not(:disabled) {
  background-color: rgba(0, 143, 97, .8);
  border: 1px solid rgba(32, 216, 121, .8);
  box-shadow: inset 0 0 4px rgba(32, 216, 121, .65);
}

html body .case-result__action-item:hover,
html body .case-button__link:hover,
html body .case-button__user-coupons-link:hover {
  color: #20d879;
}

html body .counter.active,
html body .nav-button.variant-active .button-background {
  background-color: rgba(0, 143, 97, .8);
  border-color: rgba(32, 216, 121, .8);
}

/* Brand wording in rule/article HTML is rewritten by the backend; this marker is for QA. */
html[data-a9-brand="a9skins"] { --a9-brand-green: #20d879; }