/* ═══════════════════════════════════════════════════════════════════════
   ZenWaves Portal Review System — Site-wide comment overlay for Shauna.
   Phase-3review (2026-04-28). Mirrors theme/zenwaves-v5/review-system.js
   doctrine but adapted for the portal pages with namespaced ZP- prefix
   (so it can't collide with WP review system if both ever load on same
   subdomain).
   ═══════════════════════════════════════════════════════════════════════ */

#zpReviewToggle {
  position:fixed;bottom:20px;left:20px;z-index:9500;
  background:rgba(231,76,60,0.18);color:#e74c3c;border:1px solid rgba(231,76,60,0.32);border-radius:50px;
  padding:6px 14px;font-size:11px;font-weight:700;cursor:pointer;
  font-family:'Raleway',-apple-system,sans-serif;
  display:flex;align-items:center;gap:6px;transition:all 0.3s;opacity:0.55;
  letter-spacing:0.4px;
}
#zpReviewToggle:hover { opacity:1; transform:translateY(-1px); }
#zpReviewToggle.active { background:rgba(39,174,96,0.22);color:#27ae60;border-color:rgba(39,174,96,0.45);opacity:1; }
#zpReviewToggle .zp-rt-badge {
  background:#e74c3c;color:#fff;border-radius:50%;min-width:18px;height:18px;
  display:none;align-items:center;justify-content:center;font-size:10px;font-weight:800;padding:0 4px;
}
#zpReviewToggle.active .zp-rt-badge { background:#27ae60; }
#zpReviewToggle .zp-rt-badge.show { display:inline-flex; }

#zpPanelToggle {
  position:fixed;bottom:54px;left:20px;z-index:9500;
  background:rgba(15,184,201,0.18);color:#0fb8c9;border:1px solid rgba(15,184,201,0.35);border-radius:50px;
  padding:5px 12px;font-size:11px;font-weight:600;cursor:pointer;
  font-family:'Raleway',-apple-system,sans-serif;
  display:none;align-items:center;gap:5px;transition:all 0.3s;
}
#zpPanelToggle:hover { transform:translateY(-1px); }

/* Review mode element highlighting */
body.zp-review-mode *:not(#zpReviewToggle):not(#zpReviewPopup):not(#zpReviewPopup *):not(#zpReviewPanel):not(#zpReviewPanel *):not(#zpPanelToggle):not(#zpReviewToast):not(.zw-nav):not(.zw-nav *) {
  cursor:crosshair !important;
}
body.zp-review-mode *:hover { outline:2px solid rgba(231,76,60,0.45) !important;outline-offset:2px; }
body.zp-review-mode #zpReviewToggle:hover,
body.zp-review-mode #zpPanelToggle:hover,
body.zp-review-mode #zpReviewPopup:hover,
body.zp-review-mode #zpReviewPanel:hover,
body.zp-review-mode .zw-nav:hover { outline:none !important; }

