/**
 * Zentari Services — frontend comparison page styling.
 * Mobile-first; a wider grid kicks in at the 700px breakpoint.
 */

.zs-comparison {
	--zs-border: #e0e0e0;
	--zs-radius: 8px;
	--zs-accent: #1a7f5a;
	--zs-text-muted: #666;
	font-size: 15px;
}

/* ---------------------------------------------------------------
   Filter bar
--------------------------------------------------------------- */
.zs-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: flex-end;
	margin-bottom: 20px;
	padding: 14px;
	background: #f7f7f7;
	border-radius: var(--zs-radius);
}

.zs-filter-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13px;
}

.zs-filter-group label {
	font-weight: 600;
	color: var(--zs-text-muted);
}

.zs-filter-group select,
.zs-filter-group input[type="number"] {
	padding: 6px 8px;
	border: 1px solid var(--zs-border);
	border-radius: 6px;
	min-width: 120px;
}

.zs-filter-amount-inputs,
.zs-filter-term-inputs {
	display: flex;
	align-items: center;
	gap: 6px;
}

.zs-filter-amount-inputs input,
.zs-filter-term-inputs input {
	width: 80px;
	min-width: 0;
}

.zs-filter-clear {
	background: none;
	border: 1px solid var(--zs-border);
	border-radius: 6px;
	padding: 7px 12px;
	font-size: 13px;
	cursor: pointer;
	color: var(--zs-text-muted);
	align-self: flex-end;
}

.zs-filter-clear:hover {
	border-color: #b32d2e;
	color: #b32d2e;
}

/* Currency toggle */
.zs-currency-toggle {
	display: flex;
	border: 1px solid var(--zs-border);
	border-radius: 6px;
	overflow: hidden;
	align-self: flex-end;
}

.zs-currency-btn {
	border: none;
	background: #fff;
	padding: 8px 16px;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	color: var(--zs-text-muted);
}

.zs-currency-btn.is-active {
	background: var(--zs-accent);
	color: #fff;
}

/* ---------------------------------------------------------------
   Vendor grid + cards
--------------------------------------------------------------- */
.zs-vendor-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

@media ( min-width: 700px ) {
	.zs-vendor-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( min-width: 1000px ) {
	.zs-vendor-grid {
		grid-template-columns: repeat( 3, 1fr );
	}
}

.zs-vendor-card {
	border: 1px solid var(--zs-border);
	border-radius: var(--zs-radius);
	padding: 16px;
	background: #fff;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Hidden by a filter/sort mismatch (JS) or by not supporting the
   active currency (CSS rule below) — either reason hides the card. */
.zs-vendor-card.zs-hidden {
	display: none;
}

.zs-card-top {
	display: flex;
	align-items: center;
	gap: 12px;
}

.zs-vendor-logo {
	width: 48px;
	height: 48px;
	border-radius: 6px;
	object-fit: contain;
	background: #fafafa;
	border: 1px solid var(--zs-border);
}

.zs-vendor-logo-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 20px;
	color: #fff;
	background: var(--zs-accent);
}

.zs-card-name {
	margin: 0;
	font-size: 16px;
}

.zs-card-category {
	display: inline-block;
	margin-top: 2px;
	font-size: 11px;
	font-weight: 600;
	color: var(--zs-accent);
	background: #e6f4ee;
	padding: 2px 8px;
	border-radius: 10px;
}

.zs-card-details {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.zs-detail-row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-size: 14px;
}

.zs-detail-row dt {
	color: var(--zs-text-muted);
	font-weight: 600;
}

.zs-detail-row dd {
	margin: 0;
	text-align: right;
}

.zs-card-footer {
	margin-top: auto;
}

.zs-view-details {
	width: 100%;
	padding: 8px 12px;
	border-radius: 6px;
	border: 1px solid var(--zs-accent);
	background: #fff;
	color: var(--zs-accent);
	font-weight: 600;
	cursor: pointer;
}

.zs-view-details:hover {
	background: var(--zs-accent);
	color: #fff;
}

/* ---------------------------------------------------------------
   Currency-driven visibility — the core of the no-AJAX toggle.
   #zs-vendor-grid's data-currency attribute is flipped by JS;
   these rules do the rest with zero re-render.
--------------------------------------------------------------- */
.zs-currency-value {
	display: none;
}

#zs-vendor-grid[data-currency="usd"] .zs-currency-usd {
	display: block;
}

