/**
 * Australcode Couriers — dropdown de autocompletado de dirección (Google Places)
 * en el checkout.
 *
 * CAPA DE DOMINIO sobre el Australcode Frontend Kit (`assets/acfk/`): el aro de
 * foco, los neutros y el radio los da el kit.
 * Canon: wp-plugin-design/references/frontend-kit.md
 *
 * DEFECTO CORREGIDO al adoptar el kit: la versión anterior hacía
 *
 *     .acshp-ac__btn:hover, .acshp-ac__btn:focus { background: #f1f5f9; outline: none; }
 *
 * o sea MATABA el aro de foco y dejaba como único indicador un fondo gris que
 * da ~1.05:1 contra el blanco. Un cliente navegando con teclado no podía ver en
 * qué dirección estaba parado, en pleno checkout. Es WCAG 2.4.7 (Focus Visible),
 * nivel A. Ahora hover y foco están separados: el fondo es el hover, y el foco
 * lo marca el aro del kit.
 */

.acshp-ac__dropdown {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	z-index: var( --acfk-z-modal, 1000 );
	margin-top: 4px;
	border: 1px solid var( --acfk-hairline, rgba( 0, 0, 0, 0.12 ) );
	border-radius: var( --acfk-radius, 10px );
	/* Fondo OPACO a propósito: flota sobre los campos del checkout y un wash
	   translúcido dejaría leer el formulario a través de la lista. */
	background: var( --acshp-ac-surface, #fff );
	box-shadow: 0 8px 28px rgba( 0, 0, 0, 0.12 );
	overflow: hidden;
}

.acshp-ac__list {
	list-style: none;
	margin: 0;
	padding: 4px;
}

.acshp-ac__item {
	margin: 0;
	padding: 0;
}

.acshp-ac__btn {
	display: block;
	width: 100%;
	padding: 10px 12px;
	border: 0;
	border-radius: var( --acfk-radius-sm, 6px );
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 14px;
	line-height: 1.35;
	text-align: left;
	cursor: pointer;
}

.acshp-ac__btn:hover {
	background: var( --acfk-wash-2, rgba( 0, 0, 0, 0.05 ) );
}

.acshp-ac__foot {
	padding: 6px 12px;
	border-top: 1px solid var( --acfk-hairline, rgba( 0, 0, 0, 0.12 ) );
	color: var( --acfk-muted, inherit );
	font-size: 11px;
	text-align: right;
}

@media ( max-width: 600px ) {
	/* La sugerencia completa de Google no entra en 375px, y un tap de 10px de
	   alto en el checkout es donde más caro sale errarle. */
	.acshp-ac__btn {
		padding: 12px;
		font-size: 15px;
	}
}