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

/* ═══════════════════════════════════════
   DESIGN TOKENS  (Ranka-Bullion palette)
   ═══════════════════════════════════════ */
:root {
    --gold:        #C9A84C;
    --gold-dark:   #8B6914;
    --gold-deeper: #6B4F10;
    --gold-light:  #F5E6C8;
    --gold-pale:   #FFF9F0;
    --gold-border: #E2C97A;
    --white:       #FFFFFF;
    --off-white:   #FAFAFA;
    --text-dark:   #1A1A1A;
    --text-mid:    #5A5A5A;
    --text-light:  #9A9A9A;
    --buy-bg:      #D4EDDA;
    --buy-text:    #155724;
    --buy-border:  #C3E6CB;
    --sell-bg:     #F8D7DA;
    --sell-text:   #721C24;
    --sell-border: #F5C6CB;
    --green:       #16A34A;
    --red:         #DC2626;
    --radius:      12px;
    --radius-sm:   8px;
    --shadow-sm:   0 2px 8px rgba(0,0,0,.06);
    --shadow-md:   0 4px 20px rgba(0,0,0,.10);
    --shadow-lg:   0 8px 40px rgba(0,0,0,.14);
    --transition:  .25s ease;
}

* { box-sizing: border-box; }

html, body, .body, .main {
    background: var(--off-white) !important;
    color: var(--text-dark);
    font-family: 'Inter', 'Segoe UI', sans-serif;
}

a { color: var(--gold-dark) !important; text-decoration: none !important; }
a:hover, a:focus { color: var(--gold-deeper) !important; text-decoration: none !important; }

/* ═══════════════════════════════════════
   HEADER
   ═══════════════════════════════════════ */
#header,
#header .header-body,
#header .header-top,
#header .headImg,
#header .naviRow {
    background: var(--white) !important;
    border: 0 !important;
    box-shadow: none !important;
}

#header .header-body {
    border-bottom: 1.5px solid var(--gold-light) !important;
    box-shadow: var(--shadow-sm) !important;
}

#header .header-top {
    border-bottom: 1px solid #f0f0f0 !important;
    min-height: 36px;
    background: var(--gold-pale) !important;
}

#header .header-top-social-icons { margin: 0; padding: 7px 0; }

#header .header-top-social-icons li,
#date_time, #date_time_us, #date_time_eng, #date_time_uae {
    color: var(--text-dark) !important;
    font-size: 12px !important;
    letter-spacing: 0.3px;
}

.flg {
    width: 22px;
    height: 15px;
    vertical-align: middle;
    margin-right: 4px;
    border-radius: 2px;
    object-fit: cover;
}

#header .headImg { padding: 14px 0; }

#iconimage {
    display: flex;
    justify-content: center;
    align-items: center;
}

#iconimage .sultan-header-brand {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

#iconimage .sultan-header-logo {
    display: block;
    width: auto;
    max-width: 340px;
    max-height: 80px;
    object-fit: contain;
}

#header .naviRow,
#header .header-nav,
#header .header-nav-main,
#header .header-nav-main nav,
#header .header-nav-main nav ul,
#header .header-nav-main nav > ul li {
    background: var(--white) !important;
    background-image: none !important;
    border-top: none !important;
    border-bottom: none !important;
}

#header .naviRow {
    border-top: 1px solid #f0f0f0 !important;
    border-bottom: none !important;
    background: var(--white) !important;
}

#navhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
}

#mainNav { gap: 8px; }

#header .header-nav-main nav > ul#mainNav {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#header #mainNav > li,
#header #showlogin {
    display: flex !important;
    align-items: center !important;
}

html #header .header-nav-main nav > ul > li > a,
html #header .header-nav-main nav > ul > li > a:not(.active),
html #header.header-dark .header-nav-main nav > ul > li > a,
#mainNav > li > a,
#mainNav .dropdown-item {
    color: var(--text-dark) !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 15px 11px;
    background: transparent !important;
    border: 0 !important;
    transition: color var(--transition);
}

#header #mainNav #Lb1 {
    display: flex !important;
    align-items: center !important;
    white-space: nowrap;
}

