/*
 * DuckWow Rating Pro 4.0
 *
 * Theme integration rule:
 * This plugin does NOT maintain an independent light/dark color system.
 * It inherits the active site's typography, text color and semantic CSS
 * variables. DuckWow/theme remains the single source of truth.
 */

.dw-rating,
.dw-ranking {
  /* Prefer common DuckWow/theme semantic variables when present.
     Fallbacks are deliberately derived from currentColor/inheritance,
     not a second plugin color palette. */
  --dw-accent: var(--primary-color,
    var(--accent-color,
      var(--wp--preset--color--primary, currentColor)));
  --dw-surface: var(--card-bg,
    var(--surface-color,
      var(--wp--preset--color--base, transparent)));
  --dw-surface-2: var(--card-bg-2,
    var(--surface-color-hover,
      color-mix(in srgb, currentColor 5%, transparent)));
  --dw-muted: var(--muted-color,
    var(--text-muted,
      color-mix(in srgb, currentColor 58%, transparent)));
  --dw-border: var(--border-color,
    color-mix(in srgb, currentColor 12%, transparent));
  --dw-track: var(--track-color,
    color-mix(in srgb, currentColor 9%, transparent));

  color: inherit;
  background: var(--dw-surface);
  border: 1px solid var(--dw-border);
  font-family: inherit;
  box-sizing: border-box;
}

.dw-rating *,
.dw-ranking * {
  box-sizing: border-box;
}

.dw-rating {
  margin: 32px 0;
  padding: 26px 28px;
  border-radius: var(--card-radius, 20px);
  box-shadow: var(--card-shadow, 0 10px 35px color-mix(in srgb, currentColor 7%, transparent));
}

.dw-rating-title {
  color: inherit;
  font-size: 21px;
  font-weight: 750;
  line-height: 1.35;
}

.dw-rating-subtitle {
  margin-top: 6px;
  color: var(--dw-muted);
  font-size: 13px;
  line-height: 1.6;
}

.dw-rating-main {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 20px;
}

.dw-rating-number {
  min-width: 92px;
}

.dw-rating-number b {
  color: inherit;
  font-size: 40px;
  letter-spacing: -2px;
  line-height: 1;
}

.dw-rating-number > span,
.dw-rating-number small {
  color: var(--dw-muted);
}

.dw-rating-number > span {
  font-size: 13px;
}

.dw-rating-number small {
  display: block;
  margin-top: 7px;
  font-size: 12px;
}

.dw-stars {
  position: relative;
}

.dw-star {
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, currentColor 16%, transparent);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  transition: transform .15s ease, color .15s ease;
  appearance: none;
}

.dw-star:hover,
.dw-star.active {
  color: var(--dw-accent);
  transform: scale(1.07);
}

.dw-star:focus-visible,
.dw-ranking-tabs button:focus-visible,
.dw-ranking-item:focus-visible {
  outline: 2px solid var(--dw-accent);
  outline-offset: 2px;
}

.dw-hint {
  margin-top: 7px;
  color: var(--dw-muted);
  font-size: 12px;
}

.dw-progress {
  height: 6px;
  margin-top: 22px;
  overflow: hidden;
  background: var(--dw-track);
  border-radius: 99px;
}

.dw-progress i {
  display: block;
  height: 100%;
  background: var(--dw-accent);
  border-radius: 99px;
  transition: width .35s ease;
}

.dw-rating-message {
  min-height: 20px;
  margin-top: 10px;
  color: var(--dw-accent);
  font-size: 12px;
}

.dw-rating-message.error {
  color: inherit;
}

/* Ranking: keep the established compact DuckWow visual hierarchy. */
.dw-ranking {
  padding: 18px;
  border-radius: var(--widget-radius, 18px);
  box-shadow: var(--widget-shadow, 0 8px 28px color-mix(in srgb, currentColor 6%, transparent));
}

.dw-ranking-head {
  margin-bottom: 13px;
}

.dw-ranking-kicker {
  color: var(--dw-accent);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.4px;
}

.dw-ranking h3 {
  margin: 2px 0 0;
  color: inherit;
  font-size: 19px;
  line-height: 1.25;
}

.dw-ranking-tabs {
  display: flex;
  gap: 5px;
  padding: 4px;
  margin-bottom: 12px;
  background: color-mix(in srgb, var(--dw-accent) 10%, var(--dw-surface));
  border-radius: 10px;
}

.dw-ranking-tabs button {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--dw-muted);
  font: inherit;
  font-size: 11px;
  padding: 7px 3px;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
}

.dw-ranking-tabs button.active {
  background: var(--dw-surface-2);
  color: var(--dw-accent);
  font-weight: 700;
  box-shadow: 0 1px 5px color-mix(in srgb, currentColor 9%, transparent);
}

.dw-ranking-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 4px;
  color: inherit !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--dw-border);
  transition: transform .15s ease;
}

.dw-ranking-item:last-child {
  border-bottom: 0;
}

.dw-ranking-item:hover {
  transform: translateX(2px);
}

.dw-ranking-no {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--dw-accent);
  background: color-mix(in srgb, var(--dw-accent) 11%, var(--dw-surface));
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
}

.dw-ranking-info {
  min-width: 0;
  flex: 1;
}

.dw-ranking-info strong {
  display: block;
  overflow: hidden;
  color: inherit;
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dw-ranking-info small {
  display: block;
  margin-top: 3px;
  color: var(--dw-muted);
  font-size: 10px;
}

.dw-ranking-score {
  color: var(--dw-accent);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.dw-ranking-empty {
  padding: 15px 3px;
  color: var(--dw-muted);
  font-size: 12px;
  text-align: center;
}

@media (max-width: 600px) {
  .dw-rating {
    padding: 21px 18px;
  }

  .dw-rating-main {
    gap: 16px;
  }

  .dw-rating-number b {
    font-size: 34px;
  }

  .dw-star {
    font-size: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dw-rating *,
  .dw-ranking * {
    transition: none !important;
  }
}