#zs-vendor-grid[data-currency="zwg"] .zs-currency-zwg {
	display: block;
}

#zs-vendor-grid[data-currency="usd"] .zs-vendor-card[data-supports-usd="0"] {
	display: none;
}

#zs-vendor-grid[data-currency="zwg"] .zs-vendor-card[data-supports-zwg="0"] {
	display: none;
}

/* ---------------------------------------------------------------
   Empty state
--------------------------------------------------------------- */
.zs-empty-state {
	text-align: center;
	color: var(--zs-text-muted);
	padding: 40px 16px;
	font-size: 15px;
}

/* ---------------------------------------------------------------
   Shared modal foundation
   Both #zs-detail-modal and #zs-enquiry-modal use these rules.
   JS toggles .is-open and aria-hidden; these rules do the rest.
--------------------------------------------------------------- */

/* Scroll lock applied to <body> while any modal is open */
body.zs-modal-open {
	overflow: hidden;
}

.zs-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 99990;
	align-items: center;
	justify-content: center;
}

.zs-modal.is-open {
	display: flex;
}

/* Semi-transparent backdrop — sits behind the dialog */
.zs-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.55 );
	cursor: pointer;
}

/* The white dialog box */
.zs-modal-dialog {
	position: relative;
	z-index: 1;
	background: #fff;
	border-radius: var(--zs-radius);
	box-shadow: 0 8px 40px rgba( 0, 0, 0, 0.18 );
	width: min( 92vw, 680px );
	max-height: 90vh;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}

/* Narrower dialog for the enquiry form */
.zs-modal-dialog--sm {
	width: min( 92vw, 480px );
}

.zs-modal-body {
	padding: 28px 28px 24px;
}

/* × close button — absolute-positioned in the top-right corner */
.zs-modal-close {
	position: absolute;
	top: 12px;
	right: 14px;
	background: none;
	border: none;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	color: var(--zs-text-muted);
	padding: 4px 8px;
	border-radius: 4px;
	z-index: 2;
}

.zs-modal-close:hover {
	color: #222;
	background: #f0f0f0;
}

.zs-modal-title {
	margin: 0 0 16px;
	font-size: 18px;
}

/* ---------------------------------------------------------------
   Vendor detail modal — content layout
--------------------------------------------------------------- */
.zs-detail-content {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Header: logo + name + category badge + currency badge */
.zs-detail-header {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 24px 28px 20px;
	border-bottom: 1px solid var(--zs-border);
}

.zs-detail-logo {
	width: 64px;
	height: 64px;
	border-radius: 8px;
	object-fit: contain;
	background: #fafafa;
	border: 1px solid var(--zs-border);
	flex-shrink: 0;
}

/* Reuse the placeholder style from cards but at a larger size */
.zs-detail-logo.zs-vendor-logo-placeholder {
	font-size: 26px;
}

.zs-detail-header-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.zs-detail-name {
	margin: 0;
	font-size: 20px;
}

/* Currency badge inside the detail header */
.zs-detail-currency-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 10px;
	align-self: flex-start;
}

.zs-detail-currency-badge--usd {
	background: #e8f0fe;
	color: #1a56b0;
}

.zs-detail-currency-badge--zwg {
	background: #fef3e2;
	color: #92500a;
}

/* Section grid — stacks on mobile, two columns on wider screens */
.zs-detail-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

@media ( min-width: 600px ) {
	.zs-detail-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

.zs-detail-section {
	padding: 20px 28px;
	border-bottom: 1px solid var(--zs-border);
}

/* On wider screens, right column sections get a left border instead */
@media ( min-width: 600px ) {
	.zs-detail-section:nth-child( even ) {
		border-left: 1px solid var(--zs-border);
	}
}

.zs-detail-section-title {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--zs-text-muted);
}

