/**
 * WG User Ratings - Rating Widget Styles
 *
 * Dark Mode Design passend zu WatchGuide 2025
 *
 * @package WG_User_Ratings
 * @version 1.0.0
 */

/* ============================================
   CSS VARIABLES (WatchGuide Design System)
   ============================================ */

:root {
    /* Primary Colors */
    --wgur-orange: #ff6b00;
    --wgur-orange-hover: #ff8533;
    --wgur-orange-light: rgba(255, 107, 0, 0.2);
    --wgur-orange-border: rgba(255, 107, 0, 0.3);

    --wgur-gold: #ffd700;
    --wgur-gold-light: rgba(255, 215, 0, 0.1);

    /* Backgrounds */
    --wgur-bg-primary: #1a1a1a;
    --wgur-bg-secondary: #2d2d2d;
    --wgur-bg-tertiary: #3a3a3a;

    /* Text */
    --wgur-text-primary: #ffffff;
    --wgur-text-secondary: #e0e0e0;
    --wgur-text-tertiary: #b0b0b0;
    --wgur-text-muted: #808080;

    /* Stars */
    --wgur-star-empty: #4a4a4a;
    --wgur-star-filled: #ffd700;
    --wgur-star-hover: #ffed4e;

    /* Accents */
    --wgur-green: #00d9a3;
    --wgur-red: #ff3860;
}

/* ============================================
   MAIN WIDGET CONTAINER
   ============================================ */

.wgur-rating-widget {
    background: var(--wgur-bg-secondary);
    border-radius: 16px;
    padding: 24px;
    margin: 24px 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ============================================
   SECTION HEADERS
   ============================================ */

.wgur-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--wgur-orange-border);
}

.wgur-section-header .wgur-icon {
    font-size: 20px;
}

.wgur-section-header .wgur-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--wgur-orange);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============================================
   COMMUNITY RATING DISPLAY
   ============================================ */

.wgur-community-rating {
    margin-bottom: 24px;
}

.wgur-average-display {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.wgur-average-value {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.wgur-average-value .wgur-number {
    font-size: 36px;
    font-weight: 900;
    color: var(--wgur-gold);
    line-height: 1;
}

.wgur-average-value .wgur-max {
    font-size: 16px;
    color: var(--wgur-text-tertiary);
}

.wgur-average-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--wgur-bg-tertiary);
    border-radius: 100px;
    border: 1px solid var(--wgur-orange-border);
}

.wgur-average-label .wgur-label-emoji {
    font-size: 18px;
}

.wgur-average-label .wgur-label-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--wgur-text-primary);
}

.wgur-count {
    margin-top: 12px;
    font-size: 13px;
    color: var(--wgur-text-tertiary);
}

/* No Ratings State */
.wgur-no-ratings {
    text-align: center;
    padding: 20px;
    background: var(--wgur-bg-tertiary);
    border-radius: 12px;
}

.wgur-no-ratings p {
    margin: 0;
    color: var(--wgur-text-tertiary);
    font-size: 14px;
}

.wgur-no-ratings .wgur-hint {
    margin-top: 8px;
    font-size: 12px;
    color: var(--wgur-orange);
}

/* ============================================
   STARS DISPLAY (READ-ONLY)
   ============================================ */

.wgur-stars-readonly {
    display: flex;
    gap: 2px;
}

.wgur-stars-readonly .wgur-star {
    font-size: 24px;
    line-height: 1;
    transition: color 0.2s ease;
}

