/**
 * Shared calculator block styling. Uses the theme's own design tokens
 * (custom properties from wp-content/themes/galtimes/theme.json) rather than
 * a parallel color/spacing system.
 */

.gt-calc {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--lg, 12px);
	padding: clamp(16px, 4vw, 32px);
	background: var(--wp--preset--color--white);
	display: grid;
	gap: 24px;
}

@media (min-width: 782px) {
	.gt-calc {
		grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
		align-items: start;
	}
}

.gt-calc__form {
	display: grid;
	gap: 16px;
}

.gt-calc__field {
	display: grid;
	gap: 4px;
}

.gt-calc__field label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--slate);
}

.gt-calc__field input,
.gt-calc__field select {
	min-height: var(--wp--custom--target, 44px);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--md, 8px);
	padding: 10px 12px;
	font-size: var(--wp--preset--font-size--body);
	font-variant-numeric: tabular-nums;
}

.gt-calc__field input:focus,
.gt-calc__field select:focus {
	outline: 3px solid var(--wp--preset--color--green);
	outline-offset: 2px;
}

.gt-calc__result {
	border-radius: var(--wp--custom--radius--md, 8px);
	background: var(--wp--preset--color--mint);
	padding: 20px;
	display: grid;
	gap: 12px;
	align-content: start;
}

.gt-calc__result-primary {
	font-size: var(--wp--preset--font-size--result);
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--green-dark);
	margin: 0;
	line-height: 1.1;
}

.gt-calc__result-details {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 4px 12px;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

.gt-calc__result-details dt {
	color: var(--wp--preset--color--slate);
}

.gt-calc__result-details dd {
	margin: 0;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.gt-calc__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.gt-calc__actions button {
	min-height: var(--wp--custom--target, 44px);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--md, 8px);
	background: var(--wp--preset--color--white);
	padding: 8px 16px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	cursor: pointer;
}

.gt-calc__actions button:hover {
	background: var(--wp--preset--color--line);
}

.gt-calc__assumptions {
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--slate);
}

/* Mobile: the result card sits right after the form, in normal flow. (A sticky bottom sheet this tall
   covered the inputs on phones.) */
@media (max-width: 781px) {
	.gt-calc__result {
		position: static;
		margin: 16px 0 0;
		padding: 20px;
		background: #E7F4F0;
		border: 1px solid #BCE0D6;
		border-radius: 12px;
	}
}

