/* ==========================================================================
   TBB Lab Calculators — Discrete Growth Calculator Stylesheet
   Calculator-specific styles only. Common styles in tbb-calculators-common.css
   ========================================================================== */

/* ── Calculation-type select ─────────────────────────────────────────────── */
.tbb-growth-discrete-calculator .tbb-gd-select {
	display:             block;
	width:               100% !important;
	max-width:           100% !important;
	min-width:           0;
	box-sizing:          border-box;
	padding:             .875rem 2.5rem .875rem 1.1rem;
	font-size:           1.3rem;
	line-height:         1.6;
	min-height:          52px;
	color:               var(--tbb-text);
	background:          var(--tbb-bg);
	border:              1.5px solid var(--tbb-border);
	border-radius:       var(--tbb-radius-sm);
	transition:          border-color var(--tbb-transition), box-shadow var(--tbb-transition);
	font-family:         var(--tbb-font);
	background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat:   no-repeat;
	background-position: right 1rem center;
	-webkit-appearance:  none;
	-moz-appearance:     none;
	appearance:          none;
	cursor:              pointer;
}

.tbb-growth-discrete-calculator .tbb-gd-select:focus {
	outline:      none;
	border-color: var(--tbb-primary);
	box-shadow:   0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* ── Number inputs ───────────────────────────────────────────────────────── */
.tbb-growth-discrete-calculator .tbb-gd-input {
	display:       block;
	width:         100% !important;
	max-width:     100% !important;
	min-width:     0;
	box-sizing:    border-box;
	padding:       .875rem 1.1rem;
	font-size:     1.3rem;
	line-height:   1.6;
	min-height:    52px;
	color:         var(--tbb-text);
	background:    var(--tbb-bg);
	border:        1.5px solid var(--tbb-border);
	border-radius: var(--tbb-radius-sm);
	transition:    border-color var(--tbb-transition), box-shadow var(--tbb-transition);
	font-family:   var(--tbb-font);
	-webkit-appearance: none;
	-moz-appearance:    textfield;
}

.tbb-growth-discrete-calculator .tbb-gd-input:focus {
	outline:      none;
	border-color: var(--tbb-primary);
	box-shadow:   0 0 0 3px rgba(37, 99, 235, 0.15);
}

.tbb-growth-discrete-calculator .tbb-gd-input::-webkit-inner-spin-button,
.tbb-growth-discrete-calculator .tbb-gd-input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ── Result card ─────────────────────────────────────────────────────────── */
.tbb-gd-results {
	display:        flex;
	flex-direction: column;
	gap:            1.25rem;
}

.tbb-gd-result-card {
	background:    linear-gradient(135deg, var(--tbb-primary-light) 0%, #e0edff 100%);
	border:        1.5px solid #bfdbfe;
	border-radius: var(--tbb-radius);
	padding:       1.5rem 2rem;
	text-align:    center;
}

.tbb-gd-result-label {
	font-size:      1.2rem;
	font-weight:    600;
	color:          var(--tbb-primary);
	text-transform: uppercase;
	letter-spacing: .06em;
	margin-bottom:  .5rem;
}

.tbb-gd-result-value-row {
	display:     inline-flex;
	align-items: baseline;
	gap:         .4rem;
}

.tbb-gd-result-value {
	font-size:   2.25rem;
	font-weight: 700;
	color:       var(--tbb-text);
	line-height: 1.2;
}

.tbb-gd-result-unit {
	font-size:   1.3rem;
	font-weight: 500;
	color:       var(--tbb-text-muted);
}

/* ── Step-by-step breakdown ──────────────────────────────────────────────── */
.tbb-gd-steps {
	background:    var(--tbb-bg-subtle);
	border:        1px solid var(--tbb-border);
	border-radius: var(--tbb-radius-sm);
	padding:       1.25rem 1.5rem;
	font-size:     1.3rem;
	line-height:   1.7;
	color:         var(--tbb-text);
}

.tbb-gd-steps p {
	margin: 0 0 .5rem;
}

.tbb-gd-steps p:last-child {
	margin-bottom: 0;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media ( max-width: 600px ) {
	.tbb-gd-result-value {
		font-size: 1.75rem;
	}

	.tbb-calc-actions {
		flex-direction: column;
	}

	.tbb-calc-actions .tbb-btn {
		width: 100%;
		justify-content: center;
	}
}