/**
 * 1. Section Banner
 * 2. Test Theme List
 * 3. Test Page
 * 
 * Last: Media Content
 * */

/* 1. Section Banner */

#skin-test-banner{
	height: 500px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	text-align: center;
	margin-bottom: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
}
#skin-test-banner .col-lg-12{
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}
#skin-test-banner h2{
	color: var(--color-b-0);
	margin-bottom: 10px;
}
#skin-test-banner .woocommerce-breadcrumb,
#skin-test-banner .woocommerce-breadcrumb a{
	color: var(--color-b-0);
	font-size: 16px;
	line-height: 150%;
}
.skin-test-info__left{
	max-width: 500px;
}
.skin-test-info__left h3{
	margin-bottom: 30px;
	color: #18181A;
}
.skin-test-info__left p{
	margin-bottom: 30px;
}
.skin-test-info__left{
	margin-bottom: 40px;
}
#skin-test-info{
	padding: 0;
}

/* 2. Test Theme List */

.skin-test-info__li__content h5{
	margin-bottom: 10px;
}
.skin-test-info__li{
	display: flex;
}
.skin-test-info__li__content p{
	font-size: 14px;
	line-height: 150%;
}
.skin-test-info__li__content{
	padding-bottom: 40px;
	padding-left: 30px;
}
.skin-test-info__li__number{
	font-size: 20px;
	line-height: 140%;
	height: 50px;
	width: 50px;
	min-width: 50px;
	border-radius: 100%;
	border: 1px solid #E9E9EE;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-b-0);
}
.skin-test-info__li{
	position: relative;
}
.skin-test-info__li:before{
	content: '';
	width: 1px;
	background: #E9E9EE;
	height: calc(100% - 50px);
	margin-left: 25px;
	position: absolute;
	top: 50px;
	left: 0;
	bottom: 0;
}
.skin-test-info__right .skin-test-info__li:last-child:before{
	display: none;
}

/* 3. Test Page */

#question-map{
	display: none;
	padding: 0;
	margin-bottom: 0px;
}
#question-map .col-lg-12{
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 830px;
    margin-left: auto;
    margin-right: auto;
}
.question-map__item{
	font-size: 20px;
	line-height: 140%;
	height: 50px;
	width: 50px;
	min-width: 50px;
	border-radius: 100%;
	border: 1px solid var(--color-b-5);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-b-0);
	color: var(--color-b-5);
}
.question-map__item.active{
	border: 1px solid #FAFCCA;
	background: #FAFCCA;
	color: #18181A;
}
.question-map__wrap{
    border-bottom: 1px solid var(--color-b-5);
    width: 100%;
}
.question__block{
	display: none;
}
.question__block.active{
	display: block;
}
.question__block__result{
	display: none;
	background: var(--color-a-2);
	padding: 14px;
	border-radius: 10px;
	align-items: center;
	margin-bottom: 40px;
}
.question__block__result svg{
	margin-right: 17px;
}
.question__block__result__content b{
	font-weight: 700;
    font-size: 18px;
    line-height: 150%;
    color: #18181A;
}
.question__block__result__content__message{
	font-size: 18px;
	line-height: 150%;
	color: #18181A;
}
.question__block > h4{
	font-size: 30px;
	line-height: 120%;
	color: #18181A;
	margin-bottom: 10px;
}
.question__block > p{
	font-size: 18px;
	line-height: 150%;
}
#questions .col-lg-12{
	max-width: 830px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}
.question__block > hr{
    height: 1px;
    background: var(--color-a-2);
    margin-top: 50px;
    margin-bottom: 50px;
}
.question__block__list > li > p{
	margin-bottom: 20px;
}
.question__block__list > li{
	margin-bottom: 40px;
}
.question__block__list > li ul li{
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 10px;
    border: 1px solid var(--color-a-2);
}
.question__block__list > li ul li:has(input:checked){
	
}
.question__block__list > li ul li input{
	display: none;
}
.question__block__list > li ul li label{
	font-size: 15px;
	line-height: 140%;
	display: flex;
	align-items: center;
	cursor: pointer;
}
.question__block__list > li ul li label:before{
	content: url('../img/radio-circle.svg');
	margin-right: 15px;
	height: 21px;
	max-height: 21px;
}
.question__block__list > li ul li input:checked + label:before{
	content: url('../img/radio-circle-fill.svg');
	filter: brightness(0) saturate(100%) invert(9%) sepia(55%) saturate(5510%) hue-rotate(354deg) brightness(85%) contrast(98%);	
}
.question__block__buttons{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}
.question__block__buttons .button{
    width: calc(50% - 15px);
    cursor: pointer;
}
.question__block__result.active{
	display: flex;
}
#skin-test-result{
	display: none;
}
.question-map__item.completed{
	background: #FAFCCA;
    color: #fafcca;
    position: relative;
    border-color: #fafcca;
}
.question-map__item.completed:before{
	content: url('../img/skin-test-agree.svg');
	position: absolute;
	top: 7px;
	left: 0;
	right: 0;
	bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: brightness(0);
}
.question__block__buttons .disabled{
	
}
.question__block__result svg path{
	stroke: #18181A;
}
.test_added_info_question svg path{
	stroke: #680A0A;
}
.skin-test-result__message svg path{
	stroke: #680A0A;
}

