html,
body {
	overflow: auto;
	scrollbar-width: none;
	/* Firefox */
	-ms-overflow-style: none;
	/* IE and Edge */
	scroll-behavior: smooth;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
	display: none;
	/* Chrome, Safari, Edge */
}
:root{
	--animationColor : #006775;
	--scrollbar-width-thin: 6px;
	--scrollbar-width-thick: 12px;
	--scrollbar-track-color: #f1f1f1;
	--scrollbar-thumb-color: #c1c1c1;
	--scrollbar-thumb-hover-color: #a7b7bd;
	--scrollbar-border-radius: 10px;
}
/* ============================
   SCROLLBAR VARIABLES & STYLES
   ============================ */

/* Vertical scrollbar styling */
.grid_content::-webkit-scrollbar,
.editor-fields::-webkit-scrollbar,
.name_tag::-webkit-scrollbar,
.design::-webkit-scrollbar,
.designer::-webkit-scrollbar {
	width: var(--scrollbar-width-thin);
}

.grid_content:hover::-webkit-scrollbar,
.editor-fields:hover::-webkit-scrollbar,
.name_tag:hover::-webkit-scrollbar,
.design:hover::-webkit-scrollbar,
.designer:hover::-webkit-scrollbar {
	width: var(--scrollbar-width-thick);
}

.grid_content::-webkit-scrollbar-track,
.editor-fields::-webkit-scrollbar-track,
.name_tag::-webkit-scrollbar-track,
.design::-webkit-scrollbar-track,
.designer::-webkit-scrollbar-track {
	background: var(--scrollbar-track-color);
}

.grid_content::-webkit-scrollbar-thumb,
.editor-fields::-webkit-scrollbar-thumb,
.name_tag::-webkit-scrollbar-thumb,
.design::-webkit-scrollbar-thumb,
.designer::-webkit-scrollbar-thumb {
	background: var(--scrollbar-thumb-color);
	border-radius: var(--scrollbar-border-radius);
}

.grid_content::-webkit-scrollbar-thumb:hover,
.editor-fields::-webkit-scrollbar-thumb:hover,
.name_tag::-webkit-scrollbar-thumb:hover,
.design::-webkit-scrollbar-thumb:hover,
.designer::-webkit-scrollbar-thumb:hover {
	background: var(--scrollbar-thumb-hover-color);
}

/* Horizontal scrollbar styling */
.frame_selected .block-center.grid-layout-2 #frame-container::-webkit-scrollbar,
.cat-header::-webkit-scrollbar {
	height: var(--scrollbar-width-thin);
}

.frame_selected .block-center.grid-layout-2 #frame-container:hover::-webkit-scrollbar,
.cat-header:hover::-webkit-scrollbar {
	height: var(--scrollbar-width-thick);
}

.frame_selected .block-center.grid-layout-2 #frame-container::-webkit-scrollbar-track,
.cat-header::-webkit-scrollbar-track {
	background: var(--scrollbar-track-color);
}

.frame_selected .block-center.grid-layout-2 #frame-container::-webkit-scrollbar-thumb,
.cat-header::-webkit-scrollbar-thumb {
	background: var(--scrollbar-thumb-color);
	border-radius: var(--scrollbar-border-radius);
}

.frame_selected .block-center.grid-layout-2 #frame-container::-webkit-scrollbar-thumb:hover,
.cat-header::-webkit-scrollbar-thumb:hover {
	background: var(--scrollbar-thumb-hover-color);
}

/* ============================ */

.desktop {
	height: 100vh;
	overflow: hidden;
}

.user {
	display: inline-block;
	border-radius: 50px;
	text-align: center;
	cursor: pointer;
}

#design {
	display: flex;
	position: relative;
}

.preview.block-left {
	width: 29%;
	padding: 0 3vw 90px;
	left: 0;
	position: relative;
	z-index: 9;
	background: #fff;
}

.desktop .preview.block-left.active {
	z-index: 99;
	/*box-shadow: 0px 0px 21px rgba(0, 0, 0, 0.25);*/
}

.design.block-right .designer {
	border-radius: 5px;
	overflow: hidden;
	padding: 10px 1.5vw;
	margin: 0 1.5vw;
}

@media screen and (min-width: 768px) {
	.design.block-right .designer {
		height: calc(100vh - 204px);
		overflow-y: auto;
	}
}

.grid {
	width: 42%;
	/*box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);*/
	background: #F9F9F9;
	z-index: 10;
	height: 100vh;
	position: relative;
}

/* Grid Content */
.grid_content {
	position: relative;
	margin: 0 18px 0 18px;
	height: calc(100vh - 200px);
	overflow-x: visible;
	overflow-y: auto;
	padding: 0 22px 0 22px;
	z-index: 10;
}

#frame-container .frame_item {
	transition: all 1s ease;
	border-radius: 10px;
	box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.15);
}

.frame_item.dummy {
	height: 15vw;
}

#frame-container .frame_item:hover {
	box-shadow: 0px 2px 10px rgba(0, 103, 117, 0.5);
}

#frame-container .frame_item.active {
	box-shadow: 0px 2px 10px rgba(0, 103, 117, 0.5);
	outline: 0.5px solid #006775 !important;
}

.block-center #frame-container .frame_item {
	background: #fff;
	border: 15px solid #fff;
}

.design {
	transition: all 0.5s ease;
	background: #fff;
	overflow: auto;
}

.design.block-right {
	width: 29%;
	right: 0;
}

.step-title {
	text-align: center;
	color: #000000;
	font-size: 25px;
	margin: 0;
	padding-top: 20px;
	line-height: 36px;
	padding-bottom: 10px;
}

.col-header.step-3-header {
	background: #fff;
}

.steps-title {
	color: #A7B7BD;
	margin: 0;
	text-align: center;
	font-size: 15px;
}

.review {
	display: inline-block;
	width: 39%;
	transition: all 0.5s ease;
	position: relative;
	margin: 0 3%;
}

.design.block-center .review {
	flex: 0 0 40%;
	width: 40%;
	margin: 0;
	padding: 0 50px 0 30px;
}

.design.block-center .review_content {
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 260px);
	height: 100%;
	margin-top: 10px;
}

.review_content .name_tag {
	flex: 1 1 auto;
}

.design.block-right .review_content .total_price {
	margin-top: 20px;
}

.design.block-center {
	position: absolute;
	right: 0;
	width: 100%;
	box-shadow: 0px 0px 30px 20px rgb(0, 0, 0, 0.15);
	scrollbar-width: none;
	-ms-overflow-style: none;
	background: #FAFAFA;
	z-index: 99;
	height: 100%;
	overflow: hidden;
}

.design.block-center .full_editor {
	display: none;
}

.design.block-right .small_editor {
	display: none;
}

.show_all {
	position: absolute;
	right: 0;
	z-index: 6;
	background: linear-gradient(to left, white 80%, transparent 100%);
	border: 0 none;
	outline: 0 none;
	padding: 5px 10px 5px 20px;
	height: 30px;
	font-weight: bold;
	color: #006775;
	cursor: pointer;
}

.show_all::before {
	content: "\f105";
	font-family: "Font Awesome 7 Pro";
	font-size: 15px;
	font-style: normal;
	font-variant: normal;
	line-height: 1;
	text-rendering: auto;
	width: 10px;
	height: 10px;
	font-weight: 900;
	margin-right: 5px;
}

.show_less {
	background: #fff;
	border: 0 none;
	outline: 0 none;
	padding: 5px 10px 5px;
	height: 30px;
	font-weight: bold;
	color: #006775;
	cursor: pointer;
}

#frame-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 1rem;
	align-items: center;
}

.no-frame {
	position: absolute;
	width: 100%;
	text-align: center;
	margin-top: 5%;
}

.switcher {
	text-align: right;
}

.language,
.type {
	border: 0 none;
	background: transparent;
	color: #006775;
	font-size: 18px;
	padding-bottom: 10px;
}

/* Related categories sub-selector — shown above Step 1 editor fields when a category has sub-categories */
#related-cats-bar {
	flex-wrap: wrap;
	gap: 15px;
	padding: 20px;
	margin-bottom: 10px;
	background: #EEF6F7;
	border-radius: 12px;
	border: 1px solid #e2eaec;
}

#cat-pills-row {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

#related-cats-bar .cat_item {
	width: auto;
background: #fff;
	border: 1px solid #A7B7BD;
}

#related-cats-bar .cat_item:hover {
	background: #D7DFE2;
}

#related-cats-bar .lang_selector {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	width: 100%;
	padding-top: 20px;
	margin-top: 4px;
	border-top: 1px solid #e2eaec;
}

.lang-radio-item {
	display: flex;
	align-items: center;
	gap: 5px;
	cursor: pointer;
	font-size: 14px;
	color: #5a6162;
	font-weight: 600;
	line-height: 1;
}

.lang-radio-item input[type="radio"] {
	cursor: pointer;
	accent-color: #006775;
	width: 14px;
	height: 14px;
	margin: 0;
	vertical-align: middle;
	flex-shrink: 0;
}

.lang-radio-item span {
	vertical-align: middle;
	line-height: 1;
}

#related-cats-bar .cat_item.active {
	background: linear-gradient(to right, #5298A1 0%, #006775 100%);
	color: #fff;
	border: 1px solid #e2eaec;
	pointer-events: none;
}

.editor-fields {
	overflow-y: auto;
	overflow-x: hidden;
	padding: 20px 1vw;
	margin: 1vw;
	max-height: calc(100vh - 310px);
}

.desktop .editor-fields-box {
	border: 1px solid #D1E6E9;
	border-radius: 15px;
}

.field-placeholder {
	position: absolute;
	background: #fff;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99;
	border-radius: 25px;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #A7B7BD;
	cursor: text;
}

.choose-design-desktop {
	color: #A7B7BD;
	text-align: center;
	margin: 30px 20px 0;
	text-transform: uppercase;
}

/* Reset direction for child elements */
.editor-fields>* {
	direction: ltr;
}

.editor-fields .brand_line {
	display: none !important;
}

.editor-fields .section.must::after {
	content: "*";
	position: absolute;
	top: 0;
	right: 35px;
	color: red;
	font-size: 22px;
}

.editor .editor_text {
	width: 100%;
	text-align: center;
	border: 0 none;
	resize: none;
	overflow: hidden;
	font-family: MainFbAlbatros;
	padding: 0 10px;
	background: transparent;
	margin: 10px 20px;
	min-height: 20px;
	display: inline-block;
	line-height: 1.25;
	outline: 0 none;
	vertical-align: top;
}

.editor .editable .editor_text {
	color: #000000;
}

.editor .noneditable .editor_text {
	margin: 0 auto;
	color: #000;
	line-height: 1;
}

.editor .noneditable i,
.editor .noneditable .select-btn,
.editor .noneditable .clear-btn {
	display: none;
}

/* Add left padding for dropdown button */
.main-wrapper:has(.select-btn) .editor_text {
	padding-left: 20px;
}

/* Add right padding for clear button */
.main-wrapper:has(.clear-btn) .editor_text {
	padding-right: 20px;
}

/* Add both paddings when both buttons exist */
.main-wrapper:has(.select-btn):has(.clear-btn) .editor_text {
	padding-left: 35px;
	padding-right: 20px;
}

.editor .prefix_text {
	width: 100%;
	display: flex;
	text-align: center;
	border: 0 none;
	resize: none;
	overflow: hidden;
	font-family: MainFbAlbatros;
	padding: 0 5px;
	background: transparent;
	color: #000000;
	margin: 0;
	min-height: 20px;
	line-height: 1.25;
	outline: 0 none;
	align-items: center;
	justify-content: center;
}

/* Add left padding for prefix dropdown button */
.prefix-wrapper:has(.prefix-select-btn) .prefix_text {
	padding-left: 30px;
}

/* Add right padding for prefix clear button */
.prefix-wrapper:has(.prefix-clear-btn) .prefix_text {
	padding-right: 30px;
}

/* Add both paddings when both buttons exist */
.prefix-wrapper:has(.prefix-select-btn):has(.prefix-clear-btn) .prefix_text {
	padding-left: 30px;
	padding-right: 10px;
}

.prefix_list {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: #fff;
	z-index: 999;
	margin: 0;
	border-radius: 10px;
	padding: 5px 30px;
	border: 0.25px solid #D1E6E9;
	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
	overflow: hidden;
}

.prefix_item {
	display: block;
	cursor: pointer;
	text-align: center;
	padding: 5px 0;
}

.prefix_item+.prefix_item {
	border-top: 1px solid #e7e7e7;
}

.editor .suffix_text {
	width: 100%;
	display: flex;
	text-align: center;
	border: 0 none;
	resize: none;
	overflow: hidden;
	font-family: MainFbAlbatros;
	padding: 0 5px;
	background: transparent;
	color: #000000;
	margin: 0;
	min-height: 20px;
	line-height: 1.25;
	outline: 0 none;
	align-items: center;
	justify-content: center;
	vertical-align: top;
}

/* Add left padding for suffix dropdown button */
.suffix-wrapper:has(.suffix-select-btn) .suffix_text {
	padding-left: 30px;
}

/* Add right padding for suffix clear button */
.suffix-wrapper:has(.suffix-clear-btn) .suffix_text {
	padding-right: 30px;
}

/* Add both paddings when both buttons exist */
.suffix-wrapper:has(.suffix-select-btn):has(.suffix-clear-btn) .suffix_text {
	padding-left: 30px;
	padding-right: 30px;
}

.suffix_list {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	background: #fff;
	z-index: 999;
	margin: 0;
	border-radius: 10px;
	padding: 5px 30px;
	border: 0.25px solid #D1E6E9;
	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
	overflow: hidden;
}

.suffix_item {
	display: block;
	cursor: pointer;
	text-align: center;
	padding: 5px 0;
}

.suffix_item+.suffix_item {
	border-top: 1px solid #e7e7e7
}

/*.editor textarea.label_3 {
	font-size: 50px;
	font-weight: bold;
}

textarea.label_5,
textarea.label_6,
textarea.label_11,
textarea.label_12 {
	font-weight: bold;
}

textarea.label_10 {
	font-size: 25px;
	font-weight: bold;
}*/

.editor .textarea:focus-visible,
.editor .textarea:focus {
	outline: 0 none;
}

.editor .section {
	margin: 20px 0;
	padding: 0;
}

.editor .noneditable {
	pointer-events: none;
	margin: 0px 0;
}

.section.editable {
	position: relative;
	overflow: visible;
	display: flex;
	align-items: stretch;
	border-radius: 25px;
	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.15);
}

.section.editable:focus-within {
	box-shadow: 0px 0px 3px #5298A1;
}

.section .prefix-wrapper {
	position: relative;
	display: inline-flex;
	overflow: visible;
	width: 25%;
	flex-shrink: 0;
}

.section .prefix-wrapper::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: calc(100% - 15px);
	background-color: #D1E6E9;
}

.section .main-wrapper {
	position: relative;
	display: inline-flex;
	overflow: visible;
	flex: 1;
}

.has-prefix-suffix .main-wrapper {
	width: 50%;
}

.section .suffix-wrapper {
	position: relative;
	display: inline-flex;
	overflow: visible;
	width: 25%;
	flex-shrink: 0;
}

.section .suffix-wrapper::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: calc(100% - 15px);
	background-color: #D1E6E9;
}

/*remove clear button from prefix and suffix */
.section .prefix-wrapper .prefix-clear-btn,
.section .suffix-wrapper .suffix-clear-btn {
	display: none;
}

/*remove keyboard button from prefix and suffix */
.section .prefix-wrapper .keyboard-toggle-btn,
.section .suffix-wrapper .keyboard-toggle-btn {
	display: none !important;
}

