/* Pack Purchase Options — product page selector.
   Everything is scoped under .wwppo so theme styles are not affected. */

.wwppo {
	--wwppo-accent: #4a9d2f;          /* selected pack */
	--wwppo-sub: #3aaa5c;             /* subscribe box */
	--wwppo-ink: #1f2933;
	--wwppo-muted: #6b7682;
	--wwppo-line: #dde3e8;
	--wwppo-radius: 10px;

	--wwppo-gift: #e4642c;            /* offer badge */
	--wwppo-gift-bg: #fff3ec;
	--wwppo-gift-line: #f5b99c;

	--wwppo-ship: #3f8f25;            /* delivery badge */
	--wwppo-ship-bg: #eff8e9;
	--wwppo-ship-line: #9ad17c;

	--wwppo-ease: cubic-bezier(.2, .7, .2, 1);

	flex: 1 1 100%;
	width: 100%;
	max-width: 100%;
	margin: 0 0 18px;
	color: var(--wwppo-ink);
	font-size: 15px;
	line-height: 1.4;
	text-align: start;
}

.wwppo *,
.wwppo *::before,
.wwppo *::after {
	box-sizing: border-box;
}

/* Hide WooCommerce's quantity box in forms that use pack options (kept in sync by JS). */
form.cart:has(.wwppo) .quantity,
form.cart.wwppo-form .quantity {
	display: none !important;
}

/* Some builders (e.g. Elementor Pro's Add to Cart widget) lay the form out as a
   single non-wrapping flex row. Let it wrap so the pack options take a full row
   and the button sits underneath at its normal height. */
form.cart:has(> .wwppo),
form.cart.wwppo-form {
	flex-wrap: wrap !important;
	align-items: center !important;
}

form.cart:has(> .wwppo) > .wwppo,
form.cart.wwppo-form > .wwppo {
	flex: 0 0 100% !important;
	width: 100% !important;
	max-width: 100% !important;
}

form.cart:has(> .wwppo) .single_add_to_cart_button,
form.cart.wwppo-form .single_add_to_cart_button {
	flex: 1 1 100%;
	width: 100%;
	height: auto !important;
	min-height: 50px;
	align-self: auto !important;
	float: none !important;
	margin: 0 !important;
	text-align: center;
}

/* Heading with a rule on each side */
.wwppo .wwppo__heading {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 600;
	color: var(--wwppo-ink);
}

.wwppo .wwppo__heading::before,
.wwppo .wwppo__heading::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--wwppo-line);
}

.wwppo__options {
	display: grid;
	gap: 8px;
}

/* ---------- Pack card ---------- */
.wwppo .wwppo-card {
	position: relative;
	display: flex;
	align-items: flex-start;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 11px 16px;
	background: #fff;
	border: 1.5px solid var(--wwppo-line);
	border-radius: var(--wwppo-radius);
	cursor: pointer;
	font-weight: 400;
	transition:
		border-color .2s ease,
		background-color .2s ease,
		box-shadow .25s var(--wwppo-ease),
		transform .25s var(--wwppo-ease);
}

.wwppo .wwppo-card:not(.is-disabled):hover {
	border-color: #a5d38f;
	border-color: color-mix(in srgb, var(--wwppo-accent) 45%, #fff);
	box-shadow: 0 8px 20px -14px rgba(38, 84, 22, .4);
	transform: translateY(-2px);
}

.wwppo .wwppo-card.is-selected,
.wwppo .wwppo-card:has(.wwppo-card__input:checked) {
	border-width: 2px;
	padding: 10.5px 15.5px;
	border-color: var(--wwppo-accent);
	background: #f4faf1;
	background: color-mix(in srgb, var(--wwppo-accent) 6%, #fff);
}

.wwppo .wwppo-card.is-disabled {
	opacity: .5;
	cursor: not-allowed;
}

/* Visually hidden but still focusable native inputs */
.wwppo .wwppo-card__input,
.wwppo .wwppo-sub__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
}

/* Radio: ring + dot, with a soft halo when selected */
.wwppo-card__radio {
	position: relative;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 0;
	border: 2px solid #b3bcc5;
	border-radius: 50%;
	background: #fff;
	transition: border-color .2s ease, box-shadow .25s var(--wwppo-ease);
}

.wwppo-card__radio::after {
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: var(--wwppo-accent);
	transform: scale(0);
	transition: transform .25s var(--wwppo-ease);
}

.wwppo .wwppo-card:hover .wwppo-card__radio {
	border-color: var(--wwppo-accent);
}

.wwppo-card__input:checked + .wwppo-card__radio {
	border: 2.5px solid var(--wwppo-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wwppo-accent) 18%, transparent);
}

.wwppo-card__input:checked + .wwppo-card__radio::after {
	transform: scale(1);
}

.wwppo-card__input:focus-visible + .wwppo-card__radio,
.wwppo-sub__input:focus-visible + .wwppo-sub__box {
	outline: 2px solid var(--wwppo-accent);
	outline-offset: 3px;
}

.wwppo-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
	min-width: 0;
}

.wwppo-card__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.wwppo-card__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 10px;
	row-gap: 0;
	min-width: 0;
}

.wwppo-card__name {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--wwppo-ink);
}

.wwppo .wwppo-card__price,
.wwppo .wwppo-card__price .amount,
.wwppo .wwppo-card__price bdi {
	font-size: 17px;
	font-weight: 700;
	color: var(--wwppo-ink);
	white-space: nowrap;
}

.wwppo .wwppo-card__price del,
.wwppo .wwppo-card__price del .amount,
.wwppo .wwppo-card__price del bdi {
	margin-inline-end: 6px;
	font-size: 14px;
	font-weight: 400;
	color: var(--wwppo-muted);
}

