/* ==========================================================
   Pixi Theme Builder Kit — ebw-extra.css
   Covers: Site Logo · Nav Menu · Login Form · Register Form
           · Scroll To Top
   ========================================================== */

/* ── Shared form box ──────────────────────────────────────── */
.ebw-form-box {
	background: #fff;
	border-radius: 10px;
	padding: 36px;
	box-shadow: 0 4px 24px rgba(0,0,0,.08);
}

.ebw-form-heading {
	font-size: 22px;
	font-weight: 700;
	color: #111827;
	margin: 0 0 24px;
	line-height: 1.3;
}

.ebw-already-logged-in {
	font-size: 14px;
	color: #6b7280;
	padding: 16px;
	background: #f9fafb;
	border-radius: 8px;
	text-align: center;
}

/* Field group */
.ebw-field-group {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-bottom: 16px;
}
.ebw-field-group:last-child { margin-bottom: 0; }

.ebw-field-group label {
	font-size: 13px;
	font-weight: 600;
	color: #374151;
}

.ebw-field-group input[type="text"],
.ebw-field-group input[type="email"],
.ebw-field-group input[type="password"] {
	width: 100%;
	height: 48px;
	padding: 0 14px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	font-size: 14px;
	color: #111827;
	background: #fff;
	box-sizing: border-box;
	transition: border-color .2s ease, box-shadow .2s ease;
	font-family: inherit;
}

.ebw-field-group input:focus {
	outline: none;
	border-color: #4f46e5;
	box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}

/* Checkbox */
.ebw-checkbox-group { flex-direction: row; align-items: center; }
.ebw-checkbox-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #374151;
	cursor: pointer;
}
.ebw-checkbox-label input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }

/* Submit */
.ebw-form-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 48px;
	background: #4f46e5;
	color: #fff;
	border: none;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background .2s ease, transform .15s ease;
	font-family: inherit;
}
.ebw-form-submit:hover { background: #4338ca; transform: translateY(-1px); }

/* Form links */
.ebw-form-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin-top: 16px;
	font-size: 13px;
}
.ebw-form-links a {
	color: #4f46e5;
	text-decoration: none;
}
.ebw-form-links a:hover { color: #4338ca; text-decoration: underline; }
.ebw-form-links__reg { color: #6b7280; }

/* Registration two-col row */
.ebw-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
@media ( max-width: 480px ) { .ebw-field-row { grid-template-columns: 1fr; } }

.ebw-register-hint {
	font-size: 12px;
	color: #9ca3af;
	margin: -8px 0 0;
}

/* ==========================================================
   SITE LOGO
   ========================================================== */
.ebw-site-logo { line-height: 0; }
.ebw-site-logo a { display: inline-block; }
.ebw-logo-img {
	display: block;
	max-width: 200px;
	height: auto;
	transition: opacity .2s ease, filter .2s ease;
}
.ebw-site-logo a:hover .ebw-logo-img { opacity: .85; }

.ebw-logo-text {
	display: inline-block;
	font-size: 24px;
	font-weight: 700;
	color: #111827;
	line-height: 1.2;
}
.ebw-logo-text a {
	color: inherit;
	text-decoration: none;
}
.ebw-logo-text a:hover { color: #4f46e5; }

/* ==========================================================
   NAV MENU
   ========================================================== */
.ebw-nav-wrapper { margin: 0; }

.ebw-nav-menu {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 4px;
}

/* Vertical layout */
.ebw-nav-menu--vertical {
	flex-direction: column;
	gap: 2px;
}

.ebw-nav-menu li { position: relative; }

/* Defensive: some themes/page builders add bullets via a ::before
   pseudo-element's `content` property instead of the native
   `list-style` — list-style:none above has zero effect on that
   separate mechanism. !important here so this wins regardless of
   which stylesheet or cascade order the conflicting rule comes from. */
.ebw-nav-menu li::before,
.ebw-nav-menu li::marker { content: none !important; }

.ebw-nav-menu a {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 8px 14px;
	color: #374151;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	border-radius: 6px;
	white-space: nowrap;
	transition: color .2s ease, background .2s ease;
}
.ebw-nav-menu > li > a:hover,
.ebw-nav-menu > li.current-menu-item > a,
.ebw-nav-menu > li.current-menu-ancestor > a {
	color: #4f46e5;
	background: #f5f3ff;
}

/* Dropdown arrow */
.ebw-sub-arrow {
	font-size: 10px;
	line-height: 1;
	opacity: .6;
	margin-left: 2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform .2s ease;
}
.ebw-sub-arrow > svg, .ebw-sub-arrow > img {
	width: 1em;
	height: 1em;
}
.ebw-nav-menu > li:hover > a .ebw-sub-arrow { transform: rotate(180deg); }

/* Sub-menu */
.ebw-nav-menu .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 9000;
	min-width: 200px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0,0,0,.12);
	list-style: none;
	margin: 4px 0 0;
	padding: 6px;
}
.ebw-nav-menu > li:hover > .sub-menu { display: block; }

.ebw-nav-menu .sub-menu a {
	font-size: 13px;
	padding: 8px 12px;
	color: #374151;
	border-radius: 5px;
}
.ebw-nav-menu .sub-menu a:hover { color: #4f46e5; background: #f5f3ff; }

/* Vertical sub-menu */
.ebw-nav-menu--vertical .sub-menu {
	position: static;
	box-shadow: none;
	border: none;
	border-left: 2px solid #e5e7eb;
	border-radius: 0;
	margin: 2px 0 2px 16px;
	padding: 4px 0;
	background: transparent;
}

/* Hide sub-menu when no-sub class applied */
.ebw-nav-menu--no-sub .sub-menu { display: none !important; }

/* ==========================================================
   NAV MENU — MOBILE / HAMBURGER
   ========================================================== */
.ebw-nav-wrapper-outer { position: relative; }

.ebw-mobile-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	box-sizing: border-box;
	cursor: pointer;
	line-height: 1;
	color: inherit;
	transition: background-color .2s ease, color .2s ease;
}
.ebw-mobile-toggle__icon, .ebw-mobile-close__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
.ebw-mobile-toggle__icon[hidden] { display: none; }
.ebw-mobile-toggle__icon > svg, .ebw-mobile-toggle__icon > img,
.ebw-mobile-close__icon > svg, .ebw-mobile-close__icon > img {
	width: 1em;
	height: 1em;
}

.ebw-nav-panel--mobile { display: none; }

.ebw-mobile-logo { display: flex; }
.ebw-mobile-logo img { max-width: 100%; height: auto; display: block; }

.ebw-nav-menu--mobile { flex-direction: column; width: 100%; }
.ebw-nav-menu--mobile-horizontal { flex-direction: row; flex-wrap: wrap; width: auto; }

/* Vertical (default) mode: full-width tappable rows — align content
   inside the link itself so alignment is guaranteed regardless of any
   flex stretch/shrink behavior on the <li>. */
.ebw-nav-menu--mobile:not(.ebw-nav-menu--mobile-horizontal) > li,
.ebw-nav-menu--mobile:not(.ebw-nav-menu--mobile-horizontal) > li > a {
	width: 100%;
}
.ebw-nav-menu--mobile .sub-menu {
	position: static;
	box-shadow: none;
	border: none;
	border-left: 2px solid #e5e7eb;
	border-radius: 0;
	margin: 2px 0 2px 16px;
	padding: 4px 0;
	background: transparent;
	display: none;
}

/* Click (accordion) trigger — open state toggled via JS. */
.ebw-nav-menu--mobile.ebw-mobile-submenu-click > li.ebw-submenu-open > .sub-menu { display: block; }
.ebw-nav-menu--mobile.ebw-mobile-submenu-click .ebw-sub-arrow { cursor: pointer; pointer-events: auto; }
.ebw-nav-menu--mobile.ebw-mobile-submenu-click li.ebw-submenu-open > a .ebw-sub-arrow { transform: rotate(180deg); }

/* Hover trigger. */
.ebw-nav-menu--mobile.ebw-mobile-submenu-hover > li:hover > .sub-menu { display: block; }

.ebw-mobile-panel-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}

.ebw-mobile-close {
	display: none;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	box-sizing: border-box;
	cursor: pointer;
	font-size: 20px;
	color: inherit;
	margin-left: auto;
	flex-shrink: 0;
	transition: background-color .2s ease, color .2s ease;
}
.ebw-mobile-sidebar .ebw-mobile-close { display: inline-flex; }

