/* Neto UI — theme tokens (netotech.ir kit + dark Opus canvas)
 * No Elementor red / traffic-light colors — brand blues only.
 */

:root,
html[data-neto-ui-theme="light"] {
	color-scheme: light;
	--neto-page: #f4f7fd;
	--neto-ink: #052b42;
	--neto-muted: #5a6b7a;
	--neto-brand: #004d77;
	--neto-brand-hover: #00385a;
	--neto-brand-ink: #ffffff;
	--neto-accent: #0f72d2;
	--neto-eyebrow-line: #0f72d2;
	--neto-card: #ffffff;
	--neto-line: rgba(5, 43, 66, 0.12);
	--neto-glow-a: rgba(0, 77, 119, 0.18);
	--neto-glow-b: rgba(15, 114, 210, 0.16);
	--neto-glass: rgba(255, 255, 255, 0.62);
	--neto-glass-border: rgba(255, 255, 255, 0.82);
	--neto-shadow: 0 20px 50px rgba(100, 130, 160, 0.18);
	--neto-switch-bg: #f4f7fd;
	--neto-switch-fg: #004d77;
	--neto-switch-border: rgba(0, 77, 119, 0.16);
	--neto-switch-shadow: 0 1px 2px rgba(5, 43, 66, 0.06);
	--neto-font: "Vazirmatn FD", Tahoma, sans-serif;
	/* Layout: full-bleed section bg, constrained readable content */
	--neto-content-max: 1300px;
	--neto-pad-x: clamp(1.15rem, 3.2vw, 2.5rem);
	--neto-section-y: clamp(3.5rem, 8vh, 6rem);
}

html[data-neto-ui-theme="dark"] {
	color-scheme: dark;
	--neto-page: #09090b;
	--neto-ink: #fafafa;
	--neto-muted: #9b9ea3;
	--neto-brand: #004d77;
	--neto-brand-hover: #0a6fa3;
	--neto-brand-ink: #ffffff;
	--neto-accent: #004d77;
	--neto-eyebrow-line: #00d7ff;
	--neto-card: #191919;
	--neto-line: #27272a;
	/* Neutral glows — no blue/cyan wash on dark canvas */
	--neto-glow-a: rgba(255, 255, 255, 0.07);
	--neto-glow-b: rgba(250, 250, 250, 0.04);
	--neto-glass: rgba(255, 255, 255, 0.06);
	--neto-glass-border: rgba(255, 255, 255, 0.14);
	--neto-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
	--neto-switch-bg: rgba(25, 25, 25, 0.85);
	--neto-switch-fg: #fafafa;
	--neto-switch-border: rgba(255, 255, 255, 0.14);
	--neto-switch-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
	--neto-font: "Vazirmatn FD", Tahoma, sans-serif;
	--neto-content-max: 1300px;
	--neto-pad-x: clamp(1.15rem, 3.2vw, 2.5rem);
	--neto-section-y: clamp(3.5rem, 8vh, 6rem);
}

.neto-ui {
	font-family: var(--neto-font);
	color: var(--neto-ink);
	-webkit-font-smoothing: antialiased;
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: clip;
	background: var(--neto-page);
	/* One continuous canvas for all sections */
	isolation: isolate;
	-webkit-tap-highlight-color: transparent;
}

/* Kill Elementor / theme pink-red focus & tap flash everywhere in Neto UI */
.neto-ui,
.neto-ui *,
.neto-header,
.neto-header *,
.neto-chat,
.neto-chat *,
.neto-ui-theme-switch,
.neto-ui-theme-switch *,
.neto-ui-theme-btn {
	-webkit-tap-highlight-color: transparent !important;
}

