// ═══════════════════════════════════════════════
// FERMENTY — Profile, Review, Logs styles
// ═══════════════════════════════════════════════

// ── Profile avatar ───────────────────────────
.profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: $green-pale;
    color: $green-main;
    font-size: 1.8rem;
    font-weight: $font-weight-bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-avatar-sm {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: $green-pale;
    color: $green-main;
    font-size: 0.9rem;
    font-weight: $font-weight-bold;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

// ── Mood selector ────────────────────────────
.mood-selector {
    flex: 1;
    cursor: pointer;

    input { display: none; }

    .mood-selector-body {
        background: #fff;
        border: $border-width solid $border-color;
        border-radius: $radius-lg;
        padding: $spacing-md;
        text-align: center;
        transition: $transition-base;

        &:hover { border-color: $green-mid; }

        &.selected, input:checked ~ & {
            border-color: $green-mid;
            background: $green-pale;
            border-width: 2px;
        }
    }

    input:checked ~ .mood-selector-body {
        border-color: $green-mid;
        background: $green-pale;
        border-width: 2px;
    }

    .mood-emoji { font-size: 1.8rem; margin-bottom: $spacing-xs; }

    .mood-label {
        font-size: $font-size-sm;
        font-weight: $font-weight-medium;
        color: $text-dark;
    }
}

// ── Star rating ──────────────────────────────
.star-rating {
    direction: rtl;

    .star-label {
        cursor: pointer;

        input { display: none; }

        .star {
            font-size: 2.5rem;
            color: #D3D1C7;
            transition: $transition-base;
        }

        &:hover .star,
        &:hover ~ .star-label .star {
            color: $orange-main;
        }

        input:checked ~ & .star { color: $orange-main; }
    }

    .star-label:has(input:checked) .star,
    .star-label:has(input:checked) ~ .star-label .star {
        color: $orange-main;
    }
}

.review-stars {
    .review-star {
        font-size: 1.8rem;
        color: #D3D1C7;

        &.filled { color: $orange-main; }
    }
}

.review-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #D3D1C7;
    display: inline-block;

    &.filled { background: $green-mid; }
}

// ── Range rating ─────────────────────────────
.range-rating {
    display: flex;
    gap: $spacing-xs;

    .range-btn {
        flex: 1;
        cursor: pointer;
        text-align: center;

        input { display: none; }

        span {
            display: block;
            padding: 6px 4px;
            border: $border-width solid $border-color;
            border-radius: $radius-sm;
            font-size: $font-size-sm;
            color: $text-muted;
            transition: $transition-base;
        }

        &:hover span,
        input:checked ~ span {
            background: $green-pale;
            border-color: $green-mid;
            color: $text-dark;
            font-weight: $font-weight-medium;
        }
    }
}