/* ══════════════════════════════════════════════════════════════════════
   DOIT INDUSTRIES — PREMIUM GOLD/CREAM THEME
   Applies to all www/ pages: Login, Trades, Orders, BuySell, BuySell1, ModifyDeleteOrders
   Matches doittrade-premium LiveRates.html design exactly
   ══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* ── Design Tokens (mirrors premium.css) ───────────────────────────── */
:root {
    --au-gold:        #009CD9;
    --au-gold-deep:   #009CD9;
    --au-gold-light:  #009CD9;
    --au-gold-shine:  #E3F4FB;
    --au-gold-ultra:  #E3F4FB;
    --au-cream:       #E3F4FB;
    --au-cream-2:     #E3F4FB;
    --au-dark:        #000066;
    --au-dark-2:      #000066;
    --au-warm-gray:   #36516F;
    --au-light-gray:  #B8DDED;
    --au-white:       #FFFFFF;
    --au-grad-gold:   linear-gradient(135deg, #009CD9 0%, #2DB9EA 50%, #009CD9 100%);
    --au-grad-dark:   linear-gradient(135deg, #000066 0%, #00004D 100%);
    --au-shadow-card: 0 4px 24px rgba(0,0,102,0.10);
    --au-shadow-gold: 0 8px 40px rgba(0,156,217,0.25);
    --au-radius:      12px;
    --au-radius-lg:   20px;
    --au-tr:          all 0.3s cubic-bezier(0.4,0,0.2,1);
    --au-font-head:   'Playfair Display', Georgia, serif;
    --au-font-body:   'Poppins', 'Inter', 'Montserrat', sans-serif;
}

/* ════════════════════════════════════════════════════════════════
   KEYFRAMES
   ════════════════════════════════════════════════════════════════ */
@keyframes float {
    0%,100% { transform: translateY(0px); }
    50%      { transform: translateY(-4px); }
}
@keyframes goldShimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0);    }
}
@keyframes scaleUp {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1);   }
}
@keyframes priceFlash {
    0%   { opacity:1; }
    40%  { opacity:0.3; }
    100% { opacity:1; }
}

/* ════════════════════════════════════════════════════════════════
   BASE
   ════════════════════════════════════════════════════════════════ */
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }

body {
    background-color: #e3f4fb !important;
    color: var(--au-dark) !important;
    font-family: var(--au-font-body) !important;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Remove old star-field/loading pseudo-elements */
body::before, body::after { display: none !important; }

.body { background-color: #e3f4fb !important; }

/* ════════════════════════════════════════════════════════════════
   HEADER  (identical structure on all www/ pages)
   ════════════════════════════════════════════════════════════════ */
#header, header {
    background: var(--au-white) !important;
    border-bottom: none !important;
    box-shadow: 0 2px 20px rgba(26,24,20,0.07) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: var(--au-tr) !important;
    z-index: 9999 !important;
}

#header .header-body {
    background: transparent !important;
    border-bottom: none !important;
}

/* Top bar (clocks row) */
#header .header-top {
    background: var(--au-dark) !important;
    border-bottom: 1px solid rgba(212,175,55,0.15) !important;
    padding: 5px 0 !important;
}

#header .header-top li,
#header .header-top span {
    color: rgba(255,255,255,0.75) !important;
    font-size: 12px !important;
}

/* Logo bar */
#header .header-body .header-row.headImg,
#header .header-row.headImg {
    background: var(--au-white) !important;
    border-bottom: 2px solid rgba(212,175,55,0.18) !important;
}

/* Logo float */
.headImg #iconimage .LogoImgWidth1,
.headImg #iconimage img {
    animation: float 4s ease-in-out infinite !important;
    filter: drop-shadow(0 3px 12px rgba(212,175,55,0.12)) !important;
    transition: filter 0.3s ease !important;
}
.headImg #iconimage img:hover {
    filter: drop-shadow(0 5px 20px rgba(212,175,55,0.28)) !important;
}

/* ── Navigation row (dark bar) ─────────────────────────────────── */
.naviRow {
    background: var(--au-dark) !important;
    border-top: 2px solid var(--au-gold) !important;
    border-image: none !important;
    box-shadow: 0 2px 20px rgba(26,24,20,0.15) !important;
    position: relative !important;
}

.naviRow::after { display: none !important; }

