/* ==========================================================================
   AKJEWELLERS — white & gold theme overrides
   Loaded last so it wins over vendor + custom.css. Palette matches Liverates.html
   and theme.jpeg (white/cream surfaces, gold-foil gradient accent bars, dark text).
   ========================================================================== */
:root {
    --ag-gold-1: #fff3c4;
    --ag-gold-2: #a97a1f;
    --ag-gold-3: #8a6212;
    --ag-gold-line: #d4af37;
    --ag-red: #b41818;
    --ag-green: #1a7a2e;
    --ag-panel: #ffffff;
    --ag-panel-deep: #ffffff;
    --ag-panel-soft: #fff8e1;
    --ag-black: #1a1200;
    --ag-bg: #ffffff;
    --ag-text: #262218;
    --ag-muted: #6b6b6b;
    --ag-foil: linear-gradient(90deg,
        #bd8a14 0%, #d6a723 16%, #f0d268 32%,
        #fff3bd 50%, #efd064 68%, #d3a221 84%, #bd8a14 100%);
}

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

/* www/css/bodyCSS.Chirayu.css (the jQuery Mobile page chrome used by every
   www/*.htm trading page) forces white text on .ui-page/.ui-header/
   .ui-content/.ui-footer with !important. Those wrappers now sit on this
   theme's white/cream surfaces, so any text inside them that isn't
   individually recolored is invisible white-on-white. This loads after
   bodyCSS.Chirayu.css, so it wins the tie and restores readable text. */
.ui-page,
.ui-header,
.ui-content,
.ui-footer {
    color: var(--ag-text) !important;
}

/* custom.css ships an older dark theme ("Box2 live-rate theme") that forces
   white/light text with !important at the body level and inside #footer —
   harmless while the page background was dark, but invisible white-on-white
   now that these surfaces are white. Same selectors, dark color, loaded after
   custom.css so this wins the tie. */
.body,
.main,
#footer,
.footer-copyright,
.marquee,
.div_spot,
.div_spott,
.bgN1,
.adrs,
.booking,
.city-wrapper,
.gold-select select {
    color: var(--ag-text) !important;
}

#footer .section *,
.css_bkdesk,
.css_bkdesk *,
.css_bkdesk1,
.css_bkdesk1 *,
.booking *,
.adrs * {
    color: var(--ag-text) !important;
}

#footer p,
#footer a,
#footer span,
#footer li,
.footer-copyright p {
    color: var(--ag-gold-2) !important;
}

input,
select,
textarea,
option,
button {
    color: var(--ag-text) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--ag-muted) !important;
}

.section,
.header-body,
#footer,
.headImg,
.naviRow,
.footer-copyright,
#footer .section {
    background: #ffffff !important;
}

#header {
    background: #ffffff !important;
    border-bottom: 1px solid var(--ag-gold-line);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

#header .header-top {
    color: var(--ag-text) !important;
    background: #ffffff !important;
}

/* Live Rates uses a compact reference-style masthead without world clocks. */
#header.live-rates-header .live-rates-clock-bar {
    display: none !important;
}

/* headImg/iconimage/ag-logo-lockup intentionally use the same generic rules
   as every other page here (no live-rates-header override) so the header
   logo renders at an identical size across the whole site. */

.naviRow {
    border-top: 1px solid rgba(212, 175, 55, 0.35);
    border-bottom: 1px solid rgba(212, 175, 55, 0.35);
}

/* ---------- Headings / accents ---------- */
#iconimage span span,
.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;
    box-sizing: border-box !important;
    text-align: center;
    width: 100%;
    max-width: none;
    letter-spacing: 0;
    padding: 9px 16px;
    margin: 0;
    background: #c99a24 !important;
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 22px !important;
    font-weight: 400;
    line-height: 1.25;
    white-space: normal !important;
    overflow-wrap: anywhere;
}

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

/* New header brand: AK monogram badge + "AK JEWELLERS" wordmark side by
   side, replacing the old single ASHOK KUMAR JEWELLERS wordmark. */
