body {
	background: var(--search-form-bg) !important;
}

details summary::-webkit-details-marker {
 	display: none;
}

summary::marker {
 	content: "";
}

.header-banner-section {
	background: var(--search-section-bg);
	border-radius: 0 0 20px 20px;
	color: var(--neutral-1);
	padding: 12px 0;

	& .container {
		display: grid;
		gap: 0.5rem;
	}
}

.page-ubication {
	margin: 0;
	color: var(--neutral-1);
	font-size: 12px;
	line-height: 15px;
	font-weight: var(--fw-light);

	& a {
		color: var(--neutral-1);
	}

	& .profile-name {
		color: var(--primary);
		font-weight: var(--fw-semibold);
	}
}

.title-container {
	& .title {
		margin: 0;
		font-weight: var(--fw-medium);
		font-size: 25px;
		line-height: 32px;
	}
}

.profile-section {
	padding: 1rem 0;

	& .container {
		display: grid;
		grid-template-columns: 290px 1fr;
		gap: 1rem;
	}
}

.layout-1 {
	width: 100%;
}

.layout-2 {
	width: 100%;
}

.profile-details-container {
	width: 100%;
	height: fit-content;
	background: var(--neutral-1);
	padding: 1rem;
	border-radius: 1rem;
	display: grid;
	align-content: start;
	gap: 1rem;
}

.profile-avatar-container {
	margin-inline: auto;
	width: 120px;
	height: 120px;
	border-radius: 80px;
	position: relative;

	aspect-ratio: 1 / 1 !important;
	object-fit: cover !important;
	object-position: center !important;
	image-rendering: optimizeSpeed !important;

	.premium-badge {
		width: 28px;
		height: 28px;
		position: absolute;
		top: 0;
		left: 0;
	}

	.avatar {
		width: 100%;
		height: 100%;
		overflow: hidden;
		border-radius: 80px;
	}

	.raiting-info {
		margin: 0;
		position: absolute;
		bottom: -12.5px;
		left: 30%;
		background: var(--fourthiary);
		color: var(--neutral-1);
		border-radius: 4px;
		padding: 2px 4px;
		font-weight: var(--fw-regular);
		font-size: 14px;
		line-height: 21px;
	}

	.raiting-info::before {
		content: url('../../assets/img/perfil-page-assets/icons/star1.png');
		width: 12px;
		height: 11px;
		margin-right: 5px;
	}
}

.profile-name-container {
	height: fit-content;

	.name {
		margin: 0;
		font-size: 16px;
		line-height: 24px;
		font-weight: var(--fw-semibold);
		text-align: center;
	}
}

.dental-tec-tag {
	background: var(--primary);
}
.dental-tec-tag::before {
	content: url('../../assets/img/perfil-page-assets/icons/dental-tec.png');
	margin: 0;
	padding: 0;	
	width: 12px;
	height: 11px;
	line-height: 13px;
}

.dental-lab-tag {
	background: var(--color-9);
}
.dental-lab-tag::before {
	content: url('../../assets/img/perfil-page-assets/icons/dental-lab.png');
	margin: 0;
	padding: 0;	
	width: 11px;
	height: 10px;
	line-height: 12px;
}

.dental-dep-tag {
	background: var(--color-10);
}
.dental-dep-tag::before {
	content: url('../../assets/img/perfil-page-assets/icons/dental-dep.png');
	margin: 0;
	padding: 0;	
	width: 11px;
	height: 10px;
	line-height: 12px;
}

.services-type-and-other-container {
	height: fit-content;
	display: grid;
	justify-items: center;
	gap: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--color-7);
	
	.service-type-container {
		width: fit-content;
		border-radius: 20px;
		padding: 2px 4px;

		display: flex;
		gap: 4px;

		.service-name {
			margin: 0;
			text-transform: uppercase;
			color: var(--neutral-1);
			font-size: 12px;
			line-height: 15px;
			font-weight: var(--fw-medium);
		}
	}

	.socials-container {
		display: flex;
		align-items: center;
		gap: 10px;

		@media (hover: hover) {
  		.social:hover {
    		transform: translateY(-2px);
    		image-rendering: optimizeSpeed;
  			transition: 0.20s ease-in-out;
  		}
		}
	}

	.contact-container-prem {
		width: 100%;
		display: flex;
		justify-content: center;
		gap: 8px;

		.btn-style-prfl-1 {
			width: 40px;
			border-radius: 6px;
			padding: 8px;
			background: var(--neutral-1);
			border: 2px solid var(--primary);

			display: grid;
			align-items: center;
			justify-content: center;
		}

		.btn-style-prfl-2 {
			width: 100%;
			border-radius: 6px;
			padding: 8px 12px;
			background: var(--secondary);
			color: var(--neutral-1);
			font-weight: var(--fw-medium);
			font-size: 12px;
			line-height: 20px;

			display: flex;
			align-items: center;
			justify-content: center;
			gap: 4px;
		}

		.wa-btn::before {
			content: url('../../assets/img/perfil-page-assets/icons/wa-btn-icon.png');
			width: 18px;
			height: 16px;
		}

		.message-btn::before {
			content: url('../../assets/img/perfil-page-assets/icons/message.png');
			width: 20px;
			height: 20px;
		}

		.contact-service-btn::before {
			content: url('../../assets/img/perfil-page-assets/icons/schedule-btn-icon.png');
			width: 13px;
			height: 14px;
			line-height: 20px;
		}
	}
}

