/*
 * Operación en carrito y checkout.
 *
 * Vive dentro de la plantilla del tema, así que hereda tipografía y fondo. Las
 * líneas y los tonos suaves se derivan del color de texto heredado con
 * color-mix, no de `prefers-color-scheme`: la preferencia del sistema no dice
 * de qué color es la página.
 */
.notiwoo-fulfillment {
	--nwf-accent: #2563eb;
	--nwf-accent-text: #ffffff;
	--nwf-line: color-mix(in srgb, currentColor 14%, transparent);
	--nwf-soft: color-mix(in srgb, currentColor 5%, transparent);
	--nwf-muted: color-mix(in srgb, currentColor 66%, transparent);
	--nwf-ok: #15803d;
	--nwf-error: #b3261e;
	margin: 0 0 24px;
}

.notiwoo-fulfillment *,
.notiwoo-fulfillment *::before,
.notiwoo-fulfillment *::after {
	box-sizing: border-box;
}

.notiwoo-fulfillment.is-busy {
	opacity: 0.6;
	pointer-events: none;
}

.notiwoo-fulfillment__title {
	font-size: 1.05em;
	margin: 0 0 12px;
}

/* ---------- Estado del servicio ---------- */

.notiwoo-fulfillment__status {
	background: color-mix(in srgb, var(--nwf-error) 8%, transparent);
	border: 1px solid color-mix(in srgb, var(--nwf-error) 30%, transparent);
	border-radius: 10px;
	font-size: 0.95em;
	margin: 0 0 16px;
	padding: 12px 14px;
}

.notiwoo-fulfillment__status strong {
	display: block;
}

.notiwoo-fulfillment__status span {
	color: var(--nwf-muted);
	display: block;
	margin-top: 2px;
}

.notiwoo-fulfillment--banner {
	margin-bottom: 20px;
}

/* ---------- Modalidad ---------- */

.notiwoo-fulfillment__services {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	margin: 0 0 16px;
}

.notiwoo-fulfillment__service {
	position: relative;
}

.notiwoo-fulfillment__service input {
	height: 1px;
	left: 12px;
	opacity: 0;
	position: absolute;
	top: 50%;
	width: 1px;
}

.notiwoo-fulfillment__service label {
	align-items: flex-start;
	border: 1px solid var(--nwf-line);
	border-radius: 12px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 14px;
	transition: border-color 140ms ease, background 140ms ease;
	width: 100%;
}

.notiwoo-fulfillment__service label:hover {
	background: var(--nwf-soft);
}

.notiwoo-fulfillment__service input:checked + label {
	border-color: var(--nwf-accent);
	box-shadow: 0 0 0 1px var(--nwf-accent);
}

.notiwoo-fulfillment__service input:focus-visible + label {
	outline: 3px solid color-mix(in srgb, var(--nwf-accent) 40%, transparent);
	outline-offset: 2px;
}

.notiwoo-fulfillment__service-name {
	font-weight: 600;
}

.notiwoo-fulfillment__service-note {
	color: var(--nwf-muted);
	font-size: 0.85em;
	line-height: 1.4;
}

/* ---------- Día y hora ---------- */

/* Día y Hora lado a lado con el mismo aspecto; en móvil se apilan solos. */
.notiwoo-fulfillment__schedule {
	display: grid;
	gap: 12px 16px;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	margin-bottom: 14px;
}

.notiwoo-fulfillment__field {
	min-width: 0;
}

.notiwoo-fulfillment__label {
	display: block;
	font-size: 0.85em;
	font-weight: 600;
	margin-bottom: 6px;
}

.notiwoo-fulfillment__field select {
	background-color: transparent;
	border: 1px solid var(--nwf-line);
	border-radius: 10px;
	box-sizing: border-box;
	color: inherit;
	cursor: pointer;
	font: inherit;
	min-height: 46px;
	padding: 10px 12px;
	width: 100%;
}

.notiwoo-fulfillment__field select:focus-visible {
	border-color: var(--nwf-accent);
	outline: 3px solid color-mix(in srgb, var(--nwf-accent) 30%, transparent);
	outline-offset: 1px;
}

.notiwoo-fulfillment__field select:disabled {
	color: var(--nwf-muted);
	cursor: not-allowed;
}

.notiwoo-fulfillment__empty {
	color: var(--nwf-muted);
	font-size: 0.85em;
	margin: 6px 0 0;
}

/* ---------- Mínimo ---------- */

.notiwoo-fulfillment__minimum {
	margin: 0 0 12px;
}

.notiwoo-fulfillment__bar {
	background: var(--nwf-line);
	border-radius: 999px;
	height: 6px;
	overflow: hidden;
}

.notiwoo-fulfillment__bar span {
	background: var(--nwf-accent);
	border-radius: inherit;
	display: block;
	height: 100%;
	transition: width 220ms ease;
}

.notiwoo-fulfillment__minimum.is-complete .notiwoo-fulfillment__bar span {
	background: var(--nwf-ok);
}

.notiwoo-fulfillment__minimum p {
	font-size: 0.9em;
	margin: 6px 0 0;
}

.notiwoo-fulfillment__minimum:not(.is-complete) p {
	font-weight: 600;
}

.notiwoo-fulfillment__minimum.is-complete p {
	color: var(--nwf-muted);
}

/* ---------- Notas ---------- */

.notiwoo-fulfillment__note {
	color: var(--nwf-muted);
	font-size: 0.9em;
	line-height: 1.45;
	margin: 0 0 6px;
}

.notiwoo-fulfillment__note.is-ok {
	color: var(--nwf-ok);
	font-weight: 600;
}

.notiwoo-fulfillment__note.is-error {
	color: var(--nwf-error);
	font-weight: 600;
}

.notiwoo-fulfillment__note:last-child {
	margin-bottom: 0;
}

/* ---------- Contextos ---------- */

.notiwoo-fulfillment--cart {
	border: 1px solid var(--nwf-line);
	border-radius: 12px;
	margin-bottom: 18px;
	padding: 16px;
}

.notiwoo-fulfillment--checkout {
	border: 1px solid var(--nwf-line);
	border-radius: 14px;
	padding: 18px;
}

.notiwoo-fulfillment-eta th {
	font-weight: 600;
}

/* ---------- Recogida: sin campos de dirección ---------- */

/*
 * Al elegir Recogida, el servidor ya quita los campos de dirección del
 * checkout, pero eso sólo ocurre al cargar la página: WooCommerce no vuelve a
 * pintar los datos del cliente al recalcular. El JavaScript marca el body y
 * aquí se ocultan al momento, para que nadie escriba una dirección que nadie
 * va a usar. Al enviar, el filtro del servidor manda: no quedan obligatorios.
 */
body.notiwoo-pickup #billing_address_1_field,
body.notiwoo-pickup #billing_address_2_field,
body.notiwoo-pickup #billing_city_field,
body.notiwoo-pickup #billing_state_field,
body.notiwoo-pickup #billing_postcode_field,
body.notiwoo-pickup #billing_country_field,
body.notiwoo-pickup #billing_company_field,
body.notiwoo-pickup #shipping_address_1_field,
body.notiwoo-pickup #shipping_address_2_field,
body.notiwoo-pickup #shipping_city_field,
body.notiwoo-pickup #shipping_state_field,
body.notiwoo-pickup #shipping_postcode_field,
body.notiwoo-pickup #shipping_country_field,
body.notiwoo-pickup #shipping_company_field,
body.notiwoo-pickup .woocommerce-shipping-fields {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.notiwoo-fulfillment__service label,
	.notiwoo-fulfillment__bar span {
		transition: none;
	}
}