/* SumUp Payment Widget — Muralla dark theme.
 *
 * Selectors VERIFIED against the live SumUp v2 SDK on 2026-06-01 by dumping
 * document.querySelectorAll('[data-sumup-id]') from a real mounted widget.
 * The card inputs are sealed cross-origin iframes (gateway.sumup.com) and are
 * NOT stylable from host CSS — so we leave the input boxes white (legible) and
 * theme only the container, header, field labels, and submit button.
 *
 * !important is required: the SDK ships emotion-injected classes of equal
 * specificity, so load order alone is not enough to win the cascade.
 *
 * The only public data-sumup-id hooks this SDK exposes are:
 *   widget__container, widget_header, widget_header__icon, widget_header__title,
 *   hostedfield--cardholder_{name,number,expiration,cvv}, submit_button
 *   (+ payment_option / data-sumup-item for APMs — see note at bottom)
 */

/* Outer card — blends into the dark checkout sheet */
[data-sumup-id="widget__container"] {
  background: #141414 !important;
  color: #f6f1eb !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
}

/* Header title ("Pay with Credit/Debit Card") */
[data-sumup-id="widget_header__title"] {
  color: #f6f1eb !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
}

/* Card-brand icons (Visa/Mastercard/Amex) */
[data-sumup-id="widget_header__icon"] img {
  opacity: 0.85 !important;
}

/* Field labels ("Name on card", "Card number", …). These live in the host DOM
 * (the <span> beside each hosted-field iframe), so they ARE stylable. */
[data-sumup-id^="hostedfield--"] label > span {
  color: rgba(246,241,235,0.55) !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
}

/* Submit button — Muralla violet. (Hidden if showSubmitButton:false is set.) */
[data-sumup-id="submit_button"] {
  background: #c8b5d1 !important;
  color: #0c0c12 !important;
  border: none !important;
  border-radius: 12px !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  transition: opacity 0.15s ease !important;
}
[data-sumup-id="submit_button"]:hover { opacity: 0.9 !important; }
[data-sumup-id="submit_button"]:disabled { opacity: 0.4 !important; cursor: default !important; }

/* NOTE: Alternative Payment Method tabs use [data-sumup-id="payment_option"]
 * with [data-sumup-item="<method>"]. Chile (es-CL) currently surfaces no APMs,
 * so no rules are shipped for them. If APMs are enabled later, verify the live
 * structure before styling — do not guess. Example (documented) shape:
 *   [data-sumup-id="payment_option"][data-sumup-item="blik"] { display: none !important; }
 */