/* NZF-style Zakat Calculator */
.zakat-calculator {
	--zc-primary: #ee3524;
	--zc-primary-dark: #075c3f;
	--zc-bg: #ffffff;
	--zc-muted: #f4f6f5;
	--zc-border: #dfe4e2;
	--zc-text: #1c2b26;
	--zc-subtle: #6b7772;
	max-width: 720px;
	margin: 0 auto;
	color: var(--zc-text);
	font-family: inherit;
	line-height: 1.5;
}

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

/* Stepper */
.zc-steps {
	display: flex;
	justify-content: space-between;
	margin-bottom: 2rem;
	gap: .5rem;
}
.zc-step {
	flex: 1;
	text-align: center;
	position: relative;
	font-size: .85rem;
	color: var(--zc-subtle);
}
.zc-step .zc-dot {
	width: 34px; height: 34px;
	border-radius: 50%;
	background: var(--zc-muted);
	border: 2px solid var(--zc-border);
	display: flex; align-items: center; justify-content: center;
	font-weight: 700;
	margin: 0 auto .4rem;
}
.zc-step.is-active .zc-dot,
.zc-step.is-done .zc-dot {
	background: var(--zc-primary);
	border-color: var(--zc-primary);
	color: #fff;
}
.zc-step.is-active { color: var(--zc-text); font-weight: 600; }

/* Panels */
.zc-panel { display: none; }
.zc-panel.is-active { display: block; animation: zc-fade .2s ease; }
@keyframes zc-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.zc-panel h2 { font-size: 1.35rem; margin: 0 0 1rem; }
.zc-panel h3 { font-size: 1rem; margin: 1.5rem 0 .75rem; }
.zc-help { color: var(--zc-subtle); font-size: .9rem; margin: 0 0 1rem; }

/* Chips (category toggles) */
.zc-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.zc-chip {
	border: 1.5px solid var(--zc-border);
	background: var(--zc-bg);
	border-radius: 999px;
	padding: .5rem 1rem;
	cursor: pointer;
	font-size: .9rem;
	transition: all .15s ease;
	color: var(--zc-text);
}
.zc-chip:hover { border-color: var(--zc-primary); }
.zc-chip.is-on {
	background: var(--zc-primary);
	border-color: var(--zc-primary);
	color: #fff;
}

