.ul-list .li-list-middle
{
	color: #171717;
	background-color: #ffffff;
	margin-right: 0px;
	text-align: center;
	padding: 12px 15px;
	width: fit-content;
}

.li-list-right
{
	border-radius: 0px 5px 5px 0px;
	color: #171717;
	background-color: #ffffff;
	margin-right: 0px;
	text-align: center;
	padding: 12px 15px;
	width: fit-content;
}

.li-list-left
{
	border-radius: 5px 0px 0px 5px;
	color: #171717;
	background-color: #ffffff;
	margin-right: 0px;
	text-align: center;
	padding: 12px 15px;
	width: fit-content;
}


.ul-list .li-list-middle.active, 
.ul-list .li-list-right.active,
.ul-list .li-list-left.active
{
	color: #ffffff;
	background-color: #000000;
}

.form-input-row
{
	display: block;
	margin-right: auto;
	margin-left: auto;
}



.text-start
{
	margin-right: 50px;
}

@media (min-width: 768px) {

	.label-form
	{
		color: white;
		font-size: 14px;
		line-height: 14px;
		margin-bottom: 10px;
		margin-right: 5px;
	}
	.deactive{
		display: none;
	}
	/* Dropdown container */
	.dropdown {
		position: relative;
		width: 200px;
		font-family: Arial, sans-serif;
		user-select: none;
	}

	/* Header of dropdown */
	.dropdown-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #f8f9fa;
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 5px;
		cursor: pointer;
		transition: background-color 0.3s;
	}

	.dropdown-header:hover {
		background-color: #e9ecef;
	}

	/* Flag image in dropdown */
	.flag-img {
		width: 24px;
		height: 24px;
		margin-right: 10px;
		display: flex;
	}

	.flag-img img {
		max-width: 100%;
		border-radius: 3px;
	}

	.drop-down
	{
		border: 1px solid #DEDEDE;
		padding: 7px 8px;
		font-size: 14px;
		text-align: center;
		width: 80%;
		border-radius: 5px;
		height: 40px;
		cursor: pointer;
	}

	.drop-down img
	{
		width: 20px;
		height: auto;
	}


	.grid-container {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 15px; 
	}

	.addlogotxt
	{
		margin-right: 10px;
		font-size: 14px;
		margin-top: -20px;
		margin-bottom: -10px;
	}

	.percentage-span
	{
		background-color: #fff;
		padding: 0px 10px;
		margin-top: -35px;
		margin-left: 5px;
		height: 30px;
		line-height: 30px;
		font-weight: 700;
	}


}

.grid-container-border {
	display: grid; 
	grid-template-columns: repeat(4, 1fr); 
	gap: 10px; 
	padding: 10px;
}

.border-setting {
	width: 64px;
	height: 48px;
	border: 1px solid #ddd;
	background-color: #FCFCFD;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	margin: 5px;
}
.border-setting img {
	filter: brightness(0) invert(0);
}
.border-setting.active {
	background-color: #000;
}
.border-setting.active img {
	filter: brightness(0) invert(1);
}

.color-setting
{
	width: 48px;
	height: 48px;
	margin-bottom: 12px;
	position: relative;
	transition: border 0.3s ease;
}

.color-setting img
{
	width: 48px;
	height: 48px;
	cursor: pointer;
}

.color-setting span
{
	color: rgba(23, 23, 23, 0.5);
	font-size: 12px;
	margin-right: 5px;
}




.color-setting.selected::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 20px;
	height: 20px;
	background-color: white;
	border-radius: 50%;
}

.addlogopre
{
	border: 2px dotted #DEDEDE;
	padding: 40px 15px;
	border-radius: 24px;
	cursor: pointer;
}

.addlogopre-open
{
	border: 2px solid #DEDEDE;
	padding: 40px 15px;
	border-radius: 24px;
}

.addlogopre .icon::after, .addlogopre-open .icon::after
{
	content: 'TXT';
	width: 48px;
	height: 72px;
	padding: 20px 15px;
	background-color: rgba(34, 34, 34, 0.05);
	border: 1px solid #ddd;
	border-radius: 4px;
	color: #a6a6a6;
}

