/* RefluxGuard Phase 1 - P3 purchase protection block (WP4, FP3 changes). Prefix rgp1-prot. Tokens come from rgp1-base.css.
   Contexts (data-context): product, cart, checkout, lp, home. Variants (data-variant): --full (title and list),
   --compact (hero line: inline flow, wraps like a sentence). Selectors use two classes so they win over Elementor kit
   rules without !important.
   Targets (FP3, review finding 15): every link in the block is at least --rgp1-prot-tap high: 24 px on desktop, 44 px on
   phones (<= 599 px). The size comes from min-height, not from a larger type size. */

.rgp1-prot {
  --rgp1-prot-tap: 24px;
  box-sizing: border-box;
  clear: both; /* WooCommerce floats #place_order and the cart buttons; the block always starts below them */
  max-width: 100%;
  margin: var(--rgp1-s4) 0 0;
  padding: var(--rgp1-s3) var(--rgp1-s4);
  background: var(--rgp1-c-bg-alt);
  border: 1px solid var(--rgp1-c-border);
  border-left: 4px solid var(--rgp1-c-primary);
  border-radius: var(--rgp1-radius);
  color: var(--rgp1-c-text);
  font-size: var(--rgp1-fs-sm);
  line-height: 1.5;
  text-align: left;
}

.rgp1-prot .rgp1-prot__title {
  margin: 0 0 var(--rgp1-s2);
  padding: 0;
  color: var(--rgp1-c-primary);
  font-family: inherit;
  font-size: var(--rgp1-fs-md);
  font-weight: 700;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
}

.rgp1-prot .rgp1-prot__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rgp1-prot .rgp1-prot__list > li {
  margin: 0;
  padding: var(--rgp1-s1) 0;
  color: var(--rgp1-c-text);
  font-family: inherit;
  font-size: var(--rgp1-fs-sm);
  line-height: 1.5;
}

.rgp1-prot .rgp1-prot__list > li + li {
  border-top: 1px solid var(--rgp1-c-border);
}

.rgp1-prot .rgp1-prot__list a {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-height: var(--rgp1-prot-tap);
  margin: 0;
  padding: 0;
  color: var(--rgp1-c-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.rgp1-prot .rgp1-prot__list a:hover,
.rgp1-prot .rgp1-prot__list a:focus-visible {
  color: #1b2b40;
}

.rgp1-prot .rgp1-prot__list a:focus-visible {
  outline: 3px solid var(--rgp1-c-accent);
  outline-offset: 2px;
}

/* help item printed by P5 (rgp1/render/chat_link): same type size as the rest of the list; P5's own rule asks for a
   16 px link, inside this block it follows the list (the target size is the same --rgp1-prot-tap as every other link) */
.rgp1-prot .rgp1-prot__list .rgp1-chat-link {
  display: inline-flex;
  min-height: var(--rgp1-prot-tap);
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: 600;
  line-height: inherit;
}

/* compact (hero line): one inline flow so that the line wraps like a sentence; separators drawn by CSS (no text nodes) */
.rgp1-prot.rgp1-prot--compact {
  margin: var(--rgp1-s3) 0 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.rgp1-prot.rgp1-prot--compact .rgp1-prot__list {
  display: block;
}

.rgp1-prot.rgp1-prot--compact .rgp1-prot__list > li {
  display: inline;
  padding: 0;
  border-top: 0;
}

.rgp1-prot.rgp1-prot--compact .rgp1-prot__list > li:not(:last-child)::after {
  content: "\00B7";
  margin: 0 var(--rgp1-s2);
  color: var(--rgp1-c-muted);
}

/* desktop: the line box equals the text (line-height normal) and the 24 px target of the link grows downward from the
   text, so that the line is one clean row: the top of the text, of the link box and of the line are the same */
@media (min-width: 600px) {
  .rgp1-prot.rgp1-prot--compact .rgp1-prot__list,
  .rgp1-prot.rgp1-prot--compact .rgp1-prot__list > li,
  .rgp1-prot.rgp1-prot--compact .rgp1-prot__list a {
    line-height: normal;
  }

  .rgp1-prot.rgp1-prot--compact .rgp1-prot__list a {
    display: inline-block;
    vertical-align: baseline;
  }
}

/* home: the full block is a direct child of the page wrapper (P1 band), so it gets the page's content width */
.rgp1-prot--full[data-context="home"] {
  width: calc(100% - 2 * var(--rgp1-s4));
  max-width: 1140px;
  margin: var(--rgp1-s4) auto;
}

/* cart: below the checkout button inside div.cart_totals */
.cart_totals .rgp1-prot {
  clear: both;
  margin-top: var(--rgp1-s4);
}

/* checkout, every position: kept short so that the page stays compact. Inside #payment (positions after_buttons and
   under_place_order) the block is below the Place order button and the gateway buttons; outside #payment (position
   after_review) it sits between the order review table and the payment box and keeps room below. */
.rgp1-prot--full[data-context="checkout"],
#payment .rgp1-prot {
  margin: var(--rgp1-s3) 0 0;
  padding: var(--rgp1-s2) var(--rgp1-s3);
}

.rgp1-prot--full[data-context="checkout"] {
  margin-bottom: var(--rgp1-s4);
}

#payment .rgp1-prot {
  margin-bottom: 0;
}

.rgp1-prot--full[data-context="checkout"] .rgp1-prot__title,
#payment .rgp1-prot .rgp1-prot__title {
  margin-bottom: var(--rgp1-s1);
  font-size: var(--rgp1-fs-sm);
}

