/* ═══════════════════════════════════════════════════════════════════════════
   PayOn Copy&Pay Widget — Refined Theme Layer
   ═══════════════════════════════════════════════════════════════════════════
   Scoped under `.copy-pay-checkout` to prevent global leakage.
   Uses only documented wpwl-* selectors (ACI guarantees stability).
   Designed for wpwlOptions.style = "plain".

   See docs/payon_copy_pay_stylekit.md for full documentation.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Design Tokens ─────────────────────────────────────────────────────── */

.copy-pay-checkout {
  /* Typography */
  --cpc-font: var(--mc-font-body, -apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");

  /* Colors — Shopify checkout measured */
  --cpc-ink: #000000;
  --cpc-ink-secondary: #000000;
  --cpc-ink-muted: #707070;
  --cpc-ink-faint: #707070;

  /* Surfaces */
  --cpc-surface: #f5f5f5;
  --cpc-surface-raised: #ffffff;

  /* Borders — Shopify checkout: #DEDEDE */
  --cpc-border: #dedede;
  --cpc-border-strong: #dedede;

  /* Actions — Shopify checkout blue #005BD1 */
  --cpc-action: #005bd1;
  --cpc-action-hover: #004db3;
  --cpc-action-active: #003d94;
  --cpc-focus-ring: rgba(0, 91, 209, 0.15);

  /* Feedback — Shopify checkout error #D91C1C */
  --cpc-error: #d91c1c;
  --cpc-error-ring: rgba(217, 28, 28, 0.1);

  /* Spacing — Shopify checkout measured */
  --cpc-radius: 8px;
  --cpc-input-height: 51px;
  --cpc-input-padding: 13.5px 11px;
  --cpc-group-gap: 12px;

  /* Shadows — Shopify checkout: none */
  --cpc-shadow-button: none;

  border: 1px solid var(--cpc-border);
  border-radius: 8px;
  background: var(--cpc-surface-raised);
  overflow: hidden;
  box-shadow: none;
}

/* ─── Method Row (top bar) ─────────────────────────────────────────────── */

.copy-pay-checkout .cpc-method-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--cpc-border);
  background: var(--cpc-surface);
}

.copy-pay-checkout .cpc-method-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--cpc-action);
  position: relative;
  flex-shrink: 0;
}

.copy-pay-checkout .cpc-method-dot::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cpc-action);
  position: absolute;
  top: 3px;
  left: 3px;
}

