/* Developer docs — white UI only; no tinted page/cards/footer. Theme overrides below stop Payoneer gray haze/backdrop. */

:root {
	--platform-toggle-bar-h: 0px;
	--docs-products-sidebar-w: 300px;
	--docs-toc-sidebar-w: 220px;
	--docs-sidebar-top: var(--payo-header-h, 72px);
	--docs-hub-pad-x: 2rem;
	--docs-hub-pad-top: 1.5rem;
	--docs-hub-main-pad-x: 2.5rem;
	--docs-hub-main-pad-top: 1.75rem;
	/* Align product subpage headers with developers.html main column */
	--docs-hub-content-left: calc(var(--docs-products-sidebar-w, 300px) + var(--docs-hub-main-pad-x, 2.5rem));
}

html.platform-toggle-bar-active {
	--docs-sidebar-top: calc(var(--platform-toggle-bar-h, 40px) + var(--payo-header-h, 72px));
}

html {
	background-color: #fff !important;
}

body.developer-docs-page.wp-theme-payo,
body.developer-docs-page #page.site,
body.developer-docs-page #primary.site-main,
body.developer-docs-page .developer-docs-shell,
body.developer-docs-page article.page,
body.developer-docs-page .entry-content,
body.developer-docs-page .developer-docs {
	background-color: #fff !important;
}

/* Theme: huge .bottom-header box-shadow reads as gray veil over content */
body.developer-docs-page header.site-header .bottom-header {
	box-shadow: none !important;
}

/* Theme: mobile backdrop can sit above <main> */
body.developer-docs-page #primary.site-main {
	position: relative;
	z-index: 4;
	padding: 0 !important;
	margin: 0 !important;
	max-width: 100% !important;
}

body.developer-docs-page #page.site {
	padding: 0 !important;
	margin: 0 !important;
	max-width: 100% !important;
}

body.developer-docs-page .developer-docs-shell,
body.developer-docs-page .entry-content {
	padding: 0 !important;
	margin: 0 !important;
	max-width: 100% !important;
}

body.developer-docs-page .mm-wrapper__blocker {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
	opacity: 0 !important;
}

.developer-docs {
	display: flex;
	min-height: min(70vh, 900px);
	border-bottom: 1px solid #e5e5e5;
	background: #fff;
}

/* Hub pages only — doc articles use full-bleed grid in doc-article.css */
.developer-docs:not(.doc-article-wrap) {
	max-width: 1440px;
	margin: 0 auto;
}

/* Doc article shell — edge-to-edge, no horizontal inset */
body.developer-docs-page:has(.doc-article-wrap) #page.site,
body.developer-docs-page:has(.doc-article-wrap) #primary.site-main,
body.developer-docs-page:has(.doc-article-wrap) article.page,
body.developer-docs-page:has(.doc-article-wrap) .entry-content {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.developer-docs-page:has(.doc-article-wrap) .site-main {
	overflow: visible !important;
	min-height: 0 !important;
}

body.developer-docs-page:has(.doc-article-wrap) #masthead.site-header {
	position: sticky;
	top: var(--platform-toggle-bar-h, 0px);
	z-index: 1040;
}

html[data-payoneer-platform-theme="active"] body.developer-docs-page:has(.doc-article-wrap) #masthead.site-header:has(#ppl-platform-nav) {
	min-height: var(--ppl-nav-height, 72px) !important;
}

/* Doc articles: full viewport width — no centered inset on the shell */
body.developer-docs-page:has(.doc-article-wrap) .developer-docs.doc-article-wrap.developer-docs--three-col,
body.developer-docs-page:has(.doc-article-wrap) .developer-docs.doc-article-wrap.developer-docs--two-col-product,
body.developer-docs-page:has(.doc-article-wrap) .developer-docs.doc-article-wrap.developer-docs--product-subpage {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: 0;
	margin-top: var(--docs-layout-pull, 0px);
}

