#design_cloth_form input[type="radio"]{display: none;}
#cloth_preview {
	background: #ececec;
	width: 100%;
	padding: 0;
	border-radius: var(--br);
	overflow: hidden;
	border: 2px solid #ccc;
	margin: auto;
	position: sticky;
	top: 0px;
}
#cloth_preview img {
	width: 100%;
	height: 100%;
}
.tab_contents_wrap {
	position: sticky;
	top: 10px;
}
.tshirt_side_btns {
	display: flex;
	justify-content: end;
	align-items: center;
	gap: 5px;
	position: absolute;
	left: -5px;
	top: 20px;
	flex-direction: column;
	z-index: 10;
}
.cloth_type {
  font-size: 11px;
  max-width: 80px;
  text-align: center;
  font-weight: bold;
}
.tshirt_side_btns li {
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 0 6px 6px 0;
	padding: 6px 22px !important;
	cursor: pointer;
	font-size: 15px;
	list-style: none;
}
.tshirt_side_btns li:hover, .tshirt_side_btns li.active {background: var(--mc);color: #fff;border-color: var(--mc);}
.image_circle {
	border-radius: 100px;
	width: 80px;
	height: 80px;
	object-fit: cover;
}
.design_tool_item, .design_price_wrap {
	border: 1px solid #ddd;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	background: #eee;
	padding: 15px 20px;
	border-radius: var(--br);
	font-size: 14px;
	position: relative;
	margin-bottom: 20px;
}
.design_tool_item::before {
	content: '';
	height: 80%;
	width: 10px;
	background-color: #ddd;
	position: absolute;
	top: 50%;
	right: -5px;
	border-radius: 50px;
	transform: translateY(-50%);
	z-index: -1;
}
.design_tool_item_title {
	font-size: 15px;
}
.custom_text_control_item_unit {
	background: #f5f7fb;
	width: 34px;
	border-radius: 3px;
	font-size: 10px;
	font-weight: 700;
	height: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	transform: rotate(-90deg);
}
.color_item {
	position: relative;
	width: 34px;
	height: 34px;
	border-radius: 30px;
	border: 2px solid #ddd;
	cursor: pointer;
	transition: 0.2s all;
}
.color_item.active {
	border-color: var(--mc);
}
.color_item:before{
	content: '';
	width: 24px;
	height: 24px;
	opacity: 0;
	visibility: hidden;
	position: absolute;
	top: 50%;
	left: 50%;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M7 12L9.89075 14.8907V14.8907C9.95114 14.951 10.049 14.9511 10.1094 14.8907V14.8907L17 8' stroke='%23323232' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	transform: translate(-50%, -50%);
}
.color_item.active:before{opacity: 1;visibility: visible;}
.cloth_size {
	background: #fff;
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 6px;
	border: 2px solid transparent;
	transition: 0.1s all;
	cursor: pointer;
}
.cloth_type img{transition: 0.1s all;border: 2px solid transparent;cursor: pointer;}
.cloth_size:has(input:checked), .cloth_type:has(input:checked) img{border-color: var(--mc);}
.cloth_size::selection{background-color: transparent;}
.target-box {
	border: 2px dashed #aaa;
	position: absolute;
	top: 16%;
	left: 26%;
	overflow: hidden;
	z-index: 10;
	bottom: 11%;
	right: 26%;
}
.draggable-img {
	position: absolute;
	width: 80px; height: 80px; cursor: move;
}
.item-wrapper {
	position: absolute;
	cursor: grab; overflow: hidden;
}
.item-wrapper.ui-draggable-dragging {
	cursor: grabbing;
}
.item-wrapper img {
	width: 100%; height: 100%; display: block; /* تصویر داخل wrapper پر کنه */
}
.item-wrapper.ui-resizable-resizing {
	border: 2px dashed #007bff;
}
.ui-resizable-handle {
	display: block !important; 
	visibility: visible !important;
	width: 10px;
	height: 10px;	
	opacity: 0;
	border-color: #666 !important;
	border-style:solid;
}
.selected_item .ui-resizable-handle{opacity: 0.7;}
body .ui-resizable-handle:hover { opacity: 1; border-color: #0056b3 !important;}
body .ui-resizable-n { top: 0px; left: 50%; margin-left: 0px; border-width:2px 0 0 0; cursor: n-resize;height: fit-content;width: 8px; } /* شمال */
body .ui-resizable-s { bottom: 0px; left: 50%; margin-left: -8px; border-width:0 0 2px 0;cursor: n-resize;height: fit-content;width: 8px;  } /* جنوب */
body .ui-resizable-e { right: 0px; top: 50%; margin-top: 0px; border-width:0 2px 0 0;cursor: e-resize;height: fit-content; } /* شرق */
body .ui-resizable-w { left: 0px; top: 50%; margin-top: 0px; border-width:0 0 0 2px;cursor: e-resize;height: fit-content; } /* غرب */
body .ui-resizable-ne { top: 0px; right: 0px; border-width:2px 2px 0 0;cursor: ne-resize; } /* شمال شرقی */
body .ui-resizable-se { bottom: 0px; right: 0px; border-width:0 2px 2px 0; cursor: nw-resize;width: 9px;height: 9px;} /* جنوب شرقی */
body .ui-resizable-sw { bottom: 0px; left: 0px; border-width:0 0 2px 2px;cursor: ne-resize;width: 9px;height: 9px; } /* جنوب غربی */
body .ui-resizable-nw { top: 0px; left: 0px; border-width:2px 0 0 2px;cursor: nw-resize;} /* شمال غربی */
.ui-resizable{padding: 2px;position:absolute;}
.ui-resizable-handle {position: absolute;}
.capturing{border-color: transparent !important;}
.avatar_box {
	background: #fff;
	border-radius: var(--br);
	border: 1px solid #fff;
	width: 150px;
	height: 100px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 5px;
	font-size: 14px;
	justify-content: center;
	cursor: pointer;
	max-width: 100%;
	overflow-x: auto;
}
#source-image , .user_upload_image_wrap{
	display: flex;
	justify-content: start;
	align-items: center;
	gap: 10px;
}
.show_more_avatars_btn {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	color: #444;
	background: #f5f7fb;
	cursor: pointer;
}
.avatar_box .source_image_item, label[for="user_avatar"]{min-width: 80px;width: 80px;height: 80px;object-fit:cover;border-radius: var(--br);border: 1px solid #eee;cursor: pointer;}
.avatar_box_wrap{max-width: 0;height: 0;overflow: hidden;transition: 0.3s all;}
.avatar_box_wrap.active {max-width: 1000px;height: auto;transition: 0.3s all;}
.avatar_box.active{width: fit-content;padding: 5px 10px;flex-direction: row;}
.avatar_box .avatar_box_title{height: 100%;display: flex;justify-content: center;align-items: center;gap:10px;}
.avatar_box.active .avatar_box_title{font-size: 0;background: #f5f7fb;width: 35px;border-radius: 0 var(--br) var(--br) 0;gap: 0;margin-left: 10px;}
.avatar_box.active svg{transform: rotate(180deg);}
.design_image_controls {
	position: absolute;
	top: 20px;
	right: -70px;
	z-index: 10;
	display: flex;
	flex-direction: column;
	gap: 5px;
	transition: 0.3s all;
}
#cloth_preview:hover .design_image_controls{right: 10px;}
.design_image_controls button {
	padding: 10px; 
	font-size: 14px;
	cursor: pointer; 
	border: 1px solid #ccc; 
	border-radius: 5px;
	background: #f8f9fa; 
	transition: 0.2s;
}
.design_image_controls button:disabled {
	opacity: 0.5; cursor: not-allowed; background: #eee;
}
.design_image_controls button:hover:not(:disabled) {
	background: #e2e6ea;
}
.context-menu {
	position: absolute; z-index: 99; background: white; border: 1px solid #ccc;
	box-shadow: 0 2px 10px rgba(0,0,0,0.2); border-radius: 5px; min-width: 180px;
	display: none;font-size:13px;
}
.context-menu ul{ list-style: none; margin: 0; padding: 5px 0; }
.context-menu li{ padding: 8px 15px !important; cursor: pointer; }
.context-menu li:hover{ background: #f0f0f0; }
.context-menu li.separator , .custom_text_controls li.separator { border-top: 1px solid #eee; margin: 5px 0 !important; padding: 0 !important; height: 1px; }
.custom_text_controls{
	position: absolute; 
	top: 18%;
	left: 5px;
	display: flex;
	flex-direction: column;
	align-items: end;
	gap: 10px;
	opacity: 0;
	background: #fff;
	border-radius: var(--br);
	padding: 10px;
	width: 210px;
	visibility: hidden;
	z-index: 10000;
}
.custom_text_control_item label {
	min-width: 45px;
	width: 45px;
	text-align: left;
}
.close_box{
	position: absolute;
	right: 10px;
	top: 10px;
	cursor: pointer;
}
#custom_text_controls .custom_text_control_item {
	white-space: nowrap;
	background: #fff;
	font-size: 12px;
	font-weight: 300;
	display: flex;
	gap: 5px;
	width: 100%;
	justify-content: end;
	align-items: center;
}
.custom_text_controls.active{opacity: 1;visibility: visible;}
.text-item {
	position: absolute;
	cursor: move;
	user-select: none;
	padding: 5px;
	min-width: 50px;
	text-align: center;
	transform-origin: center;
}
.toggle-wrapper {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	user-select: none;
}
.toggle-input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.toggle-label {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
	background-color: #ccc;
	border-radius: 10px;
	transition: background-color 0.3s ease;
	cursor: pointer;
}
.toggle-label::after {
	content: '';
	position: absolute;
	width: 26px;
	height: 26px;
	left: 4px;
	top: 4px;
	background-color: white;
	border-radius: 10;
	transition: transform 0.3s ease;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.toggle-input:checked + .toggle-label {
	background-color: #4CAF50;
}
.toggle-input:checked + .toggle-label::after {
	transform: translateX(26px);
}
.toggle-input:focus-visible + .toggle-label {
	outline: 2px solid #4CAF50;
	outline-offset: 2px;
}
#textColor {
	position: relative;
	width: 32px;
	height: 32px;
	border-radius: 2px;
	cursor: pointer;
	padding: 0;
	transition: 0.2s all;
}
input[type="range"] {
	accent-color: #007bff;
}
input[type="number"]:focus-visible {
	outline: 0;
	border-color: var(--mc);
}
#my_custom_text {
	width: 400px;
	max-width: 100%;
	border: 1px solid #ddd;
	border-radius: 5px;
	padding: 10px;
	font-size: 14px;
}
#my_custom_text:focus:focus-visible {
	box-shadow: unset;
	outline: 0;
}
.add_custom_text {
	background: var(--mc);
	color: #fff;
	padding: 10px;
	border-radius: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.input-panel {
	display: flex;
	gap: 10px;
}
.final_price {
	font-size: 18px;
	font-weight: 700;
	color: var(--mc);
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
input[type=number] { -moz-appearance:textfield;}
input[type="number"] {
	min-width: 50px;
	height: 32px;
	border: 1px solid #ddd;
	border-radius: 8px;
	text-align: center;
}
.custom_text_controls select {
	background: #fff;
	border: 1px solid #ddd;
	height: 32px;
	width: 100%;
	border-radius: 8px;
	padding: 8px;
}
.design_price_wrap .rb_btn {
	min-width: 166px;
	min-height: 45px;
}
.design_container{position: relative;}
#cloth_preview.active::before {
	content: "";
	right: 0;
	left: 0;
	height: 2px;
	position: absolute;
	top: 115px;
	background: #ce0303a1;
	box-shadow: 0 0 13px #c21313;
	border-radius: 100px;
	width: 100%;
	margin: auto;
	z-index: 99;
}
#cloth_preview.active::after {
	content: "";
	right: 0;
	left: 0;
	height: 100%;
	position: absolute;
	top: 0;
	background: #0003;
	box-shadow: 0 0 10px 0 red;
	z-index: 99;
}
#cloth_preview.active:before{
	animation:2s scan infinite linear;
}
@keyframes scan{
	0%{top:-20px;}
	50%{top:100%;}
	100%{top:-20px;}
}
.custom_text_control_item_font [type=range] {-webkit-appearance: none;-moz-appearance: none;appearance: none;background-color: transparent;cursor: pointer;width: 100%;}
.custom_text_control_item_font [type=range]::-webkit-slider-runnable-track {
	height: 8px;
	background-color: #ddd;
	border-radius: var(--border-raduis);
}
.custom_text_control_item_font [type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 1.5rem;
	height: 1.5rem;
	background-color: var(--main-color);
	border-radius: 50%;
	margin-top: calc(calc(0.75rem / 2) - calc(1.5rem / 2));
	box-shadow: 0 0 3px hsl(var(--cyan-semi-color));
}
.custom_text_control_item_font [type=range]::-moz-range-track {
	height: 0.75rem;
	background-color: #ddd;
	border-radius: calc(var(--border-radius, 20px) / 2);
}
.custom_text_control_item_font [type=range]::-moz-range-thumb {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 1.5rem;
	height: 1.5rem;
	background-color: var(--main-color);
	border-radius: 50%;
	margin-top: calc(calc(0.75rem / 2) - calc(1.5rem / 2));
	border: none;
	box-shadow: 0 0 3px hsl(var(--cyan-light-color));
}
.custom_text_control_item_font [type=range]:focus {outline: none;}
.custom_text_control_item_font [type=range]:focus::-webkit-slider-thumb {
	outline: 2px solid black;
	outline-offset: 1px;
}
.custom_text_control_item_font [type=range]:focus::-moz-range-thumb {
	outline: 2px solid black;
	outline-offset: 1px;
}
.change_count {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0px;
}
.change_count span { cursor: pointer;}
.change_count span:hover svg{fill: var(--main-color); }






@media (max-width: 991px){
	.context-menu{min-width: 200px; width: fit-content;left: 50% !important;transform: translateX(-50%);bottom: -17px;top: auto !important;}
	.context-menu li {padding: 6px 8px !important;flex: auto;}
	#context-menu ul {display: flex;justify-content: center;gap: 10px;align-items: center;flex-wrap: nowrap;flex-direction: row !important;}
	.avatar_box_wrap.active:has(img){padding-bottom: 10px;overflow-x: auto;}
	#design_cloth_form {margin-bottom: 15px;}
	.design_image_controls button{padding: 3px;}
	.tshirt_side_btns li{padding: 5px 10px;font-size: 12px;}
	.design_price_wrap .rb_btn {padding: 10px !important;font-size: 13px;min-width: 128px;min-height: 40px;}
	.design_price_wrap .rb_flex_start_wrap {flex-direction: column;align-items: start;gap: 5px;}
	#my_custom_text{font-size: 12px;}
	.input-panel{gap: 5px;}
	.final_price {font-size: 16px;}
	#custom_text_controls label svg {width: 21px;height: 21px;}
	.custom_text_control_item label {min-width: 25px;width: 25px;}
	.add_custom_text{text-align: center;font-size: 12px;}
	.custom_text_controls{padding: 8px;width: 140px;gap: 5px;}
	.change_count span {height: 16px;display: flex;justify-content: center;align-items: center;}
	#textColor{width: 26px;height: 26px;padding: 0;}
	.design_tool_item, .design_price_wrap {font-size: 13px;gap: 15px;}
	.design_tool_item strong {flex: 0 0 100%;margin-bottom: 5px;}
	.avatar_box {font-size: 13px;}
	.avatar_box .source_image_item, label[for="user_avatar"] {min-width: 70px;width: 70px;height: 70px;}
	.special_products_section .section_title_wrap{padding: 50px 20px 30px !important;position: relative;background: var(--second-color);border-radius: var(--border-radius) var(--border-radius) 0 0;margin-bottom: 10px;}
	.special_products_section .section_title_wrap::after {display: none !important;}
	.special_products_section .section_title_wrap span{background: transparent !important;padding: 0 20px !important;border-top: 1px solid #ddd;padding-top: 20px !important;}
	.cat_item_box {font-size: 12px;padding: 12px 0;}
	.design_tool_item {flex-direction: column;align-items: start;gap: 20px;padding: 15px;font-size: 14px;}
	.design_tool_item .rb_flex_end_wrap {justify-content: center;align-items: center;margin: auto;font-size: 13px;}
}