.calculator-form {
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 4px 16px rgba(36, 82, 204, 0.08);
	padding: 32px 40px;
	max-width: 900px;
	width: 100%;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	margin-bottom: 40px;
}
.form-title {
	color: #1A47A9!important; 
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0 0 24px 0;
}
.form-field {
	margin-bottom: 16px;
	width: auto;
}
.field-label {
	font-size: .9rem;
	color: #333;
	font-weight: 400;
	margin-bottom: 8px;
	display: block;
}
.form-row-double {
	display: flex;
	gap: 40px;
	margin-bottom: 16px;
}
.form-row-double .form-field {
	/* flex: 1; */
	margin-bottom: 0;
}
.switch-group {
	display: flex;
	gap: 0;
	flex-wrap: nowrap;
}
.switch-btn {
	padding: 11px 16px;
	border: 1px solid #A1A4B1;
	background: #F3F5F7;
	color: #80869B;
	font-size: 1rem;
	cursor: pointer;
	transition: all 0.15s ease;
	white-space: nowrap;
	font-weight: 400;
}
.switch-btn:first-child {
	border-radius: 4px 0 0 4px;
}
.switch-btn:last-child {
	border-radius: 0 4px 4px 0;
}
.switch-btn:only-child {
	border-radius: 4px;
}
.switch-btn:not(:first-child) {
	border-left: none;
}
.switch-btn:hover {
	background: #f3f4f6;
}
.switch-btn.active {
	background: #1A47A9;
	color: #FFFFFF;
	border-color: #1A47A9;
}
.switch-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
/* Секция периода */
.period-section {
	margin-top: 32px;
	margin-bottom: 24px;
	display: flex;
	flex-wrap: wrap;
	gap:30px;
}
.period-title {
	/* color: #1A47A9;
	font-size: 1.25rem;
	font-weight: 600; */
	font-size: .9rem;
	color: #333;
	font-weight: 400;
	margin-bottom: 16px;
	flex: 1 0 100%;
	width: 100%;
}
.period-grid {
	display: flex;
	gap: 24px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}