.ebw-sidebar-overlay { display: none; position: fixed; inset: 0; z-index: 99999; }

/* JS-driven safety net (see ebw-nav-menu.js) — mirrors the inline
   per-instance @media rule but is toggled from window.innerWidth at
   runtime, so it still works correctly even if a caching/optimization
   plugin interferes with the body-embedded <style> tag's media query. */
.ebw-nav-wrapper-outer.ebw-force-mobile > .ebw-nav-wrapper--desktop { display: none !important; }
.ebw-nav-wrapper-outer.ebw-force-mobile > .ebw-mobile-toggle { display: inline-flex !important; }
.ebw-nav-wrapper-outer.ebw-force-desktop > .ebw-nav-wrapper--desktop { display: block !important; }
.ebw-nav-wrapper-outer.ebw-force-desktop > .ebw-mobile-toggle { display: none !important; }
.ebw-nav-wrapper-outer.ebw-force-desktop > .ebw-nav-panel--mobile { display: none !important; }
.ebw-nav-wrapper-outer.ebw-force-desktop > .ebw-sidebar-overlay { display: none !important; }

/* ==========================================================
   SCROLL TO TOP
   ========================================================== */
.ebw-scroll-to-top {
	position: fixed;
	bottom: 32px;
	right: var( --ebw-stt-offset, 32px );
	z-index: 9999;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #4f46e5;
	color: #fff;
	border: none;
	display: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(79,70,229,.35);
	transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
	font-size: 18px;
	gap: 6px;
	padding: 0 12px;
}
.ebw-scroll-to-top--bottom-left {
	right: auto;
	left: var( --ebw-stt-offset, 32px );
}
.ebw-scroll-to-top--bottom-center {
	right: auto;
	left: 50%;
	transform: translateX(-50%);
}
.ebw-scroll-to-top:hover {
	background: #4338ca;
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(79,70,229,.4);
}
.ebw-scroll-to-top--bottom-center:hover {
	transform: translateX(-50%) translateY(-2px);
}
.ebw-stt-label {
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

/* fade-in animation + visibility, toggled via a class (not inline style) */
@keyframes ebw-stt-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}
.ebw-scroll-to-top.is-visible {
	display: flex;
	animation: ebw-stt-in .25s ease forwards;
}
.ebw-scroll-to-top--bottom-center.is-visible {
	animation-name: none; /* avoid fighting the translateX(-50%) centering */
}

/* ── Elementor editor visibility ──────────────────────────────────
   The mobile toggle/panel are hidden by default outside their
   breakpoint (correctly, for the live site) — but that also makes
   them impossible to click into and style from inside the Elementor
   editor unless you're actively previewing at that exact breakpoint.
   Elementor adds `elementor-editor-active` to the preview iframe's
   <body> while editing (never on the published site), and
   `elementor-device-mode-{desktop|tablet|mobile}` reflecting the
   currently selected responsive preview mode in the editor toolbar.
   Scoping to both means this only ever shows when you're actually
   looking at the Mobile preview — switching back to Desktop preview
   in the editor behaves like the real site again. */
body.elementor-editor-active.elementor-device-mode-mobile .ebw-mobile-toggle,
body.elementor-editor-active.elementor-device-mode-mobile .ebw-nav-wrapper-outer.ebw-force-desktop > .ebw-mobile-toggle {
	display: inline-flex !important;
}
body.elementor-editor-active.elementor-device-mode-mobile .ebw-nav-panel--mobile,
body.elementor-editor-active.elementor-device-mode-mobile .ebw-nav-wrapper-outer.ebw-force-desktop > .ebw-nav-panel--mobile {
	display: block !important;
	position: static !important;
	transform: none !important;
	max-height: none !important;
	opacity: 1 !important;
	overflow: visible !important;
}
body.elementor-editor-active.elementor-device-mode-mobile .ebw-nav-panel--mobile .sub-menu {
	display: block !important;
	position: static !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	pointer-events: auto !important;
}
body.elementor-editor-active.elementor-device-mode-mobile .ebw-sidebar-overlay {
	display: none !important;
}