PluginProbe
Forumax – AI Powered Advanced Community Forum Plugin / trunk
Forumax – AI Powered Advanced Community Forum Plugin vtrunk
2.4.4 2.4.3 2.4.2 2.4.1 2.4.0 trunk 1.0.8 1.1.0 1.2.1 1.2.2 1.2.3 1.2.4 1.2.5 1.2.6 1.2.7 1.2.8 1.2.9 1.3.0 1.3.1 1.3.2 1.3.3 1.4.0 1.4.1 2.0.0 2.1.0 All 29 releases
bbp-core / assets / frontend / css / forum-single.css

forum-single.css in Forumax – AI Powered Advanced Community Forum Plugin trunk, at assets/frontend/css/forum-single.css

4,747 lines 139.8 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 @charset "UTF-8";
2 /*----------------------------------------------------*/
3 :root {
4 --rob: "Roboto", sans-serif;
5 --great: "Great Vibes", cursive;
6 --bg_gradient: linear-gradient(45deg, #F5FDFF, #FEEFEC);
7 --bbpc_brand_color: var(--bbpc_brand_color_opt, #4c4cf1);
8 --h_title: #1d2746;
9 --p_color: #6b707f;
10 --bs-white: #fff;
11 --black_25: #f9f9f9;
12 --black_50: #f2f2f2;
13 --black_75: #eeeeee;
14 --black_90: #e0e6f0;
15 --black_100: #d6d9dc;
16 --black_150: #c8ccd0;
17 --black_200: #bbc0c4;
18 --black_300: #9fa6ad;
19 --black_350: #9199a1;
20 --black_400: #848d95;
21 --black_500: #6a737c;
22 --black_600: #535a60;
23 --black_700: #3c4146;
24 --black_750: #2f3337;
25 --black_800: #242729;
26 --black_900: #0c0d0e;
27 --bbpc_color: #078669;
28 --baseColor2: #4a6ee0;
29 --bs_white: #fff;
30 }
31
32 /*font Variables*/
33 /**=== Functions ===**/
34 .col-md-offset-right-1,
35 .col-lg-offset-right-1 {
36 margin-right: 8.33333333%;
37 }
38
39 @media screen and (min-width: 768px) {
40 .column-md-1 {
41 flex: 0 0 auto;
42 width: 8.33333333%;
43 }
44 .column-md-2 {
45 flex: 0 0 auto;
46 width: 16.66666667%;
47 }
48 .column-md-3 {
49 flex: 0 0 auto;
50 width: 25%;
51 }
52 .column-md-4 {
53 flex: 0 0 auto;
54 width: 33.33333333%;
55 }
56 .column-md-5 {
57 flex: 0 0 auto;
58 width: 41.66666667%;
59 }
60 .column-md-6 {
61 flex: 0 0 auto;
62 width: 50%;
63 }
64 .column-md-7 {
65 flex: 0 0 auto;
66 width: 58.33333333%;
67 }
68 .column-md-8 {
69 flex: 0 0 auto;
70 width: 66.66666667%;
71 }
72 .column-md-9 {
73 flex: 0 0 auto;
74 width: 75%;
75 }
76 .column-md-10 {
77 flex: 0 0 auto;
78 width: 83.33333333%;
79 }
80 .column-md-11 {
81 flex: 0 0 auto;
82 width: 91.66666667%;
83 }
84 .column-md-12 {
85 flex: 0 0 auto;
86 width: 100%;
87 }
88 }
89 @media (max-width: 767px) {
90 [class^=column-md-] {
91 width: 100%;
92 flex: 0 0 100%;
93 }
94 }
95 .bg-faded-sun {
96 background: radial-gradient(ellipse farthest-side at 76% 77%, rgba(245, 228, 212, 0.25) 4%, rgba(255, 255, 255, 0) calc(4% + 1px)), radial-gradient(circle at 76% 40%, #fef6ec 4%, rgba(255, 255, 255, 0) 4.18%), linear-gradient(135deg, #ff0000 0%, #000036 100%), radial-gradient(ellipse at 28% 0%, #ffcfac 0%, rgba(98, 149, 144, 0.5) 100%), linear-gradient(180deg, #cd6e8a 0%, #f5eab0 69%, #d6c8a2 70%, #a2758d 100%) !important;
97 background-blend-mode: normal, normal, screen, overlay, normal;
98 }
99
100 .bg-faded-moon {
101 background: radial-gradient(ellipse farthest-side at 76% 77%, rgba(245, 228, 212, 0.25) 4%, rgba(255, 255, 255, 0) calc(4% + 1px)), radial-gradient(circle at 76% 40%, #fef6ec 4%, rgba(255, 255, 255, 0) 4.18%), linear-gradient(135deg, #000000 0%, #000036 100%), radial-gradient(ellipse at 28% 0%, #ffcfac 0%, rgba(98, 149, 144, 0.5) 100%), linear-gradient(180deg, #cd6e8a 0%, #f5eab0 69%, #d6c8a2 70%, #a2758d 100%) !important;
102 background-blend-mode: normal, normal, screen, overlay, normal;
103 }
104
105 .bg-happy-journey {
106 background: linear-gradient(45deg, #C7F5FE 10%, #C7F5FE 40%, #FCC8F8 40%, #FCC8F8 60%, #EAB4F8 60%, #EAB4F8 65%, #F3F798 65%, #F3F798 90%) !important;
107 }
108
109 .bg-creative-idea {
110 background: linear-gradient(45deg, #F3F798 10%, #F3F798 40%, #EAB4F8 40%, #EAB4F8 60%, #FCC8F8 60%, #FCC8F8 65%, #C7F5FE 65%, #C7F5FE 90%) !important;
111 }
112
113 .bg-apparent-circle {
114 background: linear-gradient(238.72deg, #EBFF00 0%, #8F00FF 100%), linear-gradient(64.82deg, #AD00FF 0%, #FF0000 100%), linear-gradient(65.03deg, #00FFFF 0%, #FF0000 99.79%), radial-gradient(67.08% 100% at 50% 100%, #FF00C7 0%, #50005E 100%), radial-gradient(100% 140% at 100% 0%, #5ED500 0%, #2200AA 100%) !important;
115 background-blend-mode: color-dodge, difference, lighten, color-dodge, normal;
116 }
117
118 .bg-soft-weather {
119 background: radial-gradient(80.99% 100% at 50% 0%, #00FF0A 0%, #36008E 100%), radial-gradient(50% 123.47% at 50% 50%, #EFE7C8 0%, #36008E 100%), linear-gradient(301.28deg, #FF006B 0%, #48DD9E 100%), linear-gradient(294.84deg, #5A60E4 0%, #D30000 100%), linear-gradient(52.29deg, #000000 0%, #00FF85 100%), radial-gradient(100% 138.69% at 100% 0%, #0007A5 0%, #FF7A00 100%), radial-gradient(70.41% 100% at 50% 0%, #D5B300 0%, #2200AA 100%) !important;
120 background-blend-mode: screen, screen, lighten, overlay, lighten, difference, normal;
121 }
122
123 .bg-romantic-sun {
124 background: linear-gradient(180deg, #FFB7B7 0%, #727272 100%), radial-gradient(60.91% 100% at 50% 0%, #FFD1D1 0%, #260000 100%), linear-gradient(238.72deg, #FFDDDD 0%, #720066 100%), linear-gradient(127.43deg, #00FFFF 0%, #FF4444 100%), radial-gradient(100.22% 100% at 70.57% 0%, #FF0000 0%, #00FFE0 100%), linear-gradient(127.43deg, #B7D500 0%, #3300FF 100%) !important;
125 background-blend-mode: screen, overlay, hard-light, color-burn, color-dodge, normal;
126 }
127
128 .bg-teal-eclipse {
129 background: linear-gradient(238.72deg, #EBFF00 0%, #7700D5 100%), linear-gradient(64.82deg, #AD00FF 0%, #FF0000 100%), linear-gradient(65.03deg, #00FFFF 0%, #FF0000 99.79%), radial-gradient(67.08% 100% at 50% 0%, #FF00C7 0%, #1400FF 100%), radial-gradient(100% 140% at 100% 0%, #5ED500 0%, #2200AA 100%) !important;
130 background-blend-mode: color-dodge, difference, lighten, color-dodge, normal;
131 }
132
133 /*---------------------------------------------------- */
134 .forum-single-content .content img,
135 .forum-single-content .comment-content img {
136 max-width: 100%;
137 height: auto;
138 border: 1px solid #eaeeef;
139 }
140 .forum-single-content p {
141 word-break: break-word;
142 }
143
144 .forum-post-top {
145 display: flex;
146 justify-content: start;
147 margin-bottom: 14px;
148 }
149 .forum-post-top .bbp-author-wrap {
150 display: flex;
151 align-items: center;
152 gap: 12px;
153 margin-right: auto;
154 }
155 .forum-post-top .bbp-author-wrap > .bbp-author-link img {
156 border-radius: 50%;
157 max-width: 38px;
158 height: auto;
159 margin-top: -2px;
160 }
161 @media (max-width: 550px) {
162 .forum-post-top .bbp-author-wrap > .bbp-author-link {
163 display: none;
164 }
165 }
166 .forum-post-top .topic-author {
167 display: flex;
168 align-items: center;
169 gap: 6px;
170 }
171 .forum-post-top .topic-author a {
172 text-decoration: none;
173 }
174 .forum-post-top .forum-post-content .content.editor-content p {
175 font-size: 16px;
176 }
177 .forum-post-top .forum-post-author {
178 margin-right: auto;
179 }
180 .forum-post-top .forum-post-author .bbp-author-link {
181 font-size: 14px;
182 font-weight: 500;
183 color: var(--black_700);
184 line-height: 1.4;
185 }
186 .forum-post-top .forum-post-author .bbp-author-link:hover {
187 color: var(--bbpc_brand_color);
188 }
189 .forum-post-top .forum-post-author .bbp-author-name {
190 font-size: 15px;
191 font-weight: 500;
192 color: var(--black_700);
193 line-height: 1.4;
194 }
195 .forum-post-top .forum-post-author .forum-author-meta {
196 display: flex;
197 align-items: center;
198 }
199 .forum-post-top .forum-post-author .forum-author-meta a:hover {
200 color: var(--bbpc_brand_color);
201 }
202 .forum-post-top .forum-post-author .forum-author-meta .author-badge > svg,
203 .forum-post-top .forum-post-author .forum-author-meta .author-badge > img {
204 margin-top: -5px;
205 margin-right: 5px;
206 }
207 .forum-post-top .forum-post-author .forum-author-meta .author-badge .forumax-role-icon {
208 margin-right: 5px;
209 }
210 .forum-post-top .forum-post-author .forum-author-meta .author-badge i {
211 margin-right: 5px;
212 color: #838793;
213 }
214 .forum-post-top .forum-post-author .forum-author-meta .author-badge:first-child {
215 margin-right: 20px;
216 margin-top: -2px;
217 }
218 .forum-post-top .forum-post-author .forum-author-meta.meta {
219 font-size: 14px;
220 font-weight: 400;
221 color: var(--black_400);
222 }
223 @media (max-width: 480px) {
224 .forum-post-top .forum-post-author .forum-author-meta.meta .dot {
225 display: none;
226 }
227 }
228 @media (max-width: 480px) {
229 .forum-post-top .forum-post-author .forum-author-meta.meta .replies-count {
230 display: none;
231 }
232 }
233 .forum-post-top .reply-admin-links {
234 width: auto;
235 display: flex;
236 align-items: center;
237 gap: 8px;
238 margin-left: auto;
239 flex-shrink: 0;
240 flex-wrap: nowrap;
241 justify-content: flex-end;
242 }
243 .forum-post-top .reply-admin-links .private-reply-badge {
244 display: inline-flex;
245 align-items: center;
246 height: 28px;
247 padding: 0 10px;
248 border-radius: 999px;
249 font-size: 12px;
250 font-weight: 600;
251 letter-spacing: 0;
252 line-height: 1;
253 color: #8a5a00;
254 background: #fff4cf;
255 border: 1px solid #ffe7ab;
256 white-space: nowrap;
257 }
258 .forum-post-top .reply-admin-links .reply-admin-menu-wrap {
259 display: inline-flex;
260 align-items: center;
261 height: 30px;
262 min-width: 34px;
263 }
264 .forum-post-top .reply-admin-links .bbp-admin-links-dropdown {
265 display: inline-flex;
266 align-items: center;
267 margin: 0;
268 }
269 .forum-post-top .reply-admin-links .bbp-admin-links-dropdown .frmx-nice-select {
270 display: inline-flex;
271 align-items: center;
272 justify-content: center;
273 min-width: 34px;
274 height: 30px;
275 padding: 0 6px;
276 line-height: 1;
277 }
278 .forum-post-top .reply-admin-links .bbp-admin-links-dropdown .frmx-nice-select .current::before {
279 line-height: 1;
280 display: block;
281 }
282
283 .author-badge.badge {
284 font-weight: 500;
285 padding: 2px 10px;
286 display: inline-flex;
287 align-items: center;
288 gap: 4px;
289 border-radius: 20px;
290 height: auto !important;
291 font-size: 13px;
292 letter-spacing: 0;
293 text-transform: capitalize;
294 color: var(--black_500);
295 border: none !important;
296 }
297 .author-badge.badge.moderator {
298 background: rgba(8, 102, 255, 0.1);
299 color: #6b7280;
300 }
301 .author-badge.badge.keymaster {
302 background: var(--black_100);
303 color: var(--black_750);
304 }
305 .author-badge.badge.participant {
306 background: rgba(37, 99, 235, 0.1);
307 color: #1d4ed8;
308 }
309 .author-badge.badge.member {
310 background: rgba(71, 85, 105, 0.1);
311 color: #334155;
312 }
313 .author-badge.badge > img,
314 .author-badge.badge > svg {
315 margin-right: 0;
316 width: 14px;
317 height: 14px;
318 }
319 .author-badge.badge .forumax-role-icon {
320 width: 18px;
321 height: 18px;
322 min-width: 18px;
323 border-radius: 999px;
324 display: inline-flex;
325 align-items: center;
326 justify-content: center;
327 background: rgba(71, 85, 105, 0.16);
328 color: #fff;
329 }
330 .author-badge.badge .forumax-role-icon svg {
331 width: 11px;
332 height: 11px;
333 stroke: currentColor;
334 stroke-width: 1.9;
335 stroke-linecap: round;
336 stroke-linejoin: round;
337 fill: none;
338 }
339 .author-badge.badge.keymaster .forumax-role-icon {
340 background: #111827;
341 color: #fff;
342 }
343 .author-badge.badge.moderator .forumax-role-icon {
344 background: #2563eb;
345 color: #fff;
346 }
347 .author-badge.badge.participant .forumax-role-icon {
348 background: #2563eb;
349 color: #fff;
350 }
351 .author-badge.badge.member .forumax-role-icon {
352 background: #475569;
353 color: #fff;
354 }
355 .author-badge.badge.spectator .forumax-role-icon {
356 background: #0891b2;
357 color: #fff;
358 }
359 .author-badge.badge.blocked .forumax-role-icon {
360 background: #dc2626;
361 color: #fff;
362 }
363
364 .action-button-container {
365 display: flex;
366 justify-content: flex-end;
367 align-items: center;
368 gap: 8px;
369 }
370 @media (max-width: 425px) {
371 .action-button-container {
372 flex-direction: column;
373 gap: 10px;
374 }
375 }
376 .action-button-container.action-btns {
377 justify-content: flex-start;
378 margin-top: 12px;
379 justify-content: space-between;
380 }
381 .action-button-container.action-btns ul {
382 padding-left: 0;
383 }
384 .action-button-container.action-btns .action_btn {
385 height: 30px;
386 font-size: 14px;
387 line-height: 30px;
388 padding: 0 15px;
389 font-weight: 400;
390 }
391 .action-button-container.action-btns .bbp-admin-links {
392 margin-bottom: 0;
393 flex-wrap: wrap;
394 display: flex;
395 gap: 12px;
396 padding: 0;
397 margin: 0;
398 }
399 .action-button-container.action-btns .bbp-admin-links li {
400 list-style: none;
401 padding-right: 14px;
402 margin-bottom: 0;
403 }
404 .action-button-container.action-btns .bbp-admin-links li:hover a::before {
405 width: 100%;
406 }
407 .action-button-container.action-btns .bbp-admin-links li a {
408 position: relative;
409 color: var(--bbpc_brand_color);
410 font-size: 14px;
411 font-weight: 500;
412 text-decoration: none;
413 border-color: var(--black_50);
414 }
415 .action-button-container .ask-btn {
416 box-shadow: none;
417 font-size: 16px;
418 font-weight: 500;
419 padding: 8px 28px;
420 margin-top: 2px;
421 }
422 .action-button-container .ask-btn:hover {
423 background: #16c9f0;
424 }
425 .action-button-container .reply-btn {
426 margin-right: 10px;
427 }
428 .action-button-container .too-btn {
429 background: #fff;
430 border: 1px solid #d0d8dc;
431 color: var(--secondary_color);
432 }
433 .action-button-container .too-btn:hover {
434 background: #fff;
435 border: 1px solid var(--secondary_color);
436 color: var(--secondary_color);
437 }
438
439 .q-title {
440 display: flex;
441 padding: 0 15px 30px 2px;
442 align-items: center;
443 gap: 20px;
444 }
445 .q-title h1 {
446 font-size: 34px;
447 line-height: 1.3;
448 flex: 1;
449 margin: 0;
450 }
451 .q-title .badge {
452 margin-left: 10px;
453 line-height: 1.4;
454 margin-top: 5px;
455 }
456 .q-title .solved-topic-bar {
457 display: inline-block;
458 margin-left: 10px;
459 }
460 .q-title .solved-topic-bar .accepted-ans-mark {
461 color: #0d600d;
462 display: inline-flex;
463 align-items: center;
464 font-size: 14px;
465 font-weight: 400;
466 background: rgba(62, 204, 62, 0.18);
467 border-radius: 20px;
468 padding: 5px 12px;
469 margin: 0;
470 gap: 5px;
471 }
472 .q-title .solved-topic-bar .icon_check_alt2:before {
473 margin-right: 3px;
474 }
475
476 .badge {
477 font-size: 11px;
478 background: rgba(175, 184, 193, 0.2);
479 color: var(--black_800);
480 padding: 3px 8px;
481 border-radius: 3px;
482 margin-right: 5px;
483 display: inline-block;
484 vertical-align: middle;
485 font-weight: 500;
486 letter-spacing: 0.2px;
487 text-decoration: none !important;
488 box-sizing: content-box;
489 line-height: unset;
490 }
491 .badge.badge-14 {
492 font-size: 14px;
493 padding: 5px 15px;
494 }
495
496 .forum-post-content p {
497 word-break: break-word;
498 }
499 .forum-post-content .forum-post-btm {
500 display: flex;
501 justify-content: space-between;
502 border-bottom: 1px solid var(--black_50);
503 padding-bottom: 20px;
504 padding-top: 30px;
505 }
506 .forum-post-content .forum-post-btm .taxonomy {
507 font-size: 14px;
508 display: flex;
509 align-items: center;
510 }
511 .forum-post-content .forum-post-btm .taxonomy i,
512 .forum-post-content .forum-post-btm .taxonomy img {
513 margin-right: 10px;
514 }
515 .forum-post-content .forum-post-btm .taxonomy img {
516 max-width: 20px;
517 max-height: 20px;
518 margin-right: 10px !important;
519 }
520
521 .forum-post-content .topic-content-layout {
522 display: flex;
523 align-items: flex-start;
524 gap: 0;
525 }
526 .forum-post-content .topic-vote-column {
527 flex: 0 0 48px;
528 display: flex;
529 justify-content: center;
530 }
531 .forum-post-content .topic-vote-column .bbp-voting {
532 position: static !important;
533 display: flex !important;
534 flex-direction: column;
535 align-items: center;
536 gap: 6px;
537 padding: 0;
538 margin: 6px 0 0;
539 border: none;
540 background: transparent;
541 }
542 .forum-post-content .topic-content-body {
543 flex: 1;
544 min-width: 0;
545 }
546
547 @media (max-width: 576px) {
548 .forum-post-content .topic-content-layout {
549 flex-direction: column;
550 gap: 12px;
551 }
552 .forum-post-content .topic-vote-column {
553 flex: 0 0 auto;
554 justify-content: flex-start;
555 }
556 .forum-post-content .topic-vote-column .bbp-voting {
557 flex-direction: row;
558 }
559 }
560 .dot {
561 width: 3px;
562 height: 3px;
563 background-color: var(--black_400);
564 border-radius: 50%;
565 margin: 0 6px;
566 }
567
568 .question-icon {
569 color: var(--secondary_color);
570 font-weight: 600;
571 font-size: 22px;
572 margin-left: -2px;
573 line-height: normal;
574 }
575 @media (max-width: 576px) {
576 .question-icon {
577 display: none !important;
578 }
579 }
580
581 .bbp-admin-links-dropdown {
582 position: relative;
583 }
584 .bbp-admin-links-dropdown .frmx-nice-select {
585 background: none;
586 border: none;
587 cursor: pointer;
588 width: auto;
589 padding: 0;
590 height: auto;
591 line-height: 1;
592 border-radius: 6px;
593 transition: background 0.15s ease;
594 }
595 .bbp-admin-links-dropdown .frmx-nice-select:hover {
596 background: var(--black_50, #f3f4f6);
597 }
598 .bbp-admin-links-dropdown .frmx-nice-select::after {
599 display: none;
600 }
601 .bbp-admin-links-dropdown .frmx-nice-select .current {
602 font-size: 0;
603 display: flex;
604 align-items: center;
605 justify-content: center;
606 width: 32px;
607 height: 32px;
608 }
609 .bbp-admin-links-dropdown .frmx-nice-select .current::before {
610 content: "";
611 font-size: 22px;
612 color: var(--black_500, #6b7280);
613 vertical-align: middle;
614 line-height: 1;
615 }
616 .bbp-admin-links-dropdown .frmx-nice-select .list {
617 right: 0;
618 left: auto;
619 min-width: 180px;
620 padding: 6px;
621 margin-top: 6px;
622 border-radius: 10px;
623 border: 1px solid var(--black_75, #e5e7eb);
624 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
625 overflow: visible;
626 }
627 .bbp-admin-links-dropdown .frmx-nice-select .list .option {
628 display: flex;
629 align-items: center;
630 gap: 10px;
631 padding: 8px 12px;
632 min-height: auto;
633 line-height: 1.4;
634 font-size: 13.5px;
635 font-weight: 450;
636 color: var(--black_700, #374151);
637 border-radius: 6px;
638 transition: background 0.12s ease, color 0.12s ease;
639 cursor: pointer;
640 }
641 .bbp-admin-links-dropdown .frmx-nice-select .list .option:hover, .bbp-admin-links-dropdown .frmx-nice-select .list .option.focus, .bbp-admin-links-dropdown .frmx-nice-select .list .option.selected.focus {
642 background: var(--black_25, #f7f8fa) !important;
643 color: var(--black_900, #111827) !important;
644 }
645 .bbp-admin-links-dropdown .frmx-nice-select .list .option:first-child {
646 display: none;
647 }
648 .bbp-admin-links-dropdown .frmx-nice-select .list .option[data-action=trash], .bbp-admin-links-dropdown .frmx-nice-select .list .option[data-action=spam] {
649 color: #dc2626;
650 }
651 .bbp-admin-links-dropdown .frmx-nice-select .list .option[data-action=trash] .frmx-dropdown-icon svg, .bbp-admin-links-dropdown .frmx-nice-select .list .option[data-action=spam] .frmx-dropdown-icon svg {
652 stroke: #dc2626;
653 }
654 .bbp-admin-links-dropdown .frmx-nice-select .list .option[data-action=trash]:hover, .bbp-admin-links-dropdown .frmx-nice-select .list .option[data-action=trash].focus, .bbp-admin-links-dropdown .frmx-nice-select .list .option[data-action=spam]:hover, .bbp-admin-links-dropdown .frmx-nice-select .list .option[data-action=spam].focus {
655 background: #fef2f2 !important;
656 color: #b91c1c !important;
657 }
658 .bbp-admin-links-dropdown .frmx-nice-select .list .option[data-action=trash]:hover .frmx-dropdown-icon svg, .bbp-admin-links-dropdown .frmx-nice-select .list .option[data-action=trash].focus .frmx-dropdown-icon svg, .bbp-admin-links-dropdown .frmx-nice-select .list .option[data-action=spam]:hover .frmx-dropdown-icon svg, .bbp-admin-links-dropdown .frmx-nice-select .list .option[data-action=spam].focus .frmx-dropdown-icon svg {
659 stroke: #b91c1c;
660 }
661 .bbp-admin-links-dropdown .frmx-nice-select .list .option[data-action=approve] {
662 color: #b45309;
663 }
664 .bbp-admin-links-dropdown .frmx-nice-select .list .option[data-action=approve] .frmx-dropdown-icon svg {
665 stroke: #b45309;
666 }
667 .bbp-admin-links-dropdown .frmx-nice-select .list .option[data-action=approve]:hover, .bbp-admin-links-dropdown .frmx-nice-select .list .option[data-action=approve].focus {
668 background: #fffbeb !important;
669 color: #92400e !important;
670 }
671 .bbp-admin-links-dropdown .frmx-nice-select .list .option[data-action=approve]:hover .frmx-dropdown-icon svg, .bbp-admin-links-dropdown .frmx-nice-select .list .option[data-action=approve].focus .frmx-dropdown-icon svg {
672 stroke: #92400e;
673 }
674 .bbp-admin-links-dropdown .frmx-nice-select .list .option.frmx-dropdown-separator {
675 padding: 3px 8px;
676 min-height: 0;
677 cursor: default;
678 pointer-events: none;
679 }
680 .bbp-admin-links-dropdown .frmx-nice-select .list .option.frmx-dropdown-separator hr {
681 border: none;
682 border-top: 1px solid var(--black_75, #e5e7eb);
683 margin: 0;
684 }
685 .bbp-admin-links-dropdown .frmx-nice-select .list .option.frmx-dropdown-separator:hover {
686 background: transparent !important;
687 }
688 .bbp-admin-links-dropdown .frmx-dropdown-icon {
689 display: inline-flex;
690 align-items: center;
691 justify-content: center;
692 flex-shrink: 0;
693 width: 18px;
694 height: 18px;
695 }
696 .bbp-admin-links-dropdown .frmx-dropdown-icon svg {
697 width: 15px;
698 height: 15px;
699 stroke: var(--black_400, #9ca3af);
700 transition: stroke 0.12s ease;
701 }
702 .bbp-admin-links-dropdown .frmx-dropdown-label {
703 flex: 1;
704 white-space: nowrap;
705 }
706 .bbp-admin-links-dropdown .frmx-nice-select .list .option:hover .frmx-dropdown-icon svg,
707 .bbp-admin-links-dropdown .frmx-nice-select .list .option.focus .frmx-dropdown-icon svg {
708 stroke: var(--black_700, #374151);
709 }
710
711 /* ─── Inline Edit Styles ─── */
712 .frmx-is-editing .q-title {
713 padding-bottom: 0;
714 }
715
716 .frmx-inline-edit-title {
717 width: 100%;
718 }
719 .frmx-inline-edit-title .frmx-edit-title-input {
720 width: 100%;
721 font-size: 28px;
722 font-weight: 700;
723 line-height: 1.35;
724 color: var(--black_900);
725 background: var(--bs-white);
726 border: 2px solid var(--bbpc_brand_color, #4f46e5);
727 border-radius: 10px;
728 padding: 12px 16px;
729 outline: none;
730 transition: border-color 0.2s ease, box-shadow 0.2s ease;
731 }
732 .frmx-inline-edit-title .frmx-edit-title-input:focus {
733 border-color: var(--bbpc_brand_color, #4f46e5);
734 box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
735 }
736
737 .frmx-inline-edit-content .frmx-edit-content-textarea {
738 width: 100%;
739 min-height: 200px;
740 font-size: 15px;
741 line-height: 1.75;
742 color: var(--black_700);
743 background: var(--bs-white);
744 border-radius: 10px;
745 padding: 14px 16px;
746 resize: vertical;
747 font-family: inherit;
748 outline: none;
749 transition: border-color 0.2s ease, box-shadow 0.2s ease;
750 }
751 .frmx-inline-edit-content .frmx-edit-content-textarea:focus {
752 border-color: var(--bbpc_brand_color, #4f46e5);
753 box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
754 }
755
756 /* ─── Reply Inline Edit Header Bar ─── */
757 .frmx-edit-header {
758 display: flex;
759 align-items: center;
760 justify-content: space-between;
761 gap: 12px;
762 padding: 10px 14px;
763 margin-bottom: 10px;
764 background: var(--bbpc_brand_color_light, rgba(79, 70, 229, 0.06));
765 border: 1px solid var(--bbpc_brand_color_border, rgba(79, 70, 229, 0.15));
766 border-radius: 8px;
767 flex-wrap: wrap;
768 }
769 .frmx-edit-header .frmx-edit-header-label {
770 display: inline-flex;
771 align-items: center;
772 gap: 6px;
773 font-size: 13px;
774 font-weight: 600;
775 color: var(--bbpc_brand_color, #4f46e5);
776 white-space: nowrap;
777 }
778 .frmx-edit-header .frmx-edit-header-label svg {
779 flex-shrink: 0;
780 }
781 .frmx-edit-header .frmx-edit-header-shortcut {
782 display: inline-flex;
783 align-items: center;
784 gap: 6px;
785 font-size: 12px;
786 color: var(--black_500, #6b7280);
787 font-weight: 400;
788 flex-wrap: wrap;
789 line-height: 1.6;
790 }
791 .frmx-edit-header .frmx-edit-header-shortcut kbd {
792 display: inline-flex;
793 align-items: center;
794 justify-content: center;
795 min-width: 20px;
796 padding: 1px 6px;
797 font-size: 11px;
798 font-weight: 600;
799 font-family: -apple-system, BlinkMacSystemFont, "SF Mono", Menlo, Consolas, monospace;
800 color: var(--black_700, #374151);
801 background: var(--bs-white, #fff);
802 border: 1px solid var(--black_150, #d4d4d4);
803 border-bottom-width: 2px;
804 border-radius: 4px;
805 line-height: 1.2;
806 }
807 .frmx-edit-header .frmx-edit-header-shortcut kbd + kbd {
808 margin-left: 2px;
809 }
810 .frmx-edit-header .frmx-edit-header-shortcut .frmx-edit-shortcut-sep {
811 color: var(--black_200, #d1d5db);
812 margin: 0 4px;
813 }
814
815 @media (max-width: 640px) {
816 .frmx-edit-header {
817 gap: 8px;
818 }
819 .frmx-edit-header .frmx-edit-header-shortcut {
820 display: none;
821 }
822 }
823 /* ─── Inline Edit Action Buttons ─── */
824 .frmx-inline-edit-actions {
825 position: relative;
826 display: flex;
827 align-items: center;
828 justify-content: space-between;
829 gap: 10px;
830 margin-top: 12px;
831 padding-top: 12px;
832 border-top: 1px solid var(--black_50, #f0f0f0);
833 flex-wrap: wrap;
834 }
835 .frmx-inline-edit-actions .frmx-edit-actions-left {
836 display: inline-flex;
837 align-items: center;
838 gap: 10px;
839 flex: 1;
840 min-width: 0;
841 font-size: 12px;
842 line-height: 1.4;
843 }
844 .frmx-inline-edit-actions .frmx-edit-actions-right {
845 display: flex;
846 align-items: center;
847 gap: 8px;
848 flex-shrink: 0;
849 }
850 .frmx-inline-edit-actions .frmx-edit-unsaved-hint {
851 display: inline-flex;
852 align-items: center;
853 gap: 4px;
854 font-size: 12px;
855 color: #b45309;
856 font-weight: 500;
857 }
858 .frmx-inline-edit-actions .frmx-edit-unsaved-hint:not(:empty) {
859 animation: frmxNoticeSlide 0.3s ease;
860 }
861 .frmx-inline-edit-actions .frmx-edit-unsaved-hint:not(:empty)::before {
862 content: "";
863 width: 6px;
864 height: 6px;
865 border-radius: 50%;
866 background: #d97706;
867 flex-shrink: 0;
868 }
869 .frmx-inline-edit-actions .frmx-edit-char-count {
870 font-size: 12px;
871 color: var(--black_400, #9ca3af);
872 font-variant-numeric: tabular-nums;
873 }
874 .frmx-inline-edit-actions .frmx-edit-save {
875 display: inline-flex;
876 align-items: center;
877 gap: 6px;
878 padding: 8px 22px;
879 font-size: 13px;
880 font-weight: 600;
881 color: var(--bs-white);
882 background: var(--bbpc_brand_color, #4f46e5);
883 border: none;
884 border-radius: 8px;
885 cursor: pointer;
886 transition: all 0.2s ease;
887 line-height: 1.4;
888 }
889 .frmx-inline-edit-actions .frmx-edit-save svg {
890 flex-shrink: 0;
891 }
892 .frmx-inline-edit-actions .frmx-edit-save:hover {
893 opacity: 0.92;
894 transform: translateY(-1px);
895 box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
896 }
897 .frmx-inline-edit-actions .frmx-edit-save:active {
898 transform: translateY(0);
899 box-shadow: 0 1px 3px rgba(79, 70, 229, 0.2);
900 }
901 .frmx-inline-edit-actions .frmx-edit-save:focus-visible {
902 outline: none;
903 box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.35);
904 }
905 .frmx-inline-edit-actions .frmx-edit-save:disabled {
906 opacity: 0.7;
907 cursor: not-allowed;
908 transform: none;
909 box-shadow: none;
910 }
911 .frmx-inline-edit-actions .frmx-edit-cancel {
912 padding: 8px 18px;
913 font-size: 13px;
914 font-weight: 500;
915 color: var(--black_600);
916 background: var(--bs-white);
917 border: 1px solid var(--black_150);
918 border-radius: 8px;
919 cursor: pointer;
920 transition: all 0.2s ease;
921 line-height: 1.4;
922 }
923 .frmx-inline-edit-actions .frmx-edit-cancel:hover {
924 background: var(--black_25);
925 border-color: var(--black_200);
926 color: var(--black_900);
927 }
928 .frmx-inline-edit-actions .frmx-edit-cancel:focus-visible {
929 outline: none;
930 box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
931 border-color: var(--bbpc_brand_color, #4f46e5);
932 }
933 .frmx-inline-edit-actions .frmx-edit-cancel:disabled {
934 opacity: 0.6;
935 cursor: not-allowed;
936 }
937 .frmx-inline-edit-actions {
938 /* Inline discard-changes confirmation */
939 }
940 .frmx-inline-edit-actions .frmx-edit-discard-prompt {
941 display: none;
942 align-items: center;
943 justify-content: space-between;
944 gap: 12px;
945 width: 100%;
946 padding: 10px 14px;
947 background: #fffbeb;
948 border: 1px solid #fcd34d;
949 border-radius: 8px;
950 animation: frmxNoticeSlide 0.2s ease;
951 flex-wrap: wrap;
952 }
953 .frmx-inline-edit-actions.frmx-show-discard .frmx-edit-actions-left,
954 .frmx-inline-edit-actions.frmx-show-discard .frmx-edit-actions-right {
955 display: none;
956 }
957 .frmx-inline-edit-actions.frmx-show-discard .frmx-edit-discard-prompt {
958 display: flex;
959 }
960 .frmx-inline-edit-actions .frmx-edit-discard-text {
961 font-size: 13px;
962 font-weight: 500;
963 color: #92400e;
964 }
965 .frmx-inline-edit-actions .frmx-edit-discard-actions {
966 display: inline-flex;
967 align-items: center;
968 gap: 8px;
969 flex-shrink: 0;
970 }
971 .frmx-inline-edit-actions .frmx-edit-discard-actions button {
972 padding: 6px 14px;
973 font-size: 12px;
974 font-weight: 600;
975 border-radius: 6px;
976 cursor: pointer;
977 transition: all 0.15s ease;
978 line-height: 1.4;
979 }
980 .frmx-inline-edit-actions .frmx-edit-discard-actions .frmx-edit-discard-keep {
981 color: var(--black_700, #374151);
982 background: var(--bs-white, #fff);
983 border: 1px solid #fcd34d;
984 }
985 .frmx-inline-edit-actions .frmx-edit-discard-actions .frmx-edit-discard-keep:hover {
986 background: #fef3c7;
987 }
988 .frmx-inline-edit-actions .frmx-edit-discard-actions .frmx-edit-discard-confirm {
989 color: var(--bs-white, #fff);
990 background: #dc2626;
991 border: 1px solid #dc2626;
992 }
993 .frmx-inline-edit-actions .frmx-edit-discard-actions .frmx-edit-discard-confirm:hover {
994 background: #b91c1c;
995 border-color: #b91c1c;
996 }
997
998 /* ─── Loading Spinner Overlay ─── */
999 .frmx-edit-loading {
1000 position: absolute;
1001 inset: 0;
1002 display: flex;
1003 flex-direction: column;
1004 align-items: center;
1005 justify-content: center;
1006 gap: 10px;
1007 z-index: 5;
1008 background: rgba(255, 255, 255, 0.6);
1009 border-radius: 8px;
1010 backdrop-filter: blur(2px);
1011 animation: frmxNoticeSlide 0.2s ease;
1012 }
1013 .frmx-edit-loading span {
1014 font-size: 13px;
1015 color: var(--black_500);
1016 font-weight: 500;
1017 }
1018
1019 .frmx-edit-loading-spinner {
1020 width: 24px;
1021 height: 24px;
1022 border: 3px solid var(--black_100, #e5e5e5);
1023 border-top-color: var(--bbpc_brand_color, #4f46e5);
1024 border-radius: 50%;
1025 animation: frmxSpin 0.6s linear infinite;
1026 }
1027
1028 /* ─── Save Button Spinner ─── */
1029 .frmx-btn-spinner {
1030 animation: frmxSpin 0.8s linear infinite;
1031 flex-shrink: 0;
1032 }
1033
1034 @keyframes frmxSpin {
1035 to {
1036 transform: rotate(360deg);
1037 }
1038 }
1039 /* ─── TinyMCE Editor Wrapper Inside Inline Edit ─── */
1040 .frmx-inline-edit-content {
1041 /* Outer wrapper — borderless container, brand focus ring */
1042 }
1043 .frmx-inline-edit-content .wp-editor-wrap {
1044 border: 1.5px solid var(--black_100) !important;
1045 border-radius: 10px !important;
1046 overflow: hidden !important;
1047 transition: border-color 0.2s ease, box-shadow 0.2s ease;
1048 background: var(--bs-white);
1049 }
1050 .frmx-inline-edit-content .wp-editor-wrap:focus-within {
1051 border-color: var(--bbpc_brand_color) !important;
1052 box-shadow: 0 0 0 3px color-mix(in srgb, var(--bbpc_brand_color) 10%, transparent) !important;
1053 }
1054 .frmx-inline-edit-content {
1055 /* ------ Visual / Code tab row ------ */
1056 }
1057 .frmx-inline-edit-content .wp-editor-tabs {
1058 display: flex !important;
1059 flex-direction: row !important;
1060 align-items: center !important;
1061 justify-content: flex-start !important;
1062 padding: 0 !important;
1063 background: var(--black_25) !important;
1064 border-bottom: 1px solid var(--black_75) !important;
1065 margin: 0 !important;
1066 width: auto !important;
1067 float: none !important;
1068 }
1069 .frmx-inline-edit-content .wp-switch-editor {
1070 border: none !important;
1071 border-bottom: 2px solid transparent !important;
1072 background: transparent !important;
1073 color: var(--black_400) !important;
1074 font-size: 13px !important;
1075 font-weight: 600 !important;
1076 padding: 10px 14px !important;
1077 margin: 0 !important;
1078 border-radius: 0 !important;
1079 transition: color 0.15s ease, border-color 0.15s ease;
1080 cursor: pointer;
1081 float: none !important;
1082 height: auto !important;
1083 box-shadow: none !important;
1084 top: 0 !important;
1085 }
1086 .frmx-inline-edit-content .wp-switch-editor:hover {
1087 color: var(--black_700) !important;
1088 }
1089 .frmx-inline-edit-content .wp-switch-editor.switch-tmce[aria-pressed=true], .frmx-inline-edit-content .wp-switch-editor.switch-tmce:focus, .frmx-inline-edit-content .wp-switch-editor.switch-html[aria-pressed=true], .frmx-inline-edit-content .wp-switch-editor.switch-html:focus {
1090 color: var(--bbpc_brand_color) !important;
1091 border-bottom-color: var(--bbpc_brand_color) !important;
1092 background: transparent !important;
1093 }
1094 .frmx-inline-edit-content {
1095 /* ------ Toolbar container ------ */
1096 }
1097 .frmx-inline-edit-content .wp-editor-container {
1098 border: none !important;
1099 box-shadow: none !important;
1100 clear: none !important;
1101 }
1102 .frmx-inline-edit-content .wp-editor-container:hover {
1103 border: none !important;
1104 box-shadow: none !important;
1105 }
1106 .frmx-inline-edit-content {
1107 /* ------ Quicktags (Code view toolbar) — hidden by default, only shown in HTML/Code mode ------ */
1108 }
1109 .frmx-inline-edit-content .quicktags-toolbar {
1110 display: none !important;
1111 height: 0 !important;
1112 padding: 0 !important;
1113 margin: 0 !important;
1114 overflow: hidden !important;
1115 border: none !important;
1116 }
1117 .frmx-inline-edit-content .wp-editor-wrap.html-active .quicktags-toolbar {
1118 display: flex !important;
1119 height: auto !important;
1120 flex-wrap: wrap !important;
1121 gap: 4px !important;
1122 background: var(--black_25) !important;
1123 border-top: none !important;
1124 border-bottom: 1px solid var(--black_75) !important;
1125 border-left: none !important;
1126 border-right: none !important;
1127 padding: 8px 14px !important;
1128 width: 100% !important;
1129 box-sizing: border-box !important;
1130 }
1131 .frmx-inline-edit-content .wp-editor-wrap.html-active .quicktags-toolbar .ed_button {
1132 all: unset;
1133 display: inline-flex !important;
1134 align-items: center !important;
1135 justify-content: center !important;
1136 background: transparent !important;
1137 border: none !important;
1138 color: var(--black_500) !important;
1139 height: 32px !important;
1140 min-width: 32px !important;
1141 font-family: "Inter", sans-serif !important;
1142 font-size: 13px !important;
1143 font-weight: 600 !important;
1144 border-radius: 6px !important;
1145 cursor: pointer;
1146 text-align: center;
1147 transition: background 0.15s ease, color 0.15s ease;
1148 padding: 0 6px !important;
1149 box-shadow: none !important;
1150 }
1151 .frmx-inline-edit-content .wp-editor-wrap.html-active .quicktags-toolbar .ed_button:hover {
1152 background: var(--black_75) !important;
1153 color: var(--black_800) !important;
1154 }
1155 .frmx-inline-edit-content {
1156 /* ------ TinyMCE Visual editor toolbar ------ */
1157 }
1158 .frmx-inline-edit-content .mce-tinymce {
1159 border: none !important;
1160 box-shadow: none !important;
1161 }
1162 .frmx-inline-edit-content .mce-tinymce .mce-toolbar-grp,
1163 .frmx-inline-edit-content .mce-toolbar-grp {
1164 background: var(--black_25) !important;
1165 background-color: var(--black_25) !important;
1166 border-bottom: 1px solid var(--black_75) !important;
1167 border-top: none !important;
1168 border-left: none !important;
1169 border-right: none !important;
1170 padding: 6px 10px !important;
1171 }
1172 .frmx-inline-edit-content .mce-tinymce .mce-toolbar-grp .mce-toolbar .mce-btn-group,
1173 .frmx-inline-edit-content .mce-toolbar-grp .mce-toolbar .mce-btn-group {
1174 padding: 0 2px;
1175 border: none !important;
1176 background: transparent !important;
1177 box-shadow: none !important;
1178 margin: 0 !important;
1179 }
1180 .frmx-inline-edit-content .mce-tinymce .mce-toolbar-grp .mce-toolbar .mce-btn-group::after,
1181 .frmx-inline-edit-content .mce-toolbar-grp .mce-toolbar .mce-btn-group::after {
1182 content: "";
1183 display: inline-block;
1184 vertical-align: middle;
1185 width: 1px;
1186 height: 18px;
1187 background: var(--black_150);
1188 margin: 0 4px;
1189 }
1190 .frmx-inline-edit-content .mce-tinymce .mce-toolbar-grp .mce-toolbar .mce-btn-group:last-child::after,
1191 .frmx-inline-edit-content .mce-toolbar-grp .mce-toolbar .mce-btn-group:last-child::after {
1192 display: none;
1193 }
1194 .frmx-inline-edit-content .mce-tinymce .mce-toolbar-grp .mce-toolbar .mce-btn,
1195 .frmx-inline-edit-content .mce-toolbar-grp .mce-toolbar .mce-btn {
1196 background: transparent !important;
1197 border: none !important;
1198 box-shadow: none !important;
1199 border-radius: 5px !important;
1200 transition: background 0.15s ease;
1201 margin: 0 !important;
1202 }
1203 .frmx-inline-edit-content .mce-tinymce .mce-toolbar-grp .mce-toolbar .mce-btn button,
1204 .frmx-inline-edit-content .mce-toolbar-grp .mce-toolbar .mce-btn button {
1205 padding: 5px 7px !important;
1206 color: var(--black_500);
1207 }
1208 .frmx-inline-edit-content .mce-tinymce .mce-toolbar-grp .mce-toolbar .mce-btn:hover,
1209 .frmx-inline-edit-content .mce-toolbar-grp .mce-toolbar .mce-btn:hover {
1210 background: var(--black_75) !important;
1211 }
1212 .frmx-inline-edit-content .mce-tinymce .mce-toolbar-grp .mce-toolbar .mce-btn:hover button,
1213 .frmx-inline-edit-content .mce-toolbar-grp .mce-toolbar .mce-btn:hover button {
1214 color: var(--black_800);
1215 }
1216 .frmx-inline-edit-content .mce-tinymce .mce-toolbar-grp .mce-toolbar .mce-btn.mce-active,
1217 .frmx-inline-edit-content .mce-toolbar-grp .mce-toolbar .mce-btn.mce-active {
1218 background: color-mix(in srgb, var(--bbpc_brand_color) 10%, transparent) !important;
1219 }
1220 .frmx-inline-edit-content .mce-tinymce .mce-toolbar-grp .mce-toolbar .mce-btn.mce-active button,
1221 .frmx-inline-edit-content .mce-toolbar-grp .mce-toolbar .mce-btn.mce-active button {
1222 color: var(--bbpc_brand_color);
1223 }
1224 .frmx-inline-edit-content {
1225 /* ------ iframe / content area ------ */
1226 }
1227 .frmx-inline-edit-content .mce-edit-area {
1228 border: none !important;
1229 }
1230 .frmx-inline-edit-content .mce-edit-area iframe {
1231 min-height: 160px !important;
1232 background: #fff !important;
1233 }
1234 .frmx-inline-edit-content .frmx-edit-content-textarea {
1235 width: 100% !important;
1236 }
1237 .frmx-inline-edit-content .frmx-edit-content-textarea.wp-editor-area {
1238 border: none !important;
1239 outline: none !important;
1240 padding: 14px 16px !important;
1241 min-height: 160px !important;
1242 font-size: 14px;
1243 line-height: 1.6;
1244 resize: vertical;
1245 background: #fff !important;
1246 color: var(--black_800);
1247 }
1248 .frmx-inline-edit-content .frmx-edit-content-textarea.wp-editor-area::placeholder {
1249 color: var(--black_400);
1250 font-weight: 400;
1251 }
1252
1253 /* ─── Inline Edit Notice Messages ─── */
1254 .frmx-inline-edit-notice {
1255 padding: 10px 16px;
1256 border-radius: 8px;
1257 font-size: 14px;
1258 font-weight: 500;
1259 margin-bottom: 16px;
1260 animation: frmxNoticeSlide 0.3s ease;
1261 }
1262 .frmx-inline-edit-notice.frmx-notice-success {
1263 background: #ecfdf5;
1264 border: 1px solid #a7f3d0;
1265 color: #065f46;
1266 }
1267 .frmx-inline-edit-notice.frmx-notice-error {
1268 background: #fef2f2;
1269 border: 1px solid #fecaca;
1270 color: #991b1b;
1271 }
1272
1273 /* ─── Reply Inline Edit Specific Styles ─── */
1274 .forum-comment.frmx-is-editing > .frmx-reply-card {
1275 border-color: var(--bbpc_brand_color, #4f46e5);
1276 box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.08);
1277 transition: border-color 0.25s ease, box-shadow 0.25s ease;
1278 }
1279 .forum-comment.frmx-is-editing > .comment-content,
1280 .forum-comment.frmx-is-editing .comment-content {
1281 overflow: visible;
1282 }
1283 .forum-comment.frmx-is-editing .frmx-reply-inline-edit {
1284 margin-top: 0;
1285 width: 100%;
1286 }
1287
1288 @keyframes frmxNoticeSlide {
1289 from {
1290 opacity: 0;
1291 transform: translateY(-8px);
1292 }
1293 to {
1294 opacity: 1;
1295 transform: translateY(0);
1296 }
1297 }
1298 .forum-comment .action-button-container.action-btns .bbp-topic-reply-link {
1299 height: 26px;
1300 font-size: 12px;
1301 line-height: 26px;
1302 }
1303 .forum-comment .bbp-author-link {
1304 padding-top: 2px;
1305 }
1306
1307 .bbp-topic-reply-link {
1308 background-color: transparent !important;
1309 }
1310
1311 .answer-action .action-content .ans-title {
1312 margin-bottom: 5px;
1313 }
1314
1315 #favorite-toggle .favorite-toggle {
1316 font-size: 14px;
1317 padding: 2px 20px;
1318 font-weight: 400;
1319 border-radius: 4px;
1320 transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.18s ease-in-out;
1321 background: var(--bs-white);
1322 border: 1px solid var(--black_50);
1323 color: var(--black_900);
1324 text-decoration: none;
1325 word-break: normal;
1326 }
1327 #favorite-toggle .favorite-toggle:hover {
1328 background: rgba(60, 64, 67, 0.04);
1329 }
1330
1331 span#favorite-toggle {
1332 margin-top: 2px;
1333 }
1334
1335 .best-answer {
1336 background: #f1fdf3;
1337 padding: 30px 25px !important;
1338 margin-top: 60px;
1339 border-radius: 6px;
1340 }
1341 .best-answer .accepted-ans-mark {
1342 color: #0abe76;
1343 font-size: 14px;
1344 text-align: right;
1345 }
1346 .best-answer .accepted-ans-mark i {
1347 padding-right: 5px;
1348 }
1349 .best-answer .best-ans-content {
1350 margin-top: 30px;
1351 }
1352 .best-answer .best-ans-content .question-icon {
1353 margin-top: 10px;
1354 margin-right: 20px;
1355 }
1356 .best-answer .best-ans-content p {
1357 font-size: 15px;
1358 }
1359 .best-answer .best-ans-content p:last-child {
1360 margin-bottom: 0;
1361 }
1362 .best-answer.type-reply {
1363 position: relative;
1364 }
1365 .best-answer.type-reply .forum-post-top {
1366 justify-content: start;
1367 }
1368 .best-answer.type-reply .forum-post-top .meta {
1369 margin-left: 5px;
1370 }
1371 .best-answer.type-reply .comment-content {
1372 border-bottom: 0;
1373 padding-bottom: 0;
1374 }
1375
1376 body.bbpress .all-answers,
1377 body.bbpress .bbp-topic-merge {
1378 background: transparent !important;
1379 border-radius: 0;
1380 box-shadow: none;
1381 margin-bottom: 30px;
1382 padding: 0;
1383 position: relative;
1384 transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
1385 border: none;
1386 }
1387 body.bbpress .all-answers ul,
1388 body.bbpress .bbp-topic-merge ul {
1389 list-style: none;
1390 padding-left: 0;
1391 }
1392 body.bbpress .all-answers .title,
1393 body.bbpress .bbp-topic-merge .title {
1394 margin-bottom: 0;
1395 }
1396 body.bbpress .all-answers .frmx-all-replies-header,
1397 body.bbpress .bbp-topic-merge .frmx-all-replies-header {
1398 display: flex;
1399 flex-wrap: wrap;
1400 justify-content: space-between;
1401 align-items: center;
1402 gap: 12px;
1403 border-radius: 12px;
1404 padding: 15px 1px;
1405 margin-bottom: 15px;
1406 margin-top: 50px;
1407 /* Left section: reply count + participant avatars */
1408 }
1409 body.bbpress .all-answers .frmx-all-replies-header .frmx-header-left,
1410 body.bbpress .bbp-topic-merge .frmx-all-replies-header .frmx-header-left {
1411 display: flex;
1412 align-items: center;
1413 gap: 14px;
1414 flex: 1;
1415 min-width: 0;
1416 flex-wrap: wrap;
1417 }
1418 body.bbpress .all-answers .frmx-all-replies-header .replies-title,
1419 body.bbpress .bbp-topic-merge .frmx-all-replies-header .replies-title {
1420 font-size: 22px;
1421 font-weight: 600;
1422 color: var(--black_900);
1423 margin: 0;
1424 display: flex;
1425 align-items: center;
1426 gap: 8px;
1427 white-space: nowrap;
1428 }
1429 body.bbpress .all-answers .frmx-all-replies-header .replies-title .frmx-reply-count-icon,
1430 body.bbpress .bbp-topic-merge .frmx-all-replies-header .replies-title .frmx-reply-count-icon {
1431 display: inline-flex;
1432 color: var(--black_500);
1433 }
1434 body.bbpress .all-answers .frmx-all-replies-header .frmx-header-right,
1435 body.bbpress .bbp-topic-merge .frmx-all-replies-header .frmx-header-right {
1436 display: flex;
1437 align-items: center;
1438 gap: 12px;
1439 }
1440 body.bbpress .all-answers .filter-bar,
1441 body.bbpress .bbp-topic-merge .filter-bar {
1442 background: #f7f8f9;
1443 border: 1px solid #eaeeef;
1444 padding: 10px 30px;
1445 justify-content: space-between;
1446 border-radius: 4px;
1447 }
1448 body.bbpress .all-answers .filter-bar .custom-select,
1449 body.bbpress .bbp-topic-merge .filter-bar .custom-select {
1450 box-shadow: none;
1451 }
1452 body.bbpress .all-answers .filter-bar .custom-select:focus,
1453 body.bbpress .bbp-topic-merge .filter-bar .custom-select:focus {
1454 outline: none;
1455 box-shadow: 0 0 0 0.2rem transparent;
1456 border: none;
1457 }
1458 body.bbpress .all-answers .filter-bar .custom-select::after,
1459 body.bbpress .bbp-topic-merge .filter-bar .custom-select::after {
1460 border-bottom: 1px solid #6b707f;
1461 border-right: 1px solid #6b707f;
1462 height: 6px;
1463 width: 6px;
1464 right: 5px;
1465 }
1466 body.bbpress .all-answers .filter-bar p,
1467 body.bbpress .bbp-topic-merge .filter-bar p {
1468 margin-top: 8px;
1469 margin-bottom: 0;
1470 font-size: 14px;
1471 color: #6b707f;
1472 }
1473 body.bbpress .all-answers .filter-bar .frmx-nice-select,
1474 body.bbpress .bbp-topic-merge .filter-bar .frmx-nice-select {
1475 background: #f7f8f9;
1476 height: 100%;
1477 border: 0;
1478 padding: 0 25px 0 0;
1479 }
1480 body.bbpress .all-answers .filter-bar .frmx-nice-select .list,
1481 body.bbpress .bbp-topic-merge .filter-bar .frmx-nice-select .list {
1482 width: 100px;
1483 }
1484 body.bbpress .all-answers .filter-bar .frmx-nice-select::-ms-expand,
1485 body.bbpress .bbp-topic-merge .filter-bar .frmx-nice-select::-ms-expand {
1486 display: none;
1487 }
1488 body.bbpress .all-answers .forum-comment,
1489 body.bbpress .bbp-topic-merge .forum-comment {
1490 display: flex;
1491 align-items: flex-start;
1492 gap: 12px;
1493 margin-bottom: 16px;
1494 padding-bottom: 0 !important;
1495 border-bottom: none;
1496 }
1497 body.bbpress .all-answers .forum-comment .frmx-reply-avatar,
1498 body.bbpress .bbp-topic-merge .forum-comment .frmx-reply-avatar {
1499 flex-shrink: 0;
1500 }
1501 body.bbpress .all-answers .forum-comment .frmx-reply-avatar img,
1502 body.bbpress .bbp-topic-merge .forum-comment .frmx-reply-avatar img {
1503 width: 36px;
1504 height: 36px;
1505 border-radius: 50%;
1506 vertical-align: top;
1507 }
1508 body.bbpress .all-answers .forum-comment .frmx-reply-avatar,
1509 body.bbpress .bbp-topic-merge .forum-comment .frmx-reply-avatar {
1510 /* Thread vertical line */
1511 position: relative;
1512 }
1513 body.bbpress .all-answers .forum-comment,
1514 body.bbpress .bbp-topic-merge .forum-comment {
1515 /* Hide thread line on last child in flat list */
1516 }
1517 body.bbpress .all-answers .forum-comment:last-child .frmx-reply-avatar::after,
1518 body.bbpress .bbp-topic-merge .forum-comment:last-child .frmx-reply-avatar::after {
1519 display: none;
1520 }
1521 body.bbpress .all-answers .forum-comment .frmx-reply-card,
1522 body.bbpress .bbp-topic-merge .forum-comment .frmx-reply-card {
1523 flex: 1;
1524 min-width: 0;
1525 background: var(--bs-white);
1526 border: 1px solid var(--black_50);
1527 border-radius: 10px;
1528 padding: 18px 20px;
1529 }
1530 body.bbpress .all-answers .forum-comment .frmx-reply-card .bbp-attachments-errors,
1531 body.bbpress .all-answers .forum-comment .frmx-reply-card .bbp-attachments,
1532 body.bbpress .bbp-topic-merge .forum-comment .frmx-reply-card .bbp-attachments-errors,
1533 body.bbpress .bbp-topic-merge .forum-comment .frmx-reply-card .bbp-attachments {
1534 width: 100%;
1535 }
1536 body.bbpress .all-answers .forum-comment .frmx-reply-card .bbp-attachments-errors h6,
1537 body.bbpress .all-answers .forum-comment .frmx-reply-card .bbp-attachments h6,
1538 body.bbpress .bbp-topic-merge .forum-comment .frmx-reply-card .bbp-attachments-errors h6,
1539 body.bbpress .bbp-topic-merge .forum-comment .frmx-reply-card .bbp-attachments h6 {
1540 font-size: 16px;
1541 }
1542 body.bbpress .all-answers .forum-comment .frmx-reply-card .bbp-attachments-errors .d4p-bbp-att-wrapper,
1543 body.bbpress .all-answers .forum-comment .frmx-reply-card .bbp-attachments .d4p-bbp-att-wrapper,
1544 body.bbpress .bbp-topic-merge .forum-comment .frmx-reply-card .bbp-attachments-errors .d4p-bbp-att-wrapper,
1545 body.bbpress .bbp-topic-merge .forum-comment .frmx-reply-card .bbp-attachments .d4p-bbp-att-wrapper {
1546 font-size: 16px;
1547 }
1548 body.bbpress .all-answers .forum-comment .frmx-reply-card .bbp-attachments-errors .with-icons,
1549 body.bbpress .all-answers .forum-comment .frmx-reply-card .bbp-attachments .with-icons,
1550 body.bbpress .bbp-topic-merge .forum-comment .frmx-reply-card .bbp-attachments-errors .with-icons,
1551 body.bbpress .bbp-topic-merge .forum-comment .frmx-reply-card .bbp-attachments .with-icons {
1552 padding: 5px 0 0 0;
1553 }
1554 body.bbpress .all-answers .forum-comment .frmx-reply-card .bbp-author-wrap,
1555 body.bbpress .bbp-topic-merge .forum-comment .frmx-reply-card .bbp-author-wrap {
1556 margin: 0;
1557 /* Reset inherited flex margin */
1558 }
1559 body.bbpress .all-answers .forum-comment .frmx-reply-card .comment-content p,
1560 body.bbpress .bbp-topic-merge .forum-comment .frmx-reply-card .comment-content p {
1561 font-size: 16px;
1562 }
1563 body.bbpress .all-answers .forum-comment .frmx-reply-card .forum-post-author,
1564 body.bbpress .bbp-topic-merge .forum-comment .frmx-reply-card .forum-post-author {
1565 display: flex;
1566 align-items: center;
1567 gap: 10px;
1568 margin: 0;
1569 }
1570 body.bbpress .all-answers .forum-comment .frmx-reply-card .forum-post-author .topic-author,
1571 body.bbpress .bbp-topic-merge .forum-comment .frmx-reply-card .forum-post-author .topic-author {
1572 margin: 0 !important;
1573 }
1574 body.bbpress .all-answers .forum-comment .frmx-reply-card .forum-post-author .topic-author .bbp-author-name,
1575 body.bbpress .bbp-topic-merge .forum-comment .frmx-reply-card .forum-post-author .topic-author .bbp-author-name {
1576 font-size: 14px;
1577 font-weight: 600;
1578 color: var(--black_900);
1579 }
1580 body.bbpress .all-answers .forum-comment .frmx-reply-card .forum-post-author .meta,
1581 body.bbpress .bbp-topic-merge .forum-comment .frmx-reply-card .forum-post-author .meta {
1582 font-size: 13px;
1583 color: var(--black_500);
1584 }
1585 body.bbpress .all-answers .forum-comment .frmx-reply-card .forum-post-author .meta a,
1586 body.bbpress .bbp-topic-merge .forum-comment .frmx-reply-card .forum-post-author .meta a {
1587 color: inherit;
1588 }
1589 @media (max-width: 576px) {
1590 body.bbpress .all-answers .forum-comment,
1591 body.bbpress .bbp-topic-merge .forum-comment {
1592 flex-direction: row;
1593 align-items: flex-start;
1594 gap: 12px;
1595 }
1596 body.bbpress .all-answers .forum-comment .frmx-reply-avatar,
1597 body.bbpress .bbp-topic-merge .forum-comment .frmx-reply-avatar {
1598 width: 34px;
1599 min-width: 34px;
1600 display: flex;
1601 flex-direction: column;
1602 align-items: center;
1603 gap: 8px;
1604 padding-top: 2px;
1605 }
1606 body.bbpress .all-answers .forum-comment .frmx-reply-avatar img,
1607 body.bbpress .bbp-topic-merge .forum-comment .frmx-reply-avatar img {
1608 width: 30px;
1609 height: 30px;
1610 }
1611 body.bbpress .all-answers .forum-comment .frmx-reply-card,
1612 body.bbpress .bbp-topic-merge .forum-comment .frmx-reply-card {
1613 flex: 1 1 auto;
1614 width: auto;
1615 padding: 14px 15px;
1616 border-radius: 12px;
1617 }
1618 body.bbpress .all-answers .forum-comment .frmx-reply-card .forum-post-top,
1619 body.bbpress .bbp-topic-merge .forum-comment .frmx-reply-card .forum-post-top {
1620 flex-wrap: nowrap;
1621 align-items: flex-start;
1622 gap: 8px;
1623 }
1624 body.bbpress .all-answers .forum-comment .frmx-reply-card .bbp-author-wrap,
1625 body.bbpress .bbp-topic-merge .forum-comment .frmx-reply-card .bbp-author-wrap {
1626 flex: 1 1 auto;
1627 width: auto;
1628 min-width: 0;
1629 }
1630 body.bbpress .all-answers .forum-comment .frmx-reply-card .forum-post-author,
1631 body.bbpress .bbp-topic-merge .forum-comment .frmx-reply-card .forum-post-author {
1632 flex-direction: column;
1633 align-items: flex-start;
1634 gap: 4px;
1635 }
1636 body.bbpress .all-answers .forum-comment .frmx-reply-card .forum-post-author .topic-author,
1637 body.bbpress .bbp-topic-merge .forum-comment .frmx-reply-card .forum-post-author .topic-author {
1638 flex-wrap: wrap;
1639 gap: 6px;
1640 }
1641 body.bbpress .all-answers .forum-comment .frmx-reply-card .forum-post-author .meta,
1642 body.bbpress .bbp-topic-merge .forum-comment .frmx-reply-card .forum-post-author .meta {
1643 line-height: 1.5;
1644 }
1645 body.bbpress .all-answers .forum-comment .frmx-reply-card .reply-admin-links,
1646 body.bbpress .bbp-topic-merge .forum-comment .frmx-reply-card .reply-admin-links {
1647 width: auto;
1648 display: flex;
1649 align-items: center;
1650 gap: 8px;
1651 justify-content: flex-end;
1652 margin-left: auto;
1653 flex-shrink: 0;
1654 }
1655 body.bbpress .all-answers .forum-comment .frmx-reply-card .reply-admin-links .private-reply-badge,
1656 body.bbpress .bbp-topic-merge .forum-comment .frmx-reply-card .reply-admin-links .private-reply-badge {
1657 display: inline-flex;
1658 align-items: center;
1659 height: 28px;
1660 padding: 0 10px;
1661 border-radius: 999px;
1662 font-size: 12px;
1663 font-weight: 600;
1664 letter-spacing: 0;
1665 color: #8a5a00;
1666 background: #fff4cf;
1667 border: 1px solid #ffe7ab;
1668 white-space: nowrap;
1669 }
1670 }
1671 body.bbpress .all-answers .forum-comment.bbp-private-reply .frmx-reply-card,
1672 body.bbpress .bbp-topic-merge .forum-comment.bbp-private-reply .frmx-reply-card {
1673 background: rgb(255, 255, 241) !important;
1674 padding: 25px;
1675 }
1676 @media (max-width: 736px) {
1677 body.bbpress .all-answers .forum-comment.bbp-private-reply .frmx-reply-card,
1678 body.bbpress .bbp-topic-merge .forum-comment.bbp-private-reply .frmx-reply-card {
1679 padding: 15px;
1680 }
1681 }
1682 body.bbpress .all-answers .forum-comment.bbp-private-reply .bbp-admin-links,
1683 body.bbpress .bbp-topic-merge .forum-comment.bbp-private-reply .bbp-admin-links {
1684 background: var(--black_25);
1685 }
1686 body.bbpress .all-answers .forum-comment.bbp-private-reply .bbp-admin-links li:hover,
1687 body.bbpress .bbp-topic-merge .forum-comment.bbp-private-reply .bbp-admin-links li:hover {
1688 background: var(--black_50);
1689 }
1690 body.bbpress .all-answers .forum-comment.bbp-private-reply .comment-content,
1691 body.bbpress .bbp-topic-merge .forum-comment.bbp-private-reply .comment-content {
1692 border: none;
1693 padding: 0;
1694 }
1695 body.bbpress .all-answers .forum-comment.status-trash .frmx-reply-card,
1696 body.bbpress .bbp-topic-merge .forum-comment.status-trash .frmx-reply-card {
1697 background: rgba(255, 0, 0, 0.1215686275);
1698 }
1699 body.bbpress .all-answers .forum-comment .comment-content,
1700 body.bbpress .bbp-topic-merge .forum-comment .comment-content {
1701 margin-left: 0;
1702 padding-bottom: 0;
1703 margin-top: 10px;
1704 }
1705 @media (max-width: 576px) {
1706 body.bbpress .all-answers .forum-comment .comment-content,
1707 body.bbpress .bbp-topic-merge .forum-comment .comment-content {
1708 margin-left: 0;
1709 }
1710 }
1711 body.bbpress .all-answers .forum-comment .comment-content .alert,
1712 body.bbpress .bbp-topic-merge .forum-comment .comment-content .alert {
1713 padding: 2px 10px;
1714 font-size: 14px;
1715 background: var(--black_25);
1716 border-color: var(--black_25);
1717 color: var(--black_900);
1718 }
1719 body.bbpress .all-answers .forum-comment .comment-content ul,
1720 body.bbpress .all-answers .forum-comment .comment-content ol,
1721 body.bbpress .bbp-topic-merge .forum-comment .comment-content ul,
1722 body.bbpress .bbp-topic-merge .forum-comment .comment-content ol {
1723 line-height: 2;
1724 }
1725 body.bbpress .all-answers .forum-comment .comment-content p:last-child,
1726 body.bbpress .bbp-topic-merge .forum-comment .comment-content p:last-child {
1727 margin-bottom: 0;
1728 }
1729 body.bbpress .all-answers .forum-comment .comment-content .action-btns,
1730 body.bbpress .bbp-topic-merge .forum-comment .comment-content .action-btns {
1731 margin-top: 20px;
1732 display: none;
1733 opacity: 0;
1734 transition: all 5s ease-in;
1735 }
1736 body.bbpress .all-answers .forum-comment:hover .comment-content .action-btns,
1737 body.bbpress .bbp-topic-merge .forum-comment:hover .comment-content .action-btns {
1738 display: block;
1739 opacity: 1;
1740 }
1741 body.bbpress .all-answers .pagination-wrapper,
1742 body.bbpress .bbp-topic-merge .pagination-wrapper {
1743 background: transparent;
1744 box-shadow: none;
1745 padding: 0;
1746 flex-direction: row;
1747 gap: 12px;
1748 }
1749 body.bbpress .all-answers .pagination-wrapper.paged,
1750 body.bbpress .bbp-topic-merge .pagination-wrapper.paged {
1751 margin-top: 15px;
1752 }
1753 body.bbpress .all-answers .pagination-wrapper + .pagination-wrapper,
1754 body.bbpress .bbp-topic-merge .pagination-wrapper + .pagination-wrapper {
1755 margin-top: 25px;
1756 }
1757 body.bbpress .all-answers .pagination-wrapper .bbp-pagination,
1758 body.bbpress .bbp-topic-merge .pagination-wrapper .bbp-pagination {
1759 justify-content: flex-end;
1760 }
1761 body.bbpress .all-answers .pagination-wrapper .view-post-of,
1762 body.bbpress .bbp-topic-merge .pagination-wrapper .view-post-of {
1763 text-align: left;
1764 margin-left: 55px;
1765 }
1766 @media (max-width: 576px) {
1767 body.bbpress .all-answers .pagination-wrapper,
1768 body.bbpress .bbp-topic-merge .pagination-wrapper {
1769 flex-direction: column;
1770 align-items: flex-start;
1771 }
1772 body.bbpress .all-answers .pagination-wrapper .bbp-pagination,
1773 body.bbpress .bbp-topic-merge .pagination-wrapper .bbp-pagination {
1774 width: 100%;
1775 justify-content: flex-start;
1776 }
1777 }
1778
1779 .replies-sorting .custom-select {
1780 font-size: 14px;
1781 box-shadow: none;
1782 padding: 0 80px 0 20px;
1783 height: 100%;
1784 background-color: var(--bs-white);
1785 border-radius: 5px;
1786 border: solid 1px var(--black_50);
1787 color: var(--black_600);
1788 }
1789
1790 select#sort-replies:focus {
1791 border-color: #999;
1792 outline: none;
1793 box-shadow: 0 0 3px #999;
1794 }
1795
1796 .topic_comments + .pagination-wrapper {
1797 margin-top: 30px;
1798 }
1799
1800 ul.bbp-topic-revision-log {
1801 margin-top: 15px;
1802 margin-bottom: 15px;
1803 display: flex;
1804 flex-direction: column;
1805 gap: 10px;
1806 padding-left: 30px !important;
1807 }
1808
1809 .bbp-topic-revision-log,
1810 .bbp-topic-revision-log-item,
1811 .bbp-reply-revision-log .bbp-reply-revision-log-item {
1812 font-size: 12px;
1813 color: var(--black_400);
1814 font-style: italic;
1815 }
1816 .bbp-topic-revision-log img,
1817 .bbp-topic-revision-log-item img,
1818 .bbp-reply-revision-log .bbp-reply-revision-log-item img {
1819 display: none;
1820 }
1821
1822 .bbp-topic-revision-log-item,
1823 .bbp-reply-revision-log-item {
1824 margin-bottom: 0;
1825 }
1826
1827 .topic-info {
1828 text-align: left;
1829 position: relative;
1830 padding: 22px 10px 22px 26px;
1831 margin: 0 0 7%;
1832 background: #fff;
1833 border-radius: 3px;
1834 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
1835 }
1836 .topic-info p {
1837 position: relative;
1838 margin: 0 0 10px;
1839 padding-left: 90px;
1840 height: 20px;
1841 white-space: nowrap;
1842 overflow: hidden;
1843 text-overflow: ellipsis;
1844 font-size: 13px;
1845 line-height: 1.5;
1846 }
1847 .topic-info p a {
1848 padding-left: 5px;
1849 }
1850 .topic-info p strong.mini-title {
1851 position: absolute;
1852 top: 2px;
1853 left: 0;
1854 font-size: 11px;
1855 text-transform: uppercase;
1856 letter-spacing: 1px;
1857 font-weight: 400;
1858 }
1859 .topic-info p img {
1860 width: 15px;
1861 height: 15px;
1862 position: relative;
1863 float: left;
1864 margin: 0 2px 0 0;
1865 padding: 0;
1866 top: 1px;
1867 border-radius: 3px;
1868 }
1869 .topic-info .delete-ticket {
1870 color: #e85e3c;
1871 margin-top: 15px;
1872 }
1873
1874 .single-topic .main-post {
1875 word-break: break-all;
1876 position: relative;
1877 background: var(--bs-white) !important;
1878 border-radius: 16px;
1879 box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
1880 margin-bottom: 24px;
1881 padding: 24px 28px 28px;
1882 transition: all 0.3s ease-in-out;
1883 border: 1px solid var(--black_50);
1884 }
1885 .single-topic .main-post:hover {
1886 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
1887 }
1888 .single-topic .main-post .forum-post-top {
1889 padding-bottom: 16px;
1890 border-bottom: 1px solid var(--black_50);
1891 margin-bottom: 20px;
1892 align-items: center;
1893 }
1894 .single-topic .main-post .forum-post-top .bbp-author-wrap {
1895 gap: 12px;
1896 }
1897 .single-topic .main-post .forum-post-top .bbp-author-wrap > .bbp-author-link img {
1898 width: 48px;
1899 max-width: 48px;
1900 height: 48px;
1901 border-radius: 50%;
1902 object-fit: cover;
1903 border: 2px solid var(--black_50);
1904 }
1905 .single-topic .main-post .forum-post-top .forum-post-author .topic-author {
1906 gap: 10px;
1907 }
1908 .single-topic .main-post .forum-post-top .forum-post-author .topic-author .bbp-author-name {
1909 font-size: 15px;
1910 font-weight: 600;
1911 color: var(--black_900);
1912 }
1913 .single-topic .main-post .forum-post-top .forum-post-author .forum-author-meta.meta {
1914 margin-top: 4px;
1915 font-size: 13px;
1916 color: var(--black_400);
1917 }
1918 .single-topic .main-post .forum-post-top #subscription-toggle a {
1919 font-size: 14px;
1920 font-weight: 500;
1921 padding: 10px 24px;
1922 color: var(--bs-white);
1923 border-radius: 8px;
1924 background: var(--black_800);
1925 display: inline-flex;
1926 align-items: center;
1927 gap: 6px;
1928 text-decoration: none;
1929 transition: all 0.2s ease;
1930 border: none;
1931 }
1932 .single-topic .main-post .forum-post-top #subscription-toggle a:hover {
1933 background: var(--black_900);
1934 transform: translateY(-1px);
1935 }
1936 .single-topic .main-post .forum-post-top #subscription-toggle a.is-subscribed {
1937 background: var(--black_50);
1938 color: var(--black_700);
1939 }
1940 .single-topic .main-post .forum-post-top #subscription-toggle a.is-subscribed:hover {
1941 background: var(--black_100);
1942 }
1943 .single-topic .main-post .forum-post-top .bbp-admin-links-dropdown {
1944 display: flex;
1945 align-items: center;
1946 }
1947 .single-topic .main-post .forum-post-top .bbp-admin-links-dropdown .frmx-nice-select {
1948 padding: 8px 8px;
1949 border-radius: 8px;
1950 transition: background 0.2s ease;
1951 line-height: 1;
1952 }
1953 .single-topic .main-post .forum-post-top .bbp-admin-links-dropdown .frmx-nice-select:hover {
1954 background: var(--black_50);
1955 }
1956 .single-topic .main-post .forum-post-top .bbp-admin-links-dropdown .frmx-nice-select .current::before {
1957 color: var(--black_600);
1958 font-size: 22px;
1959 }
1960 .single-topic .main-post .q-title {
1961 padding: 0 0 20px 0;
1962 gap: 10px;
1963 border-bottom: none;
1964 }
1965 .single-topic .main-post .q-title h1 {
1966 font-size: 26px;
1967 font-weight: 700;
1968 line-height: 1.35;
1969 color: var(--black_900);
1970 margin: 0;
1971 }
1972 .single-topic .main-post .q-title .solved-topic-bar .accepted-ans-mark {
1973 background: #e6f7ed;
1974 color: #0a8043;
1975 }
1976 .single-topic .main-post .forum-post-content {
1977 /* Hide Share this Topic - show only Share button inline */
1978 }
1979 .single-topic .main-post .forum-post-content .frmx-share-topic .share-text,
1980 .single-topic .main-post .forum-post-content .frmx-share-topic span:not(.share-icon) {
1981 display: none;
1982 }
1983 .single-topic .main-post .forum-post-content .content.editor-content {
1984 font-size: 15px;
1985 line-height: 1.75;
1986 color: var(--black_700);
1987 }
1988 .single-topic .main-post .forum-post-content .content.editor-content p {
1989 margin-bottom: 16px;
1990 }
1991 .single-topic .main-post .forum-post-content .content.editor-content p:last-child {
1992 margin-bottom: 0;
1993 }
1994 .single-topic .main-post .forum-post-content .content.editor-content p strong {
1995 color: var(--black_900);
1996 font-weight: 600;
1997 }
1998 .single-topic .main-post .forum-post-content {
1999 /* Reaction Buttons Section - All in one horizontal row */
2000 }
2001 .single-topic .main-post .forum-post-content .forumax-reactions-container {
2002 margin-top: 25px;
2003 padding-top: 0;
2004 border-top: none;
2005 display: flex;
2006 flex-wrap: wrap;
2007 align-items: center;
2008 gap: 12px;
2009 /* All reaction wrappers inline */
2010 }
2011 .single-topic .main-post .forum-post-content .forumax-reactions-container .forumax-reactions-wrapper,
2012 .single-topic .main-post .forum-post-content .forumax-reactions-container .frmx-same-question-wrapper,
2013 .single-topic .main-post .forum-post-content .forumax-reactions-container .frmx-share-wrapper {
2014 display: inline-flex;
2015 align-items: center;
2016 gap: 10px;
2017 }
2018 .single-topic .main-post .forum-post-content .forumax-reactions-container .forumax-reactions-wrapper {
2019 flex-wrap: nowrap;
2020 }
2021 .single-topic .main-post .forum-post-content .forumax-reactions-container .forumax-reaction-option {
2022 display: inline-flex;
2023 align-items: center;
2024 gap: 8px;
2025 padding: 8px 16px;
2026 border-radius: 50px;
2027 border: 1px solid var(--black_100);
2028 background: var(--bs-white);
2029 font-size: 14px;
2030 font-weight: 500;
2031 color: var(--black_700);
2032 cursor: pointer;
2033 transition: all 0.2s ease;
2034 }
2035 .single-topic .main-post .forum-post-content .forumax-reactions-container .forumax-reaction-option:hover {
2036 background: var(--black_25);
2037 border-color: var(--black_150);
2038 }
2039 .single-topic .main-post .forum-post-content .forumax-reactions-container .forumax-reaction-option {
2040 /* Agree button with blue fill when active */
2041 }
2042 .single-topic .main-post .forum-post-content .forumax-reactions-container .forumax-reaction-option.active, .single-topic .main-post .forum-post-content .forumax-reactions-container .forumax-reaction-option.reacted {
2043 background: #e3f2fd;
2044 border-color: #2196f3;
2045 color: #1976d2;
2046 }
2047 .single-topic .main-post .forum-post-content .forumax-reactions-container .forumax-reaction-option.active svg path, .single-topic .main-post .forum-post-content .forumax-reactions-container .forumax-reaction-option.reacted svg path {
2048 fill: currentColor;
2049 }
2050 .single-topic .main-post .forum-post-content .forumax-reactions-container .forumax-reaction-option svg {
2051 width: 16px;
2052 height: 16px;
2053 }
2054 .single-topic .main-post .forum-post-content .forumax-reactions-container .forumax-reaction-option .reaction-count {
2055 font-weight: 600;
2056 margin-left: 0;
2057 min-width: auto;
2058 }
2059 .single-topic .main-post .forum-post-content .forumax-reactions-container {
2060 /* Share button styling */
2061 }
2062 .single-topic .main-post .forum-post-content .forumax-reactions-container .frmx-share-topic-btn {
2063 display: inline-flex;
2064 align-items: center;
2065 gap: 6px;
2066 padding: 8px 16px;
2067 border-radius: 50px;
2068 border: none;
2069 background: transparent;
2070 font-size: 14px;
2071 font-weight: 500;
2072 color: var(--black_600);
2073 cursor: pointer;
2074 transition: all 0.2s ease;
2075 }
2076 .single-topic .main-post .forum-post-content .forumax-reactions-container .frmx-share-topic-btn:hover {
2077 background: var(--black_25);
2078 }
2079 .single-topic .main-post .forum-post-content .forumax-reactions-container .frmx-share-topic-btn svg {
2080 width: 16px;
2081 height: 16px;
2082 }
2083 .single-topic .main-post .forum-post-content .forum-post-btm {
2084 flex-wrap: wrap;
2085 gap: 12px;
2086 padding: 20px 0 18px;
2087 border-bottom: none;
2088 align-items: center;
2089 }
2090 .single-topic .main-post .forum-post-content .forum-post-btm .taxonomy.forum-post-tags {
2091 display: flex;
2092 flex-wrap: wrap;
2093 align-items: center;
2094 gap: 6px;
2095 }
2096 .single-topic .main-post .forum-post-content .forum-post-btm .taxonomy.forum-post-tags strong {
2097 display: none;
2098 }
2099 .single-topic .main-post .forum-post-content .forum-post-btm .taxonomy.forum-post-tags .tags-label {
2100 font-size: 15px;
2101 font-weight: 600;
2102 color: var(--black_700);
2103 }
2104 .single-topic .main-post .forum-post-content .forum-post-btm .taxonomy.forum-post-tags .tags {
2105 font-size: 15px;
2106 line-height: 1.7;
2107 color: var(--black_500);
2108 }
2109 .single-topic .main-post .forum-post-content .forum-post-btm .taxonomy.forum-post-tags .tags a {
2110 display: inline;
2111 padding: 0;
2112 background: transparent;
2113 border: 0;
2114 border-radius: 0;
2115 font-size: inherit;
2116 font-weight: 400;
2117 color: var(--black_600);
2118 text-decoration: none;
2119 transition: color 0.2s ease;
2120 }
2121 .single-topic .main-post .forum-post-content .forum-post-btm .taxonomy.forum-post-tags .tags a:hover {
2122 background: transparent;
2123 border-color: transparent;
2124 color: var(--black_800);
2125 }
2126 .single-topic .main-post .forum-post-content .forum-post-btm .taxonomy.forum-post-cat {
2127 margin-left: auto;
2128 padding: 6px 14px;
2129 background: #fff0e6;
2130 border: 1px solid #ffc9a8;
2131 border-radius: 50px;
2132 display: flex;
2133 align-items: center;
2134 gap: 8px;
2135 }
2136 .single-topic .main-post .forum-post-content .forum-post-btm .taxonomy.forum-post-cat img {
2137 width: 16px;
2138 height: 16px;
2139 border-radius: 4px;
2140 margin-right: 0 !important;
2141 }
2142 .single-topic .main-post .forum-post-content .forum-post-btm .taxonomy.forum-post-cat a {
2143 font-size: 13px;
2144 font-weight: 600;
2145 color: #e65100;
2146 text-decoration: none;
2147 }
2148 .single-topic .main-post .forum-post-content .forum-post-btm .taxonomy.forum-post-cat a:hover {
2149 text-decoration: underline;
2150 }
2151 .single-topic .main-post .forum-post-content .forum-post-btm {
2152 /* Three dot menu */
2153 }
2154 .single-topic .main-post .forum-post-content .forum-post-btm .frmx-more-options {
2155 margin-left: 8px;
2156 }
2157 .single-topic .main-post .forum-post-content .forum-post-btm .frmx-more-options button {
2158 background: transparent;
2159 border: none;
2160 padding: 8px;
2161 cursor: pointer;
2162 color: var(--black_400);
2163 font-size: 18px;
2164 }
2165 .single-topic .main-post .forum-post-content .forum-post-btm .frmx-more-options button:hover {
2166 color: var(--black_600);
2167 }
2168 .single-topic .main-post .forum-post-content .action-button-container.action-btns {
2169 margin-top: 30px;
2170 padding-top: 15px;
2171 border-top: 1px solid var(--black_50);
2172 flex-wrap: wrap;
2173 /* Reaction wrap (same-question + emoji reactions) — inline */
2174 }
2175 .single-topic .main-post .forum-post-content .action-button-container.action-btns > .frmx-reaction-topic-wrap {
2176 display: inline-flex;
2177 align-items: center;
2178 gap: 10px;
2179 flex-wrap: wrap;
2180 }
2181 .single-topic .main-post .forum-post-content .action-button-container.action-btns {
2182 /* Voting inside action buttons — horizontal inline */
2183 }
2184 .single-topic .main-post .forum-post-content .action-button-container.action-btns > .bbp-voting {
2185 position: static !important;
2186 display: inline-flex !important;
2187 flex-direction: row !important;
2188 align-items: center;
2189 gap: 6px;
2190 padding: 0;
2191 margin: 0;
2192 border: none;
2193 background: transparent;
2194 }
2195 .single-topic .main-post .forum-post-content .action-button-container.action-btns > .bbp-voting .bbp-voting-label {
2196 display: none !important;
2197 }
2198 .single-topic .main-post .forum-post-content .action-button-container.action-btns > .bbp-voting a.vote {
2199 font-size: 0;
2200 line-height: 0;
2201 padding: 4px;
2202 }
2203 .single-topic .main-post .forum-post-content .action-button-container.action-btns > .bbp-voting a.vote::before {
2204 font-size: 18px;
2205 line-height: 1;
2206 }
2207 .single-topic .main-post .forum-post-content .action-button-container.action-btns > .bbp-voting .score {
2208 font-size: 14px;
2209 font-weight: 600;
2210 min-width: 22px;
2211 text-align: center;
2212 }
2213 .single-topic .main-post .forum-post-content .action-button-container.action-btns .taxonomy.forum-post-tags {
2214 display: flex;
2215 flex-wrap: wrap;
2216 align-items: center;
2217 gap: 6px;
2218 flex: 1;
2219 }
2220 .single-topic .main-post .forum-post-content .action-button-container.action-btns .taxonomy.forum-post-tags .tags-label {
2221 font-size: 15px;
2222 font-weight: 600;
2223 color: var(--black_700);
2224 }
2225 .single-topic .main-post .forum-post-content .action-button-container.action-btns .taxonomy.forum-post-tags .tags {
2226 font-size: 13px;
2227 line-height: 1.7;
2228 color: var(--black_500);
2229 }
2230 .single-topic .main-post .forum-post-content .action-button-container.action-btns .taxonomy.forum-post-tags .tags a {
2231 display: inline;
2232 padding: 0;
2233 background: transparent;
2234 border: 0;
2235 border-radius: 0;
2236 font-size: inherit;
2237 font-weight: 400;
2238 color: var(--black_600);
2239 text-decoration: none;
2240 transition: color 0.2s ease;
2241 }
2242 .single-topic .main-post .forum-post-content .action-button-container.action-btns .taxonomy.forum-post-tags .tags a:hover {
2243 background: transparent;
2244 border-color: transparent;
2245 color: var(--black_800);
2246 }
2247 .single-topic .main-post .forum-post-content .action-button-container.action-btns .frmx-action-btns-right {
2248 display: flex;
2249 align-items: center;
2250 gap: 12px;
2251 margin-left: auto;
2252 }
2253 .single-topic .main-post .forum-post-content .action-button-container.action-btns.has-topic-tags {
2254 justify-content: space-between;
2255 }
2256 .single-topic .main-post .forum-post-content .action-button-container.action-btns.has-topic-tags .taxonomy.forum-post-tags {
2257 flex: 1 1 auto;
2258 }
2259 .single-topic .main-post .forum-post-content .action-button-container.action-btns.has-topic-tags .frmx-action-btns-right {
2260 margin-left: auto;
2261 }
2262 .single-topic .main-post .forum-post-content .action-button-container.action-btns.no-topic-tags {
2263 justify-content: flex-start;
2264 }
2265 .single-topic .main-post .forum-post-content .action-button-container.action-btns.no-topic-tags .frmx-action-btns-right {
2266 margin-left: 0;
2267 }
2268 .single-topic .main-post .forum-post-content .action-button-container.action-btns #favorite-toggle .favorite-toggle {
2269 padding: 6px 14px;
2270 font-size: 14px;
2271 font-weight: 500;
2272 border-radius: 50px;
2273 border: 1px solid var(--black_100);
2274 background: var(--bs-white);
2275 color: var(--black_700);
2276 transition: all 0.2s ease;
2277 }
2278 .single-topic .main-post .forum-post-content .action-button-container.action-btns #favorite-toggle .favorite-toggle:hover {
2279 background: var(--black_25);
2280 border-color: var(--black_150);
2281 }
2282 .single-topic .main-post .forum-post-content .action-button-container.action-btns #favorite-toggle .favorite-toggle.is-favorite {
2283 background: #fff8e1;
2284 border-color: #ffc107;
2285 color: #b28704;
2286 }
2287 .single-topic .main-post .forum-post-content .action-button-container.action-btns .bbp-admin-links {
2288 gap: 4px;
2289 }
2290 .single-topic .main-post .forum-post-content .action-button-container.action-btns .bbp-admin-links li {
2291 padding-right: 0;
2292 }
2293 .single-topic .main-post .forum-post-content .action-button-container.action-btns .bbp-admin-links li a {
2294 align-items: center;
2295 gap: 6px;
2296 padding: 6px 12px;
2297 font-size: 14px;
2298 font-weight: 400;
2299 color: var(--black_600);
2300 background: transparent;
2301 border: none;
2302 border-radius: 4px;
2303 text-decoration: none;
2304 transition: all 0.2s ease;
2305 }
2306 .single-topic .main-post .forum-post-content .action-button-container.action-btns .bbp-admin-links li a:hover {
2307 background: var(--black_25);
2308 color: var(--bbpc_brand_color);
2309 }
2310 .single-topic .main-post .forum-post-content .action-button-container.action-btns .bbp-admin-links li a::before {
2311 display: none;
2312 }
2313 .single-topic .main-post .forum-post-content .action-button-container.action-btns .bbp-admin-links li {
2314 /* Mark as solved button special styling */
2315 }
2316 .single-topic .main-post .forum-post-content .action-button-container.action-btns .bbp-admin-links li:has(a.bbpc-resolve-topic-button) a,
2317 .single-topic .main-post .forum-post-content .action-button-container.action-btns .bbp-admin-links li a.bbpc-resolve-topic-button {
2318 color: #0a8043;
2319 }
2320 .single-topic .main-post .forum-post-content .action-button-container.action-btns .bbp-admin-links li:has(a.bbpc-resolve-topic-button) a::before,
2321 .single-topic .main-post .forum-post-content .action-button-container.action-btns .bbp-admin-links li a.bbpc-resolve-topic-button::before {
2322 content: "";
2323 display: inline-block;
2324 margin-right: 4px;
2325 }
2326 .single-topic .main-post .forum-post-content .action-button-container.action-btns .bbp-admin-links li:has(a.bbpc-resolve-topic-button) a:hover,
2327 .single-topic .main-post .forum-post-content .action-button-container.action-btns .bbp-admin-links li a.bbpc-resolve-topic-button:hover {
2328 background: #e6f7ed;
2329 }
2330 @media (max-width: 576px) {
2331 .single-topic .main-post {
2332 padding: 25px 18px;
2333 border-radius: 16px;
2334 }
2335 .single-topic .main-post .forum-post-top {
2336 flex-wrap: wrap;
2337 align-items: flex-start;
2338 gap: 12px;
2339 }
2340 .single-topic .main-post .forum-post-top .bbp-author-wrap {
2341 width: 100%;
2342 margin-right: 0;
2343 min-width: 0;
2344 align-items: flex-start;
2345 }
2346 .single-topic .main-post .forum-post-top .forum-post-author {
2347 min-width: 0;
2348 }
2349 .single-topic .main-post .forum-post-top .forum-post-author .topic-author {
2350 flex-wrap: wrap;
2351 }
2352 .single-topic .main-post .forum-post-top .forum-post-author .forum-author-meta.meta {
2353 flex-wrap: wrap;
2354 gap: 6px;
2355 }
2356 .single-topic .main-post .forum-post-top .action-button-container {
2357 width: 100%;
2358 justify-content: flex-start;
2359 align-items: flex-start;
2360 flex-direction: row;
2361 flex-wrap: wrap;
2362 }
2363 .single-topic .main-post .forum-post-top #subscription-toggle a {
2364 padding: 9px 14px;
2365 font-size: 13px;
2366 }
2367 .single-topic .main-post .q-title h1 {
2368 font-size: 22px;
2369 }
2370 .single-topic .main-post .forum-post-content .action-button-container.action-btns {
2371 flex-wrap: wrap;
2372 gap: 12px;
2373 }
2374 .single-topic .main-post .forum-post-content .action-button-container.action-btns .taxonomy.forum-post-tags {
2375 flex: 0 0 100%;
2376 }
2377 .single-topic .main-post .forum-post-content .action-button-container.action-btns .frmx-action-btns-right {
2378 margin-left: 0;
2379 flex-wrap: wrap;
2380 }
2381 }
2382
2383 .accepted-ans-mark {
2384 color: #3b9b3b;
2385 border-radius: 20px;
2386 padding: 3px 10px;
2387 background-color: var(--black_75);
2388 }
2389
2390 #best-answer {
2391 position: absolute;
2392 right: -4px;
2393 top: 0;
2394 }
2395 #best-answer.solved-topic-bar .badge {
2396 padding: 8px 10px;
2397 background: #05ad6a;
2398 font-size: 12px;
2399 color: #fff;
2400 display: flex;
2401 align-items: center;
2402 gap: 5px;
2403 }
2404
2405 .bbp-attachments-form .d4p-attachment-addfile {
2406 font-size: 14px;
2407 margin: 10px 0;
2408 display: block;
2409 }
2410
2411 @media screen and (min-width: 561px) {
2412 .bbp-voting {
2413 padding-right: 0;
2414 position: absolute;
2415 }
2416 }
2417
2418 .subscription-login-btn {
2419 cursor: pointer;
2420 }
2421
2422 /* Inline login prompt (replaces modal in no-reply / no-topic / subscription contexts) */
2423 .frmx-inline-login-prompt {
2424 background: var(--bs-white);
2425 border: 1px solid var(--black_100, #e5e7eb);
2426 border-radius: 12px;
2427 padding: 24px 28px 28px;
2428 margin: 16px 0;
2429 box-sizing: border-box;
2430 max-width: 480px;
2431 }
2432 .frmx-inline-login-prompt .frmx-inline-login-title {
2433 font-size: 20px;
2434 font-weight: 600;
2435 margin: 0 0 6px;
2436 color: var(--black_900);
2437 }
2438 .frmx-inline-login-prompt .frmx-inline-login-subtitle {
2439 font-size: 14px;
2440 margin: 0 0 18px;
2441 line-height: 1.5;
2442 color: var(--black_600);
2443 }
2444 .frmx-inline-login-prompt.frmx-inline-login-prompt--compact {
2445 padding: 18px 20px 20px;
2446 max-width: 360px;
2447 }
2448 .frmx-inline-login-prompt.frmx-inline-login-prompt--compact .frmx-inline-login-title {
2449 font-size: 17px;
2450 }
2451 .frmx-inline-login-prompt.frmx-inline-login-prompt--compact .frmx-inline-login-subtitle {
2452 font-size: 13px;
2453 margin-bottom: 14px;
2454 }
2455
2456 /* Shared embedded login form styles (used by the inline login prompt) */
2457 .frmx-subscription-login-form .bbp-login-form {
2458 margin: 0;
2459 padding: 0;
2460 }
2461 .frmx-subscription-login-form .bbp-login-form fieldset.bbp-form {
2462 border: none;
2463 padding: 0;
2464 margin: 0;
2465 }
2466 .frmx-subscription-login-form .bbp-login-form fieldset.bbp-form legend {
2467 display: none !important;
2468 }
2469 .frmx-subscription-login-form .bbp-login-form .bbp-username,
2470 .frmx-subscription-login-form .bbp-login-form .bbp-password {
2471 margin-bottom: 15px;
2472 }
2473 .frmx-subscription-login-form .bbp-login-form .bbp-username label,
2474 .frmx-subscription-login-form .bbp-login-form .bbp-password label {
2475 display: block;
2476 font-size: 14px;
2477 font-weight: 500;
2478 color: var(--black_700);
2479 margin-bottom: 6px;
2480 }
2481 .frmx-subscription-login-form .bbp-login-form .bbp-username input,
2482 .frmx-subscription-login-form .bbp-login-form .bbp-password input {
2483 width: 100%;
2484 height: 44px;
2485 padding: 8px 14px;
2486 border: 1px solid var(--black_100);
2487 border-radius: 8px;
2488 font-size: 14px;
2489 background: var(--bs-white);
2490 color: var(--black_800);
2491 transition: border-color 0.2s ease;
2492 box-sizing: border-box;
2493 }
2494 .frmx-subscription-login-form .bbp-login-form .bbp-username input:focus,
2495 .frmx-subscription-login-form .bbp-login-form .bbp-password input:focus {
2496 border-color: var(--bbpc_brand_color);
2497 outline: none;
2498 box-shadow: 0 0 0 3px rgba(8, 102, 255, 0.1);
2499 }
2500 .frmx-subscription-login-form .bbp-login-form .bbp-remember-me {
2501 margin-bottom: 20px;
2502 display: flex;
2503 align-items: center;
2504 gap: 8px;
2505 }
2506 .frmx-subscription-login-form .bbp-login-form .bbp-remember-me input[type=checkbox] {
2507 width: auto;
2508 margin: 0;
2509 }
2510 .frmx-subscription-login-form .bbp-login-form .bbp-remember-me label {
2511 font-size: 13px;
2512 color: var(--black_600);
2513 margin: 0;
2514 cursor: pointer;
2515 }
2516 .frmx-subscription-login-form .bbp-login-form .bbp-submit-wrapper {
2517 float: none !important;
2518 margin-top: 0;
2519 clear: both;
2520 }
2521 .frmx-subscription-login-form .bbp-login-form .bbp-submit-wrapper .user-submit {
2522 width: 100%;
2523 padding: 12px 20px;
2524 font-size: 15px;
2525 font-weight: 600;
2526 background: var(--bbpc_brand_color);
2527 color: #fff;
2528 border: none;
2529 border-radius: 8px;
2530 cursor: pointer;
2531 transition: background 0.2s ease;
2532 }
2533 .frmx-subscription-login-form .bbp-login-form .bbp-submit-wrapper .user-submit:hover {
2534 opacity: 0.9;
2535 }
2536
2537 @media screen and (max-width: 480px) {
2538 .frmx-inline-login-prompt {
2539 padding: 20px 18px 22px;
2540 }
2541 }
2542 .entry-meta > *::after {
2543 content: none;
2544 }
2545 .entry-meta > span {
2546 margin-right: 12px;
2547 }
2548
2549 ul.list-unstyled.d-flex.bbp-admin-links {
2550 display: flex;
2551 list-style: none !important;
2552 }
2553 ul.list-unstyled.d-flex.bbp-admin-links li a {
2554 text-decoration: none;
2555 }
2556
2557 .bbpress-admin-settings-container {
2558 position: relative;
2559 padding-left: 0;
2560 padding-top: 3px;
2561 list-style: none;
2562 }
2563 .bbpress-admin-settings-container li a {
2564 text-decoration: none;
2565 }
2566 .bbpress-admin-settings-container li:not(:first-child) a {
2567 margin-left: 8px;
2568 }
2569
2570 .bbp-reply-form,
2571 .bbp-topic-split {
2572 background: #fff !important;
2573 border-radius: 12px;
2574 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
2575 margin-bottom: 24px;
2576 padding: 18px 25px 25px;
2577 position: relative;
2578 transition: box-shadow 0.25s ease;
2579 border: none !important;
2580 }
2581 @media (max-width: 576px) {
2582 .bbp-reply-form,
2583 .bbp-topic-split {
2584 padding: 16px;
2585 border-radius: 12px;
2586 }
2587 }
2588 .bbp-reply-form fieldset.bbp-form,
2589 .bbp-topic-split fieldset.bbp-form {
2590 border: none;
2591 padding: 0;
2592 margin: 0;
2593 }
2594
2595 /* ============================================================
2596 Reply Form — polished, compact UI/UX
2597 ============================================================ */
2598 .bbp-reply-form {
2599 /* ----- Header / Legend ----- */
2600 }
2601 .bbp-reply-form > form > fieldset.bbp-form > legend {
2602 display: block !important;
2603 width: 100%;
2604 padding: 0 0 14px;
2605 margin: 0 0 16px;
2606 border-bottom: 1px solid var(--black_75);
2607 }
2608 .bbp-reply-form > form > fieldset.bbp-form > legend .frmx-reply-title {
2609 display: flex;
2610 align-items: center;
2611 gap: 10px;
2612 font-family: "Roboto", sans-serif;
2613 font-size: 16px;
2614 font-weight: 700;
2615 line-height: 1.4;
2616 color: var(--black_900);
2617 margin-bottom: 4px;
2618 }
2619 .bbp-reply-form > form > fieldset.bbp-form > legend .frmx-reply-title a.frmx-back-btn {
2620 display: flex;
2621 align-items: center;
2622 justify-content: center;
2623 color: var(--bbpc_brand_color);
2624 transition: color 0.2s ease;
2625 text-decoration: none;
2626 }
2627 .bbp-reply-form > form > fieldset.bbp-form > legend .frmx-reply-title a.frmx-back-btn:hover {
2628 color: color-mix(in srgb, var(--bbpc_brand_color) 80%, black);
2629 }
2630 .bbp-reply-form > form > fieldset.bbp-form > legend .frmx-reply-subtitle {
2631 font-size: 12.5px;
2632 color: var(--black_500);
2633 padding-left: 30px; /* align with text, bypassing back arrow */
2634 }
2635 .bbp-reply-form {
2636 /* ----- Vertical rhythm for body ----- */
2637 }
2638 .bbp-reply-form > form > fieldset.bbp-form > div {
2639 display: flex;
2640 flex-direction: row;
2641 flex-wrap: wrap;
2642 align-items: flex-start;
2643 gap: 8px;
2644 /* Full-width items sit on their own row */
2645 }
2646 .bbp-reply-form > form > fieldset.bbp-form > div > .bbp-the-content-wrapper,
2647 .bbp-reply-form > form > fieldset.bbp-form > div > .bbp-template-notice,
2648 .bbp-reply-form > form > fieldset.bbp-form > div > .upload-attachments-form,
2649 .bbp-reply-form > form > fieldset.bbp-form > div > .bbp-submit-wrapper,
2650 .bbp-reply-form > form > fieldset.bbp-form > div > p:has(> #bbp_topic_tags),
2651 .bbp-reply-form > form > fieldset.bbp-form > div > .bbp-form-topic-tags,
2652 .bbp-reply-form > form > fieldset.bbp-form > div > fieldset.bbp-form {
2653 width: 100%;
2654 }
2655 .bbp-reply-form > form > fieldset.bbp-form > div {
2656 /* Non-checkbox p elements also full width */
2657 }
2658 .bbp-reply-form > form > fieldset.bbp-form > div > p:not(:has(> input[type=checkbox])) {
2659 width: 100%;
2660 margin: 0 !important;
2661 }
2662 .bbp-reply-form > form > fieldset.bbp-form > div {
2663 /* Checkbox p: width auto, flows alongside siblings in the same flex row */
2664 }
2665 .bbp-reply-form > form > fieldset.bbp-form > div > p:has(> input[type=checkbox]) {
2666 width: auto;
2667 margin: 0 !important;
2668 flex-shrink: 0;
2669 }
2670 .bbp-reply-form > form > fieldset.bbp-form > div {
2671 /* 2-column Grid for Attachments and Options */
2672 }
2673 .bbp-reply-form > form > fieldset.bbp-form > div > .frmx-reply-bottom-grid {
2674 width: 100%;
2675 display: grid;
2676 grid-template-columns: 1fr 420px;
2677 gap: 20px;
2678 margin-top: 10px;
2679 }
2680 @media (max-width: 768px) {
2681 .bbp-reply-form > form > fieldset.bbp-form > div > .frmx-reply-bottom-grid {
2682 grid-template-columns: 1fr;
2683 }
2684 }
2685 .bbp-reply-form > form > fieldset.bbp-form > div > .frmx-reply-bottom-grid .frmx-reply-options legend,
2686 .bbp-reply-form > form > fieldset.bbp-form > div > .frmx-reply-bottom-grid .frmx-reply-attachments legend {
2687 display: block !important;
2688 float: none !important;
2689 font-size: 11.5px !important;
2690 font-family: "Inter", sans-serif;
2691 font-weight: 700 !important;
2692 color: var(--black_500) !important;
2693 letter-spacing: 0.8px;
2694 text-transform: uppercase;
2695 margin: 0 0 10px 0 !important;
2696 border: none !important;
2697 padding: 0 !important;
2698 }
2699 .bbp-reply-form > form > fieldset.bbp-form > div > .frmx-reply-bottom-grid .upload-attachments-form legend {
2700 display: none !important;
2701 }
2702 .bbp-reply-form > form > fieldset.bbp-form > div > .frmx-reply-bottom-grid .upload-attachments-form { /* hide inner legend, we provide our own */ }
2703 .bbp-reply-form > form > fieldset.bbp-form > div > .frmx-reply-bottom-grid .frmx-options-inner {
2704 background: var(--bs-white);
2705 border-radius: 8px;
2706 display: flex;
2707 flex-direction: column;
2708 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.03);
2709 overflow: hidden;
2710 /* ─── Individual Option Row ─── */
2711 }
2712 .bbp-reply-form > form > fieldset.bbp-form > div > .frmx-reply-bottom-grid .frmx-options-inner .frmx-option-row {
2713 display: flex;
2714 align-items: center;
2715 gap: 12px;
2716 padding: 14px 16px;
2717 transition: background 0.15s ease;
2718 cursor: pointer;
2719 }
2720 .bbp-reply-form > form > fieldset.bbp-form > div > .frmx-reply-bottom-grid .frmx-options-inner .frmx-option-row:hover {
2721 background: var(--black_25, #f9fafb);
2722 }
2723 .bbp-reply-form > form > fieldset.bbp-form > div > .frmx-reply-bottom-grid .frmx-options-inner .frmx-option-row + .frmx-option-row {
2724 border-top: 1px solid var(--black_50, #f0f0f0);
2725 }
2726 .bbp-reply-form > form > fieldset.bbp-form > div > .frmx-reply-bottom-grid .frmx-options-inner {
2727 /* ─── Icon Badge ─── */
2728 }
2729 .bbp-reply-form > form > fieldset.bbp-form > div > .frmx-reply-bottom-grid .frmx-options-inner .frmx-option-icon {
2730 width: 32px;
2731 height: 32px;
2732 min-width: 32px;
2733 border-radius: 8px;
2734 display: inline-flex;
2735 align-items: center;
2736 justify-content: center;
2737 flex-shrink: 0;
2738 }
2739 .bbp-reply-form > form > fieldset.bbp-form > div > .frmx-reply-bottom-grid .frmx-options-inner .frmx-option-icon svg {
2740 width: 16px;
2741 height: 16px;
2742 }
2743 .bbp-reply-form > form > fieldset.bbp-form > div > .frmx-reply-bottom-grid .frmx-options-inner .frmx-option-icon--notify {
2744 background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.12));
2745 color: var(--bbpc_brand_color, #4f46e5);
2746 }
2747 .bbp-reply-form > form > fieldset.bbp-form > div > .frmx-reply-bottom-grid .frmx-options-inner .frmx-option-icon--private {
2748 background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(251, 191, 36, 0.15));
2749 color: #b45309;
2750 }
2751 .bbp-reply-form > form > fieldset.bbp-form > div > .frmx-reply-bottom-grid .frmx-options-inner {
2752 /* ─── Label Block (Title + Description) ─── */
2753 }
2754 .bbp-reply-form > form > fieldset.bbp-form > div > .frmx-reply-bottom-grid .frmx-options-inner .frmx-option-label {
2755 flex: 1;
2756 display: flex;
2757 flex-direction: column;
2758 gap: 1px;
2759 cursor: pointer;
2760 min-width: 0;
2761 }
2762 .bbp-reply-form > form > fieldset.bbp-form > div > .frmx-reply-bottom-grid .frmx-options-inner .frmx-option-title {
2763 display: block;
2764 font-size: 13.5px;
2765 font-weight: 600;
2766 color: var(--black_800, #1f2937);
2767 line-height: 1.3;
2768 }
2769 .bbp-reply-form > form > fieldset.bbp-form > div > .frmx-reply-bottom-grid .frmx-options-inner .frmx-option-desc {
2770 display: block;
2771 font-size: 11.5px;
2772 font-weight: 400;
2773 color: var(--black_400, #9ca3af);
2774 line-height: 1.4;
2775 }
2776 .bbp-reply-form > form > fieldset.bbp-form > div > .frmx-reply-bottom-grid .frmx-options-inner {
2777 /* ─── Toggle Switch ─── */
2778 }
2779 .bbp-reply-form > form > fieldset.bbp-form > div > .frmx-reply-bottom-grid .frmx-options-inner .frmx-toggle {
2780 position: relative;
2781 display: inline-flex;
2782 align-items: center;
2783 cursor: pointer;
2784 flex-shrink: 0;
2785 width: 40px;
2786 height: 22px;
2787 margin: 0 !important;
2788 }
2789 .bbp-reply-form > form > fieldset.bbp-form > div > .frmx-reply-bottom-grid .frmx-options-inner .frmx-toggle input[type=checkbox] {
2790 appearance: none;
2791 -webkit-appearance: none;
2792 width: 0;
2793 height: 0;
2794 opacity: 0;
2795 position: absolute;
2796 pointer-events: none;
2797 margin: 0 !important;
2798 }
2799 .bbp-reply-form > form > fieldset.bbp-form > div > .frmx-reply-bottom-grid .frmx-options-inner .frmx-toggle .frmx-toggle-slider {
2800 position: absolute;
2801 inset: 0;
2802 background: var(--black_150, #d4d4d4);
2803 border-radius: 22px;
2804 transition: background 0.25s ease, box-shadow 0.25s ease;
2805 }
2806 .bbp-reply-form > form > fieldset.bbp-form > div > .frmx-reply-bottom-grid .frmx-options-inner .frmx-toggle .frmx-toggle-slider::before {
2807 content: "";
2808 position: absolute;
2809 width: 16px;
2810 height: 16px;
2811 left: 3px;
2812 top: 3px;
2813 background: #fff;
2814 border-radius: 50%;
2815 transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
2816 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
2817 }
2818 .bbp-reply-form > form > fieldset.bbp-form > div > .frmx-reply-bottom-grid .frmx-options-inner .frmx-toggle input[type=checkbox]:checked + .frmx-toggle-slider {
2819 background: var(--bbpc_brand_color, #4f46e5);
2820 }
2821 .bbp-reply-form > form > fieldset.bbp-form > div > .frmx-reply-bottom-grid .frmx-options-inner .frmx-toggle input[type=checkbox]:checked + .frmx-toggle-slider::before {
2822 transform: translateX(18px);
2823 }
2824 .bbp-reply-form > form > fieldset.bbp-form > div > .frmx-reply-bottom-grid .frmx-options-inner .frmx-toggle input[type=checkbox]:focus-visible + .frmx-toggle-slider {
2825 box-shadow: 0 0 0 3px color-mix(in srgb, var(--bbpc_brand_color, #4f46e5) 20%, transparent);
2826 }
2827 .bbp-reply-form > form > fieldset.bbp-form > div > .frmx-reply-bottom-grid .frmx-options-inner {
2828 /* ─── Legacy <p> fallback for hook-injected options ─── */
2829 }
2830 .bbp-reply-form > form > fieldset.bbp-form > div > .frmx-reply-bottom-grid .frmx-options-inner p:has(> input[type=checkbox]) {
2831 display: flex;
2832 align-items: center;
2833 width: 100%;
2834 padding: 12px 16px;
2835 margin: 0 !important;
2836 }
2837 .bbp-reply-form > form > fieldset.bbp-form > div > .frmx-reply-bottom-grid .frmx-options-inner p:has(> input[type=checkbox]) + p:has(> input[type=checkbox]), .bbp-reply-form > form > fieldset.bbp-form > div > .frmx-reply-bottom-grid .frmx-options-inner p:has(> input[type=checkbox]) + .frmx-option-row {
2838 border-top: 1px solid var(--black_50, #f0f0f0);
2839 }
2840 .bbp-reply-form > form > fieldset.bbp-form > div > .frmx-reply-bottom-grid .frmx-options-inner p:has(> input[type=checkbox]) label {
2841 flex: 1;
2842 font-size: 13.5px;
2843 font-weight: 500;
2844 color: var(--black_800);
2845 cursor: pointer;
2846 }
2847 .bbp-reply-form > form > fieldset.bbp-form > div > .frmx-reply-bottom-grid .frmx-options-inner p:has(> input[type=checkbox]) input[type=checkbox] {
2848 appearance: none;
2849 -webkit-appearance: none;
2850 width: 18px;
2851 height: 18px;
2852 border: 1.5px solid var(--black_200);
2853 border-radius: 4px;
2854 background-color: transparent;
2855 margin: 0 12px 0 0;
2856 cursor: pointer;
2857 position: relative;
2858 flex-shrink: 0;
2859 }
2860 .bbp-reply-form > form > fieldset.bbp-form > div > .frmx-reply-bottom-grid .frmx-options-inner p:has(> input[type=checkbox]) input[type=checkbox]:checked {
2861 background-color: var(--bbpc_brand_color);
2862 border-color: var(--bbpc_brand_color);
2863 }
2864 .bbp-reply-form > form > fieldset.bbp-form > div > .frmx-reply-bottom-grid .frmx-options-inner p:has(> input[type=checkbox]) input[type=checkbox]:checked::after {
2865 content: "";
2866 position: absolute;
2867 display: block;
2868 width: 4px;
2869 height: 8px;
2870 border: solid #fff;
2871 border-width: 0 1.5px 1.5px 0;
2872 transform: rotate(45deg);
2873 top: 2px;
2874 left: 6px;
2875 }
2876 .bbp-reply-form {
2877 /* ----- Editor wrapper ----- */
2878 }
2879 .bbp-reply-form .bbp-the-content-wrapper {
2880 margin: 0 !important;
2881 padding: 0 !important;
2882 border-radius: 10px;
2883 border: 1px solid var(--black_100);
2884 overflow: hidden;
2885 background: var(--bs-white);
2886 transition: border-color 0.15s ease, box-shadow 0.15s ease;
2887 }
2888 .bbp-reply-form .bbp-the-content-wrapper:focus-within {
2889 border-color: var(--bbpc_brand_color);
2890 box-shadow: 0 0 0 3px rgba(76, 76, 241, 0.08);
2891 }
2892 .bbp-reply-form .bbp-the-content-wrapper {
2893 /* ------ wp-editor-wrap – reset WP layout ------ */
2894 }
2895 .bbp-reply-form .bbp-the-content-wrapper .wp-editor-wrap {
2896 overflow: hidden; /* clear floats */
2897 }
2898 .bbp-reply-form .bbp-the-content-wrapper {
2899 /* ------ Editor tab bar (Visual / Code) ------ */
2900 }
2901 .bbp-reply-form .bbp-the-content-wrapper .wp-editor-tabs {
2902 display: flex !important;
2903 float: none !important; /* Override WP core float: right */
2904 background: transparent !important;
2905 border-bottom: 1px solid var(--black_100) !important;
2906 padding: 0 4px !important;
2907 gap: 0 !important;
2908 justify-content: flex-start !important;
2909 width: auto !important;
2910 }
2911 .bbp-reply-form .bbp-the-content-wrapper .wp-switch-editor {
2912 border: none !important;
2913 border-bottom: 2px solid transparent !important;
2914 background: transparent !important;
2915 color: var(--black_400) !important;
2916 font-size: 13px !important;
2917 font-weight: 600 !important;
2918 padding: 10px 14px !important;
2919 margin: 0 !important;
2920 border-radius: 0 !important;
2921 transition: color 0.15s ease, border-color 0.15s ease;
2922 cursor: pointer;
2923 float: none !important;
2924 height: auto !important;
2925 box-shadow: none !important;
2926 top: 0 !important;
2927 }
2928 .bbp-reply-form .bbp-the-content-wrapper .wp-switch-editor:hover {
2929 color: var(--black_700) !important;
2930 }
2931 .bbp-reply-form .bbp-the-content-wrapper .wp-switch-editor.switch-tmce[aria-pressed=true], .bbp-reply-form .bbp-the-content-wrapper .wp-switch-editor.switch-tmce:focus, .bbp-reply-form .bbp-the-content-wrapper .wp-switch-editor.switch-html[aria-pressed=true], .bbp-reply-form .bbp-the-content-wrapper .wp-switch-editor.switch-html:focus {
2932 color: var(--bbpc_brand_color) !important;
2933 border-bottom-color: var(--bbpc_brand_color) !important;
2934 background: transparent !important;
2935 }
2936 .bbp-reply-form .bbp-the-content-wrapper {
2937 /* ------ Toolbar container ------ */
2938 }
2939 .bbp-reply-form .bbp-the-content-wrapper .wp-editor-container {
2940 border: none !important;
2941 box-shadow: none !important;
2942 clear: none !important;
2943 }
2944 .bbp-reply-form .bbp-the-content-wrapper .wp-editor-container:hover {
2945 border: none !important;
2946 box-shadow: none !important;
2947 }
2948 .bbp-reply-form .bbp-the-content-wrapper {
2949 /* ------ Quicktags (Code view toolbar) — hidden by default, only shown in HTML/Code mode ------ */
2950 }
2951 .bbp-reply-form .bbp-the-content-wrapper .quicktags-toolbar {
2952 display: none !important;
2953 height: 0 !important;
2954 padding: 0 !important;
2955 margin: 0 !important;
2956 overflow: hidden !important;
2957 border: none !important;
2958 }
2959 .bbp-reply-form .bbp-the-content-wrapper .wp-editor-wrap.html-active .quicktags-toolbar {
2960 display: flex !important;
2961 height: auto !important;
2962 flex-wrap: wrap !important;
2963 gap: 4px !important;
2964 background: var(--black_25) !important;
2965 border-top: none !important;
2966 border-bottom: 1px solid var(--black_75) !important;
2967 border-left: none !important;
2968 border-right: none !important;
2969 padding: 8px 14px !important;
2970 width: 100% !important;
2971 box-sizing: border-box !important;
2972 }
2973 .bbp-reply-form .bbp-the-content-wrapper .wp-editor-wrap.html-active .quicktags-toolbar .ed_button {
2974 all: unset;
2975 display: inline-flex !important;
2976 align-items: center !important;
2977 justify-content: center !important;
2978 background: transparent !important;
2979 border: none !important;
2980 color: var(--black_500) !important;
2981 height: 32px !important;
2982 min-width: 32px !important;
2983 font-family: "Inter", sans-serif !important;
2984 font-size: 13px !important;
2985 font-weight: 600 !important;
2986 border-radius: 6px !important;
2987 cursor: pointer;
2988 text-align: center;
2989 transition: background 0.15s ease, color 0.15s ease;
2990 padding: 0 6px !important;
2991 box-shadow: none !important;
2992 }
2993 .bbp-reply-form .bbp-the-content-wrapper .wp-editor-wrap.html-active .quicktags-toolbar .ed_button:hover {
2994 background: var(--black_75) !important;
2995 color: var(--black_800) !important;
2996 }
2997 .bbp-reply-form .bbp-the-content-wrapper {
2998 /* ------ TinyMCE Visual editor toolbar ------ */
2999 }
3000 .bbp-reply-form .bbp-the-content-wrapper .mce-tinymce {
3001 border: none !important;
3002 box-shadow: none !important;
3003 }
3004 .bbp-reply-form .bbp-the-content-wrapper .mce-tinymce .mce-toolbar-grp,
3005 .bbp-reply-form .bbp-the-content-wrapper .mce-toolbar-grp {
3006 background: var(--black_25) !important;
3007 background-color: var(--black_25) !important;
3008 border-bottom: 1px solid var(--black_75) !important;
3009 border-top: none !important;
3010 border-left: none !important;
3011 border-right: none !important;
3012 padding: 6px 10px !important;
3013 }
3014 .bbp-reply-form .bbp-the-content-wrapper .mce-tinymce .mce-toolbar-grp .mce-toolbar .mce-btn-group,
3015 .bbp-reply-form .bbp-the-content-wrapper .mce-toolbar-grp .mce-toolbar .mce-btn-group {
3016 padding: 0 2px;
3017 border: none !important;
3018 background: transparent !important;
3019 box-shadow: none !important;
3020 margin: 0 !important;
3021 /* Subtle vertical dividers between groups */
3022 }
3023 .bbp-reply-form .bbp-the-content-wrapper .mce-tinymce .mce-toolbar-grp .mce-toolbar .mce-btn-group::after,
3024 .bbp-reply-form .bbp-the-content-wrapper .mce-toolbar-grp .mce-toolbar .mce-btn-group::after {
3025 content: "";
3026 display: inline-block;
3027 vertical-align: middle;
3028 width: 1px;
3029 height: 18px;
3030 background: var(--black_150);
3031 margin: 0 4px;
3032 }
3033 .bbp-reply-form .bbp-the-content-wrapper .mce-tinymce .mce-toolbar-grp .mce-toolbar .mce-btn-group:last-child::after,
3034 .bbp-reply-form .bbp-the-content-wrapper .mce-toolbar-grp .mce-toolbar .mce-btn-group:last-child::after {
3035 display: none;
3036 }
3037 .bbp-reply-form .bbp-the-content-wrapper .mce-tinymce .mce-toolbar-grp .mce-toolbar .mce-btn,
3038 .bbp-reply-form .bbp-the-content-wrapper .mce-toolbar-grp .mce-toolbar .mce-btn {
3039 background: transparent !important;
3040 border: none !important;
3041 box-shadow: none !important;
3042 border-radius: 5px !important;
3043 transition: background 0.15s ease;
3044 margin: 0 !important;
3045 }
3046 .bbp-reply-form .bbp-the-content-wrapper .mce-tinymce .mce-toolbar-grp .mce-toolbar .mce-btn button,
3047 .bbp-reply-form .bbp-the-content-wrapper .mce-toolbar-grp .mce-toolbar .mce-btn button {
3048 padding: 5px 7px !important;
3049 color: var(--black_500);
3050 }
3051 .bbp-reply-form .bbp-the-content-wrapper .mce-tinymce .mce-toolbar-grp .mce-toolbar .mce-btn:hover,
3052 .bbp-reply-form .bbp-the-content-wrapper .mce-toolbar-grp .mce-toolbar .mce-btn:hover {
3053 background: var(--black_75) !important;
3054 }
3055 .bbp-reply-form .bbp-the-content-wrapper .mce-tinymce .mce-toolbar-grp .mce-toolbar .mce-btn:hover button,
3056 .bbp-reply-form .bbp-the-content-wrapper .mce-toolbar-grp .mce-toolbar .mce-btn:hover button {
3057 color: var(--black_800);
3058 }
3059 .bbp-reply-form .bbp-the-content-wrapper .mce-tinymce .mce-toolbar-grp .mce-toolbar .mce-btn.mce-active,
3060 .bbp-reply-form .bbp-the-content-wrapper .mce-toolbar-grp .mce-toolbar .mce-btn.mce-active {
3061 background: color-mix(in srgb, var(--bbpc_brand_color) 10%, transparent) !important;
3062 }
3063 .bbp-reply-form .bbp-the-content-wrapper .mce-tinymce .mce-toolbar-grp .mce-toolbar .mce-btn.mce-active button,
3064 .bbp-reply-form .bbp-the-content-wrapper .mce-toolbar-grp .mce-toolbar .mce-btn.mce-active button {
3065 color: var(--bbpc_brand_color);
3066 }
3067 .bbp-reply-form .bbp-the-content-wrapper {
3068 /* ------ Textarea / iframe area ------ */
3069 }
3070 .bbp-reply-form .bbp-the-content-wrapper .mce-edit-area {
3071 border: none !important;
3072 }
3073 .bbp-reply-form .bbp-the-content-wrapper .mce-edit-area iframe {
3074 min-height: 160px !important;
3075 background: #fff !important;
3076 }
3077 .bbp-reply-form .bbp-the-content-wrapper textarea {
3078 min-height: 160px !important;
3079 padding: 14px 18px !important;
3080 font-size: 14px;
3081 line-height: 1.6;
3082 resize: vertical;
3083 border: none !important;
3084 outline: none !important;
3085 background: #fff !important;
3086 color: var(--black_800);
3087 }
3088 .bbp-reply-form .bbp-the-content-wrapper textarea::placeholder {
3089 color: var(--black_400);
3090 font-weight: 400;
3091 }
3092 .bbp-reply-form {
3093 /* ----- Tags field (chip-based input) ----- */
3094 }
3095 .bbp-reply-form .frmx-tags-field {
3096 width: 100% !important;
3097 display: flex !important;
3098 align-items: center !important;
3099 flex-wrap: wrap !important;
3100 gap: 8px !important;
3101 background: var(--bs-white) !important;
3102 border: 1px solid var(--black_100) !important;
3103 border-radius: 8px !important;
3104 padding: 8px 14px !important;
3105 min-height: 44px !important;
3106 transition: border-color 0.2s ease, box-shadow 0.2s ease;
3107 cursor: text;
3108 margin: 0 !important;
3109 }
3110 .bbp-reply-form .frmx-tags-field:focus-within {
3111 border-color: var(--bbpc_brand_color) !important;
3112 box-shadow: 0 0 0 3px color-mix(in srgb, var(--bbpc_brand_color) 12%, transparent) !important;
3113 }
3114 .bbp-reply-form .frmx-tags-field .frmx-tags-icon {
3115 display: flex;
3116 align-items: center;
3117 color: var(--black_400);
3118 flex-shrink: 0;
3119 line-height: 0;
3120 }
3121 .bbp-reply-form .frmx-tags-field .frmx-tags-chips {
3122 display: flex;
3123 align-items: center;
3124 flex-wrap: wrap;
3125 gap: 6px;
3126 }
3127 .bbp-reply-form .frmx-tags-field .frmx-tag-chip {
3128 display: inline-flex !important;
3129 align-items: center !important;
3130 gap: 6px !important;
3131 background: color-mix(in srgb, var(--bbpc_brand_color) 10%, transparent) !important;
3132 color: var(--bbpc_brand_color) !important;
3133 border-radius: 20px !important;
3134 padding: 5px 6px 5px 12px !important;
3135 font-size: 12.5px !important;
3136 font-weight: 600 !important;
3137 line-height: 1.3 !important;
3138 white-space: nowrap !important;
3139 border: none !important;
3140 box-shadow: none !important;
3141 margin: 0 !important;
3142 animation: frmxChipIn 0.15s ease;
3143 }
3144 .bbp-reply-form .frmx-tags-field .frmx-tag-chip .frmx-tag-text {
3145 color: inherit;
3146 }
3147 .bbp-reply-form .frmx-tags-field .frmx-tag-chip .frmx-tag-remove {
3148 display: inline-flex !important;
3149 align-items: center !important;
3150 justify-content: center !important;
3151 background: color-mix(in srgb, var(--bbpc_brand_color) 15%, transparent) !important;
3152 border: none !important;
3153 color: var(--bbpc_brand_color) !important;
3154 cursor: pointer;
3155 padding: 3px !important;
3156 border-radius: 50% !important;
3157 transition: background 0.15s ease, color 0.15s ease;
3158 line-height: 0;
3159 width: 20px !important;
3160 height: 20px !important;
3161 box-shadow: none !important;
3162 margin: 0 !important;
3163 }
3164 .bbp-reply-form .frmx-tags-field .frmx-tag-chip .frmx-tag-remove svg {
3165 width: 12px !important;
3166 height: 12px !important;
3167 display: block;
3168 }
3169 .bbp-reply-form .frmx-tags-field .frmx-tag-chip .frmx-tag-remove:hover {
3170 background: color-mix(in srgb, var(--bbpc_brand_color) 25%, transparent) !important;
3171 }
3172 .bbp-reply-form .frmx-tags-field .frmx-tags-input {
3173 flex: 1 1 80px !important;
3174 min-width: 80px !important;
3175 border: none !important;
3176 outline: none !important;
3177 box-shadow: none !important;
3178 background: transparent !important;
3179 padding: 0 !important;
3180 margin: 0 !important;
3181 font-size: 13.5px !important;
3182 height: auto !important;
3183 min-height: auto !important;
3184 color: var(--black_800) !important;
3185 width: auto !important;
3186 }
3187 .bbp-reply-form .frmx-tags-field .frmx-tags-input::placeholder {
3188 color: var(--black_400);
3189 font-weight: 400;
3190 }
3191 @keyframes frmxChipIn {
3192 from {
3193 transform: scale(0.85);
3194 opacity: 0;
3195 }
3196 to {
3197 transform: scale(1);
3198 opacity: 1;
3199 }
3200 }
3201 .bbp-reply-form {
3202 /* ----- Legacy tags selectors (hidden, kept for specificity overrides) ----- */
3203 }
3204 .bbp-reply-form .bbp-form-topic-tags,
3205 .bbp-reply-form p:has(> #bbp_topic_tags) {
3206 display: none !important;
3207 }
3208 .bbp-reply-form label[for=bbp_topic_tags] {
3209 display: none !important;
3210 }
3211 .bbp-reply-form #bbp_topic_tags {
3212 /* hidden input — no visual styles needed */
3213 }
3214 .bbp-reply-form {
3215 /* ----- Checkboxes: lightweight, side-by-side within the flex row ----- */
3216 }
3217 .bbp-reply-form p:has(> input[type=checkbox]) {
3218 display: inline-flex;
3219 align-items: center;
3220 gap: 7px;
3221 margin: 0 !important;
3222 padding: 5px 0;
3223 background: transparent;
3224 border: none;
3225 border-radius: 0;
3226 width: auto;
3227 }
3228 .bbp-reply-form p:has(> input[type=checkbox]):hover {
3229 background: transparent;
3230 }
3231 .bbp-reply-form p:has(> input[type=checkbox]) input[type=checkbox] {
3232 width: 15px;
3233 height: 15px;
3234 accent-color: var(--bbpc_brand_color);
3235 cursor: pointer;
3236 margin: 0;
3237 flex: 0 0 auto;
3238 }
3239 .bbp-reply-form p:has(> input[type=checkbox]) label {
3240 font-size: 13px !important;
3241 font-weight: 400 !important;
3242 color: var(--black_600) !important;
3243 margin: 0 !important;
3244 cursor: pointer;
3245 line-height: 1.4;
3246 }
3247 .bbp-reply-form {
3248 /* Visual divider between adjacent checkbox options */
3249 }
3250 .bbp-reply-form > form > fieldset.bbp-form > div > p:has(> input[type=checkbox]) + p:has(> input[type=checkbox]) {
3251 padding-left: 14px;
3252 border-left: 1px solid var(--black_100);
3253 }
3254 .bbp-reply-form {
3255 /* ----- Upload Attachments section ----- */
3256 }
3257 .bbp-reply-form .upload-attachments-form {
3258 margin: 0 !important;
3259 padding: 0 !important;
3260 background: transparent;
3261 border: none !important;
3262 border-radius: 0;
3263 }
3264 .bbp-reply-form .upload-attachments-form .frmx-attachments-ui {
3265 display: flex;
3266 flex-direction: column;
3267 gap: 8px;
3268 width: 100%;
3269 /* File list — stacked cards */
3270 }
3271 .bbp-reply-form .upload-attachments-form .frmx-attachments-ui .frmx-attachments-list {
3272 display: flex;
3273 flex-direction: column;
3274 gap: 6px;
3275 }
3276 .bbp-reply-form .upload-attachments-form .frmx-attachments-ui .frmx-attachments-list .frmx-attachment-item {
3277 display: flex;
3278 align-items: center;
3279 background: var(--bs-white);
3280 border: 1px solid var(--black_75);
3281 border-radius: 8px;
3282 padding: 9px 12px;
3283 gap: 10px;
3284 transition: border-color 0.15s ease, box-shadow 0.15s ease;
3285 animation: frmxAttachIn 0.18s ease both;
3286 }
3287 .bbp-reply-form .upload-attachments-form .frmx-attachments-ui .frmx-attachments-list .frmx-attachment-item:hover {
3288 border-color: var(--black_150);
3289 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
3290 }
3291 .bbp-reply-form .upload-attachments-form .frmx-attachments-ui .frmx-attachments-list .frmx-attachment-item {
3292 /* Coloured file-type badge */
3293 }
3294 .bbp-reply-form .upload-attachments-form .frmx-attachments-ui .frmx-attachments-list .frmx-attachment-item .frmx-file-icon-wrapper {
3295 display: flex;
3296 align-items: center;
3297 justify-content: center;
3298 flex-shrink: 0;
3299 width: 34px;
3300 height: 34px;
3301 background: color-mix(in srgb, var(--bbpc_brand_color) 10%, transparent);
3302 border-radius: 6px;
3303 }
3304 .bbp-reply-form .upload-attachments-form .frmx-attachments-ui .frmx-attachments-list .frmx-attachment-item .frmx-file-icon-wrapper svg {
3305 color: var(--bbpc_brand_color);
3306 }
3307 .bbp-reply-form .upload-attachments-form .frmx-attachments-ui .frmx-attachments-list .frmx-attachment-item {
3308 /* Name + size stacked */
3309 }
3310 .bbp-reply-form .upload-attachments-form .frmx-attachments-ui .frmx-attachments-list .frmx-attachment-item .frmx-file-info {
3311 flex: 1;
3312 min-width: 0;
3313 display: flex;
3314 flex-direction: column;
3315 gap: 2px;
3316 }
3317 .bbp-reply-form .upload-attachments-form .frmx-attachments-ui .frmx-attachments-list .frmx-attachment-item .frmx-file-name {
3318 font-size: 13px;
3319 color: var(--black_800);
3320 font-weight: 500;
3321 white-space: nowrap;
3322 overflow: hidden;
3323 text-overflow: ellipsis;
3324 }
3325 .bbp-reply-form .upload-attachments-form .frmx-attachments-ui .frmx-attachments-list .frmx-attachment-item .frmx-file-size {
3326 font-size: 11px;
3327 color: var(--black_400);
3328 font-weight: 400;
3329 line-height: 1;
3330 }
3331 .bbp-reply-form .upload-attachments-form .frmx-attachments-ui .frmx-attachments-list .frmx-attachment-item {
3332 /* Remove button */
3333 }
3334 .bbp-reply-form .upload-attachments-form .frmx-attachments-ui .frmx-attachments-list .frmx-attachment-item .frmx-remove-file {
3335 flex-shrink: 0;
3336 display: flex !important;
3337 align-items: center;
3338 justify-content: center;
3339 width: 28px;
3340 height: 28px;
3341 border-radius: 6px;
3342 color: var(--black_400) !important;
3343 background: transparent !important;
3344 border: none !important;
3345 cursor: pointer;
3346 transition: background 0.15s ease, color 0.15s ease;
3347 padding: 0 !important;
3348 margin-left: auto;
3349 }
3350 .bbp-reply-form .upload-attachments-form .frmx-attachments-ui .frmx-attachments-list .frmx-attachment-item .frmx-remove-file:hover {
3351 background: color-mix(in srgb, #dc3545 10%, transparent) !important;
3352 color: #dc3545 !important;
3353 }
3354 .bbp-reply-form .upload-attachments-form .frmx-attachments-ui {
3355 /* "Add more files" drop-zone button */
3356 }
3357 .bbp-reply-form .upload-attachments-form .frmx-attachments-ui .frmx-add-file-btn {
3358 width: 100%;
3359 display: flex;
3360 align-items: center;
3361 justify-content: center;
3362 gap: 7px;
3363 padding: 11px 16px;
3364 background: transparent;
3365 border: 1.5px dashed var(--black_150);
3366 border-radius: 8px;
3367 color: var(--black_500);
3368 font-size: 13px;
3369 font-weight: 500;
3370 cursor: pointer;
3371 transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
3372 line-height: 1;
3373 }
3374 .bbp-reply-form .upload-attachments-form .frmx-attachments-ui .frmx-add-file-btn .frmx-add-icon {
3375 display: flex;
3376 align-items: center;
3377 flex-shrink: 0;
3378 opacity: 0.7;
3379 transition: opacity 0.2s ease, transform 0.2s ease;
3380 }
3381 .bbp-reply-form .upload-attachments-form .frmx-attachments-ui .frmx-add-file-btn:hover {
3382 border-color: var(--bbpc_brand_color);
3383 color: var(--bbpc_brand_color);
3384 background: color-mix(in srgb, var(--bbpc_brand_color) 4%, transparent);
3385 }
3386 .bbp-reply-form .upload-attachments-form .frmx-attachments-ui .frmx-add-file-btn:hover .frmx-add-icon {
3387 opacity: 1;
3388 transform: scale(1.1);
3389 }
3390 .bbp-reply-form .upload-attachments-form .frmx-attachments-ui .frmx-add-file-btn.frmx-drag-over {
3391 border-color: var(--bbpc_brand_color);
3392 background: color-mix(in srgb, var(--bbpc_brand_color) 6%, transparent);
3393 color: var(--bbpc_brand_color);
3394 }
3395 .bbp-reply-form .upload-attachments-form .frmx-attachments-ui {
3396 /* Limit note — small, muted */
3397 }
3398 .bbp-reply-form .upload-attachments-form .frmx-attachments-ui .frmx-attachment-limit-note {
3399 font-size: 11px;
3400 color: var(--black_350, #adb5bd);
3401 line-height: 1.4;
3402 display: flex;
3403 align-items: center;
3404 gap: 4px;
3405 }
3406 @keyframes frmxAttachIn {
3407 from {
3408 opacity: 0;
3409 transform: translateY(-4px) scale(0.98);
3410 }
3411 to {
3412 opacity: 1;
3413 transform: translateY(0) scale(1);
3414 }
3415 }
3416 .bbp-reply-form {
3417 /* ----- Submit wrapper ----- */
3418 }
3419 .bbp-reply-form .bbp-submit-wrapper {
3420 float: none !important;
3421 clear: both;
3422 margin: 4px 0 0 !important;
3423 padding-top: 12px;
3424 border-top: 1px solid var(--black_75);
3425 display: flex !important;
3426 align-items: center;
3427 justify-content: flex-end;
3428 gap: 14px;
3429 flex-flow: row wrap !important;
3430 /* Cancel reply link – clean text style matching reference */
3431 }
3432 .bbp-reply-form .bbp-submit-wrapper #bbp-cancel-reply-to-link {
3433 display: inline-flex;
3434 align-items: center;
3435 gap: 4px;
3436 font-size: 14px;
3437 font-weight: 500;
3438 color: var(--black_500, #7a808c);
3439 text-decoration: none !important;
3440 padding: 10px 16px;
3441 border-radius: 8px;
3442 transition: color 0.15s ease, background 0.15s ease;
3443 cursor: pointer;
3444 }
3445 .bbp-reply-form .bbp-submit-wrapper #bbp-cancel-reply-to-link:hover {
3446 color: var(--black_800);
3447 background: var(--black_50, #f5f5f5);
3448 }
3449 .bbp-reply-form .bbp-submit-wrapper #bbp-cancel-reply-to-link:active {
3450 background: var(--black_75, #ebebeb);
3451 }
3452 .bbp-reply-form .bbp-submit-wrapper a:not(#bbp-cancel-reply-to-link) {
3453 color: var(--black_600);
3454 text-decoration: none;
3455 font-size: 13px;
3456 font-weight: 500;
3457 }
3458 .bbp-reply-form .bbp-submit-wrapper a:not(#bbp-cancel-reply-to-link):hover {
3459 color: var(--bbpc_brand_color);
3460 }
3461 .bbp-reply-form .bbp-submit-wrapper .frmx-cancel-divider {
3462 display: none; /* Not needed – Cancel sits next to Post Reply */
3463 }
3464 .bbp-reply-form .bbp-submit-wrapper .submit,
3465 .bbp-reply-form .bbp-submit-wrapper .fill-brand {
3466 margin: 0 !important;
3467 padding: 11px 28px !important;
3468 font-size: 14.5px !important;
3469 font-weight: 700 !important;
3470 letter-spacing: 0.2px;
3471 border: none !important;
3472 border-radius: 8px !important;
3473 background: var(--bbpc_brand_color) !important;
3474 color: #fff !important;
3475 cursor: pointer;
3476 box-shadow: 0 4px 16px rgba(76, 76, 241, 0.28);
3477 transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.15s ease;
3478 width: auto !important;
3479 line-height: 1.4;
3480 }
3481 .bbp-reply-form .bbp-submit-wrapper .submit:hover,
3482 .bbp-reply-form .bbp-submit-wrapper .fill-brand:hover {
3483 background: color-mix(in srgb, var(--bbpc_brand_color) 88%, #000) !important;
3484 box-shadow: 0 7px 22px rgba(76, 76, 241, 0.34);
3485 transform: translateY(-1px);
3486 }
3487 .bbp-reply-form .bbp-submit-wrapper .submit:active,
3488 .bbp-reply-form .bbp-submit-wrapper .fill-brand:active {
3489 transform: translateY(0);
3490 box-shadow: 0 3px 10px rgba(76, 76, 241, 0.22);
3491 }
3492 .bbp-reply-form .bbp-submit-wrapper .submit:focus-visible,
3493 .bbp-reply-form .bbp-submit-wrapper .fill-brand:focus-visible {
3494 outline: 3px solid rgba(76, 76, 241, 0.38);
3495 outline-offset: 2px;
3496 }
3497 @media (max-width: 576px) {
3498 .bbp-reply-form .bbp-submit-wrapper {
3499 justify-content: stretch;
3500 flex-direction: column;
3501 align-items: stretch;
3502 }
3503 .bbp-reply-form .bbp-submit-wrapper a {
3504 text-align: center;
3505 margin-right: 0;
3506 }
3507 .bbp-reply-form .bbp-submit-wrapper .submit,
3508 .bbp-reply-form .bbp-submit-wrapper .fill-brand {
3509 width: 100% !important;
3510 text-align: center;
3511 }
3512 }
3513
3514 .bbp-form {
3515 padding: 0;
3516 margin: 0;
3517 border: none;
3518 }
3519 .bbp-form legend {
3520 font-family: "Roboto", sans-serif;
3521 color: var(--black_900);
3522 font-size: 20px;
3523 font-weight: 500;
3524 line-height: 1.4;
3525 display: inline !important;
3526 }
3527 .bbp-form .bbp-attachments-form label,
3528 .bbp-form .bbp_topic_tags {
3529 font-weight: 500;
3530 font-family: "Roboto", sans-serif;
3531 color: var(--black_800);
3532 font-size: 14px;
3533 margin-bottom: 2px;
3534 }
3535 .bbp-form label {
3536 font-size: 14px;
3537 font-weight: 500;
3538 color: #425466;
3539 font-family: "Roboto", sans-serif;
3540 }
3541 .bbp-form {
3542 font-size: 14px;
3543 font-weight: 400;
3544 border: none !important;
3545 }
3546
3547 .bbpc_attachments input[type=file]::file-selector-button, .bbpc_attachments input[type=file]::-webkit-file-upload-button {
3548 background-color: #e9ecef;
3549 color: black;
3550 border: none;
3551 padding: 12px;
3552 cursor: pointer;
3553 font-weight: 500;
3554 font-family: roboto, sans-serif;
3555 }
3556
3557 .bbpress-reply-head .bbpress-reply-head-abovetitle {
3558 color: var(--black_800);
3559 font-size: 20px;
3560 font-weight: 500;
3561 line-height: 1.4;
3562 }
3563
3564 /* Legacy tags label – no longer visible in reply form */
3565 label[for=bbp_topic_tags] {
3566 font-weight: 500;
3567 color: var(--black_800);
3568 font-size: 14px;
3569 }
3570
3571 /* Legacy tags input — now hidden in reply form, kept for topic form */
3572 #new-post #bbp_topic_tags[type=hidden] {
3573 display: none;
3574 }
3575
3576 .bbp-the-content-wrapper {
3577 margin-top: 30px;
3578 margin-bottom: 25px;
3579 }
3580 .bbp-reply-form .bbp-the-content-wrapper {
3581 margin-top: 0 !important;
3582 margin-bottom: 0 !important;
3583 }
3584
3585 .bbp-reply-author img {
3586 max-width: 40px;
3587 height: auto;
3588 margin-top: -5px;
3589 border-radius: 50%;
3590 }
3591 .bbp-reply-author .bbp-voting {
3592 left: 34px;
3593 }
3594
3595 .bbp-reply-content .bbp-head-area {
3596 flex-direction: column;
3597 align-items: flex-start;
3598 flex-wrap: wrap;
3599 padding-bottom: 5px;
3600 }
3601
3602 .reply-result > .type-reply {
3603 display: flex;
3604 flex-direction: row;
3605 align-items: flex-start;
3606 gap: 20px;
3607 padding: 15px 0;
3608 }
3609 .reply-result > .type-reply.forum-comment .forum-post-top {
3610 width: 100%;
3611 justify-content: space-between;
3612 }
3613 .reply-result > .type-reply .forum-post-top {
3614 justify-content: start;
3615 }
3616 .reply-result > .type-reply .comment-content {
3617 border-bottom: 0;
3618 padding-bottom: 0;
3619 }
3620
3621 .bbp-reply-content {
3622 flex-grow: 1;
3623 }
3624
3625 .reply-author-displayname a {
3626 text-decoration: none;
3627 }
3628 .reply-author-displayname a .bbp-author-name {
3629 font-size: 15px;
3630 font-weight: 500;
3631 color: var(--black_700);
3632 line-height: 1.4;
3633 text-decoration: none !important;
3634 list-style: none;
3635 }
3636
3637 .bbp-meta a {
3638 font-size: 14px;
3639 color: var(--black_400);
3640 font-weight: 500;
3641 }
3642
3643 .bbp-admin-links-dropdown select:focus,
3644 .bbp-admin-links-dropdown select:focus-visible {
3645 border: 1px solid #999 !important;
3646 outline: none;
3647 }
3648
3649 .replies-sorting .replies-sort-select {
3650 font-size: 14px;
3651 border: solid 1px var(--black_50);
3652 box-shadow: none;
3653 background-color: var(--bs-white);
3654 border-radius: 5px;
3655 color: var(--black_600);
3656 }
3657
3658 .forum-layout a {
3659 text-decoration: none !important;
3660 }
3661
3662 .post-header .category-menu .all-users a img {
3663 width: 20px;
3664 margin-right: 10px;
3665 display: inline-block;
3666 border-radius: 50%;
3667 }
3668
3669 .post-header .category-menu .tagList a span {
3670 border-radius: 4px;
3671 width: 12px;
3672 height: 12px;
3673 background: var(--bbpc_brand_color);
3674 display: inline-block;
3675 margin-right: 10px;
3676 vertical-align: -3px;
3677 }
3678
3679 .action_btn {
3680 font-size: 16px;
3681 font-weight: 400;
3682 color: #fff;
3683 box-shadow: 0 20px 30px 0 rgba(8, 102, 255, 0.24);
3684 border-radius: 4px;
3685 background: var(--bbpc_brand_color);
3686 display: inline-block;
3687 padding: 14px 28px;
3688 transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.18s ease-in-out;
3689 text-decoration: none !important;
3690 }
3691
3692 .dropdown-menu .all-users {
3693 padding-left: 22px !important;
3694 }
3695
3696 .dropdown-menu .all-users .userlist {
3697 padding-left: 0px;
3698 }
3699
3700 #bbpress-forums {
3701 font-size: 14px;
3702 line-height: 1.7;
3703 }
3704 #bbpress-forums .bbp-single-user-details {
3705 background: var(--bs-white);
3706 border-radius: 10px;
3707 padding: 30px 20px;
3708 margin-bottom: 70px;
3709 margin-left: 1rem;
3710 margin-right: 1rem;
3711 box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
3712 }
3713 #bbpress-forums .bbp-single-user-details #bbp-user-navigation ul {
3714 padding-left: 0;
3715 margin-bottom: 0;
3716 }
3717 #bbpress-forums .bbp-single-user-details #bbp-user-navigation li {
3718 margin-top: 4px;
3719 list-style: none;
3720 }
3721 #bbpress-forums .bbp-single-user-details #bbp-user-navigation li.current a {
3722 color: #fff;
3723 background-color: #0766FF;
3724 }
3725 #bbpress-forums .bbp-single-user-details #bbp-user-navigation a {
3726 padding: 10px 15px;
3727 border: none;
3728 font-size: 14px;
3729 color: var(--black_800);
3730 background: rgba(208, 215, 222, 0.32);
3731 border-radius: 3px;
3732 display: block;
3733 text-decoration: none;
3734 font-family: "Roboto", sans-serif;
3735 }
3736 #bbpress-forums .bbp-user-body {
3737 background: var(--bs-white);
3738 margin-bottom: 120px;
3739 border-radius: 10px;
3740 }
3741 #bbpress-forums #bbp-user-wrapper {
3742 display: flex;
3743 }
3744 @media screen and (max-width: 767px) {
3745 #bbpress-forums #bbp-user-wrapper {
3746 display: block;
3747 }
3748 }
3749
3750 .bbp-user-section h3 {
3751 font-size: 1.75rem;
3752 font-weight: 700;
3753 }
3754
3755 hr {
3756 margin: 1rem 0;
3757 color: inherit;
3758 background-color: currentColor;
3759 border: 0;
3760 opacity: 0.25;
3761 }
3762
3763 @media (min-width: 992px) {
3764 .col-lg-3 {
3765 flex: 0 0 auto;
3766 width: 25%;
3767 }
3768 .col-lg-9 {
3769 flex: 0 0 auto;
3770 width: 75%;
3771 }
3772 }
3773 input:not(input[type=radio], input[type=checkbox], input[type=submit], input[type=range], input[type=file]),
3774 textarea {
3775 width: 100%;
3776 }
3777
3778 .bbp-topic-form {
3779 background: var(--bs-white);
3780 padding: 55px;
3781 border-radius: 10px;
3782 box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
3783 margin-top: 60px;
3784 }
3785 .bbp-topic-form input#anonymous_topic {
3786 margin-left: 17px !important;
3787 margin-top: 20px !important;
3788 }
3789
3790 .frmx-nice-select {
3791 background-color: var(--bs-white) !important;
3792 border-color: var(--black_75) !important;
3793 }
3794 .frmx-nice-select .list {
3795 background-color: var(--bs-white) !important;
3796 }
3797
3798 /* Global quicktags — only for non-reply-form contexts (e.g. topic form) */
3799 .quicktags-toolbar:not(.bbp-reply-form .quicktags-toolbar):not(.frmx-inline-edit-content .quicktags-toolbar) {
3800 display: flex;
3801 flex-wrap: wrap;
3802 gap: 2px;
3803 border: 1px solid #dcdcdc;
3804 box-sizing: border-box;
3805 width: 100%;
3806 justify-content: flex-start;
3807 }
3808 .quicktags-toolbar:not(.bbp-reply-form .quicktags-toolbar):not(.frmx-inline-edit-content .quicktags-toolbar) .ed_button {
3809 all: unset;
3810 display: inline-flex;
3811 align-items: center;
3812 justify-content: center;
3813 background: #ffffff;
3814 border: 1px solid #2271b1;
3815 color: #2271b1;
3816 height: auto;
3817 min-width: 28px;
3818 font-family: sans-serif;
3819 border-radius: 3px;
3820 cursor: pointer;
3821 box-sizing: border-box;
3822 text-align: center;
3823 transition: all 0.2s ease;
3824 }
3825 .quicktags-toolbar:not(.bbp-reply-form .quicktags-toolbar):not(.frmx-inline-edit-content .quicktags-toolbar) .ed_button:hover {
3826 background-color: #f0f6fa;
3827 border-color: #135e96;
3828 color: #135e96;
3829 text-decoration: none;
3830 }
3831
3832 body.bbpress.ast-separate-container article,
3833 .ast-separate-container .ast-article-single:not(.ast-related-post) {
3834 padding: 0;
3835 background: transparent !important;
3836 }
3837
3838 #bbpress-forums #bbp-your-profile fieldset label[for] {
3839 float: none;
3840 width: auto;
3841 padding: 0;
3842 text-align: left;
3843 cursor: default;
3844 }
3845
3846 #bbpress-forums #bbp-your-profile fieldset.submit button {
3847 float: left;
3848 }
3849
3850 #bbpress-forums #bbp-your-profile fieldset {
3851 padding: 0px;
3852 }
3853
3854 #bbpress-forums #bbp-your-profile fieldset.submit button {
3855 font: 500 14px "Roboto", sans-serif;
3856 color: #fff !important;
3857 margin: 0;
3858 background: rgba(8, 102, 255, 0.8);
3859 padding: 15px 30px;
3860 border-radius: 4px;
3861 transition: all 0.3s linear;
3862 cursor: pointer;
3863 text-decoration: none !important;
3864 border: none;
3865 width: -moz-fit-content;
3866 width: fit-content;
3867 }
3868
3869 #bbpress-forums #bbp-your-profile fieldset textarea {
3870 width: 100%;
3871 }
3872
3873 /* Share Button */
3874 .forumax-share-btn {
3875 color: var(--black_600, #6b707f);
3876 margin: 0 0 0px;
3877 align-items: base-line;
3878 display: flex;
3879 align-items: center;
3880 gap: 8px;
3881 text-decoration: none !important;
3882 cursor: pointer;
3883 font-size: 16px;
3884 width: max-content;
3885 }
3886
3887 .forumax-share-btn:hover {
3888 color: var(--bbpc_brand_color, #0073aa);
3889 }
3890
3891 /* Modal Styles */
3892 div#forumax_share_modal {
3893 display: none;
3894 /* Hidden by default */
3895 background: rgba(0, 0, 0, 0.4);
3896 position: fixed;
3897 top: 0;
3898 left: 0;
3899 width: 100%;
3900 height: 100%;
3901 z-index: 99999;
3902 }
3903 div#forumax_share_modal .forumax-modal-dialog {
3904 max-width: 500px;
3905 position: absolute;
3906 top: 50%;
3907 left: 50%;
3908 transform: translate(-50%, -50%);
3909 width: 100%;
3910 margin: 0;
3911 }
3912 div#forumax_share_modal .forumax-modal-dialog .forumax-modal-content {
3913 padding: 30px 30px 35px;
3914 background-color: var(--bs-white);
3915 border-radius: 6px;
3916 position: relative;
3917 }
3918 div#forumax_share_modal .forumax-modal-dialog .forumax-modal-content .close {
3919 position: absolute;
3920 right: 15px;
3921 top: 15px;
3922 font-size: 24px;
3923 line-height: 1;
3924 cursor: pointer;
3925 color: var(--black_600, #6b707f);
3926 text-decoration: none;
3927 }
3928 div#forumax_share_modal .forumax-modal-dialog .forumax-modal-content .close:hover {
3929 color: #cd2653;
3930 }
3931 div#forumax_share_modal .forumax-modal-dialog .forumax-modal-content .forumax-share-wrap p {
3932 margin: 0;
3933 }
3934 div#forumax_share_modal .forumax-modal-dialog .forumax-modal-content .forumax-share-wrap h2 {
3935 font-size: 24px;
3936 font-weight: 700;
3937 margin: 0 0 20px 0;
3938 padding: 0;
3939 }
3940 div#forumax_share_modal .forumax-modal-dialog .forumax-modal-content .forumax-share-wrap .social-links {
3941 margin-bottom: 20px;
3942 }
3943 div#forumax_share_modal .forumax-modal-dialog .forumax-modal-content .forumax-share-wrap .social-links a {
3944 width: 50px;
3945 height: 50px;
3946 background-color: var(--black_50, #f7f8f9);
3947 display: inline-flex;
3948 align-items: center;
3949 justify-content: center;
3950 border-radius: 50%;
3951 color: var(--black_600, #6b707f);
3952 margin-right: 10px;
3953 text-decoration: none;
3954 transition: all 0.3s;
3955 }
3956 div#forumax_share_modal .forumax-modal-dialog .forumax-modal-content .forumax-share-wrap .social-links a:hover {
3957 background-color: #e2e6ea;
3958 }
3959 div#forumax_share_modal .forumax-modal-dialog .forumax-modal-content .forumax-share-wrap .social-links a i {
3960 font-size: 20px;
3961 }
3962 div#forumax_share_modal .forumax-modal-dialog .forumax-modal-content .forumax-share-wrap .social-links a svg {
3963 width: 20px;
3964 height: 20px;
3965 }
3966 div#forumax_share_modal .forumax-modal-dialog .forumax-modal-content .forumax-share-wrap .social-links a:nth-child(2) > i {
3967 color: rgb(66, 103, 178);
3968 }
3969 div#forumax_share_modal .forumax-modal-dialog .forumax-modal-content .forumax-share-wrap .social-links a:nth-child(3) > i {
3970 color: rgb(0, 114, 177);
3971 }
3972 div#forumax_share_modal .forumax-modal-dialog .forumax-modal-content .forumax-share-wrap .social-links a:nth-child(4) > i, div#forumax_share_modal .forumax-modal-dialog .forumax-modal-content .forumax-share-wrap .social-links a:nth-child(4) > svg {
3973 color: #000;
3974 }
3975 div#forumax_share_modal .forumax-modal-dialog .forumax-modal-content .forumax-share-wrap .copy-url-wrap {
3976 position: relative;
3977 }
3978 div#forumax_share_modal .forumax-modal-dialog .forumax-modal-content .forumax-share-wrap .copy-url-wrap input {
3979 width: 100%;
3980 background: var(--black_25, #fcfcfc);
3981 height: 40px;
3982 padding: 0 40px 0 15px;
3983 font-size: 14px;
3984 border: 1px solid var(--black_50, #eaeeef);
3985 border-radius: 4px;
3986 }
3987 div#forumax_share_modal .forumax-modal-dialog .forumax-modal-content .forumax-share-wrap .copy-url-wrap .share-this-doc {
3988 position: absolute;
3989 right: 10px;
3990 top: 50%;
3991 transform: translateY(-50%);
3992 cursor: pointer;
3993 color: var(--black_600, #6b707f);
3994 }
3995 div#forumax_share_modal .forumax-modal-dialog .forumax-modal-content .forumax-share-wrap .copy-url-wrap .share-this-doc img {
3996 border: none;
3997 }
3998 div#forumax_share_modal .forumax-modal-dialog .forumax-modal-content .forumax-share-wrap .copy-url-wrap .share-this-doc:hover {
3999 color: var(--bbpc_brand_color, #0073aa);
4000 }
4001
4002 /* Link Copied Notification - Global */
4003 .forumax-link-copied-wrap {
4004 position: fixed;
4005 right: 20px;
4006 top: 20px;
4007 background: var(--bbpc_brand_color);
4008 color: var(--bs-white);
4009 padding: 12px 20px;
4010 border-radius: 6px;
4011 display: none;
4012 font-size: 14px;
4013 box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
4014 border: 1px solid var(--bbpc_brand_color);
4015 align-items: center;
4016 gap: 12px;
4017 white-space: nowrap;
4018 z-index: 200000;
4019 font-weight: 500;
4020 }
4021 .forumax-link-copied-wrap .icon_check_alt2 {
4022 color: var(--bs-white);
4023 font-size: 18px;
4024 }
4025 .forumax-link-copied-wrap .close-notice {
4026 font-size: 16px;
4027 color: var(--bs-white);
4028 cursor: pointer;
4029 margin-left: 5px;
4030 display: flex;
4031 }
4032 .forumax-link-copied-wrap .close-notice:hover {
4033 color: #ea0606;
4034 }
4035 .forumax-link-copied-wrap:after {
4036 display: none;
4037 }
4038
4039 .bbp-eib-content .bbp-eib-title {
4040 color: #000;
4041 }
4042 .bbp-eib-content .tab-content .bbp-eib-input {
4043 background: transparent;
4044 color: black;
4045 }
4046
4047 #wp-media-modal .media-frame-title h1 {
4048 color: #000;
4049 }
4050 #wp-media-modal input#image-details-link-to-custom {
4051 color: black;
4052 }
4053
4054 #bbpress-forums div.odd,
4055 #bbpress-forums ul.odd {
4056 background-color: var(--bs-white);
4057 }
4058
4059 #bbpress-forums #bbp-your-profile fieldset input,
4060 #bbpress-forums #bbp-your-profile fieldset textarea {
4061 background-color: var(--bs-white);
4062 color: var(--black_900);
4063 }
4064
4065 #bbpress-forums div.even,
4066 #bbpress-forums ul.even {
4067 background-color: var(--black_25);
4068 }
4069
4070 #bbpress-forums div.reply {
4071 padding: 28px;
4072 }
4073
4074 .main-post .bbp-voting {
4075 left: 532px !important;
4076 top: 86px !important;
4077 }
4078
4079 .forum-main-column .main-post .bbp-voting {
4080 top: 190px !important;
4081 }
4082
4083 /* === TOPIC LEAD DESIGN IMPROVEMENTS === */
4084 /* Hide Upvote/Downvote text labels globally - show icons only */
4085 .single-topic .main-post .bbp-voting .bbp-voting-label,
4086 .topic-content-wrapper .bbp-voting .bbp-voting-label,
4087 .bbp-voting .bbp-voting-label.helpful,
4088 .bbp-voting .bbp-voting-label.not-helpful {
4089 display: none !important;
4090 visibility: hidden !important;
4091 width: 0 !important;
4092 height: 0 !important;
4093 overflow: hidden !important;
4094 font-size: 0 !important;
4095 }
4096
4097 /* All reaction buttons in ONE horizontal row */
4098 .single-topic .main-post .forum-post-content {
4099 padding-left: 0;
4100 /* Wrapper for all reaction elements */
4101 }
4102 .single-topic .main-post .forum-post-content .bbpc-footer-actions,
4103 .single-topic .main-post .forum-post-content .bbpc-agree-disagree-buttons {
4104 display: inline-flex !important;
4105 flex-wrap: nowrap !important;
4106 align-items: center !important;
4107 gap: 10px !important;
4108 }
4109 @media (max-width: 768px) {
4110 .single-topic .main-post .forum-post-content .bbpc-footer-actions,
4111 .single-topic .main-post .forum-post-content .bbpc-agree-disagree-buttons {
4112 display: flow-root !important;
4113 }
4114 }
4115 .single-topic .main-post .forum-post-content {
4116 /* Container that holds agree/disagree + same question + react */
4117 }
4118 .single-topic .main-post .forum-post-content .bbpc-footer-actions {
4119 gap: 12px !important;
4120 margin-top: 25px !important;
4121 }
4122 .single-topic .main-post .forum-post-content {
4123 /* Agree/Disagree buttons styling */
4124 }
4125 .single-topic .main-post .forum-post-content .bbpc-agree-button,
4126 .single-topic .main-post .forum-post-content .bbpc-disagree-button {
4127 display: inline-flex !important;
4128 align-items: center !important;
4129 gap: 6px !important;
4130 padding: 8px 16px !important;
4131 border-radius: 0.5rem;
4132 border: 1px solid var(--black_100) !important;
4133 background: var(--bs-white) !important;
4134 font-size: 14px !important;
4135 font-weight: 500 !important;
4136 color: var(--black_700) !important;
4137 cursor: pointer !important;
4138 transition: all 0.2s ease !important;
4139 }
4140 @media (max-width: 768px) {
4141 .single-topic .main-post .forum-post-content .bbpc-agree-button,
4142 .single-topic .main-post .forum-post-content .bbpc-disagree-button {
4143 margin-right: 10px;
4144 margin-bottom: 5px;
4145 }
4146 }
4147 .single-topic .main-post .forum-post-content .bbpc-agree-button:hover,
4148 .single-topic .main-post .forum-post-content .bbpc-disagree-button:hover {
4149 background: var(--black_25) !important;
4150 border-color: var(--black_150) !important;
4151 }
4152 .single-topic .main-post .forum-post-content .bbpc-agree-button.active,
4153 .single-topic .main-post .forum-post-content .bbpc-disagree-button.active {
4154 background: #e3f2fd !important;
4155 border-color: #2196f3 !important;
4156 color: #1976d2 !important;
4157 }
4158 .single-topic .main-post .forum-post-content .bbpc-agree-button .bbpc-reactions-btn-counter,
4159 .single-topic .main-post .forum-post-content .bbpc-disagree-button .bbpc-reactions-btn-counter {
4160 padding: 0.125rem 0.375rem !important;
4161 line-height: 1rem !important;
4162 border-radius: 0.25rem !important;
4163 width: inherit !important;
4164 }
4165 .single-topic .main-post .forum-post-content {
4166 /* Counter beside buttons */
4167 }
4168 .single-topic .main-post .forum-post-content .bbpc-reactions-btn-counter {
4169 font-size: 14px !important;
4170 font-weight: 600 !important;
4171 color: var(--black_600) !important;
4172 margin-left: -5px !important;
4173 }
4174 .single-topic .main-post .forum-post-content {
4175 /* I have the same question button */
4176 }
4177 .single-topic .main-post .forum-post-content .bbpc-same-topic-btn,
4178 .single-topic .main-post .forum-post-content [class*=same-topic] button,
4179 .single-topic .main-post .forum-post-content [class*=same-question] button {
4180 display: inline-flex !important;
4181 align-items: center !important;
4182 gap: 6px !important;
4183 padding: 8px 16px !important;
4184 border-radius: 0.5rem !important;
4185 border: 1px solid var(--black_100) !important;
4186 background: var(--bs-white) !important;
4187 font-size: 14px !important;
4188 font-weight: 500 !important;
4189 color: var(--black_700) !important;
4190 margin: 0;
4191 margin-top: 3px;
4192 }
4193 @media (max-width: 375px) {
4194 .single-topic .main-post .forum-post-content .bbpc-same-topic-btn,
4195 .single-topic .main-post .forum-post-content [class*=same-topic] button,
4196 .single-topic .main-post .forum-post-content [class*=same-question] button {
4197 padding: 8px 6px !important;
4198 font-size: 10px !important;
4199 }
4200 }
4201 .single-topic .main-post .forum-post-content .bbpc-same-topic-btn:hover,
4202 .single-topic .main-post .forum-post-content [class*=same-topic] button:hover,
4203 .single-topic .main-post .forum-post-content [class*=same-question] button:hover {
4204 background: var(--black_25) !important;
4205 }
4206 .single-topic .main-post .forum-post-content {
4207 /* React button */
4208 }
4209 .single-topic .main-post .forum-post-content .forumax-emoji-reactions,
4210 .single-topic .main-post .forum-post-content [class*=react] {
4211 display: inline-flex !important;
4212 align-items: center !important;
4213 }
4214 @media (max-width: 768px) {
4215 .single-topic .main-post .forum-post-content .forumax-emoji-reactions,
4216 .single-topic .main-post .forum-post-content [class*=react] {
4217 align-items: start !important;
4218 }
4219 }
4220 .single-topic .main-post .forum-post-content .reaction-count-item {
4221 align-items: center !important;
4222 padding: 6px 12px;
4223 border: 1px solid;
4224 }
4225
4226 /* Force horizontal layout for all content after topic content */
4227 .single-topic .main-post .content.editor-content + * {
4228 display: flex !important;
4229 flex-wrap: wrap !important;
4230 align-items: center !important;
4231 gap: 12px !important;
4232 }
4233 @media (max-width: 768px) {
4234 .single-topic .main-post .content.editor-content + * {
4235 align-items: start !important;
4236 }
4237 }
4238
4239 /* Share button inline styling */
4240 .single-topic .main-post .frmx-share-btn,
4241 .single-topic .main-post [class*=share-topic] {
4242 display: inline-flex !important;
4243 align-items: center !important;
4244 gap: 6px !important;
4245 padding: 8px 16px !important;
4246 border-radius: 50px !important;
4247 background: transparent !important;
4248 font-size: 14px !important;
4249 font-weight: 500 !important;
4250 color: var(--black_600) !important;
4251 cursor: pointer !important;
4252 }
4253 .single-topic .main-post .frmx-share-btn:hover,
4254 .single-topic .main-post [class*=share-topic]:hover {
4255 background: var(--black_25) !important;
4256 }
4257 .single-topic .main-post .frmx-share-btn,
4258 .single-topic .main-post [class*=share-topic] {
4259 /* Hide the "Share this Topic" text, show only "Share" or icon */
4260 }
4261 .single-topic .main-post .frmx-share-btn .share-text-full,
4262 .single-topic .main-post [class*=share-topic] .share-text-full {
4263 display: none !important;
4264 }
4265
4266 .forum-post-content .bbp-voting {
4267 position: static;
4268 }
4269
4270 .frmx-reaction-topic-wrap {
4271 margin-top: 0;
4272 }
4273
4274 /* ============================
4275 Profile Avatar Upload
4276 ============================ */
4277 /* Override bbPress default fieldset div styles for the avatar section */
4278 #bbpress-forums #bbp-your-profile fieldset.frmx-avatar-fieldset div {
4279 float: none !important;
4280 clear: none !important;
4281 width: auto !important;
4282 margin-bottom: 0 !important;
4283 }
4284
4285 #bbpress-forums #bbp-your-profile fieldset.frmx-avatar-fieldset {
4286 margin-bottom: 10px;
4287 padding: 0 0 20px 0;
4288 border-bottom: 1px solid var(--black_50, #eaeeef);
4289 }
4290 #bbpress-forums #bbp-your-profile fieldset.frmx-avatar-fieldset legend {
4291 display: block !important;
4292 width: 100% !important;
4293 float: none !important;
4294 font-size: 18px;
4295 font-weight: 600;
4296 color: var(--black_800);
4297 margin-bottom: 18px;
4298 padding: 0;
4299 }
4300
4301 .frmx-avatar-upload-wrap {
4302 display: flex !important;
4303 align-items: center !important;
4304 gap: 20px;
4305 flex-wrap: nowrap;
4306 }
4307
4308 .frmx-avatar-preview {
4309 position: relative !important;
4310 width: 96px !important;
4311 min-width: 96px;
4312 height: 96px !important;
4313 border-radius: 50%;
4314 overflow: visible !important;
4315 flex-shrink: 0;
4316 }
4317 .frmx-avatar-preview img {
4318 width: 96px !important;
4319 height: 96px !important;
4320 border-radius: 50% !important;
4321 object-fit: cover;
4322 border: 2px solid var(--black_75, #e0e4e8);
4323 transition: opacity 0.3s ease;
4324 display: block;
4325 }
4326 .frmx-avatar-preview.frmx-avatar-uploading img {
4327 opacity: 0.4;
4328 }
4329 .frmx-avatar-preview.frmx-avatar-uploading::after {
4330 content: "";
4331 position: absolute;
4332 top: 50%;
4333 left: 50%;
4334 width: 28px;
4335 height: 28px;
4336 margin: -14px 0 0 -14px;
4337 border: 3px solid var(--black_100, #d0d5dc);
4338 border-top-color: var(--bbpc_brand_color);
4339 border-radius: 50%;
4340 animation: frmx-spin 0.7s linear infinite;
4341 }
4342
4343 .frmx-avatar-remove {
4344 position: absolute !important;
4345 top: 0 !important;
4346 right: 0 !important;
4347 width: 24px !important;
4348 height: 24px !important;
4349 border-radius: 50% !important;
4350 background: #e74c3c !important;
4351 color: #fff !important;
4352 border: 2px solid #fff !important;
4353 display: flex !important;
4354 align-items: center !important;
4355 justify-content: center !important;
4356 cursor: pointer;
4357 transition: background 0.2s ease, transform 0.2s ease;
4358 padding: 0 !important;
4359 z-index: 2;
4360 line-height: 1 !important;
4361 }
4362 .frmx-avatar-remove:hover {
4363 background: #c0392b !important;
4364 transform: scale(1.1);
4365 }
4366 .frmx-avatar-remove svg {
4367 display: block;
4368 }
4369
4370 .frmx-avatar-actions {
4371 display: flex !important;
4372 flex-direction: column !important;
4373 gap: 8px;
4374 }
4375
4376 .frmx-avatar-upload-btn {
4377 display: inline-flex !important;
4378 align-items: center;
4379 gap: 8px;
4380 padding: 9px 18px !important;
4381 background: var(--bbpc_brand_color, #4c4cf1);
4382 color: #fff !important;
4383 border: none !important;
4384 border-radius: 5px;
4385 font-size: 14px;
4386 font-weight: 500;
4387 font-family: "Roboto", sans-serif;
4388 cursor: pointer;
4389 transition: background 0.25s ease, box-shadow 0.25s ease;
4390 width: fit-content !important;
4391 max-width: fit-content !important;
4392 line-height: 1.4;
4393 }
4394 .frmx-avatar-upload-btn:hover {
4395 background: rgba(8, 102, 255, 0.85);
4396 box-shadow: 0 4px 12px rgba(8, 102, 255, 0.3);
4397 }
4398 .frmx-avatar-upload-btn svg {
4399 flex-shrink: 0;
4400 }
4401
4402 .frmx-avatar-file-input {
4403 display: none !important;
4404 }
4405
4406 .frmx-avatar-hint {
4407 font-size: 12px;
4408 color: var(--black_400, #8b919e);
4409 margin: 0 !important;
4410 padding: 0 !important;
4411 line-height: 1.4;
4412 }
4413
4414 .frmx-avatar-status {
4415 display: none;
4416 font-size: 13px;
4417 font-weight: 500;
4418 padding: 6px 12px;
4419 border-radius: 4px;
4420 margin-top: 2px;
4421 width: fit-content;
4422 }
4423 .frmx-avatar-status.frmx-status-success {
4424 background: #d4edda;
4425 color: #155724;
4426 }
4427 .frmx-avatar-status.frmx-status-error {
4428 background: #f8d7da;
4429 color: #721c24;
4430 }
4431 .frmx-avatar-status.frmx-status-info {
4432 background: #d1ecf1;
4433 color: #0c5460;
4434 }
4435
4436 @keyframes frmx-spin {
4437 to {
4438 transform: rotate(360deg);
4439 }
4440 }
4441 /* Responsive adjustments for avatar upload */
4442 @media screen and (max-width: 576px) {
4443 .frmx-avatar-upload-wrap {
4444 flex-direction: column;
4445 align-items: flex-start;
4446 gap: 14px;
4447 }
4448 .frmx-avatar-preview {
4449 width: 80px !important;
4450 min-width: 80px;
4451 height: 80px !important;
4452 }
4453 .frmx-avatar-preview img {
4454 width: 80px !important;
4455 height: 80px !important;
4456 }
4457 }
4458 /* ============================
4459 Nested / Threaded Replies
4460 ============================ */
4461 /* Main reply list reset */
4462 .bbp-replies-list {
4463 list-style: none !important;
4464 padding-left: 0 !important;
4465 margin: 0;
4466 }
4467 .bbp-replies-list > li {
4468 list-style: none !important;
4469 }
4470 .bbp-replies-list {
4471 /* Ensure .forum-comment has position context for absolutely-positioned .bbp-voting */
4472 }
4473 .bbp-replies-list .forum-comment {
4474 position: relative;
4475 }
4476 .bbp-replies-list {
4477 /* --- Nested children (depth 1) --- */
4478 }
4479 .bbp-replies-list .children {
4480 list-style: none !important;
4481 padding-left: 0 !important;
4482 margin-left: 10px;
4483 /* Closer to the thread line */
4484 overflow: hidden;
4485 transition: max-height 0.35s ease;
4486 }
4487 .bbp-replies-list .children > li {
4488 list-style: none !important;
4489 padding-left: 12px;
4490 position: relative;
4491 /* Nested reply card restyling: gray background, no border/shadow, smaller avatar */
4492 }
4493 .bbp-replies-list .children > li > .forum-comment .frmx-reply-avatar img {
4494 width: 28px;
4495 height: 28px;
4496 }
4497 .bbp-replies-list .children > li > .forum-comment .frmx-reply-avatar {
4498 /* Adjust thread line anchor point for smaller avatar */
4499 }
4500 .bbp-replies-list .children > li > .forum-comment .frmx-reply-avatar::after {
4501 top: 38px;
4502 left: 13px;
4503 }
4504 .bbp-replies-list .children > li > .forum-comment .frmx-reply-card {
4505 background: var(--black_25, #f7f8fa);
4506 border: none;
4507 box-shadow: none;
4508 padding: 16px 18px;
4509 }
4510 .bbp-replies-list .children {
4511 /* --- Depth 2+ --- */
4512 }
4513 .bbp-replies-list .children .children {
4514 margin-left: 10px;
4515 }
4516
4517 /* "Replying to @username" label */
4518 .frmx-replying-to {
4519 display: inline-flex;
4520 align-items: center;
4521 gap: 5px;
4522 font-size: 12px;
4523 font-weight: 500;
4524 color: var(--black_400, #9ca3af);
4525 margin-bottom: 6px;
4526 }
4527 .frmx-replying-to svg {
4528 flex-shrink: 0;
4529 opacity: 0.65;
4530 }
4531 .frmx-replying-to a {
4532 color: var(--bbpc_brand_color, #4c4cf1);
4533 text-decoration: none !important;
4534 font-weight: 600;
4535 }
4536 .frmx-replying-to a:hover {
4537 text-decoration: underline !important;
4538 }
4539
4540 /* Reply button inside each reply */
4541 .frmx-nested-reply-action {
4542 margin-top: 8px;
4543 }
4544 .frmx-nested-reply-action a {
4545 display: inline-flex;
4546 align-items: center;
4547 gap: 6px;
4548 font-size: 13px;
4549 font-weight: 500;
4550 color: var(--black_500, #7a808c);
4551 text-decoration: none !important;
4552 padding: 0;
4553 border-radius: 0;
4554 background: transparent;
4555 transition: color 0.2s ease, text-decoration-color 0.2s ease;
4556 }
4557 .frmx-nested-reply-action a:hover {
4558 color: var(--bbpc_brand_color, #4c4cf1);
4559 text-decoration: underline !important;
4560 }
4561 .frmx-nested-reply-action a svg {
4562 flex-shrink: 0;
4563 }
4564
4565 /* Reply button + Reactions + Voting — same row inside forum replies.
4566 * .bbp-voting, .frmx-nested-reply-action, and .forumax-reactions-wrapper are
4567 * direct children of .comment-content (via bbp_theme_after_reply_content).
4568 * The text content takes full width; action elements share one row below.
4569 */
4570 .forum-comment .comment-content {
4571 display: flex;
4572 flex-wrap: wrap;
4573 align-items: flex-start;
4574 gap: 0;
4575 margin-top: 12px;
4576 /* The reply body text occupies its own full row */
4577 }
4578 .forum-comment .comment-content > .bbp-reply-content,
4579 .forum-comment .comment-content > .content,
4580 .forum-comment .comment-content > p,
4581 .forum-comment .comment-content > div.frmx-replying-to {
4582 flex: 0 0 100%;
4583 }
4584 .forum-comment .comment-content {
4585 /* Actions row: voting, reply button, reactions — all inline in one row */
4586 }
4587 .forum-comment .comment-content .bbp-voting {
4588 position: static !important;
4589 display: inline-flex !important;
4590 flex-direction: row !important;
4591 align-items: center;
4592 gap: 6px;
4593 padding: 0;
4594 margin: 0;
4595 border: none;
4596 background: transparent;
4597 /* No order override — appears in DOM order (after content) */
4598 }
4599 .forum-comment .comment-content .bbp-voting .bbp-voting-label {
4600 display: none !important;
4601 }
4602 .forum-comment .comment-content .bbp-voting a.vote {
4603 font-size: 0;
4604 line-height: 0;
4605 padding: 4px;
4606 }
4607 .forum-comment .comment-content .bbp-voting a.vote::before {
4608 font-size: 16px;
4609 line-height: 1;
4610 }
4611 .forum-comment .comment-content .bbp-voting .score {
4612 font-size: 13px;
4613 font-weight: 600;
4614 min-width: 20px;
4615 text-align: center;
4616 }
4617 .forum-comment .comment-content .frmx-nested-reply-action {
4618 margin-top: 0;
4619 }
4620 .forum-comment .comment-content .forumax-reactions-wrapper {
4621 margin-top: 0;
4622 margin-left: auto;
4623 /* Push reactions to the right */
4624 display: flex;
4625 align-items: center;
4626 gap: 8px;
4627 }
4628 .forum-comment .comment-content {
4629 /* Separator line before the actions row */
4630 }
4631 .forum-comment .comment-content .bbp-voting,
4632 .forum-comment .comment-content .frmx-nested-reply-action,
4633 .forum-comment .comment-content .forumax-reactions-wrapper {
4634 padding-top: 10px;
4635 }
4636 .forum-comment .comment-content {
4637 /* Only first action element gets the border-top separator */
4638 }
4639 .forum-comment .comment-content > .bbp-voting:first-of-type {
4640 margin-top: 10px;
4641 }
4642
4643 /* Cancel reply-to link – fallback for contexts outside .bbp-reply-form */
4644 #bbp-cancel-reply-to-link {
4645 display: inline-flex;
4646 align-items: center;
4647 gap: 4px;
4648 font-size: 14px;
4649 font-weight: 500;
4650 color: var(--black_500, #7a808c);
4651 text-decoration: none !important;
4652 padding: 10px 16px;
4653 border-radius: 8px;
4654 transition: color 0.15s ease, background 0.15s ease;
4655 }
4656 #bbp-cancel-reply-to-link:hover {
4657 color: var(--black_800);
4658 background: var(--black_50, #f5f5f5);
4659 }
4660
4661 /* Collapse / Expand toggle button */
4662 .bbp-replies-list .frmx-thread-toggle {
4663 display: inline-flex;
4664 align-items: center;
4665 gap: 5px;
4666 padding: 0;
4667 margin: 0 65px 20px;
4668 font-size: 12px;
4669 font-weight: 500;
4670 color: var(--bbpc_brand_color, #4c4cf1);
4671 background: transparent;
4672 border: none;
4673 border-radius: 0;
4674 cursor: pointer;
4675 transition: color 0.2s ease, text-decoration-color 0.2s ease;
4676 width: auto;
4677 box-shadow: none;
4678 }
4679 .bbp-replies-list .frmx-thread-toggle:hover {
4680 text-decoration: none;
4681 }
4682 .bbp-replies-list .frmx-thread-toggle .frmx-toggle-icon {
4683 transition: transform 0.3s ease;
4684 }
4685 .bbp-replies-list .frmx-thread-toggle {
4686 /* Collapsed state — rotate chevron */
4687 }
4688 .bbp-replies-list .frmx-thread-toggle.is-collapsed .frmx-toggle-icon {
4689 transform: rotate(-90deg);
4690 }
4691
4692 /* Responsive — reduce indent on small screens */
4693 @media screen and (max-width: 576px) {
4694 .bbp-replies-list .children {
4695 margin-left: 14px;
4696 }
4697 .bbp-replies-list .children > li {
4698 padding-left: 10px;
4699 }
4700 .bbp-replies-list .children .children {
4701 margin-left: 10px;
4702 }
4703 .bbp-replies-list .children .children .children {
4704 margin-left: 8px;
4705 }
4706 .frmx-thread-toggle {
4707 font-size: 11px;
4708 padding: 3px 10px;
4709 }
4710 }
4711 .frmx-reply-card .forum-post-top {
4712 justify-content: space-between;
4713 }
4714
4715 /* Keep the reply admin menu visible inside user profile reply cards. */
4716 .bbp-user-page .bbpress-wrapper .bbp-user-body #bbp-user-replies-created .bbp-user-section,
4717 .bbp-user-page .bbpress-wrapper .bbp-user-body #bbp-user-replies-created .forum-comment,
4718 .bbp-user-page .bbpress-wrapper .bbp-user-body #bbp-user-replies-created .frmx-reply-card,
4719 .bbp-user-page .bbpress-wrapper .bbp-user-body #bbp-user-replies-created .forum-post-top,
4720 .bbp-user-page .bbpress-wrapper .bbp-user-body #bbp-user-replies-created .reply-admin-links,
4721 .bbp-user-page .bbpress-wrapper .bbp-user-body #bbp-user-replies-created .reply-admin-menu-wrap,
4722 .bbp-user-page .bbpress-wrapper .bbp-user-body #bbp-user-replies-created .bbp-admin-links-dropdown,
4723 .bbp-user-page .bbpress-wrapper .bbp-user-body #bbp-user-replies-created .bbp-admin-links-dropdown .frmx-nice-select,
4724 .bbp-user-page .bbpress-wrapper .bbp-user-body #bbp-user-replies-created .bbp-admin-links-dropdown .frmx-nice-select .list,
4725 .bbp-user-page .bbpress-wrapper .bbp-user-body #bbp-user-replies-created .forumax-reactions-wrapper,
4726 .bbp-user-page .bbpress-wrapper .bbp-user-body #bbp-user-replies-created .forumax-react-btn-group,
4727 .bbp-user-page .bbpress-wrapper .bbp-user-body #bbp-user-replies-created .forumax-reaction-popup {
4728 overflow: visible !important;
4729 }
4730 .bbp-user-page .bbpress-wrapper .bbp-user-body #bbp-user-replies-created .forum-comment,
4731 .bbp-user-page .bbpress-wrapper .bbp-user-body #bbp-user-replies-created .frmx-reply-card,
4732 .bbp-user-page .bbpress-wrapper .bbp-user-body #bbp-user-replies-created .reply-admin-links,
4733 .bbp-user-page .bbpress-wrapper .bbp-user-body #bbp-user-replies-created .reply-admin-menu-wrap,
4734 .bbp-user-page .bbpress-wrapper .bbp-user-body #bbp-user-replies-created .bbp-admin-links-dropdown,
4735 .bbp-user-page .bbpress-wrapper .bbp-user-body #bbp-user-replies-created .bbp-admin-links-dropdown .frmx-nice-select,
4736 .bbp-user-page .bbpress-wrapper .bbp-user-body #bbp-user-replies-created .forumax-reactions-wrapper,
4737 .bbp-user-page .bbpress-wrapper .bbp-user-body #bbp-user-replies-created .forumax-react-btn-group {
4738 position: relative;
4739 }
4740 .bbp-user-page .bbpress-wrapper .bbp-user-body #bbp-user-replies-created .reply-admin-links {
4741 z-index: 10;
4742 }
4743 .bbp-user-page .bbpress-wrapper .bbp-user-body #bbp-user-replies-created .bbp-admin-links-dropdown .frmx-nice-select .list,
4744 .bbp-user-page .bbpress-wrapper .bbp-user-body #bbp-user-replies-created .forumax-reaction-popup {
4745 z-index: 1000;
4746 }
4747