/* ═══════════════════════════════════════════════════════════
   CBASCO Haika — Main Stylesheet
   - Self-hosted Vazirmatn font (fonts/)
   - Design System: Steel / Industrial Dark
   - Globals, header, footer, typography, utilities
═══════════════════════════════════════════════════════════ */

/* ───── FONTS (self-hosted, no CDN) ───── */
@font-face {
	font-family: 'Vazirmatn';
	src: url('../fonts/Vazirmatn-Thin.woff2') format('woff2');
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Vazirmatn';
	src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
	font-weight: 300 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Vazirmatn';
	src: url('../fonts/Vazirmatn-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Vazirmatn';
	src: url('../fonts/Vazirmatn-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Vazirmatn';
	src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Vazirmatn';
	src: url('../fonts/Vazirmatn-ExtraBold.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Vazirmatn';
	src: url('../fonts/Vazirmatn-Black.woff2') format('woff2');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

/* ───── DESIGN TOKENS ───── */
:root {
	/* Background layers */
	--cb-bg:        #0d1117;
	--cb-bg-2:      #111822;
	--cb-bg-3:      #161d2a;
	--cb-bg-4:      #192840;

	/* Steel palette */
	--cb-steel:     #6aaecc;
	--cb-steel-l:   #a0d0e8;
	--cb-steel-d:   #3a7ea0;
	--cb-steel-m:   #90c8e4;

	/* Text scale */
	--cb-text:        #ddeaf6;
	--cb-text-2:      #7aaec8;
	--cb-text-body:   #5a7e9a;
	--cb-muted:       #4a6e88;
	--cb-ghost:       #2a4a60;
	--cb-highlight:   #c8e0f0;

	/* Borders & overlays */
	--cb-border:       rgba(100,170,210,.14);
	--cb-border-hover: rgba(100,170,210,.30);
	--cb-badge-bg:     rgba(100,170,210,.09);
	--cb-glow:         rgba(80,140,200,.22);

	/* Gradients */
	--cb-grad-hero:    linear-gradient(135deg, #ddeef8 20%, #6aaecc 60%, #c0d8ee 100%);
	--cb-grad-logo:    linear-gradient(90deg, #6aaecc, #a0d0e8);
	--cb-grad-stat:    linear-gradient(135deg, #a8d0e8, #6aaecc);
	--cb-grad-tag:     linear-gradient(90deg, #6aaecc, transparent);

	/* Layout */
	--cb-max:  1080px;
	--cb-pad:  2rem;

	/* Radii */
	--cb-r-sm: 8px;
	--cb-r-md: 14px;
	--cb-r-lg: 20px;
	--cb-r-xl: 24px;

	/* Transitions */
	--cb-tr-fast: .22s ease;
	--cb-tr:      .35s ease;
	--cb-tr-slow: .6s ease;
}

/* ───── RESET / BASE ───── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body.cbasco-theme {
	margin: 0;
	padding: 0;
	/* Vazirmatn for Persian + native OS emoji fonts as a final fallback;
	   the primary emoji rendering is via local SVG replacer (.cb-emoji) so
	   the look stays uniform across all devices without any external requests. */
	font-family: 'Vazirmatn', Tahoma, Arial,
	             'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji',
	             'EmojiOne Color', 'Android Emoji', sans-serif;
	background: var(--cb-bg);
	color: var(--cb-text);
	direction: rtl;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

body.cbasco-theme.admin-bar { /* prevent jumping when WP admin bar visible */ }

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--cb-steel); text-decoration: none; transition: color var(--cb-tr-fast); }
a:hover, a:focus { color: var(--cb-steel-l); }
button { font-family: inherit; }

p { margin: 0 0 1rem; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 .8rem; color: var(--cb-text); font-weight: 800; line-height: 1.3; }

ul, ol { margin: 0 0 1rem; padding-inline-start: 1.5rem; }
hr { border: none; height: 1px; background: var(--cb-border); margin: 2rem 0; }

::selection { background: rgba(106,174,204,.35); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--cb-bg-2); }
::-webkit-scrollbar-thumb { background: rgba(106,174,204,.3); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: rgba(106,174,204,.5); }

/* ───── GLOBAL NOISE OVERLAY ───── */
body.cbasco-theme::after {
	content: '';
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 9999;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.028'/%3E%3C/svg%3E");
}

/* ───── LAYOUT ───── */
.cbasco-wrap { max-width: var(--cb-max); margin: 0 auto; padding: 0 var(--cb-pad); }
.cbasco-wrap-wide { max-width: 1280px; margin: 0 auto; padding: 0 var(--cb-pad); }

.cbasco-main { min-height: 60vh; padding: 4rem 0; }

/* Skip link for accessibility */
.skip-link.screen-reader-text {
	position: absolute;
	left: -9999px;
	top: -9999px;
	z-index: 100000;
}
.skip-link.screen-reader-text:focus {
	left: 1rem;
	top: 1rem;
	background: var(--cb-bg-3);
	color: var(--cb-text);
	padding: .6rem 1rem;
	border: 1px solid var(--cb-steel);
	border-radius: var(--cb-r-sm);
}
.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px; height: 1px;
	overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════
   HEADER / NAVBAR (glassmorphism on dark steel)
   Uses transform (not max-height) for hide/show — no layout shift,
   no jitter, GPU-accelerated, and no containing-block trap on
   absolutely-positioned children.
═══════════════════════════════════════════════════════════ */
.cbasco-header {
	position: sticky;
	top: 0;
	z-index: 500;
	background: rgba(13,17,23,.86);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border-bottom: 1px solid var(--cb-border);
	transform: translateY(0);
	transition: transform .35s ease, background .3s ease, border-color .3s ease;
	will-change: transform;
}
.cbasco-header.is-hidden { transform: translateY(-100%); }
.cbasco-header.is-scrolled { background: rgba(13,17,23,.96); }

.cbasco-header-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: .9rem 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

/* Logo (dual-image: ورق خودرو + فولاد مبارکه) */
.cbasco-logo {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	font-size: 1.02rem;
	font-weight: 800;
	color: var(--cb-text);
	text-decoration: none;
	white-space: nowrap;
	min-width: 0;
}
.cbasco-logo em {
	font-style: normal;
	background: var(--cb-grad-logo);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* ───── BRAND LOGO BLOCK (sleek shiny box + text) ───── */
.cbasco-logo--brand {
	display: inline-flex;  /* was an <a>, now a <div> — preserve flex layout */
	gap: .9rem;
	align-items: center;
	height: 48px;          /* exact target height — matches old single-image header */
	overflow: visible;
}

/* Inner brand links — must not affect the flex layout of brand-box.
   `display: contents` makes the <a> disappear from layout while keeping
   its children as direct flex/grid items of the original parent. The
   click area is exactly the image / text inside. */
.cbasco-brand-link {
	display: contents;
	color: inherit;
	text-decoration: none;
}
/* Fallback for browsers that don't support display:contents — keep tap area */
@supports not (display: contents) {
	.cbasco-brand-link {
		display: inline-flex;
		align-items: center;
		text-decoration: none;
		color: inherit;
	}
}

.cbasco-brand-box {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	height: 100%;
	padding: 0 .85rem;
	border-radius: 10px;
	background:
		linear-gradient(135deg,
			rgba(100,170,210,.10) 0%,
			rgba(40,60,90,.55)   45%,
			rgba(25,40,64,.62)   55%,
			rgba(100,170,210,.10) 100%);
	border: 1px solid rgba(100,170,210,.28);
	box-shadow:
		inset 0 1px 0 rgba(200,225,248,.18),
		inset 0 -1px 0 rgba(0,0,0,.3),
		0 4px 16px rgba(0,0,0,.25);
	overflow: hidden;
	flex-shrink: 0;
	transition: border-color var(--cb-tr-fast), box-shadow var(--cb-tr-fast);
}
.cbasco-logo--brand:hover .cbasco-brand-box {
	border-color: rgba(160,208,232,.55);
	box-shadow:
		inset 0 1px 0 rgba(200,225,248,.28),
		inset 0 -1px 0 rgba(0,0,0,.3),
		0 8px 22px rgba(0,0,0,.35),
		0 0 22px rgba(100,170,210,.15);
}

/* shiny diagonal sweep across the box */
.cbasco-brand-sheen {
	position: absolute;
	top: 0; bottom: 0;
	left: -40%;
	width: 30%;
	background: linear-gradient(
		115deg,
		transparent 0%,
		rgba(200,225,248,.15) 45%,
		rgba(225,240,250,.32) 50%,
		rgba(200,225,248,.15) 55%,
		transparent 100%
	);
	pointer-events: none;
	animation: cbasco-brand-sheen 6s ease-in-out infinite;
}
@keyframes cbasco-brand-sheen {
	0%, 100% { left: -40%; opacity: 0; }
	50%      { left: 110%; opacity: 1; }
}

/* logos inside the box */
.cbasco-brand-logo {
	display: block;
	max-height: 32px;
	width: auto;
	object-fit: contain;
	position: relative;
	z-index: 1;
}
.cbasco-brand-logo--primary  { max-height: 36px; }
.cbasco-brand-logo--secondary {
	max-height: 26px;
	filter: brightness(0) invert(1) opacity(.92); /* dark logo → white on dark BG */
}
.cbasco-logo--brand:hover .cbasco-brand-logo--secondary {
	filter: brightness(0) invert(1) opacity(1);
}

/* vertical separator inside box */
.cbasco-brand-sep {
	width: 1px;
	height: 26px;
	background: linear-gradient(180deg, transparent, rgba(160,208,232,.5), transparent);
	flex-shrink: 0;
	position: relative;
	z-index: 1;
}

/* brand TEXT (alongside the box) */
.cbasco-brand-text {
	display: inline-flex;
	flex-direction: column;
	line-height: 1.15;
	font-weight: 800;
	color: var(--cb-text);
	white-space: nowrap;
	transition: color var(--cb-tr-fast);
}
.cbasco-brand-text-main {
	font-size: 1.02rem;
	font-weight: 800;
	letter-spacing: -.01em;
}
.cbasco-brand-text-main em {
	font-style: normal;
	background: var(--cb-grad-logo);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.cbasco-brand-text-sub {
	font-size: .68rem;
	font-weight: 500;
	color: var(--cb-muted);
	letter-spacing: .06em;
	margin-top: 1px;
}

/* Legacy fallback (used when no images) */
.cbasco-logo .cbasco-logo-mark {
	width: 38px; height: 38px;
	border-radius: 9px;
	background: linear-gradient(135deg, var(--cb-bg-4), #243650);
	border: 1px solid rgba(100,170,210,.25);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.cbasco-logo .cbasco-logo-mark svg { width: 22px; height: 22px; }

/* ═══════════════════════════════════════════════════════════
   HAMBURGER VERTICAL CASCADE MENU
   - Trigger lives inline in the header
   - Panel is a sibling of <header>, slides in from the right (RTL leading)
   - Sub-menus cascade to the LEFT (into the viewport) on hover
   - Sharp "steel blade" entrance animation
═══════════════════════════════════════════════════════════ */
.cbasco-nav {
	display: flex;
	align-items: center;
	gap: .6rem;
	position: relative;
}

/* ── Hamburger trigger ── */
.cbnav-burger {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	background: linear-gradient(135deg, rgba(100,170,210,.12), rgba(100,170,210,.04));
	border: 1px solid rgba(100,170,210,.28);
	color: var(--cb-text);
	border-radius: 100px;
	padding: .45rem .9rem .45rem .65rem;
	font-family: inherit;
	font-size: .82rem;
	font-weight: 700;
	cursor: pointer;
	transition:
		background var(--cb-tr-fast),
		border-color var(--cb-tr-fast),
		color var(--cb-tr-fast),
		transform var(--cb-tr-fast),
		box-shadow var(--cb-tr-fast);
}
.cbnav-burger:hover,
.cbnav-burger[aria-expanded="true"] {
	background: linear-gradient(135deg, rgba(100,170,210,.24), rgba(100,170,210,.08));
	border-color: rgba(100,170,210,.55);
	color: var(--cb-highlight, #c8e0f0);
	transform: translateY(-1px);
	box-shadow: 0 8px 18px rgba(100,170,210,.20);
}
.cbnav-burger-bars {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	width: 22px;
	height: 18px;
	gap: 3px;
}
.cbnav-burger-bars span {
	display: block;
	width: 100%;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transform-origin: center;
	transition: transform .25s cubic-bezier(.16, 1, .3, 1), opacity .2s ease;
}
.cbnav-burger-bars span:nth-child(1) { width: 70%; }
.cbnav-burger-bars span:nth-child(3) { width: 85%; }
.cbnav-burger[aria-expanded="true"] .cbnav-burger-bars span {
	width: 100%;
}
.cbnav-burger[aria-expanded="true"] .cbnav-burger-bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.cbnav-burger[aria-expanded="true"] .cbnav-burger-bars span:nth-child(2) { opacity: 0; transform: translateX(10px); }
.cbnav-burger[aria-expanded="true"] .cbnav-burger-bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.cbnav-burger-label {
	font-size: .8rem;
	white-space: nowrap;
}

/* ── Backdrop (behind the panel) ── */
.cbnav-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(5, 8, 14, .65);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 9000;
	transition: opacity .2s ease, visibility 0s linear .2s;
}
.cbnav-backdrop.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity .2s ease, visibility 0s linear 0s;
}

/* ── The vertical panel ── (anchored to LEFT, slides in from the left) */
.cbnav-panel {
	position: fixed;
	top: 0;
	left: 0;
	right: auto;
	bottom: 0;
	width: min(340px, 92vw);
	max-width: 100vw;
	background: linear-gradient(180deg, rgba(15, 22, 32, 0.98), rgba(10, 14, 22, 0.98));
	backdrop-filter: blur(24px) saturate(1.25);
	-webkit-backdrop-filter: blur(24px) saturate(1.25);
	border-right: 1px solid rgba(100, 170, 210, .25);
	box-shadow:
		30px 0 80px rgba(0, 0, 0, .55),
		inset -1px 0 0 rgba(255, 255, 255, .04);
	transform: translateX(-100%);   /* off-screen to the left */
	visibility: hidden;
	will-change: transform;
	z-index: 9001;
	display: flex;
	flex-direction: column;
	/* Sharp "steel blade" entrance: ease-out-expo */
	transition:
		transform .22s cubic-bezier(.16, 1, .3, 1),
		visibility 0s linear .22s;
}
.cbnav-panel.is-open {
	transform: translateX(0);
	visibility: visible;
	transition:
		transform .26s cubic-bezier(.16, 1, .3, 1),
		visibility 0s linear 0s;
}

/* The shimmering blade edge on the right side (the leading edge entering viewport) */
.cbnav-panel-blade {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 2px;
	background: linear-gradient(180deg,
		transparent 0%,
		rgba(100, 170, 210, .15) 20%,
		rgba(200, 228, 245, .85) 50%,
		rgba(100, 170, 210, .15) 80%,
		transparent 100%);
	box-shadow: 0 0 14px rgba(100, 170, 210, .55), 0 0 24px rgba(100, 170, 210, .25);
	opacity: 0;
	transform: scaleY(0);
	transform-origin: top;
	pointer-events: none;
}
.cbnav-panel.is-open .cbnav-panel-blade {
	animation: cbnav-blade-flash .55s cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes cbnav-blade-flash {
	0%   { opacity: 0; transform: scaleY(0); }
	35%  { opacity: 1; transform: scaleY(1); }
	100% { opacity: 0; transform: scaleY(1); }
}

/* Panel header */
.cbnav-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 22px 16px;
	border-bottom: 1px solid rgba(100, 170, 210, .14);
	background: linear-gradient(135deg, rgba(100, 170, 210, .08), transparent 70%);
}
.cbnav-panel-titlebar { display: flex; align-items: center; gap: 10px; }
.cbnav-panel-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--cb-steel, #6aaecc);
	box-shadow: 0 0 0 3px rgba(100, 170, 210, .22), 0 0 10px rgba(100, 170, 210, .55);
	animation: cbnav-pulse 2.6s ease-in-out infinite;
}
@keyframes cbnav-pulse {
	0%, 100% { opacity: .8; transform: scale(1); }
	50%      { opacity: 1; transform: scale(1.25); }
}
.cbnav-panel-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 800;
	color: var(--cb-highlight, #c8e0f0);
	letter-spacing: .02em;
}
.cbnav-panel-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .1);
	color: var(--cb-text);
	border-radius: 10px;
	cursor: pointer;
	transition: all var(--cb-tr-fast);
}
.cbnav-panel-close:hover {
	background: rgba(200, 88, 120, .15);
	border-color: rgba(200, 88, 120, .35);
	color: #f8a8b8;
}

/* Panel middle area — scrolls vertically when the menu items overflow.
   Sub-menus are now in-flow (accordion), so there's nothing to clip
   horizontally. Hide the scrollbar visually but keep wheel/touch scroll. */
.cbnav-panel-nav {
	flex: 1 1 auto;
	min-height: 0;          /* allows flex child to actually shrink for scroll */
	overflow-y: auto;
	overflow-x: hidden;
	padding: 12px 12px 16px;
	scrollbar-width: none;       /* Firefox */
	-ms-overflow-style: none;    /* IE/legacy Edge */
	overscroll-behavior: contain;
}
.cbnav-panel-nav::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* The WP-rendered list inside the panel */
.cbnav-panel-nav .cbasco-nav-list,
.cbnav-panel-nav .cbasco-nav-list ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
	background: transparent;
	border: 0;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-radius: 0;
}
/* LI must be positioned so absolutely-positioned sub-menus anchor to it
   (not to the fixed-position panel further up the tree). */
.cbnav-panel-nav .cbasco-nav-list li,
.cbnav-panel-nav .cbasco-nav-list > li { position: relative; }

/* Top-level item */
.cbnav-panel-nav .cbasco-nav-list > li > a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	margin-bottom: 2px;
	color: var(--cb-text);
	font-size: .92rem;
	font-weight: 600;
	border-radius: 12px;
	transition:
		background-color var(--cb-tr-fast),
		color var(--cb-tr-fast),
		padding-inline-start var(--cb-tr-fast);
}

/* All anchors (including those inside sub-menus) must be positioned so the
   chevron pseudo-element anchors to the LINK box — not to the LI (which
   grows in height when its sub-menu expands and would carry the chevron
   downward with it). */
.cbnav-panel-nav .cbasco-nav-list a { position: relative; }
.cbnav-panel-nav .cbasco-nav-list > li > a::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: rgba(100, 170, 210, .42);
	flex: 0 0 5px;
	box-shadow: 0 0 0 2px rgba(100, 170, 210, .12);
	transition: background-color var(--cb-tr-fast), transform var(--cb-tr-fast), box-shadow var(--cb-tr-fast);
}
.cbnav-panel-nav .cbasco-nav-list > li > a:hover,
.cbnav-panel-nav .cbasco-nav-list > li:hover > a,
.cbnav-panel-nav .cbasco-nav-list > li.current-menu-item > a,
.cbnav-panel-nav .cbasco-nav-list > li.current_page_item > a,
.cbnav-panel-nav .cbasco-nav-list > li.current-menu-ancestor > a,
.cbnav-panel-nav .cbasco-nav-list > li.current-menu-parent > a {
	background: linear-gradient(135deg, rgba(100, 170, 210, .18), rgba(100, 170, 210, .04));
	color: var(--cb-highlight, #e4f0fa);
	padding-inline-start: 18px;
}
.cbnav-panel-nav .cbasco-nav-list > li:hover > a::before,
.cbnav-panel-nav .cbasco-nav-list > li.current-menu-item > a::before {
	background: #6aaecc;
	box-shadow: 0 0 0 3px rgba(100, 170, 210, .22), 0 0 10px rgba(100, 170, 210, .65);
	transform: scale(1.3);
}

/* Active page gets the gold-accent treatment */
.cbnav-panel-nav .cbasco-nav-list > li.current-menu-item > a,
.cbnav-panel-nav .cbasco-nav-list > li.current_page_item > a {
	background: linear-gradient(135deg, rgba(200, 168, 76, .22), rgba(200, 168, 76, .04));
	color: var(--cb-gold-l, #e8d8a8);
}
.cbnav-panel-nav .cbasco-nav-list > li.current-menu-item > a::before,
.cbnav-panel-nav .cbasco-nav-list > li.current_page_item > a::before {
	background: var(--cb-gold, #c8a84c);
	box-shadow: 0 0 0 3px rgba(200, 168, 76, .22), 0 0 10px rgba(200, 168, 76, .65);
}

/* Chevron for parent items — pointing RIGHT (toward where submenu appears) */
.cbnav-panel-nav .cbasco-nav-list .menu-item-has-children > a {
	padding-inline-end: 26px;
}
.cbnav-panel-nav .cbasco-nav-list .menu-item-has-children > a::after {
	content: "";
	position: absolute;
	inset-inline-end: 12px;
	top: 50%;
	width: 7px; height: 7px;
	border-right: 1.6px solid currentColor;
	border-top: 1.6px solid currentColor;
	transform: translateY(-50%) rotate(45deg);  /* points RIGHT (toward viewport center) */
	opacity: .55;
	transition: transform .25s cubic-bezier(.16, 1, .3, 1), opacity .2s ease;
}
.cbnav-panel-nav .cbasco-nav-list .menu-item-has-children:hover > a::after,
.cbnav-panel-nav .cbasco-nav-list .menu-item-has-children.is-hover > a::after,
.cbnav-panel-nav .cbasco-nav-list .menu-item-has-children.is-open > a::after {
	transform: translateY(-50%) rotate(135deg) scale(1.1); /* points DOWN — "expanded" feel */
	opacity: 1;
}

/* ── Accordion-style sub-menus ──
   Each sub-menu expands INSIDE its parent (downward) on hover/click,
   the same way mobile behaves. The container itself takes `max-height: 0`
   when collapsed and animates to a large value when open. Nested
   sub-menus (level 3+) follow the same pattern, indenting further. */
.cbnav-panel-nav .cbasco-nav-list .sub-menu,
.cbnav-panel-nav .cbasco-nav-list .children {
	position: static;
	margin: 2px 0 4px 14px;            /* indent under parent — RTL handled by margin-left */
	margin-inline-start: 14px;
	margin-inline-end: 0;
	padding: 0 6px;
	background: rgba(255, 255, 255, .025);
	border: 1px solid rgba(100, 170, 210, .14);
	border-radius: 10px;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
	transition:
		max-height .3s cubic-bezier(.16, 1, .3, 1),
		opacity .2s ease,
		padding .3s ease,
		margin .3s ease;
}
/* CRITICAL — `li:hover` is INTENTIONALLY REMOVED from this rule.
 * The submenu must NOT open instantly on hover. The JS hover-intent
 * system in main.js applies an 800 ms delay then toggles the
 * `.is-hover` class. Adding `li:hover` here would bypass JS and
 * cause the submenu to flicker open and the JS timer to then
 * RE-open it again after the user has already moved away.
 * Keep `:focus-within` so keyboard users still get the dropdown. */
.cbnav-panel-nav .cbasco-nav-list li:focus-within > .sub-menu,
.cbnav-panel-nav .cbasco-nav-list li:focus-within > .children,
.cbnav-panel-nav .cbasco-nav-list li.is-hover > .sub-menu,
.cbnav-panel-nav .cbasco-nav-list li.is-hover > .children {
	max-height: 1000px;
	opacity: 1;
	pointer-events: auto;
	padding: 6px;
}
/* Slightly different bg tint for level 3 so depth is visually obvious */
.cbnav-panel-nav .cbasco-nav-list .sub-menu .sub-menu {
	background: rgba(100, 170, 210, .04);
	border-color: rgba(100, 170, 210, .18);
}

/* Sub-menu items */
.cbnav-panel-nav .cbasco-nav-list .sub-menu li { position: relative; }
.cbnav-panel-nav .cbasco-nav-list .sub-menu a,
.cbnav-panel-nav .cbasco-nav-list .children a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-radius: 10px;
	color: var(--cb-text-2, #98b8ce);
	font-size: .85rem;
	font-weight: 500;
	transition: background-color var(--cb-tr-fast), color var(--cb-tr-fast), padding-inline-start var(--cb-tr-fast);
}
.cbnav-panel-nav .cbasco-nav-list .sub-menu a::before {
	content: "";
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: rgba(100, 170, 210, .3);
	flex: 0 0 4px;
	transition: background var(--cb-tr-fast), transform var(--cb-tr-fast);
}
.cbnav-panel-nav .cbasco-nav-list .sub-menu a:hover,
.cbnav-panel-nav .cbasco-nav-list .sub-menu li:hover > a,
.cbnav-panel-nav .cbasco-nav-list .sub-menu .current-menu-item > a {
	background: linear-gradient(135deg, rgba(100, 170, 210, .14), rgba(100, 170, 210, .03));
	color: var(--cb-highlight, #e4f0fa);
	padding-inline-start: 16px;
}
.cbnav-panel-nav .cbasco-nav-list .sub-menu li:hover > a::before,
.cbnav-panel-nav .cbasco-nav-list .sub-menu .current-menu-item > a::before {
	background: #6aaecc;
	transform: scale(1.6);
	box-shadow: 0 0 8px rgba(100, 170, 210, .55);
}

/* Panel footer */
.cbnav-panel-foot {
	flex: 0 0 auto;
	padding: 14px 22px 18px;
	border-top: 1px solid rgba(100, 170, 210, .14);
	background: rgba(255, 255, 255, .015);
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.cbnav-foot-brand {
	font-size: .92rem;
	font-weight: 800;
	background: linear-gradient(120deg, #6aaecc, #a0d0e8);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	letter-spacing: .04em;
}
.cbnav-foot-sub {
	font-size: .72rem;
	color: var(--cb-text-muted, #98a2af);
}

/* Body scroll lock when panel is open */
body.cbnav-open-lock { overflow: hidden; }

/* ── Mobile fine-tuning ── */
@media (max-width: 720px) {
	.cbnav-burger { padding: .4rem .65rem .4rem .5rem; gap: .4rem; }
	.cbnav-burger-label { display: none; }

	.cbnav-panel { width: min(320px, 90vw); }
}

/* CTA in header */
.cbasco-header-cta {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: var(--cb-badge-bg);
	border: 1px solid rgba(100,170,210,.26);
	color: var(--cb-steel-m);
	border-radius: 100px;
	padding: .45rem 1rem;
	font-size: .78rem;
	font-weight: 600;
	transition: background var(--cb-tr-fast), border-color var(--cb-tr-fast), color var(--cb-tr-fast);
}
.cbasco-header-cta:hover {
	background: rgba(100,170,210,.18);
	border-color: var(--cb-steel);
	color: var(--cb-text);
}

/* ═══════════════════════════════════════════════════════════
   APPS LAUNCHER — "سامانه‌ها" quick-access dropdown
═══════════════════════════════════════════════════════════ */
.cbapps {
	position: relative;
	display: inline-flex;
	align-items: center;
}
.cbapps-trigger {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: linear-gradient(135deg, rgba(200, 168, 76, .12), rgba(200, 168, 76, .04));
	border: 1px solid rgba(200, 168, 76, .28);
	color: var(--cb-gold-l, #e8d8a8);
	border-radius: 100px;
	padding: .45rem .9rem .45rem .8rem;
	font-family: inherit;
	font-size: .78rem;
	font-weight: 700;
	cursor: pointer;
	transition:
		background var(--cb-tr-fast),
		border-color var(--cb-tr-fast),
		color var(--cb-tr-fast),
		transform var(--cb-tr-fast),
		box-shadow var(--cb-tr-fast);
}
.cbapps-trigger:hover,
.cbapps-trigger[aria-expanded="true"] {
	background: linear-gradient(135deg, rgba(200, 168, 76, .22), rgba(200, 168, 76, .08));
	border-color: rgba(200, 168, 76, .55);
	color: var(--cb-gold-xl, #fff5d8);
	transform: translateY(-1px);
	box-shadow: 0 8px 18px rgba(200, 168, 76, .22);
}
.cbapps-trigger-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.cbapps-trigger-icon svg {
	width: 16px;
	height: 16px;
	transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.cbapps-trigger[aria-expanded="true"] .cbapps-trigger-icon svg {
	transform: rotate(45deg) scale(1.1);
}
.cbapps-trigger-label {
	font-size: .78rem;
	white-space: nowrap;
}
.cbapps-trigger-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--cb-gold, #c8a84c);
	box-shadow: 0 0 0 3px rgba(200, 168, 76, .22), 0 0 8px rgba(200, 168, 76, .55);
	animation: cbapps-pulse 2.6s ease-in-out infinite;
}
@keyframes cbapps-pulse {
	0%, 100% { opacity: .75; transform: scale(1); }
	50%      { opacity: 1;   transform: scale(1.25); }
}

/* Panel — glassmorphic dropdown */
.cbapps-panel {
	position: absolute;
	top: calc(100% + 12px);
	left: 0;
	right: auto;
	min-width: 360px;
	max-width: 420px;
	background: linear-gradient(180deg, rgba(20, 28, 40, 0.96), rgba(13, 17, 23, 0.96));
	backdrop-filter: blur(24px) saturate(1.3);
	-webkit-backdrop-filter: blur(24px) saturate(1.3);
	border: 1px solid rgba(200, 168, 76, .22);
	border-radius: 18px;
	box-shadow:
		0 24px 60px rgba(0, 0, 0, .55),
		0 0 0 1px rgba(255, 255, 255, .03),
		inset 0 1px 0 rgba(255, 255, 255, .04);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-8px) scale(.97);
	transform-origin: top left;
	transition:
		opacity .25s ease,
		transform .35s cubic-bezier(.34, 1.16, .64, 1),
		visibility 0s linear .25s;
	z-index: 1100;
}
.cbapps.is-open .cbapps-panel,
.cbapps-panel.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0) scale(1);
	transition:
		opacity .25s ease,
		transform .35s cubic-bezier(.34, 1.16, .64, 1),
		visibility 0s linear 0s;
}

/* Small arrow on top pointing to the trigger */
.cbapps-panel-arrow {
	position: absolute;
	top: -7px;
	left: 22px;
	width: 14px;
	height: 14px;
	background: inherit;
	border-left: 1px solid rgba(200, 168, 76, .22);
	border-top: 1px solid rgba(200, 168, 76, .22);
	transform: rotate(45deg);
	border-top-left-radius: 3px;
	z-index: -1;
}

/* Header of the panel */
.cbapps-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	border-bottom: 1px solid rgba(200, 168, 76, .15);
	background: linear-gradient(135deg, rgba(200, 168, 76, .08), transparent);
}
.cbapps-panel-title-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}
.cbapps-panel-title-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: linear-gradient(140deg, #c8a84c, #b08828);
	color: #0d1117;
	border-radius: 10px;
	flex: 0 0 36px;
	box-shadow: 0 6px 14px rgba(200, 168, 76, .28);
}
.cbapps-panel-title-icon svg { width: 18px; height: 18px; }
.cbapps-panel-title {
	margin: 0;
	font-size: .98rem;
	font-weight: 800;
	color: var(--cb-highlight, #c8e0f0);
	line-height: 1.3;
}
.cbapps-panel-head small {
	display: block;
	margin-top: 2px;
	font-size: .72rem;
	color: var(--cb-text-muted, #98a2af);
}
.cbapps-panel-close {
	display: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .1);
	color: var(--cb-text);
	border-radius: 8px;
	cursor: pointer;
	transition: all var(--cb-tr-fast);
}
.cbapps-panel-close:hover { background: rgba(200, 88, 120, .15); border-color: rgba(200, 88, 120, .35); color: #f8a8b8; }
.cbapps-panel-close svg { width: 16px; height: 16px; }

/* Body */
.cbapps-panel-body {
	padding: 14px 14px 12px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-height: calc(100vh - 220px);
	overflow-y: auto;
	scrollbar-width: thin;
}

/* Group */
.cbapps-group { display: flex; flex-direction: column; gap: 6px; }
.cbapps-group-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 6px 8px;
	color: var(--cb-acc, #6aaecc);
	border-bottom: 1px dashed color-mix(in srgb, var(--cb-acc, #6aaecc) 28%, transparent);
}
.cbapps-group-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
}
.cbapps-group-icon svg { width: 16px; height: 16px; }
.cbapps-group-label {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .04em;
}

.cbapps-group-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cbapps-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 12px;
	color: var(--cb-text);
	text-decoration: none;
	transition:
		background var(--cb-tr-fast),
		transform var(--cb-tr-fast);
	position: relative;
}
.cbapps-link:hover {
	background: linear-gradient(140deg, color-mix(in srgb, var(--cb-acc, #6aaecc) 14%, transparent), color-mix(in srgb, var(--cb-acc, #6aaecc) 4%, transparent));
	transform: translateX(-2px);   /* RTL: slide slightly to the left on hover */
	color: var(--cb-text);
}
.cbapps-link-icon {
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--cb-acc, #6aaecc) 14%, transparent);
	border: 1px solid color-mix(in srgb, var(--cb-acc, #6aaecc) 28%, transparent);
	color: var(--cb-acc, #6aaecc);
	border-radius: 10px;
	transition: all var(--cb-tr-fast);
}
.cbapps-link:hover .cbapps-link-icon {
	background: color-mix(in srgb, var(--cb-acc, #6aaecc) 32%, transparent);
	border-color: var(--cb-acc, #6aaecc);
	transform: scale(1.06);
}
.cbapps-link-icon svg { width: 18px; height: 18px; }
.cbapps-link-text {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.cbapps-link-title {
	font-size: .85rem;
	font-weight: 700;
	color: var(--cb-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cbapps-link-sub {
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--cb-acc, #6aaecc);
	font-family: 'Courier New', monospace;
}
.cbapps-link-ext {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	color: var(--cb-text-muted, #98a2af);
	opacity: 0;
	transform: translateX(4px);
	transition: opacity var(--cb-tr-fast), transform var(--cb-tr-fast);
}
.cbapps-link:hover .cbapps-link-ext {
	opacity: 1;
	transform: translateX(0);
}
.cbapps-link-ext svg { width: 14px; height: 14px; }

/* Footer */
.cbapps-panel-foot {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 18px;
	border-top: 1px solid rgba(200, 168, 76, .15);
	background: rgba(255, 255, 255, .015);
	color: var(--cb-text-muted, #98a2af);
	font-size: .72rem;
	line-height: 1.6;
	border-radius: 0 0 18px 18px;
}
.cbapps-panel-foot svg { flex: 0 0 16px; width: 16px; height: 16px; color: var(--cb-steel, #6aaecc); }

/* Backdrop — only visible on mobile bottom-sheet */
.cbapps-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(5, 8, 14, .65);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 1090;
	opacity: 0;
	transition: opacity .3s ease;
}

/* Body-class lock when open (mobile sheet) */
body.cbapps-open-lock { overflow: hidden; }

/* ── Mobile bottom-sheet mode ── */
@media (max-width: 720px) {
	.cbapps-trigger {
		padding: .4rem .55rem;
		gap: .35rem;
	}
	.cbapps-trigger-label { display: none; }
	.cbapps-trigger-dot   { width: 5px; height: 5px; }
	.cbapps-trigger-icon svg { width: 18px; height: 18px; }

	.cbapps-panel {
		position: fixed;
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		max-width: none;
		min-width: 0;
		width: 100%;
		max-height: 80vh;
		transform: translateY(100%);
		border-radius: 22px 22px 0 0;
		border-bottom: 0;
		z-index: 1100;
		display: flex;
		flex-direction: column;
	}
	.cbapps.is-open .cbapps-panel {
		transform: translateY(0);
	}
	.cbapps-panel-arrow { display: none; }
	.cbapps-panel-close { display: inline-flex; }

	/* Drag-handle bar */
	.cbapps-panel::before {
		content: "";
		position: absolute;
		top: 8px;
		left: 50%;
		transform: translateX(-50%);
		width: 42px;
		height: 4px;
		background: rgba(255, 255, 255, .2);
		border-radius: 2px;
		pointer-events: none;
	}
	.cbapps-panel-head { padding-top: 22px; }
	.cbapps-panel-body {
		max-height: none;
		flex: 1 1 auto;
		padding-bottom: max(18px, env(safe-area-inset-bottom));
	}

	.cbapps-backdrop { display: block; }
	.cbapps.is-open .cbapps-backdrop,
	.cbapps-backdrop.is-open { opacity: 1; }
	.cbapps:not(.is-open) .cbapps-backdrop,
	.cbapps-backdrop:not(.is-open) { pointer-events: none; }
}

@media (max-width: 380px) {
	.cbapps-trigger { padding: .35rem .45rem; }
}

/* ═══════════════════════════════════════════════════════════
   APPS LAUNCHER — NOTICE POPUP (اعلان سامانه)
   Items with an active notice open this instead of navigating.
   Desktop: centered glass modal · Mobile: bottom-sheet.
═══════════════════════════════════════════════════════════ */

/* Alert dot + bell on flagged items */
.cbapps-link.has-notice .cbapps-link-icon { position: relative; }
.cbapps-link.has-notice .cbapps-link-icon::after {
	content: "";
	position: absolute;
	top: -3px;
	left: -3px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #e85878;
	box-shadow: 0 0 0 2px rgba(13, 17, 23, .85), 0 0 8px rgba(232, 88, 120, .7);
	animation: cbapps-pulse 2.2s ease-in-out infinite;
}
.cbapps-link.has-notice .cbapps-link-ext {
	opacity: 1;
	transform: none;
	color: #e85878;
}

/* Overlay */
.cbapps-notice {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .25s ease, visibility 0s linear .25s;
}
.cbapps-notice.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity .25s ease, visibility 0s linear 0s;
}
.cbapps-notice-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(5, 8, 14, .7);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

/* Card */
.cbapps-notice-card {
	position: relative;
	width: min(460px, 100%);
	background: linear-gradient(180deg, rgba(20, 28, 40, .97), rgba(13, 17, 23, .97));
	border: 1px solid color-mix(in srgb, var(--cb-acc, #6aaecc) 34%, transparent);
	border-radius: 20px;
	box-shadow:
		0 30px 80px rgba(0, 0, 0, .6),
		0 0 44px color-mix(in srgb, var(--cb-acc, #6aaecc) 14%, transparent),
		inset 0 1px 0 rgba(255, 255, 255, .05);
	padding: 24px 24px 20px;
	overflow: hidden;
	transform: translateY(14px) scale(.95);
	transition: transform .35s cubic-bezier(.34, 1.16, .64, 1);
}
.cbapps-notice.is-open .cbapps-notice-card {
	transform: translateY(0) scale(1);
}
.cbapps-notice-bar {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--cb-acc, #6aaecc), transparent);
}
.cbapps-notice-close {
	position: absolute;
	top: 14px;
	left: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 50%;
	color: var(--cb-text-2, #9bb8ce);
	cursor: pointer;
	transition: all var(--cb-tr-fast);
}
.cbapps-notice-close:hover {
	background: rgba(200, 88, 120, .15);
	border-color: rgba(200, 88, 120, .35);
	color: #f8a8b8;
}
.cbapps-notice-close svg { width: 15px; height: 15px; }

.cbapps-notice-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 14px;
	padding-left: 38px; /* keep clear of the close button (RTL) */
}
.cbapps-notice-ico {
	flex: 0 0 46px;
	width: 46px;
	height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--cb-acc, #6aaecc) 15%, transparent);
	border: 1px solid color-mix(in srgb, var(--cb-acc, #6aaecc) 32%, transparent);
	color: var(--cb-acc, #6aaecc);
	border-radius: 13px;
}
.cbapps-notice-ico svg {
	width: 21px;
	height: 21px;
	transform-origin: top center;
	animation: cbapps-bell-ring 2.6s ease-in-out infinite;
}
.cbapps-notice-title {
	margin: 0;
	font-size: 1.02rem;
	font-weight: 800;
	line-height: 1.5;
	color: var(--cb-text, #ecf2f8);
}
.cbapps-notice-app {
	display: block;
	margin-top: 3px;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--cb-acc, #6aaecc);
}
.cbapps-notice-text {
	margin: 0 0 18px;
	font-size: .86rem;
	line-height: 2;
	color: var(--cb-text-2, #9bb8ce);
	white-space: pre-line;
	max-height: 42vh;
	overflow-y: auto;
	scrollbar-width: thin;
}
.cbapps-notice-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.cbapps-notice-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: .62rem 1.25rem;
	border-radius: 100px;
	background: linear-gradient(135deg, color-mix(in srgb, var(--cb-acc, #6aaecc) 80%, #16202e), var(--cb-acc, #6aaecc));
	color: #0d1117;
	font-size: .8rem;
	font-weight: 800;
	text-decoration: none;
	transition: transform var(--cb-tr-fast), box-shadow var(--cb-tr-fast), filter var(--cb-tr-fast);
}
.cbapps-notice-btn:hover {
	transform: translateY(-1px);
	filter: brightness(1.08);
	box-shadow: 0 10px 24px color-mix(in srgb, var(--cb-acc, #6aaecc) 35%, transparent);
	color: #0d1117;
}
.cbapps-notice-btn svg { width: 14px; height: 14px; }
.cbapps-notice-dismiss {
	background: transparent;
	border: 1px solid var(--cb-border, rgba(255, 255, 255, .14));
	color: var(--cb-text-2, #9bb8ce);
	border-radius: 100px;
	padding: .58rem 1.2rem;
	font-family: inherit;
	font-size: .8rem;
	font-weight: 700;
	cursor: pointer;
	transition: all var(--cb-tr-fast);
}
.cbapps-notice-dismiss:hover {
	border-color: var(--cb-border-hover, rgba(255, 255, 255, .25));
	color: var(--cb-text, #ecf2f8);
	background: rgba(255, 255, 255, .04);
}

@keyframes cbapps-bell-ring {
	0%, 24%, 100% { transform: rotate(0); }
	4%  { transform: rotate(13deg); }
	8%  { transform: rotate(-11deg); }
	12% { transform: rotate(7deg); }
	16% { transform: rotate(-4deg); }
	20% { transform: rotate(1deg); }
}

/* ── Mobile: bottom-sheet (mirrors the launcher sheet) ── */
@media (max-width: 720px) {
	.cbapps-notice {
		align-items: flex-end;
		padding: 0;
	}
	.cbapps-notice-card {
		width: 100%;
		border-radius: 22px 22px 0 0;
		border-bottom: 0;
		padding: 26px 20px max(20px, env(safe-area-inset-bottom));
		transform: translateY(100%);
		transition: transform .38s cubic-bezier(.34, 1.16, .64, 1);
	}
	.cbapps-notice.is-open .cbapps-notice-card {
		transform: translateY(0);
	}
	/* Drag-handle bar, same as the apps sheet */
	.cbapps-notice-card::before {
		content: "";
		position: absolute;
		top: 8px;
		left: 50%;
		transform: translateX(-50%);
		width: 42px;
		height: 4px;
		background: rgba(255, 255, 255, .2);
		border-radius: 2px;
		pointer-events: none;
	}
	.cbapps-notice-close { top: 18px; }
	.cbapps-notice-actions { padding-bottom: 4px; }
	.cbapps-notice-btn { flex: 1 1 auto; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.cbapps-trigger-dot,
	.cbapps-trigger-icon svg,
	.cbapps-panel,
	.cbapps-link,
	.cbapps-link-icon,
	.cbapps-link-ext,
	.cbapps-notice,
	.cbapps-notice-card,
	.cbapps-notice-ico svg,
	.cbapps-link.has-notice .cbapps-link-icon::after { animation: none !important; transition: none !important; }
}

/* Hamburger (mobile) */
.cbasco-burger {
	display: none;
	width: 42px; height: 42px;
	background: var(--cb-badge-bg);
	border: 1px solid var(--cb-border);
	border-radius: 10px;
	cursor: pointer;
	padding: 0;
	align-items: center;
	justify-content: center;
}
.cbasco-burger span {
	display: block;
	position: relative;
	width: 22px; height: 2px;
	background: var(--cb-steel);
	border-radius: 2px;
	transition: transform var(--cb-tr-fast), opacity var(--cb-tr-fast);
	pointer-events: none; /* کلیک‌ها رو بفرست به دکمه، نه خط‌ها */
}
.cbasco-burger span::before,
.cbasco-burger span::after {
	content: '';
	position: absolute;
	left: 0; right: 0;
	height: 2px;
	background: var(--cb-steel);
	border-radius: 2px;
	transition: transform var(--cb-tr-fast);
	pointer-events: none;
}
.cbasco-burger span::before { top: -7px; }
.cbasco-burger span::after  { top:  7px; }
.cbasco-burger.is-open span                  { background: transparent; }
.cbasco-burger.is-open span::before          { transform: translateY(7px)  rotate(45deg); }
.cbasco-burger.is-open span::after           { transform: translateY(-7px) rotate(-45deg); }

/* ═══════════════════════════════════════════════════════════
   GENERAL SECTIONS — section tags, titles, dividers
═══════════════════════════════════════════════════════════ */
.cbasco-sec-tag {
	display: inline-flex;
	align-items: center;
	gap: .7rem;
	color: var(--cb-steel);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-bottom: .9rem;
}
.cbasco-sec-tag::before {
	content: '';
	width: 28px;
	height: 1px;
	background: var(--cb-steel);
}
.cbasco-sec-tag--center { justify-content: center; }

.cbasco-sec-title {
	font-size: clamp(1.7rem, 3vw, 2.4rem);
	font-weight: 800;
	line-height: 1.25;
	margin-bottom: 1rem;
	color: var(--cb-text);
}
.cbasco-sec-title em {
	font-style: normal;
	background: var(--cb-grad-logo);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.cbasco-sec-desc {
	color: var(--cb-text-body);
	font-size: .95rem;
	line-height: 2;
	font-weight: 300;
	max-width: 720px;
	margin-bottom: 2.5rem;
}

.cbasco-divider {
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--cb-border), transparent);
	margin: 3rem 0;
}

/* Reveal animation utility — toggled by main.js */
.cbasco-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity var(--cb-tr-slow), transform var(--cb-tr-slow);
}
.cbasco-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Buttons */
.cbasco-btn {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding: .75rem 1.4rem;
	border-radius: 100px;
	font-size: .86rem;
	font-weight: 700;
	cursor: pointer;
	border: 1px solid transparent;
	transition: transform var(--cb-tr-fast), background var(--cb-tr-fast), border-color var(--cb-tr-fast), color var(--cb-tr-fast), box-shadow var(--cb-tr-fast);
	text-decoration: none;
}
.cbasco-btn--primary {
	background: var(--cb-grad-logo);
	color: #0d1117;
	box-shadow: 0 8px 26px rgba(106,174,204,.22);
}
.cbasco-btn--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 36px rgba(106,174,204,.36);
	color: #0d1117;
}
.cbasco-btn--ghost {
	background: var(--cb-badge-bg);
	border-color: rgba(100,170,210,.26);
	color: var(--cb-steel-m);
}
.cbasco-btn--ghost:hover {
	background: rgba(100,170,210,.18);
	border-color: var(--cb-steel);
	color: var(--cb-text);
}

/* ═══════════════════════════════════════════════════════════
   POST CARDS (archive / blog list)
═══════════════════════════════════════════════════════════ */
.cbasco-archive-header { margin-bottom: 3rem; }
.cbasco-post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 1.5rem;
}
.cbasco-post-card {
	background: var(--cb-bg-2);
	border: 1px solid var(--cb-border);
	border-radius: var(--cb-r-md);
	overflow: hidden;
	transition: border-color var(--cb-tr-fast), transform var(--cb-tr-fast), box-shadow var(--cb-tr-fast);
	position: relative;
}
.cbasco-post-card::after {
	content: '';
	position: absolute;
	top: 0; right: 0; left: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--cb-steel), transparent);
	transform: scaleX(0);
	transition: transform .4s ease;
}
.cbasco-post-card:hover {
	border-color: var(--cb-border-hover);
	transform: translateY(-3px);
	box-shadow: 0 16px 50px rgba(0,0,0,.32), 0 0 24px rgba(100,170,210,.07);
}
.cbasco-post-card:hover::after { transform: scaleX(1); }

.cbasco-post-thumb { display: block; overflow: hidden; }
.cbasco-post-thumb img {
	width: 100%; height: 200px; object-fit: cover;
	transition: transform .4s ease, filter .4s ease;
	filter: grayscale(15%);
}
.cbasco-post-card:hover .cbasco-post-thumb img {
	transform: scale(1.04);
	filter: grayscale(0%);
}

.cbasco-post-body { padding: 1.5rem; }
.cbasco-post-meta {
	display: flex;
	gap: .8rem;
	align-items: center;
	font-size: .72rem;
	color: var(--cb-muted);
	margin-bottom: .8rem;
}
.cbasco-post-cat {
	color: var(--cb-steel);
	background: var(--cb-badge-bg);
	border: 1px solid rgba(100,170,210,.2);
	padding: .15rem .6rem;
	border-radius: 100px;
}
.cbasco-post-title {
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.6;
	margin-bottom: .7rem;
}
.cbasco-post-title a {
	color: var(--cb-highlight);
}
.cbasco-post-title a:hover { color: var(--cb-steel); }
.cbasco-post-excerpt {
	font-size: .85rem;
	color: var(--cb-muted);
	line-height: 1.85;
	margin-bottom: 1rem;
}
.cbasco-post-more {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: var(--cb-steel);
	font-size: .8rem;
	font-weight: 600;
	transition: gap var(--cb-tr-fast);
}
.cbasco-post-more:hover { gap: .8rem; }

/* Pagination */
.cbasco-pagination {
	margin-top: 3rem;
	display: flex;
	justify-content: center;
}
.cbasco-pagination ul {
	list-style: none;
	display: flex;
	gap: .4rem;
	margin: 0; padding: 0;
}
.cbasco-pagination a,
.cbasco-pagination .current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px; height: 38px;
	padding: 0 .8rem;
	background: var(--cb-bg-2);
	border: 1px solid var(--cb-border);
	border-radius: 10px;
	color: var(--cb-muted);
	font-size: .85rem;
	font-weight: 600;
	transition: all var(--cb-tr-fast);
}
.cbasco-pagination a:hover { color: var(--cb-text); border-color: var(--cb-steel); }
.cbasco-pagination .current {
	background: rgba(100,170,210,.15);
	border-color: var(--cb-steel);
	color: var(--cb-text);
}

/* ═══════════════════════════════════════════════════════════
   SINGLE POST
═══════════════════════════════════════════════════════════ */
.cbasco-single {
	max-width: 820px;
	margin: 0 auto;
	padding: 0 var(--cb-pad);
}
.cbasco-single-header {
	text-align: center;
	margin-bottom: 3rem;
}
.cbasco-single-meta {
	display: inline-flex;
	gap: 1rem;
	font-size: .75rem;
	color: var(--cb-muted);
	margin-bottom: 1rem;
}
.cbasco-single-title {
	font-size: clamp(1.8rem, 4vw, 3rem);
	font-weight: 900;
	line-height: 1.2;
	margin-bottom: 1rem;
	background: var(--cb-grad-hero);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.cbasco-single-thumb {
	margin-bottom: 2.5rem;
	border-radius: var(--cb-r-lg);
	overflow: hidden;
	border: 1px solid var(--cb-border);
}
.cbasco-single-thumb img { width: 100%; height: auto; display: block; }

.cbasco-single-content,
.cbn-single__content,
.cbn-special-body .cbn-single__content {
	font-size: 1rem;
	line-height: 2.1;
	color: var(--cb-text-body);
	text-align: justify;
	text-justify: inter-word;
	word-spacing: -0.5px;
	hyphens: auto;
}
.cbasco-single-content p,
.cbn-single__content p {
	text-align: justify;
	text-justify: inter-word;
	margin: 0 0 1em;
}
/* Don't justify single-line elements (headings, blockquotes feel weird justified) */
.cbasco-single-content h1,
.cbasco-single-content h2,
.cbasco-single-content h3,
.cbasco-single-content h4,
.cbasco-single-content h5,
.cbasco-single-content h6,
.cbasco-single-content figcaption,
.cbasco-single-content blockquote,
.cbn-single__content h1, .cbn-single__content h2,
.cbn-single__content h3, .cbn-single__content h4,
.cbn-single__content h5, .cbn-single__content h6,
.cbn-single__content figcaption,
.cbn-single__content blockquote {
	text-align: right;
}
.cbasco-single-content h2,
.cbasco-single-content h3,
.cbasco-single-content h4 {
	color: var(--cb-text);
	margin-top: 2rem;
	margin-bottom: .8rem;
}
.cbasco-single-content h2 { font-size: 1.6rem; }
.cbasco-single-content h3 { font-size: 1.3rem; }
.cbasco-single-content a { color: var(--cb-steel-m); }
.cbasco-single-content blockquote {
	margin: 1.5rem 0;
	padding: 1rem 1.5rem;
	border-right: 3px solid var(--cb-steel);
	background: var(--cb-bg-2);
	border-radius: var(--cb-r-sm);
	color: var(--cb-highlight);
	font-style: italic;
}
.cbasco-single-content code, .cbasco-single-content pre {
	font-family: 'JetBrains Mono', 'Vazirmatn', monospace;
	background: rgba(0,0,0,.3);
	border-radius: 6px;
}
.cbasco-single-content code { padding: .1rem .4rem; font-size: .85em; }
.cbasco-single-content pre {
	padding: 1rem;
	overflow-x: auto;
	border: 1px solid var(--cb-border);
}
.cbasco-single-content img { margin: 1rem 0; border-radius: var(--cb-r-md); }
.cbasco-single-content ul, .cbasco-single-content ol { padding-inline-start: 1.5rem; }
.cbasco-single-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0;
}
.cbasco-single-content th,
.cbasco-single-content td {
	padding: .8rem 1rem;
	border: 1px solid var(--cb-border);
	text-align: right;
}
.cbasco-single-content th {
	background: var(--cb-bg-3);
	color: var(--cb-highlight);
	font-weight: 700;
}

/* Comments */
.cbasco-comments {
	margin-top: 4rem;
	border-top: 1px solid var(--cb-border);
	padding-top: 3rem;
}
.cbasco-comments-title {
	font-size: 1.3rem;
	margin-bottom: 1.5rem;
}
.cbasco-comments ol { list-style: none; padding: 0; }
.cbasco-comments .comment {
	background: var(--cb-bg-2);
	border: 1px solid var(--cb-border);
	border-radius: var(--cb-r-md);
	padding: 1.5rem;
	margin-bottom: 1rem;
}
.cbasco-comments .comment-author {
	display: flex; gap: .8rem; align-items: center;
	margin-bottom: .8rem;
}
.cbasco-comments .comment-author .avatar {
	border-radius: 50%;
}
.cbasco-comments .says { display: none; }
.cbasco-comments .comment-meta { font-size: .75rem; color: var(--cb-muted); }

.cbasco-comment-form input,
.cbasco-comment-form textarea {
	width: 100%;
	background: var(--cb-bg-2);
	border: 1px solid var(--cb-border);
	color: var(--cb-text);
	border-radius: var(--cb-r-sm);
	padding: .7rem 1rem;
	font-family: inherit;
	font-size: .9rem;
	margin-bottom: 1rem;
	transition: border-color var(--cb-tr-fast);
}
.cbasco-comment-form input:focus,
.cbasco-comment-form textarea:focus {
	outline: none;
	border-color: var(--cb-steel);
}

/* ═══════════════════════════════════════════════════════════
   404 / SEARCH / NO RESULTS
═══════════════════════════════════════════════════════════ */
.cbasco-404,
.cbasco-no-results {
	text-align: center;
	padding: 5rem 1rem;
}
.cbasco-404 .cbasco-404-code {
	font-size: clamp(5rem, 16vw, 10rem);
	font-weight: 900;
	line-height: 1;
	background: var(--cb-grad-hero);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.cbasco-404 h1 { font-size: 1.6rem; margin: 1rem 0; }
.cbasco-404 p,
.cbasco-no-results p {
	color: var(--cb-muted);
	margin-bottom: 1.5rem;
}

/* Search form */
.cbasco-search-form {
	display: flex;
	max-width: 480px;
	margin: 0 auto;
	background: var(--cb-bg-2);
	border: 1px solid var(--cb-border);
	border-radius: 100px;
	overflow: hidden;
	transition: border-color var(--cb-tr-fast);
}
.cbasco-search-form:focus-within { border-color: var(--cb-steel); }
.cbasco-search-form input[type="search"] {
	flex: 1;
	background: transparent;
	border: none;
	color: var(--cb-text);
	padding: .8rem 1.2rem;
	font-family: inherit;
	font-size: .9rem;
}
.cbasco-search-form input[type="search"]:focus { outline: none; }
.cbasco-search-form button {
	background: transparent;
	border: none;
	color: var(--cb-steel);
	padding: 0 1.2rem;
	cursor: pointer;
	font-size: .9rem;
}

/* ═══════════════════════════════════════════════════════════
   FOOTER — legacy classes (kept for back-compat if any template
   still uses them). The new design lives under `.cbf` below.
═══════════════════════════════════════════════════════════ */
.cbasco-footer {
	background: linear-gradient(180deg, var(--cb-bg) 0%, #06090f 100%);
	border-top: 1px solid var(--cb-border);
	padding: 4rem 0 2rem;
	margin-top: 5rem;
	position: relative;
	overflow: hidden;
}
.cbasco-footer::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 700px;
	height: 320px;
	background: radial-gradient(ellipse, rgba(100,170,210,.07), transparent 70%);
	pointer-events: none;
}
.cbasco-footer-cols {
	max-width: 1200px;
	margin: 0 auto 3rem;
	padding: 0 var(--cb-pad);
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr);
	gap: 2.5rem;
	position: relative;
}
.cbasco-footer-col h4,
.cbasco-footer-col .widget-title {
	font-size: .9rem;
	font-weight: 700;
	color: var(--cb-highlight);
	margin-bottom: 1rem;
	letter-spacing: .04em;
}
.cbasco-footer-col p,
.cbasco-footer-col li {
	font-size: .82rem;
	color: var(--cb-muted);
	line-height: 1.9;
	margin: 0 0 .5rem;
}
.cbasco-footer-col ul { list-style: none; padding: 0; }
.cbasco-footer-col a { color: var(--cb-muted); }
.cbasco-footer-col a:hover { color: var(--cb-steel); }

.cbasco-footer-brand {
	font-size: 1.3rem;
	font-weight: 900;
	color: var(--cb-highlight);
	margin-bottom: .8rem;
	display: inline-flex;
	align-items: center;
	gap: .6rem;
}
.cbasco-footer-brand em {
	font-style: normal;
	background: var(--cb-grad-logo);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.cbasco-social { display: flex; gap: .6rem; margin-top: 1rem; }
.cbasco-social a {
	width: 38px; height: 38px;
	display: inline-flex;
	align-items: center; justify-content: center;
	background: var(--cb-bg-2);
	border: 1px solid var(--cb-border);
	border-radius: 50%;
	color: var(--cb-steel);
	transition: all var(--cb-tr-fast);
}
.cbasco-social a:hover {
	border-color: var(--cb-steel);
	background: rgba(100,170,210,.12);
	transform: translateY(-2px);
}
.cbasco-social svg { width: 16px; height: 16px; }

.cbasco-footer-bottom {
	max-width: 1200px;
	margin: 0 auto;
	padding: 1.5rem var(--cb-pad) 0;
	border-top: 1px solid var(--cb-border);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	position: relative;
	font-size: .76rem;
	color: var(--cb-ghost);
}
.cbasco-footer-bottom a { color: var(--cb-muted); }
.cbasco-footer-bottom a:hover { color: var(--cb-steel); }

/* ═══════════════════════════════════════════════════════════
   FOOTER — NEW DESIGN (.cbf*)
   Industrial multi-section footer with manifesto strip, four-column
   grid, locations row, systems/social row, legal bar. Mobile-tight.
═══════════════════════════════════════════════════════════ */
.cbf {
	--cbf-bg-1: #0a0e14;
	--cbf-bg-2: #050810;
	--cbf-text:        #d8e4ee;
	--cbf-muted:       #7a8a9a;
	--cbf-dim:         #5a6878;
	--cbf-accent:      #6aaecc;
	--cbf-accent-l:    #a0d0e8;
	--cbf-gold:        #c8a84c;

	position: relative;
	margin-top: 5rem;
	background:
		radial-gradient(ellipse at 50% 0%, rgba(100,170,210,.05) 0%, transparent 60%),
		radial-gradient(ellipse at 20% 100%, rgba(200,168,76,.04) 0%, transparent 55%),
		linear-gradient(180deg, var(--cbf-bg-1) 0%, var(--cbf-bg-2) 100%);
	color: var(--cbf-text);
	font-size: .88rem;
	line-height: 1.7;
	overflow: hidden;
}

.cbf .cbf-wrap {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 var(--cb-pad, 1.6rem);
	position: relative;
}

/* ── Decorative top edge: steel mesh + glowing blade ── */
.cbf-edge {
	position: relative;
	height: 4px;
}
.cbf-edge-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(90deg, rgba(100,170,210,.18) 0 1px, transparent 1px),
		linear-gradient(0deg, rgba(100,170,210,.18) 0 1px, transparent 1px);
	background-size: 32px 4px;
	opacity: .8;
}
.cbf-edge-glow {
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 1px;
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(100,170,210,.05) 12%,
		rgba(200,228,245,.9) 50%,
		rgba(100,170,210,.05) 88%,
		transparent 100%);
	box-shadow: 0 0 12px rgba(100,170,210,.45);
}

/* ────────── MANIFESTO STRIP ────────── */
.cbf-manifesto {
	padding: 56px 0 44px;
	text-align: center;
	position: relative;
	background: linear-gradient(180deg, rgba(100,170,210,.04), transparent 80%);
}
.cbf-manifesto-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--cbf-gold);
	text-transform: uppercase;
	padding: 6px 14px;
	background: rgba(200,168,76,.08);
	border: 1px solid rgba(200,168,76,.25);
	border-radius: 999px;
	margin-bottom: 18px;
}
.cbf-spark {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--cbf-gold);
	box-shadow: 0 0 8px var(--cbf-gold);
	animation: cbf-spark 2.6s ease-in-out infinite;
}
.cbf-spark:nth-child(3) { animation-delay: -1.3s; }
@keyframes cbf-spark {
	0%, 100% { opacity: .4; transform: scale(.9); }
	50%      { opacity: 1; transform: scale(1.4); }
}
.cbf-manifesto-title {
	margin: 0 0 32px;
	font-size: clamp(1.5rem, 3.6vw, 2.4rem);
	font-weight: 800;
	line-height: 1.45;
	color: var(--cbf-text);
}
.cbf-manifesto-title .cbf-thin {
	color: var(--cbf-muted);
	font-weight: 500;
}
.cbf-manifesto-title em {
	font-style: normal;
	background: linear-gradient(120deg, var(--cbf-accent) 0%, var(--cbf-accent-l) 50%, var(--cbf-accent) 100%);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: cbf-shimmer 7s linear infinite;
	padding: 0 4px;
}
@keyframes cbf-shimmer {
	0%   { background-position: 0% 50%; }
	100% { background-position: 200% 50%; }
}
.cbf-mstats {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	align-items: center;
	justify-content: center;
	padding: 18px 32px;
	background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
	border: 1px solid rgba(100,170,210,.18);
	border-radius: 18px;
	max-width: 920px;
}
.cbf-mstat {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 120px;
	text-align: center;
}
.cbf-mstat-num {
	font-size: clamp(1.6rem, 3vw, 2rem);
	font-weight: 800;
	color: var(--cbf-accent);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.cbf-mstat-num small {
	display: block;
	margin-top: 3px;
	font-size: .42em;
	color: var(--cbf-accent);
	font-weight: 600;
}
.cbf-mstat-lbl {
	font-size: .76rem;
	color: var(--cbf-muted);
	font-weight: 500;
}
.cbf-mstat-divider {
	width: 1px;
	height: 36px;
	background: linear-gradient(180deg, transparent, rgba(100,170,210,.32), transparent);
}

/* ────────── MAIN GRID ────────── */
.cbf-main {
	padding: 48px 0 36px;
	border-top: 1px solid rgba(100,170,210,.10);
}
.cbf-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
	gap: 40px;
}
@media (max-width: 980px) { .cbf-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 560px) { .cbf-grid { grid-template-columns: 1fr; gap: 26px; } }

.cbf-col-title {
	font-size: .82rem;
	font-weight: 800;
	color: var(--cbf-text);
	margin: 0 0 16px;
	letter-spacing: .06em;
	position: relative;
	padding-bottom: 10px;
}
.cbf-col-title::after {
	content: "";
	position: absolute;
	bottom: 0;
	inset-inline-start: 0;
	width: 28px;
	height: 2px;
	background: linear-gradient(90deg, var(--cbf-accent), transparent);
	border-radius: 2px;
}
.cbf-col-title--sub {
	margin-top: 24px;
	font-size: .76rem;
}
.cbf-col-title--sub::after { width: 18px; }

.cbf-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.cbf-links li {
	margin: 0;
	padding: 0;
	font-size: .85rem;
	color: var(--cbf-muted);
}
.cbf-links a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--cbf-muted);
	text-decoration: none;
	padding: 5px 0;
	transition: color .25s ease, padding-inline-start .25s ease;
	position: relative;
}
.cbf-links a::before {
	content: "";
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: rgba(100,170,210,.35);
	flex: 0 0 3px;
	transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.cbf-links a:hover {
	color: var(--cbf-accent-l);
	padding-inline-start: 6px;
}
.cbf-links a:hover::before {
	background: var(--cbf-accent);
	transform: scale(1.8);
	box-shadow: 0 0 8px var(--cbf-accent);
}

/* Brand column */
.cbf-col--brand { display: flex; flex-direction: column; gap: 18px; }
.cbf-brand {
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
	text-decoration: none;
}
.cbf-brand-name {
	font-size: 1.8rem;
	font-weight: 900;
	color: var(--cbf-text);
	letter-spacing: .04em;
	background: linear-gradient(120deg, var(--cbf-accent-l), var(--cbf-accent));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.cbf-brand-fa {
	font-size: .9rem;
	color: var(--cbf-text);
	font-weight: 600;
}
.cbf-brand-fa em {
	display: block;
	font-style: normal;
	font-size: .78rem;
	color: var(--cbf-muted);
	margin-top: 2px;
	font-weight: 500;
}
.cbf-brand-lede {
	margin: 0;
	font-size: .86rem;
	color: var(--cbf-muted);
	line-height: 1.95;
	text-align: justify;
	max-width: 36ch;
}
.cbf-affiliation {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: linear-gradient(135deg, rgba(200,168,76,.10), rgba(200,168,76,.02));
	border: 1px solid rgba(200,168,76,.28);
	border-radius: 12px;
	align-self: flex-start;
}
.cbf-affiliation-tag {
	font-size: .68rem;
	font-weight: 700;
	color: var(--cbf-muted);
	letter-spacing: .08em;
	padding-inline-end: 10px;
	border-inline-end: 1px dashed rgba(200,168,76,.32);
}
.cbf-affiliation-name {
	font-size: .82rem;
	font-weight: 700;
	color: var(--cbf-gold);
}

/* Contact rows */
.cbf-col--contact { gap: 16px; }
.cbf-contact-block {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 12px;
}
.cbf-contact-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	background: rgba(255,255,255,.025);
	border: 1px solid rgba(100,170,210,.14);
	border-radius: 10px;
	color: var(--cbf-text);
	text-decoration: none;
	transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.cbf-contact-row:hover {
	border-color: rgba(100,170,210,.45);
	background: rgba(100,170,210,.06);
	transform: translateY(-1px);
	color: var(--cbf-text);
}
.cbf-contact-icon {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(100,170,210,.10);
	border: 1px solid rgba(100,170,210,.22);
	border-radius: 8px;
	color: var(--cbf-accent);
}
.cbf-contact-icon svg { width: 16px; height: 16px; }
.cbf-contact-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	flex: 1 1 auto;
}
.cbf-contact-text small {
	font-size: .68rem;
	color: var(--cbf-dim);
}
.cbf-contact-val {
	font-size: .82rem;
	font-weight: 700;
	color: var(--cbf-text);
	font-variant-numeric: tabular-nums;
}

/* ────────── LOCATIONS STRIP ────────── */
.cbf-locations {
	padding: 28px 0 32px;
	border-top: 1px solid rgba(100,170,210,.10);
}
.cbf-loc-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}
@media (max-width: 880px) { .cbf-loc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .cbf-loc-grid { grid-template-columns: 1fr; } }

.cbf-loc {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"tag tag"
		"icon name"
		"icon sub";
	gap: 4px 12px;
	padding: 14px 16px;
	background: linear-gradient(160deg, rgba(255,255,255,.03), rgba(255,255,255,.005));
	border: 1px solid color-mix(in srgb, var(--cb-acc, #6aaecc) 22%, transparent);
	border-radius: 14px;
	text-decoration: none;
	transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease, background .3s ease;
	overflow: hidden;
}
.cbf-loc::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--cb-acc, #6aaecc), transparent);
	opacity: .8;
}
.cbf-loc:hover {
	transform: translateY(-3px);
	border-color: var(--cb-acc, #6aaecc);
	box-shadow: 0 14px 28px color-mix(in srgb, var(--cb-acc, #6aaecc) 14%, transparent);
	background: linear-gradient(160deg, color-mix(in srgb, var(--cb-acc, #6aaecc) 8%, transparent), rgba(255,255,255,.01));
}
.cbf-loc-tag {
	grid-area: tag;
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--cb-acc, #6aaecc);
	text-transform: uppercase;
}
.cbf-loc-icon {
	grid-area: icon;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--cb-acc, #6aaecc) 16%, transparent);
	border: 1px solid color-mix(in srgb, var(--cb-acc, #6aaecc) 32%, transparent);
	border-radius: 10px;
	color: var(--cb-acc, #6aaecc);
}
.cbf-loc-icon svg { width: 18px; height: 18px; }
.cbf-loc-name {
	grid-area: name;
	font-size: .98rem;
	font-weight: 800;
	color: var(--cbf-text);
}
.cbf-loc-sub {
	grid-area: sub;
	font-size: .72rem;
	color: var(--cbf-muted);
	line-height: 1.5;
}

/* ────────── SYSTEMS + SOCIAL ROW ────────── */
.cbf-systems {
	padding: 24px 0;
	border-top: 1px solid rgba(100,170,210,.10);
	background: rgba(0,0,0,.18);
}
.cbf-systems-wrap {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 24px;
	align-items: center;
}
@media (max-width: 880px) {
	.cbf-systems-wrap { grid-template-columns: 1fr; gap: 18px; }
}
.cbf-systems-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}
.cbf-systems-head h4 {
	margin: 0;
	font-size: .78rem;
	font-weight: 700;
	color: var(--cbf-text);
	letter-spacing: .05em;
}
.cbf-systems-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--cbf-accent);
	box-shadow: 0 0 0 3px rgba(100,170,210,.22), 0 0 8px rgba(100,170,210,.55);
}
.cbf-systems-block--apps .cbf-systems-dot { background: var(--cbf-accent); box-shadow: 0 0 0 3px rgba(100,170,210,.22); }
.cbf-systems-block--social .cbf-systems-dot { background: var(--cbf-gold); box-shadow: 0 0 0 3px rgba(200,168,76,.22); }

.cbf-systems-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.cbf-sys {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: rgba(100,170,210,.06);
	border: 1px solid rgba(100,170,210,.18);
	color: var(--cbf-text);
	border-radius: 10px;
	font-size: .8rem;
	font-weight: 700;
	text-decoration: none;
	transition: all .25s ease;
}
.cbf-sys:hover {
	background: rgba(100,170,210,.16);
	border-color: var(--cbf-accent);
	color: var(--cbf-accent-l);
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(100,170,210,.18);
}
.cbf-sys-icon {
	display: inline-flex;
	color: var(--cbf-accent);
}
.cbf-sys-icon svg { width: 16px; height: 16px; }

.cbf-social {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.cbf-social a {
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(200,168,76,.06);
	border: 1px solid rgba(200,168,76,.22);
	color: var(--cbf-gold);
	border-radius: 10px;
	transition: all .25s ease;
}
.cbf-social a:hover {
	background: rgba(200,168,76,.18);
	border-color: var(--cbf-gold);
	color: #fff5d8;
	transform: translateY(-2px) scale(1.05);
	box-shadow: 0 6px 14px rgba(200,168,76,.22);
}
.cbf-social svg { width: 18px; height: 18px; }

/* ────────── LEGAL / CREDITS BAR ────────── */
.cbf-bottom {
	padding: 16px 0;
	border-top: 1px solid rgba(100,170,210,.10);
	background: rgba(0,0,0,.32);
}
.cbf-bottom-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 22px;
	justify-content: space-between;
	align-items: center;
	font-size: .76rem;
	color: var(--cbf-muted);
}
.cbf-copy {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.cbf-copy-mark {
	color: var(--cbf-accent);
	font-weight: 800;
}
.cbf-bottom-meta {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
}
.cbf-bottom-link {
	color: var(--cbf-muted);
	text-decoration: none;
	transition: color .2s ease;
}
.cbf-bottom-link:hover { color: var(--cbf-accent-l); }
.cbf-bottom-sep { color: var(--cbf-dim); }
.cbf-credits-link {
	color: var(--cbf-gold);
	text-decoration: none;
	font-weight: 700;
	transition: color .2s ease;
}
.cbf-credits-link:hover { color: #fff5d8; }

/* ────────── MOBILE FINE-TUNING ────────── */
@media (max-width: 720px) {
	.cbf { margin-top: 3rem; }
	.cbf-manifesto { padding: 36px 0 30px; }
	.cbf-manifesto-eyebrow { font-size: .68rem; padding: 5px 12px; }
	.cbf-mstats {
		padding: 14px 18px;
		gap: 6px 14px;
		flex-wrap: wrap;
	}
	.cbf-mstat { min-width: 90px; flex: 1 1 30%; }
	.cbf-mstat-divider { display: none; }

	.cbf-main { padding: 32px 0 24px; }
	.cbf-locations { padding: 20px 0 22px; }
	.cbf-systems { padding: 18px 0; }
	.cbf-systems-list { gap: 6px; }
	.cbf-sys { padding: 6px 10px; font-size: .74rem; }
	.cbf-sys-icon svg { width: 14px; height: 14px; }
	.cbf-social a { width: 34px; height: 34px; }
	.cbf-social svg { width: 16px; height: 16px; }

	.cbf-bottom-wrap {
		flex-direction: column;
		text-align: center;
		gap: 8px;
	}
	.cbf-bottom { padding: 14px 0 16px; }

	/* Mobile: trim copyright + drop the legal links so footer stays compact */
	.cbf-copy-long { display: none; }
	.cbf-bottom-legal { display: none; }
	.cbf-copy {
		white-space: nowrap;
		font-size: .72rem;
	}
}

@media (max-width: 480px) {
	.cbf-mstat-num { font-size: 1.4rem; }
	.cbf-mstat-lbl { font-size: .68rem; }
	.cbf-brand-name { font-size: 1.5rem; }
	.cbf-affiliation { padding: 8px 12px; }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
	.cbf-spark,
	.cbf-manifesto-title em { animation: none !important; }
	.cbf-loc, .cbf-sys, .cbf-social a, .cbf-contact-row, .cbf-links a { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
	.cbasco-footer-cols { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

/* ═══════════════════════════════════════════════════════════
   LEGACY MOBILE PANEL — disabled now (off-canvas menu replaces it).
   Kept in markup for back-compat but hidden everywhere.
═══════════════════════════════════════════════════════════ */
.cbasco-mobile-panel,
.cbasco-mobile-backdrop {
	display: none !important;
}

@media (max-width: 850px) {
	:root { --cb-pad: 1.4rem; }

	.cbasco-header-inner .cbasco-nav {
		gap: .4rem;
		align-items: center;
	}
	.cbasco-header-cta {
		font-size: .72rem;
		padding: .35rem .8rem;
		flex-shrink: 0;
		white-space: nowrap;
	}

	/* Hide old hamburger button entirely (new cbnav-burger replaces it) */
	.cbasco-burger { display: none !important; }

	/* Tablet/mobile: keep both logos visible, hide only the descriptive subtitle */
	.cbasco-brand-text-sub { display: none; }
	.cbasco-brand-text-main { font-size: .9rem; }
	.cbasco-logo--brand { gap: .6rem; }
	.cbasco-brand-box { padding: 0 .65rem; gap: .4rem; }
	.cbasco-brand-logo--primary  { max-height: 30px; }
	.cbasco-brand-logo--secondary { max-height: 22px; }
	.cbasco-brand-sep { height: 22px; }
}

@media (max-width: 560px) {
	/* Phone-size: collapse the CTA to an icon-only round button. */
	.cbasco-header-cta {
		width: 38px;
		height: 38px;
		padding: 0;
		gap: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 0;
		line-height: 1;
	}
	.cbasco-header-cta-text { display: none; }
	.cbasco-header-cta-icon { width: 18px; height: 18px; flex: 0 0 18px; }
}
/* Legacy mobile menu CSS removed — superseded by off-canvas menu. */

@media (max-width: 600px) {
	.cbasco-footer-cols { grid-template-columns: 1fr; gap: 1.6rem; }
	.cbasco-footer-bottom { flex-direction: column; text-align: center; }
	.cbasco-post-grid { grid-template-columns: 1fr; }
	.cbasco-main { padding: 2.5rem 0; }

	/* Mobile: hide brand text completely, keep only the logo box */
	.cbasco-brand-text { display: none; }
	.cbasco-brand-logo--primary  { max-height: 26px; }
	.cbasco-brand-logo--secondary { max-height: 20px; }
	.cbasco-brand-box { padding: 0 .55rem; gap: .35rem; }
}

/* ═══════════════════════════════════════════════════════════
   LEGAL PAGES — Privacy Policy & Terms of Use
═══════════════════════════════════════════════════════════ */
.cbas-legal {
	background: var(--cb-bg);
	color: var(--cb-text);
}

/* ── Hero ── */
.cb-legal-hero {
	position: relative;
	padding: 4.5rem 1.5rem 3rem;
	text-align: center;
	overflow: hidden;
	border-bottom: 1px solid var(--cb-border);
	background:
		linear-gradient(180deg, rgba(106,174,204,.10) 0%, transparent 70%),
		var(--cb-bg);
}
.cb-legal-hero-mesh {
	position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(ellipse 70% 60% at 50% 50%, rgba(80,140,200,.18), transparent 70%),
		radial-gradient(ellipse 35% 30% at 18% 80%, rgba(60,110,180,.10), transparent 60%);
}
.cb-legal-hero-grid {
	position: absolute; inset: 0; pointer-events: none;
	background-image:
		linear-gradient(rgba(130,180,220,.08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(130,180,220,.08) 1px, transparent 1px);
	background-size: 60px 60px;
	mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black, transparent);
	-webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black, transparent);
}
.cb-legal-title {
	font-size: clamp(2rem, 5vw, 3.2rem);
	font-weight: 900;
	line-height: 1.2;
	margin-bottom: 1rem;
	background: linear-gradient(135deg, #ddeef8 20%, #6aaecc 60%, #c0d8ee 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.cb-legal-title em {
	font-style: normal;
	background: linear-gradient(90deg, #6aaecc, #a0d0e8);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.cb-legal-lead {
	max-width: 720px;
	margin: 0 auto;
	color: var(--cb-text-body);
	font-size: .98rem;
	line-height: 2;
	font-weight: 300;
}
.cb-legal-meta {
	display: inline-block;
	margin-top: 1.5rem;
	padding: .35rem .9rem;
	background: rgba(106,174,204,.10);
	border: 1px solid rgba(106,174,204,.24);
	border-radius: 100px;
	font-size: .8rem;
	color: var(--cb-text-body);
}

/* ── Body Layout ── */
.cb-legal-wrap { padding: 3rem 1rem 5rem; }
.cb-legal-layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 2.5rem;
	align-items: start;
	max-width: 1200px;
	margin: 0 auto;
}

/* ── TOC sidebar ── */
.cb-legal-toc {
	position: sticky;
	top: 100px;
	background: var(--cb-bg-2);
	border: 1px solid var(--cb-border);
	border-radius: 14px;
	padding: 18px;
	max-height: calc(100vh - 140px);
	overflow-y: auto;
}
.cb-legal-toc-head {
	font-size: .82rem;
	font-weight: 800;
	color: var(--cb-text);
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 1px dashed var(--cb-border);
}
.cb-legal-toc ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.cb-legal-toc li { margin: 0; }
.cb-legal-toc a {
	display: flex;
	gap: 8px;
	align-items: baseline;
	padding: 6px 8px;
	font-size: .82rem;
	color: var(--cb-text-body);
	text-decoration: none;
	border-radius: 6px;
	line-height: 1.6;
	transition: all .2s ease;
}
.cb-legal-toc a:hover {
	background: rgba(106,174,204,.10);
	color: #6aaecc;
	transform: translateX(-2px);
}
.cb-legal-toc-num {
	display: inline-block;
	width: 24px;
	font-size: .72rem;
	font-weight: 800;
	color: #6aaecc;
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
}

/* ── Body sections ── */
.cb-legal-body {
	max-width: none !important;
	margin: 0 !important;
	background: var(--cb-bg-2);
	border: 1px solid var(--cb-border);
	border-radius: 14px;
	padding: 2.5rem 2.2rem;
}
.cb-legal-sec {
	padding-bottom: 2rem;
	margin-bottom: 2rem;
	border-bottom: 1px dashed var(--cb-border);
	scroll-margin-top: 90px;
}
.cb-legal-sec:last-child {
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 0;
}
.cb-legal-sec h2 {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--cb-text);
	margin: 0 0 1rem;
	line-height: 1.5;
}
.cb-legal-sec-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	background: linear-gradient(135deg, rgba(106,174,204,.20), rgba(106,174,204,.08));
	border: 1px solid rgba(106,174,204,.35);
	border-radius: 10px;
	font-size: .82rem;
	font-weight: 800;
	color: #6aaecc;
	flex-shrink: 0;
	font-variant-numeric: tabular-nums;
}
.cb-legal-sec h3 {
	font-size: 1rem;
	font-weight: 700;
	color: var(--cb-text);
	margin: 1.5rem 0 .6rem;
}
.cb-legal-sec p {
	color: var(--cb-text-body);
	line-height: 2;
	margin: 0 0 1rem;
}
.cb-legal-sec ul {
	color: var(--cb-text-body);
	line-height: 2;
	padding-right: 1.5rem;
	margin: 0 0 1rem;
}
.cb-legal-sec li { margin-bottom: .4rem; }
.cb-legal-sec strong { color: var(--cb-text); font-weight: 700; }

/* ── Contact card at end ── */
.cb-legal-contact-card {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
	margin-top: 1.5rem;
	padding: 1.4rem;
	background: linear-gradient(135deg, rgba(106,174,204,.10), rgba(106,174,204,.02));
	border: 1px solid rgba(106,174,204,.24);
	border-radius: 12px;
}
.cb-legal-contact-row {
	display: flex;
	align-items: center;
	gap: 12px;
}
.cb-legal-contact-row > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
}
.cb-legal-contact-row small {
	color: var(--cb-muted);
	font-size: .7rem;
}
.cb-legal-contact-row a,
.cb-legal-contact-row bdi {
	color: #6aaecc;
	font-weight: 700;
	font-size: .92rem;
	text-decoration: none;
	word-break: break-all;
	/* Pin LTR content (email + phone) to the right edge of its column
	   so it aligns with the Persian label above, in our RTL layout. */
	text-align: right;
	display: block;
	width: 100%;
}
.cb-legal-contact-row a:hover { color: #a0d0e8; }
.cb-legal-contact-icon {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	background: rgba(106,174,204,.14);
	border: 1px solid rgba(106,174,204,.30);
	border-radius: 10px;
	flex-shrink: 0;
}
.cb-legal-cta {
	display: inline-block;
	margin-top: .5rem;
	padding: .55rem 1.2rem;
	background: linear-gradient(135deg, rgba(106,174,204,.18), rgba(106,174,204,.06));
	border: 1px solid rgba(106,174,204,.40);
	color: #6aaecc !important;
	border-radius: 100px;
	font-weight: 700;
	text-decoration: none;
	transition: all .25s ease;
}
.cb-legal-cta:hover {
	background: rgba(106,174,204,.28);
	transform: translateY(-2px);
}

/* ── Responsive ── */
@media (max-width: 980px) {
	.cb-legal-layout { grid-template-columns: 1fr; gap: 1.4rem; }
	.cb-legal-toc {
		position: static;
		max-height: 300px;
	}
}
@media (max-width: 600px) {
	.cb-legal-hero { padding: 3rem 1rem 2.2rem; }
	.cb-legal-wrap { padding: 2rem .8rem 3rem; }
	.cb-legal-body { padding: 1.6rem 1.1rem; border-radius: 12px; }
	.cb-legal-sec h2 { font-size: 1.1rem; gap: 8px; }
	.cb-legal-sec-num { width: 32px; height: 32px; font-size: .74rem; }
	.cb-legal-sec p, .cb-legal-sec ul { line-height: 1.9; font-size: .9rem; }
	.cb-legal-sec h3 { font-size: .95rem; }
	.cb-legal-toc { padding: 14px; }
	.cb-legal-contact-card { padding: 1.1rem; gap: 10px; }
	.cb-legal-contact-icon { width: 36px; height: 36px; font-size: 1.05rem; }
}

/* ═══════════════════════════════════════════════════════════
   LOCAL EMOJI IMAGES — rendered inline by emoji-replacer.js
   so the visual style stays uniform across all OSes / browsers
   without ever calling s.w.org.
═══════════════════════════════════════════════════════════ */

/* High-specificity + !important so production-host CSS (typical
   "img { max-width:100%; height:auto }" rules) cannot enlarge our emojis. */
img.cb-emoji,
img.cb-emoji[loading],
.entry-content img.cb-emoji,
.cbasco-single-content img.cb-emoji,
.cbn-single__content img.cb-emoji {
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	max-width: 1em !important;
	max-height: 1em !important;
	min-width: 0 !important;
	min-height: 0 !important;
	vertical-align: -0.125em !important;
	margin: 0 .075em !important;
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	user-select: none;
	-webkit-user-drag: none;
}