/* === NOW FEED – POLLS v2 + COMMENTS Frost (Integrated) ===
   - Gradient Poll Card + Calligraffitti (Classic & Versus)
   - Text-Polls Frost + Results Fixes
   - Comment Section Frosty Cards
   - Bottom Comment Composer (Frosty) + Toggle Logik
==================================================================== */

/* Font für Option-Buttons */
@import url("https://fonts.googleapis.com/css2?family=Calligraffitti&display=swap");

/* ---------------- Global Poll Font Scale (Desktop smaller, Mobile OG) ---------------- */
.now-feed{ --poll-font-scale: .65; }              /* Desktop/Large: 35% kleiner */
@media (max-width: 768px){
  .now-feed{ --poll-font-scale: 1; }              /* Mobile: OG-Größe */
}

/* ============================= POLLS ============================= */

/* Außenkarte */
.now-feed #youzify .activity-item .youzify-poll-content{
  background: linear-gradient(90deg, rgba(142,88,176,0.78) 0%, rgba(255,92,92,0.78) 50%, rgba(255,149,0,0.78) 100%) !important;
  border-radius: 20px !important;
  padding: 14px !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.25) !important;
  border: 0 !important;
}

/* Innen transparent lassen */
.now-feed #youzify .activity-item .youzify-poll-inner-content,
.now-feed #youzify .activity-item .youzify-poll-holder,
.now-feed #youzify .activity-item .youzify-poll-options{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Fragezeile + feine Trennlinie */
.now-feed #youzify .activity-item .youzify-poll-question{
  background: rgba(255,255,255,0.35) !important;
  border-radius: 12px !important;
  color: #fff !important;
  padding: 12px 14px !important;
  margin-bottom: 10px !important;
}
.now-feed #youzify .activity-item .youzify-poll-question + *{
  border-top: 1px solid rgba(255,255,255,0.28) !important;
  padding-top: 12px !important;
}

/* Actions unten */
.now-feed #youzify .activity-item .yzap-poll-actions,
.now-feed #youzify .activity-item .youzify-poll-actions{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 8px 0 !important;
  border-radius: 20px !important;
}

/* Submit/Results: Rundungen */
.now-feed #youzify .activity-item .yzap-poll-actions button,
.now-feed #youzify .activity-item .yzap-poll-actions .button,
.now-feed #youzify .activity-item .yzap-poll-actions input[type="submit"],
.now-feed #youzify .activity-item .yzap-poll-actions a.button{
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* --- “See Results” (Front) — skaliert über --poll-font-scale --- */
.now-feed #youzify .activity-item .yzap-poll-actions .yzap-see-poll-results,
.now-feed #youzify .activity-item .yzap-poll-actions .yzap-see-versus-poll-results,
.now-feed #youzify .activity-item .youzify-poll-actions .youzify-see-poll-results{
  color: #fff !important;
  font-size: calc(1.19em * var(--poll-font-scale)) !important; /* Desktop .65, Mobile 1 */
  font-weight: 700 !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.25) !important;
}
.now-feed #youzify .activity-item .yzap-poll-actions .yzap-see-poll-results i,
.now-feed #youzify .activity-item .yzap-poll-actions .yzap-see-versus-poll-results i,
.now-feed #youzify .activity-item .youzify-poll-actions .youzify-see-poll-results i{
  color: currentColor !important;
}

/* ========================================================= */
/* CLASSIC – blaubraune Buttonleiste + Typo */
.now-feed #youzify .activity-item .yzap-classic-option-item,
.now-feed #youzify .activity-item .yzap-option-item{
  background: transparent !important; border: 0 !important;
}
.now-feed #youzify .activity-item .youzify-classic-poll-options label.yzap-classic-option-item .yzap-classic-option-label{
  background: linear-gradient(88deg, rgba(60,77,92,1) 0%, rgba(86,95,168,1) 50%, rgba(60,77,92,1) 100%) !important;
  color: #fff !important; border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 12px !important; padding: 12px 14px !important; text-align: center !important;
}
/* skaliert über --poll-font-scale */
.now-feed #youzify .activity-item .yzap-classic-option-item .yzap-poll-item-title{
  font-family: "Calligraffitti", cursive !important;
  font-size: calc(1.32em * var(--poll-font-scale)) !important;  /* OG 132% */
  color: #fff !important;
  font-weight: 700 !important; letter-spacing: 1px !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.25) !important; text-transform: none !important;
}
.now-feed #youzify .activity-item .yzap-option-item-img img{ border-radius: 14px !important; }

