/* tsenovgroup copy of Templates/legal-pages/css/legal.css — tokens set for the dark-gold accent (2026-10-28) */
/* ==========================================================================
   Super5 legal pages (Общи условия, Отказ и връщане, Политика за поверителност,
   Политика за бисквитките). Template from andrea.bg, 2026-10-17.
   Content: one group block .s5-legal built by tools/build-legal.cjs: a head, the tab
   row between the legal pages, a table of contents, numbered sections, fact tables,
   notes, steps, rights, cookie categories and the consent plugin's cookie list.

   Per site, set only the tokens in the first block (usually just --legal-accent,
   from the site's main brand colour). Everything else stays as designed.
   ========================================================================== */
.s5-legal-wrap {
	/* Per-site tokens */
	--legal-accent: #7A5C22;        /* site's main brand colour: kicker, active tab, markers, note borders */
	--legal-accent-hover: #5E4518;  /* button hover, a step brighter than the accent */
	--legal-accent-soft: #F5F1E8;   /* note background, a very light tint of the accent */
	--legal-font-title: var(--font-head);    /* the site's heading font (h2/h3) */
	--legal-gutter: var(--gutter);          /* the site's side padding on phones */
	--legal-crumbs-top: 10px;       /* breadcrumbs row under the header line (breadcrumbs rule) */

	/* Fixed design tokens: change only with a design decision */
	--legal-text: #333333;
	--legal-text-dark: #101010;
	--legal-ink: #22262A;
	--legal-muted: #54595F;
	--legal-crumbs: #767676;        /* 4.5:1 on white */
	--legal-bg-soft: #F6F6F6;
	--legal-line: #E6E6E6;
	--legal-border: #CDCDCD;
	--legal-radius: 7px;          /* tsenovgroup: site square family 7/10 */
	--legal-radius-card: 10px;
	--legal-transition: 0.3s ease-in-out;

	margin: var(--legal-crumbs-top) 0 70px; /* breadcrumbs first */
	padding: 0 var(--legal-gutter);
	color: var(--legal-text);
}

/* Breadcrumbs above the content (the theme prints the site's shared breadcrumbs,
   „Начало › {заглавие}“). Only the position lives here; the look is the site's one
   breadcrumbs style (web-designer breadcrumbs rule). */
.s5-legal-wrap > .s5-legal-crumbs {
	max-width: 860px;
	margin: 0 auto 28px;
}

/* Fallback breadcrumbs (php/legal.php prints them only when the site has no breadcrumbs
   of its own): one line, 14px, grey #767676, current page cut with „…“; phones show only
   „‹ Начало“. If the site gets breadcrumbs elsewhere later, move this style to the shared
   CSS so there is one style site-wide. */
.s5-crumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	font-size: 14px;
	line-height: 20px;
	white-space: nowrap;
}

.s5-crumbs__link,
.s5-crumbs__sep {
	flex: 0 0 auto;
	color: var(--legal-crumbs);
	text-decoration: none;
}

.s5-crumbs__link:hover,
.s5-crumbs__link:focus-visible {
	color: var(--legal-text);
	text-decoration: underline;
}

.s5-crumbs__current {
	overflow: hidden;
	color: var(--legal-text);
	text-overflow: ellipsis;
}

@media (max-width: 767px) {
	.s5-crumbs__sep,
	.s5-crumbs__current {
		display: none;
	}

	.s5-crumbs__link::before {
		content: "‹ ";
	}
}

.s5-legal {
	max-width: 860px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.65;
}

.s5-legal p {
	margin: 0 0 12px;
}

