/* ═══════════ Community: fundraisers grid, top supporters, activity feed ═══════════ */
.cm-section { border-radius: 12px; }
.cm-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.cm-head h2 { font-size: clamp(21px, 3vw, 26px); margin: 0 0 4px; color: var(--fr-ink); }
.cm-head p { margin: 0; color: var(--fr-muted); font-size: 14px; }
.cm-join { display: inline-flex; align-items: center; gap: 9px; background: var(--fr-ink); color: #fff; padding: 11px 18px; border-radius: 8px; font-weight: 700; text-decoration: none; transition: transform .15s ease, background .15s ease; }
.cm-join:hover { background: #0a524f; color: #fff; transform: translateY(-1px); }
.cm-search { position: relative; max-width: 360px; margin-bottom: 22px; }
.cm-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--fr-muted); }
.cm-search input { width: 100%; border: 1px solid #d6e3de; border-radius: 8px; padding: 11px 14px 11px 40px; font-size: 15px; outline: 0; transition: border-color .15s ease, box-shadow .15s ease; }
.cm-search input:focus { border-color: var(--fr-teal); box-shadow: 0 0 0 3px rgba(11,119,112,.12); }
.cm-empty { text-align: center; padding: 28px 16px; color: var(--fr-muted); background: var(--fr-bg); border-radius: 10px; }
.cm-empty > i { font-size: 30px; color: var(--fr-orange); margin-bottom: 10px; display: block; }
.cm-noresults { text-align: center; color: var(--fr-muted); padding: 18px; }
.cm-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--fr-teal); background: var(--fr-mint); padding: 6px 11px; border-radius: 20px; }
.cm-live span { width: 8px; height: 8px; border-radius: 50%; background: #22a06b; box-shadow: 0 0 0 0 rgba(34,160,107,.6); animation: cmPulse 1.8s infinite; }
@keyframes cmPulse { 70% { box-shadow: 0 0 0 8px rgba(34,160,107,0); } 100% { box-shadow: 0 0 0 0 rgba(34,160,107,0); } }

/* Fundraisers grid */
.fg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 22px 12px; }
.fg-item { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: inherit; padding: 6px 4px 10px; border-radius: 12px; transition: background .15s ease, transform .15s ease; }
.fg-item:hover { background: var(--fr-bg); transform: translateY(-3px); color: inherit; }
.fg-item.fg-extra { display: none; }
.fg-show-all .fg-item.fg-extra, .fg-searching .fg-item.fg-extra { display: flex; }
.fg-item.fg-hide { display: none !important; }
.fg-photo { position: relative; margin-bottom: 10px; }
.fg-photo .fr-avatar { width: 96px; height: 96px; flex-basis: 96px; font-size: 30px; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--fr-line), 0 6px 16px rgba(7,59,58,.1); transition: box-shadow .2s ease; }
.fg-item:hover .fg-photo .fr-avatar { box-shadow: 0 0 0 2px var(--fr-orange), 0 8px 20px rgba(7,59,58,.16); }
.fg-rank { position: absolute; right: 2px; bottom: 2px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; border: 2px solid #fff; }
.fg-rank-1 { background: #e0a526; } .fg-rank-2 { background: #9aa5b1; } .fg-rank-3 { background: #c47a45; }
.fg-name { color: var(--fr-ink); font-size: 15.5px; line-height: 1.25; font-weight: 800; }
.fg-amount { color: var(--fr-ink); font-size: 15px; margin-top: 3px; }
.fg-meta { color: var(--fr-muted); font-size: 12.5px; }
.fg-bar { width: 70%; height: 4px; background: var(--fr-mint); border-radius: 4px; margin-top: 8px; overflow: hidden; }
.fg-bar span { display: block; height: 100%; background: var(--fr-orange); }

/* Top supporters */
.ts-list { list-style: none; margin: 0; padding: 0; }
.ts-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #eef2f0; }
.ts-item:last-child { border-bottom: 0; }
.ts-avatar { position: relative; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; background: linear-gradient(135deg, #f7b267, #e38f37); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 15px; }
.ts-avatar.anon { background: var(--fr-mint); color: #d48523; }
.ts-medal { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 11px; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.ts-medal-1 { color: #e0a526; } .ts-medal-2 { color: #9aa5b1; } .ts-medal-3 { color: #c47a45; }
.ts-who { flex: 1; min-width: 0; }
.ts-who strong { display: block; color: var(--fr-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-who small { color: var(--fr-muted); font-size: 12px; }
.ts-amount { font-weight: 800; color: var(--fr-teal); white-space: nowrap; }

/* Activity feed */
.ac-feed { display: flex; flex-direction: column; gap: 16px; }
.ac-card { border: 1px solid var(--fr-line); border-radius: 14px; background: #fff; box-shadow: 0 2px 10px rgba(7,59,58,.04); overflow: hidden; animation: acIn .35s ease both; }
@keyframes acIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ac-head { display: flex; gap: 14px; padding: 18px 20px 6px; align-items: flex-start; }
.ac-badges { position: relative; display: flex; flex: 0 0 auto; }
.ac-amount { width: 54px; height: 54px; border-radius: 50%; background: #fbd38d; color: var(--fr-ink); display: grid; place-content: center; text-align: center; font-weight: 800; font-size: 14px; line-height: 1; z-index: 1; box-shadow: 0 0 0 3px #fff; }
.ac-amount small { font-size: 8.5px; font-weight: 700; opacity: .7; margin-top: 2px; }
.ac-avatar { margin-left: -12px; }
.ac-avatar .fr-avatar { width: 54px; height: 54px; flex-basis: 54px; box-shadow: 0 0 0 3px #fff; font-size: 18px; }
.ac-mf { background: #fff !important; border: 1px solid var(--fr-line); }
.ac-mf img { width: 70%; height: 70%; object-fit: contain; }
.ac-title { flex: 1; min-width: 0; }
.ac-title p { margin: 0; color: #213b39; line-height: 1.45; font-size: 15px; }
.ac-title strong { color: var(--fr-ink); }
.ac-title time { color: var(--fr-muted); font-size: 12.5px; }
.ac-message { padding: 10px 20px 16px; font-size: clamp(17px, 2.4vw, 21px); line-height: 1.45; color: var(--fr-ink); overflow-wrap: anywhere; white-space: pre-line; }
.ac-message.muted { font-size: 16px; color: #45605c; }
.ac-actions { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #eef2f0; }
.ac-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: none; border: 0; padding: 13px 6px; color: #4b5f5c; font-weight: 700; font-size: 14.5px; transition: background .15s ease, color .15s ease; }
.ac-btn:hover { background: var(--fr-bg); color: var(--fr-ink); }
.ac-btn i { font-size: 18px; transition: transform .2s ease; }
.ac-btn b { font-weight: 700; color: var(--fr-muted); font-size: 13px; }
.ac-love.is-loved, .ac-love.is-loved b { color: #f59f0b; }
.ac-love.is-loved i { animation: acPop .35s ease; }
@keyframes acPop { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
.ac-burst { position: absolute; left: 50%; top: 40%; color: #f59f0b; font-size: 11px !important; pointer-events: none; animation: acBurst .75s ease-out forwards; }
@keyframes acBurst { from { opacity: 1; transform: translate(-50%, 0) scale(.6); } to { opacity: 0; transform: translate(calc(-50% + var(--dx)), var(--dy)) scale(1.2); } }
.ac-lovers { background: #f7faf9; border-top: 1px solid #eef2f0; padding: 10px 20px; font-size: 13.5px; color: #4b5f5c; font-weight: 600; }
.ac-lovers i { color: #f59f0b; margin-right: 4px; }
.ac-lovers[hidden] { display: none; }

.ac-comments { display: none; border-top: 1px solid #eef2f0; padding: 12px 20px; background: #fcfdfd; }
.ac-comments.has-comments, .ac-comments.open { display: block; }
.ac-comment-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ac-comment-list:empty { display: none; }
.ac-comment { display: flex; gap: 10px; align-items: flex-start; }
.ac-comment.ac-c-old { display: none; }
.ac-comments.show-all .ac-c-old { display: flex; }
.ac-comment.ac-new { animation: acIn .35s ease both; }
.ac-c-avatar { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; background: var(--fr-mint); color: var(--fr-teal); display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.ac-c-bubble { background: #eef3f1; border-radius: 4px 14px 14px 14px; padding: 8px 12px; min-width: 0; }
.ac-c-bubble strong { color: var(--fr-ink); font-size: 13.5px; }
.ac-c-bubble time { color: var(--fr-muted); font-size: 12px; margin-left: 4px; }
.ac-c-bubble p { margin: 2px 0 0; font-size: 14px; color: #2c4743; overflow-wrap: anywhere; }
.ac-more { background: none; border: 0; padding: 0 0 10px; color: var(--fr-teal); font-weight: 700; font-size: 13.5px; }
.ac-form { margin-top: 12px; }
.ac-form[hidden] { display: none; }
.ac-name { width: 100%; border: 1px solid #d6e3de; border-radius: 20px; padding: 9px 14px; font-size: 14px; margin-bottom: 8px; outline: 0; }
.ac-name[readonly] { background: #f2f5f4; color: var(--fr-muted); }
.ac-input { display: flex; align-items: center; border: 1px solid #d6e3de; border-radius: 24px; background: #fff; padding: 3px 3px 3px 14px; transition: border-color .15s ease, box-shadow .15s ease; }
.ac-input:focus-within, .ac-name:focus { border-color: var(--fr-teal); box-shadow: 0 0 0 3px rgba(11,119,112,.12); }
.ac-input input { flex: 1; min-width: 0; border: 0; outline: 0; font-size: 14.5px; padding: 8px 0; background: transparent; }
.ac-input button { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--fr-teal); color: #fff; display: grid; place-items: center; flex: 0 0 38px; transition: transform .15s ease; }
.ac-input button:hover { transform: scale(1.06); }
.ac-input button[disabled] { opacity: .6; }
.ac-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.ac-form-error { color: #b42318; font-size: 13px; margin-top: 6px; font-weight: 600; }
.ac-form-error[hidden] { display: none; }

.ac-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 140%); background: var(--fr-ink); color: #fff; padding: 12px 20px; border-radius: 30px; font-weight: 600; font-size: 14px; z-index: 10050; box-shadow: 0 10px 30px rgba(0,0,0,.25); transition: transform .3s cubic-bezier(.2,.8,.2,1); max-width: calc(100% - 32px); text-align: center; }
.ac-toast.show { transform: translate(-50%, 0); }

@media (max-width: 576px) {
    .fg-grid { grid-template-columns: repeat(3, 1fr); gap: 18px 6px; }
    .fg-photo .fr-avatar { width: 76px; height: 76px; flex-basis: 76px; font-size: 24px; }
    .fg-name { font-size: 14px; } .fg-amount { font-size: 13.5px; }
    .ac-head { padding: 14px 14px 4px; gap: 10px; }
    .ac-amount, .ac-avatar .fr-avatar { width: 46px; height: 46px; flex-basis: 46px; }
    .ac-amount { font-size: 12.5px; }
    .ac-message { padding: 8px 14px 14px; }
    .ac-btn span { display: none; }
    .ac-btn { padding: 12px 4px; }
    .ac-comments, .ac-lovers { padding-left: 14px; padding-right: 14px; }
    .cm-join { width: 100%; justify-content: center; }
}
@media (max-width: 360px) { .fg-grid { grid-template-columns: repeat(2, 1fr); } }

/* Guest "sign in to add your name" hint shown after loving */
.ac-signin { background: #dce8fb; color: #1f2d3d; padding: 13px 20px; font-size: 14px; line-height: 1.55; border-top: 1px solid #c9daf6; animation: acIn .3s ease both; }
.ac-signin[hidden] { display: none; }
.ac-signin a { color: #1d5fd6; font-weight: 700; text-decoration: none; }
.ac-signin a:hover { text-decoration: underline; }
@media (max-width: 576px) { .ac-signin { padding: 12px 14px; } }