/* ============================================================
   Homepage "New look" beta — ribbon + feedback widget
   Loaded on the front page for the toggle/invite ribbon (any view)
   and the logged-in feedback widget (new view only).
   ============================================================ */

/* ---------- Top ribbon (invite to try / switch back) ---------- */
.cc-beta-ribbon{
  font-family:'Source Sans 3', system-ui, sans-serif;
  font-size:1.02rem; line-height:1.4;
  display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap;
  padding:11px 18px; text-align:center;
}
.cc-beta-ribbon .cc-rib-text{font-weight:600}
.cc-beta-ribbon a.cc-rib-btn{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; text-decoration:none; padding:8px 18px; border-radius:999px;
  font-size:1rem; white-space:nowrap;
}
.cc-beta-ribbon a.cc-rib-link{font-weight:600; text-decoration:underline; white-space:nowrap}

/* Invite (shown on classic view) — warm, inviting */
.cc-beta-ribbon.is-invite{background:linear-gradient(135deg,#165441,#217256);color:#fff}
.cc-beta-ribbon.is-invite .cc-rib-btn{background:#fff;color:#0e3a2c}
.cc-beta-ribbon.is-invite .cc-rib-btn:hover{background:#e7efe9}
.cc-beta-ribbon.is-invite a.cc-rib-link{color:#d7e8de}
.cc-beta-ribbon.is-invite a.cc-rib-link:hover{color:#fff}

/* Switch-back (shown on new view) — calm, informational */
.cc-beta-ribbon.is-preview{background:#fff7e8;color:#5b4626;border-bottom:1px solid #f0dcae}
.cc-beta-ribbon.is-preview .badge-beta{
  background:#b4661f;color:#fff;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  font-size:.72rem;padding:3px 9px;border-radius:999px;
}
.cc-beta-ribbon.is-preview a.cc-rib-link{color:#8f4f15}
.cc-beta-ribbon.is-preview a.cc-rib-link:hover{color:#5b4626}

/* ---------- Feedback widget (logged-in, new view) ---------- */
.cc-fb{
  position:fixed; left:20px; bottom:20px; z-index:2000;
  width:320px; max-width:calc(100vw - 40px);
  font-family:'Source Sans 3', system-ui, sans-serif;
  background:#fffdf8; border:1.5px solid #e3dccb; border-radius:16px;
  box-shadow:0 10px 34px rgba(20,50,40,.22); overflow:hidden;
  transform:translateY(14px); opacity:0; animation:ccfbIn .35s ease .8s forwards;
}
@keyframes ccfbIn{to{transform:none;opacity:1}}
.cc-fb.is-hidden{display:none}
.cc-fb-head{display:flex;align-items:flex-start;gap:10px;padding:16px 16px 4px}
.cc-fb-head .cc-fb-title{font-weight:700;color:#0e3a2c;font-size:1.08rem;line-height:1.3;font-family:'Lora',serif}
.cc-fb-x{margin-left:auto;background:none;border:0;color:#9aa39c;cursor:pointer;font-size:1.2rem;line-height:1;padding:2px 4px}
.cc-fb-x:hover{color:#4f5a52}
.cc-fb-body{padding:6px 16px 16px}
.cc-fb-sub{color:#4f5a52;font-size:.96rem;margin:0 0 12px}

.cc-fb-rate{display:flex;gap:10px}
.cc-fb-rate button{
  flex:1; display:flex;flex-direction:column;align-items:center;gap:4px;
  background:#fff;border:1.5px solid #cdd9d0;border-radius:12px;padding:12px 8px;
  cursor:pointer;font:inherit;font-weight:600;color:#0e3a2c;transition:all .12s ease;
}
.cc-fb-rate button:hover{border-color:#217256;background:#e7efe9}
.cc-fb-rate button i{font-size:1.5rem}
.cc-fb-rate button.up:hover{color:#1c7a4a}
.cc-fb-rate button.down:hover{color:#b3372c}
.cc-fb-rate button.sel{border-color:#217256;background:#e7efe9;box-shadow:0 0 0 2px rgba(33,114,86,.25)}

/* Comment step */
.cc-fb-comment{display:none;margin-top:12px}
.cc-fb.show-comment .cc-fb-comment{display:block}
.cc-fb.show-comment .cc-fb-rate{opacity:.65;pointer-events:none}
.cc-fb-comment textarea{
  width:100%;font:inherit;font-size:1rem;padding:10px 12px;border:1.5px solid #cdd9d0;
  border-radius:10px;resize:vertical;min-height:70px;color:#29302b;background:#fff;
}
.cc-fb-comment textarea:focus{outline:none;border-color:#217256}
.cc-fb-actions{display:flex;gap:8px;margin-top:10px}
.cc-fb-actions button{
  flex:1;font:inherit;font-weight:700;font-size:1rem;padding:11px 12px;border-radius:10px;cursor:pointer;border:2px solid transparent;
}
.cc-fb-send{background:#165441;color:#fff}
.cc-fb-send:hover{background:#0e3a2c}
.cc-fb-skip{background:#fff;color:#4f5a52;border-color:#cdd9d0}
.cc-fb-skip:hover{background:#f1ede3}

/* Thank-you state */
.cc-fb-thanks{display:none;padding:20px 16px;text-align:center}
.cc-fb.is-done .cc-fb-body,.cc-fb.is-done .cc-fb-head .cc-fb-title{display:none}
.cc-fb.is-done .cc-fb-thanks{display:block}
.cc-fb-thanks i{color:#217256;font-size:2rem;display:block;margin-bottom:8px}
.cc-fb-thanks p{margin:0;color:#0e3a2c;font-weight:600}

@media (max-width:560px){
  .cc-fb{left:12px;right:12px;bottom:12px;width:auto}
}