.mt-15 {
	margin-top: 15px;
}

.process-text {
	background-color: white;
	color: gray;
	right: 50px !important;

}

.process-text span {
	color: black;
	font-weight: 600;
}

.process-btn-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
}

.login-btn-wrap {
	align-items: center;
	justify-content: center;
	text-align: center;
	display: flex;
}

.process-btn-wrap a {
	width: 200px;
	margin-right: 5px;
	font-size: 14px;
}

@media(max-width:760px) {
	.process-btn-wrap {
		display: block;
	}

	.process-btn-wrap a {
		width: 70px;
		font-size: 12px;
		margin-bottom: 5px;
	}

	.size-span {
		width: 90px;
		display: inline-block;
	}

	/* 수량 row (1행) */
	.quantity-row {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 10px;
		width: 100%;
	}

	/* 수량 span */
	.quantity-row .size-span {
		display: inline-block;
		font-weight: bold;
		white-space: nowrap;
	}

	/* 수량 input은 남는 공간 꽉 채움 */
	.quantity-row input[type="number"] {
		flex: 1;
		width: auto;
		min-width: 0;
		box-sizing: border-box;
	}

	/* 버튼 row (2행) */
	.button-row {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		gap: 8px;
		margin-top: 10px;
		width: 100%;
	}

	.button-row button {
		flex: 1;
		white-space: nowrap;
	}

	#cart-btn,
	#order-btn,
	#calculate-price-btn {
		margin: 0;
		padding: 10px 10px;
	}
}



.sign {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.sign-wrap {
	padding-top: 50px;
	padding-bottom: 50px;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
}

.memberList-wrap h2 {
	font-weight: 600;
	font-size: 16px;
	margin-bottom: 10px;
}

.memberList-wrap p {
	font-size: 14px;
	color: black;
	font-weight: 300;
	margin-bottom: 0px;
	margin-top: 0px;
	line-height: 1.4;
}

.memberList-btn-wrap {
	display: flex;
	margin-top: 20px;
}

.memberList-btn-wrap a {
	width: 100%;
	transition: all 0.3s ease-in-out;
}

.memberList-btn-wrap a i {
	margin-right: 5px;
}

.memberList-btn-wrap a.call-btn {
	background-color: darkgreen !important;
	color: white;
}

.memberList-btn-wrap a.call-btn:hover {
	background-color: green;
}

.memberList-btn-wrap a.detail-btn {
	background-color: rgb(0, 0, 128) !important;
	color: white;
}

.memberList-btn-wrap a.detail-btn:hover {
	background-color: rgb(0, 0, 128, 0.7) !important;
}

/* 제품주문페이지 */
.chat-container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
	border: 1px solid #ddd;
	background-color: #f9f9f9;
	height: 800px;
	overflow-y: auto;
	position: relative;
}

.chat-box {
	display: flex;
	flex-direction: column;
	margin-bottom: 20px;
}

.chat-message {
	display: flex;
	align-items: center;
	/* 수직 중앙 정렬 */
	background-color: #e6e6e6;
	padding: 10px;
	border-radius: 10px;
	margin-bottom: 10px;
	max-width: 70%;
}

.chat-question {
	background-color: #f1f1f1;
	text-align: left;
	align-self: flex-start;
}

.chat-answer {
	background-color: #4CAF50;
	color: white;
	text-align: right;
}

.right-box {
	display: flex;
	justify-content: flex-end;
}

.chat-options {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}

button.option {
	background-color: #4CAF50;
	color: white;
	padding: 10px;
	cursor: pointer;
	text-align: center;
	border: none;
	animation: slideInFromLeft 0.5s ease-in-out;
	/* 기본 왼쪽에서 등장하는 애니메이션 */
}

button.option.right {
	animation: slideInFromRight 0.5s ease-in-out;
	/* 오른쪽에서 등장하는 버튼 */
}

button.option:disabled {
	background-color: #ccc;
	cursor: not-allowed;
}

button.option:hover:not(:disabled) {
	background-color: #45a049;
}