.s5-legal a {
	color: var(--legal-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.s5-legal ul,
.s5-legal ol {
	margin: 0 0 16px;
	padding-left: 1.4em;
}

.s5-legal li + li {
	margin-top: 6px;
}

.s5-legal li::marker {
	color: var(--legal-accent);
}

/* Clause numbers („1.1.“) */
.s5-legal p > strong:first-child {
	color: var(--legal-text-dark);
}

.s5-legal h2 {
	margin: 44px 0 16px;
	padding-top: 32px;
	border-top: 1px solid var(--legal-line);
	color: var(--legal-text-dark);
	font-family: var(--legal-font-title);
	font-size: clamp(22px, 1.8vw, 26px);
	font-weight: 500;
	line-height: 1.15;
	scroll-margin-top: 20px;
}

.s5-legal h3 {
	margin: 28px 0 12px;
	color: var(--legal-text-dark);
	font-family: var(--legal-font-title);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.15;
}

/* Head: kicker, title, lead, effective date */
.s5-legal__head {
	padding-bottom: 24px;
}

.s5-legal .s5-legal__kicker {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
	color: var(--legal-accent);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.s5-legal__kicker::before {
	content: "";
	width: 28px;
	height: 3px;
	background: var(--legal-accent);
}

.s5-legal .s5-legal__title {
	margin: 0 0 14px;
	color: var(--legal-text-dark);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.15;
}

.s5-legal .s5-legal__lead {
	max-width: 680px;
	margin: 0 0 14px;
	color: var(--legal-muted);
	font-size: 18px;
	line-height: 1.55;
}

.s5-legal .s5-legal__meta {
	display: inline-block;
	margin: 0;
	padding: 4px 12px;
	border-radius: var(--legal-radius);
	background: var(--legal-bg-soft);
	color: var(--legal-muted);
	font-size: 13px;
}

/* Tabs between the legal pages */
.s5-legal__nav {
	margin-bottom: 28px;
}

.s5-legal__nav p {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

.s5-legal .s5-legal__nav a {
	padding: 8px 16px;
	border: 1px solid var(--legal-border);
	border-radius: var(--legal-radius);
	color: var(--legal-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: border-color var(--legal-transition), color var(--legal-transition);
}

.s5-legal .s5-legal__nav a:hover {
	border-color: var(--legal-accent);
	color: var(--legal-accent);
}

.s5-legal .s5-legal__nav a.is-current {
	border-color: var(--legal-accent);
	background: var(--legal-accent);
	color: #FFFFFF;
}

/* Phones: one row that scrolls sideways, edge to edge, with a fade at the right edge
   (php/legal.php centres the current tab). */
@media (max-width: 767px) {
	.s5-legal__nav {
		margin-right: calc(-1 * var(--legal-gutter));
		margin-left: calc(-1 * var(--legal-gutter));
	}

	.s5-legal__nav p {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding: 0 var(--legal-gutter);
		scroll-padding: 0 var(--legal-gutter);
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
	}

	.s5-legal__nav p::-webkit-scrollbar {
		display: none;
	}

	.s5-legal .s5-legal__nav a {
		flex: 0 0 auto;
		white-space: nowrap;
	}
}

/* Table of contents */
.s5-legal__toc {
	padding: 22px 24px;
	border-radius: var(--legal-radius-card);
	background: var(--legal-bg-soft);
}

.s5-legal .s5-legal__toc-title {
	margin: 0 0 10px;
	color: var(--legal-text-dark);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.s5-legal__toc ol {
	margin: 0;
	padding-left: 1.6em;
	font-size: 15px;
}

.s5-legal__toc li + li {
	margin-top: 4px;
}

.s5-legal .s5-legal__toc a {
	color: var(--legal-ink);
	text-decoration: none;
	display: inline-block;
	padding: 3px 0; /* 24px+ tap target (responsive-qa) */
}

.s5-legal .s5-legal__toc a:hover {
	color: var(--legal-accent);
	text-decoration: underline;
}

/* Fact tables (merchant data, data processing) */
.s5-legal .wp-block-table {
	margin: 0 0 16px;
	overflow-x: auto;
}

.s5-legal table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.5;
}

.s5-legal th,
.s5-legal td {
	padding: 10px 14px;
	border: 1px solid var(--legal-line);
	text-align: left;
	vertical-align: top;
}

.s5-legal .s5-legal__facts td:first-child {
	width: 30%;
	background: var(--legal-bg-soft);
	color: var(--legal-text-dark);
	font-weight: 600;
}

.s5-legal__card {
	margin: 4px 0 18px;
}

.s5-legal__card .wp-block-table {
	margin: 0;
	border-left: 3px solid var(--legal-accent);
}

/* Notes: info (accent), warning (amber), action (text + button) */
.s5-legal__note {
	margin: 18px 0;
	padding: 16px 20px;
	border-left: 4px solid var(--legal-accent);
	border-radius: 0 var(--legal-radius-card) var(--legal-radius-card) 0;
	background: var(--legal-accent-soft);
}

.s5-legal__note p:last-child {
	margin-bottom: 0;
}

.s5-legal__note--warn {
	border-left-color: #D98E04;
	background: #FFF6E3;
}

.s5-legal__note--action {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin-top: 0;
}

.s5-legal__note--action p {
	margin: 0;
}

.s5-legal .s5-legal__button a {
	display: inline-block;
	padding: 10px 20px;
	border-radius: var(--legal-radius);
	background: var(--legal-accent);
	color: #FFFFFF;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--legal-transition);
}

.s5-legal .s5-legal__button a:hover {
	background: var(--legal-accent-hover);
}

/* Cookie categories */
.s5-legal__cats {
	display: grid;
	gap: 16px;
	margin-bottom: 16px;
}

.s5-legal__cat {
	display: flex;
	flex-direction: column;
	padding: 20px;
	border: 1px solid var(--legal-line);
	border-radius: var(--legal-radius-card);
}

.s5-legal__cat h3 {
	margin-top: 0;
}

.s5-legal .s5-legal__tag {
	align-self: flex-start;
	margin: auto 0 0;
	padding: 3px 10px;
	border-radius: var(--legal-radius);
	background: #E8F3EC;
	color: #1E6B3A;
	font-size: 13px;
	font-weight: 600;
}

.s5-legal .s5-legal__tag--opt {
	background: var(--legal-accent-soft);
	color: var(--legal-accent);
}

/* Steps (Отказ и връщане) */
.s5-legal__steps {
	display: grid;
	gap: 16px;
	margin-bottom: 16px;
}

.s5-legal__step {
	padding: 20px;
	border-top: 4px solid var(--legal-accent);
	border-radius: 0 0 var(--legal-radius-card) var(--legal-radius-card);
	background: var(--legal-bg-soft);
	font-size: 15px;
}

.s5-legal__step h3 {
	margin-top: 0;
}

.s5-legal__step p:last-child {
	margin-bottom: 0;
}

/* Rights (Политика за поверителност) */
.s5-legal__rights ul {
	display: grid;
	gap: 10px;
	padding: 0;
	list-style: none;
}

.s5-legal__rights li {
	margin: 0;
	padding: 12px 16px;
	border: 1px solid var(--legal-line);
	border-radius: var(--legal-radius-card);
	font-size: 15px;
}

.s5-legal__rights li + li {
	margin-top: 0;
}

.s5-legal__rights strong {
	display: block;
	color: var(--legal-text-dark);
}

/* Withdrawal form */
.s5-legal__form {
	margin-top: 12px;
	padding: 22px 24px;
	border: 1px dashed var(--legal-border);
	border-radius: var(--legal-radius-card);
	font-size: 15px;
}

.s5-legal .s5-legal__line {
	margin-bottom: 10px;
	overflow-wrap: anywhere;
}

.s5-legal .s5-legal__small {
	color: var(--legal-muted);
	font-size: 14px;
}

.s5-legal code {
	padding: 1px 5px;
	border-radius: var(--legal-radius);
	background: var(--legal-bg-soft);
	font-size: 0.9em;
}

/* Consent plugin's cookie list (e.g. [wpconsent_cookie_policy]) */
.s5-legal__cookies {
	margin-top: 8px;
}

.s5-legal__cookies table {
	margin-bottom: 16px;
}

.s5-legal__cookies td:first-child {
	color: var(--legal-text-dark);
	font-weight: 600;
	overflow-wrap: anywhere;
}

/* Phones: every cookie row is a card (name, description, duration). */
@media (max-width: 767px) {
	.s5-legal__cookies thead {
		display: none;
	}

	.s5-legal__cookies table,
	.s5-legal__cookies tbody,
	.s5-legal__cookies tr,
	.s5-legal__cookies td {
		display: block;
	}

	.s5-legal__cookies tr {
		margin-bottom: 8px;
		padding: 10px 14px;
		border: 1px solid var(--legal-line);
		border-radius: var(--legal-radius-card);
	}

	.s5-legal__cookies td {
		padding: 2px 0;
		border: 0;
		background: none !important; /* consent plugins' zebra rows */
	}

	.s5-legal__cookies td:last-child {
		color: var(--legal-muted);
		font-size: 14px;
	}

	.s5-legal__cookies td:last-child::before {
		content: "Продължителност: ";
	}

	/* Translated sites (the language plugin sets <html lang>). */
	:lang(en) .s5-legal__cookies td:last-child::before { content: "Duration: "; }
	:lang(it) .s5-legal__cookies td:last-child::before { content: "Durata: "; }
	:lang(ro) .s5-legal__cookies td:last-child::before { content: "Durată: "; }
	:lang(el) .s5-legal__cookies td:last-child::before { content: "Διάρκεια: "; }
	:lang(de) .s5-legal__cookies td:last-child::before { content: "Dauer: "; }
	:lang(tr) .s5-legal__cookies td:last-child::before { content: "Süre: "; }
	:lang(sr) .s5-legal__cookies td:last-child::before { content: "Трајање: "; }
	:lang(mk) .s5-legal__cookies td:last-child::before { content: "Траење: "; }

	/* Fact tables: label above value */
	.s5-legal .s5-legal__facts td {
		display: block;
		width: auto;
		border-top: 0;
	}

	.s5-legal .s5-legal__facts tr:first-child td:first-child {
		border-top: 1px solid var(--legal-line);
	}

	.s5-legal .s5-legal__facts td:first-child {
		width: auto;
		padding-bottom: 6px;
	}
}

@media (min-width: 768px) {
	.s5-legal .s5-legal__title {
		font-size: 40px;
	}

	.s5-legal__toc ol {
		columns: 2;
		column-gap: 32px;
	}

	.s5-legal__toc li {
		break-inside: avoid;
	}

	.s5-legal__cats,
	.s5-legal__rights ul {
		grid-template-columns: 1fr 1fr;
	}

	.s5-legal__steps {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media print {
	.s5-legal__nav,
	.s5-legal__toc,
	.s5-legal__note--action {
		display: none;
	}
}

/* tsenovgroup mockup: legal column centred with its own gutter (= site gutter); site breadcrumbs reused */
.legal-page { padding: 18px 0 var(--section); }
.legal-page .s5-legal-wrap { margin-top: 0; }
.legal-page .s5-legal-crumbs .crumbs { margin: 0; }
.legal-mock-note { padding: 16px 18px; border: 1px dashed var(--ivory-line); border-radius: var(--radius-card); color: var(--ink-muted); font-size: var(--fs-small); }