/**
 * Giao dien One-time vs Subscribe & Save.
 *
 * Dung lai token brand co san (--rovina-primary, --rv-bundle-*) de dong bo
 * tuyet doi voi bundle selector va cart drawer.
 *
 * Hieu ung mo/dong panel: grid-template-rows 0fr -> 1fr. Cach nay animate
 * duoc chieu cao ma KHONG can JS do kich thuoc, nen khong giat.
 */

.rv-po {
	--rv-po-gap: 12px;
	--rv-po-radius: var( --rv-bundle-radius, 12px );
	--rv-po-ease: cubic-bezier( .32, .72, 0, 1 );
	--rv-po-dur: 340ms;

	display: flex;
	flex-direction: column;
	gap: var( --rv-po-gap );
	margin: 18px 0;
}

/* ---------- Khoi lua chon ---------- */

.rv-po__opt {
	border: 2px solid var( --rv-bundle-border, #e6e0e0 );
	border-radius: var( --rv-po-radius );
	background: var( --rv-bundle-bg, #fff );
	overflow: hidden;
	transition:
		border-color var( --rv-po-dur ) var( --rv-po-ease ),
		background-color var( --rv-po-dur ) var( --rv-po-ease ),
		box-shadow var( --rv-po-dur ) var( --rv-po-ease );
}

.rv-po__opt.is-active {
	border-color: var( --rovina-primary, #933333 );
	background: var( --rv-bundle-sel, #fdf7f7 );
	box-shadow: 0 2px 12px rgba( 147, 51, 51, .10 );
}

/* ---------- Dong tieu de (bam duoc ca dong) ---------- */

.rv-po__head {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px;
	cursor: pointer;
	min-height: 48px; /* tap target mobile */
	position: relative;
}

.rv-po__head input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

/* Vong radio tu ve de kiem soat hoan toan mau brand */
.rv-po__radio {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	border: 2px solid #c9bfbf;
	border-radius: 50%;
	background: #fff;
	position: relative;
	transition:
		border-color 200ms var( --rv-po-ease ),
		box-shadow 200ms var( --rv-po-ease );
}

.rv-po__radio--sm {
	width: 18px;
	height: 18px;
}

.rv-po__radio::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var( --rovina-primary, #933333 );
	transform: scale( 0 );
	transition: transform 220ms var( --rv-po-ease );
}

.rv-po__radio--sm::after {
	width: 8px;
	height: 8px;
}

.rv-po__opt.is-active > .rv-po__head .rv-po__radio,
.rv-po__plan.is-active .rv-po__radio {
	border-color: var( --rovina-primary, #933333 );
}

.rv-po__opt.is-active > .rv-po__head .rv-po__radio::after,
.rv-po__plan.is-active .rv-po__radio::after {
	transform: scale( 1 );
}

/* Focus ro rang cho ban phim */
.rv-po__head input:focus-visible ~ .rv-po__radio,
.rv-po__plan input:focus-visible ~ .rv-po__radio {
	box-shadow: 0 0 0 3px rgba( 147, 51, 51, .25 );
}

/* ---------- Nhan ---------- */

.rv-po__label {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.rv-po__name {
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size: 1rem;
	color: #2b2b2b;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	line-height: 1.3;
}

.rv-po__desc {
	font-size: .85rem;
	color: #6b6b6b;
	line-height: 1.45;
}

.rv-po__desc strong {
	color: var( --rovina-primary, #933333 );
	font-weight: 700;
}

.rv-po__was {
	text-decoration: line-through;
	opacity: .65;
}

.rv-po__badge {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 999px;
	background: var( --rv-badge-bg, #933333 );
	color: #fff;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ---------- Panel mo/dong: animate chieu cao khong can JS ---------- */

.rv-po__panel {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition:
		grid-template-rows var( --rv-po-dur ) var( --rv-po-ease ),
		opacity 240ms var( --rv-po-ease );
}

.rv-po__opt.is-active .rv-po__panel {
	grid-template-rows: 1fr;
	opacity: 1;
}

.rv-po__panel-inner {
	overflow: hidden;
	min-height: 0; /* bat buoc de 0fr thu gon duoc */
	padding: 0 16px;
}

.rv-po__opt.is-active .rv-po__panel-inner {
	padding-bottom: 16px;
}

/* Panel dong: khong cho tab vao ben trong + tiet kiem render */
.rv-po__opt:not( .is-active ) .rv-po__panel {
	content-visibility: hidden;
}

/* Bundle ben trong panel: bo margin ngoai de khong lech */
.rv-po__panel-inner .rovina-bundles {
	margin: 0;
}

.rv-po__panel-inner .rovina-bundles__title {
	margin-top: 0;
}

/* ---------- Chon chu ky ---------- */

.rv-po__plans-title {
	margin: 4px 0 10px;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size: .82rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #6b6b6b;
}

.rv-po__plan {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	margin-bottom: 8px;
	min-height: 48px;
	border: 1.5px solid var( --rv-bundle-border, #e6e0e0 );
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	position: relative;
	transition:
		border-color 220ms var( --rv-po-ease ),
		background-color 220ms var( --rv-po-ease );
}

.rv-po__plan:last-of-type {
	margin-bottom: 0;
}

.rv-po__plan.is-active {
	border-color: var( --rovina-primary, #933333 );
	background: var( --rv-bundle-sel, #fdf7f7 );
}

.rv-po__plan input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.rv-po__plan-label {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: .92rem;
	font-weight: 500;
	color: #2b2b2b;
	min-width: 0;
}

.rv-po__plan-note {
	font-size: .7rem;
	font-weight: 600;
	color: var( --rovina-primary, #933333 );
	background: rgba( 147, 51, 51, .08 );
	padding: 2px 7px;
	border-radius: 999px;
	white-space: nowrap;
}

.rv-po__plan-price {
	flex: 0 0 auto;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size: .95rem;
	color: var( --rovina-primary, #933333 );
}

/* ---------- Quyen loi ---------- */

.rv-po__perks {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.rv-po__perks li {
	position: relative;
	padding-left: 24px;
	font-size: .85rem;
	color: #4a4a4a;
	line-height: 1.5;
}

.rv-po__perks li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: .42em;
	width: 11px;
	height: 6px;
	border-left: 2px solid var( --rovina-primary, #933333 );
	border-bottom: 2px solid var( --rovina-primary, #933333 );
	transform: rotate( -45deg );
}

/* ---------- Mobile ---------- */

@media screen and ( max-width: 600px ) {

	.rv-po__head {
		padding: 14px 13px;
		gap: 10px;
	}

	.rv-po__name {
		font-size: .95rem;
	}

	.rv-po__desc {
		font-size: .8rem;
	}

	.rv-po__panel-inner {
		padding: 0 13px;
	}

	.rv-po__opt.is-active .rv-po__panel-inner {
		padding-bottom: 13px;
	}

	.rv-po__plan {
		padding: 11px 12px;
	}

	.rv-po__plan-label {
		font-size: .88rem;
	}
}

/* ---------- Ton trong prefers-reduced-motion ---------- */

@media ( prefers-reduced-motion: reduce ) {

	.rv-po__opt,
	.rv-po__panel,
	.rv-po__radio,
	.rv-po__radio::after,
	.rv-po__plan {
		transition: none;
	}
}