/* ==========================================================================
   UNITY CHRIST DESIGN SYSTEM  ·  v2  ·  2026-07-30
   --------------------------------------------------------------------------
   Single source of truth for colour, elevation, radius, spacing, type, motion.

   Load order this block assumes (_head.tpl:82-90):
     1. node_modules/bootstrap/dist/css/bootstrap.min.css   (5.3.3, --bs-*)
     2. css/style.min.css   BASE stylesheet (stock Sngine/elengine, --body-*)
     3. css/style.css       THIS overlay  (--uc-*)   <-- you are here

   style.min.css is NOT a minification of this file. It is an independent
   ~160 KB base sheet. Never regenerate it.

   LAYER 5 bridges Bootstrap's --bs-x tokens and the base sheet's --body-x and
   --link-color onto the Unity palette, so those layers render in-brand
   natively instead of being fought selector-by-selector with !important.

   Dark mode is driven by the body.night-mode CLASS (not prefers-color-scheme).
   Component rules must never hardcode a dark value - they consume semantic
   tokens which are re-bound wholesale in LAYER 6.

   !! MIRROR CONTRACT !!
   This entire block (down to the "END DESIGN SYSTEM" marker) is duplicated
   verbatim into css/style.rtl.css, because style.rtl.css is an independent
   document that loads for RTL languages and would otherwise have NO --uc-*
   tokens at all. scripts/test-unity-design-tokens-contract.php asserts the two
   copies stay byte-identical. Edit here, then paste there - or the test fails.
   ========================================================================== */


/* ===== LAYER 1 - PRIMITIVES (ramps; only LAYER 2 may reference these) ===== */
:root {
    /* Brand blue */
    --uc-blue-50: #eff6ff;
    --uc-blue-100: #dbeafe;
    --uc-blue-200: #bfdbfe;
    --uc-blue-300: #93c5fd;
    --uc-blue-400: #60a5fa;
    --uc-blue-500: #3b82f6;
    --uc-blue-600: #2563eb;
    --uc-blue-700: #1d4ed8;
    --uc-blue-800: #1e40af;

    /* Neutrals - cool-tinted to sit under the #202833 ink */
    --uc-gray-0: #ffffff;
    --uc-gray-25: #fafbfc;
    --uc-gray-50: #f5f6f7;
    --uc-gray-100: #eef0f3;
    --uc-gray-200: #e8ebef;
    --uc-gray-300: #d6dbe1;
    --uc-gray-400: #b3bac3;
    --uc-gray-500: #8f959d;
    --uc-gray-600: #656e79;
    --uc-gray-700: #454d58;
    --uc-gray-800: #2c343f;
    --uc-gray-900: #202833;

    /* Accent - the devotional gold, given a full ramp */
    --uc-gold-100: #f7efdc;
    --uc-gold-300: #e2c98d;
    --uc-gold-500: #c8a45a;
    --uc-gold-700: #9a7a2e;
    --uc-gold-900: #7a5a12;

    /* Status */
    --uc-green-50: #ecfdf3;
    --uc-green-500: #16a34a;
    --uc-green-700: #15803d;
    --uc-amber-50: #fffbeb;
    --uc-amber-500: #d97706;
    --uc-amber-700: #b45309;
    --uc-red-50: #fff1f2;
    --uc-red-500: #dc3545;
    --uc-red-600: #b02a37;
}


/* ===== LAYER 2 - SEMANTIC TOKENS (what components consume) =====
   Contrast ratios are measured against the surface each token is used on. */
:root {
    /* Surfaces - a real elevation ladder, not one flat white */
    --uc-bg: var(--uc-gray-50);              /* app canvas                   */
    --uc-surface: var(--uc-gray-0);          /* cards, panels                */
    --uc-surface-soft: var(--uc-gray-25);    /* nested blocks inside a card  */
    --uc-surface-sunken: var(--uc-gray-100); /* inputs, wells, quoted posts  */
    --uc-surface-hover: var(--uc-gray-50);   /* list-row / menu-item hover   */

    /* Text */
    --uc-text: var(--uc-gray-900);           /* 14.9:1 on white              */
    --uc-text-strong: #12181f;               /* headings                     */
    --uc-muted: var(--uc-gray-600);          /*  5.17:1 on white - AA pass.
                                                was #6f7883 = 4.48:1, which
                                                missed AA for normal text.   */
    --uc-text-subtle: var(--uc-gray-500);    /* decorative only, never copy  */
    --uc-text-on-brand: #ffffff;             /*  5.17:1 on --uc-primary      */

    /* Borders - two tiers; WCAG 1.4.11 needs 3:1 on real control edges */
    --uc-border: var(--uc-gray-200);         /* hairline separators          */
    --uc-border-strong: var(--uc-gray-300);  /* card edge on hover           */
    --uc-border-input: var(--uc-gray-500);   /* >=3:1 - form control edges   */

    /* Interactive */
    --uc-primary: var(--uc-blue-600);
    --uc-primary-hover: var(--uc-blue-700);
    --uc-primary-strong: var(--uc-blue-800);
    --uc-primary-soft: var(--uc-blue-50);
    --uc-primary-soft-strong: var(--uc-blue-100);
    --uc-primary-border: var(--uc-blue-200);
    --uc-primary-rgb: 37, 99, 235;

    /* Accent - decorative fills plus a readable ink pair */
    --uc-accent: var(--uc-gold-500);         /* 2.36:1 - fills/borders ONLY  */
    --uc-accent-soft: var(--uc-gold-100);
    --uc-accent-border: var(--uc-gold-300);
    --uc-accent-ink: var(--uc-gold-900);     /* 6.37:1 - gold TEXT           */

    /* Page-header banner. Its own gradient pair per mode: deriving it from
       --uc-primary would INVERT it in dark mode (primary becomes blue-400
       there), turning a deep brand banner into a bright glare panel. */
    --uc-page-head-bg: linear-gradient(135deg, var(--uc-blue-600), var(--uc-blue-800));
    --uc-page-head-ink: #ffffff;

    /* Status triplets: fill / tint / ink */
    --uc-success: var(--uc-green-500);
    --uc-success-soft: var(--uc-green-50);
    --uc-success-ink: var(--uc-green-700);
    --uc-warning: var(--uc-amber-500);
    --uc-warning-soft: var(--uc-amber-50);
    --uc-warning-ink: var(--uc-amber-700);
    --uc-danger: var(--uc-red-500);
    --uc-danger-hover: var(--uc-red-600);
    --uc-danger-soft: var(--uc-red-50);

    /* Compatibility aliases - keep pre-existing Unity rules alive while
       components migrate. Do not author NEW rules against these. */
    --uc-coral: var(--uc-primary);
    --uc-coral-soft: var(--uc-primary-soft);
    --uc-gold: var(--uc-accent);
}


/* ===== LAYER 3 - FORM: elevation, radius, spacing, motion ===== */
:root {
    /* Shadows - layered: tight contact shadow + broad ambient */
    --uc-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --uc-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 2px 8px rgba(16, 24, 40, .05);
    --uc-shadow-md: 0 2px 4px rgba(16, 24, 40, .06), 0 8px 20px rgba(16, 24, 40, .08);
    --uc-shadow-lg: 0 4px 8px rgba(16, 24, 40, .06), 0 16px 32px rgba(16, 24, 40, .10);
    --uc-shadow-xl: 0 8px 16px rgba(16, 24, 40, .08), 0 28px 56px rgba(16, 24, 40, .14);
    --uc-shadow: var(--uc-shadow-sm);        /* legacy alias                 */
    --uc-ring: 0 0 0 3px rgba(var(--uc-primary-rgb), .32);

    /* Radius - tiered by element size. -lg is pinned to today's 16px so
       nothing shifts visually on install. */
    --uc-radius-xs: 6px;                     /* badges, chips, tags          */
    --uc-radius-sm: 10px;                    /* buttons, inputs, controls    */
    --uc-radius-md: 14px;                    /* media thumbs, inner surfaces */
    --uc-radius-lg: 16px;                    /* cards, panels, widgets       */
    --uc-radius-xl: 24px;                    /* modals, sheets, hero         */
    --uc-radius-pill: 999px;
    /* Header controls resolved to 32 / 44 / 40 / 44px with four different
       radii. One height, one radius family, one row. */
    --uc-control-h: 40px;
    --uc-radius: var(--uc-radius-lg);        /* legacy alias                 */

    /* Card rhythm */
    --uc-pad-card: 1.25rem;                  /* 20px                         */
    --uc-pad-tight: .875rem;                 /* 14px - compact cards, rows   */
    --uc-gap-card: 1rem;
    --uc-gap-stack: .75rem;

    /* Motion */
    --uc-dur-fast: 120ms;
    --uc-dur: 180ms;
    --uc-dur-slow: 280ms;
    --uc-ease: cubic-bezier(.2, .8, .3, 1);
    --uc-ease-spring: cubic-bezier(.34, 1.4, .64, 1);
}


/* ===== LAYER 4 - TYPOGRAPHY =====
   Poppins is already fetched in 5 weights by _head.tpl and the BASE sheet sets
   `body { font-family: var(--body-font-family) }` = Poppins. Until now this
   overlay re-declared body with a system stack, so the font was downloaded and
   never used. Routing the family through one token stops that recurring. */
:root {
    --uc-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --uc-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Scale - 15px UI base (matches the base sheet's body font-size exactly,
       so the scale drops in with zero reflow), major-third at the display end */
    --uc-text-2xs: .6875rem;                 /* 11 - timestamps, meta        */
    --uc-text-xs: .75rem;                    /* 12 - badges, captions        */
    --uc-text-sm: .8125rem;                  /* 13 - secondary UI            */
    --uc-text-base: .9375rem;                /* 15 - body / post copy        */
    --uc-text-md: 1rem;                      /* 16 - emphasised body         */
    --uc-text-lg: 1.125rem;                  /* 18 - card titles             */
    --uc-text-xl: 1.375rem;                  /* 22 - section headings        */
    --uc-text-2xl: 1.75rem;                  /* 28 - page titles             */
    --uc-text-3xl: 2.25rem;                  /* 36 - hero                    */

    --uc-leading-tight: 1.25;                /* headings                     */
    --uc-leading-snug: 1.4;                  /* UI chrome                    */
    --uc-leading-normal: 1.6;                /* body copy                    */
    --uc-leading-loose: 1.75;

    --uc-tracking-tight: -.02em;             /* >=28px                       */
    --uc-tracking-snug: -.011em;             /* 18-22px                      */
    --uc-tracking-normal: 0;
    --uc-tracking-wide: .04em;               /* uppercase overlines/badges   */

    --uc-weight-normal: 400;
    --uc-weight-medium: 500;
    --uc-weight-semi: 600;
    --uc-weight-bold: 700;

    --uc-measure: 65ch;                      /* max line length for prose    */
}


/* ===== LAYER 5 - BRIDGE =====
   Re-point the two foreign token systems at the Unity palette. Every line here
   is an !important we get to delete elsewhere. */

/* --- Bootstrap 5.3.3 root-level tokens --- */
:root {
    --bs-body-bg: var(--uc-bg);
    --bs-body-color: var(--uc-text);
    --bs-border-color: var(--uc-border);
    --bs-border-radius: var(--uc-radius-sm);
    --bs-border-radius-sm: var(--uc-radius-xs);
    --bs-border-radius-lg: var(--uc-radius-lg);
    --bs-border-radius-xl: var(--uc-radius-xl);
    --bs-border-radius-pill: var(--uc-radius-pill);
    --bs-link-color: var(--uc-primary);
    --bs-link-hover-color: var(--uc-primary-hover);
    --bs-primary: var(--uc-primary);
    --bs-primary-rgb: var(--uc-primary-rgb);
    --bs-danger: var(--uc-danger);
    --bs-success: var(--uc-success);
    --bs-warning: var(--uc-warning);
    --bs-focus-ring-color: rgba(var(--uc-primary-rgb), .32);
    --bs-box-shadow: var(--uc-shadow-md);
    --bs-box-shadow-sm: var(--uc-shadow-sm);
    --bs-box-shadow-lg: var(--uc-shadow-lg);
    --bs-font-sans-serif: var(--uc-font);
}

/* Bootstrap's DIST css hardcodes component-scoped variables - verified:
   `.btn-primary{--bs-btn-bg:#0d6efd;...}`. Setting --bs-primary alone does NOT
   retarget them. These same-specificity overrides do, with no !important. */
.btn-primary {
    --bs-btn-bg: var(--uc-primary);
    --bs-btn-border-color: var(--uc-primary);
    --bs-btn-hover-bg: var(--uc-primary-hover);
    --bs-btn-hover-border-color: var(--uc-primary-hover);
    --bs-btn-active-bg: var(--uc-primary-strong);
    --bs-btn-active-border-color: var(--uc-primary-strong);
    --bs-btn-disabled-bg: var(--uc-primary);
    --bs-btn-disabled-border-color: var(--uc-primary);
    --bs-btn-focus-shadow-rgb: var(--uc-primary-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--uc-primary);
    --bs-btn-border-color: var(--uc-primary-border);
    --bs-btn-hover-bg: var(--uc-primary);
    --bs-btn-hover-border-color: var(--uc-primary);
    --bs-btn-active-bg: var(--uc-primary-hover);
    --bs-btn-active-border-color: var(--uc-primary-hover);
    --bs-btn-focus-shadow-rgb: var(--uc-primary-rgb);
}

.btn-danger {
    --bs-btn-bg: var(--uc-danger);
    --bs-btn-border-color: var(--uc-danger);
    --bs-btn-hover-bg: var(--uc-danger-hover);
    --bs-btn-hover-border-color: var(--uc-danger-hover);
    --bs-btn-active-bg: var(--uc-danger-hover);
    --bs-btn-active-border-color: var(--uc-danger-hover);
}

.btn-success {
    --bs-btn-bg: var(--uc-success);
    --bs-btn-border-color: var(--uc-success);
    --bs-btn-hover-bg: var(--uc-success-ink);
    --bs-btn-hover-border-color: var(--uc-success-ink);
    --bs-btn-active-bg: var(--uc-success-ink);
    --bs-btn-active-border-color: var(--uc-success-ink);
}

.card {
    --bs-card-bg: var(--uc-surface);
    --bs-card-color: var(--uc-text);
    --bs-card-border-color: var(--uc-border);
    --bs-card-border-radius: var(--uc-radius-lg);
    --bs-card-inner-border-radius: var(--uc-radius-md);
    --bs-card-spacer-x: var(--uc-pad-card);
    --bs-card-spacer-y: var(--uc-pad-card);
    --bs-card-cap-bg: transparent;
}

.dropdown-menu {
    --bs-dropdown-bg: var(--uc-surface);
    --bs-dropdown-color: var(--uc-text);
    --bs-dropdown-border-color: var(--uc-border);
    --bs-dropdown-border-radius: var(--uc-radius-md);
    --bs-dropdown-link-color: var(--uc-text);
    --bs-dropdown-link-hover-bg: var(--uc-surface-hover);
    --bs-dropdown-link-hover-color: var(--uc-text);
    --bs-dropdown-link-active-bg: var(--uc-primary-soft);
    --bs-dropdown-link-active-color: var(--uc-primary-strong);
}

.modal-content {
    --bs-modal-bg: var(--uc-surface);
    --bs-modal-color: var(--uc-text);
    --bs-modal-border-color: var(--uc-border);
    --bs-modal-border-radius: var(--uc-radius-xl);
    --bs-modal-header-border-color: var(--uc-border);
    --bs-modal-footer-border-color: var(--uc-border);
}

.tooltip {
    --bs-tooltip-bg: var(--uc-gray-800);
    --bs-tooltip-color: var(--uc-gray-0);
    --bs-tooltip-border-radius: var(--uc-radius-xs);
}

/* --- Sngine BASE sheet (style.min.css) tokens ---
   The base declares these and then consumes them in its own `body` rule; the
   overlay never used to touch them, so the base's stock indigo #5e72e4 was a
   third brand blue competing with Bootstrap's #0d6efd and Unity's #2563eb. */
:root {
    --body-font-family: var(--uc-font);
    --body-bg-color: var(--uc-bg);
    --body-color: var(--uc-text);
    --link-color: var(--uc-primary);
    --header-bg-color: var(--uc-surface);
    --plyr-color-main: var(--uc-primary);
}


/* ===== LAYER 6 - DARK THEME =====
   Re-binds LAYER 2/3 only. No component rule may reference a dark value. */
body.night-mode {
    /* Surfaces */
    --uc-bg: #17191d;
    --uc-surface: #23262b;
    --uc-surface-soft: #292d32;
    --uc-surface-sunken: #1e2126;
    --uc-surface-hover: #2b2f35;

    /* Text */
    --uc-text: #e9edf2;
    --uc-text-strong: #f5f8fb;
    --uc-muted: #a4adb8;
    --uc-text-subtle: #7d8794;
    --uc-text-on-brand: #0b1220;

    /* Borders */
    --uc-border: #383d45;
    --uc-border-strong: #454c56;
    --uc-border-input: #5a626d;

    /* Interactive - blue-400 scores 5.97:1 on #23262b */
    --uc-primary: var(--uc-blue-400);
    --uc-primary-hover: var(--uc-blue-300);
    --uc-primary-strong: var(--uc-blue-200);
    --uc-primary-soft: rgba(59, 130, 246, .18);
    --uc-primary-soft-strong: rgba(59, 130, 246, .28);
    --uc-primary-border: rgba(96, 165, 250, .42);
    --uc-primary-rgb: 96, 165, 250;

    /* Accent */
    --uc-accent: var(--uc-gold-500);
    --uc-accent-soft: rgba(200, 164, 90, .16);
    --uc-accent-border: rgba(200, 164, 90, .42);
    --uc-accent-ink: var(--uc-gold-300);

    /* Deep navy banner, near-white ink - stays a surface, never a light panel */
    --uc-page-head-bg: linear-gradient(135deg, #1e3a8a, #172554);
    --uc-page-head-ink: #e9edf2;

    /* Status */
    --uc-success-soft: rgba(22, 163, 74, .16);
    --uc-success-ink: #4ade80;
    --uc-warning-soft: rgba(217, 119, 6, .16);
    --uc-warning-ink: #fbbf24;
    --uc-danger-soft: rgba(220, 53, 69, .16);

    /* Elevation reads as depth, not haze, on dark */
    --uc-shadow-xs: 0 1px 2px rgba(0, 0, 0, .28);
    --uc-shadow-sm: 0 1px 2px rgba(0, 0, 0, .32), 0 2px 8px rgba(0, 0, 0, .24);
    --uc-shadow-md: 0 2px 4px rgba(0, 0, 0, .32), 0 8px 20px rgba(0, 0, 0, .30);
    --uc-shadow-lg: 0 4px 8px rgba(0, 0, 0, .34), 0 16px 32px rgba(0, 0, 0, .36);
    --uc-shadow-xl: 0 8px 16px rgba(0, 0, 0, .36), 0 28px 56px rgba(0, 0, 0, .44);
    --uc-shadow: var(--uc-shadow-sm);

    /* Bridge the BASE sheet's own dark tokens */
    --body-bg-color-dark: var(--uc-bg);
    --body-color-dark: var(--uc-text);
    --header-bg-color-dark: var(--uc-surface);
    --card-dark-color: var(--uc-surface);
    --card-dark-divider: var(--uc-border);
    --card-dark-hover: var(--uc-surface-hover);
    --card-dark-input: var(--uc-surface-sunken);
    --card-dark-input-color: var(--uc-text);

    /* Bridge Bootstrap */
    --bs-body-bg: var(--uc-bg);
    --bs-body-color: var(--uc-text);
    --bs-border-color: var(--uc-border);
    --bs-link-color: var(--uc-primary);
    --bs-link-hover-color: var(--uc-primary-hover);
    --bs-emphasis-color: var(--uc-text-strong);
    --bs-secondary-color: var(--uc-muted);
}


/* ===== LAYER 7 - RESPONSIVE + MOTION PREFERENCE ===== */
@media (max-width: 575.98px) {
    :root {
        --uc-pad-card: 1rem;
        --uc-pad-tight: .75rem;
        --uc-radius-lg: 14px;
        --uc-radius-xl: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --uc-dur-fast: 0ms;
        --uc-dur: 0ms;
        --uc-dur-slow: 0ms;
    }
}


/* ===== LAYER 8 - THE CARD CONTRACT =====
   Every card, widget, panel, checkout box and product tile resolves to this.
   Variants change TOKENS, never structure. */
.uc-card {
    background: var(--uc-surface);
    border: 1px solid var(--uc-border);
    border-radius: var(--uc-radius-lg);
    box-shadow: var(--uc-shadow-sm);
    padding: var(--uc-pad-card);
    color: var(--uc-text);
    transition: box-shadow var(--uc-dur) var(--uc-ease),
                border-color var(--uc-dur) var(--uc-ease),
                transform var(--uc-dur) var(--uc-ease);
}

.uc-card--flat { box-shadow: none; }
.uc-card--raised { box-shadow: var(--uc-shadow-md); }
.uc-card--tight { padding: var(--uc-pad-tight); }
.uc-card--flush { padding: 0; overflow: hidden; }
.uc-card--inset {
    background: var(--uc-surface-soft);
    border-radius: var(--uc-radius-md);
    box-shadow: none;
}
.uc-card--brand {
    border-color: var(--uc-primary-border);
    background: var(--uc-primary-soft);
}
.uc-card--accent {
    border-color: var(--uc-accent-border);
    background: var(--uc-accent-soft);
}

/* Interaction is opt-in, so static panels never twitch under the cursor. */
.uc-card--interactive { cursor: pointer; }
.uc-card--interactive:hover {
    transform: translateY(-2px);
    box-shadow: var(--uc-shadow-md);
    border-color: var(--uc-border-strong);
}
.uc-card--interactive:focus-within {
    box-shadow: var(--uc-shadow-md), var(--uc-ring);
    border-color: var(--uc-primary);
}
.uc-card--interactive:active { transform: translateY(0); }

/* Touch devices resolve :hover on tap and would leave the card stuck lifted. */
@media (hover: none) {
    .uc-card--interactive:hover { transform: none; box-shadow: var(--uc-shadow-sm); }
}

/* --- Card anatomy --- */
.uc-card__header {
    display: flex;
    align-items: center;
    gap: var(--uc-gap-stack);
    margin-bottom: var(--uc-gap-card);
}
.uc-card__title {
    font-size: var(--uc-text-lg);
    font-weight: var(--uc-weight-semi);
    line-height: var(--uc-leading-tight);
    letter-spacing: var(--uc-tracking-snug);
    color: var(--uc-text-strong);
    margin: 0;
}
.uc-card__subtitle {
    font-size: var(--uc-text-sm);
    line-height: var(--uc-leading-snug);
    color: var(--uc-muted);
    margin: 0;
}
.uc-card__divider {
    border: 0;
    border-top: 1px solid var(--uc-border);
    margin: var(--uc-gap-card) calc(var(--uc-pad-card) * -1);
}
.uc-card__footer {
    display: flex;
    align-items: center;
    gap: var(--uc-gap-stack);
    margin-top: var(--uc-gap-card);
    padding-top: var(--uc-gap-card);
    border-top: 1px solid var(--uc-border);
}
.uc-card__media {
    display: block;
    width: 100%;
    background: var(--uc-surface-sunken);
}

/* The base sheet kills focus outlines in several places; restore them here. */
.uc-card a:focus-visible,
.uc-card button:focus-visible,
.uc-card [tabindex]:focus-visible {
    outline: 2px solid var(--uc-primary);
    outline-offset: 2px;
    border-radius: var(--uc-radius-xs);
}


/* ===== LAYER 9 - SHARED PRIMITIVES used across card families ===== */
.uc-badge {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .1875rem .5rem;
    border-radius: var(--uc-radius-xs);
    font-size: var(--uc-text-xs);
    font-weight: var(--uc-weight-semi);
    line-height: var(--uc-leading-snug);
    letter-spacing: var(--uc-tracking-wide);
    background: var(--uc-surface-sunken);
    color: var(--uc-muted);
    border: 1px solid transparent;
    white-space: nowrap;
}
.uc-badge--brand   { background: var(--uc-primary-soft); color: var(--uc-primary-strong); border-color: var(--uc-primary-border); }
.uc-badge--accent  { background: var(--uc-accent-soft);  color: var(--uc-accent-ink);     border-color: var(--uc-accent-border); }
.uc-badge--success { background: var(--uc-success-soft); color: var(--uc-success-ink); }
.uc-badge--warning { background: var(--uc-warning-soft); color: var(--uc-warning-ink); }
.uc-badge--danger  { background: var(--uc-danger-soft);  color: var(--uc-danger); }
.uc-badge--pill    { border-radius: var(--uc-radius-pill); }

.uc-prose {
    font-size: var(--uc-text-base);
    line-height: var(--uc-leading-normal);
    color: var(--uc-text);
    max-width: var(--uc-measure);
    overflow-wrap: break-word;
}
.uc-prose a { color: var(--uc-primary); text-decoration: none; }
.uc-prose a:hover { color: var(--uc-primary-hover); text-decoration: underline; }

.uc-meta {
    font-size: var(--uc-text-2xs);
    line-height: var(--uc-leading-snug);
    color: var(--uc-muted);
}

.uc-price {
    font-size: var(--uc-text-xl);
    font-weight: var(--uc-weight-bold);
    line-height: var(--uc-leading-tight);
    letter-spacing: var(--uc-tracking-snug);
    color: var(--uc-text-strong);
    font-variant-numeric: tabular-nums;
}
.uc-price__was {
    font-size: var(--uc-text-sm);
    font-weight: var(--uc-weight-normal);
    color: var(--uc-text-subtle);
    text-decoration: line-through;
    margin-inline-start: .375rem;
}

/* --- Skip link: visually hidden until it takes keyboard focus ------------ */
.uc-skip-link {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    z-index: 2000;
    padding: .75rem 1.25rem;
    border-radius: 0 0 var(--uc-radius-sm) 0;
    background: var(--uc-primary);
    color: var(--uc-text-on-brand);
    font-size: var(--uc-text-base);
    font-weight: var(--uc-weight-semi);
    text-decoration: none;
    /* translated off-screen rather than display:none, so it stays focusable */
    transform: translateY(-110%);
    transition: transform var(--uc-dur) var(--uc-ease);
}
.uc-skip-link:focus,
.uc-skip-link:focus-visible {
    transform: translateY(0);
    color: var(--uc-text-on-brand);
    outline: 2px solid var(--uc-text-on-brand);
    outline-offset: -4px;
}
/* the landmark is focused programmatically by the skip link, never by tabbing */
#uc-main:focus { outline: none; }

.uc-skeleton {
    background: linear-gradient(90deg,
        var(--uc-surface-sunken) 25%,
        var(--uc-surface-hover) 37%,
        var(--uc-surface-sunken) 63%);
    background-size: 400% 100%;
    animation: uc-shimmer 1.4s ease infinite;
    border-radius: var(--uc-radius-sm);
}
@keyframes uc-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
    .uc-skeleton { animation: none; }
}

/* ========================= END DESIGN SYSTEM ============================= */


/* ===== RESET & BASE ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--uc-font);
    background: var(--uc-bg);
}

/* ===== FONT AWESOME FIX - MUST COME AFTER BODY ===== */
i[class*="fa-"],
[class*="fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", inherit !important;
}

.fa-regular {
    font-weight: 400 !important;
}

.fa-solid {
    font-weight: 900 !important;
}

.fa-brands {
    font-weight: 400 !important;
}

/* Legacy `fa fa-*` icons (old v4/v5 syntax, no fa-solid/fa-regular/fa-brands
   style class) — the FA6 Free kit only ships these glyphs in the "solid"
   (900) weight. Without this they render as an empty box, e.g. the
   Public/Friends/Only Me privacy dropdown icons. */
.fa:not(.fa-regular):not(.fa-solid):not(.fa-brands) {
    font-weight: 900 !important;
}

/* Raw inline SVG icons (Sngine includes the actual <svg> markup from
   images/svg/*.svg with no width/height attributes of their own — every
   icon is wrapped in <div class="svg-container" style="width:Xpx;height:Ypx">
   by __svg_icons.tpl and is meant to be scaled down to fit that box by CSS).
   This base scaling rule used to live only in style.min.css; now that file
   is no longer loaded (it contained stale/conflicting reels CSS), so without
   this rule every such icon renders at its native SVG canvas size (often
   512x512) instead of the small size its wrapper div specifies — e.g. the
   header search icon ballooning to cover the whole feed. */
.svg-container {
    display: inline-block;
    line-height: 0;
}
.svg-container svg {
    width: 100% !important;
    height: 100% !important;
    display: block;
}
/* User confirmed via live DevTools testing that the real icon SVGs (unlike
   simple test shapes) render a few px low within their own box - likely
   from their individual viewBox paddings not being perfectly symmetric.
   Scoped to .main-header only (not the base .svg-container svg rule above)
   so this nudge doesn't ripple out to every icon site-wide - post icons,
   reel icons, sidebar icons, badges etc. keep their own already-tuned
   position untouched. */
.main-header .svg-container svg {
    transform: translateY(-5px) !important;
}

/* The nav icon buttons centre their glyph with flexbox now, so the baseline
   compensation above would push it 5px too high instead of fixing anything. */
.navbar-wrapper > ul > li > a:not(.user-menu) .svg-container svg {
    transform: none !important;
}

/* These three base rules got caught by accident when the "strip every
   reel-related rule out of style.min.css" cleanup ran earlier — the
   cleanup matched on the substring "reel" anywhere in a rule, and these
   happened to sit in the same source neighborhood as reel rules despite
   having nothing to do with reels. Restoring them here: base card
   styling for the "no data" empty-state box (used across many pages,
   including the one this project swapped for a Lottie animation) and
   the lightbox/no-data preview width. */
.no-data { padding: 8px 20px; background: #f7f7f7; border-radius: 10px; font-weight: 500; }
body.night-mode .no-data { background: var(--card-dark-input); }
.lightbox-preview.nodata { width: 100%; }

/* ===== HEADER ===== */
.main-header {
    /* was `#ffffff !important`, which out-specified the base sheet's
       `body.night-mode .main-header` rule and forced the header to stay white
       in dark mode. The token follows the theme. */
    background: var(--uc-surface) !important;
    border-bottom: 1px solid var(--uc-border) !important;
}

/* Navbar wrapper — right side icon buttons */
.navbar-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 100% !important;
}

.navbar-wrapper > ul {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
}

/* ── NAV ICON <li> ──────────────────────────────────────────────────────────
   Sngine sets flex:1 on <li> which makes it grow wider than 40px → oval.
   flex: 0 0 40px prevents all growth/shrink, keeps it exactly 40×40.
   The CIRCLE (background + border-radius) lives on the <a> (not <li>).
   ──────────────────────────────────────────────────────────────────────── */