/* Result Content */

#skin-test-result .col-lg-12{
    padding: 0;
    max-width: 830px;
    margin-left: auto;
    margin-right: auto;
}
#skin-test-result h4{
	color: #18181A;
	margin-bottom: 10px;
}
#skin-test-result .col-lg-12 > hr{
	height: 1px;
	margin-top: 50px;
	margin-bottom: 50px;
	background: var(--color-a-2);
}
.skin-test-result__main{
	color: #18181A;
	margin-bottom: 30px;
}
.skin-test-result__message{
	margin-top: 30px;
	border-radius: 10px;
	background: var(--color-a-2);
	margin-bottom: 30px;
	padding: 14px;
	display: flex;
	align-items: center;
	color: #18181A;
	font-size: 14px;
	line-height: 140%;
}
.skin-test-result__message svg{
	margin-right: 14px;
	min-width: 24px;
}
.skin-test-result__main span{
    color: #18181A;
    padding-left: 5px;
    font-size: 20px;
    line-height: 140%;
}
.skin-test-result__list{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 0px 30px;
}
.skin-test-result__list li{
	background: var(--color-a-2);
	border-radius: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	line-height: 140%;
	color: var(--color-c-2);
	text-align: center;
}
.skin-test-result__list li::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0;
  padding-bottom: 100%;
}
.skin-test-result__list li:hover{
	background: rgba(150, 121, 104, 0.2);
}
.col-lg-12{
	width: 100%;
}
.test_added_info_question{
	border-radius: 10px;
	background: var(--color-a-2);
	padding: 14px;
	display: flex;
	align-items: flex-start;
}
.test_added_info_question svg{
	margin-right: 14px;
	width: 24px;
	min-width: 24px;
}
.skin-test-result__mob{
	display: none;
}
/* Last: Media Content */

@media(max-width: 768px){
	#skin-test-banner{
		height: 250px;
		margin-bottom: 70px;
	}
	#skin-test-banner h2{
		font-size: 24px;
	}
	#skin-test-banner .woocommerce-breadcrumb, #skin-test-banner .woocommerce-breadcrumb a{
		font-size: 16px;
		line-height: 150%;
		color: var(--color-b-0) !important;
		text-align: center !important; 
	}
	#skin-test-info .col-lg-6{
		padding: 0;
	}
	.skin-test-info__left h3{
		font-size: 24px;
	}
	.skin-test-info__left p{
		font-size: 18px;
	}
	.skin-test-info__li__content h5{
		font-size: 20px;
	}
	#question-map{
		margin-bottom: 5px;
	}	
	.col-lg-12{
		padding: 0;
	}
	.question__block > h4{
		margin-bottom: 20px;
		font-size: 26px;
		line-height: 120%;
	}
	.question__block > hr{
		margin-top: 30px;
		margin-bottom: 30px;
	}
	.question__block__list > li > p{
		font-size: 18px;
		line-height: 150%;
	}
	.question__block__buttons{
		flex-direction: column-reverse;
		gap: 10px;
		margin-bottom: 55px;
	}
	.question__block__buttons .button{
		width: 100%;
	}
	#skin-test-result .col-lg-12 > hr{
		margin-top: 30px;
		margin-bottom: 30px;
	}
	.skin-test-result__list{
		grid-template-columns: 1fr 1fr;
	}
	.skin-test-result__message svg{
		width: 24px;
	}
	#skin-test-result{
		padding-bottom: 55px;
	}
	.skin-test-result__mob{
		display: flex;
	}
	.skin-test-result__desk{
		display: none;
	}
	.skin-test-result__list li{
		font-size: 14px;
	}
	.skin-test-result__list{
	    grid-gap: 10px 10px;
	}
}