/**
 * QI Product Plan Selector V2
 * Medical Navy × Clinical Teal
 */


/* =========================================================
 * FALLBACK
 * Native WooCommerce controls remain visible until JS succeeds.
 * ======================================================= */

body.single-product
form.variations_form:not(.qi-plan-v2-ready)
table.variations {
	display: table;
}


/* =========================================================
 * HIDE NATIVE VARIATION TABLE AFTER V2 IS READY
 * ======================================================= */

body.single-product
form.variations_form.qi-plan-v2-ready
table.variations {
	position: absolute !important;

	width: 1px !important;
	height: 1px !important;

	margin: -1px !important;
	padding: 0 !important;

	overflow: hidden !important;

	clip:
		rect(0 0 0 0) !important;

	clip-path:
		inset(50%) !important;

	white-space:
		nowrap !important;
}


/* =========================================================
 * SELECTOR
 * ======================================================= */

body.single-product
.qi-plan-selector {
	width: 100%;

	margin: 0;

	padding: 0;
}


/* =========================================================
 * HEADER
 * ======================================================= */

body.single-product
.qi-plan-selector__head {
	display: flex;

	align-items: flex-end;
	justify-content: space-between;

	gap: 16px;

	margin-bottom: 13px;
}

body.single-product
.qi-plan-selector__heading {
	display: flex;

	flex-direction: column;

	gap: 4px;
}

