/*!
 * WalletPlug — API documentation theme overlay
 * WPDOCTHEME_V1
 *
 * Loaded AFTER api-docs.css. It overrides colour and surface treatment only —
 * no layout, spacing or structural rules — so removing the single <link> that
 * loads this file restores the previous appearance exactly.
 *
 * Palette taken from the live landing page:
 *   violet   #8B5CF6   deep violet #6D28D9   accent #7C3AED
 *   ink      #0E1019   surface     #F7F7FB
 */

:root {
    --primary-color: #7C3AED;
    --primary-dark: #6D28D9;
    --secondary-color: #6B7280;
    --dark-color: #0E1019;
    --light-color: #F7F7FB;
    --border-color: #E6E4F0;
    --code-bg: #0E1019;
    --code-text: #E7E5F2;

    --wp-violet: #8B5CF6;
    --wp-violet-deep: #6D28D9;
    --wp-violet-soft: #F4F0FE;
    --wp-ink: #0E1019;
    --wp-line: #E6E4F0;
    --wp-muted: #6B7280;
}

/* ── page surface ─────────────────────────────────────────────────────── */
.api-docs-body {
    background-color: #FAFAFD;
    color: #2A2D3A;
}

/* ── top bar: match the landing page's violet gradient ────────────────── */
.api-navbar {
    background: linear-gradient(135deg, #6D28D9 0%, #8B5CF6 55%, #7C3AED 100%);
    box-shadow: 0 2px 18px rgba(109, 40, 217, .28);
    border-bottom: 0;
}

.api-navbar .brand-name {
    letter-spacing: .2px;
}

.api-navbar .brand-subtitle {
    color: rgba(255, 255, 255, .72);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    font-size: 10px;
}

.api-navbar .btn-primary {
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .32);
    backdrop-filter: blur(4px);
    font-weight: 600;
    transition: all .16s ease;
}

.api-navbar .btn-primary:hover {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: #6D28D9;
}

.api-navbar .btn-outline-light:hover {
    background: rgba(255, 255, 255, .18);
}

/* ── sidebar ──────────────────────────────────────────────────────────── */
.api-sidebar {
    border-right: 1px solid var(--wp-line);
    background: #FFFFFF;
}

.sidebar-header {
    border-bottom: 1px solid var(--wp-line);
}

.sidebar-brand {
    color: var(--wp-ink);
    font-weight: 700;
}

.nav-section-title {
    color: #8A8FA3;
    letter-spacing: 1.2px;
    font-size: 10.5px;
    text-transform: uppercase;
}

.sidebar-link {
    color: #4A4F63;
    border-radius: 9px;
    transition: background .14s ease, color .14s ease;
}

.sidebar-link:hover {
    background: var(--wp-violet-soft);
    color: var(--wp-violet-deep);
}

.sidebar-link.active {
    background: linear-gradient(135deg, #7C3AED, #8B5CF6);
    color: #FFFFFF;
    box-shadow: 0 3px 12px rgba(124, 58, 237, .3);
}

.sidebar-link.active i {
    color: #FFFFFF;
    opacity: .95;
}

.sidebar-footer {
    border-top: 1px solid var(--wp-line);
    color: var(--wp-muted);
}

/* ── headings and content ─────────────────────────────────────────────── */
.content-section h1,
.content-section h2,
.content-section h3,
.content-section h4 {
    color: var(--wp-ink);
    letter-spacing: -.2px;
}

.content-section h2 {
    border-bottom: 1px solid var(--wp-line);
}

.content-section a {
    color: var(--wp-violet-deep);
    text-decoration-color: rgba(124, 58, 237, .35);
}

.content-section a:hover {
    color: var(--wp-violet);
}

/* ── method badges: keep them readable, tint to the brand family ──────── */
.method-badge {
    border-radius: 7px;
    letter-spacing: .6px;
    font-weight: 700;
}

.method-get { background: #EEF0FF; color: #4338CA; }
.method-post { background: #E9FBF2; color: #0F7A50; }
.method-put { background: #FFF4E5; color: #9A5B00; }
.method-delete { background: #FDECEC; color: #B3261E; }

/* ── code blocks: match the landing page's near-black ─────────────────── */
pre,
pre code,
.code-block,
.code-block pre {
    background: var(--wp-ink) !important;
    color: var(--code-text);
    border-radius: 12px;
}

.code-header,
.code-block .code-header {
    background: #171A25;
    color: #C9C6DC;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    border-radius: 12px 12px 0 0;
}

.code-header + pre,
.code-block .code-header + pre {
    border-radius: 0 0 12px 12px;
}

.copy-btn,
.code-block .copy-btn {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #E7E5F2;
    border-radius: 7px;
}

.copy-btn:hover,
.code-block .copy-btn:hover {
    background: var(--wp-violet);
    border-color: var(--wp-violet);
    color: #FFFFFF;
}

/* ── cards, tables, callouts ──────────────────────────────────────────── */
.card,
.endpoint-card,
.info-card {
    border: 1px solid var(--wp-line);
    border-radius: 14px;
}

.table thead th {
    background: var(--wp-violet-soft);
    color: #3F3A63;
    border-bottom: 1px solid var(--wp-line);
    font-weight: 700;
}

.table td,
.table th {
    border-color: #F0EFF6;
}

.alert-info {
    background: var(--wp-violet-soft);
    border: 1px solid #DDD4FB;
    color: #4C3A94;
}

.alert-warning {
    background: #FFF7E8;
    border: 1px solid #FCE3B4;
    color: #8A5A00;
}

/* ── buttons outside the navbar ───────────────────────────────────────── */
.api-content .btn-primary,
.content-wrapper .btn-primary {
    background: linear-gradient(135deg, #7C3AED, #6D28D9);
    border: 0;
    box-shadow: 0 3px 12px rgba(124, 58, 237, .28);
}

.api-content .btn-primary:hover,
.content-wrapper .btn-primary:hover {
    filter: brightness(1.06);
}

/* ── scroll-to-top ────────────────────────────────────────────────────── */
.scroll-top-btn {
    background: linear-gradient(135deg, #7C3AED, #6D28D9);
    border: 0;
    color: #FFFFFF;
    box-shadow: 0 6px 18px rgba(109, 40, 217, .34);
}

/* ── selection + focus in brand colour ────────────────────────────────── */
::selection {
    background: rgba(139, 92, 246, .22);
}

.sidebar-link:focus-visible,
.api-navbar a:focus-visible,
.copy-btn:focus-visible {
    outline: 2px solid #8B5CF6;
    outline-offset: 2px;
}


/* ── WPDOCLOGO_V1 — logo in the navbar, and button contrast ───────────── */

.api-navbar .navbar-logo {
    height: 34px;
    width: auto;
    max-width: 190px;
    object-fit: contain;
    /* the bar is violet; a dark logo would disappear on it, so lift it */
    filter: brightness(0) invert(1);
    opacity: .97;
}

/* if your logo is already light, remove the filter above and it will show
   in its original colours */

/* Primary buttons in the content area were inheriting a dark label on the
   violet fill, which made "Test API Now" unreadable. */
.api-content .btn-primary,
.content-wrapper .btn-primary,
.api-docs-body .btn-primary,
.api-content .btn-primary:visited,
.content-wrapper .btn-primary:visited {
    color: #FFFFFF !important;
}

.api-content .btn-primary i,
.content-wrapper .btn-primary i {
    color: #FFFFFF !important;
    opacity: .95;
}

.api-content .btn-primary:hover,
.content-wrapper .btn-primary:hover,
.api-docs-body .btn-primary:hover {
    color: #FFFFFF !important;
    filter: brightness(1.08);
}

/* outline variants keep brand colour text on white */
.api-content .btn-outline-primary,
.content-wrapper .btn-outline-primary {
    color: #6D28D9 !important;
    border-color: #C4B5FD;
}

.api-content .btn-outline-primary:hover,
.content-wrapper .btn-outline-primary:hover {
    background: #7C3AED;
    border-color: #7C3AED;
    color: #FFFFFF !important;
}

/* the two Quick Start step cards still used the base blue and green */
.api-content .card-header.bg-primary,
.content-wrapper .card-header.bg-primary,
.api-content .bg-primary,
.content-wrapper .bg-primary {
    background: linear-gradient(135deg, #7C3AED, #6D28D9) !important;
    color: #FFFFFF !important;
}

.api-content .card-header.bg-success,
.content-wrapper .card-header.bg-success,
.api-content .bg-success,
.content-wrapper .bg-success {
    background: linear-gradient(135deg, #8B5CF6, #6D28D9) !important;
    color: #FFFFFF !important;
}


/* ── WPDOCLOGO_V2 — inline brand mark replaces the raster logo ─────────── */

.api-navbar .wp-doc-mark {
    display: block;
    flex: none;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .22));
}

/* the raster logo is no longer used in this header; if it is ever restored,
   it must not be inverted — the uploaded file has its own dark background */
.api-navbar .navbar-logo {
    filter: none;
    background: #FFFFFF;
    border-radius: 8px;
    padding: 3px 6px;
}

.api-navbar .brand-name {
    font-weight: 800;
    font-size: 19px;
    line-height: 1.1;
    color: #FFFFFF;
}

.api-navbar .brand-subtitle {
    color: rgba(255, 255, 255, .68);
    letter-spacing: 2.2px;
    font-size: 9.5px;
    font-weight: 600;
    margin-top: 1px;
}


/* ═══════════════════════════════════════════════════════════════════════
   WPDOCHERO_V1 — section hero panels on the brand palette
   The plugin/integration heroes were hard-coded to the base template's blue
   (#1e40af → #3b82f6) and green (#10b981 → #059669). They now use the same
   violet gradient as the navbar. Text, icons and badges are explicitly kept
   white so nothing loses contrast.
   Colour only — no layout, padding or sizing is altered.
   ═══════════════════════════════════════════════════════════════════════ */

.woocommerce-header,
.plugin-header,
.integration-header,
.platform-header,
.section-hero {
    background: linear-gradient(135deg, #6D28D9 0%, #8B5CF6 55%, #7C3AED 100%) !important;
    box-shadow: 0 8px 26px rgba(109, 40, 217, .26);
    border: 1px solid rgba(255, 255, 255, .14);
}

/* every piece of content inside a hero stays legible on violet */
.woocommerce-header,
.woocommerce-header h1,
.woocommerce-header h2,
.woocommerce-header h3,
.woocommerce-header h4,
.woocommerce-header p,
.woocommerce-header li,
.woocommerce-header span,
.woocommerce-header strong,
.woocommerce-header .header-text,
.woocommerce-header .stat-number,
.woocommerce-header .stat-label {
    color: #FFFFFF !important;
}

.woocommerce-header p,
.woocommerce-header .stat-label {
    color: rgba(255, 255, 255, .88) !important;
}

/* the WordPress mark and any other icon in a hero */
.woocommerce-header .header-icon,
.woocommerce-header .header-icon i,
.woocommerce-header i {
    color: #FFFFFF !important;
    opacity: .96;
}

/* the v2.0 / Mobile / HPOS tiles: slightly stronger glass so they read
   against the lighter violet */
.woocommerce-header .stat-item {
    background: rgba(255, 255, 255, .18) !important;
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(3px);
}

.woocommerce-header .stat-number {
    font-weight: 800;
    letter-spacing: -.2px;
}

.woocommerce-header .stat-label {
    letter-spacing: 1.1px;
    font-size: 10.5px;
    text-transform: uppercase;
}

/* the green "compatible" pill matched the old palette */
.compatibility-badge {
    background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(124, 58, 237, .3);
}

/* feature icons that inherited bootstrap's blue and green */
.feature-icon.bg-primary,
.feature-icon.bg-success,
.feature-icon.bg-info {
    background: linear-gradient(135deg, #7C3AED, #6D28D9) !important;
    color: #FFFFFF !important;
}

/* premium cards keep their structure, take the brand border and header */
.premium-card.border-primary,
.premium-card.border-success {
    border-color: #DDD4FB !important;
}

.premium-card > .card-header.bg-primary,
.premium-card > .card-header.bg-success {
    background: linear-gradient(135deg, #7C3AED, #6D28D9) !important;
    color: #FFFFFF !important;
    border-bottom: 0;
}

.premium-card > .card-header.bg-primary *,
.premium-card > .card-header.bg-success * {
    color: #FFFFFF !important;
}