/* ==========================================================================
   TAIF LED — Lighting Quantity Calculator
   WordPress plugin stylesheet. Version 2.0.2 — premium B2B redesign.

   THEME ISOLATION
   Every selector is scoped under .taif-calc. There is not one bare element
   selector, no `button {}`, no `input {}`, no `h1 {}`, no `.container {}`, and
   nothing resets the page. The plugin cannot restyle the host theme.

   The reverse direction — the theme leaking INTO the calculator — is handled by
   setting the properties themes commonly override explicitly on the elements we
   own, plus the scoped "theme armour" section near the end.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS + SCOPE ROOT
   -------------------------------------------------------------------------- */
.taif-calc {
	/* Brand neutrals */
	--taif-dark:       #101214;
	--taif-dark-soft:  #181B1E;
	--taif-white:      #FFFFFF;
	--taif-bg:         #F5F7F8;
	--taif-card:       #FFFFFF;
	--taif-text:       #1A1D20;
	--taif-muted:      #697077;
	--taif-border:     #E1E5E8;

	/* Brand gradient, taken from the TAIF LED logo. Used for accents only —
	   rules, active states, focus — never as a large background. */
	--taif-brand-gradient: linear-gradient(90deg, #F39A24, #C8D82D, #6FC44A, #24B9C7);
	--taif-accent:      #24B9C7;
	--taif-accent-deep: #128C99;
	--taif-accent-soft: #E8F7F9;
	--taif-amber:       #F39A24;

	/* Status */
	--taif-danger:      #B3261E;
	--taif-danger-soft: #FDF1F0;
	--taif-wa:          #128C7E;

	/* Shape & depth */
	--taif-radius:      16px;
	--taif-radius-md:   10px;
	--taif-radius-sm:   8px;
	--taif-shadow:      0 1px 2px rgba(16, 18, 20, .04), 0 8px 24px rgba(16, 18, 20, .06);
	--taif-shadow-lg:   0 24px 60px rgba(16, 18, 20, .14);

	/* Rhythm */
	--taif-gap:         20px;
	--taif-pad:         32px;

	/* Explicit typography — do not inherit a theme's body styling. */
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	             "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	font-style: normal;
	line-height: 1.55;
	color: var(--taif-text);
	background: var(--taif-bg);
	text-align: left;
	letter-spacing: normal;
	box-sizing: border-box;
	border-radius: var(--taif-radius);
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
	font-variant-numeric: tabular-nums;
}

.taif-calc *,
.taif-calc *::before,
.taif-calc *::after {
	box-sizing: border-box;
}

/*
 * Scoped normalisation. :where() contributes zero specificity, so this rule
 * stays at the weight of `.taif-calc` alone and can never outrank the component
 * rules below that set their own margins and text treatments.
 */
.taif-calc :where(h1, h2, h3, h4, p, dl, dt, dd, ol, ul, li, figure, fieldset, nav) {
	margin: 0;
	padding: 0;
	border: 0;
	text-transform: none;
	letter-spacing: normal;
}

.taif-calc :where(ol, ul) {
	list-style: none;
}

.taif-calc details,
.taif-calc summary {
	margin: 0;
}

.taif-calc img {
	max-width: 100%;
	height: auto;
	border: 0;
}

/*
 * [hidden] is how the script shows and hides rows, panels and buttons. The UA
 * default is only `display: none`, which any author `display` rule below would
 * beat — so enforce it once, here.
 */
.taif-calc [hidden] {
	display: none !important;
}

.taif-calc__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.taif-calc__print-title {
	display: none;
}

/* Brand gradient accent rule. */
.taif-calc__brand-rule {
	display: block;
	width: 64px;
	height: 3px;
	border-radius: 2px;
	background: var(--taif-brand-gradient);
}

.taif-calc__brand-rule--center {
	margin: 0 auto 18px;
}

/* --------------------------------------------------------------------------
   2. HERO
   -------------------------------------------------------------------------- */
.taif-calc__hero {
	position: relative;
	overflow: hidden;
	background: var(--taif-dark);
	color: var(--taif-white);
	padding: 44px 40px 56px;
}

.taif-calc__hero-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Very low-opacity technical grid. */
.taif-calc__hero-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 100%);
	-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 100%);
}

/* Soft radial glow, controlled cyan. */
.taif-calc__hero-glow {
	position: absolute;
	top: -20%;
	right: -10%;
	width: 720px;
	height: 720px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(36, 185, 199, .18) 0%, rgba(36, 185, 199, 0) 62%);
}

.taif-calc__hero-inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	align-items: center;
	gap: 48px;
	max-width: 1120px;
	margin: 0 auto;
	min-height: 440px;
}

.taif-calc__brandmark {
	margin-bottom: 18px;
}

/*
 * The TAIF LED lock-up is a vertically oriented bulb with the tagline beneath
 * it, on a roughly square canvas. Sizing by HEIGHT rather than width keeps its
 * visual weight predictable in the hero — a width-based rule on a tall mark
 * makes it tower over the headline.
 *
 * object-fit: contain guarantees the bulb and the "light up your life" tagline
 * are never cropped or stretched, whatever the exact aspect ratio of the
 * supplied file.
 */
.taif-calc__logo {
	display: block;
	width: auto;
	max-width: 100%;
	height: 152px;
	margin-bottom: 14px;
	object-fit: contain;
	object-position: left center;
}