/* Remove divider borders when wrappers are alone */
.section .prefix-wrapper:not(:has(~ .main-wrapper)):not(:has(~ .suffix-wrapper))::after {
	display: none;
}

.section .suffix-wrapper:only-child::before {
	display: none;
}

.section .main-wrapper:only-child {
	border: none;
}

/* Remove right border from main when there's no suffix */
.section .main-wrapper:not(:has(~ .suffix-wrapper)) {
	border-right: none;
}

/* When only main wrapper exists, remove borders from section */
.section:has(.main-wrapper):not(:has(.prefix-wrapper)):not(:has(.suffix-wrapper)) {
	display: block;
}

.section:has(.main-wrapper):not(:has(.prefix-wrapper)):not(:has(.suffix-wrapper)) .main-wrapper {
	width: 100%;
}

/* Dropdown buttons on left */
.prefix-wrapper .prefix-clear-btn,
.main-wrapper .clear-btn,
.suffix-wrapper .suffix-clear-btn {
	width: 40px;
	height: 40px;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	border-radius: 50px;
	color: #A7B7BD;
	z-index: 10;
	right: 0;
	bottom: 0;
	transform: translateY(-50%);
	top: 50%;
	font-size: 10px;
	transition: all 0.3s ease;
}

.editable.dropdown .select-btn {
	width: 40px;
	height: 40px;
	position: absolute;
}

.editable.dropdown .select-btn i {
	width: 20px;
	height: 20px;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	background: #fff;
	border-radius: 50px;
	color: #006775;
	z-index: 10;
	left: 10px;
	transition: color 0.3s ease;
	bottom: 0;
	transform: translateY(-50%);
	top: 50%;
	font-size: 10px;
	transition: all 0.3s ease;
	border: 1px solid #D7DFE2;
}

.editable .prefix-select-btn,
.editable .suffix-select-btn {
	width: 30px;
	height: 40px;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	border-radius: 50px;
	color: #006775;
	z-index: 10;
	left: 0;
	transition: color 0.3s ease;
	bottom: 0;
	transform: translateY(-50%);
	top: 50%;
	font-size: 10px;
	transition: all 0.3s ease;
}

/*.editor p.active .keyboard::before {
	content: "\f11c";
	font-family: "Font Awesome 7 Pro";
	position: absolute;
	top: -20px;
	left: 10px;
	font-size: 18px;
	font-weight: 400;
	color: #006775;
}*/

.placeholder-label {
	display: block;
	padding: 10px;
	cursor: pointer;
	color: #A7B7BD;
	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.15);
	border-radius: 25px;
	text-align: center;
}

.placeholder-label i {
	color: #000000;
}

.placeholder-image-input {
	display: none;
}

.placeholder-preview {
	max-width: 100px;
	border-radius: 25px;
	position: relative;
	margin: 10px auto;
}

.placeholder-preview-name {
	margin-top: 6px;
	font-size: 12px;
	color: #A7B7BD;
	word-break: break-word;
	text-align: center;
	display: none;
}

.placeholder-preview-img {
	border-radius: 20px;
	border: 1px solid #A7B7BD;
	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.15);
}

.remove-placeholder-btn {
	position: absolute;
	top: 10px;
	background: #A7B7BD;
	z-index: 9;
	right: -5px;
	border-radius: 25px;
	width: 22px;
	height: 22px;
	color: #D7DFE2;
	border: 0 none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

#language_select {
	border: 1px solid #006775;
	background: #fff;
	border-radius: 20px;
	padding: 5px 10px;
	color: #006775;
	width: 95px;
}

.ui-keyboard {
	background: #fff;
	box-shadow: 0px 0px 5px #B1B1B1;
	border: 1px solid #B1B1B1;
	border-radius: 10px;
}

.ui-keyboard-input-current {
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	outline: 1px solid #B1B1B1;
	border-radius: 10px;
}

.owl-nav .disabled {
	opacity: 0.5;
}

.frame_item .thumbnail {
	position: relative;
}

.frame-info {
	display: flex;
	padding: 10px 0px 0px;
	z-index: 1;
	background: #fff;
	position: relative;
	justify-content: space-between;
	align-items: center;
	gap: 4px;
	min-height: 38px;
	direction: ltr;
}

.f-id-price {
	display: flex;
	grid-gap: 5px;
	align-items: center;
	padding-right: 20px;
	flex-direction: row-reverse;
	flex-shrink: 0;
	/* never let swatches push the ID/price off screen */
}

.frame-info .identifire {
	font-size: 12px;
	font-weight: 400;
	color: #000000;
	letter-spacing: 0.3px;
}

.frame-info .price {
	font-size: 16px;
	line-height: 20px;
	font-weight: 600;
	margin-top: 2px;
	color: #000000;
}

.special-price {
	color: #006775;
	font-weight: 600;
	font-size: 17px;
}

.old-price {
	text-decoration: line-through;
	color: #000;
	font-size: 11px;
	font-weight: 300;
	padding-top: 2px;
}

.frame-info .color-swatches {
	display: flex;
	align-items: center;
	justify-content: end;
	flex: 1;
	min-width: 0;
	position: relative;
	margin-right: 1.5px;
}

.design_info {
	margin-bottom: 14px;
	font-size: 20px;
}

.frame-info .color-swatch {
	width: 20px;
	height: 20px;
	display: inline-block;
	cursor: pointer;
	flex-shrink: 0;
	box-sizing: border-box;
	border-top-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

.frame-info .color-swatch.active {
	border-color: #fff;
	border-width: 1px;
	box-shadow: 0px 0px 0px 1.5px #A7B7BD;
	box-sizing: border-box;
	outline: 1px solid #fff;
}

/* Owl Carousel customization for color swatches */
.color-swatches.owl-carousel .owl-stage {
	display: flex;
	align-items: end;
	margin: 2px;
}

.color-swatches.owl-carousel .owl-item {
	width: 20px !important;
	margin-right: 2px;
}

.color-swatches.owl-carousel .owl-item .color-swatch {
	width: 20px;
	height: 20px;
	margin: 0;
}

.color-swatches .owl-nav {
	position: absolute;
	top: 0;
	left: -18px;
	right: -18px;
	height: 100%;
	pointer-events: none;
}

.color-swatches .owl-nav button {
	pointer-events: all;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: transparent !important;
	border: 0 none !important;
	width: 18px !important;
	height: 18px !important;
	margin: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px !important;
	color: #B1B1B1 !important;
	border-radius: 0 !important;
}

/* left arrow (more swatches) stays on the left */
.color-swatches .owl-nav .owl-next {
	left: 0;
}

/* right arrow (scroll back) sits on the right */
.color-swatches .owl-nav .owl-prev {
	right: 0;
}

.color-swatches .owl-nav button:hover {
	background: transparent !important;
	color: #bccacd !important;
}

.color-swatches .owl-nav button:active {
	transform: translateY(-50%) scale(0.80);
	transition: all 0.05s;
}

.img-wrapper {
	border-radius: 10px;
	overflow: hidden;
	/* Reserve space before the image loads — eliminates "Unsized image element" CLS.
	   Portrait invitation cards are ~8.5×11 in (0.77:1). Using auto so the browser
	   switches to the image's real ratio once it loads, keeping landscape/label cards correct. */
	aspect-ratio: auto 85 / 110;
}

.frame_item img {
	transition: all 0.7s ease;
	object-fit: contain;
	width: 100%;
	max-height: calc(100vh - 260px);
	display: block;
}

.frame_item:hover img {
	scale: 1.1;
}

.designer .editor_side {
	min-width: 66px;
	padding-left: 12px;
}

.designer {
	position: relative;
	margin: 15px 0;
}

.design.block-center .designer {
	margin: 0 auto;
	padding: 20px 50px;
	background: #fff;
	display: flex;
	justify-content: center;
	max-width: fit-content;
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15);
	height: 100%;
}

.editor_side_box {
	display: flex;
	flex-direction: column;
	align-content: center;
	align-items: center;
	justify-content: center;
}

.editor_side_box .label {
	font-size: 10px;
	margin: 10px auto;
	color: #A7B7BD;
}

.option {
	display: block;
	border: 1px solid transparent;
	border-radius: 5px;
	width: 30px;
	height: 30px;
	text-align: center;
	font-size: 18px;
	line-height: 30px;
	cursor: pointer;
	margin-bottom: 5px;
	background-size: contain;
}

.option i {
	color: #000000;
}

.small_editor .option i {
	color: #A7B7BD;
	font-weight: bold;
}

.option.active:not(.bg-list .option) {
	background: linear-gradient(to right, #5298A1 0%, #006775 50%, #006775 100%);
	color: #fff;
	border-left: 0;
	border-right: 0;
}

.editor_side_box.mode_select {
	display: none;
}

.my-editor {
	position: relative;
}

.simcha-id {
	color: #000000;
	font-size: 14px;
	display: none;
}

.btn-hover:hover {
	background: linear-gradient(to right, #5298A1 0%, #006775 50%, #006775 100%);
	color: #fff;
}

.save_later {
	cursor: pointer;
}

.save_later span {
	text-decoration: underline;
}

#save-draft-error {
	text-align: left;
	color: #BD0404;
	font-size: 20px;
	margin-top: 10px;
	margin-left: 15px;
}

.btn-fill {
	background: #006775;
	color: #fff;
	padding: 5px 20px;
	border-radius: 50px;
	min-width: 150px;
	cursor: pointer;
	text-align: center;
}

.btn-border {
	cursor: pointer;
	border: 1px solid #006775;
	padding: 5px 20px;
	border-radius: 50px;
	min-width: 150px;
	text-align: center;
}

.review_checkout {
	display: inline-block;
	padding: 6px 20px;
	border-radius: 50px;
	margin-bottom: 10px;
	cursor: pointer;
	font-size: 16px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
	background: linear-gradient(to right, #5298A1 0%, #006775 50%, #006775 100%);
	font-weight: 500;
	color: #fff;
}

.identifier {
	display: inline-block;
	padding: 6px 20px;
	margin-bottom: 10px;
	cursor: pointer;
	font-size: 16px;
	white-space: nowrap;
	overflow: hidden;
	font-weight: 500;
}

.option:not(.active):not(.bg-list .option):not(.small_editor .option):hover {
	border: 1px solid transparent;
	background: linear-gradient(to right, #B1B1B1, #B1B1B1), linear-gradient(to right, #5298A1 0%, #006775 50%, #006775 100%);
	background-clip: padding-box, border-box;
	background-origin: padding-box, border-box;
}

.bg-list .option.active {
	cursor: default;
	box-shadow: 0 0 0 2px #A7B7BD;
	border-color: #fff;
}

.bg-list .option:not(.active):hover {
	cursor: pointer;
	box-shadow: 0 0 0 2px #A7B7BD;
	border-color: #fff;
}

.PinturaButton.keyboard::before {
	content: "\f11c";
	font-family: "Font Awesome 7 Pro";
}

.scaller {
	transform-origin: top left;
}

.hb-lang .scaller {
	transform-origin: top right;
}

.svg-textarea-container {
	overflow: visible;
}

.svg-textarea-container textarea {
	background: rgba(0, 0, 0, 0.5);
	border: 0px;
	outline: rgb(255, 255, 255) solid 1px;
	padding: 0px;
	margin: 0px;
	overflow: hidden;
	resize: none;
	border-radius: 5px;
}

.svg-textarea-container .keyboard::before {
	content: "\f11c";
	font-family: "Font Awesome 7 Pro";
	position: absolute;
	top: -28px;
	left: 0px;
	font-size: 28px;
	cursor: pointer;
	color: #fff;
	background: rgba(0, 0, 0, 0.3);
	width: 38px;
	text-align: center;
	border-radius: 5px;
	height: 28px;
}

.svg_select_shape {
	stroke-width: 1;
	stroke-dasharray: 10 10;
	stroke: #000;
	stroke-opacity: 0.8;
	pointer-events: none;
	fill: none;
}

.svg_select_shape_pointSelect {
	stroke-width: 1;
	fill: none;
	stroke-dasharray: 10 10;
	stroke: #000;
	stroke-opacity: .8;
	pointer-events: none
}

.svg_select_handle_lt {
	cursor: nw-resize
}

.svg_select_handle_rt {
	cursor: ne-resize
}

.svg_select_handle_rb {
	cursor: se-resize
}

.svg_select_handle_lb {
	cursor: sw-resize
}

.svg_select_handle_t {
	cursor: n-resize
}

.svg_select_handle_r {
	cursor: e-resize
}

.svg_select_handle_b {
	cursor: s-resize
}

.svg_select_handle_l {
	cursor: w-resize
}

.select_mode text {
	cursor: default;
}

.select_mode [movable="true"] {
	cursor: move;
}

.edit_mode text {
	cursor: text;
}

.edit_mode [disable-edit="true"] {
	cursor: pointer;
}

.edit_mode [disable-edit="true"][movable="true"] {
	cursor: move;
}

.tool_control {
	display: none;
}

.tool_control .option {
	position: relative;
}

.background_select .option {
	position: relative;
}

.bg-list {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
}

.bg-list .color {
	width: 30px;
	height: 30px;
	line-height: 30px;
	border-top-left-radius: 5px;
	padding: 0 2px;
	box-sizing: border-box;
	cursor: pointer;
	font-size: 11px;
	text-align: center;
	margin-top: 10px;
	margin-right: 3px;
	margin-bottom: 0;
	border-top-right-radius: 0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 5px;
	outline: 2px solid #fff;
	border: 0 none;
}

.bg-list .color span {
	filter: invert();
}

.bg-list .color.active {
	cursor: default;
	box-shadow: 0 0 0 2.5px #A7B7BD;
	border-color: #fff;
}

.design.block-center .bg-list .color.active {
	box-shadow: 0 0 0 2px #5298A1;
}

.popup {
	cursor: default;
	position: absolute;
	top: 46px;
	left: 50%;
	transform: translateX(-50%);
	background: white;
	padding: 10px 15px;
	border: 1px solid #B1B1B1;
	border-radius: 6px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	z-index: 999;
	display: none;
}

.popup::before {
	content: "";
	position: absolute;
	top: -7px;
	left: 50%;
	transform: translateX(-50%);
	width: 12px;
	height: 12px;
	background: white;
	border-left: 1px solid #B1B1B1;
	border-top: 1px solid #B1B1B1;
	transform: translateX(-50%) rotate(45deg);
	z-index: -1;
}

.pickr .pcr-button {
	position: absolute;
	top: -38px;
	left: 0;
	width: 36px;
	height: 36px;
	opacity: 0;
}

#fontWeight,
#fontFamily {
	background: transparent;
	border: 1px solid #006775;
	border-radius: 5px;
	padding: 5px;
}

.font-space,
.font-height,
.font-size {
	display: flex;
	position: relative;
	width: 100px;
	height: 30px;
}

#letterSpacing,
#lineHeight,
#fontSize {
	position: absolute;
	z-index: 9;
	width: 68%;
	border-color: transparent;
	top: 3px;
	left: 3px;
	height: 24px;
}

#letterSpacingOption,
#lineHeightOption,
#fontSizeOption {
	position: absolute;
	z-index: 8;
	width: 100%;
	height: 30px;
	background: transparent;
	border: 1px solid #006775;
	border-radius: 5px;
}

#letterSpacing:focus-visible,
#lineHeight:focus-visible,
#fontSize:focus-visible {
	border: 0 none;
	outline: none;
}

.font-halign {
	display: flex;
	gap: 10px;
}

.font-halign {
	display: flex;
	gap: 10px;
}

.font-halign button {
	background: transparent;
	border: 1px solid #006775;
	border-radius: 5px;
	height: 25px;
	width: 25px;
	cursor: pointer;
}

.font-halign button.active {
	background: #B1B1B1;
}

.option.shadow .fas.fa-text {
	filter: drop-shadow(6px 4px 1px gray);
}