.addlogopre .icon1::after, .addlogopre-open .icon1::after
{
	content: 'Logo';
	width: 48px;
	height: 72px;
	padding: 20px 11px;
	background-color: rgba(34, 34, 34, 0.05);
	border: 1px solid #ddd;
	border-radius: 4px;
	color: #a6a6a6;
}





.Proportions-icon
{
	padding: 18px 20px;
	background-color: white;
	border: 1px solid black;
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 45%;
	margin-top: 30px;
	cursor: pointer;
} 

.Proportions-icon i
{
	color: #000;
}

.Proportions-icon.active
{
	background-color: black;
	border: 1px solid transparent;
}

.Proportions-icon.active i
{
	color: #fff;
}

#extratxtaddiv , #extraimageaddiv {
	opacity: 0; 
	transition: opacity 08s ease;
}

/* canvas */
.card-container {
	width: 90%;
	max-width: 480px; 
	max-height: 270px;
	aspect-ratio: 16 / 9; 
	margin: 10px auto;
	position: relative;
	/*border: 1px solid #ccc;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);*/
	background-color: #fff;
}

.canvas-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
}

canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%; 
	height: 100%; 
}

.button-container {
	display: flex;
	justify-content: center;
	margin-top: 10px;
}

.button-container button {
	margin: 0 10px;
}







@media (max-width: 768px) {
	#upperdiv
	{
		margin-top: 20px;
	}
	.mobile-navbar
	{
		width: 100%;
		position: fixed;
		bottom: 0 !important;
		left: 0;
		right: 0 !important;
		bottom: unset;
		background-color: white;
		padding: 10px 0;
		border-bottom: 2px solid #ddd;
		border-radius: 10px 10px 0px 0px;
		padding: 5px 0px 5px 0px;
		z-index: 100;
	}


	.side-panel.open 
	{
		height: 95%;
	}

	.mobile-navbar{
		transition: opacity 0.4s ease-in-out, max-height 0.4s ease-in-out;
		max-height: 60px !important;
	}
	.mobile-navbar.active{
		height: 435px;
		max-height: 435px !important;
	}
	.mobile-navbar .tab-pane {
		opacity: 0;
		max-height: 0;
		overflow: hidden;
	}
	.mobile-navbar .tab-pane.active {
		opacity: 1;
		max-height: 300px; /* مقدار مناسب با توجه به محتوا */
		visibility:unset ;
		height: 300px;
	}

	.ul-list
	{
		display: flex;
		list-style-type: none;
		border: 1px solid #DEDEDE;
		border-radius: 5px;
		width: 250px;
		padding: 0px;
		font-size: 11px;
		line-height: 20px;
		margin: 0  auto 0 auto;
	}

	.ul-list li
	{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
	}
	.tab-pane.deactive {
		visibility: visible;
	}
	.form-input-row.w-75 {
		width: 100% !important;
	}
	.overlay 
	{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 99;
		display: none;
	}
	.overlay.show {
		display: block;
	}

	.drop-down {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border: 1px solid #DEDEDE;
		padding: 10px 12px;
		font-size: 14px;
		text-align: center;
		width: 60%;
		border-radius: 5px;
		cursor: pointer;
		margin-right: auto;
		margin-left: auto;
	}

	.label-form
	{
		color: rgba(23, 23, 23, 0.5);
		font-size: 14px;
		line-height: 14px;
		margin-bottom: 10px;
		margin-right: 5px;
		text-align: center;
	} 

	/* استایل قسمت selected */
	#selected-part, #nselected-part {
		display: flex;
		align-items: center; /* هم‌ترازی عمودی */
		justify-content: space-between; /* فاصله مساوی بین اجزا */
		width: 100%;
	}
	#mobilenavbar1 {
		z-index: 100;
	}
	/* استایل تصویر */
	#selected-part img, 
	#nselected-part img, 
	#notselected-image, 
	#nnotselected-image {
		z-index: 101;
		max-width: 100%;
		height: 18px; /* ارتفاع ثابت */
		object-fit: contain; /* برای تناسب تصویر */
		display: block;
		margin: 0 auto; /* مرکز چین کردن */
	}

	/* استایل متن */
	#selected-name, 
	#notselected-name, 
	#nselected-name, 
	#nnotselected-name {
		text-align: center;
		margin-right: 10px;
		font-size: 14px;
		flex: 1; 
	}

	/* استایل آیکون */
	#toggle-icon, 
	#ntoggle-icon {
		font-size: 16px;
		color: #555;
		margin-left: auto;
	}

	#materialtab .label-form
	{
		color: rgba(23, 23, 23, 0.5);
		font-size: 16px;
		line-height: 14px;
		margin-bottom: 10px;
		margin-top: 10px;
		margin-right: 40px;
		text-align: center;
	} 

	.grid-container {
		margin-right: 30px;
		margin-top: 10px;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		/*gap: 12px; */
	}

	.addlogotxt
	{
		margin-right: 10px;
		font-size: 12px;
		line-height: 18px;
		margin-top: -20px;
		margin-bottom: -10px;
	}

	input[type="number"]::-webkit-outer-spin-button,
	input[type="number"]::-webkit-inner-spin-button {
		-webkit-appearance: none; /* حذف دکمه‌ها در Chrome, Safari, Opera */
		margin: 0;
	}

	input[type="number"] {
		-moz-appearance: textfield; /* حذف دکمه‌ها در Firefox */
	}

	.percentage-span
	{
		background-color: #fff;
		padding: 0 2px;
		margin-top: -35px;
		margin-left: 5px;
		height: 30px;
		line-height: 30px;
		font-weight: 700;
	}

	.xtra-fixed-mobile-nav.xtra-fixed-mobile-nav-title-column{
		display: none;
	}



	.tab-pane.active {
		opacity: 1;
		display: block !important;
		padding: 10px;
		overflow-y:scroll ;
	}

	#pricepart.active{
		display: block !important;
	}

	html.lenis,body
	{
		height: 100vh !important;
		background-color: black;
	}
	.deactive{
		visibility: hidden;
		height: 0;
	}

}
.color-setting > img{
	border-radius: 50%;
	background-color: white;
	padding: 2px;
}