/*
 * Placeholder shown only while assets/images/taif-led-logo.png is absent.
 * It is a plain text brand name, not a reproduction of the logo.
 */
.taif-calc__logo-fallback {
	margin-bottom: 16px;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--taif-white);
}

.taif-calc__eyebrow {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--taif-accent);
}

/*
 * The two phrases read as one statement on a single line at desktop width.
 * They are flex items rather than blocks, so they sit side by side and wrap to
 * two lines only when the column genuinely runs out of room — on mobile,
 * readability wins over keeping them together.
 *
 * Each phrase is nowrap so a line can never break mid-phrase.
 */
.taif-calc__statement {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: .32em;
	row-gap: 0;
	margin-top: 14px;
	/*
	 * Capped at 38px: the hero copy column is ~563px at desktop, and the full
	 * statement needs ~39px or less to stay on one line there. The vw factor
	 * keeps it fitting all the way down to the 900px breakpoint, below which
	 * the hero becomes a single full-width column.
	 */
	font-size: clamp(26px, 2.85vw, 38px);
	font-weight: 750;
	line-height: 1.08;
	letter-spacing: -.03em;
	text-transform: uppercase;
	color: var(--taif-white);
}

.taif-calc__statement span {
	white-space: nowrap;
}

.taif-calc__statement span:last-child {
	color: rgba(255, 255, 255, .55);
}

.taif-calc__title {
	margin-top: 20px;
	font-size: clamp(17px, 2vw, 21px);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--taif-white);
}

.taif-calc__subtitle {
	margin-top: 12px;
	max-width: 52ch;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .68);
}

/* --- Hero technical visual: pure CSS, no images, no libraries. --- */
.taif-calc__hero-visual {
	position: relative;
	min-height: 340px;
}

.taif-calc__room {
	position: absolute;
	inset: 0;
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: 14px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .035) 0%, rgba(255, 255, 255, 0) 55%);
	overflow: hidden;
}

.taif-calc__ceiling {
	position: absolute;
	top: 52px;
	left: 8%;
	right: 8%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .32), transparent);
}

.taif-calc__fixture {
	position: absolute;
	top: 46px;
	width: 40px;
	height: 10px;
	border-radius: 3px;
	background: rgba(255, 255, 255, .16);
	border: 1px solid rgba(255, 255, 255, .22);
}

.taif-calc__fixture i {
	position: absolute;
	inset: 2px 4px;
	border-radius: 2px;
	background: linear-gradient(90deg, #C8D82D, #24B9C7);
	opacity: .9;
}

.taif-calc__fixture--1 { left: 18%; }
.taif-calc__fixture--2 { left: calc(50% - 20px); }
.taif-calc__fixture--3 { right: 18%; }

/* Light cones. */
.taif-calc__cone {
	position: absolute;
	top: 57px;
	width: 128px;
	height: 190px;
	background: linear-gradient(180deg, rgba(36, 185, 199, .17) 0%, rgba(36, 185, 199, 0) 78%);
	clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
}

.taif-calc__cone--1 { left: calc(18% - 44px); }
.taif-calc__cone--2 { left: calc(50% - 64px); }
.taif-calc__cone--3 { right: calc(18% - 44px); }

.taif-calc__floor {
	position: absolute;
	left: 6%;
	right: 6%;
	bottom: 64px;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
}

/* Pools of light on the working plane. */
.taif-calc__pool {
	position: absolute;
	bottom: 44px;
	width: 130px;
	height: 40px;
	border-radius: 50%;
	background: radial-gradient(ellipse, rgba(36, 185, 199, .26) 0%, rgba(36, 185, 199, 0) 70%);
}

.taif-calc__pool--1 { left: calc(18% - 45px); }
.taif-calc__pool--2 { left: calc(50% - 65px); }
.taif-calc__pool--3 { right: calc(18% - 45px); }

/* --------------------------------------------------------------------------
   3. SHELL + STEP NAVIGATION
   -------------------------------------------------------------------------- */
.taif-calc__shell {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 40px 56px;
}

.taif-calc__step-nav {
	position: relative;
	margin-top: -34px;
	margin-bottom: 28px;
	background: var(--taif-card);
	border: 1px solid var(--taif-border);
	border-radius: var(--taif-radius);
	box-shadow: var(--taif-shadow-lg);
	overflow: hidden;
}

.taif-calc__steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.taif-calc__step {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 20px 24px;
	border-right: 1px solid var(--taif-border);
}

.taif-calc__step:last-child {
	border-right: 0;
}

/* Brand gradient marks the active step. */
.taif-calc__step::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--taif-brand-gradient);
	opacity: 0;
	transition: opacity .2s ease;
}

.taif-calc__step.is-active::after {
	opacity: 1;
}

.taif-calc__step-num {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--taif-muted);
	background: var(--taif-bg);
	border: 1px solid var(--taif-border);
	border-radius: 10px;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.taif-calc__step.is-active .taif-calc__step-num {
	color: var(--taif-white);
	background: var(--taif-dark);
	border-color: var(--taif-dark);
}

.taif-calc__step.is-done .taif-calc__step-num {
	color: var(--taif-accent-deep);
	background: var(--taif-accent-soft);
	border-color: #BFE9EE;
}

.taif-calc__step-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.taif-calc__step-title {
	font-size: 13.5px;
	font-weight: 650;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--taif-text);
}