/* Style for the custom tooltip */
.custom-tooltip {
	position: absolute;
	background-color: #474747;
	color: #fff;
	padding: 6px 10px;
	border-radius: 4px;
	font-size: 13px;
	white-space: nowrap;
	z-index: 9999;
	display: none;
	pointer-events: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.editor_side_box+.editor_side_box::before {
	content: " ";
	width: 16px;
	height: 1;
	display: block;
	border-top: 2px dotted #B1B1B1;
	margin-top: 10px;
}

.design.block-right .editor_side_box+.editor_side_box::before {
	display: none;
}

.size-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.size-item {
	display: flex;
	cursor: pointer;
	font-size: 8px;
	flex-direction: column;
	align-items: center;
	border: 1px solid #B1B1B1;
	border-radius: 5px;
	width: 30px;
	padding: 4px 0;
}

.size-box {
	display: block;
	background: #B1B1B1;
}

.size-item.active {
	cursor: default;
	box-shadow: 0 0 0 1px rgba(0, 103, 117, 1);
	border-color: #fff;
}

.size-item:not(.active):hover {
	box-shadow: 0 0 0 1px rgba(0, 103, 117, 1);
	border-color: #fff;
}

.save-popup {
	position: fixed;
	top: 10px;
	left: 50%;
	transform: translateX(-50%) scale(0.95);
	background: linear-gradient(to right, #5298A1 0%, #006775 50%, #006775 100%);
	color: #fff;
	padding: 10px 20px;
	border-radius: 8px;
	font-size: 16px;
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.8s ease, transform 0.8s ease;
	width: 200px;
}

.save-popup.show {
	opacity: 1;
	transform: translateX(-50%) scale(1);
	pointer-events: auto;
}

.spinner {
	display: inline-block;
	margin-right: 8px;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

#frame-pager .arrow {
	position: absolute;
	top: calc(50% + 50px);
}

#frame-pager .arrow {
	position: absolute;
	top: calc(50% + 50px);
	font-size: 30px;
	background: linear-gradient(to right, #5298A1 0%, #006775 50%, #006775 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	cursor: pointer;
}

#frame-pager .arrow.disabled {
	opacity: 0.5;
	cursor: default;
}

.arrow.next {
	right: 3vw;
}

.arrow.prev {
	left: 3vw;
}

#frame-pager {
	text-align: center;
	margin: 1vw;
}

.page-number {
	opacity: 0.6;
	margin: 0.2vw;
	cursor: pointer;
}

.page-number.active {
	opacity: 1;
	pointer-events: none;
}

.filter-bar {
	padding: 3px 10px;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #fff;
	justify-content: space-between;
	background: #fff;
	margin: 0 40px 15px;
	box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.15);
	border-radius: 10px;
	position: relative;
}

.back-design {
	position: absolute;
	top: 3px;
	left: 0;
	font-size: 14px;
	color: #A7B7BD;
	cursor: pointer;
}

#frame-option {
	display: flex;
	grid-gap: 7px;
	justify-content: space-between;
	z-index: 11;
}

#sort-filter-container {
	position: relative;
	z-index: 11;
	display: flex;
}

#sort-filter-container .sort-dropdown {
	width: auto;
	min-width: 120px;
}

#views-filter-container {
	margin-left: auto;
	position: relative;
	z-index: 10;
}

.hb-lang #views-filter-container {
	margin-right: auto;
	margin-left: unset;
}

.filter-dropdown {
	position: relative;
	display: inline-block;
	width: 100%;
}

.dropdown-toggle {
	padding: 8px 20px 2px 25px;
	margin: 0px 0px 3px 0px;
	border: 0 none;
	background: transparent;
	cursor: pointer;
	width: 100%;
	text-align: left;
	color: #000000;
	font-size: 14px;
	text-transform: capitalize;
	background-image: linear-gradient(#A7B7BD, #A7B7BD);
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 0% 1px;
	transition: background-size 0.2s ease-in-out;
}

.dropdown-toggle:hover {
	background-size: calc(100% - 15px) 1px;
}

.lang_selector {
	display: block;
	margin: 0 auto;
}

/* Desktop dropdown - shown by default */
.lang-dropdown-desktop {
	display: block;
	width: 120px;
	margin: 0 auto;
}

.dropdown-toggle:hover {
	/* Reset to 100% width so it doesn't have the 15px gap */
	background-size: 90% 1px;
}

.lang-dropdown-desktop .dropdown-toggle {
	padding: 6px 3px 6px 20px;
	background-image: linear-gradient(#A7B7BD, #A7B7BD);
	background-size: 100% 1px;
	margin-bottom: 20px;
}

.lang_selector .dropdown-toggle {
	text-align: center;
}

.dropdown-toggle::after {
	content: "\f107";
	position: absolute;
	top: 10px;
	left: 5px;
	font-family: "Font Awesome 7 Pro";
	font-weight: 400;
	font-size: 12px;
	color: #A7B7BD;
	transition: transform 0.2s ease;
}

.filter-dropdown.open .dropdown-toggle::after {
	transform: rotate(180deg);
}

/* Date toggle button (keyboard/calendar) */
.date-toggle-wrapper {
	position: relative;
}

.date-toggle-btn {
	display: none;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	color: #000000;
	font-size: 14px;
	cursor: pointer;
	z-index: 5;
	padding: 12px 10px;
}

/* Keyboard toggle button for text and dropdown fields */
.keyboard-toggle-btn {
	display: none;
	position: absolute;
	left: 6px;
	top: 50%;
	transform: translateY(-50%);
	color: #000000;
	font-size: 14px;
	cursor: pointer;
	z-index: 5;
	user-select: none;
	-webkit-user-select: none;
	padding: 14px 8px;
}

.dropdown .keyboard-toggle-btn {
	left: 30px;
}

.tag_dropdown_arrow~.keyboard-toggle-btn {
	left: 30px;
}

/* Adjust keyboard toggle position when prefix/suffix have select buttons */
.prefix-wrapper:has(.prefix-select-btn) .keyboard-toggle-btn,
.suffix-wrapper:has(.suffix-select-btn) .keyboard-toggle-btn {
	left: 30px;
}

/* Show toggle button only when the specific field is focused */
.date-toggle-wrapper:focus-within .date-toggle-btn,
.main-wrapper:focus-within .keyboard-toggle-btn,
.tag-main-wrapper:focus-within .keyboard-toggle-btn,
.prefix-wrapper:focus-within .keyboard-toggle-btn,
.suffix-wrapper:focus-within .keyboard-toggle-btn {
	display: block;
}

/* Show date toggle btn while calendar is open (replaces :focus-within for iOS calendar mode) */
.date-toggle-wrapper.calendar-open-active .date-toggle-btn {
	display: block;
}

.clean-filter {
	position: absolute;
	right: 0;
}

.dropdown-menu {
	display: none;
	position: absolute;
	top: 35px;
	left: 0;
	background: #ffffff;
	border-radius: 10px;
	padding: 6px 10px;
	z-index: 20;
	font-size: 14px;
	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25);
	min-width: 180px;
}

/*.dropdown-menu::after {
	content: "\f106";
	position: absolute;
	top: 5px;
	right: 10px;
	font-family: "Font Awesome 7 Pro";
	font-weight: 900;
	font-size: 15px;
}*/

.dropdown-menu strong {
	cursor: pointer;
	display: none;
}

.filter-dropdown.open .dropdown-menu {
	display: block;
}

.checkbox-option {
	margin: 8px 0;
	display: flex;
	align-items: center;
}

.checkbox-option label {
	flex: 1;
	padding: 0 8px;
	color: #000;
	cursor: pointer;
}

.checkbox-option label:hover {
	color: #A7B7BD;
}

.radio-option {
	margin: 8px 0;
	display: flex;
	align-items: center;
}

.radio-option input {
	margin: 2px 0;
	accent-color: #A7B7BD;
	width: 10px;
}

.radio-option label {
	flex: 1;
	padding-left: 8px;
	color: #000;
	cursor: pointer;
}

.radio-option label:hover {
	color: #A7B7BD;
}

.radio-option input:checked+label {
	color: #A7B7BD;
	font-weight: 500;
}

.lang-dropdown-desktop .checkbox-option input:checked+label {
	color: #A7B7BD;
	cursor: default;
}

.lang-dropdown-desktop .checkbox-option label:hover {
	color: #A7B7BD;
}

.lang-dropdown-desktop .checkbox-option input {
	display: none;
}

.design.block-center .lang-toggle-desktop {
	border: 1px solid #fff;
}

.design.block-center .lang-toggle-desktop::before {
	background: #fff;
}

.design.block-center .lang-toggle-desktop .lang-toggle-btn {
	color: #fff;
}

.design.block-center .lang-toggle-desktop .lang-toggle-btn.active {
	background: transparent;
	color: #000;
}

.filter-group {
	display: inline-flex;
	margin-right: 3px;
	font-size: 12px;
	align-items: center;
}

.filter-group.radio-group {
	flex: 1;
}

input[type="radio"] {
	accent-color: #006775;
}

/* Views Filter Styles */
.views-filter-direct {
	display: flex;
	gap: 5px;
	align-items: center;
	justify-content: flex-start;
	padding: 0 0 0 0;
}

.views-filter-direct strong {
	display: block;
	font-size: 14px;
	font-weight: 400;
	margin: 0;
	white-space: nowrap;
	height: 15px;
	color: #000000;
}

.views-filter {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.views-filter strong {
	margin-bottom: 8px;
	display: block;
	font-size: 12px;
}

.views-options {
	display: flex;
}

.views-options input[type="radio"] {
	opacity: 0;
	width: 0;
	height: 0;
}

.view-icon {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	color: #D7DFE2;
	cursor: pointer;
	font-size: 22px;
}

.active .view-icon {
	color: #A7B7BD;
}

.view-icon.view-one::after {
	content: "\f2fb";
	font-family: "Font Awesome 7 Pro";
	font-weight: bold;
}

.view-icon.view-two::after {
	content: "\e196";
	font-family: "Font Awesome 7 Pro";
	font-weight: bold;
}

.view-icon.view-three::after {
	content: "\e195";
	font-family: "Font Awesome 7 Pro";
	font-weight: bold;
}

.view-icon.view-four::after {
	content: "\e198";
	font-family: "Font Awesome 7 Pro";
	font-weight: bold;
}

/* Grid Layout Classes */
.block-center.grid-layout-1 #frame-container {
	display: grid;
	grid-template-columns: 1fr !important;
	gap: 15px !important;
}

.block-center.grid-layout-2 #frame-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 15px !important;
}

.block-center.grid-layout-3 #frame-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 15px !important;
}

.block-center.grid-layout-4 #frame-container {
	display: grid;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 15px !important;
}

/* Reset existing frame item positioning when using grid layouts */
.block-center .grid-layout-1 #frame-container .frame_item,
.block-center .grid-layout-2 #frame-container .frame_item,
.block-center .grid-layout-3 #frame-container .frame_item,
.block-center .grid-layout-4 #frame-container .frame_item {
	position: relative !important;
	left: auto !important;
	top: auto !important;
	margin: 0 !important;
	transform: none !important;
}

.block-hidden {
	overflow: hidden;
	width: 0 !important;
	padding: 0 !important;
}

.review_image canvas {
	width: 100%;
}

.name_tag {
	overflow-y: auto;
	overflow-x: hidden;
}

.name_tag .show-all-fields {
	margin: 10px 15px 15px;
	padding: 10px 15px;
	background: rgba(3, 61, 68, 0.05);
	border-radius: 8px;
}

.name_tag .show-all-fields label {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 14px;
	color: #006775;
	font-weight: 500;
}

.name_tag .show-all-fields input[type="checkbox"] {
	cursor: pointer;
	width: 18px;
	height: 18px;
}

.tag_title {
	text-align: center;
	margin-bottom: 20px;
}

.tag_list {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
}

.tag_item {
	display: flex;
	justify-content: end;
	background: #fff;
	margin: 3px 3px 7px;
	overflow: visible;
	position: relative;
	border-radius: 25px;
	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.15);
}

.tag_item.remove_edit {
	display: none;
}

.tab_item_value {
	color: #000000;
	font-size: 16px;
	padding: 8px 0;
	text-align: right;
	outline: 0 none;
	width: 100%;
	font-family: MainFbAlbatros;
	border-radius: 10px;
	border-radius: 30px;
}

.tab_item_value.dropdown-value {
	cursor: pointer;
	user-select: none;
}

.tab_item_value.dropdown-value.editable {
	cursor: text;
	user-select: text;
}

.tab_item_value.disable {
	background: #FAFAFA;
}

.tab_item_label {
	background: #006775;
	border-top-left-radius: 30px;
	border-bottom-left-radius: 30px;
	height: 100%;
	align-content: center;
	padding: 2%;
	color: #fff;
	font-size: 12px;
	width: 25%;
}

/* Dropdown arrow for review tags */
.tag_dropdown_arrow {
	padding: 5px;
	width: 20px;
	height: 20px;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	background: #fff;
	border-radius: 50px;
	color: #006775;
	z-index: 10;
	left: 7px;
	bottom: 0;
	transform: translateY(-50%);
	top: 50%;
	font-size: 10px;
	transition: all 0.3s ease;
	border: 1px solid #D7DFE2;
}

.tag_dropdown_arrow:hover {
	color: #00a1f2;
}

/* Dropdown list for review tags */
.tag_dropdown_list {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #fff;
	z-index: 999;
	margin: 0;
	border-radius: 10px;
	padding: 5px 30px;
	display: none;
	border: 0.25px solid #D1E6E9;
	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
	overflow: hidden;
	max-height: 200px;
	overflow-y: auto;
}

.tag_dropdown_item {
	display: block;
	cursor: pointer;
	text-align: center;
	padding: 5px 0;
	color: #000000;
	font-size: 16px;
	transition: background 0.2s ease;
}

.tag_dropdown_item:hover {
	background: #FAFAFA;
}

.tag_dropdown_item+.tag_dropdown_item {
	border-top: 1px solid #e7e7e7;
}

/* Clear button for editable fields */
.tag_clear_btn {
	padding: 5px;
	width: 40px;
	height: 40px;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	color: #A7B7BD;
	z-index: 10;
	right: 0;
	bottom: 0;
	transform: translateY(-50%);
	top: 50%;
	font-size: 10px;
	transition: all 0.3s ease;
}

.tag_item .fa-solid.fa-xmark {
	color: #B1B1B1;
	font-weight: 600;
}

.tag_item .fa-solid.fa-rotate-left {
	font-size: 12px;
	color: #000000;
	font-weight: 300;
}

.tag_clear_btn:hover {
	color: #ff4444;
}

/* Prefix/Suffix layout for review section */
.tag_item.has-prefix-suffix {
	display: flex;
	gap: 0;
}

.tag-prefix-wrapper,
.tag-main-wrapper,
.tag-suffix-wrapper {
	position: relative;
	flex: 1;
}

.tag-prefix-wrapper::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: calc(100% - 15px);
	background-color: #D1E6E9;
}

.tag-suffix-wrapper::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: calc(100% - 15px);
	background-color: #D1E6E9;
}

.tag-main-wrapper {
	position: relative;
	flex: 2;
	/* Main field gets more space */
}

.tag-suffix-wrapper {
	border-right: none;
	/* No border on the last item */
}

/* Prefix/Suffix input fields */
.tab_item_prefix,
.tab_item_suffix {
	color: #000000;
	font-size: 16px;
	padding: 8px 10px 8px 20px;
	text-align: right;
	outline: 0 none;
	width: 100%;
	font-family: MainFbAlbatros;
	min-height: 38px;
	background: transparent;
}