/* Nisab selector cards */
.zc-nisab { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.zc-nisab-card {
	border: 2px solid var(--zc-border);
	border-radius: 12px;
	padding: 1.25rem;
	cursor: pointer;
	text-align: center;
	transition: all .15s ease;
}
.zc-nisab-card:hover { border-color: var(--zc-primary); }
.zc-nisab-card.is-on { border-color: var(--zc-primary); background: rgba(125, 10, 10, 0.06); }
.zc-nisab-card strong { display: block; font-size: 1.1rem; }
.zc-nisab-card span { color: var(--zc-subtle); font-size: .85rem; }

/* Input rows */
.zc-fields { margin-top: 1rem; }
.zc-field {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem;
	padding: .75rem 0;
	border-bottom: 1px solid var(--zc-border);
}
.zc-field label { font-weight: 500; }
.zc-field .zc-input-wrap { position: relative; }
.zc-field .zc-prefix {
	position: absolute; left: .7rem; top: 50%; transform: translateY(-50%);
	color: var(--zc-subtle);
}
.zc-field input {
	width: 160px;
	padding: .55rem .7rem .55rem 1.6rem;
	border: 1.5px solid var(--zc-border);
	border-radius: 8px;
	font-size: 1rem;
	text-align: right;
}
.zc-field input.zc-grams { padding-left: .7rem; }
.zc-field input:focus { outline: none; border-color: var(--zc-primary); }
.zc-field .zc-suffix { color: var(--zc-subtle); font-size: .85rem; min-width: 42px; }

/* Totals */
.zc-summary { margin-top: 1rem; }
.zc-summary-row {
	display: flex; justify-content: space-between;
	padding: .6rem 0;
	border-bottom: 1px solid var(--zc-border);
}
.zc-summary-row.zc-total {
	font-size: 1.4rem; font-weight: 800;
	border: none; margin-top: .5rem;
	color: var(--zc-primary-dark);
}
.zc-verdict {
	margin: 1.25rem 0;
	padding: 1rem 1.25rem;
	border-radius: 10px;
	background: var(--zc-muted);
	font-size: .95rem;
}
.zc-verdict.is-due { background: rgba(10,125,85,.1); }
.zc-verdict.not-due { background: #fdf3e7; }

/* Nav buttons */
.zc-nav { display: flex; justify-content: space-between; margin-top: 2rem; gap: 1rem; }
.zc-btn {
	appearance: none;
	border: 2px solid var(--zc-primary);
	border-radius: 8px;
	padding: .7rem 1.6rem;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}
.zc-btn-primary { background: var(--zc-primary); color: #fff; }
.zc-btn-primary:hover { background: var(--zc-bg); }
.zc-btn-ghost { background: transparent; color: var(--zc-subtle); }
.zc-btn-ghost:hover { color: var(--zc-text); }
.zc-btn[hidden] { display: none; }

@media (max-width: 520px) {
	.zc-nisab { grid-template-columns: 1fr; }
	.zc-field { flex-direction: column; align-items: stretch; }
	.zc-field input { width: 100%; }
	.zc-step span.zc-label { display: none; }
}

/* -------------------------------------------------------------------------
 * Current Nisab Value section (shortcode: [zakat_nisab])
 * Mirrors the live nzfnz.org.nz "Current Nisab Value" Elementor section.
 * ---------------------------------------------------------------------- */
.zc-nisab-display {
	--zc-nisab-gold: #dda600;
	--zc-nisab-silver: #6c757d;
	--zc-nisab-text: #111111;
	--zc-nisab-title-size: 34px;
	--zc-nisab-updated-size: 18px;
	--zc-nisab-item-size: 20px;
	--zc-nisab-note-size: 15.75px;
	--zc-nisab-ring-size: 70px;
	--zc-nisab-ring-border: 2.667px;
	--zc-nisab-icon-size: 33px;
	--zc-nisab-ring-bg: #ffffff;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	max-width: 100%;
	margin: 0 auto;
	text-align: center;
	color: var(--zc-nisab-text);
	font-family: inherit;
	box-sizing: border-box;
}
.zc-nisab-display,
.zc-nisab-display *,
.zc-nisab-display *::before,
.zc-nisab-display *::after { box-sizing: border-box; }

.zc-nisab-display--band {
	background: rgba(0, 0, 0, 0.05);
	padding: 80px 0;
}

.zc-nisab-display__header {
	display: flex;
	flex-direction: column;
}
.zc-nisab-display__title {
	margin: 0;
	font-size: var(--zc-nisab-title-size);
	font-weight: 700;
	line-height: 1.2;
	color: var(--zc-nisab-text);
}
.zc-nisab-display__updated {
	margin: 24px 0 0;
	font-size: var(--zc-nisab-updated-size);
	font-weight: 400;
	color: var(--zc-nisab-text);
}
.zc-nisab-display__header .zc-nisab-display__updated:first-child { margin-top: 0; }

.zc-nisab-display__items {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 20px;
	margin: 0 0 20px;
}
.zc-nisab-display__item {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	text-align: left;
}
.zc-nisab-display__item--gold { color: var(--zc-nisab-gold); }
.zc-nisab-display__item--silver { color: var(--zc-nisab-silver); }

.zc-nisab-display__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--zc-nisab-ring-size);
	height: var(--zc-nisab-ring-size);
	border: var(--zc-nisab-ring-border) solid currentColor;
	border-radius: 50%;
	background: var(--zc-nisab-ring-bg);
	color: inherit;
}
.zc-nisab-display__icon-svg {
	width: var(--zc-nisab-icon-size);
	height: var(--zc-nisab-icon-size);
	fill: currentColor;
}

.zc-nisab-display__text { color: var(--zc-nisab-text); }
.zc-nisab-display__label {
	margin: 0;
	font-size: var(--zc-nisab-item-size);
	font-weight: 600;
	color: var(--zc-nisab-text);
}
.zc-nisab-display__value {
	margin: 0;
	font-size: var(--zc-nisab-item-size);
	font-weight: 700;
	color: var(--zc-nisab-text);
}

.zc-nisab-display__note {
	margin: 0;
	font-size: var(--zc-nisab-note-size);
	font-style: italic;
	color: var(--zc-nisab-text);
}

@media (max-width: 767px) {
	.zc-nisab-display__item {
		flex-direction: column;
		text-align: center;
	}
}
