/* Proprietary, non-commercial license. Copyright CyliumDev. */
/*
 * Checkout payment methods. A theme restyles them by setting the --cyliumpayments-* variables (child theme CSS),
 * or overrides views/templates/hook/checkout.tpl under themes/<theme>/modules/cyliumpayments/.
 * The card fields are PayPal iframes: they read the --cyliumpayments-field-* variables once, when they load.
 */
/* The variables also reach the express shortcuts, which share the overlay. */
.cyliumpayments-checkout,
.cyliumpayments-express {
  --cyliumpayments-gap: .75rem;
  --cyliumpayments-radius: .375rem;
  --cyliumpayments-max-width: 32rem;
  --cyliumpayments-muted: #6c757d;
  --cyliumpayments-error: #dc3545;
  --cyliumpayments-success: #198754;
  --cyliumpayments-overlay: rgba(255, 255, 255, .72);
  --cyliumpayments-spinner: currentColor;
  --cyliumpayments-field-font-size: 16px;
  --cyliumpayments-field-color: #222222;
  --cyliumpayments-field-padding: .75rem;
  --cyliumpayments-field-border: 1px solid #ced4da;
  --cyliumpayments-field-focus-border: 1px solid #86b7fe;
  --cyliumpayments-field-radius: .375rem;
  --cyliumpayments-pay-width: 100%;
  position: relative;
}
.cyliumpayments-checkout { max-width: var(--cyliumpayments-max-width); padding: var(--cyliumpayments-gap) 0; }
.cyliumpayments-content { min-height: 3rem; }
.cyliumpayments-status { margin: var(--cyliumpayments-gap) 0 0; font-size: .95rem; }
.cyliumpayments-status:empty { display: none; }
.cyliumpayments-checkout[data-status="declined"] .cyliumpayments-status,
.cyliumpayments-checkout[data-status="failed"] .cyliumpayments-status,
.cyliumpayments-checkout[data-status="error"] .cyliumpayments-status,
.cyliumpayments-checkout[data-status="unavailable"] .cyliumpayments-status { color: var(--cyliumpayments-error); }
.cyliumpayments-checkout[data-status="loading"] .cyliumpayments-status,
.cyliumpayments-checkout[data-status="processing"] .cyliumpayments-status,
.cyliumpayments-checkout[data-status="terms"] .cyliumpayments-status { color: var(--cyliumpayments-muted); }

/* Card: the PayPal iframes draw their own field; the holders only lay them out. */
.cyliumpayments-card { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--cyliumpayments-gap); }
.cyliumpayments-card-field { min-width: 0; margin: 0; padding: 0; border: 0; background: none; }
.cyliumpayments-card-field--cardNumber { grid-column: 1 / -1; }
.cyliumpayments-card-field iframe { display: block; width: 100% !important; }
@media (max-width: 359px) { .cyliumpayments-card { grid-template-columns: 1fr; } }

/* Pay button: the theme's .btn-primary, full width by default. */
.cyliumpayments-pay { width: var(--cyliumpayments-pay-width); margin-top: calc(var(--cyliumpayments-gap) / 2); }
.cyliumpayments-pay:disabled { cursor: not-allowed; }
/* Theme button for PayPal: the theme's look with PayPal's logo, never recoloured. */
.cyliumpayments-pay--paypal { display: inline-flex; align-items: center; justify-content: center; gap: .4em; }
.cyliumpayments-paypal-logo { display: block; width: auto; height: var(--cyliumpayments-paypal-logo-height, 1.4em); }
.cyliumpayments-content apple-pay-button { --apple-pay-button-width: 100%; --apple-pay-button-height: 48px; --apple-pay-button-border-radius: var(--cyliumpayments-radius); width: 100%; }

/* Busy: an overlay with a spinner covers the method while the server or the provider works. */
.cyliumpayments-overlay { position: absolute; inset: 0; z-index: 2; display: none; align-items: center; justify-content: center; border-radius: var(--cyliumpayments-radius); background: var(--cyliumpayments-overlay); }
.cyliumpayments-checkout.is-busy .cyliumpayments-overlay,
.cyliumpayments-express.is-busy > .cyliumpayments-overlay { display: flex; }
.cyliumpayments-checkout.is-busy .cyliumpayments-content { pointer-events: none; }
.cyliumpayments-spinner { width: 2.25rem; height: 2.25rem; border: .25rem solid var(--cyliumpayments-spinner); border-right-color: transparent; border-radius: 50%; opacity: .75; animation: cyliumpayments-spin .75s linear infinite; }
@keyframes cyliumpayments-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cyliumpayments-spinner { animation-duration: 2s; } }

/* Terms not accepted yet: wallet buttons look and behave disabled (PayPal buttons are disabled by the SDK). */
.cyliumpayments-terms-pending:not([data-method="card"]) .cyliumpayments-content { opacity: .5; pointer-events: none; filter: grayscale(.6); }

/* Pay Later messages (PayPal's own wording and look). PayPal writes white text for « dark »: the page gives the background. */
.cyliumpayments-paylater-message { margin: calc(var(--cyliumpayments-gap, .75rem) / 2) 0; }
.cyliumpayments-paylater-message:empty { margin: 0; }
/* Legal credit warning next to a credit offer (pay later); the provider's own message may stand in for it. */
.cyliumpayments-credit-warning { flex-basis: 100%; margin: .25rem 0; font-size: var(--cyliumpayments-credit-warning-size, .8125rem); }
.cyliumpayments-credit-warning[hidden] { display: none; }
/* Banners (home page, categories): PayPal's wide banner flexes up to 1129 px; the theme can set the gap and side inset. */
.cyliumpayments-paylater-message[data-style="banner"] {
  max-width: var(--cyliumpayments-banner-width, 1129px);
  margin: var(--cyliumpayments-banner-gap, 1rem) auto;
  padding-inline: var(--cyliumpayments-banner-inset, 0);
}
.cyliumpayments-paylater-message[data-style="banner"]:empty { margin: 0 auto; }
.cyliumpayments-paylater-message[data-style="dark"] {
  padding: .5rem .75rem;
  border-radius: var(--cyliumpayments-radius, .375rem);
  background: var(--cyliumpayments-paylater-dark, #1a1a1a);
}
/* Scalapay's widget with its credit warning; it lays itself out on its width: narrow, its logo goes above the amount. */
.cyliumpayments-scalapay-widget { margin: .5rem 0; }
.cyliumpayments-scalapay-widget[hidden] { display: none; }
.cyliumpayments-scalapay-widget--stacked scalapay-widget { display: block; max-width: var(--cyliumpayments-scalapay-stacked-width, 17.5rem); }