/* =====================================================================
   worldsedge - Live Feed and Search restyle (dark, the design's we-post look)

   Restyles markup this theme does not own and must not edit:
     enduser/sportlights/post_loop.php        the feed cards (list and grid)
     enduser/sportlights/post_loop_script.php share popover, read more, comments
     enduser/ajax_data_dashboard.php          the feed wrapper (.sliderrr_spot)
     enduser/mxc_search/*                     the search results screen
   plus this theme's partials/sections/live_feed_section.php, partials/
   search_form.php and partials/feed_categories.php.

   The theme-neutral base for what themes/shared/js/live-feed.js builds
   (autocomplete rows, loading skeleton, liked / revealed states) lives in
   themes/shared/css/live-feed.css; this file only sets its --lf-* tokens to
   the dark palette and adds WorldsEdge-only rules. Nothing here repeats it.

   Those shared views carry light inline colours (style="color:#686868",
   #4c5258, #727cf5, white backgrounds, .text-muted) and their own <style>
   blocks, printed after this file. Rules here are therefore prefixed with
   :root for weight, and use !important only where the shared view uses an
   inline style or an !important of its own.

   Colours come from the theme tokens (--we-*, set in theme.css) with the
   design values as fallbacks; the accent is the portal colour
   (--site_color_g). Minimum font size is 14px.
   ===================================================================== */

