/* ==========================================================================
   SB BULLION — shared purple, cream and gold theme
   Loaded after the legacy site styles on the www trading pages.
   Presentation uses SB naming; BAA backend configuration remains separate.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;900&display=swap');

:root {
    --gold-1: #f6de92;
    --gold-2: #e7bf5b;
    --gold-3: #d9b34a;
    --gold-4: #a9822d;
    --sb-gold-light: var(--gold-1);
    --sb-gold-mid: var(--gold-2);
    --sb-gold: var(--gold-3);
    --sb-gold-deep: var(--gold-4);
    --sb-maroon: #2e0e4d;
    --sb-maroon-mid: #26103f;
    --sb-maroon-dark: #170a28;
    --sb-cream: #fffdf8;
    --sb-cream-deep: #e6d8b8;
    --sb-ink: #2e0e4d;
    --sb-red: #d3272c;
    --sb-green: #1c7a37;
}

html,
body,
body.ui-mobile-viewport {
    min-height: 100%;
    color: var(--sb-ink);
    background: linear-gradient(180deg, var(--sb-maroon-mid), var(--sb-maroon-dark)) !important;
    font-family: "Montserrat", "Open Sans", Arial, sans-serif;
}

.body,
.main {
    background: transparent !important;
}

/* Header */
#header {
    border-bottom: 2px solid var(--sb-gold-deep);
    box-shadow: 0 7px 24px rgba(0, 0, 0, .34);
}

#header .header-top {
    display: none !important;
}

#header .header-body,
#header .header-container,
#header .headImg {
    background: linear-gradient(160deg, #4b1b7a, var(--sb-maroon-dark)) !important;
}

#header .headImg {
    padding: 10px 0 !important;
}

#header .headImg .container .row {
    min-height: 112px !important;
}

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

#header #iconimage .brand-lockup,
#header #iconimage .brand-lockup-main {
    width: 100%;
    text-align: center;
}

#header #iconimage .LogoImgWidth1 {
    width: auto !important;
    max-width: min(100%, 530px) !important;
    max-height: 102px !important;
    border-radius: 4px;
    object-fit: contain;
}

#header .naviRow {
    min-height: 56px;
    background: linear-gradient(180deg, rgba(58, 26, 99, .96), rgba(23, 10, 40, .98)) !important;
    border-top: 1px solid rgba(217, 179, 74, .5);
}

#header .header-nav-main nav,
#header .header-nav-main nav > ul,
#header .header-nav-main nav ul#mainNav,
#header .header-nav-main nav ul#mainNav > li,
#header .header-nav-main nav ul#mainNav > li > a {
    background: transparent !important;
    background-image: none !important;
}

#header .header-nav-main nav > ul > li > a,
#header .header-nav-main nav ul#mainNav > li > a,
#header .header-nav-main nav ul#mainNav > li > a.dropdown-toggle {
    color: #fff4d1 !important;
    text-shadow: none !important;
    font-weight: 600 !important;
    letter-spacing: .35px;
}

#header .header-nav-main nav ul#mainNav > li > a:hover,
#header .header-nav-main nav ul#mainNav > li.active > a,
#header .header-nav-main nav ul#mainNav > li.open > a {
    color: var(--sb-gold) !important;
    box-shadow: inset 0 -3px 0 var(--sb-gold);
}

#header .header-nav-main nav > ul > li.dropdown .dropdown-menu {
    background: linear-gradient(160deg, #4b1b7a, #1c0733) !important;
    border: 1px solid var(--sb-gold-deep) !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: 0 12px 25px rgba(0, 0, 0, .38) !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 {
    color: #fff4d1 !important;
    background: transparent !important;
    text-shadow: none !important;
}

#header .header-nav-main nav > ul > li.dropdown .dropdown-menu li:hover > a:not(.btn),
#header .header-nav-main nav > ul > li.dropdown .dropdown-menu .dropdown-item:hover {
    color: var(--sb-gold) !important;
    background: rgba(217, 179, 74, .08) !important;
}

