/* BeVisible A: the standalone pages of the parent theme (client cabinet /account/, shared video /watch/,
   payment /pay/, example Reels /reels/). They print their own <head> and inline styles; the parent calls
   do_action('bv_standalone_head') after them, and this file goes in there. Markup and logic stay in the parent
   (inc/cabinet.php, inc/orders.php, inc/showcase.php): here only the look, built on the same variables. */

:root {
	--ink: #0b0b0c;
	--text: #3b3b40;
	--muted: #6d6d72;
	--line: #e7e7e4;
	--blue: #0b0b0c;
	--cta: #0b0b0c;
	--flt: #0b0b0c;
	--bg: #fdfdfc;
	--card: #ffffff;
	--bar: #ecece9;
	--ok: #1a8f4c;
	--soft: #f4f4f2;
	--on: #ffffff;
	--red: #d3242a;
	--font: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
	:root {
		--ink: #f4f4f5;
		--text: #d2d2d7;
		--muted: #9a9aa0;
		--line: #26262b;
		--blue: #f4f4f5;
		--cta: #f4f4f5;
		--flt: #f4f4f5;
		--bg: #0a0a0b;
		--card: #141416;
		--bar: #26262b;
		--ok: #3ccf91;
		--soft: #1b1b1f;
		--on: #0a0a0b;
	}
}

body {
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

/* ---------- Shared pieces ---------- */

.brand {
	display: inline-flex;
	align-items: center;
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.brand::before {
	content: "";
	width: 30px;
	height: 30px;
	margin-right: 10px;
	border-radius: 7px;
	background: url(../../bevisible/images/logo-mark.svg) center / cover no-repeat;
}

@media (prefers-color-scheme: dark) {
	.brand::before {
		background-image: url(../images/logo-mark-inv.svg);
	}
}

h1 {
	font-weight: 500;
	letter-spacing: -0.03em;
}

h2 {
	font-size: 20px;
	font-weight: 500;
	letter-spacing: -0.02em;
}

.btn,
button.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 20px;
	border-radius: 999px;
	background: var(--blue);
	color: var(--on);
	font: 500 15px var(--font);
	transition: opacity 0.15s, background 0.15s;
}

.btn:hover {
	opacity: 0.85;
}

.btn.ghost,
.btn.ghost.flt {
	background: transparent;
	color: var(--ink);
	border: 1px solid var(--line);
}

.btn.ghost:hover {
	opacity: 1;
	background: var(--soft);
}

/* The page scripts mark the chosen sort / filter button with an inline background and white text */
.btn.ghost[style*="background: var"],
.btn.ghost[style*="background:var"] {
	color: var(--on) !important;
	border-color: transparent;
}

.card {
	border-radius: 20px;
	padding: 26px;
	background: var(--soft);   /* the big areas are greyish, the rounded blocks inside them are white (owner 11.10.2026) */
}

body.cab-login .card {
	background: var(--card);
}

.card h2 {
	margin-bottom: 14px;
}

input[type="email"],
input[type="text"],
input[type="search"],
textarea {
	border-radius: 14px !important;
	font-family: var(--font) !important;
	outline: 0;
}

input:focus,
textarea:focus {
	border-color: var(--ink) !important;
}

.note {
	color: var(--muted);
}

.contact a,
.made a {
	color: var(--ink);
}

/* ---------- Cabinet ---------- */

body[class^="cab-"] .wrap {
	padding-top: 0;
}

.top {
	height: 64px;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--line);
}

.top a.out {
	font-size: 14px;
	color: var(--muted);
	text-decoration: none;
	padding: 8px 14px;
	border: 1px solid var(--line);
	border-radius: 999px;
}

.top a.out:hover {
	color: var(--ink);
}

body[class^="cab-"] h1 {
	font-size: clamp(30px, 4vw, 44px);
	line-height: 1.08;
	margin: 36px 0 4px;
}

.row b {
	font-weight: 500;
}

.bar {
	height: 6px;
	border-radius: 6px;
}

.bar i {
	border-radius: 6px;
}

/* every message is a bubble of its own: white with a thin border, so two of ours in a row do not run into one sheet on the
   grey card (owner 11.10.2026: «два отдельных сообщения сливаются в одну сплошную простыню») */
