/* ============================================================================
   russian-like-text-generator.css
   ============================================================================
   Loaded by:  generator-tools/russian-like-text-generator.php
   Purpose:    The large "Stylized Result" input/output panels with character
               stats overlaid at the bottom-left (echoing the source tool's
               output display), plus the enlarged Russianness slider.
   Load order: Loaded AFTER tool-input.css; overrides its base textarea rules.
   Scope:      Every selector is namespaced .rlt-* so nothing leaks out.
   ============================================================================ */

/* --- Input / output panels ------------------------------------------------ */

.rlt-field {
	position: relative;
	background-color: #f8f9fa;
	border: 2px solid #e9ecef;
	border-radius: 1rem;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.rlt-field:focus-within {
	border-color: #237a3a;
	box-shadow: 0 0 0 .2rem rgba(35, 122, 58, .12);
}

.rlt-field textarea {
	width: 100%;
	min-height: 320px;
	margin: 0;
	padding: 1.25rem 1.25rem 2.6rem;
	border: 0;
	border-radius: 1rem;
	background-color: transparent;
	box-shadow: none;
	font-size: 1.2rem;
	line-height: 1.75;
	color: #212529;
	resize: vertical;
}

.rlt-field textarea:focus {
	border: 0;
	box-shadow: none;
	outline: none;
}

.rlt-field .rlt-stats {
	position: absolute;
	bottom: .8rem;
	left: 1.25rem;
	display: flex;
	gap: .9rem;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #adb5bd;
	pointer-events: none;
}

/* --- Russianness slider --------------------------------------------------- */

.rlt-range {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 1.75rem;
	background: transparent;
	cursor: pointer;
}

.rlt-range::-webkit-slider-runnable-track {
	height: .85rem;
	border-radius: 999px;
	background: linear-gradient(90deg,
		#237a3a 0%, #237a3a var(--rlt-fill, 100%),
		#dee2e6 var(--rlt-fill, 100%), #dee2e6 100%);
}

.rlt-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	margin-top: -.4rem;
	width: 1.65rem;
	height: 1.65rem;
	border: 3px solid #237a3a;
	border-radius: 50%;
	background-color: #fff;
	box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
}

.rlt-range::-moz-range-track {
	height: .85rem;
	border-radius: 999px;
	background-color: #dee2e6;
}

.rlt-range::-moz-range-progress {
	height: .85rem;
	border-radius: 999px;
	background-color: #237a3a;
}

.rlt-range::-moz-range-thumb {
	width: 1.65rem;
	height: 1.65rem;
	border: 3px solid #237a3a;
	border-radius: 50%;
	background-color: #fff;
	box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
}

.rlt-range:focus {
	outline: none;
}

.rlt-range:focus::-webkit-slider-thumb {
	box-shadow: 0 0 0 .25rem rgba(35, 122, 58, .25);
}

.rlt-range:focus::-moz-range-thumb {
	box-shadow: 0 0 0 .25rem rgba(35, 122, 58, .25);
}