.services-details {
	padding-inline: 8px;
	display: grid;
	gap: 1rem;

	.service-price-container {
		.container-title {
			margin: 0;
			color: var(--color-6);
			font-size: 14px;
			line-height: 16px;
			font-weight: var(--fw-regular);

			display: flex;
			align-items: center;
			gap: 4px;
		}

		.container-title::before {
			content: url('../../assets/img/perfil-page-assets/icons/price-icon.png');
			width: 16px;
			height: 16px;
		}

		.container-description {
			margin: 0;
			height: fit-content;
			margin-top: 5px;
			padding-left: 20px;
			font-size: 14px;
			font-weight: var(--fw-regular);

			display: flex;
			gap: 8px;
		}

		.container-description::before {
			content: url('../../assets/img/perfil-page-assets/icons/Vector-1.png');
			width: 11.25px;
			height: 11.25px;
		}

		.more-info-icon {
			cursor: pointer;
		}

		.more-info-icon::before {
			content: url('../../assets/img/perfil-page-assets/icons/info-icon.png');
			width: 16px;
			height: 16px;
		}
	}

	.service-location-container {
		.container-title {
			margin: 0;
			color: var(--color-6);
			font-size: 14px;
			line-height: 16px;
			font-weight: var(--fw-regular);

			display: flex;
			align-items: center;
			gap: 4px;
		}

		.container-title::before {
			content: url('../../assets/img/perfil-page-assets/icons/location-icon.png');
			width: 16px;
			height: 12px;
			line-height: 10px;
		}

		.container-description {
			margin: 0;
			height: fit-content;
			margin-top: 5px;
			padding-left: 20px;
			font-size: 14px;
			font-weight: var(--fw-regular);

			display: flex;
			gap: 8px;
		
		}
	}

	.amenidades-container {
		.container-title {
			margin: 0;
			color: var(--color-6);
			font-size: 14px;
			line-height: 16px;
			font-weight: var(--fw-regular);

			display: flex;
			align-items: center;
			gap: 4px;
		}

		.container-title::before {
			content: url('../../assets/img/perfil-page-assets/icons/amenidades.png');
			width: 16px;
			height: 14px;
		}

		.container-description {
			margin: 0;
			height: fit-content;
			margin-top: 5px;
			padding-left: 20px;
			font-size: 14px;
			font-weight: var(--fw-regular);

			display: flex;
			gap: 8px;
		
		}
	}

	.schedule-container {
		padding: 8px;
		border: 1px solid var(--primary);
		border-radius: 8px;

		.schedule-header {
			margin: 0;
			padding: 0;
			display: grid;
			gap: 5px;

			.schedule-state, .schedule-info {
				display: flex;
				justify-content: space-between;

				& p {
					margin: 0;
				}
			}

			.schedule-state {
				font-size: 12px;
				line-height: 15px;

				.schedule {
					font-weight: var(--fw-light);
					color: var(--color-6);

					display: flex;
					align-items: center;
				}

				.schedule::before {
					content: url('../../assets/img/perfil-page-assets/icons/schedule.png');
					width: 12.75px;
					height: 15px;
					margin-right: 5px;
				}

				.state {
					padding: 2px 4px;
					background: var(--color-11);
					color: var(--color-12);
					border-radius: 4px;
					font-weight: var(--fw-semibold);
				}
			}

			.schedule-info {
				font-size: 14px;
				line-height: 21px;

				.current-schedule {
					font-weight: var(--fw-medium);
				}

				.current-schedule-time {
					font-weight: var(--fw-regular);
					display: flex;
				}

				.current-schedule-time::after {
					content: url('../../assets/img/perfil-page-assets/icons/arrow-down.svg');
					width: 11px;
					height: 4px;
					margin-left: 6px;
				}
			}
		}

		.schedule-details-container {
			border-top: 1px solid var(--color-7);
			margin-top: 5px;
			padding-top: 5px;

			opacity: 0;
  		animation: fadeIn 0.5s ease-in-out forwards;
  		animation-delay: 0.1s;
  		animation-play-state: paused;

			.schedule-items {
				margin: 0;
				padding: 0;
				display: grid;
				gap: 5px;

				& li {
					display: flex;
					justify-content: space-between;

					.day, .schedule-time {
						margin: 0;
						font-size: 12px;
						line-height: 15px;
						font-weight: var(--fw-light);		
					}

					.schedule-time {
						color: var(--color-6);
						text-transform: uppercase;
					}

					.schedule-time-closed {
						text-transform: initial;
						font-weight: var(--fw-medium);
						text-decoration: line-through;
					}
				}
			}
		}
	}

	.schedule-container[open] {
		.schedule-header {
			.schedule-info {
				.current-schedule-time::after {
					content: url('../../assets/img/perfil-page-assets/icons/arrow-up.svg');
				}
			}
		}

		.schedule-details-container {
  		animation-play-state: running;
		}
	}
}