/* Comment popup */
#zpReviewPopup {
  position:fixed;z-index:10030;display:none;
  background:linear-gradient(145deg,#1a1a2e,#16213e);
  border:1px solid rgba(231,76,60,0.35);border-radius:14px;padding:18px;
  width:340px;max-width:calc(100vw - 32px);
  box-shadow:0 18px 56px rgba(0,0,0,0.55),0 0 36px rgba(231,76,60,0.10);
  font-family:'Raleway',-apple-system,sans-serif;color:#e8f4f8;
}
#zpReviewPopup.open { display:block; }
#zpReviewPopup h4 { font-family:'Cormorant Garamond',Georgia,serif;color:#e74c3c;font-size:1rem;margin:0 0 6px; }
#zpPopupTarget { font-size:12px;color:rgba(232,244,248,0.45);margin-bottom:10px;font-style:italic;max-height:46px;overflow:hidden;line-height:1.35; }
#zpPopupText {
  width:100%;height:90px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);
  border-radius:9px;color:#e8f4f8;font-family:inherit;font-size:13px;padding:10px;
  resize:vertical;outline:none;box-sizing:border-box;
}
#zpPopupText:focus { border-color:rgba(231,76,60,0.55); }
.zp-rp-type { display:flex;gap:6px;margin:10px 0; }
.zp-rp-type button {
  flex:1;padding:6px;border-radius:7px;font-size:11px;font-weight:700;cursor:pointer;
  border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.04);color:rgba(232,244,248,0.55);
  font-family:inherit;transition:all 0.2s;
}
.zp-rp-type button.selected { border-color:rgba(231,76,60,0.55);color:#e74c3c;background:rgba(231,76,60,0.10); }
.zp-rp-type button.love.selected { border-color:rgba(39,174,96,0.55);color:#27ae60;background:rgba(39,174,96,0.10); }
.zp-rp-type button.idea.selected { border-color:rgba(241,196,15,0.55);color:#f1c40f;background:rgba(241,196,15,0.10); }
.zp-rp-actions { display:flex;gap:8px;margin-top:10px; }
.zp-rp-actions button { flex:1;padding:9px;border-radius:9px;font-size:13px;font-weight:700;cursor:pointer;border:none;font-family:inherit; }
.zp-rp-save { background:linear-gradient(135deg,#e74c3c,#c0392b);color:#fff; }
.zp-rp-cancel { background:rgba(255,255,255,0.06);color:rgba(232,244,248,0.55);border:1px solid rgba(255,255,255,0.1) !important; }
.zp-sync-state { font-size:10px;color:rgba(232,244,248,0.4);margin-top:6px;text-align:right; }
.zp-sync-state.ok { color:#27ae60; }
.zp-sync-state.fail { color:#f1c40f; }

/* Side panel */
#zpReviewPanel {
  position:fixed;top:0;right:-440px;bottom:0;z-index:10025;width:420px;max-width:92vw;
  background:linear-gradient(180deg,#0d1b2a,#1a1a2e);border-left:1px solid rgba(231,76,60,0.22);
  box-shadow:-10px 0 36px rgba(0,0,0,0.5);transition:right 0.4s cubic-bezier(0.4,0,0.2,1);
  overflow-y:auto;padding:22px;font-family:'Raleway',-apple-system,sans-serif;color:#e8f4f8;
}
#zpReviewPanel.open { right:0; }
.zp-rp-header { display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px; }
.zp-rp-header h3 { font-family:'Cormorant Garamond',Georgia,serif;color:#e8f4f8;font-size:1.3rem;margin:0 0 4px; }
.zp-rp-subtitle { font-size:12px;color:rgba(232,244,248,0.4); }
.zp-rp-close { background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.1);color:#e8f4f8;width:34px;height:34px;border-radius:50%;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.zp-rp-stats { display:flex;gap:10px;margin-bottom:14px; }
.zp-rp-stat { flex:1;text-align:center;padding:9px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:8px; }
.zp-rp-stat-num { font-size:1.25rem;font-weight:700;color:#e74c3c;font-family:'Cormorant Garamond',Georgia,serif; }
.zp-rp-stat-label { font-size:10px;color:rgba(232,244,248,0.38);text-transform:uppercase;letter-spacing:0.06em; }
.zp-rp-filters { display:flex;gap:4px;margin-bottom:14px; }
.zp-rp-filters button { flex:1;padding:7px;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.03);color:rgba(232,244,248,0.55);font-family:inherit; }
.zp-rp-filters button.active { background:rgba(231,76,60,0.15);border-color:rgba(231,76,60,0.32);color:#e74c3c; }
.zp-rp-export { width:100%;background:linear-gradient(135deg,#0fb8c9,#0a9bb0);color:#0a0e1a;border:none;border-radius:9px;padding:9px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;margin-bottom:14px; }
.zp-rp-comment { background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:9px;padding:10px;margin-bottom:8px;font-size:12px; }
.zp-rp-comment.done { opacity:0.55; }
.zp-rp-comment-meta { font-size:10px;color:rgba(232,244,248,0.4);margin-bottom:5px;display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap; }
.zp-rp-comment-text { color:rgba(232,244,248,0.85);line-height:1.45;margin-bottom:6px;white-space:pre-wrap;word-break:break-word; }
.zp-rp-comment-actions { display:flex;gap:6px; }
.zp-rp-comment-actions button { padding:4px 10px;border-radius:6px;font-size:10px;font-weight:600;cursor:pointer;border:none;font-family:inherit; }
.zp-rp-act-done { background:rgba(39,174,96,0.15);color:#27ae60;border:1px solid rgba(39,174,96,0.3) !important; }
.zp-rp-act-del { background:rgba(231,76,60,0.10);color:#e74c3c;border:1px solid rgba(231,76,60,0.25) !important; }
.zp-rp-comment-page { font-size:10px;color:rgba(15,184,201,0.7); }

/* Toast */
#zpReviewToast {
  position:fixed;bottom:36px;left:50%;transform:translateX(-50%) translateY(120px);z-index:10050;
  background:rgba(4,13,20,0.96);border:1px solid rgba(15,184,201,0.32);color:#e8f4f8;
  padding:11px 22px;border-radius:11px;font-family:'Raleway',-apple-system,sans-serif;font-size:13px;font-weight:600;
  box-shadow:0 8px 28px rgba(0,0,0,0.5);transition:transform 0.4s cubic-bezier(0.4,0,0.2,1);
  pointer-events:none;
}
#zpReviewToast.show { transform:translateX(-50%) translateY(0); }

@media(max-width:768px) {
  #zpReviewToggle { bottom:14px;left:14px;padding:5px 11px;font-size:10px; }
  #zpPanelToggle { bottom:46px;left:14px;font-size:10px; }
  #zpReviewPopup { width:calc(100vw - 28px);left:14px !important;top:auto !important;bottom:64px !important; }
  #zpReviewPanel { width:100vw;max-width:100vw; }
}