/* ===================================
   WP Firebase Rating v2.0 - Frontend CSS
   Fluid sizing · 8 presets · Custom colors
   =================================== */

/* ── Fluid size tokens ─────────────────────────────────────────── */
.wfr-widget {
    --wfr-scale:     1;
    --wfr-star-size: calc(32px * var(--wfr-scale));
    --wfr-stat-val:  calc(20px * var(--wfr-scale));
    --wfr-font-base: calc(13px * var(--wfr-scale));
    --wfr-font-sm:   calc(11px * var(--wfr-scale));
    --wfr-padding:   calc(20px * var(--wfr-scale));
    --wfr-gap:       calc(8px  * var(--wfr-scale));
    --wfr-bar-h:     calc(7px  * var(--wfr-scale));
    --wfr-radius:    calc(14px * var(--wfr-scale));
    --wfr-radius-sm: calc(10px * var(--wfr-scale));
}

/* ── Dark (default) ────────────────────────────────────────────── */
.wfr-widget,
.wfr-widget[data-preset="dark"] {
    --wfr-bg:          #1e1e1e;
    --wfr-bg-stat:     #252525;
    --wfr-border:      #383838;
    --wfr-text:        #ffffff;
    --wfr-text-muted:  #999999;
    --wfr-star-active: #f5a623;
    --wfr-star-off:    #444444;
    --wfr-bar-bg:      #333333;
    --wfr-bar-fill:    #f5a623;
    --wfr-btn-bg:      #2a2a2a;
    --wfr-btn-border:  #555555;
    --wfr-btn-text:    #ffffff;
    --wfr-label:       #777777;
}

/* ── Light ─────────────────────────────────────────────────────── */
.wfr-widget[data-preset="light"] {
    --wfr-bg:          #f7f7f7;
    --wfr-bg-stat:     #eeeeee;
    --wfr-border:      #e0e0e0;
    --wfr-text:        #1a1a1a;
    --wfr-text-muted:  #666666;
    --wfr-star-active: #f59e0b;
    --wfr-star-off:    #d1d5db;
    --wfr-bar-bg:      #e5e7eb;
    --wfr-bar-fill:    #f59e0b;
    --wfr-btn-bg:      #ffffff;
    --wfr-btn-border:  #d1d5db;
    --wfr-btn-text:    #374151;
    --wfr-label:       #9ca3af;
}

/* ── Orange ────────────────────────────────────────────────────── */
.wfr-widget[data-preset="orange"] {
    --wfr-bg:          #1c0f00;
    --wfr-bg-stat:     #251500;
    --wfr-border:      #4a2800;
    --wfr-text:        #fff0e0;
    --wfr-text-muted:  #cc8844;
    --wfr-star-active: #ff6b35;
    --wfr-star-off:    #4a2800;
    --wfr-bar-bg:      #3a1a00;
    --wfr-bar-fill:    #ff6b35;
    --wfr-btn-bg:      #251500;
    --wfr-btn-border:  #ff6b35;
    --wfr-btn-text:    #ff6b35;
    --wfr-label:       #cc7733;
}

/* ── Blue ──────────────────────────────────────────────────────── */
.wfr-widget[data-preset="blue"] {
    --wfr-bg:          #060d1f;
    --wfr-bg-stat:     #0d1730;
    --wfr-border:      #1a3060;
    --wfr-text:        #e8f0ff;
    --wfr-text-muted:  #6b9dc9;
    --wfr-star-active: #3b82f6;
    --wfr-star-off:    #1a3060;
    --wfr-bar-bg:      #1a2f55;
    --wfr-bar-fill:    #3b82f6;
    --wfr-btn-bg:      #0d1730;
    --wfr-btn-border:  #3b82f6;
    --wfr-btn-text:    #3b82f6;
    --wfr-label:       #5b8cbf;
}

/* ── Green ─────────────────────────────────────────────────────── */
.wfr-widget[data-preset="green"] {
    --wfr-bg:          #021510;
    --wfr-bg-stat:     #051e15;
    --wfr-border:      #0a3d20;
    --wfr-text:        #e0fff0;
    --wfr-text-muted:  #4caf80;
    --wfr-star-active: #10b981;
    --wfr-star-off:    #0a3d20;
    --wfr-bar-bg:      #083520;
    --wfr-bar-fill:    #10b981;
    --wfr-btn-bg:      #051e15;
    --wfr-btn-border:  #10b981;
    --wfr-btn-text:    #10b981;
    --wfr-label:       #3d9e6a;
}