@keyframes fadeIn {
  100% {
    opacity: 1;
  }
}

.map-container {
	max-width: 268px;
	width: 100%;
	height: 131px;
	border-radius: 5px;
	overflow: hidden;
	position: relative;

	.map {
		width: 100%;
		height: 100%;
	}

	.map-btn {
		position: absolute;
		top: 33%;
		left: 30%;
		width: fit-content;
		height: fit-content;
		background: var(--neutral-1);
		color: var(--secondary);
		font-size: 14px;
		line-height: 21px;
	}

	.map-btn::before {
		content: url('../../assets/img/perfil-page-assets/icons/location-map-icon.png');
		width: 10px;
		height: 12px;
		margin-right: 5px;
	}
}

.profile-body {
	width: 100%;
	min-height: 450px;
	background: var(--neutral-1);
	border-radius: 1rem;

	& .title-style-1 {
		margin: 0;
		padding: 0;
		color: var(--search-section-bg);
		font-size: 1rem !important;
		line-height: 2rem;
		font-weight: var(--fw-semibold);
	}

	& .btn-style-prfl-1 {
		width: 40px;
		border-radius: 6px;
		padding: 8px;
		background: var(--neutral-1);
		border: 2px solid var(--primary);

		display: grid;
		align-items: center;
		justify-content: center;
	}
}

.profile-prem-nav {
	padding: 10px 2rem;
	display: flex;
	gap: 0.5rem;

	.nav-items {
		width: fit-content;
		cursor: pointer;
		text-align: center;
		padding: 4px 8px;
		color: var(--footer-divisor);
 		font-size: 1rem;
 		line-height: 24px;
 		font-weight: var(--fw-semibold);
 		border-bottom: 2px solid transparent;
	 	text-wrap: balance;


		& input[type="radio"] {
 			appearance: none;
 			-webkit-appearance: none;
 			-moz-appearance: none;
 		}
	}

	.active {
		transition: 0.2s ease-in-out;
		color: var(--secondary);
		border-bottom: 2px solid var(--fourthiary);
	}
}

.profile-content {
	padding: 1rem 2rem;

	display: grid;
	grid-template-columns: 1fr 290px;
	gap: 50px;
	align-items: flex-start;

	& details summary {
		display: flex;
		justify-content: space-between;
		line-height: 21px;
	}

	& details summary::after {
		content: url('../../assets/img/perfil-page-assets/icons/arrow-up-1.svg');
		width: fit-content;
		height: 20px;
		line-height: 12px;
		transform: rotate(180deg);
	}

	& details[open] summary::after {
		content: url('../../assets/img/perfil-page-assets/icons/arrow-up-1.svg');
		width: fit-content;
		height: 20px;
		line-height: 14px;
		transform: rotate(0deg);
	}
}

#profile-dinamic-content {
	--detail-padding: 10px;
	--p-container-margin-top: 10px;
	--p-fontsize: 14px;
	--p-fontsize-1: 12px;
	--p-line-height: 21px;
	--p-color: var(--footer-divisor);
	--p-color-1: var(--color-13);
	--p-font-weight: var(--regular);
	--p-font-weight-medium: var(--fw-medium);
	--p-font-weight-light: var(--fw-light);
}