html #header .header-nav-main nav > ul > li > a:hover,
html #header .header-nav-main nav > ul > li > a:focus,
#mainNav > li > a:hover,
#mainNav > li > a:focus,
#mainNav .dropdown-item:hover {
    color: var(--gold-dark) !important;
}

#mainNav .dropdown-menu {
    background: var(--white) !important;
    border: 1px solid var(--gold-light) !important;
    box-shadow: var(--shadow-md) !important;
}

#mainNav .dropdown-menu .dropdown-item {
    color: var(--text-mid) !important;
}

#mainNav .dropdown-menu .dropdown-item:hover {
    background: var(--gold-pale) !important;
    color: var(--gold-dark) !important;
}

#Lb3, #Lb4 {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark)) !important;
    border: none !important;
    color: var(--white) !important;
    font-weight: 700 !important;
    min-width: 88px;
    padding: 9px 18px;
    border-radius: 6px !important;
    font-size: 12px !important;
    letter-spacing: 1px;
}

.header-btn-collapse-nav {
    background: var(--gold-pale) !important;
    border: 1px solid var(--gold-border) !important;
    color: var(--gold-dark) !important;
    width: 42px;
    height: 38px;
    border-radius: 6px !important;
}

.header-btn-collapse-nav .hamburguer span,
.header-btn-collapse-nav .close span {
    background: var(--gold-dark) !important;
}

.scroll-logo.sultan-scroll-brand {
    color: var(--gold-dark) !important;
}

/* ═══════════════════════════════════════
   LIVE STATUS BAR  (ticker strip)
   ═══════════════════════════════════════ */
.ag-live-bar {
    background: linear-gradient(135deg, var(--gold-deeper), var(--gold-dark));
    border-bottom: none;
    padding: 10px 0;
}

.ag-live-bar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.ag-live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--white);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.ag-live-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #90EE90;
    box-shadow: 0 0 8px #90EE90, 0 0 20px rgba(144,238,144,.3);
    animation: ag-pulse 1.5s ease-in-out infinite;
}

@keyframes ag-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .5; transform: scale(.85); }
}

.ag-market-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ag-market-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,.85);
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(6px);
    padding: 4px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.25);
    letter-spacing: .3px;
}

.ag-market-tag .dot-green {
    width: 6px; height: 6px; border-radius: 50%; background: #90EE90;
}

.ag-market-tag .dot-red {
    width: 6px; height: 6px; border-radius: 50%; background: #FFB3BA;
}

.ag-refresh-timer {
    font-size: 11px;
    color: rgba(255,255,255,.75);
    font-weight: 500;
}

.ag-refresh-timer i {
    color: rgba(255,255,255,.9) !important;
    margin-right: 4px;
}

/* ═══════════════════════════════════════
   MAIN BOARD (Ranka-style)
   ═══════════════════════════════════════ */
.main > .section:first-child {
    padding: 0 !important;
    background: var(--off-white) !important;
}

.div-spott,
.div_spot,
.swiper-container,
.swiper-wrapper,
.swiper-slideTrending,
.bgN1 {
    background: transparent !important;
}

.ag-ranka-board {
    background: var(--white);
    border: 1.5px solid var(--gold-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 0;
    margin-top: 20px;
    overflow: hidden;
}

.ag-board-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 28px 28px 18px;
    border-bottom: 1px solid var(--gold-light);
    background: var(--gold-pale);
}

.ag-board-head h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--gold-dark);
    margin: 0 0 4px;
}

.ag-board-kicker {
    display: inline-block;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: var(--white);
    padding: 3px 14px;
    border-radius: 50px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.ag-board-subtitle {
    color: var(--text-mid);
    font-size: .85rem;
    font-weight: 500;
    margin: 0;
}

.ag-refresh-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: var(--white);
    border: none;
    border-radius: 50px;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(201,168,76,.25);
}

.ag-refresh-button:hover {
    background: linear-gradient(135deg, var(--gold-dark), var(--gold-deeper));
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(201,168,76,.35);
}

.ag-refresh-button i {
    font-size: .8rem;
    color: var(--white) !important;
}

/* ═══════════════════════════════════════
   QUICK-STATS  (Spot cards area)
   ═══════════════════════════════════════ */
.ag-quick-stats,
#gvData_top3 {
    padding: 16px 20px;
}

