/**
 * fastFOREX console stylesheet, 2026 refresh.
 *
 * Replaces fastforex.css (its rules are merged in below) and aligns the console
 * (Bootstrap 5.1.3) with the new public site style guide.
 * Selected by Branding::$console_css when CONSOLE_CSS=fastforex-2026.css. Expects Inter,
 * loaded via CONSOLE_FONT_FAMILY=Inter:400,500,600,700.
 */

/*
 * Tokens (mirrors src/styles/global.css on the public site)
 */

:root {
    --ff-lime: #d8f36a;
    --ff-lime-hover: #cce65e;
    --ff-lime-border: #6f7e48;
    --ff-brand: #53622d;
    --ff-muted: #626a59;
    --ff-tint: #eaf0da;
    --ff-hero: #f4f6ed;
    --ff-card: #f5f7ee;
    --ff-focus: #697e31;
    --ff-chip: #e7edd9;
    --ff-chip-border: #b8c39e;
    --ff-chip-text: #46552a;
    --ff-pill: #edf1e3;
    --ff-pill-hover: #e5ebd6;
    --ff-pill-hover-border: #98aa77;

    --ff-background: #fafbf6;
    --ff-foreground: #f0f3e7;
    --ff-border: #dce1d1;
    --ff-ink: #24291f;

    --ff-code-border: #49513e;
    --ff-code-plain: #e5e5e5;

    --ff-radius-button: 6px;
    --ff-radius-form: 5px;
    --ff-radius-card: 12px;

    --ff-focus-ring: 0 0 0 3px rgba(105, 126, 49, .3);

    /* brand-focus darkened just enough for 4.5:1 on the sidebar's brand-hero background */
    --ff-nav-active: #647830;

    /* Read by the upgrade pricing widget (falls back to the old indigo) */
    --brand: var(--ff-brand);

    /* Read by FF.chartColour() in console.js: replaces the default chart blue (#007bff) */
    --ff-chart-primary: #53622d;

    /* Bootstrap 5.1 variables */
    --bs-font-sans-serif: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-font-monospace: ui-monospace, SFMono-Regular, Menlo, monospace;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-color: var(--ff-ink);
    --bs-body-bg: var(--ff-background);
    --bs-primary: var(--ff-brand);
    --bs-primary-rgb: 83, 98, 45;
    --bs-success: var(--ff-focus);
    --bs-success-rgb: 105, 126, 49;
    --bs-dark: var(--ff-ink);
    --bs-dark-rgb: 36, 41, 31;
    --bs-light-rgb: 244, 246, 237;
    --bs-secondary: var(--ff-muted);
    --bs-secondary-rgb: 98, 106, 89;
}

/*
 * Base
 */

body {
    font-family: var(--bs-font-sans-serif);
    color: var(--ff-ink);
    background-color: var(--ff-background);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--ff-ink);
    letter-spacing: -0.01em;
}

/* "body" outranks auth.css, which loads after this file on the sign-in layout */
body .kohotitle {
    font-family: var(--bs-font-sans-serif);
    font-style: normal;
    font-weight: 700;
}

a {
    color: var(--ff-chip-text);
    text-underline-offset: 2px;
}

a:hover {
    color: var(--ff-ink);
}

.text-muted {
    color: var(--ff-muted) !important;
}

code, kbd, pre, samp, .font-monospace {
    font-family: var(--bs-font-monospace) !important;
}

code {
    color: var(--ff-chip-text);
}

::selection {
    background-color: var(--ff-lime);
    color: var(--ff-ink);
}

:focus-visible {
    outline: 3px solid var(--ff-focus);
    outline-offset: 2px;
}

/*
 * Header and sidebar
 */

.navbar.bg-dark,
.fastforex_header_row {
    background-color: var(--ff-ink) !important;
}

.navbar.shadow {
    box-shadow: none !important;
}

.navbar-brand {
    background-color: transparent;
    box-shadow: none;
}

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, .8);
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: var(--ff-lime);
}

.sidebar.bg-light {
    background-color: var(--ff-hero) !important;
    box-shadow: inset -1px 0 0 var(--ff-border);
}

.sidebar .nav-link {
    color: var(--ff-ink);
}

.sidebar .nav-link:hover {
    color: var(--ff-nav-active);
}

.sidebar .nav-link.active {
    color: var(--ff-nav-active);
    font-weight: 700;
}

.sidebar-heading {
    color: var(--ff-muted) !important;
    letter-spacing: .04em;
}

/*
 * Buttons
 */