.profile-content-container {
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;

	/* CSS General */
	.about-container {
		margin: 0;
		padding: 0;
		padding-bottom: var(--p-container-margin-top);

		.title {
			padding: 0;
			display: flex;
			align-items: center;
			gap: 5px;
		}

		.title::before {
			content: url('../../assets/img/perfil-page-assets/icons/about.png');
			width: 20px;
			height: 20px;
			line-height: 21px;
		}

		.description-container {
			margin: 0;
			padding: 0;
			display: grid;
			gap: 10px;

			.description {
				margin: 0;
				padding: 0;
				color: var(--p-color);
				font-size: var(--p-fontsize);
				line-height: var(--p-line-height);
				font-weight: var(--p-font-weight);
			}
		}
	}

	.services-container {
		margin: 0;
		padding: 0;
		padding-top: var(--detail-padding);
		padding-bottom: var(--p-container-margin-top);

		.title {
			display: flex;
			align-items: center;
			gap: 5px;
			line-height: 16px;
		}

		.title::before {
			content: url('../../assets/img/perfil-page-assets/icons/services.png');
			width: 20px;
			height: 20px;
		}

		.description-container {
			margin: 0;
			padding: 0;
			margin-top: var(--p-container-margin-top);
			display: grid;
			gap: 8px;

			.description {
				margin: 0;
				padding: 0;
				width: fit-content;
				height: fit-content;
				font-size: var(--p-fontsize);
				line-height: var(--p-line-height);
				font-weight: var(--p-font-weight);
				color: var(--p-color-13);
				border-radius: 20px;
				padding-inline: 6px;
				background: var(--color-1);
			}
		}
	}

	.works-container {
		margin: 0;
		padding: 0;
		padding-top: var(--detail-padding);
		padding-bottom: var(--p-container-margin-top);

		.title {
			display: flex;
			align-items: center;
			gap: 5px;
			line-height: 16px;
		}

		.title::before {
			content: url('../../assets/img/perfil-page-assets/icons/works.png');
			width: 20px;
			height: 20px;
		}

		.description-container {
			margin: 0;
			padding: 0;
			margin-top: var(--p-container-margin-top);
			display: flex;
			flex-wrap: wrap;
			gap: 8px;

			.description {
				margin: 0;
				padding: 0;
				width: fit-content;
				height: fit-content;
				font-size: var(--p-fontsize);
				line-height: var(--p-line-height);
				font-weight: var(--p-font-weight);
				color: var(--p-color-13);
				border-radius: 20px;
				padding-inline: 6px;
				background: var(--color-1);
			}
		}
	}

	.payment-container {
		margin: 0;
		padding: 0;
		padding-top: var(--detail-padding);

		.title {
			display: flex;
			align-items: center;
			gap: 5px;
			line-height: 16px;
		}

		.title::before {
			content: url('../../assets/img/perfil-page-assets/icons/price.png');
			width: 20px;
			height: 20px;
		}

		.description-container {
			margin: 0;
			padding: 0;
			margin-top: var(--p-container-margin-top);
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 8px;

			.consultation-description {
				margin: 0;
				padding: 0;

				& p {
					margin: 0;
					padding: 0;
				}

				.consultation-type {
					font-size: var(--p-fontsize);
					font-weight: var(--p-font-weight-medium);
					color: var(--p-color-1);
					display: flex;
					gap: 8px;
				}

				.consultation-type::before {
					content: url('../../assets/img/perfil-page-assets/icons/check.png');
					width: 12px;
					height: 20px;
				}

				.consultation-type::after {
					content: url('../../assets/img/perfil-page-assets/icons/Vector-1.png');
					width: 12px;
					height: 12px;
				}

				.consultation-price {
					padding-left: 20px !important;
					font-size: var(--p-fontsize-1);
					color: var(--p-color);
					font-weight: var(--p-font-weight-light);
				}
			}

			.payments-description {
				margin: 0;
				padding: 0;

				& p {
					margin: 0;
					padding: 0;
				}

				.payment-method-title {
					color: var(--p-color);
					font-size: var(--p-fontsize-1);
					font-weight: var(--p-font-weight-light);
				}

				.payment-method {
					color: var(--p-color-1);
					font-size: var(--p-fontsize);
					font-weight: var(--p-font-weight-medium);
				}
			}
		}
	}
	/* CSS General End */

	/* CSS Curriculum */
	.curriculum-container {
		margin: 0;
		padding: 0;
		padding-bottom: var(--p-container-margin-top);

		.title {
			padding: 0;
			display: flex;
			align-items: center;
			gap: 5px;
		}

		.title::before {
			content: url('../../assets/img/perfil-page-assets/icons/curriculum.png');
			width: 20px;
			height: 20px;
			line-height: 21px;
		}

		.description-container {
			margin: 0;
			padding: 0;
			margin-top: var(--p-container-margin-top);
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-radius: 1rem;
			padding: 8px;
			background: var(--color-1);

			.file-container {
				display: flex;
				gap: 8px;
				align-items: center;

				& p {
					margin: 0;
					padding: 0;
				}

				.file-icon {
					width: 30px;
					height: 34.5px;
					object-fit: cover;
					object-position: center;
				}

				.file-description {
					margin: 0;
					padding: 0;

					.file-title {
						font-size: var(--p-fontsize);
						font-weight: var(--p-font-weight);
						color: var(--p-color-1);
						line-height: var(--p-line-height);
					}

					.file-weight {
						font-size: var(--p-fontsize-1);
						color: var(--p-color);
						line-height: var(--p-line-height);
						font-weight: var(--p-font-weight-light);
					}
				}
			}

			.download-btn{
				background: transparent !important;
			}

			.download-btn::before {
				content: url('../../assets/img/perfil-page-assets/icons/download-icon.svg');
				width: 12px;
				height: 14px;
				margin-bottom: 5px;
			}

			@media (hover: hover) {
  			.download-btn:hover::before{
    			transform: scale(1.2);
    			image-rendering: optimizeSpeed;
  				transition: 0.20s ease-in-out;
  			}
			}
		}
	}

	.education-container {
		margin: 0;
		padding: 0;
		padding-top: var(--p-container-margin-top);
		padding-bottom: var(--p-container-margin-top);

		.title {
			padding: 0;
			display: flex;
			align-items: center;
			gap: 5px;
		}

		.title::before {
			content: url('../../assets/img/perfil-page-assets/icons/education.png');
			width: 20px;
			height: 20px;
			line-height: 21px;
		}

		.education-details-container {
			margin: 0;
			padding: 0;

			.education-details {
				margin: 0;
				padding: 0;
				margin-left: calc(var(--p-container-margin-top) - 2px);
				padding-left: calc(var(--p-container-margin-top) + 3px);
				padding-bottom: calc(var(--p-container-margin-top) + 5px);
				border-left: 3px solid var(--color-14);
				position: relative;

				.icon {
					width: 15px;
					height: 15px;
					background: var(--color-1);
					border-radius: 50px;
					border: 2px solid var(--primary);
					position: absolute;
					left: -8.5px;
				}

				.content {
					margin: 0;
					padding: 0;

					& h4, p {
						margin: 0;
					  padding: 0;
						line-height: 15px;
					}

					& h4 {
						font-size: 12px;
						font-weight: var(--p-font-weight-medium);
						color: var(--p-color-1);
					}

					& p {
						font-size: 10px;
						font-weight: var(--p-font-weight-light);
						color: var(--p-color);
					}
				}
			}
		}
	}

	.rewards-container {
		margin: 0;
		padding: 0;
		padding-top: var(--p-container-margin-top);
		padding-bottom: var(--p-container-margin-top);

		.title {
			padding: 0;
			display: flex;
			align-items: center;
			gap: 5px;
		}

		.title::before {
			content: url('../../assets/img/perfil-page-assets/icons/rewards.png');
			width: 20px;
			height: 20px;
			line-height: 21px;
		}

		.rewards-details-container {
			margin: 0;
			padding: 0;

			.reward-details {
				margin: 0;
				padding: 0;
				margin-left: calc(var(--p-container-margin-top) - 2px);
				padding-left: calc(var(--p-container-margin-top) + 3px);
				padding-bottom: calc(var(--p-container-margin-top) + 5px);
				border-left: 3px solid var(--color-14);
				position: relative;

				.icon {
					width: 15px;
					height: 15px;
					background: var(--color-1);
					border-radius: 50px;
					border: 2px solid var(--primary);
					position: absolute;
					left: -8.5px;
				}

				.content {
					margin: 0;
					padding: 0;

					& h4, p {
						margin: 0;
					  padding: 0;
						line-height: 15px;
					}

					& h4 {
						font-size: 12px;
						font-weight: var(--p-font-weight-medium);
						color: var(--p-color-1);
					}

					& p {
						font-size: 10px;
						font-weight: var(--p-font-weight-light);
						color: var(--p-color);
					}
				}
			}
		}
	}

	.border-bottom {
		margin-bottom: var(--p-container-margin-top);
	}
	/* CSS Curriculum End */

	/* CSS Reviews */
	.comments-container {
		margin: 0;
		padding: 0;

		.comments-header-container {
			margin: 0;
			padding: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title {
				padding: 0;
				display: flex;
				align-items: center;
				gap: 5px;
			}

			.title::before {
				content: url('../../assets/img/perfil-page-assets/icons/reviews.svg');
				width: 20px;
				height: 20px;
				line-height: 21px;
			}

			.raiting-info {
				margin: 0;
				background: var(--fourthiary);
				color: var(--neutral-1);
				border-radius: 4px;
				padding: 2px 4px;
				font-weight: var(--fw-regular);
				font-size: 14px;
				line-height: 21px;
			}

			.raiting-info::before {
				content: url('../../assets/img/perfil-page-assets/icons/star1.png');
				width: 12px;
				height: 11px;
				margin-right: 5px;
			}
		}

		.comment-box {
			margin: 0;
			padding: 0;

			.comment-list, .reply-list {
				margin: 0;
				padding: 0;
				display: grid;
				gap: 1rem;

				.comment {
					background: var(--color-1);
					border-radius: 1rem;
					padding: 0.5rem;

					display: flex;
					align-items: flex-start;
					gap: 0.5rem;

					.comment-avatar-container {
						--size: 36px;
						cursor: pointer;
						width: var(--size);
						height: var(--size);
						aspect-ratio: 1 / 1 !important;
						object-fit: cover !important;
						object-position: center !important;
						image-rendering: optimizeSpeed !important;

						.comment-avatar {
							width: 100%;
							height: 100%;
						}
					}

					.comment-body {
						margin: 0;
						padding: 0;
						display: grid;
						gap: 0px;

						.meta-data-container {
							display: flex;
							flex-wrap: wrap;
							justify-content: space-between;
							align-items: center;

							.meta-data {
								margin: 0;
								padding: 0;
								display: flex;
								flex-wrap: wrap;
								justify-content: space-between;
								align-items: flex-start;
								gap: var(--p-container-margin-top);

								.comment-author {
									margin: 0;
									padding: 0;
									font-size: 14px;
									line-height: 15px;
									font-weight: var(--p-font-weight-medium);
									color: var(--p-color-1);
								}

								.comment-recommended {
									margin: 0;
									padding: 0;
									font-size: 14px;
									line-height: 15px;
									font-weight: var(--p-font-weight-medium);
									color: var(--color-12);
									display: flex;
									align-items: center;
									gap: 5px;
								}

								.comment-recommended::before {
									content: url('../../assets/img/perfil-page-assets/icons/like-comment.svg');
									width: 10px;
									height: 10px;
									line-height: 8px;
								}
							}

							.raiting-container {
								display: flex;
								align-items: center;
								padding: 4px 0;
								gap: 4px;

								.raiting {
									width: 14px;
									height: 14px;
								}
							}
						}

						.comment-date {
							margin: 0;
							padding: 0;
							font-size: 12px;
							line-height: 15px;
							font-weight: var(--p-font-weight-light);
							color: var(--p-color);
						}

						.comment-content {
							margin: 0;
							padding: 0;
							margin-top: 4px;
							display: grid;
							gap: 4px;

							.comment {
								margin: 0;
							  padding: 0;
							  font-size: 12px;
							  line-height: 15px;
							  font-weight: var(--p-font-weight-light);
							}
						}

						.reply-btn {
							border: none;
							outline: none;
							margin: 0;
							margin-top: var(--p-container-margin-top);
							padding: 0;
							width: fit-content;
							height: fit-content;
							background: transparent;
							font-size: 14px;
							line-height: 12px;
							font-weight: var(--p-font-weight-medium);
							color: var(--primary);

							display: flex;
							align-items: center;
							gap: 5px;
							margin-bottom: var(--p-container-margin-top);
						}

						.reply-btn::before {
							content: url('../../assets/img/perfil-page-assets/icons/reply-btn-icon.svg');
							width: 14px;
							height: 12.75px;
							line-height: 12.75px;
						}

						@media (hover: hover) {
							.reply-btn:hover::before {
								transform: translateX(-5px);
								transition: 0.25s ease-in-out;
							}
						}
					}
				}
			}

			.reply-list {
				.comment {
					margin-top: calc(var(--p-container-margin-top) / 2);
					margin-left: calc(var(--p-container-margin-top) * 2);
				}
			}

			.see-more-replys {
				margin: 1rem 0 2rem 0;
				padding: 0;
				background: transparent;
				border: none;
				outline: none;

				font-size: 14px;
				line-height: 20px;
				font-weight: var(--p-font-weight-medium);
				color: var(--primary);
			}
		}

		.write-review {
			margin: 0;
			padding: 0;

			.subtitle-and-raiting {
				margin: 0;
				margin-top: var(--p-container-margin-top);
				padding: 0;

				display: flex;
				flex-wrap: wrap;
				align-items: center;
				gap: 1rem;

				.subtitle {
					width: fit-content;
					margin: 0;
					padding: 0;
					font-size: 12px;
					line-height: 15px;
					font-weight: var(--p-font-weight-medium);
					color: var(--p-color-1);
				}

				.make-raiting {
					--size: 25px;
					display: flex;
					align-content: center;
					gap: 8px;

					.star-label {
						width: fit-content;
						height: fit-content;
						margin: 0;
						padding: 0;
						cursor: pointer;

						& input[type="radio"] {
							display: none;
				 			appearance: none;
				 			-webkit-appearance: none;
				 			-moz-appearance: none;
				 		}

				 		.star {
				 			width: var(--size);
				 			height: var(--size);
				 		}
					}
				}
			}

			.user-comment {
 				width: 100%;
 				min-height: 80px;
				margin-top: 1rem;
 				resize: none;
 				padding: 0.5rem 1rem;
 				border: none;
 				border-radius: 0.5rem;
 				background: var(--color-15);
 				font-size: 14px;
 				color: var(--p-color-1);
			}

			.user-comment:focus {
				outline: 1px solid var(--primary);
			}
		}

		.terms-and-submit-btn {
			margin: 0;
			margin-top: var(--p-container-margin-top);
			padding: 0;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			gap: 1rem;

			.terms {
				cursor: pointer;
				margin: 0;
				padding: 0;
				font-size: 12px;
				line-height: 15px;
				font-weight: var(--p-font-weight);
				color: var(--p-color-1);
				display: flex;
				align-items: center;
				gap: 5px;

				& a {
					text-transform: capitalize;
					font-weight: var(--p-font-weight-medium);
				}
			}

			.submit-btn {
				padding: 14px 18px;
				font-size: 14px;
				color: var(--neutral-1);
				background: var(--primary);
				border-radius: 8px;
			}
		}
	}
	/* CSS Reviews End */
}