/* ========================================================= */
/* VERSUS – gleiche Leiste (skaliert) */
.now-feed #youzify .activity-item .yzap-versus,
.now-feed #youzify .activity-item .yzap-versus-vote-option{ background: transparent !important; border: 0 !important; }
.now-feed #youzify .activity-item .yzap-versus-option-label{
  background: linear-gradient(88deg, rgba(60,77,92,1) 0%, rgba(86,95,168,1) 50%, rgba(60,77,92,1) 100%) !important;
  color: #fff !important; border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 12px !important; padding: 12px 14px !important; text-align: center !important;
}
.now-feed #youzify .activity-item .yzap-versus-option-label .yzap-poll-item-title{
  font-family: "Calligraffitti", cursive !important;
  font-size: calc(1.32em * var(--poll-font-scale)) !important;  /* OG 132% */
  color: #fff !important;
  font-weight: 700 !important; letter-spacing: 1px !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.25) !important; text-transform: none !important;
}

/* ========================================================= */
/* TEXT-POLLS – Vorderseite milchig + Abstand */
.now-feed #youzify .activity-item
  .youzify-poll-options-holder.youzify-poll-type-checkbox .youzify-poll-item-label{
  display:flex!important; align-items:center!important; gap:20px!important;
  background:rgba(255,255,255,0.35)!important;
  backdrop-filter:blur(18px) saturate(180%)!important; -webkit-backdrop-filter:blur(18px) saturate(180%)!important;
  border:1px solid rgba(255,255,255,0.25)!important; border-radius:12px!important; color:#fff!important;
  box-shadow:0 8px 20px rgba(0,0,0,0.18)!important; padding:12px 14px!important;
}
.now-feed #youzify .activity-item
  .youzify-poll-options-holder.youzify-poll-type-checkbox .youzify-poll-item-title{ color:#fff!important; }

/* ======================= RESULTS (TEXT POLL) ======================= */
.now-feed #youzify .activity-item .youzify-poll-content .youzify-poll-options-result .youzify-poll-item{
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}
.now-feed #youzify .activity-item .youzify-poll-content
  .youzify-poll-options-result .youzify-poll-item .youzify-poll-result-content{
  background: rgba(255,255,255,0.18) !important; backdrop-filter: blur(18px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%) !important; border: 1px solid rgba(255,255,255,0.22) !important;
  border-radius: 12px !important; color: #fff !important; box-shadow: 0 8px 20px rgba(0,0,0,0.18) !important; padding: 12px 14px !important;
}
.now-feed #youzify .activity-item .youzify-poll-content
  .youzify-poll-options-result .youzify-result-head,
.now-feed #youzify .activity-item .youzify-poll-content
  .youzify-poll-options-result .youzify-result-title{ color: #fff !important; }
.now-feed #youzify .activity-item .youzify-poll-content
  .youzify-poll-options-result .youzify-poll-result-content .youzify-result-bar-area,
.now-feed #youzify .activity-item .youzify-poll-content
  .youzify-poll-options-result .youzify-poll-result-content .youzify-result-bar{ background: transparent !important; }

/* SUBMIT-Button */
.now-feed #youzify .activity-item .yzap-poll-actions .button,
.now-feed #youzify .activity-item .yzap-poll-actions button,
.now-feed #youzify .activity-item .yzap-poll-actions input[type="submit"]{
  background-color: var(--youzify-poll-blue, #4aa3ff) !important; color:#fff !important;
  opacity:1!important; filter:none!important; border-radius:12px!important;
}
.now-feed #youzify .activity-item .yzap-poll-actions .button[disabled],
.now-feed #youzify .activity-item .yzap-poll-actions button[disabled],
.now-feed #youzify .activity-item .yzap-poll-actions .youzify-submit-vote.youzify-disable-vote{
  opacity:1!important; filter:none!important;
}