/* Mockup parity (design/Mortgage Calculator.dc.html): sliders under inputs, sticky result card. */
.gt-calc__field--slider{grid-template-columns:minmax(0,1fr);gap:8px;padding-bottom:16px;border-bottom:1px solid var(--wp--preset--color--line)}
.gt-calc__field--slider input[type=number]{max-width:220px;border:1.5px solid #8493A0;background:#fff}
.gt-calc__slider{width:100%;accent-color:var(--wp--preset--color--green);height:24px;margin:0}
.gt-calc__field label{color:var(--wp--preset--color--ink);font-size:15px}
@media (min-width:782px){.gt-calc__result{position:sticky;top:24px;background:#E7F4F0;border:1px solid #BCE0D6;border-radius:12px;padding:24px;box-shadow:var(--wp--preset--shadow--md)}}
.gt-calc__result-label{font:600 12px/1.3 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--wp--preset--color--slate)}
.gt-calc__actions button:first-child{background:var(--wp--preset--color--green);color:#fff;border-color:var(--wp--preset--color--green)}
.gt-calc__actions button:first-child:hover{background:var(--wp--preset--color--green-dark)}
.gt-calc__form{min-width:0}
.gt-calc__field--slider{grid-template-columns:150px minmax(0,1fr);align-items:center;gap:6px 20px}
.gt-calc__field--slider label{grid-column:1 / -1}
.gt-calc__field--slider input[type=number]{max-width:none;width:100%}
.gt-calc__field input,.gt-calc__field select{box-sizing:border-box}

.gt-calc__select-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);opacity:0}
.gt-calc__seg{display:inline-flex;border:1.5px solid #8493A0;border-radius:8px;overflow:hidden;background:#fff;max-width:100%}
.gt-calc__seg button{min-height:44px;padding:0 20px;border:0;border-right:1px solid #8493A0;background:#fff;color:var(--wp--preset--color--ink);font:600 15px Inter,sans-serif;cursor:pointer}
.gt-calc__seg button:last-child{border-right:0}
.gt-calc__seg button.is-on{background:var(--wp--preset--color--green);color:#fff}
.gt-calc__donut{display:flex;justify-content:center;margin:4px 0 8px}
.gt-calc__donut svg{width:190px;height:190px}
.gt-calc__legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:15px;font-variant-numeric:tabular-nums}
.gt-calc__legend li{display:flex;align-items:center;gap:10px;margin:0}
.gt-calc__legend i{width:10px;height:10px;border-radius:2px;display:inline-block;flex:none}
.gt-calc__legend span{margin-left:auto;color:var(--wp--preset--color--slate);font-size:13px}
.gt-calc__legend b{width:72px;text-align:right}
.gt-calc__seg{justify-self:start;width:fit-content}
.gt-calc__schedule{margin-top:16px;border:1px solid var(--wp--preset--color--line);border-radius:12px;background:#fff}
.gt-calc__schedule summary{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;cursor:pointer;list-style:none;font:700 18px "Source Serif 4",Georgia,serif}
.gt-calc__schedule summary span:last-child{font:400 14px Inter,sans-serif;color:var(--wp--preset--color--slate)}
.gt-calc__schedule-body{padding:0 24px 20px;overflow-x:auto}
.gt-calc__schedule table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:15px}
.gt-calc__schedule th{text-align:right;font:600 12px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--wp--preset--color--slate);padding:8px;border-bottom:2px solid var(--wp--preset--color--ink)}
.gt-calc__schedule td{text-align:right;padding:8px;border-bottom:1px solid var(--wp--preset--color--line)}
.gt-calc__schedule th:first-child,.gt-calc__schedule td:first-child{text-align:left}

/* Mortgage extras: location picker, notes, payoff block, other-states table */
.gt-calc__note{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--wp--preset--color--slate)}
.gt-calc__loc-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gt-calc__loc select{min-height:44px;border:1.5px solid #8493A0;border-radius:8px;padding:0 10px;font:inherit;background:#fff;min-width:0}
.gt-calc__loc select:disabled{opacity:.55}
@media (max-width:480px){.gt-calc__loc-row{grid-template-columns:1fr}}
.gt-calc__payoff{margin-top:12px;padding-top:12px;border-top:1px solid #BCE0D6}
.gt-calc__states table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.gt-calc__states th{text-align:left;font:600 12px/1.3 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#5B6B7A;padding:8px 8px 8px 0;border-bottom:2px solid #14213D}
.gt-calc__states td{padding:8px 8px 8px 0;border-bottom:1px solid #E3E8EC}
.gt-calc__states th:nth-child(n+2),.gt-calc__states td:nth-child(n+2){text-align:right}
.gt-calc__states tr.is-current td{background:#E7F4F0;font-weight:700}
.gt-calc__states .gt-calc__schedule-body{max-height:460px;overflow:auto}
.gt-calc__compare table{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.gt-calc__compare th{text-align:left;font:600 12px/1.3 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#5B6B7A;padding:8px 8px 8px 0;border-bottom:2px solid #14213D}
.gt-calc__compare td{padding:8px 8px 8px 0;border-bottom:1px solid #E3E8EC}
.gt-calc__compare th:nth-child(n+2),.gt-calc__compare td:nth-child(n+2){text-align:right}
.gt-calc__compare tr.is-key td{font-weight:700;background:#E7F4F0}
.gt-calc__field--slider .gt-calc__note,.gt-calc__field .gt-calc__note{grid-column:1 / -1}