[data-content-type] {
	display: none;
}

.wa-number-1, .wa-number-2 {
	display: flex;
	align-items: center;
	justify-content: center;
}

.wa-number-1::before {
	content: url('../../assets/img/search-results-assets/icons/wa.png');
	width: 17px;
	height: 16px;
	line-height: 21px;
}

.wa-number-2::before {
	content: url('../../assets/img/search-results-assets/icons/wa2.png');
	width: 17px;
	height: 16px;
	line-height: 21px;
}

.gallery-container {
	background: var(--color-1);
	border-radius: 1rem;
	padding: 1rem;
	display: grid;
	gap: 0.5rem;

	.title {
		font-size: 1rem !important;
		text-align: center;
	}

	#profile-gallery {
		--size: 122px;
		--gap: 8px;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--gap);
		justify-items: center;

		max-height: calc((var(--size) * 4) + (var(--gap) * 3));
		overflow: hidden;

		.photo-container {
			width: var(--size);
			height: var(--size);
			border-radius: 0.5rem;
			position: relative;
			overflow: hidden;
			cursor: pointer;

			.gallery-photo {
				width: 100%;
				height: 100%;
				aspect-ratio: 1 / 1 !important;
				object-fit: cover !important;
				object-position: center !important;
				image-rendering: optimizeSpeed !important;
			}
		}

		.photo-container:nth-child(8)::before {
			content: '...';
			display: flex;
			align-items: center;
			justify-content: center;
			width: var(--size);
			height: var(--size);
			position: absolute;
			inset: 0;
			background: rgba(0, 0, 0, 0.5);
			color: var(--neutral-1);
			font-size: 2rem;
			font-weight: var(--p-font-weight-medium);
		}
	}
}

