.paypal-messaging {
  margin-top: 12px;
  padding: 12px;
  --paypal-messaging-background: #ffffff;
  --paypal-messaging-foreground: #000000;
  background-color: var(--paypal-messaging-background);
  color: var(--paypal-messaging-foreground);
  text-align: left;
  max-width: 100%;
}

/* Theme selection is controlled by the admin setting. Adaptive mode also
   consults the shopper's browser/device preference. */
.paypal-messaging[data-theme="dark"] {
  /* Matches the dark messaging surface in the approved design. */
  --paypal-messaging-background: #4a4a4a;
  --paypal-messaging-foreground: #ffffff;
}

@media (prefers-color-scheme: dark) {
  .paypal-messaging[data-theme="adaptive"] {
    --paypal-messaging-background: #4a4a4a;
    --paypal-messaging-foreground: #ffffff;
  }
}

.paypal-messaging[data-theme="dark"] .paypal-messaging__link,
.paypal-messaging[data-theme="dark"] .paypal-messaging__link:link,
.paypal-messaging[data-theme="dark"] .paypal-messaging__link:visited {
  color: #c7c7c7 !important;
}

@media (prefers-color-scheme: dark) {
  .paypal-messaging[data-theme="adaptive"] .paypal-messaging__link,
  .paypal-messaging[data-theme="adaptive"] .paypal-messaging__link:link,
  .paypal-messaging[data-theme="adaptive"] .paypal-messaging__link:visited {
    color: #c7c7c7 !important;
  }
}

/* Scoped reset: keep the host theme's CSS from leaking box-model rules into
   the module. Only box-sizing is reset universally; everything else is locked
   on the specific elements below so the module renders consistently across
   every storefront theme. */
.paypal-messaging,
.paypal-messaging * {
  box-sizing: border-box;
}

/* Only the standalone "Pay Later below Price" block shrinks to its content.
   The button-attached messages (data-context="pdp-button"/"cart-button") and
   the selling-plan info box keep the default full width so they line up with
   the buttons above them. */
.paypal-messaging:not([data-context]):not(.paypal-selling-plan-info) {
  width: fit-content;
}

/* Layout-critical properties are flagged !important so a store's theme cannot
   shift the row, resize the icons, or break the vertical alignment of the
   "i" info icon against the messaging text. */
.paypal-messaging__content {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: inherit;
  font-weight: 400;
  font-style: normal;
  color: inherit;
  line-height: 1.4 !important;
  text-align: left;
}

.paypal-messaging .paypal-messaging__icon {
  display: block !important;
  height: 1em !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  min-height: 0 !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  float: none !important;
  position: static !important;
  inset: auto !important;
  align-self: center !important;
  box-shadow: none !important;
  transform: none !important;
  vertical-align: middle !important;
}

.paypal-messaging .paypal-messaging__icon[hidden] {
  display: none !important;
}

/* When the card hosts the rewards row (UK dev feature, PPSKWKS-363), the main
   PayPal icon keeps its 1em visual size but reserves the same 1.875em slot
   width as the rewards Lottie player, so both rows' text columns line up
   without inflating the icon. Scoped via :has() to cards that actually render
   the row — every other surface keeps the rule above untouched. */
/* Static rewards trophy: black for light cards, white for dark ones. Adaptive
   cards follow the shopper's system setting. !important because themes
   commonly set `img { display: block }`. */
.paypal-messaging .paypal-cta-animation__static--dark {
  display: none !important;
}

.paypal-messaging[data-theme="dark"] .paypal-cta-animation__static--light {
  display: none !important;
}

.paypal-messaging[data-theme="dark"] .paypal-cta-animation__static--dark {
  display: block !important;
}

@media (prefers-color-scheme: dark) {
  .paypal-messaging[data-theme="adaptive"] .paypal-cta-animation__static--light {
    display: none !important;
  }

  .paypal-messaging[data-theme="adaptive"] .paypal-cta-animation__static--dark {
    display: block !important;
  }
}

/* The static icon and its animated twin swap via the `hidden` attribute.
   Themes commonly declare `img { display: block }`, which beats the user-agent
   `[hidden]` rule and would show both logos at once, so pin it. */
.paypal-messaging .paypal-messaging__icon[hidden],
.paypal-messaging .paypal-messaging__icon-animated[hidden] {
  display: none !important;
}

.paypal-messaging:has(.paypal-cta-animation) .paypal-messaging__icon {
  width: 1.875em !important;
  object-fit: contain;
}

.paypal-messaging__text {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  line-height: inherit;
}

.paypal-messaging__text strong {
  font-weight: 700 !important;
}

/* "Learn more" is rendered as an <a> by the JS. Without an explicit rule it
   inherits each theme's link styling (unstyled on some pages, blue + underline
   on others). Lock it to a single, consistent treatment: bold + underline so
   it clearly reads as a link on every storefront, regardless of theme. */
.paypal-messaging__link,
.paypal-messaging__link:link,
.paypal-messaging__link:visited {
  font-weight: 700 !important;
  color: inherit !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  cursor: pointer;
}

.paypal-messaging__link:hover,
.paypal-messaging__link:focus {
  color: inherit !important;
  text-decoration: underline !important;
}

/* Pinned like the button wordmark: theme image rules (margins, position,
   vertical-align, display: block) would lift it off the text line. */
.paypal-messaging .paypal-messaging__inline-logo {
  display: inline-block !important;
  height: 1em !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  float: none !important;
  position: static !important;
  inset: auto !important;
  box-shadow: none !important;
  transform: none !important;
  vertical-align: -0.2em !important;
}

/* The info icon scales with the chosen font size (1em) instead of a fixed
   16px, so it stays proportional and aligned at every selectable size. */
.paypal-messaging__info {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 1em !important;
  height: 1em !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 0 4px !important;
  line-height: 1 !important;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
}

.paypal-messaging__info:hover {
  opacity: 1;
}

.paypal-messaging__info svg {
  width: 1em !important;
  height: 1em !important;
  display: block !important;
  vertical-align: middle;
}

/* Merchant themes commonly ship global fill rules (`svg { fill: #000 }`,
   `button svg { fill: currentColor }`). The info icon's `fill="none"` is a
   presentation ATTRIBUTE, which loses to any CSS rule, so such themes paint
   the ring as a solid disc. Pin the transparent background on the svg and on
   every shape without its own fill, and re-pin the explicitly-painted parts
   (the "i" dot) to currentColor, all behind specific selectors + !important
   so third-party rules can't override them. */
.paypal-messaging .paypal-messaging__info svg,
.paypal-messaging .paypal-messaging__info svg circle:not([fill]),
.paypal-messaging .paypal-messaging__info svg path:not([fill]) {
  fill: transparent !important;
}

.paypal-messaging .paypal-messaging__info svg [fill="currentColor"] {
  fill: currentColor !important;
}

.paypal-messaging__modal {
  margin-top: 8px;
}

.paypal-messaging__skeleton {
  display: inline-block;
  width: 260px;
  height: 1em;
  border-radius: 4px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: paypal-shimmer 1.4s infinite;
  vertical-align: middle;
}

@keyframes paypal-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}