// Model detail

.p-model-detail {

	&__header,
	&__content {
		padding: 27px;
	}

	&__wrapper {
		display: flex;
		flex-direction: row;
		min-height: calc(100vh - 197px);
	}

	&__content {
		flex: 1;
		border-right: solid 1px #dedeec;

		&-name {
			font-size: 20px;
			font-weight: 600;
			margin: 0 0 18px;
		}

		&-price {
			margin-bottom: 18px;
			font-size: 12px;
		}

		&-desc {

			span,
			p,
			h1,
			h2,
			h3,
			h4,
			h5,
			h6,
			strong {
				font-size: 12px;
				font-weight: 400;
				color: #000;
				margin: 0;
			}
		}
	}

	&__content-right {
		flex: 1;

		&__row {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 18px 16px;
			border-bottom: solid 1px #dedeec;
			gap: 12px
		}

		&__title {
			display: flex;
			flex-direction: column;
			font-size: 14px;

			>span {
				font-size: 16px;
			}
		}

		&__chart {
			>svg {
				width: 200px;
				height: 40px;
				fill: none;
			}
		}
	}

	&__params-tag {
		display: inline-flex;
		border: solid 1px #dedeec;
		border-radius: 6px;
		font-size: 12px;

		span {
			padding: 2px 5px;
		}

		>.first {
			color: #6b7280;
			border-right: solid 1px #dedeec;
		}
	}

	&__chatbox {
		display: flex;
		flex-direction: column;
		gap: 8px;
		padding: 16px;

    &--iframe {
      border-bottom-right-radius: 12px;
      overflow: hidden;
      padding: 0;
    }

		&__row {
			display: flex;
			justify-content: space-between;
		}

		&__header {
			font-size: 14px;
			display: flex;
			align-items: center;
			gap: 5px;

			>b {
				font-size: 16px;
			}
		}

		&__action {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 6px;

			&__select {
				width: 128px;
				height: 30px;
				font-size: 14px;
			}
		}

		&__wapper {
			display: flex;
			flex-direction: column;
			gap: 8px;
			border: solid 1px #dedeec;
			border-radius: 8px;
		}

		&__conversation-box {
			// border: solid 1px #dedeec;
			// border-top-left-radius: 8px;
			// border-top-right-radius: 8px;
			height: 300px;
			overflow: scroll;
		}

		&__prompt-box {
			display: flex;
			flex-direction: row;
			border-top: solid 1px #dedeec;

			.c-input-base__field {
				width: 100%;
			}

			.input-text {
				border: none;
				border-radius: 0px;
			}

			.btn-white {
				font-weight: normal;
				border-top-left-radius: 0px;
				border-top-right-radius: 0px;
				border-bottom-left-radius: 0px;
				border-bottom-right-radius: 8px;
			}
		}

		&__subdesc {
			font-size: 12px;
		}

		&__action-btn {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			gap: 6px;
			height: 30px;
			cursor: pointer;
			font-size: 12px;
		}
	}

	&__modal {
		&-buy {
			min-width: 758px;
			//padding-right: 6px;
			.scrollbar {
				&::-webkit-scrollbar-thumb {
				  background: transparent;
				}
			}

			.model-type {
				strong {
					text-transform: uppercase;
				}
			}

			.c-modal__footer {
				margin-top: 0;

				button {
					border-radius: 8px;
					font-size: 14px;
					line-height: 24px;
					letter-spacing: 0.28px;
				}

				.c-modal--cancel {
					button {
						background: #fff;
						border: 1px solid#dedeec;
						color: #4a545e;
						min-width: auto;
					}
				}

				.btn-secondary {
					background: #5050ff;
					border-color: #5050ff;
					box-shadow: 0px 1px 2px 0px rgba(27, 36, 44, 0.12);
					color: #fff;
					min-width: auto;
				}
			}

			.c-modal__body {
				display: flex;
				flex-direction: column;
				gap: 24px;
			}
		}

		&-text {
			font-size: 14px;
			line-height: 24px;
			letter-spacing: 0.28px;
			color: #555f6d;
		}
	}

	&__header {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 16px;
		border-bottom: 1px solid #dedeec;

		&-left {
			display: flex;
			flex-direction: column;
			gap: 17px;

			&-top {
				display: flex;
				align-items: center;
				gap: 30px;
			}
		}

		&-right {
			gap: 12px;
			display: flex;
			align-items: center;
		}
	}

	&__copy-link {
		border: none;
		outline: unset;
		box-shadow: unset;
		padding: 0;
		background: transparent;
		color: #40405b;
		cursor: pointer;
	}

	&__icon {
		border-radius: 8px;
		box-shadow: 0px 1px 2px -1px rgba(17, 12, 34, 0.08);
		padding: 8px 10px;
		color: #fff;
		font-size: 12px;
		font-weight: 500;
		min-width: auto;

		&.buy {
			flex-direction: row-reverse;
			background: #4949e8;
		}

		&.back {
			background: #14142a;
		}
	}

	&__like-box {
		border-radius: 6px;
		border: 1px solid #dedeec;
		background: #fff;
		display: flex;
		align-items: center;
		padding: 1px 4px 1px 1px;
		justify-content: center;

		&-left,
		&-right {
			padding: 5px;
			font-size: 12px;
			font-weight: 500;
			color: #40405b;
		}

		&-left {
			border-right: 1px solid #dedeec;
			gap: 7px;
			display: flex;
			align-items: center;
		}
	}

	&__breadcrumb {
		ul {
			margin: 0;
			padding: 0 0 0 24px;
			display: flex;
			align-items: center;
			gap: 16px;
			position: relative;

			&::before {
				content: "";
				position: absolute;
				top: auto;
				left: 0;
				right: auto;
				width: 18px;
				height: 18px;
				bottom: 50%;
				transform: translate(0, 50%);
				background: url("@/assets/images/model.png"),
					lightgray 0px 0px / 100% 100% no-repeat;
				background-size: cover;
			}

			li {
				list-style: none;
				font-size: 20px;
				font-weight: 400;
				line-height: 28px;
				color: #9ca3af;
				position: relative;

				&:not(.last) {
					cursor: pointer;

					&::after {
						content: "/";
						position: absolute;
						left: auto;
						right: -11px;
						top: auto;
						bottom: 50%;
						transform: translate(0, 50%);
						color: #d1d5db;
						font-size: 18px;
					}
				}

				&.last {
					font-weight: 600;
					color: #000;
				}
			}
		}
	}

	&__tags {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	&__tag {
		border-radius: 8px;
		background: #7357ff;
		display: flex;
		padding: 4px 8px;
		justify-content: center;
		align-items: center;
		gap: 4px;
		box-shadow: 0px 1px 2px -1px rgba(17, 12, 34, 0.08);
		font-size: 12px;
		font-weight: 600;
		line-height: 16px;
		color: #fff;
		cursor: pointer;
	}

	&__demo-img {
		margin-top: 25px;

		img {
			object-fit: cover;
			max-width: 100%;
			width: fit-content;
		}
	}
}

.c-percents {
	display: flex;
	align-items: center;
	justify-content: space-around;

	&__flex {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: nowrap;
	}

	&__item {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 5px;
		align-items: center;
		padding: 8px 12px;
		border: 1px solid #cfd6dd;
		border-radius: 8px;

		span {
			font-size: 12px;
			font-weight: 700;
			color: #333350;
		}

		label {
			font-size: 14px;
			font-weight: 700;
			line-height: 24px;
			letter-spacing: 0.2px;
			color: #555f6d;
		}

		// &-input {
		//   width: 50px;
		//   border: 1px solid;
		//   border-radius: 5px;
		//   margin-right: 2px;
		//   box-sizing: border-box;
		// }

		&__input-number {
			input {
				margin-top: -4px;
				font-size: 14px;
				font-weight: 700;
				line-height: 24px;
				letter-spacing: 0.2px;
				border: none;
				padding-right: 12px;
				border: white;
			}
		}

		>div {
			width: auto;
			height: 32px;
			padding: 0 7.5px;
			border-radius: 4px;
			background: #fff;
			display: flex;
			align-items: center;
		}

		&.danger {
			>div {
				background: #feecee;

				span {
					color: #f2415a;
				}
			}
		}

		&.success {
			>div {
				background: #e6faee;

				span {
					color: #27be69;
				}
			}
		}
	}
}

.p-model-selected {
	&__select {
		display: flex;
		width: 100px;
	}

	&__info {
		flex-direction: column;
		align-content: center;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: flex-start;

		&-row {
			display: flex;
		}

		&-item {
			display: flex;

			&-row {
				display: flex;
				justify-content: flex-start;
				align-items: center;

				label {
					font-size: 14px;
					font-weight: 700;
					line-height: 24px;
					letter-spacing: 0.2px;
					color: #555f6d;
					padding-right: 10px;
				}
			}
		}
	}

	&__item {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 16px;
		width: max-content;
	}

	.item-title {
		font-size: medium;
	}

	.item-value {
		font-size: medium;
		font-weight: 600;
	}
}

.p-model-selected__select {
	display: inline-flex;
}

.c-checkbox__label {
	padding-right: 10px;
	gap: 6px;
	font-size: 14px;
}


//.c-input-base__field.disabled {
//	opacity: 1 !important;
//}