.taif-calc__step-sub {
	font-size: 12.5px;
	color: var(--taif-muted);
}

/* --------------------------------------------------------------------------
   4. CARDS
   -------------------------------------------------------------------------- */
.taif-calc__card {
	margin-bottom: var(--taif-gap);
	padding: var(--taif-pad);
	background: var(--taif-card);
	border: 1px solid var(--taif-border);
	border-radius: var(--taif-radius);
	box-shadow: var(--taif-shadow);
}

.taif-calc__card-head {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 26px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--taif-border);
}

.taif-calc__card-num {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	font-size: 14px;
	font-weight: 700;
	color: var(--taif-white);
	background: var(--taif-dark);
	border-radius: 11px;
}

.taif-calc__card-title {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.018em;
	text-transform: uppercase;
	color: var(--taif-text);
}

.taif-calc__card-sub {
	margin-top: 5px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--taif-muted);
}

/* --------------------------------------------------------------------------
   5. FORM CONTROLS
   -------------------------------------------------------------------------- */
.taif-calc__form {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.taif-calc__field {
	margin-bottom: 20px;
	min-width: 0;
}

.taif-calc__field:last-child {
	margin-bottom: 0;
}

.taif-calc__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.taif-calc__row--three {
	grid-template-columns: repeat(3, 1fr);
}

.taif-calc label {
	display: block;
	margin: 0 0 8px;
	padding: 0;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--taif-muted);
}

.taif-calc__input-wrap {
	position: relative;
}

.taif-calc input[type="number"],
.taif-calc select {
	display: block;
	width: 100%;
	height: 48px;
	min-height: 0;
	margin: 0;
	padding: 0 14px;
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 550;
	line-height: 1.4;
	text-transform: none;
	color: var(--taif-text);
	background-color: var(--taif-white);
	border: 1px solid var(--taif-border);
	border-radius: var(--taif-radius-md);
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

/* Room for the unit suffix. */
.taif-calc__input-wrap input[type="number"] {
	padding-right: 52px;
}

.taif-calc__input-unit {
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	font-size: 12.5px;
	font-weight: 650;
	letter-spacing: .04em;
	color: var(--taif-muted);
	pointer-events: none;
}

/* Chevron drawn inline — no external asset request. */
.taif-calc select {
	padding-right: 42px;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23697077' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px;
}

.taif-calc input[type="number"]:hover,
.taif-calc select:hover {
	border-color: #C6CDD2;
}

.taif-calc input[type="number"]:focus,
.taif-calc select:focus {
	outline: none;
	border-color: var(--taif-accent);
	box-shadow: 0 0 0 3px rgba(36, 185, 199, .16);
}

.taif-calc input[type="number"]:focus-visible,
.taif-calc select:focus-visible,
.taif-calc button:focus-visible,
.taif-calc a:focus-visible,
.taif-calc summary:focus-visible {
	outline: 2px solid var(--taif-accent);
	outline-offset: 2px;
}

/* Invalid state — always paired with a text message, never colour alone. */
.taif-calc input[aria-invalid="true"],
.taif-calc select[aria-invalid="true"] {
	border-color: var(--taif-danger);
	background-color: var(--taif-danger-soft);
}

.taif-calc__help {
	margin-top: 7px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--taif-muted);
}

.taif-calc__error {
	margin-top: 7px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--taif-danger);
}

.taif-calc__form-error {
	margin-top: 16px;
	padding: 13px 16px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--taif-danger);
	background: var(--taif-danger-soft);
	border: 1px solid #F0C8C5;
	border-radius: var(--taif-radius-md);
}

/* Live room area readout. */
.taif-calc__area {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	margin-top: 24px;
	padding: 18px 22px;
	background: var(--taif-dark);
	border-radius: var(--taif-radius-md);
}

.taif-calc__area-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
}

.taif-calc__area-value {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--taif-white);
}

/* --------------------------------------------------------------------------
   6. ADVANCED ENGINEERING SETTINGS
   -------------------------------------------------------------------------- */
.taif-calc__advanced {
	margin-top: 24px;
	border: 1px solid var(--taif-border);
	border-radius: var(--taif-radius-md);
	overflow: hidden;
}

.taif-calc__advanced-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	margin: 0;
	padding: 18px 22px;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	color: var(--taif-text);
	background: var(--taif-bg);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
}

.taif-calc__advanced-toggle:hover {
	background: #EEF1F3;
}

.taif-calc__advanced-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.taif-calc__advanced-title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--taif-text);
}

.taif-calc__advanced-sub {
	font-size: 12.5px;
	color: var(--taif-muted);
}

/* CSS-only chevron — keeps the markup clean and loads nothing. */
.taif-calc__chevron {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--taif-muted);
	border-bottom: 2px solid var(--taif-muted);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .2s ease;
}

.taif-calc__advanced-toggle[aria-expanded="true"] .taif-calc__chevron {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.taif-calc__advanced-panel {
	padding: 24px 22px;
	border-top: 1px solid var(--taif-border);
}

.taif-calc__link-btn {
	margin: 16px 0 0;
	padding: 0;
	font-family: inherit;
	font-size: 13px;
	font-weight: 650;
	text-transform: none;
	color: var(--taif-accent-deep);
	background: none;
	border: 0;
	border-bottom: 1px solid transparent;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
}

.taif-calc__link-btn:hover {
	border-bottom-color: currentColor;
	background: none;
}

/* --------------------------------------------------------------------------
   7. BUTTONS
   -------------------------------------------------------------------------- */
.taif-calc__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.taif-calc__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: auto;
	min-height: 52px;
	margin: 0;
	padding: 15px 28px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .1em;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--taif-radius-md);
	box-shadow: none;
	cursor: pointer;
	transition: background-color .16s ease, border-color .16s ease,
	            color .16s ease, transform .1s ease;
}