@keyframes slideInFromLeft {
	0% {
		transform: translateX(-100%);
		opacity: 0;
	}

	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes slideInFromRight {
	0% {
		transform: translateX(100%);
		opacity: 0;
	}

	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

#selected-items {
	padding: 10px;
	border-radius: 0px;
	margin-bottom: 0px;
}

/* 애니메이션 */
@keyframes slideInFromRight {
	0% {
		transform: translateX(100%);
		opacity: 0;
	}

	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes slideOutToLeft {
	0% {
		transform: translateX(0);
		opacity: 1;
	}

	100% {
		transform: translateX(-100%);
		opacity: 0;
	}
}

#selected-items h3 {
	font-size: 16px;
}

.chat-box-item {
	margin-bottom: 10px;
}

/* 버튼 스타일 */
.back-button {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 1.5em;
	color: #333;
}

/* final-step 전체 디자인 */
div.chat-message.chat-question.final-step {
	width: 100%;
	max-width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px;
	background-color: #f9f9f9;
	margin-bottom: 10px;
	flex-wrap: nowrap;
	margin-top: 30px;
	/* 줄바꿈 방지 */
}

/* 선택이 완료되었습니다 텍스트 */
div.chat-message.chat-question.final-step span {
	font-size: 16px;
	font-weight: bold;
	color: #333;
	white-space: nowrap;
	/* 줄바꿈 방지 */
}

/* 수량 입력 필드 및 버튼들을 오른쪽 정렬 */
div.chat-message.chat-question.final-step .right-side {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	width: 100%;
}

/* 수량 입력 필드 및 레이블 */
div.chat-message.chat-question.final-step .quantity-input-container {
	display: flex;
	align-items: center;
}

div.chat-message.chat-question.final-step .quantity-input-container label {
	margin-right: 10px;
	font-size: 14px;
	color: #333;
}

div.chat-message.chat-question.final-step .quantity-input {
	width: 60px;
	padding: 5px;
	border-radius: 4px;
	border: 1px solid #ccc;
	font-size: 14px;
}

/* 버튼 영역 */
div.chat-message.chat-question.final-step .button-container {
	display: flex;
	gap: 10px;
}

/* 발주넣기 버튼 */
div.chat-message.chat-question.final-step .final-button.order-button {
	background-color: #4CAF50;
	color: white;
	border: none;
	padding: 10px 20px;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

/* 장바구니 버튼 */
div.chat-message.chat-question.final-step .final-button.cart-button {
	background-color: #2196F3;
	color: white;
	border: none;
	padding: 10px 20px;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

/* hover 효과 */
div.chat-message.chat-question.final-step .final-button.order-button:hover {
	background-color: #45a049;
}

div.chat-message.chat-question.final-step .final-button.cart-button:hover {
	background-color: #1e88e5;
}

/* 반응형: 화면 너비가 630px 이하일 때 수량과 버튼들이 아래로 배치됨 */
@media (max-width: 630px) {
	div.chat-message.chat-question.final-step {
		flex-wrap: wrap;
		/* 줄바꿈 허용 */
	}

	div.chat-message.chat-question.final-step .right-side {
		justify-content: flex-start;
		width: 100%;
		margin-top: 10px;
	}
}

i#bag-icon.active {
	color: darkred;
}

#cart-notification {
	position: fixed;
	top: 30px;
	right: 20px;
	width: 200px;
	padding: 10px;
	background-color: rgba(0, 0, 0, 0.8);
	color: white;
	text-align: center;
	border-radius: 5px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	opacity: 0;
	transition: opacity 0.3s ease;
}

/* fadeIn 효과 */
.fadeIn {
	opacity: 1 !important;
}

/* fadeOut 효과 */
.fadeOut {
	opacity: 0 !important;
}

.p-relative {
	position: relative;
}

.cart-remove {
	position: absolute;
	bottom: 0;
}

.ml-3 {
	margin-right: 30px;
}

.justify-space {
	justify-content: space-between;
}

.vertical-center div {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.payment-check-container {
	width: 100%;
	margin: 0 auto;
	padding: 20px;
}

.payment-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.payment-title h2 {
	margin: 0;
	font-size: 24px;
	font-weight: bold;
}

.same-address {
	display: flex;
	align-items: center;
}

.same-address input[type="checkbox"] {
	margin-right: 8px;
}

.payment-inputs {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.input-group {
	display: flex;
	align-items: center;
}

.input-group {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.form-item {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.form-item label {
	margin-bottom: 2px;
	/* 더 가까이 붙이기 */
	font-weight: 500;
	font-size: 14px;
	/* 크기 약간 줄이기 */
	line-height: 1.2;
	/* 라벨 간격 줄이기 */
	height: 20px !important;
	padding-left: 5px;
}

.same-address {
	display: flex;
	align-items: center;
	gap: 8px;
}

.same-address label {
	display: flex;
	align-items: center;
	margin: 0;
	font-size: 14px;
	line-height: 1;
}

.input-group input[type="text"],
select,
.input-group input[type="date"] {
	flex: 1;
	/* 남는 공간을 채우도록 */
	padding: 10px;
	font-size: 16px;
	border: 1px solid #ccc;
	border-radius: 4px;
	outline: none;
}

.input-group button {
	margin-left: 10px;
	padding: 10px 15px;
	font-size: 16px;
	background-color: #4CAF50;
	color: white;
	border: none;
	border-radius: 0px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.input-group button:hover {
	background-color: #45a049;
}

.input-wrapper {
	display: flex;
	align-items: center;
	margin-left: 20px;
	/* 버튼들과 input, 확인 버튼 사이 여백 */
}

.custom-input {
	width: 100px;
	height: 46px;
	/* input 너비 */
	border: 1px solid #ddd;
}

.confirm-button {
	padding: 5px 10px;
	background-color: #4CAF50;
	border: none;
	color: white;
	cursor: pointer;
	border-radius: 5px;
	height: 38px;
	/* 버튼들과 동일한 높이로 설정 */
}

.confirm-button:hover {
	background-color: #45a049;
}

/* 비규격주문 */
/* 공통 옵션 컨테이너 스타일 */
.option-container {
	position: relative;
	/* 덮개를 위한 상대적 위치 */
}

/* 옵션 영역 덮개 스타일 */
.disabled-option::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.3);
	/* 반투명 덮개 */
	pointer-events: all;
	/* 클릭 차단 */
	z-index: 1;
}

/* 채팅창 컨테이너 */
#chat-box {
	width: 100%;
	background-color: #f5f5f5;
	border-radius: 10px;
	overflow-y: auto;
	height: 800px;
}

/* wrap - 각 단계의 컨테이너 */
.non-standard-wrap {
	margin-bottom: 20px;
}

/* question - 왼쪽에 붙는 시스템 질문 스타일 */
.non-standard-question {
	background-color: #e0e0e0;
	border-radius: 10px;
	padding: 10px;
	max-width: 70%;
	text-align: left;
	margin-bottom: 10px;
	float: left;
	clear: both;
}

/* option - 왼쪽에 나타나는 옵션 스타일 */
.non-standard-option {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 20px;
	float: left;
	clear: both;
	width: 100%;
	position: relative;
}

/* answer - 사용자가 선택한 답변을 오른쪽에 붙임 */
.non-standard-answer {
	background-color: #d1e7dd;
	border-radius: 10px;
	padding: 10px;
	max-width: 100%;
	width: 100%;
	text-align: right;
	margin-bottom: 10px;
	float: right;
	clear: both;
}

.non-standard-answer .non-standard-btn {
	margin-left: 20px;
}

/* 버튼 스타일 */
.non-standard-btn {
	background-color: transparent;
	border: 1px solid #ddd;
	color: black;
	border-radius: 5px;
	padding: 10px 20px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.non-standard-btn {
	background-color: transparent;
	border: 1px solid #ddd;
	color: black;
	border-radius: 5px;
	padding: 10px 20px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.non-standard-btn:not(.non-answer-btn) {
	max-width: calc(20% - 10px);
	flex: 1 1 calc(20% - 10px);
	align-items: center;
}

@media (max-width: 768px) {
	.non-standard-btn:not(.non-answer-btn) {
		max-width: calc(50% - 10px);
		flex: 1 1 calc(50% - 10px);
	}
}

.non-answer-btn {
	border: 1px solid rgba(0, 0, 0, 0.3);
	max-width: 100%;
}

.non-standard-btn.product-option-btn {
	background-color: transparent;
	border: 1px solid #ddd;
	color: black;
	max-width: calc(20% - 10px);
	flex: 1 1 calc(20% - 10px);
	align-items: center;
	height: 100%;
	line-height: 1.4;
	display: flex;
	padding: 10px 10px;
}

.quantity-row {
	margin-bottom: 10px;
}

@media (max-width: 768px) {
	.non-standard-btn:not(.non-answer-btn) {
		max-width: calc(50% - 10px);
		flex: 1 1 calc(50% - 10px);
	}

	.non-standard-btn.product-option-btn {
		max-width: calc(50% - 10px);
		flex: 1 1 calc(50% - 10px);
	}

	.non-standard-answer {
		line-height: 1.3;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: nowrap;
		text-align: left;
		gap: 10px;
	}

	#final-wrap.non-standard-answer {
		flex-direction: column !important;
	}

	.non-standard-answer::before {
		content: '';
		display: table;
		flex-shrink: 0;
	}

	.non-standard-answer button {
		flex-shrink: 0;
		align-self: center;
		white-space: nowrap;
		margin-left: auto;
		margin-top: 0;
		margin-bottom: 0;
	}

	.quantity-row {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 10px;
		width: 100%;
		flex-wrap: nowrap;
	}

	.quantity-row label {
		display: flex;
		align-items: center;
	}

	.quantity-row .size-span {
		display: inline-block;
		width: auto;
		font-weight: bold;
	}

	.quantity-row input[type="number"] {
		width: 100%;
	}

	.quantity-row button {
		flex-shrink: 0;
		white-space: nowrap;
	}
}

.non-standard-btn.product-option-btn span {
	width: 50%;
	/* 텍스트 영역 너비 50% */
	text-align: center;
	/* 텍스트 가운데 정렬 */
	font-size: 13px;
	/* 텍스트 크기 */
	font-weight: 600;
	line-height: 1.2;
	margin-left: 5px;
	color: #333;
	/* 텍스트 색상 */
	display: flex;
	align-items: center;
	/* 세로 가운데 정렬 */
	justify-content: center;
	/* 가로 가운데 정렬 */
}

.non-standard-btn.product-option-btn img {
	width: 120px;
	/* 이미지 너비 50% */
	height: 120px;
	/* 이미지 높이 100% */
	margin-right: 5px;
	object-fit: cover;
	/* 이미지 비율 유지 */
	border-right: 1px solid #ddd;
	/* 이미지와 텍스트 사이 구분선 */
}

.non-standard-btn:hover {
	background-color: #0056b3;
}

.non-standard-btn:disabled {
	background-color: #f0f0f0;
	color: #aaa;
	border: 1px solid #ccc;
	cursor: not-allowed;
	pointer-events: none;
	/* hover 효과 차단 */
	transition: none;
	/* 애니메이션 제거 */
}

label {
	height: 48px;
}

input[readonly] {
	background-color: #f0f0f0;
	/* 연한 회색 */
	cursor: not-allowed;
	/* 사용 불가능한 커서 표시 */
	color: #888;
	/* 글자 색도 흐리게 */
	border: 1px solid #ccc;
	/* 테두리 색 변경 */
}

/* input 스타일 */
.non-standard-input {
	border: 1px solid #ccc;
	border-radius: 5px;
	margin-left: 5px;
	width: 200px;
	height: 100%;
}

#door-direction-input {
	width: 300px;
}

#final-wrap.non-standard-answer {
	width: 100%;
	max-width: 100% !important;
}

/* textarea 스타일 */
.non-standard-textarea {
	width: 100%;
	min-height: 100px;
	border: 1px solid #ccc;
	border-radius: 5px;
	padding: 10px;
	resize: vertical;
	/* 수직 방향으로만 크기 조절 */
	font-family: inherit;
	font-size: 1em;
	color: #333;
	background-color: #f9f9f9;
	margin-bottom: 10px;
	transition: border-color 0.3s ease;
}

.non-standard-textarea:focus {
	border-color: #007bff;
	outline: none;
}

/* input[type="file"] 스타일 */
.non-standard-file-upload {
	display: block;
	width: 100%;
	max-width: 100%;
	border: 1px solid #ccc;
	border-radius: 5px;
	padding: 10px;
	background-color: #e0e0e0;
	color: #333;
	font-family: inherit;
	cursor: pointer;
	transition: background-color 0.3s ease;
	margin-bottom: 10px;
}

.non-standard-file-upload:hover {
	background-color: #d0d0d0;
}

.non-standard-file-upload::file-selector-button {
	background-color: #007bff;
	color: white;
	border: none;
	border-radius: 5px;
	padding: 5px 15px;
	cursor: pointer;
	margin-right: 10px;
	transition: background-color 0.3s ease;
}

.non-standard-file-upload::file-selector-button:hover {
	background-color: #0056b3;
}


.disabled-option {
	opacity: 0.5;
	transition: opacity 0.5s ease-in-out;
}

.fadeOut {
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
	pointer-events: none;
}

.accordion-btn div.content {
	margin: 0px;
}

div.content.task-content {
	margin-left: 0px;
	margin-right: 0px;
}

.task-content p {
	margin-bottom: 0px;
}

#tab-group-1.content {
	padding-left: 0px;
	padding-right: 0px;
}

/* 오버레이 스타일 */
#order-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	/* 반투명한 검은색 */
	z-index: 9999;
	/* 모든 화면 요소 위에 표시되도록 */
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
	/* fadeIn/fadeOut 애니메이션 */
	pointer-events: none;
	/* 클릭 불가능 */
}



