/* ============================================================
   RESOURCES 2026 -- global checkout skin
   themes the sitewide premcheckout ( premiums.php gift-array
   checkout ) to the page palette. vendor selectors live here so
   styles.css stays page-only; loaded after styles.css so the
   theme bridge tokens are already defined.
   ============================================================ */

/* **** CheCKOUT OVeRLAY **** */
.checkout-overlay-wrapper .title {
  max-width: 500px;
}

.checkout-overlay-wrapper h1,
.checkout-overlay-wrapper h2,
.checkout-overlay-wrapper h3,
.checkout-overlay-wrapper strong,
.checkout-overlay-wrapper em,
.checkout-overlay-wrapper p {
  color: var(--ink);
}

.checkout-overlay-wrapper .checkout-box .resource-options a {
  color: var(--ink) ! important;
}

.checkout-overlay-wrapper .checkout-box .amount-boxes > div {
  background: var(--brand-dark);
  cursor: pointer;
  transition: all 0.25s ease;
}

.checkout-overlay-wrapper .checkout-box .amount-boxes > div:hover {
  background: color-mix(in oklab, var(--color-2), black 20%);
}

.checkout-overlay-wrapper .checkout-box .amount-boxes > div * {
  color: var(--color-light);
}

.checkout-overlay-wrapper .checkout-box .amount-boxes > div.selected {
  background: var(--color-2);
}

.checkout-overlay-wrapper .checkout-box .btn-continue,
.checkout-box .btn-oneclick-checkout {
  background: var(--color-2);
}

.checkout-overlay-wrapper .checkout-box .btn-continue:hover,
.checkout-box .btn-oneclick-checkout:hover {
  background: var(--color-2);
  box-shadow: 0px 5px 12px 0px rgba(0, 0, 0, 0.4);
  filter: brightness(1.05);
}

.checkout-overlay-wrapper .checkout-overlay-fg .btn-close {
  background: var(--brand-dark);
  cursor: pointer;
  transition: all 0.25s ease;
}

.checkout-overlay-wrapper .checkout-overlay-fg .btn-close:hover {
  transform: scale(1.1);
}

@media only screen and (max-width: 500px) {
  .checkout-overlay-fg .checkout-box {
    padding: 20px;
    margin: 15px;
  }
}