.taif-calc__btn:active {
	transform: translateY(1px);
}

.taif-calc__btn--block {
	flex: 1 1 300px;
}

.taif-calc__btn-arrow {
	font-size: 15px;
	letter-spacing: 0;
}

.taif-calc__btn--primary,
.taif-calc__btn--primary:visited {
	background: var(--taif-dark);
	color: var(--taif-white);
}

.taif-calc__btn--primary:hover,
.taif-calc__btn--primary:focus {
	background: #000;
	color: var(--taif-white);
}

/* Brand gradient accent on the primary action. */
.taif-calc__btn--primary::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 0;
	height: 2px;
	border-radius: 2px 2px 0 0;
	background: var(--taif-brand-gradient);
	opacity: .9;
}

/* Follows the hero description directly now that the badge is gone. */
.taif-calc__btn--hero,
.taif-calc__btn--hero:visited {
	margin-top: 28px;
	color: var(--taif-dark);
	background: var(--taif-white);
}

.taif-calc__btn--hero:hover,
.taif-calc__btn--hero:focus {
	background: #EDEFF1;
	color: var(--taif-dark);
}

.taif-calc__btn--outline,
.taif-calc__btn--outline:visited {
	background: transparent;
	color: var(--taif-white);
	border-color: rgba(255, 255, 255, .3);
}

.taif-calc__btn--outline:hover,
.taif-calc__btn--outline:focus {
	background: rgba(255, 255, 255, .09);
	color: var(--taif-white);
}

.taif-calc__btn--wa,
.taif-calc__btn--wa:visited {
	background: var(--taif-wa);
	color: var(--taif-white);
}

.taif-calc__btn--wa:hover,
.taif-calc__btn--wa:focus {
	background: #0F7568;
	color: var(--taif-white);
}

.taif-calc__btn--ghost,
.taif-calc__btn--ghost:visited {
	background: var(--taif-white);
	color: var(--taif-text);
	border-color: var(--taif-border);
}

.taif-calc__btn--ghost:hover,
.taif-calc__btn--ghost:focus {
	background: var(--taif-bg);
	color: var(--taif-text);
	border-color: #C6CDD2;
}

.taif-calc__btn--sm {
	min-height: 44px;
	padding: 11px 20px;
	font-size: 11.5px;
}

/* Calculate button micro-interaction. */
.taif-calc__spinner {
	display: none;
	width: 15px;
	height: 15px;
	border: 2px solid rgba(255, 255, 255, .35);
	border-top-color: #FFF;
	border-radius: 50%;
}

.taif-calc__btn.is-loading {
	pointer-events: none;
}

.taif-calc__btn.is-loading .taif-calc__spinner {
	display: block;
	animation: taif-calc-spin .6s linear infinite;
}

.taif-calc__btn.is-loading .taif-calc__btn-arrow {
	display: none;
}

@keyframes taif-calc-spin {
	to { transform: rotate(360deg); }
}

.taif-calc__method-note {
	margin-top: 14px;
	font-size: 12.5px;
	color: var(--taif-muted);
}

/* --------------------------------------------------------------------------
   8. PRODUCT CARD
   -------------------------------------------------------------------------- */
.taif-calc__product {
	margin-top: 24px;
	padding: 24px;
	background: var(--taif-bg);
	border: 1px solid var(--taif-border);
	border-radius: var(--taif-radius-md);
}

.taif-calc__product-head {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--taif-border);
}

.taif-calc__product-image {
	flex: 0 0 96px;
	width: 96px;
	background: var(--taif-white);
	border: 1px solid var(--taif-border);
	border-radius: var(--taif-radius-sm);
}

.taif-calc__product-id {
	min-width: 0;
}

.taif-calc__product-name {
	font-size: 21px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.018em;
	color: var(--taif-text);
}

.taif-calc__product-category {
	margin-top: 4px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--taif-accent-deep);
}

.taif-calc__product-code {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	margin-top: 10px;
	font-size: 13px;
	font-weight: 650;
	color: var(--taif-text);
}

.taif-calc__product-code-label {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--taif-muted);
}

/* Four primary technical stats. */
.taif-calc__stats--product {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.taif-calc__stats--product .taif-calc__stat {
	padding: 16px 14px;
	background: var(--taif-white);
	border: 1px solid var(--taif-border);
	border-radius: var(--taif-radius-sm);
}

.taif-calc__stat {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.taif-calc__stat-label {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--taif-muted);
}

.taif-calc__stat-value {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--taif-text);
}

/* Compact secondary tags. */
.taif-calc__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.taif-calc__tag {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	padding: 7px 12px;
	font-size: 13px;
	font-weight: 650;
	color: var(--taif-text);
	background: var(--taif-white);
	border: 1px solid var(--taif-border);
	border-radius: 999px;
}

.taif-calc__tag-label {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--taif-muted);
}

.taif-calc__product-actions {
	margin-top: 16px;
}