.ak-header-brand.ag-logo-lockup {
    flex-direction: row !important;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.ak-header-icon {
    display: block;
    height: 110px;
    width: auto;
    max-width: 122px;
    object-fit: contain;
    flex-shrink: 0;
}

.ak-header-wordmark {
    display: block;
    height: 65px;
    width: auto;
    max-width: 260px;
    object-fit: contain;
}

@media (max-width: 767px) {
    .ak-header-icon {
        height: 36px;
        max-width: 36px;
    }

    .ak-header-wordmark {
        height: 24px;
        max-width: 190px;
    }
}

.headImg {
    padding: 0 !important;
    height: 110px !important;
    min-height: 0 !important;
    overflow: hidden;
    box-sizing: border-box;
}

.headImg .container .row {
    min-height: 0 !important;
    height: 100%;
}

/* ---------- Nav row: compact + vertically centered ----------
   Desktop-only (min-width: 992px). The vendor theme switches to a
   completely different, JS-driven mobile layout below 992px — the
   collapse panel becomes position:absolute and nav links switch to
   display:block for stacking (see theme.css's own
   "@media (max-width: 991px)" block). Forcing display:flex/!important
   here without that guard fought the vendor's mobile rules and broke
   the responsive hamburger menu, so this stays scoped to desktop. */
@media (min-width: 992px) {
    .naviRow {
        padding: 0 !important;
    }

    .naviRow.header-row,
    .naviRow .header-column {
        display: flex !important;
        align-items: center !important;
    }

    /* Center every level of the menu chain explicitly (nav, list, each
       item, each link) instead of relying on the default flex "stretch" —
       that way every menu item's text sits on the same vertical center
       line no matter its own height/padding/icon. */
    #header .header-nav-main nav.collapse,
    #header .header-nav-main nav > ul,
    #header .header-nav-main nav > ul > li {
        display: flex !important;
        align-items: center !important;
    }

    #header .header-nav-main nav > ul > li > a {
        padding: 8px 14px !important;
        line-height: 1.2 !important;
        display: flex !important;
        align-items: center !important;
    }

    #header .text-right.d-none.d-lg-block {
        display: flex !important;
        align-items: center !important;
    }

    /* The plain "Login"/"LogOut" nav-menu link is the mobile fallback for
       the standalone gold LOGIN/LOGOUT button above — on desktop only the
       button should show. theme.css already hides #showlogin at this width,
       but with a plain ID selector; this pins it with higher specificity
       (and this file loads last) so nothing can leave both visible. */
    #header #mainNav #showlogin {
        display: none !important;
    }
}

/* LOGIN/LOGOUT button: the vendor ".btn-5" size class (14.77px/41.8px
   padding + a black border) was built for a tall header and no longer
   fits the compact ~48px nav row above — it nearly matched the row's
   whole height with almost no breathing room, and its black border
   didn't match the gold theme. Give it dedicated, compact sizing instead. */
/* IMPORTANT: no `display` here (not even non-!important) — #Lb3/#Lb4 and
   their anchors are exactly what js/AfterLogin.js toggles via jQuery
   .hide()/.show() at runtime. An !important display previously forced both
   the LOGIN and LOGOUT buttons to stay visible at once, which is why they
   showed together no matter the login state. Alignment comes from the
   parent `.text-right.d-none.d-lg-block` flex container above instead. */
#header #openaccountbtn a.btn,
#header #Lb4 a.btn {
    padding: 8px 20px !important;
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
    border: 1px solid var(--ag-gold-line) !important;
    background-image: none !important;
    background: #ffffff !important;
}

#header #openaccountbtn a.btn:hover,
#header #Lb4 a.btn:hover {
    background: var(--ag-gold-line) !important;
}

/* Hamburger is display:none by default (theme.css) and only switched to
   flex inside theme.css's own "max-width: 991px" rule — stay inside that
   same breakpoint so this never forces it to appear on desktop. */
@media (max-width: 991px) {
    #header .header-btn-collapse-nav {
        align-items: center !important;
        justify-content: center !important;
    }
}

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

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

.ag-logo-mark {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-weight: 900;
    font-size: 40px;
    letter-spacing: -2px;
    line-height: 1;
    background: none;
    color: #1a1a1a;
}

/* Text-only wordmark (matches theme.jpeg) — replaces the old image logo
   everywhere it was used, on both the ".ag-logo-lockup" pages and the
   www/ trading pages' plain ".brand-lockup" markup. */
.brand-title,
#iconimage .brand-title {
    display: block;
    width: 100%;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 2.35rem !important;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 1.2;
    text-align: center;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #bc8824 !important;
    color: #bc8824 !important;
}

@media screen and (max-width: 767px) {
    .brand-title,
    #iconimage .brand-title {
        font-size: clamp(1.08rem, 5vw, 1.45rem) !important;
        letter-spacing: 0;
    }
}

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

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

#header .header-nav-main nav > ul > li.active > a {
    background: rgba(212, 175, 55, 0.15) !important;
    border-radius: 8px;
}

#header .header-nav-main nav > ul > li.dropdown .dropdown-menu {
    background: #ffffff !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: #232323 !important;
}