.loader-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	/* 반투명 뿌연 효과 */
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease-in-out;
	z-index: 9999;
	/* 화면의 가장 위에 표시 */
}

/* 로더 스타일 */
.loader img {
	width: 100px;
	height: 100px;
	animation: spin 1s linear infinite;
}

/* 로더 GIF 회전 애니메이션 */
@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

/* 오버레이 표시 클래스 */
.loader-overlay.show {
	opacity: 1;
	visibility: visible;
}

.fixed-button {
	position: fixed;
	width: 60px;
	height: 60px;
	background-color: #007bff;
	color: white;
	font-size: 18px;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transition: transform 0.3s, background-color 0.3s;
}

.fixed-button a {
	color: white;
	text-decoration: none;
}

/* 각 버튼 위치 설정 */
.fixed-button.drawing {
	right: 50px;
	bottom: 170px;
}

.fixed-button.three-d {
	right: 50px;
	bottom: 100px;
}

.fixed-button.star {
	right: 50px;
	bottom: 240px;
}

/* 호버 효과 */
.fixed-button a:hover {
	transform: scale(1.1);
	background-color: #0056b3;
}

/* 비활성화 상태 (notUsed 클래스) */
.fixed-button a.notUsed {
	color: white;
	pointer-events: none;
	/* 클릭 방지 */
	opacity: 0.5;
	/* 흐려짐 효과 */
	cursor: not-allowed;
}

/* 비활성화 상태에서는 호버 효과 제거 */
.fixed-button a.notUsed:hover {
	transform: none;
	background-color: #007bff;
}

.switch {
	position: relative;
	display: inline-block;
	width: 34px;
	height: 20px;
}

.switch input {
	display: none;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	transition: 0.4s;
	border-radius: 20px;
}

.slider:before {
	position: absolute;
	content: "";
	height: 14px;
	width: 14px;
	left: 3px;
	bottom: 3px;
	background-color: white;
	transition: 0.4s;
	border-radius: 50%;
}

