/**
 * Store Collector — cart and checkout styles.
 */

/* ── Totals row ─────────────────────────────────────────────────── */

.woocommerce-cart .cart_totals .shop_table .woocommerce-shipping-totals td {
	padding-bottom: 0 !important;
}

.cpsc-collection-row td {
	padding-top: 0 !important;
}

.cpsc-fields {
	display: block;
	margin: 0;
}

.cpsc-field {
	margin: 0 0 10px !important;
	padding: 0;
}

.cpsc-field:last-of-type {
	margin-bottom: 4px;
}

select.cpsc_store,
select.cpsc_collection_date {
	display: block;
	width: 100%;
	/* Declared rather than assumed: with width 100% and a left pad, a theme
	   resetting to content-box would push these past their container. */
	box-sizing: border-box;
	padding-left: 10px !important;
	margin-top: 10px;
}

select.cpsc_collection_date[disabled] {
	opacity: 0.6;
}

/*
 * The wrapper carries the locked state, because a disabled control receives no
 * mouse events — no hover, no cursor, no tooltip.
 */
.cpsc-field--locked {
	cursor: not-allowed;
}

/* ── Loading collection days ────────────────────────────────────── */

.cpsc-field--date {
	position: relative;
}

/*
 * Sits clear of the native dropdown arrow.
 *
 * Centred with a transform rather than a negative margin. A margin has to be
 * half the ring's rendered height, which depends on whether box-sizing counts
 * the 2px border — so it is only ever right by assumption. translateY(-50%)
 * works off the real height whatever the theme has set.
 *
 * An earlier version also nudged this down by 5px to compensate for the
 * select's top margin. That margin collapses out through the wrapper, which has
 * no padding or border to contain it, so the wrapper already hugs the field and
 * the nudge only pushed the ring low.
 */
.cpsc-field--date.cpsc-field--loading::after {
	content: "";
	position: absolute;
	right: 38px;
	top: 50%;
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	opacity: 0.6;
	transform: translateY(-50%);
	animation: cpsc-spin 0.7s linear infinite;
	pointer-events: none;
}

/*
 * The centring transform is repeated in both frames. An animation that set only
 * rotate() would replace it and drop the ring back to the 50% line.
 */
@keyframes cpsc-spin {
	from {
		transform: translateY(-50%) rotate(0deg);
	}

	to {
		transform: translateY(-50%) rotate(360deg);
	}
}

.cpsc-field--locked select.cpsc_collection_date {
	pointer-events: none;
}

/* ── Saving state ───────────────────────────────────────────────── */

.cpsc-collection-row.cpsc-busy select {
	opacity: 0.7;
	/* Blocks interaction without disabling, so the values stay in the post. */
	pointer-events: none;
}

/* ── Status line ────────────────────────────────────────────────── */

.cpsc-status {
	display: block;
	font-size: 0.875em;
	line-height: 1.4;
	margin-top: 2px;
}

.cpsc-status:empty {
	display: none;
}

.cpsc-status--error {
	color: #b32d2e;
	font-weight: 600;
}

/* ── Calendar anchor ────────────────────────────────────────────── */

/*
 * The calendar attaches to a collapsed input directly beneath the dropdown so
 * that it opens in the right place without adding a visible second field.
 */
.cpsc-datepicker-anchor {
	display: block;
	position: relative;
	height: 0;
}

input.cpsc-datepicker {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
	min-height: 0;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	opacity: 0;
	pointer-events: none;
}

/* ── Flatpickr ──────────────────────────────────────────────────── */

/*
 * Every override below is scoped to .cpsc-flatpickr-calendar, a class this
 * plugin adds to its own calendar on init. Flatpickr's stylesheet is shared, so
 * unscoped rules here would reach into any other plugin's calendar that happens
 * to be on the cart or checkout.
 *
 * Avada's sticky header and off-canvas layers sit high in the stacking order,
 * so the calendar is lifted above them.
 */
.flatpickr-calendar.cpsc-flatpickr-calendar {
	z-index: 999999 !important;
	max-width: calc(100vw - 30px);
}

.cpsc-flatpickr-calendar .flatpickr-day.flatpickr-disabled,
.cpsc-flatpickr-calendar .flatpickr-day.flatpickr-disabled:hover {
	text-decoration: line-through;
	opacity: 0.45;
}

@media (max-width: 782px) {
	.flatpickr-calendar.cpsc-flatpickr-calendar {
		font-size: 16px;
	}

	.cpsc-flatpickr-calendar .flatpickr-day {
		min-height: 40px;
		line-height: 40px;
		max-width: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.flatpickr-calendar.cpsc-flatpickr-calendar {
		animation: none !important;
	}

	/* Still an indicator, just not a moving one. */
	.cpsc-field--date.cpsc-field--loading::after {
		animation: none;
		border-top-color: currentColor;
	}
}

/* ── Accessibility ──────────────────────────────────────────────── */

.cpsc-fields .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/*
 * Drawn inside the field, not outside it. These selects are full width, so an
 * outward offset puts the ring beyond the element box, where any ancestor with
 * overflow: hidden clips the left and right edges off. Inset is always fully
 * visible whatever the theme wraps this in.
 */
select.cpsc_store:focus-visible,
select.cpsc_collection_date:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}