/* Hub Plan de Pago - estilos del selector y avisos */

.hub-plan-pago-selector {
	margin: 0 0 1.2em;
	padding: 1em 1.1em;
	border: 1px solid #e3e3e3;
	border-radius: 10px;
	background: #fafafa;
}

.hub-plan-pago-title {
	margin: 0 0 .7em;
	font-weight: 700;
	font-size: 1em;
}

.hub-plan-option {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5em;
	padding: .7em .8em;
	margin: 0 0 .55em;
	border: 1px solid #dcdcdc;
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.hub-plan-option:last-child {
	margin-bottom: 0;
}

.hub-plan-option:hover {
	border-color: #b9b9b9;
}

.hub-plan-option input[type="radio"] {
	margin: 0 .35em 0 0;
	flex: 0 0 auto;
}

.hub-plan-option__main {
	font-weight: 600;
}

.hub-plan-option__price {
	margin-left: auto;
	font-weight: 700;
}

.hub-plan-option__note {
	flex: 0 0 100%;
	font-size: .82em;
	color: #2e7d32;
	font-weight: 600;
}

/* Estado seleccionado (lo marca el JS con la clase is-selected) */
.hub-plan-option.is-selected {
	border-color: #2e7d32;
	box-shadow: 0 0 0 1px #2e7d32 inset;
}

/* Aviso en el checkout */
.hub-plan-pago-checkout-note {
	margin: .6em 0;
	padding: .6em .8em;
	border-radius: 8px;
	background: #eef7ee;
	border: 1px solid #cde6cd;
	color: #205c22;
	font-size: .9em;
	font-weight: 600;
}

/* Selector de cuotas bloqueado en el checkout */
.hub-plan-pago-locked select {
	pointer-events: none;
	background-color: #f3f3f3;
	opacity: .85;
}

/* Selector de cuotas (sub-paso de Tarjeta). El JS lo coloca dentro del <li> de MP,
   antes del formulario, y lo muestra solo con Tarjeta. Visible por defecto (fail-safe:
   si el JS no corre, queda visible en su posición de render, no oculto). */
.hub-plan-pago-checkout {
	margin: 0 0 1.1em;
	padding: .9em 1em;
	border: 1px solid #e3e3e3;
	border-radius: 10px;
	background: #fafafa;
}

/* Feedback durante el AJAX de recálculo. NO se atenúa todo el bloque (leía como
   "bloqueado / ya no se puede cambiar"): solo se atenúan levemente las opciones NO
   elegidas, mientras la seleccionada queda resaltada y a full opacidad. Así comunica
   "elegiste esta" en lugar de "esto quedó fijo". Todo sigue clickeable (sin
   pointer-events:none) para poder cambiar de plan en cualquier momento. */
.hub-plan-pago-checkout.hub-plan-busy {
	cursor: progress;
}

.hub-plan-pago-checkout.hub-plan-busy .hub-plan-option:not(.is-selected) {
	opacity: .5;
}

.hub-plan-pago-checkout .hub-plan-item {
	margin: 0 0 .8em;
}

.hub-plan-pago-checkout .hub-plan-item:last-of-type {
	margin-bottom: 0;
}

.hub-plan-pago-checkout .hub-plan-item__name {
	margin: 0 0 .4em;
	font-weight: 700;
	font-size: .95em;
}

.hub-plan-pago-checkout .hub-plan-option {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4em;
	padding: .55em .7em;
	margin: 0 0 .45em;
	border: 1px solid #dcdcdc;
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	transition: opacity .15s ease, border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.hub-plan-pago-checkout .hub-plan-option:last-child {
	margin-bottom: 0;
}

/* Estado SELECCIONADO en el checkout: marca clara e independiente del radio, con el
   verde de marca (mint-deep). Se aplica por JS (clase is-selected) al plan elegido. */
.hub-plan-pago-checkout .hub-plan-option.is-selected {
	border-color: #4FC98E;
	box-shadow: 0 0 0 2px #4FC98E inset;
	background: #f0fbf5;
}

.hub-plan-pago-checkout .hub-plan-option__price {
	margin-left: auto;
	font-weight: 700;
}