.developer-docs-sidebar {
	flex: 0 0 300px;
	border-right: 1px solid #e5e5e5;
	background: #fff;
	padding: var(--docs-hub-pad-top, 1.5rem) 0 2rem;
	position: sticky;
	top: var(--docs-sidebar-top, var(--payo-header-h, 72px));
	align-self: flex-start;
	max-height: calc(100vh - var(--docs-sidebar-top, var(--payo-header-h, 72px)));
	overflow-y: auto;
}

.developer-docs-sidebar-inner {
	padding: 0 var(--docs-hub-pad-x, 2rem);
}

.developer-docs-nav-label {
	font-family: "AvenirNextWorld-Demi", "Payo Fallback Demi Font", system-ui, sans-serif;
	font-size: 0.75rem;
	font-weight: normal;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #2b2e35;
	margin: 0 0 0.875rem;
	padding-bottom: 0.875rem;
}

/* Doc article product nav: title divider handled in developer-docs-chrome.css */
.developer-docs.doc-article-wrap .developer-docs-sidebar--products .developer-docs-nav-label {
	margin: 0;
	padding-bottom: 0.875rem;
	border-bottom: none;
}

.developer-docs-nav {
	list-style: none;
	margin: 0;
	padding: 0;
}

.developer-docs-nav li {
	margin: 0;
}

.developer-docs-nav a {
	display: block;
	padding: 0.4375rem 0;
	margin: 0;
	border-radius: 0;
	color: #4b5563 !important;
	text-decoration: none !important;
	font-size: 0.9375rem;
	line-height: 1.45;
	font-weight: 400;
	transition: color 0.12s ease, background-color 0.12s ease;
}
.developer-docs-nav a:hover {
	background: #eef0f4;
	color: #2b2e35 !important;
}

/* Group label (not a link) — e.g. capital advance under Additional services */
.developer-docs-nav .developer-docs-nav-group-title {
	display: block;
	padding: 0.5rem 0.75rem;
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.45;
	font-weight: 600;
	color: #111;
}

.developer-docs-nav-section {
	font-family: "AvenirNextWorld-Demi", "Payo Fallback Demi Font", system-ui, sans-serif;
	font-size: 0.6875rem;
	font-weight: normal;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #9ca3af;
	margin: 0;
	padding: 1rem 0 0.375rem;
}

.developer-docs-nav-section:not(:first-child) {
	margin-top: 0.5rem;
	padding-top: 1.125rem;
}

.developer-docs:not(.doc-article-wrap) .developer-docs-nav-section:not(:first-child) {
	border-top: 1px solid #e8eaed;
}

.developer-docs-nav > li > a {
	font-weight: 500;
	color: #2b2e35 !important;
}

/* Product category names (Accounts Payable, Mass Payout, …) */
.developer-docs-nav > li:has(> .developer-docs-nav--nested) > a {
	font-family: "AvenirNextWorld-Demi", "Payo Fallback Demi Font", system-ui, sans-serif;
	font-weight: normal;
	color: #111 !important;
}

.developer-docs-nav--nested a {
	font-weight: 400;
	font-size: 0.875rem;
	color: #6b7280 !important;
	padding-left: 1rem;
}

/* Standalone top-level items styled like section leads (Checkout, Open Banking) */
.developer-docs-sidebar--products .developer-docs-nav > li > a.nav-lead {
	font-family: "AvenirNextWorld-Demi", "Payo Fallback Demi Font", system-ui, sans-serif !important;
	font-weight: normal !important;
}

.developer-docs-nav a[aria-current="page"] {
	color: #6a4fc9 !important;
	font-weight: 500;
	background: #f0ebfc;
	box-shadow: inset 3px 0 0 #7c60d5;
}

.developer-docs-main {
	flex: 1;
	min-width: 0;
	padding: var(--docs-hub-pad-top, 1.5rem) var(--docs-hub-pad-x, 2rem) 4rem;
	background: #fff;
}

/* Platform hub — two-column layout uses full width for card grids */
.developer-docs--two-col-product .developer-docs-main.developer-docs-hub-main {
	grid-column: 2;
	min-width: 0;
	max-width: none;
	padding: 1.75rem 2.5rem 3rem;
}