#header .header-btn-collapse-nav {
    background: linear-gradient(160deg, #4b1b7a, #22083a) !important;
    border: 1px solid var(--sb-gold-deep) !important;
    border-radius: 5px !important;
}

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

#header .btn-5,
#header #openaccountbtn a,
#header #Lb4 a {
    color: var(--sb-ink) !important;
    background: linear-gradient(180deg, #fae7a5, #d8a936 55%, #ac7618) !important;
    border: 1px solid #f1d47b !important;
    border-radius: 5px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25) !important;
}

/* Page heading and content */
.headingTop {
    display: block;
    width: min(1170px, calc(100% - 32px));
    margin: 24px auto 10px !important;
    padding: 15px 18px;
    color: var(--sb-gold-light) !important;
    background: linear-gradient(160deg, #4b1b7a, #1c0733) !important;
    border: 2px solid var(--sb-gold-deep);
    border-radius: 9px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .28);
    text-align: center;
    text-transform: uppercase;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-shadow: none !important;
}

.main > .section,
.main section.section {
    background: transparent !important;
}

.ui-mobile [data-role="page"],
.ui-mobile [data-role="dialog"],
.ui-page,
.ui-page-theme-a,
.ui-page-theme-a .ui-panel-wrapper,
.ui-overlay-a {
    background: transparent !important;
    text-shadow: none !important;
}

.ui-content {
    color: var(--sb-ink) !important;
    background: linear-gradient(145deg, var(--sb-cream), var(--sb-cream-deep)) !important;
    border: 2px solid var(--sb-gold-deep) !important;
    border-radius: 12px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .32), inset 0 0 0 1px rgba(255, 255, 255, .65) !important;
    padding: 20px !important;
}

.ui-content table,
.ui-content td,
.ui-content label,
.ui-content span:not(.ui-icon) {
    color: var(--sb-ink);
    text-shadow: none !important;
}

#tblHeader {
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden;
    color: var(--sb-gold-light) !important;
    background: linear-gradient(160deg, #4b1b7a, #1c0733) !important;
    border: 2px solid var(--sb-gold-deep) !important;
    border-radius: 10px 10px 0 0 !important;
}

#tblHeader th {
    color: var(--sb-gold-light) !important;
    text-shadow: none !important;
}

#ui-header + .ui-content {
    border-top: 0 !important;
    border-radius: 0 0 10px 10px !important;
}

#gvData {
    color: var(--sb-ink) !important;
}

#gvData tbody:empty::after {
    content: "No records to display";
    display: block;
    padding: 24px 12px;
    color: #8a6a3f;
    text-align: center;
    font-weight: 600;
}

/* Login */
#tblGenerateOTP,
#tblLoginViaOTP,
#tblLogoff {
    border-collapse: separate;
    border-spacing: 0 12px;
}

#tblGenerateOTP h3 {
    margin: -20px -20px 5px !important;
    padding: 16px !important;
    color: var(--sb-gold-light) !important;
    background: linear-gradient(160deg, #4b1b7a, #1c0733) !important;
    border-bottom: 2px solid var(--sb-gold-deep);
    border-radius: 9px 9px 0 0;
    letter-spacing: 1px;
}

#tblGenerateOTP input[type="text"],
#tblGenerateOTP input[type="number"],
#tblLoginViaOTP input[type="text"],
#tblLoginViaOTP input[type="number"],
#tblLogoff input[type="text"],
#tblLogoff input[type="number"],
.tablestyle input[type="text"],
.tablestyle input[type="number"],
.trade-card #pendingPriceText {
    width: 100% !important;
    min-height: 48px !important;
    padding: 10px 12px !important;
    color: var(--sb-ink) !important;
    background: #fffdf5 !important;
    border: 1px solid var(--sb-gold-deep) !important;
    border-radius: 7px !important;
    box-shadow: inset 0 1px 4px rgba(46, 14, 77, .12) !important;
    text-shadow: none !important;
}

