@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-pro-b {
			position: relative;
			z-index: 2;
			text-align: center;
		}
	}

	.lookup-result {
		display: none;
		padding-top: 7rem;
		padding-bottom: 8rem;
		.home-section-shell();

		.result-title {
			color: @color-ink;
			font-size: @form-result-title-desktop;
			line-height: 1.25;
			font-weight: bold;
			text-align: center;
			padding-bottom: 0;
		}

		.font-content {
			color: @color-ink-muted;
			font-size: @form-body-desktop;
			line-height: 1.65;
			text-align: center;
			margin-top: 0;
		}
	}

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

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

		.lookup-card {
			width: 100%;
			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;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.input-label {
				color: @color-ink;
				font-size: @form-label-desktop;
				line-height: 1.5;
				margin-bottom: 0.6rem;
				margin-top: 2rem;
				padding-left: 0;

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

			.input-label-sup {
				padding-left: 0;
				color: @color-ink-muted;
				font-size: @form-helper-desktop;
			}

			.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();
			}

			.desc-textarea {
				width: 100%;
				height: 16rem;
				border-radius: 1.2rem;
				font-size: @form-input-desktop;
				line-height: 1.55;
				padding: 1.6rem 2.4rem;
				box-sizing: border-box;
				resize: vertical;
				.form-page-field();
			}
		}

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

#tip-popup {
	display: none;
	position: fixed;
	z-index: 9;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.52);

	#example-popup-img {
		width: 100%;
	}

	.popup-content {
		padding: 2rem;
		background-color: #fff;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 1.4rem;
		width: 96vw;
		max-width: 80rem;
		box-sizing: border-box;

		.popup-title {
			font-size: 2.8rem;
			padding-bottom: 2rem;
			padding-left: 2rem;
			padding-right: 2rem;
		}

		.popup-main {
			padding: 2rem;
			font-size: 2rem;
			min-width: 50rem;
			min-height: 10rem;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.popup-close {
			margin-top: 2rem;
			cursor: pointer;
			width: 16.4rem;
			height: 4.4rem;
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
			border: 1px solid #1f94d2;
			outline: none;
			border-radius: 100px;
			color: #1f94d2;
			font-size: 1.6rem;
		}

		.close-wrapper {
			width: 3rem;
			height: 3rem;
			right: -5rem;
			top: 0;
			border: 1px solid #fff;
			border-radius: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			opacity: 0.5;

			.close-img {
				width: 1rem;
				height: 1rem;
			}
		}
	}
}

@media screen and (max-width: @bp-mobile) {
            width: 80rem;
        }

@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 {
                width: 100%;
                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;
                }
                .input-label-sup{
                    color: #ccc;
                    font-size: 1.2rem;
                    
                }
                .lookup-input {
                    width: 34.8rem;
                    height: 5.6rem;
                    font-size: 1.4rem;
                    line-height: 1.6rem;
                }
                .desc-textarea {
                    font-size: 1.4rem;
                    width: 34.8rem;
                    height: 10rem;
                }
                .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 {
            width: 100%;
            padding-top: 7rem;
            padding-bottom: 8rem;
            .result-title{
                
                font-size: 2.4rem;
                padding-top:0rem;
                padding-bottom:0rem;
            }
            .font-content{
                font-size: 1.8rem;
                padding-left: 3rem;
                padding-right: 3rem;
            }
            
        }
    }

    #tip-popup {
        display: none;
        position: fixed;
        z-index: 9;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,0.52);
        #example-popup-img {
            width: 100%;
        }
        .popup-content {
            .popup-title{
                font-size: 2.8rem;
                // border-bottom:1px solid #1f94d2;

                padding-bottom: 2rem;
                padding-left: 2rem;
                padding-right: 2rem;
            }
            .popup-main{
                padding: 2rem;
                font-size: 1.2rem;
                min-width: 30rem;
                min-height: 10rem;

                display: flex;
                justify-content: center;
                align-items: center;
            }
            .popup-close{
                margin-top: 2rem;
                cursor: pointer;
                width: 14.4rem;
                height: 3.4rem;
                display: flex;
                justify-content: center;
                align-items: center;
                text-align: center;
                border: 1px solid #1f94d2;
                outline: none;
                border-radius: 100px;
                color: #1f94d2;
                font-size: 1.6rem;
            }
            .close-wrapper {
                width: 3rem;
                height: 3rem;
                right: -5rem;
                top: 0;
                border: 1px solid #fff;
                border-radius: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                opacity: 0.5;
                .close-img {
                    width: 1rem;
                    height: 1rem;
                }
            }
            padding-top: 2rem;
            padding-bottom: 2rem;
            background-color: #fff;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            border-radius: 1.4rem;
            @media screen and (max-width: @bp-mobile) {
                width: 80rem;
            }
        }
    }
}

@media screen and (max-width: @bp-mobile) {
                width: 80rem;
            }

@import "feedback-page.less";