/* ---------- 0. Local aliases (fallback once, used everywhere below) ---------- */
:root {
  --wef-bg:        var(--we-bg, #000);
  --wef-panel:     var(--we-panel, rgba(255, 255, 255, .04));
  --wef-panel-2:   var(--we-panel-2, rgba(255, 255, 255, .07));
  --wef-panel-3:   rgba(255, 255, 255, .12);
  --wef-stroke:    var(--we-stroke, rgba(255, 255, 255, .09));
  --wef-stroke-hi: var(--we-line-feed, rgba(214, 58, 249, .4));
  --wef-text:      var(--we-text, #F6F3FB);
  --wef-muted:     var(--we-muted, #A79FB8);
  --wef-soft:      color-mix(in srgb, var(--wef-text) 78%, var(--wef-muted));
  --wef-violet:    var(--we-violet, #7B2FF7);
  --wef-magenta:   var(--we-magenta, #D63AF9);
  --wef-grad:      var(--we-grad, linear-gradient(115deg, #7B2FF7 0%, #D63AF9 55%, #FF7AC6 100%));
  --wef-grad-deep: var(--we-grad-deep, linear-gradient(135deg, #2B2D33 0%, #121316 45%, #000 100%));
  --wef-accent:    var(--wef-magenta);
  --wef-accent-lt: var(--we-link, #DCC8FF);
  --wef-tag-bg:    color-mix(in srgb, var(--wef-violet) 18%, transparent);
  --wef-tag-line:  color-mix(in srgb, var(--wef-violet) 35%, transparent);
  --wef-tag-text:  color-mix(in srgb, var(--wef-violet) 28%, #fff);
  --wef-focus:     color-mix(in srgb, var(--wef-magenta) 60%, transparent);
  --wef-glow:      color-mix(in srgb, var(--wef-magenta) 35%, transparent);
  --wef-popover:   color-mix(in srgb, var(--wef-bg) 88%, #2B2D33);
  --wef-field:     rgba(0, 0, 0, .45);
  --wef-card-bg:   linear-gradient(160deg, rgba(220, 224, 230, .08), rgba(255, 255, 255, .02) 55%);
  --wef-rss:       #FFB86B;
  --wef-display:   var(--we-display, "Sora", "Segoe UI", system-ui, sans-serif);
  --wef-body:      var(--we-body, "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);

  /* themes/shared/css/live-feed.css tokens, dark */
  --lf-text:             var(--wef-text);
  --lf-muted:            var(--wef-muted);
  --lf-accent:           var(--wef-accent);
  --lf-line:             var(--wef-stroke);
  --lf-popover-bg:       var(--wef-popover);
  --lf-popover-border:   var(--wef-stroke);
  --lf-popover-radius:   18px;
  --lf-popover-shadow:   0 24px 60px rgba(0, 0, 0, .6);
  --lf-hover-bg:         var(--wef-panel-2);
  --lf-mark-bg:          color-mix(in srgb, var(--wef-magenta) 30%, transparent);
  --lf-mark-text:        #fff;
  --lf-badge-bg:         var(--wef-tag-bg);
  --lf-badge-border:     var(--wef-tag-line);
  --lf-badge-text:       var(--wef-tag-text);
  --lf-badge-muted-bg:   var(--wef-panel-2);
  --lf-badge-muted-text: var(--wef-muted);
  --lf-skeleton-card-bg: var(--wef-card-bg);
  --lf-skeleton-base:    rgba(255, 255, 255, .05);
  --lf-skeleton-shine:   rgba(255, 255, 255, .11);
  --lf-like:             var(--we-live, #FF5C9A);
}

/* themes/shared/css/dark-search.css colours = this theme's */
:root {
  --ds-bg: var(--wef-bg);
  --ds-panel: var(--wef-panel);
  --ds-panel-2: var(--wef-panel-2);
  --ds-panel-3: var(--wef-panel-3);
  --ds-stroke: var(--wef-stroke);
  --ds-stroke-hi: var(--wef-stroke-hi);
  --ds-text: var(--wef-text);
  --ds-muted: var(--wef-muted);
  --ds-soft: var(--wef-soft);
  --ds-accent: var(--wef-accent);
  --ds-grad: var(--wef-grad);
  --ds-focus: var(--wef-focus);
  --ds-glow: var(--wef-glow);
  --ds-popover: var(--wef-popover);
  --ds-rss: var(--wef-rss);
  --ds-tag-bg: var(--wef-tag-bg);
  --ds-tag-line: var(--wef-tag-line);
  --ds-tag-text: var(--wef-tag-text);
  --ds-card-bg: var(--wef-card-bg);
  --ds-display: var(--wef-display);
  --ds-body: var(--wef-body);
  --ds-violet: var(--wef-violet);
  --ds-magenta: var(--wef-magenta);
  --ds-accent-lt: var(--wef-accent-lt);
  --ds-field: var(--wef-field);
  --ds-grad-deep: var(--wef-grad-deep);
  /* result cards = the design's glow card */
  --ds-card-line: var(--we-line-card, rgba(214, 58, 249, .45));
  --ds-card-hover-shadow: 0 30px 60px rgba(0, 0, 0, .45), 0 0 60px var(--we-glow-card, rgba(123, 47, 247, .18));
}

/* ---------- 1. The Live Feed section (partials/sections/live_feed_section.php) ---------- */
/* The design classes it uses (.we-section-head, .we-panel, .we-card/.we-feat,
   .we-media, .we-muted-label, .we-side-*, .we-sticky, .we-ad*, .we-btn-*) are
   styled once, in theme.css. Only what the platform hooks add is here. */
.we-live-feed .we-load-more > span:empty { display: none; }
.we-live-feed .we-side-ad img { max-width: 100%; height: auto; border-radius: 16px; }

/* ---------- 2. Platform type tabs: moved to themes/shared/css/dark-search.css (theme bit below) ---------- */
:root .we-subtabs .mxc-subtabs { margin-bottom: 0; }

/* ---------- 3. Topic chips (partials/feed_categories.php) ---------- */
/* .we-chip / .we-chips are theme.css. The platform strip differs from the
   design markup: the chips are links, the count is span.badge-count (the
   design uses <small>), and there is a "More Categories" button. */
:root .we-chips .we-chip { display: inline-flex; align-items: center; gap: 4px; line-height: 1.3; text-decoration: none; }
:root .we-chips .we-chip:not(.active):hover { color: var(--we-chip-text); }
:root .we-chips .we-chip .badge-count { color: var(--wef-muted); }
:root .we-chips .we-chip.active .badge-count { color: var(--we-chip-on-sub); }
:root .we-chips .load-more-cats { cursor: pointer; border-style: dashed; color: var(--wef-muted); }
:root .we-chips .load-more-cats:hover { color: #fff; }

/* ---------- 4. Search form (partials/search_form.php) ---------- */
/* .we-input, .we-select and .we-btn-grad are theme.css. */
.we-feed-search .we-input { flex-wrap: nowrap; }
.we-feed-search .we-select:disabled { opacity: .6; }
/* Autocomplete rows: base and colours from themes/shared/css/live-feed.css
   (--lf-* tokens above). WorldsEdge only rounds the rows a little more. */
.we-feed-search .lfs-autocomplete-item { border-radius: 12px; }

/* The legacy form, enduser/theme_includes/live_feed_search_form.php, still
   printed by the /home/activities lists (enduser/landing/news.php). Its inline
   <style> paints a white box, a blue button and light suggestion rows at
   10.5-13.5px - and, being unscoped, also re-lights the suggestion rows of
   this theme's own search dialog on that screen. Restyled as the design's
   pill search; the rows go back to the --lf-* tokens. */
body.theme-worldsedge .live-feed-search:not(.we-feed-search) .live-feed-search__form {
  gap: 8px;
  padding: 6px 6px 6px 18px;
  border: 1px solid var(--wef-stroke);
  border-radius: 999px;
  background: var(--wef-field);
  box-shadow: none;
  transition: border-color .2s;
}
body.theme-worldsedge .live-feed-search:not(.we-feed-search) .live-feed-search__form:focus-within { border-color: var(--wef-focus); }
body.theme-worldsedge .live-feed-search:not(.we-feed-search) .live-feed-search__input-wrap svg { stroke: var(--wef-muted); }
body.theme-worldsedge .live-feed-search:not(.we-feed-search) :is(.live-feed-search__input, .live-feed-search__select) {
  color: var(--wef-text);
  font-size: 15px;
}
body.theme-worldsedge .live-feed-search:not(.we-feed-search) .live-feed-search__input::placeholder { color: var(--wef-muted); }
body.theme-worldsedge .live-feed-search:not(.we-feed-search) .live-feed-search__select option { background: var(--wef-popover); color: var(--wef-text); }
body.theme-worldsedge .live-feed-search:not(.we-feed-search) .live-feed-search__select-wrap { border-color: var(--wef-stroke); }
body.theme-worldsedge .live-feed-search:not(.we-feed-search) .live-feed-search__submit {
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--wef-grad);
  color: #fff;
  font-size: 15px;
  box-shadow: 0 10px 30px var(--wef-glow);
  transition: transform .2s, box-shadow .2s;
}
body.theme-worldsedge .live-feed-search:not(.we-feed-search) .live-feed-search__submit:is(:hover, :focus) {
  background: var(--wef-grad);
  color: #fff;
  transform: translateY(-1px);
}
@media (max-width: 991px) {
  /* The form wraps into rows here (the view's own rule): a pill no longer fits. */
  body.theme-worldsedge .live-feed-search:not(.we-feed-search) .live-feed-search__form {
    padding: 10px 12px;
    border-radius: 20px;
  }
}
body.theme-worldsedge .lfs-autocomplete-list {
  background: var(--lf-popover-bg);
  border-color: var(--lf-popover-border);
}
body.theme-worldsedge .lfs-autocomplete-item {
  color: var(--lf-text);
  font-size: 14px;
}
body.theme-worldsedge .lfs-autocomplete-item:is(:hover, .is-active) { background: var(--lf-hover-bg); }
body.theme-worldsedge .lfs-autocomplete-item :is(.lfs-ac-icon, .lfs-ac-sub) { color: var(--lf-muted); }
body.theme-worldsedge .lfs-autocomplete-item :is(.lfs-ac-sub, .lfs-ac-badge) { font-size: 14px; }
body.theme-worldsedge .lfs-autocomplete-item .lfs-ac-badge {
  background: var(--lf-badge-bg);
  color: var(--lf-badge-text);
}
body.theme-worldsedge .lfs-autocomplete-item :is(.lfs-ac-badge-recent, .lfs-ac-badge-hint) {
  background: var(--lf-badge-muted-bg);
  color: var(--lf-badge-muted-text);
}

/* ---------- 5. Feed wrapper and loading skeleton ---------- */
/* Skeleton base and shimmer: themes/shared/css/live-feed.css (--lf-skeleton-* tokens above). */
:root #ajax_data .sliderrr_spot,
:root .mxc-livefeed-list.row { margin-left: 0; margin-right: 0; }
:root #ajax_data .sliderrr_spot.mt-4 { margin-top: 0 !important; }
:root .skeleton-card { padding-left: 0; padding-right: 0; margin-bottom: 24px; }
/* The placeholder is a Bootstrap .card with border-0 / rounded / p-3 utilities (all !important). */
:root .lf-skeleton-card {
  background: var(--lf-skeleton-card-bg);
  border: 1px solid var(--wef-stroke) !important;
  border-radius: 24px !important;
  padding: 20px 22px !important;
}
:root .lf-skeleton-card .skeleton-avatar { width: 42px; height: 42px; flex-basis: 42px; }
:root .lf-skeleton-card .skeleton-image { border-radius: 16px; }

:root .ad-feed-inline .ad-container img { max-width: 100%; height: auto; border-radius: 16px; }

/* ---------- 6. Feed cards (enduser/sportlights/post_loop.php) = the design's we-post ---------- */
/* The outer column is only spacing; the card itself carries the look. The
   card has an inline `border:none !important; box-shadow:none !important`,
   which no stylesheet can beat, so the border and the inset highlight are
   drawn by ::after. */
:root .post_loop.list_style_posts {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 24px;
}
:root .post_loop > .card.eq_hight {
  --bs-card-bg: transparent;
  --bs-card-color: var(--wef-text);
  position: relative;
  background: var(--wef-card-bg) !important;
  border-radius: 24px !important;
  padding: 20px 22px 6px;
  color: var(--wef-text);
  height: auto;
}
:root .post_loop > .card.eq_hight::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--wef-stroke);
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  pointer-events: none;
  transition: border-color .3s;
}
:root .post_loop > .card.eq_hight:hover::after { border-color: var(--wef-stroke-hi); }
:root .post_loop.grid { margin-bottom: 24px; }

/* Header: author, follow, menu */
:root .post_loop .card-header {
  background: none !important;
  border: 0 !important;
  padding: 0 0 14px !important;
}
:root .post_loop .card-header a { color: var(--wef-text); text-decoration: none; }
:root .post_loop .card-header p {
  color: var(--wef-text) !important;
  font-size: 15px !important;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 2px 10px;
}
:root .post_loop .card-header .text-muted,
:root .post_loop .card-header .tx-11 { color: var(--wef-muted) !important; font-size: 14px !important; font-weight: 400; }
:root .post_loop .img-xs {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--wef-stroke);
  background: var(--wef-panel-2);
}
:root .post_loop .card-header .logoo,
:root .post_loop .card-header img:not(.img-xs) { max-height: 42px; width: auto; }
:root .post_loop .fallow_btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding: 5px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--wef-grad) !important;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--wef-magenta) 35%, transparent);
  color: #fff !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s, background .2s;
}
:root .post_loop .fallow_btn:hover { transform: translateY(-1px); box-shadow: 0 14px 40px color-mix(in srgb, var(--wef-magenta) 55%, transparent); color: #fff !important; }
:root .post_loop .fallow_btn.followed { background: var(--wef-panel-2) !important; border-color: var(--wef-stroke); box-shadow: none; transform: none; color: #fff !important; }
:root .post_loop .card-header .dropdown { display: flex; align-items: center; gap: 6px; }
:root .post_loop .card-header .dropdown > .btn,
:root .post_loop .dot_btn { background: transparent; border: 0; color: var(--wef-muted); }
:root .post_loop .card-header .dropdown > .btn:hover,
:root .post_loop .dot_btn:hover { color: #fff; }
:root .post_loop .dropdown-menu {
  --bs-dropdown-bg: var(--wef-popover);
  background: var(--wef-popover);
  border: 1px solid var(--wef-stroke);
  border-radius: 16px;
  padding: 6px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}
:root .post_loop .dropdown-menu .dropdown-item {
  color: var(--wef-text);
  font-size: 14px;
  border-radius: 10px;
  padding: 8px 12px;
  gap: 8px;
}
:root .post_loop .dropdown-menu .dropdown-item:hover,
:root .post_loop .dropdown-menu .dropdown-item:focus { background: var(--wef-panel-2); color: #fff; }
:root .post_loop .dropdown-menu [style*="727cf5"],
:root .post_loop .dropdown-menu .text-primary { color: var(--wef-accent-lt) !important; }
:root .post_loop .close-expand {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--wef-stroke);
  border-radius: 50%;
  background: var(--wef-panel-2);
  color: #fff;
  cursor: pointer;
}
:root .post_loop .close-expand:hover { background: var(--wef-panel-3); }
:root .post_loop .iconn_fix { border-radius: 999px; padding: 4px 8px; }

/* Badges: news type, contributed by, category, draft (Bootstrap 4 class names the page has no styles for) */
:root .post_loop .badge.badge-primary,
:root .post_loop .badge.badge-primary2,
:root .post_loop .card_content .badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--wef-tag-bg) !important;
  border: 1px solid var(--wef-tag-line) !important;
  border-radius: 999px !important;
  color: var(--wef-tag-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2;
  padding: 5px 12px !important;
  margin: 0 6px 8px 0;
}
:root .post_loop .badge small { font-size: 14px; font-weight: 500; }
:root .post_loop .badge a { color: #fff !important; }
:root .post_loop .badge.badge-danger { background: color-mix(in srgb, #ff4d6d 20%, transparent) !important; border: 1px solid color-mix(in srgb, #ff4d6d 45%, transparent); color: #ffc2cc !important; border-radius: 999px; font-size: 14px; padding: 5px 12px; }

/* Body: media and text */
:root .post_loop .card-body { padding: 0; color: var(--we-body-3); }
:root .post_loop .card-body img.img-fluid { width: 100%; border-radius: 16px; object-fit: cover; }
:root .list_style_posts .card-body .col-md-4 img.img-fluid { aspect-ratio: 5 / 4; height: auto; }
:root .post_loop .v_box { position: relative; border-radius: 16px; overflow: hidden; }
:root .post_loop .play_icon {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  text-align: center;
  transform: translateY(-50%);
  pointer-events: none;
}
:root .post_loop .play_icon img { width: 50px !important; height: auto !important; min-height: 0 !important; aspect-ratio: auto !important; border-radius: 0 !important; }
:root .post_loop .post-location { color: var(--we-loc) !important; font-size: 14px !important; }
:root .post_loop .post-filters { color: var(--wef-muted) !important; font-size: 14px !important; }
:root .post_loop .post-categories,
:root .post_loop .post-categories a,
:root .post_loop .cat-link,
:root .post_loop .nf-link { font-size: 14px; }
:root .post_loop .cat-link,
:root .post_loop .nf-link { color: var(--wef-accent-lt) !important; text-decoration: none; }
:root .post_loop .cat-link:hover,
:root .post_loop .nf-link:hover { color: #fff !important; text-decoration: underline !important; }
:root .post_loop .card_content .text-primary { color: var(--wef-accent-lt) !important; font-size: 14px; }
:root .post_loop .post_titlee,
:root .post_loop .post_titlee a,
:root .post_loop .spotlight-title {
  font-family: var(--wef-display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -.02em;
  color: var(--wef-text) !important;
  text-decoration: none;
}
:root .post_loop .post_titlee a:hover,
:root .post_loop .spotlight-title:hover { color: var(--we-title-hover) !important; }
:root .post_loop .short-content,
:root .post_loop .short-content p,
:root .post_loop .card_content.tx-14,
:root .post_loop .card_content .tx-14 {
  color: var(--we-body-3) !important;
  font-size: 15px !important;
  line-height: 1.65;
}
:root .post_loop .short-content .read-more,
:root .post_loop .card_content .read-more,
:root .post_loop .read-more-ext {
  font-family: var(--wef-body);
  font-weight: 600;
  font-size: 15px !important;
  margin-left: 4px;
  text-decoration: none;
  background: var(--wef-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
}
:root .post_loop mark { background: color-mix(in srgb, var(--wef-magenta) 30%, transparent); color: #fff; padding: 0 2px; border-radius: 3px; }

/* Read More loads the whole article into .full-content */
:root .post_loop .full-content { color: var(--we-body-3); font-size: 16px; line-height: 1.7; }
:root .post_loop .full-content :is(h1, h2, h3, h4, h5, h6) { color: #fff; font-family: var(--wef-display); }
:root .post_loop .full-content a { color: var(--wef-accent-lt); }
:root .post_loop .full-content :is(.ajax_content, .blog-details-wrapper, .blog-post-item, .entry-content, .card) { background: transparent !important; color: inherit; border-color: var(--wef-stroke); }
:root .post_loop .full-content :is(p, span, li, div, td, th, strong, em, b, font)[style*="color"] { color: inherit !important; }
:root .post_loop .full-content [style*="background-color"] { background-color: transparent !important; }
:root .post_loop .full-content img { max-width: 100%; height: auto; border-radius: 12px; }
:root .post_loop .full-content blockquote { border-left: 3px solid var(--wef-accent); padding-left: 16px; color: var(--wef-text); }
:root .post_loop .abs_hide_box svg {
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 50%;
  background: var(--wef-panel-2);
  border: 1px solid var(--wef-stroke);
  color: #fff;
  cursor: pointer;
}

/* Footer: the action row (design .we-actions / .we-act) */
:root .post_loop .card-footer {
  position: relative;
  background: none !important;
  border: 0 !important;
  border-top: 1px solid var(--wef-stroke) !important;
  border-radius: 0 !important;
  margin-top: 18px;
  padding: 8px 0 !important;
}
:root .post_loop .card-footer .post-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px !important;
}
:root .post_loop .card-footer .post-actions > a,
:root .post_loop .card-footer .post-actions > .share-btn2 {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 !important;
  padding: 9px 12px;
  border-radius: 999px;
  background: none;
  color: var(--we-body-2) !important;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, color .2s;
}
:root .post_loop .card-footer .post-actions > a:hover,
:root .post_loop .card-footer .post-actions > .share-btn2:hover { background: var(--wef-panel-2); color: #fff !important; }
:root .post_loop .card-footer .post-actions p {
  margin: 0 !important;
  color: inherit !important;
  font-size: 14px !important;
  line-height: 1.2;
}
:root .post_loop .card-footer .post-actions svg { width: 18px; height: 18px; margin: 0; flex-shrink: 0; }
:root .post_loop .card-footer .post-actions .spinner-border-sm { width: 14px; height: 14px; border-width: .15em; }
/* Liked: heart fill, stroke and pop come from themes/shared/css/live-feed.css (--lf-like);
   the label colour must out-weigh the action-row colour above. */
:root .post_loop .card-footer .post-actions > a.like_count.heartfill,
:root .mxc-spotlight-card .card-footer a.like_count.heartfill { color: var(--lf-like) !important; }

/* Share popover (post_loop_script.php) */
:root .post_loop .share-container {
  background: var(--we-pop-bg) !important;
  border: 1px solid var(--wef-stroke);
  border-radius: 16px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, .6) !important;
  cursor: default;
}
:root .post_loop .share-container::after { border-color: var(--we-pop-bg) transparent transparent transparent !important; }
:root .post_loop .share-container .a2a_kit a {
  color: var(--wef-text) !important;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  padding: 4px 8px;
}
:root .post_loop .share-container .a2a_kit a:hover { background: var(--wef-panel-2); color: #fff !important; }

/* Comments (ajax_detail/load_comments -> enduser/ajax_post_comment.php) */
:root .post_loop .comment-section { color: var(--wef-text); padding-bottom: 16px; font-size: 14px; }
:root .post_loop .comment-section :is(.comments-area, .comments-respond22, .post-author-box, .author-content) { background: transparent !important; color: var(--wef-text); }
:root .post_loop .comment-section :is(h1, h2, h3, h4, h5, .comments-title, .comments-heading) { color: #fff; font-family: var(--wef-display); }
:root .post_loop .comment-section p { color: var(--wef-soft); }
:root .post_loop .comment-section a { color: var(--wef-accent-lt); }
:root .post_loop .comment-section :is(textarea, input[type="text"], input[type="email"]) {
  background: var(--wef-field) !important;
  border: 1px solid var(--wef-stroke) !important;
  border-radius: 14px;
  color: var(--wef-text) !important;
  font-size: 15px;
}
:root .post_loop .comment-section :is(textarea, input)::placeholder { color: var(--wef-muted); }
:root .post_loop .comment-section :is(textarea, input):focus { border-color: var(--wef-focus) !important; box-shadow: none; outline: 0; }
:root .post_loop .comment-section :is(.btn, button[type="submit"]) { border-radius: 999px; }
:root .post_loop .comment-section .author-thumb img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
:root .post_loop .comment-section .dropdown-menu { background: var(--wef-popover); border: 1px solid var(--wef-stroke); }
:root .post_loop .comment-section .dropdown-item { color: var(--wef-text); font-size: 14px; }

/* Grid-style cards (session post_style = grid) */
:root .post_loop.grid .card_content { margin-top: 12px; }
:root .post_loop.grid .card-body > a img.img-fluid,
:root .post_loop.grid .v_box img.v_thumb { aspect-ratio: 16 / 9; height: auto; }

@media (max-width: 767.98px) {
  /* The feed wrapper forces the card body into one row; let it stack. */
  :root .loaded_ajax .list_style_posts .card-body,
  :root .mxc-livefeed-list .list_style_posts .card-body { flex-wrap: wrap; flex-direction: column; }
  :root .list_style_posts .card-body .col-md-4 img.img-fluid { aspect-ratio: 16 / 9; }
  :root .post_loop > .card.eq_hight { padding: 16px 16px 4px; border-radius: 20px !important; }
  :root .post_loop .post_titlee,
  :root .post_loop .post_titlee a,
  :root .post_loop .spotlight-title { font-size: 19px; }
  :root .post_loop .card-footer .post-actions > a,
  :root .post_loop .card-footer .post-actions > .share-btn2 { padding: 9px 10px; }
  :root .post_loop .fallow_btn { padding: 4px 11px; }
}

/* ---------- 7. Search results screen: moved to themes/shared/css/dark-search.css ---------- */

/* ---------- 8. Phones ---------- */
/* The design's own breakpoints for the we-* classes are in theme.css; these
   cover the platform markup only. */
@media (max-width: 767.98px) {
  :root .mxc-subtabs {
    width: 100%;
    border-radius: 18px;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
    mask-image: linear-gradient(90deg, #000 85%, transparent);
    padding-right: 28px;
  }
  :root .mxc-search-form .form-inline { border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  :root :is(.mxc-spotlight-card, .mxc-profile-card, .mxc-newsroom-card) { transition: none; }
  :root :is(.mxc-spotlight-card, .mxc-profile-card, .mxc-newsroom-card):hover { transform: none; }
}

/* Category chips: a global inline rule (body .category-filter-nav a) paints
   every category link white with a shadow and out-weighs .we-chip. Scoped to
   this theme so the chips keep the design's glass look. */
body.theme-worldsedge .category-filter-nav a.we-chip{background:var(--we-panel);color:var(--we-chip-text);border:1px solid var(--we-stroke);box-shadow:none;
  /* the same inline block sizes every category link 16px/600 with 11px 20px padding: the design's chip size */
  font-size:14px;font-weight:500;padding:7px 13px;line-height:1.3;gap:3px;border-radius:999px}
/* The same inline block also forces the hovered / active link AND its spans to
   --site_font_color_g with !important (white text on the white active chip): the
   design's chip colours are held with !important here. */
body.theme-worldsedge .category-filter-nav a.we-chip:hover{background:var(--we-panel);color:var(--we-chip-text)!important;border-color:var(--we-line-hover)}
body.theme-worldsedge .category-filter-nav a.we-chip:not(.active):hover .badge-count{color:var(--we-muted)!important}
body.theme-worldsedge .category-filter-nav a.we-chip.active,body.theme-worldsedge .category-filter-nav a.we-chip.active:hover{background:#fff;border-color:#fff;color:var(--we-chip-on-text)!important}
body.theme-worldsedge .category-filter-nav a.we-chip.active span,body.theme-worldsedge .category-filter-nav a.we-chip.active .badge-count{color:var(--we-chip-on-sub)!important}

/* Feed cards: the "..." post menu is hidden on this theme (owner request) -
   its shared markup is Bootstrap 4 (data-toggle) and does not open under the
   theme's Bootstrap 5 anyway. */
body.theme-worldsedge button[id^="dropdownMenuButton"]:has(.feather-more-horizontal){display:none!important}

/* Feed cards: title at most 2 lines, description at most 3, with an ellipsis
   (owner rule). The description's "Read More" link sits INSIDE the clamped
   paragraph in the shared markup; theme.js moves it out, after the paragraph,
   so the clamp never hides it and the expand still works. */
body.theme-worldsedge .post_loop .post_titlee .spotlight-title{display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.theme-worldsedge .post_loop .short-content > p,
body.theme-worldsedge .post_loop .card_content:not(.short-content){display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* Read More = the design's .we-readbtn: gradient text, no pill, on its own line under the text. */
body.theme-worldsedge .post_loop .short-content > .read-more,body.theme-worldsedge .post_loop .card_content .read-more,body.theme-worldsedge .post_loop .read-more-ext{display:inline-block;margin-top:8px;padding:0!important;border:0!important;border-radius:0;min-height:0;background:var(--we-grad)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:transparent!important;font-weight:600;font-size:15px;text-decoration:none;box-shadow:none}
body.theme-worldsedge .post_loop .short-content > .read-more:hover,body.theme-worldsedge .post_loop .card_content .read-more:hover,body.theme-worldsedge .post_loop .read-more-ext:hover{opacity:.85;background:var(--we-grad)!important;-webkit-background-clip:text!important;background-clip:text!important}

/* The "back to the top of this post" arrow: bigger and clearer on this theme */
body.theme-worldsedge .abs_hide_box .hide_post_details svg{width:56px!important;height:56px!important;padding:14px!important;border-radius:50%;background:var(--we-grad)!important;border:0!important;color:#fff!important;box-shadow:0 10px 30px rgba(0,0,0,.45)}


/* ---------- The activities / category feed (enduser/themes/worldsedge/news.php) ---------- */
/* /category/<name>-<id>, /filter/..., /home/activities/all: the page title and
   type pills (shared landing/news_top.php, styled in screens.css), then the
   feed beside the Featured Content aside (partials/feed_sidebar.php, the same
   aside as the home Live Feed). The feed and aside classes are the home
   section's; only the page's own spacing is here. */
.we-activities .we-activities-feed {
  margin-top: clamp(20px, 3vw, 40px);
  padding-bottom: clamp(40px, 6vw, 80px);
}
/* The two column headings read as a pair: the feed's matches .we-side-title. */
.we-activities .we-activities-head h2 {
  font-size: clamp(26px, 2.6vw, 34px);
}


/* Share popover: an even 3-column grid, each icon and label centred on one line
   (the add-to-any default style aligns the label to the icon's top edge). */
body.theme-worldsedge .post_loop .share-container{padding:14px!important;max-width:none;width:max-content}
body.theme-worldsedge .post_loop .share-container .a2a_kit{display:grid!important;grid-template-columns:repeat(3,minmax(0,auto));gap:6px!important;justify-content:start}
body.theme-worldsedge .post_loop .share-container .a2a_kit a{display:flex!important;align-items:center;gap:10px;margin:0!important;padding:8px 12px!important;line-height:1.2!important;float:none!important;white-space:nowrap;text-align:left}
body.theme-worldsedge .post_loop .share-container .a2a_kit a .a2a_svg{margin:0!important;flex:0 0 auto;width:28px!important;height:28px!important;border-radius:7px;vertical-align:middle}
@media (max-width:575.98px){body.theme-worldsedge .post_loop .share-container .a2a_kit{grid-template-columns:repeat(2,minmax(0,auto))}}
/* Load More under the feed on the activities / single-type pages: clear space
   above it (owner: it sat flush against the last card), centred like home. */
.we-activities .we-load-more-wrap {
  margin-top: 32px;
  display: flex;
  justify-content: center;
}
/* A news type this portal hides (/home/activities/<hidden type>): no feed,
   just a note and a way back to the Live Feed. */
.we-activities .we-feed-empty {
  text-align: center;
}
.we-activities .we-feed-empty p {
  margin: 0 0 20px;
  color: var(--we-muted);
  font-size: 16px;
}
/* The empty-feed note live-feed.js adds when a feed has no posts. */
.we-feed-posts .lf-feed-empty {
  margin: 0;
  padding: 32px 24px;
  border: 1px dashed var(--we-stroke);
  border-radius: 22px;
  color: var(--we-muted);
  font-size: 16px;
  text-align: center;
}