#tblGenerateOTP input[type="button"],
#tblLoginViaOTP input[type="button"],
#tblLogoff input[type="button"] {
    width: 100% !important;
    min-height: 48px !important;
    color: var(--sb-ink) !important;
    background: linear-gradient(180deg, #fae7a5, #d8a936 55%, #ac7618) !important;
    border: 1px solid #9b6816 !important;
    border-radius: 7px !important;
    box-shadow: 0 5px 12px rgba(46, 14, 77, .2) !important;
    font-weight: 800 !important;
    text-transform: uppercase;
}

/* Buy / Sell cards */
.ui-content.trade-card {
    color: var(--sb-ink) !important;
    background: linear-gradient(145deg, var(--sb-cream), var(--sb-cream-deep)) !important;
    border: 2px solid var(--sb-gold-deep) !important;
    border-radius: 12px !important;
}

.trade-card #ScripCode,
.trade-card table td,
.trade-card label,
.trade-card .ui-field-contain,
.trade-card [data-role="fieldcontain"] {
    color: var(--sb-ink) !important;
}

.trade-card .trade-side-label {
    color: #8a6a1e !important;
}

.trade-card .trade-price-value {
    color: var(--sb-maroon) !important;
}

.trade-card .ui-controlgroup-controls .ui-radio .ui-btn,
.trade-card .ui-controlgroup-controls .ui-radio .ui-btn.ui-radio-off {
    color: var(--sb-gold-light) !important;
    background: linear-gradient(160deg, #4b1b7a, #1c0733) !important;
    border-color: var(--sb-gold-deep) !important;
}

.trade-card .ui-controlgroup-controls .ui-radio .ui-btn.ui-radio-on {
    color: var(--sb-ink) !important;
    background: linear-gradient(180deg, #fae7a5, #d8a936) !important;
}

.trade-card .trade-action-btn.buy-btn,
#modify {
    color: var(--sb-ink) !important;
    background: linear-gradient(180deg, #fae7a5, #d8a936 55%, #ac7618) !important;
    border-color: #9b6816 !important;
    text-shadow: none !important;
}

.trade-card .trade-action-btn.sell-btn,
#cancel {
    color: #fff !important;
    background: linear-gradient(180deg, #b83b41, #7d171c) !important;
    border-color: #641015 !important;
    text-shadow: none !important;
}

.trade-card select,
.trade-card .ui-select .ui-btn,
.trade-card #select-native-marketorder-button,
.trade-card #select-native-pendingorder-button,
.trade-card #select-native-marketorder-button *,
.trade-card #select-native-pendingorder-button * {
    color: var(--sb-ink) !important;
    background: #fffdf5 !important;
    border-color: var(--sb-gold-deep) !important;
    text-shadow: none !important;
}

.tablestyle {
    color: var(--sb-ink) !important;
}

.tablestyle td,
.tablestyle td[style],
.tablestyle span[style],
.tablestyle div[style] {
    color: var(--sb-ink) !important;
}

.tablestyle .ui-btn {
    border-radius: 7px !important;
    box-shadow: none !important;
}

/* Footer — mirrors Liverates.html */
#footer.site-footer {
    width: 100%;
    margin-top: 10px !important;
    color: #f2e9f7;
    background:
        radial-gradient(circle at 50% 0%, rgba(75, 27, 122, .34), transparent 42%),
        linear-gradient(180deg, #2e0e4d 0%, #1c0733 66%, #100626 100%) !important;
    border-top: 2px solid var(--sb-gold-deep);
    box-shadow:
        inset 0 1px 0 rgba(255, 241, 191, .18),
        0 -8px 24px rgba(0, 0, 0, .32);
}

#footer.site-footer .site-footer-main {
    width: min(1170px, calc(100% - 32px));
    margin: 0 auto;
    padding: 46px 0 36px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 38px;
}

#footer.site-footer .footer-info {
    display: grid;
    grid-template-columns: 46px 1fr;
    align-items: start;
    gap: 15px;
}