.developer-docs--hub .developer-docs-main.developer-docs-hub-main.ps-page {
	max-width: none;
	margin: 0;
	padding-top: 0;
	width: 100%;
}

/* Product subpages — no left nav; same header x-position as developers.html hub main */
.developer-docs--product-subpage {
	display: block;
	border-bottom: none;
	background: #fff;
	padding-top: var(--docs-hub-main-pad-top, 1.75rem);
}

.developer-docs.doc-article-wrap.developer-docs--product-subpage {
	border-bottom: none;
	min-height: 0;
}

.developer-docs--product-subpage .developer-docs-product-main.ps-page {
	max-width: 1040px;
	margin-left: var(--docs-hub-content-left);
	margin-right: auto;
	width: auto;
	padding: 0 var(--docs-hub-main-pad-x, 2.5rem) 3rem 0;
	box-sizing: border-box;
}

@media (max-width: 991.98px) {
	.developer-docs--product-subpage .developer-docs-product-main.ps-page {
		margin-left: auto;
		margin-right: auto;
		width: 100%;
		max-width: 1040px;
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

.developer-docs-hub-main .developer-docs-header .developer-docs-breadcrumb {
	margin-bottom: 1.25rem;
}

/* Platform hub overview — simple section nav, flush-left sticky (not full product tree) */
.developer-docs--two-col-product.developer-docs--hub .developer-docs-sidebar--hub {
	grid-column: 1;
	position: sticky;
	top: var(--docs-sidebar-top, 72px);
	width: var(--docs-products-sidebar-w, 300px);
	height: calc(100vh - var(--docs-sidebar-top, 72px));
	max-height: calc(100vh - var(--docs-sidebar-top, 72px));
	margin-top: 0;
	border-right: 1px solid #e8eaed;
	background: #f8f9fb;
	align-self: start;
	flex: unset;
	padding: 0;
	z-index: 2;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.developer-docs--two-col-product.developer-docs--hub .developer-docs-sidebar--hub .developer-docs-sidebar-inner {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	padding: 0;
}

body.developer-docs-page .developer-docs--two-col-product.developer-docs--hub .developer-docs-sidebar--hub .developer-docs-sidebar-search {
	display: none !important;
}

.developer-docs--two-col-product.developer-docs--hub .developer-docs-sidebar--hub .developer-docs-sidebar-search {
	flex-shrink: 0;
	padding: 0.625rem 1rem;
	background: #f8f9fb;
	border-bottom: 1px solid #e8eaed;
}

.developer-docs--two-col-product.developer-docs--hub .developer-docs-sidebar--hub .developer-docs-sidebar-search-input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 0.4375rem 0.75rem 0.4375rem 2rem;
	font-size: 0.875rem;
	line-height: 1.4;
	color: #2b2e35;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 0.625rem center;
	background-size: 0.875rem;
	border: 1px solid #d8dce3;
	border-radius: 6px;
}

.developer-docs--two-col-product.developer-docs--hub .developer-docs-sidebar--hub .developer-docs-sidebar-search-input::placeholder {
	color: #9ca3af;
}

.developer-docs--two-col-product.developer-docs--hub .developer-docs-sidebar--hub .developer-docs-sidebar-search-input:focus {
	outline: none;
	border-color: #2171e0;
	box-shadow: 0 0 0 2px rgba(33, 113, 224, 0.15);
}

.developer-docs--two-col-product.developer-docs--hub .developer-docs-sidebar--hub .developer-docs-nav-label {
	flex-shrink: 0;
	margin: 0;
	padding: 0.875rem 1.25rem;
	border-bottom: 1px solid #e8eaed;
}

.developer-docs--two-col-product.developer-docs--hub .developer-docs-sidebar--hub nav[aria-label="Product navigation"] {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding-bottom: 1rem;
}

.developer-docs--two-col-product.developer-docs--hub .developer-docs-sidebar--hub .developer-docs-nav-section {
	margin: 0;
	padding: 1rem 1.25rem 0.375rem;
	font-family: "AvenirNextWorld-Demi", "Payo Fallback Demi Font", system-ui, sans-serif;
	font-size: 0.6875rem;
	font-weight: normal;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #6b7280;
}

.developer-docs--two-col-product.developer-docs--hub .developer-docs-sidebar--hub .developer-docs-nav-section:first-of-type {
	padding-top: 0.5rem;
}

.developer-docs--two-col-product.developer-docs--hub .developer-docs-sidebar--hub .developer-docs-nav a {
	display: block;
	padding: 0.4375rem 1.25rem;
	margin: 0;
	border-radius: 0;
	color: #2b2e35 !important;
	text-decoration: none !important;
	font-size: 0.9375rem;
	line-height: 1.45;
	font-weight: 500;
	transition: color 0.12s ease, background-color 0.12s ease;
}

.developer-docs--two-col-product.developer-docs--hub .developer-docs-sidebar--hub .developer-docs-nav a:hover {
	color: #6a4fc9 !important;
	background: #f0ebfc;
}

.developer-docs--two-col-product.developer-docs--hub .developer-docs-sidebar--hub .developer-docs-nav a[aria-current="page"] {
	color: #6a4fc9 !important;
	background: #f0ebfc;
	box-shadow: inset 3px 0 0 #7c60d5;
}

.developer-docs-hub-search-empty {
	margin: 0 0 1.5rem;
	font-size: 0.9375rem;
	color: #6b7280;
}

.developer-docs-hub-sub-results {
	margin: 0 0 2rem;
}

.developer-docs-hub-sub-results__heading {
	margin-bottom: 1rem;
	border-bottom: none;
	padding-bottom: 0;
}

.developer-docs-hub-sub-results__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
}

.developer-docs-hub-sub-results__link {
	display: block;
	padding: 0.9rem 1.1rem;
	border: 1px solid #e5e5e5;
	border-radius: 12px;
	background: #fff;
	text-decoration: none !important;
	color: inherit !important;
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background-color 0.2s ease;
}

.developer-docs-hub-sub-results__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(33, 113, 224, 0.12);
	border-color: rgba(33, 113, 224, 0.35);
	background-color: rgba(33, 113, 224, 0.04);
}

