/**
 * Global transparency tuning so wind/lightning stays visible through glass panels.
 * Linked after inline styles to ensure these overrides apply.
 */
.checkout-card,
.review-card,
.thank-card,
.member-card,
.dash-card {
  background: linear-gradient(155deg, rgba(20, 10, 24, 0.54), rgba(12, 7, 20, 0.48)) !important;
}

.checkout-item,
.checkout-form,
.pay-panel {
  background: rgba(10, 7, 18, 0.36) !important;
}

.pay-btn,
.pay-option {
  background: rgba(15, 10, 22, 0.38) !important;
}

.pay-option:hover {
  background: rgba(18, 12, 28, 0.44) !important;
}

.pay-option:has(input:checked) {
  background: rgba(22, 14, 38, 0.5) !important;
}

.field input,
.field select,
.field textarea {
  background: rgba(12, 9, 22, 0.42) !important;
}

.review-summary,
.review-method-callout,
.review-record-block,
.thank-summary,
.dash-order {
  background: rgba(10, 7, 18, 0.34) !important;
}

.member-field input {
  background: rgba(10, 7, 18, 0.42) !important;
}

@media (max-width: 768px) {
  .checkout-card,
  .review-card,
  .thank-card,
  .member-card,
  .dash-card {
    background: linear-gradient(155deg, rgba(20, 10, 24, 0.38), rgba(12, 7, 20, 0.32)) !important;
  }

  .checkout-item,
  .checkout-form,
  .pay-panel {
    background: rgba(10, 7, 18, 0.26) !important;
  }

  .pay-btn,
  .pay-option {
    background: rgba(15, 10, 22, 0.28) !important;
  }

  .pay-option:hover {
    background: rgba(18, 12, 28, 0.3) !important;
  }

  .pay-option:has(input:checked) {
    background: rgba(22, 14, 38, 0.34) !important;
  }

  .field input,
  .field select,
  .field textarea {
    background: rgba(12, 9, 22, 0.28) !important;
  }

  .review-summary,
  .review-method-callout,
  .review-record-block,
  .thank-summary,
  .dash-order {
    background: rgba(10, 7, 18, 0.22) !important;
  }
}