#footer.site-footer .footer-info + .footer-info {
    padding-left: 38px;
    border-left: 1px solid rgba(217, 179, 74, .28);
}

#footer.site-footer .footer-info-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sb-gold);
    background: linear-gradient(160deg, rgba(75, 27, 122, .8), rgba(23, 10, 40, .9));
    border: 1px solid rgba(217, 179, 74, .58);
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px rgba(255, 226, 139, .06);
}

#footer.site-footer .footer-info-icon svg {
    width: 34px;
    height: 34px;
}

#footer.site-footer .footer-info h3 {
    margin: 0 0 9px;
    color: var(--sb-gold) !important;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
}

#footer.site-footer .footer-info p,
#footer.site-footer .footer-info a {
    margin: 0;
    color: #f2e9f7 !important;
    font-size: 13px;
    line-height: 1.8;
    text-decoration: none;
    text-shadow: none !important;
}

#footer.site-footer .footer-info a:hover {
    color: var(--sb-gold) !important;
}

#footer.site-footer .footer-copyright {
    padding: 0 !important;
    background: linear-gradient(180deg, #170a28, #0a0416) !important;
    border-top: 1px solid rgba(217, 179, 74, .34);
    box-shadow: inset 0 1px 0 rgba(255, 239, 183, .06);
}

#footer.site-footer .footer-copyright-inner {
    width: min(1170px, calc(100% - 32px));
    margin: 0 auto;
    padding: 19px 0;
}

#footer.site-footer .footer-copyright p {
    margin: 0;
    color: var(--sb-gold) !important;
    font-size: 13px;
    font-weight: 700;
    text-shadow: none !important;
}

a {
    color: #5a1d8f;
}

a:hover {
    color: var(--sb-gold-deep);
}

.ag-up,
.text-success {
    color: var(--sb-green) !important;
}

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

@media (max-width: 991px) {
    #header .headImg .container .row {
        min-height: 94px !important;
    }

    #header #iconimage .LogoImgWidth1 {
        max-height: 94px !important;
    }

    #header .header-nav-main nav.collapse.show {
        padding: 10px 0 16px !important;
        background: linear-gradient(180deg, #4b1b7a, #22083a) !important;
        border-top: 1px solid var(--sb-gold-deep);
    }

    #header .header-nav-main nav ul#mainNav {
        padding: 0 18px !important;
    }

    #header .header-nav-main nav ul#mainNav > li > a {
        padding: 11px 8px !important;
        border-bottom: 1px solid rgba(217, 179, 74, .16);
    }

    #footer.site-footer .site-footer-main {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 34px 0 30px;
    }

    #footer.site-footer .footer-info + .footer-info {
        padding: 27px 0 0;
        border-top: 1px solid rgba(217, 179, 74, .24);
        border-left: 0;
    }
}

@media (max-width: 575px) {
    html,
    body,
    body.ui-mobile-viewport,
    .body,
    .main {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-right: 12px !important;
        padding-left: 12px !important;
    }

    #header .headImg {
        padding: 6px 0 !important;
    }

    #header .headImg .row {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    #header #iconimage {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    #header #iconimage .LogoImgWidth1 {
        width: 94% !important;
        max-width: 360px !important;
        height: auto !important;
        max-height: 70px !important;
    }

    #header .naviRow #navhead {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        min-height: 70px;
    }

    #header .header-btn-collapse-nav {
        margin-right: 2px !important;
    }

    .headingTop {
        width: calc(100% - 24px);
        margin-top: 16px !important;
        padding: 12px;
        font-size: 18px;
    }

    .ui-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 15px !important;
    }

    .main .container > .row,
    #footer .container > .row {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .main .container > .row > [class*="col-"],
    #footer .container > .row > [class*="col-"] {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    #tblHeader th {
        height: 42px !important;
        font-size: 11px !important;
    }

    .trade-card .trade-action-btn {
        min-width: 105px !important;
        padding: 9px 18px !important;
    }
}