/* =========================================================
   ENGINEERING CALCULATOR
   Specific styles only for calculators/engineering-inzhenerny.tpl
   ========================================================= */

.homepage-calculator--engineering,
.homepage-calculator--engineering *,
.homepage-calculator--engineering *::before,
.homepage-calculator--engineering *::after {
	box-sizing: border-box;
}

.homepage-calculator--engineering {
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
	padding: 22px;
	border-radius: 18px;
	background: #ffffff;
	border: 1px solid #e1e5ee;
	box-shadow: 0 12px 34px rgba(0, 0, 0, 0.05);
}

.homepage-calculator--engineering .calculator-form {
	width: 100%;
	margin: 0;
	padding: 0;
}

.calculator-toolbar {
	display: flex;
	justify-content: flex-start;
	margin-bottom: 12px;
}

.calculator-mode-switch {
	display: inline-flex;
	gap: 8px;
}

.calculator-mode-button {
	height: 36px;
	padding: 0 14px;
	border: 1px solid #e1e5ee;
	border-radius: 8px;
	background: #ffffff;
	color: #555;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.calculator-mode-button:hover {
	background: #f4f6f7;
	border-color: #d7dbdf;
}

.calculator-mode-button:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 72, 91, .14);
}

.calculator-mode-button.is-active {
	background: #ff485b;
	border-color: #ff485b;
	color: #ffffff;
}

.homepage-calculator--engineering .calculator-display-wrap {
	position: relative;
	width: 100%;
	margin: 0 0 14px 0;
	padding: 0;
	overflow: hidden;
}

.homepage-calculator--engineering .calculator-memory-indicator {
	position: absolute;
	top: 50%;
	left: 16px;
	transform: translateY(-50%);
	font-size: 12px;
	font-weight: 900;
	color: #ff485b;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .2s ease, visibility .2s ease;
}

.homepage-calculator--engineering .calculator-memory-indicator.is-visible {
	opacity: 1;
	visibility: visible;
}

.homepage-calculator--engineering .calculator-display {
	display: block;
	width: 100% !important;
	max-width: 100%;
	height: 68px;
	margin: 0;
	padding: 8px 16px 8px 42px;
	border: 1px solid #e2e5e8;
	border-radius: 12px;
	background: #f9fafb;
	color: #2f3438;
	font-family: inherit;
	font-size: 30px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .02em;
	text-align: right;
	box-sizing: border-box;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .04);
}

.engineering-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 10px;
}

.homepage-calculator--engineering .calculator-key {
	min-height: 48px;
	height: 48px;
	padding: 0 8px;
	border: 1px solid #e2e5e8;
	border-radius: 10px;
	background: #ffffff;
	color: #404549;
	font-family: inherit;
	font-size: 14px;
	font-weight: 800;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .08s ease;
}

.homepage-calculator--engineering .calculator-key:hover {
	background: #f4f6f7;
	border-color: #d7dbdf;
}

.homepage-calculator--engineering .calculator-key:active {
	transform: translateY(1px);
}

.homepage-calculator--engineering .calculator-key:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 72, 91, .14);
}

.homepage-calculator--engineering .calculator-key--memory,
.homepage-calculator--engineering .calculator-key--function {
	background: #f4f6f7;
	border-color: #e2e5e8;
	color: #6b737a;
}

.homepage-calculator--engineering .calculator-key--memory:hover,
.homepage-calculator--engineering .calculator-key--function:hover {
	background: #404549;
	border-color: #404549;
	color: #ffffff;
}

.homepage-calculator--engineering .calculator-key--operator {
	background: #404549;
	border-color: #404549;
	color: #ffffff;
}

.homepage-calculator--engineering .calculator-key--operator:hover {
	background: #2f3438;
	border-color: #2f3438;
	color: #ffffff;
}

.homepage-calculator--engineering .calculator-key--equal {
	background: #ff485b;
	border-color: #ff485b;
	color: #ffffff;
}

.homepage-calculator--engineering .calculator-key--equal:hover {
	background: #e93d50;
	border-color: #e93d50;
	color: #ffffff;
}

