/* ==========================================================================
   Blacklistseller — site navigation
   Mobile-first: roughly 90% of traffic is mobile.

   WHY THIS FILE USES A `bls-` NAMESPACE INSTEAD OF BOOTSTRAP'S `.navbar-*`
   ------------------------------------------------------------------------
   `base/header_common.php` loads Bootstrap 3's `non-responsive.css`
   site-wide. That stylesheet exists specifically to *disable* Bootstrap's
   responsive behaviour, and two of its rules made a mobile menu impossible:

       .navbar-toggle   { display: none; }                 -- no hamburger, ever
       .navbar-collapse { display: block !important;
                          visibility: visible !important; } -- menu always open

   Rather than fight those with escalating `!important`, the markup uses its
   own class names so `non-responsive.css` simply never matches. The menu is
   driven by a small inline script in `base/navbar.php` instead of Bootstrap's
   collapse/dropdown plugins, so it does not depend on jQuery load order.

   LAYOUT
   ------
   Mobile (< 992px): fixed compact top bar (brand + account) and a fixed
   bottom tab bar holding the primary actions, which keeps them in the
   thumb zone on tall phones.
   Desktop (>= 992px): single fixed bar; the bottom tab bar is hidden.

   The navbar is `position: fixed`, so the body offset is applied here. The
   `html body` selector is deliberate: `header_common.php` sets
   `body { padding: 0 !important }`, which a plain `body` rule cannot beat.
   The offsets equal the bar heights, so page content sits exactly where it
   did when the navbar was in normal flow — no vertical shift.
   ========================================================================== */

:root {
	--bls-nav-h: 56px;
	--bls-tabbar-h: 58px;

	/* Dark-theme palette. Every value below is contrast-checked against the
	   bar surface (#161a23): body text clears WCAG 1.4.3 (4.5:1) and control
	   borders clear WCAG 1.4.11 (3:1) for non-text UI boundaries.

	   The earlier values failed badly on the non-text side — a 9%-alpha
	   border measured 1.28:1 and a 4%-alpha fill 1.10:1, so button edges were
	   effectively invisible and the whole menu read as mush. Text was never
	   the problem; surfaces and borders were. */
	--bls-surface: rgba(22, 26, 35, 0.95);
	--bls-surface-solid: #161a23;
	--bls-panel: #212636;

	/* Structural hairlines (bar underline, menu separators): 1.65:1 — low by
	   design, these divide rather than enclose. */
	--bls-border: rgba(255, 255, 255, 0.16);
	/* Edges of interactive controls: 3.12:1, clears 1.4.11. */
	--bls-control-border: rgba(255, 255, 255, 0.34);
	/* Resting fill of interactive controls: reads as a distinct surface. */
	--bls-control-bg: rgba(255, 255, 255, 0.10);

	--bls-text: #ffffff;        /* 17.4:1 on the bar */
	--bls-text-dim: #dde1e8;    /* 13.3:1 — still visibly dimmer than --bls-text, but closer to white than the old #b4bcc9 (9.1:1) */

	--bls-accent: #00d9ff;      /* 10.3:1 on the bar */
	--bls-accent-ink: #04212b;  /* 9.8:1 on the accent fill */

	--bls-hover: rgba(255, 255, 255, 0.18);
	--bls-radius: 10px;
	--bls-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 992px) {
	:root {
		--bls-nav-h: 70px;
	}
}

html body {
	padding-top: var(--bls-nav-h) !important;
}

/* Clearance for the fixed bottom tab bar (mobile/tablet only). */
@media (max-width: 991px) {
	html body {
		padding-bottom: calc(var(--bls-tabbar-h) + 16px + env(safe-area-inset-bottom, 0px)) !important;
	}
}

/* ==========================================================================
   Top bar
   ========================================================================== */

.bls-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	/* Above home.php's full-viewport #loading-overlay (z-index: 9999), which
	   otherwise dims the navbar along with the rest of the page for the first
	   ~500ms after load. Below the #js-disabled-notice block in
	   header_common.php (999999), which is meant to cover absolutely
	   everything including navigation. SweetAlert2's own z-index (1060 by
	   default) is lower than this already, so it is unaffected either way. */
	z-index: 10000;
	height: var(--bls-nav-h);
	background: var(--bls-surface-solid);
	border-bottom: 1px solid var(--bls-border);
	/* Elevation: the bar is darker than the page gradient behind it, so a
	   shadow is what actually separates the two surfaces. */
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
	font-family: 'Prompt', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Translucent blur only where supported, so the solid colour stays the fallback. */
@supports ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) {
	.bls-nav {
		background: var(--bls-surface);
		-webkit-backdrop-filter: blur(12px) saturate(140%);
		backdrop-filter: blur(12px) saturate(140%);
	}
}

.bls-nav__inner {
	height: 100%;
	margin: 0 auto;
	padding: 0 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

/* ---------- Brand ---------- */

.bls-nav__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	text-decoration: none;
	border-radius: var(--bls-radius);
	padding: 4px 6px;
	margin-left: -6px;
}

.bls-nav__brand:hover,
.bls-nav__brand:focus {
	text-decoration: none;
	background: var(--bls-hover);
}

.bls-nav__brand img {
	display: block;
	height: 36px;
	width: 36px;
	object-fit: contain;
}

.bls-nav__brand-text {
	color: var(--bls-text);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0.2px;
	white-space: nowrap;
}

/* ---------- Primary actions (desktop only) ---------- */

.bls-nav__primary {
	display: none;
	align-items: center;
	gap: 10px;
}

.bls-nav__link,
.bls-nav__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 42px;
	padding: 0 16px;
	border-radius: var(--bls-radius);
	font-size: 15px;
	font-weight: 500;
	white-space: nowrap;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background-color 0.2s var(--bls-ease), border-color 0.2s var(--bls-ease), color 0.2s var(--bls-ease);
}

.bls-nav__link {
	color: var(--bls-text);
	border-color: var(--bls-control-border);
	background: var(--bls-control-bg);
}

.bls-nav__link:hover,
.bls-nav__link:focus {
	color: var(--bls-text);
	text-decoration: none;
	background: var(--bls-hover);
	border-color: rgba(255, 255, 255, 0.5);
}

.bls-nav__link.is-active {
	color: var(--bls-accent);
	border-color: rgba(0, 217, 255, 0.75);
	background: rgba(0, 217, 255, 0.16);
}

/* The conversion action (report a blacklist) keeps the same shape emphasis
   as .bls-nav__link, but blue fill is reserved for .is-active — otherwise it
   would permanently look "active" even on pages that aren't report_add,
   same issue fixed on the mobile tab bar's CTA item below. */
.bls-nav__cta {
	color: var(--bls-text);
	border-color: var(--bls-control-border);
	background: var(--bls-control-bg);
	font-weight: 600;
}

.bls-nav__cta:hover,
.bls-nav__cta:focus {
	color: var(--bls-text);
	text-decoration: none;
	background: var(--bls-hover);
	border-color: rgba(255, 255, 255, 0.5);
}

.bls-nav__cta.is-active {
	color: var(--bls-accent-ink);
	border-color: var(--bls-accent);
	background: var(--bls-accent);
}

.bls-nav__icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	stroke-width: 2;
}

/* ---------- Account area ---------- */

.bls-nav__end {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.bls-nav__account {
	position: relative;
}

.bls-nav__account-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	/* >= 44px tall for a comfortable touch target. */
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--bls-control-border);
	border-radius: var(--bls-radius);
	background: var(--bls-control-bg);
	color: var(--bls-text);
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.2s var(--bls-ease), border-color 0.2s var(--bls-ease);
}

.bls-nav__account-btn:hover,
.bls-nav__account-btn:focus {
	color: var(--bls-text);
	text-decoration: none;
	background: var(--bls-hover);
	border-color: rgba(255, 255, 255, 0.5);
}

/* The display name is noise on a narrow phone bar; the icon carries it. */
.bls-nav__account-name {
	display: none;
	max-width: 140px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bls-nav__caret {
	width: 14px;
	height: 14px;
	stroke-width: 2.5;
	transition: transform 0.2s var(--bls-ease);
}

.bls-nav__account-btn[aria-expanded="true"] .bls-nav__caret {
	transform: rotate(180deg);
}

/* ---------- Account dropdown panel ---------- */

.bls-nav__panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 210px;
	padding: 6px;
	background: var(--bls-panel);
	/* A floating surface needs a readable edge, not a hairline. */
	border: 1px solid var(--bls-control-border);
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
	/* Above .bls-nav itself. */
	z-index: 10010;
	animation: bls-panel-in 0.16s var(--bls-ease);
}

.bls-nav__panel[hidden] {
	display: none;
}

@keyframes bls-panel-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.bls-nav__panel-item {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 12px;
	border-radius: 8px;
	color: var(--bls-text);
	font-size: 15px;
	text-decoration: none;
	transition: background-color 0.15s var(--bls-ease), color 0.15s var(--bls-ease);
}

.bls-nav__panel-item:hover,
.bls-nav__panel-item:focus {
	text-decoration: none;
	background: var(--bls-hover);
	color: var(--bls-accent);
}

.bls-nav__panel-item--danger:hover,
.bls-nav__panel-item--danger:focus {
	color: #ff8178;
	background: rgba(255, 129, 120, 0.1);
}