/* ── Purple ────────────────────────────────────────────────────── */
.wfr-widget[data-preset="purple"] {
    --wfr-bg:          #0e0820;
    --wfr-bg-stat:     #160e30;
    --wfr-border:      #2d1a5f;
    --wfr-text:        #f0e8ff;
    --wfr-text-muted:  #9b7dd4;
    --wfr-star-active: #8b5cf6;
    --wfr-star-off:    #2d1a5f;
    --wfr-bar-bg:      #231550;
    --wfr-bar-fill:    #8b5cf6;
    --wfr-btn-bg:      #160e30;
    --wfr-btn-border:  #8b5cf6;
    --wfr-btn-text:    #8b5cf6;
    --wfr-label:       #8060bb;
}

/* ── Rose ──────────────────────────────────────────────────────── */
.wfr-widget[data-preset="rose"] {
    --wfr-bg:          #1a0610;
    --wfr-bg-stat:     #250a18;
    --wfr-border:      #5f1a35;
    --wfr-text:        #ffe0ee;
    --wfr-text-muted:  #d47da0;
    --wfr-star-active: #f43f6e;
    --wfr-star-off:    #5f1a35;
    --wfr-bar-bg:      #4a1028;
    --wfr-bar-fill:    #f43f6e;
    --wfr-btn-bg:      #250a18;
    --wfr-btn-border:  #f43f6e;
    --wfr-btn-text:    #f43f6e;
    --wfr-label:       #b05070;
}