.btn {
    border-radius: var(--ff-radius-button);
    transition: all .2s ease-in-out;
}

.btn:focus,
.btn-check:focus + .btn {
    box-shadow: var(--ff-focus-ring) !important;
}

/* Primary: lime with ink text. btn-success is used for the main CTA too. */
.btn-primary,
.btn-success {
    color: var(--ff-ink);
    background-color: var(--ff-lime);
    border-color: var(--ff-lime);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active,
.btn-check:checked + .btn-primary, .btn-check:checked + .btn-success {
    color: var(--ff-ink);
    background-color: var(--ff-lime-hover);
    border-color: var(--ff-lime-hover);
}

.btn-primary:disabled, .btn-primary.disabled,
.btn-success:disabled, .btn-success.disabled {
    color: var(--ff-muted);
    background-color: var(--ff-lime);
    border-color: var(--ff-lime);
}

/* Secondary: outlined */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-dark {
    color: var(--ff-ink);
    background-color: transparent;
    border-color: var(--ff-border);
}

.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary.active,
.btn-outline-secondary:hover, .btn-outline-secondary:active, .btn-outline-secondary.active,
.btn-outline-success:hover, .btn-outline-success:active, .btn-outline-success.active,
.btn-outline-dark:hover, .btn-outline-dark:active, .btn-outline-dark.active,
.btn-check:checked + .btn-outline-primary,
.btn-check:checked + .btn-outline-secondary {
    color: var(--ff-ink);
    background-color: var(--ff-tint);
    border-color: var(--ff-pill-hover-border);
}

.btn-secondary {
    color: var(--ff-ink);
    background-color: var(--ff-pill);
    border-color: var(--ff-border);
}

.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
    color: var(--ff-ink);
    background-color: var(--ff-pill-hover);
    border-color: var(--ff-pill-hover-border);
}

.btn-dark {
    color: #fff;
    background-color: var(--ff-ink);
    border-color: var(--ff-ink);
}

.btn-dark:hover, .btn-dark:focus, .btn-dark:active {
    color: var(--ff-lime);
    background-color: #000;
    border-color: #000;
}

.btn-link {
    color: var(--ff-chip-text);
}

/* Firebase UI sign-in buttons */
body .firebaseui-idp-button,
body .mdl-button {
    border-radius: var(--ff-radius-button) !important;
    box-shadow: none !important;
    border: 1px solid var(--ff-border) !important;
}

.btn.looks-like-firebase-button {
    font-family: var(--bs-font-sans-serif);
    box-shadow: none;
}

a.firebaseui-link {
    color: var(--ff-chip-text);
    text-decoration: underline;
}

/*
 * Forms
 */

.form-control,
.form-select {
    color: var(--ff-ink);
    border-color: var(--ff-border);
    border-radius: var(--ff-radius-form);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ff-focus);
    box-shadow: var(--ff-focus-ring);
}

.form-control::placeholder {
    color: var(--ff-muted);
    opacity: .8;
}

.form-label {
    font-weight: 500;
}

.form-check-input:checked {
    background-color: var(--ff-ink);
    border-color: var(--ff-ink);
}

.form-check-input:focus {
    border-color: var(--ff-focus);
    box-shadow: var(--ff-focus-ring);
}

.form-switch .form-check-input:focus:not(:checked) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23697e31'/%3e%3c/svg%3e");
}

.input-group-text {
    background-color: var(--ff-foreground);
    border-color: var(--ff-border);
}

/*
 * Cards, lists and tables
 */

.card {
    border-color: var(--ff-border);
    border-radius: var(--ff-radius-card);
}

.card > .card-header:first-child {
    border-radius: calc(var(--ff-radius-card) - 1px) calc(var(--ff-radius-card) - 1px) 0 0;
}

.card > .card-footer:last-child {
    border-radius: 0 0 calc(var(--ff-radius-card) - 1px) calc(var(--ff-radius-card) - 1px);
}

.card-header,
.card-footer {
    background-color: var(--ff-card);
    border-color: var(--ff-border);
}

.list-group-item {
    border-color: var(--ff-border);
}

.list-group-item.active {
    color: #fff;
    background-color: var(--ff-brand);
    border-color: var(--ff-brand);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: var(--ff-hero);
}

.table {
    --bs-table-striped-bg: var(--ff-hero);
    --bs-table-hover-bg: var(--ff-tint);
    border-color: var(--ff-border);
}

.table > thead th,
.table > thead td {
    font-weight: 600;
}

.table-light {
    --bs-table-bg: var(--ff-foreground);
    border-color: var(--ff-border);
}

