/* ABN-specific checkout styling only. Generic checkout rules (company
   search, phone-input, spinner, .hidden) come from the base plugin's
   twoinc.css, which loads on the same pages.

   Brand rules key off the base plugin's own class names, which it renders into
   both the classic and Blocks checkouts. */

:root {
  --abn-teal: #699797;
  --abn-grey: #515151;
}

/* Classic-only: the Blocks checkout spaces its payment methods itself. */
.woocommerce-checkout
  #payment
  ul.payment_methods
  li.wc_payment_method.payment_method_woocommerce-gateway-abn {
  margin-bottom: 1em;
}

.twoinc-payment-subtitle {
  color: #777777;
  font-size: 1em;
}

/* The one element the two checkouts render under different class names. */
.woocommerce-checkout
  #payment
  ul.payment_methods
  li.wc_payment_method.payment_method_woocommerce-gateway-abn
  img,
.twoinc-blocks-label .twoinc-blocks-icon {
  /* ABN-468: max-height only, no width — that keeps the shield glyph's
     intrinsic 0.7481 ratio intact (renders ~12.72x17) without the ~1.4%
     horizontal stretch an exact width would force. Magento's own
     .two-payment-shield is unrelated and deliberately does not match this
     number (24x24 square, letterboxed, asserted in
     magento-abn-plugin:dev/qa-checklist.md). */
  max-height: 17px;
}

/* Payment-term chip palette (ABN-590). The chosen-state rules repeat the chip
   class so they outrank the base plugin's own doubled-class rules by
   specificity rather than by load order. Every state names the label colour: the
   base plugin declares its own on the states it paints, and where it does not, an
   inherited foreground lets a light theme paint the chip white-on-white. */
.twoinc-term-chips .twoinc-term-chip {
  border: 2px solid #e3e3e3;
  background: #fff;
  color: var(--abn-grey);
}
/* Focus takes the hover treatment, so the extra padding replaces the 1px the
   border gives up. :not(:disabled) exempts the sole term, which is disabled: a
   hover affordance there would promise a click that does nothing. The label
   colour is restated because the base plugin declares its own on this state at
   (0,4,0), out of the resting rule's reach (ABN-599). */
.twoinc-term-chips .twoinc-term-chip:hover:not(:disabled):not(.twoinc-term-chip--selected),
.twoinc-term-chips .twoinc-term-chip:focus:not(:disabled):not(.twoinc-term-chip--selected) {
  border: 1px solid var(--abn-teal);
  padding: 9px 17px;
  background: #e3e3e3;
  color: var(--abn-grey);
}
.twoinc-term-chips .twoinc-term-chip:focus-visible {
  outline-color: var(--abn-teal);
}
.twoinc-term-chips .twoinc-term-chip.twoinc-term-chip--selected {
  border-color: var(--abn-teal);
  background: #fff;
  color: var(--abn-grey);
}
.twoinc-term-chips .twoinc-term-chip--selected:hover:not(:disabled),
.twoinc-term-chips .twoinc-term-chip--selected:focus:not(:disabled) {
  border-color: var(--abn-teal);
  background: #e3e3e3;
  color: var(--abn-grey);
}
/* The sole chip is also the chosen one, so the hovered half is spelled out to
   sit above the base plugin's own treatment of a hovered chosen chip. It is the
   disabled chip, which is what earns it no hover affordance at all. */
.twoinc-term-chips .twoinc-term-chip.twoinc-term-chip--single,
.twoinc-term-chips .twoinc-term-chip.twoinc-term-chip--single:hover:disabled {
  border-color: var(--abn-teal);
  background: #fff;
  color: var(--abn-grey);
}

/* Company-mode chip palette (ABN-590), the same states as the term chips. The
   base plugin paints these entirely, so every rule here is new; the chosen
   state repeats the chip class to outrank the base plugin's own doubled-class
   rule by specificity rather than by load order. */
.two-company-mode-chips .two-company-mode-chip {
  border: 2px solid #e3e3e3;
  background-color: #fff;
  color: var(--abn-grey);
}
/* At (0,4,0) to clear the base plugin's own rule for this state, which sits
   above every other rule it ships for these chips. The label colour is restated
   because that rule declares its own at (0,3,0), out of the resting rule's reach
   (ABN-599). */
.two-company-mode-chips .two-company-mode-chip:hover:not(.two-company-mode-chip--selected),
.two-company-mode-chips .two-company-mode-chip:focus:not(.two-company-mode-chip--selected) {
  border: 1px solid var(--abn-teal);
  padding: 6px 13px;
  background-color: #e3e3e3;
  color: var(--abn-grey);
}
.two-company-mode-chips .two-company-mode-chip:focus-visible {
  outline-color: var(--abn-teal);
}
.two-company-mode-chips .two-company-mode-chip.two-company-mode-chip--selected {
  border-color: var(--abn-teal);
  background-color: #fff;
  color: var(--abn-grey);
}
.two-company-mode-chips .two-company-mode-chip.two-company-mode-chip--selected:hover,
.two-company-mode-chips .two-company-mode-chip.two-company-mode-chip--selected:focus {
  border-color: var(--abn-teal);
  background-color: #e3e3e3;
  color: var(--abn-grey);
}