.Trending_Table_Root {
    width: 100% !important;
    margin: 0 auto;
    border-spacing: 0 10px;
    border-collapse: separate;
    table-layout: fixed;
}

.Trending_Table_Root > tbody > tr > td {
    padding: 0 !important;
    vertical-align: top;
}

.Trending_Table_Child1,
#gvData_top3,
#gvData,
#gvData_top4_silver,
#gvData_silver,
#gvData_top3_silver,
#gvData_coins,
#gvData_top3_coins,
#gvData_Unfix,
#gvData_top3_Unfix {
    width: 100% !important;
    color: var(--text-dark) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: transparent !important;
}

#gvData_top3 > table,
#gvData_top4_silver,
#gvData_top3_silver,
#gvData table,
#gvData_silver table,
#gvData_coins table,
#gvData_Unfix table {
    width: 100% !important;
}

/* ═══════════════════════════════════════
   SPOT RATE CARDS  (top section)
   ═══════════════════════════════════════ */
#gvData_top3 .table1001,
#gvData_top4_silver.table1002,
#gvData_top4_silver .table1002,
#gvData_top3_silver .table1001 {
    width: 100% !important;
    table-layout: fixed !important;
    border-spacing: 12px !important;
    border-collapse: separate !important;
}

#gvData_top3 .table1001 > tbody > tr > td,
#gvData_top3 .table1001 > tr > td {
    width: 50% !important;
    padding: 0 !important;
    vertical-align: top !important;
}

#gvData_top3 .table1001.gmtable > tbody > tr > td,
#gvData_top3 .table1001.gmtable > tr > td {
    width: 33.333% !important;
}

.goldd,
.goldd1,
.goldd2,
.goldd3 {
    background: var(--white) !important;
    border: 1.5px solid var(--gold-light) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition);
}

.goldd:hover,
.goldd1:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.goldd td,
.goldd1 td,
.goldd2 td,
.goldd3 td {
    color: var(--text-dark) !important;
    border-color: transparent !important;
    background: transparent !important;
    vertical-align: middle;
}

/* Spot card label */
.top5sell {
    color: var(--text-mid) !important;
    font-weight: 700 !important;
    font-size: .7rem !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 16px 12px 6px !important;
    background: transparent !important;
}

/* Spot card rate value */
.top5span {
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--gold-dark) !important;
    letter-spacing: -0.5px;
    display: inline-block;
    padding: 6px 16px !important;
    border-radius: 8px !important;
    transition: all .2s ease;
    min-width: 80px;
    text-align: center;
}

/* JS inline green/red flash overrides */
.top5span[style*="background: green"],
.top5span[style*="background-color: green"],
.top5span[style*="background-color:green"] {
    background: var(--green) !important;
    color: var(--white) !important;
    box-shadow: 0 0 12px rgba(22,163,74,.25);
}

.top5span[style*="background: red"],
.top5span[style*="background-color: red"],
.top5span[style*="background-color:red"] {
    background: var(--red) !important;
    color: var(--white) !important;
    box-shadow: 0 0 12px rgba(220,38,38,.25);
}

/* HIGH / LOW badges */
.GoldRtae2 td {
    padding: 6px 12px 16px !important;
}

.bloc_GS {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .72rem !important;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
}

.low_gs {
    background: #FEE2E2;
    color: #B91C1C !important;
    border: 1px solid #FCA5A5;
}

.high_gs {
    background: #DCFCE7;
    color: #15803D !important;
    border: 1px solid #86EFAC;
}

