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

/* ── Select & input fields ──────────────────────────────────────────────── */
.tbb-hemocytometer-calculator .tbb-hemo-select,
.tbb-hemocytometer-calculator .tbb-hemo-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-hemocytometer-calculator .tbb-hemo-select {
	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;
	padding-right:       2.5rem;
	cursor:              pointer;
	-webkit-appearance:  none;
	-moz-appearance:     none;
	appearance:          none;
}

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

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

.tbb-hemo-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-hemo-result-label {
	font-size:     1.2rem;
	font-weight:   600;
	color:         var(--tbb-primary);
	text-transform: uppercase;
	letter-spacing: .06em;
	margin-bottom:  .5rem;
}

.tbb-hemo-result-value {
	font-size:   2rem;
	font-weight: 700;
	color:       var(--tbb-text);
	line-height: 1.3;
	word-break:  break-word;
}

/* ── Step-by-step breakdown ─────────────────────────────────────────────── */
.tbb-hemo-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-hemo-steps p {
	margin: 0 0 .5rem;
}

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

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