/* ================================================
		   YOUSR - Navigation Redesign with Logo Colors
		   Logo Colors:
		     Purple  : #8c449b
		     Pink    : #e91e8c
		     Teal    : #00c2cb
		================================================ */

		/* ---------- SIDEBAR ---------- */
		.lw-public-master .sidebar,
		.lw-public-master #accordionSidebar {
			background: linear-gradient(175deg, #160430 0%, #2e0e58 40%, #7a3490 100%) !important;
			border-right: none !important;
			box-shadow: 4px 0 24px rgba(90, 20, 120, 0.5) !important;
			padding-left: 8px !important;
			padding-right: 8px !important;
		}

		/* Sidebar brand / logo area */
		.lw-public-master .sidebar .sidebar-brand,
		.lw-public-master .sidebar-brand {
			background: rgba(0, 0, 0, 0.25) !important;
			border-bottom: 1px solid rgba(233, 30, 140, 0.3) !important;
			padding: 14px 10px !important;
			margin: 0 !important;
			border-radius: 0 !important;
		}

		/* Section labels (inspired by UGO dashboard) */
		.lw-public-master .sidebar .lw-sidebar-section-label {
			display: block !important;
			font-size: 0.62rem !important;
			font-weight: 700 !important;
			letter-spacing: 1.2px !important;
			text-transform: uppercase !important;
			color: rgba(255, 255, 255, 0.4) !important;
			padding: 14px 14px 4px 14px !important;
			list-style: none !important;
			margin-top: 4px !important;
		}

		/* Sidebar divider - hide since we have section labels */
		.lw-public-master .sidebar hr.sidebar-divider {
			display: none !important;
		}

		/* Sidebar nav links – default */
		.lw-public-master .sidebar .nav-item .nav-link {
			background: transparent !important;
			border-radius: 10px !important;
			margin: 1px 0 !important;
			padding: 10px 14px !important;
		}
		.lw-public-master .sidebar .nav-link,
		.lw-public-master .sidebar .nav-link span,
		.lw-public-master .sidebar .nav-link i {
			color: rgba(255, 255, 255, 0.72) !important;
			transition: all 0.18s ease !important;
		}
		.lw-public-master .sidebar .nav-link i {
			width: 20px !important;
			text-align: center !important;
			font-size: 0.88rem !important;
		}

		/* Sidebar nav links – hover */
		.lw-public-master .sidebar .nav-item:hover > .nav-link {
			background: rgba(255, 255, 255, 0.1) !important;
			border-radius: 10px !important;
		}
		.lw-public-master .sidebar .nav-item:hover > .nav-link,
		.lw-public-master .sidebar .nav-item:hover > .nav-link span {
			color: #ffffff !important;
		}
		.lw-public-master .sidebar .nav-item:hover > .nav-link i {
			color: #f06fcc !important;
		}

		/* Sidebar nav links – active (pill style like UGO) */
		.lw-public-master .sidebar .nav-item.active > .nav-link,
		.lw-public-master .sidebar-dark .nav-item .nav-link.active {
			background: rgba(233, 30, 140, 0.28) !important;
			border-radius: 10px !important;
			border-inline-start: 3px solid #e91e8c !important;
			box-shadow: 0 4px 14px rgba(233, 30, 140, 0.4) !important;
		}
		.lw-public-master .sidebar .nav-item.active > .nav-link,
		.lw-public-master .sidebar .nav-item.active > .nav-link span,
		.lw-public-master .sidebar-dark .nav-item .nav-link.active,
		.lw-public-master .sidebar-dark .nav-item .nav-link.active span {
			color: #ffffff !important;
		}
		.lw-public-master .sidebar .nav-item.active > .nav-link i,
		.lw-public-master .sidebar-dark .nav-item .nav-link.active i {
			color: #ffffff !important;
		}

		/* Sidebar ads container */
		.lw-public-master .lw-sidebar-ads-container {
			background: transparent !important;
		}

		/* ---------- TOP NAVIGATION BAR ---------- */
		.lw-public-master .navbar.topbar {
			background: linear-gradient(135deg, #1a0535 0%, #6b2185 45%, #e91e8c 100%) !important;
			border-bottom: none !important;
			border-radius: 10px !important;
			box-shadow: 0 6px 24px rgba(140, 68, 155, 0.45) !important;
			margin-bottom: 1.5rem !important;
		}

		/* Topbar all nav-links */
		.lw-public-master .navbar.topbar .nav-link,
		.lw-public-master .navbar.topbar .nav-link i,
		.lw-public-master .navbar.topbar .nav-link span,
		.lw-public-master .navbar.topbar .btn-link,
		.lw-public-master .navbar.topbar .btn-link i {
			color: rgba(255, 255, 255, 0.88) !important;
		}
		.lw-public-master .navbar.topbar .nav-link:hover,
		.lw-public-master .navbar.topbar .nav-link:hover i,
		.lw-public-master .navbar.topbar .nav-link:hover span,
		.lw-public-master .navbar.topbar .btn-link:hover i {
			color: #ffffff !important;
		}

		/* Topbar sidebar toggle button */
		.lw-public-master .navbar.topbar #sidebarToggleTop,
		.lw-public-master .navbar.topbar #sidebarToggleTop i {
			color: rgba(255, 255, 255, 0.88) !important;
		}

		/* "Be Premium" button in topbar – outline style */
		.lw-public-master .navbar.topbar .lw-premium-user-btn,
		.lw-public-master .navbar.topbar a.lw-premium-user-btn,
		body.lw-public-master .navbar.topbar .lw-premium-user-btn {
			background: transparent !important;
			border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
			color: #ffffff !important;
			border-radius: 20px !important;
			font-weight: 600 !important;
			font-size: 0.78rem !important;
			padding: 4px 14px !important;
			letter-spacing: 0.3px !important;
			transition: all 0.2s ease !important;
			text-decoration: none !important;
		}
		.lw-public-master .navbar.topbar .lw-premium-user-btn:hover,
		body.lw-public-master .navbar.topbar .lw-premium-user-btn:hover {
			background: rgba(255, 255, 255, 0.15) !important;
			border-color: #ffffff !important;
			color: #ffffff !important;
		}

		/* Topbar profile image */
		.lw-public-master .navbar.topbar .img-profile {
			border: 2px solid rgba(255, 255, 255, 0.5) !important;
		}

		/* Topbar dropdown menus (keep them white/light) */
		.lw-public-master .navbar.topbar .dropdown-menu {
			background: #ffffff !important;
			border: 1px solid rgba(140, 68, 155, 0.2) !important;
			box-shadow: 0 8px 30px rgba(140, 68, 155, 0.2) !important;
			border-radius: 10px !important;
		}
		.lw-public-master .navbar.topbar .dropdown-menu .dropdown-item,
		.lw-public-master .navbar.topbar .dropdown-menu .dropdown-item i,
		.lw-public-master .navbar.topbar .dropdown-menu .dropdown-item span,
		.lw-public-master .navbar.topbar .dropdown-menu .dropdown-header {
			color: #333333 !important;
		}
		.lw-public-master .navbar.topbar .dropdown-menu .dropdown-item:hover {
			background: linear-gradient(135deg, rgba(140, 68, 155, 0.1), rgba(233, 30, 140, 0.1)) !important;
			color: #8c449b !important;
		}
		.lw-public-master .navbar.topbar .dropdown-menu .dropdown-item:hover i,
		.lw-public-master .navbar.topbar .dropdown-menu .dropdown-item:hover span {
			color: #8c449b !important;
		}
		.lw-public-master .navbar.topbar .dropdown-menu .dropdown-divider {
			border-color: rgba(140, 68, 155, 0.15) !important;
		}

		/* "Admin Panel" link in topbar */
		.lw-public-master .navbar.topbar .text-warning,
		.lw-public-master .navbar.topbar .text-warning span {
			color: #ffd54f !important;
		}

		/* Notification badge */
		.lw-public-master .navbar.topbar .badge-danger {
			background-color: #ff1744 !important;
		}

		/* ---------- FIX WHITE GAPS (top & sides) ---------- */

		/* HTML/Body: zero all default browser spacing + prevent horizontal scroll */
		html {
			margin: 0 !important;
			padding: 0 !important;
			overflow-x: hidden !important;
			max-width: 100vw !important;
		}
		html body.lw-public-master,
		body.lw-public-master {
			margin: 0 !important;
			padding: 0 !important;
			overflow-x: hidden !important;
			max-width: 100vw !important;
		}

		/* Wrapper: zero all padding/margin/gap + prevent horizontal overflow */
		.lw-public-master #wrapper,
		.lw-public-master #wrapper.container-fluid {
			padding: 0 !important;
			margin: 0 !important;
			gap: 0 !important;
			overflow-x: hidden !important;
			max-width: 100vw !important;
		}

		/* Sidebar: flush top/left */
		.lw-public-master .sidebar,
		.lw-public-master #accordionSidebar {
			margin: 0 !important;
			padding-top: 0 !important;
			min-height: 100vh !important;
		}

		/* Sidebar brand: flush top */
		.lw-public-master .sidebar .sidebar-brand,
		.lw-public-master .sidebar-brand {
			margin: 0 !important;
		}

		/* Content wrapper: flush, no gaps */
		.lw-public-master #content-wrapper {
			padding: 0 !important;
			margin: 0 !important;
		}

		/* Content div: flush top */
		.lw-public-master #content-wrapper > #content {
			padding: 0 !important;
			margin: 0 !important;
		}

		/* Navbar: make it flush (same height as nav-links to remove internal gap) */
		.lw-public-master .navbar.topbar {
			margin: 0 !important;
			border-radius: 0 0 10px 10px !important;
			/* Match height to nav-link height so no internal padding gap */
			height: auto !important;
			min-height: 4.375rem !important;
			align-items: stretch !important;
		}

		/* Nav links fill the full navbar height */
		.lw-public-master .navbar.topbar .nav-item .nav-link {
			height: auto !important;
			min-height: 4.375rem !important;
		}

		/* ---------- PAGE CONTENT AREA ---------- */
		/* Keep the page content readable with dark text */
		.lw-public-master #content .lw-page-content *:not(.btn-primary):not(.btn-primary *):not(.lw-match-card-btn):not(.lw-match-card-btn *):not(.lw-find-heading-icon):not(.lw-find-heading-icon *):not(.lw-status-pill):not(.lw-status-pill *):not(.alert):not(.alert *):not(.badge):not(.badge *) {
			color: #333333 !important;
		}
		.lw-public-master #content .lw-page-content a:not(.btn-primary):not(.lw-match-card-btn):not(.btn) {
			color: #8c449b !important;
		}
		/* Force white text on purple/gradient buttons */
		.lw-public-master #content .lw-page-content .btn-primary,
		.lw-public-master #content .lw-page-content .btn-primary *,
		.lw-public-master #content .lw-page-content .lw-match-card-btn,
		.lw-public-master #content .lw-page-content .lw-match-card-btn *,
		.lw-public-master #content .lw-page-content .lw-find-heading-icon,
		.lw-public-master #content .lw-page-content .lw-find-heading-icon * {
			color: #ffffff !important;
		}

		/* Make the whole page background blend with the sidebar gradient
		   so there's no visible "white seam" between sidebar and content */
		.lw-public-master #content-wrapper {
			background: linear-gradient(90deg, #3a1168 0%, #6b2280 2%, #f8f9fa 5%, #f8f9fa 100%) !important;
		}

		/* The actual page content area stays white/light */
		.lw-public-master .lw-page-content {
			background: transparent !important;
			padding-top: 28px !important;
			padding-bottom: 28px !important;
		}

		/* Spacer between search/premium area and user-icons – direction-agnostic */
		.lw-topbar-spacer {
			flex: 1 0 0%;
		}

		.lw-be-premium-btn {
			position: relative;
			display: inline-flex;
			align-items: center;
			align-self: center;
			flex: 0 0 auto;
			margin-inline-start: 0.5rem;
			margin-inline-end: 0.5rem;
			gap: 9px;
			padding: 8px 18px 8px 12px;
			background: linear-gradient(135deg, #f6c453 0%, #d97706 50%, #b45309 100%);
			color: #2a1635 !important;
			border-radius: 999px;
			font-weight: 700;
			font-size: 0.85rem;
			text-decoration: none !important;
			border: 1.5px solid rgba(255, 255, 255, 0.4);
			box-shadow: 0 4px 14px rgba(217, 119, 6, 0.45),
			            inset 0 1px 0 rgba(255, 255, 255, 0.5);
			transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
			overflow: hidden;
			white-space: nowrap;
			letter-spacing: 0.3px;
		}

		.lw-be-premium-btn:hover {
			color: #2a1635 !important;
			transform: translateY(-2px) scale(1.03);
			box-shadow: 0 8px 22px rgba(217, 119, 6, 0.6),
			            inset 0 1px 0 rgba(255, 255, 255, 0.6);
			filter: brightness(1.06);
			text-decoration: none !important;
		}

		.lw-be-premium-btn:active {
			transform: translateY(0) scale(1);
		}

		.lw-be-premium-icon {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 26px;
			height: 26px;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.35);
			color: #7a3a05 !important;
			font-size: 12px;
			box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
		}

		.lw-be-premium-icon i { color: #7a3a05 !important; }
		.lw-be-premium-text { color: #2a1635 !important; line-height: 1; }

		/* Shine sweep */
		.lw-be-premium-sparkle {
			position: absolute;
			top: 0;
			left: -60%;
			width: 40%;
			height: 100%;
			background: linear-gradient(
				120deg,
				transparent 0%,
				rgba(255, 255, 255, 0.55) 50%,
				transparent 100%
			);
			transform: skewX(-20deg);
			animation: lwPremiumShine 3.5s ease-in-out infinite;
			pointer-events: none;
		}

		@keyframes lwPremiumShine {
			0%, 65% { left: -60%; }
			85%, 100% { left: 130%; }
		}

		/* Override the global #content color rule for this button */
		.lw-public-master #content .lw-be-premium-btn,
		.lw-public-master #content .lw-be-premium-btn *,
		.lw-public-master #content .lw-be-premium-text {
			color: #2a1635 !important;
		}

		.lw-public-master #content .lw-be-premium-icon,
		.lw-public-master #content .lw-be-premium-icon i {
			color: #7a3a05 !important;
		}

		/* Tighten the topbar on small screens so the button always has room */
		@media (max-width: 767.98px) {
			.lw-public-master .navbar.topbar {
				padding-inline: 0.5rem !important;
			}
			.lw-public-master .navbar.topbar #sidebarToggleTop {
				margin-inline-end: 0.25rem !important;
				margin-right: 0 !important;
			}
			.lw-public-master .navbar.topbar .nav-item .nav-link {
				padding-inline: 0.5rem !important;
			}
			.lw-be-premium-btn {
				margin-inline-end: 0.25rem;
				padding: 6px 12px 6px 8px;
				font-size: 0.76rem;
				gap: 6px;
			}
			.lw-be-premium-icon {
				width: 22px;
				height: 22px;
				font-size: 10px;
			}
		}

		/* Extra-narrow phones: compact but text always visible */
		@media (max-width: 380px) {
			.lw-be-premium-btn {
				padding: 5px 8px 5px 6px;
				font-size: 0.72rem;
				gap: 4px;
				letter-spacing: 0;
			}
			.lw-be-premium-icon {
				width: 18px;
				height: 18px;
				font-size: 9px;
			}
		}

		@media (max-width: 767.98px) {
			.lw-public-master .lw-page-content {
				padding-top: 18px !important;
				padding-bottom: 18px !important;
			}
		}

		/* ===== PREVENT HORIZONTAL SCROLL ON MOBILE ===== */
		@media (max-width: 767.98px) {
			html,
			body.lw-public-master {
				overflow-x: hidden !important;
				max-width: 100vw !important;
				width: 100% !important;
			}
			.lw-public-master #wrapper,
			.lw-public-master #wrapper.container-fluid {
				overflow-x: hidden !important;
				max-width: 100vw !important;
				width: 100% !important;
			}
			.lw-public-master #content-wrapper {
				overflow-x: hidden !important;
				max-width: 100% !important;
			}
			/* Topbar: prevent items from stretching beyond viewport */
			.lw-public-master .navbar.topbar {
				overflow-x: hidden !important;
				max-width: 100% !important;
				flex-wrap: nowrap !important;
			}
			/* Topbar nav items: don't let them push the layout wider */
			.lw-public-master .navbar.topbar > ul,
			.lw-public-master .navbar.topbar > .navbar-nav {
				min-width: 0 !important;
				flex-shrink: 1 !important;
			}
		}

		/* ===== MOBILE SIDEBAR DRAWER ===== */
		@media (max-width: 767.98px) {
			/*
			 * On mobile the sidebar is always position:fixed (out of the flex flow)
			 * so the content-wrapper always takes 100% width.
			 * Visible/hidden state is toggled via translateX.
			 */
			.lw-public-master .sidebar,
			.lw-public-master #accordionSidebar {
				position: fixed !important;
				top: 0 !important;
				inset-inline-start: 0 !important;
				width: 16rem !important;
				min-width: 16rem !important;
				height: 100vh !important;
				z-index: 1055 !important;
				overflow-y: auto !important;
				overflow-x: hidden !important;
				transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
				box-shadow: 4px 0 24px rgba(0, 0, 0, 0.45) !important;
			}

			/* Hidden: slide off-screen toward the start edge */
			.lw-public-master .sidebar.toggled {
				transform: translateX(-110%) !important;
				box-shadow: none !important;
			}
			[dir="rtl"] .lw-public-master .sidebar.toggled {
				transform: translateX(110%) !important;
			}

			/* Visible: no transform */
			.lw-public-master .sidebar:not(.toggled) {
				transform: translateX(0) !important;
			}

			/* Content wrapper spans the full width (sidebar is out of flow) */
			.lw-public-master #content-wrapper {
				width: 100% !important;
				min-width: 0 !important;
				flex: 1 1 100% !important;
			}

			/* Nav links – show text next to icon (like desktop) */
			.lw-public-master .sidebar .nav-item .nav-link {
				text-align: start !important;
				width: 100% !important;
				display: flex !important;
				align-items: center !important;
			}
			.lw-public-master .sidebar .nav-item .nav-link span {
				display: inline !important;
				font-size: 0.85rem !important;
			}
			.lw-public-master .sidebar .nav-item .nav-link i {
				font-size: 0.88rem !important;
				width: 22px !important;
				text-align: center !important;
				flex-shrink: 0 !important;
				margin-inline-end: 4px !important;
			}

			/* Show full logo in open drawer */
			.lw-public-master .sidebar .sidebar-brand img.d-sm-block {
				display: none !important;
			}
			.lw-public-master .sidebar .sidebar-brand img.d-md-block {
				display: inline !important;
			}

			/* Dim backdrop behind the open sidebar */
			.lw-sidebar-backdrop {
				display: none;
				position: fixed;
				inset: 0;
				background: rgba(0, 0, 0, 0.55);
				z-index: 1050;
				cursor: pointer;
				-webkit-tap-highlight-color: transparent;
			}
			body:not(.sidebar-toggled) .lw-sidebar-backdrop {
				display: block;
			}
		}
		/* ===== Fix search dropdown position in RTL (Arabic) ===== */
		/*
		 * Root cause: Bootstrap sets `left: 0` on .dropdown-menu and the topbar
		 * theme adds `right: 0` (>=576px) without clearing `left`. In LTR the
		 * `left` wins and the menu opens from the button's left edge (fine, button
		 * is on the far-left). In RTL `right` wins but the conflicting `left: 0`
		 * also constrains the element, producing a broken / centred panel.
		 *
		 * Fix: in RTL force the search dropdown's parent li to stay
		 * position:static (same as the mobile behaviour). The containing block
		 * then becomes the topbar navbar itself, so the panel spans the topbar
		 * cleanly just like it does on mobile – regardless of screen size.
		 */
		[dir="rtl"] .topbar .navbar-nav.ml-0 .dropdown {
			position: static !important;
		}
		[dir="rtl"] .topbar .navbar-nav.ml-0 .dropdown-menu {
			left: 0.75rem !important;
			right: 0.75rem !important;
			width: calc(100% - 1.5rem) !important;
			min-width: unset !important;
		}