.taif-calc__link {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--taif-accent-deep);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.taif-calc__link:hover {
	color: var(--taif-dark);
}

.taif-calc__product-note {
	margin-top: 14px;
	padding: 12px 14px;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--taif-muted);
	background: var(--taif-white);
	border: 1px dashed var(--taif-border);
	border-radius: var(--taif-radius-sm);
}

/* --------------------------------------------------------------------------
   9. DISCLOSURE PANELS
   -------------------------------------------------------------------------- */
.taif-calc__details {
	margin-top: 16px;
	background: var(--taif-white);
	border: 1px solid var(--taif-border);
	border-radius: var(--taif-radius-md);
}

.taif-calc__details > summary {
	padding: 16px 20px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--taif-text);
	cursor: pointer;
	list-style: none;
}

.taif-calc__details > summary::-webkit-details-marker {
	display: none;
}

.taif-calc__details > summary::after {
	content: "+";
	float: right;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.1;
	color: var(--taif-muted);
}

.taif-calc__details[open] > summary::after {
	content: "\2013";
}

.taif-calc__details[open] > summary {
	border-bottom: 1px solid var(--taif-border);
}

.taif-calc__specs {
	display: grid;
	gap: 10px;
	padding: 18px 20px;
}

.taif-calc__spec {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	font-size: 13.5px;
}

.taif-calc__spec dt {
	color: var(--taif-muted);
}

.taif-calc__spec dd {
	font-weight: 650;
	text-align: right;
	color: var(--taif-text);
}

/* --------------------------------------------------------------------------
   10. RESULT
   -------------------------------------------------------------------------- */
.taif-calc__result {
	margin-top: 28px;
	padding: var(--taif-pad);
	background: var(--taif-card);
	border: 1px solid var(--taif-border);
	border-radius: var(--taif-radius);
	box-shadow: var(--taif-shadow);
	scroll-margin-top: 20px;
}

/* The single strongest element in the calculator. */
.taif-calc__hero-result {
	position: relative;
	overflow: hidden;
	padding: 44px 32px;
	text-align: center;
	color: var(--taif-white);
	background: var(--taif-dark);
	border-radius: var(--taif-radius);
}

.taif-calc__hero-result-bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 50% 0%, rgba(36, 185, 199, .22) 0%, rgba(36, 185, 199, 0) 60%),
		linear-gradient(to right, rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 48px 48px;
	pointer-events: none;
}

.taif-calc__hero-result > * {
	position: relative;
}

.taif-calc__hero-result::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--taif-brand-gradient);
}

.taif-calc__hero-label {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .62);
}

.taif-calc__hero-value {
	display: flex;
	align-items: baseline;
	justify-content: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 10px;
	font-size: clamp(52px, 9vw, 86px);
	font-weight: 780;
	line-height: 1;
	letter-spacing: -.045em;
	color: var(--taif-white);
}

.taif-calc__hero-unit {
	font-size: clamp(15px, 2.6vw, 20px);
	font-weight: 650;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
}

.taif-calc__hero-product {
	margin-top: 16px;
	font-size: 14px;
	font-weight: 650;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .88);
}

/* Four primary result stats. */
.taif-calc__stats--result {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-top: 16px;
}

.taif-calc__stats--result .taif-calc__stat {
	padding: 18px 18px;
	background: var(--taif-bg);
	border: 1px solid var(--taif-border);
	border-radius: var(--taif-radius-md);
}

.taif-calc__stats--result .taif-calc__stat-value {
	font-size: 21px;
}

/* Secondary results. */
.taif-calc__subtotals {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	margin-top: 16px;
	background: var(--taif-border);
	border: 1px solid var(--taif-border);
	border-radius: var(--taif-radius-md);
	overflow: hidden;
}

.taif-calc__subtotals > div {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px;
	background: var(--taif-white);
	font-size: 12.5px;
}

.taif-calc__subtotals span {
	color: var(--taif-muted);
}

.taif-calc__subtotals strong {
	font-size: 15px;
	font-weight: 700;
	color: var(--taif-text);
}

.taif-calc__breakdown-wrap {
	padding: 6px 20px 20px;
}

.taif-calc__breakdown > div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
	font-size: 13.5px;
	border-bottom: 1px dashed var(--taif-border);
}

.taif-calc__breakdown > div:last-child {
	border-bottom: 0;
}

.taif-calc__breakdown dt {
	color: var(--taif-muted);
}

.taif-calc__breakdown dd {
	font-weight: 650;
	text-align: right;
	color: var(--taif-text);
}

.taif-calc__formula {
	margin-top: 14px;
	font-size: 13.5px;
	color: var(--taif-muted);
}

.taif-calc__formula ol {
	display: grid;
	gap: 8px;
	margin-bottom: 16px;
}

.taif-calc__formula li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
	padding: 11px 15px;
	background: var(--taif-bg);
	border-radius: var(--taif-radius-sm);
}

.taif-calc__f-name {
	min-width: 150px;
	font-weight: 700;
	color: var(--taif-text);
}

.taif-calc__f-eq {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: 13px;
	color: var(--taif-accent-deep);
}

.taif-calc__formula p + p {
	margin-top: 10px;
}