#header .header-nav-main nav > ul > li.dropdown .dropdown-menu li:hover,
#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 {
    background: var(--ag-gold-line) !important;
    color: #1a1200 !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 dark above — leaving text unreadable. 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: #ffffff !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: #232323 !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-3) !important;
}

/* Mobile hamburger toggle: custom.css still paints this dark-navy with
   near-white bars, a leftover from the old dark theme — on white it should
   read as a light button with dark bars, not a stray dark square. */
#header .header-btn-collapse-nav {
    background: #ffffff !important;
    border: 1px solid var(--ag-gold-line) !important;
}

#header .header-btn-collapse-nav .hamburguer span,
#header .header-btn-collapse-nav .close span {
    background: #232323 !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: #d4af37 !important;
    color: #1a1200 !important;
    border: 1px solid #f2d375 !important;
    border-radius: 9px !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.42), 0 5px 14px rgba(0, 0, 0, 0.18);
}

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

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

/* ---------- Footer ---------- */
#footer,
#footer p,
#footer a,
#footer .icon-box-info-title h3 {
    color: var(--ag-text);
}

#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-3);
}

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

/* The old bitmap logo was retained for sticky mode in legacy markup. */
.scroll-logo {
    display: none !important;
}

/* Legacy live-rate widgets: remove the old dark image boxes and navy cards. */
.swiper-pagination1.swiper-pagination-clickable .swiper-pagination-bullet {
    color: var(--ag-text) !important;
    background: #ffffff !important;
    border-color: var(--ag-gold-line) !important;
    box-shadow: none !important;
}

.swiper-pagination1.swiper-pagination-clickable .swiper-pagination-bullet-active {
    color: #111111 !important;
    background: #fff4cf !important;
    border-color: var(--ag-gold-line) !important;
}

table.goldd1,
table.goldd2,
table.goldd3,
table.res_mob_font_width,
table.res_mob_font_width_coins {
    color: var(--ag-text) !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border-color: var(--ag-gold-line) !important;
    box-shadow: none !important;
}

table.goldd1 tr td,
table.goldd2 tr td,
table.goldd3 tr td,
table.res_mob_font_width td,
table.res_mob_font_width_coins td,
table.res_mob_font_width td:nth-child(2),
table.res_mob_font_width td:nth-child(3),
table.res_mob_font_width_coins td:nth-child(2),
table.res_mob_font_width_coins td:nth-child(3) {
    color: #111111 !important;
    background: #ffffff !important;
    border-color: rgba(212, 175, 55, 0.45) !important;
}

.headertable1,
.headertable1 th {
    color: #111111 !important;
    background: var(--ag-foil) !important;
}

table.res_mob_font_width tr td small,
table.res_mob_font_width tr td .newFont,
table.res_mob_font_width_coins tr td small,
table.res_mob_font_width_coins tr td .newFont,
span.bloc_GS {
    color: var(--ag-muted) !important;
}

.marquee {
    color: #ffffff !important;
    background: #c99a24 !important;
    border-color: var(--ag-gold-line) !important;
}

.marquee p,
.marquee span {
    color: #ffffff !important;
}

