/* AK Sparky's Generator Size Calculator — scoped styles (.aksgc prefix, no theme bleed) */

/* Brand palette. These were Cummins red (#c8102e) through v1.1.1, which is the manufacturer's
 * colour, not the installer's — it clashed on every AK Sparky's page and had to be masked from
 * the theme. Defaults are now the AK Sparky's palette so the widget is correct wherever it
 * renders, with no site-side override required. Override these vars to re-skin. */
.aksgc-panel, .aksgc {
	--aksgc-accent: #E4C825;      /* gold, primary action */
	--aksgc-accent-ink: #011F38;  /* text on gold */
	--aksgc-navy: #044471;
	--aksgc-ink: #1b2a36;
	--aksgc-muted: #6a7683;
	--aksgc-line: #dbe3ec;
	--aksgc-bg: #f9fafa;
	--aksgc-panel-bg: #044471;   /* navy — same token as the site's aside card / CTA band */
	--aksgc-on-panel: #ffffff;
	--aksgc-on-panel-dim: rgba(255, 255, 255, .68);
	--aksgc-on-panel-line: rgba(255, 255, 255, .20);
}

/* The panel: gives the tool a visible boundary so it reads as an interactive widget rather
 * than more article copy. The gold top edge is the site's accent language. */
.aksgc-panel {
	background: var(--aksgc-panel-bg);
	border: 1px solid var(--aksgc-on-panel-line);
	border-top: 5px solid var(--aksgc-accent);
	border-radius: 14px;
	padding: 28px 32px 32px;
	margin: 30px 0;
	color: var(--aksgc-on-panel);
	box-shadow: 0 16px 44px rgba(1, 31, 56, .20);
	/* controls the tint the browser gives native form UI (focus rings, select highlight,
	 * checkboxes). Without it these inherit the OS accent colour, which is why the tabs
	 * picked up a red hover on machines with a red system accent. */
	accent-color: var(--aksgc-accent);
}
@media (max-width: 560px) { .aksgc-panel { padding: 22px 18px 26px; } }

.aksgc-eyebrow {
	margin: 0 0 14px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em;
	text-transform: uppercase; color: var(--aksgc-accent); text-align: center;
}

.aksgc { font-size: 16px; line-height: 1.5; color: var(--aksgc-ink); max-width: 860px; margin: 0 auto; }
.aksgc * { box-sizing: border-box; }
/* buttons/inputs do not inherit font-family by default — without this they fall back to the
 * browser's system stack and look foreign next to the host theme's type. */
.aksgc button, .aksgc input, .aksgc select { font-family: inherit; }

.aksgc-tabs { display: flex; justify-content: center; gap: 28px; border-bottom: 1px solid var(--aksgc-line); margin-bottom: 24px; }
.aksgc-tab { background: none; border: none; padding: 10px 2px 12px; font-size: 17px; font-weight: 600; color: var(--aksgc-muted);
	cursor: pointer; border-bottom: 3px solid transparent; }
.aksgc-tab.is-active { color: var(--aksgc-ink); border-bottom-color: var(--aksgc-accent); }
.aksgc-tab.is-locked { opacity: .45; cursor: default; }

.aksgc-title { font-size: 26px; text-align: center; margin: 8px 0 6px; }
.aksgc-sub { text-align: center; color: var(--aksgc-muted); margin: 0 0 18px; }