.wgur-stars-readonly .wgur-star.filled {
    color: var(--wgur-star-filled);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

.wgur-stars-readonly .wgur-star.half {
    color: var(--wgur-star-filled);
    background: linear-gradient(90deg, var(--wgur-star-filled) 50%, var(--wgur-star-empty) 50%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.wgur-stars-readonly .wgur-star.empty {
    color: var(--wgur-star-empty);
}

/* ============================================
   USER RATING SECTION
   ============================================ */

.wgur-user-rating-section {
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.wgur-rating-input {
    background: var(--wgur-bg-tertiary);
    border-radius: 12px;
    padding: 16px;
}

/* ============================================
   STARS INPUT (CLICKABLE)
   ============================================ */

.wgur-stars-clickable,
.wgur-stars-input .wgur-stars-clickable {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin-bottom: 12px;
}

.wgur-star-input {
    position: relative;
    width: 32px;
    height: 32px;
    cursor: pointer;
}

.wgur-star-input .wgur-star-half,
.wgur-star-input .wgur-star-full {
    position: absolute;
    top: 0;
    font-size: 32px;
    line-height: 1;
    color: var(--wgur-star-empty);
    transition: all 0.15s ease;
    overflow: hidden;
}

.wgur-star-input .wgur-star-half {
    left: 0;
    width: 50%;
    clip-path: inset(0 50% 0 0);
}

.wgur-star-input .wgur-star-full {
    left: 0;
    width: 100%;
}

/* Hover & Active States - Sterne golden wenn bewertet */
.wgur-star-input .wgur-star-half.active,
.wgur-star-input .wgur-star-full.active,
.wgur-stars-input .wgur-star-input .wgur-star-half.active,
.wgur-stars-input .wgur-star-input .wgur-star-full.active,
.wgur-rating-input .wgur-stars-input .wgur-star-input .wgur-star-half.active,
.wgur-rating-input .wgur-stars-input .wgur-star-input .wgur-star-full.active,
.wgur-rating-widget .wgur-star-half.active,
.wgur-rating-widget .wgur-star-full.active,
.wgur-stars-clickable .wgur-star-input .wgur-star-half.active,
.wgur-stars-clickable .wgur-star-input .wgur-star-full.active,
.wgur-user-rating-section .wgur-star-half.active,
.wgur-user-rating-section .wgur-star-full.active,
body .wgur-rating-widget .wgur-stars-clickable .wgur-star-half.active,
body .wgur-rating-widget .wgur-stars-clickable .wgur-star-full.active {
    color: #ffd700 !important;
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.6) !important;
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.4));
}

/* Extra Spezifität für goldene Sterne nach erfolgreicher Bewertung */
.wgur-rating-widget[data-has-rating="true"] .wgur-star-half.active,
.wgur-rating-widget[data-has-rating="true"] .wgur-star-full.active {
    color: #ffd700 !important;
    text-shadow: 0 0 16px rgba(255, 215, 0, 0.8) !important;
}

.wgur-star-input:hover .wgur-star-half,
.wgur-star-input:hover .wgur-star-full {
    transform: scale(1.1);
}

.wgur-stars-clickable:hover .wgur-star-input .wgur-star-half.preview,
.wgur-stars-clickable:hover .wgur-star-input .wgur-star-full.preview,
.wgur-stars-input:hover .wgur-star-input .wgur-star-half.preview,
.wgur-stars-input:hover .wgur-star-input .wgur-star-full.preview {
    color: var(--wgur-star-hover);
}

/* ============================================
   USER RATING DISPLAY
   ============================================ */

.wgur-user-rating-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.wgur-your-rating {
    font-size: 20px;
    font-weight: 700;
    color: var(--wgur-gold);
}

.wgur-your-label {
    font-size: 14px;
    color: var(--wgur-text-secondary);
    padding: 4px 12px;
    background: rgba(255, 215, 0, 0.1);
    border-radius: 100px;
}

.wgur-delete-rating {
    background: transparent;
    border: 1px solid var(--wgur-red);
    color: var(--wgur-red);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    opacity: 0.6;
}

.wgur-delete-rating:hover {
    background: var(--wgur-red);
    color: white;
    opacity: 1;
}

.wgur-click-hint {
    text-align: center;
    font-size: 13px;
    color: var(--wgur-text-muted);
}

/* ============================================
   HOVER PREVIEW
   ============================================ */

.wgur-hover-preview {
    text-align: center;
    padding: 8px;
    background: var(--wgur-bg-secondary);
    border-radius: 8px;
    margin-top: 8px;
}

.wgur-preview-rating {
    font-size: 18px;
    font-weight: 700;
    color: var(--wgur-gold);
    margin-right: 8px;
}

.wgur-preview-label {
    font-size: 14px;
    color: var(--wgur-text-secondary);
}

/* ============================================
   LOGIN REQUIRED
   ============================================ */

.wgur-login-required {
    text-align: center;
    padding: 20px;
    background: var(--wgur-bg-tertiary);
    border-radius: 12px;
}

.wgur-login-required p {
    margin: 0 0 16px 0;
    color: var(--wgur-text-tertiary);
    font-size: 14px;
}

.wgur-login-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.wgur-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
}

.wgur-btn-primary {
    background: linear-gradient(135deg, var(--wgur-orange), var(--wgur-orange-hover));
    color: white;
}

.wgur-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 107, 0, 0.4);
    color: white;
}

.wgur-btn-secondary {
    background: var(--wgur-bg-secondary);
    color: var(--wgur-text-secondary);
    border: 1px solid var(--wgur-orange-border);
}

.wgur-btn-secondary:hover {
    background: var(--wgur-orange-light);
    color: var(--wgur-text-primary);
    border-color: var(--wgur-orange);
}

/* ============================================
   MESSAGES (SUCCESS / ERROR)
   ============================================ */

.wgur-messages {
    margin-top: 16px;
}

.wgur-success,
.wgur-error {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    display: none;
    align-items: center;
    gap: 8px;
}

.wgur-success {
    background: rgba(0, 217, 163, 0.1);
    border: 1px solid var(--wgur-green);
    color: var(--wgur-green);
}

.wgur-success.show {
    display: flex;
    animation: slideIn 0.3s ease;
}