.hl_label {
    font-size: .62rem !important;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hl_arrow {
    display: inline-flex;
    align-items: center;
}

.hl_arrow img {
    width: 12px;
    height: 12px;
}

.low_gs .hl_arrow img { filter: brightness(0) saturate(100%) invert(20%) sepia(80%) saturate(4000%) hue-rotate(350deg); }
.high_gs .hl_arrow img { filter: brightness(0) saturate(100%) invert(35%) sepia(80%) saturate(500%) hue-rotate(100deg); }

.hl_value {
    font-size: .78rem !important;
    font-weight: 800;
}

.low_td, .high_td {
    font-size: 13px !important;
}

/* GM table (Gold 995 etc. – smaller cards) */
.gmtable {
    background: var(--white) !important;
    border: 1.5px solid var(--gold-light) !important;
    border-radius: var(--radius) !important;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.gmtable td.top5sell {
    padding: 10px 8px 4px !important;
    font-size: .65rem !important;
    letter-spacing: .08em;
}

.gmtable tr.goldd td {
    padding: 4px 8px 14px !important;
}

.gmtable .top5span {
    font-size: 1.1rem !important;
}

/* ═══════════════════════════════════════
   RATE LEGEND
   ═══════════════════════════════════════ */
.ag-rate-legend {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    padding: 10px 20px;
    font-size: .75rem;
    color: var(--text-light);
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    background: var(--off-white);
}

.ag-rate-legend strong {
    color: var(--text-dark);
}

/* ═══════════════════════════════════════
   PRODUCT RATES TABLE
   ═══════════════════════════════════════ */
.ag-rate-table-card {
    padding: 0;
}

.tt_33,
.tt_333 {
    background: var(--white) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none;
    overflow: hidden;
    margin-top: 0;
}

.tt_33 td,
.tt_333 td {
    color: var(--text-dark) !important;
    border-color: var(--gold-light) !important;
    background: transparent !important;
    vertical-align: middle;
}

/* Product Rate Title bar */
.product_rate_title,
.product_rate_title td {
    background: linear-gradient(135deg, var(--gold-dark), var(--gold)) !important;
    color: var(--white) !important;
    font-weight: 700 !important;
    font-size: .8rem !important;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.product_rate_title td {
    padding: 12px 16px !important;
}

/* Table Header row */
.heading,
.headertable1 {
    background: var(--gold-pale) !important;
    color: var(--text-mid) !important;
}

.heading td,
.heading th,
.headertable1 th,
.headertable1 td {
    color: var(--text-mid) !important;
    font-weight: 700 !important;
    font-size: .7rem !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 10px 8px !important;
    border-bottom: 1px solid var(--gold-light) !important;
    background: transparent !important;
}

.heading span,
.headertable1 span {
    color: var(--text-mid) !important;
}

.back_fore_color_td,
.bg_script_color {
    background: var(--gold-pale) !important;
    color: var(--text-mid) !important;
}

/* Product Rows */
.res_mob_font_width,
.res_mob_font_width1,
.res_mob_font_width2 {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible;
    border-bottom: 1px solid var(--gold-light) !important;
    transition: background var(--transition);
}

.res_mob_font_width:hover,
.res_mob_font_width1:hover,
.res_mob_font_width2:hover {
    background: var(--gold-pale) !important;
}

.res_mob_font_width:nth-child(even),
.res_mob_font_width1:nth-child(even),
.res_mob_font_width2:nth-child(even) {
    background: rgba(0,0,0,.015) !important;
}

.res_mob_font_width:nth-child(even):hover,
.res_mob_font_width1:nth-child(even):hover,
.res_mob_font_width2:nth-child(even):hover {
    background: var(--gold-pale) !important;
}

.res_mob_font_width td,
.res_mob_font_width1 td,
.res_mob_font_width2 td {
    color: var(--text-dark) !important;
    border-color: transparent !important;
    background: transparent !important;
    vertical-align: middle;
    padding: 12px 10px !important;
    font-size: .88rem;
    font-weight: 600;
}

.buy_sell_label {
    color: var(--text-dark) !important;
    font-weight: 700 !important;
    font-size: .88rem !important;
    letter-spacing: 0.3px;
}

.unit_td span,
.currency_td span {
    color: var(--text-light) !important;
    font-size: 12px !important;
    font-weight: 600;
}

.buy_sell_label1 {
    font-weight: 800 !important;
}

/* Product meta (unit label under product name) */
.ag-product-meta {
    display: block;
    font-size: .72rem;
    font-weight: 500;
    color: var(--text-light);
    font-style: italic;
    margin-top: 2px;
}

/* Price pills in product table */
.top55span {
    font-size: 1rem !important;
    font-weight: 700 !important;
    display: inline-block;
    padding: 5px 14px !important;
    border-radius: 8px !important;
    transition: all .15s ease;
    min-width: 60px;
    text-align: center;
}

/* Stable state – show in a neutral pill */
.top55span[style*="color:#000"],
.top55span[style*="color: #000"] {
    color: var(--text-dark) !important;
}

.top55span[style*="background-color:green"],
.top55span[style*="background-color: green"] {
    background: var(--green) !important;
    color: var(--white) !important;
    box-shadow: 0 0 10px rgba(22,163,74,.2);
}

.top55span[style*="background-color:red"],
.top55span[style*="background-color: red"] {
    background: var(--red) !important;
    color: var(--white) !important;
    box-shadow: 0 0 10px rgba(220,38,38,.2);
}

/* Silver product rows */
.silver-product-row td:first-child .buy_sell_label {
    color: var(--text-mid) !important;
}

/* ═══════════════════════════════════════
   RATES FOOTER (bottom of board)
   ═══════════════════════════════════════ */
.ag-rates-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: var(--gold-pale);
    font-size: .75rem;
    color: var(--text-mid);
    border-top: 1px solid var(--gold-light);
}

/* ═══════════════════════════════════════
   RATE LOADING
   ═══════════════════════════════════════ */
.ag-rate-loading {
    padding: 48px 20px;
    text-align: center;
    color: var(--text-mid);
    font-size: .88rem;
    font-weight: 500;
}

.ag-rate-loading::before {
    content: '';
    display: block;
    width: 32px;
    height: 32px;
    border: 3px solid var(--gold-light);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: ag-spin .8s linear infinite;
    margin: 0 auto 14px;
}

@keyframes ag-spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════
   MARQUEE TICKER
   ═══════════════════════════════════════ */
.marquee {
    width: 100%;
    margin: 0;
    padding: 12px 0;
    overflow: hidden;
    background: var(--gold-pale) !important;
    border-top: 1px solid var(--gold-light);
    border-bottom: 1px solid var(--gold-light);
    font-size: 13px;
    font-weight: 600;
}

.marquee p,
.marquee span {
    color: var(--gold-deeper) !important;
    letter-spacing: .5px;
}

/* ═══════════════════════════════════════
   WELCOME PANEL
   ═══════════════════════════════════════ */
.sultan-welcome-panel {
    margin: 24px auto 0;
    text-align: center;
}

.sultan-welcome-panel img {
    max-width: min(100%, 600px);
    height: auto;
    display: inline-block;
    border-radius: var(--radius);
    border: 1.5px solid var(--gold-light);
    box-shadow: var(--shadow-sm);
}

/* ═══════════════════════════════════════
   CONTACT & INFO SECTION
   ═══════════════════════════════════════ */
.ag-contact-section {
    background: var(--gold-pale) !important;
    padding: 40px 0 !important;
    border-top: 1px solid var(--gold-light);
}

.right-app-cover {
    width: 100%;
    padding: 28px;
    background: var(--white);
    border: 1.5px solid var(--gold-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.right-app-details { margin: 0; }

.app-available h4 {
    color: var(--gold-dark) !important;
    font-weight: 800;
    margin-bottom: 14px;
    letter-spacing: 1px;
}

.anroid-app-cover,
.ios-app-cover {
    display: inline-flex;
    justify-content: center;
    width: 48%;
    text-align: center;
}

.anroid-app-cover a,
.ios-app-cover a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gold-pale);
    border-radius: 8px;
    transition: transform var(--transition);
}

.anroid-app-cover a:hover,
.ios-app-cover a:hover {
    transform: scale(1.05);
}

.adrs h4 {
    color: var(--gold-dark) !important;
    font-size: 14px !important;
    letter-spacing: .5px;
}

.adrs p, .adrs span, .adrs a {
    color: var(--text-mid) !important;
}

.adrs a:hover { color: var(--gold-deeper) !important; }

.booking { color: var(--text-dark) !important; }
.booking a { color: var(--text-dark) !important; }
.booking a:hover { color: var(--gold-dark) !important; }

/* ═══════════════════════════════════════
   GOLD NEWS SECTION
   ═══════════════════════════════════════ */
.section .heading_underline {
    color: var(--gold-dark) !important;
    letter-spacing: 2px;
}

.News_Class,
.News_Class td,
.News_Class th {
    color: var(--text-dark) !important;
}

.card-body {
    background: transparent !important;
}

/* ═══════════════════════════════════════
   GOLD TREND SECTION
   ═══════════════════════════════════════ */
.page-header,
.gold-trend {
    background: var(--gold-pale) !important;
    border-top: 1px solid var(--gold-light);
}

.gold-trend h1 {
    color: var(--gold-dark) !important;
}

.progressbar {
    display: inline-block;
    width: 100%;
    margin: 24px 0;
    text-align: center;
}

.circle {
    width: 120px;
    height: 120px;
    margin: 10px auto 0;
    display: inline-block;
    position: relative;
    text-align: center;
}

.circle canvas { vertical-align: middle; border-radius: 50%; }

.circle div {
    width: 100%;
    text-align: center;
    line-height: 40px;
    font-size: 22px;
    color: var(--gold-dark);
    font-weight: 700;
}

.circle strong i {
    font-style: normal;
    font-size: .6em;
    font-weight: normal;
}

.circle span {
    display: block;
    color: var(--text-light);
    margin-top: 12px;
}

.gold-trend .title {
    width: 50%;
    text-align: right;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
}

.gold-trend .value {
    padding-left: 1em;
    text-align: left;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
}

/* ═══════════════════════════════════════
   MARKET HOURS SECTION
   ═══════════════════════════════════════ */
.ag-market-hours {
    background: var(--white);
    border: 1.5px solid var(--gold-light);
    border-radius: var(--radius);
    padding: 22px 26px;
    margin-top: 24px;
    box-shadow: var(--shadow-sm);
}

.ag-market-hours h5 {
    color: var(--gold-dark);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--gold-light);
}

.ag-mh-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: .82rem;
    border-bottom: 1px solid #f5f5f5;
}

