/* Delivery / 90-day guarantee / Buy Now Pay Later popups shared by every
   Multi-Buy Bundle template (markup: usp-modals.php, behaviour:
   js/usp-modals.js). Rules copied from assets/css/product.css
   (.pdp-payment-modal / .pdp-delivery-modal) so they look identical to the
   real PDP's popups, scoped to .vsb-usp-modal because product.css isn't
   loaded on every page a bundle renders on (landing pages, API embed).
   Enqueued on-site by shortcode.php; in the API embed the template JS
   injects it (see ensureUspModals() in js/template_a.js / template_b.js). Keep in sync with
   product.css. */
.vsb-usp-modal {
  /* Popups are moved to <body>; set the site font so an embedding page's
     own font (API embed) doesn't take over. */
  font-family: 'Ysabeau Office', 'Ysabeau', system-ui, sans-serif;
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.vsb-usp-modal.is-open {
  display: flex;
}
.vsb-usp-modal .pdp-payment-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  cursor: pointer;
}
.vsb-usp-modal .pdp-payment-modal__box {
  position: relative;
  background: #fff;
  border-radius: 8px;
  padding: 36px 32px 32px;
  max-width: 480px;
  width: calc(100% - 32px);
  max-height: 90vh;
  overflow-y: auto;
}
.vsb-usp-modal .pdp-payment-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: var(--text, #212121);
  line-height: 0;
}
.vsb-usp-modal .pdp-payment-modal__close svg { width: 20px; height: 20px; }
.vsb-usp-modal .pdp-payment-modal__close:hover { color: var(--black, #212121); }
.vsb-usp-modal .pdp-payment-modal__logo { margin-bottom: 16px; }
.vsb-usp-modal .pdp-payment-modal__logo img { height: 44px; width: auto; }
.vsb-usp-modal .pdp-payment-modal__title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--black, #212121);
}
.vsb-usp-modal .pdp-payment-modal__intro {
  font-size: 14px;
  color: var(--text, #212121);
  line-height: 1.6;
  margin: 0 0 16px;
}
.vsb-usp-modal .pdp-payment-modal__steps {
  font-size: 14px;
  color: var(--black, #212121);
  line-height: 1.7;
  margin: 0 0 20px;
  padding-left: 20px;
}
.vsb-usp-modal .pdp-payment-modal__note {
  font-size: 11px;
  color: var(--text, #212121);
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 600px) {
  /* max-height:90vh above isn't enough on mobile — many mobile browsers
     size `vh` against the LARGEST possible viewport (address bar hidden),
     so the visible margin shrinks toward zero when the address bar is
     showing, leaving the box edge-to-edge with no backdrop to tap and
     close. Force a real margin with an explicit height cap instead. */
  .vsb-usp-modal .pdp-payment-modal__box {
    margin: 32px 0;
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
  }
}

/* ── Delivery info modal rows ─────────────────────────────────────────────── */
.vsb-usp-modal .pdp-delivery-modal__rows {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 16px;
}
.vsb-usp-modal .pdp-delivery-modal__row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.vsb-usp-modal .pdp-delivery-modal__icon {
  flex-shrink: 0;
  width: 22px;
  padding-top: 2px;
}
.vsb-usp-modal .pdp-delivery-modal__icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--black, #212121);
}
.vsb-usp-modal .pdp-delivery-modal__row strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
  color: var(--black, #212121);
}
.vsb-usp-modal .pdp-delivery-modal__row p {
  font-size: 13px;
  color: var(--text, #212121);
  margin: 0 0 4px;
  line-height: 1.5;
}
.vsb-usp-modal .pdp-delivery-modal__note {
  font-size: 11px;
  color: var(--text, #212121);
  margin: 2px 0 0;
  line-height: 1.5;
}

/* Payment popup panels (Clearpay / Klarna): a trigger can show just one
   (data-vsb-usp-panel), otherwise both, spaced apart. */
.vsb-usp-modal .pdp-payment-modal__content[hidden] { display: none; }
.vsb-usp-modal .pdp-payment-modal__content:not([hidden]) ~ .pdp-payment-modal__content:not([hidden]) { margin-top: 28px; }