/* --- “Back to Poll” (Backside) — skaliert über --poll-font-scale --- */
.now-feed #youzify .activity-item .yzap-poll-actions .yzap-see-poll-options,
.now-feed #youzify .activity-item .youzify-poll-actions .youzify-see-poll-options{
  color:#fff!important;
  font-size: calc(1.19em * var(--poll-font-scale)) !important;  /* Desktop .65, Mobile 1 */
  font-weight:700!important;
  text-shadow:0 1px 8px rgba(0,0,0,0.25)!important;
}
.now-feed #youzify .activity-item .yzap-poll-actions .yzap-see-poll-options i,
.now-feed #youzify .activity-item .youzify-poll-actions .youzify-see-poll-options i{ color:currentColor!important; }

/* ============================ COMMENTS ============================ */

/* Wrapper neutralisieren */
.now-feed #youzify .activity-comments,
.now-feed #youzify .activity-comments > ul{ background:transparent!important; border:0!important; box-shadow:none!important; }

/* Re-Layout: Composer oben + engerer Abstand */
.now-feed #youzify .activity-item .activity-comments{
  display:flex!important; flex-direction:column!important; gap:6px!important; /* enger */
}

/* ▼▼ NEW: Composer (form.ac-form) ganz oben, Liste darunter ▼▼ */
.now-feed #youzify .activity-item .activity-comments > form.ac-form{ order: 0 !important; }
.now-feed #youzify .activity-item .activity-comments > ul{ order: 1 !important; }

/* Sichtbarkeit NUR über .is-open steuern */
.now-feed #youzify .activity-item .activity-comments > ul{ display:none!important; margin-top:2px!important; }
.now-feed #youzify .activity-item .activity-comments > form.ac-form{ display:none!important; }

/* geöffnet */
.now-feed #youzify .activity-item .activity-comments.is-open > ul{ display:block!important; }
.now-feed #youzify .activity-item .activity-comments.is-open > form.ac-form{ display:block!important; }

/* Kartenlook für einzelne Comments */
.now-feed #youzify .activity-comments > ul > li{
  background:rgba(255,255,255,0.16)!important;
  backdrop-filter:blur(18px) saturate(160%)!important; -webkit-backdrop-filter:blur(18px) saturate(160%)!important;
  border:1px solid rgba(255,255,255,0.22)!important; border-radius:14px!important;
  padding:12px 14px!important; margin:8px 0!important;
}

/* Innere Container transparent */
.now-feed #youzify .activity-comments > ul > li .comment-container,
.now-feed #youzify .activity-comments > ul > li .comment-inner,
.now-feed #youzify .activity-comments > ul > li .acomment-content,
.now-feed #youzify .activity-comments > ul > li .acomment-attachments,
.now-feed #youzify .activity-comments > ul > li .acomment-meta,
.now-feed #youzify .activity-comments > ul > li .acomment-options{
  background:transparent!important; border:0!important; box-shadow:none!important;
}

/* Reply-Textarea Frost */
.now-feed #youzify .activity-comments .ac-textarea textarea{
  background:rgba(255,255,255,0.25)!important; border:1px solid rgba(255,255,255,0.28)!important; color:#111!important; border-radius:10px!important;
}

/* ====================== BOTTOM COMMENT COMPOSER ====================== */

.now-feed #youzify form.ac-form,
.now-feed #youzify .ac-form{ background:transparent!important; border:0!important; box-shadow:none!important; }

.now-feed #youzify .ac-form .ac-reply-content,
.now-feed #youzify .ac-reply .ac-reply-content,
.now-feed #youzify .ac-reply-wrap .ac-reply-content{
  background:rgba(255,255,255,0.16)!important; backdrop-filter:blur(18px) saturate(160%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(160%)!important; border:1px solid rgba(255,255,255,0.22)!important;
  border-radius:14px!important; padding:10px 12px!important; box-shadow:0 8px 24px rgba(0,0,0,0.20)!important;
}

