/*
 * Dicardo credit calculators — shared styles for every calculator section.
 * Load once in the product page template. Each section is
 * <section class="dcalc ..." id="<name>-calc">.
 *
 * Elements that start hidden (alert, badge, want box, optional fields) carry
 * an inline style="display:none" in the markup; the JS toggles it.
 *
 * Colours come from the product wrapper variables (--brand, --ink, --body,
 * --muted, --line, --card, --panel, --soft, ...) with neutral fallbacks, so the
 * dark theme follows the wrapper automatically. A section without a wrapper
 * (fal.ai, Higgsfield) carries a theme modifier class instead.
 */

.dcalc {
	--dc-brand: var(--brand, #6d28d9);
	--dc-ink: var(--ink, #111827);
	--dc-body: var(--body, #374151);
	--dc-muted: var(--muted, #64748b);
	--dc-line: var(--line, #e5e7eb);
	--dc-card: var(--card, #fff);
	--dc-panel: var(--panel, #f8f7ff);
	--dc-soft: var(--soft, #f1efff);
	--dc-good: var(--yes, var(--good, #16803a));
	--dc-alert-bg: #fee2e2;
	--dc-alert-ink: #b91c1c;
	--dc-warn-bg: var(--warn-bg, #fff8e6);
	--dc-warn-ink: var(--warn-ink, #92400e);
}

/* Light alert colours read badly on the site's dark theme. */
[data-theme="dark"] .dcalc {
	--dc-alert-bg: rgba(220, 38, 38, .18);
	--dc-alert-ink: #fca5a5;
}

/* fal.ai has no product wrapper yet, so it ships its own palette. */
.dcalc.dcalc--fal {
	--dc-ink: #0f172a;
	--dc-body: #334155;
	--dc-muted: #64748b;
	--dc-line: #e2e8f0;
	--dc-panel: #f6f7fb;
	--dc-card: #fff;
	--dc-brand: #7c3aed;
	--dc-soft: #ede9fe;
	--dc-warn-bg: #fff8e6;
	--dc-warn-line: #f59e0b;
	direction: rtl;
	color: var(--dc-body);
	font-size: 16px;
	line-height: 1.9;
	padding: 24px 0;
}

[data-theme="dark"] .dcalc.dcalc--fal {
	--dc-ink: #f5f6ff;
	--dc-body: #d4d6ea;
	--dc-muted: #a3a6c4;
	--dc-line: rgba(255, 255, 255, .12);
	--dc-panel: #120f33;
	--dc-card: #1a1640;
	--dc-brand: #a78bfa;
	--dc-soft: #241f57;
	--dc-warn-bg: #2a220e;
}

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

.dcalc--fal h2 {
	color: var(--dc-ink);
	font-size: clamp(22px, 4vw, 30px);
	line-height: 1.5;
	margin: 0 0 10px;
}

.dcalc--fal p {
	margin: 0;
}

/* Higgsfield sits in the pd-* (Freepik) layout with its warm palette. */
.dcalc.dcalc--pd {
	--dc-brand: #b45309;
	--dc-ink: #1f2937;
	--dc-body: inherit;
	--dc-muted: #6b6b6b;
	--dc-line: #efe7d6;
	--dc-card: #fff;
	--dc-panel: #fffdf7;
	--dc-soft: #f1ebdd;
	--dc-alert-bg: #fdecec;
	--dc-alert-ink: #991b1b;
	--dc-input-line: #d6d6d6;
	--dc-frame-line: #e6dcc8;
}

.dcalc--pd .dcalc-bar-fill {
	background: #f59e0b;
}

.dcalc--pd .dcalc-input {
	border-color: var(--dc-input-line);
}

.dcalc--pd .dcalc-out,
.dcalc--pd .dcalc-more {
	border-color: var(--dc-frame-line);
}

/* The warm palette is light-only; on the dark theme follow the product wrapper. */
[data-theme="dark"] .dcalc.dcalc--pd {
	--dc-brand: var(--brand, #f59e0b);
	--dc-ink: var(--ink, #f5f6ff);
	--dc-body: var(--body, #d4d6ea);
	--dc-muted: var(--muted, #a3a6c4);
	--dc-line: var(--line, rgba(255, 255, 255, .12));
	--dc-card: var(--card, #1a1640);
	--dc-panel: var(--panel, #120f33);
	--dc-soft: var(--soft, #241f57);
	--dc-alert-bg: rgba(220, 38, 38, .18);
	--dc-alert-ink: #fca5a5;
	--dc-input-line: var(--dc-line);
	--dc-frame-line: var(--dc-line);
}

/* ---------- Controls ---------- */

.dcalc-form {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	align-items: end;
}

.dcalc-form + .dcalc-form {
	margin-top: 16px;
}

.dcalc-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14px;
	color: var(--dc-body);
}

.dcalc-input {
	width: 100%;
	max-width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--dc-line);
	border-radius: 10px;
	font: inherit;
	background: var(--dc-card);
	color: var(--dc-ink);
}

/* ---------- Result card ---------- */

.dcalc-out {
	margin-top: 16px;
	border: 1px solid var(--dc-line);
	border-radius: 16px;
	background: var(--dc-panel);
	padding: 16px;
}

.dcalc-alert {
	background: var(--dc-alert-bg);
	color: var(--dc-alert-ink);
	border-radius: 12px;
	padding: 12px 14px;
	margin-bottom: 12px;
	font-weight: 700;
}

.dcalc-alert--good {
	background: rgba(22, 163, 74, .12);
	color: var(--dc-good);
}

.dcalc-kpis {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.dcalc-kpi {
	background: var(--dc-card);
	border: 1px solid var(--dc-line);
	border-radius: 12px;
	padding: 12px;
	text-align: center;
}

.dcalc-kpi-label {
	font-size: 12px;
	color: var(--dc-muted);
}

.dcalc-kpi-value {
	font-size: 26px;
	font-weight: 800;
	color: var(--dc-ink);
}

.dcalc-kpi-value--brand {
	color: var(--dc-brand);
}

.dcalc-badge {
	margin-top: 12px;
	border-radius: 12px;
	padding: 10px 12px;
	font-size: 14px;
	font-weight: 700;
	background: rgba(22, 163, 74, .12);
	color: var(--dc-good);
}

.dcalc-badge--warn {
	background: var(--dc-warn-bg);
	color: var(--dc-warn-ink);
}

.dcalc-badge--soft {
	background: var(--dc-soft);
	color: var(--dc-body);
}

/* ---------- "How many do you want?" meter ---------- */

.dcalc-want {
	margin-top: 12px;
	background: var(--dc-card);
	border: 1px solid var(--dc-line);
	border-radius: 12px;
	padding: 12px;
}

.dcalc-want-row {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	font-size: 14px;
}

.dcalc-want-pct {
	font-weight: 700;
}

.dcalc-bar {
	height: 10px;
	background: var(--dc-soft);
	border-radius: 999px;
	overflow: hidden;
	margin-top: 8px;
}

.dcalc-bar-fill {
	height: 100%;
	width: 0;
	background: var(--dc-brand);
	border-radius: 999px;
}

.dcalc-fit {
	margin-top: 8px;
	font-size: 14px;
}

/* ---------- Same choice on every plan ---------- */

.dcalc-others {
	margin-top: 12px;
	font-size: 13px;
	color: var(--dc-muted);
}

.dcalc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 6px;
}

.dcalc-chip {
	background: var(--dc-card);
	border: 1px solid var(--dc-line);
	border-radius: 999px;
	padding: 4px 10px;
	font-size: 12px;
	color: var(--dc-body);
}

.dcalc-chip.is-active {
	border-color: var(--dc-brand);
	font-weight: 700;
}

.dcalc-src {
	margin: 10px 0 0;
	font-size: 12px;
	color: var(--dc-muted);
}

.dcalc-gap {
	margin-top: 16px;
}

.dcalc-note {
	margin-top: 16px;
	padding: 16px 18px;
	background: var(--dc-soft);
	border: 1px solid var(--dc-line);
	border-radius: 14px;
}

.dcalc-note p + p {
	margin-top: 10px;
}

.dcalc--fal .dcalc-note {
	background: var(--dc-warn-bg);
	border-right: 5px solid var(--dc-warn-line);
}

/* ---------- Collapsible full table ---------- */

.dcalc-more {
	margin-top: 20px;
	border: 1px solid var(--dc-line);
	border-radius: 14px;
	background: var(--dc-panel);
	padding: 0 14px;
}

.dcalc-more > summary {
	cursor: pointer;
	list-style: none;
	padding: 14px 0;
	font-weight: 800;
	font-size: 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	color: var(--dc-ink);
}

.dcalc-more > summary::-webkit-details-marker {
	display: none;
}

.dcalc-more-hint {
	font-size: 13px;
	font-weight: 400;
	color: var(--dc-brand);
	white-space: nowrap;
}

.dcalc-more-body {
	padding-bottom: 14px;
}

.dcalc-table-plan {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin: 8px 0 12px;
}

.dcalc-table-plan label {
	font-size: 14px;
}

.dcalc-table-plan .dcalc-input {
	width: auto;
	padding: 10px 12px;
}

/* ---------- Tables (static markup and the JS rebuild share these) ---------- */

.dcalc-tbl {
	overflow-x: auto;
	border: 1px solid var(--dc-line);
	border-radius: 14px;
	background: var(--dc-card);
}

.dcalc-tbl table {
	width: 100%;
	min-width: 0;
	border-collapse: collapse;
	font-size: 14px;
}

.dcalc-tbl th,
.dcalc-tbl td {
	padding: 8px 10px;
	text-align: right;
	vertical-align: top;
	border-bottom: 1px solid var(--dc-line);
	color: var(--dc-body);
	background: transparent;
}

.dcalc-tbl thead th {
	background: var(--dc-soft);
	color: var(--dc-ink);
	font-weight: 800;
}

.dcalc-tbl th[scope=row] {
	color: var(--dc-ink);
	font-weight: 800;
}

.dcalc-tbl {
	margin-top: 14px;
}

.dcalc-tbl caption {
	padding: 10px 12px;
	text-align: right;
	font-size: 15px;
	font-weight: 800;
	color: var(--dc-ink);
}

@media (max-width: 560px) {
	.dcalc-tbl {
		overflow: visible;
		border: 0;
		background: transparent;
	}

	.dcalc-tbl table,
	.dcalc-tbl tbody {
		display: block;
	}

	.dcalc-tbl thead {
		display: none;
	}

	.dcalc-tbl caption {
		display: block;
		width: 100%;
		padding: 10px 0;
	}

	.dcalc-tbl tr {
		display: block;
		margin: 0 0 10px;
		padding: 10px 12px;
		border: 1px solid var(--dc-line);
		border-radius: 12px;
		background: var(--dc-card);
	}

	.dcalc-tbl th[scope=row],
	.dcalc-tbl td {
		display: block;
		border: 0;
		padding: 4px 0;
	}

	.dcalc-tbl th[scope=row] {
		font-size: 16px;
		font-weight: 900;
	}

	.dcalc-tbl td[data-title]::before {
		content: attr(data-title) ": ";
		display: inline;
		font-weight: 700;
		color: var(--dc-muted);
	}
}