.taif-calc__disclaimer {
	margin-top: 16px;
	padding: 18px 20px;
	font-size: 12.5px;
	line-height: 1.65;
	color: var(--taif-muted);
	background: var(--taif-bg);
	border-left: 3px solid var(--taif-border);
	border-radius: 0 var(--taif-radius-sm) var(--taif-radius-sm) 0;
}

.taif-calc__result-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
}

.taif-calc__share-feedback {
	font-size: 13px;
	font-weight: 600;
	color: var(--taif-accent-deep);
}

/* --------------------------------------------------------------------------
   11. PROJECT CTA BAND
   -------------------------------------------------------------------------- */
.taif-calc__cta {
	position: relative;
	overflow: hidden;
	margin-top: 28px;
	padding: 56px 32px 60px;
	text-align: center;
	background: var(--taif-dark);
	border-radius: var(--taif-radius);
}

.taif-calc__cta-bg {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 0%, rgba(36, 185, 199, .16) 0%, rgba(36, 185, 199, 0) 62%);
	pointer-events: none;
}

/*
 * The copy stays at a comfortable reading measure, but the action row needs
 * more room than that — capping the whole block at 640px was what pushed the
 * WhatsApp button onto its own line.
 */
.taif-calc__cta-inner {
	position: relative;
	max-width: 900px;
	margin: 0 auto;
}

.taif-calc__cta-title,
.taif-calc__cta-copy {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

.taif-calc__cta-title {
	font-size: clamp(21px, 3.2vw, 28px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.022em;
	color: var(--taif-white);
}

.taif-calc__cta-copy {
	margin-top: 14px;
	margin-bottom: 32px;
	font-size: 14.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .66);
}

/*
 * One coordinated action row: equal heights, matching radius and typography
 * (all three are .taif-calc__btn), balanced gaps. It wraps only when the width
 * genuinely demands it, and wrapped rows stay centred rather than looking
 * accidental.
 */
.taif-calc__cta-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 12px;
}

.taif-calc__cta-buttons .taif-calc__btn {
	flex: 0 1 auto;
}

.taif-calc__cta .taif-calc__btn--primary,
.taif-calc__cta .taif-calc__btn--primary:visited {
	background: var(--taif-white);
	color: var(--taif-dark);
}

.taif-calc__cta .taif-calc__btn--primary:hover,
.taif-calc__cta .taif-calc__btn--primary:focus {
	background: #EDEFF1;
	color: var(--taif-dark);
}

/* --------------------------------------------------------------------------
   12. RESPONSIVE
   Safe down to 320px: every multi-column grid collapses, nothing overflows.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.taif-calc__hero { padding: 56px 32px 64px; }
	.taif-calc__shell { padding: 0 32px 48px; }
	.taif-calc__hero-inner { gap: 36px; min-height: 0; }
	.taif-calc__hero-visual { min-height: 300px; }
}

@media (max-width: 900px) {
	.taif-calc__hero-inner { grid-template-columns: 1fr; }
	.taif-calc__hero-visual { min-height: 240px; order: -1; }
	.taif-calc__logo { height: 136px; }
	.taif-calc__row--three { grid-template-columns: 1fr 1fr; }
	.taif-calc__stats--product,
	.taif-calc__stats--result { grid-template-columns: repeat(2, 1fr); }
	.taif-calc__subtotals { grid-template-columns: repeat(2, 1fr); }
	.taif-calc__steps { grid-template-columns: 1fr; }
	.taif-calc__step { border-right: 0; border-bottom: 1px solid var(--taif-border); }
	.taif-calc__step:last-child { border-bottom: 0; }
}

@media (max-width: 620px) {
	.taif-calc { --taif-pad: 20px; --taif-gap: 16px; border-radius: 0; }
	.taif-calc__hero { padding: 40px 18px 48px; }
	.taif-calc__shell { padding: 0 18px 40px; }
	.taif-calc__hero-visual { min-height: 190px; }
	.taif-calc__logo { height: 112px; margin-bottom: 12px; }
	.taif-calc__logo-fallback { font-size: 21px; }
	.taif-calc__statement { font-size: clamp(27px, 8.4vw, 36px); }
	.taif-calc__row,
	.taif-calc__row--three { grid-template-columns: 1fr; gap: 0; }
	.taif-calc__row .taif-calc__field { margin-bottom: 20px; }
	.taif-calc__card-head { gap: 12px; }
	.taif-calc__card-num { width: 36px; height: 36px; flex-basis: 36px; }
	.taif-calc__card-title { font-size: 17px; }
	.taif-calc__hero-result { padding: 34px 18px; }
	.taif-calc__subtotals { grid-template-columns: 1fr; }
	.taif-calc__product-head { flex-direction: column; gap: 14px; }
	.taif-calc__product-image { flex-basis: auto; width: 120px; }
	.taif-calc__cta { padding: 40px 18px 44px; }
	.taif-calc__cta-copy { margin-bottom: 26px; }

	/* Stack the three actions with a consistent 12px rhythm. */
	.taif-calc__cta-buttons { flex-direction: column; gap: 12px; }

	/* Full-width tap targets on small screens. */
	.taif-calc__actions .taif-calc__btn,
	.taif-calc__cta-buttons .taif-calc__btn,
	.taif-calc__btn--hero { width: 100%; }
}

