/* Selector de servicios extra. Los estilos son mínimos para heredar los del tema;
   desde el widget de Elementor se pueden ajustar colores, tipografías y espaciados. */

.swoo-services {
	box-sizing: border-box;
	width: 100%;
	flex: 0 0 100%;
	margin: 0 0 1em;
}

/* Si el bloque automático queda dentro de un formulario flex, que ocupe su propia fila. */
form.cart:has(> .swoo-services),
.woocommerce-variation-add-to-cart:has(> .swoo-services) {
	flex-wrap: wrap;
}

.swoo-services__title {
	margin: 0 0 0.5em;
}

.swoo-services__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.swoo-service {
	margin: 0 0 0.6em;
	padding: 0;
}

.swoo-service:last-child {
	margin-bottom: 0;
}

.swoo-service__option {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	cursor: pointer;
}

.swoo-service__checkbox {
	flex: none;
	width: 1.1em;
	height: 1.1em;
	margin: 0;
	cursor: pointer;
}

.swoo-service__name {
	flex: 1;
}

.swoo-service__price {
	white-space: nowrap;
	font-weight: 600;
}

.swoo-service__mode {
	font-weight: normal;
	opacity: 0.75;
}

.swoo-service__description,
.swoo-service__field {
	margin: 0.3em 0 0 1.6em;
}

.swoo-service__description {
	font-size: 0.9em;
	opacity: 0.8;
}

.swoo-service__description > :last-child {
	margin-bottom: 0;
}

.swoo-service__field[hidden],
.swoo-services__total[hidden] {
	display: none;
}

.swoo-service__field label {
	display: block;
	margin: 0 0 0.25em;
	font-size: 0.9em;
}

.swoo-service__field .required {
	text-decoration: none;
	border: 0;
}

.swoo-service__text {
	box-sizing: border-box;
	width: 100%;
}

.swoo-service--error .swoo-service__text {
	border-color: #b32d2e;
}

.swoo-service__error {
	margin: 0.25em 0 0;
	color: #b32d2e;
	font-size: 0.85em;
}

.swoo-services__total {
	display: flex;
	justify-content: space-between;
	gap: 1em;
	margin-top: 0.75em;
	padding-top: 0.75em;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	font-weight: 600;
}

.swoo-services__preview-note {
	margin: 0.75em 0 0;
	font-size: 0.8em;
	opacity: 0.6;
}

/* Carrito y mini carrito: el servicio se ve como parte del producto de arriba. */
.woocommerce-cart-form .swoo-service-item td.product-name {
	padding-left: 2em;
}

.woocommerce-cart-form .swoo-service-item td.product-thumbnail img {
	max-width: 40px;
}

.woocommerce-mini-cart-item.swoo-service-item {
	padding-left: 1.5em;
}