/*
 * Interactive Savings Calculator
 * Companion to assets/js/savings-calculator.js
 */

/* ── Custom properties ──────────────────────────────────────────── */
.benecaster-calc {
	--bc-font:        system-ui, -apple-system, sans-serif;
	--bc-radius:      6px;
	--bc-blue:        #2563eb;
	--bc-blue-hover:  #1d4ed8;
	/* #15803d, not #16a34a: the lighter green measured 3.03:1 on the
	   Benecaster column's pale blue, under WCAG AA's 4.5:1. */
	--bc-green:       #15803d;
	--bc-muted:       #6b7280;
	--bc-border:      #e5e7eb;
	--bc-bg:          #f9fafb;
	--bc-highlight:   #eff6ff;
	--bc-text:        #111827;

	font-family:  var(--bc-font);
	color:        var(--bc-text);
	max-width:    860px;
	margin:       0 auto;
}

/* ── Inputs section ─────────────────────────────────────────────── */
.benecaster-calc__inputs {
	display:        flex;
	flex-direction: column;
	gap:            1.25rem;
	padding:        1.5rem;
	background:     var(--bc-bg);
	border:         1px solid var(--bc-border);
	border-radius:  var(--bc-radius);
	margin-bottom:  1rem;
}

.benecaster-calc__field {
	display:        flex;
	flex-direction: column;
	gap:            .4rem;
}

.benecaster-calc__field-label {
	font-weight:   600;
	font-size:     .9rem;
	display:       flex;
	align-items:   center;
	gap:           .5rem;
}

.benecaster-calc__count-badge {
	display:       inline-block;
	background:    var(--bc-blue);
	color:         #fff;
	font-weight:   700;
	font-size:     .85rem;
	padding:       .15em .5em;
	border-radius: 999px;
	min-width:     2.5rem;
	text-align:    center;
}

/* Slider + number input side-by-side */
.benecaster-calc__slider-row {
	display:     flex;
	align-items: center;
	gap:         .75rem;
}

.benecaster-calc__count-slider {
	flex:   1;
	cursor: pointer;
	accent-color: var(--bc-blue);
}

.benecaster-calc__count-number {
	width:  5rem;
	padding: .3rem .5rem;
	border: 1px solid var(--bc-border);
	border-radius: var(--bc-radius);
	font-size: .9rem;
}

/* Price row */
.benecaster-calc__price-row {
	display:     flex;
	align-items: center;
	gap:         .4rem;
}

.benecaster-calc__currency {
	font-weight:  700;
	font-size:    1.1rem;
	color:        var(--bc-muted);
}

.benecaster-calc__price-input {
	width:  5rem;
	padding: .3rem .5rem;
	border: 1px solid var(--bc-border);
	border-radius: var(--bc-radius);
	font-size: .9rem;
}

.benecaster-calc__per-month {
	color:     var(--bc-muted);
	font-size: .85rem;
}

/* Billing toggle */
.benecaster-calc__billing-toggle {
	display: flex;
	gap:     .5rem;
}

.benecaster-calc__billing-btn {
	padding:       .4rem .9rem;
	border:        2px solid var(--bc-border);
	border-radius: var(--bc-radius);
	background:    #fff;
	cursor:        pointer;
	font-size:     .85rem;
	font-weight:   500;
	transition:    border-color .15s, background .15s, color .15s;
}

.benecaster-calc__billing-btn:hover {
	border-color: var(--bc-blue);
	color:        var(--bc-blue);
}

.benecaster-calc__billing-btn--active {
	border-color: var(--bc-blue);
	background:   var(--bc-blue);
	color:        #fff;
}

/* Checkbox field */
.benecaster-calc__checkbox-label {
	display:     flex;
	align-items: baseline;
	gap:         .5rem;
	font-size:   .9rem;
	cursor:      pointer;
}

.benecaster-calc__membership {
	margin:       0;
	accent-color: var(--bc-blue);
}

/* Contact-us message (shown at 5 000+) */
.benecaster-calc__ceiling-note {
	font-size:  .85rem;
	color:      var(--bc-muted);
	margin:     .25rem 0 0;
}

.benecaster-calc__link {
	color: var(--bc-blue);
}

/* ── Results section ────────────────────────────────────────────── */
/*
 * ⚠ Every section paints its OWN background. The calculator's text colours
 * assume a light surface, and benecaster.com's page is dark navy: with no
 * background here, the recommended plan rendered #111827 on #1b2140 (1.13:1)
 * and its "Recommended plan:" prefix at 3.25:1 (operator report, 2026-10-05).
 * A section left transparent inherits whatever the theme paints behind it.
 */