.border, .border-top, .border-end, .border-bottom, .border-start {
    border-color: var(--ff-border) !important;
}

hr {
    color: var(--ff-border);
    opacity: 1;
}

/*
 * Nav pills, pagination, progress
 */

.nav-pills .nav-link {
    color: var(--ff-ink);
    background-color: var(--ff-pill);
    border: 1px solid transparent;
    margin-right: .25rem;
}

.nav-pills .nav-link:hover {
    background-color: var(--ff-pill-hover);
    border-color: var(--ff-pill-hover-border);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #fff;
    background-color: var(--ff-brand);
}

.nav-tabs .nav-link.active {
    color: var(--ff-ink);
    background-color: var(--ff-background);
}

.page-link {
    color: var(--ff-ink);
    border-color: var(--ff-border);
}

.page-link:hover {
    color: var(--ff-ink);
    background-color: var(--ff-tint);
    border-color: var(--ff-border);
}

.page-link:focus {
    box-shadow: var(--ff-focus-ring);
}

.page-item.active .page-link {
    color: #fff;
    background-color: var(--ff-brand);
    border-color: var(--ff-brand);
}

.progress {
    background-color: var(--ff-foreground);
}

.progress-bar {
    background-color: var(--ff-brand);
}

/*
 * Badges and background utilities
 */

.badge {
    font-weight: 600;
}

/* Unstyled badges (e.g. "NEW", some with the old indigo inline) become chips */
.badge:not([class*="bg-"]) {
    color: var(--ff-chip-text);
    background-color: var(--ff-chip) !important;
    border: 1px solid var(--ff-chip-border);
    font-family: var(--bs-font-monospace);
}

/* Buttons with the old indigo set inline */
.btn[style*="4c50b1"] {
    color: var(--ff-ink);
    background-color: var(--ff-lime) !important;
    border-color: var(--ff-lime);
}

/* bg-* colours come from the --bs-*-rgb variables above, so bg-opacity-* keeps working */

.badge.bg-warning {
    color: #92400e !important;
    background-color: #fef3c7 !important;
    border: 1px solid #fcd34d;
}

/*
 * Alerts
 */

.alert-info {
    color: var(--ff-chip-text);
    background-color: var(--ff-hero);
    border-color: var(--ff-chip-border);
}

.alert-info .alert-link {
    color: var(--ff-ink);
}

/*
 * Code
 */

code.code_key {
    background-color: var(--ff-ink);
    color: var(--ff-code-plain);
}

.pre-response-container {
    background: var(--ff-ink);
    border: 1px solid var(--ff-code-border);
    padding: 12px;
}

.pre-response-container .hljs {
    background: transparent;
}

/*
 * Sign in and footer (merged from fastforex.css)
 */

@media only screen and (min-width: 768px) {
    .signin-intro-fastforex .sign-in-guidance {
        padding: 1.5rem !important;
        padding-right: 0 !important;
    }

    .col-stack-2 {
        padding-top: 1rem !important;
        padding-bottom: 0 !important;
    }
}

