/* =========================================================
   WorldlyFeed override module: sidebar.css
   Changelog:
   - 2026-02-18: extracted sidebar/search/recent-comments styles
   - 2026-02-18: consolidated final Recent Comments heading treatment
   ========================================================= */

/* Sidebar: search + recent comments card body */
.mg-side .widget_search,
.sidebar .widget_search,
.col-md-4 .widget_search {
  border: 1px solid #d8e2f3 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #fff !important;
}

.mg-side .wp-block-search,
.sidebar .wp-block-search,
.col-md-4 .wp-block-search {
  border: 1px solid #d8e2f3 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #fff !important;
  padding: 10px !important;
}

.mg-side .widget_search form,
.sidebar .widget_search form,
.col-md-4 .widget_search form {
  display: flex !important;
  gap: 0 !important;
  padding: 10px !important;
}

.mg-side .wp-block-search__inside-wrapper,
.sidebar .wp-block-search__inside-wrapper,
.col-md-4 .wp-block-search__inside-wrapper {
  display: flex !important;
  gap: 0 !important;
}

.mg-side .widget_search input[type="search"],
.sidebar .widget_search input[type="search"],
.col-md-4 .widget_search input[type="search"],
.mg-side .wp-block-search input[type="search"],
.sidebar .wp-block-search input[type="search"],
.col-md-4 .wp-block-search input[type="search"] {
  flex: 1 1 auto !important;
  min-height: 42px !important;
  border: 1px solid #c9d6ee !important;
  border-radius: 6px 0 0 6px !important;
  padding: 0 12px !important;
  margin: 0 !important;
}

.mg-side .widget_search .btn,
.mg-side .widget_search button,
.sidebar .widget_search .btn,
.sidebar .widget_search button,
.col-md-4 .widget_search .btn,
.col-md-4 .widget_search button,
.mg-side .wp-block-search button,
.sidebar .wp-block-search button,
.col-md-4 .wp-block-search button {
  min-height: 42px !important;
  padding: 0 14px !important;
  border-radius: 0 6px 6px 0 !important;
  border: 1px solid #1151d3 !important;
  background: #1151d3 !important;
  color: #fff !important;
}

.mg-side .widget_recent_comments,
.sidebar .widget_recent_comments,
.col-md-4 .widget_recent_comments,
.mg-side #recentcomments,
.sidebar #recentcomments,
.col-md-4 #recentcomments {
  border: 1px solid #d8e2f3 !important;
  border-radius: 8px !important;
  background: #fff !important;
  overflow: hidden !important;
}

.mg-side .widget_recent_comments ul,
.sidebar .widget_recent_comments ul,
.col-md-4 .widget_recent_comments ul,
.mg-side #recentcomments,
.sidebar #recentcomments,
.col-md-4 #recentcomments {
  margin: 0 !important;
  padding: 8px 12px !important;
  list-style: none !important;
}

.mg-side .widget_recent_comments li,
.sidebar .widget_recent_comments li,
.col-md-4 .widget_recent_comments li,
.mg-side #recentcomments li,
.sidebar #recentcomments li,
.col-md-4 #recentcomments li {
  margin: 0 !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid #e7eef9 !important;
  line-height: 1.45 !important;
}

.mg-side .widget_recent_comments li:last-child,
.sidebar .widget_recent_comments li:last-child,
.col-md-4 .widget_recent_comments li:last-child {
  border-bottom: none !important;
}

/* Sidebar: Recent Comments heading (final) */
.mg-widget.widget_block h2:has(+ .wp-block-latest-comments),
.mg-widget.widget_block h3:has(+ .wp-block-latest-comments),
.mg-widget.widget_block h4:has(+ .wp-block-latest-comments),
.mg-widget.widget_block h5:has(+ .wp-block-latest-comments),
.mg-widget.widget_block h6:has(+ .wp-block-latest-comments) {
  margin: -9px -20px 14px -20px !important;
  padding: 0 8px 0 15px !important;
  background: rgb(17, 81, 211) !important;
  color: rgb(255, 255, 255) !important;
  height: 40px !important;
  line-height: 40px !important;
  display: inline-block !important;
  position: relative !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}

.mg-widget.widget_block .wp-block-group__inner-container:has(> .wp-block-latest-comments) > .wp-block-heading {
  margin: -9px -20px 14px -20px !important;
  padding: 0 8px 0 15px !important;
  background: rgb(17, 81, 211) !important;
  color: rgb(255, 255, 255) !important;
  height: 40px !important;
  line-height: 40px !important;
  display: inline-block !important;
  position: relative !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}

.mg-widget.widget_block h2:has(+ .wp-block-latest-comments)::before,
.mg-widget.widget_block h3:has(+ .wp-block-latest-comments)::before,
.mg-widget.widget_block h4:has(+ .wp-block-latest-comments)::before,
.mg-widget.widget_block h5:has(+ .wp-block-latest-comments)::before,
.mg-widget.widget_block h6:has(+ .wp-block-latest-comments)::before {
  content: "" !important;
  width: 32px !important;
  position: absolute !important;
  right: -31px !important;
  top: 0 !important;
  height: 40px !important;
  clip-path: polygon(0 0, 0% 100%, 100% 100%) !important;
  background: rgb(17, 81, 211) !important;
}

.mg-widget.widget_block .wp-block-group__inner-container:has(> .wp-block-latest-comments) > .wp-block-heading::before {
  content: "" !important;
  width: 32px !important;
  position: absolute !important;
  right: -31px !important;
  top: 0 !important;
  height: 40px !important;
  clip-path: polygon(0 0, 0% 100%, 100% 100%) !important;
  background: rgb(17, 81, 211) !important;
}

.mg-widget.widget_block h2:has(+ .wp-block-latest-comments)::after,
.mg-widget.widget_block h3:has(+ .wp-block-latest-comments)::after,
.mg-widget.widget_block h4:has(+ .wp-block-latest-comments)::after,
.mg-widget.widget_block h5:has(+ .wp-block-latest-comments)::after,
.mg-widget.widget_block h6:has(+ .wp-block-latest-comments)::after {
  content: "" !important;
  position: absolute !important;
  left: calc(100% + 1px) !important;
  bottom: -2px !important;
  width: 255px !important;
  height: 2px !important;
  background: rgb(17, 81, 211) !important;
}

.mg-widget.widget_block .wp-block-group__inner-container:has(> .wp-block-latest-comments) > .wp-block-heading::after {
  content: "" !important;
  position: absolute !important;
  left: calc(100% + 1px) !important;
  bottom: -2px !important;
  width: 255px !important;
  height: 2px !important;
  background: rgb(17, 81, 211) !important;
}