/* Nav links */
.header-nav-main nav ul.nav > li > a {
    color: rgba(255,255,255,0.7) !important;
    font-family: var(--au-font-body) !important;
    font-weight: 500 !important;
    font-size: 11.5px !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    padding: 13px 14px !important;
    position: relative !important;
    transition: color 0.25s ease !important;
    text-shadow: none !important;
}

/* Animated gold underline */
.header-nav-main nav ul.nav > li > a::after {
    content: "" !important;
    position: absolute !important;
    bottom: 6px !important; left: 50% !important;
    width: 0 !important; height: 2px !important;
    background: var(--au-grad-gold) !important;
    border-radius: 2px !important;
    transform: translateX(-50%) !important;
    transition: width 0.3s cubic-bezier(.4,0,.2,1) !important;
}
.header-nav-main nav ul.nav > li > a:hover::after,
.header-nav-main nav ul.nav > li.active > a::after { width: 55% !important; }

.header-nav-main nav ul.nav > li > a:hover,
.header-nav-main nav ul.nav > li.active > a {
    color: var(--au-gold-light) !important;
    background: rgba(212,175,55,0.06) !important;
    text-shadow: none !important;
}

/* Mobile nav */
@media (max-width: 991px) {
    .header-nav-main nav {
        background: var(--au-dark-2) !important;
        border-top: 1px solid rgba(212,175,55,0.15) !important;
    }
    .header-nav-main nav ul.nav > li {
        border-bottom: 1px solid rgba(212,175,55,0.08) !important;
    }
    .header-nav-main nav ul.nav > li > a::after { display: none !important; }
    .header-nav-main nav ul.nav > li > a { padding: 13px 20px !important; }
    .header-nav-main nav ul.nav > li > a:hover {
        background: rgba(212,175,55,0.08) !important;
        border-left: 3px solid var(--au-gold) !important;
    }
}

/* Hamburger */
.header-btn-collapse-nav .hamburguer span,
.header-btn-collapse-nav .close span {
    background: rgba(255,255,255,0.8) !important;
}

/* Dropdown */
.dropdown-menu {
    background: var(--au-dark-2) !important;
    border: 1px solid rgba(212,175,55,0.2) !important;
    box-shadow: var(--au-shadow-card), 0 0 24px rgba(212,175,55,0.08) !important;
    border-radius: var(--au-radius) !important;
    backdrop-filter: blur(12px) !important;
    animation: scaleUp 0.18s ease !important;
    transform-origin: top center !important;
    overflow: hidden !important;
}
.dropdown-menu .dropdown-item {
    color: rgba(255,255,255,0.7) !important;
    font-family: var(--au-font-body) !important;
    font-size: 12.5px !important;
    padding: 10px 18px !important;
    border-left: 2px solid transparent !important;
    transition: var(--au-tr) !important;
}
.dropdown-menu .dropdown-item:hover {
    background: rgba(212,175,55,0.1) !important;
    color: var(--au-gold-light) !important;
    border-left-color: var(--au-gold) !important;
}

/* Header LOGIN/LOGOUT buttons */
#openaccountbtn a, #Lb4 a,
.btn-5, .btn.btn-5 {
    background: var(--au-grad-gold) !important;
    color: var(--au-dark) !important;
    font-family: var(--au-font-body) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    letter-spacing: 0.06em !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 8px 20px !important;
    box-shadow: 0 3px 12px rgba(212,175,55,0.3) !important;
    transition: var(--au-tr) !important;
    text-transform: uppercase !important;
}
#openaccountbtn a:hover, #Lb4 a:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(212,175,55,0.45) !important;
    color: var(--au-dark) !important;
}

/* ════════════════════════════════════════════════════════════════
   PAGE HERO BANNER (www/ inner pages)
   ════════════════════════════════════════════════════════════════ */
