/**
 * Lone Wolf — Pricing Calculator styles
 * Standalone CSS, enqueued only on the Pricing Calculator page template.
 * Palette mirrors LFTheme::palette() so it stays on-brand without touching the
 * runtime SCSS pipeline. If the brand colours change, update these to match.
 */

#pricing-calculator-page {
	--lf-primary: #4A7C6F;      /* Pine green */
	--lf-secondary: #2D3F3F;    /* Deep pine */
	--lf-accent: #A25131;       /* Rust */
	--lf-light: #E8EDE9;        /* Cream */
	--lf-sage: #7EB8A4;         /* Sage */
	--lf-ink: #2D3F3F;
	--lf-text: #45524F;         /* Body on light */
	--lf-muted: #6E7C77;
	--lf-line: #D7DED8;
	--lf-card: #ffffff;
	--lf-bg: #F4F7F4;
}

/* ---- Section shell (light) ---- */
#pricing-calculator-page #calculator {
	background: var(--lf-bg);
	padding: 3rem 0 5rem;
}
#pricing-calculator-page #page-header {
	padding: 4rem 0 1.5rem;
}

/* ---- Layout ---- */
.lf-calc__form { padding-right: 2.5rem;  padding-left: 0; }
@media (max-width: 991.98px) { .lf-calc__form { padding-right: 0; } }

.lf-calc__form h2 {
	margin-bottom: 40px;
}

/* ---- Groups ---- */
.lf-calc__group {
	border: 0;
	margin: 0 0 2.25rem;
	padding: 0;
}
.lf-calc__legend {
	font-family: 'ClashGrotesk-Medium', sans-serif;
	font-weight: 400;
	color: var(--lf-secondary);
	font-size: 1.7rem;
	line-height: 1.2;
	margin-bottom: .35rem;
	width: auto;
	float: none;
}
.lf-calc__hint {
	font-size: .85rem;
	line-height: 1.5;
	color: var(--lf-muted);
	margin: 0 0 1rem;
	max-width: 100%;
}

.lf-calc__field-label {
	display: block;
	font-family: 'ClashGrotesk-Medium', sans-serif; 
	font-size: .72rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--lf-secondary);
	margin-bottom: .35rem;
}
.lf-calc__req { color: var(--lf-accent); }
.lf-calc__optional { color: var(--lf-muted); text-transform: none; letter-spacing: 0; }