textarea.form-control {
	height: 100px;
}



body #desktopmenu1 .rb_menu_wrap .ul-list, body #desktopmenu1 .rb_menu_wrap .ul-list:not(.darklup-dark-ignore){
	box-shadow: 0px 5px 10px rgba(255, 255, 255, 0.04) !important;
	background-color: rgba(255, 255, 255, 0.15) !important;
	backdrop-filter: blur(14px);
	border-radius: 20px !important;
	border: 1px solid rgba(255, 255, 255, 0.3);
	overflow: hidden;
	display: flex;
	list-style-type: none;
	border: 1px solid #DEDEDE;
	width: 450px;
	margin: auto;
	padding: 0px;
	font-size: 16px;
	line-height: 18px;
}
body #desktopmenu1 .rb_menu_wrap .ul-list li{
	cursor: pointer;
	background-color: transparent !important;
	line-height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
}
body #desktopmenu1 .rb_menu_wrap .ul-list li.active{
	background: gold !important;
	color: #000 !important;
}
.tab-pane{
	min-height:430px;
}
.rb_product_price{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	border: 1px solid #eee;
	border-top-color: rgb(238, 238, 238);
	border-right-color: rgb(238, 238, 238);
	border-bottom-color: rgb(238, 238, 238);
	border-left-color: rgb(238, 238, 238);
	border-radius: 20px;
	padding: 10px 15px;
}

