/* ==========================================================================
   Gold Price Widget – Stylesheet
   ========================================================================== */

/* ---- CSS Custom Properties ---- */
.gpw-widget {
    --gpw-radius:      12px;
    --gpw-radius-sm:   6px;
    --gpw-font:        'Segoe UI', system-ui, -apple-system, sans-serif;
    --gpw-transition:  0.25s ease;

    /* Dark theme (default) */
    --gpw-bg:          #0f1117;
    --gpw-bg-card:     #181b25;
    --gpw-bg-row:      #1e2130;
    --gpw-bg-row-h:    #252a3a;
    --gpw-border:      rgba(255,255,255,0.08);
    --gpw-text:        #e8eaf0;
    --gpw-text-muted:  #7b82a0;
    --gpw-gold:        #f5c842;
    --gpw-gold-glow:   rgba(245,200,66,0.25);
    --gpw-green:       #3ecf8e;
    --gpw-red:         #f56565;
    --gpw-accent:      #6c63ff;
    --gpw-header-bg:   linear-gradient(135deg,#1a1d2e 0%,#232740 100%);
    --gpw-world-bg:    linear-gradient(90deg,#1a1e2e 0%,#1c2035 100%);
    --gpw-shadow:      0 8px 32px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.2);
}

/* Light theme overrides */
.gpw-theme-light {
    --gpw-bg:          #f8f9fc;
    --gpw-bg-card:     #ffffff;
    --gpw-bg-row:      #f4f6fb;
    --gpw-bg-row-h:    #eef0f8;
    --gpw-border:      rgba(0,0,0,0.08);
    --gpw-text:        #1a1d2e;
    --gpw-text-muted:  #7b82a0;
    --gpw-gold:        #c8860a;
    --gpw-gold-glow:   rgba(200,134,10,0.15);
    --gpw-green:       #1a8c60;
    --gpw-red:         #d63031;
    --gpw-header-bg:   linear-gradient(135deg,#ffffff 0%,#f0f2fa 100%);
    --gpw-world-bg:    linear-gradient(90deg,#f0f2fa 0%,#e8ebf7 100%);
    --gpw-shadow:      0 4px 24px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.06);
}

/* ---- Base ---- */
.gpw-widget * { box-sizing: border-box; margin: 0; padding: 0; }

.gpw-widget {
    font-family:     var(--gpw-font);
    background:      var(--gpw-bg);
    border-radius:   var(--gpw-radius);
    box-shadow:      var(--gpw-shadow);
    overflow:        hidden;
    position:        relative;
    max-width:       720px;
    width:           100%;
    margin:          0 auto 24px;
    border:          1px solid var(--gpw-border);
}

/* ---- Header ---- */
.gpw-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         14px 20px;
    background:      var(--gpw-header-bg);
    border-bottom:   1px solid var(--gpw-border);
}

.gpw-header-left {
    display:    flex;
    align-items:center;
    gap:        10px;
}

.gpw-icon   { font-size: 20px; }

.gpw-title  {
    font-size:   17px;
    font-weight: 700;
    color:       var(--gpw-gold);
    letter-spacing: 0.3px;
}

.gpw-header-right {
    display:    flex;
    align-items:center;
    gap:        10px;
}

/* Live dot animation */
.gpw-live-dot {
    width:           9px;
    height:          9px;
    border-radius:   50%;
    background:      var(--gpw-green);
    display:         inline-block;
    animation:       gpw-pulse 2s infinite;
    box-shadow:      0 0 0 0 rgba(62,207,142,0.5);
}

@keyframes gpw-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(62,207,142,0.5); }
    60%  { box-shadow: 0 0 0 7px rgba(62,207,142,0); }
    100% { box-shadow: 0 0 0 0 rgba(62,207,142,0); }
}

.gpw-refresh-btn {
    background:   transparent;
    border:       1px solid var(--gpw-border);
    color:        var(--gpw-text-muted);
    font-size:    18px;
    line-height:  1;
    width:        30px;
    height:       30px;
    border-radius:50%;
    cursor:       pointer;
    transition:   var(--gpw-transition);
    display:      flex;
    align-items:  center;
    justify-content:center;
}