.neto-ui a:focus,
.neto-ui a:active,
.neto-ui button:focus,
.neto-ui button:active,
.neto-header a:focus,
.neto-header a:active,
.neto-header button:focus,
.neto-header button:active,
.neto-chat a:focus,
.neto-chat a:active,
.neto-chat button:focus,
.neto-chat button:active,
.neto-ui-theme-btn:focus,
.neto-ui-theme-btn:active,
body .elementor-location-header .neto-header a:focus,
body .elementor-location-header .neto-header a:active,
body .elementor-location-header .neto-header button:focus,
body .elementor-location-header .neto-header button:active,
body[class*="elementor"] .neto-header a:focus,
body[class*="elementor"] .neto-header a:active,
body[class*="elementor"] .neto-header button:focus,
body[class*="elementor"] .neto-header button:active,
body[class*="elementor"] .neto-ui a:focus,
body[class*="elementor"] .neto-ui a:active,
body[class*="elementor"] .neto-ui button:focus,
body[class*="elementor"] .neto-ui button:active,
body[class*="elementor"] .neto-chat a:focus,
body[class*="elementor"] .neto-chat a:active,
body[class*="elementor"] .neto-chat button:focus,
body[class*="elementor"] .neto-chat button:active,
body[class*="elementor"] .neto-ui-theme-btn:focus,
body[class*="elementor"] .neto-ui-theme-btn:active {
	outline: none !important;
	text-decoration: none !important;
	text-shadow: none !important;
}

/* Keep intentional keyboard focus without Elementor color paint */
.neto-ui a:focus:not(:focus-visible),
.neto-ui button:focus:not(:focus-visible),
.neto-header a:focus:not(:focus-visible),
.neto-header button:focus:not(:focus-visible),
.neto-ui-theme-btn:focus:not(:focus-visible) {
	outline: none !important;
}

