/* Crezko Pack Pricing — frontend
 * Selectores con prefijo .czp-box para no chocar con Elementor / el tema. */

.czp-box {
	--czp-c: #d9363e;
	--czp-rgb: 217, 54, 62;
	--czp-on: #fff;
	--czp-radius: 10px;
	--czp-muted: #6b7280;
	--czp-border: #dcdcde;
	--czp-bg: #f5f5f6;
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0 0 22px;
	padding: 0;
	font-size: 16px;
	line-height: 1.3;
	clear: both;
	flex: 0 0 100%; /* si el contenedor es flex (form.cart, Woostify, Elementor) */
}
.czp-box *,
.czp-box *::before,
.czp-box *::after { box-sizing: border-box; }

/* Título con líneas a los lados */
.czp-box .czp-title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 12px;
	color: var(--czp-c);
	font-weight: 700;
	font-size: 1.05em;
	text-align: center;
}
.czp-box .czp-title::before,
.czp-box .czp-title::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: rgba(var(--czp-rgb), .35);
}
.czp-box .czp-title span { flex: 0 1 auto; }

.czp-box .czp-options {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Opción */
.czp-box .czp-opt {
	position: relative;
	display: flex !important;
	align-items: center;
	gap: 14px;
	width: 100%;
	margin: 0 !important;
	padding: 16px 18px !important;
	background: var(--czp-bg);
	border: 1.5px solid var(--czp-border);
	border-radius: var(--czp-radius);
	cursor: pointer;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}
.czp-box .czp-opt:hover { border-color: rgba(var(--czp-rgb), .55); }
.czp-box .czp-opt.is-selected {
	background: rgba(var(--czp-rgb), .06);
	border-color: var(--czp-c);
	box-shadow: 0 2px 10px rgba(var(--czp-rgb), .10);
}
.czp-box .czp-opt.is-disabled { opacity: .5; cursor: not-allowed; }
.czp-box .czp-opt.has-badge { margin-top: 6px !important; }

/* Input nativo oculto (accesible) */
.czp-box .czp-opt input[type="radio"] {
	position: absolute !important;
	opacity: 0 !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	pointer-events: none;
}
.czp-box .czp-opt input[type="radio"]:focus-visible ~ .czp-radio {
	outline: 2px solid var(--czp-c);
	outline-offset: 2px;
}

/* Radio dibujado */
.czp-box .czp-radio {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1.5px solid #b5b8bd;
	background: #fff;
	position: relative;
	transition: border-color .18s ease;
}
.czp-box .czp-radio::after {
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: var(--czp-c);
	transform: scale(0);
	transition: transform .18s ease;
}
.czp-box .czp-opt.is-selected .czp-radio { border-color: var(--czp-c); border-width: 2px; }
.czp-box .czp-opt.is-selected .czp-radio::after { transform: scale(1); }

/* Textos */
.czp-box .czp-text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.czp-box .czp-label {
	font-size: 1.15em;
	font-weight: 500;
	color: #1d2327;
	line-height: 1.2;
}
.czp-box .czp-sub {
	font-size: .85em;
	color: var(--czp-muted);
	display: flex;
	flex-wrap: wrap;
	gap: 2px 8px;
}
.czp-box .czp-unit { color: var(--czp-c); font-weight: 600; white-space: nowrap; }
.czp-box .czp-sub-text:empty { display: none; }

/* Precios */
.czp-box .czp-price {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	gap: 1px;
}
.czp-box .czp-now {
	font-size: 1.2em;
	font-weight: 700;
	color: var(--czp-c);
	white-space: nowrap;
}
.czp-box .czp-now .woocommerce-Price-amount,
.czp-box .czp-now bdi { color: inherit; }
.czp-box .czp-was {
	font-size: .85em;
	color: #8c8f94;
	text-decoration: line-through;
	white-space: nowrap;
}
.czp-box .czp-save {
	margin-top: 3px;
	font-size: .72em;
	font-weight: 700;
	color: var(--czp-c);
	background: rgba(var(--czp-rgb), .1);
	border-radius: 999px;
	padding: 2px 8px;
	white-space: nowrap;
}

/* Insignia "MÁS CONVENIENTE" */
.czp-box .czp-badge {
	position: absolute;
	top: 0;
	right: 20px;
	transform: translateY(-55%);
	background: var(--czp-c);
	color: var(--czp-on);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .03em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 4px;
	line-height: 1.2;
	white-space: nowrap;
	box-shadow: 0 2px 6px rgba(var(--czp-rgb), .3);
}

/* Animación sutil al cambiar */
@media (prefers-reduced-motion: no-preference) {
	.czp-box .czp-opt:active:not(.is-disabled) { transform: scale(.995); }
}

/* Selector de cantidad oculto cuando hay packs */
form.cart.czp-hide-qty .quantity { display: none !important; }

/* Móvil */
@media (max-width: 480px) {
	.czp-box .czp-opt { padding: 14px 14px !important; gap: 10px; }
	.czp-box .czp-label { font-size: 1.02em; }
	.czp-box .czp-now { font-size: 1.08em; }
	.czp-box .czp-badge { right: 12px; font-size: 10px; }
}

/* Etiqueta en catálogo */
.czp-loop-badge {
	display: inline-block;
	margin: 4px 0;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 700;
	color: var(--czp-on, #fff);
	background: var(--czp-c, #d9363e);
}