.navbar-wrapper > ul > li:not(:has(.user-menu)) {
    flex: 0 0 40px !important;
    width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    max-height: 40px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 2px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

/* ── NAV ICON <a> — THE ACTUAL CIRCLE ──────────────────────────────────────
   Icon is wrapped in <div class="svg-container"> (display:inline-block).
   Use display:block + line-height + text-align — Sngine's own technique,
   just corrected: 40px height, 0 margin, 0 padding.
   ──────────────────────────────────────────────────────────────────────── */
.navbar-wrapper > ul > li > a:not(.user-menu) {
    /* Was `display:block` + `line-height:40px`, which sits the SVG on the text
       baseline - below the optical centre. The global `.main-header
       .svg-container svg { transform: translateY(-5px) }` hack existed to drag
       it back up, and had to be cancelled again for the search icon. Real
       centring makes both unnecessary; the nudge is neutralised for these
       buttons just below. */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border-radius: 50% !important;
    /* D9: was a flat grey circle (#e4e6eb) here, which is the actual rule
       winning the cascade over the blue-tint block added to _head.tpl for
       D9 — this selector is more specific (3 elements vs 1), so that other
       rule never took visual effect. Setting the real default here instead
       of fighting it with a separate less-specific override. */
    background-color: var(--uc-primary-soft) !important;
    position: relative !important;
    text-decoration: none !important;
    color: var(--uc-text) !important;
    flex-shrink: 0 !important;
    transition: background-color var(--uc-dur) var(--uc-ease) !important;
    overflow: visible !important;
}

/* Hover used to be the SAME solid #2563eb as the unread-notification state
   below, so hovering any icon looked exactly like "you have notifications" and
   the alert signal was worthless. Hover is now a tint; solid blue is reserved
   for unread, which makes it the loudest thing in the header again. */
.navbar-wrapper > ul > li > a:not(.user-menu):hover {
    background-color: var(--uc-primary-soft-strong) !important;
}
.navbar-wrapper > ul > li > a:not(.user-menu):hover .header-icon *,
.navbar-wrapper > ul > li > a:not(.user-menu):hover .header-icon path,
.navbar-wrapper > ul > li > a:not(.user-menu):hover .header-icon circle,
.navbar-wrapper > ul > li > a:not(.user-menu):hover .header-icon rect,
.navbar-wrapper > ul > li > a:not(.user-menu):hover .header-icon polyline,
.navbar-wrapper > ul > li > a:not(.user-menu):hover .header-icon line,
.navbar-wrapper > ul > li > a:not(.user-menu):hover .header-icon ellipse {
    /* the hover chip is a tint now, so a white glyph would vanish into it */
    fill: var(--uc-primary) !important;
    stroke: var(--uc-primary) !important;
}

/* ── CREATE BUTTON — dots grid, circle shape ─────────────────────────────── */
.navbar-wrapper > ul > li.d-none.d-xxl-block > a {
    background-color: var(--uc-primary-soft) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Crect x='0' y='0' width='6' height='6' rx='1.5' fill='%232563eb'/%3E%3Crect x='9' y='0' width='6' height='6' rx='1.5' fill='%232563eb'/%3E%3Crect x='18' y='0' width='6' height='6' rx='1.5' fill='%232563eb'/%3E%3Crect x='0' y='9' width='6' height='6' rx='1.5' fill='%232563eb'/%3E%3Crect x='9' y='9' width='6' height='6' rx='1.5' fill='%232563eb'/%3E%3Crect x='18' y='9' width='6' height='6' rx='1.5' fill='%232563eb'/%3E%3Crect x='0' y='18' width='6' height='6' rx='1.5' fill='%232563eb'/%3E%3Crect x='9' y='18' width='6' height='6' rx='1.5' fill='%232563eb'/%3E%3Crect x='18' y='18' width='6' height='6' rx='1.5' fill='%232563eb'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 22px 22px !important;
}
.navbar-wrapper > ul > li.d-none.d-xxl-block > a:hover {
    background-color: #2563eb !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Crect x='0' y='0' width='6' height='6' rx='1.5' fill='%23fff'/%3E%3Crect x='9' y='0' width='6' height='6' rx='1.5' fill='%23fff'/%3E%3Crect x='18' y='0' width='6' height='6' rx='1.5' fill='%23fff'/%3E%3Crect x='0' y='9' width='6' height='6' rx='1.5' fill='%23fff'/%3E%3Crect x='9' y='9' width='6' height='6' rx='1.5' fill='%23fff'/%3E%3Crect x='18' y='9' width='6' height='6' rx='1.5' fill='%23fff'/%3E%3Crect x='0' y='18' width='6' height='6' rx='1.5' fill='%23fff'/%3E%3Crect x='9' y='18' width='6' height='6' rx='1.5' fill='%23fff'/%3E%3Crect x='18' y='18' width='6' height='6' rx='1.5' fill='%23fff'/%3E%3C/svg%3E") !important;
}
.navbar-wrapper > ul > li.d-none.d-xxl-block > a *,
.navbar-wrapper > ul > li.d-none.d-xxl-block > a::before,
.navbar-wrapper > ul > li.d-none.d-xxl-block > a::after {
    display: none !important;
}

/* M81: Bootstrap's `.d-xxl-block` (Add/apps grid button) is meant to stay
   hidden below the xxl breakpoint (1400px) via `.d-none`, but our own
   `li:not(:has(.user-menu)) { display:flex !important }` rule above has
   higher specificity than Bootstrap's `.d-none { display:none !important }`
   utility, so it was forcing the Add button to show at every width —
   including real mobile phones, where it doesn't belong. That pushed every
   icon after it (Requests, Messages, Notifications) one slot to the right,
   shoving the Notifications icon off the right edge of the screen. */
@media (max-width: 1399.98px) {
    body .main-header .navbar-wrapper > ul > li.d-xxl-block {
        display: none !important;
    }
}

/* ── NOTIFICATION — solid Unity blue circle + white icon when unread ─────
   Now that the DEFAULT icon background is a light blue tint (D9, above),
   the old "unread" highlight color (#dbeafe) was too close to the new
   default to read as a distinct alert anymore. Bumped to solid blue +
   white icon so an unread notification still clearly stands out. */
.navbar-wrapper li.js_live-notifications:has(.counter.red:not(.x-hidden)) > a {
    background-color: #2563eb !important;
}
.navbar-wrapper li.js_live-notifications:has(.counter.red:not(.x-hidden)) > a .header-icon *,
.navbar-wrapper li.js_live-notifications:has(.counter.red:not(.x-hidden)) > a .header-icon path,
.navbar-wrapper li.js_live-notifications:has(.counter.red:not(.x-hidden)) > a .header-icon circle,
.navbar-wrapper li.js_live-notifications:has(.counter.red:not(.x-hidden)) > a .header-icon polyline,
.navbar-wrapper li.js_live-notifications:has(.counter.red:not(.x-hidden)) > a .header-icon ellipse {
    fill: #fff !important;
    stroke: #fff !important;
}

/* ── SVG ICONS inside nav buttons ───────────────────────────────────────── */
.navbar-wrapper > ul > li > a:not(.user-menu) .header-icon {
    display: inline-block !important;
    width: 22px !important;
    height: 22px !important;
    vertical-align: middle !important;
    pointer-events: none !important;
    line-height: 0 !important;
}
.navbar-wrapper > ul > li > a:not(.user-menu) .header-icon *,
.navbar-wrapper > ul > li > a:not(.user-menu) .header-icon path,
.navbar-wrapper > ul > li > a:not(.user-menu) .header-icon circle,
.navbar-wrapper > ul > li > a:not(.user-menu) .header-icon rect,
.navbar-wrapper > ul > li > a:not(.user-menu) .header-icon polyline,
.navbar-wrapper > ul > li > a:not(.user-menu) .header-icon line,
.navbar-wrapper > ul > li > a:not(.user-menu) .header-icon ellipse {
    fill: #2563eb !important;
    stroke: #2563eb !important;
}

/* ── UNREAD BADGE ────────────────────────────────────────────────────────── */
.navbar-wrapper .counter.red {
    position: absolute !important;
    top: -2px !important;
    right: -2px !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 4px !important;
    background: #2563eb !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 9px !important;
    border: 2px solid #fff !important;
    line-height: 1 !important;
    box-shadow: none !important;
    text-align: center !important;
    z-index: 2 !important;
}
.navbar-wrapper .counter.red:not(.x-hidden) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Hide Bootstrap dropdown caret arrow */
.navbar-wrapper > ul > li > a:not(.user-menu).dropdown-toggle::after {
    display: none !important;
}

/* ===== USER MENU BUTTON (avatar + name + caret) ===== */
.navbar-wrapper .user-menu {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: var(--uc-control-h) !important;
    padding: 0 12px 0 2px !important;
    border-radius: var(--uc-radius-pill) !important;
    background: var(--uc-surface-sunken) !important;
    text-decoration: none !important;
    transition: background 0.2s ease !important;
    margin-left: 4px !important;
    color: var(--uc-text) !important;
}

.navbar-wrapper .user-menu:hover {
    background: var(--uc-surface-hover) !important;
    color: var(--uc-text) !important;
}

.navbar-wrapper .user-menu img {
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
    flex-shrink: 0 !important;
}

.navbar-wrapper .user-menu .title {
    display: block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1c1e21 !important;
    white-space: nowrap !important;
    max-width: 90px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.navbar-wrapper .user-menu-caret {
    font-size: 11px !important;
    color: #555 !important;
    flex-shrink: 0 !important;
}

/* Hide Bootstrap's auto-generated dropdown caret on user-menu */
.navbar-wrapper .user-menu.dropdown-toggle::after {
    display: none !important;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo {
    font-size: 22px;
    font-weight: 700;
    cursor: pointer;
}

.logo-w {
    color: #222;
}

.logo-o {
    color: #2563eb;
}

.home-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #2563eb;
    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
}

.apps-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: none;
    background: #f0f2f5;
    cursor: pointer;
}

.header-center {
    flex: 1;
    display: flex;
    justify-content: center;
}

.search-box {
    position: relative;
    width: 60%;
}

.search-box input {
    width: 100%;
    padding: 10px 40px 10px 16px;
    border-radius: 25px;
    border: 1px solid #ddd;
    background: #f0f2f5;
    outline: none;
}

.search-box i {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.icon-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #f0f2f5;
    cursor: pointer;
}

.notification .badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #2563eb;
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 50%;
}