/* Prefix/Suffix dropdown arrows */
.tag_prefix_arrow,
.tag_suffix_arrow {
	padding: 5px;
	width: 30px;
	height: 40px;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	border-radius: 50px;
	color: #006775;
	z-index: 10;
	left: 0;
	bottom: 0;
	transform: translateY(-50%);
	top: 50%;
	font-size: 10px;
	transition: all 0.3s ease;
}

.tag_prefix_arrow:hover,
.tag_suffix_arrow:hover {
	color: #00a1f2;
}

/* Prefix/Suffix clear buttons */
.tag_prefix_clear,
.tag_suffix_clear {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	font-size: 16px;
	color: #B1B1B1;
	z-index: 2;
	padding: 5px;
	transition: color 0.3s ease;
	display: none;
}

.tag_prefix_clear:hover,
.tag_suffix_clear:hover {
	color: #ff4444;
}

/* Prefix/Suffix dropdown lists */
.tag_prefix_list,
.tag_suffix_list {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #fff;
	z-index: 999;
	margin: 0;
	border-radius: 10px;
	padding: 5px 30px;
	display: none;
	border: 0.25px solid #D1E6E9;
	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
	overflow: hidden;
	max-height: 150px;
	overflow-y: auto;
}

/* Prefix/Suffix dropdown items */
.tag_prefix_item,
.tag_suffix_item {
	display: block;
	cursor: pointer;
	text-align: center;
	padding: 5px 0;
	color: #000000;
	font-size: 16px;
	transition: background 0.2s ease;
}

.tag_prefix_item:hover,
.tag_suffix_item:hover {
	background: #FAFAFA;
}

.tag_prefix_item+.tag_prefix_item,
.tag_suffix_item+.tag_suffix_item {
	border-top: 1px solid #e7e7e7;
}

/* Add left padding for fields with dropdown arrows */
.tag-main-wrapper:has(.tag_dropdown_arrow) .tab_item_value {
	padding-left: 40px;
}

/* Add right padding for fields with clear buttons */
.tag-main-wrapper:has(.tag_clear_btn) .tab_item_value {
	padding-right: 40px;
}

/* Add left padding to tab_item_value when keyboard/date toggle is visible on focus */
.tag-main-wrapper:focus-within .tab_item_value {
	padding-left: 30px;
}

/* Extra left padding when there is also a dropdown arrow */
.tag-main-wrapper:has(.tag_dropdown_arrow):focus-within .tab_item_value {
	padding-left: 55px;
}

/* Tag list prefix/suffix styling - match editor-fields style */
.tag_list .tag_item.tag-prefix .tab_item_value,
.tag_list .tag_item.tag-suffix .tab_item_value {
	font-size: 0.9em;
	opacity: 0.85;
}

.tag_list .tag_item.tag-prefix {
	border-color: #D1E6E9;
}

.tag_list .tag_item.tag-suffix {
	border-color: #D1E6E9;
}

.design_placehoder .fa-clipboard-list-check {
	font-size: 11vw;
	display: block;
}

.design_text {
	text-align: center;
	margin: 30% auto 0;
	font-size: 20px;
	max-width: 105px;
	display: block;
}

.design_img {
	text-align: center;
	margin-top: 10%;
}

.design_img img {
	border-radius: 5px;
	transform: scale(0.8);
	opacity: 0;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.design_img img.show {
	transform: scale(1);
	opacity: 1;
}

.grid .chooser {
	position: absolute;
	z-index: 9;
	background: linear-gradient(to left, #5298A1 0%, #006775 50%, #006775 100%);
	width: 100%;
	top: -35px;
	color: #fff;
	height: 35px;
	line-height: 35px;
	text-align: center;
	display: none;
	font-size: 1em;
	left: 0;
	right: 0;
}

.grid .active .chooser {
	display: block;
}

.designer_content {
	display: inline-flex;
	vertical-align: top;
	grid-gap: 14px;
	flex: 1;
}

.design.block-center .designer_content {
	flex: 0 0 60%;
	display: flex;
	justify-content: center;
}

.design.disable .review {
	display: none;
}

.design.block-right .history {
	display: none;
}

.design.block-right .image_tools {
	display: none !important;
}

.design.block-right .size_select {
	display: none;
}

.design.block-right .review .review-header {
	display: none;
}

.design.block-right .review .name_tag {
	display: none;
}

.design.block-right .for-full {
	display: none;
}

.design.block-center .for-right {
	display: none;
}

.for-right.simcha-id {
	position: absolute;
	top: 0;
	left: 0;
	color: #000000;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
}

.design.block-right .designer_content {
	max-width: 100%;
	margin: 0 auto;
	display: grid;
	width: 100%;
	justify-content: center;
	position: relative;
}

.my-editor>.view_preview {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 9;
	left: 0;
	width: 100%;
	box-sizing: border-box;
	opacity: 0;
	height: 5vw;
	transition: opacity 0.3s ease;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	background: linear-gradient(to bottom, #3a3a3a 0%,
			rgba(58, 58, 58, 0.7) 15%,
			rgba(58, 58, 58, 0.4) 35%,
			rgba(58, 58, 58, 0.1) 65%,
			rgba(58, 58, 58, 0) 100%);
}

.view_preview_button {
	border: 1px solid #FFFFFF;
	border-radius: 50px;
	padding: 3px 12px 0px;
	line-height: 1.5;
	cursor: pointer;
	color: #000000;
	font-size: 14px;
	font-weight: 600;
	background: rgba(255, 255, 255, 0.75);
	text-align: center;
	margin: 15px auto;
	width: 112px;
}

.watermark-text {
	color: #fff;
	font-size: 12px;
	position: absolute;
	bottom: 0;
	z-index: 9;
	opacity: 0;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	padding-bottom: 15px;
	padding-top: 4vw;
	transition: opacity 0.3s ease;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	background: linear-gradient(to top, #3a3a3a 0%,
			rgba(58, 58, 58, 0.7) 15%,
			rgba(58, 58, 58, 0.4) 35%,
			rgba(58, 58, 58, 0.1) 65%,
			rgba(58, 58, 58, 0) 100%);
}

.design.block-center .step-3-header {
	display: none;
}

.design .my-editor:hover .view_preview,
.design .my-editor:hover .watermark-text {
	opacity: 1;
}

/*.full_editor i {
	font-size: 10px;
	position: absolute;
	right: 10px;
	top: 7px;
}*/

.design.block-right .background_select {
	border: 0 none;
	align-items: start;
	margin-top: 0;
}

.design.block-right .bg-list .color {
	margin-top: 0;
}

.design.block-right .bg-list {
	display: flex;
	gap: 5px;
}

.design.block-right .review {
	width: 100%;
	margin-left: 0;
}

.design.block-right .editor_side.design_editor_side {
	order: 1;
	padding: 0;
}

.go-step3 {
	display: none;
}

.design.block-right .go-step3 {
	display: inline flow-root list-item;
	margin-top: 20px;
}

.design.block-right .my-editor {
	margin: 0 auto;
	display: flex;
	justify-content: center;
	max-width: 100%;
	overflow: hidden;
	cursor: pointer;
	direction: ltr !important;
}

.design.block-right .scaller {
	transform-origin: top center;
	pointer-events: none;
}

.design.block-right #svgCanvas {
	border-radius: 20px;
}

.buy-btn {
	display: flex;
	grid-gap: 10px;
	text-align: center;
	font-size: 1vw;
	padding: 0px 0 40px;
}

.buy-btn .add_to_cart {
	border: 1px solid #000000;
	flex: 1;
	color: #000000;
	border-radius: 20px;
	padding: 10px 10px 5px;
	cursor: pointer;
	font-weight: 600;
	font-size: 18px;
}


.buy-btn .buy-card,
.update-cart-item {
	flex: 1;
	color: #fff;
	border-radius: 20px;
	padding: 10px 0 5px;
	cursor: pointer;
	font-weight: 600;
	font-size: 18px;
	box-shadow: 0px 3px 6px rgba(84, 128, 135, 0.25);
	background: linear-gradient(90deg, #5298A1 0%, #006775 49%);
	box-shadow: 0px 3px 6px rgba(84, 128, 135, 0.25);
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	user-select: none;
}

.buy-btn .buy-card:hover,
.update-cart-item:hover {
	transform: translateY(-2px);
	box-shadow: 0px 4px 8px rgba(0, 103, 117, 0.1);
	transition: all 0.05s;
}

.buy-btn .buy-card:active,
.update-cart-item:active {
	transform: translateY(0) scale(0.96) !important;
	transition: all 0.05s ease !important;
}

.save-later {
	border: 1px solid #006775;
	font-size: 31px;
	width: 49%;
	border-radius: 50px;
	text-align: center;
	padding: 5px;
	cursor: pointer;
}

.review_bottom {
	margin-top: 20px;
	justify-content: space-between;
}

.for-right.simcha-id {
	display: none;
}


.desktop-editor-header {
	display: flex;
	justify-content: space-evenly;
	gap: 10px;
	padding: 5px 0;
	align-items: center;
	justify-content: space-between;
}

.view_full_screen,
.save_for_later,
.full_editor,
.desktop-editor-header .view_preview {
	display: flex;
	justify-content: center;
	flex: 1;
	max-width: 33%;
	align-items: center;
	height: 25px;
	padding: 0 18px;
	border-radius: 25px;
	border: 1px solid #D7DFE2;
	background: #ffffff;
	color: #545C5F;
	font-size: 12px;
	font-weight: 400;
	white-space: nowrap;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
	backface-visibility: hidden;
	transform: translateZ(0);
}

.full_editor {
	font-size: 14px;
	color: #000;
	font-weight: 600;
	border-color: #A7B7BD;
}

.full_editor i {
	padding: 0 6px 0 0;
	font-size: 12px;
}

.view_full_screen:hover,
.save_for_later:hover,
.full_editor:hover,
.desktop-editor-header .view_preview:hover {
	border-color: #A7B7BD;
	color: #000;
	transform: translateY(-1.5px);
	box-shadow: 0px 4px 8px rgba(0, 103, 117, 0.1);
}

.view_full_screen:active,
.save_for_later:active,
.full_editor:active,
.desktop-editor-header .view_preview:active {
	transform: translateY(0) scale(0.96) !important;
	transition: all 0.05s ease !important;
}


.design.block-center .desktop-editor-header.side-screen {
	display: none;
}

.design.block-right .desktop-editor-header.center-screen {
	display: none;
}

.mockup {
	display: none;
	position: relative;
	z-index: 99;
	background: #fff;
	border-radius: 10px;
	padding: 1vw;
	box-shadow: 0 0px 6px 4px rgba(0, 0, 0, 0.1);
	grid-gap: 1vw;
	max-width: 95vw;
	max-height: 92vh;
	aspect-ratio: 6/5;
}

.mockup.active {
	display: flex;
}

.mockup_overlay {
	display: none;
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	background: rgba(20, 20, 20, 0.92);
	z-index: 999;
	align-items: center;
	justify-content: center;
}

.mockup_overlay.active {
	display: flex;
}

.close_preview {
	position: absolute;
	top: -41px;
	right: 12px;
	color: #fff;
	font-size: 34px;
	cursor: pointer;
}

.mockup_preview {
	width: 77%;
}

.mockup_list .mockup_item>img {
	border-radius: 5px;
}

.mockup_list .mockup_item.active>img {
	outline: 4px solid #000;
}

.mockup_list .mockup_item {
	cursor: pointer;
}

.mockup_list {
	width: 22%;
	display: flex;
	flex-direction: column;
	grid-gap: 2vw;
	overflow: auto;
	padding: 5px;
}

.mockup img {
	display: block;
	max-height: 100%;
}

.mockup_placeholder_1 {
	position: relative;
	z-index: 3;
}

.mockup_placeholder_2 {
	position: relative;
	z-index: 3;
}

.mockup_placeholder_3 {
	position: relative;
	z-index: 3;
}

.mockup_img_1 .img_box {
	width: 32.6%;
	height: 65%;
	position: absolute;
	top: 16%;
	left: 31.1%;
	z-index: 2;
	rotate: 0.2deg;
}

.mockup_img_2 .img_box {
	width: 37.9%;
	height: 45.3%;
	position: absolute;
	top: 16.9%;
	left: 3%;
	z-index: 1;
	opacity: 0.5;
}

.mockup_img_3 .img_box {
	width: 45.1%;
	height: 53.4%;
	position: absolute;
	top: 13%;
	left: 27.4%;
	z-index: 2;
}

.mockup_img_4 .img_box {
	width: 37.9%;
	height: 45.3%;
	position: absolute;
	top: 16.9%;
	right: 3%;
	z-index: 1;
	opacity: 0.5;
}

.mockup_img_5 .img_box {
	width: 78.4%;
	height: 42.1%;
	position: absolute;
	top: 22.8%;
	left: 10.6%;
	z-index: 2;
}

.img_box img {
	height: 100%;
	width: 100%;
	object-fit: contain;
}

.mockup_item {
	position: relative;
	border-radius: 10px;
	background: #000;
}

.save_popup,
.buy_popup,
.checkout_popup {
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	opacity: 1;
	transition: opacity 0.3s ease;
	display: none;
}

.overlay {
	position: absolute;
	width: 100vw;
	height: 100vh;
	background: rgba(6, 6, 6, 0.25);
}

.popup_content {
	background: #fff;
	border-radius: 25px;
	box-shadow: 0 0px 30px rgba(0, 0, 0, 0.8);
	max-width: 800px;
	text-align: center;
	opacity: 1;
	transform: scale(0.8);
	animation: fadeInUp 0.3s ease-out forwards;
	position: relative;
	overflow: hidden;
	width: 100%;
}

.desktop .popup_content {
	max-width: 35%;
}

.popup_body {
	padding: 2vw;
	max-height: calc(200vh - 200px);
	overflow: auto;
	height: 90%;
}

.popup_close {
	position: absolute;
	top: 15px;
	right: 30px;
	color: #fff;
	font-size: 25px;
	padding: 5px;
	cursor: pointer;
}

.popup_head {
	background: linear-gradient(to right, #5298A1 0%, #006775 50%, #006775 100%);
	font-size: 30px;
	color: #fff;
	font-weight: 600;
	padding: 20px 10px 10px;
}

.popup_text {
	font-size: 20px;
	padding-bottom: 20px;
	max-width: 640px;
	margin: 0 auto;
	line-height: 1.25;
	color: #000;
}

.email-note {
	font-size: 15px;
	color: #000;
}

#save_email,
#card_email,
#checkout_email,
.coupon-code-input {
	width: 100%;
	margin: 0 auto;
	font-size: 15px;
	border-radius: 25px;
	border: 0 none;
	line-height: 2;
	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25);
	text-align: left;
	padding: 5px 20px;
	outline: 0;
}

#card_email {
	margin-top: 12px;
}

#save_email::placeholder,
#card_email::placeholder,
.coupon-code-input::placeholder,
#checkout_email::placeholder {
	color: #A7B7BD;
	font-weight: 300;
}

#save_email:focus,
#card_email:focus {
	outline: 0 none;
}

.card_info input {
	border: 0 none;
	font-size: max(28px, 2vw);
}

.highlight_checkbox {
	margin: 2vw;
}

#card_number {
	width: 100%;
}

.card_info input:focus {
	outline: 0 none;
}

.card_info input::placeholder {
	color: #757575;
	font-weight: 300;
}

#card_expiry,
#checkout_card_expiry,
#card_cvc {
	width: 49%;
	display: inline;
	font-size: 20px;
	font-family: 'arial';
	font-weight: 500;
}

#card_expiry,
#checkout_card_expiry {
	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25);
	border-radius: 25px;
	font-size: 25px;
	border: 0 none;
	line-height: 2;
	text-align: left;
	padding: 0px 20px;
	outline: 0;
}