@media only screen and (max-width: 768px) {
    .col-stack-2 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* Feature list: lead size (18px) so the longest item stays on one line. md-lhs.phtml forces .fs-4 inline */
.signin-intro-fastforex h4.fs-4 {
    font-size: 1.125rem !important;
    line-height: 1.5;
}

/* Swap the purple Webflow shield for the site's star (components/icons/Star.astro) */
.signin-intro-fastforex img.feature-icon {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-0.5 0 21 20.5' fill='%23617a30'%3E%3Cpath d='M9.07088 1.50102C9.41462 0.684556 10.5854 0.684558 10.9291 1.50102L12.9579 6.31991C13.1029 6.66411 13.4306 6.89928 13.8067 6.92907L19.0727 7.34615C19.9649 7.41682 20.3267 8.51681 19.6469 9.09207L15.6348 12.4873C15.3482 12.7299 15.223 13.1105 15.3106 13.473L16.5363 18.5497C16.744 19.4098 15.7969 20.0897 15.033 19.6288L10.5245 16.9082C10.2025 16.7139 9.7975 16.7139 9.47548 16.9082L4.96699 19.6288C4.20311 20.0897 3.25596 19.4098 3.46363 18.5497L4.68942 13.473C4.77698 13.1105 4.65182 12.7299 4.36526 12.4873L0.353062 9.09207C-0.326718 8.51681 0.0350679 7.41682 0.927291 7.34615L6.19336 6.92907C6.5695 6.89928 6.89716 6.66411 7.04207 6.31991L9.07088 1.50102Z'/%3E%3C/svg%3E");
    width: 16px;
    height: 16px;
    margin-right: 10px;
    vertical-align: -1px;
}

@media (width < 991px) {
    .card-group.signin-card-group {
        display: block;
    }
}

.signin-card-group .card {
    flex: 3 0 0%;
    background: transparent;
}

.signin-card-group .card.card-small {
    flex: 2 0 0%;
}

.signin-card-group li p {
    padding-left: 29px;
    margin-left: 19px;
    font-size: 14px;
    border-left: 1px solid var(--ff-border);
    margin-top: 4px;
    margin-bottom: 0px;
    min-height: 40px;
}

.signin-card-group li:last-of-type p {
    border: none;
}

.signin-card-group li div.circle {
    display: inline-block;
    padding: 8px;
    border-radius: 50%;
    width: 40px;
    text-align: center;
    color: var(--ff-ink);
    background-color: var(--ff-lime);
    margin-right: 6px;
}

.signin-card-group li .fs-6 {
    font-weight: 700;
}

@media (width > 991px) {
    .has-rhs-border {
        border-right: 1px solid var(--ff-border) !important;
    }

    .has-lhs-border {
        border-left: 1px solid var(--ff-border) !important;
    }
}

.footer-gap {
    border-top: 75px solid var(--ff-lime) !important;
    margin-top: 50px;
}

.footer {
    font-size: .875rem;
}

.footer li a {
    font-weight: normal;
    color: var(--ff-ink);
    text-decoration: none;
}

.footer li a:hover {
    text-decoration: underline;
}

.sub-footer a {
    color: var(--ff-ink);
    text-decoration: underline;
}

i.fs-xl5 {
    font-size: 5rem;
}

i.fs-xl4 {
    font-size: 4rem;
}

/*
 * Plan / upgrade pages (overrides dashboard.css)
 */

.plan-sub-cta-highlight {
    background-color: var(--ff-card);
    border-color: var(--ff-focus);
    border-radius: var(--ff-radius-card);
}

.plan-upgrade-container li i,
ul.plan-features i {
    color: var(--ff-focus);
}

.collapse-summary.collapsed:hover {
    background-color: var(--ff-hero);
}

/*
 * Upgrade pricing widget (upgrade_extract_*). Mirrors the overrides on the public /pricing page.
 * "main" outranks the widget's own inline <style>.
 */

main .ffx-pricing {
    --ffx-brand: #53622d;
    --ffx-brand-dark: #3e4c23;
    --ffx-ink: var(--ff-ink);
    --ffx-muted: var(--ff-muted);
    --ffx-line: var(--ff-border);
    --ffx-card: var(--ff-background);
    --ffx-check: #617a30;
    --ffx-current: #4e6726;
    --ffx-current-dark: #35491a;
    --ffx-pop: var(--ff-lime);
    --ffx-fill: #718d36;
    font-family: var(--bs-font-sans-serif);
}

main .ffx-pricing .ffx-card.is-popular {
    border-color: #97ad5e;
    background: #f0f5e3;
    box-shadow: 0 14px 40px rgba(36, 41, 31, .12);
}

main .ffx-pricing .ffx-card.is-popular .ffx-popular-badge,
main .ffx-pricing .ffx-popular,
main .ffx-pricing .ffx-card.is-popular .ffx-pop-bar {
    color: var(--ff-ink);
}

/* Only the highlighted card's CTA is filled (lime); the rest are outlined, as on the live site */
main .ffx-pricing .ffx-toggle-opt.is-active,
main .ffx-pricing .ffx-cta-primary {
    background: var(--ff-lime);
    border-color: var(--ff-lime);
    color: var(--ff-ink);
}

main .ffx-pricing .ffx-cta-primary:hover {
    background: var(--ff-lime-hover);
    border-color: var(--ff-lime-hover);
    color: var(--ff-ink);
}

main .ffx-pricing .ffx-cta-ghost {
    background: #fff;
    border-color: var(--ff-border);
    color: var(--ff-ink);
}

main .ffx-pricing .ffx-cta-ghost:hover {
    background: var(--ff-tint);
    border-color: var(--ff-pill-hover-border);
    color: var(--ff-ink);
}

main .ffx-pricing .ffx-cta-owned {
    background: var(--ff-chip);
    color: var(--ff-chip-text);
}

main .ffx-pricing .ffx-table .ffx-group td,
main .ffx-pricing .ffx-table code {
    background: #edf2e1;
}