.page-hero-content {
    position: relative !important;
    z-index: 2 !important;
}
.page-hero-content .section-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(29,114,210,0.15) !important;
    border: 1px solid rgba(29,114,210,0.4) !important;
    color: #009CD9 !important;
    font-family: var(--au-font-body) !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 6px 18px !important;
    border-radius: 50px !important;
    margin-bottom: 14px !important;
}
.page-hero-content h1 {
    color: var(--au-white) !important;
    font-family: var(--au-font-head) !important;
    font-size: 2.1rem !important;
    font-weight: 700 !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    line-height: 1.25 !important;
    text-shadow: none !important;
    background: none !important;
    border: none !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-align: center !important;
}
.page-hero-content > p {
    color: rgba(255,255,255,0.58) !important;
    font-family: var(--au-font-body) !important;
    font-size: 0.92rem !important;
    max-width: 500px !important;
    margin: 0 auto 18px !important;
    line-height: 1.7 !important;
    text-shadow: none !important;
    background: none !important;
    font-weight: 400 !important;
}
.breadcrumb-gold {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-family: var(--au-font-body) !important;
    font-size: 0.8rem !important;
    color: rgba(255,255,255,0.4) !important;
}
.breadcrumb-gold a {
    color: var(--au-gold) !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}
.breadcrumb-gold a:hover { color: var(--au-gold-light) !important; }
.breadcrumb-gold .sep {
    color: rgba(255,255,255,0.22) !important;
    font-size: 0.9rem !important;
}
@media (max-width: 767px) {
    .page-hero-content h1 { font-size: 1.55rem !important; }
    .page-hero-content > p { font-size: 0.84rem !important; }
}

/* ════════════════════════════════════════════════════════════════
   BODY / MAIN CONTENT
   ════════════════════════════════════════════════════════════════ */
div.main, .main { background: var(--au-cream) !important; }
section.section  { background: transparent !important; }

/* Page heading (used on every page) */
.headingTop, p.headingTop {
    color: var(--au-dark) !important;
    font-family: var(--au-font-body) !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    text-align: center !important;
    padding: 16px 0 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    border-bottom: 2px solid rgba(212,175,55,0.2) !important;
    margin-bottom: 20px !important;
    position: relative !important;
}
.headingTop::after, p.headingTop::after {
    content: "" !important;
    display: block !important;
    width: 48px !important; height: 3px !important;
    background: var(--au-grad-gold) !important;
    border-radius: 2px !important;
    margin: 6px auto 0 !important;
}

/* ════════════════════════════════════════════════════════════════
   JQUERY MOBILE OVERRIDES (transparent / neutral)
   ════════════════════════════════════════════════════════════════ */
.ui-overlay-a,
.ui-page-theme-a,
.ui-page-theme-a .ui-panel-wrapper {
    background-color: transparent !important;
    border: none !important;
}
.ui-page.ui-page-theme-a.ui-page-active { min-height: auto !important; }
.ui-body-a,
.ui-page-theme-a .ui-body-inherit,
html .ui-bar-a .ui-body-inherit,
html .ui-body-a .ui-body-inherit {
    background-color: transparent !important;
    color: var(--au-dark) !important;
    text-shadow: none !important;
}
.ui-content { background: transparent !important; }
.ui-mobile .ui-page-active { overflow: visible !important; }

/* jQuery Mobile radio/checkbox labels */
.ui-radio label, .ui-checkbox label,
label[for^="radio-choice"] {
    background: var(--au-white) !important;
    border: 1.5px solid rgba(212,175,55,0.3) !important;
    color: var(--au-dark) !important;
    font-family: var(--au-font-body) !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    transition: var(--au-tr) !important;
    font-size: 0.9rem !important;
}
.ui-radio label:hover, .ui-checkbox label:hover {
    background: var(--au-gold-ultra) !important;
    border-color: var(--au-gold) !important;
}
.ui-radio input:checked + label, .ui-checkbox input:checked + label {
    background: var(--au-grad-gold) !important;
    color: var(--au-dark) !important;
    border-color: var(--au-gold) !important;
    font-weight: 700 !important;
}

/* ════════════════════════════════════════════════════════════════
   FORMS & INPUTS
   ════════════════════════════════════════════════════════════════ */
input[type=text],
input[type=number],
input[type=password],
input[type=email],
input[type=tel] {
    background: var(--au-white) !important;
    border: 1.5px solid rgba(212,175,55,0.3) !important;
    border-radius: 8px !important;
    color: var(--au-dark) !important;
    padding: 10px 14px !important;
    font-family: var(--au-font-body) !important;
    font-size: 0.95rem !important;
    transition: border-color 0.25s !important;
    box-shadow: 0 1px 4px rgba(26,24,20,0.05) !important;
    width: 100% !important;
}
input[type=text]:focus,
input[type=number]:focus,
input[type=password]:focus {
    border-color: var(--au-gold) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(212,175,55,0.12) !important;
}

