/* ==========================================================================
   Fonts
   ========================================================================== */

:root {
    --md-text-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --md-code-font: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ==========================================================================
   Color tokens
   ========================================================================== */

:root {
    --primitive-white: oklch(100% 0 0);
    --primitive-black: oklch(0% 0 0);

    --primitive-brand-primary: oklch(59.67% 0.2212 258.03);
    --primitive-brand-dark: oklch(0.48 0.1674 258.22);
    --primitive-brand-light: oklch(0.707 0.165 254.624);
    --color-blue-400: oklch(0.707 0.165 254.624);
    --color-blue-dim: oklch(0.50 0.10 254);

    --primitive-gold: oklch(0.8238 0.1678 90.3);
    --primitive-brand-secondary: oklch(83.92% 0.165058 170.6089);

    --primitive-gray-100: oklch(0.967 0.003 264.542);
    --primitive-gray-150: oklch(55.55% 0 0);
    --primitive-gray-200: oklch(28.04% 0.0119 264.36);
    --primitive-gray-250: oklch(0.25 0.0099 268.28);
    --primitive-gray-300: oklch(20.27% 0.0118 254.1);
    --primitive-gray-400: oklch(16.34% 0.0091 264.28);
    --primitive-gray-500: oklch(12% 0.006 264);

    --primitive-red-100: oklch(58.02% 0.2043 24.84);
    --primitive-green-100: oklch(57.77% 0.1309 147.68);

    --color-chart-1: #e76e50;
    --color-chart-2: #2a9d90;
    --color-chart-3: #274754;
    --color-chart-4: #e8c468;
    --color-chart-5: #f4a462;

    --color-background: var(--primitive-gray-400);
    --color-background-secondary: var(--primitive-gray-300);
    --color-background-tertiary: var(--primitive-gray-200);
    --color-background-tertiary-dark: var(--primitive-gray-250);
    --color-background-deep: var(--primitive-gray-500);
    --color-background-error: var(--primitive-red-100);
    --color-background-success: var(--primitive-green-100);

    --color-border-primary: var(--primitive-gray-200);
    --color-border-secondary: var(--primitive-gray-300);
    --color-border-success: var(--primitive-green-100);

    --color-text-primary: var(--primitive-gray-100);
    --color-text-secondary: var(--primitive-gray-150);
    --color-text-error: var(--primitive-red-100);
    --color-text-success: var(--primitive-green-100);

    --color-button-primary: var(--primitive-brand-primary);
    --color-button-primary-dark: var(--primitive-brand-dark);
    --color-button-text-primary: var(--primitive-white);

    --color-fill-primary: var(--primitive-brand-primary);
    --color-fill-primary-light: var(--primitive-brand-light);
    --color-fill-secondary: var(--primitive-brand-secondary);
    --color-fill-muted: var(--primitive-gray-150);
    --color-fill-gold: var(--primitive-gold);
    --color-preview-frame: var(--primitive-gray-200);
}


/* ==========================================================================
   Material theme color overrides
   ========================================================================== */

:root > * {
    --md-primary-fg-color:             var(--color-background);
    --md-primary-fg-color--light:      var(--color-background);
    --md-primary-fg-color--dark:       var(--color-background);
    --md-primary-bg-color:             hsla(0, 0%, 100%, 1);
    --md-primary-bg-color--light:      hsla(0, 0%, 100%, 0.7);

    --md-accent-fg-color:              var(--color-blue-400);
    --md-accent-fg-color--transparent: var(--color-background-secondary);
    --md-accent-bg-color:              hsla(0, 0%, 100%, 1);
    --md-accent-bg-color--light:       hsla(0, 0%, 100%, 0.7);

    --md-hue: 225deg;

    --md-default-fg-color:           hsla(var(--md-hue), 15%, 90%, 0.82);
    --md-default-fg-color--light:    hsla(var(--md-hue), 15%, 90%, 0.56);
    --md-default-fg-color--lighter:  hsla(var(--md-hue), 15%, 90%, 0.32);
    --md-default-fg-color--lightest: hsla(var(--md-hue), 15%, 90%, 0.12);

    --md-default-bg-color:           var(--color-background);
    --md-default-bg-color--light:    var(--color-background);
    --md-default-bg-color--lighter:  var(--color-background-secondary);
    --md-default-bg-color--lightest: var(--color-background-secondary);

    --md-code-fg-color:              hsla(var(--md-hue), 18%, 86%, 0.87);
    --md-code-bg-color:              var(--color-background-deep);

    --md-code-hl-number-color:       hsla(6, 74%, 63%, 1);
    --md-code-hl-special-color:      hsla(340, 83%, 66%, 1);
    --md-code-hl-function-color:     hsla(291, 57%, 65%, 1);
    --md-code-hl-constant-color:     hsla(250, 62%, 70%, 1);
    --md-code-hl-keyword-color:      hsla(219, 66%, 64%, 1);
    --md-code-hl-string-color:       hsla(150, 58%, 44%, 1);
    --md-code-hl-name-color:         var(--md-code-fg-color);
    --md-code-hl-operator-color:     var(--md-default-fg-color--light);
    --md-code-hl-punctuation-color:  var(--md-default-fg-color--light);
    --md-code-hl-comment-color:      var(--md-default-fg-color--light);
    --md-code-hl-generic-color:      var(--md-default-fg-color--light);
    --md-code-hl-variable-color:     var(--md-default-fg-color--light);

    --md-typeset-color:              var(--color-text-primary);
    --md-typeset-a-color:            var(--color-blue-400);
    --md-typeset-kbd-color:          hsla(var(--md-hue), 15%, 90%, 0.12);
    --md-typeset-kbd-accent-color:   hsla(var(--md-hue), 15%, 90%, 0.2);
    --md-typeset-kbd-border-color:   hsla(var(--md-hue), 15%, 14%, 1);
    --md-typeset-table-color:        hsla(var(--md-hue), 15%, 95%, 0.12);
    --md-typeset-table-color--light: hsla(var(--md-hue), 15%, 95%, 0.035);

    --md-admonition-fg-color:        var(--md-default-fg-color);
    --md-admonition-bg-color:        var(--color-background-secondary);

    --md-footer-bg-color:            var(--color-background-deep);
    --md-footer-bg-color--dark:      var(--color-background-deep);
}


/* ==========================================================================
   Header & tabs
   ========================================================================== */

.md-tabs {
    background: var(--color-background-secondary);
}

.md-tabs__link--active,
.md-tabs__link:hover {
    color: var(--color-blue-400);
}


/* ==========================================================================
   Navigation
   ========================================================================== */

/* Dim all nav links, highlight only active */
.md-nav__link {
    color: var(--md-default-fg-color--light);
}

.md-nav__link:hover {
    color: var(--md-default-fg-color);
}

.md-nav__link--active {
    color: var(--color-blue-400);
}

/* Right TOC: dim all links, highlight only current */
.md-sidebar--secondary .md-nav__link {
    color: var(--md-default-fg-color--light);
}

.md-sidebar--secondary .md-nav__link--active {
    color: var(--color-blue-400);
}


/* ==========================================================================
   Code blocks
   ========================================================================== */

.md-typeset pre {
    position: relative;
}

/* Accent bar on the left edge */
.md-typeset pre::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--color-blue-dim);
    border-radius: 0.1rem 0 0 0.1rem;
    z-index: 1;
}