.msgs {
	gap: 12px;
}

.msg {
	border-radius: 16px 16px 16px 5px;
	background: var(--card);
	border: 1px solid var(--line);
	padding: 12px 16px;
}

.msg.c {
	border-radius: 16px 16px 5px 16px;
	background: var(--ink);
	color: var(--bg);
	border-color: var(--ink);
}

.month {
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
	margin-top: 26px;
}

.reel {
	padding: 18px 0;
}

.reel .t {
	font-size: 17px;
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.35;
}

.reel .a {
	margin-top: 12px;
}

.reel .a .btn {
	min-height: 40px;
	padding: 0 16px;
	font-size: 14px;
}

.reel .tag.on {
	color: var(--on);
}

.player iframe,
.player video {
	border-radius: 18px;
}

.badge {
	background: var(--red);
}

/* Login: one narrow card in the middle */
body.cab-login .wrap {
	max-width: 480px;
}

body.cab-login .card .btn {
	width: 100%;
}

/* Client page: Reels on the left, subscription, limits and messages on the right (a-cabinet.js builds the columns) */
body.cab-page .wrap {
	max-width: 1180px;
}

.cab-nav {
	display: none;
}

.cab-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 372px;
	gap: 0 28px;
	align-items: start;
}

.cab-side {
	position: sticky;
	top: 12px;
	max-height: calc(100vh - 24px);
	overflow-y: auto;
	padding-bottom: 12px;
	scrollbar-width: none;   /* the column still scrolls with the wheel or a finger, without a visible bar (owner 10.10.2026) */
}

.cab-side::-webkit-scrollbar {
	display: none;
}

/* Owner's preview: the yellow «as the client» bar is stuck to the top, the column starts under it */
body.cab-page .wrap > div[style*="position:sticky"] ~ .cab-grid .cab-side {
	top: 56px;
	max-height: calc(100vh - 68px);
}

.cab-side > .card:first-child {
	margin-top: 20px;
}

/* Long lists of niches under a Reel are folded to two lines; «ще» opens them (a-cabinet.js) */
.reel .tags.folded {
	max-height: 62px;
	overflow: hidden;
	position: relative;
}

.reel .tags-more {
	margin-top: 4px;
	padding: 0;
	border: 0;
	background: none;
	font: 13px var(--font);
	color: var(--muted);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.cab-side .card {
	padding: 22px;
}

.cab-side .card h2 {
	font-size: 17px;
	margin-bottom: 10px;
}

.cab-side .row,
.cab-side .lim {
	font-size: 15px;
}

.cab-side textarea {
	min-height: 80px;
}

.cab-side .btn {
	min-height: 40px;
	font-size: 14px;
}

.cab-main #reels h2 {
	font-size: 24px;
}

@media (max-width: 1020px) {
	.cab-grid {
		display: block;
	}

	.cab-side {
		position: static;
		max-height: none;
		overflow: visible;
	}

	/* Phone: quick jumps under the greeting, they stay on screen while the long list of Reels scrolls */
	.cab-nav {
		display: flex;
		gap: 6px;
		overflow-x: auto;
		position: sticky;
		top: 0;
		z-index: 5;
		margin: 14px -16px 0;
		padding: 10px 16px;
		background: var(--bg);
		border-bottom: 1px solid var(--line);
		scrollbar-width: none;
	}

	.cab-nav::-webkit-scrollbar {
		display: none;
	}

	.cab-nav a {
		flex: none;
		padding: 7px 14px;
		border: 1px solid var(--line);
		border-radius: 999px;
		font-size: 14px;
		color: var(--ink);
		text-decoration: none;
		white-space: nowrap;
	}

	.card[id] {
		scroll-margin-top: 64px;
	}

	.card {
		padding: 20px;
	}

	/* Watch, download, share: three equal buttons in one row */
	.reel .a {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 6px;
	}

	.reel .a .btn {
		padding: 0 6px;
		font-size: 13px;
		white-space: nowrap;
	}
}

/* A phone: «Ask for a revision» is the fourth button and wider than a third of the row, it takes a row of its own */
@media (max-width: 600px) {
	.reel .a [data-rev] {
		grid-column: 1 / -1;
	}
}

/* ---------- Shared video, payment, example Reels ---------- */

