/* ==========================================================================
   App Store Rating Badge — rating-badge.css  v3.1.0
   Wreath badge design + minimal + stars-only
   ========================================================================== */

/* ─── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  --asr-star-color:        #FFA500;
  --asr-star-empty:        #D1D5DB;

  /* Apple wreath */
  --asr-wreath-apple:      #A0A8B0;
  --asr-score-apple:       #8A9099;
  --asr-store-apple:       #6B7280;

  /* Google Play wreath */
  --asr-wreath-gplay:      #4CAF50;
  --asr-score-gplay:       #388E3C;
  --asr-store-gplay:       #388E3C;

  --asr-font:              -apple-system, BlinkMacSystemFont, "Open Sans", Roboto, sans-serif;
}

/* ─── Wreath badge wrapper ────────────────────────────────────────────────── */
.asr-wreath-badge {
  display:         inline-flex;
  flex-direction:  column;
  align-items:     center;
  gap:             0px;
  font-family:     var(--asr-font);
  text-decoration: none;
  color:           inherit;
  padding:         0px 6px 12px;
  user-select:     none;
  vertical-align: top;
}
a.asr-wreath-badge:hover { opacity: .85; }

/* ─── Wreath + number container ──────────────────────────────────────────── */
.asr-wreath-badge__inner {
  position: relative;
  display:  inline-flex;
  align-items: center;
  justify-content: center;
}

/* The SVG wreath */
.asr-wreath {
  width:  120px;
  height: auto;
  display: block;
}

/* Apple: grey/silver */
.asr-wreath--apple { fill: var(--asr-wreath-apple); }

/* Google Play: green */
.asr-wreath--gplay { fill: var(--asr-wreath-gplay); }

/* ─── Score number (centred over wreath) ─────────────────────────────────── */
.asr-wreath-badge__content {
  position:   absolute;
  top:        50%;
  left:       50%;
  transform:  translate(-50%, -50%);
  text-align: center;
  line-height: 1;
  /* nudge slightly upward to sit in the visual centre of the wreath opening */
  margin-top: -6px;
}

.asr-wreath-badge__score {
  font-size:   45px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1;
}

.asr-wreath-badge          .asr-wreath-badge__score { color: var(--asr-score-apple); }
.asr-wreath-badge--gplay   .asr-wreath-badge__score { color: var(--asr-score-gplay); }

/* ─── Stars row ───────────────────────────────────────────────────────────── */
.asr-wreath-badge__stars {
  display:     flex;
  align-items: center;
}

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

.asr-star { display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* All filled/half stars use the gold colour */
.asr-star--full,
.asr-star--half { color: var(--asr-star-color); }
.asr-star--empty { color: var(--asr-star-empty); }

/* ─── Rating count ────────────────────────────────────────────────────────── */
.asr-wreath-badge__count {
  margin:      0;
  font-size:   12px;
  color:       #9CA3AF;
  font-family: var(--asr-font);
}

/* ─── Store label ─────────────────────────────────────────────────────────── */
.asr-wreath-badge__store {
  margin:      0;
  display:     inline-flex;
  align-items: center;
  gap:         5px;
  font-size:   13px;
  font-weight: 500;
  font-family: var(--asr-font);
}

.asr-wreath-badge__store       { color: var(--asr-store-apple); }
.asr-wreath-badge__store--gplay { color: var(--asr-store-gplay); }

/* ─── Minimal style ───────────────────────────────────────────────────────── */
.asr-minimal {
  display:     inline-flex;
  align-items: center;
  gap:         6px;
  font-family: var(--asr-font);
  font-size:   14px;
}

.asr-minimal__score { font-weight: 700; color: #111827; }
.asr-minimal__count { color: #6B7280; }
.asr-minimal__link  { color: #0073AA; text-decoration: none; font-size: 13px; }
.asr-minimal__link:hover { text-decoration: underline; }

/* ─── Stars-only style ────────────────────────────────────────────────────── */
.asr-stars-only {
  display:     inline-flex;
  align-items: center;
  gap:         1px;
  text-decoration: none;
}
a.asr-stars-only:hover .asr-star { opacity: .85; }

/* ─── Error / empty states ────────────────────────────────────────────────── */
.asr-error {
  padding:    8px 12px;
  background: #FFF3CD;
  border:     1px solid #FBBF24;
  border-radius: 6px;
  font-size:  13px;
  color:      #92400E;
}
.asr-no-rating { color: #6B7280; font-size: 13px; }

/* ─── Loading placeholder ─────────────────────────────────────────────────── */
.asr-placeholder { display: inline-block; min-width: 60px; min-height: 24px; }
.asr-loading {
  display:     inline-flex;
  align-items: center;
  gap:         6px;
  font-family: var(--asr-font);
  font-size:   13px;
  color:       #6B7280;
}
.asr-loading::before {
  content:       '';
  display:       inline-block;
  width:         14px;
  height:        14px;
  border:        2px solid #E5E7EB;
  border-top-color: var(--asr-star-color);
  border-radius: 50%;
  animation:     asr-spin 0.7s linear infinite;
  flex-shrink:   0;
}
@keyframes asr-spin { to { transform: rotate(360deg); } }

/* ─── Dark mode ───────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --asr-wreath-apple: #6B7280;
    --asr-score-apple:  #9CA3AF;
    --asr-store-apple:  #9CA3AF;
    --asr-star-empty:   #4B5563;
  }
  .asr-minimal__score { color: #F9FAFB; }
  .asr-minimal__link  { color: #60A5FA; }
}