.copy-pay-checkout .cpc-method-label {
  color: var(--cpc-ink);
  font-family: var(--cpc-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: normal;
}

.copy-pay-checkout .cpc-method-brands {
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.copy-pay-checkout .cpc-method-brands li {
  margin: 0;
  padding: 0;
}

.copy-pay-checkout .cpc-method-brands .cpc-brand {
  opacity: 0.45;
}

.copy-pay-checkout .cpc-method-brands .cpc-brand.active {
  opacity: 1;
}

.copy-pay-checkout .cpc-method-brands .wpwl-brand {
  display: block;
}

/* ─── Widget Shell (form area) ─────────────────────────────────────────── */

.copy-pay-checkout .cpc-widget-shell {
  background: var(--cpc-surface);
  padding: 16px 18px 18px;
}


/* ─── Form Container ────────────────────────────────────────────────────── */

.copy-pay-checkout .wpwl-form,
.copy-pay-checkout .wpwl-form-card {
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0;
  width: 100% !important;
  max-width: none !important;
}

.copy-pay-checkout .wpwl-container,
.copy-pay-checkout .wpwl-container-card {
  width: 100% !important;
  max-width: none !important;
  border: none !important;
  border-radius: var(--cpc-radius) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.copy-pay-checkout form.paymentWidgets {
  width: 100%;
  max-width: 100%;
}

/* Clearfix */
.copy-pay-checkout .wpwl-form::after,
.copy-pay-checkout .wpwl-form-card::after {
  content: "" !important;
  display: table !important;
  clear: both !important;
}


/* ─── Field Groups (Layout) ─────────────────────────────────────────────── */

.copy-pay-checkout .wpwl-group {
  width: 100% !important;
  float: none !important;
  clear: both !important;
  margin-bottom: var(--cpc-group-gap) !important;
  padding: 0 !important;
}

/* Card Number — full width */
.copy-pay-checkout .wpwl-group-cardNumber {
  width: 100% !important;
}

/* Cardholder — full width */
.copy-pay-checkout .wpwl-group-cardHolder {
  width: 100% !important;
  clear: both !important;
}

/* Expiry + CVV — side by side */
.copy-pay-checkout .wpwl-group-expiry,
.copy-pay-checkout .wpwl-group-cvv {
  width: 48% !important;
  display: inline-block !important;
  float: none !important;
  clear: none !important;
  vertical-align: top !important;
}

.copy-pay-checkout .wpwl-group-expiry {
  margin-right: 4% !important;
}

/* Brand selector — hidden (we use brand detection + custom icons) */
.copy-pay-checkout .wpwl-group-brand {
  display: none !important;
}

/* Submit group */
.copy-pay-checkout .wpwl-group-submit {
  margin-top: 8px;
}


/* ─── Labels (hidden — placeholders used instead, Shopify-style) ────────── */

.copy-pay-checkout .wpwl-label {
  display: none !important;
}


/* ─── Input Wrappers ────────────────────────────────────────────────────── */

.copy-pay-checkout .wpwl-wrapper {
  border-radius: var(--cpc-radius) !important;
  width: 100% !important;
}


/* ─── Input Controls ────────────────────────────────────────────────────── */

.copy-pay-checkout .wpwl-control {
  border: 1px solid var(--cpc-border-strong) !important;
  border-radius: var(--cpc-radius) !important;
  padding: var(--cpc-input-padding) !important;
  height: var(--cpc-input-height) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  font-family: var(--cpc-font) !important;
  background: var(--cpc-surface-raised) !important;
  color: var(--cpc-ink) !important;
  transition: border-color 180ms ease, box-shadow 180ms ease !important;
  box-sizing: border-box !important;
  width: 100% !important;
  outline: none !important;
}

.copy-pay-checkout .wpwl-control::placeholder {
  color: var(--cpc-ink-muted) !important;
  opacity: 1 !important;
  font-weight: 400 !important;
}

/* Focus state — Shopify checkout: 1px border + 1px box-shadow */
.copy-pay-checkout .wpwl-control:focus,
.copy-pay-checkout .wpwl-control-iframe:focus {
  border-color: var(--cpc-action) !important;
  box-shadow: 0 0 0 1px var(--cpc-action) !important;
  outline: none !important;
}


/* ─── Brand Selector (when visible) ─────────────────────────────────────── */

.copy-pay-checkout .wpwl-control-brand,
.copy-pay-checkout .wpwl-group-brand select {
  width: 100% !important;
  border: 1px solid var(--cpc-border-strong) !important;
  border-radius: var(--cpc-radius) !important;
  padding: 21px 30px 6px 11px !important;
  height: var(--cpc-input-height) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  font-family: var(--cpc-font) !important;
  background: var(--cpc-surface-raised) !important;
  color: var(--cpc-ink) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23707070' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 11px center !important;
  transition: border-color 180ms ease, box-shadow 180ms ease !important;
  box-sizing: border-box !important;
}

.copy-pay-checkout .wpwl-control-brand:focus,
.copy-pay-checkout .wpwl-group-brand select:focus {
  border-color: var(--cpc-action) !important;
  box-shadow: 0 0 0 1px var(--cpc-action) !important;
  outline: none !important;
}

.copy-pay-checkout .wpwl-group-brand .wpwl-label {
  display: none !important;
}


/* ─── Error States ──────────────────────────────────────────────────────── */
/* ACI widget puts .wpwl-has-error on the CONTROL itself, not a parent.    */

.copy-pay-checkout .wpwl-control.wpwl-has-error {
  border-color: var(--cpc-error) !important;
}

.copy-pay-checkout .wpwl-control.wpwl-has-error:focus {
  border-color: var(--cpc-error) !important;
  box-shadow: 0 0 0 3px var(--cpc-error-ring) !important;
}

.copy-pay-checkout .wpwl-hint {
  color: var(--cpc-error) !important;
  font-size: 12px !important;
  font-family: var(--cpc-font) !important;
  margin-top: 6px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  display: block !important;
}

.copy-pay-checkout .wpwl-hint:empty {
  display: none !important;
}


/* ─── Brand Detection Icons ─────────────────────────────────────────────── */

.copy-pay-checkout .wpwl-brand-card {
  margin-bottom: 14px !important;
}

/* CVV help icon — size & shape fix for jQuery UI default icon */
.copy-pay-checkout .wpwl-icon {
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--cpc-border) !important;
  border-radius: 6px !important;
  background: var(--cpc-surface-raised) !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: border-color 180ms ease, background-color 180ms ease !important;
}

.copy-pay-checkout .wpwl-icon:hover {
  border-color: var(--cpc-ink-muted) !important;
  background: var(--cpc-surface) !important;
}

.copy-pay-checkout .wpwl-icon .ui-icon-help {
  display: block !important;
  margin: 0 auto !important;
  opacity: 0.6 !important;
  transition: opacity 180ms ease !important;
}

.copy-pay-checkout .wpwl-icon:hover .ui-icon-help {
  opacity: 0.85 !important;
}

.copy-pay-checkout .wpwl-icon .ui-icon-help:focus {
  outline: none !important;
}

.copy-pay-checkout .wpwl-icon:focus-within {
  border-color: var(--cpc-action) !important;
  box-shadow: 0 0 0 1px var(--cpc-action) !important;
  outline: none !important;
}

.copy-pay-checkout .wpwl-icon-cvv {
  top: 50% !important;
  transform: translateY(-50%) !important;
}


/* ─── Custom Brand Icons Container ──────────────────────────────────────── */

.copy-pay-checkout .cpc-brand-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 10px 0 0 0;
  padding: 0;
}

.copy-pay-checkout .cpc-brand {
  opacity: 0.3;
  transition: opacity 200ms ease;
  display: flex;
  align-items: center;
}

.copy-pay-checkout .cpc-brand.active {
  opacity: 1;
}

.copy-pay-checkout .cpc-brand img {
  height: 24px;
  width: auto;
  display: block;
}


/* ─── CVV Hint Image ────────────────────────────────────────────────────── */

.copy-pay-checkout .cpc-cvv-icon {
  height: 24px;
  width: auto;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.35;
  pointer-events: none;
}


/* ─── Pay Button ────────────────────────────────────────────────────────── */

.copy-pay-checkout .wpwl-button-pay {
  background: var(--cpc-action) !important;
  border: 0px none !important;
  border-radius: var(--cpc-radius) !important;
  font-weight: 600 !important;
  padding: 14px !important;
  font-size: 14px !important;
  font-family: var(--cpc-font) !important;
  letter-spacing: normal !important;
  line-height: 1.5 !important;
  text-transform: none !important;
  transition: background-color 180ms ease !important;
  width: 100% !important;
  height: 52px !important;
  cursor: pointer !important;
  box-shadow: none !important;
  margin-top: 8px !important;
  color: white !important;
  text-align: center !important;
}

.copy-pay-checkout .wpwl-button-pay:hover {
  background: var(--cpc-action-hover) !important;
  box-shadow: none !important;
  transform: none;
}

.copy-pay-checkout .wpwl-button-pay:focus {
  outline: rgba(0, 0, 0, 0) solid 2px !important;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--cpc-action) !important;
}