.user-menu {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.user-menu img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

/* ICON BUTTON UPGRADE */
.icon-btn,
.apps-btn {
    background: linear-gradient(145deg, #f6f7f9, #e9ebee);
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    transition: all 0.25s ease;
}

.icon-btn i,
.apps-btn i {
    font-size: 16px;
    color: #444;
    transition: all 0.25s ease;
}

.icon-btn:hover,
.apps-btn:hover {
    background: linear-gradient(145deg, #ffffff, #eceff3);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}

.icon-btn:hover i,
.apps-btn:hover i {
    color: #2563eb;
}

.notification {
    background: linear-gradient(145deg, #eff6ff, #dbeafe);
}

.notification i {
    color: #2563eb;
}

.notification .badge {
    box-shadow: 0 0 0 3px #fff;
    animation: pulse 1.8s infinite;
}

.user-menu {
    padding: 6px 10px;
    border-radius: 20px;
    transition: background 0.2s ease;
}

.user-menu:hover {
    background: #f0f2f5;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* ===== LAYOUT ===== */
.layout {
    display: flex;
    max-width: 1440px;
    margin: 0 auto;
    padding: 20px;
    gap: 16px;
}

/* ===== LEFT SIDEBAR ===== */
.left-sidebar {
    width: 260px;
    background: #ffffff;
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.menu {
    list-style: none;
}

.menu li {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 14px;
margin-bottom: -2px;  /* Changed from 2px to 0px */
border-radius: 12px;
cursor: pointer;
transition: all 0.25s ease;
color: #333;
font-size: 15px;
}

.menu-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #f6f7f9, #eceef2);
    color: #1d4ed8;
    box-shadow: inset 0 0 0 1px #e5e7eb;
    transition: all 0.25s ease;
}

.menu-icon i {
    font-size: 16px;
    line-height: 1;
    height: 16px;
    width: 16px;
    display: block;
}

.menu li:hover {
    background: #f5f6f8;
}

.menu li:hover .menu-icon {
    transform: scale(1.08);
    background: linear-gradient(145deg, #ffeaea, #ffdcdc);
}

.menu li.active {
    background: linear-gradient(145deg, #eff6ff, #dbeafe);
    font-weight: 600;
}

.menu li.active .menu-icon {
    background: linear-gradient(145deg, #2563eb, #1d4ed8);
    color: #fff;
    box-shadow: 0 8px 18px rgba(37,99,235,0.35);
}

.menu-section-title {
    font-size: 12px;
    font-weight: 600;
    color: #888;
    padding: 16px 14px 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* FIX FOR SUBMENU ITEMS (USE GRID) */
.menu li.has-submenu {
display: grid;
grid-template-columns: 38px 1fr auto; /* Icon | Text | Arrow */
grid-template-rows: auto;             /* Only 1 row when submenu hidden */
align-items: center;
padding: 12px 14px;
gap: 14px;
margin-bottom: 0px;                   /* 👈 REMOVE space between items */
}

/* When submenu is active, add second row */
.menu li.has-submenu.active {
grid-template-rows: auto auto;        /* Row 1: Main | Row 2: Submenu */
}

.menu li.has-submenu .menu-icon {
    grid-column: 1;
    grid-row: 1;
}

.menu li.has-submenu > span {
    grid-column: 2;
    grid-row: 1;
    font-weight: 500;
}

.menu li.has-submenu > .arrow {
    grid-column: 3;
    grid-row: 1;
    font-size: 12px;
    transition: transform 0.3s ease;
}

.menu li.has-submenu .submenu {
    grid-column: 1 / -1;
    grid-row: 2;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    overflow: hidden;
}

.menu li.has-submenu.active .submenu {
    display: block;
}

.menu li.has-submenu .submenu li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 10px 6px;
    cursor: pointer;
    transition: background 0.2s ease;
    color: #555;
    font-size: 13px;
    border-radius: 8px;
    margin: 2px 8px;
}

.menu li.has-submenu .submenu li:hover {
    background: #f5f6f8;
}

.menu li.has-submenu .submenu li i {
    font-size: 14px;
    color: #2563eb;
    width: 18px;
    text-align: center;
}

.menu li.has-submenu.active > .arrow {
    transform: rotate(180deg);
}

.menu li.has-submenu:hover {
    background: transparent;
}

.menu li.has-submenu.active {
    background: linear-gradient(145deg, #eff6ff, #dbeafe);
    border-radius: 12px;
}

.menu li.has-submenu.active .menu-icon {
    background: linear-gradient(145deg, #2563eb, #1d4ed8);
    color: #fff;
}

/* ===== MIDDLE FEED ===== */
.middle-feed {
    margin: 0;
}

/* ===== RIGHT SIDEBAR ===== */
.right-sidebar {
    height: fit-content;
}

/* ===== RIGHT SIDEBAR CARDS ===== */
.right-sidebar .card {
    border: 1px solid #e4e6eb !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06) !important;
    background: #fff !important;
    overflow: hidden !important;
}

.right-sidebar .card-header {
    background: #fff !important;
    border-bottom: none !important;
    padding: 12px 16px 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #1c1e21 !important;
    line-height: 1.4 !important;
    overflow: hidden !important;
    border-radius: 14px 14px 0 0 !important;
}

.right-sidebar .card-header .float-end {
    float: right !important;
    margin-left: 8px !important;
}

.right-sidebar .card-header .float-end a,
.right-sidebar .card-header small a {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #2563eb !important;
    text-decoration: none !important;
}

.right-sidebar .card-body.with-list {
    padding: 0 12px 12px !important;
}

/* ===== SUGGESTION LIST ITEMS ===== */
.right-sidebar .feeds-item {
    padding: 0 !important;
    border: none !important;
    list-style: none !important;
}

.right-sidebar .data-container {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 6px 0 !important;
}

/* Avatar */
.right-sidebar .data-avatar {
    flex-shrink: 0 !important;
    display: block !important;
}

.right-sidebar .data-avatar img {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Content row — flex so button never overflows */
.right-sidebar .data-content {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Name + subtitle block takes remaining space */
.right-sidebar .data-content > div:not(.float-end) {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

/* Button pinned to the right — cancel the float */
.right-sidebar .data-content .float-end {
    flex-shrink: 0 !important;
    float: none !important;
    margin: 0 !important;
}

/* Name — base rule (specificity 31) */
.right-sidebar .data-content .name,
.right-sidebar .data-content .name a {
    font-size: 13.5px !important;
    font-weight: 400 !important;
    color: #1c1e21 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
}
/* Override higher-specificity rules from style.min.css that set bold */
.right-sidebar .feeds-item .data-content .mt5 .name,
.right-sidebar .feeds-item .data-content .mt5 .name a,
.js_sticky-sidebar .feeds-item .data-content .name,
.js_sticky-sidebar .feeds-item .data-content .name a {
    font-weight: 400 !important;
    font-size: 13.5px !important;
}

.right-sidebar .data-content .name a:hover {
    color: #2563eb !important;
}

/* Subtitle — mutual friends / Likes / Members count (BLACK per user request) */
.right-sidebar .data-content .mt5 + div,
.right-sidebar .data-content > div:not(.float-end) + div:not(.float-end),
.right-sidebar .data-content > div > span.text-underline,
.right-sidebar .feeds-item .data-content > div:not(.mt5):not(.float-end) {
    font-size: 12px !important;
    color: #1c1e21 !important;
    line-height: 1.3 !important;
    margin-top: 1px !important;
}

/* ===== ACTION BUTTONS — all same size/shape ===== */

/* Shared pill button base — match style.min.css .float-end .btn size (3px 10px / 11px) */
.right-sidebar .btn-custom-add,
.right-sidebar .js_like-page,
.right-sidebar .js_unlike-page,
.right-sidebar .js_join-group,
.right-sidebar .js_leave-group {
    border: none !important;
    border-radius: 50rem !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    min-width: 66px !important;
    height: 30px !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}
/* Higher-specificity override to pin Add button at same size as Like/Join */
.right-sidebar .feeds-item .data-content .float-end .btn-custom-add {
    padding: 0 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    min-width: 66px !important;
    height: 30px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* Add */
.right-sidebar .btn-custom-add { background: #2563eb !important; }
.right-sidebar .btn-custom-add:hover { background: #1d4ed8 !important; }

/* Like */
.right-sidebar .js_like-page { background: #2563eb !important; }
.right-sidebar .js_like-page:hover { background: #1d4ed8 !important; }

/* Unlike (already liked state) */
.right-sidebar .js_unlike-page { background: #2563eb !important; }
.right-sidebar .js_unlike-page:hover { background: #1d4ed8 !important; }

/* Join */
.right-sidebar .js_join-group { background: #27ae60 !important; }
.right-sidebar .js_join-group:hover { background: #1e8449 !important; }

/* Leave/Joined state */
.right-sidebar .js_leave-group { background: #8e9296 !important; }
.right-sidebar .js_leave-group:hover { background: #65676b !important; }

/* ===== ONLINE USERS CARD ===== */
.right-sidebar .online-users-card {
    background: #fff !important;
    border: 1px solid #e4e6eb !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06) !important;
    padding: 14px 16px 12px !important;
}

.right-sidebar .online-users-card .section-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1c1e21 !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.right-sidebar .online-users-card .section-title .online-dot {
    width: 12px !important;
    height: 12px !important;
    background: #2563eb !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

.right-sidebar .online-users-card .online-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 6px 0 !important;
    cursor: pointer !important;
}

.right-sidebar .online-users-card .online-indicator {
    width: 10px !important;
    height: 10px !important;
    background: #2ecc71 !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    display: block !important;
    border: 2px solid #fff !important;
}

.right-sidebar .online-users-card .online-item .online-avatar {
    flex-shrink: 0 !important;
}

.right-sidebar .online-users-card .online-item .online-avatar img {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
}

.right-sidebar .online-users-card .online-item .online-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1c1e21 !important;
    flex: 1 !important;
}

/* ===== CREATE POST / PUBLISHER ===== */
.create-post,
.x-form.publisher {
    background: #fff;
    border-radius: 16px;
    padding: 0;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    border: 1px solid #e4e6eb;
    margin-bottom: 16px;
    overflow: hidden;
}

/* Publisher top row: avatar + input */
.publisher-message.create-top {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 12px 14px !important;
    border-bottom: none !important;
}

.publisher-avatar {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    object-fit: cover;
    flex-shrink: 0;
}

/* Quill / textarea input area */
.publisher-message .colored-text-wrapper {
    flex: 1;
}

.publisher-message .quill-editor,
.publisher-message .ql-container {
    background: #f0f2f5 !important;
    border-radius: 16px !important;
    border: none !important;
    min-height: 80px !important;
    font-size: 15px !important;
}

.publisher-message .ql-editor {
    min-height: 80px !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
    color: #1c1e21;
}

.publisher-message .ql-editor.ql-blank::before {
    font-style: normal !important;
    color: #888 !important;
    left: 16px !important;
    right: 16px !important;
}

/* Hide quill toolbar */
.publisher-message .ql-toolbar {
    display: none !important;
}

.create-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.create-top img {
    border-radius: 50%;
}

.create-top input {
    flex: 1;
    border: none;
    background: #f0f2f5;
    padding: 12px 16px;
    border-radius: 30px;
    outline: none;
}

.create-actions {
    display: flex;
    justify-content: space-around;
    margin-top: 12px;
    border-top: 1px solid #eee;
    padding-top: 10px;
}

.create-actions button {
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    gap: 8px;
    align-items: center;
    color: #555;
    font-weight: 500;
}

.create-actions i {
    color: #2563eb;
}

.mind-create {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.mind-create-btn {
    height: 36px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(145deg, #2563eb, #1d4ed8);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 6px 14px rgba(37,99,235,0.35);
}

.mind-create-btn i {
    font-size: 13px;
}

.mind-create-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(37,99,235,0.45);
}

.mind-create-btn:active {
    transform: scale(0.96);
}

/* ===== STORIES ===== */
.stories {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    overflow-x: auto;
    padding-bottom: 6px;
}

.stories::-webkit-scrollbar {
    display: none;
}

.story {
    position: relative;
    min-width: 120px;
    height: 200px;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.story:not(.seen) {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--uc-primary, #2563eb), 0 10px 25px rgba(0,0,0,0.08);
}

.story img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Story username — left-aligned at bottom */
.story span.info {
    position: absolute !important;
    bottom: 10px !important;
    left: 10px !important;
    right: 10px !important;
    text-align: left !important;
    display: block !important;
}

.story span.info strong.name {
    display: block;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-shadow: 0 2px 6px rgba(0,0,0,0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Fallback for other span children inside .story */
.story > a > span:not(.info):not(.item-preview) {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
    text-align: left;
}

/* Add Story — banner card with Unity blue pill button */
.add-story-banner {
    position: relative !important;
    width: 110px !important;
    height: 160px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    display: inline-block !important;
    margin-bottom: 0 !important;
}

.add-story-banner .img {
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    filter: brightness(0.55) !important;
    border-radius: 16px !important;
    width: 100% !important;
    height: 100% !important;
}

/* Unity blue pill overlaid at bottom of banner (legacy class name retained) */
.add-story-pill-red {
    position: absolute !important;
    bottom: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(37,99,235,0.18) !important;
    border-radius: 50px !important;
    padding: 5px 10px 5px 5px !important;
    white-space: nowrap !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}

.add-story-pill-red-icon {
    width: 28px !important;
    height: 28px !important;
    background: #2563eb !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
    border: 2px solid #fff !important;
}

.add-story-pill-red-text {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5) !important;
}

.story:hover {
    transform: translateY(-4px);
    transition: 0.25s ease;
}

.story-avatar {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    padding: 2px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}

.story-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.story-count {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(37, 99, 235, 0.95);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 10px;
    z-index: 5;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Diamond_pro fix: the StoryBoost plugin injects its own avatar+count badge
   (span.sb-story-avatar-chip, containing its own <img> and .sb-story-count) into each
   story tile once it's active. It renders right next to this theme's original plain
   .story-avatar <div> (from before StoryBoost was installed), and both sit in the same
   top-left corner - two avatar images overlapping ("2 profile photos"). StoryBoost's
   chip is the one with the live unread-count badge, so keep that and hide the old one
   whenever StoryBoost has actually added its chip to a given story. */
.story:has(.sb-story-avatar-chip) > a.item-link > .story-avatar {
    display: none !important;
}

/* ===== FEED TABS ===== */
.feed-tabs {
    position: sticky;
    top: 0px;
    z-index: 20;
    display: flex;
    gap: 10px;
    margin: 14px 0 20px;
    padding: 10px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    overflow-x: auto;
}

.feed-tab {
    border: none;
    background: #f0f2f5;
    color: #444;
    padding: 10px 16px;
    border-radius: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.25s ease;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    line-height: 1.2;
}

.feed-tab i {
    font-size: 14px;
    color: #2563eb;
}

.feed-tab:hover {
    background: #2563eb;
    color: #fff;
}

.feed-tab:hover i {
    color: #fff;
}

.feed-tab.active {
    background: linear-gradient(145deg, #2563eb, #1d4ed8);
    color: #fff;
    box-shadow: 0 6px 16px rgba(37,99,235,0.45);
}

.feed-tab.active i {
    color: #fff;
}

.feed-tab small {
    font-size: 11px;
    opacity: 0.7;
    font-weight: 400;
}

.feed-tab .tab-text {
    display: flex;
    flex-direction: column;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
}

.feed-tab span {
    font-size: 14px;
    font-weight: 600;
}

/* ===== POST CARD ===== */
.post-card {
    background: #fff;
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}

.post-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 0 12px 0;
}

.post-header-left {
    display: flex;
    gap: 12px;
    flex: 1;
}

.post-header-left img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
}

.post-header-info {
    flex: 1;
}

.post-header-text {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.post-header-text strong {
    color: #333;
    font-size: 15px;
    font-weight: 600;
}

.post-header-text span {
    color: #555;
    font-size: 14px;
}

.post-meta-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.post-time {
    color: #888;
    font-size: 13px;
}

.post-header i.fa-globe {
    font-size: 12px;
    color: #888;
}

.post-content {
    padding: 0 0 12px 0;
}

.post-content p {
    color: #555;
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 12px 0;
}

.post-content img {
    width: 100%;
    border-radius: 12px;
    margin-top: 12px;
}

.post-stats {
    display: flex;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #e4e6eb;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #888;
    font-size: 13px;
}

.stat-item i {
    font-size: 14px;
}

.post-actions {
    display: flex;
    gap: 8px;
    padding: 8px 0 0 0;
}


/* ===== POST MENU DROPDOWN ===== */
.post-menu {
    position: relative;
}

.post-menu-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #f0f2f5;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.post-menu-btn:hover {
    background: #e4e6eb;
}

.post-menu-btn i {
    font-size: 12px;
    color: #555;
    transition: transform 0.2s ease;
}

.post-menu-btn.active i {
    transform: rotate(180deg);
}

.post-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    min-width: 240px;
    padding: 8px 0;
    z-index: 1000;
    display: none;
    border: 1px solid #e4e6eb;
    animation: slideDown 0.2s ease;
}

.post-dropdown-menu.show {
    display: block;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.2s ease;
    color: #333;
    font-size: 14px;
}

.dropdown-item:hover {
    background: #f5f6f8;
}

.dropdown-item i {
    font-size: 16px;
    color: #888;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    font-family: "Font Awesome 6 Free" !important;
}

.dropdown-item .fa-regular {
    font-weight: 400 !important;
}

.dropdown-item .fa-solid {
    font-weight: 900 !important;
}

.dropdown-item span {
    flex: 1;
}

/* PROFILE PICTURE UPDATE */
.profile-picture-update {
    padding: 20px;
    display: flex;
    justify-content: center;
}

.new-profile-pic {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #e4e6eb;
}

/* VIDEO CONTAINER */
.video-container {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
}

.video-thumbnail {
    width: 100%;
    height: auto;
    display: block;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: rgba(37, 99, 235, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.play-button i {
    color: #fff;
    font-size: 24px;
    margin-left: 4px;
}

.video-container:hover .play-button {
    transform: translate(-50%, -50%) scale(1.1);
    background: rgba(37, 99, 235, 1);
}

.video-duration {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

/* ===== SIDE CARDS ===== */
.side-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.side-card h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    margin-bottom: 14px;
}

.side-card h4 i {
    color: #2563eb;
}


.online-dot {
    width: 8px;
    height: 8px;
    background: #2ecc71;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}

.online-dot::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: rgba(46, 204, 113, 0.4);
    animation: pulse 1.5s infinite;
}



/* ===== APPS BUTTON ===== */
.header-apps-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: none;
    background: linear-gradient(145deg, #f6f7f9, #e9ebee);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    margin-right: auto;
    margin-left: 20px;
}

.header-apps-btn i {
    font-size: 16px;
    color: #444;
}

.header-apps-btn:hover {
    background: linear-gradient(145deg, #ffffff, #eceff3);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}

.header-apps-btn:hover i {
    color: #2563eb;
}

.header-apps-btn.active {
    background: linear-gradient(145deg, #2563eb, #1d4ed8);
}

.header-apps-btn.active i {
    color: #fff;
}

.header-right {
    position: relative;
}

/* CREATE MENU DROPDOWN */
.create-menu {
    position: absolute;
    top: 72px;
    right: 140px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
    padding: 12px;
    min-width: 280px;
    display: none;
    z-index: 1000;
    animation: slideDown 0.25s ease;
}

.create-menu.show {
    display: block;
}

.create-menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #333;
    font-size: 15px;
    font-weight: 500;
}

.create-menu-item:hover {
    background: linear-gradient(145deg, #eff6ff, #dbeafe);
    transform: translateX(4px);
}

.create-menu-item i {
    font-size: 20px;
    color: #2563eb;
    width: 24px;
    text-align: center;
}

/* ===== FRIEND REQUEST POPUP ===== */
/* ===== FRIEND REQUEST POPUP ===== */
.friend-request-popup {
    position: fixed;
    top: 72px;
    right: 280px;
    width: 380px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
    z-index: 1000;
    display: none;
    max-height: 500px;
    overflow-y: auto;
    animation: slideDown 0.25s ease;
}

.friend-request-popup.show {
    display: block;
}

.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #e4e6eb;
}

.popup-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: #333;
}

.close-popup {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #f0f2f5;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.close-popup:hover {
    background: #e4e6eb;
}

.close-popup i {
    font-size: 16px;
    color: #555;
}

/* POPUP TABS */
.popup-tabs {
    display: flex;
    padding: 0 16px;
    border-bottom: 1px solid #e4e6eb;
}

.popup-tab {
    flex: 1;
    padding: 14px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: #65676b;
    position: relative;
    transition: all 0.2s ease;
}

.popup-tab.active {
    color: #2563eb;
}

.popup-tab.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #2563eb;
    border-radius: 3px 3px 0 0;
}

/* TAB BADGE */
.tab-badge {
background: #2563eb;
color: #fff;
font-size: 11px;
padding: 2px 6px;
border-radius: 10px;
margin-left: 6px;
display: inline-block;
vertical-align: middle;
white-space: nowrap;
}

.popup-tab {
flex: 1;
padding: 14px;
border: none;
background: none;
cursor: pointer;
font-size: 14px;
font-weight: 600;
color: #65676b;
position: relative;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
white-space: nowrap;
}

/* FRIEND ITEM BUTTONS */
.friend-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border-radius: 12px;
transition: background 0.2s ease;
}

.friend-actions {
display: flex;
gap: 8px;
margin-left: auto;
}

.confirm-btn,
.delete-btn {
padding: 6px 12px;
border: none;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}

.confirm-btn {
background: #2563eb;
color: #fff;
}

.confirm-btn:hover {
background: #1d4ed8;
}

.delete-btn {
background: #f0f2f5;
color: #555;
}

.delete-btn:hover {
background: #e4e6eb;
}

/* SENT REQUESTS - CANCEL BUTTON */
.cancel-btn {
padding: 6px 12px;
border: none;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
background: #f0f2f5;
color: #555;
white-space: nowrap;
}

.cancel-btn:hover {
background: #e4e6eb;
}

/* FRIEND INFO */
.friend-info {
flex: 1;
min-width: 0;
}

.friend-info strong {
display: block;
font-size: 15px;
color: #333;
margin-bottom: 4px;
}

.friend-info span {
font-size: 13px;
color: #888;
line-height: 1.3;
}

/* TAB CONTENT */
.tab-content {
    display: none;
    padding: 12px;
}

.tab-content.active {
    display: block;
}

/* FRIEND ITEM */
.friend-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    transition: background 0.2s ease;
    margin-bottom: 8px;
}

.friend-item:hover {
    background: #f5f6f8;
}

.friend-item img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}

.friend-info {
    flex: 1;
}

.friend-info strong {
    display: block;
    font-size: 15px;
    color: #333;
    margin-bottom: 4px;
}

.friend-info span {
    font-size: 13px;
    color: #888;
}

.friend-actions {
    display: flex;
    gap: 8px;
}

.confirm-btn,
.delete-btn,
.cancel-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.confirm-btn {
    background: #2563eb;
    color: #fff;
}

.confirm-btn:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
}

.delete-btn {
    background: #f0f2f5;
    color: #555;
}

.delete-btn:hover {
    background: #e4e6eb;
}

.cancel-btn {
    background: #f0f2f5;
    color: #555;
    padding: 8px 12px;
}

.cancel-btn:hover {
    background: #e4e6eb;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ===== MESSAGE POPUP ===== */
.message-popup {
    position: fixed;
    top: 72px;
    right: 140px;
    width: 360px;
    height: 500px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
    z-index: 1000;
    display: none;
    flex-direction: column;
    animation: slideDown 0.25s ease;
    overflow: hidden;
}

.message-popup.show {
    display: flex;
}

.message-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #e4e6eb;
    background: #f9f9f9;
}

.message-search i {
    color: #888;
    font-size: 14px;
}

.message-search input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
}

.conversations-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.conversation-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s ease;
    position: relative;
}

.conversation-item:hover {
    background: #f5f6f8;
}

.conv-avatar {
    position: relative;
}

.conv-avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.conv-avatar .online-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    background: #2ecc71;
    border: 2px solid #fff;
    border-radius: 50%;
}

.conv-info {
    flex: 1;
    min-width: 0;
}

.conv-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.conv-header strong {
    font-size: 15px;
}

.conv-time {
    font-size: 12px;
    color: #888;
}

.conv-preview {
    font-size: 14px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.unread-badge {
    background: #2563eb;
    color: #fff;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
}

.chat-view {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #e4e6eb;
}

.back-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #f0f2f5;
    cursor: pointer;
}

.chat-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-user img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.chat-user strong {
    font-size: 15px;
    display: block;
}

.chat-status {
    font-size: 12px;
    color: #2ecc71;
}

.chat-messages {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #f9f9f9;
}

.message {
    max-width: 75%;
    padding: 10px 14px;
    border-radius: 18px;
    font-size: 14px;
}

.message.received {
    background: #fff;
    border: 1px solid #e4e6eb;
    align-self: flex-start;
}

.message.sent {
    background: linear-gradient(145deg, #2563eb, #1d4ed8);
    color: #fff;
    align-self: flex-end;
}

.msg-time {
    font-size: 11px;
    opacity: 0.7;
    margin-top: 4px;
    display: block;
}

.chat-input {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid #e4e6eb;
    background: #fff;
    position: relative;
}

.message-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: #f0f2f5;
    padding: 12px 16px;
    border-radius: 20px;
    outline: none;
    font-size: 14px;
}

.message-input::placeholder {
    color: #999;
}

.chat-input-icons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.input-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: #f0f2f5;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.input-icon-btn:hover {
    background: linear-gradient(145deg, #eff6ff, #dbeafe);
}

.input-icon-btn i {
    font-size: 16px;
    color: #2563eb;
}

.send-message-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(145deg, #2563eb, #1d4ed8);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

.send-message-btn:hover {
    background: linear-gradient(145deg, #1d4ed8, #1e40af);
    transform: scale(1.05);
}

.send-message-btn i {
    font-size: 16px;
    color: #fff;
}

/* ===== NOTIFICATION POPUP ===== */
.notification-popup {
    position: fixed;
    top: 72px;
    right: 200px;
    width: 360px;
    max-height: 500px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
    z-index: 1000;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.notification-popup.show {
    display: flex;
}

.notif-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #e4e6eb;
}

.notif-header h3 {
    font-size: 18px;
    font-weight: 700;
}

.close-notif {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #f0f2f5;
    cursor: pointer;
}

.close-notif:hover {
    background: #e4e6eb;
}

.notif-list {
    overflow-y: auto;
    max-height: 440px;
}

.notif-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s ease;
    position: relative;
}

.notif-item:hover {
    background: #f5f6f8;
}

.notif-item.unread {
    background: linear-gradient(145deg, #eff6ff, #dbeafe);
}

.notif-item.unread:hover {
    background: linear-gradient(145deg, #ffeaea, #ffdcdc);
}

.notif-item img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

/* NOTE: the old "REELS INNER THEME" block that used to live here (.reels-wrapper,
   .reel-container, .reel-video-container video { object-fit: contain }, .video-controlls,
   .reel-actions, .reels-custom-header, etc.) has been removed. It was an earlier,
   non-fullscreen draft of the reels player that reused the exact same class names as
   the real, current implementation now living entirely in reels.tpl's own <style>
   block (fullscreen black player, close button, actions rail, comments panel). Having
   both definitions in play was fighting the reels.tpl fixes (object-fit: cover for
   fullscreen video, the comments-panel-closed-by-default fix) silently — edits there
   appeared to do nothing because this file's conflicting rules were also in the
   cascade. Reels styling should only ever live in reels.tpl going forward. */

/* ===== POST CARD REDESIGN ===== */
.post {
    background: #fff;
    border-radius: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    border: 1px solid #e4e6eb;
    overflow: visible;
    list-style: none;
}

.post-body {
    padding: 16px;
}

.post-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
    position: relative;
}

.post-avatar {
    flex-shrink: 0 !important;
    position: relative !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
}

.post-avatar-picture {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    padding-top: 0 !important;
    border-radius: 50% !important;
    display: block !important;
    background-size: cover !important;
    background-position: center !important;
    background-color: #e4e6eb !important;
    overflow: hidden !important;
}

/* Online status dot hidden on post avatars */
.post-avatar .online-dot {
    display: none !important;
}

.post-meta {
    flex: 1;
    min-width: 0;
}

/* Dropdown toggle button in posts */
.post-meta .float-end.dropdown {
    float: none !important;
    position: absolute;
    top: 0;
    right: 0;
}

.post-meta .dropdown-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f0f2f5;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    border: none;
}

.post-meta .dropdown-toggle::after {
    display: none;
}

.post-meta .dropdown-toggle:hover {
    background: #e4e6eb;
}

.post-meta .dropdown-toggle i {
    font-size: 12px;
    color: #555;
    transition: transform 0.2s ease;
}

.post-meta .dropdown-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.post-author,
.post .post-author,
a.post-author,
.post a.post-author {
    font-weight: 700;
    font-size: 15px;
    color: #1c1e21 !important;
    text-decoration: none !important;
}

.post-title {
    font-size: 14px;
    color: #65676b;
    font-weight: 400;
}

.post-time {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    margin-top: 0;
    line-height: 1.2;
    font-size: 13px;
    color: #65676b;
}

.post-time a {
    color: #65676b;
    text-decoration: none;
}

.post-time a:hover {
    text-decoration: underline;
}

/* privacy dropdown inside post-time must not be taller than the time text —
   otherwise it grows the row and the timestamp gets pushed down. */
.post-time .btn-group,
.post-time .btn-group .btn,
.post-time .btn-group .dropdown-toggle {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    line-height: 1.2 !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* ===== POST STATS ===== */
.post-stats,
.post .post-stats,
li .post-stats {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
    visibility: visible !important;
    height: auto !important;
    margin: 8px 16px 0 !important;
    padding: 8px 0 6px !important;
    overflow: visible !important;
    border-top: 1px solid #f0f2f5 !important;
    border-bottom: 0 !important;
    color: #65676b !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}

.post-stats .float-start,
.post-stats .float-end {
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
}

.post-stats .float-start.mr10,
.post-stats .float-end .ml10 {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.post-stats .float-end > span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
}

.post-stats i,
.post-stats .fa,
.post-stats .fas,
.post-stats .far {
    color: #65676b !important;
    font-size: 13px !important;
}

body.night-mode .post-stats {
    border-top-color: var(--card-dark-divider) !important;
    color: #9aa8b6 !important;
}

body.night-mode .post-stats i,
body.night-mode .post-stats .fa,
body.night-mode .post-stats .fas,
body.night-mode .post-stats .far {
    color: #9aa8b6 !important;
}

@media (max-width: 575.98px) {
    .post-stats,
    .post .post-stats,
    li .post-stats {
        align-items: flex-start !important;
    }

    .post-stats .float-end {
        width: 100% !important;
        justify-content: flex-start !important;
    }
}

/* ===== REACTIONS SUMMARY (the emoji + count under a post that opens the
   "who reacted" popup) — this had zero styling before: the emoji images
   render at whatever raw size they were uploaded at, with no overlap, no
   hover affordance, and nothing to signal it's clickable. ===== */
.reactions-stats {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    cursor: pointer !important;
    padding: 2px 6px 2px 2px !important;
    border-radius: 12px !important;
    transition: background 0.15s ease !important;
}
.reactions-stats:hover {
    background: #f0f2f5 !important;
    text-decoration: underline !important;
}
.reactions-stats-item {
    display: inline-flex !important;
    margin-left: -6px !important;
    position: relative !important;
    z-index: 1 !important;
}
.reactions-stats-item:first-child {
    margin-left: 0 !important;
}
.reactions-stats-item .emoji {
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: 0 0 0 2px #fff !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* The base theme's own .emoji rule ships a 120x120 box that it shrinks
       down with transform:scale() + huge negative top/right percentages
       (a trick to re-center it after scaling) - e.g. .inline-emoji .emoji
       uses scale(0.15) with top:-285%/right:285%, meant to shrink a 120px
       box down to ~18px. Since we size this box directly to 18px instead
       of relying on that trick, the leftover scale/offset from the base
       rule was STILL applying on top of our 18px box, shrinking it an
       extra 85% (down to ~2-3px) and flinging it off to the side - which
       is why the reaction icons were rendering as blank white dots.
       Neutralizing the inherited transform/offset here fixes it. */
    transform: none !important;
    top: 0 !important;
    right: auto !important;
}
.reactions-stats-item .emoji img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
}
.reactions-stats > span {
    font-size: 13px !important;
    color: #65676b !important;
    margin-left: 2px !important;
    font-weight: 500 !important;
}
body.night-mode .reactions-stats:hover {
    background: rgba(255,255,255,0.06) !important;
}
body.night-mode .reactions-stats-item .emoji {
    box-shadow: 0 0 0 2px #242526 !important;
}

/* ===== TOP-OF-POST reaction count badge — same emoji+count widget as
   the one above, reused up in the post header next to the "..." dropdown
   menu instead of (well, in addition to) the one in the bottom stats
   row, per specific request. Sized down slightly since header real
   estate is tighter than the full-width stats row.
   NOTE: the "..." dropdown trigger next to it is NOT a normal floated
   element - Sngine positions it with position:absolute; top:0; right:0
   against the post header, so it takes itself completely out of normal
   document flow. That means a plain float-end sibling (this badge)
   doesn't get pushed aside by it - it floats into the exact same top-right
   corner and ends up hidden underneath the dropdown button instead of
   beside it. Fixed by absolutely positioning the badge too, offset far
   enough left to clear the ~34px dropdown button. */
.post-header-reactions-badge {
    position: absolute !important;
    top: 4px !important;
    right: 40px !important;
    margin: 0 !important;
    z-index: 1 !important;
}
.post-header-reactions-badge .reactions-stats {
    padding: 1px 5px 1px 1px !important;
}
.post-header-reactions-badge .reactions-stats-item .emoji {
    width: 15px !important;
    height: 15px !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.post-header-reactions-badge .reactions-stats > span {
    font-size: 12px !important;
}
/* Small "pop" on hover so the stacked reaction icons feel a bit more alive/3D
   instead of totally static. Scales up + deepens the shadow ring a touch. */
.post-header-reactions-badge .reactions-stats:hover .reactions-stats-item .emoji {
    transform: scale(1.25) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25), 0 0 0 2px #fff !important;
    z-index: 2 !important;
}

/* M6: the badge above (and the "..." menu next to it) are position:absolute,
   pulled out of normal document flow — so the author name / "shared ..."
   text in .post-meta has no idea it needs to leave room for them. On
   desktop there's normally enough natural width that this doesn't collide,
   but on a narrow phone a longer name wraps right up into that top-right
   corner and visually sits underneath the emoji/count. Reserve a gutter on
   mobile only so the text always wraps before reaching them. */
@media (max-width: 767.98px) {
    .post-meta {
        padding-right: 88px !important;
    }
}

/* ===== POST ACTIONS — flat buttons with vertical dividers ===== */
.post .post-actions,
.post-actions {
    display: flex !important;
    padding: 2px 0 !important;
    margin-top: 6px !important;
    gap: 0 !important;
    border-top: 1px solid #e4e6eb !important;
    background: transparent !important;
}

.post .post-actions .action-btn,
.post-actions .action-btn {
    flex: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 12px 4px !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    border-right: 1px solid #e4e6eb !important;
    box-shadow: none !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1c1e21 !important;
    transition: background 0.15s ease !important;
    min-height: 44px !important;
    position: relative !important;
}

.post .post-actions .action-btn:last-child,
.post-actions .action-btn:last-child {
    border-right: none !important;
}

.post .post-actions .action-btn:hover,
.post-actions .action-btn:hover {
    background: #f0f2f5 !important;
    color: #2563eb !important;
}

.post .post-actions .action-btn:hover .action-icon,
.post .post-actions .action-btn:hover i,
.post-actions .action-btn:hover .action-icon,
.post-actions .action-btn:hover i {
    color: #2563eb !important;
}

/* Show button labels always */
.post-actions .action-btn .reaction-btn-name,
.post-actions .action-btn span.d-none {
    display: inline-block !important;
}

/* Icons — dark by default */
.post-actions .action-btn .action-icon,
.post-actions .action-btn i,
.post-actions .action-btn .action-icon * {
    color: #1c1e21 !important;
    fill: #1c1e21 !important;
    font-size: 20px !important;
}

/* Like = Unity blue when reacted */
.post-actions .reactions-wrapper.js_unreact-post .reaction-btn-name,
.post-actions .reactions-wrapper.js_unreact-post i {
    color: #2563eb !important;
}

/* Reaction/Like button inner wrapper */
.post-actions .action-btn .reaction-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
}

.post-actions .action-btn .reaction-btn-icon {
    display: flex !important;
    align-items: center !important;
}

/* M2: the emoji shown on the Like button once you've reacted was hard to
   see — the base theme renders it from a 120px source icon scaled all the
   way down to an 18px box (.inline-emoji{width:18px;height:18px} +
   .emoji{transform:scale(0.15)}). Bump the box up to ~28px (and rescale the
   120px source to match) on both the normal post feed and reels so the
   chosen reaction actually reads at a glance. */
.post-actions .action-btn .reaction-btn-icon .inline-emoji,
.reel-action-btn .reaction-btn-icon .inline-emoji {
    width: 28px !important;
    height: 28px !important;
    position: relative !important;
    overflow: visible !important;
}
/* Live testing showed the box above wasn't enough on its own: the base
   theme's `.inline-emoji .emoji` rule doesn't just scale the icon down, it
   also nudges it with `top:-285%; right:285%` to re-center the shrunk
   120px source inside the ORIGINAL 18px box. Those percentages are huge
   (285% of 120px) and were only correct for that specific 18px target -
   just changing the scale here (0.15 -> 0.233) left the old offset in
   place, which flung the icon up and to the side instead of centering it
   in the new 28px box (it rendered floating above the Like button instead
   of sitting inside it next to the reaction name). Same fix as everywhere
   else this session: drop the inherited transform/offset entirely and
   just size the icon to fill its own box directly. */
.post-actions .action-btn .reaction-btn-icon .inline-emoji .emoji,
.reel-action-btn .reaction-btn-icon .inline-emoji .emoji {
    width: 28px !important;
    height: 28px !important;
    transform: none !important;
    top: 0 !important;
    right: auto !important;
    position: relative !important;
}
.post-actions .action-btn .reaction-btn-icon .inline-emoji .emoji img,
.reel-action-btn .reaction-btn-icon .inline-emoji .emoji img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
}

/* Comment count badge */
.action-btn-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #2563eb !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    border-radius: 9px !important;
    line-height: 1 !important;
}

/* M70: on mobile/tablet the button label (Like/Comment) is hidden
   (.d-xl-inline-block), leaving just the icon centered in the button — the
   count used to sit inline next to that icon, floating in empty space
   rather than reading as "attached" to anything. Per the user's reference
   photo (a small accent circle overlapping the top-right corner of an icon,
   ringed in white, notification-badge style), pin it there instead: since
   the icon is horizontally centered in the button at this width, offsetting
   from the 50% center line lands it consistently on the icon's corner
   regardless of how wide the button itself is. Desktop (xl+, label visible)
   keeps the original inline pill-next-to-text layout untouched below. */
@media (max-width: 1199.98px) {
    .action-btn-badge {
        position: absolute !important;
        top: 2px !important;
        left: 50% !important;
        transform: translateX(4px) !important;
        min-width: 16px !important;
        height: 16px !important;
        padding: 0 4px !important;
        font-size: 10px !important;
        border: 2px solid #fff !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.18) !important;
        z-index: 2 !important;
    }
}

/* Emoji reactions popup — let Sngine JS handle positioning */

/* ===== SHARE DROPDOWN ===== */
.post-share-btn {
    position: relative !important;
    cursor: pointer !important;
}

.post-share-dropdown {
    display: none !important;
    position: absolute !important;
    bottom: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
    min-width: 180px !important;
    z-index: 9999 !important;
    overflow: hidden !important;
    border: 1px solid #e4e6eb !important;
}

.post-share-btn.share-open .post-share-dropdown {
    display: block !important;
}

.post-share-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1c1e21 !important;
    cursor: pointer !important;
    transition: background 0.12s ease !important;
}

.post-share-item:hover {
    background: #f0f2f5 !important;
}

.post-share-item i {
    width: 18px !important;
    color: #2563eb !important;
    font-size: 15px !important;
}

/* ===== POST DROPDOWN MENU ===== */
.action-dropdown-menu {
    min-width: 240px;
    border-radius: 12px !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.16) !important;
    border: 1px solid #e4e6eb !important;
    padding: 6px 0 !important;
    animation: slideDown 0.18s ease;
}

.action-dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    color: #1c1e21;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.12s ease;
    border-radius: 0;
}

.action-dropdown-menu .dropdown-item:hover {
    background: #f0f2f5;
}

.action-dropdown-menu .dropdown-item .action.no-desc {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.action-dropdown-menu .dropdown-divider {
    margin: 4px 0;
    border-color: #e4e6eb;
}

/* Pending/pinned icons */
.pending-icon,
.pin-icon,
.boosted-icon {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
}

/* ===== CREATE POST MODAL ===== */
.modal-content {
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.18) !important;
    overflow: hidden;
}
.modal-header {
    border-bottom: 1px solid #e4e6eb !important;
    padding: 14px 16px !important;
    position: relative;
}
.modal-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #1c1e21 !important;
    text-align: center !important;
    width: 100% !important;
}
.modal-header .btn-close {
    margin: 0 !important;
    background-color: #e4e6eb !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    padding: 10px !important;
}
.modal-body {
    padding: 0 !important;
}

/* ---- Avatar in publisher message — absolute to avoid Quill JS overriding flex ---- */
#publisher-box .publisher-message {
    position: relative !important;
    display: block !important;
    padding: 14px 16px 14px 74px !important;
    min-height: 80px !important;
}
#publisher-box .publisher-message .publisher-avatar {
    position: absolute !important;
    left: 16px !important;
    top: 14px !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
    float: none !important;
    margin: 0 !important;
    z-index: 1 !important;
    border: 3px solid #2563eb !important;
    box-shadow: none !important;
}
#publisher-box .publisher-message .colored-text-wrapper {
    display: block !important;
    width: 100% !important;
}

/* ---- Ensure textarea / Quill editor is fully interactive ---- */
#publisher-box .publisher-message .colored-text-wrapper,
#publisher-box .publisher-message .quill-editor,
#publisher-box .publisher-message .ql-editor,
#publisher-box .publisher-message textarea {
    pointer-events: auto !important;
    cursor: text !important;
    user-select: text !important;
}

/* ---- Input field visual styling (Quill editor) inside modal publisher ---- */
#publisher-box .publisher-message .colored-text-wrapper,
#publisher-box .publisher-message .quill-editor,
#publisher-box .publisher-message .ql-container,
#publisher-box .publisher-message .ql-container.ql-snow {
    background: #f0f2f5 !important;
    border-radius: 16px !important;
    border: none !important;
    min-height: 90px !important;
    height: auto !important;
    overflow: hidden !important;
}
#publisher-box .publisher-message .ql-editor {
    min-height: 90px !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
    color: #1c1e21 !important;
    line-height: 1.5 !important;
}
#publisher-box .publisher-message .ql-editor.ql-blank::before {
    font-style: normal !important;
    color: #8a8d91 !important;
    position: absolute !important;
    top: 14px !important;
    left: 16px !important;
    right: 16px !important;
    pointer-events: none !important;
}

/* ---- Force grid tabs visible in modal ---- */
#publisher-wapper-modal .publisher-slider {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    height: auto !important;
}
#publisher-wapper-modal .publisher-tools-tabs {
    display: block !important;
    padding: 8px 12px 4px !important;
}

/* Grid tab list */
#publisher-box .publisher-tools-tabs ul.row {
    margin: 0 -4px !important;
    list-style: none !important;
    padding: 0 !important;
}
#publisher-box .publisher-tools-tabs li {
    padding: 0 4px !important;
    margin-bottom: 8px !important;
}
#publisher-box .publisher-tools-tab {
    background: #f0f2f5 !important;
    border-radius: 12px !important;
    padding: 11px 13px !important;
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1c1e21 !important;
    cursor: pointer;
    transition: background 0.15s ease !important;
    border: none !important;
    text-decoration: none !important;
    width: 100%;
    position: relative !important;  /* CRITICAL: contains hidden file input for uploader tabs */
    overflow: hidden !important;
}
#publisher-box .publisher-tools-tab:hover {
    background: #e4e6eb !important;
}

/* Contain file input inside the icon square only */
#publisher-box .publisher-tools-tabs .publisher-tools-tab span.js_x-uploader {
    position: relative !important;
    z-index: 1 !important;
}

/* Colored icon squares — ONLY in grid tabs, not toolbar */
#publisher-box .publisher-tools-tabs .publisher-tools-tab .main-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 7px !important;
    background: #2563eb !important;
    margin-right: 0 !important;
}
#publisher-box .publisher-tools-tabs .publisher-tools-tab .main-icon *,
#publisher-box .publisher-tools-tabs .publisher-tools-tab .main-icon svg {
    color: #fff !important;
    fill: #fff !important;
}

/* Per-tab icon colors — scoped to grid tabs only */
#publisher-box .publisher-tools-tabs .publisher-tools-tab[data-tab="live"] .main-icon        { background: #2563eb !important; }
#publisher-box .publisher-tools-tabs .publisher-tools-tab[data-tab="photos"] .main-icon      { background: #27ae60 !important; }
#publisher-box .publisher-tools-tabs .publisher-tools-tab[data-tab="album"] .main-icon       { background: #8e44ad !important; }
#publisher-box .publisher-tools-tabs .js_publisher-feelings .main-icon                       { background: #f39c12 !important; }
#publisher-box .publisher-tools-tabs .publisher-tools-tab[data-tab="colored"] .main-icon     { background: #e91e8c !important; }
#publisher-box .publisher-tools-tabs .publisher-tools-tab[data-tab="voice_notes"] .main-icon { background: #16a085 !important; }
#publisher-box .publisher-tools-tabs .publisher-tools-tab[data-tab="gif"] .main-icon         { background: #2c3e50 !important; }
#publisher-box .publisher-tools-tabs .publisher-tools-tab[data-tab="blog"] .main-icon        { background: #2980b9 !important; }
#publisher-box .publisher-tools-tabs .publisher-tools-tab[data-tab="product"] .main-icon     { background: #2563eb !important; }
#publisher-box .publisher-tools-tabs .publisher-tools-tab[data-tab="funding"] .main-icon     { background: #27ae60 !important; }
#publisher-box .publisher-tools-tabs .publisher-tools-tab[data-tab="location"] .main-icon    { background: #e67e22 !important; }
#publisher-box .publisher-tools-tabs .publisher-tools-tab[data-tab="poll"] .main-icon        { background: #1abc9c !important; }
#publisher-box .publisher-tools-tabs .publisher-tools-tab[data-tab="reel"] .main-icon        { background: #9b59b6 !important; }
#publisher-box .publisher-tools-tabs .publisher-tools-tab[data-tab="video"] .main-icon       { background: #1d4ed8 !important; }
#publisher-box .publisher-tools-tabs .publisher-tools-tab[data-tab="audio"] .main-icon       { background: #2ecc71 !important; }
#publisher-box .publisher-tools-tabs .publisher-tools-tab[data-tab="file"] .main-icon        { background: #3498db !important; }
#publisher-box .publisher-tools-tabs .publisher-tools-tab[data-tab="offer"] .main-icon       { background: #2563eb !important; }
#publisher-box .publisher-tools-tabs .publisher-tools-tab[data-tab="job"] .main-icon         { background: #2980b9 !important; }
#publisher-box .publisher-tools-tabs .publisher-tools-tab[data-tab="ai_image"] .main-icon    { background: #6c3483 !important; }
#publisher-box .publisher-tools-tabs .publisher-tools-tab[data-tab="ai"] .main-icon          { background: #6c3483 !important; }
#publisher-box .publisher-tools-tabs .publisher-tools-tab[data-tab="courses"] .main-icon     { background: #d35400 !important; }

/* Load more */
#publisher-box .btn-load-more {
    background: #f0f2f5 !important;
    color: #2563eb !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    border: none !important;
    padding: 12px !important;
    width: calc(100% - 24px) !important;
    margin: 0 12px 12px !important;
    font-size: 14px !important;
}

/* Footer */
#publisher-box .publisher-footer {
    border-top: 1px solid #e4e6eb !important;
    padding: 12px 16px !important;
}
#publisher-box .form-table-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}
#publisher-box .form-table-row .avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Send button */
#publisher-box .publisher-footer-buttons .btn-primary {
    background: #2563eb !important;
    border-color: #2563eb !important;
    border-radius: 12px !important;
    padding: 12px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    width: 100% !important;
}
#publisher-box .publisher-footer-buttons .btn-primary:hover {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
}

/* ===== DUMMY PUBLISHER CARD ===== */
.dummy-publisher-trigger {
    cursor: pointer;
}

.dummy-publisher-card {
    padding: 0 !important;
    overflow: hidden;
}

/* Top row: avatar + placeholder input */
.dummy-publisher-top {
    position: relative;
    padding: 10px 14px 10px 66px;
}

.dummy-pub-avatar {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    float: none !important;
    display: block !important;
}

.dummy-publisher-input {
    display: block;
    background: #f0f2f5;
    border-radius: 22px;
    padding: 10px 18px;
    font-size: 15px;
    color: #8a8d91;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    width: 100%;
    box-sizing: border-box;
}

/* Bottom row: Photo / Video / Feeling buttons */
.dummy-publisher-actions {
    display: flex;
    align-items: center;
    border-top: 1px solid #e4e6eb;
    padding: 4px 8px;
    gap: 4px;
}

.dummy-publisher-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #65676b;
    transition: background 0.15s ease;
}

.dummy-publisher-trigger:hover .dummy-publisher-btn {
    background: #f0f2f5;
    color: #1c1e21;
}

.dummy-publisher-btn .dummy-pub-icon,
.dummy-publisher-btn .dummy-pub-icon * {
    color: #2563eb !important;
    fill: #2563eb !important;
}

/* ===================================================
   HEADER DROPDOWN WIDGETS
   =================================================== */

/* M5: the base theme ships two conflicting rules for the exact same
   selector — one setting `.navbar-wrapper>ul>li.dropdown{position:static}`
   and another setting `position:relative` right after it. Whichever wins
   the cascade determines whether the notification/messages/add dropdown
   panel anchors to its own icon button or falls back to some other
   positioned ancestor up the page — which is exactly the "menu background
   not at right positions on hover" bug. Force it here so the anchor is
   always correct regardless of stylesheet load order. */
.navbar-wrapper > ul > li.dropdown {
    position: relative !important;
}

/* General dropdown-widget shell — exclude search dropdown */
.dropdown-menu.dropdown-widget:not(.dropdown-search) {
    width: 300px !important;
    max-width: 95vw !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.20) !important;
    border: 1px solid #e4e6eb !important;
    overflow: hidden !important;
    padding: 10px !important;
    margin-top: 8px !important;
}
.dropdown-menu.user-dropdown-menu {
    width: 320px !important;
    max-width: 95vw !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.20) !important;
    border: 1px solid #e4e6eb !important;
    padding: 12px !important;
    margin-top: 8px !important;
}

/* Widget header */
.dropdown-widget .dropdown-widget-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid #e4e6eb !important;
    background: #fff !important;
    gap: 10px !important;
}

.dropdown-widget .dropdown-widget-header .title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1c1e21 !important;
    flex: 1 !important;
    margin: 0 !important;
    float: none !important;
}

/* Close button */
.dropdown-widget-close {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    border: none !important;
    background: #f0f2f5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 13px !important;
    color: #555 !important;
    flex-shrink: 0 !important;
    transition: background 0.2s ease !important;
    padding: 0 !important;
}
.dropdown-widget-close:hover {
    background: #e4e6eb !important;
}

/* Widget body */
.dropdown-widget .dropdown-widget-body {
    background: #fff !important;
}
.dropdown-widget .dropdown-widget-body .js_scroller {
    max-height: 380px !important;
    overflow-y: auto !important;
    padding: 6px 0 !important;
}

/* Widget footer */
.dropdown-widget .dropdown-widget-footer {
    display: block !important;
    text-align: center !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #2563eb !important;
    border-top: 1px solid #e4e6eb !important;
    text-decoration: none !important;
    background: #fff !important;
}
.dropdown-widget .dropdown-widget-footer:hover {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}

/* ===== NOTIFICATIONS WIDGET — tg-notif-* classes (no Sngine float inheritance) ===== */
.tg-notif-item {
    list-style: none !important;
    border: none !important;
    padding: 0 !important;
}
.tg-notif-item.tg-notif-unread {
    background: #eff6ff !important;
}
.tg-notif-link {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 10px 16px !important;
    text-decoration: none !important;
    color: inherit !important;
    border-bottom: 1px solid #f5f5f5 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.tg-notif-link:hover {
    background: #f6f7f8 !important;
    text-decoration: none !important;
}
.tg-notif-unread .tg-notif-link:hover {
    background: #ffe8e8 !important;
}
.tg-notif-avatar {
    flex-shrink: 0 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
}
.tg-notif-body {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}
.tg-notif-name {
    display: block !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1c1e21 !important;
    word-break: break-word !important;
    line-height: 1.3 !important;
}
.tg-notif-unread .tg-notif-name {
    color: #2563eb !important;
}
.tg-notif-msg {
    font-size: 13px !important;
    color: #65676b !important;
    line-height: 1.4 !important;
    margin-top: 2px !important;
    word-break: break-word !important;
}
.tg-notif-reaction {
    margin-right: 4px !important;
}
.tg-notif-time {
    font-size: 11px !important;
    color: #aaa !important;
    margin-left: 4px !important;
    white-space: nowrap !important;
}

/* ── FALLBACK for sites still using original __feeds_notification.tpl ──────── */
/* Keeps working until plugin re-install updates the template to tg-notif-*    */
.js_live-notifications .feeds-item {
    list-style: none !important;
    border: none !important;
    padding: 0 !important;
}
.js_live-notifications .feeds-item.unread {
    background: #eff6ff !important;
}
.js_live-notifications .feeds-item .data-container {
    display: flex !important;
    float: none !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 10px 16px !important;
    text-decoration: none !important;
    color: inherit !important;
    border-bottom: 1px solid #f5f5f5 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.js_live-notifications .feeds-item .data-container:hover {
    background: #f6f7f8 !important;
}
.js_live-notifications .feeds-item .data-avatar {
    flex-shrink: 0 !important;
    float: none !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    display: block !important;
}
.js_live-notifications .feeds-item .data-avatar img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
    float: none !important;
}
.js_live-notifications .feeds-item .data-content {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}
.js_live-notifications .feeds-item .data-content .name {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1c1e21 !important;
    display: block !important;
    word-break: break-word !important;
}
.js_live-notifications .feeds-item.unread .data-content .name {
    color: #2563eb !important;
}
.js_live-notifications .feeds-item .data-content > div {
    font-size: 13px !important;
    color: #65676b !important;
    line-height: 1.4 !important;
    word-break: break-word !important;
}
.js_live-notifications .feeds-item .data-content .time {
    font-size: 11px !important;
    color: #aaa !important;
    margin-top: 2px !important;
    display: block !important;
}
.js_live-notifications .feeds-item .data-content > div > i {
    display: none !important;
}

/* ===== MESSAGES WIDGET ===== */
/* Unity blue header — 3-class specificity beats .dropdown-widget .dropdown-widget-header (2-class) */
.dropdown-widget .dropdown-widget-header.messages-widget-header,
.messages-widget-header {
    background: #2563eb !important;
    border-bottom: none !important;
    padding: 16px 20px !important;
    border-radius: 8px 8px 0 0 !important;
}
.dropdown-widget .dropdown-widget-header.messages-widget-header .title,
.messages-widget-header .title {
    color: #fff !important;
    font-size: 20px !important;
    font-weight: 700 !important;
}
/* Close button — white circle */
.messages-close-btn {
    background: rgba(255,255,255,0.85) !important;
    color: #555 !important;
    border: none !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    cursor: pointer !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    transition: background 0.2s ease !important;
}
.messages-close-btn:hover {
    background: #fff !important;
}

/* Search bar wrapper */
.messages-widget-search {
    padding: 10px 14px !important;
    background: #fff !important;
    border-bottom: 1px solid #e4e6eb !important;
}
/* Pill-shaped search input */
.messages-search-pill {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #f0f2f5 !important;
    border-radius: 20px !important;
    padding: 8px 14px !important;
}
.messages-search-pill i {
    color: #bbb !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
}
.messages-search-pill input {
    flex: 1 !important;
    border: none !important;
    outline: none !important;
    font-size: 14px !important;
    color: #555 !important;
    background: transparent !important;
}
.messages-search-pill input::placeholder {
    color: #bbb !important;
}

/* ===== CONVERSATION LIST — tg-conv-* (inline styles handle layout) ===== */
.tg-conv-link:hover {
    background: #f7f8fa !important;
}
.tg-conv-unread .tg-conv-link:hover {
    background: #ffe8e8 !important;
}
.tg-conv-unread .tg-conv-preview {
    font-weight: 600 !important;
    color: #1c1e21 !important;
}

/* ── FALLBACK for sites still using original __feeds_conversation.tpl ──────── */
.js_live-messages .feeds-item {
    list-style: none !important;
    border: none !important;
    padding: 0 !important;
}
.js_live-messages .feeds-item .data-container {
    display: flex !important;
    float: none !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    text-decoration: none !important;
    color: inherit !important;
    border-bottom: 1px solid #f5f5f5 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.js_live-messages .feeds-item .data-container:hover {
    background: #f7f8fa !important;
}
.js_live-messages .feeds-item .data-avatar {
    flex-shrink: 0 !important;
    float: none !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    display: block !important;
}
.js_live-messages .feeds-item .data-avatar img {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
    float: none !important;
}
.js_live-messages .feeds-item .data-content {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    overflow: hidden !important;
}
.js_live-messages .feeds-item .data-content .name {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1c1e21 !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.js_live-messages .feeds-item .data-content .time {
    font-size: 11px !important;
    color: #aaa !important;
    display: block !important;
    margin-top: 2px !important;
}
.js_live-messages .feeds-item .data-content > div {
    font-size: 13px !important;
    color: #65676b !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* ── FALLBACK for old _header.friend_requests.tpl sent-requests section ─────── */
/* Covers the intermediate version that uses .feeds-item + .data-container */
.js_live-requests #friends-tab-sent .feeds-item {
    list-style: none !important;
    border: none !important;
    padding: 0 !important;
}
.js_live-requests #friends-tab-sent .feeds-item .data-container {
    display: flex !important;
    float: none !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.js_live-requests #friends-tab-sent .feeds-item .data-avatar {
    flex-shrink: 0 !important;
    float: none !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    display: block !important;
    order: 0 !important;
}
.js_live-requests #friends-tab-sent .feeds-item .data-avatar img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
    float: none !important;
}
.js_live-requests #friends-tab-sent .feeds-item .data-content {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    overflow: hidden !important;
    order: 1 !important;
}
.js_live-requests #friends-tab-sent .feeds-item .data-content .name {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1c1e21 !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.js_live-requests #friends-tab-sent .feeds-item .float-end,
.js_live-requests #friends-tab-sent .feeds-item [class*="float"] {
    float: none !important;
    flex-shrink: 0 !important;
    order: 2 !important;
}

/* ===== STORY VIEWER — DELETE BUTTON & TEXT OVERLAY ===== */
/* Delete button injected into .head .right of the Zuck viewer */
.story-viewer-delete-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    background: rgba(37, 99, 235, 0.85) !important;
    color: #fff !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    font-size: 14px !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
    transition: background 0.2s ease !important;
    vertical-align: middle !important;
}
.story-viewer-delete-btn:hover {
    background: #1d4ed8 !important;
}

/* Text overlay at the bottom of the story */
.story-viewer-text-wrap {
    position: absolute !important;
    bottom: 70px !important;
    left: 0 !important;
    right: 0 !important;
    display: flex !important;
    justify-content: center !important;
    padding: 0 20px !important;
    z-index: 9999 !important;
    pointer-events: none !important;
}
.story-viewer-text {
    background: rgba(0, 0, 0, 0.55) !important;
    color: #fff !important;
    padding: 8px 20px !important;
    border-radius: 20px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-align: center !important;
    max-width: 85% !important;
    word-break: break-word !important;
    line-height: 1.4 !important;
}

/* ===== FRIEND REQUESTS WIDGET ===== */

/* Override .navbar-wrapper > ul > li { width:40px !important } which bleeds into dropdowns */
.js_live-requests #friends-tab-requests ul > li {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}
.js_live-requests #friends-tab-sent ul > li {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

/* Force the <ul> to fill the full dropdown width */
.js_live-requests .dropdown-widget-body ul {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* Each <li> must be full-width (block, not shrink-to-content) */
.js_live-requests .feeds-item {
    list-style: none !important;
    border: none !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* Row container: full-width flex, avatar + content side by side */
.js_live-requests .feeds-item .data-container {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid #f0f2f5 !important;
    transition: background 0.12s !important;
    cursor: pointer !important;
}
.js_live-requests .feeds-item .data-container:hover {
    background: #fafafa !important;
}

/* Avatar: fixed 44px circle */
.js_live-requests .feeds-item .data-avatar {
    flex-shrink: 0 !important;
    display: block !important;
    line-height: 0 !important;
}
.js_live-requests .feeds-item .data-avatar img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
}

/* data-content: fills remaining width after avatar+gap */
.js_live-requests .feeds-item .data-content {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    overflow: hidden !important;
}

/* Friend Requests tab: name (order 1, grows) | buttons (order 2, fixed) */
.js_live-requests #friends-tab-requests .feeds-item .data-content .mt5 {
    flex: 1 !important;
    order: 1 !important;
    min-width: 0 !important;
}
.js_live-requests #friends-tab-requests .feeds-item .data-content .mt5 .name a {
    display: block !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #1c1e21 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.3 !important;
}
.js_live-requests #friends-tab-requests .feeds-item .data-content .mt5 .name a:hover {
    color: #2563eb !important;
}

/* Buttons group: pushed to the right */
.js_live-requests #friends-tab-requests .feeds-item .data-content .float-end {
    order: 2 !important;
    float: none !important;
    flex-shrink: 0 !important;
    display: flex !important;
    gap: 5px !important;
    align-items: center !important;
}

/* Hide mutual friends / extra info divs in the dropdown (too cluttered) */
.js_live-requests #friends-tab-requests .feeds-item .data-content > div:not(.float-end):not(.mt5) {
    display: none !important;
}

/* Confirm button — Unity blue accent */
.js_live-requests .js_friend-accept {
    background: #2563eb !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 5px 11px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background 0.15s !important;
    line-height: 1.4 !important;
}
.js_live-requests .js_friend-accept:hover {
    background: #1d4ed8 !important;
}

/* Decline button — neutral grey */
.js_live-requests .js_friend-decline {
    background: #f0f2f5 !important;
    color: #444 !important;
    border: 1px solid #dde0e8 !important;
    border-radius: 6px !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background 0.15s !important;
    line-height: 1.4 !important;
}
.js_live-requests .js_friend-decline:hover {
    background: #e4e6eb !important;
}

