html {
	scroll-behavior: smooth;
}

/* ══════════════════════════════════════════════════════════════════
   MAGIC PATTERNS DESIGN SYSTEM
   Source  : magicpatterns.com/c/5w8vrz24qcl1hoqgmrmfvf
   Primary : #3b5998  (Facebook Blue)
   Accent  : #F59E0B  (Gold / Amber)
   Bg      : #eef1f8  (Lavender)
   Text    : #334155  (Slate)
   Font    : Inter
   Loaded after Bootstrap — takes full precedence.
   ════════════════════════════════════════════════════════════════ */
:root {
	/* ── Primary brand (Facebook Blue #3b5998) ── */
	--primary:     #3b5998;
	--primary-50:  #e8edf8;
	--primary-100: #cdd8f0;
	--primary-200: #a8bae3;
	--primary-300: #7a99d4;
	--primary-400: #5578c5;
	--primary-600: #2d4a8a;
	--primary-700: #243f7c;
	--primary-800: #1b3470;
	--primary-900: #122660;

	/* ── Accent (Gold / Amber) ── */
	--accent:      #F59E0B;
	--accent-100:  #FEF3C7;
	--accent-400:  #FBBF24;
	--accent-600:  #D97706;
	--accent-700:  #B45309;

	/* ── Text / neutral scale ── */
	--text-heading:   #1e293b;
	--text-body:      #334155;
	--text-secondary: #475569;
	--text-muted:     #64748b;
	--text-light:     #94a3b8;

	/* ── Surface / background ── */
	--surface:        #ffffff;
	--surface-muted:  #f8f9fa;
	--bg-page:        #eef1f8;

	/* ── Border ── */
	--border:         #e0e3f0;
	--border-input:   #ced4da;
	--border-light:   #dee2e6;

	/* ── Status: success ── */
	--success:        #28a745;
	--success-bg:     #D1FAE5;
	--success-text:   #065F46;
	--success-dot:    #059669;

	/* ── Status: danger ── */
	--danger:         #dc3545;
	--danger-bg:      #FEE2E2;
	--danger-text:    #991B1B;

	/* ── Status: warning / info ── */
	--warning:        #ffc107;
	--info:           #17a2b8;

	/* ── Page & surface aliases (legacy compat) ── */
	--food-bg:        #eef1f8;
	--food-surface:   #ffffff;
	--food-surface-2: #F8F9FC;
	--food-border:    #E0E3F0;
	--food-text:      #334155;
	--food-text-2:    #475569;
	--food-text-3:    #94A3B8;

	/* ── Shadow system ── */
	--shadow-sm:      0 1px 2px rgba(0,0,0,.04);
	--shadow-md:      0 1px 2px rgba(0,0,0,.04), 0 8px 24px -12px rgba(0,0,0,.08);
	--shadow-lg:      0 4px 6px rgba(0,0,0,.05), 0 20px 40px -16px rgba(0,0,0,.12);
	--shadow-xl:      0 6px 18px rgba(0,0,0,.07), 0 2px 6px rgba(0,0,0,.04);
	--shadow-primary: 0 4px 14px rgba(59,89,152,.35), 0 2px 4px rgba(59,89,152,.2);
	--shadow-accent:  0 4px 14px rgba(251,191,36,.35), 0 2px 4px rgba(245,158,11,.2);
	--shadow-card:    0 2px 8px rgba(0,0,0,.06), 0 0 1px rgba(0,0,0,.04);
	--shadow-hover:   0 8px 24px rgba(59,89,152,.12), 0 2px 8px rgba(0,0,0,.06);
	--shadow-header:  0 1px 8px rgba(0,0,0,.05), 0 1px 0 rgba(59,89,152,.06);

	/* ── Border radius ── */
	--radius-sm:   8px;
	--radius-md:   14px;
	--radius-card: 16px;
	--radius-lg:   20px;
	--radius-xl:   28px;
	--radius-pill: 100px;

	/* ── Transitions ── */
	--transition-fast: .15s;
	--transition-base: .2s;
	--transition-slow: .35s;

	/* ── Typography ── */
	--font-family:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--font-size-xs:         9px;
	--font-size-sm:         12px;
	--font-size-sm2:        13px;
	--font-size-base:       13.5px;
	--font-size-md:         16px;
	--font-size-lg:         24px;
	--font-size-xl:         28px;
	--font-weight-normal:   400;
	--font-weight-medium:   500;
	--font-weight-semibold: 600;
	--font-weight-bold:     700;
	--font-weight-extrabold:800;

	/* ── Layout ── */
	--border-width:    1px;
	--border-width-md: 1.5px;
	--header-height:   64px;
	--header-offset:   68px;
}

