/* ==========================================================================
   ARYAN GOLD — dark/gold theme overrides
   Loaded last so it wins over vendor + custom.css. Palette matches Liverates.html.
   ========================================================================== */
:root {
    --ag-gold-1: #fff3c4;
    --ag-gold-2: #e6b64a;
    --ag-gold-3: #b8860b;
    --ag-gold-line: #c9a24b;
    --ag-red: #e0342c;
    --ag-green: #1f9d3c;
    --ag-panel: #0c0c0c;
    --ag-black: #000000;
    --ag-bg: #1a1a1a;
}

html, body {
    background-color: var(--ag-bg) !important;
}

.section,
.header-body,
#footer,
.headImg,
.naviRow,
.footer-copyright,
#footer .section {
    background-color: var(--ag-panel) !important;
}

#header {
    border-bottom: 1px solid var(--ag-gold-line);
}

.naviRow {
    border-top: 1px solid rgba(201, 162, 75, 0.35);
}

/* ---------- Headings / accents ---------- */
#iconimage span span,
.headingTop,
.LiveRates_Heading,
.heading,
.heading span,
.font-weight-bold.text-4,
.font-weight-bold {
    color: var(--ag-gold-2) !important;
    -webkit-text-fill-color: initial !important;
    background: none !important;
}

.headingTop {
    display: block;
    text-align: center;
    letter-spacing: 1px;
    padding: 18px 0;
    margin: 0 0 10px;
    background: linear-gradient(180deg, #f6dd8c, #d9a83c 50%, #a97a1f) !important;
    color: #1a1200 !important;
    font-weight: 800;
}

/* ---------- Logo lockup ---------- */
.ag-logo-lockup {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.ag-logo-img {
    max-height: 110px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

@media screen and (min-width: 992px) {
    #header .headImg .container .row {
        min-height: 112px !important;
    }

    #header #iconimage img.ag-logo-img {
        max-height: 100px !important;
        max-width: 75% !important;
    }
}

@media screen and (max-width: 767px) {
    .ag-logo-img {
        max-height: 84px;
    }
}

.ag-logo-mark {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-weight: 900;
    font-size: 40px;
    letter-spacing: -2px;
    line-height: 1;
    background: linear-gradient(180deg, #ffffff 0%, #cfd6de 45%, #9aa3ad 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ag-logo-lockup .brand-title {
    font-size: 22px !important;
    font-weight: 700;
    letter-spacing: 4px;
    background: linear-gradient(180deg, #fdf3d0, #e6b64a 55%, #a97a1f) !important;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent !important;
    color: var(--ag-gold-2) !important;
}

/* ---------- Nav ---------- */
#header .header-nav-main nav > ul > li > a {
    color: #f2f2f2 !important;
}

#header .header-nav-main nav > ul > li > a:hover,
#header .header-nav-main nav > ul > li.active > a {
    color: var(--ag-gold-2) !important;
}

#header .header-nav-main nav > ul > li.dropdown .dropdown-menu {
    background: var(--ag-panel) !important;
    border: 1px solid var(--ag-gold-line) !important;
}

#header .header-nav-main nav > ul > li.dropdown .dropdown-menu li,
#header .header-nav-main nav > ul > li.dropdown .dropdown-menu li a:not(.btn),
#header .header-nav-main nav > ul > li.dropdown .dropdown-menu .dropdown-item {
    background: transparent !important;
    color: #f2f2f2 !important;
}

#header .header-nav-main nav > ul > li.dropdown .dropdown-menu li:hover > a:not(.btn),
#header .header-nav-main nav > ul > li.dropdown .dropdown-menu .dropdown-item:hover {
    color: var(--ag-gold-2) !important;
}

/* Mobile / collapsed nav: some pages (the www/ trading pages) also load
   jQuery Mobile's CSS, which imposes its own light "ui-page" panel theme on
   the collapsed menu and can win the background fight even though the link
   text is already forced light above — leaving white-on-white. Pin both
   explicitly, keyed off the exact collapsed-nav markup, so this can't recur. */
#header .header-nav-main nav.collapse,
#header .header-nav-main nav.collapse.show,
#header .header-nav-main nav > ul,
#header .header-nav-main nav ul#mainNav,
#header .header-nav-main nav .nav.flex-column {
    background-color: var(--ag-panel) !important;
    background-image: none !important;
}

#header .header-nav-main nav ul#mainNav > li,
#header .header-nav-main nav ul#mainNav > li > a,
#header .header-nav-main nav ul#mainNav > li > a.dropdown-toggle {
    background-color: transparent !important;
    color: #f2f2f2 !important;
}

#header .header-nav-main nav ul#mainNav > li > a:hover,
#header .header-nav-main nav ul#mainNav > li.active > a {
    color: var(--ag-gold-2) !important;
}

/* The mobile menu's container (#navhead) is pinned to
   `padding-left:0 !important` inline in the markup, so no stylesheet rule can
   inset it directly — no selector, however specific, beats an inline
   !important declaration. Padding the list itself (a nested element) instead
   achieves the same visual result: the expanded menu no longer sits flush
   against the screen edge. */
@media screen and (max-width: 991px) {
    #header .header-nav-main nav ul#mainNav {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

@media screen and (max-width: 991px) {
    #header .header-nav-main nav.collapse.show {
        border-top: 1px solid var(--ag-gold-line);
    }
}

/* ---------- Buttons / links ---------- */
.btn-5 {
    background: linear-gradient(180deg, #f6dd8c, #d9a83c 50%, #a97a1f) !important;
    color: #1a1200 !important;
    border: none !important;
}

a {
    color: var(--ag-gold-2);
}

a:hover {
    color: var(--ag-gold-1);
}

/* ---------- Footer ---------- */
#footer,
#footer p,
#footer a,
#footer .icon-box-info-title h3 {
    color: #e8e8e8;
}

#footer .icon-box-icon i {
    color: var(--ag-gold-2) !important;
}

#footer .icon-box-info-title h3 {
    color: var(--ag-gold-2) !important;
}

#footer a:hover {
    color: var(--ag-gold-2);
}

.footer-copyright p {
    color: var(--ag-gold-2) !important;
}

/* ---------- Status colors (rate tables, if present) ---------- */
/* NOTE: deliberately NOT matching plain ".green"/".red" here — those are
   generic names other widgets (e.g. Liverates.html's rate badges) use for
   backgrounds with white text; a global !important text-color rule on them
   made that text invisible. Use .ag-up / .ag-down or Bootstrap's own
   .text-success / .text-danger instead. */
.ag-up, .text-success {
    color: var(--ag-green) !important;
}

.ag-down, .text-danger {
    color: var(--ag-red) !important;
}