/* Modal */
#modal {
	position: fixed;
	inset: 0;
	width: 65svw;
	height: fit-content;
	margin: auto;
	z-index: 999;
	overflow: hidden;

  border: 0;
  outline: 0;
  border-radius: 1rem;
  padding: 24px;
}

#modal::backdrop {

}

#modal[open] {
  animation: slide-up 700ms forwards, fade-in 400ms forwards;
}

#modal[closing] {
  display: block;
  pointer-events: none;
  inset: 0;
  animation: fade-out 0ms forwards;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes slide-up {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0%);
  }
}

.modal-container {
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;

	.modal-header-container {
		margin: 0;
		padding: 0;
		padding-bottom: 10px;

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

		.title {
			margin: 0;
			padding: 0;
			color: var(--search-section-bg);
			font-size: 1rem !important;
			line-height: 2rem;
			font-weight: var(--fw-semibold);

			display: flex;
			align-items: center;
			gap: 5px;
		}

		.title::before {
			content: url('../../assets/img/perfil-page-assets/icons/schedule-1.png');
			width: 20px;
			height: 20px;
			line-height: 21px;
		}

		.modal-close-btn {
			cursor: pointer;
		}
	}

	.form-container {
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;

		.form-items {
			margin: 0;
			padding: 5px 10px;
			background: var(--color-15);
			border-radius: 0.5rem;
			cursor: pointer;

			.input-title {
				margin: 0;
				padding: 0;
				font-size: 12px;
				line-height: 15px;
				font-weight: var(--fw-light);
				color: var(--footer-divisor);
			}

			& input {
				width: 100%;
				border: none;
				outline: none;
				background: transparent;
				font-size: 14px;
				line-height: 21px;
				font-weight: var(--fw-regular);
				color: var(--color-13);
			}

			.comments {
				width: 100%;
 				resize: none;
 				border: none;
 				outline: none;
 				background: var(--color-15);
 				font-size: 14px;
				line-height: 21px;
				font-weight: var(--fw-regular);
				color: var(--color-13);
			}
		}

		.form-items:not(:last-of-type) {
			width: 49%;
		}

		.form-items:last-of-type {
			width: 100%;
		}

		.form-items:focus-within {
    	outline: 1px solid var(--primary);
		}

		.btn-modal-style {
			width: 100%;
			border-radius: 6px;
			padding: 10px;
			background: var(--secondary);
			border: 2px solid var(--secondary);
			color: var(--neutral-1);
		}

		@media (hover: hover) {
  		.btn-modal-style:hover {
 				background: var(--color-1);
 				color: var(--secondary);
  			transition: 0.20s ease-in-out;
  		}
		}
	}
}