/* ── System — inherits WP theme CSS variables ──────────────────── */
.wfr-widget[data-preset="system"] {
    --wfr-bg:          var(--wp--preset--color--base,        var(--background-color, #fff));
    --wfr-bg-stat:     var(--wp--preset--color--base-2,      #f3f3f3);
    --wfr-border:      var(--wp--preset--color--contrast-3,  #e5e5e5);
    --wfr-text:        var(--wp--preset--color--contrast,    #111);
    --wfr-text-muted:  var(--wp--preset--color--contrast-2,  #666);
    --wfr-star-active: var(--wp--preset--color--primary,     #f59e0b);
    --wfr-star-off:    var(--wp--preset--color--contrast-3,  #ccc);
    --wfr-bar-bg:      var(--wp--preset--color--contrast-3,  #e5e5e5);
    --wfr-bar-fill:    var(--wp--preset--color--primary,     #f59e0b);
    --wfr-btn-bg:      var(--wp--preset--color--base,        #fff);
    --wfr-btn-border:  var(--wp--preset--color--primary,     #ccc);
    --wfr-btn-text:    var(--wp--preset--color--primary,     #111);
    --wfr-label:       var(--wp--preset--color--contrast-2,  #888);
    --wfr-radius:      var(--wp--custom--border-radius,      12px);
    --wfr-radius-sm:   var(--wp--custom--border-radius,       8px);
    font-family:       var(--wp--preset--font-family--body,  inherit);
}

/* ── Custom "System Design" — vars injected via style="" ───────── */
/* .wfr-widget[data-preset="custom"] — all vars set inline by PHP  */

/* ═══════════════════════════════════════════════════════════════
   Base layout — always fills content column, no fixed max-width
   ═══════════════════════════════════════════════════════════════ */
.wfr-widget {
    font-family:   inherit;
    background:    var(--wfr-bg);
    border:        1px solid var(--wfr-border);
    border-radius: var(--wfr-radius);
    padding:       var(--wfr-padding);
    margin:        24px 0;
    width:         100%;
    max-width:     100%;
    box-sizing:    border-box;
    color:         var(--wfr-text);
    transition:    background 0.3s, border-color 0.3s;
    animation:     wfr-in 0.35s ease both;
}
.wfr-widget * { box-sizing: border-box; }

/* ── Size modifiers ─────────────────────────────────────────────── */
.wfr-widget[data-size="compact"] { --wfr-scale: 0.82; }
.wfr-widget[data-size="normal"]  { --wfr-scale: 1;    }
.wfr-widget[data-size="large"]   { --wfr-scale: 1.2;  }

/* ── Loading ─────────────────────────────────────────────────────── */
.wfr-loading { display:flex; align-items:center; gap:12px; padding:20px 0; color:var(--wfr-text-muted); font-size:var(--wfr-font-base); }
.wfr-spinner { width:20px; height:20px; border:2px solid var(--wfr-border); border-top-color:var(--wfr-star-active); border-radius:50%; animation:wfr-spin 0.7s linear infinite; flex-shrink:0; }
@keyframes wfr-spin { to { transform:rotate(360deg); } }

/* ── Section title ───────────────────────────────────────────────── */
.wfr-title { font-size:var(--wfr-font-sm); font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--wfr-label); margin:0 0 14px 0; }

/* ── Stars ───────────────────────────────────────────────────────── */
.wfr-stars { display:flex; gap:var(--wfr-gap); margin-bottom:8px; flex-wrap:wrap; }
.wfr-star { font-size:var(--wfr-star-size); cursor:pointer; color:var(--wfr-star-off); transition:color 0.15s, transform 0.15s; line-height:1; user-select:none; -webkit-user-select:none; }
.wfr-star.active { color:var(--wfr-star-active); }
.wfr-star:hover  { transform:scale(1.15); }
.wfr-star.animate { animation:wfr-pop 0.3s ease; }
@keyframes wfr-pop { 0%{transform:scale(1)} 50%{transform:scale(1.4)} 100%{transform:scale(1)} }

/* ── Rating label ────────────────────────────────────────────────── */
.wfr-rating-label { font-size:var(--wfr-font-base); color:var(--wfr-text-muted); min-height:1.2em; margin-bottom:12px; font-weight:500; }

/* ── Submit button ───────────────────────────────────────────────── */
.wfr-submit-btn { width:100%; padding:calc(10px * var(--wfr-scale)) 16px; background:var(--wfr-btn-bg); border:1px solid var(--wfr-btn-border); border-radius:var(--wfr-radius-sm); color:var(--wfr-btn-text); font-size:var(--wfr-font-base); font-weight:500; cursor:pointer; transition:all 0.2s; margin-bottom:16px; font-family:inherit; letter-spacing:0.02em; }
.wfr-submit-btn:hover:not(:disabled) { background:var(--wfr-star-active); border-color:var(--wfr-star-active); color:#fff; transform:translateY(-1px); }
.wfr-submit-btn:disabled { opacity:0.7; cursor:default; }
.wfr-submit-btn.wfr-voted { border-color:var(--wfr-star-active); color:var(--wfr-star-active); opacity:1; }

/* ── Stats ───────────────────────────────────────────────────────── */
.wfr-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(80px, 1fr)); gap:var(--wfr-gap); }
.wfr-stat { background:var(--wfr-bg-stat); border:1px solid var(--wfr-border); border-radius:var(--wfr-radius-sm); padding:calc(12px * var(--wfr-scale)) 8px; text-align:center; }
.wfr-stat-value { font-size:var(--wfr-stat-val); font-weight:700; color:var(--wfr-text); line-height:1.2; margin-bottom:3px; }
.wfr-stat-label { font-size:var(--wfr-font-sm); color:var(--wfr-label); font-weight:500; }
.wfr-stat-stars { display:flex; justify-content:center; gap:2px; margin-bottom:3px; }
.wfr-stat-star  { font-size:calc(14px * var(--wfr-scale)); color:var(--wfr-star-active); }

/* ── Distribution ────────────────────────────────────────────────── */
.wfr-distribution { margin-top:16px; padding-top:16px; border-top:1px solid var(--wfr-border); }
.wfr-dist-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.wfr-dist-row:last-child { margin-bottom:0; }
.wfr-dist-num  { font-size:var(--wfr-font-sm); color:var(--wfr-text-muted); width:12px; text-align:right; flex-shrink:0; }
.wfr-dist-icon { color:var(--wfr-star-active); font-size:calc(13px * var(--wfr-scale)); flex-shrink:0; }
.wfr-dist-bar-wrap { flex:1; background:var(--wfr-bar-bg); height:var(--wfr-bar-h); border-radius:99px; overflow:hidden; min-width:40px; }
.wfr-dist-bar { height:100%; background:var(--wfr-bar-fill); border-radius:99px; transition:width 0.8s cubic-bezier(0.4,0,0.2,1); width:0%; }
.wfr-dist-pct { font-size:var(--wfr-font-sm); color:var(--wfr-text-muted); width:32px; text-align:right; flex-shrink:0; font-weight:600; }

/* ── Setup notice ────────────────────────────────────────────────── */
.wfr-setup-notice { background:#fff3cd; border:1px solid #ffc107; border-radius:6px; padding:12px 16px; font-size:14px; color:#856404; }

/* ── Entrance ────────────────────────────────────────────────────── */
@keyframes wfr-in { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }