@import "design-tokens.less";

.page-warranty {
	overflow: hidden;
	background: @home-bg;
	box-sizing: border-box;

	.hero {
		position: relative;
		width: 100%;
		min-height: 53rem;
		height: auto;
		padding-top: 0;
		padding-bottom: 3.2rem;
		box-sizing: border-box;
		color: #fff;
		font-size: @inner-hero-title-desktop;
		line-height: 1.15;
		letter-spacing: 0.04em;

		.hero-img {
			object-position: 50% 40%;
		}

		> .font-b {
			position: relative;
			z-index: 2;
			text-align: center;
		}
	}

	.content {
		.home-section-shell();
		padding: @inner-section-gap-desktop 0 6.4rem;
		box-sizing: border-box;
	}

	.grid-1 {
		width: 100%;
		background: #fff;
		padding: 5.6rem 4rem 5.6rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: @radius-home-card;
		box-shadow: @shadow-home-card;
		border: 1px solid rgba(15, 23, 42, 0.06);
		box-sizing: border-box;

		.grid-1-title {
			text-align: center;
			color: @color-brand;
			font-size: 4.6rem;
			line-height: 5.5rem;
			margin-bottom: 4.8rem;
		}

		.grid-1-desc {
			text-align: left;
			width: 100%;
			max-width: 120rem;
			color: #333;
			font-size: 2rem;
			line-height: 3.3rem;
			margin-bottom: 4rem;
			padding: 0;
			box-sizing: border-box;
		}

		.radio-label {
			color: #222;
			font-size: 2.2rem;
			line-height: 2;
			margin-top: 2.1rem;
		}

		.registration-button {
			font-weight: bold;
			width: 38.8rem;
			max-width: 100%;
			height: 5.2rem;
			display: inline-flex;
			justify-content: center;
			align-items: center;
			text-align: center;
			background: @color-brand;
			color: #fff;
			font-size: 1.8rem;
			line-height: 1.2;
			border-radius: @radius-pill;
			margin-top: 4rem;
			text-decoration: none;
			transition: background @transition-fast, box-shadow @transition-fast;

			&:hover {
				background: @color-brand-deep !important;
				box-shadow: 0 0.4rem 1.2rem rgba(31, 148, 210, 0.35);
			}
		}

		.radio-row-wrapper {
			margin-top: 3rem;

			.choice-2 {
				margin-left: 12rem;
			}

			label {
				color: #333;
				font-size: 2rem;
				line-height: 1.2;
				margin-left: 1.5rem;
			}
		}

		input[type="radio"] {
			width: 2.4rem;
			height: 2.4rem;
			border: 1px solid #CDD8E5;
			cursor: pointer;
		}
	}

	.grid-2 {
		width: 100%;
		padding-top: @inner-section-gap-desktop;
		padding-bottom: 0;

		.grid-2-title {
			text-align: center;
			color: @color-ink;
			font-size: 3.6rem;
			line-height: 1.2;
		}

		.card-row {
			padding: 8rem 3.2rem 4rem;
			width: 100%;
			min-height: 52rem;
			height: auto;
			background: #fff;
			margin-left: auto;
			margin-right: auto;
			margin-top: 4rem;
			border-radius: @radius-home-card;
			box-shadow: @shadow-home-card;
			border: 1px solid rgba(15, 23, 42, 0.06);
			box-sizing: border-box;
			// box-shadow: 0px 0px 1.7rem 0px rgba(232, 232, 232, 1);
			flex-wrap: wrap;
    		justify-content: space-around;

			.card-title {
				left: 50%;
				transform: translateX(-50%);
				top: 6rem;
				font-size: 2.2rem;
				color: #1f94d2;
			}

			.feature-grid {
				margin-left: 2.4rem;
				margin-right: 2.4rem;
			}

			.feature-img {
				width: 12rem;
				height: 9.4rem;
				margin-right: 1.5rem;
			}

			.feature-data {
				width: 23.7rem;

				.feature-title {
					color: #333;
					font-size: 2.2rem;
					line-height: 2.6rem;
					margin-bottom: 0.8rem;
				}

				.feature-desc {
					color: #333;
					font-size: 1.6rem;
					line-height: 2.1rem;
				}
			}
		}
	}

	.grid-3 {
		width: 100%;
		background: transparent;
		padding-top: @inner-section-gap-desktop;
		padding-bottom: 0;

		.grid-3-card {
			margin-left: auto;
			margin-right: auto;
			width: 100%;
			min-height: 31.8rem;
			height: auto;
			background: #fff;
			border-radius: @radius-home-card;
			box-shadow: @shadow-home-card;
			border: 1px solid rgba(15, 23, 42, 0.06);
			box-sizing: border-box;
			padding: 4rem 4.8rem;

			.card-title {
				color: #333;
				font-size: 3.2rem;
				line-height: 1.2;
				margin-bottom: 3.2rem;
			}

			.file-link {
				color: #1F94D2;
				font-size: 1.6rem;
				line-height: 2;
				.indicator {
					width: 0.8rem;
					height: 0.8rem;
					margin-top: 1.5rem;
					border-radius: 100%;
					background: #1F94D2;
					margin-right: 1.5rem;
					flex-shrink: 0;
				}
			}
		}

		.lookup-button {
			margin-left: auto;
			margin-right: auto;
			width: 100%;
			max-width: 90rem;
			height: 6.4rem;
			margin-top: 4rem;
			border-radius: @radius-pill;
			cursor: pointer;
			background: @color-brand;
			text-decoration: none;
			transition: background @transition-fast, box-shadow @transition-fast;

			&:hover {
				background: @color-brand-deep !important;
				box-shadow: 0 0.4rem 1.2rem rgba(31, 148, 210, 0.35);
			}

			.button-text-left {
				color: #fff;
				font-size: 2.2rem;
				line-height: 1.25;
				margin-right: 3rem;
			}

			.button-text-right {
				color: #fff;
				font-size: 2.4rem;
				line-height: 2.8rem;
				margin-right: 0.6rem;
			}

			.arrow-right {
				width: 1rem;
				height: 1.5rem;
				object-fit: contain;
			}
		}
	}

	.lookup-result {
		display: none;
		padding-top: 7rem;
		padding-bottom: 8rem;
		 .mt-2{
			margin-top: 4rem;
		 }

		.result-card {
			width: 120rem;
			border: 2px solid #1F94D2;
			margin-left: auto;
			margin-right: auto;
			padding-top: 8.5rem;
			padding-bottom: 7.2rem;
			padding-left: 8.5rem;
			padding-right: 8.5rem;

			.inner-border {
				border: 3px solid #1F94D2;
				width: calc(100% - 6px);
				height: calc(100% - 6px);
				left: 3px;
				top: 3px;
			}

			.logo-img {
				width: 26.3rem;
				height: 10.8rem;
				left: 47.2rem;
				top: 7.4rem;
			}

			.result-title {
				text-align: center;
				color: @color-ink;
				font-size: @form-section-title-desktop;
				line-height: 1.25;
				margin-top: 5.6rem;
				margin-bottom: 4.8rem;
				font-family: 'Gotham-pro-bold', sans-serif;
				letter-spacing: 0.02em;
			}

			.row-label {
				flex-shrink: 0;
				color: @color-ink;
				font-size: @form-label-desktop;
				line-height: 1.5;
				font-family: 'Gotham-med', sans-serif;
				padding-right: 2rem;
				// margin-top: 4.8rem;
			}

			.value-text {
				word-break: break-all;
				overflow-wrap: break-word;
				white-space: pre-wrap;
				flex: 1;
				border-bottom: 1px solid rgba(15, 23, 42, 0.1);
				color: @color-ink-muted;
				font-size: @form-body-desktop;
				line-height: 1.55;
				font-family: 'Gotham-pro-reg', sans-serif;
			}

			.value-6 {
				// bottom: 7.6rem;
				// left: 35.8rem;
				// width: 77.5rem;
			}

			.value-5 {
				// bottom: 15.5rem;
				// left: 32.2rem;
				// width: 81.3rem;
			}

			.value-4 {
				// bottom: 23rem;
				// left: 37.7rem;
				// width: 76.1rem;
			}

			.value-3 {
				// left: 33.4rem;
				// width: 80.1rem;
				// bottom: 30.7rem;
			}

			.value-2 {
				// left: 45.2rem;
				// width: 68.3rem;
				// bottom: 38.2rem;
			}

			.value-1 {
				// left: 33.4rem;
				// width: 80.4rem;
				// bottom: 46rem;
			}
		}
	}

	.lookup-form {
		padding-top: @inner-section-gap-desktop;
		padding-bottom: 6.4rem;

		.form-title {
			text-align: center;
			color: @color-ink;
			font-size: @form-page-title-desktop;
			line-height: 1.2;
			letter-spacing: 0.02em;
		}

		.lookup-card {
			width: 120rem;
			max-width: 100%;
			height: auto;
			min-height: 0;
			margin-left: auto;
			margin-right: auto;
			margin-top: @home-block-gap-desktop;
			padding: 4.8rem 6.4rem 5.6rem;
			.form-page-card();

			.submit-button {
				.form-page-primary-btn();
				width: 100%;
				height: 5.6rem;
				margin-top: 3.2rem;
				line-height: 1.2;
				text-align: center;
			}

			.input-label {
				color: @color-ink;
				font-size: @form-label-desktop;
				line-height: 1.5;
				margin-bottom: 0.6rem;
				font-family: 'Gotham-med', sans-serif;
				letter-spacing: 0.01em;

				.blue {
					color: @color-brand;
				}
			}

			.lookup-input {
				width: 100%;
				height: 5.6rem;
				border-radius: @radius-pill;
				font-size: @form-input-desktop;
				line-height: 1.4;
				padding-left: 2.4rem;
				padding-right: 2.4rem;
				box-sizing: border-box;
				.form-page-field();
			}

			.separator {
				margin-top: 2.8rem;
				margin-bottom: 2rem;

				.line-left,
				.line-right {
					flex: 1;
					max-width: none;
					width: auto;
					height: 1px;
					background: rgba(15, 23, 42, 0.1);
				}

				.line-left {
					margin-right: 1.2rem;
				}

				.line-right {
					margin-left: 1.2rem;
				}

				.separator-text {
					color: @color-brand;
					font-size: @form-caption-desktop;
					line-height: 1.2;
					font-family: 'Gotham-med', sans-serif;
					text-transform: uppercase;
					letter-spacing: 0.08em;
				}
			}
		}

		.lookup-error-message {
			width: 120rem;
			max-width: 100%;
			margin-left: auto;
			margin-right: auto;
			margin-top: 1.6rem;
			color: #e53935;
			font-size: @form-caption-desktop;
			line-height: 1.4;
		}
	}
}

