/* CarParts — Header Login (Rahkar) — RTL, matches Xtra header */

:root {
	--cp-rl-accent: #eb2500; /* header support-button red */
	--cp-rl-ink: #101010;
	--cp-rl-radius: 8px;
}

/* ---- shared wrapper ---- */
.cp-rl {
	display: flex;
	align-items: center;
	font-family: inherit;
}

/* Neutralise the plugin's inline-styled anchor and rebuild it as a calm "account chip"
   — neutral so the red support block stays the only red accent in the header. */
.cp-rl > a {
	display: inline-flex !important;
	align-items: center;
	gap: 9px;
	box-sizing: border-box;
	background: #fff !important;
	color: var(--cp-rl-ink) !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 600;
	line-height: 1;
	text-decoration: none !important;
	border: 1.5px solid #e6e6e6 !important;
	border-radius: 10px !important;
	box-shadow: 0 1px 2px rgba(16, 16, 16, .04);
	transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

/* user icon (Lucide "user", white) inside a small accent circle — avatar style */
.cp-rl > a::before {
	content: "";
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: var(--cp-rl-accent);
	background-image: var(--cp-rl-icon-white);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;
}

.cp-rl {
	--cp-rl-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>');
	--cp-rl-icon-white: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>');
}

.cp-rl > a:hover,
.cp-rl > a:focus-visible {
	border-color: var(--cp-rl-accent) !important;
	box-shadow: 0 4px 14px rgba(235, 37, 0, .15);
	outline: none;
}
.cp-rl > a:focus-visible {
	box-shadow: 0 0 0 3px rgba(235, 37, 0, .28);
}
.cp-rl > a:active { transform: translateY(1px); }

/* ---- desktop (header_2) ---- */
.cp-rl--d {
	/* vertical margins mirror the cart element's rhythm so it centres in the header bar
	   whether the parent is flex or an inline-block row */
	margin: 22px 18px 22px 16px; /* RTL: space toward cart (right) / viewport edge (left) */
	align-self: center;
}
.cp-rl--d > a {
	height: 46px;
	padding: 0 7px 0 16px !important; /* tighter on the avatar (leading/right) side */
	max-width: 220px;
	overflow: hidden;
}
/* keep a long username on one tidy line */
.cp-rl--d > a {
	white-space: nowrap;
}

/* ---- mobile: account tab inside the Xtra fixed bottom nav ----
   The <a> inherits the theme's .xtra-fixed-mobile-nav a layout/colour automatically;
   we only style our mask icon to match the theme's icon-font glyphs. */
/* make room for the 5th tab: let all tabs shrink evenly instead of overflowing.
   !important to win over codevz mobile-nav.css regardless of stylesheet order. */
.xtra-fixed-mobile-nav > a { flex: 1 1 0 !important; min-width: 0 !important; }

/* The page has horizontal overflow, so the bar's width:100% stretches past the
   screen and clips the rightmost tab. Pin it to the viewport edges instead. */
.xtra-fixed-mobile-nav { left: 0 !important; right: 0 !important; width: auto !important; }

.cp-rl-tab .cp-rl-tab-ic {
	display: block;
	width: 24px;
	height: 24px;
	margin: 0 auto;
	background-color: currentColor;
	-webkit-mask: var(--cp-rl-icon) center / contain no-repeat;
	        mask: var(--cp-rl-icon) center / contain no-repeat;
}
.cp-rl-tab {
	--cp-rl-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>');
}
/* keep a long display-name from breaking the tab layout */
.cp-rl-tab > span:last-child {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.cp-rl > a { transition: none; }
	.cp-rl > a:active { transform: none; }
}