/* === arbmate-chrome.css =============================================
 * The site chrome (partials/_nav: header, phone drawer, language menu;
 * partials/_footer) on OSDS, over pages whose content is still the
 * legacy Bootstrap 3 + styles.css page. Same hybrid as oddstorm.com's
 * shell.css, which most of these rules come from.
 *
 * Load order (includes/_chromeHead): bootstrap, styles.css (webapp.css
 * before it on the tool page), /_design/css/design.css,
 * arbmate-brand.css (tokens), this file.
 *
 * Two jobs:
 *   1. The chrome: OSDS classes plus what the hybrid needs (a solid bar
 *      over a white page, Bootstrap's <a> styling taken back out).
 *   2. The content stays the page it was: what design.css adds to a
 *      legacy page beside Bootstrap is taken back here, so the before/
 *      after check of every page with the chrome removed stays 0 px.
 * ================================================================== */

/* ---- 2. Legacy content: OSDS must not reach it --------------------
 * A legacy page (html.am-legacy, layouts app and arbs) is a light Bootstrap
 * page under the chrome whatever the theme: its native controls and
 * scrollbars stay light. The chrome takes the theme's scheme on its own
 * roots (below). A modern page keeps design.css's :root / html.light. */
html.am-legacy { color-scheme: light; }
html:not(.light) :is(.hdr, .drawer, .site-footer, #top-nav, .os-select-menu, .user-menu-popover, .skip-link) { color-scheme: dark; }
html.light :is(.hdr, .drawer, .site-footer, #top-nav, .os-select-menu, .user-menu-popover, .skip-link) { color-scheme: light; }

/* The same holds inside .am-legacy-island: a blog post on an OSDS page, styled by
 * the scoped copies of Bootstrap and styles.css (docker/scope-css.php). */
/* Layered OSDS rules (reset, base, .btn*) are reverted from a layer of
 * our own, declared after design.css's: every unlayered legacy rule still
 * beats it, the OSDS layers do not. `revert` = what the browser had before
 * design.css was linked. */
@layer arbmate-legacy {
	:where(body:not(.os-modern), .am-legacy-island) {
		-webkit-font-smoothing: revert;
		-moz-osx-font-smoothing: revert;
	}
	/* Bootstrap's .btn wins what it declares; OSDS adds a hover layer
	   (::before), a press scale and a gradient image under .btn-primary. */
	:where(body:not(.os-modern), .am-legacy-island) :is(.btn, .btn-primary, .btn-danger, .btn-lg),
	:where(body:not(.os-modern), .am-legacy-island) :is(.btn, .btn-primary, .btn-danger, .btn-lg)::before {
		all: revert;
	}
	:where(body:not(.os-modern), .am-legacy-island) input:is([type="checkbox"], [type="radio"]) {
		accent-color: revert;
		cursor: revert;
	}
	:where(body:not(.os-modern)) :focus-visible:not(:where(.hdr, .drawer, .site-footer, .os-select-menu, .user-menu-popover) *) {
		outline: revert;
		box-shadow: revert;
	}
}

/* Unlayered OSDS rules need a selector that outranks them. */
/* .card: Bootstrap 3 has none, so the profile page's "card card-body"
   boxes would get the OSDS dark surface, border and hover lift. */
body:not(.os-modern) .card,
body:not(.os-modern) .card:hover,
.am-legacy-island .card,
.am-legacy-island .card:hover {
	background: revert;
	border: revert;
	border-radius: revert;
	padding: revert;
	box-shadow: revert;
	transform: revert;
	transition: revert;
}
/* OSDS pads the body for the internal catalog's phone bottom bar. */
@media (max-width: 1000px) {
	body:not(.os-modern) { padding-bottom: 0; }
}
/* The 44 px touch floor (OSDS sets it on touch AND on any screen up to 700 px)
   is for OSDS buttons; a Bootstrap .btn keeps its size. */
@media (pointer: coarse), (max-width: 700px) {
	body:not(.os-modern) .btn,
	.am-legacy-island .btn { min-height: auto; }
}

/* ---- 1. Chrome roots ------------------------------------------------
 * Smoothing and a Nunito 14px baseline on every chrome island, so nothing
 * inherits from the Bootstrap body (Helvetica, #333). */
.hdr, .drawer, .site-footer, #top-nav, .os-select-menu, .user-menu-popover, .skip-link {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.hdr, .drawer, .site-footer, .os-select-menu, .user-menu-popover, .skip-link {
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.5;
	color: var(--text);
}
.hdr *, .drawer *, .site-footer *, .os-select-menu *, .user-menu-popover * {
	font-family: inherit;
}

/* ---- Header --------------------------------------------------------- */
/* The OSDS bar is translucent over a themed body; over a white legacy
   page that reads as grey haze. Solid on legacy pages. */
body:not(.os-modern) .hdr {
	background: var(--surface-container-low);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
/* An anchor target clears the sticky bar. */
html { scroll-padding-top: var(--header-h); }

/* Tool page: the bar scrolls away as the old one did (the tool's sticky
   filter box starts at the top), stays under the settings overlay
   (#overlay, z-index 10), and its menus open over the tool's icon row
   (z-index 12): static, no stacking context. Full width like the tool. */
body.am-tool .hdr {
	position: static;
	z-index: auto;
}
body.am-tool .hdr-inner { max-width: none; }

.hdr-wordmark {
	display: block;
	height: 16px;
	width: auto;
}
/* The wordmark's light variant has a darker "Mate" (Chapa's pick, 5.35:1 on the light page). */
.am-wordmark-light { display: none; }
html.light .am-wordmark-dark { display: none; }
html.light .am-wordmark-light { display: block; }
/* Keep .hdr-nav to its content inside the space-between row. */
.hdr-nav { flex: 0 0 auto; }

/* ---- Responsive (OSDS breakpoints, 21-responsive-mobile) -------------
   >1000 desktop: full nav + user menu
   701-1000 tablet: the drawer carries the nav and the account
   <=700 phone: brand + Subscribe + menu button only (16-lessons L38)  */
@media (max-width: 1000px) {
	.hdr-nav { display: none; }
	.hdr-menu-btn { display: inline-flex; }
	.hdr-actions .user-menu { display: none; }
}
@media (max-width: 700px) {
	.hdr-actions #search-toggle,
	.hdr-actions #theme-toggle,
	.hdr-actions .locale-switcher-wrap,
	.hdr-actions .hdr-auth-link,
	.hdr-actions .cart-button { display: none; }
	.hdr-cta-primary { padding: 8px 14px; font-size: 13px; min-width: 0; }
}
@media (max-width: 380px) {
	.hdr-inner { gap: 8px; padding: 0 12px; }
	.hdr-cta-primary { padding: 8px 10px; }
}
/* Below 360 px the mark, the wordmark, the longest Subscribe (bg "Абонирай се",
   125 px) and the menu button do not fit one row: the mark stays, the name goes
   (oddstorm.com drops its brand text the same way). */
@media (max-width: 359px) {
	html .hdr .hdr-wordmark,
	html.light .hdr .am-wordmark-light { display: none; }
}

/* ---- Primary CTA (Subscribe) ----------------------------------------
   Its own class, not .btn: Bootstrap's .btn stays untouched. */
.hdr-cta-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 84px;
	padding: 10px 18px;
	border: 1px solid transparent;
	border-radius: var(--shape-pill, 9999px);
	background: var(--brand-gradient);
	color: var(--on-primary);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: var(--elev-1);
	transition: box-shadow var(--t-fast, 120ms ease), transform var(--t-fast, 120ms ease);
}
.hdr-cta-primary:hover,
.hdr-cta-primary:focus {
	color: var(--on-primary);
	text-decoration: none;
	box-shadow: var(--elev-2);
	transform: translateY(-1px);
}

/* ---- Nav groups: SureBets / Middles / Polish Middles -----------------
   Hover or keyboard focus opens the menu; a tap opens it on touch
   (arbmate-chrome.js), a click on a mouse device follows the link. */
.hdr-nav-group {
	position: relative;
	display: inline-flex;
	align-items: center;
}
.hdr-nav-menu.os-select-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	min-width: 180px;
	margin: 0;
	list-style: none;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateX(-50%) translateY(-4px) scaleY(0.96);
	transition: opacity var(--t-fast),
	            visibility var(--t-fast),
	            transform var(--dur-medium, 240ms) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
	z-index: 50;
}
.hdr-nav-group:hover .hdr-nav-menu.os-select-menu,
.hdr-nav-group:focus-within .hdr-nav-menu.os-select-menu,
.hdr-nav-group.is-open .hdr-nav-menu.os-select-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0) scaleY(1);
}
.hdr-nav-menu .os-select-option { padding: 0; }
.hdr-nav-menu .os-select-option a {
	display: block;
	padding: 9px 12px;
	border-radius: var(--shape-xs);
	color: var(--text);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
}
.hdr-nav-menu .os-select-option a:hover,
.hdr-nav-menu .os-select-option a:focus {
	background: color-mix(in srgb, currentColor 8%, transparent);
	color: var(--text);
}
.hdr-nav-menu .os-select-option a.is-active,
.hdr-nav-menu .os-select-option a.is-active:hover {
	background: color-mix(in srgb, var(--primary) 12%, transparent);
	color: var(--primary-soft);
	font-weight: 700;
}

