/**
 * Tablas de compra simple y avanzada (widgets de Elementor). La avanzada
 * (.acc-purchase--advanced) añade el desplegable de grupos y la modalidad.
 *
 * Colores y alto en las variables de .acc-purchase; los colores también se
 * cambian desde la pestaña Estilo del widget. Los selectores llevan dos clases
 * para ganar a los estilos de select y button del tema.
 */
.acc-purchase {
	--acc-purchase-bar-bg: rgba(255, 255, 255, 0.9);
	--acc-purchase-button-bg: #c9920e;
	--acc-purchase-button-color: #fff;
	--acc-purchase-remove-color: #d63638;
	--acc-purchase-height: 56px;

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	padding: 12px;
	background: var(--acc-purchase-bar-bg);
	color: #333;
	line-height: 1.3;

	.acc-purchase__select,
	.acc-purchase__group {
		max-width: 100%;
		height: 46px;
		margin: 0;
		padding: 0 44px 0 16px;
		border: 0;
		border-radius: 4px;
		background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M4 0l4 5H0zM0 7h8l-4 5z' fill='%23333'/%3E%3C/svg%3E") no-repeat right 16px center / 8px 12px;
		color: #555;
		font: inherit;
		text-overflow: ellipsis;
		appearance: none;
		cursor: pointer;
	}

	/* Fechas de la avanzada hasta elegir grupo. */
	.acc-purchase__select:disabled {
		opacity: 0.7;
		cursor: not-allowed;
	}

	.acc-purchase__schedule {
		flex: 1 1 auto;
		margin: 0;
		font-weight: 700;
		text-align: center;
	}

	/* Ocupa lo que dejan los desplegables y el botón: si no cabe, modalidad y horario van en dos líneas. */
	&.acc-purchase--advanced .acc-purchase__schedule {
		display: flex;
		flex: 1 1 0;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0 24px;
		line-height: 1.2;
		text-wrap: balance;
	}

	/* El horario de la avanzada es texto largo ("Lunes y Miércoles de 18h a 21h"): puede cortarse. */
	&.acc-purchase--advanced .acc-purchase__schedule-time {
		white-space: normal;
	}

	.acc-purchase__schedule-time {
		white-space: nowrap;
	}

	.acc-purchase__actions {
		display: flex;
		gap: 8px;
	}

	.acc-purchase__form {
		display: flex;
		margin: 0;
	}

	.acc-purchase__button {
		min-height: var(--acc-purchase-height);
		margin: 0;
		padding: 0 32px;
		border: 0;
		border-radius: 4px;
		background: var(--acc-purchase-button-bg);
		color: var(--acc-purchase-button-color);
		font: inherit;
		font-weight: 600;
		cursor: pointer;
		transition: background-color 0.2s;

		/* Aclara el color que tenga (también el elegido en el panel del widget). */
		&:hover:not(:disabled) {
			background: color-mix(in srgb, var(--acc-purchase-button-bg) 80%, #fff);
		}

		&:disabled {
			opacity: 0.5;
			cursor: not-allowed;
		}
	}

	/* Mismo alto que el botón: se estira con .acc-purchase__actions. */
	.acc-purchase__remove {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: var(--acc-purchase-height);
		margin: 0;
		padding: 0;
		border: 1px solid var(--acc-purchase-remove-color);
		border-radius: 4px;
		background: #fff;
		color: var(--acc-purchase-remove-color);
		cursor: pointer;
		transition: background-color 0.2s, color 0.2s;

		&:hover:not(:disabled) {
			background: var(--acc-purchase-remove-color);
			color: #fff;
		}

		&[hidden] {
			display: none;
		}

		&:disabled {
			opacity: 0.5;
		}

		svg {
			width: 24px;
			height: 24px;
		}
	}

	.acc-purchase__select,
	.acc-purchase__group,
	.acc-purchase__button,
	.acc-purchase__remove {
		&:focus-visible {
			outline: 2px solid currentColor;
			outline-offset: 2px;
		}
	}
}

/*
 * Barra fijada (opción "Fijar al hacer scroll"). El JS pone .is-stuck, el
 * alto del hueco, el top (bajo la admin bar) y el ancho y la posición de la
 * columna. En tablet y móvil va arriba a todo el ancho, con el contenido
 * alineado con la columna para que no se mueva en horizontal.
 */
.acc-purchase-sticky {
	--acc-purchase-sticky-bg: #ebedef;

	&.is-stuck {
		.acc-purchase-sticky__bar {
			position: fixed;
			right: 0;
			left: 0;
			z-index: 2147483647;
			background: var(--acc-purchase-sticky-bg);
			box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
		}

		.acc-purchase {
			width: var(--acc-purchase-width);
			margin-left: var(--acc-purchase-left);
			background: transparent;
		}
	}
}

/*
 * En escritorio va abajo, a 40px del borde y con el ancho y la posición de su
 * caja del hero. El botón de WhatsApp (Joinchat) sube por encima y la página
 * gana un hueco al final para que la barra no tape el pie.
 */
@media (min-width: 1025px) {
	.acc-purchase-sticky.is-stuck {
		.acc-purchase-sticky__bar {
			right: auto;
			bottom: 40px;
			left: var(--acc-purchase-left);
			width: var(--acc-purchase-width);
		}

		.acc-purchase {
			width: auto;
			margin-left: 0;
		}
	}

	.acc-purchase-stuck {
		.joinchat {
			--bottom: calc(var(--acc-purchase-stuck-height) + 52px);
		}

		body {
			padding-bottom: calc(var(--acc-purchase-stuck-height) + 40px);
		}
	}
}

.acc-purchase__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * Avanzada en escritorio: anchos fijos para que nada se mueva al elegir grupo
 * (cambian las opciones y con ellas el ancho natural del desplegable) ni
 * fecha (cambia el texto del botón). El texto ocupa el resto y baja de línea.
 */
@media (min-width: 1025px) {
	.acc-purchase.acc-purchase--advanced {
		flex-wrap: nowrap;

		.acc-purchase__group {
			flex: 0 0 200px;
		}

		.acc-purchase__select {
			flex: 0 0 310px;
		}

		.acc-purchase__actions {
			flex: none;
		}

		.acc-purchase__button {
			min-width: 260px;
		}
	}
}

/* Avanzada en tablet: los desplegables en una fila y el texto con el botón en otra. */
@media (min-width: 768px) and (max-width: 1024px) {
	.acc-purchase.acc-purchase--advanced {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

		.acc-purchase__group,
		.acc-purchase__select {
			width: 100%;
		}

		.acc-purchase__form {
			flex: 1 1 auto;
		}

		.acc-purchase__button {
			width: 100%;
		}
	}
}

/*
 * Móvil según el Figma: 24px arriba y abajo, 51px a los lados y 12px entre
 * elementos. La papelera va junto al select (la fecha que quita) para que el
 * botón siga a todo el ancho; select, botón y papelera miden lo mismo de alto.
 */
@media (max-width: 767px) {
	.acc-purchase {
		--acc-purchase-height: 44px;

		display: grid;
		grid-template-columns: 1fr auto;
		align-items: stretch;
		gap: 12px 8px;
		padding: 24px 51px;

		.acc-purchase__select {
			grid-area: 1 / 1 / 2 / 3;
			width: 100%;
			height: var(--acc-purchase-height);
			padding: 0 36px;
			text-align: center;
			text-align-last: center;
		}

		&:has(.acc-purchase__remove:not([hidden])) .acc-purchase__select {
			grid-column: 1;
		}

		.acc-purchase__schedule {
			grid-area: 2 / 1 / 3 / 3;
		}

		.acc-purchase__actions {
			display: contents;
		}

		.acc-purchase__form {
			grid-area: 3 / 1 / 4 / 3;
		}

		.acc-purchase__button {
			width: 100%;
			padding: 0 16px;
		}

		.acc-purchase__remove {
			grid-area: 1 / 2;
		}

		/* Avanzada: los grupos encima de las fechas, con el texto a la izquierda. */
		&.acc-purchase--advanced {
			.acc-purchase__group {
				grid-area: 1 / 1 / 2 / 3;
				width: 100%;
				height: var(--acc-purchase-height);
			}

			.acc-purchase__group,
			.acc-purchase__select {
				padding: 0 44px 0 24px;
				text-align: left;
				text-align-last: left;
			}

			.acc-purchase__select,
			.acc-purchase__remove {
				grid-row: 2;
			}

			.acc-purchase__schedule {
				grid-row: 3;
			}

			.acc-purchase__form {
				grid-row: 4;
			}
		}
	}

	/* Fijada: select y horario en una fila y el botón debajo, más compacta. */
	.acc-purchase-sticky.is-stuck .acc-purchase {
		--acc-purchase-height: 40px;

		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) auto;
		gap: 8px;
		padding: 8px 0;

		.acc-purchase__select {
			grid-area: 1 / 1 / 2 / 2;
		}

		.acc-purchase__schedule {
			grid-area: 1 / 2 / 2 / 4;
			align-self: center;
			line-height: 1.2;
		}

		.acc-purchase__form {
			grid-area: 2 / 1 / 3 / 4;
		}

		.acc-purchase__remove {
			grid-area: 2 / 3;
		}

		&:has(.acc-purchase__remove:not([hidden])) .acc-purchase__form {
			grid-column: 1 / 3;
		}
	}

	/*
	 * Avanzada fijada: los dos desplegables en una fila, modalidad y horario
	 * debajo y el botón (con la papelera al lado) a todo el ancho.
	 */
	.acc-purchase-sticky.is-stuck .acc-purchase--advanced {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

		.acc-purchase__group {
			grid-area: 1 / 1 / 2 / 2;
		}

		.acc-purchase__select {
			grid-area: 1 / 2 / 2 / 3;
		}

		.acc-purchase__schedule {
			grid-area: 2 / 1 / 3 / 3;
		}

		.acc-purchase__actions {
			display: flex;
			grid-area: 3 / 1 / 4 / 3;
			gap: 8px;
		}

		.acc-purchase__form {
			flex: 1 1 auto;
		}
	}
}