.homepage-calculator--engineering .calculator-key--danger {
	background: #fff0f2;
	border-color: rgba(255, 72, 91, .25);
	color: #ff485b;
}

.homepage-calculator--engineering .calculator-key--danger:hover {
	background: #ff485b;
	border-color: #ff485b;
	color: #ffffff;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media only screen and (max-width: 767px) {
	.homepage-calculator--engineering {
		max-width: 100%;
		padding: 16px;
		border-radius: 14px;
	}

	.homepage-calculator--engineering .calculator-display {
		height: 60px;
		font-size: 24px;
		border-radius: 10px;
	}

	.engineering-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-template-areas:
			"abs x2 sqrt e"
			"percent lpar rpar mplus"
			"xpow yroot ln lg"
			"logy mr mc back"
			"ctg atg acos asin"
			"pi tg cos sin"
			"seven eight nine divide"
			"four five six multiply"
			"one two three minus"
			"zero doublezero dot plus"
			"clear clear equals equals";
		gap: 8px;
	}

	.homepage-calculator--engineering .calculator-key {
		min-height: 44px;
		height: 44px;
		border-radius: 9px;
		font-size: 13px;
		padding: 0 6px;
	}

	.eng-cell--abs { grid-area: abs; }
	.eng-cell--x2 { grid-area: x2; }
	.eng-cell--sqrt { grid-area: sqrt; }
	.eng-cell--e { grid-area: e; }

	.eng-cell--percent { grid-area: percent; }
	.eng-cell--lpar { grid-area: lpar; }
	.eng-cell--rpar { grid-area: rpar; }
	.eng-cell--mplus { grid-area: mplus; }

	.eng-cell--xpow { grid-area: xpow; }
	.eng-cell--yroot { grid-area: yroot; }
	.eng-cell--ln { grid-area: ln; }
	.eng-cell--lg { grid-area: lg; }

	.eng-cell--logy { grid-area: logy; }
	.eng-cell--mr { grid-area: mr; }
	.eng-cell--mc { grid-area: mc; }
	.eng-cell--back { grid-area: back; }

	.eng-cell--ctg { grid-area: ctg; }
	.eng-cell--atg { grid-area: atg; }
	.eng-cell--acos { grid-area: acos; }
	.eng-cell--asin { grid-area: asin; }

	.eng-cell--pi { grid-area: pi; }
	.eng-cell--tg { grid-area: tg; }
	.eng-cell--cos { grid-area: cos; }
	.eng-cell--sin { grid-area: sin; }

	.eng-cell--seven { grid-area: seven; }
	.eng-cell--eight { grid-area: eight; }
	.eng-cell--nine { grid-area: nine; }
	.eng-cell--divide { grid-area: divide; }

	.eng-cell--four { grid-area: four; }
	.eng-cell--five { grid-area: five; }
	.eng-cell--six { grid-area: six; }
	.eng-cell--multiply { grid-area: multiply; }

	.eng-cell--one { grid-area: one; }
	.eng-cell--two { grid-area: two; }
	.eng-cell--three { grid-area: three; }
	.eng-cell--minus { grid-area: minus; }

	.eng-cell--zero { grid-area: zero; }
	.eng-cell--doublezero { grid-area: doublezero; }
	.eng-cell--dot { grid-area: dot; }
	.eng-cell--plus { grid-area: plus; }

	.eng-cell--clear { grid-area: clear; }
	.eng-cell--equals { grid-area: equals; }
}

@media only screen and (max-width: 420px) {
	.homepage-calculator--engineering {
		padding: 12px;
	}

	.homepage-calculator--engineering .calculator-display {
		height: 56px;
		font-size: 21px;
	}

	.homepage-calculator--engineering .calculator-key {
		min-height: 42px;
		height: 42px;
		font-size: 12px;
		padding: 0 5px;
	}

	.calculator-mode-button {
		height: 34px;
		font-size: 12px;
		padding: 0 12px;
	}
}