/* Definition list inside a detail section */
.zs-detail-dl {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Reuses .zs-detail-row dt/dd rules already defined above */

/* Required-docs list */
.zs-detail-docs-list {
	margin: 0;
	padding-left: 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14px;
}

/* Footer: Enquire Now CTA */
.zs-detail-footer {
	padding: 20px 28px 24px;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

/* Loading / error states inside the modal body */
.zs-detail-loading,
.zs-detail-error {
	text-align: center;
	padding: 40px 0;
	color: var(--zs-text-muted);
	font-size: 15px;
}

.zs-detail-error {
	color: #b32d2e;
}

/* ---------------------------------------------------------------
   Shared button styles (used in both modals)
--------------------------------------------------------------- */
.zs-btn {
	display: inline-block;
	padding: 10px 20px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	border: 1px solid transparent;
	line-height: 1.3;
}

.zs-btn-primary {
	background: var(--zs-accent);
	color: #fff;
	border-color: var(--zs-accent);
}

.zs-btn-primary:hover {
	background: #155f44;
	border-color: #155f44;
}

.zs-btn-primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.zs-btn-ghost {
	background: #fff;
	color: var(--zs-text-muted);
	border-color: var(--zs-border);
}

.zs-btn-ghost:hover {
	border-color: #999;
	color: #222;
}

/* ---------------------------------------------------------------
   Enquiry form modal
--------------------------------------------------------------- */
.zs-enquiry-vendor-banner {
	font-size: 13px;
	color: var(--zs-text-muted);
	background: #f7f7f7;
	border-radius: 6px;
	padding: 8px 12px;
	margin: 0 0 16px;
}

.zs-enquiry-vendor-banner:empty {
	display: none;
}

/* Inline error alert */
.zs-form-error {
	background: #fdf2f2;
	color: #b32d2e;
	border: 1px solid #f5c6c6;
	border-radius: 6px;
	padding: 10px 14px;
	font-size: 14px;
	margin-bottom: 16px;
}

/* Form rows */
.zs-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.zs-form-row {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.zs-form-row label {
	font-size: 13px;
	font-weight: 600;
}

.zs-form-row input[type="text"],
.zs-form-row input[type="tel"],
.zs-form-row input[type="email"],
.zs-form-row input[type="number"],
.zs-form-row select,
.zs-form-row textarea {
	padding: 8px 10px;
	border: 1px solid var(--zs-border);
	border-radius: 6px;
	font-size: 14px;
	width: 100%;
	box-sizing: border-box;
}

.zs-form-row input:focus,
.zs-form-row select:focus,
.zs-form-row textarea:focus {
	outline: 2px solid var(--zs-accent);
	outline-offset: 1px;
	border-color: var(--zs-accent);
}

.zs-field-hint {
	font-size: 12px;
	color: var(--zs-text-muted);
}

.zs-required {
	color: #b32d2e;
	margin-left: 2px;
}

.zs-optional {
	font-size: 12px;
	font-weight: 400;
	color: var(--zs-text-muted);
	margin-left: 4px;
}

/* Currency symbol prefix on the amount input */
.zs-input-prefix-wrap {
	position: relative;
}

.zs-input-prefix {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY( -50% );
	font-size: 14px;
	color: var(--zs-text-muted);
	pointer-events: none;
}

.zs-input-prefix-wrap input {
	padding-left: 36px;
}

/* Term: number + unit select side by side */
.zs-term-inputs {
	display: flex;
	gap: 8px;
}

.zs-term-inputs input {
	width: 90px;
	flex-shrink: 0;
}

.zs-term-inputs select {
	flex: 1;
}

/* Radio group */
.zs-form-fieldset {
	border: 1px solid var(--zs-border);
	border-radius: 6px;
	padding: 10px 14px 12px;
	margin: 0;
}

.zs-form-fieldset legend {
	font-size: 13px;
	font-weight: 600;
	padding: 0 4px;
}

.zs-radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 8px;
}

.zs-radio-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	cursor: pointer;
}

.zs-form-footer {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	padding-top: 4px;
}

/* Confirmation state */
.zs-enquiry-confirmation {
	text-align: center;
	padding: 40px 28px;
}

.zs-confirmation-icon {
	font-size: 48px;
	color: var(--zs-accent);
	margin-bottom: 12px;
}

/* =================================================================
   Repayment calculator (Phase 5)

   Two consumers share these rules:
   1. STANDALONE — #zs-calculator, rendered by [loan_calculator] and
      not necessarily nested inside .zs-comparison, so the shared
      --zs-* custom properties are redeclared here rather than relied
      on by inheritance.
   2. EMBEDDED — .zs-embedded-calc, injected into the vendor detail
      modal's .zs-detail-grid as a `.zs-detail-section--calculator`,
      which IS nested inside .zs-comparison and inherits its vars —
      the redeclaration below is harmless in that case (same values).
================================================================= */
.zs-calculator {
	--zs-border: #e0e0e0;
	--zs-radius: 8px;
	--zs-accent: #1a7f5a;
	--zs-text-muted: #666;
	font-size: 15px;
}

/* The embedded calculator section spans the full width of the detail
   grid instead of sitting in one half-width column — its inputs and
   results panel need the room, and it reads better as the final,
   full-bleed step right before the Enquire Now CTA. */
@media ( min-width: 600px ) {
	.zs-detail-section--calculator {
		grid-column: 1 / -1;
		border-left: none;
	}
}

.zs-calc-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.zs-calc-section {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.zs-calc-section-title {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--zs-text-muted);
}

.zs-calc-row {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.zs-calc-label {
	font-size: 13px;
	font-weight: 600;
}

.zs-calc-select,
.zs-calc-input {
	padding: 8px 10px;
	border: 1px solid var(--zs-border);
	border-radius: 6px;
	font-size: 14px;
	width: 100%;
	box-sizing: border-box;
}

.zs-calc-select:focus,
.zs-calc-input:focus {
	outline: 2px solid var(--zs-accent);
	outline-offset: 1px;
	border-color: var(--zs-accent);
}

.zs-calc-hint {
	margin: 0;
	font-size: 12px;
	color: var(--zs-text-muted);
}

/* Reuses .zs-form-error for #zs-calc-error and .zs-embedded-calc-error */

/* ---------------------------------------------------------------
   Standalone results panel
--------------------------------------------------------------- */
.zs-calc-results {
	border-top: 1px solid var(--zs-border);
	padding-top: 18px;
	margin-top: 4px;
}

.zs-calc-results-title {
	margin: 0 0 12px;
	font-size: 15px;
}

.zs-calc-results-grid {
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

@media ( min-width: 480px ) {
	.zs-calc-results-grid {
		grid-template-columns: repeat( 4, 1fr );
	}
}

/* Compact 3-up variant used by the embedded calculator (no "Rate Applied" tile) */
.zs-calc-results-grid--compact {
	grid-template-columns: 1fr 1fr;
}

@media ( min-width: 420px ) {
	.zs-calc-results-grid--compact {
		grid-template-columns: repeat( 3, 1fr );
	}
}

.zs-calc-result-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px 12px;
	background: #f7f7f7;
	border-radius: 6px;
}

.zs-calc-result-item dt {
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--zs-text-muted);
}

.zs-calc-result-item dd {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
}

.zs-calc-result-item--highlight {
	background: #e6f4ee;
}

.zs-calc-result-item--highlight dd {
	color: var(--zs-accent);
}

.zs-calc-disclaimer {
	margin: 14px 0 0;
	font-size: 12px;
	color: var(--zs-text-muted);
	font-style: italic;
}

/* ---------------------------------------------------------------
   Embedded calculator (inside the vendor detail modal)
   Lighter-weight than the standalone form — no section headers,
   tighter gaps — since it sits inside an already-scrolled modal.
--------------------------------------------------------------- */
.zs-embedded-calc {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.zs-embedded-calc-term-unit {
	font-size: 13px;
	font-weight: 600;
	color: var(--zs-text-muted);
	white-space: nowrap;
	align-self: center;
}

.zs-embedded-calc-results {
	border-top: 1px solid var(--zs-border);
	padding-top: 14px;
}
/* =================================================================
   Phase 8 — UX Polish & Responsive Styling
================================================================= */

/* ---------------------------------------------------------------
   Mobile filter bar — collapsible on small screens
--------------------------------------------------------------- */
.zs-filter-toggle {
	display: none; /* shown via media query below */
	width: 100%;
	padding: 10px 14px;
	background: #f7f7f7;
	border: 1px solid var(--zs-border);
	border-radius: var(--zs-radius);
	font-size: 14px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	margin-bottom: 8px;
	color: #333;
	align-items: center;
	gap: 8px;
}

.zs-filter-toggle-icon {
	margin-left: auto;
	transition: transform 0.2s ease;
	display: inline-block;
}

.zs-filter-bar.is-collapsed .zs-filter-toggle-icon {
	transform: rotate( -90deg );
}

@media ( max-width: 699px ) {
	.zs-filter-toggle {
		display: flex;
	}

	.zs-filter-bar {
		padding: 0;
		background: transparent;
		flex-direction: column;
		gap: 0;
		border-radius: 0;
	}

	.zs-filter-bar .zs-filter-bar-inner {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding: 14px;
		background: #f7f7f7;
		border: 1px solid var(--zs-border);
		border-radius: var(--zs-radius);
		margin-bottom: 4px;
	}

	.zs-filter-bar.is-collapsed .zs-filter-bar-inner {
		display: none;
	}

	.zs-filter-group select,
	.zs-filter-group input[type="number"] {
		min-width: 0;
		width: 100%;
		box-sizing: border-box;
	}

	.zs-filter-amount-inputs,
	.zs-filter-term-inputs {
		flex-wrap: wrap;
	}

	.zs-filter-amount-inputs input,
	.zs-filter-term-inputs input {
		width: 80px;
	}

	.zs-currency-toggle {
		align-self: flex-start;
	}

	.zs-filter-clear {
		align-self: flex-start;
	}
}

/* ---------------------------------------------------------------
   Vendor card — touch-friendly tap targets on mobile
--------------------------------------------------------------- */
@media ( max-width: 699px ) {
	.zs-view-details {
		padding: 12px 16px; /* bigger tap target */
		font-size: 15px;
	}

	.zs-vendor-card {
		padding: 14px;
	}

	.zs-card-name {
		font-size: 15px;
	}
}

/* ---------------------------------------------------------------
   Card skeleton loading state
   Applied while the comparison grid is loading in slow connections.
   The .zs-comparison wrapper gets class "is-loading" from PHP if
   the vendor query took unusually long, or from JS on first paint.
--------------------------------------------------------------- */
@keyframes zs-shimmer {
	0%   { background-position: -600px 0; }
	100% { background-position:  600px 0; }
}

.zs-skeleton {
	background: linear-gradient( 90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75% );
	background-size: 600px 100%;
	animation: zs-shimmer 1.4s ease-in-out infinite;
	border-radius: 4px;
	display: block;
}

.zs-vendor-card--skeleton {
	pointer-events: none;
}

.zs-vendor-card--skeleton .zs-skeleton-logo {
	width: 48px;
	height: 48px;
	border-radius: 6px;
	flex-shrink: 0;
}

.zs-vendor-card--skeleton .zs-skeleton-name {
	height: 18px;
	width: 60%;
	margin-bottom: 6px;
}

.zs-vendor-card--skeleton .zs-skeleton-badge {
	height: 14px;
	width: 35%;
	border-radius: 10px;
}

.zs-vendor-card--skeleton .zs-skeleton-row {
	height: 14px;
	width: 100%;
	margin-bottom: 8px;
}

.zs-vendor-card--skeleton .zs-skeleton-row:last-child {
	width: 70%;
}

.zs-vendor-card--skeleton .zs-skeleton-btn {
	height: 36px;
	width: 100%;
	border-radius: 6px;
	margin-top: 4px;
}

/* ---------------------------------------------------------------
   Empty state — richer treatment
--------------------------------------------------------------- */
.zs-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.zs-empty-state-icon {
	font-size: 32px;
	color: #ccc;
	line-height: 1;
}

.zs-empty-state-title {
	font-size: 16px;
	font-weight: 600;
	color: #555;
	margin: 0;
}

.zs-empty-state-hint {
	font-size: 13px;
	color: var(--zs-text-muted);
	margin: 0;
}

/* ---------------------------------------------------------------
   ZWG currency — distinct visual treatment
   ZiG/ZWG amounts get a warm amber tint in result tiles to visually
   separate them from USD values when both are on-screen (detail modal
   comparison, calculator output).
--------------------------------------------------------------- */
.zs-amount--zwg {
	color: #7a4400;
}

/* ---------------------------------------------------------------
   Modal — better mobile sizing and safe-area padding
--------------------------------------------------------------- */
@media ( max-width: 599px ) {
	.zs-modal-dialog {
		width: 100vw;
		max-height: 100dvh; /* dvh for dynamic viewport (mobile browser chrome) */
		border-radius: var(--zs-radius) var(--zs-radius) 0 0;
		margin-top: auto; /* sheet slides up from bottom */
	}

	.zs-modal {
		align-items: flex-end; /* anchor to bottom of screen */
	}

	.zs-modal-body {
		padding: 20px 16px 16px;
		padding-bottom: max( 16px, env( safe-area-inset-bottom ) );
	}

	.zs-detail-header {
		padding: 16px 16px 14px;
	}

	.zs-detail-section {
		padding: 16px 16px;
	}

	.zs-detail-footer {
		padding: 14px 16px max( 16px, env( safe-area-inset-bottom ) );
	}

	.zs-modal-close {
		top: 10px;
		right: 10px;
	}

	/* Swipe-indicator pill on mobile modals */
	.zs-modal-dialog::before {
		content: '';
		display: block;
		width: 36px;
		height: 4px;
		border-radius: 2px;
		background: #ddd;
		margin: 10px auto 0;
		flex-shrink: 0;
	}
}

/* ---------------------------------------------------------------
   Focus states — high-contrast visible outlines
   The default browser outline is suppressed by many themes; we put
   it back here explicitly so keyboard users can always see where they
   are. The accent colour is used where it contrasts sufficiently.
--------------------------------------------------------------- */
.zs-comparison :focus-visible,
.zs-modal :focus-visible {
	outline: 3px solid var(--zs-accent);
	outline-offset: 2px;
	border-radius: 3px;
}

/* For interactive elements that already have a border, an inset
   outline reads more cleanly than an exterior one. */
.zs-form-row input:focus-visible,
.zs-form-row select:focus-visible,
.zs-form-row textarea:focus-visible,
.zs-calc-select:focus-visible,
.zs-calc-input:focus-visible,
.zs-filter-group select:focus-visible,
.zs-filter-group input:focus-visible {
	outline: 2px solid var(--zs-accent);
	outline-offset: 0;
	box-shadow: 0 0 0 3px rgba( 26, 127, 90, 0.2 );
}

/* Ensure buttons always have a visible focus ring */
.zs-btn:focus-visible,
.zs-view-details:focus-visible,
.zs-currency-btn:focus-visible,
.zs-modal-close:focus-visible,
.zs-filter-clear:focus-visible,
.zs-filter-toggle:focus-visible {
	outline: 3px solid var(--zs-accent);
	outline-offset: 2px;
	border-radius: 5px;
}

/* ---------------------------------------------------------------
   Filter bar — label accessibility (screen-reader-only variant)
   When the label is visually omitted on very small screens we still
   want screen readers to announce it.
--------------------------------------------------------------- */
.zs-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------
   Card hover state — subtle elevation lift
--------------------------------------------------------------- */
.zs-vendor-card {
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.zs-vendor-card:hover {
	box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.10 );
	transform: translateY( -2px );
}

/* ---------------------------------------------------------------
   Confirmation icon — green check circle
--------------------------------------------------------------- */
.zs-confirmation-icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--zs-accent);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	margin: 0 auto 16px;
}