.benecaster-calc__results {
	background:    #fff;
	padding:       1.5rem;
	border:        1px solid var(--bc-border);
	border-radius: var(--bc-radius);
	margin-bottom: 1rem;
}

/* Plan recommendation row */
.bc-plan-row {
	font-size:    1rem;
	margin-bottom: .75rem;
}

.bc-plan-prefix {
	color: var(--bc-muted);
}

.bc-plan-name {
	margin-left: .25rem;
}

/* Comparison grid */
.bc-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap:                   1rem;
	margin-bottom:         1rem;
}

/* Individual column */
.bc-col {
	display:        flex;
	flex-direction: column;
	gap:            .35rem;
	padding:        1rem;
	border:         1px solid var(--bc-border);
	border-radius:  var(--bc-radius);
	background:     #fff;
}

.bc-col--benecaster {
	border-color: var(--bc-blue);
	background:   var(--bc-highlight);
}

.bc-col--muted {
	opacity: .6;
}

.bc-col__brand {
	font-weight: 700;
	font-size:   .8rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color:       var(--bc-muted);
}

.bc-col--benecaster .bc-col__brand {
	color: var(--bc-blue);
}

.bc-col__cost {
	font-weight: 700;
	font-size:   1.5rem;
	line-height: 1.2;
}

.bc-col__savings {
	font-size:  .8rem;
}

.bc-col__savings--positive {
	color:       var(--bc-green);
	font-weight: 600;
}

.bc-col__note {
	font-size: .75rem;
	color:     var(--bc-muted);
	margin-top: auto;
}

/* Message row */
.bc-message {
	padding:       .65rem .9rem;
	border-radius: var(--bc-radius);
	font-size:     .9rem;
}

.bc-message--info {
	background: #f0fdf4;
	color:      #15803d;
	border:     1px solid #bbf7d0;
}

.bc-message--savings {
	background: #f0fdf4;
	color:      #15803d;
	border:     1px solid #bbf7d0;
}

.bc-message--breakeven {
	background: #fefce8;
	color:      #92400e;
	border:     1px solid #fde68a;
}

/* noscript */
.benecaster-calc__noscript {
	color:     var(--bc-muted);
	font-size: .9rem;
}

/* ── Footer section ─────────────────────────────────────────────── */
/* Its own surface for the same reason as the results: the "How we calculated
   this" link measured 3.04:1 on the dark page. */
.benecaster-calc__footer {
	background:    var(--bc-bg);
	padding:       1rem 1.5rem;
	border:        1px solid var(--bc-border);
	border-radius: var(--bc-radius);
	display:     flex;
	align-items: center;
	flex-wrap:   wrap;
	gap:         1rem;
}

.benecaster-calc__share-btn {
	padding:       .4rem .9rem;
	border:        2px solid var(--bc-blue);
	border-radius: var(--bc-radius);
	background:    #fff;
	color:         var(--bc-blue);
	font-size:     .85rem;
	font-weight:   600;
	cursor:        pointer;
	transition:    background .15s, color .15s;
}

.benecaster-calc__share-btn:hover {
	background: var(--bc-blue);
	color:      #fff;
}

.benecaster-calc__share-confirm {
	font-size:  .85rem;
	color:      var(--bc-green);
	font-weight: 600;
}

/* Disclosure */
.benecaster-calc__disclosure {
	width:     100%;
	font-size: .85rem;
}

.benecaster-calc__disclosure summary {
	cursor:     pointer;
	color:      var(--bc-blue);
	font-weight: 500;
	padding:    .35rem 0;
}

.benecaster-calc__disclosure-body {
	margin-top:   .5rem;
	padding:      .75rem;
	background:   var(--bc-bg);
	border:       1px solid var(--bc-border);
	border-radius: var(--bc-radius);
	display:      flex;
	flex-direction: column;
	gap:          .5rem;
}

.benecaster-calc__disclosure-body p {
	margin: 0;
	line-height: 1.5;
}

.benecaster-calc__disclosure-sources {
	color:     var(--bc-muted);
	font-size: .8rem;
}

/* ── Variant: condensed / patreon-only (narrower) ───────────────── */
.benecaster-calc--condensed,
.benecaster-calc--patreon-only {
	max-width: 580px;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media ( max-width: 480px ) {
	.benecaster-calc__inputs,
	.benecaster-calc__results,
	.benecaster-calc__footer {
		padding: 1rem;
	}

	.bc-grid {
		grid-template-columns: 1fr;
	}

	.benecaster-calc__billing-toggle {
		flex-direction: column;
	}
}