/* ==========================================
   RESET
========================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-variant-numeric: tabular-nums;
}

html {
    font-size: 16px;
}

body {

    font-family:
        "Segoe UI",
        Tahoma,
        Arial,
        sans-serif;

    background: #f5f7fa;

    color: #333;

    overflow-x: hidden;

}


/* ==========================================
   VARIABLES
========================================== */

:root {

    --gold: #8A6225;
    /* --gold: linear-gradient(180deg, #A67C34, #8A6225); */

    --gold-light: #F8F2E7;

    --gold-old-row: #fff;

    --gold-border: #D9B56D;

    --dark: #122730;

    --green: #19b65a;

    --red: #dc3a3a;

    --shadow: 0 4px 12px rgba(0, 0, 0, .08);

}


/* ==========================================
   PAGE
========================================== */

.page {

    max-width: 1280px;

    margin: 20px auto;

    padding: 15px;

}


/* ==========================================
   HEADER
========================================== */

.header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    background: #ffffff;

    border-radius: 12px;

    padding: 18px 25px;

    box-shadow: var(--shadow);

    border-top: 4px solid var(--gold);

}


.header-left {

    display: flex;

    align-items: center;

    gap: 18px;

}


.logo-box {

    width: 60px;

    height: 60px;

    border-radius: 14px;

    background: var(--gold-light);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 28px;

}


.logo-text h1 {

    font-size: 30px;

    color: var(--gold);

    font-weight: 700;

}

.logo-text span {

    color: #777;

    font-size: 14px;

}


.header-right {

    display: flex;

    align-items: center;

    gap: 20px;

}


.live-dot {

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background: #18b74b;

    animation: pulse 1s infinite;

}


.live-text {

    color: #18b74b;

    font-weight: bold;

    /* font-size: 15px; */

    font-weight: 700;

    letter-spacing: 1px;
}


.last-update {

    color: #555;

    font-size: 14px;

}

.last-update strong {

    color: var(--gold);

}


/* ==========================================
   TICKER
========================================== */

.ticker {

    margin-top: 20px;

    background: var(--gold-light);

    border-left: 5px solid var(--gold);

    padding: 12px 18px;

    border-radius: 8px;

    color: #555;

    overflow: hidden;

    white-space: nowrap;

}

.ticker span {

    display: inline-block;

}

#tickerText {

    padding-left: 10px;

}


/* ==========================================
   SUMMARY SECTION
========================================== */

.summary-section {

    display: grid;

    grid-template-columns:

        repeat(3, 1fr);

    gap: 20px;

    margin-top: 25px;

}


/* ==========================================
   CARD
========================================== */

.summary-card {

    background: var(--dark);

    /* border: 2px solid var(--gold-border); */

    border-top: 4px solid var(--gold-border);
    border-left: 1px solid var(--gold-border);
    border-right: 1px solid var(--gold-border);
    border-bottom: 1px solid var(--gold-border);

    border-radius: 15px;

    padding: 16px;

    color: white;

    transition: .25s;

    /* box-shadow: 0 8px 18px rgba(0, 0, 0, .20); */
    box-shadow: 0 10px 25px rgba(0, 0, 0, .10);

}


.summary-card:hover {

    transform: translateY(-3px);

}


.summary-title {

    text-transform: uppercase;

    font-size: 12px;

    letter-spacing: 1px;

    color: #E3C67B;

}


.summary-subtitle {

    margin-top: 5px;

    color: #ddd;

    font-size: 15px;

}


.summary-price {

    margin-top: 12px;

    font-size: 38px;

    font-weight: bold;

    letter-spacing: 1px;

}


/* ==========================================
   VALUE FLASH
========================================== */

.flash-up {

    background: #20b65d !important;

    color: #fff !important;

    animation: flashGreen .45s;

}


.flash-down {

    background: #e23b3b !important;

    color: #fff !important;

    animation: flashRed .45s;

}


/* ==========================================
   PULSE
========================================== */

@keyframes pulse {

    0% {

        transform: scale(.9);

        opacity: .5;

    }

    50% {

        transform: scale(1.2);

        opacity: 1;

    }

    100% {

        transform: scale(.9);

        opacity: .5;

    }

}

/* ==========================================
   RATES SECTION
========================================== */

.rates-section {

    margin-top: 30px;

}


/* ==========================================
   TABLE HEADER
========================================== */

.table-head {

    display: flex;

    justify-content: space-between;

    align-items: center;

    background: var(--gold);

    color: #fff;

    border-radius: 10px;

    padding: 14px 20px;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: .5px;

    /*New */
    position: sticky;

    top: 10;

    z-index: 999;

}