.popup_note .note_text {
	color: #A7B7BD;
	font-size: 20px;
	line-height: 1.25;
	padding: 2vw;
}

.popup_button .btn {
	background: linear-gradient(to right, #5298A1 0%, #006775 100%);
	font-size: 20px;
	color: #fff;
	border: 0 none;
	border-radius: 50px;
	margin: 0 auto 20px;
	cursor: pointer;
	font-weight: 600;
	padding: 8px 6vw;
	max-width: 100%;
}

#form-save-later .popup_button .btn {
	width: 316px;
}

.term_link {
	display: inline-block;
	font-size: 15px;
	color: #A7B7BD;
}

/* Checkout Popup Styles */

.text_list {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #fff;
	z-index: 999;
	margin-top: 1px;
	border-radius: 25px;
	padding: 5px 30px;
	display: none;
	border: 0.25px solid #5298A1;
	overflow: hidden;
	box-shadow: 0px 0px 3px #5298A1;
}

.un-dropdown {
	display: none;
}

/* Rotate the chevron on the trigger button when the dropdown is open */
.select-btn.is-open i,
.prefix-select-btn.is-open i,
.suffix-select-btn.is-open i {
	--fa: "\f077";
}

.close-dropdown {
	position: absolute;
	height: 100%;
	border-left: 0.25px solid #D1E6E9;
	top: 0;
	right: 0;
	width: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	display: none;
}

.text_item {
	display: block;
	cursor: pointer;
	text-align: center;
	padding: 5px 0;
	color: #000000;
}

.text_item:hover {
	background: #FAFAFA;
}

.text_item+.text_item {
	border-top: 1px solid #e7e7e7;
}

/* Lightbox-style overlay for full screen image */
#fullScreenOverlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(20, 20, 20, 0.92);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: zoom-out;
}

#fullScreenOverlay .full-screen-content {
	position: relative;
	background: #222;
	border-radius: 10px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
	padding: 12px;
	height: min(92vh, 1200px);
	max-width: 96vw;
	max-height: 92vh;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	cursor: auto;
}

#fullScreenOverlay .full-screen-close {
	position: absolute;
	top: 4vh;
	right: 2vw;
	font-size: 0.9rem;
	color: #fff;
	background: rgba(0, 0, 0, 0.3);
	border-radius: 50%;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 2;
	transition: background 0.2s;
}

#fullScreenOverlay .full-screen-close:hover {
	background: rgba(0, 0, 0, 0.6);
}

#fullScreenOverlay .full-screen-image {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

#fullScreenOverlay .full-screen-image img,
#fullScreenOverlay .full-screen-image svg {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	border-radius: 6px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
	background: #fff;
	display: block;
	object-fit: contain;
}

.full-screen-close .fa-xmark {
	pointer-events: none;
}

.preview.block-left .design_logo {
	position: absolute;
	top: 0;
	left: 0;
}

.design_placehoder {
	margin: 0 auto;
}

@keyframes frame-skeleton-pulse {
	0%, 100% { opacity: 1; }
	50%       { opacity: 0.4; }
}

/* Skeleton sits outside grid flow so it can't affect swatch/card alignment */
.design.block-right .design_placehoder {
	position: absolute;
	inset: 0;
}

.frame-loading-skeleton {
	width: 100%;
	height: 100%;
	background: #e8eef0;
	border-radius: 8px;
	animation: frame-skeleton-pulse 1.4s ease-in-out infinite;
}

#load-more {
	max-width: 200px;
	margin: 0 auto;
	opacity: 0;
}

.preview.block-center .design_logo {
	display: none;
}

.preview.block-center .goto_editor {
	display: none;
}

/* Contact Popup Styles */

/* Bug 10: editor-footer is mobile-only. Always hidden on desktop; JS controls
   show/hide on mobile (Steps 1 & 3 show it, Step 2 hides it). */
body.desktop .editor-footer {
	display: none !important;
}

.footer {
	background: #FAFAFA;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9;
	height: 30px;
	font-size: 12px;
	line-height: 30px;
	padding: 0 20px;
	color: #B1B1B1;
	width: 50%;
}

.footer .link-contact {
	float: right;
}

.jewish_datepicker_wrapper.off {
	display: none;
}

.overlay-a {
	display: none;
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	background: #006775;
	opacity: 0.5;
	z-index: 9;
}

.owl-carousel .owl-stage-outer {
	margin-right: -0.1vw;
	margin-left: -0.1vw;
}

.box {
	position: absolute;
	color: white;
	top: 50%;
	left: 100%;
	transform: translate(10px, -50%);
	background-color: black;
	white-space: nowrap;
	z-index: 10;
	padding: 5px 10px;
	border-radius: 5px;
}

button.btn-default:active {
	background-color: #FFF;
	-webkit-box-shadow: none;
	box-shadow: none;
}

button.btn-default:active:hover {
	background-color: #3276B1;
}

/* override Bootstrap excessive button padding */
button.ui-keyboard-button.btn {
	padding: 1px 6px;
}

.jewish_datepicker_wrapper {
	z-index: 9999;
}

.review-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.review-header:has(.show-all-fields:not([style*="display: none"])) {
	justify-content: space-between;
}

.review-header:has(.show-all-fields[style*="display: none"]) {
	justify-content: flex-end;
}

.show-all-fields {
	color: #000;
	font-size: 15px;
	margin-top: 15px;
}

.review-header .simcha-id {
	font-weight: 300;
	text-align: right;
}

.upload-image-label {
	margin: 20px 5px 0;
	cursor: pointer;
	display: block;
}

.additional-options {
	display: flex;
	justify-content: space-between;
	width: 100%;
	grid-gap: 10px;
}

.additional-options>div {
	border: 1px solid #D7DFE2;
	width: 100%;
	padding: 10px;
	border-radius: 10px;
}

.simcha-id-display {
	font-size: 16px;
	font-weight: 400;
	color: #000;
}

/* Music Box Styles */
.total_price {
	color: #033D44;
	display: flex;
	flex-direction: row;
	grid-gap: 10px;
	flex-wrap: wrap;
	margin: 20px 0;
	font-size: 20px;
}

.music-box {
	position: relative;
	width: 50%;
}

.music-box-label,
.remove-brand-label {
	cursor: pointer;
	color: #000000;
	font-size: 14px;
	margin-left: 5px;
	position: relative;
	top: -2px;
}

.selected-music-display {
	display: flex;
	margin-left: 20px;
	font-size: 10px;
	color: #A7B7BD;
	position: absolute;
	margin-top: -4px;
	gap: 5px;
}

.music-name {
	width: 70px;
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	direction: rtl;
}

.change-music-link,
.remove-music-link {
	margin-left: 5px;
	color: #A7B7BD;
	text-decoration: underline;
}

.change-music-link:hover,
.remove-music-link:hover {
	color: #006775;
}

/* Music Dropdown Styles */
.music-popup {
	position: fixed;
	width: 324px;
	max-width: 90vw;
	z-index: 9999;
	display: none;
	top: 0;
	left: 0;
}

.music-popup-content {
	background: white;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15);
	position: relative;
	padding: 23px;
}

.close-popup {
	background: none;
	border: none;
	font-size: 20px;
	cursor: pointer;
	color: #A7B7BD;
	padding: 0;
	position: absolute;
	top: 25px;
	right: 35px;
	font-weight: bold;
}

.close-popup:hover {
	color: #006775;
}

.music-players-container {
	max-height: 400px;
	overflow-y: auto;
	padding: 2px;
}

/* Music Player Item Styles */
.music-player-item {
	display: flex;
	align-items: center;
	padding: 7px;
	margin-bottom: 8px;
	background: #FAFAFA;
	border-radius: 50px;
	border: 1px solid transparent;
	transition: all 0.3s ease;
	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.15);
}

.music-player-item.selected {
	background: #E3EEF2;
	border-color: #5298A1;
}

.music-radio {
	width: 18px;
	height: 18px;
	margin-left: 10px;
	cursor: pointer;
	accent-color: #006775;
}

#music-confirm-btn {
	min-width: 120px;
	opacity: 1;
	background: linear-gradient(to right, #5298A1 0%, #006775 100%);
	color: #fff;
	border-radius: 20px;
	padding: 10px 10px 5px;
	cursor: pointer;
	font-weight: 600;
	font-size: 18px;
	border: 0 none;
	font-family: 'MainTTCommons', "Roboto", sans-serif;
}

.play-pause-btn {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	border: none;
	background: linear-gradient(to right, #5298A1, #006775 100%);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	margin-right: 15px;
	font-size: 18px;
	transition: all 0.3s ease;
	flex-shrink: 0;
}

.play-pause-btn:hover {
	transform: scale(1.05);
}

.play-pause-btn.playing {
	background: #006775;
	box-shadow: 0 0 0 3px rgba(0, 103, 117, 0.2);
}

.music-info {
	flex: 1;
	min-width: 0;
}

.music-title {
	font-weight: 500;
	font-size: 12px;
	color: #000000;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.music-progress-container {
	position: relative;
	margin-top: 4px;
}

.music-progress {
	width: 100%;
	height: 4px;
	background: #ddd;
	border-radius: 2px;
	overflow: hidden;
	cursor: pointer;
}

.music-progress-bar {
	height: 100%;
	background: #006775;
	width: 0%;
	transition: width 0.1s ease;
}

.music-time {
	display: none;
}

.ui-widget-content {
	border: 0 none;
	color: #000000;
}

.ui-keyboard-input div {
	display: inline;
}

.more-design {
	display: none;
}

.mobile .inside-review {
	display: none;
}

.ui-keyboard .ui-keyboard-button[data-value="lang"] span {
	font-size: 0 !important;
	background: url('../img/globe.png');
	width: 100%;
	background-size: 50%;
	background-repeat: no-repeat;
	background-position: center;
	height: 100%;
	vertical-align: top;
}

.ui-keyboard .ui-keyboard-button[data-value="enter"] span {
	font-size: 0 !important;
	background: url('../img/enter.png');
	width: 100%;
	background-size: 35%;
	background-repeat: no-repeat;
	background-position: center;
	height: 100%;
	vertical-align: top;
}

.ui-keyboard .ui-keyboard-button[data-value="enter"] {
	background: #727884 !important;
	color: white !important;
}

.ui-keyboard .ui-keyboard-button[data-value="alt"] {
	background: #727884 !important;
	color: white !important;
}

.ui-keyboard .ui-keyboard-button[data-value="normal"] {
	background: #727884 !important;
	color: white !important;
}

.ui-keyboard .ui-keyboard-button.ui-keyboard-backspace,
.ui-keyboard .ui-keyboard-button[data-value="bksp"] {
	background: #727884 !important;
	color: white !important;
}

.ui-keyboard .ui-keyboard-button[data-value="lang"] {
	background: #727884 !important;
	color: white !important;
}

.ui-keyboard-space span {
	color: #000;
	font-size: 22px !important;
	font-weight: 600;
}

/* Signin Popup Styles */

/* Account Dropdown Styles */

.price-top {
	position: absolute;
	top: 12px;
	left: 70%;
	transform: translate(-50%);	
	z-index: 10;
	border-radius: 25px;
	cursor: pointer;
/*opacity: 0; not sure about it yet*/
	transition: all 0.3s ease;
	background: rgba(255, 255, 255, 0.65);
	padding: 3px 10px 2px;
	border: 0.7px solid #c9c9c9;
	outline: 0.1px solid #fff;	display: flex;
	flex-direction: row-reverse;
	gap: 5px;
	backdrop-filter: blur(0.5px);
	-webkit-backdrop-filter: blur(0.5px);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
	color: #000;
}

/*.frame_item:hover .price-top{
	transition: all 0.3s ease;
		opacity: 1;
}*/

/* Wishlist Heart Icon Styles */
.wishlist-heart {
	display: none;
	cursor: pointer;
	transition: all 0.3s ease;
}

.block-center .wishlist-heart {
	display: flex;
}

.wishlist-heart .fa-heart:hover {
	font-weight: 900;
}

.wishlist-heart.loading i {
	animation: spin 1s linear infinite;
}

.frame_item .thumbnail {
	position: relative;
	overflow: visible;
}

/* iFields iframe styling */

.design-top-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 70px;
	background: #ffffff;
	border-bottom: 1px solid #B1B1B1;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 30px;
	z-index: 1000;
}

.design-top-bar .design_logo {
	height: 50px;
}

.design-top-bar .design_logo img {
	height: 100%;
	width: auto;
}

.top-bar-actions {
	display: flex;
	align-items: center;
	gap: 20px;
}

.top-bar-actions .hello_user {
	font-size: 14px;
	color: #474747;
}

.top-bar-actions .user {
	cursor: pointer;
	font-size: 14px;
	color: #474747;
	position: relative;
}

.top-bar-actions .user i {
	font-size: 24px;
}

/* 3-Column Layout */
.design-columns {
	display: flex;
	height: calc(100vh - 120px);
	/* Account for top bar and footer */
	margin-top: 70px;
	gap: 0;
}

.column-left,
.column-center,
.column-right {
	overflow-y: auto;
	padding: 20px;
	background: #ffffff;
}

.column-left {
	flex: 0 0 30%;
	border-right: 1px solid #B1B1B1;
}

.column-center {
	flex: 0 0 40%;
	border-right: 1px solid #B1B1B1;
}

.column-right {
	flex: 0 0 30%;
	position: relative;
	transition: flex 0.3s ease;
}

.column-right.expanded {
	flex: 0 0 50%;
}

/* Quick Actions in Right Column */
.quick-actions {
	margin-top: 20px;
	padding: 20px;
	background: #FAFAFA;
	border-radius: 8px;
}

.action-buttons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 15px;
}

.action-btn {
	padding: 12px;
	background: #ffffff;
	border: 1px solid #ddd;
	border-radius: 6px;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	font-size: 12px;
}

.action-btn:hover {
	background: #f0f0f0;
	border-color: #bbb;
}

.action-btn i {
	font-size: 18px;
}

.full-editor-toggle {
	background: #2196F3;
	color: white;
	padding: 15px;
	text-align: center;
	border-radius: 6px;
	cursor: pointer;
	font-weight: bold;
	transition: background 0.3s ease;
}

.full-editor-toggle:hover {
	background: #0b7dda;
}

/* Full Editor Panel */
.full-editor-panel {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: white;
	z-index: 100;
	overflow-y: auto;
	padding: 20px;
}

.full-editor-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: 2px solid #B1B1B1;
}

.full-editor-header h3 {
	margin: 0;
	font-size: 20px;
	color: #474747;
}

.close-full-editor {
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	color: #666;
	padding: 5px 10px;
}

.close-full-editor:hover {
	color: #474747;
}

/* Designer Preview */
.designer-preview {
	min-height: 400px;
	background: #FAFAFA;
	border-radius: 8px;
	padding: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.design_placehoder {
	text-align: center;
	color: #B1B1B1;
}

.design_img i {
	font-size: 80px;
	color: #ddd;
}

#frame-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 15px;
	padding-top: 5px;
}

.frame_item {
	position: relative;
	overflow: hidden;
	cursor: pointer;
}

/* Mobile Filter */
.mobile-filter {
	display: none;
	padding: 5px 15px;
	background: #fff;
	text-align: center;
	cursor: pointer;
	border-radius: 10px;
	flex: 1;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
	justify-content: space-between;
	color: #000;
	z-index: 9;
	height: 35px;
	align-items: center;
}

/* Order Confirmation Popup Styles - Matching Provided Design */
.order_confirmation_popup {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99999;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.order_confirmation_popup.show {
	opacity: 1;
}

.order_confirmation_popup .overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	z-index: 1;
	opacity: 1;
}

.order_confirmation_popup .popup_content {
	position: relative;
	z-index: 2;
	max-width: 850px;
	width: 90%;
	max-height: 90vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 15px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
	animation: slideUp 0.3s ease;
}