/* ---------------------------------------------------------------
   Calculator input group — better mobile layout
--------------------------------------------------------------- */
@media ( max-width: 479px ) {
	.zs-calc-results-grid {
		grid-template-columns: 1fr 1fr; /* 2-up on very narrow screens */
	}

	.zs-embedded-calc .zs-calc-results-grid--compact {
		grid-template-columns: 1fr 1fr;
	}
}

/* ---------------------------------------------------------------
   Rate/amount display — avoid hyphenation of number strings
--------------------------------------------------------------- */
.zs-detail-row dd,
.zs-card-details dd,
.zs-calc-result-item dd {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 55%;
}

/* ---------------------------------------------------------------
   Currency toggle — aria-pressed visual parity
   comparison.js sets aria-pressed on the calculator's currency
   buttons; the comparison page uses class-based state. Both need
   the same active appearance.
--------------------------------------------------------------- */
.zs-currency-btn[aria-pressed="true"] {
	background: var(--zs-accent);
	color: #fff;
}

/* ---------------------------------------------------------------
   Reduce-motion: disable shimmer and card lift for users who
   prefer reduced animation.
--------------------------------------------------------------- */
@media ( prefers-reduced-motion: reduce ) {
	.zs-skeleton {
		animation: none;
		background: #e8e8e8;
	}

	.zs-vendor-card {
		transition: none;
	}

	.zs-vendor-card:hover {
		transform: none;
	}

	.zs-filter-toggle-icon {
		transition: none;
	}
}