.period-item {
	display: flex;
	flex-direction: column;
}
.period-label {
	font-size: 0.9rem;
	color: #333;
	margin-bottom: 6px;
	font-weight: 400;
}
.input-wrapper {
	display: flex;
	align-items: center;
	position: relative;
}
.period-input {
	width: 80px;
	height: 46px;
	border: 1px solid #A1A4B1;
	border-radius: 4px 0 0 4px;
	padding: 0 8px;
	font-size: 1.2rem;
	text-align: left;
	background: white;
}
.period-input:focus {
	outline: none;
	border-color: #1A47A9;
}
.period-input[readonly] {
	background: #f6f8fa;
	color: #656d76;
}
.sum-input {
	background: #f6f8fa;
	color: #1A47A9; 
	border: none;
}
.arrows {
	display: flex;
	flex-direction: column;
}
.arrow-btn {
	width: 24px;
	height: 23px;
	border: 1px solid #A1A4B1;
	background: #FFFFFF;
	font-size: 0.6rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #1A47A9;
	padding: 0;
	margin: 0;
}
.arrow-up {
	border-radius: 0 4px 0 0;
	border-bottom: none;
}
.arrow-down {
	border-radius: 0 0 4px 0;
	border-top: none;
}
.arrow-btn:hover {
	background: #f8f9fa;
}
.arrow-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.unit {
	margin-left: 8px;
	font-size: 0.9rem;
	color: #656d76;
}
.sum-row {
	/* margin-top: 16px; */
}
.sum-row .period-label {
	margin-bottom: 6px;
	display: block;
}
.sum-row .period-input {
	border-radius: 4px;
	width: 100px;
}
/* Кнопка */
.button-row {
	padding-top: 24px;
	border-top: 1px solid #E7EAEF;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}
.calc-btn {
	background: #FF7819;
	color: white;
	border: none;
	border-radius: 4px;
	padding: 12px 24px;
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s ease;
}
.calc-btn:hover {
	background: #EC5907;
}
.calc-btn.disabled,
.calc-btn:disabled {
	cursor: pointer;
	opacity: 0.5;
}
.electricity-result {
	margin-top: 20px;
}
.result-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 16px;
	font-size: 0.9rem;
	background: white;
	border-left: none !important; 
	border-right: none !important; 
	border-top: none !important; 
	border-bottom: 2px solid #f3f4f6 !important; 
}
.result-table tr:first-child>th{
	text-align: left;
}
.result-table th,
.result-table td {
	border-left: none; 
	border-right: none; 
	border-top: 1px solid #f3f4f6; 
	border-bottom: 1px solid #f3f4f6; 
	padding: 8px;
	text-align: center;
	background: white;
}
.result-table th:first-child,
.result-table td:first-child {
	border-left: none;
	color: #80869B;
	text-align: left;
}
.result-table th:last-child,
.result-table td:last-child {
	border-right: none;
}
.result-table thead tr:first-child th {
	border-top: none;
}
.result-table tbody tr:last-child td {
	border-bottom: 2px solid #f3f4f6;
}
.result-table th {
	font-weight: 400;
	color: #80869B;
	font-size: 0.8rem;
}
.result-table .footer-row {
	font-weight: 600;
}
.result-table .footer-row td {
	background: white;
}
.total-cost {
	font-size: 1.1rem;
	font-weight: 600;
	/* color: #1A47A9; */
	color: #333;
	margin-top: 16px;
	text-align: center;
}
@media (max-width: 768px) {
	.calculator-form {
		padding: 20px 16px;
		margin: 0px;
		border-radius: 4px;
	}
	
	.form-title {
		font-size: 1.1rem;
		margin-bottom: 20px;
	}
	
	.form-field {
		margin-bottom: 20px;
	}
	
	.form-row-double {
		flex-direction: column;
		gap: 0;
	}
	
	.form-row-double .form-field {
		margin-bottom: 16px;
	}
	
	.form-row-double .form-field:last-child {
		margin-bottom: 0;
	}
	
	.field-label {
		font-size: 1rem;
	}
	
	.form-field__adaptive .switch-group {
		flex-direction: column;
	}
	
	.form-field__adaptive .switch-btn {
		border-radius: 0 !important;
		border-bottom: none;
	}
	
	.form-field__adaptive .switch-btn:first-child {
		border-radius: 4px 4px 0 0 !important;
	}
	
	.form-field__adaptive .switch-btn:last-child {
		border-radius: 0 0 4px 4px !important;
		border-bottom: 1px solid #A1A4B1;
	}
	
	.form-field__adaptive .switch-btn:only-child {
		border-radius: 4px !important;
		border-bottom: 1px solid #A1A4B1;
	}
	
	.form-field__adaptive .switch-btn:not(:first-child) {
		border-left: 1px solid #A1A4B1;
	}
	
	.period-grid {
		flex-direction: column;
		gap: 16px;
	}
	
	.period-section {
		margin-top: 24px;
		
	}
	
	.period-title {
		font-size: 1.1rem;
		
	}
	
	.result-table {
		font-size: 0.8rem;
	}
	
	.result-table th,
	.result-table td {
		padding: 8px;
	}
	
	.result-table th {
		font-size: 0.7rem;
	}
}
@media (max-width: 768px) {
	.table-responsive-wrapper {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		margin: 0 -16px; /* растягиваем на всю ширину экрана */
		padding: 0 16px;
		box-shadow: inset -10px 0 10px -10px rgba(0,0,0,0.1);
	}
	
	.result-table {
		min-width: 700px; 
		width: auto;
		white-space: nowrap;
	}
	
	.result-table th,
	.result-table td {
		min-width: 60px;
		font-size: 0.75rem;
		padding: 6px 4px;
	}
	
	.result-table th:first-child,
	.result-table td:first-child {
		min-width: 80px;
		
	}
	
	.result-table th {
		font-size: 0.7rem;
		background: white;
		position: sticky;
		top: 0;
		z-index: 1;
	}
	
	.table-responsive-wrapper::after {
		content: '→';
		position: absolute;
		right: 16px;
		top: 50%;
		transform: translateY(-50%);
		background: rgba(26, 71, 169, 0.8);
		color: white;
		padding: 4px 8px;
		border-radius: 4px;
		font-size: 12px;
		pointer-events: none;
		opacity: 0.7;
		animation: fadeInOut 2s infinite;
	}
	
	@keyframes fadeInOut {
		0%, 100% { opacity: 0.3; }
		50% { opacity: 0.8; }
	}
}
@media (max-width: 768px) {
	.table-responsive-wrapper::-webkit-scrollbar {
		height: 6px;
	}
	
	.table-responsive-wrapper::-webkit-scrollbar-track {
		background: #f1f1f1;
		border-radius: 3px;
	}
	
	.table-responsive-wrapper::-webkit-scrollbar-thumb {
		background: #1A47A9;
		border-radius: 3px;
	}
	
	.table-responsive-wrapper::-webkit-scrollbar-thumb:hover {
		background: #164190;
	}
}