.ag-mh-row:last-child { border-bottom: none; }

.ag-mh-row .name {
    color: var(--text-dark);
    font-weight: 700;
}

.ag-mh-row .hours {
    color: var(--text-mid);
    font-weight: 500;
}

/* ═══════════════════════════════════════
   DISCLAIMER
   ═══════════════════════════════════════ */
.ag-disclaimer {
    background: var(--off-white);
    padding: 20px 0;
    text-align: center;
}

.ag-disclaimer p {
    color: var(--text-light);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
}

/* ═══════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════ */
#footer {
    background: var(--white) !important;
    color: var(--text-dark) !important;
    margin-top: 0 !important;
    border-top: 1.5px solid var(--gold-light) !important;
}

#footer .section,
#footer .container,
#footer .row,
#footer .footer-copyright {
    background: transparent !important;
}

#footer .section { padding: 32px 15px !important; }

#footer h3, #footer p, #footer span, #footer a, #footer li, #footer i {
    color: var(--text-mid) !important;
}

#footer h3 {
    font-size: 15px !important;
    letter-spacing: .5px;
    color: var(--gold-dark) !important;
}

#footer p, #footer a {
    font-size: 13px;
    line-height: 1.75;
}

#footer a:hover, #footer a:focus { color: var(--gold-deeper) !important; }