/* ==========================================================================
   Tabs (code example switcher)
   ========================================================================== */

.tabbed-set .tabbed-content {
    padding-top: 0.5rem;
}

.tabbed-set > input:checked + label + .tabbed-content {
    padding-top: 0.5rem;
}


/* ==========================================================================
   Admonitions — let Material handle styling, just tweak backgrounds
   ========================================================================== */

.md-typeset .admonition,
.md-typeset details {
    border-radius: 0.25rem;
    border-width: 0 0 0 3px;
}


/* ==========================================================================
   Tables
   ========================================================================== */

.md-typeset table:not([class]) th {
    background-color: var(--color-background-secondary);
}


/* ==========================================================================
   Login button
   ========================================================================== */

.login-button {
    background: linear-gradient(150.81deg, #00ECBB -29.74%, #0077FF 62.28%);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 0.2rem;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: opacity 0.1s ease;
    box-shadow: none;

    @media screen and (min-width: 1024px) {
        margin-left: 2rem;
    }
}

.login-button:hover {
    opacity: 0.85;
}


/* ==========================================================================
   Image switch (light/dark)
   ========================================================================== */

.image-switch { display: block; }
.image-switch img { max-width: 100%; height: auto; }
.image-switch img.dark { display: none; }
[data-md-color-scheme="slate"] .image-switch img.light { display: none; }
[data-md-color-scheme="slate"] .image-switch img.dark { display: block; }


/* ==========================================================================
   Progress bar
   ========================================================================== */

.md-progress {
    background: var(--color-blue-400);
}


/* ==========================================================================
   Phone preview (embedded rapids campaign iframe)
   Mirrors PhonePreview in app-frontend:
   src/components/order/OrderPreview/OrderPreview.tsx
   ========================================================================== */

.phone-preview {
    position: relative;
    /* Form a local stacking context so the child z-indexes below
       can't escape and paint over Material's sticky header. */
    isolation: isolate;
    width: 375px;
    height: 667px;
    margin: 1.5rem auto 0;
    border-radius: 40px;
    border: 14px solid var(--color-preview-frame);
    background: var(--color-preview-frame);
    box-shadow:
        0 20px 25px -5px rgba(0, 0, 0, 0.35),
        0 8px 10px -6px rgba(0, 0, 0, 0.25);
}

.phone-preview__notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 148px;
    height: 7px;
    background: var(--color-preview-frame);
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    z-index: 30;
}