/* ===== USER MENU DROPDOWN ===== */
.user-dropdown-menu {
    min-width: 240px !important;
    height: auto !important;
    min-height: 0 !important;
}
/* Profile header — gradient card like trendgo */
.user-dropdown-profile {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px !important;
    border-radius: 12px !important;
    background: linear-gradient(145deg, #eff6ff, #dbeafe) !important;
    text-decoration: none !important;
    border: none !important;
    margin-bottom: 0 !important;
    transition: background 0.2s ease !important;
}
.user-dropdown-avatar {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    border: 3px solid #2563eb !important;
    box-shadow: none !important;
}
.user-dropdown-info {
    flex: 1 !important;
    min-width: 0 !important;
}
.user-dropdown-name {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #333 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.user-dropdown-handle {
    font-size: 13px !important;
    color: #888 !important;
    margin-top: 2px !important;
}
.user-dropdown-profile:hover {
    background: linear-gradient(145deg, #ffeaea, #ffdcdc) !important;
}

/* User menu dropdown items — match trendgo .user-menu-item */
.user-dropdown-menu .dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #333 !important;
    transition: background 0.2s ease !important;
    white-space: nowrap !important;
}
.user-dropdown-menu .dropdown-item:hover {
    background: linear-gradient(145deg, #eff6ff, #dbeafe) !important;
    color: #333 !important;
}
/* Upgrade to Pro — trendgo .pro-item */
.user-dropdown-menu .dropdown-item.upgrade-pro-item {
    background: linear-gradient(145deg, #fff9e6, #fff3cc) !important;
    color: #333 !important;
}
.user-dropdown-menu .dropdown-item.upgrade-pro-item:hover {
    background: linear-gradient(145deg, #fff3cc, #ffe89a) !important;
}
/* Crown icon is gold like trendgo */
.user-dropdown-menu .upgrade-pro-item .main-icon {
    color: #f39c12 !important;
}
.user-dropdown-menu .upgrade-pro-item .main-icon path,
.user-dropdown-menu .upgrade-pro-item .main-icon circle,
.user-dropdown-menu .upgrade-pro-item .main-icon rect {
    fill: #f39c12 !important;
}
/* Verified/PRO name badges (verified_badge.svg, pro_badge.svg) — both SVG
   source files carry a hardcoded width="512" height="512" on the root
   <svg> tag, so the width="20px" height="20px" passed into the
   __svg_icons.tpl include never actually reaches them; whatever DOES
   constrain them on screen is a global sizing rule elsewhere, tuned for
   icons in general rather than a small inline badge sitting right next to
   a username, so it renders oversized relative to the text next to it. */
.pro-badge, .verified-badge {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
}
.pro-badge svg, .verified-badge svg {
    width: 15px !important;
    height: 15px !important;
}

/* NEW badge — trendgo .pro-badge: radius 6px, Unity blue gradient */
.user-dropdown-menu .upgrade-pro-new {
    margin-left: auto !important;
    flex: 0 0 auto !important;
    background: linear-gradient(145deg, #2563eb, #1d4ed8) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
    line-height: 1.5 !important;
    display: inline-block !important;
    width: fit-content !important;
    align-self: center !important;
}
/* Points / Wallet value — trendgo .menu-value */
.user-dropdown-menu .dropdown-item-value {
    margin-left: auto !important;
    font-weight: 600 !important;
    color: #2563eb !important;
    font-size: 14px !important;
}
/* All icons use the Unity blue accent by default */
.user-dropdown-menu .dropdown-item .main-icon {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    color: #2563eb !important;
}
.user-dropdown-menu .dropdown-item .main-icon path,
.user-dropdown-menu .dropdown-item .main-icon circle,
.user-dropdown-menu .dropdown-item .main-icon rect {
    fill: #2563eb !important;
}
.user-dropdown-menu .dropdown-divider {
    margin: 8px 0 !important;
    border-color: #e4e6eb !important;
}

/* Create dropdown menu */
.navbar-wrapper .d-none.d-xxl-block .dropdown-menu {
    width: 280px !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.15) !important;
    border: 1px solid #e4e6eb !important;
    padding: 8px 0 !important;
    margin-top: 10px !important;
}
.navbar-wrapper .d-none.d-xxl-block .dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1c1e21 !important;
    transition: background 0.15s ease !important;
}
.navbar-wrapper .d-none.d-xxl-block .dropdown-item:hover {
    background: #eff6ff !important;
    color: #2563eb !important;
}
.navbar-wrapper .d-none.d-xxl-block .dropdown-item .main-icon {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
}
.navbar-wrapper .d-none.d-xxl-block .dropdown-item .main-icon path,
.navbar-wrapper .d-none.d-xxl-block .dropdown-item .main-icon circle,
.navbar-wrapper .d-none.d-xxl-block .dropdown-item .main-icon rect {
    fill: #2563eb !important;
}

/* ===== SIDEBAR EMPTY STATE ===== */
.right-sidebar .sidebar-empty {
    color: #aaa !important;
    font-size: 13px !important;
    text-align: center !important;
    padding: 12px 0 !important;
    margin: 0 !important;
}

/* ===== CREATE NEW STORY MODAL ===== */
form.publisher-mini .modal-body {
    padding-left: 24px !important;
    padding-right: 24px !important;
}

form.publisher-mini .modal-footer {
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* ===== SIDEBAR NAV HOVER ===== */
.side-nav li > a,
.side-nav li > .static {
    border-radius: 10px !important;
    margin: 1px 8px !important;
    padding: 12px 16px !important;
    transition: background 0.15s ease !important;
}

.side-nav li > a:hover {
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07) !important;
    color: #2563eb !important;
    text-decoration: none !important;
}

.side-nav li.active > a {
    background: #eff6ff !important;
    color: #2563eb !important;
}

/* ===================================================
   FRIENDS WIDGET TABS
   =================================================== */
.friends-widget-tabs {
    display: flex !important;
    border-bottom: 2px solid #f0f2f5 !important;
    padding: 0 8px !important;
    background: #fff !important;
}
.friends-tab {
    flex: 1 !important;
    background: none !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    padding: 10px 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #65676b !important;
    cursor: pointer !important;
    margin-bottom: -2px !important;
    transition: color 0.2s, border-color 0.2s !important;
    white-space: nowrap !important;
}
.friends-tab.active {
    color: #2563eb !important;
    border-bottom-color: #2563eb !important;
}
.friends-tab .tab-badge {
    display: inline-block !important;
    background: #2563eb !important;
    color: #fff !important;
    border-radius: 20px !important;
    padding: 1px 7px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    margin-left: 4px !important;
    vertical-align: middle !important;
}
.friends-tab-content {
    display: none !important;
}
.friends-tab-content.active {
    display: block !important;
}

/* ===== SENT REQUESTS — tg-sr-* classes (li is the flex container, no float) ===== */
.tg-sr-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 16px !important;
    list-style: none !important;
    border-bottom: 1px solid #f5f5f5 !important;
}
.tg-sr-avatar {
    flex-shrink: 0 !important;
    display: block !important;
    text-decoration: none !important;
}
.tg-sr-avatar img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
}
.tg-sr-info {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}
.tg-sr-name {
    display: block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1c1e21 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.tg-sr-name:hover {
    text-decoration: underline !important;
    color: #2563eb !important;
}
.tg-sr-mutual {
    display: block !important;
    font-size: 12px !important;
    color: #8a8d91 !important;
    margin-top: 2px !important;
}
.tg-sr-cancel {
    flex-shrink: 0 !important;
    background: #f0f2f5 !important;
    border: 1px solid #d0d3d8 !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #333 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background 0.15s, color 0.15s !important;
}
.tg-sr-cancel:hover {
    background: #2563eb !important;
    color: #fff !important;
    border-color: #2563eb !important;
}

/* ===================================================
   LOGO WRAPPER — flex row so logo + home btn sit side by side
   =================================================== */
.logo-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    overflow: visible !important;
}

/* ===================================================
   HEADER HOME BUTTON
   =================================================== */
.header-home-btn {
    display: none !important;
}
@media (min-width: 768px) {
    .header-home-btn {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        height: var(--uc-control-h) !important;
        padding: 0 16px !important;
        background: var(--uc-primary) !important;
        color: var(--uc-text-on-brand) !important;
        border-radius: var(--uc-radius-pill) !important;
        font-weight: var(--uc-weight-semi) !important;
        font-size: var(--uc-text-sm) !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        transition: background 0.2s ease !important;
    }
    .header-home-btn:hover {
        background: var(--uc-primary-hover) !important;
        color: var(--uc-text-on-brand) !important;
        text-decoration: none !important;
    }
}

/* ===================================================
   MOBILE HEADER ALIGNMENT
   Pulls the offcanvas menu icon closer to the left edge and gives the
   right-side nav icons (notifications etc.) more breathing room so the
   last one isn't pushed against/clipped at the screen edge.
   =================================================== */
@media (max-width: 767.98px) {
    /* A little breathing room from the very top edge for the whole row
       (logo on the left, grid/add-friend/messages/bell icons on the right)
       instead of sitting flush against the top. */
    .main-header {
        padding-top: 3px !important;
        padding-bottom: 9px !important;
        /* .main-header is position:fixed with a base height:70px sized for
           the desktop logo (line-height:70px etc). The mobile icon row only
           actually needs ~50px (38px row + 6+6 padding), but nothing here
           was shrinking the box itself - so .container (the row) sat at the
           TOP of a still-70px-tall bar, leaving ~20px of dead empty space
           between the icon row and the header's own bottom edge. That's
           the "gap" under the logo/icons: not spacing to the page content,
           spacing INSIDE the header that was never reclaimed. */
        height: 50px !important;
    }
    /* body's padding-top reserves space for the fixed header (70px to
       match its base height) so page content starts right below it
       instead of sliding underneath. Has to shrink by the same 20px the
       header just did, or content would now start 20px too low. */
    body {
        padding-top: 50px !important;
    }
    /* The page content wrapper below the header carries a core "mt20"
       (margin-top: 20px) utility class, which reads as a noticeably big
       gap before the stories card on a small phone screen. Tighten it up
       on mobile only — desktop keeps the original spacing. */
    .sg-offcanvas.mt20 {
        margin-top: 8px !important;
    }
    /* M82: post/video cards were sitting inside the default Bootstrap
       .container side padding (12px each side), on top of the mobile
       browser's own scrollbar allowance — leaving a wide dead strip of
       whitespace down both edges of every card. Shrinking just this
       outer container's padding widens every card at once (they all
       inherit their width from it), giving a tighter, more Facebook-like
       edge-to-edge feed on phones. Desktop is untouched (media-scoped). */
    .sg-offcanvas.container {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
    .main-header .container,
    .main-header .container-fluid {
        padding-left: 8px !important;
        padding-right: 8px !important;
        overflow: visible !important;
    }
    .main-header .row {
        overflow: visible !important;
        align-items: center !important;
    }
    /* Belt-and-braces: align-items on the row should already vertically
       center both the logo column and the icon-row column, but force it
       on the columns themselves too (align-self) in case anything upstream
       (a stale base rule, a fixed height/padding on the column) stops that
       from reaching them. */
    .main-header .row > [class*="col-"] {
        align-self: center !important;
        display: flex !important;
    }
    /* Both the logo (left) and icon row (right) sit in separate Bootstrap
       columns; giving them the exact same height keeps them on the same
       visual line regardless of any padding/line-height differences
       between them (both already center their own content via
       align-items: center above). */
    .logo-wrapper,
    .navbar-wrapper {
        height: 38px !important;
        min-height: 38px !important;
    }
    /* The hamburger button picks up the generic .menu-icon style meant for
       sidebar submenu icons (gray gradient box + inset border) — looks like
       a boxed button next to the plain logo text. Strip that down to a
       clean transparent icon here in the header specifically; sidebar
       usages of .menu-icon are untouched. */
    .logo-wrapper .menu-icon {
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 8px !important;
        color: #1c1e21 !important;
        transition: background 0.15s ease !important;
    }
    /* M5 (v2): user reported that hovering the hamburger revealed a grey
       box sitting in a different spot than the visible icon/logo — a sign
       that this hover fill (an artifact of the old boxed-button style) was
       exposing a stale hit-box. Removed entirely per explicit request. */
    .logo-wrapper .menu-icon:hover,
    .logo-wrapper .menu-icon:active {
        background: transparent !important;
    }
    .logo-wrapper .menu-icon i {
        width: auto !important;
        height: auto !important;
    }
    .logo-wrapper {
        position: relative !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
        gap: 8px !important;
        overflow: visible !important;
    }
    /* Smaller logo, forced into normal (non-overlapping) flex flow after
       the menu icon, with its own higher stacking context so it can never
       render underneath the icon even if something else on the page
       tries to position either of them absolutely. */
    .logo-wrapper .menu-icon {
        position: static !important;
        flex: 0 0 auto !important;
        width: 32px !important;
        height: 32px !important;
        z-index: 1 !important;
        order: 1 !important;
    }
    .logo-wrapper .logo {
        position: static !important;
        /* M5 (v6): every margin-top guess (0, -3, -6, -12) missed, because
           flexbox align-items:center on a single text node depends on exact
           font-metric details that are impossible to nail blind. Switching
           technique entirely: line-height set equal to the wrapper's own
           fixed height (38px) makes the text's line box EXACTLY fill that
           height, which centers it using the browser's normal text-layout
           math instead of a guessed offset stacked on top of flex
           centering. No more margin-top needed - removed. */
        display: block !important;
        flex: 0 1 auto !important;
        order: 2 !important;
        z-index: 2 !important;
        margin-left: 3px !important;
        margin-top: 0 !important;
        font-size: 22px !important;
        line-height: 38px !important;
        white-space: nowrap !important;
        overflow: visible !important;
        min-width: 0 !important;
        /* M5 (v2, superseded): the 14px value here was tuned against the
           OLD 70px-tall header before the height fix that trimmed it to
           50px - once that shipped, the frame it was measured against no
           longer existed, so it was pushing the logo well past center. */
    }
    .logo-wrapper .logo img {
        max-height: 26px !important;
        width: auto !important;
    }
    .logo-wrapper .header-home-btn {
        order: 3 !important;
    }
    .navbar-wrapper {
        justify-content: flex-end !important;
        overflow: visible !important;
    }
    /* Facebook-style icon row: evenly spaced circles instead of the cramped
       0-gap/1px-margin row from before. */
    .navbar-wrapper > ul {
        gap: 8px !important;
        overflow: visible !important;
    }
    .navbar-wrapper > ul > li:not(:has(.user-menu)) {
        margin: 0 !important;
        width: 38px !important;
        height: 38px !important;
        max-width: 38px !important;
        max-height: 38px !important;
    }
    /* NOTE: the "Add" (dots-grid) button draws its icon via a CSS
       background-image data-URI, not an inline SVG — an earlier version of
       this rule forced background-image:none on every nav icon (chasing
       what turned out to be a caching artifact, not a real dark-background
       bug) and that wiped out the dots-grid glyph entirely, leaving a
       blank circle. Excluded here via :not(.d-xxl-block). */
    /* M5 / D9 consistency: was a plain grey circle here regardless of what
       D9 set the same icons to on desktop (light-blue chip, blue icon, solid
       blue on hover). Match that here so the header looks the same design
       across breakpoints instead of switching to plain grey on mobile. */
    body .main-header .navbar-wrapper > ul > li:not(:has(.user-menu)):not(.d-xxl-block) > a {
        width: 38px !important;
        height: 38px !important;
        line-height: 38px !important;
        background-color: #eff6ff !important;
        border: none !important;
        box-shadow: none !important;
        transition: background-color 0.15s ease !important;
    }
    body .main-header .navbar-wrapper > ul > li:not(:has(.user-menu)):not(.d-xxl-block) > a:hover,
    body .main-header .navbar-wrapper > ul > li:not(:has(.user-menu)):not(.d-xxl-block) > a:active,
    body .main-header .navbar-wrapper > ul > li:not(:has(.user-menu)):not(.d-xxl-block) > a:focus {
        background-color: #2563eb !important;
    }
    body .main-header .navbar-wrapper > ul > li:not(:has(.user-menu)):not(.d-xxl-block) > a:hover .header-icon,
    body .main-header .navbar-wrapper > ul > li:not(:has(.user-menu)):not(.d-xxl-block) > a:hover .header-icon *,
    body .main-header .navbar-wrapper > ul > li:not(:has(.user-menu)):not(.d-xxl-block) > a:active .header-icon,
    body .main-header .navbar-wrapper > ul > li:not(:has(.user-menu)):not(.d-xxl-block) > a:active .header-icon * {
        color: #fff !important;
        fill: #fff !important;
    }
    /* The dots-grid Add button still gets the same circle size/spacing,
       just keeping its own background-image icon intact. */
    body .main-header .navbar-wrapper > ul > li.d-xxl-block > a {
        width: 38px !important;
        height: 38px !important;
        background-size: 20px 20px !important;
    }
    .navbar-wrapper > ul > li > a:not(.user-menu) .header-icon {
        width: 20px !important;
        height: 20px !important;
    }
    /* Force the glyph itself dark-on-light no matter what colored it was
       inheriting before — covers both SVG (path/circle/rect/polyline) and
       any icon-font (i) based icons. */
    body .main-header .navbar-wrapper > ul > li:not(:has(.user-menu)) > a .header-icon,
    body .main-header .navbar-wrapper > ul > li:not(:has(.user-menu)) > a .header-icon *,
    body .main-header .navbar-wrapper > ul > li:not(:has(.user-menu)) > a i {
        color: #2563eb !important;
        fill: #2563eb !important;
        stroke: #2563eb !important;
    }
}

/* ===================================================
   MOBILE OFFCANVAS SIDEBAR MENU
   On mobile the sidebar column (.sg-offcanvas-sidebar, holding the News
   Feed / Mine / Saved / Scheduled... nav card) renders as a full-width
   panel, but the nav list itself only takes up its old desktop-card width
   — leaving a large blank strip down the right side of the drawer. Cap the
   drawer at a normal mobile "drawer" width and make the card/list actually
   fill it, so there's no dead space.
   =================================================== */
@media (max-width: 767.98px) {
    .sg-offcanvas-sidebar {
        width: 86% !important;
        max-width: 340px !important;
    }
    .sg-offcanvas-sidebar .card,
    .sg-offcanvas-sidebar .main-side-nav-card,
    .sg-offcanvas-sidebar .card-body,
    .sg-offcanvas-sidebar .main-side-nav {
        width: 100% !important;
        max-width: 100% !important;
    }
}


/* ===== MARKETPLACE GRID ===== */
.marketplace-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 4px 0 20px;
}
.marketplace-item {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    border: 1px solid #e4e6eb;
    position: relative;
}
.marketplace-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(37,99,235,0.2);
    border-color: #2563eb;
}
.marketplace-photo {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
}
.marketplace-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.marketplace-item:hover .marketplace-photo img {
    transform: scale(1.05);
}
.marketplace-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.marketplace-badge.new    { background: linear-gradient(145deg,#2ecc71,#27ae60); }
.marketplace-badge.used   { background: linear-gradient(145deg,#f39c12,#e67e22); }
.marketplace-badge.digital{ background: linear-gradient(145deg,#3b82f6,#2563eb); }
.marketplace-badge.service{ background: linear-gradient(145deg,#8b5cf6,#7c3aed); }
.marketplace-info {
    padding: 14px 16px 16px;
}
.marketplace-title {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 8px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.marketplace-price {
    font-size: 20px;
    font-weight: 700;
    color: #2563eb;
    margin: 0 0 8px 0;
}
.marketplace-location {
    font-size: 13px;
    color: #888;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.marketplace-location i { font-size: 12px; color: #2563eb; }
.mkt-save-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
}
.mkt-save-btn button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    color: #555;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: color 0.2s;
}
.mkt-save-btn button:hover, .mkt-save-btn button .fas { color: #2563eb; }
@media (max-width: 1200px) { .marketplace-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 900px)  { .marketplace-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 576px)  { .marketplace-grid { grid-template-columns: 1fr; } }





/* ===== TRENDGO AUTH PAGES (sign-in / sign-up / landing) ===== */
/* Scoped to .sng-auth-page body to avoid affecting the main app */

/* Lock auth pages to viewport — no page scroll; zero the 70px sticky-nav padding */
html:has(.sng-sign-page-wrap),body.sng-auth-page{min-height:100vh!important;height:auto!important;padding-top:0!important;overflow-x:hidden!important;}

/* Wrapper */
.sng-sign-page-wrap{min-height:100vh;box-sizing:border-box;padding:0;background:linear-gradient(135deg,#f5f6f7 0%,#e9ebee 100%);display:flex;align-items:stretch;justify-content:center;overflow-x:hidden;}
/* hide the site footer links bar on the auth page only */
body.sng-auth-page .footer,body.sng-auth-page .footer-bottom-bar{display:none!important;}

/* Two-column container */
.login-container{display:grid;grid-template-columns:minmax(0,540px) 1fr;width:100%;max-width:none;min-height:100vh;background:#fff;border-radius:0;overflow:hidden;box-shadow:none;animation:sngContainerIn 0.8s ease;}
@keyframes sngContainerIn{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}

/* Left form panel */
.login-form{padding:40px 50px;display:flex;flex-direction:column;justify-content:center;min-width:0;animation:sngFormIn 0.8s ease 0.2s both;}
/* short sign-in form stays centered; tall sign-up form anchors to top so the bottom link is never clipped */
.login-form:has(.js_panel:not(.x-hidden) form[data-url="core/signup.php"]){justify-content:flex-start;}
@keyframes sngFormIn{from{opacity:0;transform:translateX(-20px);}to{opacity:1;transform:translateX(0);}}

/* Logo */
.sng-login-logo{display:block;margin-bottom:28px;font-size:30px;font-weight:800;color:#222;animation:sngLogoPop 0.6s ease 0.4s both;}
.sng-login-logo img{max-height:44px;width:auto;display:block;}
.sng-login-logo .logo-accent{color:#2563eb;}
@keyframes sngLogoPop{0%{opacity:0;transform:scale(0.8);}50%{transform:scale(1.05);}100%{opacity:1;transform:scale(1);}}

/* Heading */
.login-title{font-size:36px;font-weight:800;color:#222;margin:0 0 8px;letter-spacing:-.5px;line-height:1.15;}
.login-title-accent{color:#2563eb;}
.login-subtitle{font-size:14px;color:#666;line-height:1.6;margin:0 0 24px;}
.login-subtitle a{color:#2563eb;text-decoration:none;font-weight:600;}
/* Unity blue Google button */
.sng-social-section a[href*="connect/google"]{background:#2563eb!important;border-color:#2563eb!important;color:#fff!important;}
.sng-social-section a[href*="connect/google"]:hover{background:#1d4ed8!important;border-color:#1d4ed8!important;color:#fff!important;transform:translateY(-2px)!important;}
.sng-social-section a[href*="connect/google"] .main-icon,.sng-social-section a[href*="connect/google"] img{background:#fff;border-radius:50%;padding:2px;}

/* Social login section */
.sng-social-section{margin-bottom:20px;}
.sng-social-section a,.sng-social-section button:not(.sng-pw-toggle):not([type=submit]){display:flex!important;align-items:center!important;justify-content:center!important;gap:12px!important;padding:13px 20px!important;border:2px solid #e4e6eb!important;border-radius:12px!important;background:#fff!important;cursor:pointer!important;transition:all 0.3s ease!important;font-size:14px!important;font-weight:600!important;color:#333!important;text-decoration:none!important;width:100%!important;box-sizing:border-box!important;margin-bottom:10px!important;}
.sng-social-section a:hover,.sng-social-section button:not(.sng-pw-toggle):not([type=submit]):hover{border-color:#2563eb!important;background:linear-gradient(145deg,#eff6ff,#dbeafe)!important;transform:translateY(-2px)!important;box-shadow:0 4px 12px rgba(37,99,235,0.15)!important;color:#333!important;}
.sng-social-section a i,.sng-social-section button i{font-size:18px!important;}

/* Divider */
.sng-divider{display:flex;align-items:center;margin:0 0 20px;}
.sng-divider::before,.sng-divider::after{content:'';flex:1;height:1px;background:#e4e6eb;}
.sng-divider span{padding:0 16px;color:#888;font-size:13px;}

/* Form fields */
.sng-form-group{margin-bottom:20px;}
.sng-form-row{display:flex;gap:12px;margin-bottom:20px;}
.sng-form-row>.sng-form-group{flex:1;margin-bottom:0;}
.sng-input-wrap{position:relative;}
.sng-input-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#aaa;font-size:15px;transition:color 0.3s;pointer-events:none;}
.sng-input-wrap:focus-within .sng-input-icon{color:#2563eb;}
.sng-form-input{width:100%;padding:15px 15px 15px 46px;border:2px solid #e4e6eb;border-radius:12px;font-size:14px;outline:none;transition:all 0.3s;background:#f8f9fa;color:#333;box-sizing:border-box;}
.sng-form-input:focus{border-color:#2563eb;background:#fff;box-shadow:0 0 0 4px rgba(37,99,235,0.08);}
.sng-form-input-plain{width:100%;padding:15px;border:2px solid #e4e6eb;border-radius:12px;font-size:14px;outline:none;transition:all 0.3s;background:#f8f9fa;color:#333;box-sizing:border-box;}
.sng-form-input-plain:focus{border-color:#2563eb;background:#fff;box-shadow:0 0 0 4px rgba(37,99,235,0.08);}
.sng-form-select{width:100%;padding:14px 15px;border:2px solid #e4e6eb;border-radius:12px;font-size:14px;outline:none;transition:all 0.3s;background:#f8f9fa;color:#333;}
.sng-form-select:focus{border-color:#2563eb;background:#fff;box-shadow:0 0 0 4px rgba(37,99,235,0.08);}
.sng-pw-toggle{position:absolute;right:13px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#aaa;transition:color 0.3s;padding:4px;display:flex;align-items:center;}
.sng-pw-toggle:hover{color:#2563eb;}
.sng-pw-toggle svg{width:20px;height:20px;fill:currentColor;}
.sng-form-options{display:flex;justify-content:space-between;align-items:center;margin:4px 0 20px;font-size:13px;}
.sng-remember-me{display:flex;align-items:center;gap:7px;color:#666;cursor:pointer;transition:color 0.3s;margin:0;}
.sng-remember-me:hover{color:#2563eb;}
.sng-remember-me input{width:15px;height:15px;accent-color:#2563eb;cursor:pointer;margin:0;}
.sng-forgot-link{color:#2563eb;text-decoration:none;font-weight:600;transition:all 0.3s;position:relative;}
.sng-forgot-link::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background:#2563eb;transition:width 0.3s;}
.sng-forgot-link:hover{color:#1d4ed8;}
.sng-forgot-link:hover::after{width:100%;}
.sng-signin-btn{width:100%;padding:15px;background:linear-gradient(145deg,#2563eb,#1d4ed8);border:none;border-radius:12px;color:#fff;font-size:15px;font-weight:700;cursor:pointer;transition:all 0.3s;box-shadow:0 4px 12px rgba(37,99,235,0.35);position:relative;overflow:hidden;display:block;}
.sng-signin-btn::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,0.3);transform:translate(-50%,-50%);transition:width 0.6s,height 0.6s;}
.sng-signin-btn:hover::before{width:300px;height:300px;}
.sng-signin-btn:hover{background:linear-gradient(145deg,#1d4ed8,#1e40af);transform:translateY(-2px);box-shadow:0 6px 16px rgba(37,99,235,0.45);}
.sng-signin-btn:active{transform:translateY(0);}
.sng-switch-link{text-align:center;margin-top:18px;font-size:13px;color:#666;}
.sng-switch-link a{color:#2563eb;text-decoration:none;font-weight:700;transition:color 0.3s;}
.sng-switch-link a:hover{color:#1d4ed8;}
.sng-sign-page-wrap .alert-danger{margin-top:14px;border-radius:10px;font-size:13px;}
.sng-sign-page-wrap .alert-warning{border-radius:10px;margin-bottom:14px;font-size:13px;}

/* Right hero panel */
.login-hero{position:relative;background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 62%,#1e40af 100%);display:flex;align-items:center;padding:52px 50px;color:#fff;overflow:hidden;}
.login-hero::before{content:'';position:absolute;top:-140px;right:-140px;width:380px;height:380px;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%);border-radius:50%;pointer-events:none;}
.lh-content{position:relative;z-index:3;max-width:58%;animation:sngHeroIn .8s ease .2s both;}
@keyframes sngHeroIn{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}
.lh-title{font-size:38px;font-weight:800;line-height:1.16;margin:0 0 16px;letter-spacing:-.5px;}
.lh-title .gold{color:#ffd166;}
.lh-sub{font-size:15px;line-height:1.6;color:rgba(255,255,255,.9);margin:0 0 26px;max-width:430px;}
.lh-features{display:flex;flex-direction:column;gap:16px;margin-bottom:26px;}
.lh-feature{display:flex;align-items:flex-start;gap:14px;}
.lh-feature-icon{width:44px;height:44px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.18);color:#fff;font-size:17px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);}
.lh-feature-title{font-size:16px;font-weight:700;margin-bottom:2px;}
.lh-feature-desc{font-size:13px;color:rgba(255,255,255,.85);line-height:1.45;max-width:290px;}
.lh-pill{display:inline-flex;align-items:center;gap:13px;background:rgba(255,255,255,.15);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.25);border-radius:40px;padding:7px 24px 7px 7px;max-width:100%;}
.lh-pill-star{width:42px;height:42px;flex-shrink:0;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);}
.lh-pill-star i{color:#ffd166;font-size:17px;}
.lh-pill-txt{font-size:13px;font-weight:600;line-height:1.35;color:#fff;}
/* floating bubbles */
.lh-bubble{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.5),rgba(255,255,255,.1));pointer-events:none;z-index:1;}
.lh-bubble.b1{width:90px;height:90px;top:12%;right:22%;animation:lhFloat 9s ease-in-out infinite;}
.lh-bubble.b2{width:56px;height:56px;bottom:16%;right:8%;animation:lhFloat 7s ease-in-out infinite 1s;}
.lh-bubble.b3{width:120px;height:120px;bottom:-30px;right:34%;opacity:.5;animation:lhFloat 11s ease-in-out infinite .5s;}
.lh-bubble.b4{width:40px;height:40px;top:42%;right:2%;animation:lhFloat 6s ease-in-out infinite 2s;}
/* floating icons */
.lh-float{position:absolute;z-index:4;display:flex;align-items:center;justify-content:center;border-radius:18px;color:#fff;box-shadow:0 12px 30px rgba(0,0,0,.2);}
.lh-float i{font-size:22px;}
.lh-heart-1{width:58px;height:58px;background:linear-gradient(145deg,#60a5fa,#2563eb);top:15%;right:6%;animation:lhFloat 6s ease-in-out infinite;}
.lh-heart-2{width:72px;height:72px;background:linear-gradient(145deg,#93c5fd,#2563eb);bottom:20%;right:38%;animation:lhFloat 8s ease-in-out infinite 1s;}
.lh-heart-2 i{font-size:32px;}
.lh-chat{width:50px;height:50px;background:rgba(255,255,255,.92);color:#2563eb;top:5%;right:32%;animation:lhFloat 7s ease-in-out infinite .5s;}
.lh-bell{width:50px;height:50px;background:rgba(255,255,255,.92);color:#2563eb;top:54%;right:3%;animation:lhFloat 7.5s ease-in-out infinite 1.5s;}
@keyframes lhFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-16px);}}
/* phone mockup */
.lh-phone{position:absolute;z-index:2;right:100px;top:50%;transform:translateY(-50%) rotate(3deg);width:196px;height:396px;background:#111;border-radius:36px;padding:10px;box-shadow:0 30px 60px rgba(0,0,0,.35);}
.lh-phone-notch{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:74px;height:18px;background:#111;border-radius:0 0 12px 12px;z-index:2;}
.lh-phone-screen{width:100%;height:100%;background:#f3f4f6;border-radius:28px;overflow:hidden;padding:26px 10px 10px;}
.lh-app-tabs{display:flex;gap:3px;background:#fff;border-radius:12px;padding:6px;margin-bottom:8px;box-shadow:0 2px 6px rgba(0,0,0,.06);}
.lh-app-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:7px;font-weight:600;color:#888;padding:5px 1px;border-radius:8px;}
.lh-app-tab i{font-size:11px;color:#2563eb;}
.lh-app-tab.active{background:#2563eb;color:#fff;}
.lh-app-tab.active i{color:#fff;}
.lh-app-post{background:#fff;border-radius:12px;padding:8px;box-shadow:0 2px 6px rgba(0,0,0,.06);}
.lh-app-head{display:flex;align-items:center;gap:6px;margin-bottom:6px;}
.lh-app-ava{width:22px;height:22px;border-radius:50%;background:linear-gradient(145deg,#2563eb,#1d4ed8);flex-shrink:0;}
.lh-app-name{font-size:9px;font-weight:700;color:#222;}
.lh-app-time{font-size:7px;color:#999;}
.lh-app-media{height:118px;background:linear-gradient(135deg,#1d4ed8,#2563eb);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;font-weight:800;margin-bottom:6px;}
.lh-app-actions{display:flex;justify-content:space-between;font-size:8px;color:#888;font-weight:600;}
.lh-app-actions i{color:#2563eb;margin-right:2px;}

/* App store badges. Two copies, only one ever visible at a time:
   .lh-stores-desktop lives inside .login-hero, centered right under the
   feature icons (moved up from the bottom of the panel, per request) -
   glassy pill style matching .lh-pill so it reads as part of the hero,
   not bolted on. .lh-stores-mobile is a second copy sitting outside
   .login-hero as a fallback, because that whole panel - and everything
   in it, including the desktop badges - is display:none below 968px
   (see the media query below); without a second copy mobile visitors
   would never see the badges at all. It's hidden by default and only
   switched on inside that same breakpoint, styled as a solid dark pill
   since it sits on the plain page background there instead of the blue
   gradient. */
.sng-sign-stack{display:flex;flex-direction:column;align-items:center;width:100%;}
.lh-stores{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;}
.lh-stores-desktop{margin:18px 0 0;justify-content:flex-start;}
.lh-stores-mobile{display:none;width:100%;max-width:520px;margin:18px auto 0;}
.lh-store-badge{display:inline-flex;align-items:center;gap:10px;border-radius:12px;padding:8px 16px 8px 12px;text-decoration:none;transition:background .15s ease,transform .15s ease;}
.lh-store-badge:hover{transform:translateY(-2px);}
.lh-store-badge i{font-size:22px;flex-shrink:0;}
.lh-store-badge span{display:flex;flex-direction:column;line-height:1.2;font-size:13px;font-weight:700;}
.lh-store-badge span small{font-size:9px;font-weight:500;text-transform:uppercase;letter-spacing:.03em;opacity:.85;}
.lh-stores-desktop .lh-store-badge{background:rgba(255,255,255,.15);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.25);color:#fff;}
.lh-stores-desktop .lh-store-badge:hover{background:rgba(255,255,255,.24);color:#fff;}
.lh-stores-desktop .lh-store-badge span small{color:#fff;}
.lh-stores-mobile .lh-store-badge{background:#1c1c1e;border:1px solid #1c1c1e;color:#fff;}
.lh-stores-mobile .lh-store-badge:hover{background:#000;color:#fff;}
.lh-stores-mobile .lh-store-badge span small{color:#ccc;}
@media(max-width:480px){.lh-stores-mobile{padding:0 8px;}.lh-stores-mobile .lh-store-badge{padding:7px 12px 7px 10px;}.lh-stores-mobile .lh-store-badge span{font-size:12px;}}

/* Responsive */
@media(max-width:1180px){.login-hero{padding:44px 34px;}.lh-content{max-width:64%;}.lh-phone{width:172px;height:348px;right:14px;}.lh-phone-screen{padding:22px 8px 8px;}.lh-app-media{height:96px;}}
@media(max-width:968px){.sng-sign-page-wrap{padding:14px;align-items:flex-start;}.login-container{grid-template-columns:1fr;min-height:auto;border-radius:16px;max-width:520px;}.login-hero{display:none;}.login-form{padding:36px 28px;}.lh-stores-mobile{display:flex;}}
@media(max-width:480px){.login-form{padding:26px 18px;}.login-title{font-size:22px;}.sng-form-row{flex-direction:column;}}

/* ===== MOVIES PAGE (trendgo layout) =====
   The .mv-wrap / .mv-sidebar / .mv-main shell rules were removed: movies.tpl
   now uses the shared sg-offcanvas container + edge rail like every other
   listing page, so those three selectors matched nothing. The card, poster and
   detail rules below are layout-independent and still in use. */
.mv-category-list{background:var(--uc-surface);border:1px solid var(--uc-border);border-radius:var(--uc-radius-lg);padding:8px;box-shadow:var(--uc-shadow-sm);margin-top:var(--uc-gap-card);}
.mv-category-item{display:block;padding:8px 12px;cursor:pointer;transition:background var(--uc-dur) var(--uc-ease),color var(--uc-dur) var(--uc-ease);color:var(--uc-muted);font-weight:var(--uc-weight-medium);font-size:var(--uc-text-base);text-decoration:none;border-radius:var(--uc-radius-sm);}
.mv-category-item:hover{background:var(--uc-surface-hover);color:var(--uc-text);text-decoration:none;}
.mv-category-item.active{background:var(--uc-primary-soft);color:var(--uc-primary);font-weight:var(--uc-weight-semi);box-shadow:inset 3px 0 0 var(--uc-primary);}
.mv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:22px;}
.mv-card{display:block;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 15px rgba(0,0,0,0.07);transition:all 0.3s;text-decoration:none;color:inherit;}
.mv-card:hover{transform:translateY(-8px);box-shadow:0 12px 30px rgba(0,0,0,0.14);text-decoration:none;color:inherit;}
.mv-poster-wrap{position:relative;overflow:hidden;}
.mv-poster{width:100%;height:300px;object-fit:cover;display:block;transition:transform 0.4s ease;}
.mv-card:hover .mv-poster{transform:scale(1.04);}
.mv-paid-badge{position:absolute;top:10px;right:10px;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;font-size:11px;font-weight:700;padding:4px 10px;border-radius:8px;}
.mv-card-info{padding:14px;}
.mv-card-title{font-size:15px;font-weight:600;color:#333;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mv-card-year{color:#888;font-size:13px;margin-bottom:4px;}
.mv-card-views{display:flex;align-items:center;gap:5px;color:#aaa;font-size:12px;}
.mv-card-views i{font-size:12px;}
.mv-pager{margin-top:28px;}
/* Diamond_pro fix: .mv-grid uses grid-template-columns:repeat(auto-fill,minmax(200px,1fr)) -
   on a phone-width screen there isn't room for even two 200px columns, so auto-fill collapses
   to a SINGLE column and that one card stretches to the full row width (1fr). Combined with
   .mv-poster's fixed height:300px, that turned each poster into an oddly wide/short landscape
   box instead of a normal movie-poster portrait shape - which is what read as "misaligned" in
   the mobile screenshot. Forcing an explicit 2-column grid with a shorter poster height keeps
   normal poster proportions instead of one stretched card per row. */
@media (max-width: 480px) {
  .mv-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .mv-poster { height: 220px !important; }
  .mv-card-info { padding: 10px !important; }
  .mv-card-title { font-size: 13px !important; }
  .mv-card-year { font-size: 12px !important; }
}
.mv-search-notice{background:#fff;border-radius:12px;padding:14px 20px;margin-bottom:20px;font-size:14px;color:#555;box-shadow:0 2px 8px rgba(0,0,0,0.05);}
.mv-search-notice .mv-search-count{display:inline-block;background:#2563eb;color:#fff;font-weight:700;font-size:12px;padding:2px 10px;border-radius:20px;margin-right:6px;}
/* .mv-wrap / .mv-sidebar dropped here too - movies.tpl uses the shared
   sg-offcanvas shell now, so neither class is emitted any more. */
@media(max-width:900px){.mv-category-list{display:flex;overflow-x:auto;padding:10px;gap:6px;}.mv-category-item{white-space:nowrap;border-bottom:3px solid transparent;padding:8px 14px;border-radius:var(--uc-radius-sm);}.mv-category-item.active{box-shadow:none;border-bottom-color:var(--uc-primary);background:var(--uc-primary-soft);}.mv-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;}.mv-poster{height:220px;}}

/* M8: mobile nav drawer opened by the header hamburger on the Movies page
   (see the script + markup in movies.tpl) — fully self-contained, doesn't
   touch/depend on the shared .sg-offcanvas rules. */
.mv-nav-drawer{display:none;}
@media(max-width:900px){
  .mv-nav-drawer{display:block;position:fixed;inset:0;z-index:1200;pointer-events:none;}
  .mv-nav-drawer-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.45);opacity:0;transition:opacity .25s ease;}
  .mv-nav-drawer-panel{position:absolute;top:0;left:0;height:100%;width:86%;max-width:320px;background:#fff;transform:translateX(-100%);transition:transform .25s ease-out;overflow-y:auto;box-shadow:4px 0 20px rgba(0,0,0,.2);}
  .mv-nav-drawer.active{pointer-events:auto;}
  .mv-nav-drawer.active .mv-nav-drawer-backdrop{opacity:1;}
  .mv-nav-drawer.active .mv-nav-drawer-panel{transform:translateX(0);}
}

/* ===== MOVIE DETAIL PAGE (trendgo style) ===== */
.mvd-card{background:#fff;border-radius:20px;padding:32px;box-shadow:0 2px 16px rgba(0,0,0,0.07);}
.mvd-header{display:flex;align-items:flex-start;gap:20px;margin-bottom:24px;}
.mvd-poster-small{width:88px;height:88px;border-radius:12px;object-fit:cover;flex-shrink:0;box-shadow:0 4px 14px rgba(0,0,0,0.15);}
.mvd-title-section{flex:1;}
.mvd-title{font-size:24px;font-weight:700;color:#1a1a1a;margin:0 0 8px;}
.mvd-meta{color:#666;font-size:14px;line-height:1.5;}
.mvd-media{position:relative;border-radius:16px;overflow:hidden;margin-bottom:24px;background:#000;}
.mvd-media img{width:100%;display:block;}
.mvd-media video{width:100%;display:block;}
.mvd-media .youtube-player{position:relative;cursor:pointer;}
.mvd-media .youtube-player img{width:100%;display:block;max-height:480px;object-fit:cover;}
.mvd-play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:72px;height:72px;background:rgba(37,99,235,0.95);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 28px rgba(37,99,235,0.55);pointer-events:none;}
.mvd-play-btn i{color:#fff;font-size:24px;margin-left:4px;}
.mvd-media .youtube-player:hover .mvd-play-btn{transform:translate(-50%,-50%) scale(1.1);transition:transform 0.25s ease;}
.mvd-media-poster img{max-height:420px;object-fit:cover;width:100%;}
.mvd-description{color:#555;font-size:15px;line-height:1.75;margin-bottom:28px;padding-bottom:28px;border-bottom:1px solid #f0f0f0;}
.mvd-info{margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid #f0f0f0;}
.mvd-info-row{display:flex;align-items:flex-start;gap:16px;padding:10px 0;border-bottom:1px solid #f8f8f8;}
.mvd-info-row:last-child{border-bottom:none;}
.mvd-info-label{font-weight:600;color:#1a1a1a;font-size:14px;min-width:90px;flex-shrink:0;}
.mvd-info-value{color:#555;font-size:14px;flex:1;}
.mvd-info-value a{color:#2563eb;text-decoration:none;}
.mvd-info-value a:hover{text-decoration:underline;}
.mvd-genre-tags{display:flex;flex-wrap:wrap;gap:8px;}
.mvd-genre-tag{background:#f0f2f5;color:#555;padding:5px 14px;border-radius:20px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.4px;text-decoration:none;transition:all 0.2s;}
.mvd-genre-tag:hover{background:#2563eb;color:#fff;text-decoration:none;}
.mvd-share{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.mvd-share-label{font-weight:600;color:#1a1a1a;font-size:14px;flex-shrink:0;}
.mvd-share-btns{display:flex;gap:10px;flex-wrap:wrap;}
.mvd-share-btn{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;text-decoration:none;transition:transform 0.2s ease;}
.mvd-share-btn:hover{transform:scale(1.15);color:#fff;text-decoration:none;}
.mvd-share-btn.fb{background:#1877f2;}
.mvd-share-btn.tw{background:#000;}
.mvd-share-btn.vk{background:#4a76a8;}
.mvd-share-btn.li{background:#0a66c2;}
.mvd-share-btn.wa{background:#25d366;}
.mvd-share-btn.rd{background:#ff4500;}
.mvd-share-btn.pt{background:#e60023;}
/* Rating on listing cards */
.mv-card-rating{display:flex;align-items:center;gap:5px;margin-top:2px;}
.mv-star-icon{color:#f4b942;font-size:12px;}
.mv-rating-val{color:#888;font-size:12px;font-weight:600;}
@media(max-width:768px){.mvd-card{padding:20px;}.mvd-header{gap:14px;}.mvd-poster-small{width:64px;height:64px;}.mvd-title{font-size:20px;}}
/* ===== Pro Packages Page Layout ===== */
.pkg-page-layout{display:flex;gap:20px;max-width:1440px;margin:20px auto;padding:0 20px;align-items:flex-start;}
.pkg-sidebar{width:260px;flex-shrink:0;position:sticky;top:80px;}
.pkg-main{flex:1;min-width:0;}
@media(max-width:900px){.pkg-sidebar{display:none;}.pkg-page-layout{padding:0 12px;}}
/* ===== Pro Packages Page ===== */
.pro-packages-page{padding:0 0 40px;}
.packages-header{background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);padding:40px 20px;text-align:center;margin-bottom:0;}
.payment-demo-bar{background:linear-gradient(135deg,#dbeafe,#bfdbfe);padding:18px 30px;margin:-22px 40px 32px;border-radius:16px;box-shadow:0 8px 24px rgba(37,99,235,0.15);position:relative;z-index:10;min-height:28px;display:flex;align-items:center;justify-content:center;font-size:13px;color:#1e40af;font-weight:500;gap:8px;}
.packages-header h1{color:#fff;font-size:28px;font-weight:700;margin:0 0 8px;}
.packages-header h1 i{color:#f9ca24;margin-right:8px;}
.packages-header p{color:rgba(255,255,255,0.85);font-size:15px;margin:0;}
.packages-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;max-width:1140px;margin:0 auto;padding:0 20px;}
.package-card{background:#fff;border-radius:16px;padding:24px;box-shadow:0 2px 16px rgba(0,0,0,0.07);border:2px solid #e4e6eb;position:relative;display:flex;flex-direction:column;gap:0;}
.package-card.featured{border-color:#2563eb;box-shadow:0 8px 32px rgba(37,99,235,0.18);}
.popular-tag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;font-size:11px;font-weight:700;padding:5px 16px;border-radius:20px;text-transform:uppercase;letter-spacing:0.5px;white-space:nowrap;}
.package-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.package-badge{display:inline-block;color:#fff;font-size:11px;font-weight:700;padding:5px 14px;border-radius:20px;text-transform:uppercase;letter-spacing:0.5px;}
.package-icon img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid #e4e6eb;}
.package-price{text-align:center;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #f0f0f0;}
.price-amount{display:block;font-size:32px;font-weight:800;color:#1a1a1a;line-height:1.1;}
.price-duration{display:block;font-size:13px;color:#888;margin-top:4px;}
.package-features{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:0;}
.package-features li{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:14px;color:#333;border-bottom:1px solid #f8f8f8;}
.package-features li:last-child{border-bottom:none;}
.feature-included i{color:#27ae60;font-size:18px;flex-shrink:0;}
.feature-excluded i{color:#2563eb;font-size:18px;flex-shrink:0;}
.feature-excluded span{color:#aaa;}
.feature-all-permissions{background:#eef2ff;border-radius:8px;padding:10px 12px !important;margin-top:4px;border-bottom:none !important;font-weight:600;color:#4a6cf7 !important;}
.feature-all-permissions i{color:#4a6cf7;font-size:16px;flex-shrink:0;}
.package-perms-list{margin-top:4px;padding:8px 12px;background:#f8f9ff;border-radius:8px;}
.package-message{background:#f8f8f8;border-radius:10px;padding:12px 14px;margin:12px 0;font-size:13px;color:#777;text-align:center;flex:1;}
.package-message p{margin:0;}
.package-btn{display:block;width:100%;padding:13px;border:none;border-radius:30px;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;cursor:pointer;text-align:center;text-decoration:none;margin-top:auto;transition:all 0.2s ease;}
.trial-btn{background:#3d5af1;color:#fff;}
.trial-btn:hover{background:#2d49e0;color:#fff;}
.buy-btn{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;}
.buy-btn:hover{background:linear-gradient(135deg,#1d4ed8,#1e40af);color:#fff;transform:translateY(-1px);box-shadow:0 6px 18px rgba(37,99,235,0.35);}
.wallet-action-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;font-size:13px;font-weight:600;color:#444;background:#f5f6f7;border:1px solid #e4e6eb;border-radius:20px;cursor:pointer;transition:background 0.15s ease,border-color 0.15s ease,color 0.15s ease;white-space:nowrap;line-height:1.4;}
.wallet-action-btn:hover{background:#eff6ff;border-color:#2563eb;color:#2563eb;}
.wallet-action-btn:hover .wallet-action-icon svg path,.wallet-action-btn:hover .wallet-action-icon svg circle,.wallet-action-btn:hover .wallet-action-icon svg rect{fill:#2563eb;}
.wallet-action-icon{display:flex;align-items:center;flex-shrink:0;}
.wallet-action-icon svg{display:block;}
@media(max-width:768px){.packages-grid{grid-template-columns:1fr;max-width:400px;}.packages-header{padding:30px 16px;}.packages-header h1{font-size:22px;}}

/* ===== Stories Wrapper — force white card (higher specificity beats inline <style> block) ===== */
body .card.stories-wrapper-container{background:#fff !important;box-shadow:0 2px 8px rgba(0,0,0,0.07) !important;border:1px solid #e4e6eb !important;overflow:visible !important;}
/* Uniform padding inside the stories card-body */
body .card.stories-wrapper-container .card-body{padding:6px 12px 2px !important;}
/* Zuck renders #stories as a <ul class="stories"> — make it a proper flex row.
   padding-top:8px > hover translateY(-4px) so the hover never clips at the top.
   padding-bottom:12px gives shadow room at the bottom. */
body .card.stories-wrapper-container #stories > ul.stories,
body .card.stories-wrapper-container .stories{display:flex !important;flex-direction:row !important;gap:10px !important;overflow-x:auto !important;align-items:flex-start !important;margin:0 !important;padding:8px 2px 12px !important;list-style:none !important;}
/* Consistent card size: make Add Story banner same height as story cards */
.add-story-banner{height:200px !important;width:110px !important;}

/* ===== Post Share Modal ===== */
#post-share-modal .modal-dialog{max-width:360px;}
#post-share-modal .modal-content.post-share-modal-content{border:none;border-radius:16px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,0.18);}
#post-share-modal .modal-body{padding:0;}
.post-share-modal-title{font-size:15px;font-weight:700;color:#1a1a1a;text-align:center;padding:16px 20px 12px;margin:0;border-bottom:1px solid #f0f2f5;}
.post-share-modal-option{display:flex;align-items:center;gap:14px;padding:13px 20px;font-size:14px;font-weight:500;color:#1a1a1a;cursor:pointer;text-decoration:none !important;border-bottom:1px solid #f0f2f5;transition:background 0.12s;}
.post-share-modal-option:hover{background:#f7f8fa;color:#1a1a1a;}
.post-share-modal-option i{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;color:#fff;}
.js_post-share-copy i{background:#2563eb;}
.js_post-share-facebook i{background:#1877f2;}
.js_post-share-twitter i{background:#000;}
.js_post-share-whatsapp i{background:#25d366;}
.post-share-modal-cancel{display:block;width:100%;padding:13px 20px;font-size:14px;font-weight:600;color:#2563eb;background:none;border:none;text-align:center;cursor:pointer;transition:background 0.12s;}
.post-share-modal-cancel:hover{background:#eff6ff;}

/* ===== SUPPRESS SNGINE PUBLISHER OVERLAY INSIDE MODAL =====
   When publisher loads in modal mode (#publisher-wapper-modal), Bootstrap's
   own backdrop already dims the page. Sngine's .publisher-overlay (fixed,
   black, opacity 0.6 on body.publisher-focus) creates a second dark layer.
   Hide it unconditionally in modal context. */
#publisher-wapper-modal .publisher-overlay,
body.publisher-focus #publisher-wapper-modal .publisher-overlay {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ===== PUBLISHER TOOLBAR — left-aligned gray circles ===== */

/* Move icons to the left (template has margin-left:auto which pushes them right) */
#publisher-box .publisher-toolbar-icons {
    margin-left: 0 !important;
}

/* Privacy pill — gray bg, Unity blue text/icon */
#publisher-box .publisher-privacy-btn .btn {
    background: #f0f2f5 !important;
    color: #2563eb !important;
    padding: 7px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: none !important;
}
#publisher-box .publisher-privacy-btn .btn:hover,
#publisher-box .publisher-privacy-btn .btn:focus,
#publisher-box .publisher-privacy-btn .btn:active {
    background: #e4e6eb !important;
    color: #2563eb !important;
    box-shadow: none !important;
}
#publisher-box .publisher-privacy-btn .btn i {
    color: #2563eb !important;
}
/* Show a small Unity blue caret after the label */
#publisher-box .publisher-privacy-btn .btn::after {
    content: "" !important;
    display: inline-block !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-top: 5px solid #2563eb !important;
    margin-left: 2px !important;
    vertical-align: middle !important;
}

/* Icon buttons — gray circle, perfectly centered content */
#publisher-box .publisher-toolbar-icons .pub-icon-btn {
    background: #f0f2f5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 0 !important;
}
#publisher-box .publisher-toolbar-icons .pub-icon-btn:hover {
    background: #e4e6eb !important;
}
/* Center the uploader span without shrinking it — it auto-sizes to the SVG */
#publisher-box .publisher-toolbar-icons .pub-icon-btn > span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 0 !important;
}
/* Ensure SVG icons have no extra margin/padding that would offset them */
#publisher-box .publisher-toolbar-icons .pub-icon-btn .main-icon {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    line-height: 0 !important;
    background: none !important;
    border-radius: 0 !important;
}

/* Diamond_pro fix: right-sidebar widget — keep Add/Like button on the right, name on the left (newer Sngine outputs button before name; float is ignored in flex) */
.right-sidebar .data-content{align-items:center;}
.right-sidebar .data-content .float-end{order:2;margin-left:auto;}
.right-sidebar .data-content .name,.right-sidebar .data-content .mt5{order:1;}
.right-sidebar .data-container{align-items:center;}
.right-sidebar .data-content{padding-left:0 !important;}

/* Diamond_pro fix: keep comment/message send controls visible on desktop */
.x-form-tools-post {
    display: inline-block !important;
}
.x-form-tools-post .fa-paper-plane {
    color: #2563eb !important;
}

/* Diamond_pro fix: header Messages icon swapped to an outline SVG (header-messages-outline.svg,
   fill="none" in the source file) so it visually matches the other header icons' thin weight
   instead of looking like a solid dark button - see __svg_icons.tpl. But several earlier rules
   force fill:#2563eb !important on every header icon path (default state, hover state, unread
   state) which would paint this "fill:none" path solid blue again, undoing the whole point.
   This runs last in the file so it wins the tie against those same-specificity !important
   rules, keeping this one icon hollow (stroke only) in every state. */
.navbar-wrapper li.js_live-messages .header-icon path,
.navbar-wrapper li.js_live-messages:hover .header-icon path,
.navbar-wrapper li.js_live-messages > a:hover .header-icon path {
    fill: none !important;
}

/* Diamond_pro fix: base theme's own reaction-emoji picker (the popup that opens when you
   press-and-hold/click the Like button on a normal post - feed, watch, marketplace, etc.)
   has a rule at max-width:480px that shrinks it to a fixed width:144px box. At 48px per
   emoji, 144px is exactly 3 columns, so on any phone the picker wraps into a 2-row grid
   instead of staying the single horizontal strip it is on desktop. This puts it back to a
   single row on mobile too. Reels have their own separate picker with more specific
   .reel-container-scoped !important rules in reels.tpl, so those still win there and this
   doesn't need to exclude them. */
@media (max-width: 480px) {
    .reactions-container {
        width: auto !important;
        white-space: nowrap !important;
        border-radius: 40px !important;
        /* v2: first attempt fought the base theme's own positioning JS
           (which sets top/left inline via element.style, using
           position:fixed) by forcing position:absolute + a custom script
           to recalculate bottom/left - the two fights produced the wrong
           spot. User found the real fix via DevTools: leave the base
           theme's fixed-position JS alone entirely and just restyle the
           box itself. No custom JS needed here at all. */
        position: fixed !important;
        background: #2b28283b !important;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2) !important;
        z-index: 4 !important;
    }
    .reactions-container .reactions_item {
        float: none !important;
        display: inline-block !important;
    }
    /* M85: this box is ~360px wide (8 reaction emojis in a single row) but
       the base theme's positioning JS anchors it via an inline `left` that's
       just calculated from the trigger button's own X position, with no
       clamp against the viewport edge. That's fine for the post-level Like
       button (sits close to the left edge of the action bar), but comment
       reaction buttons live inside the narrower, indented comment thread —
       confirmed via DevTools that their computed `left` regularly pushed
       the box's right edge ~50px past the screen, cutting off the last few
       reaction options. Scoped to comment reactions only (identified by
       their .js_react-comment items, vs .js_react-post on the post-level
       picker) so the already-working post picker keeps its JS-computed
       position untouched — comment/reply pickers now just dock to a fixed
       distance from the right edge instead, guaranteeing every reaction is
       reachable regardless of how deep the comment/reply is indented. */
    .reactions-container:has(.js_react-comment) {
        left: auto !important;
        right: 8px !important;
    }
}

/* Diamond_pro fix: event cards (Discover/Interested/Going/My Events tabs, __feeds_event.tpl
   box-tpl) sit inside the base theme's shared .ui-box class, which carries a base
   margin-top:50px meant for card styles elsewhere that have an avatar overlapping the top
   edge of the box. Event cards don't have that overlap - their icon is drawn normally inside
   the box's own padding - so that 50px became a big dead gap between the tab filter row and
   the card grid on every Events tab, most noticeable on mobile where the filter row wraps to
   two lines and the empty space below it reads as a broken layout. Scoped to the
   event-box-card class added in the template (not .ui-box itself) so this doesn't touch any
   other card type across the site that still relies on the 50px for its own overlap. */
.event-box-card {
    margin-top: 0 !important;
}

/* ===== Feed topic badge on posts (ported from grace, Unity accent) =====
   Per-post tint comes from the inline --topic-color; fallback is Unity blue. */
.post-topic-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 4px 6px 4px 0;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.12); /* fallback for browsers without color-mix() */
    background: color-mix(in srgb, var(--topic-color, #1d4ed8) 14%, transparent);
    color: var(--topic-color, #1d4ed8);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
}
.post-topic-badge:hover,
.post-topic-badge:focus {
    color: var(--topic-color, #1d4ed8);
    text-decoration: underline;
}

@media (min-width: 992px) {
    .newsfeed-shell > .newsfeed-shell-row {
        flex-wrap: nowrap;
    }
    .newsfeed-shell .newsfeed-left-rail {
        flex: 0 0 260px;
        width: 260px;
        max-width: 260px;
    }
    .newsfeed-shell .newsfeed-main-area {
        flex: 1 1 0;
        width: auto;
        max-width: none;
        min-width: 0;
    }
    .newsfeed-left-rail .main-side-nav-card {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    .newsfeed-left-rail .main-side-nav-card > .card-body {
        padding: 8px !important;
    }
}

@media (min-width: 1200px) {
    .newsfeed-shell .newsfeed-content-row {
        flex-wrap: nowrap;
    }
    .newsfeed-shell .newsfeed-center-column {
        flex: 1 1 0;
        width: auto;
        max-width: none;
        min-width: 0;
    }
    .newsfeed-shell .newsfeed-right-rail {
        flex: 0 0 300px;
        width: 300px;
        max-width: 300px;
    }
}

@media (min-width: 1400px) {
    .newsfeed-shell .newsfeed-left-rail {
        flex-basis: 270px;
        width: 270px;
        max-width: 270px;
    }
}

.dummy-publisher-trigger {
    margin-bottom: 16px;
}
.dummy-publisher-card {
    min-height: 118px;
    border: 1px solid var(--uc-border, #e8ebef) !important;
    border-radius: var(--uc-radius, 16px) !important;
    background: var(--uc-surface, #fff) !important;
    box-shadow: var(--uc-shadow, 0 2px 12px rgba(32, 40, 51, 0.06)) !important;
}
.dummy-publisher-open {
    width: 100%;
    min-height: 68px;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
}
.dummy-publisher-top {
    padding: 12px 18px 10px 74px;
}
.dummy-pub-avatar {
    left: 18px !important;
    width: 44px !important;
    height: 44px !important;
}
.dummy-publisher-input {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 22px;
    background: #f4f5f6;
    color: var(--uc-muted, #6f7883);
}
.dummy-publisher-open:hover .dummy-publisher-input {
    background: #eef0f2;
}
.dummy-publisher-actions {
    min-height: 50px;
    padding: 5px 10px;
    border-top: 1px solid var(--uc-border, #e8ebef);
    gap: 6px;
}
.dummy-publisher-btn {
    min-height: 38px;
    padding: 8px 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #59636f;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
}
.dummy-publisher-trigger:hover .dummy-publisher-btn {
    background: transparent;
    color: #59636f;
}
.dummy-publisher-btn:hover,
.dummy-publisher-btn:focus-visible {
    background: #f4f5f6 !important;
    color: var(--uc-text, #202833) !important;
    text-decoration: none;
}
.dummy-publisher-open:focus-visible,
.dummy-publisher-btn:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.2);
    outline-offset: -2px;
}
.dummy-publisher-btn .dummy-pub-icon,
.dummy-publisher-btn .dummy-pub-icon * {
    color: var(--uc-coral, #2563eb) !important;
    fill: var(--uc-coral, #2563eb) !important;
}

.right-sidebar .card {
    border-color: var(--uc-border, #e8ebef) !important;
    border-radius: var(--uc-radius, 16px) !important;
    box-shadow: 0 1px 4px rgba(32, 40, 51, 0.04) !important;
}
.right-sidebar .suggestion-card .card-header {
    padding: 14px 16px 7px !important;
    color: var(--uc-text, #202833) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}
.right-sidebar .right-sidebar-heading-icon {
    color: #69737f !important;
}
.right-sidebar .data-container {
    padding: 7px 0 !important;
}
.right-sidebar .data-avatar img {
    width: 38px !important;
    height: 38px !important;
}
.right-sidebar .btn-custom-add,
.right-sidebar .js_like-page,
.right-sidebar .js_unlike-page,
.right-sidebar .js_join-group,
.right-sidebar .js_leave-group,
.right-sidebar .feeds-item .data-content .float-end .btn-custom-add {
    min-width: 0 !important;
    height: 28px !important;
    padding: 0 7px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: var(--uc-coral, #2563eb) !important;
    font-size: 11px !important;
    font-weight: 650 !important;
}
.right-sidebar .js_unlike-page,
.right-sidebar .js_leave-group {
    color: var(--uc-muted, #6f7883) !important;
}
.right-sidebar .btn-custom-add:hover,
.right-sidebar .js_like-page:hover,
.right-sidebar .js_unlike-page:hover,
.right-sidebar .js_join-group:hover,
.right-sidebar .js_leave-group:hover {
    background: var(--uc-coral-soft, #eff6ff) !important;
    color: var(--uc-coral, #2563eb) !important;
}

/* Reserve the complete media box before video metadata or Plyr arrives.
   The frame remains fixed while the player is initialised, which prevents
   portrait videos and Reels from changing the feed card height mid-scroll. */
.uc-feed-media-frame {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 14px;
    background: #101317;
    isolation: isolate;
}
.uc-feed-media-frame--video {
    aspect-ratio: 16 / 9;
}
.uc-feed-media-frame--reel {
    width: min(100%, 480px);
    aspect-ratio: 4 / 5;
    margin-inline: auto;
}
.uc-feed-media-frame > video,
.uc-feed-media-frame > .plyr {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
}
.uc-feed-media-frame video {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    background: #101317;
}
.uc-feed-media-frame .plyr__video-wrapper {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    padding-bottom: 0 !important;
    aspect-ratio: auto !important;
    overflow: hidden;
}
.uc-feed-media-frame .plyr__poster {
    background-size: contain;
}
.uc-feed-media-frame .plyr.fullscreen,
.uc-feed-media-frame .plyr:fullscreen {
    position: fixed !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
}

/* Save is visually distinct even when action labels collapse on small screens. */
.post-actions .uc-save-icon--filled {
    display: none;
}
.post-actions .js_unsave-post .uc-save-icon--outline {
    display: none;
}
.post-actions .js_unsave-post .uc-save-icon--filled {
    display: inline-block;
    color: var(--uc-coral, #2563eb);
}

/* Calm shell parity for the existing night-mode switch.
   The night-mode TOKEN bindings that used to live here moved into LAYER 6 of
   the design system at the top of this file - a second body.night-mode token
   block here would win on document order and silently drift from it. Only
   component rules belong below. */
body.night-mode .dummy-publisher-card,
body.night-mode .right-sidebar .card,
body.night-mode .publisher-context-bar {
    background: var(--uc-surface) !important;
    border-color: var(--uc-border) !important;
}
body.night-mode .dummy-publisher-input {
    background: #2d3035;
    color: var(--uc-muted);
}
body.night-mode .dummy-publisher-open:hover .dummy-publisher-input,
body.night-mode .dummy-publisher-btn:hover,
body.night-mode .dummy-publisher-btn:focus-visible {
    background: #30343a !important;
    color: var(--uc-text) !important;
}
body.night-mode .dummy-publisher-actions {
    border-top-color: var(--uc-border);
}
body.night-mode .right-sidebar .suggestion-card .card-header,
body.night-mode .publisher-context-value,
body.night-mode .publisher-context-button {
    color: var(--uc-text) !important;
}
body.night-mode .publisher-context-label {
    color: var(--uc-muted) !important;
}

/* Bible module (reader + widgets) */
/* ------------------------------- */
.bible-books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 12px;
}
.bible-book-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 12px 14px;
  border: 1px solid rgba(37, 99, 235, .2);
  border-radius: 12px;
  background: var(--uc-surface, #fff);
  color: var(--uc-text, #252525);
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.bible-book-card:hover,
.bible-book-card:focus-visible {
  border-color: var(--uc-coral, #2563eb);
  box-shadow: 0 8px 20px rgba(16, 43, 78, .1);
  color: var(--uc-coral, #2563eb);
  text-decoration: none;
  transform: translateY(-1px);
}
.bible-book-card:focus-visible {
  outline: 2px solid var(--uc-coral, #2563eb);
  outline-offset: 2px;
}
.bible-book-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(37, 99, 235, .1);
  color: var(--uc-coral, #2563eb);
}
body.night-mode .bible-book-card {
  background: var(--uc-surface, #292c31);
  border-color: var(--uc-border, #41464d);
  color: var(--uc-text, #eef1f4);
}
body.night-mode .bible-book-card:hover,
body.night-mode .bible-book-card:focus-visible {
  border-color: var(--uc-coral, #2563eb);
  color: var(--uc-primary, #60a5fa);
}
@media (max-width: 575px) {
  .bible-books-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .bible-book-card {
    min-height: 56px;
    padding: 10px;
  }
}

.bible-chapters-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bible-chapter-btn {
  min-width: 44px;
}
.bible-reader-text.font-sm {
  font-size: 0.92rem;
}
.bible-reader-text.font-lg {
  font-size: 1.25rem;
}
.bible-reader-text sup {
  margin-right: 2px;
}
.bible-reader-text h3,
.bible-reader-text h4 {
  margin-top: 1em;
}
.bible-copyright {
  border-top: 1px solid rgba(0, 0, 0, .08);
  padding-top: 8px;
}
.bible-reader-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.bible-reader-toolbar .form-select {
  width: auto;
  max-width: 180px;
  display: inline-block;
}
.bible-parallel-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 767px) {
  .bible-parallel-cols {
    grid-template-columns: 1fr;
  }
}

/* Bible - verse of the day widget (warm gradient card) */
.kretan-bible-widget {
  border: 1px solid rgba(201, 154, 61, 0.35);
  overflow: hidden;
}
.kretan-bible-widget .card-header {
  border-bottom: 0;
  background: linear-gradient(90deg, rgba(201, 154, 61, 0.16), rgba(201, 154, 61, 0.04)) !important;
  color: #8a6420;
  letter-spacing: .3px;
}
.kretan-bible-widget .card-body {
  position: relative;
  background:
    linear-gradient(160deg, rgba(255, 251, 240, 0.97) 0%, rgba(250, 240, 218, 0.92) 55%, rgba(243, 228, 195, 0.85) 100%);
}
.kretan-bible-widget .card-body:before {
  content: "\201C";
  position: absolute;
  top: -14px;
  left: 10px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 92px;
  line-height: 1;
  color: rgba(201, 154, 61, 0.28);
  pointer-events: none;
}
.kretan-bible-widget .bible-votd-text {
  position: relative;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 1.06rem;
  line-height: 1.75;
  color: #3d3324;
}
.kretan-bible-widget .bible-votd-text p {
  margin-bottom: 0;
}
.kretan-bible-widget .bible-votd-ref {
  font-weight: 600;
  color: #a0762a !important;
}
.kretan-bible-widget .bible-votd-copy {
  opacity: .65;
}
body.night-mode .kretan-bible-widget {
  border-color: rgba(201, 154, 61, 0.30);
}
body.night-mode .kretan-bible-widget .card-header {
  background: linear-gradient(90deg, rgba(201, 154, 61, 0.20), rgba(201, 154, 61, 0.05)) !important;
  color: #d9b25f;
}
body.night-mode .kretan-bible-widget .card-body {
  background: linear-gradient(160deg, rgba(30, 41, 66, 0.98) 0%, rgba(24, 34, 56, 0.95) 60%, rgba(35, 42, 60, 0.92) 100%);
}
body.night-mode .kretan-bible-widget .bible-votd-text {
  color: #e8dfc9;
}
body.night-mode .kretan-bible-widget .bible-votd-ref {
  color: #d9b25f !important;
}

/* Bible reader - YouVersion-like typography */
.bible-reader-text {
  font-family: Georgia, 'Times New Roman', serif;
  max-width: 46rem;
  margin: 0 auto;
  font-size: 1.13rem;
  line-height: 1.95;
  color: #2e2a22;
}
.bible-reader-ref {
  text-align: center;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  color: #8a6420;
  margin-bottom: 22px;
}
/* verse numbers (YouVersion .label spans + plain <sup> fallback) */
.bible-reader-text .label,
.bible-reader-text sup {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .62em;
  font-weight: 700;
  color: #b3893a;
  vertical-align: super;
  line-height: 0;
  margin: 0 4px 0 8px;
  font-style: normal;
  letter-spacing: 0;
  user-select: none;
}
.bible-reader-text .verse:first-child .label,
.bible-reader-text p > .label:first-child,
.bible-reader-text sup:first-child {
  margin-left: 0;
}
/* paragraphs & poetry (USX classes) */
.bible-reader-text p,
.bible-reader-text .p,
.bible-reader-text .m,
.bible-reader-text .pi {
  margin: 0 0 1.05em;
}
.bible-reader-text .q1 { margin: 0 0 .15em 1.6em; }
.bible-reader-text .q2 { margin: 0 0 .15em 3.2em; }
.bible-reader-text .q3 { margin: 0 0 .15em 4.6em; }
.bible-reader-text .b  { height: .9em; }
/* section headings */
.bible-reader-text h2,
.bible-reader-text h3,
.bible-reader-text h4,
.bible-reader-text .s,
.bible-reader-text .s1,
.bible-reader-text .s2,
.bible-reader-text .ms,
.bible-reader-text .ms1 {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .92em;
  font-weight: 700;
  letter-spacing: .2px;
  color: #8a6420;
  font-style: normal;
  margin: 1.7em 0 .65em;
}
/* inline semantics */
.bible-reader-text .d { font-style: italic; color: #7d7466; }
.bible-reader-text .nd { font-variant: small-caps; letter-spacing: .5px; }
.bible-reader-text .wj { color: #93402f; }
.bible-reader-text .add { font-style: italic; }
/* night mode */
body.night-mode .bible-reader-text { color: #ddd5c4; }
body.night-mode .bible-reader-ref { color: #d9b25f; }
body.night-mode .bible-reader-text .label,
body.night-mode .bible-reader-text sup { color: #d9b25f; }
body.night-mode .bible-reader-text .s,
body.night-mode .bible-reader-text .s1,
body.night-mode .bible-reader-text .s2,
body.night-mode .bible-reader-text h2,
body.night-mode .bible-reader-text h3,
body.night-mode .bible-reader-text h4 { color: #d9b25f; }
body.night-mode .bible-reader-text .wj { color: #e0836d; }
body.night-mode .bible-reader-text .d { color: #a89f8d; }

/* Bible - verse of the day banner (under stories) */
.kretan-bible-banner {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(201, 154, 61, 0.4);
  border-radius: 16px;
  margin-bottom: 20px;
}
.kretan-bible-banner .card-body {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(120deg, #f7ecd4 0%, #f3e0b8 45%, #ecd29a 100%);
}
.kretan-bible-banner .card-body:before {
  content: "\201C";
  position: absolute;
  top: -20px;
  right: 90px;
  font-family: Georgia, serif;
  font-size: 130px;
  line-height: 1;
  color: rgba(201, 154, 61, 0.22);
  pointer-events: none;
}
.kretan-bible-banner-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(201, 154, 61, 0.22);
  color: #8a6420;
  font-size: 20px;
}
.kretan-bible-banner-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #a0762a;
  margin-bottom: 2px;
}
.kretan-bible-banner .bible-votd-text {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.6;
  color: #3d3324;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kretan-bible-banner .bible-votd-text p { margin: 0; display: inline; }
.kretan-bible-banner .bible-votd-text .label,
.kretan-bible-banner .bible-votd-text sup { display: none; }
.kretan-bible-banner-ref {
  font-size: .85rem;
  font-weight: 600;
  color: #a0762a;
  margin-top: 4px;
}
.kretan-bible-banner-ref span { font-weight: 400; opacity: .6; }
.kretan-bible-banner-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  z-index: 1;
}
@media (max-width: 575.98px) {
  .kretan-bible-banner .card-body { grid-template-columns: minmax(0, 1fr); }
  .kretan-bible-banner-icon { display: none; }
  .kretan-bible-banner-actions { flex-direction: row; }
}
body.night-mode .kretan-bible-banner { border-color: rgba(201, 154, 61, 0.3); }
body.night-mode .kretan-bible-banner .card-body {
  background: linear-gradient(120deg, #232c44 0%, #1d2740 55%, #2a2f45 100%);
}
body.night-mode .kretan-bible-banner .bible-votd-text { color: #e8dfc9; }
body.night-mode .kretan-bible-banner-label,
body.night-mode .kretan-bible-banner-ref { color: #d9b25f; }
body.night-mode .kretan-bible-banner-icon { background: rgba(201,154,61,.18); color: #d9b25f; }

/* Bible reader - card shell & interactions */
.kretan-bible-widget.bible-reader-card,
.bible-reader-card { border: 1px solid var(--kr-border-cool, rgba(201,154,61,.25)); }
.bible-reader-toolbar { position: relative; }
.bible-reader-search {
  position: relative;
  flex: 1 1 210px;
  min-width: 170px;
  max-width: 320px;
  display: flex;
  align-items: center;
}
.bible-reader-search > .fa-magnifying-glass {
  position: absolute;
  left: 11px;
  color: #b3893a;
  font-size: .82rem;
  pointer-events: none;
}
.bible-reader-search .form-control {
  padding-left: 30px;
  padding-right: 28px;
  border-radius: 20px;
}
.bible-search-clear {
  position: absolute;
  right: 8px;
  border: 0;
  background: transparent;
  color: #999;
  cursor: pointer;
  padding: 2px 6px;
}
.bible-search-results {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--kr-surface, #fff);
  border: 1px solid rgba(201,154,61,.3);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(16,43,78,.14);
  overflow: hidden;
}
.bible-search-results.is-open { display: block; }
.bible-search-jump {
  display: block;
  padding: 11px 14px;
  color: #8a6420;
  font-weight: 600;
  text-decoration: none;
}
.bible-search-jump:hover { background: rgba(201,154,61,.1); color: #8a6420; }
.bible-search-empty { padding: 11px 14px; color: #999; font-size: .88rem; }

/* share hint pill */
.bible-share-hint {
  display: inline-flex;
  align-items: center;
  margin: 0 auto 20px;
  padding: 7px 15px;
  border-radius: 20px;
  background: rgba(201,154,61,.12);
  color: #8a6420;
  font-size: .82rem;
  font-weight: 500;
  border: 1px dashed rgba(201,154,61,.4);
}
.bible-reader-card .card-body { text-align: center; }
.bible-reader-card .bible-reader-text { text-align: left; }

/* tappable verses */
.bible-reader-text .verse.bible-verse {
  cursor: pointer;
  border-radius: 5px;
  padding: 1px 2px;
  transition: background-color .12s ease;
}
.bible-reader-text .verse.bible-verse:hover { background: rgba(201,154,61,.1); }
.bible-reader-text .verse.is-selected {
  background: rgba(201,154,61,.24);
  box-shadow: 0 0 0 1px rgba(201,154,61,.45);
}
/* first-letter drop cap on the opening verse */
.bible-reader-text > .p:first-child .content:first-of-type:first-letter,
.bible-reader-text > p:first-child:first-letter {
  initial-letter: 2;
  font-weight: 700;
  color: #a0762a;
  margin-right: 4px;
}
/* in-chapter search highlight */
.bible-reader-text mark.bible-hit {
  background: #ffe08a;
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}

/* sticky verse action bar */
.bible-action-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  background: linear-gradient(90deg, rgba(201,154,61,.14), rgba(201,154,61,.04));
  border-top: 1px solid rgba(201,154,61,.35);
  backdrop-filter: blur(4px);
}
.bible-action-count { font-size: .9rem; color: #8a6420; }
.bible-action-buttons { display: flex; gap: 8px; }

body.night-mode .bible-share-hint { background: rgba(201,154,61,.12); color: #d9b25f; border-color: rgba(201,154,61,.35); }
body.night-mode .bible-search-results { background: var(--ch-night-card, #1c2740); border-color: rgba(201,154,61,.3); }
body.night-mode .bible-search-jump { color: #d9b25f; }
body.night-mode .bible-search-jump:hover { background: rgba(201,154,61,.14); }
body.night-mode .bible-reader-text .verse.bible-verse:hover { background: rgba(201,154,61,.15); }
body.night-mode .bible-reader-text .verse.is-selected { background: rgba(201,154,61,.3); }
body.night-mode .bible-reader-text mark.bible-hit { background: #7a5a1a; color: #ffe08a; }
body.night-mode .bible-action-bar { background: linear-gradient(90deg, rgba(201,154,61,.2), rgba(201,154,61,.05)); border-color: rgba(201,154,61,.3); }
body.night-mode .bible-action-count { color: #d9b25f; }

/* Bible reader - AJAX layout, parallel panes, loader */
.bible-reader-layout { position: relative; }
.bible-reader-layout.is-parallel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
@media (max-width: 767px) {
  .bible-reader-layout.is-parallel { grid-template-columns: 1fr; gap: 8px; }
}
.bible-reader-layout.is-loading { opacity: .35; pointer-events: none; transition: opacity .12s ease; }
.bible-reader-pane { position: relative; }
.bible-reader-layout.is-parallel .js_bible-parallel-pane { border-left: 1px solid rgba(201,154,61,.22); padding-left: 30px; }
@media (max-width: 767px) {
  .bible-reader-layout.is-parallel .js_bible-parallel-pane { border-left: 0; padding-left: 0; border-top: 1px solid rgba(201,154,61,.22); padding-top: 14px; margin-top: 10px; }
}
.bible-pane-label {
  text-align: center;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #a0762a;
  padding-bottom: 8px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(201,154,61,.22);
}
.bible-loader { text-align: center; padding: 26px 0; }

/* tappable verses (scoped to the reader's main text only) */
.bible-reader-card .js_bible-text .verse {
  cursor: pointer;
  border-radius: 5px;
  padding: 1px 2px;
  transition: background-color .12s ease;
}
.bible-reader-card .js_bible-text .verse:hover { background: rgba(201,154,61,.1); }
.bible-reader-card .js_bible-text .verse.is-selected {
  background: rgba(201,154,61,.24);
  box-shadow: 0 0 0 1px rgba(201,154,61,.45);
}
body.night-mode .bible-pane-label { color: #d9b25f; border-color: rgba(201,154,61,.28); }
body.night-mode .bible-reader-card .js_bible-text .verse:hover { background: rgba(201,154,61,.15); }
body.night-mode .bible-reader-card .js_bible-text .verse.is-selected { background: rgba(201,154,61,.3); }

/* Bible reader - sticky toolbar */
@media (min-width: 768px) {
  .bible-reader-header {
    position: sticky;
    top: calc(var(--kr-header-height, 64px) + 8px);
    z-index: 40;
    background-color: var(--kr-surface, #fff) !important;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 6px 16px rgba(16, 43, 78, 0.06);
  }
  body.night-mode .bible-reader-header {
    background-color: var(--ch-night-card, #1c2740) !important;
  }
}

/* Bible reader - book/chapter picker (YouVersion style) */
.bible-picker-wrap { position: relative; }
.bible-picker-toggle { font-weight: 600; }
.bible-picker {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 45;
  width: 330px;
  max-width: 86vw;
  background: var(--kr-surface, #fff);
  border: 1px solid rgba(201, 154, 61, .3);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(16, 43, 78, .18);
  overflow: hidden;
}
.bible-picker-head { padding: 10px 10px 8px; border-bottom: 1px solid rgba(201, 154, 61, .18); }
.bible-picker-books {
  max-height: 330px;
  overflow-y: auto;
  padding: 6px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.bible-picker-book {
  border: 0;
  background: transparent;
  text-align: left;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: .9rem;
  color: var(--kr-text, #2e2a22);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bible-picker-book:hover { background: rgba(201, 154, 61, .12); }
.bible-picker-book.is-active { background: rgba(201, 154, 61, .2); color: #8a6420; font-weight: 700; }
.bible-picker-chapters { padding: 10px; }
.bible-picker-back {
  border: 0;
  background: transparent;
  color: #8a6420;
  font-weight: 600;
  padding: 2px 4px 10px;
  cursor: pointer;
}
.bible-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 6px;
  max-height: 300px;
  overflow-y: auto;
}
.bible-picker-chapter {
  min-height: 40px;
  border: 1px solid rgba(201, 154, 61, .25);
  background: var(--kr-surface, #fff);
  border-radius: 8px;
  font-weight: 600;
  color: var(--kr-text, #2e2a22);
  cursor: pointer;
}
.bible-picker-chapter:hover { background: rgba(201, 154, 61, .12); }
.bible-picker-chapter.is-active { background: #c99a3d; border-color: #c99a3d; color: #fff; }
.bible-reader-tools { display: flex; gap: 6px; }
body.night-mode .bible-picker { background: var(--ch-night-card, #1c2740); border-color: rgba(201, 154, 61, .3); }
body.night-mode .bible-picker-book { color: #ddd5c4; }
body.night-mode .bible-picker-book:hover { background: rgba(201, 154, 61, .14); }
body.night-mode .bible-picker-book.is-active { color: #d9b25f; }
body.night-mode .bible-picker-chapter { background: transparent; color: #ddd5c4; }
body.night-mode .bible-picker-chapter.is-active { background: #c99a3d; color: #fff; }
body.night-mode .bible-picker-back { color: #d9b25f; }

/* Bible reader - floating chapter arrows (desktop) */
.bible-reader-card .card-body { position: relative; }
.bible-side-nav {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 46px;
  pointer-events: none;
}
.bible-side-nav-prev { left: 6px; }
.bible-side-nav-next { right: 6px; }
.bible-side-btn {
  pointer-events: auto;
  position: sticky;
  top: 45vh;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(201, 154, 61, .35);
  background: var(--kr-surface, #fff);
  color: #8a6420;
  box-shadow: 0 6px 18px rgba(16, 43, 78, .12);
  cursor: pointer;
  transition: background-color .15s ease, opacity .15s ease;
}
.bible-side-btn:hover { background: rgba(201, 154, 61, .14); }
.bible-side-btn:disabled { opacity: .3; cursor: default; }
body.night-mode .bible-side-btn { background: var(--ch-night-card, #1c2740); color: #d9b25f; border-color: rgba(201, 154, 61, .3); }

/* Bible - share modal (verse -> colored post) */
.bible-share-preview {
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 26px 22px;
  border: 1px solid rgba(201, 154, 61, .25);
  border-radius: 14px;
  background: var(--kr-surface, #fffdf8);
  background-size: cover !important;
  background-position: center !important;
  text-align: center;
}
.bible-share-preview-text {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--kr-text, #2e2a22);
  max-height: 190px;
  overflow-y: auto;
}
.bible-share-preview-ref {
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .4px;
  color: #a0762a;
}
.bible-share-preview.is-colored { border-color: transparent; }
.bible-share-preview.is-colored .bible-share-preview-text,
.bible-share-preview.is-colored .bible-share-preview-ref {
  color: inherit;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .22);
}
.bible-share-preview.is-colored .bible-share-preview-ref { opacity: .92; font-weight: 700; }
.bible-share-patterns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.bible-share-swatch {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid transparent;
  background-size: cover !important;
  background-position: center !important;
  cursor: pointer;
  padding: 0;
  font-weight: 700;
  font-size: .8rem;
  color: #8a6420;
  box-shadow: 0 2px 8px rgba(16, 43, 78, .14);
}
.bible-share-swatch.is-plain { background: var(--kr-surface, #fff); border-color: rgba(201, 154, 61, .35); }
.bible-share-swatch.is-active { border-color: #c99a3d; box-shadow: 0 0 0 3px rgba(201, 154, 61, .3); }
.bible-share-swatch:disabled { opacity: .35; cursor: default; }
body.night-mode .bible-share-preview { background: var(--ch-night-card, #1c2740); border-color: rgba(201, 154, 61, .25); }
body.night-mode .bible-share-preview-text { color: #ddd5c4; }
body.night-mode .bible-share-preview-ref { color: #d9b25f; }
body.night-mode .bible-share-swatch.is-plain { background: var(--ch-night-card, #1c2740); color: #d9b25f; }

/* Bible - verse of the day banner: daily rotating gradients (index.php
   assigns bible_votd_theme = day-of-year % 7) */
.kretan-bible-banner.votd-theme-0 .card-body,
body.night-mode .kretan-bible-banner.votd-theme-0 .card-body { background: linear-gradient(120deg, #1e3c72 0%, #2a5298 100%); }
.kretan-bible-banner.votd-theme-1 .card-body,
body.night-mode .kretan-bible-banner.votd-theme-1 .card-body { background: linear-gradient(120deg, #42275a 0%, #734b6d 100%); }
.kretan-bible-banner.votd-theme-2 .card-body,
body.night-mode .kretan-bible-banner.votd-theme-2 .card-body { background: linear-gradient(120deg, #134e5e 0%, #71b280 100%); }
.kretan-bible-banner.votd-theme-3 .card-body,
body.night-mode .kretan-bible-banner.votd-theme-3 .card-body { background: linear-gradient(120deg, #7d5a3c 0%, #c8a165 100%); }
.kretan-bible-banner.votd-theme-4 .card-body,
body.night-mode .kretan-bible-banner.votd-theme-4 .card-body { background: linear-gradient(120deg, #5f2c82 0%, #49a09d 100%); }
.kretan-bible-banner.votd-theme-5 .card-body,
body.night-mode .kretan-bible-banner.votd-theme-5 .card-body { background: linear-gradient(120deg, #b02e40 0%, #e56b4a 100%); }
.kretan-bible-banner.votd-theme-6 .card-body,
body.night-mode .kretan-bible-banner.votd-theme-6 .card-body { background: linear-gradient(120deg, #8a6420 0%, #c99a3d 100%); }
/* shared overrides for the rich gradients (light text, soft glow) */
.kretan-bible-banner[class*="votd-theme-"],
body.night-mode .kretan-bible-banner[class*="votd-theme-"] { border-color: rgba(255, 255, 255, .18); }
.kretan-bible-banner[class*="votd-theme-"] .card-body:before { color: rgba(255, 255, 255, .2); }
.kretan-bible-banner[class*="votd-theme-"] .kretan-bible-banner-icon,
body.night-mode .kretan-bible-banner[class*="votd-theme-"] .kretan-bible-banner-icon { background: rgba(255, 255, 255, .16); color: #fff; }
.kretan-bible-banner[class*="votd-theme-"] .kretan-bible-banner-label,
body.night-mode .kretan-bible-banner[class*="votd-theme-"] .kretan-bible-banner-label { color: rgba(255, 255, 255, .85); }
.kretan-bible-banner[class*="votd-theme-"] .bible-votd-text,
body.night-mode .kretan-bible-banner[class*="votd-theme-"] .bible-votd-text {
  color: #fff;
  font-size: 1.1rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.kretan-bible-banner[class*="votd-theme-"] .kretan-bible-banner-ref,
body.night-mode .kretan-bible-banner[class*="votd-theme-"] .kretan-bible-banner-ref { color: rgba(255, 255, 255, .92); }
.kretan-bible-banner[class*="votd-theme-"] .kretan-bible-banner-ref span { opacity: .75; }

/* Unity Bible: make desktop verse selection visibly interactive. */
.bible-reader-card .js_bible-text .verse:focus-visible {
  outline: 2px solid var(--uc-coral, #2563eb);
  outline-offset: 3px;
}
@media (hover: hover) {
  .bible-reader-card .js_bible-text .verse:hover {
    box-shadow: 0 0 0 1px rgba(37, 99, 235, .28);
  }
}
.bible-action-bar.is-empty {
  background: rgba(37, 99, 235, .07);
  border-top-color: rgba(37, 99, 235, .22);
}
.bible-action-prompt {
  color: var(--uc-muted, #657184);
  font-size: .9rem;
  font-weight: 600;
}
.bible-action-bar .btn:disabled {
  cursor: not-allowed;
  opacity: .48;
}
body.night-mode .bible-action-bar.is-empty {
  background: rgba(37, 99, 235, .1);
  border-top-color: rgba(37, 99, 235, .28);
}
body.night-mode .bible-action-prompt {
  color: var(--uc-muted, #aeb5bf);
}

/* ============================================================
   UNITY EDGE RAIL + AIRY SHELL (2026-07-24)
   Desktop (≥992px): the left nav pins flush to the viewport edge
   as a full-height rail under the fixed 70px header, the page
   container gives it room via a left margin, and the remaining
   content centers itself in the leftover space. Scoped with
   :has(> .row > .sg-offcanvas-sidebar) so shells with a custom
   inner layout (watch) or no sidebar at all are left alone;
   reels overrides this with its own later inline fullscreen CSS.
   Mobile/tablet (<992px) keeps the existing drawer behavior.
   The @supports guard keeps browsers without :has() on the old
   boxed layout instead of a fixed rail overlapping the content.
   ============================================================ */
@supports selector(:has(a)) {
@media (min-width: 992px) {
    :root {
        --uc-rail-w: 320px;
        --uc-header-h: 70px;
    }
    .sg-offcanvas:not(.uc-no-rail):has(> .row > .sg-offcanvas-sidebar:not(.d-md-none):not(.d-sm-none)) {
        max-width: none !important;
        width: auto !important;
        margin-left: var(--uc-rail-w) !important;
        margin-right: 0 !important;
        padding-left: 28px;
        padding-right: 28px;
    }
    .sg-offcanvas:not(.uc-no-rail):has(> .row > .sg-offcanvas-sidebar:not(.d-md-none):not(.d-sm-none)) > .row {
        justify-content: center;
    }
    .sg-offcanvas:not(.uc-no-rail) > .row > .sg-offcanvas-sidebar:not(.d-md-none):not(.d-sm-none) {
        position: fixed !important;
        top: var(--uc-header-h);
        bottom: 0;
        left: 0;
        width: var(--uc-rail-w) !important;
        max-width: var(--uc-rail-w) !important;
        flex: none !important;
        margin: 0 !important;
        padding: 14px 14px 28px !important;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--uc-surface, #fff);
        border-right: 1px solid var(--uc-border, #e8ebef);
        z-index: 900;
        scrollbar-width: thin;
        scrollbar-color: transparent transparent;
    }
    .sg-offcanvas:not(.uc-no-rail) > .row > .sg-offcanvas-sidebar:not(.d-md-none):not(.d-sm-none):hover {
        scrollbar-color: rgba(32, 40, 51, 0.18) transparent;
    }
    .sg-offcanvas:not(.uc-no-rail) > .row > .sg-offcanvas-sidebar:not(.d-md-none):not(.d-sm-none)::-webkit-scrollbar {
        width: 6px;
    }
    .sg-offcanvas:not(.uc-no-rail) > .row > .sg-offcanvas-sidebar:not(.d-md-none):not(.d-sm-none)::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: transparent;
    }
    .sg-offcanvas:not(.uc-no-rail) > .row > .sg-offcanvas-sidebar:not(.d-md-none):not(.d-sm-none):hover::-webkit-scrollbar-thumb {
        background: rgba(32, 40, 51, 0.18);
    }
    /* theia-sticky-sidebar wraps the rail content and positions it with
       inline styles; the rail is fixed now, so neutralize any leftovers
       (the footer script also strips the js_sticky-sidebar class). */
    .sg-offcanvas:not(.uc-no-rail) > .row > .sg-offcanvas-sidebar:not(.d-md-none):not(.d-sm-none) .theiaStickySidebar {
        position: static !important;
        transform: none !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    /* The nav card melts into the rail surface on every page, matching
       what the newsfeed shell already did locally. */
    .sg-offcanvas:not(.uc-no-rail) > .row > .sg-offcanvas-sidebar:not(.d-md-none):not(.d-sm-none) .main-side-nav-card {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    .sg-offcanvas:not(.uc-no-rail) > .row > .sg-offcanvas-sidebar:not(.d-md-none):not(.d-sm-none) .main-side-nav-card > .card-body {
        padding: 4px !important;
    }
    /* Content behaves like a centered page in the leftover space. */
    .sg-offcanvas:not(.uc-no-rail):has(> .row > .sg-offcanvas-sidebar:not(.d-md-none):not(.d-sm-none)) > .row > .sg-offcanvas-mainbar {
        flex: 0 1 1400px !important;
        width: 100% !important;
        max-width: 1400px !important;
    }
}
}

/* Section labels inside the rail get calmer, airier typography. */
.main-side-nav > li.ptb5 {
    padding: 18px 15px 6px !important;
}
.main-side-nav > li.ptb5 small {
    font-size: var(--uc-text-2xs);
    font-weight: var(--uc-weight-bold);
    letter-spacing: var(--uc-tracking-wide);
    text-transform: uppercase;
    /* was #98a1ad = 2.60:1 on white, which fails WCAG AA even as large text.
       --uc-muted is 5.17:1 and reads as the same quiet grey. */
    color: var(--uc-muted);
}

/* ===== TOP BAR — soft elevation instead of a hard divider ===== */
.main-header {
    border-bottom: 1px solid var(--uc-border, #e8ebef) !important;
    box-shadow: 0 1px 2px rgba(32, 40, 51, 0.04);
}

/* ===== RIGHT WIDGETS — borderless airy cards ===== */
.right-sidebar .card {
    border: 0 !important;
    border-radius: var(--uc-radius, 16px) !important;
    box-shadow: var(--uc-shadow, 0 2px 12px rgba(32, 40, 51, 0.06)) !important;
}
.right-sidebar .card + .card,
.right-sidebar .card + div .card {
    margin-top: 4px;
}
.right-sidebar .card-header {
    background: transparent !important;
    border-bottom: 0 !important;
    padding-bottom: 4px !important;
}

/* ===== NIGHT MODE parity for the rail & top bar ===== */
body.night-mode .sg-offcanvas:not(.uc-no-rail) > .row > .sg-offcanvas-sidebar:not(.d-md-none):not(.d-sm-none) {
    background: var(--uc-surface, #23262b);
    border-right-color: var(--uc-border, #383d45);
}
@media (min-width: 992px) {
    body.night-mode .sg-offcanvas:not(.uc-no-rail) > .row > .sg-offcanvas-sidebar:not(.d-md-none):not(.d-sm-none):hover {
        scrollbar-color: rgba(233, 237, 242, 0.22) transparent;
    }
    body.night-mode .sg-offcanvas:not(.uc-no-rail) > .row > .sg-offcanvas-sidebar:not(.d-md-none):not(.d-sm-none):hover::-webkit-scrollbar-thumb {
        background: rgba(233, 237, 242, 0.22);
    }
}
body.night-mode .main-header {
    border-bottom-color: var(--uc-border, #383d45) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
body.night-mode .main-side-nav > li.ptb5 small {
    color: var(--uc-muted, #a4adb8);
}

/* ============================================================
   HEADER FULL-BLEED (2026-07-24)
   The header's inner container stops boxing its content: the
   logo block hugs the left edge above the rail (same width as
   the rail, so the search field starts exactly where the page
   content starts), and the home pill moved next to the search
   field (.header-search-row in _header.tpl).
   ============================================================ */
@media (min-width: 992px) {
    .main-header > .container,
    .main-header > .container-fluid {
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 16px !important;
    }
    .main-header .header-brand-col {
        flex: 0 0 var(--uc-rail-w, 320px) !important;
        width: var(--uc-rail-w, 320px) !important;
        max-width: var(--uc-rail-w, 320px) !important;
    }
    .main-header .header-main-col {
        flex: 1 1 0 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }
    .main-header .logo-wrapper {
        padding-left: 4px !important;
    }
}
.header-search-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.header-search-row .header-home-btn {
    margin-left: 0 !important;
}
.header-search-row .search-wrapper {
    /* was `flex: 1 1 auto` with no cap, so at 1920px this computed to
       roughly 900px and the search field dominated the whole header. */
    flex: 0 1 480px;
    min-width: 0;
}

/* Search icon re-anchored inside the flex header row: the base sheet
   places it top:10px against margins the input no longer has here, and
   the global .main-header svg -5px nudge pushed it out of the pill.
   Center it on the input instead. */
.header-search-row .search-wrapper .form-control {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.header-search-row .search-input-icon {
    top: 50% !important;
    transform: translateY(-50%);
    line-height: 0;
}
.header-search-row .search-input-icon .svg-container svg {
    transform: none !important;
}

/* The right icon cluster (grid/friends/chat/bell/profile) hugs the
   right edge instead of leaving a dead gap after the profile name. */
@media (min-width: 992px) {
    .main-header .navbar-wrapper {
        justify-content: flex-end !important;
    }
}

/* ============================================================
   UNITY FEED COMPONENTS (2026-07-26)
   Consolidated here from the two former _head.tpl inline
   <style> blocks so post cards, publisher, stories and sidebar
   widgets have a single source of truth. Order inside this
   section is load-bearing (it mirrors the old document order):
   post footer -> publisher -> stories -> sidebar widgets ->
   final post-stats overrides, which must stay last.
   ============================================================ */

/* Compact reaction/stat summary above the primary actions. */
.post-stats,
.post .post-stats,
li .post-stats {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 12px 0 !important;
  min-height: 44px !important;
  border: 0 !important;
  color: #697586 !important;
  font-size: 13px !important;
}
.post-stats > .float-end {
  margin-inline-start: auto !important;
}
.post .post-actions {
  margin: 0 !important;
  padding: 6px 0 !important;
  border-top: 1px solid #edf0f2 !important;
}
.post .post-actions .action-btn {
  min-height: 42px !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: #526071 !important;
}
.post .post-actions .action-btn:hover {
  background: #f5f6f7 !important;
  color: #1f2937 !important;
}
.post {
  border: 1px solid var(--uc-border, #e7e9ed) !important;
  border-radius: var(--uc-radius, 18px) !important;
  margin-bottom: 20px !important;
  box-shadow: var(--uc-shadow, 0 3px 14px rgba(31, 41, 55, 0.05)) !important;
}
.post .post-body {
  padding: 20px !important;
}
.post .post-header {
  padding: 0 0 12px !important;
}
.post .post-text {
  max-width: 620px;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-top: 8px !important;
  margin-bottom: 16px !important;
  color: var(--uc-text, #1f2937) !important;
  font-size: 15.5px !important;
  line-height: 24px !important;
}
/* Keep Readmore's 120px collapse boundary on a full fifth line. */
.post .post-text[data-readmore] {
  margin-bottom: 0 !important;
}
.post .post-text.js_readmore + [data-readmore-toggle] {
  display: block !important;
  width: fit-content !important;
  max-width: 100%;
  margin: 8px 0 16px !important;
  color: var(--uc-primary, #2563eb) !important;
  line-height: 20px;
}
.post-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--uc-muted, #697586);
}
.post-menu-trigger::after { display: none !important; }
.post-menu-trigger:hover,
.post-menu-trigger:focus-visible {
  background: #f3f4f6;
  color: var(--uc-text, #1f2937);
  outline: none;
}
/* Uniform action icon sizing. */
.post-actions svg.action-icon,
.post-actions .action-icon svg { width: 20px !important; height: 20px !important; }
.post-actions i.action-icon { font-size: 20px !important; line-height: 1 !important; }
body.night-mode .post-stats { color: #9aa8b6 !important; }
body.night-mode .post .post-actions { border-top-color: var(--card-dark-divider) !important; }
body.night-mode .post .post-actions .action-btn:hover { background: var(--card-dark-hover) !important; }
body.night-mode .post-menu-trigger { color: #9aa8b6; }
body.night-mode .post-menu-trigger:hover,
body.night-mode .post-menu-trigger:focus-visible { background: var(--card-dark-hover); color: #fff; }
@media (max-width: 575.98px) {
  .post .post-body { padding: 14px !important; }
  .post .post-header { padding: 2px 0 10px !important; }
  .post .post-text {
    max-width: none;
    padding-left: 0 !important;
    padding-right: 0 !important;
    font-size: 15px !important;
  }
  .post-stats,
  .post .post-stats,
  li .post-stats {
    margin: 0 !important;
    gap: 8px !important;
    font-size: 12px !important;
  }
  .post .post-actions { margin: 0 !important; }
  .post-actions svg.action-icon,
  .post-actions .action-icon svg { width: 18px !important; height: 18px !important; }
  .post-actions i.action-icon { font-size: 18px !important; }
  /* Keep the four actions usable on narrow phones. */
  .post-actions .action-btn .reaction-btn-name,
  .post-actions .action-btn span.d-none {
    display: none !important;
  }
  .post .post-actions .action-btn,
  .post-actions .action-btn {
    gap: 0 !important;
    padding: 10px 2px !important;
  }
}

/* Create Post (Publisher) */
.x-form.publisher.create-post {
    background: #fff;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
    margin-bottom: 20px;
    border: none !important;
}
#publisher-box .publisher-avatar {
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important;
    margin-right: 15px !important;
    object-fit: cover !important;
}
/* Avatar in fixed left gutter; input fills rest and container grows to fit (no overflow into toolbar) */
#publisher-box.publisher .publisher-message.create-top {
    display: block !important;
    position: relative !important;
    padding: 16px 16px 12px 74px !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
}
#publisher-box.publisher .publisher-message.create-top .publisher-avatar {
    position: absolute !important;
    left: 16px !important;
    top: 16px !important;
    right: auto !important;
    bottom: auto !important;
    float: none !important;
    margin: 0 !important;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    border: 3px solid #2563eb !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
}
#publisher-box.publisher .publisher-message.create-top .colored-text-wrapper {
    width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}
#publisher-box.publisher .publisher-message.create-top .quill-editor,
#publisher-box.publisher .publisher-message.create-top .ql-container,
#publisher-box.publisher .publisher-message.create-top textarea {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
}
#publisher-box.publisher .publisher-message.create-top .ql-editor,
#publisher-box.publisher .publisher-message.create-top textarea {
    min-height: 84px !important;
    max-height: 220px !important;
    overflow-y: auto !important;
}
#publisher-box .publisher-message.create-top .colored-text-wrapper {
    flex: 1;
    padding-left: 0 !important;
}
#publisher-box .publisher-message.create-top .quill-editor,
#publisher-box .publisher-message.create-top .ql-container {
    width: 100%;
    border: none !important;
    background: #f0f2f5 !important;
    border-radius: 16px !important;
    outline: none;
    min-height: 90px !important;
}
#publisher-box .publisher-message.create-top .ql-editor {
    padding: 12px 16px !important;
    min-height: 90px !important;
    line-height: 22px !important;
    font-size: 15px !important;
    color: #333 !important;
}
#publisher-box .publisher-message.create-top .ql-editor.ql-blank::before {
    left: 16px !important;
    top: 12px !important;
    font-style: normal !important;
    color: #8f939c !important;
}
/* Fallback for textarea just in case */
.publisher-message.create-top textarea {
    width: 100%;
    border: none !important;
    background: #f0f2f5 !important;
    padding: 12px 16px !important;
    border-radius: 16px !important;
    outline: none;
    min-height: 90px !important;
    resize: none !important;
}
.publisher-tools-tabs {
    display: none !important;
}

.create-actions {
    display: flex;
    justify-content: space-around;
    margin-top: 12px;
    border-top: 1px solid #eee;
    padding-top: 10px;
}
.create-actions > div {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-radius: 8px;
    cursor: pointer;
    color: #555;
    font-weight: 500;
    transition: background 0.2s;
}
.create-actions > div:hover {
    background: #f0f2f5;
}
.create-actions .main-icon,
.create-actions .main-icon path,
.create-actions .main-icon circle,
.create-actions .main-icon polygon,
.create-actions .main-icon rect {
    fill: #2563eb !important;
}

/* Publisher Footer Styling */
#publisher-box .publisher-footer {
    padding: 0 15px 15px 15px !important;
}

/* Footer Options (Toggles) */
#publisher-box .publisher-footer-options {
    padding: 10px 0 !important;
}
#publisher-box .publisher-footer-options .form-table-row {
    margin-bottom: 20px !important;
    display: flex;
    align-items: center;
}
#publisher-box .publisher-footer-options .avatar {
    background: none !important;
    width: 32px;
    height: 32px;
    margin-right: 15px !important;
}
#publisher-box .publisher-footer-options .avatar svg {
    width: 28px !important;
    height: 28px !important;
}
#publisher-box .publisher-footer-options .avatar svg,
#publisher-box .publisher-footer-options .avatar svg path,
#publisher-box .publisher-footer-options .avatar svg circle,
#publisher-box .publisher-footer-options .avatar svg polygon,
#publisher-box .publisher-footer-options .avatar svg rect {
    fill: #2563eb !important; /* Unity blue theme */
}
#publisher-box .publisher-footer-options .form-label {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #4a5568 !important;
    margin-bottom: 4px !important;
}
#publisher-box .publisher-footer-options .form-text {
    font-size: 14px !important;
    color: #718096 !important;
}

/* Custom Toggle Switch */
#publisher-box .publisher-footer-options .switch {
    width: 54px !important;
    height: 30px !important;
}
#publisher-box .publisher-footer-options .slider.round {
    border-radius: 34px !important;
    background-color: #cbd5e1 !important; /* light gray track */
}
#publisher-box .publisher-footer-options .slider:before {
    height: 22px !important;
    width: 22px !important;
    left: 4px !important;
    bottom: 4px !important;
    background-color: white !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}
#publisher-box .publisher-footer-options input:checked + .slider {
    background-color: #2563eb !important; /* Unity blue when ON */
}
#publisher-box .publisher-footer-options input:checked + .slider:before {
    transform: translateX(24px) !important;
}

/* Send Button (full-width pill) */
#publisher-box .publisher-footer-buttons {
    display: block !important;
    padding: 0 !important;
}

/* Stories Styling */
.card.stories-wrapper-container {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    margin-bottom: 20px;
}
.card.stories-wrapper-container .card-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    border-bottom: none !important;
    padding: 10px 0 !important;
    background: transparent !important;
}
.card.stories-wrapper-container .card-body {
    padding: 0 !important;
}
#stories {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
}
#stories::-webkit-scrollbar {
    display: none;
}
#stories .story,
#stories .add-story {
    border-radius: 16px !important;
    overflow: hidden !important;
    width: 110px !important;
    height: 180px !important;
    min-width: 110px !important;
    position: relative;
    transition: transform 0.25s ease;
    box-sizing: border-box !important;
}
#stories .story:hover,
#stories .add-story:hover {
    transform: translateY(-4px);
}
#stories .add-story {
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}
#stories .story:not(.seen) {
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.25) !important;
}
#stories .story.seen {
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}
#stories .story a.item-link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-decoration: none;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
#stories .story .item-preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: block;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
#stories .story .item-preview img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
#stories .story.seen .item-preview img {
    filter: grayscale(15%) blur(0.5px) brightness(0.85) !important;
    opacity: 0.75 !important;
}
#stories .story .story-avatar {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #fff !important;
    background: #fff;
    padding: 0;
    z-index: 3;
    box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}
#stories .story.seen .story-avatar {
    opacity: 0.7 !important;
    border-color: #cbd5e1 !important;
}
#stories .story .story-avatar img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50%;
    object-fit: cover;
}
/* Position count badge on top-right of the card itself */
#stories .story .story-count {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    background: #2563eb !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1.5px solid #fff !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
    padding: 0 !important;
    z-index: 4 !important;
}
#stories .story .info {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    z-index: 3;
    margin: 0;
    padding: 0;
}
#stories .story .info .name {
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#stories .story.seen .info .name {
    opacity: 0.7 !important;
}
#stories .add-story .img {
    width: 100% !important;
    height: 100% !important;
    background-size: cover;
    background-position: center;
}
#stories .add-story .add {
    position: absolute !important;
    top: 58% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: #fff !important;
    color: #2563eb;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #2563eb !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 2;
}
#stories .add-story .add i {
    color: #2563eb !important;
}
/* Ensure no default sizing conflicts */
#stories .add-story {
    border: none !important;
}

/* Stories RTL overrides */
[dir="RTL"] #stories .story .story-avatar {
    right: 10px !important;
    left: auto !important;
}
[dir="RTL"] #stories .story .story-count {
    left: 10px !important;
    right: auto !important;
}
[dir="RTL"] #stories .story .info {
    right: 10px !important;
    left: 10px !important;
    text-align: right !important;
}

/* Sidebar Widgets */
.js_sticky-sidebar .card {
    background: #fff !important;
    border-radius: 20px !important;
    padding: 10px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    margin-bottom: 20px !important;
    border: none !important;
}
.js_sticky-sidebar .card-header {
    background: transparent !important;
    border-bottom: none !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    color: #000 !important;
    padding: 15px 15px 5px !important;
}
.js_sticky-sidebar .card-header .fa-user-plus {
    color: #2563eb !important;
    font-size: 20px !important;
    font-weight: 900 !important;
}
.js_sticky-sidebar .feeds-item {
    border: none !important;
    padding: 10px 0 !important;
}
.js_sticky-sidebar .data-avatar img {
    border-radius: 50% !important;
}
.js_sticky-sidebar .data-content .name a {
    font-weight: 800 !important;
    color: #2d3748 !important;
    font-size: 16px !important;
}
.js_sticky-sidebar .data-content div {
    color: #a0aec0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}
.right-sidebar .suggestion-card .card-body.with-list {
    padding: 0 10px 8px !important;
}
.right-sidebar .suggestion-card .card-body.with-list ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}
.right-sidebar .suggestion-card .feeds-item {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}
.right-sidebar .suggestion-card .data-container {
    min-height: 48px !important;
    padding: 3px 0 !important;
    gap: 8px !important;
    align-items: center !important;
}
.right-sidebar .suggestion-card .data-avatar img {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
}
.right-sidebar .suggestion-card .data-content {
    gap: 6px !important;
}
.right-sidebar .suggestion-card .data-content .mt5 {
    margin-top: 0 !important;
}
.right-sidebar .suggestion-card .data-content .name,
.right-sidebar .suggestion-card .data-content .name a {
    font-size: 13px !important;
    line-height: 1.25 !important;
}
.right-sidebar .suggestion-card .data-content > div:not(.mt5):not(.float-end) {
    font-size: 11px !important;
    line-height: 1.2 !important;
    margin-top: 0 !important;
}
.right-sidebar .suggestion-card .btn-custom-add,
.right-sidebar .suggestion-card .js_like-page,
.right-sidebar .suggestion-card .js_unlike-page,
.right-sidebar .suggestion-card .js_join-group,
.right-sidebar .suggestion-card .js_leave-group {
    min-width: 58px !important;
    height: 28px !important;
    padding: 0 12px !important;
    font-size: 11.5px !important;
}
.right-sidebar .suggestion-card {
    border: 1px solid var(--uc-primary-border, #bfdbfe) !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.08) !important;
    overflow: hidden !important;
}
.right-sidebar .suggestion-card .card-header {
    padding: 12px 14px 10px !important;
    background: linear-gradient(180deg, var(--uc-primary-soft, #eff6ff), #fff) !important;
    border-bottom: 1px solid var(--uc-primary-border, #bfdbfe) !important;
    color: var(--uc-text, #202833) !important;
}
.right-sidebar .suggestion-card .right-sidebar-heading-icon,
.right-sidebar .suggestion-card .card-header .fa-user-plus,
.right-sidebar .suggestion-card .card-header .fa-flag,
.right-sidebar .suggestion-card .card-header .fa-users,
.right-sidebar .suggestion-card .card-header .fa-calendar {
    color: var(--uc-primary, #2563eb) !important;
}
.right-sidebar .suggestion-card .data-avatar img {
    box-shadow: 0 0 0 2px var(--uc-primary-soft-strong, #dbeafe) !important;
}
.right-sidebar .suggestion-card .data-content .name a:hover,
.right-sidebar .suggestion-card .card-header a {
    color: var(--uc-primary, #2563eb) !important;
}
.right-sidebar .suggestion-card .btn-custom-add,
.right-sidebar .suggestion-card .js_like-page,
.right-sidebar .suggestion-card .js_join-group {
    background: var(--uc-primary, #2563eb) !important;
    border-color: var(--uc-primary, #2563eb) !important;
    color: #fff !important;
    box-shadow: none !important;
}
.right-sidebar .suggestion-card .btn-custom-add:hover,
.right-sidebar .suggestion-card .js_like-page:hover,
.right-sidebar .suggestion-card .js_join-group:hover {
    background: var(--uc-primary-hover, #1d4ed8) !important;
    border-color: var(--uc-primary-hover, #1d4ed8) !important;
    color: #fff !important;
}
.right-sidebar .suggestion-card .js_unlike-page,
.right-sidebar .suggestion-card .js_leave-group {
    background: var(--uc-primary-soft, #eff6ff) !important;
    border: 1px solid var(--uc-primary-border, #bfdbfe) !important;
    color: var(--uc-primary-hover, #1d4ed8) !important;
}
body.night-mode .right-sidebar .suggestion-card .card-header {
    background: var(--uc-primary-soft, rgba(59, 130, 246, 0.18)) !important;
    border-bottom-color: var(--uc-primary-border, rgba(96, 165, 250, 0.42)) !important;
}
.right-sidebar .card.bg-indigo,
.right-sidebar .card.bg-teal,
.right-sidebar .card.bg-red {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #fff !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}
.right-sidebar .card.bg-indigo .card-header,
.right-sidebar .card.bg-teal .card-header,
.right-sidebar .card.bg-red .card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 12px 14px 8px !important;
}
.right-sidebar .card.bg-indigo .card-header h6,
.right-sidebar .card.bg-teal .card-header h6,
.right-sidebar .card.bg-red .card-header h6 {
    order: 1 !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
}
.right-sidebar .card.bg-indigo .card-header .float-end,
.right-sidebar .card.bg-teal .card-header .float-end,
.right-sidebar .card.bg-red .card-header .float-end {
    order: 2 !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
}
.right-sidebar .card.bg-indigo .card-header a,
.right-sidebar .card.bg-teal .card-header a,
.right-sidebar .card.bg-red .card-header a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 28px !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    text-decoration: none !important;
}
.right-sidebar .card.bg-indigo .card-header .svg-container,
.right-sidebar .card.bg-teal .card-header .svg-container,
.right-sidebar .card.bg-red .card-header .svg-container {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    margin-right: 5px !important;
    color: #ffd83d !important;
    fill: #ffd83d !important;
    flex: 0 0 auto !important;
}
.right-sidebar .card.bg-indigo .card-header .svg-container svg,
.right-sidebar .card.bg-teal .card-header .svg-container svg,
.right-sidebar .card.bg-red .card-header .svg-container svg,
.right-sidebar .card.bg-indigo .card-header .svg-container path,
.right-sidebar .card.bg-teal .card-header .svg-container path,
.right-sidebar .card.bg-red .card-header .svg-container path {
    fill: #ffd83d !important;
}
.right-sidebar .card.bg-indigo .card-body,
.right-sidebar .card.bg-teal .card-body,
.right-sidebar .card.bg-red .card-body {
    padding: 6px 12px 14px !important;
}
.right-sidebar .hi24-promo-list {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
}
.right-sidebar .hi24-promo-list::-webkit-scrollbar {
    display: none !important;
}
.right-sidebar .hi24-promo-list .user-box {
    width: calc((100% - 24px) / 3) !important;
    min-width: calc((100% - 24px) / 3) !important;
    max-width: calc((100% - 24px) / 3) !important;
    min-height: 74px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    text-align: center !important;
    border-radius: 0 !important;
    color: #fff !important;
    transition: opacity 0.15s ease, transform 0.15s ease !important;
}
.right-sidebar .hi24-promo-list .user-box:hover {
    background: transparent !important;
    color: #fff !important;
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
}
.right-sidebar .hi24-promo-list .user-box img {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    background: rgba(255, 255, 255, 0.18) !important;
    border: 2px solid rgba(255, 255, 255, 0.34) !important;
    box-shadow: none !important;
}
.right-sidebar .hi24-promo-list .user-box .name {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
[dir="RTL"] .right-sidebar .hi24-promo-list .user-box {
    text-align: right !important;
}
[dir="RTL"] .right-sidebar .card.bg-indigo .card-header .float-end,
[dir="RTL"] .right-sidebar .card.bg-teal .card-header .float-end,
[dir="RTL"] .right-sidebar .card.bg-red .card-header .float-end {
    margin-right: auto !important;
    margin-left: 0 !important;
}
.right-sidebar .trending-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-height: 37px !important;
    margin-bottom: 8px !important;
    padding: 9px 14px !important;
    border-radius: 9px !important;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.18) !important;
    transition: background 0.15s ease, transform 0.15s ease !important;
}
.right-sidebar .trending-item:hover {
    background: rgba(255, 255, 255, 0.24) !important;
    transform: translateY(-1px) !important;
}
.right-sidebar .trending-item:last-child {
    margin-bottom: 0 !important;
}
.right-sidebar .trending-item .hash {
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.right-sidebar .trending-item .frequency {
    color: #fff !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}
.right-sidebar #blogs-carousel .post-media.list {
    margin: 0 !important;
}
.right-sidebar #blogs-carousel .post-media-meta {
    padding: 10px 4px 0 !important;
}
.right-sidebar #blogs-carousel .post-media-meta .title {
    color: #1c1e21 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
}
.right-sidebar #blogs-carousel .post-media-meta .text,
.right-sidebar #blogs-carousel .post-media-meta .info {
    color: #6b7280 !important;
    font-size: 12px !important;
}

/* ==========================================================================
   UNITY PAGE SHELL  (2026-07-30)
   --------------------------------------------------------------------------
   One page-header / pill-nav / toolbar / section-title system shared by every
   listing page (Groups, Events, Movies, Pages, Blogs, Jobs, Market...).

   Before this, each listing page shipped its own inline <style> block with its
   own hardcoded palette - which is how the abandoned coral brand survived on
   Groups long after the theme moved to Unity blue. Those blocks are deleted;
   the page keeps its markup and inherits from here.

   The legacy .groups-* selectors are kept as aliases so partials that reuse
   them (e.g. ajax.group.publisher.tpl's .btn-create-group) keep working.
   New pages should use the generic .uc-page-* / .uc-pill-nav / .uc-toolbar
   names only.
   ========================================================================== */

/* --- Page header banner ------------------------------------------------- */
.uc-page-head,
.groups-header-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uc-gap-card);
    flex-wrap: wrap;
    padding: var(--uc-pad-card);
    margin-bottom: var(--uc-gap-card);
    border-radius: var(--uc-radius-lg);
    background: var(--uc-page-head-bg);
    box-shadow: var(--uc-shadow-md);
    color: var(--uc-page-head-ink);
}

.uc-page-head__title,
.groups-header-title {
    display: flex;
    align-items: center;
    gap: var(--uc-gap-stack);
}

.uc-page-head__title h1,
.uc-page-head__title h2,
.groups-header-title h2 {
    margin: 0;
    font-size: var(--uc-text-2xl);
    font-weight: var(--uc-weight-bold);
    line-height: var(--uc-leading-tight);
    letter-spacing: var(--uc-tracking-tight);
    color: var(--uc-page-head-ink);
}

.uc-page-head__icon,
.groups-header-icon-box {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--uc-text-xl);
    border-radius: var(--uc-radius-md);
    background: rgba(255, 255, 255, .18);
    color: var(--uc-page-head-ink);
}

.uc-page-head__subtitle,
.groups-header-subtitle {
    margin: .25rem 0 0 60px;
    font-size: var(--uc-text-sm);
    line-height: var(--uc-leading-snug);
    color: rgba(255, 255, 255, .82);
}

/* Primary action sitting on the banner. Inverted: white chip on the brand
   gradient reads as the strongest thing on the page, which is correct. */
.uc-page-head__action,
.btn-create-group {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .625rem 1.125rem;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: var(--uc-radius-sm);
    background: rgba(255, 255, 255, .16);
    color: var(--uc-page-head-ink);
    font-size: var(--uc-text-base);
    font-weight: var(--uc-weight-semi);
    text-decoration: none;
    transition: background var(--uc-dur) var(--uc-ease),
                border-color var(--uc-dur) var(--uc-ease),
                transform var(--uc-dur) var(--uc-ease);
}
.uc-page-head__action:hover,
.btn-create-group:hover {
    background: rgba(255, 255, 255, .26);
    border-color: rgba(255, 255, 255, .45);
    color: var(--uc-page-head-ink);
    transform: translateY(-1px);
}
.uc-page-head__action:focus-visible,
.btn-create-group:focus-visible {
    outline: 2px solid var(--uc-page-head-ink);
    outline-offset: 2px;
}

/* --- Pill navigation ----------------------------------------------------- */
.uc-pill-nav,
.groups-nav-pills {
    display: flex;
    gap: var(--uc-gap-stack);
    margin-bottom: var(--uc-gap-card);
    padding: var(--uc-gap-stack);
    background: var(--uc-surface);
    border: 1px solid var(--uc-border);
    border-radius: var(--uc-radius-lg);
    box-shadow: var(--uc-shadow-xs);
    overflow-x: auto;
    scrollbar-width: thin;
}

.uc-pill-nav a,
.groups-nav-pills a {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1.125rem;
    border-radius: var(--uc-radius-sm);
    background: transparent;
    color: var(--uc-muted);
    font-size: var(--uc-text-base);
    font-weight: var(--uc-weight-medium);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--uc-dur) var(--uc-ease),
                color var(--uc-dur) var(--uc-ease);
}
.uc-pill-nav a:hover,
.groups-nav-pills a:hover {
    background: var(--uc-surface-hover);
    color: var(--uc-text);
}
.uc-pill-nav a.active,
.groups-nav-pills a.active {
    background: var(--uc-primary);
    color: var(--uc-text-on-brand);
    font-weight: var(--uc-weight-semi);
}
.uc-pill-nav a.active i,
.groups-nav-pills a.active i { color: var(--uc-text-on-brand); }
.uc-pill-nav a:focus-visible,
.groups-nav-pills a:focus-visible {
    outline: none;
    box-shadow: var(--uc-ring);
}

.uc-pill-nav__badge,
.groups-nav-badge {
    padding: .0625rem .375rem;
    border-radius: var(--uc-radius-pill);
    background: var(--uc-surface-sunken);
    color: var(--uc-muted);
    font-size: var(--uc-text-2xs);
    font-weight: var(--uc-weight-bold);
    font-variant-numeric: tabular-nums;
}
.uc-pill-nav a.active .uc-pill-nav__badge,
.groups-nav-pills a.active .groups-nav-badge {
    background: rgba(255, 255, 255, .24);
    color: var(--uc-text-on-brand);
}

/* --- Search + filter toolbar --------------------------------------------- */
.uc-toolbar,
.groups-toolbar {
    display: flex;
    gap: var(--uc-gap-card);
    flex-wrap: wrap;
    margin-bottom: var(--uc-gap-card);
    padding: var(--uc-gap-stack);
    background: var(--uc-surface);
    border: 1px solid var(--uc-border);
    border-radius: var(--uc-radius-lg);
    box-shadow: var(--uc-shadow-xs);
}

.uc-toolbar__search,
.groups-search {
    position: relative;
    flex: 1 1 240px;
    min-width: 0;
}
.uc-toolbar__search input,
.groups-search input {
    width: 100%;
    padding: .625rem 1rem .625rem 2.5rem;
    background: var(--uc-surface-sunken);
    border: 1px solid transparent;
    border-radius: var(--uc-radius-sm);
    outline: none;
    font-size: var(--uc-text-base);
    color: var(--uc-text);
    transition: border-color var(--uc-dur) var(--uc-ease),
                box-shadow var(--uc-dur) var(--uc-ease);
}
.uc-toolbar__search input::placeholder,
.groups-search input::placeholder { color: var(--uc-text-subtle); }
.uc-toolbar__search input:focus,
.groups-search input:focus {
    background: var(--uc-surface);
    border-color: var(--uc-primary);
    box-shadow: var(--uc-ring);
}
.uc-toolbar__search i,
.groups-search i {
    position: absolute;
    inset-inline-start: .875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--uc-text-subtle);
    pointer-events: none;
}

.uc-toolbar__filters,
.groups-filters {
    display: flex;
    gap: var(--uc-gap-stack);
    flex-wrap: wrap;
}
.uc-toolbar__filters select,
.groups-filters select {
    padding: .625rem 2rem .625rem 1rem;
    background-color: var(--uc-surface);
    border: 1px solid var(--uc-border-input);
    border-radius: var(--uc-radius-sm);
    outline: none;
    font-size: var(--uc-text-base);
    color: var(--uc-text);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    /* currentColor is not usable in a data-URI, so the chevron is drawn with
       the neutral ink and simply inherits opacity from the control */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23656e79' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    transition: border-color var(--uc-dur) var(--uc-ease),
                box-shadow var(--uc-dur) var(--uc-ease);
}
.uc-toolbar__filters select:focus,
.groups-filters select:focus {
    border-color: var(--uc-primary);
    box-shadow: var(--uc-ring);
}

/* --- Section title -------------------------------------------------------- */
.uc-section-title,
.groups-section-title {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin-bottom: var(--uc-gap-card);
    font-size: var(--uc-text-lg);
    font-weight: var(--uc-weight-bold);
    line-height: var(--uc-leading-tight);
    letter-spacing: var(--uc-tracking-snug);
    color: var(--uc-text-strong);
}
.uc-section-title i,
.groups-section-title i { color: var(--uc-accent); }

@media (max-width: 575.98px) {
    .uc-page-head,
    .groups-header-card { align-items: flex-start; flex-direction: column; }
    .uc-page-head__subtitle,
    .groups-header-subtitle { margin-inline-start: 0; }
}

/* ========================== END PAGE SHELL =============================== */


/* ==========================================================================
   NEWSFEED RIGHT-RAIL WIDGETS  —  events / TV / videos      (2026-07-30)
   --------------------------------------------------------------------------
   Ported from the grace theme's .kretan-* widget family and re-expressed in
   --uc-* tokens. No body.night-mode rules are needed anywhere below: LAYER 6
   of the design system re-binds every token these rules consume, so
   token-only component CSS is dark-mode correct for free.

   NOTE: `.right-sidebar .card` earlier in this file hard-codes border, radius
   and background with !important, so the frame overrides here are both scoped
   to .uc-widget-card AND !important - otherwise the older rule wins.

   This section is intentionally NOT mirrored into style.rtl.css: RTL is not a
   language this install ships.
   ========================================================================== */

.right-sidebar .card.uc-widget-card {
    position: relative;
    isolation: isolate;
    overflow: hidden !important;
    border: 1px solid var(--uc-border) !important;
    border-radius: var(--uc-radius-lg) !important;
    background: var(--uc-surface) !important;
    color: var(--uc-text);
    box-shadow: var(--uc-shadow-sm) !important;
    transition: border-color var(--uc-dur) var(--uc-ease),
                box-shadow var(--uc-dur) var(--uc-ease);
}

/* the 2px accent hairline grace puts across the top of every widget */
.uc-widget-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    z-index: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--uc-accent), transparent);
    opacity: .85;
    pointer-events: none;
}
.uc-widget-card > .card-header,
.uc-widget-card > .card-body {
    position: relative;
    z-index: 2;
}

@media (hover: hover) and (pointer: fine) {
    .right-sidebar .card.uc-widget-card:hover {
        border-color: var(--uc-accent-border) !important;
        box-shadow: var(--uc-shadow-md) !important;
    }
}

.right-sidebar .uc-widget-card > .card-header {
    padding: var(--uc-pad-tight) var(--uc-pad-card) 8px !important;
    font-size: var(--uc-text-md) !important;
    font-weight: var(--uc-weight-semi) !important;
    color: var(--uc-text) !important;
    letter-spacing: var(--uc-tracking-snug);
}
.uc-widget-card > .card-body { padding: 12px !important; }

/* --- shared media primitives ------------------------------------------- */
.uc-tv-cover,
.uc-tv-row-cover,
.uc-vid-thumb {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #0c1622;                 /* letterbox colour, deliberately literal */
}
.uc-tv-cover img,
.uc-tv-row-cover img,
.uc-vid-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .94;
    transition: transform 220ms var(--uc-ease), opacity 220ms var(--uc-ease);
}
.uc-tv-cover::after,
.uc-vid-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 16, 29, 0) 45%, rgba(7, 16, 29, .55) 100%);
}

.uc-tv-play,
.uc-vid-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--uc-radius-pill);
    background: rgba(255, 255, 255, .92);
    color: #0c1622;
    transform: translate(-50%, -50%);
    box-shadow: var(--uc-shadow-md);
    transition: transform var(--uc-dur-fast) var(--uc-ease),
                background-color var(--uc-dur-fast) var(--uc-ease);
}
.uc-tv-play i,
.uc-vid-play i { margin-left: 3px; font-size: 14px; }
.uc-tv-play.small { width: 28px; height: 28px; }
.uc-tv-play.small i { margin-left: 2px; font-size: 10px; }
.uc-vid-play { width: 32px; height: 32px; }
.uc-vid-play i { margin-left: 2px; font-size: 11px; }
.uc-tv-featured:hover .uc-tv-play,
.uc-vid-item:hover .uc-vid-play {
    background: var(--uc-accent);
    color: var(--uc-accent-ink);
    transform: translate(-50%, -50%) scale(1.08);
}

.uc-tv-duration {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 2;
    padding: 3px 8px;
    border-radius: var(--uc-radius-xs);
    background: rgba(7, 16, 29, .78);
    color: #fff;
    font-size: var(--uc-text-2xs);
    font-weight: var(--uc-weight-bold);
    line-height: 1.2;
}
.uc-tv-duration.small { right: 4px; bottom: 4px; padding: 1px 5px; }

/* --- upcoming events ---------------------------------------------------- */
.uc-event-row,
.uc-tv-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 6px;
    border-radius: var(--uc-radius-md);
    text-decoration: none !important;
    transition: background-color var(--uc-dur-fast) var(--uc-ease);
}
.uc-event-row:hover,
.uc-tv-row:hover { background: var(--uc-surface-hover); }
.uc-event-row + .uc-event-row {
    border-top: 1px solid var(--uc-border);
    border-radius: 0 0 var(--uc-radius-md) var(--uc-radius-md);
}

.uc-event-date {
    display: flex;
    flex: 0 0 48px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 52px;
    border: 1px solid var(--uc-border);
    border-radius: var(--uc-radius-md);
    background: var(--uc-surface-soft);
}
.uc-event-date strong {
    color: var(--uc-text);
    font-size: 17px;
    font-weight: var(--uc-weight-bold);
    line-height: 1;
}
.uc-event-date small {
    margin-top: 2px;
    color: var(--uc-accent-ink);
    font-size: var(--uc-text-2xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: var(--uc-tracking-wide);
}

.uc-event-copy,
.uc-tv-row-copy { min-width: 0; }
.uc-event-copy strong {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--uc-text);
    font-size: var(--uc-text-sm);
    font-weight: var(--uc-weight-bold);
    line-height: var(--uc-leading-tight);
}
.uc-event-copy small,
.uc-tv-row-copy small,
.uc-vid-meta {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--uc-muted);
    font-size: var(--uc-text-xs);
    font-weight: var(--uc-weight-semi);
}

/* --- Unity Christ TV ---------------------------------------------------- */
.uc-tv-featured {
    display: block;
    margin-bottom: 6px;
    text-decoration: none !important;
}
.uc-tv-cover {
    margin-bottom: 10px;
    border-radius: var(--uc-radius-md);
}
.uc-tv-featured:hover .uc-tv-cover img { opacity: 1; transform: scale(1.03); }
.uc-tv-featured-title {
    display: block;
    color: var(--uc-text);
    font-size: var(--uc-text-base);
    font-weight: var(--uc-weight-bold);
    line-height: var(--uc-leading-tight);
}
.uc-tv-featured-meta {
    display: block;
    margin-top: 3px;
    color: var(--uc-muted);
    font-size: var(--uc-text-xs);
    font-weight: var(--uc-weight-semi);
}
.uc-tv-row { gap: 10px; margin-top: 8px; padding: 6px; }
.uc-tv-row-cover { flex: 0 0 92px; border-radius: var(--uc-radius-sm); }
.uc-tv-row-copy strong {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    color: var(--uc-text);
    font-size: var(--uc-text-sm);
    font-weight: var(--uc-weight-bold);
    line-height: 1.3;
}

/* --- latest videos grid -------------------------------------------------- */
/* auto-fill rather than grace's hard `1fr 1fr`, so the rail can narrow */
.uc-vid-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 12px;
}
.uc-vid-item {
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
}
.uc-vid-thumb { margin-bottom: 7px; border-radius: var(--uc-radius-md); }
.uc-vid-item:hover .uc-vid-thumb img { opacity: 1; transform: scale(1.04); }
.uc-vid-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    color: var(--uc-text);
    font-size: var(--uc-text-sm);
    font-weight: var(--uc-weight-bold);
    line-height: 1.3;
    transition: color var(--uc-dur-fast) var(--uc-ease);
}
.uc-vid-item:hover .uc-vid-title { color: var(--uc-primary); }
.uc-vid-meta { white-space: normal; }

/* --- keyboard focus + reduced motion (grace has neither) ----------------- */
.uc-event-row:focus-visible,
.uc-tv-featured:focus-visible,
.uc-tv-row:focus-visible,
.uc-vid-item:focus-visible {
    outline: none;
    box-shadow: var(--uc-ring);
    border-radius: var(--uc-radius-md);
}
@media (prefers-reduced-motion: reduce) {
    .right-sidebar .card.uc-widget-card,
    .uc-event-row, .uc-tv-row, .uc-tv-play, .uc-vid-play, .uc-vid-title,
    .uc-tv-cover img, .uc-tv-row-cover img, .uc-vid-thumb img { transition: none; }
    .uc-tv-featured:hover .uc-tv-cover img,
    .uc-vid-item:hover .uc-vid-thumb img,
    .uc-tv-featured:hover .uc-tv-play,
    .uc-vid-item:hover .uc-vid-play { transform: none; }
    .uc-tv-play, .uc-vid-play { transform: translate(-50%, -50%); }
}

/* --- /watch grid: 16:9 cards instead of the base sheet's square grey tile
       (base declares `.pg_video{background:#eee;padding-bottom:100%}`) ------ */
.pg_video {
    padding-bottom: 56.25% !important;
    margin-bottom: 22px;
    border: 1px solid var(--uc-border);
    border-radius: var(--uc-radius-md);
    background: #0c1622;
    box-shadow: var(--uc-shadow-sm);
    transition: transform var(--uc-dur) var(--uc-ease),
                box-shadow var(--uc-dur) var(--uc-ease),
                border-color var(--uc-dur) var(--uc-ease);
}
.pg_video:hover {
    transform: translateY(-2px);
    border-color: var(--uc-accent-border);
    box-shadow: var(--uc-shadow-md);
}
.pg_video.is-reel { padding-bottom: 150% !important; }
.pg_video::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: 40%;
    background: linear-gradient(to top, rgba(7, 16, 29, .7), transparent);
    pointer-events: none;
}
.pg_video .play-button {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    top: calc(50% - 28px);
    left: calc(50% - 28px);
    width: 56px;
    height: 56px;
    padding: 0;
    border: 1.5px solid rgba(255, 255, 255, .4);
    background: rgba(12, 18, 28, .5);
    backdrop-filter: blur(2px);
}
.pg_video .play-button i { margin-left: 3px; font-size: 20px; }
.pg_video:hover .play-button {
    border-color: var(--uc-accent);
    background: var(--uc-accent);
    color: var(--uc-accent-ink);
}

.pg_video-views,
.pg_video-tag {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--uc-radius-sm);
    font-size: var(--uc-text-2xs);
    font-weight: var(--uc-weight-bold);
    line-height: 1;
    color: #fff;
}
.pg_video-views {
    right: 8px;
    bottom: 8px;
    background: rgba(7, 16, 29, .62);
    backdrop-filter: blur(2px);
}
.pg_video-views i { font-size: 9px; opacity: .9; }
.pg_video-tag {
    left: 8px;
    top: 8px;
    background: var(--uc-accent);
    color: var(--uc-accent-ink);
    letter-spacing: var(--uc-tracking-wide);
    text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
    .pg_video, .pg_video:hover { transition: none; transform: none; }
}


/* This block intentionally comes last: legacy theme rules above must not
   restore the old crowded footer or dark text in night mode. */
.post .post-stats > .float-start,
.post .post-stats > .float-end {
    float: none !important;
}

/* The reactions summary now sits inside .js_post-reactions-stats - the element
   post.js swaps wholesale on a realtime reaction event. That wrapper must be
   transparent to this row's flex layout, and its .float-start child is no
   longer a direct child of .post-stats, so it needs the float reset too.

   NOT scoped under `.post`: __feeds_post_live.tpl, __feeds_post_photo.tpl and
   __feeds_post_reel.tpl start at `.post-body` and have no `.post` root (they
   render inside `.lightbox-post`), so a `.post`-prefixed rule would skip them
   and their stats row would fall back to legacy Bootstrap floats. */
.post-stats > .js_post-reactions-stats {
    display: flex;
    align-items: center;
    min-width: 0;
}
.post-stats > .js_post-reactions-stats > .float-start {
    float: none !important;
    margin-inline-end: 10px;
}
.post .post-stats > .float-end {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px 16px !important;
    margin: 0 0 0 auto !important;
}
.post .post-stats > .float-end > span.pointer:not(.x-hidden) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 0 !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}
.post .post-stats > .float-end > span.x-hidden {
    display: none !important;
}
.post .post-stats .fa,
.post .post-stats .fas,
.post .post-stats .far {
    color: inherit !important;
    font-size: 14px !important;
    line-height: 1 !important;
    margin: 0 !important;
}
body.night-mode .post .post-text {
    color: #e7ebf0 !important;
}
body.night-mode .post .post-stats,
body.night-mode .post .post-stats > .float-end > span.pointer:not(.x-hidden) {
    color: #aeb8c4 !important;
}
body.night-mode .post .post-actions .action-btn {
    color: #d4dae2 !important;
}