body.bv-watch video,
.wrap > video,
.grid video {
	border-radius: 20px;
}

.wide h1 {
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.08;
}

.grid a {
	font-weight: 500;
}

table tr.total td {
	font-weight: 500;
}

.wrap > form > button,
.card > form > button:not(.btn) {
	border-radius: 999px;
	font-family: var(--font);
	font-weight: 500;
	color: var(--on);
}

/* ---------- «Recommend us to a friend»: the first block of the cabinet, dark and wide (a-cabinet.js moves it up) ---------- */

.card.cab-ref {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 440px);
	gap: 4px 40px;
	align-items: center;
	margin-top: 24px;
	padding: 32px 36px;
	background: var(--ink);
	border-color: var(--ink);
	color: var(--bg);
}

.cab-ref h2 {
	grid-column: 1;
	grid-row: 1;
	margin: 0;
	font-size: clamp(22px, 2.4vw, 30px);
	line-height: 1.15;
	color: var(--bg);
}

.cab-ref h2::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 12px;
	border-radius: 50%;
	background: var(--red);
	vertical-align: 0.2em;
}

.cab-ref > p.note {
	grid-column: 1;
	margin: 6px 0 0;
	font-size: 16px;
	color: var(--bg);
	opacity: 0.72;
}

.cab-ref input[type="text"] {
	grid-column: 2;
	grid-row: 1;
	margin: 0 !important;
	height: 48px;
	background: transparent;
	border-color: rgba(128, 128, 128, 0.5) !important;
	color: var(--bg);
}

.cab-ref .btn {
	grid-column: 2;
	grid-row: 2;
	margin-top: 8px;
	min-height: 48px;
	background: var(--bg);
	color: var(--ink);
}

@media (max-width: 760px) {
	.card.cab-ref {
		display: block;
		padding: 24px 20px;
	}

	.cab-ref input[type="text"] {
		margin-top: 16px !important;
	}

	.cab-ref .btn {
		width: 100%;
	}
}

/* ---------- «Write to us»: a button in the corner and the chat window it opens (a-cabinet.js) ---------- */

.cab-chat-btn {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 40;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 52px;
	padding: 0 22px;
	border: 0;
	border-radius: 999px;
	background: var(--ink);
	color: var(--bg);
	font: 500 15px var(--font);
	cursor: pointer;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}

.cab-chat-btn b {
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 11px;
	background: rgba(128, 128, 128, 0.4);   /* how many messages are in the chat: not «unread», so not red */
	color: inherit;
	font-size: 12px;
	font-weight: 500;
	line-height: 22px;
	text-align: center;
}

.cab-chat-btn.open {
	opacity: 0.55;
}