.copy-pay-checkout .wpwl-button-pay:active {
  background: var(--cpc-action-active) !important;
  box-shadow: none !important;
  transform: none;
}

/* Disabled / submitting state */
.copy-pay-checkout .wpwl-button-pay:disabled,
.copy-pay-checkout .wpwl-button-pay[disabled],
.copy-pay-checkout .wpwl-button-error[disabled] {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}


/* ─── "Show other payment methods" Toggle (hidden — both forms shown) ──── */

.copy-pay-checkout .wpwl-button:not(.wpwl-button-pay):not(.wpwl-button-error) {
  display: none !important;
}


/* ─── Saved Cards Section Heading ──────────────────────────────────────── */

.copy-pay-checkout .cpc-saved-cards-heading {
  font-family: var(--cpc-font);
  font-size: 13px;
  font-weight: 400;
  color: var(--cpc-ink-muted);
  text-align: center;
  margin: 20px 0 12px;
  position: relative;
}

.copy-pay-checkout .cpc-saved-cards-heading::before,
.copy-pay-checkout .cpc-saved-cards-heading::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 80px);
  height: 1px;
  background: var(--cpc-border);
}

.copy-pay-checkout .cpc-saved-cards-heading::before {
  left: 0;
}

.copy-pay-checkout .cpc-saved-cards-heading::after {
  right: 0;
}


/* ─── Registration Form Wrappers ───────────────────────────────────────── */

