:root {
    --pathe-dark: #231F20;
    --pathe-yellow: #FBBC09;
    --accent-purple: #6F2DBD;
}

[data-bs-theme="dark"] {
    --pathe-dark: #231F20;
    --pathe-yellow: #FBBC09;
    --accent-purple: #6F2DBD;
}

/* ==========================================================================
   Popcorn Rating Component (Emoji Version)
   ========================================================================== */

.popcorn-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
}

.popcorn-rating__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: default;
    font-size: 1.5rem;
    line-height: 1;
    transition: transform 0.15s ease, filter 0.15s ease, opacity 0.15s ease;
    -webkit-user-select: none;
    user-select: none;
}

/* Emoji states */
.popcorn-off {
    filter: grayscale(100%) brightness(0.7);
    opacity: 0.3;
    -webkit-filter: grayscale(100%) brightness(0.7);
}

.popcorn-on {
    filter: none;
    opacity: 1;
    -webkit-filter: none;
}

/* Input mode styles */
.popcorn-rating--input .popcorn-rating__item {
    cursor: pointer;
}

.popcorn-rating--input .popcorn-rating__item:hover {
    transform: scale(1.2);
}

.popcorn-rating--input .popcorn-rating__item:focus {
    outline: 2px solid var(--accent-purple);
    outline-offset: 2px;
    border-radius: 4px;
}

.popcorn-rating--input .popcorn-rating__item:focus:not(:focus-visible) {
    outline: none;
}

.popcorn-rating--input .popcorn-rating__item:focus-visible {
    outline: 2px solid var(--accent-purple);
    outline-offset: 2px;
    border-radius: 4px;
}

.popcorn-rating--input .popcorn-rating__item:active {
    transform: scale(0.95);
}

/* Small display variant (for rating cards) */
.popcorn-rating--small .popcorn-rating__item {
    width: 20px;
    height: 20px;
    font-size: 0.9rem;
}