.developer-docs-hub-sub-results__title {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	color: #2171e0 !important;
	margin-bottom: 0.2rem;
}

.developer-docs-hub-sub-results__parent {
	display: block;
	font-size: 0.8125rem;
	color: #6b7280;
}

.developer-docs-hub-section-hidden {
	display: none !important;
}

@media (max-width: 991.98px) {
	.developer-docs--two-col-product.developer-docs--hub .developer-docs-sidebar--hub {
		grid-column: 1;
		position: relative;
		top: auto;
		width: 100%;
		height: auto;
		max-height: none;
		border-right: none;
		border-bottom: 1px solid #e5e5e5;
	}
}

/* Hub pages — breadcrumb, title, and sections share one left edge */
.developer-docs:not(.doc-article-wrap) .developer-docs-header .developer-docs-breadcrumb {
	margin: 0 0 0.75rem;
	padding: 0;
}

.developer-docs:not(.doc-article-wrap) .developer-docs-header,
.developer-docs:not(.doc-article-wrap) .developer-docs-main > section {
	margin-left: 0;
	padding-left: 0;
}

.developer-docs:not(.doc-article-wrap) .developer-docs-card-grid.row {
	margin-left: 0;
	margin-right: 0;
}

@media (max-width: 991.98px) {
	.developer-docs {
		flex-direction: column;
	}
	.developer-docs-sidebar {
		position: relative;
		max-height: none;
		border-right: none;
		border-bottom: 1px solid #e5e5e5;
		flex: none;
		width: 100%;
	}
	.developer-docs-main {
		padding: 1.5rem 1rem 3rem;
	}
}

.developer-docs-breadcrumb {
	font-size: 0.8125rem;
	color: #333 !important;
}
.developer-docs-breadcrumb a {
	color: #2171e0 !important;
	text-decoration: none !important;
}
.developer-docs-breadcrumb a:hover {
	text-decoration: underline !important;
}

.developer-docs-title {
	font-size: clamp(2rem, 3.5vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #111;
	margin: 0 0 1rem;
	font-family: "AvenirNextWorld-Demi", "Payo Fallback Demi Font", system-ui, sans-serif;
}

.developer-docs-lead {
	font-size: 1.125rem;
	line-height: 1.6;
	color: #333;
	max-width: 52rem;
	margin: 0;
}

.developer-docs-h2 {
	font-size: 1.25rem;
	font-weight: 700;
	color: #111;
	margin: 0 0 1.25rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #e5e5e5;
	font-family: "AvenirNextWorld-Demi", "Payo Fallback Demi Font", system-ui, sans-serif;
}

.developer-docs-card-grid .developer-docs-card {
	height: 100%;
	border-radius: 12px;
	padding: 1.25rem 1.35rem;
	border: 1px solid #e5e5e5;
	background: #fff !important;
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background-color 0.2s ease;
	text-decoration: none !important;
	display: block;
	color: inherit !important;
}
.developer-docs-card-grid .developer-docs-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 36px rgba(33, 113, 224, 0.14);
	border-color: rgba(33, 113, 224, 0.35);
	background-color: rgba(33, 113, 224, 0.06) !important;
}
.developer-docs-card-grid .developer-docs-card:focus-visible {
	outline: 2px solid #2171e0;
	outline-offset: 3px;
}

.developer-docs-card-title {
	font-size: 1.15rem;
	font-weight: 700;
	color: #2171e0 !important;
	margin: 0 0 0.5rem;
	line-height: 1.3;
}

.developer-docs-card-desc {
	font-size: 0.9rem;
	line-height: 1.5;
	color: #222 !important;
	margin: 0;
}

/*
 * main.min.css styles ALL <footer> like the site footer: black bg, color:#fff,
 * footer:after = full-area dark gradient (opacity .8), footer:before = gradient top bar.
 * Our partnerships block uses <footer> — those rules made it look dim. Reset explicitly.
 */
body.developer-docs-page footer.developer-docs-footer-cta {
	margin-top: 2.5rem;
	padding: 1.75rem 1.5rem !important;
	border-radius: 12px;
	background: #fff !important;
	color: #111 !important;
	border: 1px solid #e5e5e5;
	text-align: center;
	position: relative;
	overflow: visible !important;
	z-index: 1;
}

body.developer-docs-page footer.developer-docs-footer-cta::before,
body.developer-docs-page footer.developer-docs-footer-cta::after {
	content: none !important;
	display: none !important;
	background: none !important;
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
}

body.developer-docs-page footer.developer-docs-footer-cta .developer-docs-footer-lead {
	margin: 0 0 1rem;
	font-size: 1.05rem;
	font-weight: 600;
	color: #111 !important;
}

/* Theme footer{color:#fff} must not wash out Bootstrap outline button */
body.developer-docs-page footer.developer-docs-footer-cta .btn-outline-primary {
	color: #0d6efd !important;
	border-color: #0d6efd !important;
}
body.developer-docs-page footer.developer-docs-footer-cta .btn-outline-primary:hover {
	color: #fff !important;
	background-color: #0d6efd !important;
}

.developer-docs-sidebar-cta .btn {
	font-size: 0.875rem;
}

/* Doc pages: platform header + search; hide legacy mega menu and duplicate chrome */
body.developer-docs-page #masthead > .top-header,
body.developer-docs-page #masthead > .bottom-header,
body.developer-docs-page #masthead #site-navigation,
body.developer-docs-page #masthead .payo-mega-nav,
body.developer-docs-page #masthead #primary-menu {
	display: none !important;
}

body.developer-docs-page #ppl-platform-nav {
	display: block !important;
}

body.developer-docs-page .ppl-platform-nav__menu {
	display: none !important;
}

body.developer-docs-page .developer-docs-sidebar-search,
body.developer-docs-page .developer-docs-sidebar-search--relocated {
	display: none !important;
}

body.developer-docs-page #ppl-platform-footer,
body.developer-docs-page .ppl-platform-footer,
body.developer-docs-page footer.site-footer {
	display: none !important;
}