/*
 * PayPlus hosted fields: the CSS that survives the SDK's DOM swap.
 * Proven on sacredrop.com production (2026-07-03 root-cause session).
 *
 * The rules that matter (see ../../03-hosted-fields.md):
 *  1. The SDK REPLACES each target div with
 *       <span class="__payplus_hosted_fields_item_fld-wrapper"><iframe class="<your div's classes>">
 *     It copies the div's CLASSES onto the iframe and DROPS its id and inline styles.
 *     So style the box with a CLASS (.pp-hf-box) and the SDK wrapper span. Never use inline
 *     styles, and never use `#payplus-cc iframe`, because nothing matches it after mount.
 *  2. color-scheme on the iframe ELEMENT must be `light`. The PayPlus iframe document declares
 *     no scheme (= light). On a mismatch, Chrome paints an opaque WHITE backdrop behind the
 *     cross-origin iframe ("white pill" fields on a dark theme).
 *  3. Iframes boot unstyled for a beat. Keep them at opacity 0 until the session is ready
 *     (.pp-hf-ready), then fade them in. Otherwise the fields flash white or change design.
 *
 * Theme tokens: override these on any ancestor.
 */
:root {
  --pp-hf-height: 48px;
  --pp-hf-bg: rgba(255, 255, 255, 0.08);
  --pp-hf-border: rgba(255, 255, 255, 0.12);
  --pp-hf-border-error: #b04a3a;
  --pp-hf-radius: 4px;
}

/* The box: the pre-mount div AND the SDK's post-mount wrapper span share one look. */
div.pp-hf-box,
.__payplus_hosted_fields_item_fld-wrapper {
  display: block !important;
  position: relative;
  width: 100% !important;
  height: var(--pp-hf-height) !important;
  overflow: hidden !important;
  background: var(--pp-hf-bg) !important;
  border: 1px solid var(--pp-hf-border) !important;
  border-radius: var(--pp-hf-radius) !important;
  box-sizing: border-box;
}

/* The iframe itself carries .pp-hf-box (copied from the div) plus the SDK class. */
iframe.pp-hf-box,
.__payplus_hosted_fields_item_fld-frame {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-height: calc(var(--pp-hf-height) - 2px) !important; /* wrapper height includes its 1px borders */
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  color-scheme: light !important; /* NEVER dark. See rule 2. */
  opacity: 0;
  transition: opacity 320ms ease;
}
.pp-hf-ready iframe.pp-hf-box,
.pp-hf-ready .__payplus_hosted_fields_item_fld-frame {
  opacity: 1;
}

/* The SDK adds this class to an iframe whose field failed validation. */
.__payplus_hosted_fields_err_fld {
  outline: 1px solid var(--pp-hf-border-error) !important;
}

/* Loading shimmer while the secure session opens, so the wait reads as loading. */
.pp-hf-loading div.pp-hf-box::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
  animation: pp-hf-shimmer 1.4s ease infinite;
  pointer-events: none;
}
@keyframes pp-hf-shimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

/* Off-screen holder for SDK-mapped fields you don't want shown (customer_name, email, phone...).
   Use this, not display:none. The SDK hides a mapped wrapper that the payment page doesn't use,
   and the inputs still have to exist. */
.pp-offscreen {
  /* Visually hidden, NOT display:none. No big left offset: in RTL pages "left:-9999px" creates ~10,000px of
     horizontal scroll (caught on pay.braillevibes.com, 2026-10-07). */
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden !important;
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
}