/* ============================================================================
   HLL STORE PRO — THE CHECKOUT stylesheet.

   Every component here has TWO layers:
     — a self-carried base (the snippet's own proven colours, all self-paired), so the
       piece is readable even with the theme wrapper switched off, and
     — a token override under `.hll-sp`, so with the wrapper on, the checkout follows
       whichever of the five store themes is active. No new palette anywhere: the token
       layer only uses pairings the matrix already vouches for.
   ========================================================================== */

/* ============================== 1. THE TIP BOX ============================== */
.hll-sp-co-tip {
	margin: 25px 0;
	padding: 22px;
	border-radius: 16px;
	background: linear-gradient(135deg, #18b6a7, #38c878);   /* the snippet's own pair */
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .4);
	box-shadow: 0 10px 25px rgba(0, 0, 0, .18);
	width: 100%;
	box-sizing: border-box;
}
.hll-sp-co-tip[hidden] { display: none; }

.hll-sp-co-tip-h {
	margin: 0 0 10px;
	color: #fff;
	font-size: 24px;
	font-weight: 800;
	text-shadow: 0 3px 8px rgba(0, 0, 0, .25);
}
.hll-sp-co-tip-p { color: #fff; margin: 0 0 15px; }

.hll-sp-co-tip-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin: 0 0 14px;
}

.hll-sp-co-tip-btn {
	padding: 12px 10px;
	font-size: 14.5px;
	font-weight: 800;
	color: #fff;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 10px;
	cursor: pointer;
	transition: background .2s ease, transform .15s ease;
}
.hll-sp-co-tip-btn:hover { background: rgba(255, 255, 255, .26); transform: translateY(-1px); }
.hll-sp-co-tip-btn.is-solid { background: rgba(255, 255, 255, .92); color: #0b3d2e; border-color: transparent; }

.hll-sp-co-tip-custom { display: flex; gap: 10px; margin: 0 0 14px; }
.hll-sp-co-tip-custom input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 12px 13px;
	font-size: 15px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, .5);
	background: rgba(255, 255, 255, .95);
	color: #0b1b14;
}

/* the remove button: a fixed, self-paired pair — 7.6:1, theme-independent by design */
.hll-sp-co-tip-remove {
	background: #991b1b;
	color: #fff;
	border: none;
	padding: 13px 18px;
	border-radius: 10px;
	font-weight: 800;
	cursor: pointer;
	transition: background .2s ease;
}
.hll-sp-co-tip-remove:hover { background: #7f1d1d; }

.hll-sp-co-tip-note { margin: 12px 0 0; font-size: 13.5px; color: rgba(255, 255, 255, .92); }

/* the loading state on any tip button */
.hll-sp-co-tip .is-waiting {
	opacity: 1 !important;
	pointer-events: none;
	position: relative;
	padding-right: 38px !important;
}
.hll-sp-co-tip .is-waiting::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 50%;
	width: 15px;
	height: 15px;
	margin-top: -8px;
	border-radius: 50%;
	border: 3px solid rgba(255, 255, 255, .45);
	border-top-color: currentColor;
	animation: hll-sp-co-spin .75s linear infinite;
}

/* --- the token layer: with the wrapper on, the box speaks the active theme's accent --- */
.hll-sp .hll-sp-co-tip {
	background: linear-gradient(135deg, var(--sp-acc), var(--sp-acc-2));
	border: 1px solid color-mix(in srgb, var(--sp-on-acc) 40%, transparent);
	box-shadow: var(--sp-shadow);
	color: var(--sp-on-acc);
	border-radius: var(--sp-radius);
}
.hll-sp .hll-sp-co-tip-h,
.hll-sp .hll-sp-co-tip-p { color: var(--sp-on-acc); text-shadow: none; }
.hll-sp .hll-sp-co-tip-note { color: color-mix(in srgb, var(--sp-on-acc) 85%, transparent); }

.hll-sp .hll-sp-co-tip-btn {
	color: var(--sp-on-acc);
	background: color-mix(in srgb, var(--sp-on-acc) 12%, transparent);
	border-color: color-mix(in srgb, var(--sp-on-acc) 55%, transparent);
	border-radius: var(--sp-ctl);
}
.hll-sp .hll-sp-co-tip-btn:hover { background: color-mix(in srgb, var(--sp-on-acc) 22%, transparent); }
.hll-sp .hll-sp-co-tip-btn.is-solid { background: var(--sp-on-acc); color: var(--sp-acc-2); }

/* the custom field takes the MEASURED field tokens — no derived pairings on inputs */
.hll-sp .hll-sp-co-tip-custom input {
	background: var(--sp-field);
	color: var(--sp-field-fg);
	caret-color: var(--sp-field-fg);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-ctl);
}
.hll-sp .hll-sp-co-tip-custom input::placeholder { color: var(--sp-ph); opacity: 1; }