/* ---- Language menu ---------------------------------------------------
   locale-switcher-open.js opens it with showPopover(): animate the
   discrete display change like the nav menus. */
.os-select-menu.locale-menu {
	transition: transform var(--dur-medium, 240ms) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
	            opacity var(--dur-short, 160ms) var(--ease-emphasized, cubic-bezier(0.2, 0, 0, 1)),
	            overlay var(--dur-medium, 240ms) var(--ease-emphasized, cubic-bezier(0.2, 0, 0, 1)) allow-discrete,
	            display var(--dur-medium, 240ms) var(--ease-emphasized, cubic-bezier(0.2, 0, 0, 1)) allow-discrete;
}
@starting-style {
	.os-select-menu.locale-menu:popover-open {
		opacity: 0;
		transform: scaleY(0.94) translateY(-4px);
	}
}
.locale-list { list-style: none; margin: 0; padding: 0; }
.pill.locale-switcher {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	border: none;
	border-radius: var(--shape-pill);
	background: transparent;
	color: var(--text-muted);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: color var(--t-fast), background-color var(--t-fast);
}
.pill.locale-switcher:hover {
	color: var(--text);
	background: color-mix(in srgb, currentColor 8%, transparent);
}
.pill.locale-switcher svg { width: 18px; height: 18px; }
.pill.locale-switcher .os-select-chevron { width: 14px; height: 14px; opacity: 0.7; }

