/* ============================================================
   SkinBaron Prices – Frontend Widget Styles
   Brand Colors: #2A2745 (Background) · #eed54a (Accent/Gold)
   ============================================================ */

:root {
    --sb-bg:          #1e1b38;
    --sb-bg-card:     #2A2745;
    --sb-bg-row:      #322f52;
    --sb-bg-row-alt:  #2e2b4d;
    --sb-bg-header:   #201d3a;
    --sb-border:      #3d3966;
    --sb-border-soft: #312e55;

    --sb-gold:        #eed54a;
    --sb-gold-dark:   #c9b130;
    --sb-gold-light:  #f7e47a;
    --sb-gold-glow:   rgba(238, 213, 74, 0.15);

    --sb-text:        #e2dff5;
    --sb-text-muted:  #8b88b0;
    --sb-text-dim:    #6460a0;
    --sb-white:       #ffffff;

    --sb-radius:      10px;
    --sb-radius-sm:   6px;
    --sb-font:        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

    /* Wear-Farben */
    --wear-fn:  #4cdc8f;
    --wear-mw:  #38b874;
    --wear-ft:  #e8952a;
    --wear-ww:  #d45c1a;
    --wear-bs:  #cc3333;
}

/* ── Wrapper ─────────────────────────────────────────────── */
.skinbaron-widget {
    background:    var(--sb-bg-card);
    border:        1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    overflow:      hidden;
    font-family:   var(--sb-font);
    font-size:     14px;
    color:         var(--sb-text);
    max-width:     560px;
    margin:        1.5em 0;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(238, 213, 74, 0.06);
}

/* ── Header ──────────────────────────────────────────────── */
.skinbaron-widget__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         13px 18px;
    background:      var(--sb-bg-header);
    border-bottom:   1px solid var(--sb-border);
    gap:             12px;
    position:        relative;
}

/* Goldene Akzent-Linie oben */
.skinbaron-widget__header::before {
    content:    '';
    position:   absolute;
    top:        0;
    left:       0;
    right:      0;
    height:     2px;
    background: linear-gradient(90deg, transparent, var(--sb-gold), transparent);
    opacity:    0.7;
}

.skinbaron-widget__name {
    font-size:   15px;
    font-weight: 700;
    color:       var(--sb-white);
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-wrap:   wrap;
    letter-spacing: 0.01em;
}

.skinbaron-widget__stattrak {
    color:          var(--sb-gold);
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background:     var(--sb-gold-glow);
    border:         1px solid rgba(238, 213, 74, 0.3);
    border-radius:  4px;
    padding:        2px 6px;
}

/* ── Preisliste ──────────────────────────────────────────── */
.skinbaron-widget__prices {
    padding: 6px 0;
}

.skinbaron-widget__wear {
    display:     grid;
    grid-template-columns: 40px 1fr auto auto;
    align-items: center;
    gap:         0 14px;
    padding:     9px 18px;
    transition:  background .15s;
    border-bottom: 1px solid var(--sb-border-soft);
}
.skinbaron-widget__wear:last-child {
    border-bottom: none;
}
.skinbaron-widget__wear:hover {
    background: rgba(238, 213, 74, 0.04);
}

/* Wear-Badge */
.skinbaron-widget__wear-badge {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           34px;
    height:          20px;
    border-radius:   var(--sb-radius-sm);
    font-size:       10px;
    font-weight:     800;
    letter-spacing:  .06em;
    color:           #fff;
    flex-shrink:     0;
    text-shadow:     0 1px 2px rgba(0,0,0,.4);
}

.skinbaron-widget__wear-badge--factorynew    { background: var(--wear-fn); }
.skinbaron-widget__wear-badge--minimalwear   { background: var(--wear-mw); }
.skinbaron-widget__wear-badge--fieldtested   { background: var(--wear-ft); }
.skinbaron-widget__wear-badge--wellworn      { background: var(--wear-ww); }
.skinbaron-widget__wear-badge--battlescarred { background: var(--wear-bs); }

.skinbaron-widget__wear-label {
    color:       var(--sb-text);
    font-size:   13px;
    font-weight: 500;
}

/* Preis-Link */
.skinbaron-widget__price {
    display:         block;
    text-align:      right;
    font-size:       15px;
    font-weight:     700;
    color:           var(--sb-gold);
    text-decoration: none;
    white-space:     nowrap;
    transition:      color .15s, text-shadow .15s;
}
.skinbaron-widget__price:hover {
    color:       var(--sb-gold-light);
    text-shadow: 0 0 12px rgba(238, 213, 74, 0.4);
}
.skinbaron-widget__price--none {
    color:       var(--sb-text-dim);
    font-size:   13px;
    font-weight: 400;
}

/* Float-Wert */
.skinbaron-widget__float {
    text-align:           right;
    font-size:            11px;
    color:                var(--sb-text-muted);
    white-space:          nowrap;
    font-variant-numeric: tabular-nums;
}

/* Nicht verfügbar */
.skinbaron-widget__wear--unavailable {
    opacity: .4;
}
.skinbaron-widget__wear--unavailable:hover {
    background: transparent;
}

/* ── Footer ──────────────────────────────────────────────── */
.skinbaron-widget__footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         10px 18px;
    background:      var(--sb-bg-header);
    border-top:      1px solid var(--sb-border);
    font-size:       11px;
    color:           var(--sb-text-muted);
    flex-wrap:       wrap;
    gap:             8px;
}

.skinbaron-widget__cta {
    color:           var(--sb-gold);
    text-decoration: none;
    font-weight:     600;
    font-size:       12px;
    letter-spacing:  0.01em;
    transition:      color .15s;
}
.skinbaron-widget__cta:hover {
    color: var(--sb-gold-light);
    text-decoration: underline;
}

/* ── Error-State ─────────────────────────────────────────── */
.skinbaron-widget--error {
    padding:      16px 18px;
    border-color: rgba(204, 51, 51, 0.5);
    background:   rgba(204, 51, 51, 0.08);
    color:        #ff8080;
}
.skinbaron-widget--error p {
    margin:    0;
    font-size: 13px;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 460px) {
    .skinbaron-widget__wear {
        grid-template-columns: 34px 1fr auto;
    }
    .skinbaron-widget__float {
        display: none;
    }
    .skinbaron-widget__price {
        font-size: 14px;
    }
    .skinbaron-widget__name {
        font-size: 14px;
    }
    .skinbaron-widget__header,
    .skinbaron-widget__footer {
        padding: 11px 14px;
    }
    .skinbaron-widget__wear {
        padding: 8px 14px;
    }
}