/*
===========================================
Bahrain Gold Pro Ticker
Premium luxury UI
===========================================
*/

.bgpt-wrapper{
    /* Theme surface — overridden by .bgpt-theme-* below */
    --bgpt-shell:linear-gradient(135deg,#111,#1c1c1c,#242424);
    --bgpt-border:rgba(212,175,55,.35);
    --bgpt-text:#fff;
    --bgpt-muted:#cfcfcf;
    --bgpt-subtle:#d8d8d8;
    --bgpt-accent:#D4AF37;
    --bgpt-card-bg:#fff;
    --bgpt-card-text:#111;
    --bgpt-card-muted:#6b6b6b;
    --bgpt-silver:#BFC3C9;

    font-family:'Sora',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
    max-width:1200px;
    margin:40px auto;
    background:var(--bgpt-shell);
    border:1px solid var(--bgpt-border);
    border-radius:20px;
    padding:35px;
    box-shadow:0 20px 60px rgba(0,0,0,.18);
    color:var(--bgpt-text);
}

/*
==========================================
Themes
==========================================
*/
.bgpt-theme-dark{
    --bgpt-shell:#0d0d0d;
    --bgpt-accent:#e5c76b;
    --bgpt-border:rgba(229,199,107,.3);
}

.bgpt-theme-light{
    --bgpt-shell:linear-gradient(135deg,#faf8f2,#fff);
    --bgpt-border:rgba(212,175,55,.5);
    --bgpt-text:#1a1a1a;
    --bgpt-muted:#5a5a5a;
    --bgpt-subtle:#5a5a5a;
    --bgpt-card-bg:#fbf9f4;
    box-shadow:0 20px 60px rgba(0,0,0,.08);
}

/*
==========================================
Header
==========================================
*/
.bgpt-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:30px;
    flex-wrap:wrap;
    gap:20px;
}

.bgpt-title{
    display:flex;
    align-items:center;
    gap:18px;
}

.bgpt-logo{
    width:55px;
    height:55px;
}

.bgpt-title h2{
    margin:0;
    font-size:30px;
    font-weight:700;
    color:var(--bgpt-accent);
    line-height:1.2;
}

.bgpt-title span{
    color:var(--bgpt-subtle);
    font-size:14px;
}

.bgpt-updated{
    text-align:right;
    color:var(--bgpt-muted);
    font-size:14px;
}

.bgpt-updated .bgpt-time{
    display:block;
    margin-top:6px;
    color:var(--bgpt-text);
}

/*
==========================================
Cards
==========================================
*/
.bgpt-prices{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:20px;
}

.bgpt-card{
    background:var(--bgpt-card-bg);
    color:var(--bgpt-card-text);
    border-radius:18px;
    padding:20px;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
    position:relative;
    overflow:hidden;
    /* Named properties only — "transition:.3s" would animate every colour
       change the updater makes, turning a price flash into a smear. */
    transition:transform .3s ease, box-shadow .3s ease;
}

.bgpt-card:hover{
    transform:translateY(-6px);
    box-shadow:0 16px 32px rgba(0,0,0,.16);
}

.bgpt-card.gold{
    border-top:5px solid var(--bgpt-accent);
}

.bgpt-card.silver{
    border-top:5px solid var(--bgpt-silver);
}

.bgpt-card-top{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:15px;
}

.bgpt-card-top img{
    width:28px;
    height:28px;
}

.bgpt-card-top span{
    font-weight:600;
}

.bgpt-price{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    column-gap:6px;
    row-gap:2px;
}

/* Class, not ".bgpt-price span" — an element selector here outranks
   .bgpt-up and would render the trend arrows at 32px in black. */
.bgpt-val{
    font-size:32px;
    font-weight:700;
    color:var(--bgpt-card-text);
    line-height:1.05;
}

.bgpt-price small{
    color:var(--bgpt-card-muted);
    font-size:14px;
    /* Keep "BHD / gram" together and never let it be compressed —
       if it can't fit beside the number it wraps to its own line
       rather than being clipped by the card's overflow:hidden. */
    white-space:nowrap;
    flex-shrink:0;
}

/*
==========================================
Trend arrows
==========================================
*/
.bgpt-arrow{
    font-size:16px;
    font-weight:700;
    line-height:1;
    flex-shrink:0;
}

.bgpt-up{
    color:#0b8f3a;
}

.bgpt-down{
    color:#c62828;
}

.bgpt-same{
    color:#888;
    font-size:15px;
}

/*
==========================================
Loading
==========================================
*/
.bgpt-loading{
    opacity:.55;
    transition:opacity .3s ease;
}

/*
==========================================
Error
==========================================
*/
.bgpt-error{
    font-family:'Sora',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
    background:#ffe7e7;
    color:#b00020;
    padding:18px;
    border-radius:10px;
    text-align:center;
    max-width:1200px;
    margin:40px auto;
}

/*
==========================================
Screen reader only
==========================================
*/
.bgpt-wrapper .screen-reader-text{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

/*
==========================================
Responsive
==========================================
*/
@media(min-width:993px){
    /* From here up the cards sit in a multi-column row (5-up above 1100px,
       auto-fit 4-up in the 993-1100 band) and run ~200-210px wide. 23px is
       the largest number size that still leaves room for "BHD / gram" on the
       same line at that width — measured, not guessed. Kept as one rule so
       the tablet band never falls back to the oversized number and wraps. */
    .bgpt-card{
        padding:18px 16px;
    }
    .bgpt-val{
        font-size:23px;
    }
    .bgpt-price small{
        font-size:13px;
    }
    .bgpt-arrow{
        font-size:15px;
    }
}

@media(min-width:1100px){
    /* Pin five cards to one row — auto-fit otherwise lands on 4+1 and
       leaves a lone stretched card on its own line. */
    .bgpt-prices{
        grid-template-columns:repeat(5,1fr);
        gap:16px;
    }
}

@media(max-width:992px){
    .bgpt-wrapper{
        padding:25px;
    }
    .bgpt-header{
        text-align:center;
        justify-content:center;
    }
    .bgpt-title{
        width:100%;
        justify-content:center;
    }
    .bgpt-updated{
        width:100%;
        text-align:center;
    }
}

@media(max-width:768px){
    .bgpt-prices{
        grid-template-columns:1fr;
    }
    .bgpt-card{
        padding:18px;
    }
    .bgpt-val{
        font-size:28px;
    }
    .bgpt-title h2{
        font-size:24px;
    }
}

@media(max-width:480px){
    .bgpt-wrapper{
        padding:18px;
        border-radius:14px;
    }
    .bgpt-logo{
        width:42px;
        height:42px;
    }
    .bgpt-title h2{
        font-size:21px;
    }
    .bgpt-val{
        font-size:24px;
    }
    .bgpt-card-top img{
        width:22px;
        height:22px;
    }
}

@media (prefers-reduced-motion:reduce){
    .bgpt-card,
    .bgpt-loading{
        transition:none;
    }
    .bgpt-card:hover{
        transform:none;
    }
}