.main h1.headingTop {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.live-rates-marquee {
    box-sizing: border-box;
    width: 100%;
    min-height: 42px;
    margin: 0 !important;
    padding: 9px 16px !important;
    overflow: hidden;
    color: #ffffff !important;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    white-space: nowrap;
    background: #c99a24 !important;
    border: 0 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}

.live-rates-marquee,
.live-rates-marquee p,
.live-rates-marquee span,
.live-rates-marquee div {
    color: #ffffff !important;
}

.live-rates-functional {
    margin: 0 !important;
    padding: 10px 0 24px !important;
    background: #ffffff !important;
    border: 0 !important;
}

.live-rates-container {
    max-width: 970px;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.live-rates-functional .div-spott {
    margin: auto;
    padding: 0;
    text-align: center;
}

.live-rates-stack {
    position: relative;
    width: 100%;
}

.live-rates-stack.is-loading {
    min-height: 640px;
}

.live-rates-stack.is-loading .live-rate-table-block {
    position: absolute;
    visibility: hidden;
    pointer-events: none;
}

.live-rates-stack.is-loading::after {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ag-gold-2);
    font-size: 18px;
    font-weight: 700;
    content: "Loading live rates...";
}

.live-rates-stack.is-ready {
    min-height: 0;
}

.live-rates-functional .Trending_Table_Child1 {
    width: 100% !important;
    table-layout: fixed !important;
}

.live-rate-table-block {
    width: 100%;
    margin: 0 0 8px;
    padding: 0;
}

.live-rate-table-block:last-child {
    margin-bottom: 0;
}

.live-rate-table-block > table[id^="gvData_top3"] {
    display: none !important;
}

.live-rate-table-title {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.live-rate-table-block table.goldd1,
.live-rate-table-block table.goldd2,
.live-rate-table-block table.goldd3 {
    border-radius: 0 !important;
}

/* The gold-foil BACKGROUND fill is for the Desc/Bid/ASK/H|L header bars
   only (.headertable1 / .ak-quote-table thead) — table.heading (the
   Description/Buy/Sell row) deliberately excluded: it stays white with
   its own gradient BORDER instead (see the ":first-child table.heading"
   rule below), matching theme.jpeg. */
.live-rates-functional .headertable1,
.live-rates-functional .ak-quote-table thead tr {
    color: #111111 !important;
    background: var(--ag-foil) !important;
    border: 0 !important;
}

.live-rates-functional table.heading,
.live-rates-functional table.res_mob_font_width,
.live-rates-functional table.res_mob_font_width_coins,
.live-rates-functional .headertable1,
.live-rates-functional .ak-quote-table {
    width: 100% !important;
    table-layout: fixed !important;
}

.live-rates-functional table.heading td,
.live-rates-functional .headertable1 th {
    color: #111111 !important;
    background: transparent !important;
    border: 0 !important;
}

.live-rates-functional .headertable1 span {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

.live-rates-functional table.heading span {
    font-size: 18px !important;
    font-weight: 700 !important;
    background: linear-gradient(90deg, #000000, #000000, #000000) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

.live-rate-table-block:first-child table.heading td {
    background: #ffffff !important;
    border: 0 !important;
}

/* theme.jpeg: the Description/Buy/Sell header row sits inside a thin
   gold-foil gradient box (top + bottom), same gradient as the row
   dividers below it — not a flat single-color line. */
.live-rate-table-block:first-child table.heading {
    background: #ffffff !important;
    border-style: solid !important;
    border-width: 2px 0 !important;
    border-image: var(--ag-foil) 1 !important;
}

/* theme.jpeg's row divider is a thin gold-foil gradient bar (bright center,
   dark ends), not a flat translucent line — reuse the same --ag-foil
   gradient the column headers use, via border-image on the bottom edge. */
.live-rates-functional table.res_mob_font_width,
.live-rates-functional table.res_mob_font_width_coins {
    margin: 0 !important;
    border-width: 0 0 2px !important;
    border-style: solid !important;
    border-color: transparent !important;
    border-image: var(--ag-foil) 1 !important;
    border-radius: 0 !important;
}

.live-rates-functional table.heading td {
    height: 34px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-transform: none !important;
}

.live-rates-functional table.res_mob_font_width td,
.live-rates-functional table.res_mob_font_width_coins td {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

/* theme.jpeg shows a clear size jump between the description label and the
   bold rate numerals, not the near-equal 18px/20px this used to be. */
.live-rates-functional table.res_mob_font_width td:first-child,
.live-rates-functional table.res_mob_font_width_coins td:first-child,
.live-rates-functional .buy_sell_label {
    padding-left: 12px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}

.live-rates-functional table.res_mob_font_width td:nth-child(2),
.live-rates-functional table.res_mob_font_width td:nth-child(3),
.live-rates-functional table.res_mob_font_width_coins td:nth-child(2),
.live-rates-functional table.res_mob_font_width_coins td:nth-child(3),
.live-rates-functional .top55span {
    color: #111111 !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* Reserve one identical value box for normal, rising and falling states.
   This removes the legacy inline-padding conflict that changed row height. */
.live-rates-functional table.res_mob_font_width .top55span,
.live-rates-functional table.res_mob_font_width_coins .top55span {
    display: inline-flex !important;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    height: 38px;
    min-width: 112px;
    padding: 0 12px !important;
    white-space: nowrap;
}

/* Preserve the feed's change comparison: higher = green pill, lower = red. */
.live-rates-functional table.res_mob_font_width .top55span[style*="background-color:green"],
.live-rates-functional table.res_mob_font_width .top55span[style*="background-color: green"],
.live-rates-functional table.res_mob_font_width_coins .top55span[style*="background-color:green"],
.live-rates-functional table.res_mob_font_width_coins .top55span[style*="background-color: green"] {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: #198754 !important;
    border-radius: 999px !important;
}

.live-rates-functional table.res_mob_font_width .top55span[style*="background-color:red"],
.live-rates-functional table.res_mob_font_width .top55span[style*="background-color: red"],
.live-rates-functional table.res_mob_font_width_coins .top55span[style*="background-color:red"],
.live-rates-functional table.res_mob_font_width_coins .top55span[style*="background-color: red"] {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: #c62828 !important;
    border-radius: 999px !important;
}

.live-rates-functional .top5span,
.live-rates-functional .sell {
    color: #111111 !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* The reference table has one clean line per rate; legacy time/low labels
   were white-on-white but still occupied vertical space. */
.live-rates-functional .buy_sell_label2,
.live-rates-functional table.res_mob_font_width .sell,
.live-rates-functional table.res_mob_font_width_coins .sell {
    display: none !important;
}

.live-rates-functional .top66span,
.live-rates-functional .bloc_GS,
.live-rates-functional .bloc_GS1 {
    color: #333333 !important;
}

.live-rates-functional .ak-quote-table {
    width: 100% !important;
    margin: 0 !important;
    color: #111111 !important;
    table-layout: fixed;
    /* border-image never paints on table cells when the table uses
       border-collapse: collapse — that's why the gradient th/td borders
       below weren't showing. border-collapse: separate + 0 spacing keeps
       cells visually flush while letting border-image actually render. */
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 0 !important;
    background: #ffffff !important;
}

.live-rates-functional .ak-quote-table th {
    height: 42px;
    padding: 10px 7px !important;
    color: #111111 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.2;
    text-align: center;
    background: transparent !important;
    border-style: solid !important;
    border-width: 1px 0 !important;
    border-color: transparent !important;
    border-image: var(--ag-foil) 1 !important;
}

.live-rates-functional .ak-quote-table th:first-child {
    width: 34%;
    padding-left: 23px !important;
    text-align: left;
}

.live-rates-functional .ak-quote-table th:nth-child(2),
.live-rates-functional .ak-quote-table th:nth-child(3) {
    width: 22%;
}

.live-rates-functional .ak-quote-table th:last-child {
    width: 22%;
}

/* Rate rows: rendered as one table.res_mob_font_width per row (same
   structure/classes as the GOLD 999-style rows), stacked in a plain div
   sibling right after the <table> that holds the column header above. */
.live-rates-functional .ak-quote-rows {
    width: 100%;
}

.live-rates-functional table.res_mob_font_width.ak-quote-row td.ak-hl {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #333333 !important;
    white-space: nowrap;
}

@media screen and (max-width: 767px) {
    .live-rates-marquee {
        min-height: 38px;
        padding: 7px 10px !important;
        font-size: 15px;
    }

    .live-rates-functional {
        padding-top: 8px !important;
    }
}

@media screen and (min-width: 768px) {
    .live-rates-functional {
        padding-top: 5px !important;
        padding-bottom: 10px !important;
    }

    .live-rate-table-block {
        margin-bottom: 4px;
    }

    .live-rates-functional table.heading td {
        height: 34px !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        font-size: 18px !important;
    }

    /* height:auto + this padding is what actually controls row height now —
       a later "tr/td { height:46px !important }" pair used to override this
       right back to a fixed height, silently cancelling any padding change
       here. Removed rather than left conflicting. */
    .live-rates-functional table.res_mob_font_width td,
    .live-rates-functional table.res_mob_font_width_coins td {
        height: auto !important;
        min-height: 0 !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    .live-rates-functional table.res_mob_font_width td:first-child,
    .live-rates-functional table.res_mob_font_width_coins td:first-child,
    .live-rates-functional .buy_sell_label {
        font-size: 18px !important;
    }

    .live-rates-functional table.res_mob_font_width td:nth-child(2),
    .live-rates-functional table.res_mob_font_width td:nth-child(3),
    .live-rates-functional table.res_mob_font_width_coins td:nth-child(2),
    .live-rates-functional table.res_mob_font_width_coins td:nth-child(3),
    .live-rates-functional .top55span {
        font-size: 20px !important;
    }

    .live-rates-functional .ak-quote-table th {
        height: 34px;
        padding: 7px 7px !important;
        font-size: 18px !important;
    }

    .live-rates-functional .ak-quote-table td {
        height: 50px !important;
        padding: 10px 6px !important;
        font-size: 22px !important;
    }

    .live-rates-functional .ak-quote-table td:first-child {
        font-size: 14px !important;
    }

    .live-rates-functional .ak-quote-table td.ak-hl {
        font-size: 10px !important;
    }
}

/* ---------- Reference-theme content surfaces ---------- */
.main,
[role="main"],
.ui-page,
.ui-mobile-viewport {
    background: #ffffff !important;
    color: var(--ag-text) !important;
}

.section:not(#footer .section) {
    color: var(--ag-text);
}

.section > h1:first-child:not(.headingTop),
.section > h2:first-child,
.main h1,
.main h2,
.main h3,
.main h4,
.main h5,
.main h6 {
    color: var(--ag-gold-2) !important;
}

.section > h1:first-child:not(.headingTop) {
    box-sizing: border-box !important;
    width: calc(100% - 30px);
    max-width: 1180px;
    margin: 12px auto 18px !important;
    padding: 14px 20px !important;
    text-align: center;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 25px !important;
    letter-spacing: 1px;
    color: #ffffff !important;
    background: #c99a24 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    border: none;
    border-radius: 6px;
}

.section p,
.section p span,
.section li,
.section label,
.section strong,
.section address,
.section .lead,
.section .text-dark,
.section .text-color-dark {
    color: var(--ag-text) !important;
}

.section .text-muted,
.section small {
    color: var(--ag-muted) !important;
}

/* Neutralize stray light-on-dark inline text colors retained in legacy pages. */
.main p[style*="color"],
.main span[style*="color"],
.main li[style*="color"],
.main label[style*="color"],
.main strong[style*="color"],
.section p[style*="color"],
.section span[style*="color"],
.section li[style*="color"],
.section label[style*="color"],
.section strong[style*="color"] {
    color: var(--ag-text) !important;
    -webkit-text-fill-color: var(--ag-text) !important;
}

.main h1,
.main h2,
.main h3,
.main h4,
.main h5,
.main h6,
.section h1,
.section h2,
.section h3,
.section h4,
.section h5,
.section h6 {
    color: var(--ag-gold-2) !important;
    -webkit-text-fill-color: var(--ag-gold-2) !important;
}

.card,
.featured-box,
.iconbox,
.toggle-content,
.accordion-body,
.contact-form,
.room-suite-info,
.ui-content .ui-field-contain {
    color: var(--ag-text) !important;
    background: #ffffff !important;
    border-color: var(--ag-gold-line) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08) !important;
}

.card,
.featured-box,
.iconbox,
.contact-form,
.room-suite-info {
    border: 1px solid var(--ag-gold-line) !important;
    border-radius: 16px !important;
}

/* Moved to a page-scoped <style> block in www/ModiyDeleteOrders.htm only —
   not shared site-wide anymore. */

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--ag-muted) !important;
    opacity: 1;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--ag-gold-2) !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.22) !important;
    outline: none !important;
}

/* Disabled-field opacity override moved to a page-scoped <style> block in
   www/ModiyDeleteOrders.htm only — not shared site-wide anymore. */

/* Custom checkbox / radio accent (skins/default.css hardcodes blue for the
   checked state) — pin the accent color so checked inputs read gold, not blue. */
input[type="radio"],
input[type="checkbox"] {
    accent-color: var(--ag-gold-2);
}

.btn-primary,
button:not(.navbar-toggler):not(.header-btn-collapse-nav):not(.tab),
input[type="button"],
input[type="submit"],
.ui-btn:not(.tab) {
    color: #1a1200 !important;
    text-shadow: none !important;
    background: #d4af37 !important;
    border: 1px solid #f1d070 !important;
    border-radius: 9px !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.42), 0 5px 14px rgba(0, 0, 0, 0.18) !important;
}

.btn-primary:hover,
button:not(.navbar-toggler):not(.header-btn-collapse-nav):not(.tab):hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.ui-btn:not(.tab):hover {
    color: #0b0800 !important;
    background: #c99a24 !important;
}

table,
.table {
    color: var(--ag-text) !important;
    background: #ffffff !important;
    border-color: var(--ag-gold-line) !important;
}

table th,
.table th {
    color: #111111 !important;
    background: var(--ag-foil) !important;
    border-color: var(--ag-gold-line) !important;
}

table td,
.table td,
table.bnkdetails td:nth-child(odd),
table.bnkdetails td:nth-child(even),
.bnkdetails tbody tr td:nth-child(2) {
    color: var(--ag-text) !important;
    background: #ffffff !important;
    border-color: rgba(212, 175, 55, 0.4) !important;
}

.room-suite-info ul li label,
.room-suite-info ul li strong {
    color: var(--ag-text) !important;
}

hr {
    border-color: rgba(212, 175, 55, 0.4) !important;
}

@media screen and (max-width: 767px) {
    .headingTop,
    .section > h1:first-child:not(.headingTop) {
        width: 100%;
        padding: 8px 10px !important;
        border-radius: 0;
        font-size: 18px !important;
        line-height: 1.3;
    }

    .card,
    .featured-box,
    .iconbox,
    .contact-form,
    .room-suite-info {
        border-radius: 12px !important;
    }

    .headImg {
        padding: 0 !important;
        height: 50px !important;
        min-height: 0 !important;
        overflow: hidden;
        box-sizing: border-box;
    }

    .headImg .container .row {
        min-height: 0 !important;
        height: 100%;
    }

}

/* ---------- 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;
}

/* theme.jpeg exact logo — image is now cropped tight to the wordmark
   (no dead whitespace), so it can render larger/clearer within the same
   header slot than the old padded source. */
.theme-reference-logo {
  display:block; width:min(100%,480px); max-height:44px; margin:0 auto; object-fit:contain;
}
@media (max-width:767px){.theme-reference-logo{width:min(100%,400px);max-height:40px;}}

/* ---------- Live Rates: services below the tables ---------- */
.ak-post-rates {
    max-width: 970px;
    padding-top: 24px;
    padding-bottom: 34px;
}

.ak-post-rates *,
.ak-post-rates *::before,
.ak-post-rates *::after {
    box-sizing: border-box;
}

.ak-market-services {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.ak-service-card,
.ak-application-card,
.ak-trust-banner {
    overflow: hidden;
    border: 1px solid rgba(169, 122, 31, 0.55);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(67, 47, 7, 0.10);
}

.ak-service-card {
    min-height: 100%;
}

.ak-account-card {
    position: relative;
    padding: 30px;
    background:
        radial-gradient(circle at 100% 0, rgba(255, 239, 183, 0.9), transparent 38%),
        linear-gradient(145deg, #ffffff 0%, #fff9e8 100%);
}

.ak-account-card::after {
    position: absolute;
    right: 20px;
    bottom: -48px;
    color: rgba(169, 122, 31, 0.08);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 170px;
    font-weight: 700;
    line-height: 1;
    content: "₹";
    pointer-events: none;
}

.ak-post-rates .ak-section-kicker {
    display: block;
    color: var(--ag-gold-2) !important;
    -webkit-text-fill-color: var(--ag-gold-2) !important;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.6px;
    line-height: 1.3;
    text-transform: uppercase;
}

.ak-post-rates h2 {
    margin: 7px 0 0;
    color: #30230a !important;
    -webkit-text-fill-color: #30230a !important;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.22;
}

.ak-account-card > p {
    max-width: 410px;
    margin: 12px 0 0;
    color: var(--ag-muted) !important;
    font-size: 13px;
    line-height: 1.7;
}

.ak-account-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 15px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.ak-account-benefits li {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #3e3522 !important;
    font-size: 11px;
    font-weight: 700;
}

.ak-account-benefits li::before {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: #ffffff;
    background: var(--ag-gold-2);
    font-size: 11px;
    content: "✓";
}

.ak-post-rates .ak-theme-cta {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin-top: 22px;
    padding: 0 22px;
    border: 1px solid #c89a25;
    border-radius: 8px;
    color: #1a1200 !important;
    background: var(--ag-foil);
    box-shadow: 0 5px 14px rgba(67, 47, 7, 0.18);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-decoration: none !important;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.ak-post-rates .ak-theme-cta:hover {
    color: #0b0800 !important;
    filter: brightness(1.04);
    transform: translateY(-2px);
}

.ak-news-card {
    background: linear-gradient(145deg, #ffffff, #fff9e9);
}

.ak-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px 18px;
    border-bottom: 1px solid rgba(169, 122, 31, 0.28);
}

.ak-card-heading h2 {
    font-size: 23px;
}

.ak-post-rates .ak-live-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #426c30 !important;
    -webkit-text-fill-color: #426c30 !important;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
}

.ak-live-status i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2a9a46;
    box-shadow: 0 0 0 4px rgba(42, 154, 70, 0.12);
}

.ak-news-list {
    padding: 4px 22px;
}

.ak-news-item {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 12px;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid rgba(169, 122, 31, 0.2);
    color: var(--ag-text) !important;
    text-decoration: none !important;
}

.ak-news-item:last-child {
    border-bottom: 0;
}

.ak-post-rates .ak-news-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(169, 122, 31, 0.48);
    border-radius: 50%;
    color: var(--ag-gold-3) !important;
    background: #fff7da;
}

.ak-news-item strong,
.ak-news-item small {
    display: block;
}

.ak-news-item strong {
    color: #30230a !important;
    font-size: 13px;
    line-height: 1.4;
}

.ak-news-item small {
    margin-top: 2px;
    color: var(--ag-muted) !important;
    font-size: 10px;
    line-height: 1.45;
}

.ak-news-item:hover strong {
    color: var(--ag-gold-2) !important;
}

.ak-application-card {
    display: grid;
    grid-template-columns: minmax(250px, 0.9fr) minmax(0, 1.4fr);
    margin-top: 20px;
}

.ak-application-intro {
    display: flex;
    align-items: center;
    gap: 17px;
    padding: 28px;
    background:
        radial-gradient(circle at 10% 0, rgba(255, 245, 200, 0.95), transparent 42%),
        linear-gradient(145deg, #fffdf7, #f8e9b7);
}

.ak-post-rates .ak-device-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border: 1px solid rgba(169, 122, 31, 0.55);
    border-radius: 17px;
    color: var(--ag-gold-3) !important;
    background: rgba(255, 255, 255, 0.72);
    font-size: 30px;
}

.ak-application-intro h2 {
    font-size: 25px;
}

.ak-application-intro p {
    margin: 8px 0 0;
    color: #61563d !important;
    font-size: 11px;
    line-height: 1.6;
}

.ak-application-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: center;
    padding: 24px 26px;
}

.ak-app-detail {
    min-width: 0;
    padding-left: 16px;
    border-left: 1px solid rgba(169, 122, 31, 0.25);
}

.ak-app-detail:first-child {
    padding-left: 0;
    border-left: 0;
}

.ak-post-rates .ak-app-detail h3 {
    margin: 0 0 5px;
    color: var(--ag-gold-3) !important;
    -webkit-text-fill-color: var(--ag-gold-3) !important;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.55px;
    line-height: 1.35;
    text-transform: uppercase;
}

.ak-app-detail p,
.ak-app-detail a {
    margin: 0;
    color: #4f4634 !important;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.55;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.ak-application-details .ak-theme-cta {
    grid-column: 1 / -1;
    width: max-content;
    margin-top: 0;
}

.ak-trust-banner {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 20px;
    padding: 24px 28px;
    background:
        radial-gradient(circle at 82% 0, rgba(255, 236, 170, 0.9), transparent 34%),
        linear-gradient(125deg, #ffffff, #fff8e1);
}

.ak-trust-mark {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    padding-right: 20px;
    border-right: 1px solid rgba(169, 122, 31, 0.35);
}

.ak-trust-mark img {
    display: block;
    width: 58px;
    height: 58px;
    object-fit: contain;
}

.ak-trust-copy {
    flex: 1 1 auto;
}

.ak-trust-copy h2 {
    font-size: 25px;
}

.ak-trust-copy p {
    margin: 5px 0 0;
    color: var(--ag-muted) !important;
    font-size: 12px;
}

.ak-trust-banner .ak-theme-cta {
    flex: 0 0 auto;
    margin-top: 0;
}

@media screen and (max-width: 767px) {
    .ak-post-rates {
        padding: 16px 12px 26px;
    }

    .ak-market-services,
    .ak-application-card {
        grid-template-columns: 1fr;
    }

    .ak-account-card {
        padding: 24px 20px;
    }

    .ak-post-rates h2 {
        font-size: 23px;
    }

    .ak-card-heading {
        padding: 20px;
    }

    .ak-news-list {
        padding-right: 18px;
        padding-left: 18px;
    }

    .ak-application-intro {
        padding: 23px 20px;
    }

    .ak-post-rates .ak-device-icon {
        width: 55px;
        height: 55px;
        border-radius: 14px;
        font-size: 25px;
    }

    .ak-application-details {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 8px 20px 22px;
    }

    .ak-app-detail,
    .ak-app-detail:first-child {
        padding: 13px 0;
        border-top: 1px solid rgba(169, 122, 31, 0.2);
        border-left: 0;
    }

    .ak-app-detail:first-child {
        border-top: 0;
    }

    .ak-application-details .ak-theme-cta {
        margin-top: 7px;
    }

    .ak-trust-banner {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 15px;
        padding: 22px 20px;
    }

    .ak-trust-mark {
        width: 57px;
        height: 57px;
        padding-right: 14px;
    }

    .ak-trust-mark img {
        width: 46px;
        height: 46px;
    }

    .ak-trust-copy {
        flex: 1 1 calc(100% - 76px);
    }

    .ak-trust-copy h2 {
        font-size: 21px;
    }

    .ak-trust-banner .ak-theme-cta {
        margin-left: 72px;
    }
}