/* btn-primary */
.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled { background-color: var(--primary); border-color: var(--primary); color: var(--surface); }
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus { background-color: var(--primary-600); border-color: var(--primary-700); color: var(--surface); }
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle { background-color: var(--primary-700); border-color: var(--primary-800); color: var(--surface); }
.btn-primary:focus,.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus { box-shadow: 0 0 0 .2rem rgba(59,89,152,.40); }
.btn-outline-primary { color: var(--primary); border-color: var(--primary); }
.btn-outline-primary:hover { color: #fff; background-color: #3b5998; border-color: #3b5998; }
.btn-outline-primary:focus,.btn-outline-primary.focus { box-shadow: 0 0 0 .2rem rgba(59,89,152,.35); }
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle { background-color: #3b5998; border-color: #3b5998; }
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-primary.dropdown-toggle:focus { box-shadow: 0 0 0 .2rem rgba(59,89,152,.35); }

/* btn-primary-100 */
.btn-primary-100,
.btn-primary-100.disabled,
.btn-primary-100:disabled { background-color: #cdd8f0; border-color: #cdd8f0; color: #1b3470; }
.btn-primary-100:hover,
.btn-primary-100:focus { background-color: #a8bae3; border-color: #7a99d4; color: #1b3470; }

/* text / bg / border */
.text-primary { color: #3b5998 !important; }
a.text-primary:hover, a.text-primary:focus { color: #243f7c !important; }
.bg-primary { background-color: #3b5998 !important; }
a.bg-primary:hover, a.bg-primary:focus,
button.bg-primary:hover, button.bg-primary:focus { background-color: #2d4a8a !important; }
.bg-primary-100 { background-color: #cdd8f0 !important; }
.border-primary { border-color: #3b5998 !important; }
.text-primary-800 { color: #1b3470 !important; }
.text-primary-700 { color: #243f7c !important; }

/* badges / alerts / links */
.badge-primary { background-color: #3b5998; color: #fff; }
.alert-primary { color: #1b3470; background-color: #cdd8f0; border-color: #a8bae3; }
.alert-primary hr { border-top-color: #7a99d4; }
.alert-primary .alert-link { color: #122660; }
a { color: #3b5998; }
a:hover { color: #243f7c; }
.nav-link, .dropdown-item.active { color: #3b5998; }

/* focus rings */
.form-control:focus { border-color: #3b5998; box-shadow: 0 0 0 .2rem rgba(59,89,152,.22); }
.custom-select:focus { border-color: #3b5998; box-shadow: 0 0 0 .2rem rgba(59,89,152,.22); }
.custom-control-input:checked ~ .custom-control-label::before { background-color: #3b5998; border-color: #3b5998; }
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 .2rem rgba(59,89,152,.22); }
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before { background-color: #3b5998; }
.custom-range::-webkit-slider-thumb { background-color: #3b5998; }
.custom-range::-moz-range-thumb { background-color: #3b5998; }

/* progress / spinner */
.progress-bar { background-color: #3b5998; }
.spinner-border.text-primary, .spinner-grow.text-primary { color: #3b5998 !important; }

/* pagination */
.page-item.active .page-link { background-color: #3b5998; border-color: #3b5998; }
.page-link { color: #3b5998; }
.page-link:hover { color: #243f7c; }
.page-link:focus { box-shadow: 0 0 0 .2rem rgba(59,89,152,.22); }

/* list-group */
.list-group-item.active { background-color: #3b5998; border-color: #3b5998; }
.list-group-item-primary { color: #1b3470; background-color: #a8bae3; }
a.list-group-item-primary:hover, a.list-group-item-primary:focus { color: #1b3470; background-color: #7a99d4; }
a.list-group-item-primary.active { background-color: #1b3470; border-color: #1b3470; }

/* tables */
.table-primary, .table-primary > td, .table-primary > th { background-color: #a8bae3; }
.table-hover .table-primary:hover { background-color: #7a99d4; }

/* sub-navbar active link */
.app-sub-navbar .nav-link.active,
.app-sub-navbar .nav-link:hover { color: #3b5998; border-bottom-color: #3b5998; }
/* ════════════════════════════════════════════════════ */

body {
	width: 100%;
	height: 100%;
}

/* Dropdown */
.dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active {
	border-radius: var(--border-radius);
}

.dropdown-item svg {
	color: var(--gray-600);
}

.dropdown-item:active svg, .dropdown-item.active svg {
	color: var(--white);
}

/* App navbar */
.app-navbar {
	min-height: 75px;
	border-bottom: 1px solid var(--gray-100);
	margin-bottom: 4rem;
}

.app-navbar .navbar-nav > li {
	padding: .5rem 0 !important;
}

@media (min-width: 992px) {
	.app-navbar .navbar-nav > li {
		padding: .5rem !important;
	}
}

/* App sub menu */
.app-sub-navbar {
	min-height: 65px;
	border-bottom: 1px solid var(--gray-100);
	margin-bottom: 3rem;
	padding: 0;
}

.app-sub-navbar .app-sub-navbar-ul {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-left: 0;
	list-style: none;
	margin: 1rem 0;
}

@media (min-width: 992px) {
	.app-sub-navbar .app-sub-navbar-ul {
		flex-direction: row;
		margin: 0;
	}
}

.app-sub-navbar .nav-item {
	min-width: fit-content;
}

.app-sub-navbar .nav-link {
	padding: .75rem;
	color: var(--gray-600);
}

@media (min-width: 992px) {

	.app-sub-navbar .nav-link {
		padding: 1.2rem;
	}

}

.app-sub-navbar .nav-link:hover {
	color: var(--gray);
}

@media (min-width: 992px) {
	.app-sub-navbar .nav-link:hover {
		border-bottom: 2px solid var(--gray);
	}
}

.app-sub-navbar .nav-link.active {
	color: var(--primary);
}

@media (min-width: 992px) {
	.app-sub-navbar .nav-link.active {
		border-bottom: 2px solid var(--primary);
	}
}

/* Qr Code */
#qr {
	padding: 1rem;
}
#qr img {
	width: 100%;
	height: auto;
}

/* Filters */
.filters-dropdown {
	width: 18rem;
	max-height: 30rem;
	overflow-y: auto;
}

canvas {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

.modal-header {
	padding: 1rem;
	border-bottom: 0;
}

.modal-content {
	padding: 1rem;
	border: none;
	box-shadow: none;
	-webkit-box-shadow: none;
	border-radius: calc(2 * var(--border-radius));
}

/* Forms */
.input-group-text {
	font-size: 0.9rem;
}

.form-control-range {
	/* removing default appearance */
	-webkit-appearance: none;
	appearance: none;

	/*  slider progress trick  */
	overflow: hidden;

	/* creating a custom design */
	accent-color: var(--primary);
	background: var(--gray-200);
	border-radius: var(--border-radius);
	height: .5rem;
	margin: 0.75rem 0;
}

/* Track: webkit browsers */
.form-control-range::-webkit-slider-runnable-track, .form-control-range::-moz-range-track {
	background: var(--gray-200);
}

/* Thumb: webkit */
.form-control-range::-webkit-slider-thumb {
	/* removing default appearance */
	-webkit-appearance: none;
	appearance: none;

	/* creating a custom design */
	height: .75rem;
	width: .75rem;
	background-color: var(--primary);
	border-radius: 50%;
	border: 2px solid var(--white);

	/*  slider progress trick  */
	box-shadow: -2007px 0 0 2000px var(--primary-300);
}

.form-control-range::-moz-range-thumb {
	/* removing default appearance */
	-webkit-appearance: none;
	appearance: none;

	/* creating a custom design */
	height: .75rem;
	width: .75rem;
	background-color: var(--primary);
	border-radius: 50%;
	border: 2px solid var(--white);

	/*  slider progress trick  */
	box-shadow: -2007px 0 0 2000px var(--primary-300);
}

/* Footer */
.footer {
	margin: 3rem 0 0 0;
	padding-top: 3rem;
	padding-bottom: 3rem;
	background: var(--gray-50);
}

.footer {
	color: var(--gray-700);
}

.footer a:not(.dropdown-item), .footer a:hover:not(.dropdown-item) {
	color: var(--gray-700);
}

.footer a.icon {
	color: var(--gray-700);
}

.footer button, .footer button:hover {
	color: var(--gray-700) !important;
}

.footer-logo {
	max-height: 2.5rem;
	height: 2.5rem;
}

.footer-heading {
	color: var(--black) !important;
}

/* Custom breadcrumbs */
.custom-breadcrumbs {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}

.custom-breadcrumbs > li {
	margin-right: .5rem;
}

.custom-breadcrumbs > li > a {
	color: var(--gray);
}

.custom-breadcrumbs > li > svg {
	color: var(--gray-400);
	margin-left: .5rem;
}

.custom-breadcrumbs > li.active {
}

/* Helper classes */
.font-size-small {
	font-size: .9rem;
}

.font-weight-500 {
	font-weight: 500;
}


.list-style-none {
	list-style: none;
	padding: 0;
}

.appearance-none {
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
}

.draggable {
	cursor: grab !important;
}

img {
	vertical-align: inherit !important;
}

.icon-favicon {
	width: .95rem;
	height: auto;
}

.icon-favicon-small {
	width: .75rem;
	height: auto;
}

/* Fix stupid border color from bootstrap on hover */
.btn:hover {
	border-color: transparent !important;
}

/* Navbar custom menu */
.navbar-main .navbar-nav > li > a {
	padding: 1rem 0 !important;
}

@media (min-width: 992px) {
	.navbar-main .navbar-nav > li > a {
		padding: 1rem !important;
	}
}

.navbar-logo {
	max-height: 2.5rem;
	height: 2.5rem;
}

.navbar-logo-mini {
	max-height: 1.25rem;
	height: 1.25rem;
}

.navbar-avatar {
	width: 20px;
	height: 20px;
	border-radius: 50%;
}

.navbar-custom-toggler {
	padding: 0.5rem .8rem;
	font-size: 1.25rem;
	line-height: 1;
	background-color: transparent;
	border-radius: var(--border-radius);

	color: var(--gray-500);
	border-color: var(--gray-300);
}

.chart-container {
	position: relative;
	margin: auto;
	height: 275px;
	width: 100%;
}

@media print {
	.chart-container canvas {
		min-height: 100%;
		max-width: 100%;
		max-height: 100%;
		height: auto!important;
		width: auto!important;
	}
}

/* Index */
.index-header {
	font-size: 3rem;
	line-height: 1;
	font-weight: bold;
	color: var(--black);
}

.index-subheader {
	font-size: 1.25rem;
	color: var(--gray-700);
}

.index-button {
	margin-top: 1rem;
    padding: 0.6rem 4rem;
    font-weight: 500;
}

@media (min-width: 992px) {
	.index-hero {
		transform: scale(1.1);
	}
}

.index-qr img {
	width: 300px;
	height: auto;
	border-radius:.25rem;
}

/* Index testimonial */
.index-testimonial-avatar {
	width: 85px;
	height: 85px;
	border-radius: 50%;
	transform: translateY(-70%);
	border: 4px solid var(--white);
	position: absolute;
	left: 50%;
	margin-left: -52px;
}

/* Index FAQ */
.index-faq svg {
	transition: all .15s;
	color: var(--primary-800);
}

/* Login & register */
@keyframes scroll_bg {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: 260px 0;
	}
}

.login-background {
	background-color: #ebf4ff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23c3d9fe' fill-opacity='1'%3E%3Cpath d='M24.37 16c.2.65.39 1.32.54 2H21.17l1.17 2.34.45.9-.24.11V28a5 5 0 0 1-2.23 8.94l-.02.06a8 8 0 0 1-7.75 6h-20a8 8 0 0 1-7.74-6l-.02-.06A5 5 0 0 1-17.45 28v-6.76l-.79-1.58-.44-.9.9-.44.63-.32H-20a23.01 23.01 0 0 1 44.37-2zm-36.82 2a1 1 0 0 0-.44.1l-3.1 1.56.89 1.79 1.31-.66a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .86.02l2.88-1.27a3 3 0 0 1 2.43 0l2.88 1.27a1 1 0 0 0 .85-.02l3.1-1.55-.89-1.79-1.42.71a3 3 0 0 1-2.56.06l-2.77-1.23a1 1 0 0 0-.4-.09h-.01a1 1 0 0 0-.4.09l-2.78 1.23a3 3 0 0 1-2.56-.06l-2.3-1.15a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1L.9 19.22a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01zm0-2h-4.9a21.01 21.01 0 0 1 39.61 0h-2.09l-.06-.13-.26.13h-32.31zm30.35 7.68l1.36-.68h1.3v2h-36v-1.15l.34-.17 1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0L2.26 23h2.59l1.36.68a3 3 0 0 0 2.56.06l1.67-.74h3.23l1.67.74a3 3 0 0 0 2.56-.06zM-13.82 27l16.37 4.91L18.93 27h-32.75zm-.63 2h.34l16.66 5 16.67-5h.33a3 3 0 1 1 0 6h-34a3 3 0 1 1 0-6zm1.35 8a6 6 0 0 0 5.65 4h20a6 6 0 0 0 5.66-4H-13.1z'/%3E%3Cpath id='path6_fill-copy' d='M284.37 16c.2.65.39 1.32.54 2H281.17l1.17 2.34.45.9-.24.11V28a5 5 0 0 1-2.23 8.94l-.02.06a8 8 0 0 1-7.75 6h-20a8 8 0 0 1-7.74-6l-.02-.06a5 5 0 0 1-2.24-8.94v-6.76l-.79-1.58-.44-.9.9-.44.63-.32H240a23.01 23.01 0 0 1 44.37-2zm-36.82 2a1 1 0 0 0-.44.1l-3.1 1.56.89 1.79 1.31-.66a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .86.02l2.88-1.27a3 3 0 0 1 2.43 0l2.88 1.27a1 1 0 0 0 .85-.02l3.1-1.55-.89-1.79-1.42.71a3 3 0 0 1-2.56.06l-2.77-1.23a1 1 0 0 0-.4-.09h-.01a1 1 0 0 0-.4.09l-2.78 1.23a3 3 0 0 1-2.56-.06l-2.3-1.15a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01zm0-2h-4.9a21.01 21.01 0 0 1 39.61 0h-2.09l-.06-.13-.26.13h-32.31zm30.35 7.68l1.36-.68h1.3v2h-36v-1.15l.34-.17 1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.56.06l1.67-.74h3.23l1.67.74a3 3 0 0 0 2.56-.06zM246.18 27l16.37 4.91L278.93 27h-32.75zm-.63 2h.34l16.66 5 16.67-5h.33a3 3 0 1 1 0 6h-34a3 3 0 1 1 0-6zm1.35 8a6 6 0 0 0 5.65 4h20a6 6 0 0 0 5.66-4H246.9z'/%3E%3Cpath d='M159.5 21.02A9 9 0 0 0 151 15h-42a9 9 0 0 0-8.5 6.02 6 6 0 0 0 .02 11.96A8.99 8.99 0 0 0 109 45h42a9 9 0 0 0 8.48-12.02 6 6 0 0 0 .02-11.96zM151 17h-42a7 7 0 0 0-6.33 4h54.66a7 7 0 0 0-6.33-4zm-9.34 26a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-4.34a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-4.34a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-7a7 7 0 1 1 0-14h42a7 7 0 1 1 0 14h-9.34zM109 27a9 9 0 0 0-7.48 4H101a4 4 0 1 1 0-8h58a4 4 0 0 1 0 8h-.52a9 9 0 0 0-7.48-4h-42z'/%3E%3Cpath d='M39 115a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm6-8a6 6 0 1 1-12 0 6 6 0 0 1 12 0zm-3-29v-2h8v-6H40a4 4 0 0 0-4 4v10H22l-1.33 4-.67 2h2.19L26 130h26l3.81-40H58l-.67-2L56 84H42v-6zm-4-4v10h2V74h8v-2h-8a2 2 0 0 0-2 2zm2 12h14.56l.67 2H22.77l.67-2H40zm13.8 4H24.2l3.62 38h22.36l3.62-38z'/%3E%3Cpath d='M129 92h-6v4h-6v4h-6v14h-3l.24 2 3.76 32h36l3.76-32 .24-2h-3v-14h-6v-4h-6v-4h-8zm18 22v-12h-4v4h3v8h1zm-3 0v-6h-4v6h4zm-6 6v-16h-4v19.17c1.6-.7 2.97-1.8 4-3.17zm-6 3.8V100h-4v23.8a10.04 10.04 0 0 0 4 0zm-6-.63V104h-4v16a10.04 10.04 0 0 0 4 3.17zm-6-9.17v-6h-4v6h4zm-6 0v-8h3v-4h-4v12h1zm27-12v-4h-4v4h3v4h1v-4zm-6 0v-8h-4v4h3v4h1zm-6-4v-4h-4v8h1v-4h3zm-6 4v-4h-4v8h1v-4h3zm7 24a12 12 0 0 0 11.83-10h7.92l-3.53 30h-32.44l-3.53-30h7.92A12 12 0 0 0 130 126z'/%3E%3Cpath d='M212 86v2h-4v-2h4zm4 0h-2v2h2v-2zm-20 0v.1a5 5 0 0 0-.56 9.65l.06.25 1.12 4.48a2 2 0 0 0 1.94 1.52h.01l7.02 24.55a2 2 0 0 0 1.92 1.45h4.98a2 2 0 0 0 1.92-1.45l7.02-24.55a2 2 0 0 0 1.95-1.52L224.5 96l.06-.25a5 5 0 0 0-.56-9.65V86a14 14 0 0 0-28 0zm4 0h6v2h-9a3 3 0 1 0 0 6H223a3 3 0 1 0 0-6H220v-2h2a12 12 0 1 0-24 0h2zm-1.44 14l-1-4h24.88l-1 4h-22.88zm8.95 26l-6.86-24h18.7l-6.86 24h-4.98zM150 242a22 22 0 1 0 0-44 22 22 0 0 0 0 44zm24-22a24 24 0 1 1-48 0 24 24 0 0 1 48 0zm-28.38 17.73l2.04-.87a6 6 0 0 1 4.68 0l2.04.87a2 2 0 0 0 2.5-.82l1.14-1.9a6 6 0 0 1 3.79-2.75l2.15-.5a2 2 0 0 0 1.54-2.12l-.19-2.2a6 6 0 0 1 1.45-4.46l1.45-1.67a2 2 0 0 0 0-2.62l-1.45-1.67a6 6 0 0 1-1.45-4.46l.2-2.2a2 2 0 0 0-1.55-2.13l-2.15-.5a6 6 0 0 1-3.8-2.75l-1.13-1.9a2 2 0 0 0-2.5-.8l-2.04.86a6 6 0 0 1-4.68 0l-2.04-.87a2 2 0 0 0-2.5.82l-1.14 1.9a6 6 0 0 1-3.79 2.75l-2.15.5a2 2 0 0 0-1.54 2.12l.19 2.2a6 6 0 0 1-1.45 4.46l-1.45 1.67a2 2 0 0 0 0 2.62l1.45 1.67a6 6 0 0 1 1.45 4.46l-.2 2.2a2 2 0 0 0 1.55 2.13l2.15.5a6 6 0 0 1 3.8 2.75l1.13 1.9a2 2 0 0 0 2.5.8zm2.82.97a4 4 0 0 1 3.12 0l2.04.87a4 4 0 0 0 4.99-1.62l1.14-1.9a4 4 0 0 1 2.53-1.84l2.15-.5a4 4 0 0 0 3.09-4.24l-.2-2.2a4 4 0 0 1 .97-2.98l1.45-1.67a4 4 0 0 0 0-5.24l-1.45-1.67a4 4 0 0 1-.97-2.97l.2-2.2a4 4 0 0 0-3.09-4.25l-2.15-.5a4 4 0 0 1-2.53-1.84l-1.14-1.9a4 4 0 0 0-5-1.62l-2.03.87a4 4 0 0 1-3.12 0l-2.04-.87a4 4 0 0 0-4.99 1.62l-1.14 1.9a4 4 0 0 1-2.53 1.84l-2.15.5a4 4 0 0 0-3.09 4.24l.2 2.2a4 4 0 0 1-.97 2.98l-1.45 1.67a4 4 0 0 0 0 5.24l1.45 1.67a4 4 0 0 1 .97 2.97l-.2 2.2a4 4 0 0 0 3.09 4.25l2.15.5a4 4 0 0 1 2.53 1.84l1.14 1.9a4 4 0 0 0 5 1.62l2.03-.87zM152 207a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm6 2a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-11 1a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-6 0a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm3-5a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-8 8a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm3 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm0 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4 7a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm5-2a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm5 4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4-6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm6-4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-4-3a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4-3a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-5-4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-24 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm16 5a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm7-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0zm86-29a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm19 9a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-14 5a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-25 1a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm5 4a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm9 0a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm15 1a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm12-2a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-11-14a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-19 0a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm6 5a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-25 15c0-.47.01-.94.03-1.4a5 5 0 0 1-1.7-8 3.99 3.99 0 0 1 1.88-5.18 5 5 0 0 1 3.4-6.22 3 3 0 0 1 1.46-1.05 5 5 0 0 1 7.76-3.27A30.86 30.86 0 0 1 246 184c6.79 0 13.06 2.18 18.17 5.88a5 5 0 0 1 7.76 3.27 3 3 0 0 1 1.47 1.05 5 5 0 0 1 3.4 6.22 4 4 0 0 1 1.87 5.18 4.98 4.98 0 0 1-1.7 8c.02.46.03.93.03 1.4v1h-62v-1zm.83-7.17a30.9 30.9 0 0 0-.62 3.57 3 3 0 0 1-.61-4.2c.37.28.78.49 1.23.63zm1.49-4.61c-.36.87-.68 1.76-.96 2.68a2 2 0 0 1-.21-3.71c.33.4.73.75 1.17 1.03zm2.32-4.54c-.54.86-1.03 1.76-1.49 2.68a3 3 0 0 1-.07-4.67 3 3 0 0 0 1.56 1.99zm1.14-1.7c.35-.5.72-.98 1.1-1.46a1 1 0 1 0-1.1 1.45zm5.34-5.77c-1.03.86-2 1.79-2.9 2.77a3 3 0 0 0-1.11-.77 3 3 0 0 1 4-2zm42.66 2.77c-.9-.98-1.87-1.9-2.9-2.77a3 3 0 0 1 4.01 2 3 3 0 0 0-1.1.77zm1.34 1.54c.38.48.75.96 1.1 1.45a1 1 0 1 0-1.1-1.45zm3.73 5.84c-.46-.92-.95-1.82-1.5-2.68a3 3 0 0 0 1.57-1.99 3 3 0 0 1-.07 4.67zm1.8 4.53c-.29-.9-.6-1.8-.97-2.67.44-.28.84-.63 1.17-1.03a2 2 0 0 1-.2 3.7zm1.14 5.51c-.14-1.21-.35-2.4-.62-3.57.45-.14.86-.35 1.23-.63a2.99 2.99 0 0 1-.6 4.2zM275 214a29 29 0 0 0-57.97 0h57.96zM72.33 198.12c-.21-.32-.34-.7-.34-1.12v-12h-2v12a4.01 4.01 0 0 0 7.09 2.54c.57-.69.91-1.57.91-2.54v-12h-2v12a1.99 1.99 0 0 1-2 2 2 2 0 0 1-1.66-.88zM75 176c.38 0 .74-.04 1.1-.12a4 4 0 0 0 6.19 2.4A13.94 13.94 0 0 1 84 185v24a6 6 0 0 1-6 6h-3v9a5 5 0 1 1-10 0v-9h-3a6 6 0 0 1-6-6v-24a14 14 0 0 1 14-14 5 5 0 0 0 5 5zm-17 15v12a1.99 1.99 0 0 0 1.22 1.84 2 2 0 0 0 2.44-.72c.21-.32.34-.7.34-1.12v-12h2v12a3.98 3.98 0 0 1-5.35 3.77 3.98 3.98 0 0 1-.65-.3V209a4 4 0 0 0 4 4h16a4 4 0 0 0 4-4v-24c.01-1.53-.23-2.88-.72-4.17-.43.1-.87.16-1.28.17a6 6 0 0 1-5.2-3 7 7 0 0 1-6.47-4.88A12 12 0 0 0 58 185v6zm9 24v9a3 3 0 1 0 6 0v-9h-6z'/%3E%3Cpath d='M-17 191a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm19 9a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2H3a1 1 0 0 1-1-1zm-14 5a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-25 1a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm5 4a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm9 0a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm15 1a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm12-2a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2H4zm-11-14a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-19 0a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm6 5a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-25 15c0-.47.01-.94.03-1.4a5 5 0 0 1-1.7-8 3.99 3.99 0 0 1 1.88-5.18 5 5 0 0 1 3.4-6.22 3 3 0 0 1 1.46-1.05 5 5 0 0 1 7.76-3.27A30.86 30.86 0 0 1-14 184c6.79 0 13.06 2.18 18.17 5.88a5 5 0 0 1 7.76 3.27 3 3 0 0 1 1.47 1.05 5 5 0 0 1 3.4 6.22 4 4 0 0 1 1.87 5.18 4.98 4.98 0 0 1-1.7 8c.02.46.03.93.03 1.4v1h-62v-1zm.83-7.17a30.9 30.9 0 0 0-.62 3.57 3 3 0 0 1-.61-4.2c.37.28.78.49 1.23.63zm1.49-4.61c-.36.87-.68 1.76-.96 2.68a2 2 0 0 1-.21-3.71c.33.4.73.75 1.17 1.03zm2.32-4.54c-.54.86-1.03 1.76-1.49 2.68a3 3 0 0 1-.07-4.67 3 3 0 0 0 1.56 1.99zm1.14-1.7c.35-.5.72-.98 1.1-1.46a1 1 0 1 0-1.1 1.45zm5.34-5.77c-1.03.86-2 1.79-2.9 2.77a3 3 0 0 0-1.11-.77 3 3 0 0 1 4-2zm42.66 2.77c-.9-.98-1.87-1.9-2.9-2.77a3 3 0 0 1 4.01 2 3 3 0 0 0-1.1.77zm1.34 1.54c.38.48.75.96 1.1 1.45a1 1 0 1 0-1.1-1.45zm3.73 5.84c-.46-.92-.95-1.82-1.5-2.68a3 3 0 0 0 1.57-1.99 3 3 0 0 1-.07 4.67zm1.8 4.53c-.29-.9-.6-1.8-.97-2.67.44-.28.84-.63 1.17-1.03a2 2 0 0 1-.2 3.7zm1.14 5.51c-.14-1.21-.35-2.4-.62-3.57.45-.14.86-.35 1.23-.63a2.99 2.99 0 0 1-.6 4.2zM15 214a29 29 0 0 0-57.97 0h57.96z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	animation: scroll_bg 30s linear infinite;
}

[data-theme-style="dark"].login-background {
	background-color: #131720;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23434190' fill-opacity='1'%3E%3Cpath d='M24.37 16c.2.65.39 1.32.54 2H21.17l1.17 2.34.45.9-.24.11V28a5 5 0 0 1-2.23 8.94l-.02.06a8 8 0 0 1-7.75 6h-20a8 8 0 0 1-7.74-6l-.02-.06A5 5 0 0 1-17.45 28v-6.76l-.79-1.58-.44-.9.9-.44.63-.32H-20a23.01 23.01 0 0 1 44.37-2zm-36.82 2a1 1 0 0 0-.44.1l-3.1 1.56.89 1.79 1.31-.66a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .86.02l2.88-1.27a3 3 0 0 1 2.43 0l2.88 1.27a1 1 0 0 0 .85-.02l3.1-1.55-.89-1.79-1.42.71a3 3 0 0 1-2.56.06l-2.77-1.23a1 1 0 0 0-.4-.09h-.01a1 1 0 0 0-.4.09l-2.78 1.23a3 3 0 0 1-2.56-.06l-2.3-1.15a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1L.9 19.22a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01zm0-2h-4.9a21.01 21.01 0 0 1 39.61 0h-2.09l-.06-.13-.26.13h-32.31zm30.35 7.68l1.36-.68h1.3v2h-36v-1.15l.34-.17 1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0L2.26 23h2.59l1.36.68a3 3 0 0 0 2.56.06l1.67-.74h3.23l1.67.74a3 3 0 0 0 2.56-.06zM-13.82 27l16.37 4.91L18.93 27h-32.75zm-.63 2h.34l16.66 5 16.67-5h.33a3 3 0 1 1 0 6h-34a3 3 0 1 1 0-6zm1.35 8a6 6 0 0 0 5.65 4h20a6 6 0 0 0 5.66-4H-13.1z'/%3E%3Cpath id='path6_fill-copy' d='M284.37 16c.2.65.39 1.32.54 2H281.17l1.17 2.34.45.9-.24.11V28a5 5 0 0 1-2.23 8.94l-.02.06a8 8 0 0 1-7.75 6h-20a8 8 0 0 1-7.74-6l-.02-.06a5 5 0 0 1-2.24-8.94v-6.76l-.79-1.58-.44-.9.9-.44.63-.32H240a23.01 23.01 0 0 1 44.37-2zm-36.82 2a1 1 0 0 0-.44.1l-3.1 1.56.89 1.79 1.31-.66a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .9 0l2.21-1.1a3 3 0 0 1 2.69 0l2.2 1.1a1 1 0 0 0 .86.02l2.88-1.27a3 3 0 0 1 2.43 0l2.88 1.27a1 1 0 0 0 .85-.02l3.1-1.55-.89-1.79-1.42.71a3 3 0 0 1-2.56.06l-2.77-1.23a1 1 0 0 0-.4-.09h-.01a1 1 0 0 0-.4.09l-2.78 1.23a3 3 0 0 1-2.56-.06l-2.3-1.15a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01a1 1 0 0 0-.44.1l-2.21 1.11a3 3 0 0 1-2.69 0l-2.2-1.1a1 1 0 0 0-.45-.11h-.01zm0-2h-4.9a21.01 21.01 0 0 1 39.61 0h-2.09l-.06-.13-.26.13h-32.31zm30.35 7.68l1.36-.68h1.3v2h-36v-1.15l.34-.17 1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.69 0l1.36-.68h2.59l1.36.68a3 3 0 0 0 2.56.06l1.67-.74h3.23l1.67.74a3 3 0 0 0 2.56-.06zM246.18 27l16.37 4.91L278.93 27h-32.75zm-.63 2h.34l16.66 5 16.67-5h.33a3 3 0 1 1 0 6h-34a3 3 0 1 1 0-6zm1.35 8a6 6 0 0 0 5.65 4h20a6 6 0 0 0 5.66-4H246.9z'/%3E%3Cpath d='M159.5 21.02A9 9 0 0 0 151 15h-42a9 9 0 0 0-8.5 6.02 6 6 0 0 0 .02 11.96A8.99 8.99 0 0 0 109 45h42a9 9 0 0 0 8.48-12.02 6 6 0 0 0 .02-11.96zM151 17h-42a7 7 0 0 0-6.33 4h54.66a7 7 0 0 0-6.33-4zm-9.34 26a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-4.34a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-4.34a8.98 8.98 0 0 0 3.34-7h-2a7 7 0 0 1-7 7h-7a7 7 0 1 1 0-14h42a7 7 0 1 1 0 14h-9.34zM109 27a9 9 0 0 0-7.48 4H101a4 4 0 1 1 0-8h58a4 4 0 0 1 0 8h-.52a9 9 0 0 0-7.48-4h-42z'/%3E%3Cpath d='M39 115a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm6-8a6 6 0 1 1-12 0 6 6 0 0 1 12 0zm-3-29v-2h8v-6H40a4 4 0 0 0-4 4v10H22l-1.33 4-.67 2h2.19L26 130h26l3.81-40H58l-.67-2L56 84H42v-6zm-4-4v10h2V74h8v-2h-8a2 2 0 0 0-2 2zm2 12h14.56l.67 2H22.77l.67-2H40zm13.8 4H24.2l3.62 38h22.36l3.62-38z'/%3E%3Cpath d='M129 92h-6v4h-6v4h-6v14h-3l.24 2 3.76 32h36l3.76-32 .24-2h-3v-14h-6v-4h-6v-4h-8zm18 22v-12h-4v4h3v8h1zm-3 0v-6h-4v6h4zm-6 6v-16h-4v19.17c1.6-.7 2.97-1.8 4-3.17zm-6 3.8V100h-4v23.8a10.04 10.04 0 0 0 4 0zm-6-.63V104h-4v16a10.04 10.04 0 0 0 4 3.17zm-6-9.17v-6h-4v6h4zm-6 0v-8h3v-4h-4v12h1zm27-12v-4h-4v4h3v4h1v-4zm-6 0v-8h-4v4h3v4h1zm-6-4v-4h-4v8h1v-4h3zm-6 4v-4h-4v8h1v-4h3zm7 24a12 12 0 0 0 11.83-10h7.92l-3.53 30h-32.44l-3.53-30h7.92A12 12 0 0 0 130 126z'/%3E%3Cpath d='M212 86v2h-4v-2h4zm4 0h-2v2h2v-2zm-20 0v.1a5 5 0 0 0-.56 9.65l.06.25 1.12 4.48a2 2 0 0 0 1.94 1.52h.01l7.02 24.55a2 2 0 0 0 1.92 1.45h4.98a2 2 0 0 0 1.92-1.45l7.02-24.55a2 2 0 0 0 1.95-1.52L224.5 96l.06-.25a5 5 0 0 0-.56-9.65V86a14 14 0 0 0-28 0zm4 0h6v2h-9a3 3 0 1 0 0 6H223a3 3 0 1 0 0-6H220v-2h2a12 12 0 1 0-24 0h2zm-1.44 14l-1-4h24.88l-1 4h-22.88zm8.95 26l-6.86-24h18.7l-6.86 24h-4.98zM150 242a22 22 0 1 0 0-44 22 22 0 0 0 0 44zm24-22a24 24 0 1 1-48 0 24 24 0 0 1 48 0zm-28.38 17.73l2.04-.87a6 6 0 0 1 4.68 0l2.04.87a2 2 0 0 0 2.5-.82l1.14-1.9a6 6 0 0 1 3.79-2.75l2.15-.5a2 2 0 0 0 1.54-2.12l-.19-2.2a6 6 0 0 1 1.45-4.46l1.45-1.67a2 2 0 0 0 0-2.62l-1.45-1.67a6 6 0 0 1-1.45-4.46l.2-2.2a2 2 0 0 0-1.55-2.13l-2.15-.5a6 6 0 0 1-3.8-2.75l-1.13-1.9a2 2 0 0 0-2.5-.8l-2.04.86a6 6 0 0 1-4.68 0l-2.04-.87a2 2 0 0 0-2.5.82l-1.14 1.9a6 6 0 0 1-3.79 2.75l-2.15.5a2 2 0 0 0-1.54 2.12l.19 2.2a6 6 0 0 1-1.45 4.46l-1.45 1.67a2 2 0 0 0 0 2.62l1.45 1.67a6 6 0 0 1 1.45 4.46l-.2 2.2a2 2 0 0 0 1.55 2.13l2.15.5a6 6 0 0 1 3.8 2.75l1.13 1.9a2 2 0 0 0 2.5.8zm2.82.97a4 4 0 0 1 3.12 0l2.04.87a4 4 0 0 0 4.99-1.62l1.14-1.9a4 4 0 0 1 2.53-1.84l2.15-.5a4 4 0 0 0 3.09-4.24l-.2-2.2a4 4 0 0 1 .97-2.98l1.45-1.67a4 4 0 0 0 0-5.24l-1.45-1.67a4 4 0 0 1-.97-2.97l.2-2.2a4 4 0 0 0-3.09-4.25l-2.15-.5a4 4 0 0 1-2.53-1.84l-1.14-1.9a4 4 0 0 0-5-1.62l-2.03.87a4 4 0 0 1-3.12 0l-2.04-.87a4 4 0 0 0-4.99 1.62l-1.14 1.9a4 4 0 0 1-2.53 1.84l-2.15.5a4 4 0 0 0-3.09 4.24l.2 2.2a4 4 0 0 1-.97 2.98l-1.45 1.67a4 4 0 0 0 0 5.24l1.45 1.67a4 4 0 0 1 .97 2.97l-.2 2.2a4 4 0 0 0 3.09 4.25l2.15.5a4 4 0 0 1 2.53 1.84l1.14 1.9a4 4 0 0 0 5 1.62l2.03-.87zM152 207a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm6 2a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-11 1a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-6 0a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm3-5a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-8 8a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm3 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm0 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4 7a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm5-2a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm5 4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4-6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm6-4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-4-3a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm4-3a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-5-4a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-24 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm16 5a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm7-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0zm86-29a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm19 9a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-14 5a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-25 1a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm5 4a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm9 0a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm15 1a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm12-2a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-11-14a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-19 0a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm6 5a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-25 15c0-.47.01-.94.03-1.4a5 5 0 0 1-1.7-8 3.99 3.99 0 0 1 1.88-5.18 5 5 0 0 1 3.4-6.22 3 3 0 0 1 1.46-1.05 5 5 0 0 1 7.76-3.27A30.86 30.86 0 0 1 246 184c6.79 0 13.06 2.18 18.17 5.88a5 5 0 0 1 7.76 3.27 3 3 0 0 1 1.47 1.05 5 5 0 0 1 3.4 6.22 4 4 0 0 1 1.87 5.18 4.98 4.98 0 0 1-1.7 8c.02.46.03.93.03 1.4v1h-62v-1zm.83-7.17a30.9 30.9 0 0 0-.62 3.57 3 3 0 0 1-.61-4.2c.37.28.78.49 1.23.63zm1.49-4.61c-.36.87-.68 1.76-.96 2.68a2 2 0 0 1-.21-3.71c.33.4.73.75 1.17 1.03zm2.32-4.54c-.54.86-1.03 1.76-1.49 2.68a3 3 0 0 1-.07-4.67 3 3 0 0 0 1.56 1.99zm1.14-1.7c.35-.5.72-.98 1.1-1.46a1 1 0 1 0-1.1 1.45zm5.34-5.77c-1.03.86-2 1.79-2.9 2.77a3 3 0 0 0-1.11-.77 3 3 0 0 1 4-2zm42.66 2.77c-.9-.98-1.87-1.9-2.9-2.77a3 3 0 0 1 4.01 2 3 3 0 0 0-1.1.77zm1.34 1.54c.38.48.75.96 1.1 1.45a1 1 0 1 0-1.1-1.45zm3.73 5.84c-.46-.92-.95-1.82-1.5-2.68a3 3 0 0 0 1.57-1.99 3 3 0 0 1-.07 4.67zm1.8 4.53c-.29-.9-.6-1.8-.97-2.67.44-.28.84-.63 1.17-1.03a2 2 0 0 1-.2 3.7zm1.14 5.51c-.14-1.21-.35-2.4-.62-3.57.45-.14.86-.35 1.23-.63a2.99 2.99 0 0 1-.6 4.2zM275 214a29 29 0 0 0-57.97 0h57.96zM72.33 198.12c-.21-.32-.34-.7-.34-1.12v-12h-2v12a4.01 4.01 0 0 0 7.09 2.54c.57-.69.91-1.57.91-2.54v-12h-2v12a1.99 1.99 0 0 1-2 2 2 2 0 0 1-1.66-.88zM75 176c.38 0 .74-.04 1.1-.12a4 4 0 0 0 6.19 2.4A13.94 13.94 0 0 1 84 185v24a6 6 0 0 1-6 6h-3v9a5 5 0 1 1-10 0v-9h-3a6 6 0 0 1-6-6v-24a14 14 0 0 1 14-14 5 5 0 0 0 5 5zm-17 15v12a1.99 1.99 0 0 0 1.22 1.84 2 2 0 0 0 2.44-.72c.21-.32.34-.7.34-1.12v-12h2v12a3.98 3.98 0 0 1-5.35 3.77 3.98 3.98 0 0 1-.65-.3V209a4 4 0 0 0 4 4h16a4 4 0 0 0 4-4v-24c.01-1.53-.23-2.88-.72-4.17-.43.1-.87.16-1.28.17a6 6 0 0 1-5.2-3 7 7 0 0 1-6.47-4.88A12 12 0 0 0 58 185v6zm9 24v9a3 3 0 1 0 6 0v-9h-6z'/%3E%3Cpath d='M-17 191a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm19 9a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2H3a1 1 0 0 1-1-1zm-14 5a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm-25 1a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm5 4a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm9 0a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm15 1a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm12-2a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2H4zm-11-14a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-19 0a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2h-2zm6 5a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2h-2a1 1 0 0 1-1-1zm-25 15c0-.47.01-.94.03-1.4a5 5 0 0 1-1.7-8 3.99 3.99 0 0 1 1.88-5.18 5 5 0 0 1 3.4-6.22 3 3 0 0 1 1.46-1.05 5 5 0 0 1 7.76-3.27A30.86 30.86 0 0 1-14 184c6.79 0 13.06 2.18 18.17 5.88a5 5 0 0 1 7.76 3.27 3 3 0 0 1 1.47 1.05 5 5 0 0 1 3.4 6.22 4 4 0 0 1 1.87 5.18 4.98 4.98 0 0 1-1.7 8c.02.46.03.93.03 1.4v1h-62v-1zm.83-7.17a30.9 30.9 0 0 0-.62 3.57 3 3 0 0 1-.61-4.2c.37.28.78.49 1.23.63zm1.49-4.61c-.36.87-.68 1.76-.96 2.68a2 2 0 0 1-.21-3.71c.33.4.73.75 1.17 1.03zm2.32-4.54c-.54.86-1.03 1.76-1.49 2.68a3 3 0 0 1-.07-4.67 3 3 0 0 0 1.56 1.99zm1.14-1.7c.35-.5.72-.98 1.1-1.46a1 1 0 1 0-1.1 1.45zm5.34-5.77c-1.03.86-2 1.79-2.9 2.77a3 3 0 0 0-1.11-.77 3 3 0 0 1 4-2zm42.66 2.77c-.9-.98-1.87-1.9-2.9-2.77a3 3 0 0 1 4.01 2 3 3 0 0 0-1.1.77zm1.34 1.54c.38.48.75.96 1.1 1.45a1 1 0 1 0-1.1-1.45zm3.73 5.84c-.46-.92-.95-1.82-1.5-2.68a3 3 0 0 0 1.57-1.99 3 3 0 0 1-.07 4.67zm1.8 4.53c-.29-.9-.6-1.8-.97-2.67.44-.28.84-.63 1.17-1.03a2 2 0 0 1-.2 3.7zm1.14 5.51c-.14-1.21-.35-2.4-.62-3.57.45-.14.86-.35 1.23-.63a2.99 2.99 0 0 1-.6 4.2zM15 214a29 29 0 0 0-57.97 0h57.96z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	animation: scroll_bg 30s linear infinite;
}

/* Header container */
.header {
	margin-bottom: 1.5rem;
}

.user-avatar {
	border-radius: 50%;
	max-width: 70px;
	max-height: 70px;
}

/* Others */
.container-disabled {
	pointer-events: none;
	opacity: .5;
}

.container-disabled-simple {
	pointer-events: none;
}

/* Tables */
.table-image-wrapper {
	border-radius: 50%;
	width: 2.5rem;
	height: 2.5rem;
	max-width: 2.5rem;
	max-height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--primary-100);
}

.table-custom-container {
	border-radius: .5rem;
	border: 1px solid var(--gray-100);
}

.table-custom {
	margin-bottom: 0;
	background: var(--white);
}

.table-custom thead th {
	border-top: 0;
	border-bottom: 0;
	color: var(--gray);
}

.table-custom th {
    padding: 0.8rem 1rem;
	font-size: .9rem;
}

[data-theme-style="dark"] .table-custom thead th {
	color: var(--gray-800)
}

.table-custom td {
	padding: 1rem 1rem;
	vertical-align: middle;
}

.table-custom tbody tr td {
	border-color: var(--gray-100);
}

.table-custom tbody tr {
	transition: all .3s ease-in-out;
}

.table-custom tbody tr:hover td {
}

/* Order */
.order-item-image-wrapper {
	position: relative;
	min-width: 5rem;
	min-height: 5rem;
	max-width: 5rem;
	max-height: 5rem;
	background: var(--primary-100);
	border-radius: var(--border-radius);
	overflow: hidden;
}

.order-item-image-background {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Custom Radio Boxes */
.custom-radio-box {
	cursor: pointer;
}

.custom-radio-box .custom-radio-box-main-text {
	font-size: 1.15rem;
	font-weight: bold;
}

.custom-radio-box .custom-radio-box-main-icon {
	font-size: 1.25rem;
}

.custom-radio-box input[type="radio"] + div {
	transition: all .3s ease-in-out;
	border: 2px solid var(--gray-200);
	background: var(--white);
}

.custom-radio-box input[type="radio"]:checked + div {
	border: 2px solid var(--primary);
}

.custom-radio-box input[type="radio"]:hover + div {
	border: 2px solid var(--primary);
}

/* Pricing cards */
.pricing-card {
	border-top: 3px solid var(--primary);
}

/* Round circles */
.round-circle-md {
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
}

.round-circle-lg {
	width: 4.5rem;
	height: 4.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
}

/* Badge colors */
.badge {
	padding: 0.45em 0.9em;
}

.badge-primary {
	color: var(--primary-700);
	background: var(--primary-100);
}

[data-theme-style="dark"] .badge-primary {
	background: var(--primary-800);
	color: var(--primary-100);
}

.badge-secondary {
	color: hsl(208, 7%, 35%);
	background-color: hsl(208, 7%, 85%);
}

[data-theme-style="dark"] .badge-secondary {
	background-color: hsl(208, 7%, 35%);
	color: hsl(208, 7%, 85%);
}

.badge-success {
	color: hsla(134, 50%, 30%, 1);
	background-color: hsla(134, 50%, 85%, 1);
}

[data-theme-style="dark"] .badge-success {
	background-color: hsla(134, 50%, 30%, 1);
	color: hsla(134, 50%, 85%, 1);
}

.badge-danger {
	color: hsla(354, 70%, 35%, 1);
	background-color: hsla(354, 70%, 85%, 1);
}

[data-theme-style="dark"] .badge-danger {
	background-color: hsla(354, 70%, 35%, 1);
	color: hsla(354, 70%, 85%, 1);
}

.badge-warning {
	background-color: hsla(45, 100%, 85%, 1);;
	color: hsla(40, 80%, 30%, 1);
}

[data-theme-style="dark"] .badge-warning {
	background-color: hsla(50, 20%, 20%, 1);
	color: hsla(45, 100%, 85%, 1);
}

.badge-info {
	color: hsla(188, 60%, 30%, 1);
	background-color: hsla(188, 78%, 85%, 1);
}

[data-theme-style="dark"] .badge-info {
	background-color: hsla(188, 60%, 30%, 1);
	color: hsla(188, 78%, 85%, 1);
}

.badge-light {
	color: hsla(210, 15%, 35%, 1);
	background-color: hsl(210, 17%, 95%);
}

[data-theme-style="dark"] .badge-light {
	background-color: hsla(210, 15%, 20%, 1);
	color: hsl(210, 17%, 95%);
}

.badge-dark {
	color: hsla(210, 10%, 90%, 1);
	background-color: hsla(210, 10%, 20%, 1);
}

[data-theme-style="dark"] .badge-dark {
	background-color: hsla(210, 10%, 90%, 1);
	color: hsla(210, 10%, 20%, 1);
}

/* Invoice css */
.invoice-table th {
	border-top: 0 !important;
}

.invoice-table td {
	vertical-align: baseline !important;
}

@media print {
	.invoice-logo {
		filter: grayscale(100%);
	}
}

/* Base animation */
.altum-animate {
	-webkit-animation-duration:500ms;
	animation-duration:500ms;
}

.altum-animate-fill-both {
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}

.altum-animate-fill-none {
	-webkit-animation-fill-mode:none;
	animation-fill-mode:none;
}

@keyframes fadeIn{
	0% {
		opacity:0
	}
	to {
		opacity:1
	}
}
.altum-animate-fade-in {
	-webkit-animation-name:fadeIn;
	animation-name:fadeIn
}


/* Custom button */

.btn-custom {
	padding: .5rem 1.5rem;
	color: var(--gray-600);
	border-radius: var(--border-radius);
	border: 1px solid var(--gray-200);
	font-size: .9rem;
	background: var(--white);

}

.btn-custom:hover {
	color: var(--gray-700);
	border: 1px solid var(--gray-700);
}

.btn-custom.active {
	color: var(--primary);
	border: 1px solid var(--primary);
}

/* Blog */
.blog-post-image {
	max-height: 20rem;
	object-fit: cover;
}

.blog-post-image-small {
	height: 13rem;
	max-height: 13rem;
	object-fit: cover;
}

.blog-post-content {
	line-height: 1.75;
	word-break: break-word;
}

.blog-post-content p {
	margin-bottom: 1.5rem;
}

/* File input */
.altum-file-input {
	padding: 1rem;
	background: var(--gray-100);
	border: 1px solid var(--gray-200);
	border-radius: var(--border-radius);
	cursor: pointer;
	font-size: .9rem;
}

.altum-file-input:hover {
	border-color: var(--gray-300);
}

.altum-file-input::file-selector-button {
	border: 0;
	padding: .4rem .75rem;
	border-radius: var(--border-radius);
	background-color: var(--white);
	cursor: pointer;
	font-size: .9rem;
	margin-right: 1rem;
}

/* File input preview */
.altum-file-input-preview {
	max-width: 100%;
	max-height: 68px;
	min-height: 68px;
	object-fit: cover;
}


.sticky {
	position: sticky !important;
	top: 1rem;
	height: min-content;
}

/* Icons on links animations */
a svg {
	transition: transform .15s;
}

a:hover svg {
	transform: scale(1.1);
}

a:active svg {
	transform: scale(.9);
}

/* Helper zoom class for icons */
.icon-zoom-animation svg {
	transition: transform .15s;
}

.icon-zoom-animation:hover svg {
	transform: scale(1.1);
}

/* Self zoom */
.zoom-animation {
	transition: transform .15s;
}

.zoom-animation:hover {
	transform: scale(1.05);
}

.zoom-animation:active {
	transform: scale(.95);
}

.zoom-animation-subtle {
	transition: transform .3s;
}

.zoom-animation-subtle:hover {
	transform: scale(1.025);
}

.zoom-animation-subtle:active {
	transform: scale(.98);
}

.up-animation {
	transition: transform .3s;
}

.up-animation:hover {
	transform: translateY(-10px);
}

/* Color picker */
@media print {
	.pcr-app {
		display: none;
	}
}

.pcr-button {
	border: 1px solid white !important;
	outline: 1px solid var(--gray-300) !important;
	height: calc(var(--input-padding-y) + var(--input-padding-x) + var(--input-font-size) + calc(var(--input-font-size) / 2.75)) !important;
	border-radius: var(--border-radius) !important;
	width: 100% !important;
}

.pcr-button::before, .pcr-button::after {
	border-radius: var(--border-radius) !important;
}

/* Width fit content */
.w-fit-content {
	width: fit-content !important;
}

/* Ajax loading overlay */
.loading-overlay {
	padding: 1.25rem;
	border-radius: var(--border-radius);
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	width: 100%;
	height: 100%;
	background: var(--white);
	z-index: 100;
	opacity: 0.8;
}

[data-theme-style="dark"] .loading-overlay {
	background: var(--gray-50);
}

/* Shiki code highlighter */
.shiki {
	overflow: auto;
	border-radius: var(--border-radius);
	padding: 1.5rem;
	font-size: .9rem;
	line-height: 1.5rem;
}

.shiki code {
	background: initial !important;
}

/* Btn group */
.btn-group-custom {
	border: 1px solid var(--gray-100);
	padding: 0.5rem 0;
	border-radius: var(--border-radius);
}

.btn-group-custom .btn {
	margin: 0 .5rem;
	border-radius: var(--border-radius) !important;
	background: var(--gray-100);
}

.btn-group-custom .btn.active {
	background: var(--dark);
	color: var(--white);
}

/* Custom scrollbar */
body * {
    scrollbar-color: var(--gray-200) var(--white) !important;
    scrollbar-width: thin !important;
}

body *::-webkit-scrollbar-thumb  {
    background: var(--gray-200);
    border-radius: 10px;
    width: 6px;
    height: 6px;
}

body *::-webkit-scrollbar, body *::-webkit-scrollbar-track {
    background: var(--white);
    border-radius: 10px;
    width: 6px;
    height: 6px;
}

/* Notification bell */
.internal-notification-icon {
	animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
	0% {
		box-shadow: 0 0 0 0px var(--danger);
	}
	100% {
		box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
	}
}

/* Teams */
.team-delegate-access-wrapper {
	margin: .75rem;
	border-radius: .5rem;
}

@media (min-width: 992px) {
	.team-delegate-access-wrapper {
		border-radius: 5rem;
	}
}

/* Announcements */
.announcement-wrapper {
	margin: .75rem;
	border-radius: .5rem;
	opacity: 0;
	transition: opacity .3s ease-in;
	animation: ac-fade-in-down .3s ease-in .6s forwards;
}

@media (min-width: 992px) {
	.announcement-wrapper {
		border-radius: 5rem;
	}
}

@keyframes ac-fade-in-down {
	from {
		opacity: 0;
		transform: translate3d(0, -100%, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

/* PWA */
.pwa-wrapper {
	position: fixed;
	bottom: 0;
	width: calc(100% - 1.5rem);
	z-index: 1000;
	background: hsla(0, 0%, 90%, 50%);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

[data-theme-style="dark"] .pwa-wrapper {
	background: hsla(0, 0%, 22%, 50%);
}



.rounded-2x {
	border-radius: calc(2*var(--border-radius));
}

.rounded-3x {
	border-radius: calc(3*var(--border-radius));
}

/* Prevent fontawesome layout shifts */
i.fa-fw {
	width: 1.25em;
	display: inline-block;
}

i.fa-xs {
	font-size: .85em;
}

i.fa-sm {
	font-size: .875em;
}

i.fa-lg {
	font-size: 1.25em;
}

i.xl {
	font-size: 1.5em;
}

/* Ratings */
.rating-star {
	cursor: pointer;
}

.rating-star svg {
	color: #ffc107;
	transition: color .15s;
}

.rating-star:hover svg,
.rating-star:hover ~ .rating-star svg
{
	color: #ff8800 !important;
}

.rating-star-chosen svg,
.rating-star-chosen ~ .rating-star svg
{
	color: #dd6200;
}


/* ═══════════════════════════════════════════════════════════════════
   MAGIC PATTERNS DESIGN SYSTEM
   Primary : #3b5998  ·  Accent : #F59E0B (ember orange)
   Light bg : #eef1f8  ·  Dark bg : #131a2e
   Fonts    : Inter  ·  Inter
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   1. TYPOGRAPHY — Inter + Inter
   ───────────────────────────────────────────────────────────────── */
body, .container, .card, .navbar, input, select, textarea, button,
.modal, .dropdown-menu, .alert, .badge, .breadcrumb {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont,
	             'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* Monospaced numbers — prices, order IDs */
.price, [data-price], .order-number, .badge-price,
td.price, .invoice-table td:last-child {
	font-family: 'Inter', 'Fira Code', ui-monospace,
	             'Cascadia Code', 'Courier New', monospace !important;
	font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────────
   2. PAGE BACKGROUND — clean lavender canvas (no watermark)
   ───────────────────────────────────────────────────────────────── */
body {
	background-color: #F0F2F9 !important;
	background-image: none !important;
}

[data-theme-style="dark"] body,
body.cc--darkmode {
	background-color: #131a2e !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%233b5998' fill-opacity='0.045'%3E%3Cpath d='M18 10h2v7h2v-7h2v7h2V8c0-3-2-5-4-5s-4 2-4 5v9h2v-7zm-2 9v10h10V19H16zM58 8c-3 0-5 2-5 5v7h2v-5h6v5h2v-7c0-3-2-5-5-5zm3 9h-6v-2c0-2 1-3 3-3s3 1 3 3v2zM98 10h2v7h2v-7h2v7h2V8c0-3-2-5-4-5s-4 2-4 5v9h2v-7zm-2 9v10h10V19H96zM18 70h2v7h2v-7h2v7h2v-9c0-3-2-5-4-5s-4 2-4 5v9h2v-7zm-2 9v10h10V79H16zM58 68c-3 0-5 2-5 5v7h2v-5h6v5h2v-7c0-3-2-5-5-5zm3 9h-6v-2c0-2 1-3 3-3s3 1 3 3v2z'/%3E%3C/g%3E%3C/svg%3E") !important;
	color: #dde4f0 !important;
}

/* ─────────────────────────────────────────────────────────────────
   3. CARD SYSTEM — white on slate-blue canvas
   ───────────────────────────────────────────────────────────────── */
.card {
	border: none !important;
	border-radius: 16px !important;
	box-shadow: 0 1px 4px rgba(59,89,152,.08), 0 1px 2px rgba(0,0,0,.03) !important;
	background: #ffffff !important;
	transition: transform .22s cubic-bezier(.34,1.2,.64,1),
	            box-shadow .22s ease;
}

.card:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 20px rgba(59,89,152,.12), 0 2px 6px rgba(0,0,0,.05) !important;
}

.card-body {
	padding: 1.4rem !important;
}

.card-footer {
	border-top: 1px solid #e8edf8 !important;
	border-radius: 0 0 16px 16px !important;
	background: #f7f8fd !important;
}

.card-header {
	border-bottom: 1px solid #e8edf8 !important;
	border-radius: 16px 16px 0 0 !important;
	background: #f7f8fd !important;
	font-weight: 700;
}

/* Dark-mode cards — deep navy surface on near-black */
[data-theme-style="dark"] .card,
.cc--darkmode .card {
	background: #1c2640 !important;
	box-shadow: 0 2px 8px rgba(0,0,0,.22), 0 1px 3px rgba(0,0,0,.12) !important;
}

[data-theme-style="dark"] .card:hover,
.cc--darkmode .card:hover {
	box-shadow: 0 4px 14px rgba(0,0,0,.28), 0 2px 5px rgba(0,0,0,.14) !important;
}

[data-theme-style="dark"] .card-footer,
.cc--darkmode .card-footer {
	border-top-color: #243050 !important;
	background: #16203a !important;
}

[data-theme-style="dark"] .card-header,
.cc--darkmode .card-header {
	border-bottom-color: #243050 !important;
	background: #16203a !important;
}

/* ── Card-grid gutter: 12 px between every card, sitewide ──────────
   Scoped via :has() so form rows / layout rows are NOT affected.
   Bootstrap default: row margin ±15 px, col padding 15 px each side.
   We reduce col padding to 8 px each side (16 px gap) with 16px vertical spacing. */
.row:has(> [class*="col-"] > .card) {
	margin-right: -8px !important;
	margin-left:  -8px !important;
}
.row:has(> [class*="col-"] > .card) > [class*="col-"] {
	padding-right: 8px !important;
	padding-left:  8px !important;
	margin-bottom: 16px !important;
}

/* ─────────────────────────────────────────────────────────────────
   4. NAVBAR — clean white bar, deep navy in dark mode
   ───────────────────────────────────────────────────────────────── */
.app-navbar {
	background: #ffffff !important;
	border-bottom: none !important;
	box-shadow: 0 1px 0 #dde2f0, 0 1px 4px rgba(0,0,0,.03) !important;
	padding-left: 1rem;
	padding-right: 1rem;
}

[data-theme-style="dark"] .app-navbar,
.cc--darkmode .app-navbar {
	background: #182035 !important;
	box-shadow: 0 1px 0 #243050, 0 1px 6px rgba(0,0,0,.12) !important;
}

/* Sub-navbar */
.app-sub-navbar {
	background: #ffffff !important;
	border-bottom: none !important;
	box-shadow: 0 1px 0 #dde2f0 !important;
	margin-bottom: 2.5rem;
}

[data-theme-style="dark"] .app-sub-navbar,
.cc--darkmode .app-sub-navbar {
	background: #182035 !important;
	box-shadow: 0 1px 0 #243050 !important;
}

.app-sub-navbar .nav-link {
	font-weight: 600;
	font-size: .88rem;
}

.app-sub-navbar .nav-link.active {
	color: #3b5998 !important;
	font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────────
   5. BUTTONS — cobalt pill with glow
   ───────────────────────────────────────────────────────────────── */
.btn {
	border-radius: 12px !important;
	font-weight: 600;
	letter-spacing: .01em;
	transition: transform .15s cubic-bezier(.34,1.3,.64,1),
	            box-shadow .15s ease,
	            background-color .12s ease !important;
}

.btn-primary {
	border-radius: 100px !important;
	padding: .475rem 1.5rem;
	box-shadow: 0 1px 5px rgba(59,89,152,.18);
}

.btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 3px 10px rgba(59,89,152,.24) !important;
}

.btn-primary:active {
	transform: translateY(0) scale(.97);
	box-shadow: 0 1px 4px rgba(59,89,152,.20) !important;
}

.btn-outline-primary {
	border-radius: 100px !important;
	font-weight: 600;
}

.btn-outline-primary:hover {
	box-shadow: 0 3px 12px rgba(59,89,152,.30);
	transform: translateY(-1px);
}

/* Success — forest green */
.btn-success {
	background-color: #16a34a !important;
	border-color: #16a34a !important;
	border-radius: 100px !important;
	box-shadow: 0 1px 5px rgba(22,163,74,.16);
}

.btn-success:hover {
	background-color: #15803d !important;
	border-color: #15803d !important;
	transform: translateY(-2px);
	box-shadow: 0 3px 10px rgba(22,163,74,.22) !important;
}

.btn-success:active { transform: translateY(0) scale(.97); }

/* Outline secondary — slate-muted pill */
.btn-outline-secondary {
	border-radius: 100px !important;
	border-color: #d1d5e8 !important;
	color: #475569 !important;
	font-weight: 500;
}

.btn-outline-secondary:hover {
	background: #eef1f8 !important;
	border-color: #94A3B8 !important;
	color: #334155 !important;
	transform: translateY(-1px);
}

.btn-danger, .btn-outline-danger { border-radius: 100px !important; }
.btn-sm { border-radius: 8px !important; padding: .28rem 1rem; }

/* ─────────────────────────────────────────────────────────────────
   6. BADGE SYSTEM — cobalt-tinted pill chips
   ───────────────────────────────────────────────────────────────── */
.badge {
	padding: .38em 1em !important;
	border-radius: 100px !important;
	font-weight: 700;
	font-size: .72rem;
	letter-spacing: .025em;
}

.badge-primary {
	color: #1b3470 !important;
	background: #e8edf8 !important;
}

[data-theme-style="dark"] .badge-primary,
.cc--darkmode .badge-primary {
	background: rgba(59,89,152,.22) !important;
	color: #a8bae3 !important;
}

/* ─────────────────────────────────────────────────────────────────
   7. FORM CONTROLS — rounded soft fill, cobalt focus ring
   ───────────────────────────────────────────────────────────────── */
.form-control, .custom-select {
	border-radius: 12px !important;
	border: 1.5px solid #dde2f0 !important;
	background-color: #F8F9FC !important;
	color: #334155;
	padding: .5rem 1rem;
	font-size: .9rem;
	transition: border-color .15s, box-shadow .15s, background-color .15s;
}

.form-control:focus, .custom-select:focus {
	background-color: #ffffff !important;
	border-color: #3b5998 !important;
	box-shadow: 0 0 0 3px rgba(59,89,152,.16) !important;
}

.form-control::placeholder { color: #a0abc8; }

[data-theme-style="dark"] .form-control,
[data-theme-style="dark"] .custom-select,
.cc--darkmode .form-control,
.cc--darkmode .custom-select {
	background-color: #0e1a2e !important;
	border-color: #1a2a42 !important;
	color: #dde4f0 !important;
}

[data-theme-style="dark"] .form-control:focus,
[data-theme-style="dark"] .custom-select:focus,
.cc--darkmode .form-control:focus,
.cc--darkmode .custom-select:focus {
	background-color: #0f1f36 !important;
	border-color: #3b5998 !important;
}

.input-group-text {
	border-radius: 12px !important;
	background: #e8edf8 !important;
	border: 1.5px solid #dde2f0 !important;
	color: #6b7bb0 !important;
}

[data-theme-style="dark"] .input-group-text,
.cc--darkmode .input-group-text {
	background: #0e1a2e !important;
	border-color: #1a2a42 !important;
	color: #6b8aaa !important;
}

/* ─────────────────────────────────────────────────────────────────
   8. DROPDOWN MENUS — floating elevated cards
   ───────────────────────────────────────────────────────────────── */
.dropdown-menu {
	border: none !important;
	border-radius: 18px !important;
	box-shadow: 0 20px 60px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06) !important;
	padding: .6rem !important;
	background: #ffffff !important;
	min-width: 14rem;
}

.dropdown-item {
	border-radius: 11px !important;
	padding: .6rem 1rem;
	font-size: .88rem;
	font-weight: 500;
	color: #374151 !important;
	transition: background .1s, color .1s;
}

.dropdown-item:hover, .dropdown-item:focus {
	background: #eef1f8 !important;
	color: #3b5998 !important;
}

.dropdown-item.active, .dropdown-item:active {
	background: #3b5998 !important;
	color: #fff !important;
}

.dropdown-divider {
	border-color: #e8edf8 !important;
	margin: .4rem .5rem;
}

[data-theme-style="dark"] .dropdown-menu,
.cc--darkmode .dropdown-menu {
	background: #1c2640 !important;
	box-shadow: 0 24px 64px rgba(0,0,0,.52), 0 8px 16px rgba(0,0,0,.36) !important;
}

[data-theme-style="dark"] .dropdown-item,
.cc--darkmode .dropdown-item {
	color: #c0ccdf !important;
}

[data-theme-style="dark"] .dropdown-item:hover,
[data-theme-style="dark"] .dropdown-item:focus,
.cc--darkmode .dropdown-item:hover,
.cc--darkmode .dropdown-item:focus {
	background: rgba(59,89,152,.14) !important;
	color: #a8bae3 !important;
}

[data-theme-style="dark"] .dropdown-divider,
.cc--darkmode .dropdown-divider {
	border-color: #243050 !important;
}

/* ─────────────────────────────────────────────────────────────────
   9. MODAL — rounded elevated overlay, cobalt header gradient
   ───────────────────────────────────────────────────────────────── */
.modal-content {
	border-radius: 24px !important;
	border: none !important;
	box-shadow: 0 32px 80px rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.10) !important;
	overflow: hidden;
}

.modal-header {
	background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%) !important;
	border-radius: 24px 24px 0 0 !important;
	border-bottom: none !important;
	padding: 1.2rem 1.5rem !important;
}

.modal-header .modal-title {
	color: #fff !important;
	font-weight: 700;
}

.modal-header .close {
	color: rgba(255,255,255,.85) !important;
	text-shadow: none;
	opacity: 1;
}

.modal-header .close:hover { color: #fff !important; }

.modal-footer {
	border-top: 1px solid #e8edf8 !important;
	padding: 1rem 1.5rem;
}

[data-theme-style="dark"] .modal-content,
.cc--darkmode .modal-content {
	background: #1c2640 !important;
}

[data-theme-style="dark"] .modal-footer,
.cc--darkmode .modal-footer {
	border-top-color: #243050 !important;
}

/* ─────────────────────────────────────────────────────────────────
   10. TABLE — elevated container, clean header
   ───────────────────────────────────────────────────────────────── */
.table-custom-container {
	border-radius: 20px !important;
	border: none !important;
	box-shadow: 0 2px 8px rgba(59,89,152,.10), 0 1px 3px rgba(0,0,0,.04) !important;
	overflow: hidden;
}

.table-custom {
	background: #ffffff !important;
	margin-bottom: 0 !important;
}

.table-custom thead th {
	background: #f0f2fa !important;
	font-weight: 700 !important;
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: #7b8ab8 !important;
	padding: .9rem 1rem !important;
}

.table-custom tbody tr:hover td {
	background: #eef1f8 !important;
}

[data-theme-style="dark"] .table-custom-container,
.cc--darkmode .table-custom-container {
	box-shadow: 0 4px 20px rgba(0,0,0,.42), 0 1px 4px rgba(0,0,0,.28) !important;
}

[data-theme-style="dark"] .table-custom,
.cc--darkmode .table-custom {
	background: #1c2640 !important;
}

[data-theme-style="dark"] .table-custom thead th,
.cc--darkmode .table-custom thead th {
	background: #16203a !important;
	color: #3a4f78 !important;
}

[data-theme-style="dark"] .table-custom tbody tr:hover td,
.cc--darkmode .table-custom tbody tr:hover td {
	background: rgba(59,89,152,.10) !important;
}

[data-theme-style="dark"] .table-custom tbody tr td,
.cc--darkmode .table-custom tbody tr td {
	border-color: #243050 !important;
}

/* ─────────────────────────────────────────────────────────────────
   11. ALERTS — rounded, border-free, tinted backgrounds
   ───────────────────────────────────────────────────────────────── */
.alert {
	border-radius: 14px !important;
	border: none !important;
	font-weight: 500;
}

.alert-primary  { background: #e8edf8 !important; color: #1b3470 !important; }
.alert-success  { background: #dcfce7 !important; color: #14532d !important; }
.alert-danger   { background: #fef2f2 !important; color: #991b1b !important; }
.alert-warning  { background: #fffbeb !important; color: #78350f !important; }
.alert-info     { background: #eff6ff !important; color: #1e40af !important; }

/* ─────────────────────────────────────────────────────────────────
   12. PAGINATION — cobalt-tinted pill links
   ───────────────────────────────────────────────────────────────── */
.pagination { gap: 3px; }

.page-link {
	border-radius: 10px !important;
	border: none !important;
	margin: 0 2px;
	font-weight: 600;
	font-size: .88rem;
	color: #475569 !important;
	background: transparent !important;
	padding: .4rem .8rem;
	transition: background .15s, color .15s;
}

.page-link:hover {
	background: #e8edf8 !important;
	color: #3b5998 !important;
}

.page-item.active .page-link {
	background: #3b5998 !important;
	color: #fff !important;
	box-shadow: 0 2px 8px rgba(59,89,152,.40);
}

.page-item.disabled .page-link { opacity: .4; }

/* ─────────────────────────────────────────────────────────────────
   13. LIST GROUP — card-like rows with radius
   ───────────────────────────────────────────────────────────────── */
.list-group { gap: 4px; }

.list-group-item {
	border-color: #e8edf8 !important;
	border-radius: 12px !important;
	margin-bottom: 4px !important;
	font-weight: 500;
}

[data-theme-style="dark"] .list-group-item,
.cc--darkmode .list-group-item {
	background: #1c2640 !important;
	border-color: #243050 !important;
	color: #c0ccdf !important;
}

/* ─────────────────────────────────────────────────────────────────
   14. FOOTER — slate-tinted, darker in both modes
   ───────────────────────────────────────────────────────────────── */
.footer {
	background: #dee1ef !important;
	border-top: 1px solid #d0d5e8;
}

[data-theme-style="dark"] .footer,
.cc--darkmode .footer {
	background: #060b14 !important;
	border-top-color: #111e30;
}

/* ─────────────────────────────────────────────────────────────────
   15. BREADCRUMBS
   ───────────────────────────────────────────────────────────────── */
.custom-breadcrumbs > li > a {
	color: #6b7bb0;
	font-weight: 500;
}

.custom-breadcrumbs > li > a:hover { color: #3b5998; }

/* ─────────────────────────────────────────────────────────────────
   16. PROGRESS BARS — cobalt gradient pill
   ───────────────────────────────────────────────────────────────── */
.progress {
	border-radius: 100px !important;
	background: #dde2f0 !important;
	height: 7px;
	overflow: visible;
}

.progress-bar {
	border-radius: 100px !important;
	background: linear-gradient(90deg, #3b5998, #5578c5) !important;
	box-shadow: 0 0 8px rgba(59,89,152,.42);
}

[data-theme-style="dark"] .progress,
.cc--darkmode .progress {
	background: #0e1a2e !important;
}

/* ─────────────────────────────────────────────────────────────────
   17. INDEX HERO — cobalt-to-periwinkle gradient headline
   ───────────────────────────────────────────────────────────────── */
.index-header {
	font-weight: 800 !important;
	letter-spacing: -.035em !important;
	background: linear-gradient(135deg, #3b5998 0%, #5578c5 50%, #a8bae3 100%);
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
}

.index-button {
	border-radius: 100px !important;
	padding: .65rem 2.5rem !important;
	font-weight: 700;
	font-size: 1rem;
}

.login-background {
	background-color: #dfe2f0 !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%233b5998' fill-opacity='0.07'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
	animation: none !important;
}

[data-theme-style="dark"].login-background {
	background-color: #060b14 !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%233b5998' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
}

/* ─────────────────────────────────────────────────────────────────
   18. ORDER & TABLE IMAGE WRAPPERS
   ───────────────────────────────────────────────────────────────── */
.order-item-image-wrapper {
	border-radius: 14px !important;
	background: #e8edf8 !important;
}

.table-image-wrapper {
	background: #e8edf8 !important;
}

[data-theme-style="dark"] .order-item-image-wrapper,
[data-theme-style="dark"] .table-image-wrapper,
.cc--darkmode .order-item-image-wrapper,
.cc--darkmode .table-image-wrapper {
	background: rgba(59,89,152,.14) !important;
}

/* ─────────────────────────────────────────────────────────────────
   19. HEADINGS — tighter tracking, bolder weights
   ───────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-weight: 700;
	letter-spacing: -.015em;
}

/* ─────────────────────────────────────────────────────────────────
   20. PRICING CARD — cobalt top accent
   ───────────────────────────────────────────────────────────────── */
.pricing-card {
	border-top: 3px solid #3b5998 !important;
	border-radius: 20px !important;
}

/* ─────────────────────────────────────────────────────────────────
   21. SCROLLBAR POLISH — cobalt-slate palette
   ───────────────────────────────────────────────────────────────── */
body * {
	scrollbar-color: #c5cde6 #eef1f8 !important;
}

body *::-webkit-scrollbar-thumb {
	background: #c5cde6 !important;
}

body *::-webkit-scrollbar,
body *::-webkit-scrollbar-track {
	background: #eef1f8 !important;
}

[data-theme-style="dark"] body *,
.cc--darkmode * {
	scrollbar-color: #2a3a5a #131a2e !important;
}

[data-theme-style="dark"] body *::-webkit-scrollbar-thumb,
.cc--darkmode *::-webkit-scrollbar-thumb {
	background: #2a3a5a !important;
}

[data-theme-style="dark"] body *::-webkit-scrollbar,
[data-theme-style="dark"] body *::-webkit-scrollbar-track,
.cc--darkmode *::-webkit-scrollbar,
.cc--darkmode *::-webkit-scrollbar-track {
	background: #090d18 !important;
}

/* ─────────────────────────────────────────────────────────────────
   22. DARK MODE — global surface & text overrides
   ───────────────────────────────────────────────────────────────── */
[data-theme-style="dark"],
.cc--darkmode {
	color-scheme: dark;
}

[data-theme-style="dark"] p,
[data-theme-style="dark"] span:not(.badge):not(.page-link),
[data-theme-style="dark"] label,
[data-theme-style="dark"] small,
.cc--darkmode p,
.cc--darkmode span:not(.badge):not(.page-link),
.cc--darkmode label,
.cc--darkmode small {
	color: #c0ccdf;
}

[data-theme-style="dark"] .text-muted,
.cc--darkmode .text-muted {
	color: #546a90 !important;
}

[data-theme-style="dark"] hr,
.cc--darkmode hr {
	border-color: #243050;
}

/* ─────────────────────────────────────────────────────────────────
   23. CHAT FLYOUT — dark amber branding
   ───────────────────────────────────────────────────────────────── */
#flyout_header {
	background: #d97706 !important;
}

.flyout-msg-row.me .flyout-bubble {
	background: #d97706 !important;
	box-shadow: 0 2px 10px rgba(217,119,6,.30) !important;
}

#flyout_send_btn {
	background: #d97706 !important;
	box-shadow: 0 3px 12px rgba(217,119,6,.42) !important;
}

#flyout_send_btn:hover {
	box-shadow: 0 5px 18px rgba(59,89,152,.58) !important;
}

.flyout-unread-badge { background: #3b5998 !important; }

#flyout_input:focus {
	border-color: #3b5998 !important;
	box-shadow: 0 0 0 3px rgba(59,89,152,.14) !important;
}

#chat_toast_bar {
	background: linear-gradient(90deg, #3b5998, #2d4a8a) !important;
}

.flyout-conv-name { color: #1b3470 !important; }

[data-theme-style="dark"] #chat_flyout,
.cc--darkmode #chat_flyout {
	background: #1c2640 !important;
}

[data-theme-style="dark"] .flyout-conv-item:hover,
.cc--darkmode .flyout-conv-item:hover {
	background: rgba(59,89,152,.10) !important;
}

[data-theme-style="dark"] .flyout-conv-name,
.cc--darkmode .flyout-conv-name {
	color: #a8bae3 !important;
}

[data-theme-style="dark"] .flyout-msg-row.them .flyout-bubble,
.cc--darkmode .flyout-msg-row.them .flyout-bubble {
	background: #0e1a2e !important;
	color: #c0ccdf !important;
	border-color: #1a2a42 !important;
}

/* ─────────────────────────────────────────────────────────────────
   24. MOBILE BOTTOM NAV — cobalt accent colours
   ───────────────────────────────────────────────────────────────── */
.mbn-tab.active .mbn-tab-icon,
.mbn-tab.active .mbn-tab-label {
	color: #3b5998 !important;
}

.mbn-active-pill {
	background: rgba(59,89,152,.14) !important;
}

[data-theme-style="dark"] .mbn-tab.active .mbn-tab-icon,
[data-theme-style="dark"] .mbn-tab.active .mbn-tab-label,
.cc--darkmode .mbn-tab.active .mbn-tab-icon,
.cc--darkmode .mbn-tab.active .mbn-tab-label {
	color: #5578c5 !important;
}

/* ─────────────────────────────────────────────────────────────────
   25. MICRO-DETAILS
   ───────────────────────────────────────────────────────────────── */

/* Smooth container transitions */
.container, main { animation: none; }

/* Custom radio boxes */
.custom-radio-box input[type="radio"] + div {
	border-radius: 16px !important;
	border-width: 2px;
	transition: border-color .15s, box-shadow .15s;
}

.custom-radio-box input[type="radio"]:checked + div {
	border-color: #3b5998 !important;
	box-shadow: 0 0 0 3px rgba(59,89,152,.14);
}

/* Toast announcements */
.announcement-wrapper { border-radius: 14px !important; }

/* PWA bar */
.pwa-wrapper {
	background: hsla(0, 0%, 96%, .85) !important;
	border-radius: 14px !important;
	margin: 0 .75rem .75rem !important;
	width: calc(100% - 1.5rem) !important;
}

[data-theme-style="dark"] .pwa-wrapper,
.cc--darkmode .pwa-wrapper {
	background: hsla(225, 30%, 12%, .92) !important;
}

/* Spotlight */
#spotlight-modal .modal-content {
	background: rgba(255,255,255,.95) !important;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

[data-theme-style="dark"] #spotlight-modal .modal-content,
.cc--darkmode #spotlight-modal .modal-content {
	background: rgba(15,22,40,.95) !important;
}

/* ─────────────────────────────────────────────────────────────────
   26. EMBER ACCENT COLOUR SYSTEM  (#F59E0B)
       Used for urgency, prices, highlights, CTAs, badges
   ───────────────────────────────────────────────────────────────── */

/* ── Accent utility classes ── */
.text-accent   { color: #F59E0B !important; }
.bg-accent     { background-color: #F59E0B !important; }
.bg-accent-100 { background-color: #fdeee9 !important; }
.border-accent { border-color: #F59E0B !important; }

/* ── btn-accent — ember call-to-action ── */
.btn-accent, .btn-accent.disabled, .btn-accent:disabled {
	background: linear-gradient(135deg, #F59E0B, #cc4a26) !important;
	border-color: transparent !important;
	color: #fff !important;
	border-radius: 100px !important;
	font-weight: 700;
	box-shadow: 0 3px 12px rgba(232,97,60,.35);
}
.btn-accent:hover, .btn-accent:focus {
	background: linear-gradient(135deg, #d4522e, #b83e1e) !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(232,97,60,.48) !important;
	color: #fff !important;
}
.btn-accent:active {
	transform: translateY(0) scale(.97);
	box-shadow: 0 2px 8px rgba(232,97,60,.25) !important;
}

/* ── Primary CTA button — indigo (matches Magic Patterns primary) ── */
.btn-primary {
	background: linear-gradient(135deg, #3b5998 0%, #2d4a8a 100%) !important;
	border-color: transparent !important;
}

/* ── Price displays — ember accent for monetary values ── */
.font-weight-bold[class*="price"],
.price, [data-price],
.invoice-table td:last-child,
.badge-price {
	color: #F59E0B !important;
}

/* ── Order total — warm cobalt-to-ember gradient background ── */
.d-flex.justify-content-between.bg-primary-100 {
	background: linear-gradient(135deg, #e8edf8 0%, #fdeee9 100%) !important;
	border-radius: 14px;
	border-left: 3px solid #F59E0B !important;
}
[data-theme-style="dark"] .d-flex.justify-content-between.bg-primary-100,
.cc--darkmode .d-flex.justify-content-between.bg-primary-100 {
	background: linear-gradient(135deg, rgba(59,89,152,.18) 0%, rgba(232,97,60,.12) 100%) !important;
}

/* ── Card accent — left ember stripe on hover for interactive cards ── */
.card {
	border-left: 3px solid transparent !important;
	transition: transform .22s cubic-bezier(.34,1.2,.64,1),
	            box-shadow .22s ease,
	            border-left-color .22s ease;
}
.card:hover {
	border-left-color: rgba(232,97,60,.28) !important;
	box-shadow: 0 12px 36px rgba(59,89,152,.14), 0 4px 8px rgba(0,0,0,.05) !important;
}

/* ── Order item image wrapper — ember tint ring ── */
.order-item-image-wrapper {
	box-shadow: inset 0 0 0 2px rgba(232,97,60,.10);
}

/* ── Chat composer — warm-tinted surface ── */
#merchant_chat_composer > div {
	background: linear-gradient(135deg, #ffffff 0%, #fdfbf8 100%) !important;
	border: 1.5px solid #dde2f0 !important;
}
[data-theme-style="dark"] #merchant_chat_composer > div,
.cc--darkmode #merchant_chat_composer > div {
	background: linear-gradient(135deg, #0f1628 0%, #180e08 100%) !important;
	border-color: #243050 !important;
}

/* ── Send button — cobalt base, ember on hover ── */
#merchant_chat_send {
	background: linear-gradient(135deg, #3b5998, #2d4a8a) !important;
	box-shadow: 0 3px 12px rgba(59,89,152,.35) !important;
	transition: all .2s cubic-bezier(.34,1.3,.64,1) !important;
}
#merchant_chat_send:hover {
	background: linear-gradient(135deg, #F59E0B, #cc4a26) !important;
	box-shadow: 0 5px 18px rgba(232,97,60,.45) !important;
	transform: scale(1.08) !important;
}

/* ── Index hero — cobalt to ember gradient headline ── */
.index-header {
	background: linear-gradient(135deg, #3b5998 0%, #5578c5 40%, #F59E0B 100%) !important;
}

/* ── Pricing card — ember top accent ── */
.pricing-card {
	border-top: 3px solid #F59E0B !important;
}

/* ── Sub-nav active — cobalt with ember dot ── */
.app-sub-navbar .nav-link.active {
	border-bottom: 2px solid #3b5998;
}

/* ── All notification badges — ember orange ── */
.mbn-badge,
#merchant_unread_badge,
#msg_btn_badge,
#nav_inbox_badge {
	background: #F59E0B !important;
}

/* ── mbn-badge ring animation ── */
@keyframes mbn-ring {
	0%,100% { box-shadow: 0 0 0 2px rgba(255,255,255,.96), 0 0 0 0   rgba(232,97,60,.5); }
	50%      { box-shadow: 0 0 0 2px rgba(255,255,255,.96), 0 0 0 5px rgba(232,97,60,.0); }
}

/* ── Table hover row — warm dual-tint ── */
.table-custom tbody tr:hover td {
	background: linear-gradient(90deg, #eef1f8, #fdf6f3) !important;
}

/* ── Stage tracker — ember glow on current stage ── */
.stage-node.current .stage-circle {
	box-shadow: 0 0 0 5px rgba(232,97,60,.15) !important;
}

/* ── Dashboard store cards — ember accent divider ── */
.table-image-wrapper {
	background: linear-gradient(135deg, #e8edf8, #fdeee9) !important;
}
[data-theme-style="dark"] .table-image-wrapper,
.cc--darkmode .table-image-wrapper {
	background: linear-gradient(135deg, rgba(59,89,152,.14), rgba(232,97,60,.10)) !important;
}

/* ── Alert-accent — ember info box ── */
.alert-accent {
	background: #fdeee9 !important;
	color: #a53b1d !important;
	border-left: 3px solid #F59E0B !important;
	border-radius: 14px !important;
}
[data-theme-style="dark"] .alert-accent,
.cc--darkmode .alert-accent {
	background: rgba(232,97,60,.12) !important;
	color: #f4a68c !important;
}

/* ── Progress bar accent — ember gradient for hot metric ── */
.progress-bar.bg-accent,
.progress-bar.progress-accent {
	background: linear-gradient(90deg, #F59E0B, #f4a68c) !important;
	box-shadow: 0 0 8px rgba(232,97,60,.40);
}

/* ── Footer — warm bottom line ── */
.footer {
	border-top: 2px solid transparent !important;
	border-image: linear-gradient(90deg, #3b5998, #F59E0B) 1 !important;
}

/* ── Custom scrollbar thumb — ember when active ── */
body *::-webkit-scrollbar-thumb:active {
	background: #F59E0B !important;
}

/* ─────────────────────────────────────────────────────────────────
   END OF MAGIC PATTERNS DESIGN SYSTEM
   ───────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════
   SIDEBAR LAYOUT — Magic Patterns fixed left nav
   Desktop ≥992px : sidebar shown, top navbar hidden, main offset
   Mobile  <992px : sidebar hidden, #mbn floating pill handles nav
   ════════════════════════════════════════════════════════════════ */

/* ── Desktop: show sidebar, hide top navbar, offset content ── */
@media (min-width: 992px) {
    .app-navbar                    { display: none !important; }
    #app_sidebar                   { display: flex !important; }

    /* Content areas that sit BESIDE the sidebar (margin-left shifts them right) */
    body.app main,
    body.app .app-sub-navbar,
    body.app .ads-header           { margin-left: 250px; }

    /* Remove top-navbar spacing since it's gone */
    body.app main                  { padding-top: 2rem; }

    /* Footer: stays FULL WIDTH (no margin-left) but content indented past sidebar */
    body.app footer.footer {
        margin-left: 0 !important;
        padding-left: 250px;
        width: 100%;
        box-sizing: border-box;
    }
}

/* ── Mobile: sidebar hidden, keep thin top bar + #mbn ── */
@media (max-width: 991.98px) {
    #app_sidebar { display: none !important; }
}

/* ── Sidebar shell ── */
#app_sidebar {
    display: none; /* overridden to flex on ≥992px */
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 250px;
    flex-direction: column;
    background: #ffffff;
    border-right: 1px solid var(--food-border);
    z-index: 1040;
    overflow-y: auto;
    overflow-x: hidden;
}

[data-theme-style="dark"] #app_sidebar,
.cc--darkmode #app_sidebar {
    background: #182035;
    border-right-color: #243050;
}

/* ── Logo area ── */
#app_sidebar_logo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 18px 18px;
    border-bottom: 1px solid var(--food-border);
    text-decoration: none !important;
    color: inherit;
    flex-shrink: 0;
}

.cc--darkmode #app_sidebar_logo { border-bottom-color: #243050; }

.app-sb-logo-icon {
    width: 40px; height: 40px;
    background: transparent;
    border: 1px solid #3b5998;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.app-sb-logo-icon img { width: 26px; height: 26px; object-fit: contain; }

.app-sb-logo-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.app-sb-logo-title {
    font-size: 15px; font-weight: 800;
    color: var(--food-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.2;
}

.cc--darkmode .app-sb-logo-title { color: #c8d5f0; }

.app-sb-logo-sub {
    font-size: 9px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--food-text-3);
    line-height: 1.4;
}

/* ── Nav section ── */
#app_sidebar_nav {
    flex: 1;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow-y: auto;
}

.app-sb-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    color: var(--food-text-2);
    font-size: 14.5px; font-weight: 500;
    text-decoration: none !important;
    transition: background .15s, color .15s;
    cursor: pointer;
    border: none; background: none; width: 100%; text-align: left;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}

.cc--darkmode .app-sb-link { color: #8499c0; }

.app-sb-link:hover {
    background: var(--primary-50);
    color: var(--primary);
    text-decoration: none !important;
}

.cc--darkmode .app-sb-link:hover {
    background: rgba(59,89,152,.12);
    color: #a5b4fc;
}

.app-sb-link.active {
    background: var(--primary-50);
    color: var(--primary);
    font-weight: 600;
}

.cc--darkmode .app-sb-link.active {
    background: rgba(59,89,152,.16);
    color: #a5b4fc;
}

.app-sb-link svg {
    width: 20px; height: 20px;
    flex-shrink: 0; opacity: .7;
    transition: opacity .15s;
}

.app-sb-link.active svg,
.app-sb-link:hover svg { opacity: 1; }

/* Inbox unread badge */
.app-sb-badge {
    margin-left: auto;
    background: #f43f5e;
    color: #fff;
    border-radius: 10px;
    font-size: 9px; font-weight: 700;
    padding: 1px 5px; min-width: 16px;
    text-align: center; line-height: 1.5;
    display: none;
}

.app-sb-divider {
    height: 1px;
    background: var(--food-border);
    margin: 6px 2px;
}

.cc--darkmode .app-sb-divider { background: #243050; }

/* ── User profile at bottom ── */
#app_sidebar_user {
    padding: 12px 14px;
    border-top: 1px solid var(--food-border);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.cc--darkmode #app_sidebar_user { border-top-color: #243050; }

.app-sb-user-avatar {
    width: 32px; height: 32px;
    border-radius: 50%; object-fit: cover; flex-shrink: 0;
}

.app-sb-user-info { flex: 1; min-width: 0; }

.app-sb-user-name {
    font-size: 13px; font-weight: 600;
    color: var(--food-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.2;
}

.cc--darkmode .app-sb-user-name { color: #c8d5f0; }

.app-sb-user-role {
    font-size: 11px;
    color: var(--food-text-3);
    line-height: 1.2;
}

/* Profile-link wraps avatar + info; stretches to fill available space */
.app-sb-user-profile-link {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    text-decoration: none !important;
    color: inherit;
    border-radius: 8px;
    padding: 2px 4px;
    margin: -2px -4px;
    transition: background .15s;
}
.app-sb-user-profile-link:hover { background: var(--primary-50); text-decoration: none !important; }
.cc--darkmode .app-sb-user-profile-link:hover { background: rgba(59,89,152,.10); }

/* Logout icon-only button at the right of the profile row */
.app-sb-user-logout {
    flex-shrink: 0;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    color: var(--food-text-3);
    text-decoration: none !important;
    transition: background .15s, color .15s;
}
.app-sb-user-logout:hover { background: rgba(239,68,68,.10); color: #ef4444; }
.cc--darkmode .app-sb-user-logout { color: #6b7eb0; }
.cc--darkmode .app-sb-user-logout:hover { background: rgba(239,68,68,.12); color: #f87171; }

/* ═══════════════════════════════════════════════════════════════
   COLLAPSIBLE SIDEBAR — toggle, transitions, collapsed state
   ════════════════════════════════════════════════════════════ */

/* Smooth width transition on the sidebar itself */
#app_sidebar {
    transition: width .25s cubic-bezier(.4,0,.2,1);
}

@media (min-width: 992px) {
    /* Animate content offset together with sidebar */
    body.app main,
    body.app .app-sub-navbar,
    body.app .ads-header          { transition: margin-left .25s cubic-bezier(.4,0,.2,1); }
    body.app footer.footer        { transition: padding-left .25s cubic-bezier(.4,0,.2,1); }

    /* ── Collapsed width ── */
    #app_sidebar.sb-collapsed     { width: 64px; }

    /* ── Shift content when collapsed ── */
    body.app.sb-collapsed main,
    body.app.sb-collapsed .app-sub-navbar,
    body.app.sb-collapsed .ads-header  { margin-left: 64px; }
    body.app.sb-collapsed footer.footer {
        padding-left: 64px;
    }
}

/* ── Hide text labels in collapsed mode ── */
#app_sidebar.sb-collapsed .app-sb-link-label,
#app_sidebar.sb-collapsed .app-sb-logo-text,
#app_sidebar.sb-collapsed .app-sb-user-info,
#app_sidebar.sb-collapsed .app-sb-user-logout,
#app_sidebar.sb-collapsed .app-sb-badge {
    display: none;
}

/* ── Center icons in collapsed mode ── */
#app_sidebar.sb-collapsed .app-sb-link {
    justify-content: center;
    padding: 10px;
    gap: 0;
}
#app_sidebar.sb-collapsed #app_sidebar_logo {
    justify-content: center;
    padding: 20px 12px 18px;
}
#app_sidebar.sb-collapsed #app_sidebar_user {
    justify-content: center;
    padding: 12px 8px;
}
#app_sidebar.sb-collapsed .app-sb-user-profile-link {
    flex: none;
    gap: 0;
    padding: 0; margin: 0;
}

/* ── Chevron icon flips when collapsed ── */
.sb-chevron {
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    flex-shrink: 0;
}
#app_sidebar.sb-collapsed .sb-chevron {
    transform: scaleX(-1);
}

/* ── Update MBN colors to indigo (matching new design) ── */
.mbn-tab.mbn-on           { color: #3b5998 !important; }
.mbn-tab.mbn-on .mbn-chip {
    background: rgba(59,89,152,.13) !important;
}
.mbn-tab:active           { color: #3b5998 !important; }
.mbn-tab:active .mbn-chip {
    background: rgba(59,89,152,.22) !important;
}
.mbn-tab.mbn-on .mbn-avatar { border-color: #3b5998 !important; }
#mbn {
    border: 1px solid rgba(59,89,152,.12) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,.10), 0 1px 0 rgba(59,89,152,.08) !important;
}
.mbn-row:active, .mbn-row:hover {
    background: rgba(59,89,152,.08) !important;
    color: #3b5998 !important;
}
.mbn-row-ico { color: #3b5998 !important; background: rgba(59,89,152,.10) !important; }

/* ══════════════════════════════════════════════════════════════════
   CUSTOMER STORE SIDEBAR — same Magic Patterns sidebar for /s/ pages
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
    /* Hide old store top navbar + desktop header block */
    .store-navbar            { display: none !important; }
    .store-desktop-header    { display: none !important; }
    #store_sidebar           { display: flex !important; }

    /* Content beside sidebar */
    body.store-layout main,
    body.store-layout .store-main,
    body.store-layout .ads-header { margin-left: 250px; }

    body.store-layout main   { padding-top: 2rem; }

    /* Footer: full-width background, content indented past sidebar.
       Override Bootstrap .container behaviour so it spans 100% */
    body.store-layout footer.store-footer {
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: calc(250px + 1.5rem) !important;
        padding-right: 1.5rem !important;
        box-sizing: border-box;
    }
}

@media (max-width: 991.98px) {
    #store_sidebar { display: none !important; }
}

/* Store sidebar shares the same shell styles as #app_sidebar */
#store_sidebar {
    display: none;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 250px;
    flex-direction: column;
    background: #ffffff;
    border-right: 1px solid var(--food-border);
    z-index: 1040;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ── Update #s_cbn to primary colour ── */
.s-cbn-tab.s-cbn-on           { color: var(--primary) !important; }
.s-cbn-tab.s-cbn-on .s-cbn-chip {
    background: rgba(59,89,152,.13) !important;
    transform: scale(1.08) translateY(-1px) !important;
}
.s-cbn-tab:active           { color: var(--primary) !important; }
.s-cbn-tab:active .s-cbn-chip {
    background: rgba(59,89,152,.22) !important;
}
#s_cbn {
    border: var(--border-width) solid rgba(59,89,152,.12) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,.10), 0 1px 0 rgba(59,89,152,.08) !important;
}
/* ─────────────────────────────────────────────────────────────────
   27. DASHBOARD STORE CARDS — Figma-matched design with hero image
   ───────────────────────────────────────────────────────────────── */

/* Card shell — no overflow:hidden so the dropdown can escape */
.dash-store-card {
    border-radius: var(--radius-card) !important;
    position: relative;
}

/* Image wrapper — clips the photo to the card's top corners */
.dash-store-img-wrapper {
    position: relative;
    height: 160px !important;
    min-height: 160px !important;
    max-height: 160px !important;
    overflow: hidden;
    background: var(--primary-100);
    flex-shrink: 0;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.dash-store-img {
    width: 100%;
    height: 100% !important;
    max-height: 160px !important;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform var(--transition-slow) ease;
}

.dash-store-card:hover .dash-store-img {
    transform: scale(1.04);
}

/* Placeholder when no image */
.dash-store-img-placeholder {
    position: relative;
    height: 160px !important;
    min-height: 160px !important;
    max-height: 160px !important;
    background: linear-gradient(135deg, var(--primary-50), var(--primary-100));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
}

/* ── Status badge — top-right overlay on card ── */
.dash-store-badge-wrapper {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 20;
    pointer-events: none;
}

.dash-store-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: .72rem;
    font-weight: var(--font-weight-semibold);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    line-height: 1.5;
}

.dash-store-badge-active {
    background: rgba(220, 252, 231, .92);
    color: #16a34a;
    border: 1px solid rgba(22, 163, 74, .22);
}

.dash-store-badge-disabled {
    background: rgba(241, 245, 249, .92);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.dash-store-badge-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #16a34a;
    flex-shrink: 0;
}

/* ── 3-dot action menu — top-left overlay on card ──
 * z-index must exceed the sidebar stacking context (z-index:1040) so the
 * open dropdown-menu isn't clipped/hidden behind the sidebar on desktop. */
.dash-store-menu-wrap,
.dash-store-menu-wrap-noimg {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1050;
}

/* Store-card action dropdown — JS in custom.js portals this to <body> on open
 * so it escapes every ancestor overflow / stacking-context / z-index battle.
 * z-index and position are set inline by the portal handler; only width lives here. */
.dash-store-menu-wrap .dropdown-menu,
.dash-store-menu-wrap-noimg .dropdown-menu {
    width: 220px;
    min-width: 220px;
}

/* Frosted-glass pill so the button is legible over busy food images */
.dash-store-menu-wrap .btn,
.dash-store-menu-wrap-noimg .btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .84);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .55);
    box-shadow: 0 1px 5px rgba(0, 0, 0, .16);
    color: #1e293b;
    transition: background .15s, box-shadow .15s;
}

.dash-store-menu-wrap .btn:hover,
.dash-store-menu-wrap .btn:focus,
.dash-store-menu-wrap-noimg .btn:hover,
.dash-store-menu-wrap-noimg .btn:focus {
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .20);
    color: #1e293b;
}

/* ── Store URL chip ── */
.dash-store-url {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .78rem;
    color: var(--primary);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-store-url:hover { text-decoration: underline; color: var(--primary); }

/* ── Orders / metadata row ── */
.dash-store-meta-row {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .85rem;
}

/* ── Card footer — pageviews left, view-store link right ── */
.dash-store-footer {
    padding: .625rem 1.25rem;
    border-top: 1px solid var(--border-light, #f0f4f8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .8rem;
    margin-top: auto;
}

.dash-store-footer-pv {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--text-muted);
}

.dash-store-view-link {
    color: var(--primary);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    font-size: .82rem;
    transition: opacity .15s;
}

.dash-store-view-link:hover { opacity: .75; text-decoration: none; color: var(--primary); }

/* ── Fix: card dropdown menus overlapped by sibling cards below them ────────
   Bootstrap cards inside a [data-blocks] grid can clip or be hidden behind
   cards that appear later in the DOM. Lifting overflow to visible and giving
   a column with an open dropdown a higher stacking context fixes both issues.
   ──────────────────────────────────────────────────────────────────────────── */
[data-blocks] > div { position: relative; z-index: 1; }
[data-blocks] > div:has(.dropdown.show) { z-index: 100; }
[data-blocks] .card { overflow: visible; }
[data-blocks] .dropdown-menu { z-index: 1060 !important; }

/* ══ Back Navigation Button ══════════════════════════════════════════════════
   Aesthetic pill back button used across all menu-creation flow pages.
   ─────────────────────────────────────────────────────────────────────────── */
.btn-back-nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px 7px 8px;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 50px;
    color: #374151;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none !important;
    box-shadow: 0 1px 6px rgba(0,0,0,.06);
    transition: color .16s, border-color .16s, box-shadow .16s, transform .16s;
    margin-bottom: 18px;
    letter-spacing: -.01em;
    position: relative;
}
.btn-back-nav:hover {
    color: var(--primary, #d97706);
    border-color: var(--primary, #d97706);
    box-shadow: 0 4px 16px rgba(217,119,6,.14), 0 0 0 3px rgba(217,119,6,.09);
    transform: translateX(-3px);
    text-decoration: none !important;
}
.btn-back-nav:active { transform: translateX(-1px); }
.btn-back-nav-ico {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .16s, color .16s;
}
.btn-back-nav:hover .btn-back-nav-ico {
    background: var(--primary, #d97706);
    color: #fff;
}
.btn-back-nav-ico svg { display: block; }
.btn-back-nav-text { line-height: 1; }
.btn-back-nav-hint {
    display: block;
    font-size: .68rem;
    font-weight: 400;
    color: #9ca3af;
    line-height: 1;
    margin-top: 2px;
    letter-spacing: 0;
}
/* ─────────────────────────────────────────────────────────────────────────── */

/* ══ Mobile: flush page containers to bottom of header nav bar ════════════
   On mobile (<992px) the merchant top navbar is in-flow.
   Remove its excess margin-bottom so content starts right below the nav.
   On desktop the navbar is already hidden (display:none), so this is safe.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    body.app .app-navbar { margin-bottom: 0 !important; }
    body.app .app-sub-navbar { margin-bottom: 0.75rem !important; }
    body.app main { padding-top: 0.75rem; }
}
/* ─────────────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════
   MERCHANT DARK MODE — ADMIN PARITY
   Replicates the admin panel dark palette verbatim (admin-custom.css):
     page bg        #0f1117      nav / sidebar   #14161d
     card / input   #1a1d24      raised surface  #22252f
     text           #d1d5db      muted text      #6b7280
     icons          #9ca3af      hover accent    #a5b4fc on rgba(79,70,229,.15)
     borders        rgba(255,255,255,.06 / .08)
     scrollbar      #374151 thumb on #1a1d24 track
   Loaded last — overrides the older navy dark palette above.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Page canvas ── */
[data-theme-style="dark"] body,
body.cc--darkmode {
    background-color: #0f1117 !important;
    background-image: none !important;
    color: #d1d5db !important;
}

/* ── Cards ── */
[data-theme-style="dark"] .card,
.cc--darkmode .card {
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.22), 0 1px 3px rgba(0,0,0,.12) !important;
}

[data-theme-style="dark"] .card:hover,
.cc--darkmode .card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,.28), 0 2px 5px rgba(0,0,0,.14) !important;
}

[data-theme-style="dark"] .card-header,
[data-theme-style="dark"] .card-footer,
.cc--darkmode .card-header,
.cc--darkmode .card-footer {
    background: #22252f !important;
    border-color: rgba(255,255,255,0.06) !important;
}

/* ── Top navbar / sub-navbar / sidebar ── */
[data-theme-style="dark"] .app-navbar,
.cc--darkmode .app-navbar {
    background: #14161d !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 1px 6px rgba(0,0,0,.4) !important;
}

[data-theme-style="dark"] .app-sub-navbar,
.cc--darkmode .app-sub-navbar {
    background: #14161d !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.06) !important;
}

[data-theme-style="dark"] #app_sidebar,
.cc--darkmode #app_sidebar {
    background: #14161d !important;
    border-right: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow: 2px 0 8px rgba(0,0,0,0.4) !important;
}

[data-theme-style="dark"] #app_sidebar_logo,
.cc--darkmode #app_sidebar_logo {
    border-bottom-color: rgba(255,255,255,0.08) !important;
}

/* Sidebar / nav links — admin text, icon & hover treatment */
[data-theme-style="dark"] #app_sidebar .nav-link,
[data-theme-style="dark"] .app-navbar .nav-link,
.cc--darkmode #app_sidebar .nav-link,
.cc--darkmode .app-navbar .nav-link {
    color: #d1d5db !important;
}

[data-theme-style="dark"] #app_sidebar .nav-link i,
[data-theme-style="dark"] .app-navbar .nav-link i,
.cc--darkmode #app_sidebar .nav-link i,
.cc--darkmode .app-navbar .nav-link i {
    color: #9ca3af !important;
}

[data-theme-style="dark"] #app_sidebar .nav-link:hover:not(.active),
[data-theme-style="dark"] .app-navbar .nav-link:hover:not(.active),
.cc--darkmode #app_sidebar .nav-link:hover:not(.active),
.cc--darkmode .app-navbar .nav-link:hover:not(.active) {
    color: #a5b4fc !important;
    background: rgba(79, 70, 229, 0.15) !important;
}

[data-theme-style="dark"] #app_sidebar .nav-link:hover:not(.active) i,
.cc--darkmode #app_sidebar .nav-link:hover:not(.active) i {
    color: #a5b4fc !important;
}

/* ── Forms ── */
[data-theme-style="dark"] .form-control,
[data-theme-style="dark"] .custom-select,
.cc--darkmode .form-control,
.cc--darkmode .custom-select {
    background-color: #1a1d24 !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #d1d5db !important;
}

[data-theme-style="dark"] .form-control:focus,
[data-theme-style="dark"] .custom-select:focus,
.cc--darkmode .form-control:focus,
.cc--darkmode .custom-select:focus {
    background-color: #22252f !important;
    border-color: #3b5998 !important;
}

[data-theme-style="dark"] .input-group-text,
.cc--darkmode .input-group-text {
    background: #1a1d24 !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #9ca3af !important;
}

/* ── Dropdown menus ── */
[data-theme-style="dark"] .dropdown-menu,
.cc--darkmode .dropdown-menu {
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}

[data-theme-style="dark"] .dropdown-item,
.cc--darkmode .dropdown-item {
    color: #d1d5db !important;
}

[data-theme-style="dark"] .dropdown-item:hover,
[data-theme-style="dark"] .dropdown-item:focus,
.cc--darkmode .dropdown-item:hover,
.cc--darkmode .dropdown-item:focus {
    background: rgba(79, 70, 229, 0.15) !important;
    color: #a5b4fc !important;
}

[data-theme-style="dark"] .dropdown-divider,
.cc--darkmode .dropdown-divider {
    border-top-color: rgba(255,255,255,0.08) !important;
}

/* ── Modals ── */
[data-theme-style="dark"] .modal-content,
.cc--darkmode .modal-content {
    background: #1a1d24 !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
}

[data-theme-style="dark"] .modal-header,
[data-theme-style="dark"] .modal-footer,
.cc--darkmode .modal-header,
.cc--darkmode .modal-footer {
    border-color: rgba(255,255,255,0.06) !important;
}

/* ── Tables ── */
[data-theme-style="dark"] .table-custom-container,
[data-theme-style="dark"] .table-custom,
.cc--darkmode .table-custom-container,
.cc--darkmode .table-custom {
    background: #1a1d24 !important;
    color: #d1d5db !important;
}

[data-theme-style="dark"] .table-custom thead,
.cc--darkmode .table-custom thead {
    background: #22252f !important;
}

[data-theme-style="dark"] .table-custom thead th,
.cc--darkmode .table-custom thead th {
    color: #6b7280 !important;
    background: #22252f !important;
    border-color: rgba(255,255,255,0.06) !important;
}

[data-theme-style="dark"] .table-custom tbody tr td,
.cc--darkmode .table-custom tbody tr td {
    border-color: rgba(255,255,255,0.06) !important;
    color: #d1d5db !important;
}

[data-theme-style="dark"] .table-custom tbody tr:hover td,
.cc--darkmode .table-custom tbody tr:hover td {
    background: #22252f !important;
}

/* ── Lists, footer, misc surfaces ── */
[data-theme-style="dark"] .list-group-item,
.cc--darkmode .list-group-item {
    background: #1a1d24 !important;
    border-color: rgba(255,255,255,0.06) !important;
    color: #d1d5db !important;
}

[data-theme-style="dark"] .footer,
.cc--darkmode .footer {
    background: #14161d !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
}

[data-theme-style="dark"] .text-muted,
.cc--darkmode .text-muted {
    color: #6b7280 !important;
}

[data-theme-style="dark"] hr,
.cc--darkmode hr {
    border-top-color: rgba(255,255,255,0.08) !important;
}

/* ── Chat flyout ── */
[data-theme-style="dark"] #chat_flyout,
.cc--darkmode #chat_flyout {
    background: #1a1d24 !important;
    border-color: rgba(255,255,255,0.08) !important;
}

[data-theme-style="dark"] .flyout-conv-item:hover,
.cc--darkmode .flyout-conv-item:hover {
    background: rgba(79, 70, 229, 0.15) !important;
}

[data-theme-style="dark"] .flyout-conv-name,
.cc--darkmode .flyout-conv-name {
    color: #d1d5db !important;
}

/* ── Scrollbars (admin verbatim) ── */
[data-theme-style="dark"] body *,
.cc--darkmode body * {
    scrollbar-color: #374151 #1a1d24;
}

[data-theme-style="dark"] body *::-webkit-scrollbar-thumb,
.cc--darkmode body *::-webkit-scrollbar-thumb {
    background: #374151 !important;
}

[data-theme-style="dark"] body *::-webkit-scrollbar,
[data-theme-style="dark"] body *::-webkit-scrollbar-track,
.cc--darkmode body *::-webkit-scrollbar,
.cc--darkmode body *::-webkit-scrollbar-track {
    background: #1a1d24 !important;
}
/* ══ END MERCHANT DARK MODE — ADMIN PARITY ══ */