.gpw-refresh-btn:hover {
    color:        var(--gpw-gold);
    border-color: var(--gpw-gold);
    transform:    rotate(45deg);
}

.gpw-refresh-btn.gpw-spinning { animation: gpw-spin 0.7s linear; }
@keyframes gpw-spin { to { transform: rotate(360deg); } }

/* ---- World Price Bar ---- */
.gpw-world-bar {
    display:      flex;
    align-items:  center;
    flex-wrap:    wrap;
    gap:          12px;
    padding:      12px 20px;
    background:   var(--gpw-world-bg);
    border-bottom:1px solid var(--gpw-border);
}

.gpw-world-label {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   12px;
    font-weight: 600;
    color:       var(--gpw-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    white-space:  nowrap;
}

.gpw-globe { font-size: 15px; }

.gpw-world-prices {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         8px;
    flex:        1;
}

.gpw-world-item {
    display:    flex;
    align-items:baseline;
    gap:        4px;
}

.gpw-world-val {
    font-size:   15px;
    font-weight: 700;
    color:       var(--gpw-gold);
    font-variant-numeric: tabular-nums;
    transition:  color var(--gpw-transition);
}

.gpw-world-unit {
    font-size:  11px;
    color:      var(--gpw-text-muted);
}

.gpw-world-sep {
    color:       var(--gpw-border);
    font-size:   14px;
    padding:     0 2px;
}

/* World price unavailable state */
.gpw-world-unavailable {
    font-size:  13px;
    color:      var(--gpw-text-muted);
    display:    flex;
    align-items:center;
    gap:        8px;
}

.gpw-inline-refresh {
    background:   transparent;
    border:       1px solid var(--gpw-border);
    color:        var(--gpw-gold);
    font-size:    12px;
    padding:      2px 10px;
    border-radius:4px;
    cursor:       pointer;
    transition:   var(--gpw-transition);
}
.gpw-inline-refresh:hover { border-color: var(--gpw-gold); }

/* ---- Section Title ---- */
.gpw-section-title {
    display:      flex;
    align-items:  center;
    justify-content:space-between;
    padding:      10px 20px 6px;
    font-size:    12px;
    font-weight:  600;
    color:        var(--gpw-text-muted);
    text-transform:uppercase;
    letter-spacing:0.8px;
}

.gpw-unit-note { font-weight: 400; font-size: 11px; }

/* ---- Table ---- */
.gpw-table-wrap { overflow-x: auto; padding: 0 10px 10px; }

.gpw-table {
    width:           100%;
    border-collapse: separate;
    border-spacing:  0 4px;
}

.gpw-table thead th {
    font-size:     10px;
    font-weight:   600;
    color:         var(--gpw-text-muted);
    text-transform:uppercase;
    letter-spacing:0.6px;
    padding:       4px 12px;
    text-align:    left;
}

.gpw-th-buy, .gpw-th-sell, .gpw-th-spread { text-align: right; }

.gpw-row {
    background:   var(--gpw-bg-row);
    border-radius:var(--gpw-radius-sm);
    transition:   background var(--gpw-transition), transform var(--gpw-transition);
}

.gpw-row:hover {
    background:  var(--gpw-bg-row-h);
    transform:   translateX(2px);
}

.gpw-row td {
    padding:     10px 12px;
    color:       var(--gpw-text);
    vertical-align:middle;
}

.gpw-row td:first-child { border-radius: var(--gpw-radius-sm) 0 0 var(--gpw-radius-sm); }
.gpw-row td:last-child  { border-radius: 0 var(--gpw-radius-sm) var(--gpw-radius-sm) 0; }

/* Brand badges */
.gpw-brand-badge {
    display:      inline-block;
    padding:      3px 10px;
    border-radius:20px;
    font-size:    12px;
    font-weight:  700;
    letter-spacing:0.5px;
}

.gpw-brand-sjc  { background: rgba(245,200,66,0.15); color: #f5c842; border: 1px solid rgba(245,200,66,0.3); }
.gpw-brand-doji { background: rgba(108,99,255,0.15); color: #8b82ff; border: 1px solid rgba(108,99,255,0.3); }
.gpw-brand-pnj  { background: rgba(62,207,142,0.12); color: #3ecf8e; border: 1px solid rgba(62,207,142,0.25); }

/* Light overrides for badges */
.gpw-theme-light .gpw-brand-doji { color: #5046e4; }
.gpw-theme-light .gpw-brand-pnj  { color: #1a8c60; }

/* Price cells */
.gpw-price {
    text-align:  right;
    font-variant-numeric: tabular-nums;
}

.gpw-buy  span { color: var(--gpw-green);  font-weight: 700; font-size: 14px; }
.gpw-sell span { color: var(--gpw-red);    font-weight: 700; font-size: 14px; }
.gpw-price small { font-size: 11px; color: var(--gpw-text-muted); margin-left: 1px; }

/* Spread */
.gpw-spread { text-align: right; }
.gpw-spread-val {
    font-size:   12px;
    color:       var(--gpw-text-muted);
    font-variant-numeric: tabular-nums;
}

/* Time */
.gpw-time {
    font-size:   11px;
    color:       var(--gpw-text-muted);
    white-space: nowrap;
}

/* No data / error row */
.gpw-no-data {
    text-align:  center;
    color:       var(--gpw-text-muted);
    font-size:   13px;
    padding:     20px !important;
}

/* Price flash animation */
.gpw-flash-up   { animation: gpw-flash-up   0.8s ease; }
.gpw-flash-down { animation: gpw-flash-down 0.8s ease; }

@keyframes gpw-flash-up {
    0%  { background: rgba(62,207,142,0.35); }
    100%{ background: transparent; }
}
@keyframes gpw-flash-down {
    0%  { background: rgba(245,101,101,0.35); }
    100%{ background: transparent; }
}

/* ---- Sparkline chart ---- */
.gpw-chart-section {
    padding:      6px 20px 14px;
    border-top:   1px solid var(--gpw-border);
}

.gpw-chart-label {
    font-size:    11px;
    color:        var(--gpw-text-muted);
    margin-bottom:8px;
    letter-spacing:0.5px;
}

.gpw-sparkline {
    width:    100%;
    height:   70px;
    display:  block;
    border-radius: var(--gpw-radius-sm);
}

/* ---- Footer ---- */
.gpw-footer {
    display:        flex;
    align-items:    center;
    justify-content:space-between;
    flex-wrap:      wrap;
    gap:            6px;
    padding:        10px 20px;
    border-top:     1px solid var(--gpw-border);
    background:     var(--gpw-bg-card);
}

.gpw-last-update {
    font-size:  12px;
    color:      var(--gpw-text-muted);
}

.gpw-update-time { color: var(--gpw-text); }

.gpw-source {
    font-size:  11px;
    color:      var(--gpw-text-muted);
    opacity:    0.7;
}

/* ---- Loading overlay ---- */
.gpw-loading-overlay {
    position:       absolute;
    inset:          0;
    background:     rgba(15,17,23,0.7);
    display:        flex;
    align-items:    center;
    justify-content:center;
    border-radius:  var(--gpw-radius);
    z-index:        10;
    backdrop-filter:blur(2px);
}

.gpw-theme-light .gpw-loading-overlay { background: rgba(248,249,252,0.75); }

.gpw-spinner {
    width:        36px;
    height:       36px;
    border:       3px solid var(--gpw-border);
    border-top-color: var(--gpw-gold);
    border-radius:50%;
    animation:    gpw-spin 0.6s linear infinite;
}

/* ---- Responsive ---- */
@media (max-width: 500px) {
    .gpw-header     { padding: 12px 14px; }
    .gpw-world-bar  { padding: 10px 14px; flex-direction: column; align-items: flex-start; }
    .gpw-row td     { padding: 8px 8px; }
    .gpw-th-spread, .gpw-spread, .gpw-th-time, .gpw-time { display: none; }
    .gpw-title      { font-size: 15px; }
}