/* Sleek Comment Design - Teal Theme */.recent-comments-list { list-style-type: none; padding-left: 0; margin-left: 0; display: flex; flex-direction: column; gap: 14px; font-size: 16px;}.recent-comments-list > li { margin-bottom: 0; display: block;}/* Comment Card Styling - Elegant Teal Gradient */.recent-comment .comment-wrap { display: block; background: linear-gradient(135deg, #164349 0%, #1a5560 100%); border: 1px solid rgba(22, 67, 73, 0.3); border-radius: 16px; padding: 14px 18px 16px; box-shadow: 0 2px 12px rgba(22, 67, 73, 0.15); transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden;}.recent-comment .comment-wrap::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background:linear-gradient(135deg,#164349 0,#2f3e41 100%); opacity: 0; transition: opacity 0.35s ease; pointer-events: none; z-index: 1;}.recent-comment.has-featured-image .comment-wrap::before { left: 164px;}.recent-comment .comment-wrap:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(22, 67, 73, 0.25); border-color: rgba(26, 85, 96, 0.5);}.recent-comment .comment-wrap:hover::before { opacity: 1;}/* Avatar Styling */.recent-comments-list.with-avatars .comment-wrap { padding-left: 65px; min-height: 56px;}.recent-comments-list.with-avatars .comment-avatar { position: absolute; left: 14px; top: 14px; z-index: 1;}.recent-comments-list .comment-avatar img { border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.15); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);}/* Author Link Styling */.recent-comments-list .comment-author-link { font-weight: 700; font-size: 0.84em; color: #ffffff; display: inline-block; position: relative; z-index: 1; letter-spacing: 0.01em;}.recent-comments-list .comment-author-link a { color: #ffffff; text-decoration: none; transition: all 0.25s ease;}.recent-comments-list .comment-author-link a:hover { color: #7dd3fc; text-shadow: 0 0 8px rgba(125, 211, 252, 0.4);}/* Post Link Styling */.recent-comments-list .comment-post { font-size: 0.77em; color: rgba(255, 255, 255, 0.75); position: relative; z-index: 1; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;}.recent-comments-list .comment-post a { color: #7dd3fc; text-decoration: none; font-weight: 500; transition: all 0.25s ease;}.recent-comments-list .comment-post a:hover { color: #bae6fd; text-decoration: none;}/* Comment Text/Excerpt Styling */.recent-comments-list .comment-excerpt { display: block; margin-top: 7px; padding: 8px 11px; background: rgba(255, 255, 255, 0.08); border-left: 2px solid rgba(125, 211, 252, 0.4); border-radius: 6px; font-size: 0.77em; line-height: 1.55; color: rgba(255, 255, 255, 0.88); font-style: italic; position: relative; z-index: 1;}.recent-comments-list .comment-excerpt a { color: #f5deb3 !important; text-decoration: none; transition: color 0.25s ease;}.recent-comments-list .comment-excerpt a:hover { color: #ffe4b5 !important; text-decoration: underline;}/* Date Styling */.recent-comments-list .comment-date { display: block; margin-top: 4px; font-size: 0.68em; color: rgba(255, 255, 255, 0.5); font-weight: 400; letter-spacing: 0.02em; position: relative; z-index: 1;}.recent-comments-list .comment-date a { color: inherit; text-decoration: none; border-bottom: none; transition: color 0.25s ease;}.recent-comments-list .comment-date a:hover { color: rgba(255, 255, 255, 0.75);}.widget_recent_comments .recent-comments-list .comment-date { margin-top: 8px;}.recent-comments-list .comment-excerpt + .comment-date,.recent-comments-list .comment-post + .comment-date { display: block; margin-top: 8px;}/* Override theme list styles */.recent-comments-list.with-avatars,.recent-comments-list.with-avatars .recent-comment { list-style: none; padding-left: 0; margin-left: 0;}.recent-comment::before { content: '' !important; display: none !important;}/* Featured Image Styles */.comment-featured-image-wrap { position: absolute; left: -16px; top: -1px; bottom: -1px; width: 180px; border-radius: 16px 0 0 16px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); z-index: 2;}.comment-featured-image { height: 100%!important; width: 100%; object-fit: cover; display: block;}/* Adjust padding for comments with featured images */.recent-comment.has-featured-image .comment-wrap { padding: 14px 18px 16px; padding-left: 180px; min-height: auto; position: relative;}.recent-comment.has-featured-image .comment-content-wrap { position: relative; z-index: 3;}.recent-comment .comment-wrap::after,.recent-comment.has-featured-image .comment-content-wrap::after { content: ''; display: table; clear: both;}.recent-comment.has-featured-image .comment-author-link,.recent-comment.has-featured-image .comment-post { display: inline;}.recent-comment.has-featured-image .comment-author-link::after { content: ' ';}/* For avatars + featured images, hide avatar since we have featured image */.recent-comments-list.with-avatars .recent-comment.has-featured-image .comment-avatar { display: none;}/* Threading / Reply Styles */.recent-comment.comment-reply { margin-left: 32px; position: relative;}.recent-comment.comment-reply::after { content: ''; position: absolute; left: -20px; top: 20px; width: 12px; height: 2px; background: rgba(125, 211, 252, 0.3);}.recent-comment.comment-reply::before { content: '' !important; position: absolute !important; display: block !important; left: -20px; top: 0; width: 2px; height: 22px; background: rgba(125, 211, 252, 0.3);}.recent-comment.comment-reply .comment-wrap { /* Same background as parent comments */ border-color: rgba(22, 67, 73, 0.4);}.recent-comment.comment-reply .comment-author-link { font-size: 0.79em;}.recent-comment.comment-reply .comment-post { font-size: 0.73em;}.recent-comment.comment-reply .comment-excerpt { font-size: 0.73em; padding: 7px 10px;}.recent-comment.comment-reply .comment-date { font-size: 0.64em;}/* Reply Button Styles */.brc-reply-btn { display: inline-block; float: right; background: transparent; border: 1px solid rgba(125, 211, 252, 0.4); color: #7dd3fc; font-size: 0.7em; padding: 4px 10px; border-radius: 4px; cursor: pointer; transition: all 0.25s ease; font-weight: 500; z-index: 100; margin-left: 10px; position: relative; margin-top: -15px;}.brc-reply-btn:hover { background: rgba(125, 211, 252, 0.1); border-color: #7dd3fc; color: #bae6fd;}.brc-reply-btn:active { transform: scale(0.95);}/* Reply Form Styles */.brc-reply-form { margin-top: 12px; padding: 12px; background: rgba(255, 255, 255, 0.05); border-radius: 8px; border: 1px solid rgba(125, 211, 252, 0.3); animation: slideDown 0.3s ease; position: relative; z-index: 10;}@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); }}.brc-reply-form textarea { width: 100%; min-height: 80px; padding: 10px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(125, 211, 252, 0.3); border-radius: 6px; color: rgba(255, 255, 255, 0.9) !important; font-size: 0.85em; font-family: inherit; resize: vertical; margin-bottom: 10px;}.brc-reply-form textarea:focus { outline: none; border-color: #7dd3fc; background: rgba(255, 255, 255, 0.12);}.brc-reply-form textarea::placeholder { color: rgba(255, 255, 255, 0.4);}.brc-reply-form-actions { display: flex; gap: 8px; justify-content: flex-end;}.brc-reply-form button { padding: 6px 14px; border-radius: 5px; font-size: 0.8em; font-weight: 600; cursor: pointer; transition: all 0.25s ease; border: none;}.brc-reply-submit { background: linear-gradient(135deg, #7dd3fc 0%, #3b82f6 100%); color: #fff;}.brc-reply-submit:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(125, 211, 252, 0.3);}.brc-reply-submit:disabled { opacity: 0.5; cursor: not-allowed;}.brc-reply-cancel { background: transparent; color: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.3);}.brc-reply-cancel:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.9);}.brc-reply-loading { display: inline-block; width: 12px; height: 12px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.6s linear infinite; margin-left: 6px; vertical-align: middle;}@keyframes spin { to { transform: rotate(360deg); }}.brc-reply-error { margin-top: 8px; padding: 8px 12px; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: 6px; color: #fca5a5; font-size: 0.8em;}.brc-reply-success { margin-top: 8px; padding: 8px 12px; background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); border-radius: 6px; color: #86efac; font-size: 0.8em;}/* Responsive Design */@media (max-width: 640px) { .recent-comments-list { gap: 12px; margin-left: -42px; margin-right: -20px; padding-left: 5px; padding-right: 5px; width: calc(100vw - 10px); max-width: 100vw; } .recent-comment .comment-wrap { padding: 12px 16px 14px; border-radius: 8px; width: 100%; box-sizing: border-box; } .recent-comments-list.with-avatars .comment-wrap { padding-left: 58px; } .recent-comments-list.with-avatars .comment-avatar { left: 12px; top: 12px; } .recent-comments-list .comment-author-link { font-size: 0.81em; } .recent-comments-list .comment-excerpt { font-size: 0.76em; padding: 7px 10px; white-space: normal; max-width: none; } .recent-comment.comment-reply { margin-left: 24px; } .recent-comment.comment-reply::after { left: -16px; width: 10px; } .recent-comment.comment-reply::before { left: -16px; } /* Mobile-specific reply thread styling (universal styling applied above) */ /* Featured image adjustments for mobile - position at top left */ .recent-comment.has-featured-image .comment-wrap { padding: 12px 16px 14px; padding-top: 60px; position: relative; } .comment-featured-image-wrap { position: absolute; left: 0 !important; top: 0 !important; right: auto !important; bottom: auto !important; width: 77px !important; height: 50px !important; border-radius: 8px 0 0 0 !important; } .comment-featured-image { height: 100% !important; width: 100%; object-fit: cover; } .recent-comment.has-featured-image .comment-content-wrap { position: relative; padding-top: 0; margin-top: -50px; padding-left: 82px; min-height: 50px; display: block; } .recent-comment.has-featured-image .comment-author-link { display: block; margin-bottom: 2px; } .recent-comment.has-featured-image .comment-post { display: block; margin-bottom: 6px; } .recent-comment.has-featured-image .comment-excerpt { display: block; clear: both; margin-top: 12px; margin-left: -82px; margin-right: 0; width: calc(100% + 82px); font-size: 0.76em; } .recent-comment.has-featured-image .comment-date { display: inline-block; margin-top: 8px; margin-left: -82px; font-size: 0.68em; float: left; } .recent-comment.has-featured-image .brc-reply-btn { font-size: 0.7em; margin-top: 8px; float: right; margin-left: 10px; } /* Reply button is already positioned correctly via global styles */ .recent-comment.has-featured-image .comment-wrap::before { left: 0; } /* Hide avatars on mobile when featured images are present */ .recent-comments-list.with-avatars .recent-comment.has-featured-image .comment-avatar { display: none; }}