input:checked+.slider {
	background-color: #4caf50;
}

input:checked+.slider:before {
	transform: translateX(14px);
}

.hidden-section {
	display: none;
	height: 0;
	overflow: hidden;
	/* 내용 잘림 방지 */
	transition: height 0.3s ease-in-out;
	/* 부드러운 애니메이션 */
	margin-top: 20px;
}

.input-style {
	display: flex;
	align-items: center;
	border: 1px solid #ddd;
	padding: 10px;
	border-radius: 8px;
	margin-bottom: 10px;
	background-color: #f9f9f9;
}

.input-style input {
	flex: 1;
	border: none;
	outline: none;
	font-size: 14px;
	background: transparent;
	margin-right: 10px;
}

.input-style button {
	white-space: nowrap;
	padding: 8px 12px;
	font-size: 14px;
	border: none;
	border-radius: 6px;
	background-color: #4caf50;
	color: white;
	cursor: pointer;
	transition: background-color 0.3s;
}

.input-style button:hover {
	background-color: #45a049;
}


/* 카트 아이콘에 수량 표시 */
#cart-product-amount {
	position: absolute;
	top: 3px;
	/* 아이콘 위로 약간 이동 */
	right: 3px;
	/* 아이콘 오른쪽으로 약간 이동 */
	background-color: black;
	/* 검정색 배경 */
	color: white;
	/* 하얀 글씨 */
	font-size: 12px;
	/* 글씨 크기 조정 */
	width: 16px;
	/* 동그라미 크기 */
	height: 16px;
	/* 동그라미 크기 */
	display: flex;
	/* 내용 중앙 정렬 */
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	/* 동그라미 모양 */
	font-weight: bold;
	/* 글씨 강조 */
	z-index: 10;
	/* 다른 요소 위에 표시 */
}

/* 아이콘 그룹 스타일 조정 */
#header-icon-4-group {
	position: relative;
	/* 자식 요소인 수량 배지 위치 기준 */
}

.address-container {
	margin-left: auto;
	/* 오른쪽 끝으로 이동 */
	display: flex;
	align-items: center;
	/* 체크박스와 텍스트를 세로로 정렬 */
	gap: 10px;
	/* 텍스트와 체크박스 사이 간격 */
}

.switch-label {
	display: flex;
	align-items: center;
	font-size: 14px;
	color: #333;
	gap: 8px;
	/* 텍스트와 스위치 사이 간격 */
}

.final-message-container {
	text-align: left;
	padding-left: 5px;
	margin-bottom: 10px;
}

.final-message-container .final-message-item {
	text-align: left;
	margin-bottom: 0px;
	line-height: 1.2;
	color: darkred;
}


/* 가격계산 영수증 디자인 */
.receipt-style {
	border: 1px dashed #888;
	background-color: #fefefe;
	padding: 15px;
	margin-top: 20px;
	border-radius: 8px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
	font-size: 14px;
	text-align: left;
}

.receipt-style h4 {
	margin-bottom: 10px;
	font-size: 16px;
	color: #333;
}

.receipt-style p {
	margin: 0px;
	line-height: 1.4;
}

.signUpImageBtn {
	display: inline-block;
	padding: 10px 16px;
	background-color: #007bff;
	color: white;
	font-size: 14px;
	border-radius: 6px;
	cursor: pointer;
}

.signUpImageBtn i {
	margin-right: 6px;
}

.signUpImageInput {
	display: none;
}

.required-text {
	margin-left: 10px;
	font-size: 12px;
	color: red;
	vertical-align: middle;
}

.file-list {
	list-style: none;
	padding-left: 0;
	margin-top: 10px;
}

.file-list li {
	display: flex;
	align-items: center;
	font-size: 14px;
	margin-bottom: 5px;
}

.file-list li .remove-file {
	margin-left: 10px;
	color: #ff4d4f;
	cursor: pointer;
	font-weight: bold;
}

button:disabled,
button[disabled] {
	background-color: #ccc !important;
	/* 회색 배경 */
	color: #888 !important;
	/* 글자색 연하게 */
	border: 1px solid #bbb !important;
	/* 테두리 연하게 */
	cursor: default !important;
	/* 마우스 커서 일반 */
	pointer-events: none;
	/* 호버 방지 */
	box-shadow: none !important;
	/* 그림자 제거 */
	transition: none !important;
	/* 애니메이션 제거 */
}

.preview-item {
	position: relative;
	width: 80px;
	height: 80px;
	border: 1px solid #ccc;
	border-radius: 8px;
	overflow: hidden;
}

.preview-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.preview-item .remove-btn {
	position: absolute;
	top: 2px;
	right: 2px;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
	cursor: pointer;
}

.mb-0 {
	margin-bottom: 0px;
}

.p-0 {
	padding: 0px !important;
}

.preview-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 10px;
}

.preview-item {
	position: relative;
	width: 100px;
	height: 100px;
	overflow: hidden;
	border-radius: 8px;
	border: 1px solid #ccc;
}

.preview-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
}

.remove-btn {
	position: absolute;
	top: 2px;
	right: 2px;
	background: rgba(0, 0, 0, 0.6);
	color: white;
	border: none;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	cursor: pointer;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
}

@media (max-width: 630px) {
	.preview-list {
		flex-direction: column;
	}

	.preview-item {
		width: 100%;
		height: auto;
	}
}

#cart-product-amount {
	display: none;
}

.standard-detail-container {
	padding: 20px;
}

.standard-detail-info {
	display: flex;
	gap: 20px;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 24px;
}

.standard-detail-image {
	flex: 0 0 150px;
}

.standard-detail-image img {
	max-width: 100%;
	border-radius: 12px;
}

.standard-detail-text {
	flex: 1;
}