/* ============================== 2. THE PURCHASE OVERLAY ============================== */
.hll-sp-co-btnwrap {
	position: relative !important;
	display: inline-block !important;
	max-width: 100% !important;
}
.hll-sp-co-btnwrap #edd-purchase-button {
	display: block !important;
	transition: opacity .2s ease, filter .2s ease !important;
	will-change: opacity, filter;
}
#edd-purchase-button.hll-sp-co-busy {
	opacity: 0 !important;
	filter: blur(8px) !important;
	pointer-events: none !important;
}

.hll-sp-co-processing {
	position: absolute;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: rgba(6, 23, 45, .94);    /* self-paired navy: white ink at 13:1+ */
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	color: #fff;
	font-size: 13px;
	font-weight: 900;
	text-align: center;
	pointer-events: none;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .28);
	opacity: 0;
	transform: scale(.96);
	transition: all .25s cubic-bezier(.16, 1, .3, 1);
	will-change: opacity, transform;
}
.hll-sp-co-btnwrap.is-processing .hll-sp-co-processing { opacity: 1; transform: scale(1); }
.hll-sp-co-processing .hll-sp-co-status { color: #fff; white-space: nowrap; }

.hll-sp-co-spin {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .35);
	border-top-color: var(--sp-acc, #22c55e);   /* the one themed stroke; falls back green */
	animation: hll-sp-co-spin .6s linear infinite;
	flex: 0 0 auto;
}
@keyframes hll-sp-co-spin { to { transform: rotate(360deg); } }

/* the hazard state: self-paired amber-on-dark — the snippet's own, kept */
.hll-sp-co-processing.is-timeout {
	background: linear-gradient(135deg, #1e1203 0%, #3a2205 100%);
	border: 1px solid #f59e0b;
	pointer-events: auto;
	cursor: help;
}
.hll-sp-co-hazard {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #f59e0b;
	color: #1e1203;
	font-size: 13px;
	font-weight: 900;
}
.hll-sp-co-hint {
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	width: min(300px, 82vw);
	padding: 11px 13px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.45;
	white-space: normal;
	color: var(--sp-fg, #eef4f0);
	background: var(--sp-surf, #10231a);
	border: 1px solid var(--sp-line, rgba(255, 255, 255, .22));
	border-radius: var(--sp-ctl, 10px);
	box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .5);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease;
	pointer-events: none;
	z-index: 3;
}
.hll-sp-co-hint::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 7px solid transparent;
	border-top-color: var(--sp-surf, #10231a);
}
.hll-sp-co-processing.is-timeout:hover .hll-sp-co-hint { opacity: 1; visibility: visible; }

/* ============================== 3. THE BLOCKS CHECKOUT, on the theme ============================== */
/* Only under the wrapper: the fields, selects and buttons already take the audited tokens
   from store.css/compat.css; this section dresses the Blocks STRUCTURE — the cart, the
   gateway choices, the purchase button — as store panels. */
.hll-sp-checkout .edd-blocks-cart,
.hll-sp-checkout .edd-blocks-form {
	background: var(--sp-surf);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
	box-shadow: var(--sp-shadow), var(--sp-inset);
	padding: 18px;
	margin: 0 0 18px;
	color: var(--sp-fg);
}
.hll-sp-checkout .edd-blocks-cart__row {
	border-bottom: 1px solid var(--sp-line-2);
	padding: 10px 0;
}
.hll-sp-checkout .edd-blocks-cart__row:last-child { border-bottom: 0; }
.hll-sp-checkout .edd-blocks-cart__row-footer,
.hll-sp-checkout .edd_cart_total,
.hll-sp-checkout .edd_cart_amount { color: var(--sp-fg-strong); font-weight: 800; }

.hll-sp-checkout .edd-blocks-form legend,
.hll-sp-checkout .edd-blocks-form label { color: var(--sp-fg); font-weight: 700; }
.hll-sp-checkout .edd-blocks-form .edd-description,
.hll-sp-checkout .edd-blocks-form .edd-label-description { color: var(--sp-mut); }

/* gateway choices become selectable cards; the picked one carries the accent ring */
.hll-sp-checkout .edd-blocks-form__payment-method,
.hll-sp-checkout #edd_payment_mode_select label {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	margin: 0 0 10px;
	background: var(--sp-surf-2);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-ctl);
	cursor: pointer;
	transition: border-color var(--sp-t, .18s);
}
.hll-sp-checkout .edd-blocks-form__payment-method:has(input:checked),
.hll-sp-checkout #edd_payment_mode_select label:has(input:checked) {
	border-color: var(--sp-acc);
	box-shadow: 0 0 0 3px var(--sp-ring);
}