.aksgc-select { display: block; width: 100%; max-width: 560px; margin: 18px auto; padding: 13px 14px; font-size: 16px;
	border: 1px solid var(--aksgc-line); border-radius: 6px; background: #fff; color: var(--aksgc-ink); }

.aksgc-nav { display: flex; justify-content: center; gap: 14px; margin: 22px 0; }
.aksgc-btn { background: var(--aksgc-accent); color: var(--aksgc-accent-ink); border: 2px solid transparent;
	border-radius: 11px; padding: 14px 24px; font-size: 16px; font-weight: 700; line-height: 1;
	letter-spacing: normal; text-transform: none; cursor: pointer;
	box-shadow: 0 6px 18px rgba(228, 200, 37, .35); transition: transform .15s ease, box-shadow .15s ease; }
.aksgc-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(228, 200, 37, .5); }
.aksgc-btn.is-disabled { opacity: .45; pointer-events: none; box-shadow: none; }
.aksgc-btn--ghost { background: transparent; color: var(--aksgc-ink); border: 2px solid var(--aksgc-line); box-shadow: none; }
.aksgc-btn--ghost:hover { transform: none; box-shadow: none; border-color: #c4d3e2; }

.aksgc-group { border: 1px solid var(--aksgc-line); border-radius: 8px; margin: 12px 0; background: #fff; }
.aksgc-group-title { padding: 14px 18px; font-size: 18px; font-weight: 700; cursor: pointer; list-style: none; }
.aksgc-group-title::-webkit-details-marker { display: none; }
.aksgc-group-title::after { content: '▾'; float: right; color: var(--aksgc-muted); }
.aksgc-group[open] .aksgc-group-title::after { content: '▴'; }

.aksgc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 22px; padding: 6px 18px 20px; }
@media (max-width: 760px) { .aksgc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .aksgc-grid { grid-template-columns: 1fr; } }

.aksgc-item-label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 6px; }
.aksgc-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--aksgc-line); border-radius: 6px; overflow: hidden; background: #fff; }
.aksgc-qty { width: 58px; text-align: center; border: none; font-size: 16px; -moz-appearance: textfield; }
.aksgc-qty::-webkit-outer-spin-button, .aksgc-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.aksgc-stepbtn { width: 36px; background: var(--aksgc-bg); border: none; font-size: 18px; cursor: pointer; color: var(--aksgc-ink); }
.aksgc-stepbtn:hover { background: #edf1f4; }

.aksgc-card { border: 1px solid var(--aksgc-line); border-radius: 14px; padding: 26px 28px; background: #fff; margin: 10px 0 26px; position: relative; }
.aksgc-badge { position: absolute; top: -12px; left: 24px; background: var(--aksgc-navy); color: #fff; font-size: 11px;
	font-weight: 700; letter-spacing: .08em; padding: 5px 12px; border-radius: 6px; }
.aksgc-model { font-size: 40px; font-weight: 800; margin: 10px 0 4px; }
.aksgc-features { margin: 10px 0 12px; padding-left: 20px; color: var(--aksgc-ink); }
.aksgc-features li { margin-bottom: 6px; }
.aksgc-loads { background: var(--aksgc-bg); border: 1px solid var(--aksgc-line); border-radius: 6px; padding: 12px 16px; margin: 14px 0; }
.aksgc-load-line { font-weight: 600; }
.aksgc-disclaimer { font-size: 13px; color: var(--aksgc-muted); font-style: italic; margin: 12px 0 0; }

.aksgc-form { border-top: 2px solid var(--aksgc-line); padding-top: 20px; }
.aksgc-form-title { font-size: 22px; margin: 0 0 4px; text-align: center; }
.aksgc-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; max-width: 640px; margin: 0 auto 16px; }
@media (max-width: 560px) { .aksgc-form-grid { grid-template-columns: 1fr; } }
.aksgc-field label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 5px; }
.aksgc-input { width: 100%; padding: 11px 12px; font-size: 15px; border: 1px solid var(--aksgc-line); border-radius: 6px; }
.aksgc-form .aksgc-btn { display: block; margin: 6px auto 0; }
.aksgc-msg { text-align: center; font-weight: 600; margin-top: 10px; }
.aksgc-msg.is-error { color: #a83232; }

/* ---------------------------------------------------------------- on navy
 * Everything sitting directly on the panel needs light text; everything inside a
 * white sub-card (.aksgc-group, .aksgc-card, .aksgc-loads) must be forced back to ink,
 * or it inherits the light colour and disappears against white. */
.aksgc-panel .aksgc { color: #d6e5f2; }
.aksgc-panel .aksgc-title,
.aksgc-panel .aksgc-form-title { color: var(--aksgc-on-panel); }
.aksgc-panel .aksgc-sub,
.aksgc-panel .aksgc-disclaimer { color: var(--aksgc-on-panel-dim); }
.aksgc-panel .aksgc-tabs { border-bottom-color: var(--aksgc-on-panel-line); }
.aksgc-panel .aksgc-field label { color: var(--aksgc-on-panel-dim); }
.aksgc-panel .aksgc-form { border-top-color: var(--aksgc-on-panel-line); }
.aksgc-panel .aksgc-msg { color: var(--aksgc-on-panel); }
.aksgc-panel .aksgc-msg.is-error { color: #ffc2c2; }

/* white sub-cards keep dark text */
.aksgc-panel .aksgc-group,
.aksgc-panel .aksgc-card,
.aksgc-panel .aksgc-loads,
.aksgc-panel .aksgc-select,
.aksgc-panel .aksgc-input,
.aksgc-panel .aksgc-stepper { color: var(--aksgc-ink); }

/* ghost button reads on navy */
.aksgc-panel .aksgc-btn--ghost { color: var(--aksgc-on-panel); border-color: rgba(255, 255, 255, .42); }
.aksgc-panel .aksgc-btn--ghost:hover { border-color: rgba(255, 255, 255, .75); }

/* Disabled on navy: the generic `opacity:.45` turns gold into a muddy olive against this
 * background. Use a proper washed-out control instead of fading the gold. */
.aksgc-panel .aksgc-btn.is-disabled {
	opacity: 1;
	background: rgba(255, 255, 255, .14);
	color: rgba(255, 255, 255, .55);
	border-color: transparent;
	box-shadow: none;
}

/* ------------------------------------------------- explicit interaction states
 * These were previously UNDEFINED on .aksgc-tab, so the browser fell back to native
 * button rendering and the tabs picked up the OS accent colour on hover (red on a Mac
 * set to the red accent). Never leave a control's hover/focus to the platform. */
.aksgc-tab, .aksgc-btn, .aksgc-stepbtn { -webkit-appearance: none; appearance: none; }
.aksgc-panel .aksgc-tab { color: var(--aksgc-on-panel-dim); transition: color .12s ease, border-color .12s ease; }
.aksgc-panel .aksgc-tab:hover { color: var(--aksgc-on-panel); border-bottom-color: rgba(228, 200, 37, .5); }
.aksgc-panel .aksgc-tab.is-active,
.aksgc-panel .aksgc-tab.is-active:hover { color: var(--aksgc-on-panel); border-bottom-color: var(--aksgc-accent); }
.aksgc-panel .aksgc-tab.is-locked:hover { color: var(--aksgc-on-panel-dim); border-bottom-color: transparent; }
.aksgc-tab:focus-visible,
.aksgc-btn:focus-visible,
.aksgc-stepbtn:focus-visible,
.aksgc-select:focus-visible,
.aksgc-input:focus-visible,
.aksgc-qty:focus-visible { outline: 2px solid var(--aksgc-accent); outline-offset: 2px; }
.aksgc-select:focus, .aksgc-input:focus, .aksgc-qty:focus { border-color: var(--aksgc-accent); }