/* ─── Alpenrammler Star Rating — Styles ─────────────────────────────────── */

/* ── Variables ── */
:root {
    --asr-gold:      #f5a623;
    --asr-gold-dark: #e8960f;
    --asr-empty:     #ccc;
    --asr-bg:        #1a1a1a;
    --asr-surface:   #242424;
    --asr-border:    #333;
    --asr-text:      #e8e8e8;
    --asr-muted:     #888;
    --asr-accent:    #c0392b;
    --asr-radius:    12px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BADGE — shown on category / archive pages
───────────────────────────────────────────────────────────────────────────── */
.asr-badge {
    display:     inline-flex;
    align-items: center;
    gap:         8px;
    margin:      0 0 10px 0;
    padding:     6px 12px 6px 8px;
    background:  rgba(245, 166, 35, 0.08);
    border:      1px solid rgba(245, 166, 35, 0.25);
    border-radius: 6px;
    font-size:   0;  /* remove inline-block gaps */
}

.asr-badge-stars {
    display:    inline-flex;
    align-items: center;
    gap:        1px;
}

.asr-badge-stars .asr-star {
    font-size:   16px;
    line-height: 1;
}

.asr-badge-score {
    font-size:   14px;
    font-weight: 600;
    color:       var(--asr-gold);
    line-height: 1;
}

.asr-badge-votes {
    font-size:   12px;
    font-weight: 400;
    color:       var(--asr-muted);
    margin-left: 4px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   WIDGET — shown at the bottom of single posts
───────────────────────────────────────────────────────────────────────────── */
.asr-widget {
    margin:        48px 0 32px;
    padding:       2px;
    background:    linear-gradient(135deg, var(--asr-gold) 0%, var(--asr-gold-dark) 100%);
    border-radius: var(--asr-radius);
}

.asr-widget-inner {
    background:    var(--asr-surface);
    border-radius: calc(var(--asr-radius) - 2px);
    padding:       32px 40px;
    text-align:    center;
}

.asr-title {
    font-size:     22px;
    font-weight:   700;
    color:         var(--asr-text);
    margin:        0 0 24px 0;
    letter-spacing: 0.3px;
}

/* ── Current average display ── */
.asr-current {
    margin-bottom: 28px;
}

.asr-stars-display {
    display:     flex;
    justify-content: center;
    gap:         3px;
    margin-bottom: 10px;
}

.asr-star {
    font-size:   28px;
    line-height: 1;
    transition:  transform 0.15s ease;
}

.asr-star-full  { color: var(--asr-gold); }
.asr-star-empty { color: var(--asr-empty); }

/* Half star via clip */
.asr-star-half {
    position:   relative;
    color:      var(--asr-empty);
    display:    inline-block;
}
.asr-star-half::after {
    content:     '★';
    position:    absolute;
    left:        0;
    top:         0;
    color:       var(--asr-gold);
    overflow:    hidden;
    width:       50%;
}

.asr-meta {
    display:     flex;
    align-items: baseline;
    justify-content: center;
    gap:         5px;
    color:       var(--asr-muted);
    font-size:   16px;
}

.asr-average {
    font-size:   28px;
    font-weight: 800;
    color:       var(--asr-gold);
    line-height: 1;
}

.asr-sep, .asr-max {
    color: var(--asr-muted);
    font-size: 18px;
}

.asr-votes {
    font-size:  14px;
    color:      var(--asr-muted);
}

/* ── Form ── */
.asr-form {
    border-top:   1px solid var(--asr-border);
    padding-top:  28px;
}

.asr-label {
    font-size:   16px;
    color:       var(--asr-text);
    margin:      0 0 14px 0;
    font-weight: 500;
}

.asr-stars-input {
    display:         flex;
    justify-content: center;
    gap:             4px;
    margin-bottom:   12px;
}

.asr-star-btn {
    background:  transparent;
    border:      none;
    cursor:      pointer;
    font-size:   36px;
    color:       var(--asr-empty);
    padding:     0 2px;
    transition:  color 0.1s ease, transform 0.1s ease;
    line-height: 1;
}

.asr-star-btn:hover,
.asr-star-btn.asr-hovered,
.asr-star-btn.asr-selected {
    color:     var(--asr-gold);
    transform: scale(1.2);
}

.asr-star-btn:focus {
    outline: 2px solid var(--asr-gold);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Hint ── */
.asr-hint {
    font-size:  13px;
    color:      var(--asr-muted);
    margin:     4px 0 20px;
}

/* ── Submit button ── */
.asr-submit {
    display:       inline-block;
    background:    linear-gradient(135deg, var(--asr-gold) 0%, var(--asr-gold-dark) 100%);
    color:         #111;
    border:        none;
    border-radius: 8px;
    padding:       12px 36px;
    font-size:     16px;
    font-weight:   700;
    cursor:        pointer;
    transition:    opacity 0.2s, transform 0.15s;
    letter-spacing: 0.4px;
}

.asr-submit:disabled {
    opacity: 0.4;
    cursor:  not-allowed;
}

.asr-submit:not(:disabled):hover {
    opacity:   0.9;
    transform: translateY(-1px);
}

/* ── Messages ── */
.asr-message {
    margin-top: 14px;
    min-height: 20px;
    font-size:  15px;
    font-weight: 600;
}

.asr-message.asr-success { color: #4caf50; }
.asr-message.asr-error   { color: #e74c3c; }

/* ── Already voted ── */
.asr-already-voted {
    color:      #4caf50;
    font-size:  16px;
    font-weight: 600;
    margin:     0;
    padding-top: 20px;
    border-top: 1px solid var(--asr-border);
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────────────────────────── */
@media ( max-width: 600px ) {
    .asr-widget-inner { padding: 24px 20px; }
    .asr-star         { font-size: 22px; }
    .asr-star-btn     { font-size: 28px; }
    .asr-average      { font-size: 22px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   STATS BAR — views / votes / average (inside widget)
───────────────────────────────────────────────────────────────────────────── */
.asr-stats-bar {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             12px;
    margin-bottom:   24px;
    padding:         14px 20px;
    background:      rgba(255,255,255,0.04);
    border:          1px solid var(--asr-border);
    border-radius:   8px;
    flex-wrap:       wrap;
}

.asr-stat {
    display:     flex;
    flex-direction: column;
    align-items: center;
    gap:         3px;
    min-width:   70px;
}

.asr-stat-icon {
    font-size:   22px;
    line-height: 1;
}

.asr-stat-value {
    font-size:   20px;
    font-weight: 800;
    color:       var(--asr-text);
    line-height: 1;
}

.asr-stat-label {
    font-size:  11px;
    color:      var(--asr-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.asr-stat-divider {
    font-size:  24px;
    color:      var(--asr-border);
    line-height: 1;
    align-self:  center;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BADGE updates — views + votes in archive list
───────────────────────────────────────────────────────────────────────────── */
.asr-badge {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         6px;
    margin:      0 0 10px 0;
    padding:     6px 12px;
    background:  rgba(245,166,35,0.07);
    border:      1px solid rgba(245,166,35,0.2);
    border-radius: 6px;
    font-size:   13px;
}

.asr-badge-item {
    color:       var(--asr-text);
    font-weight: 500;
}

.asr-badge-sep {
    color:       var(--asr-muted);
}

.asr-badge-stars {
    display:    flex;
    align-items: center;
    gap:        1px;
}

.asr-badge-stars .asr-star {
    font-size:  14px;
}

.asr-badge-score {
    font-size:   13px;
    font-weight: 700;
    color:       var(--asr-gold);
}

@media (max-width: 600px) {
    .asr-stats-bar   { gap: 8px; padding: 12px; }
    .asr-stat-value  { font-size: 17px; }
    .asr-stat-divider{ display: none; }
}