/* Breackpoints */

@media screen and (max-width: 1300px) {
	.modal-container {
		.form-container {
			.form-items:not(:last-of-type) {
				width: calc(51% - 1rem);
			}
		}
	}
}

@media screen and (max-width: 1000px) {
	.profile-prem-nav {
		width: 100%;
		display: flex;
		justify-content: space-between;
		gap: 0.5rem;

		.active {
			transition: 0.2s ease-in-out;
			color: var(--secondary);
			border-bottom: 2px solid var(--fourthiary);
		}
	}

	.profile-content {
		gap: 2rem;
		grid-template-columns: 1fr;
		justify-content: center;

		.gallery-container {
			margin-inline: auto;
			width: 290px;
		}
	}
}

@media screen and (max-width: 750px) {
	.profile-section {
		& .container {
			display: grid;
			grid-template-columns: 1fr;
		}
	}

	.layout-1 {
		margin-inline: auto !important;
		width: 290px !important;
	}

	.profile-prem-nav {
		width: 100%;
		padding: 10px 2rem;
		display: flex;
		justify-content: space-between;
		gap: 0.5rem;

		.nav-items {
			cursor: pointer;
			text-align: center;
			padding: 4px 8px;
			color: var(--footer-divisor);
	 		font-size: 1rem;
	 		line-height: 24px;
	 		font-weight: var(--fw-semibold);
	 		border-bottom: 2px solid transparent;

			& input[type="radio"] {
	 			appearance: none;
	 			-webkit-appearance: none;
	 			-moz-appearance: none;
	 		}
		}

		.active {
			transition: 0.2s ease-in-out;
			color: var(--secondary);
			border-bottom: 2px solid var(--fourthiary);
		}
	}

	.profile-content {
		gap: 2rem;
		grid-template-columns: 1fr;
		justify-content: center;

		.gallery-container {
			margin-inline: auto;
			width: 290px;
		}
	}

	#modal {
		width: 85svw;
	}

	.modal-container {
		.form-container {
			.form-items:not(:last-of-type) {
				width: calc(51% - 15px);
			}
		}
	}
}