.bls-nav__panel-sep {
	height: 1px;
	margin: 6px 8px;
	background: var(--bls-border);
}

/* ==========================================================================
   Bottom tab bar — mobile/tablet only
   ========================================================================== */

.bls-tabbar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	/* Same reasoning as .bls-nav above — stays visible over the loading
	   overlay instead of being dimmed by it. */
	z-index: 10000;
	display: flex;
	align-items: stretch;
	height: calc(var(--bls-tabbar-h) + env(safe-area-inset-bottom, 0px));
	padding-bottom: env(safe-area-inset-bottom, 0px);
	background: var(--bls-surface-solid);
	border-top: 1px solid var(--bls-border);
	/* Lifts the bar off content scrolling underneath it. */
	box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.5);
	font-family: 'Prompt', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

@supports ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) {
	.bls-tabbar {
		background: var(--bls-surface);
		-webkit-backdrop-filter: blur(12px) saturate(140%);
		backdrop-filter: blur(12px) saturate(140%);
	}
}

.bls-tabbar__item {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 6px 4px;
	color: var(--bls-text-dim);
	/* Thai script carries more detail per glyph than Latin and needs the
	   extra size to stay legible at tab-bar scale. */
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	/* Kills the grey tap flash on Android/Chrome. */
	-webkit-tap-highlight-color: transparent;
	transition: color 0.2s var(--bls-ease);
}

.bls-tabbar__item:hover,
.bls-tabbar__item:focus {
	color: var(--bls-text);
	text-decoration: none;
}

.bls-tabbar__item:active {
	background: var(--bls-hover);
}

.bls-tabbar__item.is-active {
	color: var(--bls-accent);
}

.bls-tabbar__icon {
	/* box-sizing: border-box is the key line here — it's what lets the CTA
	   variant below add padding for its round badge without growing past
	   this same 26x26 footprint. All three tab icons share one footprint so
	   each item's flex column is the same total height and the labels stay
	   aligned across the row; previously the CTA icon was sized 31px + 4px
	   padding (content-box, ~39px total) against 23px for the other two,
	   and that height difference is what pushed its label down. */
	box-sizing: border-box;
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	stroke-width: 2;
}

.bls-tabbar__label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

/* Emphasise the conversion action's shape without implying it's the active
   tab — blue is reserved for "you are here" everywhere else in the bar, so
   the badge stays neutral until .is-active actually earns that colour. */
.bls-tabbar__item--cta .bls-tabbar__icon {
	/* Same 26x26 footprint as the other two icons (border-box above keeps
	   this padding from growing it) — the badge reads as distinct through
	   shape and a filled circle, not permanent colour, so the row stays
	   aligned and "blue" keeps one meaning. */
	padding: 3px;
	border-radius: 50%;
	background: var(--bls-control-bg);
	border: 1px solid var(--bls-control-border);
	color: var(--bls-text-dim);
}

.bls-tabbar__item--cta:hover .bls-tabbar__icon,
.bls-tabbar__item--cta:focus .bls-tabbar__icon {
	background: var(--bls-hover);
	border-color: rgba(255, 255, 255, 0.5);
	color: var(--bls-text);
}

.bls-tabbar__item--cta.is-active .bls-tabbar__icon {
	background: var(--bls-accent);
	border-color: var(--bls-accent);
	color: var(--bls-accent-ink);
	box-shadow: 0 2px 10px rgba(0, 217, 255, 0.35);
}

.bls-tabbar__item--cta.is-active .bls-tabbar__label {
	color: var(--bls-accent);
	font-weight: 600;
}

/* ==========================================================================
   Desktop
   ========================================================================== */

@media (min-width: 992px) {
	.bls-nav__inner {
		max-width: 1280px;
		padding: 0 24px;
		/* Three tracks so the primary actions are optically centred
		   regardless of how wide the brand or account area gets. */
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		gap: 16px;
	}

	.bls-nav__brand {
		justify-self: start;
	}

	.bls-nav__brand img {
		height: 46px;
		width: 46px;
	}

	.bls-nav__brand-text {
		font-size: 19px;
	}

	.bls-nav__primary {
		display: flex;
		justify-self: center;
	}

	.bls-nav__end {
		justify-self: end;
	}

	.bls-nav__account-name {
		display: block;
	}

	.bls-tabbar {
		display: none;
	}
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Visible keyboard focus. `:focus-visible` keeps it off mouse/touch clicks. */
.bls-nav a:focus-visible,
.bls-nav button:focus-visible,
.bls-tabbar a:focus-visible {
	outline: 2px solid var(--bls-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.bls-nav *,
	.bls-tabbar * {
		transition: none !important;
		animation: none !important;
	}
}