/* =========================================================
   PRITHVI JEWELS GOLD RATE — FRONTEND V3.0
   Luxury responsive presentation.
   Rate/database logic is unchanged.
   ========================================================= */

.pjgr-wrap{
    --pjgr-bg:#fbf7f2;
    --pjgr-surface:#ffffff;
    --pjgr-ink:#231a18;
    --pjgr-muted:#776e6b;
    --pjgr-gold:#b88a3b;
    --pjgr-gold-light:#d8b66b;
    --pjgr-maroon:#4a0925;
    --pjgr-maroon-dark:#260312;
    --pjgr-line:rgba(74,9,37,.12);
    --pjgr-shadow:0 18px 55px rgba(54,18,28,.09);

    width:min(1280px,calc(100% - 32px));
    margin:clamp(24px,4vw,56px) auto;
    padding:clamp(24px,4vw,52px);
    box-sizing:border-box;
    color:var(--pjgr-ink);
    background:
        radial-gradient(circle at 90% 0%,rgba(216,182,107,.12),transparent 30%),
        linear-gradient(180deg,#fff 0%,var(--pjgr-bg) 100%);
    border:1px solid rgba(74,9,37,.08);
    border-radius:24px;
    box-shadow:var(--pjgr-shadow);
    font-family:inherit;
}

.pjgr-wrap *,
.pjgr-wrap *::before,
.pjgr-wrap *::after{box-sizing:border-box}

.pjgr-title{
    position:relative;
    margin:0;
    text-align:center;
    color:var(--pjgr-maroon);
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(28px,3.2vw,44px);
    line-height:1.12;
    letter-spacing:-.02em;
    font-weight:700;
}

.pjgr-title::after{
    content:"";
    display:block;
    width:58px;
    height:2px;
    margin:15px auto 0;
    background:linear-gradient(90deg,transparent,var(--pjgr-gold),transparent);
}

.pjgr-updated{
    margin:10px 0 30px;
    text-align:center;
    color:var(--pjgr-muted);
    font-size:clamp(13px,1.4vw,15px);
    letter-spacing:.01em;
}

.pjgr-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
}

.pjgr-rate-card{
    position:relative;
    min-width:0;
    padding:24px 20px 22px;
    text-align:center;
    background:rgba(255,255,255,.94);
    border:1px solid var(--pjgr-line);
    border-radius:18px;
    box-shadow:0 8px 28px rgba(55,20,30,.045);
    overflow:hidden;
    transition:
        transform .35s cubic-bezier(.22,.61,.36,1),
        box-shadow .35s ease,
        border-color .35s ease;
}

.pjgr-rate-card::before{
    content:"";
    position:absolute;
    top:0;
    left:14%;
    right:14%;
    height:2px;
    background:linear-gradient(90deg,transparent,var(--pjgr-gold),transparent);
    opacity:.75;
}

.pjgr-rate-card:hover{
    transform:translateY(-5px);
    border-color:rgba(184,138,59,.38);
    box-shadow:0 18px 42px rgba(55,20,30,.11);
}

.pjgr-rate-card h3{
    margin:0 0 15px;
    color:var(--pjgr-maroon);
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(17px,1.6vw,21px);
    line-height:1.2;
    font-weight:700;
}

.pjgr-rate{
    margin:0;
    color:#2a1a16;
    font-size:clamp(23px,2.2vw,31px);
    line-height:1.15;
    font-weight:800;
    letter-spacing:-.025em;
    white-space:nowrap;
}

.pjgr-unit{
    margin-top:6px;
    color:var(--pjgr-muted);
    font-size:13px;
    line-height:1.55;
}

.pjgr-rate-card .pjgr-unit + .pjgr-unit{margin-top:2px}

.pjgr-history{margin-top:44px}

.pjgr-history h3{
    position:relative;
    margin:0 0 18px;
    text-align:center;
    color:var(--pjgr-maroon);
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(21px,2vw,27px);
    line-height:1.2;
}

.pjgr-history h3::after{
    content:"";
    display:block;
    width:38px;
    height:2px;
    margin:10px auto 0;
    background:var(--pjgr-gold);
    opacity:.75;
}

.pjgr-history-scroll{
    overflow:hidden;
    background:#fff;
    border:1px solid var(--pjgr-line);
    border-radius:16px;
    box-shadow:0 8px 28px rgba(55,20,30,.045);
}

.pjgr-history-table{
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
}