#footer .icon-box { height: 100%; }
#footer .icon-box-icon { color: var(--gold-dark) !important; }

#footer .footer-copyright {
    background: var(--white) !important;
    border-top: 1px solid var(--gold-light);
    padding: 14px 0;
    color: var(--text-mid) !important;
}

#footer .footer-copyright p,
#footer .footer-copyright span {
    color: var(--text-mid) !important;
}

.sultan-company-subline {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--text-light) !important;
}

/* ═══════════════════════════════════════
   SWIPER TAB OVERRIDES
   ═══════════════════════════════════════ */
.ag-tabs {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 18px;
}

.ag-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 28px;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-mid);
    background: var(--white);
    border: 1.5px solid var(--gold-light);
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition);
}

.ag-tab-btn:hover {
    color: var(--gold-dark);
    border-color: var(--gold-border);
    background: var(--gold-pale);
}

.ag-tab-btn.active {
    color: var(--white);
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    border-color: var(--gold);
    box-shadow: 0 4px 15px rgba(201,168,76,.3);
}

.ag-tab-icon {
    font-size: 16px;
}

/* ═══════════════════════════════════════
   SECTION BACKGROUNDS
   ═══════════════════════════════════════ */
.section {
    background: var(--off-white) !important;
}

.section[style*="background-color: #FFF"],
.section[style*="background-color:#FFF"] {
    background: var(--gold-pale) !important;
}

