/**
 * ABS Freight — front-end "Calculate Shipping" widgets.
 *
 * Self-contained card design. Colours are driven by CSS custom properties so a
 * theme can re-skin the widget by redefining them on `.abs-freight-calc`
 * without fighting specificity.
 */

.abs-freight-calc {
	--absfc-bg: #ffffff;
	--absfc-fg: #1e2327;
	--absfc-muted: #6b7280;
	--absfc-border: #e2e5e9;
	--absfc-field-bg: #ffffff;
	--absfc-accent: #b8860b;
	--absfc-accent-fg: #ffffff;
	--absfc-accent-hover: #9a6f09;
	--absfc-radius: 10px;
	--absfc-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 16px rgba(16, 24, 40, 0.06);

	margin: 1.5em 0;
	color: var(--absfc-fg);
	font-size: 0.95rem;
	line-height: 1.5;
}

.abs-freight-calc *,
.abs-freight-calc *::before,
.abs-freight-calc *::after {
	box-sizing: border-box;
}

/* ---------- Card shell ------------------------------------------------ */

.abs-freight-calc__card {
	background: var(--absfc-bg);
	border: 1px solid var(--absfc-border);
	border-radius: var(--absfc-radius);
	box-shadow: var(--absfc-shadow);
	padding: 1.25em 1.35em 1.35em;
}

.abs-freight-calc__heading {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.3;
}

.abs-freight-calc__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2em;
	height: 2em;
	flex: 0 0 auto;
	border-radius: 50%;
	background: color-mix(in srgb, var(--absfc-accent) 14%, transparent);
	color: var(--absfc-accent);
}

/* color-mix fallback for older browsers */
@supports not (background: color-mix(in srgb, red, blue)) {
	.abs-freight-calc__icon {
		background: rgba(184, 134, 11, 0.14);
	}
}

.abs-freight-calc__intro {
	margin: 0.5em 0 1em;
	color: var(--absfc-muted);
	font-size: 0.85rem;
}

/* ---------- Form --------------------------------------------------------- */

.abs-freight-calc__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75em 0.9em;
}

.abs-freight-calc__field {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	margin: 0;
}

.abs-freight-calc__field--qty {
	grid-column: 1 / -1;
	max-width: 8em;
}

.abs-freight-calc__field label {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--absfc-muted);
}

.abs-freight-calc__qty,
.abs-freight-calc__country,
.abs-freight-calc__postcode {
	width: 100%;
	min-height: 2.6em;
	padding: 0.5em 0.7em;
	border: 1px solid var(--absfc-border);
	border-radius: 8px;
	background: var(--absfc-field-bg);
	color: var(--absfc-fg);
	font-size: 0.92rem;
	line-height: 1.4;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	appearance: none;
}

.abs-freight-calc__country {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.6em center;
	padding-right: 2.1em;
}

.abs-freight-calc__qty:focus,
.abs-freight-calc__country:focus,
.abs-freight-calc__postcode:focus {
	outline: none;
	border-color: var(--absfc-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--absfc-accent) 22%, transparent);
}

@supports not (background: color-mix(in srgb, red, blue)) {
	.abs-freight-calc__qty:focus,
	.abs-freight-calc__country:focus,
	.abs-freight-calc__postcode:focus {
		box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.22);
	}
}

.abs-freight-calc__field--submit {
	margin-top: 1em;
}

.abs-freight-calc__submit.button,
.abs-freight-calc__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	width: 100%;
	min-height: 2.9em;
	padding: 0.6em 1.2em;
	border: 0;
	border-radius: 8px;
	background: var(--absfc-accent);
	color: var(--absfc-accent-fg);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.05s ease;
}

.abs-freight-calc__submit:hover {
	background: var(--absfc-accent-hover);
}

.abs-freight-calc__submit:active {
	transform: translateY(1px);
}

.abs-freight-calc__submit:focus-visible {
	outline: 2px solid var(--absfc-accent);
	outline-offset: 2px;
}

.abs-freight-calc__submit[disabled] {
	cursor: progress;
	opacity: 0.75;
}

.abs-freight-calc__spinner {
	display: none;
	width: 1em;
	height: 1em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: abs-freight-calc-spin 0.6s linear infinite;
}

.abs-freight-calc.is-loading .abs-freight-calc__spinner {
	display: inline-block;
}

@keyframes abs-freight-calc-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.abs-freight-calc__spinner {
		animation-duration: 1.6s;
	}
}

/* ---------- Results ---------------------------------------------------- */

.abs-freight-calc__results {
	margin-top: 1.1em;
	padding-top: 1.1em;
	border-top: 1px solid var(--absfc-border);
}

.abs-freight-calc__results[hidden] {
	display: none;
}

.abs-freight-calc__results-heading {
	margin: 0 0 0.5em;
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--absfc-muted);
}

.abs-freight-calc__options {
	list-style: none;
	margin: 0;
	padding: 0;
}

.abs-freight-calc__option {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1em;
	padding: 0.7em 0;
	border-bottom: 1px solid var(--absfc-border);
}

.abs-freight-calc__option:first-child {
	padding-top: 0;
}

.abs-freight-calc__option:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.abs-freight-calc__option-label {
	font-size: 0.9rem;
}

.abs-freight-calc__option-label small {
	display: block;
	margin-top: 0.15em;
	color: var(--absfc-muted);
	font-size: 0.8rem;
}

.abs-freight-calc__option-price {
	flex: 0 0 auto;
	padding: 0.2em 0.55em;
	border-radius: 999px;
	background: color-mix(in srgb, var(--absfc-accent) 12%, transparent);
	color: var(--absfc-fg);
	font-weight: 700;
	font-size: 0.9rem;
	white-space: nowrap;
}

@supports not (background: color-mix(in srgb, red, blue)) {
	.abs-freight-calc__option-price {
		background: rgba(184, 134, 11, 0.12);
	}
}

.abs-freight-calc__note,
.abs-freight-calc__empty {
	margin: 0.75em 0 0;
	color: var(--absfc-muted);
	font-size: 0.8rem;
}

.abs-freight-calc__empty {
	margin: 0;
}

.abs-freight-calc__error {
	display: flex;
	gap: 0.5em;
	margin: 0;
	padding: 0.7em 0.85em;
	border-radius: 8px;
	background: #fdecec;
	color: #b32d2e;
	font-size: 0.88rem;
}

/* ---------- Responsive ----------------------------------------------- */

@media (max-width: 480px) {
	.abs-freight-calc__fields {
		grid-template-columns: 1fr;
	}
}

/* ---------- Dark mode ------------------------------------------------- */

@media (prefers-color-scheme: dark) {
	.abs-freight-calc {
		--absfc-bg: #1f2226;
		--absfc-fg: #e8eaed;
		--absfc-muted: #9aa0a6;
		--absfc-border: #34383d;
		--absfc-field-bg: #17191c;
		--absfc-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.35);
	}

	.abs-freight-calc__error {
		background: rgba(179, 45, 46, 0.18);
		color: #f2b8b5;
	}
}