/* Coupon Codes — offers a shopper can take, and a code they can copy.
 *
 * Three looks over one content model: a list of offers, a torn ticket, or a
 * banner. The script only copies; everything the eye sees is CSS, so the codes
 * are readable and selectable even if the script never arrives.
 *
 * The copy glyph is two bordered squares rather than an icon, and the ticket's
 * notches are two radial masks rather than overlaid circles — both cost the
 * Liquid budget nothing and both survive any background the merchant picks.
 */

.pb-cpn {
  font-family: inherit;
  margin-block: var(--pb-cpn-st, 0) var(--pb-cpn-sb, 0);
  color: var(--pb-cpn-fg, #1a1a1a);
}

.pb-cpn__box {
  background: var(--pb-cpn-bg, #f7f8fa);
  border-radius: var(--pb-cpn-r, 10px);
  padding: var(--pb-cpn-p, 18px);
}
.pb-cpn--dashed .pb-cpn__box { border: var(--pb-cpn-bw, 1px) dashed var(--pb-cpn-bc, #c5c5c5); }
.pb-cpn--solid .pb-cpn__box { border: var(--pb-cpn-bw, 1px) solid var(--pb-cpn-bc, #c5c5c5); }
.pb-cpn--bare .pb-cpn__box { background: none; padding: 0; border: 0; }

/* ── heading ─────────────────────────────────────────────────────────── */

.pb-cpn__head {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin: 0 0 0.9em;
}
.pb-cpn--center .pb-cpn__head { justify-content: center; }

.pb-cpn__head .pbi { --pbi-s: var(--pb-cpn-is, 26px); --pbi-c: var(--pb-cpn-hc, currentColor); }
.pb-cpn__art { height: var(--pb-cpn-is, 26px); width: auto; max-width: calc(var(--pb-cpn-is, 26px) * 2.2); object-fit: contain; flex: 0 0 auto; }

.pb-cpn__title {
  margin: 0;
  font-size: var(--pb-cpn-ts, 19px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--pb-cpn-hc, inherit);
}

/* The highlighter sits behind the words and follows them onto a second line,
   which is what box-decoration-break is for. */
.pb-cpn__mark {
  background-image: linear-gradient(var(--pb-cpn-mk, #fde047), var(--pb-cpn-mk, #fde047));
  background-repeat: no-repeat;
  background-position: 0 0.08em;
  background-size: 100% 0.92em;
  padding-inline: 0.18em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ── the offers ──────────────────────────────────────────────────────── */

.pb-cpn__list { display: grid; gap: var(--pb-cpn-g, 14px); }

.pb-cpn__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
  min-width: 0;
}
.pb-cpn__txt { min-width: 0; font-size: var(--pb-cpn-bs, 14px); line-height: 1.45; }
.pb-cpn__txt > :first-child { margin-top: 0; }
.pb-cpn__txt > :last-child { margin-bottom: 0; }

/* Stacked: the words above their own code, centred — what a narrow column
   wants, and what every layout falls back to on a phone. */
.pb-cpn--stack .pb-cpn__row { flex-direction: column; align-items: center; text-align: center; }

/* ── the code ────────────────────────────────────────────────────────── */

.pb-cpn__code {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  flex: 0 0 auto;
  max-width: 100%;
  padding: 0.5em 0.85em;
  margin: 0;
  font: inherit;
  font-size: var(--pb-cpn-cs, 14px);
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  color: var(--pb-cpn-cfg, #c81e1e);
  background: var(--pb-cpn-cbg, transparent);
  border: 1px dashed currentColor;
  border-radius: var(--pb-cpn-cr, 8px);
  -webkit-tap-highlight-color: transparent;
}
.pb-cpn--code-solid .pb-cpn__code { border-style: solid; }
.pb-cpn--code-plain .pb-cpn__code { border-color: transparent; }
.pb-cpn__code:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.pb-cpn__code[disabled] { cursor: default; }

/* Two bordered squares: a copy glyph without an icon or a byte of Liquid. */
.pb-cpn__copy { position: relative; width: 0.85em; height: 0.85em; flex: 0 0 auto; }
.pb-cpn__copy::before,
.pb-cpn__copy::after {
  content: "";
  position: absolute;
  width: 0.58em;
  height: 0.58em;
  border: 1.4px solid currentColor;
  border-radius: 2px;
}
.pb-cpn__copy::before { left: 0; bottom: 0; }
.pb-cpn__copy::after { right: 0; top: 0; background: var(--pb-cpn-cbg, var(--pb-cpn-bg, #f7f8fa)); }

/* Once copied the glyph becomes a tick, drawn from two borders of a box. */
.pb-cpn__code[data-done] .pb-cpn__copy::after { display: none; }
.pb-cpn__code[data-done] .pb-cpn__copy::before {
  left: 50%;
  bottom: 55%;
  width: 0.3em;
  height: 0.6em;
  border-width: 0 2px 2px 0;
  border-radius: 0;
  transform: translate(-50%, 45%) rotate(40deg);
}

/* ── the ticket ──────────────────────────────────────────────────────── */

.pb-cpn--ticket .pb-cpn__box { padding: 0; background: none; border: 0; }
.pb-cpn--ticket .pb-cpn__row {
  --notch: 10px;
  position: relative;
  padding: var(--pb-cpn-p, 18px) calc(var(--notch) * 2);
  background: var(--pb-cpn-bg, #111);
  border-radius: var(--pb-cpn-r, 10px);
  -webkit-mask:
    radial-gradient(circle var(--notch) at 0 50%, transparent 98%, #000 100%),
    radial-gradient(circle var(--notch) at 100% 50%, transparent 98%, #000 100%);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle var(--notch) at 0 50%, transparent 98%, #000 100%),
    radial-gradient(circle var(--notch) at 100% 50%, transparent 98%, #000 100%);
  mask-composite: intersect;
}
/* The tear between the words and the code, drawn on the row itself. */
.pb-cpn--ticket .pb-cpn__txt {
  flex: 1;
  border-right: 1px dashed color-mix(in srgb, var(--pb-cpn-fg, #fff) 45%, transparent);
  padding-right: 18px;
  margin-right: 0;
}
.pb-cpn--ticket .pb-cpn__code {
  background: var(--pb-cpn-cbg, #fff);
  color: var(--pb-cpn-cfg, #111);
  border-color: transparent;
}

.pb-cpn__hint {
  margin: 0;
  padding: 0.75rem;
  border: 1px dashed color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 6px;
  font-size: 0.85rem;
  opacity: 0.7;
  text-align: center;
}

@media (max-width: 600px) {
  .pb-cpn__row { flex-direction: column; align-items: stretch; text-align: center; }
  .pb-cpn__code { justify-content: center; }
  .pb-cpn--ticket .pb-cpn__txt { border-right: 0; padding-right: 0; padding-bottom: 14px; border-bottom: 1px dashed color-mix(in srgb, var(--pb-cpn-fg, #fff) 45%, transparent); }
}

/* pb-icons:start — written by scripts/sync-icons.mjs, do not edit by hand */
.pbi{width:var(--pbi-s,20px);height:var(--pbi-s,20px);flex:0 0 auto;background:var(--pbi-c,currentColor);-webkit-mask:var(--pbi-src) center / contain no-repeat;mask:var(--pbi-src) center / contain no-repeat}
.pbi--cf{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M2 12a10 10 0 1 0 20 0a10 10 0 1 0-20 0M10.5 16.3 6.2 12l1.5-1.5 2.8 2.8 5.8-5.8L17.8 9z'/%3E%3C/svg%3E")}
.pbi--ck{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9 17.5 20 6.5'/%3E%3C/svg%3E")}
.pbi--tk{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h12v10H2zM14 9h4l4 3.5V16h-8z'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='17.5' cy='18' r='2'/%3E%3C/svg%3E")}
.pbi--sh{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5 20 5.5v5.8c0 5-3.4 8.7-8 10.2-4.6-1.5-8-5.2-8-10.2V5.5z'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E")}
.pbi--rf{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 1 1-2.6-6.1'/%3E%3Cpath d='M20.5 3v5h-5'/%3E%3C/svg%3E")}
.pbi--lf{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20.5C3 12 8 4.5 20.5 3.5c1 11-5 16-12.5 16z'/%3E%3Cpath d='M7.5 17.5c2.5-4.5 5.5-7 9-8.5'/%3E%3C/svg%3E")}
.pbi--st{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 6 6.5 1-4.7 4.6 1.1 6.5-5.8-3.1-5.8 3.1 1.1-6.5L2.6 9.6l6.5-1z'/%3E%3C/svg%3E")}
.pbi--cl{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M12 6.5V12l3.8 2.2'/%3E%3C/svg%3E")}
.pbi--lk{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.8 10V7.5a5.2 5.2 0 0 1 10.4 0V10'/%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3C/svg%3E")}
.pbi--hs{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14v-2a8 8 0 0 1 16 0v2'/%3E%3Crect x='2.5' y='13' width='4.5' height='6' rx='2'/%3E%3Crect x='17' y='13' width='4.5' height='6' rx='2'/%3E%3Cpath d='M21 19v.5a2.5 2.5 0 0 1-2.5 2.5H13'/%3E%3C/svg%3E")}
.pbi--bx{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8 21 7v10l-9 4.2L3 17V7z'/%3E%3Cpath d='M3 7l9 4.2L21 7M12 11.2V21.2'/%3E%3C/svg%3E")}
.pbi--md{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9.5' r='6.5'/%3E%3Cpath d='m8.5 15.2-1.3 6.3 4.8-2.6 4.8 2.6-1.3-6.3'/%3E%3C/svg%3E")}
.pbi--cd{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.5'/%3E%3Cpath d='M2.5 9.8h19M6 15h3.5'/%3E%3C/svg%3E")}
.pbi--pp{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.5 2.5 2 9.8l8.3 3.4 3.4 8.3z'/%3E%3Cpath d='m10.3 13.2 11.2-10.7'/%3E%3C/svg%3E")}
.pbi--gf{--pbi-src:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8.5' width='18' height='4.5' rx='1'/%3E%3Cpath d='M4.5 13v7.5a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V13M12 8.5v13'/%3E%3Cpath d='M12 8.5S10.8 3 8 3a2.5 2.5 0 0 0 0 5.5zM12 8.5S13.2 3 16 3a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E")}
/* pb-icons:end */