@media (max-width: 380px) {
	.taif-calc__hero { padding: 34px 14px 40px; }
	.taif-calc__shell { padding: 0 14px 32px; }
	.taif-calc__stats--product,
	.taif-calc__stats--result { grid-template-columns: 1fr; }
	.taif-calc__spec { flex-direction: column; gap: 2px; }
	.taif-calc__spec dd { text-align: left; }
	.taif-calc__area { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* --------------------------------------------------------------------------
   13. MOTION & CONTRAST PREFERENCES
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.taif-calc *,
	.taif-calc *::before,
	.taif-calc *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

@media (forced-colors: active) {
	.taif-calc__card,
	.taif-calc__hero-result,
	.taif-calc__stat,
	.taif-calc__cta,
	.taif-calc__step-nav { border: 1px solid CanvasText; }
	.taif-calc__btn { border: 1px solid ButtonText; }
}

/* --------------------------------------------------------------------------
   14. THEME ARMOUR

   Some themes and page builders style form controls with `!important`, e.g.
   `input { border: 2px solid red !important; }`. A normal declaration cannot
   win against that no matter how specific it is.

   This section re-states only the properties that actually break the layout
   when overridden. It is scoped to .taif-calc, so it still cannot affect a
   single element outside the calculator — it just refuses to be overridden
   inside it. Modifiers come after their base rule: with equal specificity and
   !important on both sides, source order decides.
   -------------------------------------------------------------------------- */

.taif-calc input[type="number"],
.taif-calc select {
	width: 100% !important;
	height: 48px !important;
	min-height: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 14px !important;
	font-family: inherit !important;
	font-size: 15.5px !important;
	font-weight: 550 !important;
	line-height: 1.4 !important;
	text-align: left !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	color: var(--taif-text) !important;
	background-color: var(--taif-white) !important;
	border: 1px solid var(--taif-border) !important;
	border-radius: var(--taif-radius-md) !important;
	box-shadow: none !important;
}

.taif-calc select {
	padding-right: 42px !important;
}

.taif-calc__input-wrap input[type="number"] {
	padding-right: 52px !important;
}

.taif-calc input[type="number"]:hover,
.taif-calc select:hover {
	border-color: #C6CDD2 !important;
}

.taif-calc input[type="number"]:focus,
.taif-calc select:focus {
	border-color: var(--taif-accent) !important;
	box-shadow: 0 0 0 3px rgba(36, 185, 199, .16) !important;
}

.taif-calc input[aria-invalid="true"],
.taif-calc select[aria-invalid="true"] {
	border-color: var(--taif-danger) !important;
	background-color: var(--taif-danger-soft) !important;
}

.taif-calc input[type="number"]:focus-visible,
.taif-calc select:focus-visible,
.taif-calc button:focus-visible,
.taif-calc a:focus-visible {
	outline: 2px solid var(--taif-accent) !important;
	outline-offset: 2px !important;
}

/* Buttons — border-color stays separate so the modifiers can set it. */
.taif-calc__btn {
	width: auto !important;
	min-height: 52px !important;
	margin: 0 !important;
	padding: 15px 28px !important;
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-align: center !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	letter-spacing: .1em !important;
	border-width: 1px !important;
	border-style: solid !important;
	border-color: transparent !important;
	border-radius: var(--taif-radius-md) !important;
	box-shadow: none !important;
}

.taif-calc__btn--sm {
	min-height: 44px !important;
	padding: 11px 20px !important;
	font-size: 11.5px !important;
}

/* Slightly tighter padding so all three CTA actions fit one desktop row. */
.taif-calc__cta-buttons .taif-calc__btn {
	padding: 15px 24px !important;
}

.taif-calc__btn--primary,
.taif-calc__btn--primary:visited {
	background: var(--taif-dark) !important;
	color: var(--taif-white) !important;
}

.taif-calc__btn--primary:hover,
.taif-calc__btn--primary:focus {
	background: #000 !important;
	color: var(--taif-white) !important;
}

.taif-calc__cta .taif-calc__btn--primary,
.taif-calc__cta .taif-calc__btn--primary:visited {
	background: var(--taif-white) !important;
	color: var(--taif-dark) !important;
}

.taif-calc__cta .taif-calc__btn--primary:hover,
.taif-calc__cta .taif-calc__btn--primary:focus {
	background: #EDEFF1 !important;
	color: var(--taif-dark) !important;
}

.taif-calc__btn--hero,
.taif-calc__btn--hero:visited {
	/* Restores the gap the base armour's `margin: 0` would otherwise remove. */
	margin-top: 28px !important;
	background: var(--taif-white) !important;
	color: var(--taif-dark) !important;
}

.taif-calc__btn--hero:hover,
.taif-calc__btn--hero:focus {
	background: #EDEFF1 !important;
	color: var(--taif-dark) !important;
}

.taif-calc__btn--outline,
.taif-calc__btn--outline:visited {
	background: transparent !important;
	color: var(--taif-white) !important;
	border-color: rgba(255, 255, 255, .3) !important;
}

.taif-calc__btn--outline:hover,
.taif-calc__btn--outline:focus {
	background: rgba(255, 255, 255, .09) !important;
	color: var(--taif-white) !important;
}

.taif-calc__btn--wa,
.taif-calc__btn--wa:visited {
	background: var(--taif-wa) !important;
	color: var(--taif-white) !important;
}

.taif-calc__btn--wa:hover,
.taif-calc__btn--wa:focus {
	background: #0F7568 !important;
	color: var(--taif-white) !important;
}

.taif-calc__btn--ghost,
.taif-calc__btn--ghost:visited {
	background: var(--taif-white) !important;
	color: var(--taif-text) !important;
	border-color: var(--taif-border) !important;
}

.taif-calc__btn--ghost:hover,
.taif-calc__btn--ghost:focus {
	background: var(--taif-bg) !important;
	color: var(--taif-text) !important;
	border-color: #C6CDD2 !important;
}

/*
 * The logo. Themes routinely ship `img { width: 100% !important }` or a forced
 * aspect-ratio, either of which would stretch or crop the lock-up. Height,
 * width and object-fit are pinned so the bulb and tagline always stay intact.
 * The height itself is re-stated per breakpoint below.
 */
.taif-calc__logo {
	width: auto !important;
	max-width: 100% !important;
	min-width: 0 !important;
	height: 152px !important;
	max-height: none !important;
	object-fit: contain !important;
	aspect-ratio: auto !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: none !important;
}

@media (max-width: 900px) {
	.taif-calc__logo { height: 136px !important; }
}

@media (max-width: 620px) {
	.taif-calc__logo { height: 112px !important; }
}

/* The two chromeless buttons. */
.taif-calc__advanced-toggle {
	width: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 18px 22px !important;
	font-family: inherit !important;
	font-size: 15px !important;
	text-align: left !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	color: var(--taif-text) !important;
	background: var(--taif-bg) !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.taif-calc__advanced-toggle:hover {
	background: #EEF1F3 !important;
}

.taif-calc__link-btn {
	width: auto !important;
	min-height: 0 !important;
	margin: 16px 0 0 !important;
	padding: 0 !important;
	font-family: inherit !important;
	font-size: 13px !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	color: var(--taif-accent-deep) !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.taif-calc__link {
	margin: 0 !important;
	padding: 0 !important;
	font-family: inherit !important;
	font-size: 13px !important;
	color: var(--taif-accent-deep) !important;
	background: none !important;
	border: 0 !important;
	text-decoration: underline !important;
}

/* --------------------------------------------------------------------------
   15. DUPLICATE PAGE TITLE

   THE ONLY RULES IN THIS FILE NOT SCOPED UNDER .taif-calc.

   The theme — not this plugin — renders the page title above the calculator.
   The plugin's own heading is inside the hero, so on a page whose entire
   purpose is the calculator that theme title is a visible duplicate.

   Two independent guards keep this off every other page:
     1. This stylesheet only loads on pages that contain the shortcode.
     2. Every rule below additionally requires body.taif-led-calc-page, which
        taif_led_calc_body_class() adds only to those same pages.

   It therefore cannot reach the header, navigation, footer, another page, or
   anything outside the calculator page. The heading stays in the DOM for
   crawlers; the hero supplies the visible and accessible heading.

   To keep the theme's title instead:
       add_filter( 'taif_led_calc_hide_page_title', '__return_false' );

   If your theme uses a different selector, add it here or hide the element in
   the page builder directly — in Bricks, deleting the page-title element on
   this template is the cleanest fix and makes these rules unnecessary.
   -------------------------------------------------------------------------- */
body.taif-led-calc-page:not(.taif-led-calc-keep-title) .page-title,
body.taif-led-calc-page:not(.taif-led-calc-keep-title) .page-header .entry-title,
body.taif-led-calc-page:not(.taif-led-calc-keep-title) h1.entry-title,
body.taif-led-calc-page:not(.taif-led-calc-keep-title) .wp-block-post-title {
	display: none;
}

/* --------------------------------------------------------------------------
   16. PRINT — clean result sheet
   Hides the hero, form, step nav, utility buttons and CTA buttons; keeps the
   heading, room information, product, quantity, connected load and disclaimer.
   -------------------------------------------------------------------------- */
@media print {
	.taif-calc {
		--taif-bg: #fff;
		background: #fff;
		border-radius: 0;
		overflow: visible;
	}

	.taif-calc__shell {
		max-width: none;
		padding: 0;
	}

	.taif-calc__hero,
	.taif-calc__step-nav,
	.taif-calc__form,
	.taif-calc__result-actions,
	.taif-calc__cta-buttons { display: none !important; }

	.taif-calc__print-title {
		display: block;
		margin-bottom: 14px;
		font-size: 15px;
		font-weight: 700;
		letter-spacing: .05em;
		text-transform: uppercase;
		color: #000;
	}

	.taif-calc__result {
		margin-top: 0;
		padding: 0;
		border: 0;
		box-shadow: none;
	}

	.taif-calc__hero-result {
		color: #000;
		background: none !important;
		border: 2px solid #000;
		border-radius: 0;
	}

	.taif-calc__hero-result-bg { display: none; }
	.taif-calc__hero-result::after { display: none; }

	.taif-calc__hero-label,
	.taif-calc__hero-unit,
	.taif-calc__hero-product,
	.taif-calc__hero-value { color: #000; }

	.taif-calc__card,
	.taif-calc__stats,
	.taif-calc__subtotals,
	.taif-calc__details,
	.taif-calc__cta {
		border-color: #999;
		box-shadow: none;
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.taif-calc__cta {
		color: #000;
		background: none !important;
	}

	.taif-calc__cta-bg { display: none; }
	.taif-calc__cta-title,
	.taif-calc__cta-copy { color: #000; }

	.taif-calc__details > summary { border-bottom: 1px solid #999; }
}