select {
    background: var(--au-white) !important;
    border: 1.5px solid rgba(212,175,55,0.3) !important;
    border-radius: 8px !important;
    color: var(--au-dark) !important;
    padding: 8px 12px !important;
    font-family: var(--au-font-body) !important;
    font-size: 0.9rem !important;
}

label {
    color: var(--au-dark) !important;
    font-family: var(--au-font-body) !important;
    font-weight: 500 !important;
    font-size: 0.88rem !important;
}

.ui-input-text .ui-shadow-inset,
.ui-shadow-inset {
    box-shadow: none !important;
}

/* ── LOGIN PAGE specific ────────────────────────────────────────── */
#tblGenerateOTP, #tblLoginViaOTP, #tblLogoff {
    background: var(--au-white) !important;
    border-radius: var(--au-radius-lg) !important;
    box-shadow: var(--au-shadow-card) !important;
    border: 1px solid rgba(212,175,55,0.15) !important;
    padding: 16px !important;
    overflow: hidden !important;
}

#tblGenerateOTP h3 {
    background: var(--au-dark) !important;
    color: var(--au-gold) !important;
    font-family: var(--au-font-body) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    letter-spacing: 1px !important;
    border-radius: 8px !important;
    text-align: center !important;
    padding: 12px !important;
    margin-bottom: 16px !important;
}

/* DELETE ACCOUNT link */
span[onclick*="Deleteaccount"] {
    color: var(--au-gold-deep) !important;
    font-family: var(--au-font-body) !important;
    font-size: 0.82rem !important;
    cursor: pointer !important;
    text-decoration: underline !important;
    transition: color 0.2s !important;
}
span[onclick*="Deleteaccount"]:hover { color: var(--au-gold) !important; }

/* ════════════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════════════ */
/* General OTP/Login buttons */
input.New_button,
input.customfont.New_button {
    background: var(--au-grad-gold) !important;
    color: var(--au-dark) !important;
    border: none !important;
    border-radius: 8px !important;
    font-family: var(--au-font-body) !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: var(--au-tr) !important;
    box-shadow: 0 3px 14px rgba(212,175,55,0.3) !important;
    width: 100% !important;
    padding: 14px !important;
}
input.New_button:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(212,175,55,0.45) !important; }

/* BUY button — deep green (trading convention) */
#marketBuyButton, #pendingBuyButton {
    background: linear-gradient(135deg, #0D6E3E 0%, #1A9154 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    font-family: var(--au-font-body) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    padding: 12px 40px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 16px rgba(13,110,62,0.35) !important;
    transition: var(--au-tr) !important;
    text-decoration: none !important;
    display: inline-block !important;
    line-height: 1.4 !important;
    letter-spacing: 0.5px !important;
}
#marketBuyButton:hover, #pendingBuyButton:hover {
    background: linear-gradient(135deg, #0A5A33 0%, #157843 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 22px rgba(13,110,62,0.5) !important;
    color: #fff !important;
}

/* SELL button — deep red (trading convention) */
#marketSellButton, #pendingSellButton {
    background: linear-gradient(135deg, #C0392B 0%, #E74C3C 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    font-family: var(--au-font-body) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    padding: 12px 40px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 16px rgba(192,57,43,0.35) !important;
    transition: var(--au-tr) !important;
    text-decoration: none !important;
    display: inline-block !important;
    line-height: 1.4 !important;
    letter-spacing: 0.5px !important;
}
#marketSellButton:hover, #pendingSellButton:hover {
    background: linear-gradient(135deg, #A93226 0%, #CB4335 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 22px rgba(192,57,43,0.5) !important;
    color: #fff !important;
}

/* ════════════════════════════════════════════════════════════════
   BUYSELL PAGE — SCRIP NAME & PRICE DISPLAY
   ════════════════════════════════════════════════════════════════ */
#ScripCode {
    font-family: var(--au-font-body) !important;
    font-weight: 700 !important;
    font-size: 1.3rem !important;
    color: var(--au-dark) !important;
    padding: 8px 0 !important;
    background: var(--au-cream-2) !important;
    border-radius: 8px !important;
    text-align: center !important;
    border: 1px solid rgba(212,175,55,0.2) !important;
    margin-bottom: 8px !important;
}