.card.cab-chat {
	display: none;
	position: fixed;
	right: 20px;
	bottom: 84px;
	z-index: 41;
	width: 400px;
	max-width: calc(100vw - 24px);
	max-height: min(660px, calc(100vh - 170px));
	margin: 0;
	padding: 22px;
	overflow-y: auto;
	scrollbar-width: none;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.card.cab-chat::-webkit-scrollbar {
	display: none;
}

.card.cab-chat.open {
	display: block;
}

.cab-chat h2 {
	padding-right: 84px;
}

.cab-chat .msgs {
	max-height: 320px;
	overflow-y: auto;
	scrollbar-width: none;
	font-size: 13.6px;   /* owner 12.10.2026: smaller and tighter than the page's 16px / 1.55 */
	line-height: 1.4;
}

.cab-chat .msgs::-webkit-scrollbar {
	display: none;
}

.cab-chat textarea {
	min-height: 80px;
}

.cab-chat-close {
	position: absolute;
	right: 14px;
	top: 14px;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: var(--soft);
	color: var(--ink);
	font: 20px/1 var(--font);
	cursor: pointer;
}

/* The same window over the whole screen: the conversation in a wide column, the answer field at the bottom */
.cab-chat-full {
	position: absolute;
	right: 56px;
	top: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: var(--soft);
	color: var(--ink);
	cursor: pointer;
}

.cab-chat-full .i-off,
.cab-chat.full .cab-chat-full .i-on {
	display: none;
}

.cab-chat.full .cab-chat-full .i-off {
	display: block;
}

.card.cab-chat.full.open {
	display: flex;
	flex-direction: column;
	inset: 0;
	z-index: 110;   /* over the site header (a-nav.css, 100) */
	width: auto;
	max-width: none;
	height: 100vh;
	height: 100dvh;
	max-height: none;
	border-radius: 0;
	padding: 28px max(24px, calc((100vw - 860px) / 2)) 22px;
	overflow: hidden;
}

.card.cab-chat.full > * {
	flex: 0 0 auto;
}

.cab-chat.full .cab-chat-close,
.cab-chat.full .cab-chat-full {
	position: fixed;
	top: 20px;
}

.cab-chat.full .cab-chat-close {
	right: 20px;
}

.cab-chat.full .cab-chat-full {
	right: 62px;
}

.card.cab-chat.full .msgs {
	flex: 1 1 auto;
	min-height: 0;
	max-height: none;
	font-size: 13.6px;   /* owner 12.10.2026: 20% smaller than 17px */
	line-height: 1.55;
}

.cab-chat.full .msg:not(.cap) {
	max-width: 78%;
}

.cab-chat.full textarea {
	min-height: 110px;
}

html.cab-chat-full-on,
html.cab-chat-full-on body {
	overflow: hidden;   /* the page under the chat does not scroll */
}

@media (max-width: 560px) {
	.card.cab-chat.full.open {
		padding: 20px 14px 14px;
	}

	.cab-chat.full .cab-chat-close {
		right: 12px;
		top: 14px;
	}

	.cab-chat.full .cab-chat-full {
		right: 54px;
		top: 14px;
	}

	.cab-chat.full .msg:not(.cap) {
		max-width: 88%;
	}
}

@media (max-width: 560px) {
	.cab-chat-btn {
		right: 12px;
		bottom: 12px;
	}

	.cab-chat-btn span {
		display: none;
	}

	.cab-chat-btn {
		padding: 0 16px;
	}

	.card.cab-chat {
		left: 12px;
		right: 12px;
		bottom: 74px;
		width: auto;
		max-height: calc(100vh - 160px);
	}
}

/* ---------- Site header in the cabinet (the parent's nav.php, styles in a-nav.css) ---------- */

/* One header on every screen (owner 11.10.2026): every standalone page that prints the site header makes room for it
   and drops its own logo and language row */
body:has(> nav#site_nav) {
	padding-top: 64px;
}

body:has(> nav#site_nav) .wrap > a.brand,
body:has(> nav#site_nav) .top .brand,
body:has(> nav#site_nav) .top .langs,
body.cab-login .top {
	display: none;
}

/* the cabinet's own top row keeps only «log out», on the right under the header */
body.cab-page .top {
	display: flex;
	justify-content: flex-end;
	border-bottom: 0;
	height: auto;
	margin: 14px 0 -8px;
}

body.cab-page .wrap > div[style*="position:sticky"] {
	top: 64px !important;
	margin-top: 0 !important;
}

body.cab-page .cab-side {
	top: 76px;
	max-height: calc(100vh - 88px);
}

body.cab-page .wrap > div[style*="position:sticky"] ~ .cab-grid .cab-side {
	top: 120px;
	max-height: calc(100vh - 132px);
}

@media (max-width: 1020px) {
	.cab-nav {
		top: 64px;
	}

	.card[id] {
		scroll-margin-top: 128px;
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--a-bg: #0a0a0b;
		--a-fg: #f4f4f5;
		--a-text: #d2d2d7;
		--a-mut: #9a9aa0;
		--a-line: #26262b;
		--a-soft: #1b1b1f;
		--a-nav-bg: rgba(10, 10, 11, 0.82);
	}

	nav#site_nav .nav-logo img {
		content: url(../images/logo-mark-inv.svg);
	}

	nav#site_nav .nav-cta,
	nav#site_nav .nav-mobile a.nav-mobile-cta {
		background: var(--a-fg);
		color: var(--a-bg);
	}

	nav#site_nav .nav-cta-secondary {
		color: var(--a-text);
	}
}

/* a link inside a message (an address the client pasted, made a link by the browser or an extension) keeps the colour of
   the message: browser blue was unreadable on the dark bubble (owner 11.10.2026) */
.msg a,
.msg a:visited {
	color: inherit;
	text-decoration: underline;
	overflow-wrap: anywhere;
}