.wwppo-card__meta {
	font-size: 13px;
	color: var(--wwppo-muted);
}

/* ---------- Badges ---------- */
.wwppo-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 0;
}

.wwppo-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 4px 10px;
	border: 1px solid;
	border-radius: 6px;
	transition: transform .25s var(--wwppo-ease), box-shadow .25s var(--wwppo-ease);
}

.wwppo .wwppo-card:not(.is-disabled):hover .wwppo-badge {
	box-shadow: 0 3px 10px -6px rgba(0, 0, 0, .25);
}

.wwppo-badge--gift {
	color: var(--wwppo-gift);
	background: var(--wwppo-gift-bg);
	border-color: var(--wwppo-gift-line);
}

.wwppo-badge--ship {
	color: var(--wwppo-ship);
	background: var(--wwppo-ship-bg);
	border-color: var(--wwppo-ship-line);
}

.wwppo-badge__icon {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
}

.wwppo-badge__icon--truck {
	width: 24px;
	height: 15px;
}

.wwppo .wwppo-card:not(.is-disabled):hover .wwppo-badge--gift .wwppo-badge__icon {
	animation: wwppo-wiggle .5s ease;
}

.wwppo .wwppo-card:not(.is-disabled):hover .wwppo-badge--ship .wwppo-badge__icon {
	animation: wwppo-drive .5s ease;
}

.wwppo-badge__text {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 5px;
	line-height: 1.3;
}

.wwppo-badge__main {
	font-size: 13.5px;
	font-weight: 700;
}

.wwppo-badge__sub {
	font-size: 12px;
	font-weight: 500;
	opacity: .85;
}

.wwppo .wwppo__note {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--wwppo-muted);
}

/* ---------- Subscribe to Auto Refill ---------- */
.wwppo .wwppo-sub {
	position: relative;
	display: flex;
	align-items: flex-start;
	align-items: center;
	gap: 14px;
	margin: 10px 0 0;
	padding: 12px 16px;
	background: #f3faf5;
	background: color-mix(in srgb, var(--wwppo-sub) 7%, #fff);
	border: 2px dashed #9fd8b0;
	border-color: color-mix(in srgb, var(--wwppo-sub) 50%, #fff);
	border-radius: var(--wwppo-radius);
	cursor: pointer;
	font-weight: 400;
	transition:
		border-color .2s ease,
		background-color .2s ease,
		box-shadow .25s var(--wwppo-ease),
		transform .25s var(--wwppo-ease);
}

.wwppo .wwppo-sub:hover {
	border-color: var(--wwppo-sub);
	box-shadow: 0 10px 24px -14px rgba(20, 70, 35, .35);
	transform: translateY(-2px);
}

.wwppo .wwppo-sub:has(.wwppo-sub__input:checked),
.wwppo.is-subscribed .wwppo-sub {
	border-style: solid;
	border-color: var(--wwppo-sub);
	background: #f6faf7;
	background: color-mix(in srgb, var(--wwppo-sub) 4%, #fff);
}

.wwppo-sub__box {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 0;
	border: 2px solid var(--wwppo-sub);
	border-radius: 7px;
	background: #fff;
	color: #fff;
	transition: background-color .2s ease, transform .2s var(--wwppo-ease);
}

.wwppo-sub__box svg {
	width: 14px;
	height: 14px;
	transform: scale(0);
	transition: transform .25s var(--wwppo-ease);
}

.wwppo-sub__input:checked + .wwppo-sub__box {
	background: var(--wwppo-sub);
}

.wwppo-sub__input:checked + .wwppo-sub__box svg {
	transform: scale(1);
}

.wwppo-sub__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.wwppo-sub__title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--wwppo-ink);
}

.wwppo-sub__desc {
	font-size: 13px;
	color: var(--wwppo-muted);
}

/* Cart: fixed quantity for subscription lines */
.wwppo-locked-qty {
	display: inline-block;
	min-width: 2em;
	font-weight: 600;
	text-align: center;
}

@keyframes wwppo-wiggle {
	0%, 100% { transform: rotate(0); }
	25% { transform: rotate(-10deg) scale(1.08); }
	60% { transform: rotate(8deg) scale(1.08); }
}

@keyframes wwppo-drive {
	0% { transform: translateX(0); }
	40% { transform: translateX(4px); }
	100% { transform: translateX(0); }
}

/* ---------- Small screens ---------- */
@media (max-width: 480px) {
	.wwppo .wwppo-card,
	.wwppo .wwppo-sub {
		gap: 11px;
		padding: 10px 12px;
	}

	.wwppo .wwppo-card.is-selected,
	.wwppo .wwppo-card:has(.wwppo-card__input:checked) {
		padding: 9.5px 11.5px;
	}

	.wwppo-card__name,
	.wwppo .wwppo-card__price,
	.wwppo .wwppo-card__price .amount,
	.wwppo .wwppo-card__price bdi {
		font-size: 16px;
	}

	.wwppo-badge { padding: 3px 8px; gap: 5px; }
	.wwppo-badge__main { font-size: 12.5px; }
	.wwppo-badge__sub { font-size: 11px; }
}

/* No hover lift on touch screens */
@media (hover: none) {
	.wwppo .wwppo-card:hover,
	.wwppo .wwppo-sub:hover {
		transform: none;
		box-shadow: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wwppo *,
	.wwppo *::after,
	.wwppo .wwppo-card,
	.wwppo .wwppo-sub {
		transition: none !important;
		animation: none !important;
	}
	.wwppo .wwppo-card:hover,
	.wwppo .wwppo-sub:hover {
		transform: none;
	}
}