/*
 * Castos Comparison Calculator
 * Companion to assets/js/castos-calculator.js
 */

/* ── Custom properties ──────────────────────────────────────────── */
.benecaster-castos-calc {
	--bcc-font:       system-ui, -apple-system, sans-serif;
	--bcc-radius:     6px;
	--bcc-blue:       #2563eb;
	--bcc-green:      #16a34a;
	--bcc-orange:     #ea580c;
	--bcc-muted:      #6b7280;
	--bcc-border:     #e5e7eb;
	--bcc-bg:         #f9fafb;
	--bcc-highlight:  #eff6ff;
	--bcc-text:       #111827;

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

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

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

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

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

.benecaster-castos-calc__unit {
	color:     var(--bcc-muted);
	font-size: .85rem;
}

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

.benecaster-castos-calc__slider {
	flex:         1;
	cursor:       pointer;
	accent-color: var(--bcc-blue);
}

.benecaster-castos-calc__number {
	width:         5rem;
	padding:       .3rem .5rem;
	border:        1px solid var(--bcc-border);
	border-radius: var(--bcc-radius);
	font-size:     .9rem;
}

/* Contact-us message (shown at 500+) */
.benecaster-castos-calc__contact-us {
	font-size: .85rem;
	color:     var(--bcc-muted);
	margin:    .25rem 0 0;
}

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

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

.benecaster-castos-calc__hosting {
	margin:       0;
	accent-color: var(--bcc-blue);
}

/* ── Results section ────────────────────────────────────────────── */
.benecaster-castos-calc__results {
	padding:       1.5rem;
	border:        1px solid var(--bcc-border);
	border-radius: var(--bcc-radius);
	margin-bottom: 1rem;
}

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

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

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

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

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

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

.bcc-col__breakdown {
	font-size:  .75rem;
	color:      var(--bcc-muted);
	line-height: 1.5;
	margin-top: auto;
	padding-top: .35rem;
	border-top: 1px solid var(--bcc-border);
}

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

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

.bcc-message--info {
	background: #f0f9ff;
	color:      #0369a1;
	border:     1px solid #bae6fd;
}

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

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

/* Fallback note */
.bcc-fallback-note {
	font-size:  .8rem;
	color:      var(--bcc-muted);
	margin-top: .75rem;
}

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

/* ── Footer section ─────────────────────────────────────────────── */
.benecaster-castos-calc__footer {
	display:     flex;
	align-items: center;
	flex-wrap:   wrap;
	gap:         1rem;
}

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

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

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

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

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

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

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

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

/* ── Variant: condensed ─────────────────────────────────────────── */
.benecaster-castos-calc--condensed {
	max-width: 560px;
}

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

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