.section[style*="background-image: repeating-linear-gradient"] {
    background: var(--off-white) !important;
}

/* ═══════════════════════════════════════
   JS-INJECTED INLINE STYLE OVERRIDES
   (Mnk / LiveRates3 inline colors)
   ═══════════════════════════════════════ */
.sell,
td.sell {
    color: var(--text-mid) !important;
    font-weight: 700 !important;
    font-size: .7rem !important;
    letter-spacing: .12em;
    text-transform: uppercase;
}

td[style*="background: #8e0100"],
td[style*="background-color: #8e0100"],
table[style*="background-color: #8e0100"] {
    background: linear-gradient(135deg, var(--gold-dark), var(--gold)) !important;
    color: var(--white) !important;
}

td[style*="color:#8e0100"] {
    color: var(--text-dark) !important;
}

span[style*="color:#8e0100"] {
    color: var(--text-dark) !important;
}

span[style*="color:#00D600"],
span[style*="color: #00D600"] {
    color: var(--green) !important;
}

span[style*="color:red"],
span[style*="color: red"],
span[style*="color:#FF6347"] {
    color: var(--red) !important;
}

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */
@media (max-width: 991px) {
    #header .header-top { display: none; }
    #header .headImg { padding: 10px 0; }

    #iconimage .sultan-header-logo {
        max-width: 260px;
        max-height: 60px;
    }

    #navhead {
        min-height: 46px;
        padding: 0 12px !important;
    }

    html #header .header-nav-main nav > ul > li > a,
    #mainNav > li > a,
    #mainNav .dropdown-item {
        padding: 12px 14px;
        font-size: 13px;
        color: var(--text-dark) !important;
    }

    .header-nav-main nav.collapse,
    #header .header-nav-main nav {
        background: var(--white) !important;
    }

    .ag-live-bar .container { flex-direction: column; gap: 6px; text-align: center; }
    .ag-market-info { justify-content: center; }

    .ag-tabs { flex-wrap: wrap; }
    .ag-tab-btn { padding: 8px 20px; font-size: 12px; }

    .ag-board-head {
        flex-direction: column;
        gap: 12px;
        padding: 20px;
    }

    .ag-board-head h1 { font-size: 1.4rem; }
}

@media (max-width: 767px) {
    .ag-ranka-board { margin-top: 12px; border-radius: var(--radius-sm); }

    .ag-board-head { padding: 16px; }
    .ag-board-head h1 { font-size: 1.2rem; }
    .ag-board-subtitle { font-size: .78rem; }

    .ag-quick-stats,
    #gvData_top3 { padding: 10px 10px; }

    #gvData_top3 .table1001,
    #gvData_top4_silver.table1002,
    #gvData_top4_silver .table1002,
    #gvData_top3_silver .table1001 {
        border-spacing: 6px !important;
    }

    .top5span {
        font-size: 1.4rem !important;
    }

    .gmtable .top5span {
        font-size: .95rem !important;
    }

    .top5sell {
        font-size: .6rem !important;
        padding: 10px 8px 2px !important;
    }

    .bloc_GS { font-size: .65rem !important; padding: 3px 8px; }
    .hl_value { font-size: .7rem !important; }
    .hl_label { font-size: .55rem !important; }

    .ag-rate-legend { gap: 12px; padding: 8px 14px; font-size: .7rem; }
}