.wgur-error {
    background: rgba(255, 56, 96, 0.1);
    border: 1px solid var(--wgur-red);
    color: var(--wgur-red);
}

.wgur-error.show {
    display: flex;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   LOADING STATE
   ============================================ */

.wgur-rating-widget.loading {
    opacity: 0.7;
    pointer-events: none;
}

.wgur-rating-widget.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 3px solid var(--wgur-orange-light);
    border-top-color: var(--wgur-orange);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .wgur-rating-widget {
        padding: 16px;
    }

    .wgur-average-display {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .wgur-stars-readonly .wgur-star {
        font-size: 20px;
    }

    .wgur-star-input {
        width: 28px;
        height: 28px;
    }

    .wgur-star-input .wgur-star-half,
    .wgur-star-input .wgur-star-full {
        font-size: 28px;
    }

    .wgur-average-value .wgur-number {
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .wgur-stars-clickable {
        gap: 2px;
    }

    .wgur-star-input {
        width: 24px;
        height: 24px;
    }

    .wgur-star-input .wgur-star-half,
    .wgur-star-input .wgur-star-full {
        font-size: 24px;
    }

    .wgur-login-buttons {
        flex-direction: column;
    }

    .wgur-btn {
        width: 100%;
    }
}

/* ============================================
   SOCIAL PROOF BOX v1.0
   ============================================ */

.wgur-social-proof {
    margin: 20px 0;
    padding: 16px;
    background: var(--wgur-bg-tertiary);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* 0 Bewertungen: CTA State */
.wgur-sp-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px;
}

.wgur-sp-cta .wgur-sp-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.wgur-sp-cta .wgur-sp-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wgur-sp-cta .wgur-sp-text strong {
    font-size: 15px;
    color: var(--wgur-orange);
}

.wgur-sp-cta .wgur-sp-text span {
    font-size: 13px;
    color: var(--wgur-text-tertiary);
}

/* 1-4 Bewertungen: Early State */
.wgur-sp-early {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px;
}

.wgur-sp-early .wgur-sp-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.wgur-sp-early .wgur-sp-text {
    font-size: 14px;
    color: var(--wgur-text-secondary);
}

/* 5-19 Bewertungen: Recommend Badge */
.wgur-sp-recommend {
    text-align: center;
    padding: 8px;
}

.wgur-sp-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 100px;
    font-weight: 600;
}

.wgur-sp-badge-positive {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.1));
    border: 1px solid rgba(16, 185, 129, 0.4);
}

.wgur-sp-badge-positive .wgur-sp-percent {
    font-size: 22px;
    font-weight: 800;
    color: #10b981;
}

.wgur-sp-badge-positive .wgur-sp-label {
    font-size: 13px;
    color: #34d399;
}

.wgur-sp-badge-mixed {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(251, 191, 36, 0.1));
    border: 1px solid rgba(251, 191, 36, 0.4);
}

.wgur-sp-badge-mixed .wgur-sp-percent {
    font-size: 22px;
    font-weight: 800;
    color: #fbbf24;
}

.wgur-sp-badge-mixed .wgur-sp-label {
    font-size: 13px;
    color: #fcd34d;
}

.wgur-sp-badge-negative {
    background: linear-gradient(135deg, rgba(156, 163, 175, 0.15), rgba(156, 163, 175, 0.05));
    border: 1px solid rgba(156, 163, 175, 0.3);
}

.wgur-sp-badge-negative .wgur-sp-icon-small {
    font-size: 18px;
}

.wgur-sp-badge-negative .wgur-sp-label {
    font-size: 13px;
    color: var(--wgur-text-tertiary);
}

/* 20+ Bewertungen: Full Social Proof */
.wgur-sp-full {
    padding: 8px;
}

.wgur-sp-stats {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 16px;
}

.wgur-sp-stat {
    text-align: center;
}

.wgur-sp-stat-value {
    display: block;
    font-size: 28px;
    font-weight: 800;
    color: var(--wgur-gold);
    line-height: 1;
}

.wgur-sp-stat-label {
    font-size: 12px;
    color: var(--wgur-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

.wgur-sp-verdict {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
}

.wgur-sp-verdict-excellent {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.08));
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #34d399;
}

.wgur-sp-verdict-excellent span {
    font-size: 18px;
}

.wgur-sp-verdict-good {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.08));
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #60a5fa;
}

.wgur-sp-verdict-good span {
    font-size: 18px;
}

/* Social Proof Responsive */
@media (max-width: 480px) {
    .wgur-sp-stats {
        gap: 20px;
    }

    .wgur-sp-stat-value {
        font-size: 24px;
    }

    .wgur-sp-badge {
        flex-direction: column;
        gap: 4px;
        padding: 10px 16px;
    }

    .wgur-sp-badge-positive .wgur-sp-percent,
    .wgur-sp-badge-mixed .wgur-sp-percent {
        font-size: 20px;
    }
}