@media screen and (max-width: 550px) {
	.modal-container {
		.form-container {
			.form-items:not(:last-of-type) {
				width: 100%;
			}
		}
	}
}

@media screen and (max-width: 420px) {
	.layout-2 {
		width: 100% !important;

		.profile-body {
			margin-inline: auto;
			max-width: 340px;
			width: 100%;
		}
	}

	.profile-prem-nav {
		width: 100%;
		padding: 8px 1rem;
		display: flex;
		justify-content: space-between;
		gap: 0.25rem;

		.nav-items {
			width: fit-content;
			cursor: pointer;
			text-align: center;
			padding: 4px 8px;
			color: var(--footer-divisor);
	 		font-size: 0.80rem;
	 		line-height: 20px;
	 		font-weight: var(--fw-semibold);
	 		border-bottom: 2px solid transparent;

			& input[type="radio"] {
	 			appearance: none;
	 			-webkit-appearance: none;
	 			-moz-appearance: none;
	 		}
		}

		.active {
			transition: 0.2s ease-in-out;
			color: var(--secondary);
			border-bottom: 2px solid var(--fourthiary);
		}
	}
}

@media screen and (max-width: 375px) {
	.payment-container {
		.description-container {
			grid-template-columns: 1fr !important;
		}
	}
}

@media screen and (max-height: 800px) {
	#modal {
		overflow-y: scroll;
	}
}