/* the purchase button: the store CTA, full width */
.hll-sp-checkout #edd-purchase-button {
	width: 100%;
	min-height: 50px;
	font-size: 16px;
	font-weight: 800;
	color: var(--sp-on-acc);
	background: linear-gradient(180deg, var(--sp-acc), var(--sp-acc-2));
	border: 0;
	border-radius: var(--sp-ctl);
	box-shadow: 0 10px 24px -10px var(--sp-ring);
	cursor: pointer;
}
.hll-sp-checkout #edd-purchase-button:hover { filter: brightness(1.06); }
.hll-sp-checkout #edd-purchase-button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--sp-ring); }

/* mobile: the tip presets go two-up, the custom row stacks */
@media (max-width: 520px) {
	.hll-sp-co-tip { padding: 20px; }
	.hll-sp-co-tip-h { font-size: 21px; }
	.hll-sp-co-tip-grid { grid-template-columns: repeat(2, 1fr); }
	.hll-sp-co-tip-custom { flex-direction: column; }
	.hll-sp-co-tip-custom .hll-sp-co-tip-btn { width: 100%; }
}

/* ==========================================================================
   PURCHASE BUTTON STATES
   ==========================================================================
   The ask was "the button does not change its colours". It could not: every
   visible change lived on the OVERLAY, and the control underneath stayed
   whatever it always was.

   So the button now carries a state class of its own. Three states, and they
   mean different things on purpose — amber is "you need to do something",
   red is "this went wrong", dim is "working".

   THE IMAGE-BUTTON PROBLEM
   ------------------------
   EDD renders <input type="image"> whenever a checkout button image is set,
   and this store uses one (Make-payments-scaled.webp). An image button has no
   background to colour — background-color paints behind the image and is
   never seen. So for those, state is expressed as a filter on the image plus
   a tint from the wrapper. Same three states, same meaning, different
   mechanism, because the same mechanism does not exist.
   ========================================================================== */

.hll-sp-checkout #edd-purchase-button.is-state-busy,
.hll-sp-co-btnwrap #edd-purchase-button.is-state-busy {
  filter: grayscale(.35) brightness(.82);
}

.hll-sp-checkout #edd-purchase-button.is-state-warn,
.hll-sp-co-btnwrap #edd-purchase-button.is-state-warn {
  background: #b45309;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .30);
}

.hll-sp-checkout #edd-purchase-button.is-state-error,
.hll-sp-co-btnwrap #edd-purchase-button.is-state-error {
  background: #991b1b;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .30);
}

/* IMAGE BUTTONS — state without destroying the artwork.
   background is off the table: setting a colour would paint over the image and
   the button would simply vanish. So state is a filter on the artwork plus a
   ring around it, which reads clearly and leaves the picture intact. */
.hll-sp-co-btnwrap.is-img #edd-purchase-button.is-state-warn {
  background-color: transparent !important;
  filter: saturate(1.45) hue-rotate(-18deg) brightness(.94);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .55) !important;
  border-radius: var(--sp-ctl, 10px) !important;
}
.hll-sp-co-btnwrap.is-img #edd-purchase-button.is-state-error {
  background-color: transparent !important;
  filter: saturate(1.6) hue-rotate(-45deg) brightness(.84);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .55) !important;
  border-radius: var(--sp-ctl, 10px) !important;
}
.hll-sp-co-btnwrap.is-img #edd-purchase-button.is-state-busy {
  filter: grayscale(.4) brightness(.78);
}

/* The overlay must sit ABOVE the artwork and be opaque enough to read against
   it. A photo behind 8px of text is why it looked absent even at full size. */
.hll-sp-co-btnwrap .hll-sp-co-processing {
  z-index: 5;
  background: rgba(6, 23, 45, .94);
  backdrop-filter: blur(4px);
}
/* font-size and line-height are restated because the image button sets both to
   0 to hide EDD's value text, and the overlay is a child of the same wrapper —
   without this the status label inherits the zero and renders as nothing,
   which looks exactly like the overlay failing to appear. */
.hll-sp-co-btnwrap .hll-sp-co-status {
  font-size: clamp(12px, 3.2vw, 15px) !important;
  line-height: 1.2 !important;
  font-weight: 800;
  color: #fff !important;
  text-indent: 0 !important;
  white-space: nowrap;
}
.hll-sp-co-btnwrap .hll-sp-co-processing {
  font-size: 13px !important;
  line-height: 1.2 !important;
  text-indent: 0 !important;
  color: #fff !important;
}

