/* Tucker/Mittens Dual Rating System — Paws Made Simple
   Import on every product page: <link rel="stylesheet" href="/components/rating.css">
   Requires: rating.js for interactive functionality */

.dual-rating {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 1rem 0;
}

/* ── Tucker Paw Meter ── */
.tucker-meter {
  flex: 1;
  min-width: 160px;
  background: rgba(196,98,45,.06);
  border: 1px solid rgba(196,98,45,.2);
  border-radius: 10px;
  padding: 1rem;
}

.tucker-meter__label {
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #C4622D;
  margin-bottom: .625rem;
  display: flex;
  align-items: center;
  gap: .375rem;
}

.tucker-meter__paws {
  display: flex;
  gap: .25rem;
  margin-bottom: .5rem;
}

.paw-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: transform .2s, opacity .2s;
  opacity: .25;
  background: rgba(196,98,45,.08);
}

.paw-icon.filled {
  opacity: 1;
  background: rgba(196,98,45,.12);
  transform: scale(1.05);
}

.paw-icon.gold {
  opacity: 1;
  background: rgba(201,168,76,.2);
  animation: paw-glow 1.5s ease-in-out infinite alternate;
}

@keyframes paw-glow {
  from { box-shadow: 0 0 0 rgba(201,168,76,0); }
  to   { box-shadow: 0 0 8px rgba(201,168,76,.5); }
}

/* Level 5 "approved twice" special */
.tucker-meter--five .paw-icon { animation: paw-bounce .6s ease infinite alternate; }
@keyframes paw-bounce {
  from { transform: translateY(0); }
  to   { transform: translateY(-3px); }
}

.tucker-meter__verdict {
  font-size: .8125rem;
  font-style: italic;
  color: #C4622D;
  font-weight: 600;
  line-height: 1.4;
}

.tucker-meter__quote {
  font-size: .75rem;
  color: #8C7B6B;
  margin-top: .375rem;
  font-style: italic;
  line-height: 1.5;
}

/* ── Mittens Disgust Meter ── */
.mittens-meter {
  flex: 1;
  min-width: 160px;
  background: rgba(100,100,130,.06);
  border: 1px solid rgba(100,100,130,.2);
  border-radius: 10px;
  padding: 1rem;
}

.mittens-meter__label {
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #666;
  margin-bottom: .625rem;
}

.mittens-meter__faces {
  display: flex;
  gap: .25rem;
  margin-bottom: .5rem;
}

.cat-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  opacity: .2;
  background: rgba(100,100,130,.08);
  transition: opacity .2s;
}

.cat-icon.filled { opacity: 1; background: rgba(100,100,130,.15); }
.cat-icon.sat-on {
  opacity: 1;
  background: rgba(201,168,76,.15);
  animation: mittens-special 2s ease-in-out infinite;
}

@keyframes mittens-special {
  0%,100% { transform: rotate(0deg); }
  25% { transform: rotate(-2deg); }
  75% { transform: rotate(2deg); }
}

.mittens-meter__verdict {
  font-size: .8125rem;
  color: #888;
  font-weight: 600;
  line-height: 1.4;
}

.mittens-meter__quote {
  font-size: .75rem;
  color: #8C7B6B;
  margin-top: .375rem;
  font-style: italic;
  line-height: 1.5;
}

/* ── Compact variant (for product card listings) ── */
.dual-rating--compact {
  gap: .75rem;
}
.dual-rating--compact .tucker-meter,
.dual-rating--compact .mittens-meter {
  padding: .625rem .875rem;
}
.dual-rating--compact .paw-icon,
.dual-rating--compact .cat-icon {
  width: 22px;
  height: 22px;
  font-size: .8125rem;
}
.dual-rating--compact .tucker-meter__verdict,
.dual-rating--compact .mittens-meter__verdict {
  font-size: .75rem;
}
.dual-rating--compact .tucker-meter__quote,
.dual-rating--compact .mittens-meter__quote {
  display: none;
}

/* ── Greg badge ── */
.greg-badge {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .375rem .875rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  font-size: .75rem;
  color: #8C7B6B;
  margin-top: .5rem;
}
.greg-badge strong { color: #C4622D; }

@media (max-width: 480px) {
  .dual-rating { flex-direction: column; }
  .tucker-meter, .mittens-meter { min-width: 0; }
}