* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	text-rendering: optimizelegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-color: var(--bg);
	padding-bottom: 0;
}

html:focus-visible {
	outline: none !important;
}

/* LAYOUT */
.auth-layout {
	height: 100vh;
	display: flex;
	flex-direction: column;
}

.auth-main {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.auth-footer {
	padding: 10px 0;
}

/* ================= Common css ================= */
ul {
	list-style: none;
	padding-inline-start: 0px;
}

a {
	text-decoration: none !important;
}

.cursor-pointer {
	cursor: pointer;
}

.text-truncate {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.object-fit-cover {
	object-fit: cover;
}
.text-ink-3{
	color: var(--ink-3);
}
.text-dark-500 {
	color: var(--dark-500);
}

.text-gray-400 {
	color: var(--gray-400);
}

.text-gray-500 {
	color: var(--gray-500);
}

.text-gray-800 {
	color: var(--gray-800);
}

.text-main {
	color: var(--main-color)
}

.bg-main {
	background-color: var(--main-color) !important;
}

.bg-light-50 {
	background-color: var(--light-50);
}

.bg-gray-50 {
	background-color: var(--gray-50);
}
.text-10 {
	font-size: 10px;
	line-height: normal;
}
.text-12 {
	font-size: 12px;
}

.text-14 {
	font-size: 14px;
}

.text-16 {
	font-size: 16px;
}

.text-18 {
	font-size: 18px;
}

.font-weight-medium {
	font-weight: 500 !important;
}

.font-weight-semiBold {
	font-weight: 600 !important;
}
.font-weight-800 {
	font-weight: 800 !important;
}
.textxs {
	margin: 0;
	font-size: 12px;
	line-height: 1.375;
}
.textsm {
	margin: 0;
	font-size: 14px;
	line-height: 1.375;
}
.textbase {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
}
.p-12 {
	padding: 12px;
}

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

.py-12 {
	padding-block: 12px;
}

.px-12 {
	padding-inline: 12px;
}

.gap-x-5 {
	column-gap: 48px;
}
.gap-x-10 {
	column-gap: 10px;
}
.gap-x-12 {
	column-gap: 12px;
}

.gap-12 {
	gap: 12px;
}

.gap-16 {
	gap: 16px;
}

.gap-y-6 {
	row-gap: 6px;
}

.gap-20 {
	gap: 20px;
}
.gap-2 {
	gap: 2px;
}
.gap-5 {
	gap: 5px;
}

.gap-8 {
	gap: 8px;
}
.rounded-4 {
	border-radius: 4px;
}
.rounded-8 {
	border-radius: 8px;
}
.rounded-10 {
	border-radius: 10px;
}
.rounded-12 {
	border-radius: 12px;
}

.border-gray-300 {
	border: 1px solid var(--gray-300) !important;
}

.border-gray-450 {
	border: 1px solid var(--gray-450) !important;
}

.h-48 {
	height: 48px;
}
.min-h-36 {
	min-height: 36px;
}
.h-36 {
	height: 36px;
}

.lh-13 {
	line-height: 13px;
}

.lh-16 {
	line-height: 16px;
}

.lh-normal {
	line-height: normal;
}

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

.mb-half {
	margin-bottom: 2px;
}

.icon-left-rotate {
	transform: scale(-1);
}

.shrink-0{
	flex-shrink: 0;
}
.text-start{
	text-align: left;
}
.text-end{
	text-align: right;
}
.text-neutral-950 {
	color: var(--neutral-950);
}
.text-neutral-400 {
	color: var(--neutral-400);
}
.text-brand {
	color: var(--main-color);
}
.bg-brand {
	background-color: var(--main-color);
}
.bg-brand-soft {
	background-color: var(--primary-soft);
}
.border-brand {
	border-color: var(--main-color) !important;
}
.hover-brand:hover {
	color: var(--main-color) !important;
}
.bg-surface-2 {
	background-color: var(--surface-2);
}
.bg-line {
	background-color: var(--line);
}
.border-line {
	border-color: var(--line) !important;
}
.border-line-2 {
	border-color: var(--line-2) !important;
}
.shadow-1 {
	box-shadow: var(--shadow-1);
}
.load-more-container .progress {
	width: 200px !important;
	height: 6px !important;
	background-color: var(--surface-2, #F7F6F4) !important;
	border: 1px solid var(--line, #EDEAE6) !important;
	border-radius: 9999px !important;
	overflow: hidden !important;
	margin-inline: auto !important;
	display: flex !important;
}
.load-more-container .load-more-progress,
.load-more-container .progress-bar {
	height: 100% !important;
	min-height: 6px !important;
	background-color: var(--main-color, #2b78c4) !important;
	border-radius: 9999px !important;
	transition: width 0.4s ease !important;
}
.font-weight-extrabold {
	font-weight: 800 !important;
}
.lh-tight {
	line-height: 1.25;
}
.ls-05 {
	letter-spacing: 0.05em;
}
.ls-06 {
	letter-spacing: 0.06em;
}
.ls-08 {
	letter-spacing: 0.08em;
}
.gap-4 {
	gap: 4px;
}
.gap-6 {
	gap: 6px;
}
.mt-6 {
	margin-top: 6px;
}
.mb-6 {
	margin-bottom: 6px;
}
.hidden {
	display: none !important;
}
.lh-base {
	line-height: 1.5;
}
.ls-07 {
	letter-spacing: 0.07em;
}
.ls-n02 {
	letter-spacing: -0.02em;
}
.title-h4 {
	font-size: 24px;
	line-height: 36px;
	font-weight: 600;
}
.title-h5 {
	font-size: 20px;
	line-height: 32px;
	font-weight: 700;
}
.title-h6 {
	font-size: 16px;
	line-height: 28px;
	font-weight: 700;
}
.text-ink-2 {
	color: var(--ink-2);
}
.text-ok {
	color: var(--ok);
}
.text-warn {
	color: var(--warn);
}
.text-error {
	color: var(--danger);
}
.bg-ok-soft {
	background-color: var(--ok-soft);
}
.bg-warn-soft {
	background-color: var(--warn-soft);
}
.tone-ok {
	color: var(--ok);
	background-color: color-mix(in srgb, var(--ok) 10%, transparent);
}
.tone-info {
	color: var(--info);
	background-color: color-mix(in srgb, var(--info) 10%, transparent);
}
.tone-warn {
	color: var(--warn);
	background-color: color-mix(in srgb, var(--warn) 10%, transparent);
}
.tone-muted {
	color: var(--neutral-400);
	background-color: color-mix(in srgb, var(--neutral-400) 10%, transparent);
}
.status-dot {
	width: 6px;
	height: 6px;
	flex-shrink: 0;
	border-radius: 50%;
	background-color: currentColor;
}
.rounded-6 {
	border-radius: 6px;
}
.border-end {
	border-inline-end-width: 1px !important;
	border-inline-end-style: solid !important;
}
.border-dashed {
	border-style: dashed !important;
}
.ms-auto {
	margin-inline-start: auto !important;
}
.overflow-x-auto {
	overflow-x: auto;
}
.sticky-20 {
	position: sticky;
	top: 20px;
}
.accent-brand {
	accent-color: var(--main-color);
}
.transition-all {
	transition: all 0.3s;
}
.hover-bg-surface-2:hover {
	background-color: var(--surface-2) !important;
}
.hover-neutral-950:hover {
	color: var(--neutral-950);
}
.hover-underline:hover {
	text-decoration: underline;
}
.card-hover {
	transition: all 0.3s;
}
.card-hover:hover {
	border-color: var(--line-2) !important;
	box-shadow: var(--shadow-2);
}
.custom-scrollbar {
	scrollbar-width: thin;
	scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.custom-scrollbar::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
	background: var(--scrollbar-track);
	border-radius: 9999px;
}
.custom-scrollbar::-webkit-scrollbar-thumb,
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
	background: var(--scrollbar-thumb);
	border-radius: 9999px;
}
.label-base {
	font-size: 14px;
	line-height: 16px;
	font-weight: 500;
	color: var(--neutral-700);
}
.p-half {
	padding: 2px;
}
.py-half {
	padding-block: 2px;
}
.px-10 {
	padding-inline: 10px;
}
.px-14 {
	padding-inline: 14px;
}
.pb-40 {
	padding-bottom: 40px;
}
.pb-1px {
	padding-bottom: 1px;
}
.py-56 {
	padding-block: 56px;
}
.mt-half {
	margin-top: 2px;
}
.mt-neg-3 {
	margin-top: -3px;
}
.mb-10 {
	margin-bottom: 10px;
}
/* Spacing utilities */
.gap-0 { gap: 0px !important; }
.gap-1 { gap: 4px !important; }
.gap-1-5, .gap-1\.5 { gap: 6px !important; }
.gap-2 { gap: 8px !important; }
.gap-2-5, .gap-2\.5 { gap: 10px !important; }
.gap-3 { gap: 12px !important; }
.gap-3-5, .gap-3\.5 { gap: 14px !important; }
.gap-4 { gap: 16px !important; }
.gap-5 { gap: 20px !important; }
.gap-6 { gap: 24px !important; }
.gap-8 { gap: 8px !important; }
.gap-10 { gap: 10px !important; }
.gap-12 { gap: 12px !important; }
.gap-14 { gap: 14px !important; }
.gap-16 { gap: 16px !important; }
.gap-20 { gap: 20px !important; }
.gap-24 { gap: 24px !important; }

.gap-x-1 { column-gap: 4px !important; }
.gap-x-2 { column-gap: 8px !important; }
.gap-x-3 { column-gap: 12px !important; }
.gap-x-4 { column-gap: 16px !important; }
.gap-y-1 { row-gap: 4px !important; }
.gap-y-2 { row-gap: 8px !important; }
.gap-y-3 { row-gap: 12px !important; }
.gap-y-4 { row-gap: 16px !important; }

/* Logical margins (LTR & RTL friendly) */
.ms-0 { margin-inline-start: 0 !important; }
.ms-1 { margin-inline-start: 4px !important; }
.ms-2 { margin-inline-start: 8px !important; }
.ms-3 { margin-inline-start: 12px !important; }
.ms-4 { margin-inline-start: 16px !important; }
.ms-auto { margin-inline-start: auto !important; }

.me-0 { margin-inline-end: 0 !important; }
.me-1 { margin-inline-end: 4px !important; }
.me-2 { margin-inline-end: 8px !important; }
.me-3 { margin-inline-end: 12px !important; }
.me-4 { margin-inline-end: 16px !important; }
.me-auto { margin-inline-end: auto !important; }

.ps-0 { padding-inline-start: 0 !important; }
.ps-1 { padding-inline-start: 4px !important; }
.ps-2 { padding-inline-start: 8px !important; }
.ps-3 { padding-inline-start: 12px !important; }
.ps-4 { padding-inline-start: 16px !important; }

.pe-0 { padding-inline-end: 0 !important; }
.pe-1 { padding-inline-end: 4px !important; }
.pe-2 { padding-inline-end: 8px !important; }
.pe-3 { padding-inline-end: 12px !important; }
.pe-4 { padding-inline-end: 16px !important; }

.object-fit-contain {
	object-fit: contain;
}
/* Customer product selection & option cards */
.product-checkbox-card {
	cursor: pointer;
	transition: all 0.2s ease;
	border: 1px solid var(--line, #ebecee);
	background-color: #ffffff;
	padding: 16px 20px !important;
	gap: 16px !important;
}
.product-checkbox-card:hover {
	background-color: var(--surface-2, #f8f9fb);
}
.product-checkbox-card.is-checked {
	border-color: var(--main-color, #6200EE) !important;
	background-color: var(--primary-soft, #ede7ff) !important;
}
.product-checkbox-card input[type="checkbox"],
.product-checkbox-card .product-selector {
	margin: 0 !important;
	margin-inline-end: 14px !important;
	position: static !important;
	cursor: pointer;
	accent-color: var(--main-color, #6200EE);
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	flex-shrink: 0 !important;
}
.product-checkbox-card .prod-thumb-box,
.product-qty-card .prod-thumb-box {
	margin-inline-end: 14px !important;
	flex-shrink: 0 !important;
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
}
.option-radio-card {
	cursor: pointer;
	transition: all 0.2s ease;
	border: 1px solid var(--line, #ebecee);
	background-color: #ffffff;
	padding: 14px 18px !important;
	gap: 14px !important;
}
.option-radio-card:hover {
	background-color: var(--surface-2, #f8f9fb);
}
.option-radio-card.is-checked {
	border-color: var(--main-color, #6200EE) !important;
	background-color: var(--primary-soft, #ede7ff) !important;
}
.option-radio-card input[type="radio"] {
	margin: 0 !important;
	margin-inline-end: 12px !important;
	position: static !important;
	cursor: pointer;
	accent-color: var(--main-color, #6200EE);
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	flex-shrink: 0 !important;
}
.option-radio-card .method-icon-box {
	margin-inline-end: 12px !important;
	flex-shrink: 0 !important;
}
.step {
	animation: stepIn .35s ease;
}
@keyframes stepIn {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}
.blink-animate {
	animation: blink 2s ease-in-out infinite;
}
@keyframes blink {
	0%, 100% { opacity: 1; }
	50% { opacity: .35; }
}

button.focus-none:focus,
button.focus-none:focus-visible,
a.focus-none:focus,
a.focus-none:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}
/* ================= Brand button ================= */
.btn-brand {
	background-color: var(--main-color);
	color: var(--primary-ink, #ffffff);
	transition: all 0.3s;
}
.btn-brand:hover {
	background-color: var(--primary-hover);
	color: var(--primary-ink, #ffffff);
}
.btn-brand:focus {
	box-shadow: 0 0 0 3px var(--primary-soft);
}
.btn-brand:disabled {
	opacity: 0.5;
	pointer-events: none;
}
.min-h-dvh{
	min-height: 100dvh;
}
.my-auto{
	margin-block: auto;
}
/* ================= SIDEBAR ================= */
.sidebar {
	position: fixed;
	top: 0;
	left: 0;
	width: 240px;
	height: 100vh;
	transition: width 0.3s ease;
	z-index: 1000;
	box-shadow: -8px 0px 16px 0px rgba(128, 128, 128, 0.122);
	border-left: 0px !important;
}

.sidebar.collapsed {
	width: 80px;
}

.navigation-wrap {
	overflow-y: auto;
	height: 100%;
	padding-bottom: 95px;
}

/* Custom scrollbar — subtle, on-brand (matches the torod-design-system prototype verbatim) */
* {
	scrollbar-width: thin;
	scrollbar-color: var(--line-2) transparent;
}

*::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

*::-webkit-scrollbar-thumb {
	background: var(--line-2);
	border-radius: var(--r-full);
	border: 3px solid transparent;
	background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
	background: var(--ink-5);
	background-clip: padding-box;
}

.sidebar .nav-title {
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ink-5);
	line-height: 1.3;
	padding: 14px 5px 6px;
}

.sidebar nav a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 7px 12px;
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--ink-3);
	text-decoration: none;
	min-height: 38px;
	border-radius: 8px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar nav a:hover {
	background-color: var(--surface-2);
	color: var(--ink-1);
}

.sidebar nav .sidebar-item:not(.submenu-item) > a.active {
	border-radius: 8px;
	background: var(--main-color, #7928ca);
	color: var(--ink-inverse) !important;
	border: none !important;
}

.sidebar nav .sidebar-item:not(.submenu-item) > a.active .nav-arrow {
	color: var(--ink-inverse);
	filter: brightness(0) saturate(100%) invert(100%);
}

.sidebar nav .sidebar-item:not(.submenu-item) > a.active .category-icon {
	filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7479%) hue-rotate(70deg) brightness(99%) contrast(107%);
}

.sidebar nav .sidebar-item:not(.submenu-item) > a.active svg {
	fill: currentColor;
	stroke: var(--ink-inverse);
}

.sidebar nav .category-icon {
	width: 19px;
	height: 19px;
	min-width: 19px;
	object-fit: contain;
}

.sidebar nav .nav-left svg {
	width: 19px;
	height: 19px;
	min-width: 19px;
}

.nav-left {
	display: flex;
	align-items: center;
	gap: 13px;
}

.nav-arrow {
	transition: transform 0.2s ease;
}

.sbar-submenu-btn a[aria-expanded="true"] .nav-arrow,
.has-submenu.open > a .nav-arrow {
	transform: rotate(90deg) !important;
}

/* Submenu Styling */
.sidebar-submenu-list {
	display: none;
	flex-direction: column;
	gap: 3px;
	margin: 3px 0 3px 10px;
	padding-left: 8px;
	border-left: 1.5px solid #e5e7eb;
}

.sidebar.rtl .sidebar-submenu-list {
	margin: 3px 10px 3px 0;
	padding-left: 0;
	padding-right: 8px;
	border-left: none;
	border-right: 1.5px solid #e5e7eb;
}

.sidebar-submenu-list.show {
	display: flex;
}

.sidebar-submenu-list a.submenu-link {
	padding: 7px 12px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ink-3);
	border-radius: 8px;
	min-height: 36px;
	background: transparent;
}

.sidebar-submenu-list a.submenu-link .category-icon,
.sidebar-submenu-list a.submenu-link svg {
	width: 17px;
	height: 17px;
	min-width: 17px;
}

.sidebar-submenu-list a.submenu-link:hover {
	background-color: var(--surface-2);
	color: var(--ink-1);
}

.sidebar-submenu-list a.submenu-link.active {
	background-color: color-mix(in srgb, var(--main-color, #7928ca) 12%, #ffffff) !important;
	color: var(--main-color, #7928ca) !important;
	font-weight: 600;
	border-radius: 8px;
	border: none !important;
}

.sidebar-submenu-list a.submenu-link.active .category-icon {
	filter: none !important;
}

/* Sidebar Badges */
.sidebar-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 600;
	min-width: 18px;
	height: 18px;
	padding: 0 6px;
	border-radius: 9999px;
	line-height: 1;
}

.sidebar-badge-warning {
	background-color: var(--warn-soft);
	color: var(--warn-medium);
}

.sidebar-badge-primary {
	background-color: var(--primary-hover);
	color: var(--main-color);
}

/* Hide text & arrow & logo when collapsed */
.sidebar.collapsed .nav-left span,
.sidebar.collapsed .nav-arrow,
.sidebar.collapsed .nav-title,
.sidebar.collapsed .b-logo,
.sidebar .b-logo-icon {
	display: none;
}

.sidebar.collapsed .b-logo-icon {
	display: inline-block;
}

.sidebar.collapsed .logo-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
}

.sidebar .logo-wrapper img {
	width: 110px;
}

.sidebar.collapsed .logo-wrapper img {
	width: 50px;
}

.sidebar.collapsed .other-app-dropdown-block {
	display: none;
}

.sidebar.collapsed nav a {
	justify-content: center;
}

.sidebar.collapsed .small-logo {
	display: block !important;
}

.sidebar:not(.collapsed) .big-logo {
	display: block !important;
}

.sidebar.collapsed .top-bar-logo {
	justify-content: center !important;
}
.sidebar .top-bar-logo {
	height: 55px;
	border-bottom: 1px solid var(--gray-300);
	box-shadow: 0px 0px 4px #80808029;

}
/* ================= MAIN WRAPPER ================= */
.main-wrapper {
	margin-left: 240px;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	transition: margin-left 0.3s ease;
}

.sidebar.collapsed~.main-wrapper {
	margin-left: 72px;
}

/* ================= HEADER ================= */
.header-new {
	box-shadow: 0px 0px 4px #80808029;
	gap: 12px;
	padding: 0 16px;
	position: sticky;
	top: 0;
	z-index: 700;
}

.icon-box {
	width: 36px;
	height: 36px;
	background: none;
	border: none;
}

.header-notification-count {
	width: 13px;
	height: 13px;
	background-color: var(--red-800);
	border: 2px solid #fafafb;
	top: -3px;
	right: -1px;
}

.header-user-avatar__img {
	width: 28px;
	height: 28px;
}

.header-user-details__name,
.header-user-details__email {
	max-width: 122px;
}

.header-user-active {
	width: 13px;
	height: 13px;
	background-color: var(--green-800);
	border: 2px solid #fafafb;
	right: 0;
	bottom: 0;
}

.header-user-dropdown .dropdown-toggle::after {
	display: none;
}

.header-user-dropdown .dropdown-menu {
	min-width: 214px;
	top: 20px !important;
}
.header-user-dropdown .dropdown-menu.show{
	right: 10px !important;
	left: auto !important;
}

.header-user-dropdown .dropdown-toggle{
	border-radius: 50px;
}
.header-user-dropdown .header-user-details__name{
	font-size: 14px;
	line-height: 16px;
}
.header-user-dropdown .header-user-details__email{
	font-size: 12px;
	line-height: 13px;
}
.dropdown-list-seprated>li:not(:last-child) {
	border-bottom: 1px solid var(--gray-300);
	padding-bottom: 12px;
}

.header-user-dropdown .dropdown-menu::before {
	content: "";
	position: absolute;
	top: -8px;
	right: 20px;
	width: 15px;
	height: 15px;
	background: var(--ink-inverse);
	border: 1px solid #dfdfdf;
	transform: rotate(45deg);
	z-index: 0;
	border-right: 0;
	border-bottom: 0;
	border-radius: 2px;
}

.header-user-inner-menu li a:hover span {
	color: var(--main-color) !important;
}

.dropdown-up-angle {
	width: 32px;
	height: 32px;
}

.sidebar-oc-btn.active img,
.sidebar-oc-btn.active svg {
	transform: scale(-1);
}

.locale-trigger {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 10px;
	border-radius: 8px;
	border: 1px solid #e5e5e5;
}

.locale-wrapper img.flag-icon {
	width: 20px;
	height: 20px;
	object-fit: cover;
}

.locale-panel {
	display: none;
	position: absolute;
	top: 20px !important;
	right: 0;
	width: 100%;
	background: var(--ink-inverse);
	border-radius: 16px;
	border: 1px solid #eee;
	padding: 14px;
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

.locale-panel.active {
	display: block;
}

.locale-trigger .currency-icon {
	vertical-align: middle;
}

.cur-list-scroll {
	max-height: 320px;
	overflow-y: auto;
}

.locale-group {
	margin-bottom: 16px;
	position: relative;
}

.locale-wrapper .inner-trigger {
	width: 100%;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid #efeff1;
}

.locale-wrapper .inner-menu {
	display: none;
	position: absolute;
	top: 105%;
	width: 100%;
	background: var(--ink-inverse);
	border-radius: 12px;
	border: 1px solid #eee;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
	z-index: 10;
	overflow-y: auto;
}

.locale-wrapper .inner-menu li {
	padding: 10px 12px;
	cursor: pointer;
}

.locale-wrapper .inner-menu li:hover {
	background: var(--gray-50);
}

.top-bar-logo .nav-section{width: 100%;}
.top-bar-logo .nav-section .go-back-btn{
	display:flex ;
	align-items: center;
	gap:12px;
	font-weight:600;
	color:#333333;
	width: 100%;
	font-size: 18px;
}
.sidebar.collapsed .go-back-btn{
	justify-content: center;
}
.sidebar.collapsed .go-back-btn .nav-left{
	display: none;
}
.top-bar-logo .nav-section .arrow-span{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6x;
	height:36px;
	width:36px;
}

.top-bar-logo .nav-section .arrow-span:hover{
	background-color: var(--lilac-soft);
	color: var(--main-color);
}

.header-new .cur-dropdown .dropdown-menu::before {
	content: "";
	position: absolute;
	top: -8px;
	right: 20px;
	width: 15px;
	height: 15px;
	background: var(--ink-inverse);
	border: 1px solid #dfdfdf;
	transform: rotate(45deg);
	z-index: 0;
	border-right: 0;
	border-bottom: 0;
	border-radius: 2px;
}

.header-new .cur-dropdown .cur-menu-lbl{
	color: var(--ink-3);
}
.header-new .cur-dropdown .dropdown-menu.show {
	right: 0px !important;
	left: auto !important;
}
.header-new .cur-dropdown .dropdown-menu {
	min-width: 288px;
	top: 20px !important;
}
.cur-list .cur-code{
	width: 40px;
}
.cur-list .curr-list-item{
	border: 2px solid transparent;
}
.cur-list .curr-list-item:hover{
	border-color: var(--main-color);
	background-color: var(--surface-2);
}
.cur-list .cur-tick{
	opacity: 0;
}
.cur-list.active .curr-list-item{
	background-color: var(--main-color-transparant);
}
.cur-list.active .curr-list-item .cur-tick{
	opacity: 1;
}
/* ================= CONTENT ================= */
.content {
	flex: 1;
	padding: 24px;
}

/* ================= FOOTER ================= */
.footer-bt {
	padding: 20px 24px;
	box-shadow: 0px -4px 48px 0px rgba(128, 128, 128, 0.05);
}

.footer-bt ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-bt a:hover {
	color: var(--main-color);
}

/* ================= OVERLAY ================= */
.overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 900;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.overlay.show {
	opacity: 1;
	pointer-events: auto;
}

/* Notification css  */

/* ================= BUTTON ================= */
.notification-btn {
	width: 48px;
	height: 48px;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	background: var(--ink-inverse);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.notification-dot {
	position: absolute;
	top: -3px;
	left: -3px;
	width: 8px;
	height: 8px;
	background: var(--danger);
	border-radius: 50%;
}

/* ================= DROPDOWN ================= */
.notification-menu {
	width: 300px;
	padding: 0;
	border-radius: 12px;
	border: none;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
	right: -30px !important;
	left: auto !important;
	top: 20px !important;
}

/* Arrow */
.notification-menu::before {
	content: "";
	position: absolute;
	top: -8px;
	right: 50px;
	width: 14px;
	height: 14px;
	background: var(--ink-inverse);
	transform: rotate(45deg);
	border-bottom: 0;
	border-left: 0;
}
.notification-dropdown .notification-menu.show {
	right: -30px !important;
	left: auto !important;
}

/* ================= HEADER ================= */
.notification-header {
	padding: 12px 16px;
	font-weight: 600;
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid var(--line);
}

/* ================= LIST ================= */
.notification-list {
	max-height: 320px;
	overflow-y: auto;
}

/* ================= ITEM ================= */
.notification-item {
	border-bottom: 1px solid var(--line);
	cursor: pointer;
}

.notification-main {
	padding: 12px 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: background 0.2s ease;
}

.notification-main:hover {
	background: var(--surface-2);
}

/* Text */
.notification-title {
	font-size: 14px;
	font-weight: 500;
	color: var(--ink-3);
}

.notification-date {
	font-size: 12px;
	color: var(--ink-3);
}

/* ================= ACTIONS ================= */
.notification-actions {
	opacity: 0;
	visibility: hidden;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.notification-item:hover .notification-actions {
	opacity: 1;
	visibility: visible;
}

.notification-actions a {
	font-size: 14px;
	margin-right: 8px;
}

/* ================= DESCRIPTION ================= */
.notification-desc {
	max-height: 0;
	overflow: hidden;
	padding: 0 16px;
	font-size: 13px;
	color: var(--ink-3);
	transition: all 0.3s ease;
	background: var(--gray-400);
}

.notification-item.active .notification-desc {
	max-height: 120px;
	padding: 8px 16px 12px;
}

/* ================= FOOTER ================= */
.notification-footer {
	display: block;
	text-align: center;
	padding: 12px;
	font-weight: 600;
	color: var(--main-color);
	border-top: 1px solid var(--line);
	margin: 12px;
}

.notification-list {
	max-height: 360px;
	overflow-y: auto;
}

.notification-date-label {
	padding: 8px 16px;
	font-size: 12px;
	font-weight: 600;
	color: var(--ink-3);
	text-transform: uppercase;
	background: var(--gray-400);
}

.notification-item {
	border-bottom: 1px solid var(--line);
	cursor: pointer;
}

.notification-main {
	padding: 14px 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: background 0.2s ease;
}

.notification-main:hover {
	background: var(--surface-2);
}

.notification-title {
	font-size: 14px;
	font-weight: 500;
	color: var(--ink-3);
}

.notification-time {
	font-size: 12px;
	color: var(--ink-3);
	margin-top: 2px;
}

.notification-actions {
	opacity: 0;
	visibility: hidden;
	transition: 0.2s;
	white-space: nowrap;
}

.notification-item:hover .notification-actions {
	opacity: 1;
	visibility: visible;
}

.notification-desc {
	max-height: 0;
	overflow: hidden;
	padding: 0 16px;
	font-size: 13px;
	color: var(--ink-3);
	transition: all 0.3s ease;
}

.notification-item.active .notification-desc {
	max-height: 120px;
	padding: 8px 16px 12px;
}

.notification-item {
	position: relative;
}

.notification-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.7);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10;
}

.new-content .mar_leftcss {
	margin-left: 0px !important;
	margin-right: 0 !important;
}

/* Notification css end */

/* Other App Dropdown */
.icon24 {
	height: 24px;
	width: auto;
}
.w-17{width: 17px;height: auto;min-width: 17px;}

.other-app-dropdown-block .dropdown-menu {
	min-width: 250px;
}

.other-app-dropdown-block .dropdown-menu::before {
	content: "";
	position: absolute;
	top: -8px;
	left: 20px;
	width: 15px;
	height: 15px;
	background: var(--ink-inverse);
	border: 1px solid var(--line);
	transform: rotate(45deg);
	z-index: 0;
	border-right: 0;
	border-bottom: 0;
	border-radius: 2px;
}

.other-app-dropdown-block .dropdown-menu a:hover span {
	color: var(--main-color) !important;
}

.cursor-not-allowed {
	cursor: not-allowed !important;
}

.languages-switcher{
	width: 84px;
	display: flex;
	gap: 2px;
	padding: 2px;
	border-radius: 8px;
	border: 1px solid var(--line);
	background-color: var(--surface-2);
	height: 36px;
}
.languages-switcher span{
	color: var(--ink-3);
	width: 50%;
	border-radius: 4px;
	font-weight: 600;
}
.languages-switcher a.active span {
	background-color: var(--ink-inverse);
	color: var(--ink-1);
}

.languages-switcher a:hover span{
	color: var(--ink-2);
}
.search-wrapper{
	border: 1px solid var(--line);
	background-color: var(--surface-2);
}
.search-wrapper .search-input{
	width: 200px;
}
.currency-note{
	font-size: 12px;
	color: var(--ink-3);
	line-height: 16px;
	padding: 9px 12px 6px;
	border-top: 1px solid var(--line);
	text-align: left;
}
.track-order-header .order-container{
    max-width: 1116px;
    padding-block: 20px;
}

.track-order-header .logo-icon{
    width: 32px;
    height: 32px;
    background: transparent !important;
}
.track-order-header .language-switcher {
    padding: 3px;
}
.track-order-header .language-switcher .button{
    height: 28px;
    min-width: 44px;
    font-weight: 800;
    border: 0px;
    background-color: transparent;
}
.track-order-header .language-switcher .button.active{
    color: var(--ink-1);
    background-color: white;
}
.track-order-header .language-switcher .button:hover{
    color: var(--ink-1);
}
/* ================= Track page ================= */
.track-page {
	padding: 32px 0 40px;
}
.track-page .track-form-card {
	max-width: 400px;
	padding: 36px;
}
.track-page .track-box {
	max-width: 680px;
}
.track-page .track-icon-tile {
	width: 52px;
	height: 52px;
	margin-bottom: 20px;
}
.track-page .track-subtitle {
	margin-bottom: 24px;
}
.track-page .track-tabs {
	margin-bottom: 20px;
}

/* Tabs */
.track-page .track-tab {
	padding-inline: 12px;
	margin-bottom: -1px;
	color: var(--neutral-400);
	font-weight: 500;
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	transition: all 0.3s;
}
.track-page .track-tab:hover {
	color: var(--neutral-950);
}
.track-page .track-tab.active {
	color: var(--main-color);
	border-bottom-color: var(--main-color);
	font-weight: 600;
}

/* Fields */
.track-page .track-fields > * + * {
	margin-top: 12px;
}
.track-page .track-field {
	padding-inline: 12px;
	transition: all 0.3s;
}
.track-page .track-field:focus-within {
	border-color: var(--main-color) !important;
	box-shadow: 0 0 0 2px var(--primary-soft);
}
.track-page .track-input {
	height: 40px;
	padding: 2px;
	border: 0;
	outline: 0;
}
.track-page .track-input::placeholder {
	color: color-mix(in srgb, var(--ink-3) 60%, transparent);
}
.customer-otp-input:focus {
	border-color: var(--main-color) !important;
	box-shadow: 0 0 0 2px var(--primary-soft) !important;
	outline: none !important;
}
.track-page .track-btn {
	height: 44px;
	padding: 6px;
}
.track-page .track-form-card .track-btn {
	height: 46px;
	margin-top: 20px;
}

/* Status header */
.track-page .track-hero {
	padding: 16px 28px 44px;
	background: linear-gradient(135deg, var(--primary-hover) 0%, var(--main-color) 40%, var(--lilac) 100%);
}
.track-page .track-hero-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to bottom, transparent 40%, color-mix(in srgb, var(--neutral-950) 34%, transparent) 100%);
}
.track-page .track-hero-bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 26px;
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: cover;
}
.bg-image {
	background-image: url('../images/track-bg-shape.png');
}
.track-page .track-hero-content {
	position: relative;
	z-index: 30;
}
.track-page .track-hero-status {
	margin-top: 16px;
}
.track-page .track-glass {
	padding: 6px;
	gap: 10px;
	border: 1px solid var(--neutral-30);
	background-color: color-mix(in srgb, var(--neutral-950) 46%, transparent);
	transition: all 0.3s;
}
.track-page .track-glass:hover {
	border-color: rgba(255, 255, 255, 0.2);
	transform: translateY(-1px);
}
.track-page .track-logo {
	width: 40px;
	height: 40px;
	padding: 6px;
}
.track-page .track-pill {
	padding: 4px 12px;
	border: 1px solid var(--neutral-30);
	background-color: color-mix(in srgb, var(--neutral-950) 62%, transparent);
}
.track-page .track-dot {
	width: 6px;
	min-width: 6px;
	height: 6px;
}
.track-page .track-date {
	margin-top: 10px;
	font-size: 30px;
	line-height: 1.25;
	letter-spacing: -0.02em;
}

/* ===== Live Hero Animated Scene (lh-sky) ===== */
.lh-sky {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 1;
}
.lh-sky::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(to bottom, transparent 40%, color-mix(in srgb, var(--neutral-950, #1a1726) 34%, transparent) 100%);
}
.lh-glow {
	position: absolute;
	width: 220px;
	height: 220px;
	top: -90px;
	inset-inline-end: -40px;
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(circle, rgba(255, 255, 255, .5), transparent 68%);
	animation: lhGlow 9s ease-in-out infinite;
}
@keyframes lhGlow {
	0%, 100% { opacity: .55; transform: scale(1); }
	50% { opacity: .85; transform: scale(1.06); }
}
.lh-cloud {
	position: absolute;
	fill: rgba(255, 255, 255, 0.18);
	animation: lhDrift 46s linear infinite;
	pointer-events: none;
	z-index: 3;
}
.lh-cloud.c2 {
	fill: rgba(255, 255, 255, 0.13);
	animation-duration: 64s;
	animation-delay: -18s;
}
.lh-cloud.c3 {
	fill: rgba(255, 255, 255, 0.09);
	animation-duration: 78s;
	animation-delay: -40s;
}
@keyframes lhDrift {
	0% {
		transform: translateX(-40%);
		opacity: 0;
	}
	12% {
		opacity: 1;
	}
	82% {
		opacity: 1;
	}
	100% {
		transform: translateX(340%);
		opacity: 0;
	}
}
[dir="rtl"] .lh-cloud,
html[dir="rtl"] .lh-cloud {
	animation-name: lhDriftRtl;
}
@keyframes lhDriftRtl {
	0% {
		transform: translateX(40%);
		opacity: 0;
	}
	12% {
		opacity: 1;
	}
	82% {
		opacity: 1;
	}
	100% {
		transform: translateX(-340%);
		opacity: 0;
	}
}
.lh-city {
	position: absolute;
	inset-inline: 0;
	bottom: 26px;
	height: 96px;
	width: 100%;
	fill: #ffffff;
	opacity: .1;
	pointer-events: none;
	z-index: 4;
}
.lh-city.far {
	bottom: 36px;
	height: 112px;
	opacity: .06;
	animation: lhPara 90s linear infinite;
	z-index: 3;
}
@keyframes lhPara {
	from { transform: translateX(0); }
	to { transform: translateX(-4%); }
}
[dir="rtl"] .lh-city.far,
html[dir="rtl"] .lh-city.far {
	animation-name: lhParaRtl;
}
@keyframes lhParaRtl {
	from { transform: translateX(0); }
	to { transform: translateX(4%); }
}
.lh-lamp {
	position: absolute;
	bottom: 26px;
	width: 2px;
	height: 34px;
	background: rgba(255, 255, 255, .28);
	pointer-events: none;
	z-index: 5;
}
.lh-lamp::before {
	content: '';
	position: absolute;
	top: -3px;
	inset-inline-start: -3px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .85);
	box-shadow: 0 0 12px 4px rgba(255, 255, 255, .45);
}
.lh-hub {
	position: absolute;
	bottom: 26px;
	pointer-events: none;
	fill: #ffffff;
	opacity: .28;
	z-index: 5;
}
.lh-hub.start {
	inset-inline-start: 14px;
}
.lh-hub.end {
	inset-inline-end: 14px;
}
.lh-pin {
	position: absolute;
	bottom: 66px;
	inset-inline-end: 26px;
	color: #ffffff;
	opacity: .9;
	pointer-events: none;
	animation: lhPin 3.4s ease-in-out infinite;
	z-index: 6;
}
@keyframes lhPin {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-5px); }
}
.lh-road {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 26px;
	background: rgba(255, 255, 255, .14);
	border-top: 1px solid rgba(255, 255, 255, .22);
	z-index: 10;
}
.lh-road::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	top: 12px;
	height: 2px;
	background: repeating-linear-gradient(to right, rgba(255, 255, 255, .6) 0 16px, transparent 16px 34px);
	animation: lhRoad 1.6s linear infinite;
}
@keyframes lhRoad {
	to { transform: translateX(-34px); }
}
[dir="rtl"] .lh-road::after,
html[dir="rtl"] .lh-road::after {
	animation-name: lhRoadRtl;
}
@keyframes lhRoadRtl {
	to { transform: translateX(34px); }
}
.lh-van {
	position: absolute;
	bottom: 14px;
	inset-inline-start: -76px;
	color: var(--warn-soft, #FFE9BC);
	animation: lhDrive 15s cubic-bezier(.42, 0, .58, 1) infinite;
	z-index: 12;
}
@keyframes lhDrive {
	0% { transform: translateX(0); }
	100% { transform: translateX(calc(100% + 720px)); }
}
[dir="rtl"] .lh-van,
html[dir="rtl"] .lh-van {
	animation-name: lhDriveRtl;
}
@keyframes lhDriveRtl {
	0% { transform: translateX(0); }
	100% { transform: translateX(calc(-100% - 720px)); }
}
.lh-van svg {
	display: block;
	animation: lhBounce 1.1s ease-in-out infinite;
}
@keyframes lhBounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-1.5px); }
}
[dir="rtl"] .lh-van svg,
html[dir="rtl"] .lh-van svg {
	transform: scaleX(-1);
	animation-name: lhBounceRtl;
}
@keyframes lhBounceRtl {
	0%, 100% { transform: scaleX(-1) translateY(0); }
	50% { transform: scaleX(-1) translateY(-1.5px); }
}
.lh-van .wheel {
	transform-box: fill-box;
	transform-origin: center;
	animation: lhSpin 1.1s linear infinite;
}
@keyframes lhSpin {
	to { transform: rotate(360deg); }
}
[dir="rtl"] .lh-van .wheel,
html[dir="rtl"] .lh-van .wheel {
	animation-name: lhSpinRtl;
}
@keyframes lhSpinRtl {
	to { transform: rotate(-360deg); }
}
.lh-shadow {
	position: absolute;
	bottom: 12px;
	inset-inline-start: 6px;
	width: 52px;
	height: 6px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--neutral-950, #1a1726) 34%, transparent);
	filter: blur(2px);
	animation: lhSquash 1.1s ease-in-out infinite;
}
@keyframes lhSquash {
	0%, 100% { transform: scaleX(1); opacity: .5; }
	50% { transform: scaleX(.92); opacity: .36; }
}

/* Progress steps */
.track-page .track-step-connector::before {
	content: '';
	position: absolute;
	top: 16px;
	inset-inline-start: 50%;
	width: 100%;
	height: 2px;
	background-color: var(--main-color);
	z-index: 0;
}
.track-page .track-step-icon {
	z-index: 10;
	width: 32px;
	height: 32px;
	padding: 2px;
	border: 2px solid var(--main-color);
}
.track-page .track-step-current::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	width: 100%;
	aspect-ratio: 1;
	border: 1px solid var(--main-color);
	border-radius: 50%;
	animation: lhPulse 2.4s ease-out infinite;
}
@keyframes lhPulse {
	0% { transform: scale(0.8); opacity: .5; }
	70% { transform: scale(1.90); opacity: 0; }
	100% { opacity: 0; }
}

/* Info grid */
.track-page .track-info-grid,
.track-info-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.track-page .track-info-grid > div,
.track-info-grid > div {
	border-inline-end: 1px solid var(--line, #EDEAE6) !important;
}
.track-page .track-info-grid > div:last-child,
.track-info-grid > div:last-child {
	border-inline-end: 0 !important;
}

/* Items */
.track-page .track-section-title,
.track-section-title {
	margin-bottom: 14px;
	letter-spacing: 0.08em;
}
.track-page .track-item,
.track-item {
	padding-block: 10px !important;
}
.track-page .track-item h5,
.track-item h5 {
	line-height: 1.35 !important;
	font-size: 14px !important;
}
.track-page .track-item > span,
.track-item > span {
	min-width: 48px;
	font-size: 14px !important;
	line-height: 1.35 !important;
}

/* Tracking history */
.track-page .track-timeline-item,
.track-timeline-item {
	gap: 12px;
	position: relative;
	margin-bottom: 0 !important;
}
.track-page .track-timeline-marker,
.track-timeline-marker {
	width: 20px;
	position: relative;
	flex-shrink: 0;
}
.track-page .track-timeline-dot,
.track-timeline-dot {
	width: 12px;
	min-width: 12px;
	height: 12px;
	border: 2px solid var(--line-2, #E0DCD7);
	position: relative;
	z-index: 2;
}
.track-page .track-timeline-dot-active,
.track-timeline-dot-active {
	border-color: var(--main-color, #6200EE);
	box-shadow: 0 0 0 3px var(--primary-soft, #EDE7FF);
}
.track-page .track-timeline-content,
.track-timeline-content {
	padding-bottom: 24px;
	position: relative;
	flex: 1;
}
.track-page .track-timeline-item:last-child .track-timeline-content,
.track-timeline-item:last-child .track-timeline-content {
	padding-bottom: 0;
}
.track-page .track-timeline-item:not(:last-child)::before,
.track-timeline-item:not(:last-child)::before {
	content: '';
	position: absolute;
	top: 16px;
	bottom: -4px;
	inset-inline-start: 9px;
	width: 2px;
	background-color: var(--line, #EDEAE6);
	z-index: 1;
}
.track-page .track-timeline-head,
.track-timeline-head {
	gap: 10px;
}
/* ================= Orders page ================= */
.order-page .order-container {
	max-width: 992px;
}

/* Buttons */
.order-page .order-btn {
	height: 44px;
	padding: 6px;
}
.order-page .shipment-detail-footer .order-btn {
	width: 128px;
	height: 42px;
}
.order-page .order-card-footer .order-btn {
	width: 128px;
}
.order-page .order-card-footer .order-btn-wide {
	width: auto;
	min-width: 128px;
}

/* Segmented pill tabs */
.order-page .pill-tab {
	background-color: transparent;
	transition: all 0.3s;
}
.order-page .pill-tab:hover {
	color: var(--neutral-950);
}
.order-page .pill-tab.active {
	background-color: #fff;
	color: var(--main-color);
	box-shadow: var(--shadow-1);
}
.order-page .pill-tab-sm {
	min-height: 28px;
}
.order-page .pill-tab-sm.active {
	color: var(--neutral-950);
}

/* Shipment rows (list view) */
.order-page .shipment-rows > * + * {
	margin-top: 10px;
}
.order-page .shipment-row {
	flex-direction: row;
	align-items: center;
	gap: 14px;
}
.order-page .shipment-row-meta {
	width: 224px;
	gap: 14px;
}
.order-page .store-logo {
	width: 42px;
	height: 42px;
}

/* Shipment tabs + details */
.order-page .shipment-sidebar {
	width: 256px;
}
.order-page .shipment-tabs {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 8px;
}
.order-page .side-tab {
	padding: 10px 12px;
	background-color: transparent;
	transition: all 0.3s;
}
.order-page .side-tab:hover {
	background-color: var(--surface-2);
}
.order-page .side-tab.active {
	background-color: var(--primary-soft);
	border-color: var(--main-color) !important;
}
.order-page .detail-title {
	gap: 14px;
}
.order-page .detail-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

/* Return requests list */
.order-page .return-intro {
	max-width: 530px;
	margin-bottom: 10px;
}
.order-page .order-cards {
	margin-top: 20px;
}
.order-page .order-cards > * + * {
	margin-top: 16px;
}
.order-page .order-card-info {
	gap: 12px;
}
.order-page .order-card-id {
	width: auto;
}
.order-page .order-card-amount {
	width: 112px;
}
.order-page .order-card-body {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.order-page .section-label {
	margin-bottom: 10px;
}
.order-page .product-list > * + * {
	margin-top: 10px;
}
.order-page .product-info {
	gap: 10px;
}
.order-page .product-thumb {
	width: 40px;
	height: 40px;
}
.order-page .choice-card-lg .product-thumb,
.order-page .selected-product .product-thumb {
	width: 44px;
	height: 44px;
}
.order-page .order-list-end {
	margin-top: 20px;
}
.order-page .order-list-end .bg-line {
	height: 1px;
}

/* Return flow: back link, steps, sections */
.order-page .flow-section {
	margin-bottom: 20px;
}
.order-page .stepper-num {
	width: 24px;
	height: 24px;
	color: var(--neutral-400);
}
.order-page .stepper-item.active .stepper-num {
	background-color: var(--main-color);
	color: #fff;
	border-color: #fff !important;
}
.order-page .stepper-item.done .stepper-num {
	background-color: var(--primary-soft);
	color: var(--main-color);
	border-color: var(--main-color) !important;
}
.order-page .stepper-label {
	display: block;
}
.order-page .stepper-item.active .stepper-label,
.order-page .stepper-item.done .stepper-label {
	color: var(--neutral-950);
}
.order-page .stepper-line {
	width: 24px;
	height: 2px;
}

/* Selectable option cards (checkbox / radio inside a label) */
.order-page .select-list > * + * {
	margin-top: 16px;
}
.order-page .choice-list > * + * {
	margin-top: 10px;
}
.order-page .choice-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}
.order-page .choice-card {
	padding: 14px;
	gap: 10px;
	transition: all 0.3s;
}
.order-page .choice-card-lg {
	padding: 16px;
	gap: 6px;
}
.order-page .choice-card:hover {
	background-color: var(--surface-2) !important;
}
.order-page .choice-card:has(:checked) {
	border-color: var(--main-color) !important;
	background-color: var(--primary-soft) !important;
}
.order-page .choice-card-ring:has(:checked) {
	box-shadow: 0 0 0 3px var(--primary-soft);
}
.order-page .choice-check {
	width: 20px;
	height: 20px;
}
.order-page .choice-radio {
	width: 18px;
	height: 18px;
}
.order-page .select-product-info {
	gap: 14px;
}
.order-page .return-select-actions {
	margin-top: 20px;
	gap: 10px;
}
.order-page .return-select-actions .order-btn {
	height: 46px;
}
.order-page .return-select-actions .btn-brand {
	min-width: 176px;
}

/* Return details */
.order-page .return-layout {
	gap: 20px;
}
.order-page .return-main > * + * {
	margin-top: 16px;
}
.order-page .return-panel,
.order-page .review-card-head,
.order-page .review-card-body {
	padding: 20px;
}
.order-page .panel-title {
	margin-bottom: 12px;
}
.order-page .selected-product {
	padding: 14px;
	gap: 14px;
}
.order-page .qty-row {
	margin-top: 12px;
}
.order-page .qty-control button {
	width: 32px;
	height: 32px;
}
.order-page .qty-control span {
	min-width: 36px;
}
.order-page .method-icon {
	width: 32px;
	height: 32px;
}
.order-page .upload-box {
	padding: 20px;
}
.order-page .upload-icon {
	width: 40px;
	height: 40px;
	margin-bottom: 10px;
	position: static;
}
.order-page .upload-hint {
	margin-bottom: 12px;
}
.order-page .upload-browse {
	min-height: 36px;
}
.order-page .upload-files {
	margin-top: 12px;
}
.order-page .upload-files > * + * {
	margin-top: 8px;
}
.order-page .upload-file-info {
	gap: 10px;
}
.order-page .upload-file-thumb {
	width: 36px;
	height: 36px;
}
.order-page .upload-file-remove {
	width: 28px;
	height: 28px;
}
.order-page .return-summary {
	width: 320px;
}
.order-page .summary-total {
	padding-top: 14px;
}
.order-page .summary-actions {
	margin-top: 16px;
}
.order-page .summary-actions > * + * {
	margin-top: 8px;
}

/* Review */
.order-page .review-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.order-page .review-cell {
	padding: 14px;
}
.order-page .review-attach-label {
	margin-bottom: 6px;
}

/* Result screens */
.order-page .result-screen {
	padding-top: 32px;
}
.order-page .result-card {
	max-width: 520px;
	padding: 40px 28px;
}
.order-page .result-card .order-btn {
	height: 44px;
}
.order-page .result-icon {
	width: 64px;
	height: 64px;
}
.order-page .result-text {
	margin-bottom: 20px;
}
.order-page .result-row {
	padding: 10px 14px;
}
.order-page .result-row-amount {
	padding: 12px 14px;
	margin-bottom: 14px;
}
.order-page .result-submit-btn {
	margin-bottom: 12px;
}
.order-page .result-action-btn {
	margin-bottom: 10px;
}

/* Empty state */
.order-page .empty-state-icon {
	margin-bottom: 14px;
}
.order-page .empty-state-icon svg {
	width: 40px;
}

.track-order-header .order-container{
    max-width: 1116px;
    padding-block: 20px;
}

.track-order-header .logo-icon{
    width: 32px;
    height: 32px;
    background: transparent !important;
}
.track-order-header .language-switcher {
    padding: 3px;
}
.track-order-header .language-switcher .button{
    min-height: 28px;
    min-width: 44px;
    font-weight: 800;
    border: 0px;
    background-color: transparent;
}
.track-order-header .language-switcher .button.active{
    color: var(--ink-1);
    background-color: white;
}
.track-order-header .language-switcher .button:hover{
    color: var(--ink-1);
}
/* ================= RTL Css ================= */
html[dir="rtl"] .rtl-rotate-90{
	transform: rotate(90deg);
}
html[dir="rtl"] .flip-icon{
	transform: rotate(180deg);
}
html[dir="rtl"]  .text-start{
	text-align: right;
}
html[dir="rtl"] .header-user-dropdown .dropdown-menu.show{
	right: auto !important;
	left: 10px !important;
}
html[dir="rtl"] .notification-dropdown .notification-menu.show {
	right: auto !important;
	left: -30px !important;
}
html[dir="rtl"] .header-user-dropdown .dropdown-menu::before{
	right: auto;
	left: 20px;
}
html[dir="rtl"] .other-app-dropdown-block .dropdown-menu {
	left: -190px !important;
	right: unset !important;
	top: 15px !important;
}

html[dir="rtl"] .other-app-dropdown-block .dropdown-menu::before {
	left: unset;
	right: 20px;
}

html[dir="rtl"] .logo-wrapper {
	text-align: right;
}

html[dir="rtl"] .sidebar {
	left: auto;
	right: 0;
	border-left: 1px !important;
	border-right: 0px !important;
}

html[dir="rtl"] .main-wrapper {
	margin-left: auto;
	margin-right: 240px;
	transition: margin-right 0.3s ease;
}

html[dir="rtl"] .sidebar.collapsed~.main-wrapper {
	margin-left: auto;
	margin-right: 72px;
}

html[dir="rtl"] .nav-arrow,
html[dir="rtl"] .sidebar-oc-btn img,
html[dir="rtl"] .logout-icon {
	transform: scale(-1);
}

html[dir="rtl"] .sidebar-oc-btn.active img {
	transform: scale(1);
}

html[dir="rtl"] .header-creat-shipment {
	flex-direction: row-reverse;
}

html[dir="rtl"] .locale-panel label {
	text-align: right;
}

html[dir="rtl"] .currency-note {
	text-align: right;
}

html[dir="rtl"] .header-user-details .header-user-details__name,
html[dir="rtl"] .header-user-details .header-user-details__email,
html[dir="rtl"] .user-last-login-info p {
	text-align: right;
}

html[dir="rtl"] .locale-panel {
	left: 0;
	right: auto;
	text-align: right;
}

html[dir="rtl"] .go-back-btn .nav-left {
	flex-direction: row-reverse;
}

html[dir="rtl"] .notification-menu {
	right: unset !important;
	left: -40px !important;
}

/* Arrow */
html[dir="rtl"] .notification-menu::before {
	right: unset;
	left: 50px;
}
html[dir="rtl"] .header-new .cur-dropdown .dropdown-menu.show {
	left: 0px !important;
	right: auto !important;
}
html[dir="rtl"] .header-new .cur-dropdown .dropdown-menu::before{
	right: unset;
	left: 20px;
}
/* ================= Responsive Css ================= */
/* Overlay only on Tablet */
@media (min-width: 1025px) {
	.overlay {
		display: none;
	}
}

@media (max-width: 1199px) {
	/* Header css */
	.shipment-text {
		display: none;
	}

	.header-new {
		padding-inline: 16px !important;
	}

	.track-page .track-form-card .track-btn {
		height: 44px;
	}

	.order-page .detail-title {
		gap: 10px;
	}
	.order-page .detail-grid {
		gap: 12px;
	}
	.order-page .return-select-actions .order-btn {
		height: 44px;
	}
	.order-page .return-panel,
	.order-page .review-card-head,
	.order-page .review-card-body {
		padding: 16px;
	}
	.order-page .result-screen {
		padding-top: 20px;
	}
	.order-page .result-card .order-btn {
		height: 42px;
	}
}

@media (max-width: 1024px) {
	/* Header css */
	.locale-wrapper .locale-panel {
		width: 230px;
		left: -60px !important;
	}

	/* Sidebar css */
	.sidebar {
		transform: translateX(-100%);
	}

	.sidebar.open {
		transform: translateX(0);
	}

	.sidebar.collapsed {
		width: 240px;
	}

	.main-wrapper,
	.sidebar.collapsed~.main-wrapper {
		margin-left: 0;
	}

	.sidebar.collapsed .nav-left span,
	.sidebar.collapsed .nav-arrow,
	.sidebar.collapsed .nav-title,
	.sidebar.collapsed .b-logo {
		display: block;
	}

	.sidebar.collapsed nav a {
		justify-content: space-between;
	}

	.sidebar.collapsed.open .logo-wrapper {
		justify-content: flex-start;
	}

	.sidebar.collapsed .b-logo-icon {
		display: none;
	}
	.other-app-dropdown-block .dropdown-menu{
		min-width: 230px;
	}
	.sidebar-oc-btn img {
		transform: scale(-1);
	}

	.other-app-dropdown-block .dropdown-menu::before {
		left: unset;
		right: 20px;
	}

	.other-app-dropdown-block .dropdown-menu.show {
		top: 40px !important;
	}
	.search-wrapper .search-input{
		width: 160px;
	}
	/* ------------ RTL Css ------------ */
	html[dir="rtl"] .main-wrapper,
	html[dir="rtl"] .sidebar.collapsed~.main-wrapper {
		margin-right: 0;
	}

	html[dir="rtl"] .sidebar {
		transform: translateX(100%);
	}

	html[dir="rtl"] .sidebar.open {
		transform: translateX(0);
	}

	html[dir="rtl"] .sidebar-oc-btn img {
		transform: scale(1);
	}

	html[dir="rtl"] .other-app-dropdown-block .dropdown-menu {
		left: 0px !important;
		top: 30px !important;
	}

	html[dir="rtl"] .other-app-dropdown-block .dropdown-menu::before {
		left: 20px;
		right: unset;
	}
}

@media (max-width: 991px) {
	.track-page {
		padding-top: 20px;
	}
	.track-page .track-form-card {
		padding: 16px;
	}
	.track-page .track-subtitle {
		margin-bottom: 20px;
	}
	.track-page .track-field {
		padding-inline: 8px;
	}
	.track-page .track-input {
		height: 36px;
	}
	.track-page .track-hero {
		padding: 16px 20px 36px;
	}
	.track-page .track-hero-status {
		margin-top: 12px;
	}

	.order-page .shipment-rows > * + * {
		margin-top: 8px;
	}
	.order-page .shipment-row,
	.order-page .shipment-row-meta {
		gap: 8px;
	}
	.order-page .shipment-view .store-logo {
		width: 40px;
		height: 40px;
	}
	.order-page .shipment-sidebar {
		width: 176px;
	}
	.order-page .shipment-tabs {
		gap: 6px;
	}
	.order-page .detail-grid {
		gap: 8px;
	}
	.order-page .order-cards {
		margin-top: 16px;
	}
	.order-page .order-cards > * + * {
		margin-top: 12px;
	}
	.order-page .order-card-info {
		gap: 8px;
	}
	.order-page .section-label {
		margin-bottom: 8px;
	}
	.order-page .product-info {
		gap: 6px;
	}
	.order-page .choice-card-lg .product-thumb,
	.order-page .selected-product .product-thumb {
		width: 40px;
		height: 40px;
	}
	.order-page .order-list-end {
		margin-top: 16px;
	}
	.order-page .flow-section {
		margin-bottom: 16px;
	}
	.order-page .select-list > * + * {
		margin-top: 14px;
	}
	.order-page .choice-list > * + * {
		margin-top: 6px;
	}
	.order-page .choice-grid {
		gap: 6px;
	}
	.order-page .choice-card,
	.order-page .choice-card-lg {
		padding: 10px;
	}
	.order-page .choice-card {
		gap: 4px;
	}
	.order-page .choice-card-lg {
		gap: 6px;
	}
	.order-page .choice-check,
	.order-page .choice-radio {
		width: 16px;
		height: 16px;
	}
	.order-page .select-product-info {
		gap: 8px;
	}
	.order-page .return-select-actions {
		margin-top: 14px;
		gap: 6px;
	}
	.order-page .return-layout {
		gap: 12px;
	}
	.order-page .return-main > * + * {
		margin-top: 12px;
	}
	.order-page .return-panel,
	.order-page .review-card-head,
	.order-page .review-card-body {
		padding: 12px;
	}
	.order-page .panel-title {
		margin-bottom: 10px;
	}
	.order-page .selected-product {
		padding: 10px;
		gap: 8px;
	}
	.order-page .qty-row {
		margin-top: 10px;
	}
	.order-page .upload-box {
		padding: 14px;
	}
	.order-page .upload-icon {
		width: 36px;
		height: 36px;
		margin-bottom: 6px;
	}
	.order-page .upload-hint {
		margin-bottom: 8px;
	}
	.order-page .upload-files {
		margin-top: 6px;
	}
	.order-page .upload-files > * + * {
		margin-top: 4px;
	}
	.order-page .upload-file-info {
		gap: 6px;
	}
	.order-page .summary-total {
		padding-top: 8px;
	}
	.order-page .summary-actions {
		margin-top: 12px;
	}
	.order-page .summary-actions > * + * {
		margin-top: 4px;
	}
	.order-page .review-cell {
		padding: 8px;
	}
	.order-page .review-attach-label {
		margin-bottom: 4px;
	}
	.order-page .result-card {
		padding: 20px;
	}
	.order-page .result-text {
		margin-bottom: 14px;
	}
	.order-page .result-row,
	.order-page .result-row-amount {
		padding: 10px;
	}
	.order-page .result-row-amount {
		margin-bottom: 8px;
	}
	.order-page .result-submit-btn {
		margin-bottom: 8px;
	}
	.order-page .result-action-btn {
		margin-bottom: 6px;
	}
	.order-page .empty-state-icon {
		margin-bottom: 12px;
	}
}

@media (max-width: 767px) {
	.title-h4 {
		font-size: 20px;
		line-height: 28px;
	}
	.track-page .track-icon-tile {
		width: 48px;
		height: 48px;
		margin-bottom: 16px;
	}
	.track-page .track-subtitle,
	.track-page .track-tabs {
		margin-bottom: 16px;
	}
	.track-page .track-tab {
		padding-inline: 8px;
	}
	.track-page .track-fields > * + * {
		margin-top: 8px;
	}
	.track-page .track-btn,
	.track-page .track-form-card .track-btn {
		height: 40px;
	}
	.track-page .track-form-card .track-btn {
		margin-top: 16px;
	}
	.track-page .track-hero {
		padding: 12px 16px 32px;
	}
	.track-page .track-glass {
		gap: 4px;
	}
	.track-page .track-logo {
		width: 32px;
		height: 32px;
		padding: 2px;
	}
	.track-page .track-date {
		font-size: 24px;
	}
	.track-page .track-step-connector::before {
		top: 14px;
	}
	.track-page .track-step-icon {
		width: 28px;
		height: 28px;
	}
	.track-page .track-section-title {
		margin-bottom: 8px;
	}
	.track-page .track-item {
		padding-block: 6px;
	}
	.track-page .track-timeline-content {
		padding-bottom: 14px;
	}
	.order-page .order-btn,
	.order-page .shipment-detail-footer .order-btn,
	.order-page .return-select-actions .order-btn,
	.order-page .result-card .order-btn {
		height: 40px;
	}
	.order-page .return-intro {
		margin-bottom: 6px;
	}
	.order-page .product-list > * + * {
		margin-top: 8px;
	}
	.order-page .side-tab {
		padding: 8px;
	}
	.order-page .return-summary {
		width: 224px;
	}
	.order-page .result-card {
		padding: 12px;
	}
}

@media (max-width: 600px) {
	.header-new .arrow {
		display: block;
	}
	.header-new__right{
		column-gap: 8px !important;
	}
}

@media (max-width: 575px) {

	/* Header css */
	.h-48 {
		height: 44px;
	}
	.min-h-36 {
		min-height: 32px;
	}
	.h-36 {
		height: 32px;
	}

	.header-new {
		padding-block: 12px !important;
	}

	.locale-trigger {
		padding: 7px 10px;
		gap: 3px;
	}

	.icon-box {
		width: 32px;
		height: 32px;
		padding: 4px !important;
	}

	.header-user-dropdown .dropdown-menu {
		right: 0;
		transform: unset !important;
		left: auto !important;
		top: 50px !important;
	}

	.header-user-dropdown .dropdown-menu::before {
		left: auto;
		right: 20px;
	}

	.locale-wrapper .inner-trigger,
	.locale-group .inner-menu {
		font-size: 14px;
	}

	/* Notification css  */
	.header-new .notification-menu {
		right: -66px !important;
	}
	.notification-menu{
		width: 280px;
	}
	.header-new .notification-menu::before {
		right: 40px;
	}

	.header-new .cur-dropdown .dropdown-menu{
		min-width: 255px;
	}
	.notification-dropdown .notification-menu.show{
		right: -60px !important;
	}
	.header-new .cur-dropdown .dropdown-menu::before{
		right: 101px;
	}
	.header-new .cur-dropdown .dropdown-menu.show{
		right: -90px !important;
	}
	.track-page .track-info-grid,
	.track-info-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.track-page .track-info-grid > div:nth-child(2n),
	.track-info-grid > div:nth-child(2n) {
		border-inline-end: 0 !important;
	}
	.track-page .track-info-grid > div:nth-child(-n+2),
	.track-info-grid > div:nth-child(-n+2) {
		border-bottom: 1px solid var(--line, #EDEAE6) !important;
	}
	.track-page .track-timeline-item {
		gap: 8px;
	}
	.track-page .track-timeline-head {
		gap: 4px;
	}
	.order-page .shipment-sidebar,
	.order-page .order-card-id,
	.order-page .return-summary {
		width: 100%;
	}
	.order-page .shipment-tabs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.order-page .return-select-actions .btn-brand {
		min-width: 112px;
	}
	.order-page .qty-control button {
		width: 24px;
		height: 24px;
	}
	/* ------------ RTL Css ------------ */
	html[dir="rtl"] .header-user-dropdown .dropdown-menu {
		left: 0 !important;
		transform: unset !important;
		right: auto !important;
		top: 50px !important;
	}

	html[dir="rtl"] .header-user-dropdown .dropdown-menu::before {
		right: auto;
		left: 20px;
	}

	html[dir="rtl"] .header-new .notification-menu {
		right: unset !important;
		left: -70px !important;
	}

	html[dir="rtl"] .header-new .notification-menu::before {
		right: unset;
		left: 70px;
	}
	html[dir="rtl"] .notification-dropdown .notification-menu.show{
		left: -60px !important;
	}
	html[dir="rtl"] .header-new .cur-dropdown .dropdown-menu::before{
		left: 100px;
	}
	html[dir="rtl"] .header-new .cur-dropdown .dropdown-menu.show{
		left: -90px !important;
	}
}

@media (max-width: 480px) {

	/* Header css */
	.h-48 {
		height: 32px;
	}

	.icon-box,
	.header-creat-shipment {
		width: 32px;
		height: 32px;
		border-radius: 6px;
	}

	.header-creat-shipment {
		justify-content: center;
		padding: 4px !important;
	}

	.locale-wrapper {
		border-radius: 6px;
	}

	.header-user-dropdown-left .header-user-avatar__img {
		width: 20px;
		height: 20px;
	}

	.header-user-dropdown .dropdown-toggle,
	.locale-trigger {
		border-radius: 6px;
		padding: 4px;
	}

	/* Footer css */
	.footer-bt {
		padding: 16px;
	}

	.locale-trigger {
		height: 32px;
	}

	.languages-switcher{
		width: 32px;
	}
	.languages-switcher .language-switcher-item.active{
		display: none !important;
	}
	.languages-switcher .language-switcher-item{
		width: 100% !important;
	}
	.order-page .shipment-row {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
	}
	.order-page .shipment-row-meta {
		width: 100%;
	}
	.order-page .detail-grid,
	.order-page .review-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.order-page .order-card-body,
	.order-page .choice-grid-stack {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
	.order-page .stepper-label {
		display: none;
	}
}

@media (max-width: 375px) {

	/* Header css */
	.locale-panel {
		right: -50px !important;
		left: auto !important;
	}

	/* ------------ RTL Css ------------ */
	html[dir="rtl"] .locale-panel {
		right: auto;
		left: -50px !important;
	}
}

/* ===============================
	RTL BASE
=============================== */
.sidebar.rtl {
	direction: rtl;
}

.sidebar.rtl .nav-left {
	text-align: right;
}

/* ===============================
	ICON & ARROW FIX
=============================== */
.sidebar.rtl .nav-arrow {
	transform: rotate(180deg);
}

.sidebar.rtl .has-submenu.open>a .nav-arrow {
	transform: rotate(90deg);
}

/* ===============================
	SUBMENU INDENT
=============================== */
.sidebar .sidebar-submenu-list {
	padding-left: 10px;
}

.sidebar.rtl .sidebar-submenu-list {
	padding-left: 0;
	padding-right: 10px;
}

.sidebar.collapsed.rtl .sidebar-submenu-list {
	padding-left: 0;
	padding-right: 0;
}

.sidebar.collapsed .sidebar-submenu-list {
	padding-left: 0;
	padding-right: 0;
}

/* ===============================
	BACK BUTTON FIX
=============================== */
.sidebar.rtl .icon-left-rotate {
	transform: rotate(180deg);
}

.rotate-180 {
	transform: rotate(180deg);
	transition: transform 0.3s ease;
}

/* COD Transfer Buttons */
.cod_transfer_download_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 16px;
	background: color-mix(in srgb, var(--main-color) 8%, transparent);
	border: 1.5px solid color-mix(in srgb, var(--main-color) 20%, transparent);
	border-radius: 30px;
	text-decoration: none !important;
	color: var(--main-color) !important;
	font-weight: 700;
	font-size: 0.8rem;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.cod_transfer_download_btn:hover {
	background: var(--main-color);
	border-color: var(--main-color);
	color: var(--ink-inverse) !important;
	transform: translateY(-1.5px);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--main-color) 30%, transparent);
}

.cod_transfer_download_btn:hover svg {
	transform: translateY(1px);
	stroke: var(--ink-inverse);
}

.cod_transfer_download_btn svg {
	transition: transform 0.2s ease, stroke 0.2s ease;
}

.cod_transfer_proof_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 16px;
	background: color-mix(in srgb, var(--warn-medium) 8%, transparent);
	border: 1.5px solid color-mix(in srgb, var(--warn-medium) 20%, transparent);
	border-radius: 30px;
	text-decoration: none !important;
	color: var(--warn-medium) !important;
	font-weight: 700;
	font-size: 0.8rem;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.cod_transfer_proof_btn:hover {
	background: var(--warn-medium);
	border-color: var(--warn-medium);
	color: var(--ink-inverse) !important;
	transform: translateY(-1.5px);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--warn-medium) 30%, transparent);
}

.cod_transfer_proof_btn svg {
	transition: transform 0.2s ease, stroke 0.2s ease;
}

.cod_transfer_proof_btn:hover svg {
	transform: translateY(1px);
	stroke: var(--ink-inverse);
}
.thank-you-body {
	background-color: var(--surface-2);
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	margin: 0;
}
.thank-you-card {
	background: white;
	padding: 40px;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	text-align: center;
	max-width: 500px;
	width: 90%;
}
.thank-you-card h1 {
	color: var(--main-color);
	margin-bottom: 20px;
}
.thank-you-card p {
	font-size: 18px;
	color: var(--ink-3);
	margin-bottom: 30px;
	line-height: 1.5;
}
.btn-primary-thankyou {
	background-color: var(--main-color);
	color: var(--ink-inverse);
	padding: 12px 24px;
	border-radius: 4px;
	text-decoration: none;
	font-size: 16px;
	font-weight: bold;
	transition: opacity 0.3s;
	display: inline-block;
}
.btn-primary-thankyou:hover {
	opacity: 0.9;
}

/* ================= Phone International Input Component ================= */
.phone-intl-wrapper {
	position: relative !important;
	overflow: visible !important;
	border: none !important;
	background: transparent !important;
	padding: 0 !important;
}
.phone-intl-wrapper .iti {
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	position: relative !important;
}
.phone-intl-wrapper .iti__flag-container {
	position: relative !important;
	top: auto !important;
	bottom: auto !important;
	left: auto !important;
	right: auto !important;
	padding: 0 !important;
	z-index: 10 !important;
	flex-shrink: 0 !important;
	height: 42px !important;
}
.phone-intl-wrapper .iti__selected-flag {
	padding: 0 12px !important;
	background-color: #ffffff !important;
	border: 1px solid var(--line-2, #ebecee) !important;
	border-radius: 8px !important;
	height: 42px !important;
	display: flex !important;
	align-items: center !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	box-sizing: border-box !important;
	position: relative !important;
	z-index: 1 !important;
}
.phone-intl-wrapper .iti__selected-flag:hover {
	background-color: var(--surface-2, #f8f9fb) !important;
	border-color: var(--line-2, #dfdfdf) !important;
}
.phone-intl-wrapper .iti__selected-dial-code {
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #09090b !important;
	margin-left: 6px !important;
}
.phone-intl-wrapper .iti input[type=tel],
.phone-intl-wrapper .phone-intl-input {
	flex: 1 1 0% !important;
	width: 100% !important;
	height: 42px !important;
	padding: 0 12px !important;
	border: 1px solid var(--line-2, #ebecee) !important;
	border-radius: 8px !important;
	outline: none !important;
	background-color: #ffffff !important;
	font-size: 14px !important;
	color: #09090b !important;
	letter-spacing: 0.02em !important;
	transition: all 0.2s ease !important;
	box-sizing: border-box !important;
}
.phone-intl-wrapper .iti input[type=tel]:focus,
.phone-intl-wrapper .phone-intl-input:focus {
	border-color: var(--main-color, #6200EE) !important;
	box-shadow: 0 0 0 2px var(--primary-soft, #EDE7FF) !important;
}
.phone-intl-wrapper .iti--separate-dial-code input[type=tel] {
	padding-left: 12px !important;
}
.phone-intl-wrapper .iti__arrow {
	border-top: 4px solid var(--ink-3, #71717a) !important;
	margin-left: 6px !important;
	transition: transform 0.2s ease !important;
}
.phone-intl-wrapper .iti__arrow--up {
	border-top: none !important;
	border-bottom: 4px solid var(--main-color, #6200EE) !important;
}

/* Hide the dropdown when closed */
.iti__hide,
.phone-intl-wrapper .iti__hide,
ul.iti__country-list.iti__hide,
.iti .iti__hide {
	display: none !important;
}

/* Floating dropdown menu when opened */
.iti__country-list,
.phone-intl-wrapper .iti__country-list {
	position: absolute !important;
	z-index: 99999 !important;
	top: calc(100% + 6px) !important;
	left: 0 !important;
	min-width: 280px !important;
	max-width: 320px !important;
	max-height: 220px !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	background: #ffffff !important;
	border: 1px solid var(--line-2, #ebecee) !important;
	border-radius: 8px !important;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important;
	padding: 4px 0 !important;
	margin: 0 !important;
	list-style: none !important;
}
.iti__country,
.phone-intl-wrapper .iti__country {
	padding: 8px 12px !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	font-size: 13px !important;
	color: #09090b !important;
	cursor: pointer !important;
	outline: none !important;
	transition: background-color 0.15s ease !important;
}
.iti__country:hover, 
.iti__country.iti__highlight,
.phone-intl-wrapper .iti__country:hover,
.phone-intl-wrapper .iti__country.iti__highlight {
	background-color: var(--primary-soft, #EDE7FF) !important;
	color: var(--main-color, #6200EE) !important;
}
.iti__country-name,
.phone-intl-wrapper .iti__country-name {
	margin-right: 6px !important;
	font-weight: 500 !important;
}
.iti__dial-code,
.phone-intl-wrapper .iti__dial-code {
	color: var(--ink-3, #71717a) !important;
	font-size: 12px !important;
	margin-left: auto !important;
}

html[dir="rtl"] .phone-intl-wrapper .iti__selected-dial-code {
	margin-left: 0 !important;
	margin-right: 6px !important;
}
html[dir="rtl"] .phone-intl-wrapper .iti__arrow {
	margin-left: 0 !important;
	margin-right: 6px !important;
}
html[dir="rtl"] .phone-intl-wrapper .iti__country-list {
	left: auto !important;
	right: 0 !important;
	text-align: right !important;
}
html[dir="rtl"] .phone-intl-wrapper .iti__country-name {
	margin-right: 0 !important;
	margin-left: 6px !important;
}
html[dir="rtl"] .phone-intl-wrapper .iti__dial-code {
	margin-left: 0 !important;
	margin-right: auto !important;
}