/* =========================================================
   TV REPAIR BANNER
   Rubine Lite Child Theme

   Зеленый текст
   Белая подсветка
   Большая зеленая кнопка
   Рамка вокруг композиции
   ========================================================= */


/* =========================================================
   ОСНОВНОЙ БАННЕР
   ========================================================= */

.tv-repair-banner {
	position: relative;

	width: 100%;
	margin: 0 0 30px;

	padding: 0;

	box-sizing: border-box;

	background: transparent;
}


/* =========================================================
   BOX-SIZING
   ========================================================= */

.tv-repair-banner *,
.tv-repair-banner *::before,
.tv-repair-banner *::after {
	box-sizing: border-box;
}


/* =========================================================
   ОСНОВНАЯ КОМПОЗИЦИЯ
   РАМКА И ЖЕЛТЫЙ ФОН ТОЛЬКО ЗДЕСЬ
   ========================================================= */

.tv-repair-content {
	position: relative;
	z-index: 2;

	display: flex;

	align-items: center;
	justify-content: space-between;

	gap: clamp(20px, 4vw, 55px);

	width: 100%;
	max-width: 1340px;

	margin: 0 auto;

	padding: clamp(22px, 3.5vw, 36px);

	border: 4px solid #0b8f3d;
	border-radius: 12px;

	background: linear-gradient(
		135deg,
		#fffed3 0%,
		#fff5ae 100%
	);

	box-shadow:
		0 7px 20px rgba(0, 0, 0, 0.14);
}


/* =========================================================
   ТЕКСТОВЫЙ БЛОК
   ========================================================= */

.tv-repair-text {
	flex: 1 1 auto;

	min-width: 0;

	text-align: left;
}


/* =========================================================
   ЗАГОЛОВОК
   ========================================================= */

.tv-repair-title {
	margin: 0 0 9px;

	font-size: clamp(24px, 3.2vw, 36px);

	line-height: 1.15;

	font-weight: 800;

	color: #0b8f3d;

	text-shadow:
		0 0 2px #ffffff,
		0 0 5px #ffffff,
		0 1px 8px rgba(255, 255, 255, 0.98);
}


/* =========================================================
   ОСНОВНОЕ ОПИСАНИЕ
   ========================================================= */

.tv-repair-description {
	max-width: 800px;

	margin: 0;

	font-size: clamp(16px, 1.8vw, 21px);

	line-height: 1.42;

	font-weight: 600;

	color: #0b8f3d;

	text-shadow:
		0 0 2px #ffffff,
		0 0 5px #ffffff,
		0 1px 7px rgba(255, 255, 255, 0.98);
}


/* =========================================================
   ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ
   ========================================================= */

.tv-repair-info {
	margin-top: 10px;

	font-size: clamp(14px, 1.5vw, 17px);

	line-height: 1.35;

	font-weight: 700;

	letter-spacing: 0.2px;

	color: #0b8f3d;

	text-shadow:
		0 0 2px #ffffff,
		0 0 4px #ffffff,
		0 1px 6px rgba(255, 255, 255, 0.95);
}


.tv-repair-info span {
	opacity: 0.82;
}


/* =========================================================
   КОНТЕЙНЕР КНОПКИ
   ========================================================= */

.tv-repair-button-wrap {
	flex: 0 0 auto;
}


/* =========================================================
   КНОПКА
   ========================================================= */

.tv-repair-button {
	display: flex;

	align-items: center;
	justify-content: center;

	gap: 13px;

	min-width: clamp(215px, 23vw, 300px);

	min-height: clamp(78px, 8vw, 100px);

	padding:
		clamp(18px, 2.2vw, 25px)
		clamp(24px, 3vw, 38px);

	border: 3px solid #ffffff;

	border-radius: 14px;

	background: linear-gradient(
		135deg,
		#20b957 0%,
		#0b8f3d 100%
	);

	color: #ffffff !important;

	text-decoration: none !important;

	box-shadow:
		0 7px 18px rgba(0, 0, 0, 0.28);

	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		filter 0.2s ease;
}