.standard-detail-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.standard-detail-section {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.standard-detail-title {
	font-weight: 600;
	font-size: 1rem;
}

.standard-detail-radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.standard-detail-radio input[type="radio"]:checked+span {
	background-color: #f87171;
	color: #fff;
	font-weight: bold;
}

.standard-detail-radio {
	display: inline-block;
	cursor: pointer;
}

.standard-detail-radio span {
	display: inline-block;
	text-align: center;
	padding: 8px 16px;
	font-size: 13px;
	border: 1px solid #ccc;
	border-radius: 8px;
	background-color: #fff;
	transition: all 0.2s ease;
	min-width: 130px;
}

.standard-detail-radio span:hover {
	background-color: #f3f4f6;
}

@media (max-width: 600px) {
	.standard-detail-info {
		flex-direction: column;
		align-items: flex-start;
	}

	.standard-detail-image {
		width: 100%;
	}
}

/* 전체 영역 */
.standard-detail-final-section {
	padding-top: 20px;
	width: 100%;
	box-sizing: border-box;
}

/* textarea 전체 너비 */
.standard-detail-textarea {
	width: 100%;
	min-height: 100px;
	resize: vertical;
	padding: 12px;
	font-size: 14px;
	border-radius: 8px;
	border: 1px solid #ccc;
	box-sizing: border-box;
	margin-bottom: 16px;
}

/* 버튼 정렬 */
.standard-detail-button-group {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	flex-wrap: wrap;
}

/* 버튼 공통 스타일 */
.standard-detail-button-group button {
	padding: 10px 20px;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	font-weight: bold;
	transition: background-color 0.2s ease;
}

.standard-detail-btn-cart {
	background-color: #6c757d;
	color: white;
}

.standard-detail-btn-order {
	background-color: #007bff;
	color: white;
}

.standard-detail-btn-calculate {
	background-color: #28a745;
	color: white;
}

.standard-detail-button-group button:hover {
	opacity: 0.85;
}

/* disabled 버튼 스타일 */
.standard-detail-button-group button:disabled {
	background-color: #cccccc;
	cursor: not-allowed;
	opacity: 0.6;
}

/* 가격 결과 영역 */
.standard-detail-price-result {
	margin-top: 16px;
	background-color: #f9f9f9;
	padding: 12px;
	border-radius: 8px;
	border: 1px solid #ddd;
	font-size: 16px;
}

.standard-detail-price-result p {
	margin-bottom: 0px;
	line-height: 1.4;
	font-size: 14px;
}

.error-text-wrap p {
	margin-bottom: 0px;
	line-height: 1.4;
}

.calendar-task {
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 10px;
	margin-bottom: 15px;
	background-color: #f9f9f9;
}

.calendar-task-as {
	border-left: 4px solid #007bff;
}

.calendar-task-task {
	border-left: 4px solid #dc3545;
}

.calendar-task-order {
	background: white;
	border: 1px dashed #ddd;
	padding: 5px;
	border-radius: 6px;
}

.calendar-task span {
	display: inline-block;
	width: 100px;
	color: #666;
	font-weight: 500;
}

.calendar-task-empty {
	padding: 20px;
	text-align: center;
	color: #888;
}

/* 달력 스타일 */
#auto-calendar {
	margin: 0px auto;
}

.fc-daygrid-day {
	transition: background-color 0.3s ease;
	cursor: pointer;
}

/* 날짜 hover 효과 추가 */
.fc-daygrid-day:hover {
	background-color: rgb(177, 219, 224, 0.7);
}

/* 달력 스타일 */
#auto-calendar {
	margin: 0px auto;
}

/* 이벤트 타이틀이 길 경우 줄임표 처리 */
.fc-event-title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/* 모달 스타일 */
.auto-modal {
	display: none;
	position: fixed;
	z-index: 999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	/* 어두운 배경이 화면 전체에 적용 */

}

.auto-modal-content {
	background-color: white;
	margin: 5% auto;
	padding: 20px;
	position: relative;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	width: 90%;
	max-width: 600px;
	max-height: 80vh;
	/* 💡 모달 높이 고정 */
	display: flex;
	flex-direction: column;
}

#auto-modal-body {
	margin-top: 20px;
	overflow-y: auto;
	font-size: 16px;
	line-height: 1.5;
	flex: 1 1 auto;
	/* 💡 남은 공간만큼 차지 */
}


.auto-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 10px;
	border-bottom: 1px solid #ddd;
}

/* 개별 이벤트 항목 */
.event-item {
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 1px solid #eee;
}

.event-item p {
	margin-bottom: 0px;
	line-height: 1.4;
}

/* 닫기 버튼 */
#auto-close {
	position: absolute;
	right: 10px;
	top: 15px;
	font-size: 30px;
	font-weight: 600;
	cursor: pointer;
	color: #333;
}

#auto-close:hover {
	color: red;
}

/* 모바일에서도 달력이 스크롤 없이 높이가 자동 조정되도록 */
.fc-daygrid {
	height: auto !important;
}

h3#auto-modal-title {
	margin-bottom: 30px;
}

.calendar-task-order p,
.calendar-task-as p {
	margin-bottom: 0px;
	font-size: 13px;
}

.web-mb-5 {
	margin-bottom: 3rem !important;
}

@media(max-width:670px) {
	.web-mb-5 {
		margin-bottom: 0.5rem !important;
	}

	.footer {
		padding: 10px 30px 10px 30px;
		margin-bottom: 0px !important;
		z-index: 11;
	}
}

/* ============ index-popup.css ============ */
/* 오버레이 */
.index-popup-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	opacity: 1;
	transition: opacity .3s ease;
}

/* 모달 박스 */
.index-popup-modal {
	position: relative;
	background: #fff;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	width: 600px;
	/* PC 기준 가로 */
	height: 800px;
	/* PC 기준 세로 */
	max-width: 95vw;
}

/* 모바일: 가로 90%, 높이 500px (가로 우선, 높이 고정) */
@media (max-width: 768px) {
	.index-popup-modal {
		width: 90vw;
		height: 500px;
	}
}

/* 닫기(X) */
.index-popup-close {
	position: absolute;
	top: 6px;
	right: 10px;
	width: 32px;
	height: 32px;
	border: 0;
	background: transparent;
	font-size: 28px;
	line-height: 32px;
	cursor: pointer;
	color: #999;
	z-index: 2;
}

.index-popup-close:hover {
	color: #333;
}

/* 슬라이더 영역: 모달의 남은 공간을 채움 */
.index-popup-swiper {
	flex: 1 1 auto;
	min-height: 0;
	/* swiper overflow 대응 */
}

/* 슬라이드 콘텐츠 */
.index-popup-slide {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* 이미지 박스: 남은 공간을 꽉 채우되 아래 버튼/푸터 공간 고려 */
.index-popup-media {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f9f9f9;
	overflow: hidden;
	padding: 10px;
}

.index-popup-media img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* link 버튼 (있을 때만) */
.index-popup-link {
	padding: 10px 0px 0px 0px;
}

.index-popup-link-btn {
	display: inline-block;
	width: 100%;
	text-align: center;
	padding: 10px 12px;
	border: 1px solid #ddd;
	background: #222;
	color: #fff;
	text-decoration: none;
	font-weight: 600;
}

/* 하단: 다시 보지 않기 + 닫기 */
.index-popup-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px 14px 14px;
	border-top: 1px solid #f0f0f0;
	background: #fff;
}

.index-popup-nosee {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: #333;
}