.now-feed #youzify .ac-form .ac-textarea textarea{
  background:rgba(255,255,255,0.25)!important; border:1px solid rgba(255,255,255,0.28)!important; color:#111!important; border-radius:10px!important;
}
.now-feed #youzify .ac-form .ac-textarea textarea::placeholder{ color:rgba(0,0,0,0.55)!important; }

.now-feed #youzify .ac-form .youzify-load-emojis i,
.now-feed #youzify .ac-form .youzify-wall-add-gif i,
.now-feed #youzify .ac-form .youzify-wall-comment-attachments i{
  color:#fff!important; text-shadow:0 1px 6px rgba(0,0,0,0.25)!important;
}

.now-feed #youzify .ac-form input[type="submit"],
.now-feed #youzify .ac-form button[type="submit"],
.now-feed #youzify .ac-form .button{
  background-color:var(--youzify-poll-blue,#4aa3ff)!important; color:#fff!important;
  border-radius:10px!important; border:0!important; box-shadow:0 6px 16px rgba(0,0,0,0.18)!important;
}

.now-feed #youzify .ac-form .ac-textarea,
.now-feed #youzify .ac-form .acomment-options,
.now-feed #youzify .ac-form .acomment-meta{ background:transparent!important; border:0!important; box-shadow:none!important; }

/* ====================== EXTRAS ====================== */
/* X Comments (Count) weiß + Icon */
.now-feed #youzify .activity-item .youzify-activity-statistics .youzify-post-comments-count,
.now-feed #youzify .activity-item .youzify-activity-statistics .youzify-post-comments-count i,
.now-feed #youzify .activity-item .youzify-activity-statistics .youzify-post-comments-count span,
.now-feed #youzify .activity-item .youzify-activity-statistics .youzify-post-comments-count .stats-name{
  color:#fff !important;
  text-shadow:0 1px 6px rgba(0,0,0,0.25) !important;
}

/* ===== REACTIONS: Default-Heart (grau) neben dem linken Pill ausblenden – Emoji bleibt! ===== */
.now-feed #youzify .activity-item .activity-meta .yzpr-reacto-post .yzpr-post-reaction i{
  display: none !important; /* fa-heart aus */
}

/* === MOBILE ONLY: Reaction & Comment Buttons – VERTIKAL gestapelt, full width === */
@media (max-width: 768px){

  /* Container: Spalten-Layout, volle Breite */
  .now-feed #youzify .activity-item .activity-meta{
    display: flex !important;
    flex-direction: column !important;   /* übereinander */
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Beide Pills: volle Breite, einzeilig, mittig */
  .now-feed #youzify .activity-item .activity-meta .button{
    width: 100% !important;
    flex: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 16px 20px !important;       /* groß & comfy */
    border-radius: 999px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Reaction-Pill: Emoji bleibt sichtbar (Rotation nicht abgeschnitten) */
  .now-feed #youzify .activity-item .activity-meta .yzpr-reacto-post{
    overflow: visible !important;        /* wichtig: keine Clipping-Kante */
    padding-left: 22px !important;       /* etwas mehr Luft links für das Emoji */
  }
  .now-feed #youzify .activity-item .activity-meta .yzpr-post-reaction{
    flex: 0 0 auto !important;
    margin-right: 10px !important;
    line-height: 1 !important;
  }
  .now-feed #youzify .activity-item .activity-meta .yzpr-react-title{
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Emoji-Größe auf Mobil konsistent */
  .now-feed #youzify .activity-item .activity-meta .yzpr-post-reaction img,
  .now-feed #youzify .activity-item .activity-meta .yzpr-post-reaction i{
    width: 24px !important;
    height: 24px !important;
    display: block !important;
  }
}

/* Ultra-small phones: leichte Verdichtung */
@media (max-width: 360px){
  .now-feed #youzify .activity-item .activity-meta{ gap: 10px !important; }
  .now-feed #youzify .activity-item .activity-meta .button{
    padding: 14px 16px !important;
  }
  .now-feed #youzify .activity-item .activity-meta .yzpr-reacto-post .yzpr-react-title{
    font-size: .95em !important;
  }
}