/* LATVPS page: faithful dark port of the source doc, recolored to AffiliateCMS.com brand.
   Everything scoped under .lat so it never leaks into the light site chrome.
   Palette ported 1:1 from source; only the purple accent is remapped to brand blue. */

.lat {
	--l-body: #cbd5e1;
	--l-muted: #7c8aa5;
	--l-accent: #5B7BFF;   /* was #7c5cff, remapped to AffiliateCMS brand blue */
	--l-accent2: #22d3ee;
	--l-card: #121a30;
	--l-line: #23304f;
	background: radial-gradient( 1200px 600px at 50% -10%, #1b2550 0, #0b1020 55% );
	color: var(--l-body);
	padding: 0 0 28px;
}
.lat .container { max-width: 1040px; }
.lat a { color: var(--l-accent2); text-decoration: none; }
.lat a:hover { text-decoration: underline; }

/* Breadcrumb readable on the dark ground. */
.lat .breadcrumb,
.lat .breadcrumb a,
.lat .breadcrumb span,
.lat .breadcrumb li { color: var(--l-muted); }
.lat .breadcrumb a:hover { color: #fff; }

/* Hero (full width, above the docs layout). */
.lat .lat-hero { padding: 18px 0 6px; max-width: 780px; }
.lat .lat-hero__eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--l-accent); font-weight: 700; }
.lat .lat-hero h1 { font-size: 30px; line-height: 1.15; color: #fff; letter-spacing: -0.02em; margin: 10px 0 12px; text-wrap: balance; }
.lat .lat-hero p { font-size: 16px; color: var(--l-body); line-height: 1.6; margin: 0 0 16px; }
.lat .lat-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* Buttons: brand gradient primary, ghost secondary (ported look). */
.lat .lat-hero__cta .btn { border-radius: 10px; font-weight: 700; font-size: 14px; padding: 11px 18px; }
.lat .lat-hero__cta .btn--primary { background: linear-gradient( 90deg, #5B7BFF, #2B54F6 ); color: #fff; border: 0; }
.lat .lat-hero__cta .btn--primary:hover { filter: brightness(1.08); text-decoration: none; }
.lat .lat-hero__cta .btn--secondary { background: transparent; border: 1px solid var(--l-line); color: var(--l-body); }
.lat .lat-hero__cta .btn--secondary:hover { border-color: var(--l-accent); color: #fff; text-decoration: none; }

/* Docs layout: sticky left sidebar + content column. */
.lat .docs-layout { display: grid; grid-template-columns: 210px 1fr; gap: 34px; align-items: start; margin-top: 10px; }
.lat .docs-sidebar { position: sticky; top: 18px; font-size: 13.5px; border-right: 1px solid var(--l-line); padding-right: 10px; }
.lat .docs-sidebar .lbl { color: var(--l-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; margin: 0 0 8px 10px; }
.lat .docs-sidebar a { display: block; color: var(--l-muted); padding: 6px 10px; border-radius: 8px; text-decoration: none; border-left: 2px solid transparent; margin: 1px 0; }
.lat .docs-sidebar a:hover { color: #fff; background: var(--l-card); text-decoration: none; }
.lat .docs-sidebar a.active { color: #fff; background: var(--l-card); border-left-color: var(--l-accent); }
.lat .docs-content { min-width: 0; }

/* Sections + typography. */
.lat .lat-sec { padding: 2px 0; scroll-margin-top: 16px; }
.lat .lat-sec > h2 { font-size: 22px; color: #fff; font-weight: 800; letter-spacing: -0.01em; margin: 30px 0 10px; }
.lat .lat-sec:first-child > h2 { margin-top: 4px; }
.lat .lat-sec > h3 { font-size: 16px; color: #fff; font-weight: 700; margin: 22px 0 8px; }
.lat .lat-sec > p { color: var(--l-body); line-height: 1.6; margin: 10px 0; max-width: 74ch; }

/* Lists: restore bullets (parent theme resets ul to list-style:none). */
.lat .lat-list { margin: 10px 0 10px 22px; padding: 0; list-style: disc; }
.lat .lat-list li { margin: 5px 0; list-style: disc; color: var(--l-body); line-height: 1.6; max-width: 78ch; }
.lat .lat-list li::before { content: none; }

/* Feature cards. */
.lat .lat-features { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin: 10px 0; }
.lat .lat-feature { border: 1px solid var(--l-line); border-radius: 12px; padding: 16px 18px; background: var(--l-card); }
.lat .lat-feature h3 { margin: 0 0 8px; font-size: 15px; color: #fff; }
.lat .lat-feature p { margin: 0; font-size: 14px; color: var(--l-muted); line-height: 1.55; }

/* Tables. */
.lat .lat-table-wrap { overflow-x: auto; margin: 14px 0; }
.lat .lat-table { width: 100%; border-collapse: collapse; background: var(--l-card); border: 1px solid var(--l-line); border-radius: 12px; overflow: hidden; font-size: 14px; min-width: 460px; }
.lat .lat-table th, .lat .lat-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--l-line); vertical-align: top; color: var(--l-body); }
.lat .lat-table th { color: #fff; background: #0e1730; font-weight: 700; font-size: 12.5px; }
.lat .lat-table tr:last-child td { border-bottom: 0; }
.lat .lat-table a { color: var(--l-accent2); white-space: nowrap; }
.lat .lat-badge { display: inline-block; font-size: 12px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--l-line); color: var(--l-muted); }
.lat .lat-badge--ok { color: #7fe7f5; border-color: #1f3a52; background: rgba(34, 211, 238, 0.08); }

/* Code blocks (dark, full width). */
.lat pre.lat-cmd, .lat pre.lat-menu { background: var(--l-card); border: 1px solid var(--l-line); border-radius: 10px; padding: 14px 16px; margin: 12px 0; overflow-x: auto; color: #e6edff; font: 13.5px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.lat pre.lat-menu { font-size: 12.5px; }
.lat pre.lat-cmd code, .lat pre.lat-menu code { background: none; padding: 0; border: 0; border-radius: 0; color: inherit; white-space: pre; font: inherit; }

/* Inline code (never inside a pre). */
.lat .lat-sec p code, .lat .lat-sec li code, .lat .lat-sec h2 code, .lat .lat-sec h3 code, .lat .rc-faq code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.9em; background: #0e1730; color: #c9d6ff; padding: 1px 6px; border-radius: 5px; white-space: nowrap; }

/* Callout / note. */
.lat .lat-note { font-size: 13.5px; color: var(--l-muted); border: 1px solid var(--l-line); border-left: 3px solid var(--l-accent); background: rgba(91, 123, 255, 0.08); padding: 12px 16px; border-radius: 10px; margin: 14px 0; }
.lat .lat-note strong { color: #e6edff; }

/* Bank details box. */
.lat .lat-bank { border: 1px solid var(--l-line); border-radius: 12px; padding: 14px 18px; background: var(--l-card); margin: 12px 0; max-width: 480px; }
.lat .lat-bank h4 { margin: 0 0 10px; font-size: 14px; color: #fff; }
.lat .lat-bank ul { margin: 0 0 0 18px; padding: 0; list-style: disc; }
.lat .lat-bank li { font-size: 14px; line-height: 1.7; color: var(--l-body); list-style: disc; }
.lat .lat-bank li::before { content: none; }

/* Architecture diagram (self-contained dark SVG island). */
.lat .doc-diagram { border: 1px solid var(--l-line); background: #0e1730; border-radius: 14px; padding: 18px; margin: 14px 0 6px; overflow-x: auto; }
.lat .doc-diagram svg { display: block; width: 100%; height: auto; min-width: 560px; }
.lat .doc-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 2px 14px; font-size: 13px; color: var(--l-muted); }
.lat .doc-legend span { display: inline-flex; align-items: center; }
.lat .doc-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; }
.lat .doc-legend .lg-proxy { background: #5B7BFF; }
.lat .doc-legend .lg-wp { background: #121a30; border: 1px solid #23304f; }
.lat .doc-legend .lg-db { background: #0e1730; border: 1px solid #22d3ee; }
.lat .doc-legend .lg-iso { background: #2a3a5f; }

/* FAQ accordion on dark. */
.lat .rc-faq details { border: 1px solid var(--l-line); background: var(--l-card); border-radius: 10px; margin: 8px 0; }
.lat .rc-faq summary { color: #fff; font-weight: 700; padding: 12px 16px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lat .rc-faq summary::-webkit-details-marker { display: none; }
.lat .rc-faq summary .bi { color: var(--l-muted); transition: transform 0.15s; }
.lat .rc-faq details[open] summary .bi { transform: rotate(180deg); }
.lat .rc-faq__a { padding: 0 16px 14px; color: var(--l-body); line-height: 1.6; }

/* Responsive: sidebar collapses to a horizontal chip row above the content. */
@media (max-width: 760px) {
	.lat .docs-layout { grid-template-columns: 1fr; gap: 0; }
	.lat .docs-sidebar { position: static; border-right: 0; border-bottom: 1px solid var(--l-line); padding: 0 0 10px; margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 4px; }
	.lat .docs-sidebar .lbl { display: none; }
	.lat .docs-sidebar a { border-left: 0; margin: 0; }
}
@media (max-width: 560px) {
	.lat .lat-hero h1 { font-size: 24px; }
	.lat .lat-sec > h2 { font-size: 20px; }
}