.index-popup-hide-btn {
	padding: 8px 14px;
	border-radius: 10px;
	border: 1px solid #ddd;
	background: #fff;
	font-weight: 600;
	cursor: pointer;
}

/* 페이드아웃 효과 */
.index-popup-overlay.index-popup-fadeout {
	opacity: 0;
}

/* Swiper arrows color 대비 */
.swiper-button-prev,
.swiper-button-next {
	color: #333;
}

.swiper-pagination-bullet-active {
	background: #333;
}

/* Swiper 높이/레이아웃 보강 */
.index-popup-swiper {
	height: 100%;
}

.index-popup-swiper .swiper-wrapper {
	height: 100%;
}

.index-popup-swiper .swiper-slide {
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* Swiper 네비게이션 가시성/위치 보강 */
.index-popup-swiper .swiper-button-prev,
.index-popup-swiper .swiper-button-next {
	color: #333;
	/* 아이콘 컬러 */
	width: 34px;
	height: 34px;
	z-index: 3;
	/* 모달/이미지 위로 */
}

.index-popup-swiper .swiper-button-prev {
	left: 8px;
}

.index-popup-swiper .swiper-button-next {
	right: 8px;
}

/* 페이징 점 보강 */
.index-popup-swiper .swiper-pagination {
	bottom: 10px;
}

.index-popup-swiper .swiper-pagination-bullet-active {
	background: #333;
}

/* 컨테이너 스코프 안에서만 Swiper UI 스타일링 */
#index-popup-swiper .indexpop-button-prev,
#index-popup-swiper .indexpop-button-next {
	color: #333;
	width: 34px;
	height: 34px;
	z-index: 3;
}

#index-popup-swiper .indexpop-button-prev {
	left: 8px;
}

#index-popup-swiper .indexpop-button-next {
	right: 8px;
}

#index-popup-swiper .indexpop-pagination {
	bottom: 10px;
}

/* 기존 규칙 유지 */
.index-popup-swiper {
	height: 100%;
}

.index-popup-swiper .swiper-wrapper {
	height: 100%;
}

.index-popup-swiper .swiper-slide {
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* ============================
 * 팝업 푸터 - 체크박스 고정 & 정렬
 * ============================ */

/* 1) 어떤 전역 hover 규칙에도 숨겨지지 않도록 강제 */
#index-popup-overlay .index-popup-footer .index-popup-nosee input[type="checkbox"] {
	display: inline-block !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: static !important;
	transform: none !important;
	margin: 0 6px 0 0 !important;
	/* 텍스트와 간격 */
	width: 16px;
	height: 16px;
	vertical-align: middle;
	/* 인라인 흐름에서 수직 가운데 */
	accent-color: #222 !important;
	/* 체크 색 (원하시면 변경) */
}

/* hover 시에도 절대 숨기지 않도록 재확인 */
#index-popup-overlay .index-popup-footer .index-popup-nosee:hover input[type="checkbox"] {
	display: inline-block !important;
	visibility: visible !important;
	opacity: 1 !important;
	accent-color: #222 !important;
	transform: none !important;
}

/* 2) 라벨 자체를 수직 가운데 정렬 */
#index-popup-overlay .index-popup-footer .index-popup-nosee {
	display: inline-flex !important;
	align-items: center !important;
	/* 아이템 수직 정렬 */
	gap: 6px !important;
	line-height: 1.2;
}

/* 3) 텍스트도 미세 정렬 */
#index-popup-overlay .index-popup-footer .index-popup-nosee span {
	line-height: 1.2;
	display: inline-block;
}

/* 기본 모양 제거 후 커스텀 */
#index-popup-overlay .index-popup-footer .index-popup-nosee input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	border: 2px solid #222;
	/* 테두리 색 */
	border-radius: 4px;
	/* 모서리 */
	background: #fff;
	/* 바탕색 */
	display: inline-block;
	position: relative;
	cursor: pointer;
	margin: 0 6px 0 0;
	vertical-align: middle;
}

#index-popup-overlay .index-popup-footer .index-popup-nosee input[type="checkbox"]:hover {
	box-shadow: 0 0 0 3px rgba(34, 34, 34, .12);
}

#index-popup-overlay .index-popup-footer .index-popup-nosee input[type="checkbox"]:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(34, 34, 34, .18);
}

/* 체크되었을 때 내부 채움색 */
#index-popup-overlay .index-popup-footer .index-popup-nosee input[type="checkbox"]:checked {
	background: #222;
	/* 채움색 */
	border-color: #222;
}

/* 체크 아이콘(✓) */
#index-popup-overlay .index-popup-footer .index-popup-nosee input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 0px;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}


/* ✅ 시리즈 버튼 전용: 텍스트(좌) + 이미지(우) 로 구성하므로 보더/마진 방향을 반대로 오버라이드 */
.non-standard-btn.product-option-btn.series-option-btn {
	display: flex;
	/* 혹시 기존에 없을 경우 대비 */
	align-items: center;
}

/* ✅ 기존 product-option-btn img 스타일을 시리즈에서 반전 */
.non-standard-btn.product-option-btn.series-option-btn img {
	margin-right: 5px;
	/* 이미지가 우측이므로 왼쪽 여백 */
	border-right: 1px solid #ddd;
	/* 우측 이미지의 좌측에 구분선 */
}


/* 퀵 메뉴 */
.index-third-quickmenu {
	position: fixed;
	right: 10px;
	bottom: 50px;
	z-index: 1060;
	width: 168px;
	padding: 10px 10px 12px;
	border-radius: 14px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
	backdrop-filter: blur(6px);
}

.index-third-quickmenu-title {
	font-weight: 800;
	font-size: 13px;
	margin-bottom: 8px;
	letter-spacing: -0.2px;
}

.index-third-quickmenu-btn {
	border-radius: 12px;
	padding: 8px 10px;
	font-weight: 700;
}

.index-third-quickmenu-btn:hover {
	filter: brightness(0.98);
}

@media (max-width: 767.98px) {
	.index-third-quickmenu {
		width: 96px;
		padding: 10px;
	}
}

/* =========================
	   ✅ 모달 스크롤/레이아웃 보강
	   - 내용 많아지면 모달 내부 스크롤
	   ========================= */
#auto-modal.auto-modal {
	/* 기존 공용 CSS가 있어도 안전하게 동작하도록 보강 */
	overflow: auto;
}

#auto-modal .auto-modal-content {
	/* 제목/닫기 고정 + 본문만 스크롤 */
	display: flex;
	flex-direction: column;
	max-height: 85vh;
	overflow: hidden;
}

#auto-modal #auto-modal-body {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding-right: 4px;
	/* 스크롤바 겹침 방지 */
}

