/* Operia header / navigation polish (2026-11-12). Loaded after the theme by negarshop-child/functions.php. */
:root {
	--op-brand: #0079ff;
	--op-brand-2: #651fff;
	--op-ink: #0f1b3d;
	--op-muted: #5b6478;
	--op-line: #eef0f5;
}

/* ---- category button (desktop) ---- */
.elementor-element-op0cat1 .menu-widget-nav .toggle-menu-button {
	background: var(--op-brand);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	border-radius: 12px;
	padding: 11px 18px;
	gap: 8px;
	box-shadow: 0 6px 16px -8px rgba(0, 121, 255, .7);
	transition: background-color .2s ease, box-shadow .2s ease;
}
.elementor-element-op0cat1 .menu-widget-nav .toggle-menu-button i { color: #fff; }
.elementor-element-op0cat1 .header-main-menu:hover .toggle-menu-button { background: #0062d1; }

/* divider between the category button and the main menu */
.elementor-element-op0cat1 { position: relative; padding-left: 20px; }
.elementor-element-op0cat1::after {
	content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 22px;
	background: #dfe3ec; transform: translateY(-50%);
}

/* ---- category list ---- */
.elementor-element-op0cat1 .nav-menu-list--vertical { min-width: 270px; padding: 8px; border-radius: 14px; box-shadow: 0 18px 40px -12px rgba(15, 27, 61, .22); }
.elementor-element-op0cat1 .nav-menu-list--vertical > li > a {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 12px; border-radius: 10px; font-weight: 600; color: var(--op-ink);
}
.elementor-element-op0cat1 .nav-menu-list--vertical > li:hover > a { background: #f0f6ff; color: var(--op-brand); }
.elementor-element-op0cat1 .nav-menu-list--vertical > li > .sub-menu { border-radius: 14px; padding: 8px; box-shadow: 0 18px 40px -12px rgba(15, 27, 61, .22); }
.elementor-element-op0cat1 .nav-menu-list--vertical > li > .sub-menu a { border-radius: 8px; color: var(--op-muted); }
.elementor-element-op0cat1 .nav-menu-list--vertical > li > .sub-menu a:hover { color: var(--op-brand); background: #f6f9ff; }

/* group icons (uicons bold-rounded, already loaded by the theme) */
li.op-cat > a::before {
	font-family: "uicons-bold-rounded"; font-style: normal; font-weight: normal; line-height: 1;
	font-size: 17px; width: 20px; text-align: center; color: var(--op-brand); flex: 0 0 20px;
}
li.op-cat--mobile-phones > a::before      { content: "\ed3c"; }
li.op-cat--computers-laptops > a::before  { content: "\ebb6"; }
li.op-cat--mobile-accessories > a::before { content: "\ef7a"; }
li.op-cat--audio-video > a::before        { content: "\ea54"; }
li.op-cat--smart-home > a::before         { content: "\eab3"; }
li.op-cat--smart-gadgets > a::before      { content: "\f5c4"; }
li.op-cat--car-accessories > a::before    { content: "\e3b1"; }
li.op-cat--networking > a::before         { content: "\f0c9"; }
li.op-cat--sim-cards > a::before          { content: "\f1c9"; }
li.op-cat--digital-services > a::before   { content: "\e4ec"; }

/* ---- main menu (desktop) ---- */
.elementor-element-d4add21 .nav-menu-list { gap: 6px; }
.elementor-element-d4add21 .nav-menu-list > li > a {
	padding: 8px 12px; border-radius: 10px; font-weight: 600; color: var(--op-ink);
	transition: background-color .2s ease, color .2s ease;
}
.elementor-element-d4add21 .nav-menu-list > li > a:hover,
.elementor-element-d4add21 .nav-menu-list > li.current-menu-item > a { color: var(--op-brand); background: #f0f6ff; }

/* ---- mobile hamburger ---- */
.operia-responsive-header .toggle-menu-button { font-size: 0 !important; padding: 8px !important; }
.operia-responsive-header .toggle-menu-button i { font-size: 22px !important; }
.operia-responsive-header .offcanvas li.op-cat > a { display: flex; align-items: center; gap: 10px; font-weight: 600; }

/* ---- sales features strip (all pages) ---- */
.op-usp { background: #f7f9fc; border-top: 1px solid var(--op-line); border-bottom: 1px solid var(--op-line); }
.op-usp__list {
	max-width: 1320px; margin: 0 auto; padding: 10px 16px; list-style: none;
	display: flex; justify-content: space-between; gap: 24px; overflow-x: auto; scrollbar-width: none;
}
.op-usp__list::-webkit-scrollbar { display: none; }
.op-usp__item { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--op-ink); }
.op-usp__item i { color: var(--op-brand); font-size: 18px; line-height: 1; }
.op-usp__item a { color: inherit; }
@media (max-width: 767px) {
	.op-usp__list { justify-content: flex-start; gap: 18px; padding: 8px 14px; }
	.op-usp__item { font-size: 12px; }
}