/* ---- Design / radio options ---- */
.lf-calc__option {
	display: flex;
	align-items: flex-start;
	gap: .85rem;
	background: var(--lf-card);
	border: 1px solid var(--lf-line);
	border-radius: 12px;
	padding: 1rem 1.15rem;
	margin-bottom: .75rem;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.lf-calc__option:hover { border-color: var(--lf-sage); }
.lf-calc__option input { margin-top: .3rem; accent-color: var(--lf-primary); flex: 0 0 auto; width: 1.05rem; height: 1.05rem; }
.lf-calc__option:has(input:checked) {
	border-color: var(--lf-primary);
	box-shadow: 0 0 0 1px var(--lf-primary);
}
.lf-calc__option-body { flex: 1 1 auto; }
.lf-calc__option-title { display: block; font-family: 'ClashGrotesk-Medium', sans-serif;  font-weight: 400; color: var(--lf-secondary); }
.lf-calc__option-desc { display: block; font-size: .83rem; color: var(--lf-muted); margin-top: .15rem; line-height: 1.45; }
.lf-calc__option-price {
	flex: 0 0 auto;
	font-family: 'ClashGrotesk-Medium', sans-serif; 
	font-size: .85rem;
	color: var(--lf-accent);
	white-space: nowrap;
	padding-top: .1rem;
}

/* ---- Website types (grid of cards) ---- */
.lf-calc__types {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .75rem;
}
@media (max-width: 575.98px) { .lf-calc__types { grid-template-columns: 1fr; } }
.lf-calc__type {
	position: relative;
	display: block;
	background: var(--lf-card);
	border: 1px solid var(--lf-line);
	border-radius: 12px;
	padding: 1rem 1.1rem;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.lf-calc__type:hover { border-color: var(--lf-sage); }
.lf-calc__type input { position: absolute; opacity: 0; pointer-events: none; }
.lf-calc__type:has(input:checked) {
	border-color: var(--lf-primary);
	box-shadow: 0 0 0 1px var(--lf-primary);
}
.lf-calc__type-name { display: block; font-family: 'ClashGrotesk-Medium', sans-serif;  font-weight: 400; color: var(--lf-secondary); }
.lf-calc__type-meta { display: block; font-size: .8rem; color: var(--lf-muted); margin-top: .1rem; }

/* ---- Conditional (products) ---- */
.lf-calc__conditional {
	margin-top: 1.15rem;
	padding: 1.1rem 1.15rem;
	background: rgba(126, 184, 164, .12);
	border: 1px solid rgba(74, 124, 111, .25);
	border-radius: 12px;
}
.lf-calc__select,
.lf-calc__contact input,
.lf-calc__contact textarea {
	width: 100%;
	font: inherit;
	font-size: .95rem;
	color: var(--lf-secondary);
	background: var(--lf-card);
	border: 1px solid var(--lf-line);
	border-radius: 10px;
	padding: .6rem .75rem;
}
.lf-calc__select:focus,
.lf-calc__contact input:focus,
.lf-calc__contact textarea:focus {
	outline: none;
	border-color: var(--lf-primary);
	box-shadow: 0 0 0 2px rgba(74, 124, 111, .2);
}

/* ---- Steppers ---- */
.lf-calc__stepper-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	background: var(--lf-card);
	border: 1px solid var(--lf-line);
	border-radius: 12px;
	padding: 1rem 1.15rem;
	margin-bottom: .75rem;
}
.lf-calc__stepper-label { flex: 1 1 auto; }
.lf-calc__stepper-label .lf-calc__hint { margin: .35rem 0 0; }
.lf-calc__stepper { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; }
.lf-calc__step {
	width: 2.1rem; height: 2.1rem;
	border: 1px solid var(--lf-line);
	background: var(--lf-bg);
	border-radius: 8px;
	font-size: 1.1rem; line-height: 1;
	color: var(--lf-secondary);
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}
.lf-calc__step:hover { border-color: var(--lf-primary); background: #fff; }
.lf-calc__stepper input {
	width: 3.2rem; text-align: center;
	font: inherit; font-weight: 600;
	color: var(--lf-secondary);
	border: 1px solid var(--lf-line);
	border-radius: 8px;
	padding: .45rem 0;
	-moz-appearance: textfield;
}
.lf-calc__stepper input::-webkit-outer-spin-button,
.lf-calc__stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---- Feature checkboxes ---- */
.lf-calc__features { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
@media (max-width: 767.98px) { .lf-calc__features { grid-template-columns: 1fr; } }
.lf-calc__feature {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	background: var(--lf-card);
	border: 1px solid var(--lf-line);
	border-radius: 10px;
	padding: .7rem .85rem;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.lf-calc__feature:hover { border-color: var(--lf-sage); }
.lf-calc__feature input { margin-top: .15rem; accent-color: var(--lf-primary); width: 1rem; height: 1rem; flex: 0 0 auto; }
.lf-calc__feature:has(input:checked) { border-color: var(--lf-primary); box-shadow: 0 0 0 1px var(--lf-primary); }
.lf-calc__feature-body { flex: 1 1 auto; }
.lf-calc__feature-title { display: block; font-size: .92rem; font-weight: 600; color: var(--lf-secondary); }
.lf-calc__feature-desc { display: block; font-size: .78rem; color: var(--lf-muted); margin-top: .1rem; line-height: 1.4; }
.lf-calc__feature-price {
	flex: 0 0 auto;
	font-family: 'ClashGrotesk-Medium', sans-serif; 
	font-size: .78rem;
	color: var(--lf-accent);
	white-space: nowrap;
}
.lf-calc__feature-price.is-free { color: var(--lf-primary); }

/* ---- Sticky summary ---- */
.lf-calc__summary {
	position: sticky;
	top: 100px;
	background: var(--lf-secondary);
	color: var(--lf-light);
	border-radius: 16px;
	padding: 1.75rem;
	box-shadow: 0 24px 60px -30px rgba(30, 42, 42, .6);
}
.lf-calc__summary-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.lf-calc__summary-title { font-family: 'DM Serif Display', serif; font-size: 1.7rem; color: var(--lf-light) !important; margin: 0; }
.lf-calc__summary-ref { font-family: 'ClashGrotesk-Medium', sans-serif;  font-size: .72rem; color: var(--lf-sage); margin: 0; }

.lf-calc__lines { list-style: none; margin: 0 0 1rem; padding: 0; }
.lf-calc__line { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid rgba(232, 237, 233, .12); font-size: .9rem; }
.lf-calc__line-label { color: #C6D2CB; }
.lf-calc__line-amount { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--lf-light); }
.lf-calc__line-note { font-size: .78rem; color: var(--lf-sage); text-transform: uppercase; letter-spacing: .04em; font-family: 'ClashGrotesk-Medium', sans-serif;  }

.lf-calc__total {
	display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
	padding: 1rem 0 1.25rem;
	margin-top: .25rem;
}
.lf-calc__total-label { font-family: 'ClashGrotesk-Medium', sans-serif; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: #C6D2CB; }
.lf-calc__total-value { font-family: 'DM Serif Display', serif; font-size: 2rem; color: var(--lf-light); }
.lf-calc__gst { font-family: 'ClashGrotesk-Medium', sans-serif; font-size: .8rem; color: var(--lf-sage); }

/* ---- Contact block ---- */
.lf-calc__contact { display: grid; gap: .75rem; margin-bottom: 1.15rem; }
.lf-calc__contact .lf-calc__field-label { color: #B2C0B8; }
.lf-calc__copy { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: #C6D2CB; cursor: pointer; }
.lf-calc__copy input { accent-color: var(--lf-sage); width: 1rem; height: 1rem; }

/* ---- Actions ---- */
.lf-calc__actions { display: flex; gap: .65rem; flex-wrap: wrap; }
.lf-calc__actions .lf-btn { flex: 1 1 auto; text-align: center; cursor: pointer; border: 0; }
.lf-calc__actions .lf-btn--outline {
	background: transparent;
	border: 1px solid var(--lf-sage);
	color: var(--lf-light);
}
.lf-calc__actions .lf-btn--outline:hover { background: rgba(126, 184, 164, .15); }
.lf-calc__actions .lf-btn[disabled] { opacity: .6; cursor: default; }

/* ---- Status ---- */
.lf-calc__status { font-size: .85rem; line-height: 1.5; margin: .9rem 0 0; min-height: 1px; }
.lf-calc__status.is-working { color: var(--lf-sage); }
.lf-calc__status.is-ok { color: #A7D8C4; }
.lf-calc__status.is-error { color: #F0B49B; }

/* ---- Notes ---- */
.lf-calc__notes { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(232, 237, 233, .12); }
.lf-calc__notes-title { font-family: 'ClashGrotesk-Medium', sans-serif;  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--lf-sage); margin: 0 0 .5rem; }
.lf-calc__notes ul { list-style: none; margin: 0; padding: 0; }
.lf-calc__notes li { position: relative; padding-left: 1.1rem; font-size: .8rem; line-height: 1.5; color: #9DB3A9; margin-bottom: .35rem; }
.lf-calc__notes li::before { content: '—'; position: absolute; left: 0; color: var(--lf-accent); }