.btn_loading {
	min-width: 161px;
	min-height: 40px;
	position: relative;
	font-size: 0 !important
}
.btn_loading::before {
	content: "";
	width: 20px;
	height: 20px;
	display: block;
	border-radius: 50%;
	border-style: solid;
	border-width: 2px;
	border-color: #fff #fff #fff transparent;
	animation: btn_loading .8s infinite linear;
	margin-top: 3px;
	position: absolute;
	top: 6px;
	left: 70px;
	z-index: 1
}
@keyframes btn_loading {
	0% {transform: rotate(0deg)}
	100% {transform: rotate(360deg)}
}
.addlogotxt div {
	max-width: 210px;
	overflow-x: auto;
	white-space: nowrap;
}
.addlogotxt div span {
	font-size: 13px;
}
body:has(#desktopmenu1) .title-cont{display: none;}
#materialtab .grid-container {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 30px;
}
#custom_alert {
  z-index: 999;
  position: relative;
}
.snackbar {
	visibility: hidden;
	min-width: 250px;
	background-color: #c29c54;
	color: #fff;
	text-align: center;
	border-radius: 5px;
	padding: 16px;
	font-weight: 700;
	position: fixed;
	z-index: 111;
	left: 50%;
	bottom: 20%;
	font-size: 14px;
	transform: translateX(-50%);
	z-index: 999;
}
.snackbar:not(.darklup-dark-ignore) {
  background-color: #c29c54;
}
.snackbar.show {
	visibility: visible;
	-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
	animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
@keyframes fadein {
	from {bottom: 0;opacity: 0;}
	to {bottom: 50px;opacity: 1;}
}
@keyframes fadeout {
	from {bottom: 50px;opacity: 1;}
	to {bottom: 0;opacity: 0;}
}
.addlogopre-open{padding: 40px 15px 15px;}


@media (max-width: 991px){
	body:has(#desktopmenu1) footer{display: none;}
	body #desktopmenu1 .rb_menu_wrap .ul-list li{white-space: nowrap;}
}




/* ============================================
   پاپ آپ ساده - فقط موارد ضروری
   ============================================ */

#purchase-success-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 99999;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#purchase-success-popup.show {
    display: flex !important;
}

.popup-container {
    background: #1a1a1a;
    padding: 40px 45px;
    border-radius: 24px;
    text-align: center;
    color: white;
    min-width: 300px;
    max-width: 90%;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transform: scale(0.8);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#purchase-success-popup.show .popup-container {
    transform: scale(1);
}

.loading-spinner-minimal {
    width: 60px;
    height: 60px;
    margin: 0 auto 18px;
    position: relative;
}

.loading-spinner-minimal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 3px solid rgba(255, 215, 0, 0.1);
    border-radius: 50%;
}

.loading-spinner-minimal::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-top: 3px solid #FFD700;
    border-radius: 50%;
    animation: spinLoader 0.8s linear infinite;
}

@keyframes spinLoader {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text {
    font-size: 18px;
    font-weight: 500;
    color: #ffffff;
    margin: 5px 0 3px;
}

.loading-subtext {
    font-size: 13px;
    opacity: 0.5;
    color: #aaaaaa;
    margin: 0;
}

/* تیک سبز */
.success-tick-animated {
    width: 80px;
    height: 80px;
    margin: 0 auto 15px;
    position: relative;
}

.success-tick-animated svg {
    width: 100%;
    height: 100%;
}

.success-tick-animated .tick-circle {
    stroke: #4CAF50;
    stroke-width: 4;
    fill: none;
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    animation: drawCircle 0.8s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.success-tick-animated .tick-check {
    stroke: #4CAF50;
    stroke-width: 5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: drawCheck 0.6s 0.4s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

@keyframes drawCircle {
    0% { stroke-dashoffset: 166; }
    100% { stroke-dashoffset: 0; }
}

@keyframes drawCheck {
    0% { stroke-dashoffset: 48; }
    100% { stroke-dashoffset: 0; }
}

.success-tick-animated::after {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border-radius: 50%;
    border: 2px solid rgba(76, 175, 80, 0.2);
    animation: pulseRing 1.5s ease-out infinite;
}

@keyframes pulseRing {
    0% { transform: scale(0.8); opacity: 1; }
    100% { transform: scale(1.3); opacity: 0; }
}

.success-message {
    font-size: 20px;
    font-weight: 600;
    color: #4CAF50;
    margin: 10px 0 5px;
}

.success-submessage {
    font-size: 14px;
    opacity: 0.6;
    color: #aaaaaa;
    margin: 0;
}

/* موبایل */
@media (max-width: 490px) {
    .popup-container {
        padding: 30px 25px !important;
        min-width: auto !important;
        width: 88% !important;
        border-radius: 20px !important;
    }
    .success-message {
        font-size: 17px !important;
    }
    .loading-text {
        font-size: 16px !important;
    }
    .loading-spinner-minimal {
        width: 50px !important;
        height: 50px !important;
    }
    .success-tick-animated {
        width: 65px !important;
        height: 65px !important;
    }
}