/*
 * DX Zemo Clinic – widget states shared by every theme (waiting for WhatsApp, done, expired, period tabs).
 * Colours inherit from the theme tokens when present (--mc-*), else fall back to plugin defaults.
 */
.dxzc-widget {
	--dxzc-p: var(--dxzc-primary, var(--mc-teal, #0f766e));
	--dxzc-p-soft: var(--mc-mint-soft, color-mix(in srgb, var(--dxzc-p) 10%, #fff));
	--dxzc-ink: var(--mc-ink, #1a202c);
	--dxzc-muted: var(--mc-muted, #5f6b7a);
	--dxzc-line: var(--mc-line, #dfe4ea);
	--dxzc-bg: var(--mc-white, #fff);
	--dxzc-danger: var(--mc-danger, #c53030);
	--dxzc-r: var(--dxzc-radius, var(--mc-r, 12px));
	font-family: inherit;
}

.dxzc-widget [hidden] { display: none !important; }

.dxzc-tabs {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	margin-block-end: 12px;
	border-radius: 999px;
	background: var(--dxzc-p-soft);
}
.dxzc-tab {
	border: 0;
	border-radius: 999px;
	padding: 6px 16px;
	background: transparent;
	color: var(--dxzc-ink);
	font: inherit;
	cursor: pointer;
}
.dxzc-tab[aria-selected="true"] { background: var(--dxzc-p); color: #fff; }
.dxzc-tab:focus-visible { outline: 2px solid var(--dxzc-p); outline-offset: 2px; }

.dxzc-more { margin-block-start: 8px; }

.dxzc-card {
	max-width: 560px;
	margin-inline: auto;
	padding: clamp(20px, 4vw, 32px);
	border-radius: var(--dxzc-r);
	background: var(--dxzc-bg);
	color: var(--dxzc-ink);
	text-align: center;
	box-shadow: var(--mc-shadow, 0 10px 30px rgba(15, 23, 42, .08));
}
.dxzc-title { margin: 0 0 8px; font-size: 1.35em; }
.dxzc-lead { margin: 0 0 16px; color: var(--dxzc-muted); }

.dxzc-code-label { margin: 8px 0 4px; font-size: .9em; color: var(--dxzc-muted); }
.dxzc-code {
	margin: 0 0 20px;
	font-size: clamp(2rem, 8vw, 2.75rem);
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--dxzc-p);
	font-variant-numeric: tabular-nums;
}
.dxzc-btn--wa { display: block; margin-block-end: 14px; }
.dxzc-manual, .dxzc-held { margin: 6px 0; font-size: .92em; color: var(--dxzc-muted); }
.dxzc-countdown { color: var(--dxzc-ink); font-variant-numeric: tabular-nums; }

.dxzc-waiting {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 12px 0 0;
	color: var(--dxzc-muted);
}
.dxzc-spinner {
	width: 16px;
	height: 16px;
	border: 2px solid var(--dxzc-line);
	border-top-color: var(--dxzc-p);
	border-radius: 50%;
	animation: dxzc-spin .8s linear infinite;
}
@keyframes dxzc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dxzc-spinner { animation-duration: 2.4s; } }

.dxzc-check {
	display: inline-grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-block-end: 12px;
	border-radius: 50%;
	background: var(--dxzc-p);
	color: #fff;
	font-size: 28px;
}
.dxzc-details {
	display: grid;
	gap: 8px;
	margin: 0 0 18px;
	padding: 14px 16px;
	border-radius: var(--dxzc-r);
	background: var(--dxzc-p-soft);
	text-align: start;
}
.dxzc-details div { display: flex; justify-content: space-between; gap: 12px; }
.dxzc-details dt { color: var(--dxzc-muted); }
.dxzc-details dd { margin: 0; font-weight: 600; text-align: end; }
.dxzc-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.dxzc-error { color: var(--dxzc-danger); }
.dxzc-btn--danger { color: var(--dxzc-danger); }

/* QR of the WhatsApp link (desktop only). */
.dxzc-qr { margin: 14px auto 6px; text-align: center; }
.dxzc-qr img { display: block; margin: 0 auto 6px; width: 180px; height: 180px; background: #fff; padding: 6px; border-radius: 8px; border: 1px solid rgba(0,0,0,.08); }
.dxzc-qr figcaption { font-size: .88em; color: var(--dxzc-muted, #64748b); max-width: 34ch; margin-inline: auto; }

/* 0.12.0 - touch targets, readable inputs on phones, visit type */
.dxzc-day, .dxzc-slot, .dxzc-tab { min-height: 44px; }
.dxzc-field input, .dxzc-field textarea { font-size: 16px; } /* 16px stops iOS from zooming the page on focus */
.dxzc-vtype { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
.dxzc-vtype legend { padding: 0; margin-block-end: 6px; font-weight: 600; }
.dxzc-vtype__opt { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-inline-end: 18px; cursor: pointer; }
.dxzc-vtype__opt input { width: 20px; height: 20px; margin: 0; }
.dxzc-error { font-weight: 600; }
[aria-invalid="true"] { border-color: var(--dxzc-danger, #b32d2e) !important; }

/* Follow-up: patient number + prescription number. */
.dxzc-fu { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-column: 1 / -1; margin-block-end: 12px; }
.dxzc-fu[hidden] { display: none; }
.dxzc-fu__hint { grid-column: 1 / -1; margin: 0; }