.table-head .buy-header,
.table-head .sell-header {
    text-align: center;
}

.col-symbol {

    flex: 1;

}

.col-price {

    display: flex;

    gap: 120px;

    min-width: 270px;

    justify-content: flex-end;

}


/* ==========================================
   PRICE CONTAINER
========================================== */

#priceContainer {

    margin-top: 12px;

}


/* ==========================================
   PRICE ROW
========================================== */

.price-row {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    background: #fff;

    border-radius: 12px;

    margin-bottom: 14px;

    padding: 16px 20px;

    min-height: 64px;

    border-left: 5px solid var(--gold);

    box-shadow: var(--shadow);

    transition: .25s;


}

.price-row:hover {

    transform: translateY(-2px);

}


/* Alternate Row */

.price-row:nth-child(even) {

    background: var(--gold-light);

}

.price-row:nth-child(odd) {

    background: var(--gold-old-row);

}

/* ==========================================
   LEFT SIDE
========================================== */

.row-left {

    flex: 1;

    padding-right: 25px;

}

.row-name {

    font-size: 17px;

    font-weight: 700;

    color: #333;

    line-height: 24px;

}

.row-remark {

    margin-top: 8px;

    font-size: 13px;

    color: #B10000;

    font-style: italic;

    /*New*/
    display: flex;

    align-items: center;

    gap: 6px;

}


/* ==========================================
   RIGHT SIDE
========================================== */

.row-right {

    /* display: flex;
    gap: 40px; */

    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
    width: 320px;

}


/* ==========================================
   BUY / SELL BOX
========================================== */