.order_confirmation_popup .popup_close {
	position: absolute;
	top: 15px;
	right: 15px;
	background: rgba(255, 255, 255, 0.95);
	border: none;
	border-radius: 50%;
	width: 35px;
	height: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 20px;
	z-index: 3;
	color: #474747;
	transition: all 0.2s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.order_confirmation_popup .popup_close:hover {
	background: #fff;
	color: #d9534f;
	transform: rotate(90deg);
}

.order_confirmation_popup .popup_print {
	position: absolute;
	top: 135px;
	right: 25px;
	background: transparent;
	border: none;
	cursor: pointer;
	font-size: 18px;
	z-index: 3;
	color: #000;
	transition: all 0.2s ease;
}

.order_confirmation_popup .popup_print:hover {
	color: #000;
	transform: scale(1.1);
}

/* Teal Header Bar */
.confirmation_header_bar {
	background: linear-gradient(to right, #5298A1 0%, #006775 50%, #5298A1 100%);
	color: #fff;
	text-align: center;
	padding: 30px 20px;
	border-radius: 15px 15px 0 0;
}

.confirmation_header_bar i {
	font-size: 32px;
	margin-bottom: 8px;
	display: block;
}

.confirmation_header_bar h2 {
	font-size: 28px;
	font-weight: 700;
	margin: 0 0 5px 0;
	letter-spacing: 0.5px;
}

.confirmation_header_bar p {
	font-size: 15px;
	margin: 0;
	opacity: 0.95;
}

/* Main Content Area */
.confirmation_main_content {
	display: flex;
	padding: 30px 0;
	background: #fff;
	max-height: calc(90vh - 212px);
	border-top: 1px solid #FAFAFA;
	margin: 0 60px;
}

.confirmation_text_section {
	padding-right: 15px;
	width: 40%;
	display: flex;
	flex-direction: column;
}

.confirmation_intro {
	font-size: 14px;
	color: #474747;
	line-height: 1.6;
	padding: 25px 0 25px 0;
	margin: 0;
}

/* Order Details List */
.order_details_list {
	margin-top: 20px;
	text-align: left;
}

.detail_item {
	margin-bottom: 20px;
}

.detail_label {
	display: block;
	font-size: 14px;
	margin-bottom: 5px;
}

.detail_value {
	display: block;
	font-size: 16px;
	color: #000;
	font-weight: 600;
}

.items_detail div {
	margin-bottom: 3px;
	font-size: 15px;
}

.total_detail {
	margin-top: 30px;
	padding-top: 15px;
}

.total_detail .detail_label {
	font-size: 15px;
	font-weight: 400;
}

.total_detail .detail_value {
	font-size: 18px;
	font-weight: 700;
	color: #000;
}

/* Right Side: Items with Thumbnails and Downloads */
.confirmation_items_section {
	display: flex;
	flex-direction: column;
	gap: 20px;
	border-left: 1px solid #B1B1B1;
	overflow: scroll;
	width: 60%;
	padding-left: 10px;
}

.confirmation_item_row {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
}

.multi .confirmation_item_row {
	flex-direction: row;
}

.item_thumbnail {
	width: 100%;
	max-width: 240px;
	aspect-ratio: 4/5;
	background: #FAFAFA;
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

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

.item_download_buttons {
	display: flex;
	flex-direction: row;
	gap: 8px;
	width: 100%;
	padding: 10px;
}

.multi .item_download_buttons {
	flex-direction: column;
	margin-top: auto;
	width: 40%;
}

.download_btn {
	background: #006775;
	color: #fff;
	border: none;
	border-radius: 25px;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	flex: 1;
}

.download_btn:hover {
	background: #006775;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(95, 168, 177, 0.4);
}

.download_btn:active {
	transform: translateY(0);
}

.download_btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.download_btn i {
	font-size: 14px;
}

/* Footer Links */
.confirmation_footer_links {
	display: flex;
	gap: 0;
	margin-top: auto;
	flex-direction: column;
	text-align: left;
}

.footer_link {
	color: #474747;
	text-decoration: underline;
	font-size: 14px;
	cursor: pointer;
	transition: color 0.2s ease;
}

.footer_link:hover {
	color: #006775;
}

/* Cart Item Styles - Extracted from JS */
.cart-item-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 4px;
}

.empty-cart-message {
	text-align: center;
	color: #B1B1B1;
	padding: 20px;
}

/* Popup Display */

/* Order Confirmation Discount Colors */
.discount-value {
	color: #006775;
}

/* Remove Edit Tag Item */
.tag_item.remove_edit.show-flex {
	display: flex;
}

/* Color Swatch Carousel Display */
.color-swatches-flex {
	display: flex;
	gap: 4px;
}

/* Owl Carousel Flex Display */
.owl-carousel-flex {
	display: flex;
	gap: 2px;
}

/* Preview Block Z-Index States */
.preview.block-left.z-index-9 {
	z-index: 9;
}

/* Mobile Keyboard Positioning */
.ui-keyboard-mobile {
	position: fixed !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	z-index: 10000 !important;
	padding: 0 !important
}

/* Design Holder Min Height */
.design-holder.min-height-auto {
	min-height: auto;
}

/* Payment Popup Styles - Extracted from buy-popup.php and checkout-popup.php */

/* Coupon Section */

/* Price Breakdown */

/* Email Section */

/* Payment Progress Bar */

/* iField Validation States */

/* Refund Modal Styles */
.refund-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.refund-modal-overlay.show {
	opacity: 1;
}

.refund-modal-container {
	background: white;
	border-radius: 12px;
	max-width: 550px;
	width: 90%;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
	animation: slideDown 0.3s ease;
	overflow: hidden;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}

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

@keyframes slideUp {
	from {
		transform: translateY(30px);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes slideDown {
	from {
		transform: translateY(-50px);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.refund-modal-header {
	text-align: center;
	padding: 30px 20px 20px;
	border-bottom: 1px solid #e5e5e5;
}

.refund-icon {
	width: 80px;
	height: 80px;
	margin: 0 auto 20px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40px;
}

.refund-icon.success {
	background: #D1E6E9;
	color: #006775;
}

.refund-icon.error {
	background: #FFE5E5;
	color: #9F1B1B;
}

.refund-modal-header h3 {
	margin: 0;
	font-size: 24px;
	font-weight: 600;
	color: #333;
}

.refund-modal-body {
	padding: 25px 30px;
}

.refund-message {
	font-size: 16px;
	color: #666;
	text-align: center;
	margin-bottom: 25px;
	line-height: 1.5;
}

.refund-details {
	background: #FAFAFA;
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 20px;
}

.refund-detail-row {
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid #e5e5e5;
}

.refund-detail-row:last-child {
	border-bottom: none;
}

.refund-detail-row .label {
	font-weight: 600;
	color: #000000;
	font-size: 14px;
}

.refund-detail-row .value {
	color: #006775;
	font-size: 14px;
	font-weight: 500;
}

.refund-detail-row.error-detail .value {
	color: #9F1B1B;
}

.refund-info-box {
	background: #D1E6E9;
	border: 1px solid #5298A1;
	border-radius: 6px;
	padding: 15px;
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.refund-info-box.error {
	background: #FFE5E5;
	border-color: #9F1B1B;
}

.refund-info-box i {
	color: #006775;
	font-size: 20px;
	margin-top: 2px;
}

.refund-info-box.error i {
	color: #9F1B1B;
}

.refund-info-box p {
	margin: 0;
	font-size: 13px;
	color: #000000;
	line-height: 1.5;
}

.refund-info-box.error p {
	color: #000000;
}

.refund-info-box a {
	color: #006775;
	font-weight: 600;
	text-decoration: underline;
}

.refund-info-box.error a {
	color: #9F1B1B;
}

.refund-modal-footer {
	padding: 20px 30px;
	border-top: 1px solid #e5e5e5;
	text-align: center;
}

.refund-close-btn {
	background: linear-gradient(to right, #5298A1 0%, #006775 50%, #5298A1 100%);
	color: white;
	border: none;
	padding: 12px 40px;
	border-radius: 6px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
}

.refund-modal-container.error .refund-close-btn {
	background: #9F1B1B;
}

.refund-close-btn:hover {
	background: #006775;
	transform: scale(1.02);
}

.refund-modal-container.error .refund-close-btn:hover {
	background: #7A1515;
	transform: scale(1.02);
}

.menu-spacer {
	display: none;
}

/* Flying to Cart Animation */
.flying-to-cart {
	animation: flyToCart 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes flyToCart {
	0% {
		opacity: 1;
		transform: scale(1) rotate(0deg);
	}

	50% {
		opacity: 0.7;
		transform: scale(0.95) rotate(5deg);
	}

	100% {
		opacity: 0;
		transform: scale(0.5) rotate(0deg);
	}
}

/* Alternative smooth flying animation */
@keyframes flyToCartSmooth {
	0% {
		opacity: 1;
		transform: scale(1);
		filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
	}

	100% {
		opacity: 0.3;
		transform: scale(0.4);
		filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
	}
}

/* Added to Cart Popup Styles */
.added-to-cart-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(40, 51, 59, 0.5);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.added-to-cart-overlay.show {
	opacity: 1;
}

.added-to-cart-popup {
	background-color: white;
	border-radius: 12px;
	padding: 40px 50px;
	text-align: center;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
	transform: scale(0.7);
	opacity: 0;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.added-to-cart-popup.show {
	transform: scale(1);
	opacity: 1;
}

.added-to-cart-icon {
	width: 80px;
	height: 80px;
	margin: 0 auto 20px;
	background-color: #A7B7BD;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.added-to-cart-icon i {
	font-size: 40px;
	color: white;
	animation: checkmark-pop 1s ease-in-out;
}

.added-to-cart-text {
	font-size: 24px;
	font-weight: 600;
	color: #333;
	line-height: 1.4;
}

/* Checkmark animation */
@keyframes checkmark-pop {
	0% {
		transform: scale(0) rotate(-45deg);
		opacity: 0;
	}

	50% {
		transform: scale(1.2) rotate(0deg);
		opacity: 1;
	}

	70% {
		transform: scale(0.9) rotate(0deg);
	}

	100% {
		transform: scale(1) rotate(0deg);
		opacity: 1;
	}
}

.animation_loader {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	background: none;
	border-radius: 5px;
	overflow: hidden;
	display: none;
	z-index: 9;
}

.animation_loader::before,
.animation_loader::after {
	box-sizing: inherit;
	content: "";
	position: absolute;
	border: 3px solid transparent;
	border-radius: 10px;
	width: 0;
	height: 0;
}

/* Top + Left (first half) */
.animation_loader::before {
	top: 0;
	right: 0;
	animation: drawBefore 2s linear infinite;
}

/* Bottom + Right (second half) */
.animation_loader::after {
	bottom: 0;
	left: 0;
	animation: drawAfter 2s linear infinite;
}

.step-1-note {
	color: #424a4c;
	font-size: 12px;
	text-align: center;
	margin: 0px 0 20px;
}

/* Exact timing recreation */
@keyframes drawBefore {
	0% {
		width: 0;
		height: 0;
		border-top-color: var(--animationColor);
		border-left-color: transparent;
	}

	25% {
		width: 100%;
		height: 0;
		border-top-color: var(--animationColor);
		border-left-color: var(--animationColor);
	}

	50% {
		width: 100%;
		height: 100%;
		border-top-color: var(--animationColor);
		border-left-color: var(--animationColor);
	}

	100% {
		width: 100%;
		height: 100%;
		border-top-color: var(--animationColor);
		border-left-color: var(--animationColor);
	}
}

@keyframes drawAfter {

	0%,
	50% {
		width: 0;
		height: 0;
		border-bottom-color: transparent;
		border-right-color: transparent;
	}

	75% {
		width: 100%;
		height: 0;
		border-bottom-color: var(--animationColor);
		border-right-color: var(--animationColor);
	}

	100% {
		width: 100%;
		height: 100%;
		border-bottom-color: var(--animationColor);
		border-right-color: var(--animationColor);
	}
}

.ui-keyboard .ui-keyboard-keyset {
	padding: 42px 2px 8px 2px !important;
	background: #D0D3D9 !important;
	box-sizing: border-box !important;
	width: 100% !important;
}

@media (max-width: 1200px) {

	.buy-btn .buy-card,
	.buy-btn .add_to_cart,
	.update-cart-item {
		font-size: 14px;
	}
}

/* Hide Show All Fields on desktop - mobile only feature */
@media screen and (min-width: 768px) {
	.show-all-fields {
		display: none !important;
	}
}

@media screen and (max-width: 767px) {

	/* Mobile: hide fields with remove_edit class by default */
	.tag_item.remove_edit {
		display: none;
	}



	.desktop-editor-header {
		display: none;
	}

	.mobile-hide {
		display: none;
	}

	.back-design {
		position: static;
		display: none;
	}

	.step-title {
		display: none;
	}

	.back-editor {
		font-size: 14px;
		color: #000;
		cursor: pointer;
		z-index: 9;
		border: 1px solid #D7DFE2;
		height: 35px;
		line-height: 35px;
		border-radius: 10px;
		padding: 0 15px;
		display: flex;
		align-items: center;
	}

	.back-editor:active {
		transform: scale(0.94);
		filter: brightness(0.9);
		transition: all 0.05s;
	}

	.design_logo {
		display: none !important;
	}

	.preview.block-left {
		width: 100vw;
		position: relative;
		padding: 0;
		background: #F5FAFC;
	}

	.section.editable,
	.tag_item {
		background: #fff;
		border-radius: 30px;
	}

	.prefix-wrapper .prefix-clear-btn,
	.main-wrapper .clear-btn,
	.suffix-wrapper .suffix-clear-btn {
		background: transparent;
	}

	.preview.block-left.z-index-9 {
		z-index: auto !important;
	}

	.editor-bottom {
		position: sticky;
		bottom: 0;
		width: calc(100% + 40px);
		margin-left: -20px;
		text-align: center;
		z-index: 99;
		box-shadow: none;
		padding: 5px 0px;
		transition: box-shadow 0.2s ease;
		background: rgba(245, 250, 252, 0.5);
		backdrop-filter: blur(2px);
		-webkit-backdrop-filter: blur(2px);
		/* Required for Safari/iOS */

	}

	.editor-bottom.is-stuck {
		border-top: 1px solid rgba(0, 103, 117, 0.08);
		/*box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.15);*/
	}

	.editor-footer {
		border-top: 20px solid #F5FAFC;
		background: #006776;
	}

	.logo_footer {
		width: 100px;
		display: block;
		margin: 0 auto;
		padding: 35px 0;
	}

	.editor-footer-content {
		padding: 20px;
		border-top: 1px solid #A7B7BD;
	}

	.editor-copyrights {
		border-top: 1px solid #A7B7BD;
		color: #fff;
		font-size: 15px;
		padding: 15px 15px;
		margin-top: 25px;
	}

	.editor-footer-item {
		font-size: 20px;
		color: #fff;
		line-height: 35px;
	}

	.editor-note {
		color: #424a4c;
		font-size: 12px;
		text-align: center;
		padding: 0px 20px 20px;
	}

	.editor .noneditable .editor_text {
		font-size: 13px;
	}

	/*.editor .editor_text[data-id-value^="simcha_name"] {*/
	/*font-size: 50px;*/
	/*line-height: 50px;*/
	/*}*/

	.lang_selector .dropdown-menu strong {
		display: none;
	}

	.lang_selector .dropdown-menu .checkbox-option {
		margin: 3px 2px 3px;
	}

	.cat-slider-container {
		width: 100%;
		margin: 0;
	}

	#design {
		display: block;
	}

	.footer {
		z-index: 99;
		position: static;
		display: none;
	}

	.search-box i {
		color: #E5E5E5;
	}

	.search-box {
		border: 1px solid #E5E5E5;
		height: 30px;
	}

	.filter-bar {
		display: none;
		margin: 0;
		padding: 20px;
		grid-gap: 6px;
	}

	#sort-filter-container .sort-dropdown .dropdown-toggle {
		font-weight: 500;
		padding: 8px 12px 6px 25px;
		white-space: nowrap;
	}

	#sort-filter-container .sort-dropdown .dropdown-toggle label {
		display: none;
	}

	.views-filter-direct strong {
		font-weight: 500;
	}

	.grid_content {
		height: auto;
	}

	.grid {
		width: 100%;
		height: auto;
		box-shadow: none;
		background: #F5FAFC;
	}

	.grid_content {
		display: none;
		margin: 5px;
		padding: 0 10px;
	}

	.choose-design {
		color: #fff;
		text-align: center;
		border-radius: 50px;
		font-size: 20px;
		padding: 8px;
		font-weight: 600;
		cursor: pointer;
		max-width: 265px;
		margin: 12px auto;
		background: linear-gradient(90deg, #5298A1 0%, #006775 49%);
		box-shadow: 0px 3px 6px rgba(84, 128, 135, 0.25);
	}

	.choose-design:active {
		transform: scale(0.94);
		filter: brightness(0.9);
		transition: all 0.05s;
	}


	.preview.block-center {
		width: 100%;
		position: static;
		height: 100vh;
		margin-top: 53px;
		overflow: auto;
	}

	.search-box {
		background: #FAFAFA;
	}

	#frame-option {
		display: none;
	}

	#frame-option.active {
		display: block;
		position: absolute;
		top: 80%;
		background: #fff;
		box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
		border-radius: 10px;
		left: 20px;
		right: 20px;
		width: auto;
		overflow: scroll;
		height: calc(100vh - 225px);
		max-width: 273px;
	}

	#frame-option .dropdown-menu {
		display: block;
		border: 0 none;
		box-shadow: none;
		position: relative;
		top: 0;
	}

	#frame-option .dropdown-toggle {
		display: none;
	}

	.dropdown-menu::after {
		display: none;
	}

	.dropdown-menu strong {
		border-radius: 50px;
		padding: 5px 10px;
		color: #fff;
		font-weight: 400;
		font-size: 16px;
		display: block;
		background: linear-gradient(90deg, #5298A1 0%, #006775 49%);
	}


	.sort-dropdown .dropdown-menu strong {
		display: none;
	}

	.filter-mobile-header {
		top: 0;
		background: #fff;
		padding: 10px;
		z-index: 100;
		position: sticky;
		display: flex;
		align-items: center;
		/* Ensures everything is centered vertically */
		gap: 10px;
		/* Space between Apply and Clear */
	}

	.filter-mobile-header button {
		border: 0 none;
		height: 30px;
		border-radius: 50px;
		padding: 0 17px;
		display: flex;
		align-items: center;
		color: #080808;
		background: #e8ecf1;
		cursor: pointer;
		font-size: 13px;
		white-space: nowrap;
	}

	.filter-mobile-header .close-filter {
		margin-left: auto;
		padding: 0px !important;
		width: 30px;
		min-width: 30px;
		justify-content: center;
	}

	.filter-mobile-header button:active {
		transform: scale(0.94);
		filter: brightness(0.9);
		transition: all 0.05s;
	}

	.checkbox-option {
		margin: 6px 11px 0px;
	}

	.editor {
		padding: 30px 20px 0;
	}

	.footer .link-contact {
		display: none;
	}

	.editor {
		padding: 1px 20px 0px;
	}

	.editor-fields {
		max-height: unset;
		overflow: visible;
		background-color: #fff;
		border: none;
		box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.15);
		padding: 30px 30px 10px 30px;
		border-radius: 15px;
	}

	.goto_grid.btn-fill {
		max-width: 100%;
		width: 100%;
		font-size: 25px;
	}

	.editor p {
		margin: 0 0 18px 0;
	}

	.search_list {
		width: auto;
	}

	.custom-tooltip {
		display: none !important;
	}

	.design.block-right {
		display: none;
		width: 100%;
		top: 0;
		z-index: 10;
		padding: 0;
		overflow: scroll;
		position: relative;
		height: auto;
		margin-top: 20px;
	}

	.frame_selected .block-center.grid-layout-1 #frame-container,
	.frame_selected .block-center.grid-layout-2 #frame-container {
		display: inline-block;
		overflow-x: auto;
		white-space: nowrap;
		width: 80%;
		margin: 0;
		padding: 3px 0px;
	}

	.frame_selected .block-center #frame-container .frame_item {
		display: inline-block;
		width: 20%;
		padding: 0;
		outline: 3px solid #fff;
		margin: 0 5px;
		box-shadow: none;
		border: 0;
	}

	.frame_selected #frame-container .frame_item.active {
		outline-color: #006775;
		box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.25);
		padding: 0;
	}

	.frame_selected .price-top,
	.frame_selected .frame-info,
	.frame_selected #frame-pager,
	.frame_selected .mobile-editor-note {
		display: none;
	}

	.frame_selected .cat-page-content {
		display: none !important;
	}

	.frame_selected .more-design {
		display: inline-flex;
		position: absolute;
		height: calc(100% - 8px);
		width: calc(20% - 15px);
		justify-content: center;
		border: 1px dashed #D7DFE2;
		margin-left: 15px;
		align-items: center;
		color: #A7B7BD;
		font-size: 8px;
		text-transform: uppercase;
		text-align: center;
		border-radius: 5px;
	}

	.frame_selected .grid {
		background: #fff;
	}

	.frame_selected .grid_content {
		height: auto;
		margin: 20px 20px 0;
	}

	.my-editor>.view_preview {
		opacity: 1;
		background: transparent;
	}

	.preview_open .hamburger-menu {
		z-index: 9;
	}

	.watermark-text {
		display: none;
	}

	.mobile-editor-bottom {
		display: flex;
		justify-content: space-between;
		grid-gap: 10px;
	}

	.mobile-editor-bottom .simcha-id-display {
		font-size: 14px;
		font-weight: 400;
	}

	.mobile-watermark-text {
		color: #A7B7BD;
		font-size: 12px;
	}

	.user_cart {
		display: none;
	}

	#frame-container {
		grid-template-columns: repeat(2, 1fr);
		margin: 25px 0 20px;
	}

	.grid_content .mobile-filter {
		display: flex;
		background: #fff;
		border-radius: 10px;
		padding: 10px 20px;
		justify-content: space-between;
		text-transform: uppercase;
		cursor: pointer;
		width: calc(100% - 3.5vw - 125px);
		position: absolute;
	}

	.grid_content #frame-option {
		flex-direction: column;
		background: #fff;
		margin-top: 40px;
		border-radius: 10px;
		padding: 10px 20px;
		display: none;
		z-index: 11;
		width: 93%;
	}

	.grid_content .dropdown-toggle {
		display: none;
	}

	.grid_content .dropdown-menu {
		display: block;
		position: static;
		border: 0 none;
		box-shadow: none;
		padding: 0;
	}

	.grid_content #frame-option.active {
		display: flex;
	}

	.grid_content .dropdown-menu::after {
		display: none;
	}

	.grid_content .dropdown-menu strong {
		background: linear-gradient(to right, #5298A1 0%, #006775 100%);
		color: #fff;
		padding: 10px;
		font-weight: normal;
		font-size: 14px;
	}

	.chooser {
		font-size: 16px;
	}

	.design.block-center {
		width: 100%;
		margin-top: 53px;
		position: relative;
		height: auto;
	}

	.simcha-id {
		right: 0;
	}

	.buy-btn {
		font-size: 5vw;
		flex-direction: column-reverse;
		margin: 0 20px;
	}

	.full_editor {
		display: none;
	}

	.design.block-right .size_select {
		display: block;
	}

	.size-list {
		flex-direction: revert;
	}

	.name_tag {
		max-height: unset;
	}

	.overlay-a.active {
		display: block;
	}

	.close-popup {
		position: absolute;
		top: -41px;
		right: 12px;
		color: #fff;
		font-size: 25px;
		cursor: pointer;
	}

	.content-popup {
		box-shadow: 0 0px 6px 4px rgba(0, 0, 0, 0.1);
		background: #fff;
		border-radius: 10px;
		overflow: auto;
		padding: 3.5vw;
	}

	.design-holder {
		display: flex;
		flex-direction: column;
	}

	.frame-info {
		display: flex;
		order: 0;
	}

	.design-holder .img-fluid {
		order: 1;
		border-radius: 10px;
		margin-bottom: 20px;
		max-height: calc(100vh - 400px);
		width: fit-content;
		height: auto;
		align-self: center;
	}

	
	/* Related Cats for Mobile */

	#related-cats-bar {
		padding: 15px;
		margin: 0 22px 15px;
		background: transparent;
		border: 1px solid #e2eaec;
	}

	#related-cats-bar .cat_item {
		border: 1px solid #e2eaec;
		font-size: 15px;
	}

	

	/* Mobile popup design content styling */
	.design-holder .popup-design-content {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		padding: 0;
		margin: 0;
	}

	.design-holder .my-editor {
		order: 1;
		margin: 0;
		padding: 0;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		overflow: visible;
		width: 100%;
		pointer-events: none;
	}

	.design-holder .scaller {
		transform-origin: top center;
		overflow: visible;
		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.design-holder .load_section {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 200px;
	}

	.design-holder .error-message {
		text-align: center;
		padding: 40px 20px;
		color: #666;
		font-size: 16px;
	}

	/* Hide designer placeholders in popup */
	.design-holder .design_placehoder {
		display: none !important;
	}

	.design-holder {
		min-height: calc(100vh - 200px);
		padding: 0;
		width: 100%;
	}

	.design-holder .simcha-id {
		display: none;
	}

	.chooser {
		order: 2;
		position: static;
		border-radius: 30px;
		margin-bottom: 20px;
	}

	.frame_item .chooser {
		display: none !important;
	}

	/* Show chooser in popup design content */
	.design-holder .chooser {
		display: block !important;
		order: 3;
		background: #000;
		color: #fff;
		text-align: center;
		padding: 15px 30px;
		border-radius: 30px;
		cursor: pointer;
		font-weight: 600;
		margin-top: 20px;
		align-self: center;
		text-decoration: none;
	}

	.design-holder .chooser:hover {
		background: #474747;
	}

	.designer_content {
		width: 100%;
		position: relative;
		padding: 0 20px;
	}

	.designer .editor_side {
		display: flex;
		width: 100%;
		flex-direction: column;
		gap: 10px;
	}

	.design.block-right .background_select {
		justify-content: start;
	}

	.editor_side_box .label {
		display: none;
	}

	.bg-list {
		display: flex;
		grid-gap: 5px;
	}

	.editor_side_box+.editor_side_box {
		margin: 0;
		border: 0 none;
	}

	.editor_side_box {
		flex-direction: row;
		grid-gap: 5px;
	}

	.review_content {
		display: flex;
		flex-direction: column;
	}

	.total_price {
		order: 0;
		justify-content: space-between;
		align-items: center;
		margin: 20px;
	}

	.additional-options {
		flex-direction: column;
	}

	.additional-options>div {
		border: 0 none;
		padding: 0px 0;
	}

	.selected-music-display {
		position: static;
		display: inline-flex;
		font-size: 15px;
		flex-direction: row-reverse;
	}

	.total_price .total-section {
		display: none;
	}

	.review_bottom-top {
		order: 1;
		display: flex;
		margin: 20px;
	}

	.design.block-right .designer {
		padding: 0;
	}

	.review-header {
		background: #F5FAFC;
		text-align: center;
		justify-content: center !important;
		margin-bottom: 0;
		padding-bottom: 20px;
	}

	.buy-card-top {
		order: 5;
		background: #F5FAFC;
		padding-top: 15px;
	}

	.review_content .buy-card {
		color: #fff;
		background: linear-gradient(90deg, #5298A1 0%, #006775 49%);
		box-shadow: 0px 3px 6px rgba(84, 128, 135, 0.25);
		font-size: 25px;
		border-radius: 50px;
		width: 260px;
		margin: 0 auto;
		text-align: center;
		padding: 10px 0 5px;
		font-weight: 600;
		justify-content: center;
		grid-gap: 3px;
	}

	.buy-btn .add_to_cart,
	.buy-btn .buy-card-bottom {
		display: none !important;
	}

	.name_tag {
		order: 4;
	}

	.review-header {
		order: 4;
	}

	.buy-card-bottom {
		order: 5;
	}

	.review_bottom-bottom {
		order: 6;
		background: #F5FAFC;
	}

	.design.block-right .review .review-header {
		display: flex;
	}

	.design.block-right .review .name_tag {
		display: block;
		background: #F5FAFC;
		padding: 0 20px;
	}

	.design.block-center .designer {
		margin: 30px 3.5vw 30px;
	}

	.review_bottom {
		grid-gap: 10px;
		margin: 0;
		padding: 20px;
	}

	.design.block-right .review {
		margin: 0;
	}

	.designer {
		margin: 15px 0 0;
	}

	.review_bottom>div {
		font-size: 14px;
		color: #545C5F;
		border: 1px solid #D7DFE2;
		flex: 1;
		border-radius: 50px;
		line-height: 30px;
		text-align: center;
		cursor: pointer;
		white-space: nowrap;
	}

	.review_bottom i {
		display: block;
		text-align: center;
		font-size: 26px;
	}

	.mockup {
		width: 95vw;
		margin: 2.5vw;
		flex-direction: column;
		aspect-ratio: unset;
		max-height: 92vh;
	}

	.mockup_preview {
		width: 100%;
	}

	.mockup_list {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}

	.mockup_zero {
		order: 1;
		grid-column: 1 / -1;
	}

	/*Mobile popup*/
	.popup_head {
		font-size: 30px;
		padding: 20px 20px 15px;
	}

	.popup_close {
		top: 15px;
		font-size: 25px;
		right: 15px;
	}

	.popup_content {
		transform: scale(0.9);
	}

	.popup_body {
		padding: 25px 30px;
	}

	#save_email,
	#card_email,
	#checkout_email,
	.coupon-code-input {
		padding: 0px 15px;
		font-size: 20px;
	}

	#card_expiry,
	#checkout_card_expiry {
		font-size: 20px;
		padding: 0px 15px;
	}
}