/* 모달 섹션(제품정보/고객정보) */
.index-third-modal-section {
	padding-top: 10px;
	margin-top: 10px;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.index-third-modal-section:first-child {
	border-top: 0;
	margin-top: 0;
	padding-top: 0;
}

.index-third-modal-section-title {
	font-weight: 900;
	font-size: 14px;
	margin-bottom: 8px;
	letter-spacing: -0.2px;
}

.index-third-modal-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

.index-third-modal-label {
	min-width: 86px;
	font-size: 12px;
	opacity: 0.75;
	font-weight: 500;
}

.index-third-modal-value {
	flex: 1;
	text-align: right;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: -0.1px;
	word-break: break-word;
}

.index-third-aslist-title {
	font-weight: 900;
	letter-spacing: -0.2px;
}

.index-third-aslist-subtitle {
	letter-spacing: -0.2px;
}

.index-third-aslist-section-title {
	font-weight: 900;
	font-size: 14px;
	letter-spacing: -0.2px;
	margin-bottom: 10px;
}

.index-third-aslist-field {
	border: 1px solid rgba(0, 0, 0, 0.06);
	background: rgba(0, 0, 0, 0.02);
	padding: 5px 6px;
}

.index-third-aslist-label {
	font-size: 12px;
	opacity: 0.7;
	font-weight: 800;
	min-width: 86px;
}

.index-third-aslist-value {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: -0.1px;
}

.client-as-update-first-trigger-wrap {
	display: flex;
	justify-content: flex-end;
	margin-top: 16px;
}

.client-as-update-first-trigger-btn {
	min-width: 108px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
}

.client-as-update-first-modal .modal-content {
	border: 0;
	border-radius: 18px;
	overflow: hidden;
}

.client-as-update-first-modal .modal-header,
.client-as-update-first-modal .modal-footer {
	padding: 16px 20px;
}

.client-as-update-first-modal .modal-body {
	padding: 20px;
	background: #f8f9fa;
}

.client-as-update-first-section {
	background: #fff;
	border: 1px solid #eceff3;
	border-radius: 16px;
	padding: 18px;
	margin-bottom: 16px;
}

.client-as-update-first-section-title {
	font-size: 15px;
	font-weight: 800;
	margin-bottom: 14px;
	color: #1f2937;
}

.client-as-update-first-label {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	margin-bottom: 6px;
	color: #495057;
}

.client-as-update-first-required {
	color: #dc3545;
	margin-left: 4px;
}

.client-as-update-first-input,
.client-as-update-first-select,
.client-as-update-first-textarea {
	width: 100%;
	min-height: 46px;
	border-radius: 12px;
	border: 1px solid #dee2e6;
	padding: 10px 14px;
	background: #fff;
}

.client-as-update-first-textarea {
	min-height: 110px;
	resize: vertical;
}

.client-as-update-first-input[readonly] {
	background: #f8f9fa;
}

.client-as-update-first-file-trigger {
	min-width: 120px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
}

.client-as-update-first-file-guide {
	font-size: 12px;
	color: #6c757d;
	margin-top: 8px;
}

.client-as-update-first-image-card {
	position: relative;
	border: 1px solid #e9ecef;
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	height: 100%;
}

.client-as-update-first-image-card img {
	width: 100%;
	height: 120px;
	object-fit: cover;
	display: block;
	background: #f8f9fa;
}

.client-as-update-first-image-name {
	padding: 8px 10px;
	font-size: 11px;
	color: #495057;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.client-as-update-first-image-action {
	position: absolute;
	top: 8px;
	right: 8px;
	min-width: 52px;
	height: 28px;
	border: 0;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	padding: 0 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

.client-as-update-first-image-action-remove {
	background: rgba(220, 53, 69, .95);
	color: #fff;
}

.client-as-update-first-image-action-restore {
	background: rgba(25, 135, 84, .95);
	color: #fff;
}

.client-as-update-first-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 120px;
	border: 1px dashed #ced4da;
	border-radius: 14px;
	color: #6c757d;
	font-size: 13px;
	background: #fff;
	text-align: center;
	padding: 16px;
}

.client-as-update-first-footer-guide {
	font-size: 12px;
	color: #6c757d;
	margin-right: auto;
}

.client-as-update-first-submit-btn[disabled] {
	opacity: .6;
	cursor: not-allowed;
}

@media (max-width: 991.98px) {
	.client-as-update-first-modal .modal-dialog {
		margin: 12px;
	}

	.client-as-update-first-modal .modal-body {
		padding: 14px;
	}

	.client-as-update-first-section {
		padding: 14px;
		border-radius: 14px;
	}
}

.client-as-update-first-modal {
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch;
}

.client-as-update-first-modal .modal-dialog {
	margin: 1rem auto;
}

.client-as-update-first-modal .modal-content {
	border: 0;
	border-radius: 18px;
	overflow: hidden;
	max-height: calc(100vh - 2rem);
}

.client-as-update-first-modal .modal-header,
.client-as-update-first-modal .modal-footer {
	padding: 16px 20px;
	flex-shrink: 0;
	background: #fff;
	z-index: 2;
}

.client-as-update-first-modal .modal-body {
	padding: 20px;
	background: #f8f9fa;
	overflow-y: auto !important;
	overflow-x: hidden;
	max-height: calc(100vh - 160px);
	-webkit-overflow-scrolling: touch;
}

.client-as-update-first-section {
	background: #fff;
	border: 1px solid #eceff3;
	border-radius: 16px;
	padding: 18px;
	margin-bottom: 16px;
}

@media (max-width: 991.98px) {
	.client-as-update-first-modal .modal-dialog {
		margin: 10px;
		max-width: none;
	}

	.client-as-update-first-modal .modal-content {
		max-height: calc(100vh - 20px);
		border-radius: 16px;
	}

	.client-as-update-first-modal .modal-body {
		padding: 14px;
		max-height: calc(100vh - 140px);
	}

	.client-as-update-first-section {
		padding: 14px;
		border-radius: 14px;
	}
}

.client-as-update-first-modal .modal-body {
	touch-action: pan-y;
}

.as-request-fifth-section-card {
	padding: 18px 16px;
}

.as-request-fifth-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.as-request-fifth-section-head h2,
.as-request-fifth-section-head h3 {
	margin: 0;
	font-size: 20px;
	font-weight: 800;
}

.as-request-fifth-section-desc {
	color: #7b8794;
	font-size: 13px;
	margin-bottom: 18px;
}

.as-request-fifth-inline-check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	color: #344054;
}

.as-request-fifth-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.as-request-fifth-billing-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 10px 0 4px;
}