/* ---- User menu and the search box: popovers off the header -----------
   arbmate-chrome.js moves them to <body>, positions them under their
   trigger and keeps data-open for browsers without the popover API. */
.hdr-actions .pill.user-switcher {
	max-width: 220px;
	padding: 6px 10px;
	border: none;
	background: transparent;
	color: var(--text-muted);
	font-size: 13px;
	font-weight: 500;
}
.hdr-actions .pill.user-switcher:hover {
	color: var(--text);
	background: color-mix(in srgb, currentColor 8%, transparent);
}
.hdr-actions .pill.user-switcher .ic { width: 16px; height: 16px; }
.hdr-actions .pill.user-switcher .os-select-chevron { width: 14px; height: 14px; opacity: 0.7; }
.user-switcher-label {
	max-width: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.user-menu { position: relative; }
.user-menu-popover {
	position: fixed;
	inset: auto;
	min-width: 200px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--surface-container-high);
	border: 1px solid var(--border-strong);
	border-radius: var(--shape-md);
	box-shadow: var(--elev-3);
	z-index: 9999;
	transform-origin: top right;
	transform: scaleY(0.96);
	opacity: 0;
	transition: opacity var(--dur-short, 160ms) var(--ease-emphasized, cubic-bezier(0.2, 0, 0, 1)),
	            transform var(--dur-medium, 240ms) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
	            overlay var(--dur-medium, 240ms) var(--ease-emphasized, cubic-bezier(0.2, 0, 0, 1)) allow-discrete,
	            display var(--dur-medium, 240ms) var(--ease-emphasized, cubic-bezier(0.2, 0, 0, 1)) allow-discrete;
}
.user-menu-popover:popover-open,
.user-menu-popover[data-open="true"] {
	opacity: 1;
	transform: scaleY(1);
}
/* An author display rule on a [popover] must be gated on :popover-open
   (16-lessons, the locale-menu click trap). */