/* Live bid/ask price labels */
#marketBidPrice {
    color: #0D6E3E !important;
    font-family: var(--au-font-body) !important;
    font-weight: 800 !important;
    font-size: 2rem !important;
}
#marketAskPrice {
    color: #C0392B !important;
    font-family: var(--au-font-body) !important;
    font-weight: 800 !important;
    font-size: 2rem !important;
}

/* Buy/Sell column labels */
.main table tr td[style*="color:#000;width:50%;font-size: 175%"],
.main table tr td[style*="color:#000;width:50%;font-size:175%"] {
    color: var(--au-warm-gray) !important;
    font-family: var(--au-font-body) !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding-bottom: 4px !important;
}

/* ui-content wrapper for BuySell */
.ui-content[style*="background-color: #FFFFFF"] {
    background: var(--au-white) !important;
    border-radius: var(--au-radius-lg) !important;
    box-shadow: var(--au-shadow-card) !important;
    border: 1px solid rgba(212,175,55,0.15) !important;
    padding: 20px !important;
}

/* ════════════════════════════════════════════════════════════════
   TRADES / ORDERS TABLE  (#gvData injected by JS)
   ════════════════════════════════════════════════════════════════ */
table#gvData {
    width: 100% !important;
    border-collapse: collapse !important;
    font-family: var(--au-font-body) !important;
}

/* Header row */
table#gvData tr.heading,
table#gvData thead tr {
    background: var(--au-dark) !important;
}
table#gvData tr.heading td,
table#gvData thead tr td,
table#gvData thead tr th {
    color: var(--au-gold) !important;
    font-family: var(--au-font-body) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 12px 10px !important;
    border: none !important;
    white-space: nowrap !important;
}

/* Data rows */
table#gvData tr {
    border-bottom: 1px solid rgba(212,175,55,0.08) !important;
    transition: background 0.15s !important;
}
table#gvData tr:hover { background: rgba(212,175,55,0.05) !important; }

table#gvData tr td {
    padding: 9px 10px !important;
    font-family: var(--au-font-body) !important;
    font-size: 0.82rem !important;
    color: var(--au-dark) !important;
    border: none !important;
    vertical-align: middle !important;
}

/* BUY rows (injected with background-color:blue) — upgrade to rich green */
table#gvData tr td[style*="background-color:blue"],
table#gvData tr td[style*="background-color: blue"] {
    background-color: #0D6E3E !important;
    color: #fff !important;
    border-radius: 4px 0 0 4px !important;
}
table#gvData tr[style*="background-color:blue"] > td {
    background-color: #0D6E3E !important;
    color: #fff !important;
}

/* SELL rows (injected with background-color:red) */
table#gvData tr td[style*="background-color:red"],
table#gvData tr td[style*="background-color: red"] {
    background-color: #A93226 !important;
    color: #fff !important;
    border-radius: 4px 0 0 4px !important;
}
table#gvData tr[style*="background-color:red"] > td {
    background-color: #A93226 !important;
    color: #fff !important;
}

/* Alternating row zebra */
table#gvData tr:nth-child(even) { background: var(--au-gold-ultra) !important; }
table#gvData tr:nth-child(even):hover { background: rgba(212,175,55,0.06) !important; }

/* TDS Calculator button inside Trades */
table#gvData .btn[style*="background:#f6ae2d"],
table#gvData button[style*="background:#f6ae2d"] {
    background: var(--au-grad-gold) !important;
    color: var(--au-dark) !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    padding: 5px 10px !important;
    box-shadow: 0 2px 8px rgba(212,175,55,0.3) !important;
}

/* Checkbox styling in Trades */
table#gvData input[type=checkbox] {
    width: 16px !important;
    height: 16px !important;
    accent-color: var(--au-gold) !important;
    cursor: pointer !important;
    border-radius: 4px !important;
}

/* ════════════════════════════════════════════════════════════════
   MODIFY / DELETE ORDERS PAGE
   ════════════════════════════════════════════════════════════════ */