.as-request-fifth-billing-item {
	flex: 1 1 140px;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	padding: 12px 14px;
	background: #fff;
	display: flex;
	align-items: center;
	gap: 8px;
}

.as-request-fifth-attachment-box {
	border: 1px dashed #cbd5e1;
	border-radius: 16px;
	padding: 14px;
	background: #f8fafc;
}

.as-request-fifth-attachment-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 16px;
	border: 0;
	border-radius: 12px;
	background: #d92027;
	color: #fff;
	font-weight: 800;
	cursor: pointer;
}

.as-request-fifth-attachment-help {
	margin-top: 10px;
	font-size: 12px;
	color: #667085;
}

.as-request-fifth-preview-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 14px;
}

.as-request-fifth-preview-item {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	border: 1px solid #e5e7eb;
	min-height: 140px;
}

.as-request-fifth-preview-item img,
.as-request-fifth-preview-item video {
	width: 100%;
	height: 140px;
	object-fit: cover;
	display: block;
	background: #000;
}

.as-request-fifth-preview-file {
	min-height: 140px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 16px;
	text-align: center;
	gap: 8px;
	color: #344054;
	font-size: 12px;
	font-weight: 700;
}

.as-request-fifth-remove-attachment-btn {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 50%;
	background: rgba(17, 24, 39, 0.88);
	color: #fff;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.as-request-fifth-product-section {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transform: translateY(12px);
	transition: max-height .35s ease, opacity .28s ease, transform .28s ease, margin .35s ease;
	margin-bottom: 0;
}

.as-request-fifth-product-section.as-request-fifth-mounted {
	max-height: 4000px;
	opacity: 1;
	transform: translateY(0);
	margin-bottom: 16px;
}

.as-request-fifth-product-section-inner {
	border: 1px solid #e5e7eb;
	border-radius: 18px;
	background: #fff;
	padding: 18px 16px;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.as-request-fifth-product-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 14px;
}

.as-request-fifth-product-title h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
}

.as-request-fifth-product-actions {
	display: flex;
	gap: 8px;
}

.as-request-fifth-btn-soft {
	border: 1px solid #e5e7eb;
	background: #fff;
	color: #344054;
	border-radius: 12px;
	min-height: 40px;
	padding: 0 14px;
	font-weight: 800;
	cursor: pointer;
}

.as-request-fifth-btn-danger {
	border: 1px solid #fecaca;
	background: #fff5f5;
	color: #d92d20;
}

.as-request-fifth-progress-card {
	display: none;
	margin-bottom: 16px;
	border: 1px solid #f1f5f9;
	border-radius: 16px;
	background: #fff;
	padding: 16px;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.as-request-fifth-progress-card.active {
	display: block;
}

.as-request-fifth-progress-bar-wrap {
	width: 100%;
	height: 12px;
	background: #edf2f7;
	border-radius: 999px;
	overflow: hidden;
	margin-top: 10px;
}

.as-request-fifth-progress-bar {
	width: 0%;
	height: 100%;
	background: linear-gradient(90deg, #d92027, #ff6b6b);
	transition: width .2s ease;
}

.as-request-fifth-bottom-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 8px;
}

.as-request-fifth-submit-btn[disabled],
.as-request-fifth-add-btn[disabled],
.as-request-fifth-btn-soft[disabled] {
	opacity: .6;
	cursor: not-allowed;
}

@media (max-width: 576px) {
	.as-request-fifth-grid-2 {
		grid-template-columns: 1fr;
	}

	.as-request-fifth-preview-list {
		grid-template-columns: 1fr 1fr;
	}
}

.as-request-fifth-inline-check {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: #344054 !important;
	cursor: pointer !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.as-request-fifth-inline-check:hover,
.as-request-fifth-inline-check:focus,
.as-request-fifth-inline-check:active {
	opacity: 1 !important;
	visibility: visible !important;
}

.as-request-fifth-inline-check input[type="checkbox"] {
	appearance: auto !important;
	-webkit-appearance: checkbox !important;
	-moz-appearance: checkbox !important;
	display: inline-block !important;
	position: static !important;
	width: 16px !important;
	height: 16px !important;
	min-width: 16px !important;
	min-height: 16px !important;
	margin: 0 !important;
	padding: 0 !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	accent-color: #d92027 !important;
	transform: none !important;
	filter: none !important;
	clip: auto !important;
	overflow: visible !important;
	z-index: auto !important;
	vertical-align: middle !important;
	box-shadow: none !important;
	background: #fff !important;
}

.as-request-fifth-inline-check input[type="checkbox"]:hover,
.as-request-fifth-inline-check input[type="checkbox"]:focus,
.as-request-fifth-inline-check input[type="checkbox"]:active {
	appearance: auto !important;
	-webkit-appearance: checkbox !important;
	-moz-appearance: checkbox !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	filter: none !important;
	clip: auto !important;
	background: #fff !important;
}

.as-request-fifth-inline-check span {
	opacity: 1 !important;
	visibility: visible !important;
}

.as-request-fifth-billing-item {
	opacity: 1 !important;
	visibility: visible !important;
}

.as-request-fifth-billing-item:hover,
.as-request-fifth-billing-item:focus,
.as-request-fifth-billing-item:active {
	opacity: 1 !important;
	visibility: visible !important;
}

.as-request-fifth-billing-item input[type="radio"] {
	appearance: auto !important;
	-webkit-appearance: radio !important;
	-moz-appearance: radio !important;
	display: inline-block !important;
	position: static !important;
	width: 16px !important;
	height: 16px !important;
	min-width: 16px !important;
	min-height: 16px !important;
	margin: 0 !important;
	padding: 0 !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	accent-color: #d92027 !important;
	transform: none !important;
	filter: none !important;
	clip: auto !important;
	overflow: visible !important;
	z-index: auto !important;
	vertical-align: middle !important;
	box-shadow: none !important;
	background: #fff !important;
}

.as-request-fifth-billing-item input[type="radio"]:hover,
.as-request-fifth-billing-item input[type="radio"]:focus,
.as-request-fifth-billing-item input[type="radio"]:active {
	appearance: auto !important;
	-webkit-appearance: radio !important;
	-moz-appearance: radio !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	filter: none !important;
	clip: auto !important;
	background: #fff !important;
}

.as-request-fifth-billing-item span {
	opacity: 1 !important;
	visibility: visible !important;
}

.as-management-third-preview-item {
	position: relative;
}

.as-management-third-preview-remove,
.as-management-third-img-remove-btn,
.as-management-third-video-remove-btn,
.as-management-third-img-download {
	position: relative;
	z-index: 30 !important;
	pointer-events: auto !important;
}

.as-management-third-media-trigger {
	cursor: zoom-in;
}