/* Responsive adjustments */
@media (max-width: 480px) {
	.music-popup {
		/* Positioning is handled by JS (positionMusicPopup) on mobile */
		width: 95%;
	}

	.music-player-item {
		padding: 5px 8px;
	}

	.play-pause-btn {
		width: 40px;
		height: 40px;
		font-size: 16px;
	}

	.music-title {
		font-size: 13px;
	}
}

/* Mobile Virtual Keyboard Positioning */
@media screen and (max-width: 767px) {
	.ui-keyboard {
		position: fixed !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		top: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		border-radius: 0 !important;
		border: none !important;
		border-top: 1px solid #D1D5DB !important;
		z-index: 99999 !important;
		box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
		background: #F8F9FA !important;
		padding-left: env(safe-area-inset-left) !important;
		padding-right: env(safe-area-inset-right) !important;
		box-sizing: border-box !important;
		overflow: hidden !important;
		transform: none !important;
	}

	/* Ensure keyboard rows fit to width */
	.ui-keyboard .ui-keyboard-row {
		margin: 0 !important;
		padding: 0 !important;
		display: flex !important;
		flex-wrap: nowrap !important;
		justify-content: space-between !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	/* Adjust margins for first and last buttons */

	.ui-keyboard .ui-keyboard-button:active {
		transform: scale(0.95) !important;
		background: #E5E7EB !important;
	}

	.ui-keyboard .ui-keyboard-button:hover {
		background: #fff !important;
		color: #000 !important;
	}

	.ui-keyboard .ui-keyboard-button span {
		line-height: 8vw !important;
		display: block !important;
		font-size: inherit !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		font-weight: 600;
	}

	.ui-keyboard .ui-keyboard-button[data-value="enter"] {
		flex: 1.5 !important;
		max-width: calc(15% - 2px) !important;
		box-shadow: 1px 0.5px rgba(0, 0, 0, 0.55) !important;
		background: #727884 !important
	}

	.ui-keyboard .ui-keyboard-button[data-value="alt"] {
		flex: 1.5 !important;
		max-width: calc(15% - 2px) !important;
		box-shadow: 1px 0.5px rgba(0, 0, 0, 0.55) !important;
	}

	.ui-keyboard .ui-keyboard-button[data-value="normal"] {
		flex: 1.5 !important;
		max-width: calc(15% - 2px) !important;
		min-width: 12vw !important;
		box-shadow: 1px 0.5px rgba(0, 0, 0, 0.55) !important;
	}

	.ui-keyboard .ui-keyboard-button.ui-keyboard-backspace,
	.ui-keyboard .ui-keyboard-button[data-value="bksp"] {
		flex: 1.5 !important;
		max-width: calc(15% - 2px) !important;
		box-shadow: 1px 0.5px rgba(0, 0, 0, 0.55) !important;
	}

	.ui-keyboard .ui-keyboard-button.ui-keyboard-shift,
	.ui-keyboard .ui-keyboard-button[data-value="shift"] {
		flex: 1.5 !important;
		max-width: calc(15% - 2px) !important;
		box-shadow: 1px 0.5px rgba(0, 0, 0, 0.55) !important;
	}

	.ui-keyboard .ui-keyboard-button[data-value="lang"] {
		flex: 1.5 !important;
		max-width: calc(15% - 2px) !important;
		box-shadow: 1px 0.5px rgba(0, 0, 0, 0.55) !important;
		background: #727884 !important
	}

	[data-ui-keyboard-layout="en-custom"] .ui-keyboard .ui-keyboard-button[data-value="bksp"] {
		width: 10vw;
	}

	/* Ensure keyboard appears above all content */
	.ui-keyboard-overlay {
		z-index: 9998 !important;
	}

	/* Add padding to body when keyboard is open to prevent content being hidden */
	body.ui-keyboard-has-focus,
	body.open-calendar {
		padding-bottom: 260px !important;
		transition: padding-bottom 0.2s ease !important;
	}

	/* Adjust virtual keyboard height for mobile */
	.ui-keyboard .ui-keyboard-keyset-wrapper {
		min-height: 220px !important;
		max-height: 300px !important;
		overflow: hidden !important;
	}

	/* Preview area styling for mobile */
	.ui-keyboard .ui-keyboard-preview {
		display: none !important;
	}

	/* Safe area padding for devices with notches */
	.ui-keyboard {
		padding-bottom: env(safe-area-inset-bottom) !important;
	}

	.ui-keyboard .ui-keyboard-button {
		position: relative;
		font-size: 4.5vw !important;
		min-height: 5vw !important;
		height: 9.5vw !important;
		margin: 0.8vw !important;
		width: 7.3vw;
		min-width: auto !important;
		overflow: visible !important;
		vertical-align: top;
	}

	/* Space bar */
	.ui-keyboard-space,
	.ui-keyboard-button[data-value="space"],
	button.ui-keyboard-button.ui-keyboard-space {
		width: 46vw !important;
		background: #fff !important;
	}

	/* Return/Enter key */
	.ui-keyboard-button[data-action="accept"],
	.ui-keyboard-button[data-value="enter"],
	button.ui-keyboard-accept {
		background: #007aff !important;
		color: #fff !important;
		min-width: 18vw !important;
	}

	.ui-keyboard-button[data-action="accept"]:hover,
	button.ui-keyboard-accept:hover {
		background: #0051D5 !important;
	}

	/* Alt/Language toggle button */
	.ui-keyboard-button[data-action="alt"],
	.ui-keyboard-button[data-value="alt"],
	button.ui-keyboard-alt {
		background: #aeb4ba !important;
		color: #000 !important;
		min-width: 12vw !important;
	}

	/* Globe/Lang switch button */
	.ui-keyboard-button[data-action="lang"],
	.ui-keyboard-button[data-value="lang"],
	button[data-value="lang"] {
		background: #aeb4ba !important;
		color: #000 !important;
		min-width: 8vw !important;
	}

	/* Tab button */
	.ui-keyboard-button[data-value="tab"],
	button.ui-keyboard-tab {
		background: #aeb4ba !important;
		color: #000 !important;
		min-width: 42px !important;
	}

	/* Landscape orientation adjustments */
	@media (orientation: landscape) and (max-height: 500px) {
		body.ui-keyboard-has-focus {
			padding-bottom: 160px !important;
		}

		.ui-keyboard .ui-keyboard-keyset {
			padding: 6px 1px 4px 1px !important;
		}

		.ui-keyboard .ui-keyboard-button {
			min-height: 32px !important;
			height: 32px !important;
			font-size: clamp(12px, 2.2vw, 15px) !important;
			margin: 1px 0.5px !important;
		}

		.ui-keyboard .ui-keyboard-button span {
			line-height: 32px !important;
		}
	}
}

/* Mobile: full-screen overlay — auto-height so portrait designs don't letterbox */
@media (max-width: 767px) {
	#fullScreenOverlay .full-screen-content {
		height: auto;
		width: 95vw;
		max-height: 92vh;
		padding: 6px;
	}

	#fullScreenOverlay .full-screen-image {
		height: auto;
	}

	#fullScreenOverlay .full-screen-image img,
	#fullScreenOverlay .full-screen-image svg {
		width: 100%;
		height: auto;
		max-height: 85vh;
		object-fit: contain;
	}
}