.user-menu-popover:not(:popover-open):not([data-open="true"]) { display: none; }
.user-menu-popover::backdrop { background: transparent; }
@starting-style {
	.user-menu-popover:popover-open {
		opacity: 0;
		transform: scaleY(0.96);
	}
}
.user-menu-popover .os-select-option { padding: 0; }
.user-menu-popover .os-select-option a,
.user-menu-popover .os-select-option button {
	display: block;
	width: 100%;
	padding: 9px 12px;
	border: 0;
	border-radius: var(--shape-xs);
	background: transparent;
	color: var(--text);
	font-size: 14px;
	line-height: 1.5;
	text-align: start;
	text-decoration: none;
	cursor: pointer;
}
.user-menu-popover .os-select-option a:hover,
.user-menu-popover .os-select-option a:focus,
.user-menu-popover .os-select-option button:hover,
.user-menu-popover .os-select-option button:focus-visible {
	background: color-mix(in srgb, currentColor 8%, transparent);
	color: var(--text);
}
.am-search-pop {
	width: min(320px, calc(100vw - 16px));
	padding: 8px;
}
.am-search-pop form { margin: 0; }

/* ---- Counts on the account and the cart ------------------------------ */
.user-switcher .os-notification-badge { margin-left: 2px; }
.cart-button { overflow: visible; }
.am-cart-qty {
	position: absolute;
	top: 0;
	right: -2px;
	pointer-events: none;
}
.am-cart-qty.hidden { display: none; }
/* my-bookmakers adds .scale-cart for a moment when a bookmaker goes into the cart. */
.cart-button svg { transition: transform 200ms ease-in; }
.cart-button.scale-cart svg { transform: scale(1.8); }

/* ---- Drawer ----------------------------------------------------------- */
/* The page under the open drawer does not scroll; the JS keeps its place
   in body.style.top and gives it back on close (03-components, dialog
   body scroll lock). */
body.am-scroll-locked {
	position: fixed;
	width: 100%;
}
/* Bootstrap's border-box everywhere, our drawer included: the same box
   model with or without it. */
