/*
 * SCIP Calculator Widget — implements the locked design system:
 * --ink-navy: #1B63B0, --signal-amber: #E8A33D, IBM Plex Sans/Serif/Mono.
 * Load IBM Plex via wp_enqueue in the theme, not here — this file only
 * consumes the CSS custom properties, it doesn't load fonts itself.
 */

.scip-calculator {
	--ink-navy: #1B63B0;
	--slate: #3A4B63;
	--slate-light: #7C8CA3;
	--steel-white: #F6F7F9;
	--panel-white: #FFFFFF;
	--signal-amber: #E8A33D;
	--amber-deep: #B9740F;
	--freight-green: #2E7D5B;
	--alert-red: #C1443C;
	--border-hairline: rgba(58, 75, 99, 0.18);
	--font-display: 'IBM Plex Sans', sans-serif;
	--font-mono: 'IBM Plex Mono', monospace;

	font-family: var(--font-display);
	border: 1px solid var(--border-hairline);
	border-radius: 6px;
	overflow: hidden;
	background: var(--panel-white);
	max-width: 640px;
}

.scip-calculator__head {
	background: var(--steel-white);
	border-bottom: 1px solid var(--border-hairline);
	padding: 14px 24px;
	font-family: var(--font-mono);
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--slate);
	display: flex;
	justify-content: space-between;
}

.scip-calculator__body {
	padding: 24px;
}

.scip-calculator__field {
	margin-bottom: 18px;
}

.scip-calculator__field label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--slate);
	margin-bottom: 6px;
}

.scip-calculator__input-group {
	display: flex;
	align-items: center;
	border: 1px solid var(--border-hairline);
	border-radius: 4px;
	overflow: hidden;
}

.scip-calculator__input-group input {
	flex: 1;
	border: none;
	padding: 11px 12px;
	font-family: var(--font-mono);
	font-size: 14px;
	color: var(--ink-navy);
	outline: none;
	min-width: 0;
}

.scip-calculator__input-group input:focus {
	box-shadow: inset 0 0 0 2px var(--signal-amber);
}

.scip-calculator__unit {
	background: var(--steel-white);
	padding: 11px 12px;
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--slate-light);
	border-left: 1px solid var(--border-hairline);
	white-space: nowrap;
}

.scip-calculator__error {
	color: var(--alert-red);
	font-size: 12.5px;
	margin-top: 6px;
	display: none;
}

.scip-calculator__field--invalid .scip-calculator__input-group {
	border-color: var(--alert-red);
}

.scip-calculator__field--invalid .scip-calculator__error {
	display: block;
}

.scip-calculator__submit {
	width: 100%;
	background: var(--ink-navy);
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	padding: 13px;
	border: none;
	border-radius: 4px;
	margin-top: 6px;
	cursor: pointer;
	transition: opacity 0.15s;
}

.scip-calculator__submit:hover {
	opacity: 0.9;
}

.scip-calculator__submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.scip-calculator__readout {
	background: var(--ink-navy);
	padding: 24px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 20px;
}

.scip-calculator__readout-cell .label {
	font-family: var(--font-mono);
	font-size: 10.5px;
	color: rgba(255, 255, 255, 0.55);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 6px;
}

.scip-calculator__readout-cell .value {
	font-family: var(--font-mono);
	font-size: 22px;
	font-weight: 600;
	color: #fff;
}

.scip-calculator__readout-cell .value small {
	font-size: 11px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.5);
}

.scip-calculator__readout--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.4);
	font-size: 13px;
	padding: 40px 24px;
}

/* Premium content gate — used by class-scip-membership-gate.php */
.scip-premium-gate {
	background: var(--steel-white, #F6F7F9);
	border: 1px solid var(--border-hairline, rgba(58,75,99,0.18));
	border-left: 3px solid var(--signal-amber, #E8A33D);
	border-radius: 0 6px 6px 0;
	padding: 24px;
	margin: 24px 0;
	text-align: left;
}

.scip-premium-gate h3 {
	margin: 8px 0;
	font-size: 16px;
}

.scip-premium-gate__cta {
	display: inline-block;
	margin-top: 10px;
	background: var(--signal-amber, #E8A33D);
	color: var(--ink-navy, #1B63B0);
	font-weight: 700;
	font-size: 13px;
	padding: 10px 18px;
	border-radius: 4px;
	text-decoration: none;
}