@media (min-width: 991px) {
	.grid-2 {
		.card-row {
			.card-title {
				white-space: nowrap;
			}
		}
	}
}

@media screen and (max-width: @bp-mobile) {
	.page-warranty {
		.hero {
			height: 55rem;
			font-size: 3rem;
			line-height: 3.6rem;

			.hero-img {
				object-position: 50% 50%;
			}

			div {
				text-align: center;
			}
		}

		.grid-1 {
			padding-top: 5.8rem;
			padding-bottom: 5.1rem;

			.grid-1-title {
				font-size: 2.4rem;
				line-height: 1.2;
				margin-bottom: 3rem;
			}

			.grid-1-desc {
				width: 35.5rem;
				font-size: 1.4rem;
				line-height: 2.1rem;
			}

			.radio-label {
				font-size: 1.6rem;
				line-height: 1.9rem;
				margin-top: 3.5rem;
			}

			input[type="radio"] {
				width: 2.2rem;
				height: 2.2rem;
			}

			.radio-row-wrapper {
				margin-top: 3.3rem;

				.radio-row-choice {
					label {
						margin-left: 1.3rem;
						font-size: 1.4rem;
						line-height: 1.6rem;
					}
				}

				.choice-2 {
					margin-left: 6.6rem;
				}
			}

			.registration-button {
				margin-top: 3.5rem;
				width: 29.5rem;
				height: 5.4rem;
				font-size: 1.6rem;
				line-height: 1.9rem;
			}
		}

		.grid-2 {
			padding-top: 4.1rem;
			padding-bottom: 4.3rem;
			
			.grid-2-title {
				font-size: 2.4rem;
				line-height: 2.9rem;
			}

			.card-row {
				flex-direction: column;
				width: 38rem;
				height: auto;
				padding-top: 5rem;
				padding-bottom: 5rem;
				padding-left: 2.2rem;

				.card-title {
					font-size: 1.8rem;
					top: 2rem;
					width: 30rem;
				}

				.feature-grid {
					margin-left: 0;
					margin-right: 0;
					margin-top: 5.2rem;

					&:first-child {
						margin-top: 0;
					}

					.feature-img {
						width: 10rem;
						height: 7.9rem;
						margin-right: 1.5rem;
					}

					.feature-data {
						width: 23rem;

						.feature-title {
							font-size: 1.8rem;
							line-height: 2.1rem;
							margin-bottom: 0.8rem;
						}

						.feature-desc {
							font-size: 1.4rem;
							line-height: 2.1rem;
						}
					}
				}
			}
		}

		.grid-3 {
			padding-top: 5.1rem;
			padding-bottom: 6rem;

			.grid-3-card {
				width: 38rem;
				height: auto;
				padding-top: 3.1rem;
				padding-left: 1.9rem;
				padding-right: 1.9rem;
				padding-bottom: 2.5rem;

				.card-title {
					font-size: 2rem;
					line-height: 1.5;
					margin-bottom: 2.5rem;
				}

				.file-link {
					font-size: 1.4rem;
					line-height: 2.1rem;

					.indicator {
						width: 0.6rem;
						height: 0.6rem;
						margin-top: 0.7rem;
					}
				}
			}

			.lookup-card {
				width: 38rem;
				box-shadow: 0px 0px 1.7rem 0px rgba(232, 232, 232, 1);
				margin-left: auto;
				margin-right: auto;
				text-align: center;
				height: auto;
				background: #fff;
				margin-top: 4.5rem;
				padding-top: 2.7rem;
				padding-bottom: 2.7rem;

				.lookup-card-title {
					color: #333;
					font-size: 2rem;
					text-align: center;
					line-height: 1.5;
				}
			}

			.lookup-button {
				width: 29.5rem;
				height: 5.4rem;
				margin-top: 2rem;

				.button-text-right {
					font-size: 1.6rem;
					line-height: 1.9rem;
					margin-right: 0.6rem;
				}

				.arrow-right {
					width: 0.8rem;
					height: 1.3rem;
				}
			}
		}

		.lookup-form {
			padding-top: 4.8rem;
			padding-bottom: 4rem;

			.form-title {
				font-size: 2.4rem;
				line-height: 2.9rem;
			}

			.lookup-card {
				width: 38rem;
				height: auto;
				margin-top: 3.4rem;
				padding-top: 3.5rem;
				padding-left: 1.8rem;
				padding-right: 1.4rem;
				padding-bottom: 3.5rem;

				.input-label {
					font-size: 1.4rem;
					line-height: 1.6rem;
					margin-bottom: 1rem;
				}

				.lookup-input {
					width: 34.8rem;
					height: 5.6rem;
					font-size: 1.4rem;
					line-height: 1.6rem;
				}

				.separator {
					margin-top: 3rem;
					margin-bottom: 3rem;

					.line-left {
						width: 14rem;
						margin-right: 1.6rem;
					}

					.line-right {
						width: 14rem;
						margin-left: 2.2rem;
					}

					.separator-text {
						font-size: 1.4rem;
						line-height: 1.6rem;
					}
				}

				.submit-button {
					width: 34.8rem;
					height: 5.4rem;
					margin-top: 3.8rem;
					font-size: 1.6rem;
					line-height: 1.9rem;
				}
			}

			.lookup-error-message {
				width: 38rem;
				margin-top: 1.6rem;
				font-size: 1.4rem;
				line-height: 1.5;
			}
		}

		.lookup-result {
			padding-top: 5.2rem;
			padding-bottom: 4rem;

			.result-card {
				border: 1px solid #1F94D2;
				width: 37.1rem;
				padding-top: 10rem;
				padding-left: 2rem;
				padding-right: 2rem;
				padding-bottom: 4.3rem;

				.inner-border {
					border: 1px solid #1F94D2;
					width: calc(100% - 4px);
					height: calc(100% - 4px);
					left: 2px;
					top: 2px;
				}

				.logo-img {
					width: 10rem;
					height: 4.2rem;
					left: 13.7rem;
					top: 3.2rem;
				}

				.result-title {
					font-size: 1.6rem;
					line-height: 1.8rem;
					margin-bottom: 3.2rem;
				}

				.row-label {
					font-size: 1.2rem;
					line-height: 1.5rem;
					// margin-top: 3.2rem;
				}

				.value-text {
					font-size: 1.2rem;
					line-height: 1.4;
				}

				.value-6 {
					// width: 22rem;
					// bottom: 4rem;
					// left: unset;
					// right: 1.6rem;
				}

				.value-5 {
					// width: 21.5rem;
					// bottom: 8.6rem;
					// left: unset;
					// right: 1.6rem;
				}

				.value-4 {
					// width: 20rem;
					// bottom: 13.4rem;
					// left: unset;
					// right: 1.6rem;
				}

				.value-3 {
					// width: 21.4rem;
					// bottom: 18rem;
					// left: unset;
					// right: 1.6rem;
				}

				.value-2 {
					// width: 15rem;
					// bottom: 22.7rem;
					// left: unset;
					// right: 1.6rem;
				}

				.value-1 {
					// width: 22rem;
					// bottom: 27.5rem;
					// left: unset;
					// right: 1.6rem;
				}
			}
		}
	}
}

@import "warranty-page.less";