body[class*="elementor"] .neto-header__burger,
body[class*="elementor"] .neto-header__burger:hover,
body[class*="elementor"] .neto-header__burger:focus,
body[class*="elementor"] .neto-header__burger:active,
body[class*="elementor"] .neto-header__burger:focus-visible,
.neto-header__burger:hover,
.neto-header__burger:focus,
.neto-header__burger:active,
.neto-header__burger:focus-visible {
	color: var(--neto-header-ink, #052b42) !important;
	background-image: none !important;
	outline: none !important;
	text-decoration: none !important;
	text-shadow: none !important;
}

body[class*="elementor"] .neto-header__burger:hover,
body[class*="elementor"] .neto-header__burger:focus,
body[class*="elementor"] .neto-header__burger:active,
body[class*="elementor"] .neto-header__burger:focus-visible {
	background: rgba(255, 255, 255, 0.45) !important;
	background-color: rgba(255, 255, 255, 0.45) !important;
	border-color: rgba(255, 255, 255, 0.65) !important;
	box-shadow: none !important;
}

body[class*="elementor"] .neto-header__burger:hover .neto-header__burger-lines span,
body[class*="elementor"] .neto-header__burger:focus .neto-header__burger-lines span,
body[class*="elementor"] .neto-header__burger:active .neto-header__burger-lines span,
body[class*="elementor"] .neto-header__burger .neto-header__burger-lines span {
	background: var(--neto-header-ink, #052b42) !important;
	background-color: var(--neto-header-ink, #052b42) !important;
	color: var(--neto-header-ink, #052b42) !important;
}

body[class*="elementor"] .neto-ui-theme-btn:focus,
body[class*="elementor"] .neto-ui-theme-btn:active,
body[class*="elementor"] .neto-ui-theme-btn:focus-visible {
	color: var(--neto-switch-fg) !important;
	background: var(--neto-switch-bg) !important;
	border-color: var(--neto-switch-border) !important;
	box-shadow: var(--neto-switch-shadow) !important;
}

/* Never allow Elementor default pink #c36 / #cc3366 inside Neto UI */
.neto-ui,
.neto-ui *,
.neto-header,
.neto-header *,
.neto-chat,
.neto-chat *,
.neto-ui-theme-switch,
.neto-ui-theme-switch *,
.neto-ui-theme-btn,
.neto-quotes__modal,
.neto-quotes__modal * {
	accent-color: var(--neto-brand) !important;
	caret-color: var(--neto-brand) !important;
}

/* Kill Elementor #c36 hover/focus paint on buttons & links */
.neto-ui button,
.neto-ui button:hover,
.neto-ui button:focus,
.neto-ui button:active,
.neto-ui button:focus-visible,
body[class*="elementor"] .neto-ui button,
body[class*="elementor"] .neto-ui button:hover,
body[class*="elementor"] .neto-ui button:focus,
body[class*="elementor"] .neto-ui button:active,
.neto-quotes button,
.neto-quotes button:hover,
.neto-quotes button:focus,
.neto-quotes button:active {
	background-image: none !important;
	outline-color: var(--neto-accent) !important;
}

.neto-quotes .neto-quotes__open,
.neto-quotes .neto-quotes__open:hover,
.neto-quotes .neto-quotes__open:focus,
.neto-quotes .neto-quotes__open:active,
.neto-quotes .neto-quotes__open:focus-visible,
body[class*="elementor"] .neto-quotes .neto-quotes__open,
body[class*="elementor"] .neto-quotes .neto-quotes__open:hover,
body[class*="elementor"] .neto-quotes .neto-quotes__open:focus,
body[class*="elementor"] .neto-quotes .neto-quotes__open:active,
.neto-portfolio .neto-portfolio__open,
.neto-portfolio .neto-portfolio__open:hover,
.neto-portfolio .neto-portfolio__open:focus,
.neto-portfolio .neto-portfolio__open:active,
.neto-portfolio .neto-portfolio__open:focus-visible,
body[class*="elementor"] .neto-portfolio .neto-portfolio__open,
body[class*="elementor"] .neto-portfolio .neto-portfolio__open:hover,
body[class*="elementor"] .neto-portfolio .neto-portfolio__open:focus,
body[class*="elementor"] .neto-portfolio .neto-portfolio__open:active {
	background: transparent !important;
	background-color: transparent !important;
	color: inherit !important;
	border-color: transparent !important;
	box-shadow: none !important;
}

/* Modal on body — kill Elementor red hover on close / expand */
.neto-portfolio__modal-x,
.neto-portfolio__modal-x:hover,
.neto-portfolio__modal-x:focus,
.neto-portfolio__modal-x:active,
.neto-portfolio__modal-x:focus-visible,
body[class*="elementor"] .neto-portfolio__modal-x,
body[class*="elementor"] .neto-portfolio__modal-x:hover,
body[class*="elementor"] .neto-portfolio__modal-x:focus,
body[class*="elementor"] .neto-portfolio__modal-x:active {
	background-color: transparent !important;
	background: color-mix(in srgb, var(--neto-card, #fff) 88%, transparent) !important;
	color: var(--neto-ink) !important;
	border-color: var(--neto-line) !important;
	box-shadow: none !important;
}

html[data-neto-ui-theme="dark"] .neto-portfolio__modal-x,
html[data-neto-ui-theme="dark"] .neto-portfolio__modal-x:hover,
html[data-neto-ui-theme="dark"] .neto-portfolio__modal-x:focus,
html[data-neto-ui-theme="dark"] .neto-portfolio__modal-x:active,
html[data-neto-ui-theme="dark"] body[class*="elementor"] .neto-portfolio__modal-x,
html[data-neto-ui-theme="dark"] body[class*="elementor"] .neto-portfolio__modal-x:hover,
html[data-neto-ui-theme="dark"] body[class*="elementor"] .neto-portfolio__modal-x:focus,
html[data-neto-ui-theme="dark"] body[class*="elementor"] .neto-portfolio__modal-x:active {
	background: rgba(25, 25, 25, 0.9) !important;
	color: #fafafa !important;
	border-color: #27272a !important;
}

/* Expand: keep glass; only kill Elementor red text */
.neto-portfolio__expand,
.neto-portfolio__expand:hover,
.neto-portfolio__expand:focus,
.neto-portfolio__expand:active,
.neto-portfolio__expand:focus-visible,
body[class*="elementor"] .neto-portfolio__expand,
body[class*="elementor"] .neto-portfolio__expand:hover,
body[class*="elementor"] .neto-portfolio__expand:focus,
body[class*="elementor"] .neto-portfolio__expand:active {
	color: var(--neto-brand) !important;
	text-decoration: none !important;
}

html[data-neto-ui-theme="dark"] .neto-portfolio__expand,
html[data-neto-ui-theme="dark"] .neto-portfolio__expand:hover,
html[data-neto-ui-theme="dark"] .neto-portfolio__expand:focus,
html[data-neto-ui-theme="dark"] .neto-portfolio__expand:active,
html[data-neto-ui-theme="dark"] body[class*="elementor"] .neto-portfolio__expand,
html[data-neto-ui-theme="dark"] body[class*="elementor"] .neto-portfolio__expand:hover,
html[data-neto-ui-theme="dark"] body[class*="elementor"] .neto-portfolio__expand:focus,
html[data-neto-ui-theme="dark"] body[class*="elementor"] .neto-portfolio__expand:active {
	color: #00d7ff !important;
}

.neto-portfolio__seo-more,
.neto-portfolio__seo-more:hover,
.neto-portfolio__seo-more:focus,
.neto-portfolio__seo-more:active,
.neto-portfolio__seo-more:focus-visible,
body[class*="elementor"] .neto-portfolio__seo-more,
body[class*="elementor"] .neto-portfolio__seo-more:hover,
body[class*="elementor"] .neto-portfolio__seo-more:focus,
body[class*="elementor"] .neto-portfolio__seo-more:active {
	color: var(--neto-brand) !important;
	text-decoration: none !important;
}

html[data-neto-ui-theme="dark"] .neto-portfolio__seo-more,
html[data-neto-ui-theme="dark"] .neto-portfolio__seo-more:hover,
html[data-neto-ui-theme="dark"] .neto-portfolio__seo-more:focus,
html[data-neto-ui-theme="dark"] .neto-portfolio__seo-more:active,
html[data-neto-ui-theme="dark"] body[class*="elementor"] .neto-portfolio__seo-more,
html[data-neto-ui-theme="dark"] body[class*="elementor"] .neto-portfolio__seo-more:hover,
html[data-neto-ui-theme="dark"] body[class*="elementor"] .neto-portfolio__seo-more:focus,
html[data-neto-ui-theme="dark"] body[class*="elementor"] .neto-portfolio__seo-more:active {
	color: #00d7ff !important;
}

/* Modal lives on body — kill Elementor red hover on close / expand */
.neto-portfolio__modal-x,
.neto-portfolio__modal-x:hover,
.neto-portfolio__modal-x:focus,
.neto-portfolio__modal-x:active,
.neto-portfolio__modal-x:focus-visible,
body[class*="elementor"] .neto-portfolio__modal-x,
body[class*="elementor"] .neto-portfolio__modal-x:hover,
body[class*="elementor"] .neto-portfolio__modal-x:focus,
body[class*="elementor"] .neto-portfolio__modal-x:active,
.neto-portfolio__expand,
.neto-portfolio__expand:hover,
.neto-portfolio__expand:focus,
.neto-portfolio__expand:active,
.neto-portfolio__expand:focus-visible,
body[class*="elementor"] .neto-portfolio__expand,
body[class*="elementor"] .neto-portfolio__expand:hover,
body[class*="elementor"] .neto-portfolio__expand:focus,
body[class*="elementor"] .neto-portfolio__expand:active {
	background-color: transparent !important;
	box-shadow: none !important;
}

.neto-ui a:focus-visible,
.neto-ui button:focus-visible,
.neto-header a:focus-visible,
.neto-header button:focus-visible,
.neto-ui-theme-btn:focus-visible,
.neto-quotes__open:focus-visible {
	outline: 2px solid var(--neto-accent) !important;
	outline-offset: 3px !important;
}

/* Strip Elementor pink/red leftovers if theme paints them */
body[class*="elementor"] .neto-ui,
body[class*="elementor"] .neto-ui *,
body[class*="elementor"] .neto-header,
body[class*="elementor"] .neto-header * {
	--e-global-color-primary: var(--neto-brand) !important;
	--e-global-color-secondary: var(--neto-accent) !important;
	--e-global-color-accent: var(--neto-brand) !important;
}

.neto-ui > .neto-hero,
.neto-ui > .neto-services,
.neto-ui > .neto-promo,
.neto-ui > .neto-why,
.neto-ui > .neto-features,
.neto-ui > .neto-portfolio,
.neto-ui > .neto-quotes,
.neto-ui > .neto-blog,
.neto-ui > .neto-brands,
.neto-ui > .neto-team,
.neto-ui > .neto-footer {
	margin-block: 0;
	max-width: 100%;
}

/* Kill Elementor shortcode chrome gaps around the continuous canvas */
.elementor-widget-shortcode:has(.neto-ui),
.elementor-element:has(> .elementor-widget-container .neto-ui) {
	margin: 0 !important;
	padding: 0 !important;
}

.elementor-widget-shortcode:has(.neto-ui) > .elementor-widget-container,
.elementor-widget-shortcode:has(.neto-ui) .elementor-widget-container {
	margin: 0 !important;
	padding: 0 !important;
}

/* Shared section shell — use on every future block */
.neto-ui-section {
	width: 100%;
	box-sizing: border-box;
}

.neto-ui-wrap {
	width: 100%;
	max-width: var(--neto-content-max, 1300px);
	margin-inline: auto;
	padding-inline: var(--neto-pad-x);
	box-sizing: border-box;
}

/* Section H2 — compact, refined (not billboard) */
.neto-services__title,
.neto-why__title,
.neto-quotes__title,
.neto-features__title,
.neto-brands__title,
.neto-portfolio__title,
.neto-blog__title {
	font-size: clamp(1.2rem, 1.85vw, 1.5rem) !important;
	font-weight: 600 !important;
	letter-spacing: -0.015em;
	line-height: 1.55;
	text-wrap: balance;
}

/* Theme switcher — shortcode [neto_ui_theme]
 * No fat neon/soft shadows (they look like phantom margin in Elementor columns).
 */
.neto-ui-theme-switch {
	display: inline-flex;
	vertical-align: middle;
	line-height: 0;
	margin: 0;
	padding: 0;
	max-width: 100%;
}

.neto-ui-theme-btn {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0 !important;
	padding: 0;
	border: 1px solid var(--neto-switch-border);
	border-radius: 12px;
	background: var(--neto-switch-bg);
	color: var(--neto-switch-fg);
	box-shadow: var(--neto-switch-shadow);
	cursor: pointer;
	backdrop-filter: blur(10px) saturate(1.1);
	-webkit-backdrop-filter: blur(10px) saturate(1.1);
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.neto-ui-theme-btn:hover,
.neto-ui-theme-btn:focus-visible {
	border-color: color-mix(in srgb, var(--neto-accent) 55%, var(--neto-switch-border));
	color: var(--neto-accent);
	outline: none;
}

.neto-ui-theme-btn:active {
	opacity: 0.92;
}

.neto-ui-theme-btn svg {
	display: block;
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
}

.neto-ui-theme-btn__sun,
.neto-ui-theme-btn__moon {
	display: none;
	line-height: 0;
}

html[data-neto-ui-theme="light"] .neto-ui-theme-btn__moon,
html:not([data-neto-ui-theme]) .neto-ui-theme-btn__moon {
	display: inline-flex;
}

html[data-neto-ui-theme="dark"] .neto-ui-theme-btn__sun {
	display: inline-flex;
}

/* Elementor shortcode widget: kill default widget gap around the switch */
.elementor-widget-shortcode:has(.neto-ui-theme-switch),
.elementor-element:has(> .elementor-widget-container .neto-ui-theme-switch) {
	margin: 0 !important;
	padding: 0 !important;
}

.elementor-widget-shortcode:has(.neto-ui-theme-switch) .elementor-widget-container,
.elementor-widget-shortcode:has(.neto-ui-theme-switch) > .elementor-widget-container {
	margin: 0 !important;
	padding: 0 !important;
}

.elementor-widget-shortcode .neto-ui-theme-btn,
.elementor-element .neto-ui-theme-btn {
	background: var(--neto-switch-bg) !important;
	color: var(--neto-switch-fg) !important;
	border-color: var(--neto-switch-border) !important;
	box-shadow: var(--neto-switch-shadow) !important;
	margin: 0 !important;
}