/* =========================================================
   HOVER
   ========================================================= */

.tv-repair-button:hover {
	transform: translateY(-3px);

	color: #ffffff !important;

	box-shadow:
		0 10px 24px rgba(0, 0, 0, 0.34);

	filter: brightness(1.07);
}


.tv-repair-button:active {
	transform: translateY(0);
}


/* =========================================================
   ИКОНКА ТЕЛЕФОНА
   ========================================================= */

.tv-phone-icon {
	flex: 0 0 auto;

	font-size: clamp(32px, 3.5vw, 43px);

	line-height: 1;

	color: #ffffff;
}


/* =========================================================
   ТЕКСТ ВНУТРИ КНОПКИ
   ========================================================= */

.tv-button-text {
	display: flex;

	flex-direction: column;

	align-items: center;

	line-height: 1.12;

	white-space: nowrap;
}


.tv-button-text strong {
	font-size: clamp(20px, 2.3vw, 27px);

	font-weight: 800;

	color: #ffffff;
}


.tv-button-text small {
	margin-top: 5px;

	font-size: clamp(15px, 1.7vw, 20px);

	font-weight: 700;

	color: #ffffff;
}


/* =========================================================
   ПЛАНШЕТЫ
   ========================================================= */

@media (max-width: 800px) {

	.tv-repair-content {
		gap: 18px;

		padding: 22px 18px;

		border-width: 3px;
	}


	.tv-repair-title {
		font-size: clamp(21px, 4vw, 29px);
	}


	.tv-repair-description {
		font-size: clamp(15px, 2.4vw, 19px);
	}


	.tv-repair-info {
		font-size: clamp(13px, 2vw, 16px);
	}


	.tv-repair-button {
		min-width: 200px;

		min-height: 82px;

		padding: 17px 20px;

		border-radius: 13px;

		gap: 10px;
	}


	.tv-phone-icon {
		font-size: 32px;
	}


	.tv-button-text strong {
		font-size: 20px;
	}


	.tv-button-text small {
		font-size: 15px;
	}
}


/* =========================================================
   МОБИЛЬНЫЕ
   ========================================================= */

@media (max-width: 600px) {

	.tv-repair-banner {
		margin-bottom: 22px;
	}


	.tv-repair-content {
		gap: 12px;

		padding: 18px 13px;

		border-width: 2px;

		border-radius: 8px;
	}


	.tv-repair-title {
		margin-bottom: 7px;

		font-size: clamp(19px, 5.5vw, 25px);

		line-height: 1.15;
	}


	.tv-repair-description {
		font-size: clamp(14px, 3.8vw, 17px);

		line-height: 1.35;
	}


	.tv-repair-info {
		margin-top: 7px;

		font-size: clamp(12px, 3.2vw, 15px);

		line-height: 1.3;
	}


	.tv-repair-button {
		min-width: 160px;

		min-height: 76px;

		padding: 14px 12px;

		border-width: 2px;

		border-radius: 11px;

		gap: 7px;
	}


	.tv-phone-icon {
		font-size: 27px;
	}


	.tv-button-text strong {
		font-size: 18px;
	}


	.tv-button-text small {
		font-size: 14px;

		margin-top: 4px;
	}
}


/* =========================================================
   ОЧЕНЬ УЗКИЕ ТЕЛЕФОНЫ
   ========================================================= */

@media (max-width: 380px) {

	.tv-repair-content {
		gap: 8px;

		padding: 15px 9px;

		border-radius: 7px;
	}


	.tv-repair-title {
		font-size: 18px;
	}


	.tv-repair-description {
		font-size: 13px;

		line-height: 1.3;
	}


	.tv-repair-info {
		font-size: 11px;
	}


	.tv-repair-button {
		min-width: 145px;

		min-height: 70px;

		padding: 12px 9px;

		border-radius: 10px;

		gap: 6px;
	}


	.tv-phone-icon {
		font-size: 24px;
	}


	.tv-button-text strong {
		font-size: 16px;
	}


	.tv-button-text small {
		font-size: 12px;

		margin-top: 3px;
	}
}