.phone-preview__btn {
    position: absolute;
    width: 3px;
    background: var(--color-preview-frame);
    z-index: 30;
}

.phone-preview__btn--left-top {
    left: -17px;
    top: 124px;
    height: 46px;
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}

.phone-preview__btn--left-bot {
    left: -17px;
    top: 178px;
    height: 46px;
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}

.phone-preview__btn--right {
    right: -17px;
    top: 142px;
    height: 64px;
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

.phone-preview__iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 26px;
    background: var(--color-background);
    z-index: 20;
}

.preview-controls {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.75rem 0 1.5rem;
}

.preview-controls button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    background: transparent;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 0.25rem;
    cursor: pointer;
    transition: color 0.1s ease, border-color 0.1s ease;
}

.preview-controls button:hover {
    color: var(--color-text-primary);
    border-color: var(--md-default-fg-color--lighter);
}

.preview-controls button svg {
    width: 14px;
    height: 14px;
}

.preview-controls button.is-refreshing svg {
    animation: preview-refresh-spin 0.6s linear;
}

@keyframes preview-refresh-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}


/* ==========================================================================
   AI Agent copy button
   ========================================================================== */

#llms-copy-button {
    position: sticky !important;
    top: 5rem !important;
    float: right !important;
    z-index: 10 !important;
    margin-top: -0.5rem !important;
    margin-bottom: -2rem !important;
}

#llms-copy-button button {
    background: transparent !important;
    border: 1px solid var(--md-default-fg-color--lightest) !important;
    border-radius: 0.2rem !important;
    padding: 0.3rem 0.55rem !important;
    line-height: 1 !important;
    box-shadow: none !important;
    transition: color 0.1s ease !important;
    cursor: pointer;
    color: var(--md-default-fg-color--lighter) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem !important;
}

#llms-copy-button button:hover {
    color: var(--color-text-primary) !important;
    border-color: var(--md-default-fg-color--lighter) !important;
}

#llms-copy-button button.copied {
    color: var(--color-text-success) !important;
    border-color: var(--color-border-success) !important;
}

#llms-copy-button button.error {
    color: var(--color-text-error) !important;
}

#llms-copy-button button::after {
    content: "Copy for AI Agent";
    position: absolute;
    left: calc(100% + 0.5rem);
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-background-tertiary);
    color: var(--color-text-primary);
    padding: 0.25rem 0.45rem;
    border-radius: 0.2rem;
    font-size: 0.62rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease;
    border: 1px solid var(--color-border-primary);
}

#llms-copy-button button:hover::after { opacity: 1; }
#llms-copy-button button.copied::after { opacity: 0 !important; }