.apo-options {
	margin: 1.5em 0;
	display: flex;
	flex-direction: column;
	gap: 1.1em;
}

.apo-options--busy {
	opacity: 0.6;
}

.apo-field {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
}

.apo-field__label {
	font-weight: 600;
}

.apo-required {
	color: #b32d2e;
}

.apo-subtitle {
	margin: 0.6em 0 0;
	padding-bottom: 0.3em;
	border-bottom: 1px solid #e0e0e0;
}

.apo-field input[type="text"],
.apo-field input[type="url"],
.apo-field input[type="number"],
.apo-field input[type="file"],
.apo-field select,
.apo-field textarea {
	width: 100%;
	max-width: 100%;
	padding: 0.65em 0.85em;
	border: 1px solid #d8d8d8;
	border-radius: 8px;
	background-color: #fff;
	box-sizing: border-box;
	line-height: 1.4;
	/* Sombra muy sutil para dar profundidad a los campos. */
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Foco: realce sutil con el azul del plugin. */
.apo-field input[type="text"]:focus,
.apo-field input[type="url"]:focus,
.apo-field input[type="number"]:focus,
.apo-field input[type="file"]:focus,
.apo-field select:focus,
.apo-field textarea:focus {
	border-color: #2271b1;
	box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.12);
	outline: none;
}

/* Flecha propia del select (no depende del tema; el fondo blanco no la tapa). */
.apo-field select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 2.2em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='%23646970'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.8em center;
	background-size: 1.3em;
}

.apo-field textarea {
	min-height: 90px;
	resize: vertical;
}

/* Input de archivo: caja consistente + botón "Elegir" estilizado. */
.apo-field input[type="file"] {
	padding: 0.45em 0.6em;
	color: #646970;
	cursor: pointer;
}

.apo-field input[type="file"]::file-selector-button {
	margin-right: 0.85em;
	padding: 0.5em 1.1em;
	border: 0;
	border-radius: 6px;
	background: #2271b1;
	color: #fff;
	font-weight: 600;
	font-size: 0.95em;
	cursor: pointer;
	transition: background 0.15s ease;
}

.apo-field input[type="file"]::file-selector-button:hover {
	background: #195a8e;
}

/* Compatibilidad WebKit/Blink antiguos. */
.apo-field input[type="file"]::-webkit-file-upload-button {
	margin-right: 0.85em;
	padding: 0.5em 1.1em;
	border: 0;
	border-radius: 6px;
	background: #2271b1;
	color: #fff;
	font-weight: 600;
	font-size: 0.95em;
	cursor: pointer;
}

.apo-choice {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-weight: 400;
}

.apo-swatch-dot {
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 50%;
	flex: none;
}

.apo-file-status {
	display: block;
	min-height: 1.4em;
	color: #646970;
	font-size: 0.9em;
}

.apo-file-status.is-success {
	color: #1f7a3d;
}

.apo-file-status.is-error {
	color: #b32d2e;
}

.apo-field-hint {
	display: block;
	margin-top: 0.25em;
	color: #646970;
	font-size: 0.85em;
}

/* Ancho/Largo ocupan todo el ancho (como los select): dos columnas iguales
   que llenan la fila; cada input usa el 100% de su columna. */
.apo-m2-inputs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1em;
}

.apo-m2-inputs label {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
	font-weight: 400;
	min-width: 0;
}

.apo-field--m2 .apo-m2-inputs input[type="number"] {
	width: 100%;
	max-width: 100%;
}

@media (max-width: 380px) {
	.apo-m2-inputs {
		grid-template-columns: 1fr;
	}
}

.apo-summary {
	margin-top: 0.5em;
	padding: 0.55em 1em;
	background: #f7f7f7;
	border-radius: 6px;
}

/* Reserva el espacio del resumen cuando éste pasa a flotar (sin salto). */
.apo-summary-placeholder {
	height: 0;
}

/* Resumen flotante: mientras su lugar natural está más abajo, queda fijo cerca
   del pie del viewport, conservando su MISMO ancho, posición y estilo (fondo,
   radio y padding base). El JS fija left/width al ancho de su lugar natural
   (no full-width). Al hacer scroll hasta él, el JS saca esta clase y vuelve a
   su posición normal. */
.apo-summary.is-floating {
	position: fixed;
	bottom: 16px;
	z-index: 100;
	margin: 0;
	box-shadow: 0 6px 24px rgba(16, 24, 40, 0.18);
	/* Una sola fila: "Total: $X" a la izquierda y el botón a la derecha. */
	display: flex;
	align-items: center;
	gap: 1em;
}

/* Al flotar: oculta el desglose; el total y el botón van en línea. */
.apo-summary.is-floating .apo-breakdown {
	display: none;
}

.apo-summary.is-floating .apo-summary__row--total {
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	border-top: 0;
	justify-content: flex-start;
	gap: 0.4em;
}

.apo-summary.is-floating .apo-summary__row--total > span::after {
	content: ':';
}

/* Botón "Agregar al carrito": solo visible cuando el resumen flota (al estar
   anclado, el botón nativo de WooCommerce ya está visible debajo). */
.apo-summary__cart {
	display: none;
	width: 100%;
	margin-top: 0.6em;
	padding: 0.7em 1em;
	border: 0;
	border-radius: 9999px;
	background: #fecb15;
	color: #000;
	font-weight: 700;
	font-size: 1em;
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.15s ease;
}

.apo-summary__cart:hover {
	background: #ecbb05;
}

.apo-summary.is-floating .apo-summary__cart {
	display: block;
	width: auto;
	flex: 0 0 auto;
	margin-top: 0;
	white-space: nowrap;
}

.apo-summary__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1em;
}

.apo-summary__row--total {
	margin-top: 0.4em;
	padding-top: 0.4em;
	border-top: 1px solid #e0e0e0;
}

.apo-summary__total {
	font-size: 1.2em;
}

.apo-breakdown__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1em;
	font-size: 0.9em;
	color: #50575e;
	padding: 0.05em 0;
}

.apo-breakdown__amount {
	white-space: nowrap;
}

/* Quantity-tier products: the tier dropdown is the quantity selector, so hide
   WooCommerce's native quantity input on the product page. The chosen tier
   becomes the cart quantity (shown locked in the cart as .apo-cart-qty). */
.apo-has-qty-tier form.cart .quantity {
	display: none !important;
}

.apo-cart-qty {
	font-weight: 600;
}