/* WPSL Service Area Checker – front end
 * Everything is scoped under .wpsac so it doesn't leak into the theme.
 * A few !important rules exist only to beat Divi/theme defaults for lists,
 * inputs and buttons inside post content.
 * Override colours by redefining the custom properties, e.g.
 *   .wpsac { --wpsac-accent: #e0218a; }
 */

.wpsac {
	--wpsac-accent: #1f6feb;
	--wpsac-accent-text: #ffffff;
	--wpsac-text: inherit;
	--wpsac-muted: #5f6b7a;
	--wpsac-border: #d9dee5;
	--wpsac-surface: #ffffff;
	--wpsac-soft: #f5f7fa;
	--wpsac-yes: #12733b;
	--wpsac-yes-bg: #e3f5ea;
	--wpsac-no: #a3261b;
	--wpsac-no-bg: #fbe7e5;
	--wpsac-radius: 10px;

	box-sizing: border-box;
	width: 100%;
	max-width: 880px;
	margin: 0 auto 1.5em;
	color: var(--wpsac-text);
	font-size: 16px;
	line-height: 1.5;
}

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

.wpsac .wpsac__title {
	margin: 0 0 0.75em;
	padding: 0;
	font-size: 1.35em;
	line-height: 1.3;
}

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

.wpsac .wpsac__form {
	margin: 0;
	padding: 1.25em;
	background: var(--wpsac-soft);
	border: 1px solid var(--wpsac-border);
	border-radius: var(--wpsac-radius);
}

.wpsac .wpsac__fields {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
	gap: 0.85em;
	align-items: end;
}

.wpsac .wpsac__field {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.wpsac .wpsac__label {
	display: block;
	margin: 0 0 0.35em;
	font-size: 0.9em;
	font-weight: 600;
}

.wpsac .wpsac__req {
	color: var(--wpsac-no);
}

.wpsac input.wpsac__input {
	display: block;
	width: 100% !important;
	height: auto;
	min-height: 46px;
	margin: 0 !important;
	padding: 0.65em 0.85em !important;
	font: inherit;
	font-size: 16px !important; /* 16px stops iOS zooming on focus */
	line-height: 1.4;
	color: #1d2733 !important;
	background: var(--wpsac-surface) !important;
	border: 1px solid var(--wpsac-border) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wpsac input.wpsac__input:focus {
	outline: none;
	border-color: var(--wpsac-accent) !important;
	box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.2) !important;
}

.wpsac input.wpsac__input[aria-invalid="true"] {
	border-color: var(--wpsac-no) !important;
}

.wpsac button.wpsac__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-height: 46px;
	margin: 0;
	padding: 0.65em 1.4em;
	font: inherit;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--wpsac-accent-text);
	background: var(--wpsac-accent);
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	text-transform: none;
	letter-spacing: normal;
	transition: filter 0.15s ease, transform 0.05s ease;
}

.wpsac button.wpsac__button::after,
.wpsac button.wpsac__button::before {
	display: none !important; /* Divi adds arrow icons to buttons on hover */
}

.wpsac button.wpsac__button:hover {
	filter: brightness(0.92);
}

.wpsac button.wpsac__button:active {
	transform: translateY(1px);
}

.wpsac button.wpsac__button:focus-visible {
	outline: 3px solid rgba(31, 111, 235, 0.45);
	outline-offset: 2px;
}

.wpsac button.wpsac__button:disabled {
	opacity: 0.7;
	cursor: progress;
}

/* Honeypot – visually hidden but present. */
.wpsac .wpsac__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Messages ---------- */

.wpsac .wpsac__message:empty {
	display: none;
}

.wpsac .wpsac__message {
	margin: 1em 0 0;
	padding: 0.75em 1em;
	border-radius: 8px;
	font-weight: 500;
	background: var(--wpsac-soft);
}

.wpsac .wpsac__message--success { color: var(--wpsac-yes); background: var(--wpsac-yes-bg); }
.wpsac .wpsac__message--warning { color: #7a4b00; background: #fff4dc; }
.wpsac .wpsac__message--error   { color: var(--wpsac-no); background: var(--wpsac-no-bg); }
.wpsac .wpsac__message--info    { color: var(--wpsac-muted); }

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

.wpsac .wpsac__results {
	margin-top: 1em;
}

.wpsac .wpsac__results[hidden] {
	display: none !important;
}

.wpsac .wpsac__location {
	margin: 0 0 0.75em;
	padding: 0;
	font-size: 0.9em;
	color: var(--wpsac-muted);
}

.wpsac .wpsac__location-value {
	color: var(--wpsac-text);
	font-weight: 600;
}

.wpsac ul.wpsac__list {
	display: grid;
	gap: 0.65em;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.wpsac ul.wpsac__list li.wpsac__store {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	margin: 0 !important;
	padding: 1em 1.15em !important;
	list-style: none !important;
	background: var(--wpsac-surface);
	border: 1px solid var(--wpsac-border);
	border-left: 4px solid var(--wpsac-border);
	border-radius: var(--wpsac-radius);
}

.wpsac ul.wpsac__list li.wpsac__store::before,
.wpsac ul.wpsac__list li.wpsac__store::marker {
	content: none !important;
	display: none !important;
}

.wpsac ul.wpsac__list li.wpsac__store.is-available   { border-left-color: var(--wpsac-yes); }
.wpsac ul.wpsac__list li.wpsac__store.is-unavailable { border-left-color: var(--wpsac-no); }

.wpsac .wpsac__store-info {
	min-width: 0;
}

.wpsac .wpsac__store-name {
	font-weight: 700;
	font-size: 1.05em;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.wpsac .wpsac__store-link {
	color: inherit;
	text-decoration: none;
}

.wpsac .wpsac__store-link:hover {
	text-decoration: underline;
}

.wpsac .wpsac__store-address,
.wpsac .wpsac__store-radius {
	margin-top: 0.2em;
	font-size: 0.875em;
	color: var(--wpsac-muted);
	overflow-wrap: anywhere;
}

.wpsac .wpsac__store-meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.4em;
	flex-shrink: 0;
	text-align: right;
}

.wpsac .wpsac__distance-value {
	font-weight: 700;
	font-size: 1.1em;
	white-space: nowrap;
}

.wpsac .wpsac__distance-label {
	font-size: 0.85em;
	color: var(--wpsac-muted);
}

.wpsac .wpsac__badge {
	display: inline-block;
	padding: 0.3em 0.75em;
	font-size: 0.8em;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	white-space: nowrap;
	border-radius: 999px;
}

.wpsac .wpsac__badge--yes { color: var(--wpsac-yes); background: var(--wpsac-yes-bg); }
.wpsac .wpsac__badge--no  { color: var(--wpsac-no);  background: var(--wpsac-no-bg); }

.wpsac .wpsac__empty {
	margin: 0;
	color: var(--wpsac-muted);
}

.wpsac.is-loading .wpsac__results {
	opacity: 0.5;
}

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

@media (max-width: 720px) {
	.wpsac .wpsac__fields {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	.wpsac .wpsac__field--address,
	.wpsac .wpsac__field--submit {
		grid-column: 1 / -1;
	}
	.wpsac button.wpsac__button {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.wpsac .wpsac__form {
		padding: 1em;
	}
	.wpsac .wpsac__fields {
		grid-template-columns: minmax(0, 1fr);
	}
	.wpsac ul.wpsac__list li.wpsac__store {
		flex-direction: column;
		align-items: flex-start;
	}
	.wpsac .wpsac__store-meta {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wpsac * {
		transition: none !important;
	}
}