/* Delete / Modify buttons inside tables */
a[onclick*="DeleteOrder"],
a[onclick*="ModifyOrder"],
button[onclick*="delete"],
button[onclick*="modify"],
input[value*="Delete"],
input[value*="Modify"],
input[value*="Cancel"] {
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 0.78rem !important;
    padding: 5px 12px !important;
    border: none !important;
    cursor: pointer !important;
    transition: var(--au-tr) !important;
}
input[value*="Delete"] { background: #C0392B !important; color: #fff !important; }
input[value*="Modify"] { background: var(--au-grad-gold) !important; color: var(--au-dark) !important; }
input[value*="Cancel"] { background: var(--au-warm-gray) !important; color: #fff !important; }

/* ════════════════════════════════════════════════════════════════
   FOOTER  (all www/ pages share same footer HTML)
   ════════════════════════════════════════════════════════════════ */
#footer, footer {
    background: #000066 !important;
    border-top: 2px solid rgba(212,175,55,0.15) !important;
}

#footer h2, footer h2 {
    color: var(--au-gold) !important;
    font-family: var(--au-font-body) !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

#footer p, footer p,
#footer li, footer li { color: rgba(255,255,255,0.55) !important; }

#footer a, footer a { color: rgba(255,255,255,0.55) !important; transition: color 0.25s !important; }
#footer a:hover, footer a:hover { color: var(--au-gold-light) !important; }

#footer strong.text-color-light, footer strong.text-color-light {
    color: rgba(255,255,255,0.75) !important;
}

.footer-copyright {
    background: #000066 !important;
    border-top: 1px solid rgba(212,175,55,0.12) !important;
    padding: 16px 0 !important;
}
.footer-copyright p.text-white { color: rgba(255,255,255,0.45) !important; font-size: 0.8rem !important; }
.footer-copyright a[style*="color:#FFF"] { color: var(--au-gold) !important; }

/* ════════════════════════════════════════════════════════════════
   LIVE RATES TABLE (same pages may show rate tables)
   ════════════════════════════════════════════════════════════════ */

/* ── Top-3 summary cards ────────────────────────────────────────── */
table.table1001 {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 6px !important;
    table-layout: fixed !important;
}
table.table1001 > tbody > tr > td,
table.table1001 > tr > td {
    vertical-align: top !important;
    padding: 0 !important;
    cursor: pointer !important;
}

table.goldd {
    width: 100% !important;
    background: var(--au-dark-2) !important;
    border: 1px solid rgba(212,175,55,0.22) !important;
    border-radius: var(--au-radius) !important;
    overflow: hidden !important;
    transition: transform 0.22s, box-shadow 0.22s !important;
    box-shadow: 0 3px 16px rgba(26,24,20,0.18) !important;
}
table.table1001 > tbody > tr > td:hover table.goldd,
table.table1001 > tr > td:hover table.goldd {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 28px rgba(212,175,55,0.18) !important;
    border-color: rgba(212,175,55,0.45) !important;
}

