/**
 * #billing_ph_departamento_field/#billing_ph_ciudad_field son las dos columnas de 47% que
 * WooCommerce arma con form-row-first/form-row-last (ver PH_Ubicacion_Cascada) - position:
 * relative aqui es lo que permite anclar .ph-cargando-ubicacion con position:absolute mas abajo
 * SIN que ese texto sume altura a la fila (ver ese comentario para el por que).
 */
#billing_ph_departamento_field,
#billing_ph_ciudad_field {
	position: relative;
}

/**
 * Feedback visual mientras se cargan Departamento/Estado y Ciudad por AJAX (ver
 * checkout-ubicacion-cascada.js) - antes solo cambiaba el texto de la opción placeholder dentro
 * del propio <select> colapsado, señal demasiado sutil para notar en unos pocos segundos de
 * espera real (proxy hacia el Hub/Heimdall). Este spinner + texto aparece debajo del campo,
 * visible sin necesidad de abrir el desplegable.
 *
 * position: absolute a proposito: Departamento y Ciudad son dos columnas lado a lado (47%/47%) -
 * si esto sumara altura al flujo normal (display:block sin mas), la columna que SI esta cargando
 * queda mas alta que la otra apenas un instante (ej. Ciudad cargando mientras Departamento ya
 * termino), lo que en pantallas chicas se ve como un desorden/salto vertical entre los dos
 * campos. Sacado del flujo, el spinner nunca desalinea la fila.
 */
.ph-cargando-ubicacion {
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 4px;
	font-size: 0.85em;
	color: #666;
	white-space: nowrap;
}

.ph-spinner {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: 6px;
	border: 2px solid rgba( 0, 0, 0, 0.15 );
	border-top-color: rgba( 0, 0, 0, 0.55 );
	border-radius: 50%;
	vertical-align: middle;
	animation: ph-girar 0.7s linear infinite;
}

@keyframes ph-girar {
	to {
		transform: rotate( 360deg );
	}
}

select.ph-ubicacion-select:disabled {
	opacity: 0.6;
	cursor: wait;
}

/**
 * Oculta TODO el bloque de campos de facturación hasta que este plugin termine de reposicionar
 * sus propios campos (tipo de documento, documento, departamento, ciudad) y de precargar el
 * primer listado de departamentos - sin esto, el donante veía el formulario "saltar" varias
 * veces mientras distintos scripts (el de WooCommerce y los de este plugin) reordenaban/poblaban
 * cosas después del primer render. checkout-ubicacion-cascada.js quita la clase que activa esto
 * en cuanto todo queda listo, con un respaldo duro por si algo tarda demasiado - ver también el
 * <noscript> que PH_Ubicacion_Cascada::imprimir_noscript_reveal() imprime en el <head>, para que
 * el checkout nunca quede escondido si el donante tiene JS deshabilitado.
 */
body.ph-preparando-checkout .woocommerce-billing-fields__field-wrapper {
	visibility: hidden;
	min-height: 420px;
	position: relative;
}

body.ph-preparando-checkout .woocommerce-billing-fields__field-wrapper::after {
	content: '';
	visibility: visible;
	position: absolute;
	top: 40px;
	left: 50%;
	width: 32px;
	height: 32px;
	margin-left: -16px;
	border: 3px solid rgba( 0, 0, 0, 0.15 );
	border-top-color: rgba( 0, 0, 0, 0.55 );
	border-radius: 50%;
	animation: ph-girar 0.7s linear infinite;
}

/**
 * El plugin no traia ningun ajuste propio para movil - Departamento/Estado y Ciudad quedaban
 * apiladas o desalineadas segun como el tema del sitio (no parte de este repo) tratara las
 * columnas form-row-first/form-row-last de WooCommerce en pantallas chicas. Forzar 100% aqui,
 * con selectores por id (mas especificos que las clases genericas del tema), hace que el
 * comportamiento en movil no dependa mas de eso.
 */
@media ( max-width: 600px ) {
	#billing_ph_departamento_field,
	#billing_ph_ciudad_field {
		width: 100% !important;
		float: none !important;
	}

	/* El overlay completo de "preparando checkout" (ver arriba) no necesita tanto alto en un
	 * celular - 420px pensado para desktop deja un bloque vacio ocupando buena parte de la
	 * pantalla mientras dura la carga inicial. */
	body.ph-preparando-checkout .woocommerce-billing-fields__field-wrapper {
		min-height: 220px;
	}
}