@media (max-width: 575px) {
    .Trending_Table_Root { border-spacing: 0 6px; }

    .goldd, .goldd1, .goldd2, .goldd3 {
        border-radius: var(--radius-sm) !important;
    }

    .goldd td, .goldd1 td, .goldd2 td, .goldd3 td {
        font-size: 12px !important;
        padding: 6px 4px !important;
    }

    .top5span { font-size: 1.2rem !important; padding: 4px 10px !important; }
    .gmtable .top5span { font-size: .85rem !important; }
    .top5sell { font-size: .55rem !important; letter-spacing: .06em; }
    .top55span { font-size: .88rem !important; padding: 4px 10px !important; }

    .res_mob_font_width td,
    .res_mob_font_width1 td,
    .res_mob_font_width2 td {
        font-size: .78rem !important;
        padding: 9px 5px !important;
    }

    .buy_sell_label { font-size: .78rem !important; }

    .heading td, .heading th,
    .headertable1 th, .headertable1 td {
        font-size: .6rem !important;
        padding: 8px 5px !important;
        letter-spacing: .04em;
    }

    .product_rate_title td {
        font-size: .72rem !important;
        padding: 10px 12px !important;
    }

    .tt_33, .tt_333 { border-radius: 0 !important; }

    #footer .section { padding: 24px 15px !important; }

    .ag-market-hours { padding: 16px 18px; border-radius: var(--radius-sm); }
    .ag-market-hours h5 { font-size: .72rem; }
    .ag-mh-row { font-size: .75rem; }

    .ag-tab-btn { padding: 7px 14px; font-size: 11px; letter-spacing: .08em; }

    .ag-refresh-button { padding: 6px 14px; font-size: .72rem; }
}

/* ═══════════════════════════════════════
   PAGE HEADINGS  (.headingTop on PP / Login)
   ═══════════════════════════════════════ */
.headingTop {
    background: linear-gradient(135deg, var(--gold-dark), var(--gold)) !important;
    color: var(--white) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 12px 20px !important;
    margin: 0 !important;
    border-radius: 0;
}

/* ═══════════════════════════════════════
   LOGIN PAGE
   ═══════════════════════════════════════ */
.ui-page,
.ui-content,
.ui-overlay-a,
.ui-page-theme-a,
.ui-page-theme-a .ui-panel-wrapper {
    background-color: transparent !important;
    color: var(--text-dark) !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,
html body .ui-group-theme-a .ui-body-inherit,
html .ui-panel-page-container-a {
    background-color: transparent !important;
    color: var(--text-dark) !important;
    text-shadow: none !important;
}

#tblGenerateOTP h3 {
    background: linear-gradient(135deg, var(--gold-dark), var(--gold)) !important;
    color: var(--white) !important;
    border-radius: 8px 8px 0 0;
}

#tblGenerateOTP input[type="text"],
#tblGenerateOTP input[type="number"],
#tblLoginViaOTP input[type="number"],
#tblLogoff input[type="text"] {
    background-color: var(--white) !important;
    color: var(--text-dark) !important;
    border: 1.5px solid var(--gold-border) !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 15px !important;
}

#tblGenerateOTP input[type="text"]:focus,
#tblGenerateOTP input[type="number"]:focus,
#tblLoginViaOTP input[type="number"]:focus,
#tblLogoff input[type="text"]:focus {
    border-color: var(--gold) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(201,168,76,.15) !important;
}

#generateOTPButton,
#btnLogin,
#btnLogoff {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark)) !important;
    color: var(--white) !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    cursor: pointer;
}

/* ═══════════════════════════════════════
   PRIVACY POLICY PAGE
   ═══════════════════════════════════════ */
.css_bkdesk {
    background: var(--white) !important;
    border: 1.5px solid var(--gold-light) !important;
    border-image: none !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.08) !important;
    color: var(--text-dark) !important;
    padding: 28px !important;
}

.css_bkdesk h1 {
    color: var(--gold-dark) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
}

.css_bkdesk p,
.css_bkdesk li,
.css_bkdesk span,
.css_bkdesk a {
    color: var(--text-dark) !important;
    font-size: 15px !important;
    line-height: 1.75 !important;
}

.css_bkdesk ol {
    color: var(--text-dark) !important;
}

.css_bkdesk ::marker {
    color: var(--gold) !important;
}

.css_bkdesk table,
.css_bkdesk tr,
.css_bkdesk td {
    background: transparent !important;
    color: var(--text-dark) !important;
}

/* ═══════════════════════════════════════
   LOADING SHIMMER
   ═══════════════════════════════════════ */
@keyframes ag-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.ag-loading-placeholder {
    height: 120px;
    border-radius: var(--radius);
    background: linear-gradient(90deg, #f5f5f5 25%, #ececec 50%, #f5f5f5 75%);
    background-size: 200% 100%;
    animation: ag-shimmer 1.5s infinite;
}