/* =========================================================================
   THEORYS — SHIPPING INSURANCE UPSELL
   The checkbox rendered into the block checkout's order-summary slot by
   theorys-insurance.js.

   This is the one element on the page that is meant to attract the eye, so it
   carries a slow breathing glow. Two constraints shaped how far that goes:

   1. It sits inside WooCommerce's order summary, next to the total. An element
      that outshines the Place Order button costs conversions rather than
      winning an upsell, so the glow is a soft outer bloom on the brand green —
      not a saturated colour the rest of the page does not use.
   2. The animation is wrapped in prefers-reduced-motion. A pulsing box-shadow
      is exactly the kind of motion that triggers vestibular symptoms, and this
      is a checkout — the one page a visitor cannot simply leave. Reduced-motion
      users still get the full static treatment: border, tint and offer copy are
      all in the resting state, so nothing is communicated by motion alone.
   ========================================================================= */

.thr-ins {
	position: relative;
	margin: 18px 0;
	border: 1px solid rgba(27, 58, 47, 0.28);
	border-radius: 8px;
	background:
		linear-gradient(135deg, rgba(27, 58, 47, 0.055), rgba(46, 94, 78, 0.02));
	transition: border-color .2s ease, box-shadow .25s ease, background .2s ease;
	animation: thr-ins-breathe 2.9s ease-in-out infinite;
}

/* The bloom, as a HALO AROUND THE PERIMETER.
   It used to be `radial-gradient(closest-side, ...)` on a box inset -3px. On a
   short wide card the closest side is the half-height, so the gradient's centre
   landed in the middle of the card and the pulse read as a blob breathing INSIDE
   the box, washing over the copy, rather than as an edge glow.
   Now: no background at all, and the animation drives box-shadow. An outer
   box-shadow paints only OUTSIDE the element's border box, so the interior is
   never touched and the pulse traces the perimeter. Kept on ::before rather than
   on .thr-ins so it stacks independently of the hover and .is-on shadows, and so
   the border colour (thr-ins-breathe) and the halo can animate on the same clock
   without one clobbering the other. */
.thr-ins::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: 9px;
	background: none;
	opacity: 1;
	pointer-events: none;
	z-index: 0;
	animation: thr-ins-bloom 2.9s ease-in-out infinite;
}

.thr-ins:hover {
	border-color: var(--forest-mid);
	background: linear-gradient(135deg, rgba(27, 58, 47, 0.085), rgba(46, 94, 78, 0.035));
}

/* Taken: the offer has been accepted, so it stops competing for attention.
   Solid green edge, no animation — a settled state, not a pitch. */
.thr-ins.is-on {
	border-color: var(--forest-deep);
	background: rgba(27, 58, 47, 0.075);
	box-shadow: inset 0 0 0 1px rgba(27, 58, 47, 0.20);
	animation: none;
}
.thr-ins.is-on::before { animation: none; box-shadow: none; }

/* Mid-request. Woo is recalculating the total, so the row must not look
   clickable — but it must not collapse or shift either, or the summary jumps. */
.thr-ins.is-pending { opacity: .62; }
.thr-ins.is-pending .thr-ins-row { cursor: progress; }

@keyframes thr-ins-breathe {
	0%, 100% { border-color: rgba(27, 58, 47, 0.28); }
	50%      { border-color: rgba(46, 94, 78, 0.75); }
}
/* Two layered shadows: a tight ring that defines the edge, and a wider diffuse
   glow behind it. Both start at zero spread so the resting state is clean. */
@keyframes thr-ins-bloom {
	0%, 100% {
		box-shadow:
			0 0 0 0 rgba(46, 94, 78, 0),
			0 0 0 0 rgba(46, 94, 78, 0);
	}
	50% {
		box-shadow:
			0 0 0 3px rgba(46, 94, 78, 0.22),
			0 0 15px 4px rgba(46, 94, 78, 0.30);
	}
}

@media (prefers-reduced-motion: reduce) {
	.thr-ins,
	.thr-ins::before {
		animation: none;
	}
	/* With the animation off, box-shadow is never set, so the halo simply does not
	   render. Nothing further to unwind. */
	/* Resting state has to carry the emphasis on its own. */
	.thr-ins { border-color: var(--forest-mid); }
}

/* ---------- the row ---------------------------------------------------- */

.thr-ins-row {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin: 0;
	padding: 13px 15px;
	cursor: pointer;
}

/* The native input stays in the tab order and keeps the label association —
   it is visually replaced by .thr-ins-mark, never removed. display:none or
   visibility:hidden would take it out of the accessibility tree entirely. */
.thr-ins .thr-ins-checkbox {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
}

.thr-ins-mark {
	flex: 0 0 auto;
	position: relative;
	width: 19px;
	height: 19px;
	margin-top: 1px;
	border: 1.5px solid var(--forest-mid);
	border-radius: 4px;
	background: var(--white);
	transition: background .15s ease, border-color .15s ease;
}
.thr-ins-mark::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 6px;
	height: 11px;
	border-right: 2px solid var(--white);
	border-bottom: 2px solid var(--white);
	transform: rotate(45deg) scale(0);
	transition: transform .15s ease;
}
.thr-ins-checkbox:checked + .thr-ins-mark {
	background: var(--forest-deep);
	border-color: var(--forest-deep);
}
.thr-ins-checkbox:checked + .thr-ins-mark::after { transform: rotate(45deg) scale(1); }

/* Focus lands on the hidden input, so the ring has to be drawn on the mark. */
.thr-ins-checkbox:focus-visible + .thr-ins-mark {
	outline: 2px solid var(--forest-mid);
	outline-offset: 2px;
}

/* ---------- copy ------------------------------------------------------- */

.thr-ins-text {
	display: block;
	min-width: 0;
}
.thr-ins-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}
.thr-ins-title {
	font-family: var(--font-head);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--forest-deep);
}
.thr-ins-price {
	flex: 0 0 auto;
	font-family: var(--font-head);
	font-size: 14px;
	font-weight: 600;
	color: var(--forest-deep);
	white-space: nowrap;
}
.thr-ins-desc {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--forest-mid);
}

@media (max-width: 560px) {
	.thr-ins-row { padding: 12px 13px; gap: 10px; }
	.thr-ins-title, .thr-ins-price { font-size: 13.5px; }
	.thr-ins-desc { font-size: 12px; }
}