.rgp1-prot--full[data-context="checkout"] .rgp1-prot__list > li,
#payment .rgp1-prot .rgp1-prot__list > li {
  padding: 2px 0;
  font-size: 13px;
  line-height: 1.4;
}

/* the Place order button is floated right on wide screens: clearance swallows the margin, so shift the block down
   visually and give the following content the same space back */
@media (min-width: 600px) {
  #payment .rgp1-prot {
    position: relative;
    top: var(--rgp1-s3);
    margin-bottom: var(--rgp1-s3);
  }
}

/* totals table row (approved shipping text only) */
.rgp1-prot-ship td {
  color: var(--rgp1-c-text);
  font-size: var(--rgp1-fs-sm);
  text-align: left;
}

@media (max-width: 599px) {
  .rgp1-prot {
    --rgp1-prot-tap: var(--rgp1-tap);
    padding: var(--rgp1-s3);
  }

  .rgp1-prot .rgp1-prot__list > li {
    padding: var(--rgp1-s2) 0;
  }

  /* full variant: items that are or end in a 44 px link; the link carries the height, not the padding */
  .rgp1-prot--full .rgp1-prot__list > li[data-item="returns"],
  .rgp1-prot--full .rgp1-prot__list > li[data-item="help"] {
    padding: 0;
  }

  .rgp1-prot--full .rgp1-prot__list > li[data-item="warranty"] {
    padding: var(--rgp1-s2) 0 0;
  }

  /* full variant on phones: the link-only items (returns, help) share one row when they fit, so that the block stays
     compact with 44 px targets; the DOM order is the visual order (shipping, warranty, returns, help) */
  .rgp1-prot--full .rgp1-prot__list {
    display: flex;
    flex-wrap: wrap;
  }

  .rgp1-prot--full .rgp1-prot__list > li {
    flex: 1 1 100%;
    min-width: 0;
  }

  .rgp1-prot--full .rgp1-prot__list > li[data-item="returns"],
  .rgp1-prot--full .rgp1-prot__list > li[data-item="help"] {
    flex: 1 1 auto;
  }

  .rgp1-prot--full[data-context="checkout"],
  #payment .rgp1-prot {
    padding: 6px var(--rgp1-s3);
  }

  .rgp1-prot--full[data-context="checkout"] .rgp1-prot__title,
  #payment .rgp1-prot .rgp1-prot__title {
    margin-bottom: 2px;
  }

  .rgp1-prot--full[data-context="checkout"] .rgp1-prot__list > li,
  #payment .rgp1-prot .rgp1-prot__list > li {
    padding: 2px 0;
    font-size: 13px;
    line-height: 1.35;
  }

  .rgp1-prot--full[data-context="checkout"] .rgp1-prot__list > li[data-item="returns"],
  .rgp1-prot--full[data-context="checkout"] .rgp1-prot__list > li[data-item="help"],
  #payment .rgp1-prot--full .rgp1-prot__list > li[data-item="returns"],
  #payment .rgp1-prot--full .rgp1-prot__list > li[data-item="help"] {
    padding: 0;
  }

  .rgp1-prot--full[data-context="checkout"] .rgp1-prot__list > li[data-item="warranty"],
  #payment .rgp1-prot--full .rgp1-prot__list > li[data-item="warranty"] {
    padding: 2px 0 0;
  }
}