.price-box {
    /* min-width: 120px;
    text-align: right; */

    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.price-title {

    font-size: 11px;

    color: #888;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 6px;

    /*New*/
    display: inline-block;

    padding: 4px 10px;

    background: #8A6225;

    color: white;

    border-radius: 20px;

}

.price-value_old {
    font-size: 26px;
    font-weight: bold;
    color: #222;
    border-radius: 6px;
    padding: 4px 8px;
    transition: .25s;
    /* New Line improvement - Prashant */
    display: inline-block;
    min-width: 110px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #F7F7F7;
}

.price-value {
    display: inline-block;
    min-width: 110px;
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
    transition: .25s;

    /* display: inline-block; */
    /* min-width: 110px; */
    /* text-align: center; */
    /* margin: 6px auto; */
}

/* ==========================================
   HIGH / LOW
========================================== */

.price-extra {
    font-size: 12px;
    /* margin-top: 4px; */
    color: #777;
    display: flex;
    justify-content: space-between;
    text-align: center;
}

.price-extra span {

    display: block;

}


/* ==========================================
   EMPTY VALUE
========================================== */

.empty {

    color: #999;

}


/* ==========================================
   NO DATA
========================================== */

.no-data {

    background: #fff;

    border-radius: 12px;

    padding: 40px;

    text-align: center;

    color: #999;

    box-shadow: var(--shadow);

}


/* ==========================================
   LOADING
========================================== */

.loading {

    background: #fff;

    border-radius: 12px;

    padding: 40px;

    text-align: center;

    box-shadow: var(--shadow);

}

.loading::after {

    content: "";

    width: 28px;

    height: 28px;

    display: inline-block;

    border: 3px solid #ddd;

    border-top: 3px solid var(--gold);

    border-radius: 50%;

    animation: spin .8s linear infinite;

    margin-left: 10px;

}


/* ==========================================
   CONNECTION ERROR
========================================== */

.error {

    background: #FDECEC;

    color: #C62828;

    border-left: 5px solid #E53935;

    border-radius: 10px;

    padding: 18px;

    margin-top: 15px;

}


/* ==========================================
   FOOTER
========================================== */

footer {

    margin-top: 30px;

}

.footer-note {

    background: #fff;

    border-radius: 10px;

    padding: 15px 20px;

    color: #777;

    font-size: 14px;

    border-left: 5px solid var(--gold);

    box-shadow: var(--shadow);

}

/* ==========================================
   FOOTER DEVELOPER
========================================== */

.footer-developer {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    margin-top: 20px;

    color: #777;

    font-size: 14px;

}

.footer-developer a {

    display: inline-flex;

    align-items: center;

    padding: 6px 14px;

    border: 1px solid #D4A840;

    border-radius: 30px;

    background: #FFF9F0;

    color: var(--gold);

    font-weight: 700;

    text-decoration: none;

    transition: .25s;

}

.footer-developer a:hover {

    background: var(--gold);

    color: #fff;

    border-color: var(--gold);

    transform: translateY(-2px);

    box-shadow: 0 6px 16px rgba(138, 98, 37, .25);

}

/* ==========================================
   SPINNER
========================================== */

@keyframes spin {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}

/* ==========================================
   PRICE FLASH ANIMATION
========================================== */

@keyframes flashGreen {

    0% {

        background: transparent;
        color: #222;
        transform: scale(1);

    }

    40% {
        background: #2bbf63;
        color: #fff;
        transform: scale(1.06);
    }

    100% {
        background: transparent;
        color: #fff;
        transform: scale(1);
    }

}

@keyframes flashRed {

    0% {

        background: transparent;

        color: #222;

        transform: scale(1);

    }

    40% {

        background: #d9534f;

        color: #fff;

        transform: scale(1.06);

    }

    100% {

        background: transparent;

        color: #fff;

        transform: scale(1);

    }

}

.flash-up {

    animation: flashGreen .45s ease;

}

.flash-down {

    animation: flashRed .45s ease;

}


/* ==========================================
   CARD VALUE FLASH
========================================== */

.summary-price {

    border-radius: 8px;

    padding: 6px 8px;

    display: inline-block;

    min-width: 140px;

    transition: .25s;

    font-variant-numeric: tabular-nums;

}


/* ==========================================
   BUY SELL BADGES
========================================== */

.price-title {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 70px;

    padding: 4px 12px;

    border-radius: 25px;

    background: linear-gradient(180deg,
            #a98134,
            #8a6225);

    color: #fff;

    font-weight: 600;

    font-size: 11px;

}


/* ==========================================
   NUMBER ALIGNMENT
========================================== */

.price-value {

    font-variant-numeric: tabular-nums;

    font-feature-settings: "tnum";

    font-family:

        Consolas,

        "Courier New",

        monospace;

}


/* ==========================================
   REMARK ICON
========================================== */

.row-remark::before {

    content: "ⓘ";

    color: #b22222;

    margin-right: 6px;

}


/* ==========================================
   HOVER EFFECT
========================================== */

.price-row {

    transition:

        transform .20s,

        box-shadow .20s;

}

.price-row:hover {

    transform: translateY(-3px);

    box-shadow:

        0 12px 28px rgba(0, 0, 0, .12);

}


/* ==========================================
   CARD FOOTER
========================================== */

.summary-footer {

    margin-top: 12px;

    font-size: 11px;

    color: #cccccc;

}


/* ==========================================
   LIVE DOT
========================================== */

.live-dot {

    box-shadow:

        0 0 10px rgba(34, 197, 94, .7);

}


/* ==========================================
   STICKY HEADER
========================================== */

.table-head {
    position: sticky;
    top: 10px;
    z-index: 50;

    display: grid;
    grid-template-columns: 1fr 160px 180px;
    align-items: center;
}


/* ==========================================
   SCROLL BAR
========================================== */

::-webkit-scrollbar {

    width: 10px;

}

::-webkit-scrollbar-track {

    background: #efefef;

}

::-webkit-scrollbar-thumb {

    background: #b8893a;

    border-radius: 20px;

}

::-webkit-scrollbar-thumb:hover {

    background: #8a6225;

}


/* ==========================================
   TABLE FADE IN
========================================== */

@keyframes fadeRow {

    from {

        opacity: 0;

        transform: translateY(8px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

.price-row {

    animation: fadeRow .25s;

}


/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:1100px) {

    .summary-section {

        grid-template-columns: repeat(2, 1fr);

    }

}


@media(max-width:900px) {

    .header {

        flex-direction: column;

        align-items: flex-start;

        gap: 18px;

    }

    .table-head {

        display: none;

    }

    .price-row {

        flex-direction: column;

        gap: 18px;

    }

    .row-right {

        width: 100%;

        justify-content: space-between;

    }

}


@media(max-width:700px) {

    .summary-section {

        grid-template-columns: 1fr;

    }

    .row-right {

        flex-direction: column;

        gap: 14px;

    }

    .price-box {

        width: 100%;

        text-align: left;

    }

    .summary-price {

        font-size: 30px;

    }

    .logo-text h1 {

        font-size: 24px;

    }

}


@media(max-width:500px) {

    .page {

        padding: 10px;

    }

    .summary-card {

        padding: 18px;

    }

    .price-row {

        padding: 16px;

    }

    .logo-box {

        width: 48px;

        height: 48px;

        font-size: 22px;

    }

    .logo-text span {

        font-size: 12px;

    }

}