/*
 * Peprise Core — the few styles the plugin needs to be safe on its own.
 *
 * Nearly all of the site's appearance lives in the Peprise theme's stylesheet.
 * What is here covers the one thing the plugin draws into pages by itself:
 * the placeholder that replaces a price for a visitor who has not signed in.
 * If the theme is ever swapped out, a hidden price should still look
 * deliberate rather than broken.
 */

/* Toned as a state, matching the theme's rule. This is a readout, not a link:
   it was accent-coloured while it was an <a>, and the accent is this site's
   link colour. Keep the two copies saying the same thing - this one loads
   after the theme's, so a disagreement here silently wins. */
/* Paired products share the storefront's cart surfaces and product imagery. */
.pep-paired-offer {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  margin-block: 0 28px;
  padding: 20px 22px;
  border: 1px solid var(--line, #e2e5e8);
  border-radius: var(--radius-panel, 16px);
  background: var(--surface, #f9fafc);
  color: var(--ink, #141b24);
}
.pep-paired-offer--with-image { grid-template-columns: 80px minmax(0, 1fr) auto; }
.pep-paired-offer__image { display: block; width: 80px; aspect-ratio: 4 / 5; }
.pep-paired-offer__image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pep-paired-offer__copy { min-width: 0; }
.pep-paired-offer h2 { margin: 0 0 6px; font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; }
.pep-paired-offer__copy p { margin: 0; color: var(--muted, #4a545d); font-size: 14px; line-height: 1.5; }
.pep-paired-offer__copy .pep-paired-offer__meta { margin-bottom: 8px; font-family: var(--font-mono, monospace); font-size: 12px; color: var(--faint, #656d74); }
.pep-paired-offer__copy a { white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.pep-paired-offer__purchase { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.pep-paired-offer__price { margin: 0; font-size: 22px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pep-paired-offer__price strong { font-weight: 600; }
.pep-paired-offer__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.pep-paired-offer__actions form { margin: 0; }
.pep-paired-offer__actions .pep-btn { min-height: 44px; }
.pep-paired-offer__decline { background: none; border: 0; padding: 10px 0; min-height: 44px; color: var(--muted, #4a545d); font: inherit; font-size: 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.pep-paired-offer__decline:hover { color: var(--ink, #141b24); }
.pep-paired-offer__decline:focus-visible { outline: 2px solid var(--focus-ring, #007583); outline-offset: 4px; }
@media (max-width: 740px) {
  .pep-paired-offer { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 18px; }
  .pep-paired-offer--with-image { grid-template-columns: 64px minmax(0, 1fr); }
  .pep-paired-offer__image { width: 64px; }
  .pep-paired-offer h2 { font-size: 18px; }
  .pep-paired-offer__purchase { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line, #e2e5e8); }
  .pep-paired-offer__actions { gap: 12px; }
}

.pep-price-locked {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted, #4a545d);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}

.pep-price-locked__bars {
  width: 46px;
  height: 14px;
  flex: none;
  border: 1px solid var(--line, #e2e5e8);
  border-radius: 4px;
  background: repeating-linear-gradient(
    -45deg,
    var(--surface2, #f0f2f4) 0 4px,
    var(--bg, #ffffff) 4px 8px
  );
}

/* The Send button while a question is in flight. */
.pep-btn.is-busy {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

/* --- The compliance block above the pay button ----------------------------
   Research-use restriction, US-only shipping, the card statement descriptor,
   and every policy link, immediately before someone hands over a card. Card
   processors look for exactly this at exactly this point, and the statement
   descriptor line here is the cheapest chargeback prevention available -
   most disputes start with somebody not recognising a line on a statement. */

.pep-checkout-legal {
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 1px solid var(--line, #e2e5e8);
  border-radius: 10px;
  background: var(--surface, #f9fafc);
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted, #4a545d);
}

.pep-checkout-legal__row { margin: 0 0 8px; }
.pep-checkout-legal__row:last-child { margin-bottom: 0; }
.pep-checkout-legal strong { color: var(--ink, #141b24); font-weight: 600; }

.pep-checkout-legal__links {
  margin: 12px 0 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line, #e2e5e8);
}

.pep-checkout-legal__links a {
  color: var(--accent-deep, #007583);
  text-decoration: underline;
  text-underline-offset: 2px;
  /* Six links wrapping onto three lines need room between them, or they
     become one continuous tap target on a phone. */
  display: inline-block;
  padding: 3px 0;
}