/* ==========================================================================
   BUTTON GEOMETRY — this is the fix for the 36px button
   ==========================================================================
   The JS used to measure the button and stamp the result on the wrapper as an
   inline width. A <span> is inline by default, so it shrink-to-fits; the
   button's own width:100% then had no definite parent width to resolve
   against and collapsed to ~36px; the measurement captured that collapsed
   value and wrote it back, making it permanent. Hence a tiny image and an
   overlay nobody could see, because the overlay was 36px wide too.

   The measurement is gone. The wrapper is a block at full width, declared
   here rather than computed, so there is no moment at which it can be
   measured wrongly. !important because the JS previously wrote inline styles
   and an older cached copy may still be doing so on a visitor's machine.
   ========================================================================== */
.hll-sp-co-btnwrap {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
}

.hll-sp-co-btnwrap #edd-purchase-button {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box;
}

/* The overlay fills the wrapper instead of being sized to a measurement. */
.hll-sp-co-btnwrap .hll-sp-co-processing {
  position: absolute;
  inset: 0;
}

/* IMAGE BUTTONS.
   background-size:contain scales the artwork to the box, so the box has to
   have a real height or the image renders as a sliver. min-height gives it
   one; clamp keeps it sensible from a phone to a desktop without a media
   query. aspect-ratio lets the box follow the artwork where the browser
   supports it, with min-height as the floor either way. */
.hll-sp-co-btnwrap.is-img #edd-purchase-button {
  /* SIZED FROM THE REAL ARTWORK.
   *
   * Make-payments-scaled.webp is 2560 x 887, and its opaque content measures
   * 2482 x 796 — an aspect ratio of 3.118. Declaring that ratio is what stops
   * background-size:contain letterboxing the graphic inside a box of the wrong
   * shape, which is the other half of why it looked small even once the width
   * was fixed. The box now IS the shape of the button.
   *
   * max-width keeps it from stretching to a comical width on desktop; the
   * min-height is the floor for a narrow phone, where the ratio alone would
   * give a strip too short to tap comfortably. 44px is the accepted minimum
   * touch target and this clears it at every width.
   */
  aspect-ratio: 3.118 / 1;
  width: 100% !important;
  max-width: 420px !important;
  min-height: 56px !important;
  height: auto !important;
  margin-inline: auto;

  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;

  /* The artwork already says "Pay Now with M-PESA / VISA", so EDD's own
     value="Purchase" must not print across it. The value attribute stays in
     the DOM for screen readers; only the painted glyphs are hidden. */
  color: transparent !important;
  text-indent: -9999px;
  font-size: 0 !important;
  line-height: 0 !important;
}

/* The wrapper follows the button rather than the column, so the overlay lands
   exactly on the artwork instead of on the full-width strip beside it. */
.hll-sp-co-btnwrap.is-img {
  max-width: 420px !important;
  margin-inline: auto;
}

/* ---- overlay states ---- */
.hll-sp-co-processing.is-warn {
  background: linear-gradient(135deg, #1e1203 0%, #3a2205 100%);
  border: 1px solid #f59e0b;
  pointer-events: auto;
  cursor: help;
}
.hll-sp-co-processing.is-warn .hll-sp-co-status { color: #fef08a; }
.hll-sp-co-processing.is-warn .hll-sp-co-hazard { background: #f59e0b; color: #1e1203; }

.hll-sp-co-processing.is-error {
  background: linear-gradient(135deg, #200606 0%, #3f0d0d 100%);
  border: 1px solid #ef4444;
  pointer-events: auto;
  cursor: help;
}
.hll-sp-co-processing.is-error .hll-sp-co-status { color: #fecaca; }
.hll-sp-co-processing.is-error .hll-sp-co-hazard { background: #ef4444; color: #200606; }

/* The overlay is small and the hint is a sentence, so on a narrow screen the
   tooltip is the only place the explanation fits. Shown on tap as well as
   hover — a phone has no hover, and the hint is the useful part. */
.hll-sp-co-processing.is-warn:active .hll-sp-co-hint,
.hll-sp-co-processing.is-error:active .hll-sp-co-hint,
.hll-sp-co-processing.is-warn:hover .hll-sp-co-hint,
.hll-sp-co-processing.is-error:hover .hll-sp-co-hint {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* The field that stopped the submit. Outlined rather than recoloured, so it
   still reads as the same field — the point is to find it, not restyle it. */
.hll-sp-co-badfield {
  outline: 2px solid #f59e0b !important;
  outline-offset: 2px !important;
  border-color: #f59e0b !important;
  animation: hll-sp-co-shake .32s ease;
}

@keyframes hll-sp-co-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .hll-sp-co-badfield { animation: none; }
  .hll-sp-checkout #edd-purchase-button.is-state-busy,
  .hll-sp-co-btnwrap #edd-purchase-button.is-state-busy { transition: none; }
}

/* The new-tab notice is shown on the BUSY overlay, which has no hover state of
   its own — warn and error do, but this one appears without any interaction and
   must simply be readable. */
.hll-sp-co-btnwrap .hll-sp-co-processing .hll-sp-co-hint {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: none;
}