/* Mobile Responsive Views Filter */
@media (max-width: 767px) {

	/* Hide view options 3 and 4 on mobile */
	.view-option[data-view="3"],
	.view-option[data-view="4"] {
		display: none;
	}

	.view-option {
		display: flex;
	}

	#views-filter-container {
		text-align: center;
		position: relative;
		z-index: 9;
		margin-left: 0;
		border: 1px solid #D7DFE2;
		border-radius: 10px;
		height: 35px;
		display: flex;
		align-items: center;
		padding: 0 10px;
	}

	#sort-filter-container {
		padding-right: 0;
		justify-content: center;
		border: 1px solid #D7DFE2;
		height: 35px;
		border-radius: 10px;
	}

	#sort-filter-container .sort-dropdown {
		width: 100%;
		max-width: 300px;
		min-width: auto;
	}

	#sort-filter-container .sort-dropdown {
		width: 100%;
		max-width: 300px;
	}

	#frame-container {
		margin-top: 0;
	}

	/* Force mobile layouts to use only 1 or 2 columns */
	.grid-layout-3 #frame-container,
	.grid-layout-4 #frame-container {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

.cat-page-content {
	position: relative;
	margin-top: 40px;
	padding: 20px 40px 60px;
	font-size: 14px;
	line-height: 1.3;
	color: #444;
	text-align: center;
}

.cat-page-content::before {
	content: "";
	position: absolute;
	top: 0;
	left: 25%;
	width: 50%;
	border-top: 1px solid #ddd;
}

/* Desktop View Options - Hide 2-column on desktop (if needed) */
@media (min-width: 768px) {

	/* Show all view options on desktop */
	.view-option[data-view="1"],
	.view-option[data-view="2"],
	.view-option[data-view="3"],
	.view-option[data-view="4"] {
		display: flex;
	}
}

/* Mobile responsive styles for signin popup */

/* Mobile responsive styles for account dropdown */
@media screen and (max-width: 767px) {
	.dropdown-item i {
		margin-right: 8px;
	}
}

/* Mobile responsive styles for wishlist heart */

/* Checkout Popup Mobile Responsive Styles */

/* Responsive Design */
@media (max-width: 1200px) {
	.column-left {
		flex: 0 0 35%;
	}

	.column-center {
		flex: 0 0 35%;
	}

	.column-right {
		flex: 0 0 30%;
	}
}

@media (max-width: 767px) {
	.design-columns {
		flex-direction: column;
		height: auto;
	}

	.column-left,
	.column-center,
	.column-right {
		flex: 0 0 auto;
		width: 100%;
		border-right: none;
		border-bottom: 1px solid #B1B1B1;
	}

	.column-right.expanded {
		flex: 0 0 auto;
	}

	.mobile-filter {
		display: flex;
	}

	.mobile-filter:active {
		transform: scale(0.96);
		box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
		transition: all 0.05s;
	}

	.action-buttons {
		grid-template-columns: 1fr 1fr;
	}
}

/* for filter view adjusment in desktop*/
@media (min-width: 768px) and (max-width: 1245px) {
	.mobile-filter {
		display: flex;
	}

	#frame-option {
		display: none;
	}

	#frame-option.active {
		display: block;
		position: absolute;
		top: 45px;
		box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
		border-radius: 10px;
		left: 20px;
		right: 20px;
		width: auto;
		bottom: 30px;
		overflow: visible;
		height: 100%;
		background: #fff;
	}

	#frame-option .dropdown-menu {
		display: block;
		border: 0 none;
		box-shadow: none;
		position: relative;
		top: 0;
	}

	#frame-option .dropdown-toggle {
		display: none;
	}

	.dropdown-menu::after {
		display: none;
	}

	.close-filter {
		float: right;
		width: 20px;
		height: 20px;
		color: #A7B7BD;
		background: #D7DFE2;
		text-align: center;
		border-radius: 50px;
		font-size: 15px;
		line-height: 20px;
		margin: 10px 5px 5px;
		cursor: pointer;
		display: block;
	}

	.dropdown-menu strong {
		background: linear-gradient(to right, #5298A1 0%, #006775 100%);
		border-radius: 50px;
		padding: 5px 10px;
		color: #fff;
		font-weight: 400;
		font-size: 16px;
		display: block;
	}

	.sort-dropdown .dropdown-menu strong {
		display: none;
	}

	.checkbox-option {
		margin: 6px 11px 0px;
	}
}

/* Mobile Responsive Styles */
@media screen and (max-width: 767px) {
	.order_confirmation_popup .popup_content {
		width: 95%;
		max-height: 95vh;
		border-radius: 12px;
	}

	.confirmation_header_bar {
		padding: 25px 15px;
		border-radius: 12px 12px 0 0;
	}

	.confirmation_header_bar i {
		font-size: 28px;
	}

	.confirmation_header_bar h2 {
		font-size: 24px;
	}

	.confirmation_header_bar p {
		font-size: 14px;
	}

	.confirmation_main_content {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 20px;
	}

	.confirmation_text_section {
		padding-right: 0;
	}

	.confirmation_items_section {
		padding-left: 0;
		border-left: none;
		border-top: 1px solid #B1B1B1;
		padding-top: 20px;
	}

	.confirmation_intro {
		font-size: 13px;
	}

	.detail_label {
		font-size: 13px;
	}

	.detail_value {
		font-size: 15px;
	}

	.items_detail div {
		font-size: 14px;
	}

	.total_detail .detail_value {
		font-size: 16px;
	}

	.item_thumbnail {
		max-width: 200px;
	}

	.item_download_buttons {
		max-width: 200px;
	}

	.download_btn {
		padding: 9px 18px;
		font-size: 13px;
	}

	.confirmation_footer_links {
		padding: 15px 20px 20px;
		flex-direction: column;
		gap: 12px;
	}

	.footer_link {
		font-size: 13px;
	}

	.order_confirmation_popup .popup_close {
		width: 30px;
		height: 30px;
		font-size: 18px;
		top: 10px;
		right: 10px;
	}

	.order_confirmation_popup .popup_print {
		top: 110px;
		right: 20px;
		font-size: 20px;
	}
}

@media screen and (max-width: 480px) {
	.confirmation_main_content {
		padding: 15px;
	}

	.confirmation_header_bar {
		padding: 20px 12px;
	}

	.confirmation_header_bar i {
		font-size: 24px;
	}

	.confirmation_header_bar h2 {
		font-size: 20px;
	}

	.item_thumbnail {
		max-width: 180px;
	}

	.item_download_buttons {
		max-width: 180px;
	}

	.download_btn {
		padding: 8px 16px;
		font-size: 12px;
	}
}

/* ── Label Sheet Feature ──────────────────────────────────────────────────── */

/* Sheet-size selector — lives in Step 1 column, styled like #related-cats-bar */
#label-sheet-selector {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px;
    background: #F5FAFC;
    border-bottom: 1px solid #e2eaec;
}

.label-sheet-selector-label {
    font-size: 12px;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.label-sheet-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.label-sheet-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #fff;
    border: 1px solid #c8d8da;
    border-radius: 50px;
    padding: 5px 12px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    line-height: 1.2;
}

.label-sheet-btn:hover {
    border-color: #006775;
    background: #f0fbfc;
}

.label-sheet-btn.active {
    background: linear-gradient(to right, #5298A1 0%, #006775 100%);
    border-color: transparent;
    color: #fff;
}

.label-sheet-btn .ls-name {
    font-size: 13px;
    font-weight: 700;
}

.label-sheet-btn.active .ls-name {
    color: #fff;
}

.label-sheet-btn .ls-detail {
    font-size: 10px;
    color: #777;
    margin-top: 1px;
}

.label-sheet-btn.active .ls-detail {
    color: rgba(255,255,255,0.85);
}

/* Gallery card aspect ratio for label categories — driven by --label-w / --label-h CSS vars */
.label-category #frame-container .frame_item .img-wrapper {
    aspect-ratio: var(--label-w, 2.625) / var(--label-h, 1);
    height: auto !important;
}

.label-category #frame-container .frame_item img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

/* Step 3 sheet preview container */
.label-sheet-preview-container {
    margin: 12px 0;
    border: 1px solid #dde;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.label-sheet-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: #f4f7f8;
    border-bottom: 1px solid #e0e6e8;
}

.label-sheet-preview-title {
    font-size: 13px;
    font-weight: 600;
    color: #444;
}

.label-sheet-preview-count {
    font-size: 12px;
    color: #006775;
    font-weight: 600;
    background: #e6f7f8;
    padding: 2px 8px;
    border-radius: 12px;
}

.label-sheet-preview-scroll {
    overflow: auto;
    max-height: 480px;
    padding: 12px;
    background: #f9f9f9;
}

#label-sheet-preview-svg {
    display: flex;
    justify-content: center;
}

#label-sheet-preview-svg svg {
    box-shadow: 0 2px 12px rgba(0,0,0,0.10);
    background: white;
}

.label-sheet-preview-note {
    padding: 8px 14px;
    font-size: 11px;
    color: #888;
    border-top: 1px solid #eee;
    background: #fafafa;
}

/* Prevent the existing mockup/preview from showing on label categories */
.design.label-category .mockup_overlay {
    display: none !important;
}
/* ── End Label Sheet Feature ──────────────────────────────────────────────── */

/* ---- Design page minimal footer ---- */
.design-page-footer {
	padding: 24px 20px;
	text-align: center;
	font-size: 12px;
	color: #aaa;
	background: #f5f7f8;
	border-top: 1px solid #e5eaeb;
	margin-top: 8px;
}

.design-page-footer a {
	color: #888;
	text-decoration: none;
	transition: color 0.2s;
}

.design-page-footer a:hover {
	color: #006775;
}

.design-page-footer span {
	color: #d0d5d6;
	margin: 0 6px;
}

/* Hide the gallery's design-page-footer when a frame is selected on mobile
   (Step 3 is shown; the gallery footer bleeds through since .grid.block-center
   itself is never hidden, only its inner elements) */
body.mobile.frame_selected .design-page-footer {
	display: none;
}