/* ------------------------------------------------------------------
   Page rating — "How much did this sound like you?" scale.
   A quiet, centered, optional moment. Uses the per-animal --animal-accent
   theme vars set on the page root.
   ------------------------------------------------------------------ */

.ap-rate {
    margin: 2.5rem auto;
    max-width: 640px;
    padding: 0 1rem;
}

.ap-rate-card {
    text-align: center;
    padding: 1.75rem 1.5rem;
    border: 1px solid var(--animal-accent-border, rgba(201, 168, 76, 0.25));
    border-radius: 1rem;
    background: var(--animal-accent-subtle, rgba(201, 168, 76, 0.06));
}

.ap-rate-q {
    margin: 0 0 1.1rem;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.ap-rate-scale {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.ap-rate-end {
    font-size: 0.78rem;
    opacity: 0.6;
    white-space: nowrap;
}

.ap-rate-dots {
    display: inline-flex;
    gap: 0.6rem;
}

.ap-rate-dot {
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    border: 1.5px solid var(--animal-accent, #c9a84c);
    background: transparent;
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.ap-rate-dot:hover {
    transform: scale(1.15);
}

.ap-rate-dot:focus-visible {
    outline: 2px solid var(--animal-accent, #c9a84c);
    outline-offset: 3px;
}

.ap-rate-dot.is-filled {
    background: var(--animal-accent, #c9a84c);
    box-shadow: 0 0 0 3px var(--animal-accent-glow, rgba(201, 168, 76, 0.2));
}

/* Confirmation / social-proof line */
.ap-rate-result {
    margin: 1rem 0 0;
    font-size: 0.9rem;
    min-height: 1.2em;
    opacity: 0;
    transform: translateY(4px);
    color: var(--animal-accent, #c9a84c);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.ap-rate-result.is-shown {
    opacity: 0.95;
    transform: none;
}

/* Once rated, the scale settles — dots stop inviting hover scaling. */
.ap-rate.has-rated .ap-rate-dot:hover {
    transform: none;
}

@media (max-width: 480px) {
    .ap-rate-end { flex: 1 1 100%; }
    .ap-rate-end:last-child { order: 3; }
}