.copy-pay-checkout .wpwl-form-registration,
.copy-pay-checkout .wpwl-form-registrations,
.copy-pay-checkout .wpwl-form.wpwl-form-registrations {
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

.copy-pay-checkout .wpwl-form-registration::after,
.copy-pay-checkout .wpwl-form-registrations::after {
  content: "" !important;
  display: table !important;
  clear: both !important;
}


/* ─── Saved Card Rows ──────────────────────────────────────────────────── */
/* Each .wpwl-group-registration is one saved card.                        */
/* Layout: radio | brand icon | card details (number·expiry + holder)      */

.copy-pay-checkout .wpwl-group-registration {
  border: 1px solid var(--cpc-border) !important;
  border-radius: var(--cpc-radius) !important;
  padding: 0 !important;
  margin: 0 0 8px 0 !important;
  background: var(--cpc-surface-raised) !important;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer !important;
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  clear: both !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* Remove bottom margin on last card before submit button */
.copy-pay-checkout .wpwl-group-registration:has(+ .wpwl-group-submit) {
  margin-bottom: 0 !important;
}

/* Hover — subtle border darken */
.copy-pay-checkout .wpwl-group-registration:not(.wpwl-selected):hover {
  border-color: #b0b0b0 !important;
}

/* Selected card — blue border ring */
.copy-pay-checkout .wpwl-group-registration.wpwl-selected,
.copy-pay-checkout .wpwl-group-registration:has(input[type="radio"]:checked) {
  border-color: var(--cpc-action) !important;
  box-shadow: 0 0 0 1px var(--cpc-action) !important;
  background: var(--cpc-surface-raised) !important;
}

/* Focus/active — suppress widget outlines */
.copy-pay-checkout .wpwl-group-registration:focus,
.copy-pay-checkout .wpwl-group-registration:active,
.copy-pay-checkout .wpwl-group-registration:focus-within {
  outline: none !important;
}

/* Fallback for .wpwl-container-registration if ACI wraps at higher level */
.copy-pay-checkout .wpwl-container-registration {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  overflow: visible !important;
}


/* ─── Card Row Label (flex layout) ─────────────────────────────────────── */

.copy-pay-checkout .wpwl-registration {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 16px 20px !important;
  margin: 0 !important;
  cursor: pointer !important;
  width: 100% !important;
  box-sizing: border-box !important;
}


/* ─── Registration Sub-Wrappers (reset widget float/width defaults) ───── */
/* ACI widget sets float:left on all .wpwl-wrapper-registration elements   */
/* which breaks our flex layout. Override float + width globally.           */

.copy-pay-checkout .wpwl-group-registration .wpwl-wrapper-registration {
  float: none !important;
  clear: none !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
}

.copy-pay-checkout .wpwl-wrapper-registration-registrationId {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.copy-pay-checkout .wpwl-wrapper-registration-brand {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  width: auto !important;
}

.copy-pay-checkout .wpwl-wrapper-registration-brand .wpwl-brand-inline {
  display: block !important;
  width: 38px !important;
  height: 24px !important;
}


/* ─── Card Details (left-aligned with spacing) ────────────────────────── */
/* Layout: **4242  01/29  Holder Name...                                   */

.copy-pay-checkout .wpwl-wrapper-registration-details {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 16px !important;
  width: 0 !important; /* flex: 1 takes over; prevent float-based width */
  overflow: hidden !important;
}

/* Needs 3-class specificity to beat the generic .wpwl-wrapper-registration margin:0 reset */
.copy-pay-checkout .wpwl-group-registration .wpwl-wrapper-registration-details {
  margin-left: 24px !important; /* breathing room between brand icon and card number */
}

/* Specificity must match/exceed the generic .wpwl-wrapper-registration reset */
.copy-pay-checkout .wpwl-group-registration .wpwl-wrapper-registration-number {
  font-family: var(--cpc-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--cpc-ink) !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
  line-height: 1.5 !important;
  width: auto !important;
  flex-shrink: 0 !important;
}

/* Separators and holder hidden — 3-part layout (brand / PAN / expiry) */
.copy-pay-checkout .cpc-separator {
  display: none !important;
}

.copy-pay-checkout .wpwl-group-registration .wpwl-wrapper-registration-expiry {
  font-family: var(--cpc-font) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--cpc-ink-muted) !important;
  white-space: nowrap !important;
  line-height: 1.5 !important;
  width: auto !important;
  flex-shrink: 0 !important;
}

.copy-pay-checkout .wpwl-group-registration .wpwl-wrapper-registration-holder {
  font-family: var(--cpc-font) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--cpc-ink-muted) !important;
  line-height: 1.5 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  min-width: 0 !important;
  flex: 1 !important;
  margin-top: 0 !important;
  width: auto !important;
}


/* ─── Saved Card CVV Input (shown for selected card) ───────────────────── */

.copy-pay-checkout .wpwl-wrapper-registration-cvv {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.copy-pay-checkout .wpwl-wrapper-registration-cvv .wpwl-control {
  width: 80px !important;
  height: 38px !important;
  padding: 8px 10px !important;
  font-size: 14px !important;
  text-align: center !important;
}


/* ─── Custom Radio Buttons ─────────────────────────────────────────────── */

.copy-pay-checkout .wpwl-group-registration input[type="radio"],
.copy-pay-checkout .wpwl-container-registration input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  border: 2px solid var(--cpc-border-strong) !important;
  border-radius: 50% !important;
  background: var(--cpc-surface-raised) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 180ms ease !important;
}

.copy-pay-checkout .wpwl-group-registration input[type="radio"]:checked,
.copy-pay-checkout .wpwl-container-registration input[type="radio"]:checked {
  border-color: var(--cpc-action) !important;
  background: var(--cpc-surface-raised) !important;
  outline: none !important;
  box-shadow: none !important;
}

.copy-pay-checkout .wpwl-group-registration input[type="radio"]:checked::after,
.copy-pay-checkout .wpwl-container-registration input[type="radio"]:checked::after {
  content: "" !important;
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--cpc-action) !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.copy-pay-checkout .wpwl-group-registration input[type="radio"]:focus,
.copy-pay-checkout .wpwl-container-registration input[type="radio"]:focus {
  outline: none !important;
  box-shadow: none !important;
}


/* ─── Registration Brand Icon (inline) ─────────────────────────────────── */

.copy-pay-checkout .wpwl-group-registration .wpwl-brand,
.copy-pay-checkout .wpwl-container-registration .wpwl-brand {
  display: inline-block !important;
  vertical-align: middle !important;
}

.copy-pay-checkout .wpwl-group-registration .wpwl-label,
.copy-pay-checkout .wpwl-container-registration .wpwl-label {
  display: inline !important;
  font-family: var(--cpc-font) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--cpc-ink) !important;
  margin: 0 !important;
  letter-spacing: normal !important;
  line-height: 1.5 !important;
}