.pjgr-history-table th{
    padding:15px 18px;
    background:linear-gradient(135deg,var(--pjgr-maroon),#671238);
    color:#fff;
    text-align:left;
    font-size:12px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.pjgr-history-table th:nth-child(2),
.pjgr-history-table th:nth-child(3),
.pjgr-history-table td:nth-child(2),
.pjgr-history-table td:nth-child(3){text-align:left}

.pjgr-history-table td{
    padding:16px 18px;
    border-bottom:1px solid rgba(74,9,37,.07);
    color:#302825;
    font-size:14px;
    line-height:1.45;
    background:#fff;
}

.pjgr-history-table tbody tr:last-child td{border-bottom:0}

.pjgr-history-table tbody tr{transition:background .2s ease}

.pjgr-history-table tbody tr:hover td{background:#fffaf3}

.pjgr-change-up,
.pjgr-up{color:#168363;font-weight:700}

.pjgr-change-down,
.pjgr-down{color:#b23a3a;font-weight:700}

.pjgr-change-flat,
.pjgr-flat{color:#6f6662;font-weight:600}

.pjgr-muted{color:var(--pjgr-muted)}

.pjgr-note{
    margin-top:22px;
    padding:16px 18px;
    border:1px solid rgba(184,138,59,.16);
    border-radius:13px;
    background:linear-gradient(135deg,#fffaf1,#f9f6f1);
    color:#5e5551;
    font-size:12.5px;
    line-height:1.65;
}

.pjgr-note strong{color:var(--pjgr-maroon)}

.pjgr-simple-rate{
    color:inherit;
}

.pjgr-simple-rate strong{font-weight:700}

.pjgr-simple-rate-date{
    color:var(--pjgr-muted);
    font-size:.9em;
}

/* Tablet */
@media (max-width:980px){
    .pjgr-wrap{
        width:min(100% - 28px,900px);
        padding:30px 24px;
        border-radius:20px;
    }

    .pjgr-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:14px;
    }

    .pjgr-rate-card{padding:22px 16px}

    .pjgr-rate{font-size:clamp(23px,3.2vw,29px)}
}

/* Mobile */
@media (max-width:600px){
    .pjgr-wrap{
        width:calc(100% - 24px);
        margin:18px auto;
        padding:24px 14px 18px;
        border-radius:18px;
        box-shadow:0 10px 35px rgba(54,18,28,.08);
    }

    .pjgr-title{font-size:28px}

    .pjgr-updated{
        margin-bottom:22px;
        font-size:13px;
    }

    .pjgr-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
    }

    .pjgr-rate-card{
        padding:19px 9px 17px;
        border-radius:14px;
    }

    .pjgr-rate-card h3{
        margin-bottom:10px;
        font-size:16px;
    }

    .pjgr-rate{
        font-size:21px;
        letter-spacing:-.03em;
    }

    .pjgr-unit{font-size:11.5px}

    .pjgr-history{margin-top:32px}

    .pjgr-history-scroll{
        overflow:visible;
        border:0;
        background:transparent;
        box-shadow:none;
    }

    .pjgr-history-table,
    .pjgr-history-table thead,
    .pjgr-history-table tbody,
    .pjgr-history-table tr,
    .pjgr-history-table td{
        display:block;
        width:100%;
    }

    .pjgr-history-table thead{
        position:absolute;
        width:1px;
        height:1px;
        overflow:hidden;
        clip:rect(0 0 0 0);
        clip-path:inset(50%);
        white-space:nowrap;
    }

    .pjgr-history-table tr{
        margin-bottom:10px;
        padding:0;
        overflow:hidden;
        background:#fff;
        border:1px solid var(--pjgr-line);
        border-radius:13px;
        box-shadow:0 5px 18px rgba(55,20,30,.04);
    }

    .pjgr-history-table td{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:16px;
        padding:11px 13px;
        border-bottom:1px solid rgba(74,9,37,.06);
        font-size:13px;
        text-align:right!important;
    }

    .pjgr-history-table td:last-child{border-bottom:0}

    .pjgr-history-table td::before{
        flex:0 0 auto;
        color:var(--pjgr-muted);
        font-size:10px;
        font-weight:700;
        letter-spacing:.1em;
        text-transform:uppercase;
        text-align:left;
    }

    .pjgr-history-table td:nth-child(1)::before{content:"Date"}
    .pjgr-history-table td:nth-child(2)::before{content:"22K Rate"}
    .pjgr-history-table td:nth-child(3)::before{content:"Change"}

    .pjgr-note{
        margin-top:16px;
        padding:14px;
        font-size:11.5px;
    }
}

@media (max-width:380px){
    .pjgr-grid{grid-template-columns:1fr}

    .pjgr-rate-card{padding:18px 14px}

    .pjgr-rate{font-size:25px}
}

@media (prefers-reduced-motion:reduce){
    .pjgr-rate-card,
    .pjgr-history-table tbody tr{transition:none}
}