body.single-product
.qi-plan-selector__eyebrow {
	color:
		var(--qi-primary, #0F9693);

	font-size: 10px;

	font-weight: 800;

	line-height: 1.2;

	letter-spacing: 0.08em;

	text-transform: uppercase;
}

body.single-product
.qi-plan-selector__title {
	color:
		var(--qi-dark, #0D2F43);

	font-size: 16px;

	font-weight: 800;

	line-height: 1.3;
}

body.single-product
.qi-plan-selector__tools {
	display: flex;

	align-items: center;

	gap: 9px;
}

body.single-product
.qi-plan-selector__hint {
	color:
		var(--qi-muted, #6D8189);

	font-size: 11px;

	font-weight: 500;

	line-height: 1.35;
}

body.single-product
.qi-plan-reset {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	min-height: 26px;

	margin: 0 !important;

	padding:
		3px
		7px !important;

	border: 0 !important;

	background: transparent !important;

	color:
		#8A9DA4 !important;

	font-size: 11px !important;

	font-weight: 500;

	line-height: 1 !important;

	text-transform: none !important;

	box-shadow: none !important;

	cursor: pointer;
}

body.single-product
.qi-plan-reset:hover {
	color:
		var(--qi-primary, #0F9693) !important;
}


/* =========================================================
 * GRID
 * ======================================================= */

body.single-product
.qi-plan-grid {
	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: 10px;

	width: 100%;
}


/* =========================================================
 * CARD
 * ======================================================= */

body.single-product
.qi-plan-card {
	position: relative;

	display: flex;

	flex-direction: column;

	align-items: flex-start;

	min-width: 0;
	min-height: 122px;

	margin: 0 !important;

	padding:
		16px
		14px
		13px !important;

	border:
		1px solid
		var(--qi-border, #D8E6E9) !important;

	border-radius:
		13px !important;

	background:
		#FFFFFF !important;

	color:
		var(--qi-text, #173B4A) !important;

	text-align: left;

	text-transform:
		none !important;

	box-shadow:
		none !important;

	cursor: pointer;

	transition:
		border-color 0.16s ease,
		background-color 0.16s ease,
		box-shadow 0.16s ease,
		transform 0.16s ease;
}

body.single-product
.qi-plan-card:hover:not(:disabled) {
	border-color:
		var(--qi-primary, #0F9693) !important;

	background:
		#FAFEFD !important;

	transform:
		translateY(-1px);
}

body.single-product
.qi-plan-card.is-selected {
	border:
		1.5px solid
		var(--qi-primary, #0F9693) !important;

	background:
		#F3FBFA !important;

	box-shadow:
		0 0 0 2px
		rgba(15, 150, 147, 0.08) !important;
}


/* =========================================================
 * CHECK
 * ======================================================= */

body.single-product
.qi-plan-card__check {
	position: absolute;

	top: 11px;
	right: 11px;

	width: 20px;
	height: 20px;

	border:
		1.5px solid
		#C9D9DD;

	border-radius:
		50%;

	background:
		#FFFFFF;
}

body.single-product
.qi-plan-card.is-selected
.qi-plan-card__check {
	border-color:
		var(--qi-primary, #0F9693);

	background:
		var(--qi-primary, #0F9693);
}

body.single-product
.qi-plan-card.is-selected
.qi-plan-card__check::after {
	content: "";

	position: absolute;

	left: 6px;
	top: 3px;

	width: 5px;
	height: 9px;

	border-right:
		2px solid #FFFFFF;

	border-bottom:
		2px solid #FFFFFF;

	transform:
		rotate(45deg);
}


/* =========================================================
 * BEST VALUE BADGE
 * ======================================================= */

body.single-product
.qi-plan-card__best {
	position: absolute;

	top: -9px;
	left: 12px;

	padding:
		4px
		9px;

	border-radius:
		999px;

	background:
		var(--qi-brand-blue, #0B4F73);

	color:
		#FFFFFF;

	font-size:
		10px;

	font-weight:
		800;

	line-height:
		1.2;

	letter-spacing:
		0.02em;

	box-shadow:
		0 3px 8px
		rgba(13, 47, 67, 0.12);
}


/* =========================================================
 * NAME
 * ======================================================= */

body.single-product
.qi-plan-card__name {
	display: block;

	max-width:
		calc(100% - 27px);

	margin-bottom:
		8px;

	color:
		var(--qi-dark, #0D2F43);

	font-size:
		15px;

	font-weight:
		800;

	line-height:
		1.3;
}


/* =========================================================
 * OLD PRICE
 * ======================================================= */

body.single-product
.qi-plan-card__old {
	display: block;

	margin-bottom:
		2px;

	color:
		#9AA9AE;

	font-size:
		11px;

	font-weight:
		600;

	line-height:
		1.2;

	text-decoration:
		line-through;
}


/* =========================================================
 * CURRENT PRICE
 * ======================================================= */

body.single-product
.qi-plan-card__price {
	display: block;

	margin-bottom:
		5px;

	color:
		var(--qi-brand-blue, #0B4F73);

	font-size:
		19px;

	font-weight:
		800;

	line-height:
		1.1;

	letter-spacing:
		-0.01em;
}


/* =========================================================
 * UNIT PRICE
 * ======================================================= */

body.single-product
.qi-plan-card__meta {
	display: block;

	color:
		var(--qi-muted, #6D8189);

	font-size:
		10px;

	font-weight:
		600;

	line-height:
		1.4;
}


/* =========================================================
 * SAVING
 * ======================================================= */

body.single-product
.qi-plan-card__saving {
	display: inline-flex;

	align-items: center;

	margin-top:
		7px;

	padding:
		3px
		7px;

	border-radius:
		999px;

	background:
		var(--qi-soft-teal, #EAF7F6);

	color:
		var(--qi-primary-hover, #0B7D7B);

	font-size:
		10px;

	font-weight:
		800;

	line-height:
		1.25;
}


/* =========================================================
 * DISABLED
 * ======================================================= */

body.single-product
.qi-plan-card.is-disabled,
body.single-product
.qi-plan-card:disabled {
	border-color:
		#E4EAEC !important;

	background:
		#F6F8F8 !important;

	color:
		#9AA9AE !important;

	cursor:
		not-allowed;

	opacity:
		0.65;

	transform:
		none !important;

	box-shadow:
		none !important;
}


/* =========================================================
 * SELECTED STATUS
 * ======================================================= */

body.single-product
.qi-plan-selected-status {
	display: flex;

	align-items: center;

	gap: 8px;

	min-height: 36px;

	margin-top:
		10px;

	padding:
		8px
		11px;

	border:
		1px solid
		#D8E6E9;

	border-radius:
		9px;

	background:
		#F7FAFB;

	color:
		var(--qi-muted, #6D8189);

	font-size:
		11px;

	font-weight:
		600;

	line-height:
		1.4;
}

body.single-product
.qi-plan-selected-status.is-selected {
	border-color:
		#CBE6E2;

	background:
		#EFF9F7;

	color:
		#296B62;
}

body.single-product
.qi-plan-selected-status__icon {
	position: relative;

	flex:
		0 0 15px;

	width: 15px;
	height: 15px;

	border:
		1.5px solid
		#AFC0C5;

	border-radius:
		50%;
}

body.single-product
.qi-plan-selected-status.is-selected
.qi-plan-selected-status__icon {
	border-color:
		var(--qi-primary, #0F9693);

	background:
		var(--qi-primary, #0F9693);
}

body.single-product
.qi-plan-selected-status.is-selected
.qi-plan-selected-status__icon::after {
	content: "";

	position: absolute;

	left: 4px;
	top: 2px;

	width: 4px;
	height: 7px;

	border-right:
		1.5px solid #FFFFFF;

	border-bottom:
		1.5px solid #FFFFFF;

	transform:
		rotate(45deg);
}


/* =========================================================
 * VARIATION PRICE / ACTION AREA
 * ======================================================= */

body.single-product
form.variations_form.qi-plan-v2-ready
.single_variation_wrap {
	margin-top:
		14px;

	padding-top:
		14px;

	border-top:
		1px dashed
		#D7E3E6;
}

body.single-product
form.variations_form.qi-plan-v2-ready
.woocommerce-variation-price {
	margin:
		0
		0
		12px;

	padding:
		0;

	border:
		0;

	font-size:
		inherit;
}

body.single-product
form.variations_form.qi-plan-v2-ready
.woocommerce-variation-price
.price {
	font-size:
		20px !important;

	line-height:
		1.2 !important;
}


/* =========================================================
 * MOBILE
 * ======================================================= */

@media (max-width: 849px) {

	body.single-product
	.qi-plan-selector__head {
		align-items:
			flex-start;

		margin-bottom:
			11px;
	}

	body.single-product
	.qi-plan-selector__tools {
		flex-direction:
			column;

		align-items:
			flex-end;

		gap:
			2px;
	}

	body.single-product
	.qi-plan-selector__hint {
		font-size:
			9px;
	}

	body.single-product
	.qi-plan-grid {
		gap:
			8px;
	}

	body.single-product
	.qi-plan-card {
		min-height:
			118px;

		padding:
			15px
			11px
			12px !important;

		border-radius:
			11px !important;
	}

	body.single-product
	.qi-plan-card__check {
		top:
			9px;

		right:
			9px;

		width:
			19px;

		height:
			19px;
	}

	body.single-product
	.qi-plan-card.is-selected
	.qi-plan-card__check::after {
		left:
			5px;

		top:
			2px;
	}

	body.single-product
	.qi-plan-card__best {
		left:
			9px;

		font-size:
			9px;
	}

	body.single-product
	.qi-plan-card__name {
		max-width:
			calc(100% - 22px);

		font-size:
			14px;
	}

	body.single-product
	.qi-plan-card__price {
		font-size:
			18px;
	}

	body.single-product
	.qi-plan-card__meta,
	body.single-product
	.qi-plan-card__saving {
		font-size:
			9px;
	}

	body.single-product
	.qi-plan-selected-status {
		min-height:
			34px;

		margin-top:
			9px;

		padding:
			7px
			10px;

		font-size:
			10px;
	}
}


/* =========================================================
 * VERY SMALL MOBILE
 * ======================================================= */

@media (max-width: 360px) {

	body.single-product
	.qi-plan-selector__hint {
		display:
			none;
	}

	body.single-product
	.qi-plan-card {
		padding-left:
			9px !important;

		padding-right:
			9px !important;
	}

	body.single-product
	.qi-plan-card__name {
		font-size:
			13px;
	}

	body.single-product
	.qi-plan-card__price {
		font-size:
			17px;
	}
}