/* ─── Registration Submit Button ───────────────────────────────────────── */

.copy-pay-checkout .wpwl-form-registrations .wpwl-group-submit {
  padding: 12px 0 0 !important;
  margin: 0 !important;
  width: 100% !important;
  float: none !important;
  clear: both !important;
  box-sizing: border-box !important;
  border: none !important;
  background: transparent !important;
}

/* Catch-all: suppress widget outlines inside registration rows */
.copy-pay-checkout .wpwl-group-registration *:focus,
.copy-pay-checkout .wpwl-container-registration *:focus {
  outline: none !important;
}


/* ─── 3DS Iframe ────────────────────────────────────────────────────────── */

.copy-pay-checkout .wpwl-container-card {
  overflow: visible !important;
}

.copy-pay-checkout .wpwl-target {
  min-height: auto !important;
}


/* ─── Loading State ─────────────────────────────────────────────────────── */

.copy-pay-checkout .cpc-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 4px 0 10px;
}

.copy-pay-checkout .cpc-loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--cpc-border);
  border-top-color: var(--cpc-action);
  border-radius: 50%;
  animation: cpc-spin 700ms linear infinite;
  margin: 0;
}

.copy-pay-checkout .cpc-loading p {
  font-size: 14px;
  font-weight: 400;
  color: var(--cpc-ink-muted);
  margin: 0;
  font-family: var(--cpc-font);
}

@keyframes cpc-spin {
  to { transform: rotate(360deg); }
}


/* ─── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .copy-pay-checkout .wpwl-group-expiry,
  .copy-pay-checkout .wpwl-group-cvv {
    width: 100% !important;
    display: block !important;
  }

  .copy-pay-checkout .wpwl-group-expiry {
    margin-right: 0 !important;
  }

  /* Saved card rows: allow wrap on narrow screens */
  .copy-pay-checkout .wpwl-registration {
    gap: 12px !important;
    padding: 14px 16px !important;
  }

  .copy-pay-checkout .wpwl-wrapper-registration-details {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .copy-pay-checkout .wpwl-group-registration .wpwl-wrapper-registration-number {
    flex: none !important;
    text-align: left !important;
  }
}


/* ─── Reduced Motion ────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .copy-pay-checkout .wpwl-control,
  .copy-pay-checkout .wpwl-button-pay,
  .copy-pay-checkout .wpwl-group-registration,
  .copy-pay-checkout .cpc-brand {
    transition: none !important;
  }

  .copy-pay-checkout .wpwl-button-pay:hover,
  .copy-pay-checkout .wpwl-button-pay:active {
    transform: none !important;
  }

  .copy-pay-checkout .cpc-loading-spinner {
    animation: none;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */