/* CartGenie brand layer over Scribe's default theme.
   Keeps the documentation layout intact while matching the dashboard palette. */

:root {
    --cg-navy: #18123f;
    --cg-navy-soft: #292452;
    --cg-code-bg: #10172a;
    --cg-code-inset: #0a0f1d;
    --cg-pink: #ec008c;
    --cg-blue: #007fff;
    --cg-green: #34c759;
    --cg-yellow: #ffcc00;
    --cg-gray-25: #f8f8fb;
    --cg-gray-50: #f3f4f8;
    --cg-gray-100: #e8eaf1;
    --cg-gray-400: #8b8fa8;
    --cg-gray-700: #62657a;
    --cg-gray-900: #34354a;
}

html {
    background: var(--cg-gray-25);
}

body {
    background: var(--cg-gray-25);
    color: var(--cg-gray-900);
    font-family: 'Open Sans', ui-sans-serif, system-ui, sans-serif;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Sidebar */

.tocify-wrapper {
    background: linear-gradient(180deg, var(--cg-navy) 0%, var(--cg-navy-soft) 72%, #4c1e59 100%);
    border-bottom-right-radius: 32px;
    box-shadow: 10px 0 30px rgba(24, 18, 63, 0.08);
    font-size: 14px;
    font-weight: 600;
}

.tocify-wrapper li,
.tocify-wrapper ul {
    line-height: 1.65;
}

.tocify-wrapper .tocify-item > a,
.tocify-wrapper .toc-footer li {
    padding: 8px 16px;
}

.tocify-wrapper .tocify-item.level-3 > a {
    padding-left: 28px;
}

.tocify-wrapper > .search {
    padding-top: 0;
}

.tocify-wrapper > .search input {
    background-color: rgba(255, 255, 255, 0.96);
    border: 1px solid transparent;
    border-radius: 10px;
    box-sizing: border-box;
    color: var(--cg-navy);
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    margin: 16px 15px 12px;
    padding: 8px 12px 8px 34px;
    transition: box-shadow 150ms ease, border-color 150ms ease;
}

.tocify-wrapper > .search input:focus {
    border-color: var(--cg-blue);
    box-shadow: 0 0 0 3px rgba(0, 127, 255, 0.28);
}

.tocify-wrapper > .search input::placeholder {
    color: var(--cg-gray-400);
    font-weight: 400;
}

.tocify-wrapper > .search:before {
    color: var(--cg-gray-400);
    left: 26px;
    top: 27px;
}

.tocify-wrapper .tocify-item > a,
.tocify-wrapper .toc-footer li a {
    color: rgba(255, 255, 255, 0.6);
    transition: color 150ms ease, background-color 150ms ease;
}

.tocify-wrapper .tocify-item > a:hover,
.tocify-wrapper .toc-footer li a:hover {
    color: #fff;
}

.tocify-wrapper li.tocify-focus {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 3px 0 0 var(--cg-pink);
}

.tocify-wrapper li.tocify-focus,
.tocify-wrapper li.tocify-focus > a {
    color: #fff;
    font-weight: 700;
}

.tocify-wrapper .tocify-subheader,
.tocify-wrapper .search-results {
    background: rgba(7, 6, 29, 0.25);
}

.tocify-wrapper .tocify-subheader .tocify-item > a {
    color: rgba(255, 255, 255, 0.48);
    font-size: 13px;
}

.tocify-wrapper .toc-footer {
    border-top-color: rgba(255, 255, 255, 0.15);
}

.tocify-wrapper .lang-selector a.active {
    background-color: var(--cg-pink);
}

/* Reading column */

.page-wrapper {
    background-color: var(--cg-gray-25);
}

.content > aside,
.content > details,
.content > dl,
.content > h1,
.content > h2,
.content > h3,
.content > h4,
.content > h5,
.content > h6,
.content > ol,
.content > p,
.content > table,
.content > ul,
.content > div,
.content > form > aside,
.content > form > details,
.content > form > h1,
.content > form > h2,
.content > form > h3,
.content > form > h4,
.content > form > h5,
.content > form > h6,
.content > form > p,
.content > form > table,
.content > form > ul,
.content > form > div {
    text-shadow: none;
}

.content p,
.content li,
.content dd,
.content dt {
    line-height: 1.75;
}

.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
    color: var(--cg-navy);
    letter-spacing: -0.025em;
}

.content h1 {
    background: none;
    border-bottom: 1px solid var(--cg-gray-100);
    border-top: 0;
    font-size: 30px;
    line-height: 1.25;
    margin-bottom: 24px;
    padding-bottom: 18px;
    padding-top: 42px;
}

.content h2 {
    background: none;
    border-top: 1px solid var(--cg-gray-100);
    font-size: 21px;
    line-height: 1.35;
    margin-top: 52px;
    padding-bottom: 12px;
    padding-top: 28px;
}

.content h1 + div + h2,
.content h1 + h2 {
    margin-top: -10px;
}

.content h3,
.content h4,
.content h5,
.content h6 {
    font-size: 15px;
    line-height: 1.45;
    margin-bottom: 10px;
    margin-top: 32px;
}

.content h4,
.content h5,
.content h6 {
    color: var(--cg-gray-700);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.content a {
    color: var(--cg-blue);
    font-weight: 600;
    text-decoration-color: rgba(0, 127, 255, 0.3);
    text-underline-offset: 2px;
}

.content a:hover {
    color: var(--cg-pink);
    text-decoration-color: currentColor;
}

.content code:not(pre code) {
    background: #eceefa;
    border: 1px solid #dde0f2;
    border-radius: 5px;
    color: #3f3b6d;
    font-size: 0.86em;
    padding: 2px 5px;
}

.content hr {
    border-bottom-color: transparent;
    border-top-color: var(--cg-gray-100);
}

/* Tables and callouts */

.content table {
    border: 1px solid var(--cg-gray-100);
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(24, 18, 63, 0.04);
    overflow: hidden;
}

.content table thead,
.content table tr:first-child {
    background-color: #eef4ff;
    color: var(--cg-navy);
}

.content table th {
    border-bottom-color: #dbe4f5;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.025em;
    padding: 10px 12px;
}

.content table td {
    border-bottom: 1px solid var(--cg-gray-100);
    padding: 11px 12px;
}

.content table tr:nth-child(odd) > td,
.content table tr:nth-child(even) > td {
    background-color: #fff;
}

.content table tr:hover > td {
    background-color: #f7faff;
}

.content aside,
.content aside.notice,
.content aside.warning,
.content aside.success,
.content aside.info {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: inset 4px 0 0 var(--cg-blue);
    color: var(--cg-gray-900);
    text-shadow: none;
}

/* Labels above request and response tables. */

.fancy-heading-panel {
    background: transparent;
    border-bottom: 1px solid var(--cg-gray-100);
    border-radius: 0;
    color: var(--cg-gray-400);
    font-size: 11px;
    letter-spacing: 0.1em;
    margin: 30px 10px 12px 28px;
    padding: 0 0 8px !important;
    text-transform: uppercase;
    width: auto;
}

.fancy-heading-panel b {
    font-weight: 700;
}

/* Code column */

.page-wrapper .dark-box {
    background: linear-gradient(180deg, var(--cg-code-bg), #11152a);
}

.content blockquote,
.content .annotation {
    background-color: transparent;
    color: #e8edff;
}

.content pre,
.highlight,
.highlight .w,
.content pre > code.hljs,
.dark-box .hljs {
    background-color: var(--cg-code-inset);
}

.content pre {
    color: #e8edff;
    font-size: 13px;
    line-height: 1.65;
}

.content blockquote > p {
    background-color: rgba(255, 255, 255, 0.055);
    border-bottom-color: rgba(255, 255, 255, 0.12);
    border-top-color: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.86);
}

.page-wrapper .lang-selector {
    border-bottom-color: var(--cg-code-inset);
}

.lang-selector {
    background-color: var(--cg-code-inset);
}

.lang-selector button {
    color: rgba(255, 255, 255, 0.62);
    font-size: 12px;
    font-weight: 600;
    transition: background-color 150ms ease, color 150ms ease;
}

.lang-selector button.active {
    background-color: var(--cg-code-bg);
    color: #fff;
}

.lang-selector button:active,
.lang-selector button:hover,
.lang-selector button:focus {
    background-color: rgba(0, 127, 255, 0.22);
    color: #fff;
}

/* HTTP method badges */

.badge {
    border-radius: 999px;
    box-shadow: none;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: 3px 8px 4px;
}

.badge.badge-green { background-color: var(--cg-blue); }
.badge.badge-black { background-color: var(--cg-green); }
.badge.badge-darkblue { background-color: var(--cg-navy); }
.badge.badge-purple { background-color: var(--cg-yellow); color: var(--cg-navy); }
.badge.badge-red { background-color: var(--cg-pink); }
.badge.badge-darkred { background-color: #bf2868; }

* {
    scrollbar-color: #686c89 transparent;
}

*::-webkit-scrollbar-thumb {
    background: #686c89;
}

@media (max-width: 700px) {
    .content h1 {
        font-size: 26px;
        padding-top: 28px;
    }

    .content h2 {
        font-size: 19px;
        margin-top: 38px;
    }

    .content table {
        border-radius: 8px;
    }

    .fancy-heading-panel {
        margin-left: 28px;
        width: auto;
    }
}