.drawer, .drawer * { box-sizing: border-box; }
/* Only the middle scrolls; the head and the language row stay pinned. */
.drawer .drawer-inner { overflow: hidden; }
.drawer-head { flex: 0 0 auto; }
.drawer-scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	margin: 0 -16px;
	padding: 0 16px;
}
.drawer-prefs { flex: 0 0 auto; }
.drawer-prefs > .drawer-section { margin-top: 8px; }
.drawer-section.drawer-section-first {
	border-top: none;
	margin-top: 0;
	padding-top: 0;
}
/* Collapsible sections: grid 0fr -> 1fr animates the height. */
.drawer-collapsible { padding-top: 16px; }
.drawer-collapsible-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin: 0;
	padding: 0 12px 8px;
	border: none;
	background: transparent;
	color: inherit;
	text-align: start;
	cursor: pointer;
}
.drawer-collapsible-trigger:hover .drawer-section-title-inline { color: var(--text); }
.drawer-section-title-inline {
	color: var(--text-dim);
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	transition: color var(--t-fast);
}
.drawer-section-title-inline .os-notification-badge { letter-spacing: 0; }
.drawer-chev {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	color: var(--text-dim);
	transition: transform var(--dur-medium, 240ms) var(--ease-emphasized, cubic-bezier(0.2, 0, 0, 1));
}
.drawer-collapsible[data-open="true"] > .drawer-collapsible-trigger .drawer-chev { transform: rotate(180deg); }
.drawer-collapsible-content {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 280ms var(--ease-emphasized, cubic-bezier(0.2, 0, 0, 1));
}
.drawer-collapsible[data-open="true"] > .drawer-collapsible-content { grid-template-rows: 1fr; }
.drawer-collapsible-inner {
	min-height: 0;
	overflow: hidden;
}
.drawer-collapsible-inner > .drawer-nav { padding-top: 4px; }
/* Log out is a form button styled as a drawer link. */
button.drawer-nav-link {
	width: 100%;
	border: 0;
	background: transparent;
	text-align: start;
	cursor: pointer;
}
.drawer-sublist { list-style: none; margin: 0; padding: 0; }
.am-drawer-search { margin: 0; padding: 0 4px; }

/* ---- Bootstrap's <a> styling, taken back inside the chrome -------------
   Bootstrap dresses every a:hover / a:focus (underline, #23527c, a 5 px
   focus outline). In the chrome the OSDS rule of the element decides and
   keyboard focus is the OSDS ring (base layer :focus-visible). */
:is(.hdr, .drawer, .site-footer, .os-select-menu, .user-menu-popover) :is(a, button):focus,
.skip-link:focus {
	outline: none;
}
:is(.hdr, .drawer, .site-footer, .os-select-menu, .user-menu-popover) a:is(:hover, :focus),
.skip-link:is(:hover, :focus) {
	text-decoration: none;
}
/* Single-class OSDS links lose their colour to Bootstrap's a:focus (0,1,1):
   restate the colour their own :hover gives them. */
.hdr-brand:is(:hover, :focus),
.site-footer-logo:is(:hover, :focus) { color: var(--text); }
.hdr-nav-link:focus,
.hdr-icon-btn:focus,
.drawer-nav-link:focus { color: var(--text); }

/* ---- Footer ----------------------------------------------------------- */
/* The legacy content ends with its own bottom padding: no 96 px gap. */
body:not(.os-modern) .site-footer { margin-top: 0; }
.am-footer-x {
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 8px;
	color: var(--text-muted);
	font-size: 14px;
	text-decoration: none;
	transition: color var(--t-fast);
}
.am-footer-x:is(:hover, :focus) { color: var(--text); }
.am-footer-x svg { width: 16px; height: 16px; }

/* ---- Tool page: the tool's own icon row under the header --------------
   bookies.js clones its icons into #top-nav .container (styled by
   webapp.css #app-top-nav-icons). The old row was a dark bar too. */
body.am-tool #top-nav {
	padding: 2px 0 1px;
	background: var(--surface-container-low);
	border-bottom: 1px solid var(--border);
}
body.am-tool #top-nav .container { width: 100%; }
/* "Hide the navigation" on: the header's actions sit at the right of this
   row (arbmate-chrome.js moves them), without Subscribe, as the old second
   row had them. */
.hdr-actions.am-in-tool-row {
	float: right;
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.5;
	color: var(--text);
}
.hdr-actions.am-in-tool-row * { font-family: inherit; }
.hdr-actions.am-in-tool-row .hdr-cta-primary { display: none; }