/* Card header — product name */
table.goldd tr.Box1 td.sell,
table.goldd tr:first-child td.sell {
    background: linear-gradient(135deg, #009CD9 0%, #2DB9EA 50%, #009CD9 100%) !important;
    color: var(--au-dark) !important;
    font-family: var(--au-font-body) !important;
    font-size: 0.73rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    padding: 9px 6px !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    border: none !important;
    line-height: 1.25 !important;
}

/* Price cell */
table.goldd td[id$="BUY1"] {
    padding: 10px 6px 4px !important;
    text-align: center !important;
    background: transparent !important;
}

/* Top-5 price badge (top3 cards) */
span.top5span {
    display: inline-block !important;
    padding: 4px 12px !important;
    border-radius: 6px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    font-family: var(--au-font-body) !important;
    letter-spacing: 0.3px !important;
    transition: transform 0.12s !important;
}
span.top5span[style*="background-color:green"] { background: #0D6E3E !important; box-shadow: 0 2px 8px rgba(13,110,62,0.35) !important; }
span.top5span[style*="background-color:red"]   { background: #C0392B !important; box-shadow: 0 2px 8px rgba(192,57,43,0.35) !important; }
span.top5span[style*="color: #010066"],
span.top5span[style*="color:#010066"]          { color: var(--au-gold-light) !important; background: rgba(212,175,55,0.12) !important; }

/* Buy/Sell pair labels in top3 cards */
span.bloc_GS {
    color: rgba(255,255,255,0.55) !important;
    font-size: 0.7rem !important;
    font-family: var(--au-font-body) !important;
}
table.goldd td[style*="color: #010066"],
table.goldd td[style*="color:#010066"] {
    padding: 4px 6px 10px !important;
    text-align: center !important;
    font-size: 0.7rem !important;
}

/* ── Main rate table heading ────────────────────────────────────── */
tr.heading { background: var(--au-dark) !important; }
tr.heading td { padding: 11px 8px !important; border: none !important; }
tr.heading td:first-child { padding-left: 16px !important; }

span.mainheading {
    color: var(--au-gold) !important;
    font-family: var(--au-font-body) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
}
tr.heading td:not(:first-child) > span {
    color: rgba(255,255,255,0.65) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-family: var(--au-font-body) !important;
}

/* ── Rate rows ──────────────────────────────────────────────────── */
table.res_mob_font_width {
    width: 100% !important;
    border-collapse: collapse !important;
    border-bottom: 1px solid rgba(212,175,55,0.07) !important;
    background: var(--au-white) !important;
    transition: background 0.15s !important;
}
table.res_mob_font_width:nth-child(even) { background: var(--au-gold-ultra) !important; }
table.res_mob_font_width tr { cursor: pointer !important; }
table.res_mob_font_width tr:hover { background: rgba(212,175,55,0.06) !important; }

span.buy_sell_label {
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    font-family: var(--au-font-body) !important;
    color: var(--au-dark) !important;
    letter-spacing: 0.1px !important;
}
.buy_sell_label1 { vertical-align: middle !important; }

span.top55span {
    display: inline-block !important;
    padding: 3px 10px !important;
    border-radius: 5px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    font-family: var(--au-font-body) !important;
    min-width: 58px !important;
    text-align: center !important;
    letter-spacing: 0.2px !important;
}
span.top55span[style*="background-color:green"] { background: #0D6E3E !important; box-shadow: 0 2px 6px rgba(13,110,62,0.3) !important; }
span.top55span[style*="background-color:red"]   { background: #C0392B !important; box-shadow: 0 2px 6px rgba(192,57,43,0.3) !important; }
span.top55span[style*="color: #010066"],
span.top55span[style*="color:#010066"]          { color: var(--au-dark) !important; background: rgba(212,175,55,0.1) !important; border: 1px solid rgba(212,175,55,0.2) !important; }

.buy_sell_label1 span.sell,
table.res_mob_font_width td:last-child span.sell {
    display: block !important;
    font-size: 0.62rem !important;
    color: var(--au-warm-gray) !important;
    font-family: var(--au-font-body) !important;
    margin-top: 2px !important;
    font-weight: 400 !important;
}

/* Net position badge */
span[class^="NP"] {
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    vertical-align: middle !important;
    margin-left: 4px !important;
    border-radius: 10px !important;
    padding: 2px 6px !important;
}

/* Error message */
.center-message {
    padding: 32px 16px !important;
    text-align: center !important;
    color: var(--au-warm-gray) !important;
    font-size: 0.88rem !important;
    font-style: italic !important;
    font-family: var(--au-font-body) !important;
}

/* Wrapper tables */
table.tt_33 { width: 100%; border-collapse: collapse !important; }
table.Trending_Table_Root, .bgWaterMark {
    background: transparent !important;
    border: none !important;
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .headingTop, p.headingTop { font-size: 1rem !important; padding: 12px 0 8px !important; }
    table.table1001 { border-spacing: 4px !important; }
    table.goldd tr.Box1 td.sell { font-size: 0.64rem !important; padding: 7px 4px !important; }
    span.top5span  { font-size: 0.86rem !important; padding: 3px 8px !important; }
    span.buy_sell_label { font-size: 0.78rem !important; }
    span.top55span { font-size: 0.8rem !important; padding: 2px 7px !important; min-width: 48px !important; }
    tr.heading td { padding: 9px 5px !important; }
    #marketBuyButton, #pendingBuyButton,
    #marketSellButton, #pendingSellButton { padding: 10px 24px !important; font-size: 0.9rem !important; }
    #marketBidPrice, #marketAskPrice { font-size: 1.6rem !important; }
}

@media (max-width: 480px) {
    table#gvData tr td { font-size: 0.76rem !important; padding: 8px 7px !important; }
    .footer-copyright p { font-size: 0.72rem !important; }
}

/* ── JS-injected span color overrides ────────────────────────────── */
/* UP — background-color:green */
span.top5span[style*="background-color:green"],
span.top55span[style*="background-color:green"] {
    background-color: #0D6E3E !important;
    color: #fff !important;
}
/* DOWN — background-color:red */
span.top5span[style*="background-color:red"],
span.top55span[style*="background-color:red"] {
    background-color: #B83232 !important;
    color: #fff !important;
}
/* NEUTRAL — JS injects color:#010066 (dark blue, unreadable on light bg) */
span.top5span[style*="#010066"],
span.top55span[style*="#010066"],
span.top5span[style*="#1f0954"],
span.top55span[style*="#1f0954"] {
    color: var(--au-dark) !important;
    background: transparent !important;
}
/* Global link color fix inside all rate tables */
table.table1001 a, table.table1001 a:visited,
table.goldd a, table.goldd a:visited,
table.res_mob_font_width a, table.res_mob_font_width a:visited,
.bloc_GS a, .bloc_GS a:visited {
    color: var(--au-dark) !important;
    text-decoration: none !important;
}

html,
body,
.body,
div.main,
.main,
main,
#main,
#content,
.content,
.page-content,
.page-wrapper,
section,
section.section,
.section,
.ui-page,
.ui-overlay-a,
.ui-page-theme-a,
.ui-content,
[data-role="page"],
[data-role="content"] {
    background: #e3f4fb !important;
    background-color: #e3f4fb !important;
}

#footer,
footer,
.site-footer,
.footer-copyright {
    background: #000066 !important;
    background-color: #000066 !important;
}

h1, h2, h3, h4, h5, h6,
.heading,
.section-title,
.page-title,
.header-nav-main nav ul.nav > li > a,
.main-nav a,
i[class*="fa-"] {
    color: #000066 !important;
}

a,
a:hover,
.text-gold,
.breadcrumb-gold a,
.header-nav-main nav ul.nav > li > a:hover,
.header-nav-main nav ul.nav > li.active > a {
    color: #009CD9 !important;
}

.btn-gold,
.header-login-btn,
button,
input[type="button"],
input[type="submit"],
.ui-btn-active,
#scrollTop {
    background: #009CD9 !important;
    background-color: #009CD9 !important;
    border-color: #009CD9 !important;
    color: #ffffff !important;
}

.btn-gold-outline,
.btn-white,
.btn-secondary,
button.secondary,
input.secondary {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-color: #000066 !important;
    color: #000066 !important;
}

.btn-gold-outline:hover,
.btn-white:hover,
.btn-secondary:hover,
button.secondary:hover,
input.secondary:hover {
    background: #009CD9 !important;
    background-color: #009CD9 !important;
    border-color: #009CD9 !important;
    color: #ffffff !important;
}

.gold-line,
.gold-divider,
.section-badge,
.active-mark {
    background: #009CD9 !important;
    background-color: #009CD9 !important;
}

body :is(.body, main, #main, #content, .main, .content, .page-content, .page-wrapper, section, .section, .ui-page, .ui-content) :is(.text-white, .color-white, [style*="color:#fff"], [style*="color: #fff"], [style*="color:#FFF"], [style*="color: #FFF"], [style*="color:white"], [style*="color: white"]) {
    color: #000066 !important;
}

body :is(.body, main, #main, #content, .main, .content, .page-content, .page-wrapper, section, .section, .ui-page, .ui-content) :is(p, span, div, li, label, td, th, small, strong):not(.btn):not(.ui-btn):not(.pageHeaders):not([class*="btn"]):not([style*="background"]):not([style*="color:red"]):not([style*="color:green"]) {
    color: #000066 !important;
}

#header :is(.text-white, .color-white, [style*="color:#fff"], [style*="color: #fff"]),
#footer :is(.text-white, .color-white, [style*="color:#fff"], [style*="color: #fff"]),
.site-footer :is(.text-white, .color-white, [style*="color:#fff"], [style*="color: #fff"]),
.btn,
button,
input[type="button"],
input[type="submit"],
.ui-btn-active,
.pageHeaders,
#tblHeader,
tr.heading,
tr.heading td,
tr.heading th {
    color: #ffffff !important;
}