/* =============================================================================
   UTILITY CLASSES
   ============================================================================= */

.text-bronze { color: #cd7f32 !important; }
.bg-bronze { background-color: #cd7f32 !important; }

/* =============================================================================
   BASE TYPOGRAPHY
   ============================================================================= */

html {
    overflow-x: hidden;
}

body {
    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--text-primary);
    overflow-x: clip;
}

/* Alternating section background for visual rhythm */
.bg-section-alt {
    background-color: var(--bg-secondary);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--text-primary);
}

h1 {
    font-family: var(--font-family-brand);
}

code, pre, kbd, samp {
    font-family: var(--font-family-mono);
}

/* Theme-aware keyboard key style (overrides Bootstrap's dark pill default).
   Uses Bootstrap 5.3 colour tokens so it automatically follows
   data-bs-theme="light" / "dark" without an explicit dark override. */
kbd {
    display: inline-block;
    padding: 0.15em 0.5em;
    font-size: 0.85em;
    font-weight: 500;
    line-height: 1.2;
    vertical-align: baseline;
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-bottom-width: 2px;
    border-radius: 0.35rem;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}
kbd kbd {
    /* Nested kbd (e.g. Bootstrap examples) shouldn't double-border */
    padding: 0;
    font-size: 1em;
    border: 0;
    background: transparent;
    box-shadow: none;
}


/* =============================================================================
   FONT UTILITY CLASSES
   ============================================================================= */

/* Role-based font utilities */
.font-body {
    font-family: var(--font-family-body) !important;
}

.font-heading {
    font-family: var(--font-family-heading) !important;
}

.font-brand {
    font-family: var(--font-family-brand) !important;
}

.font-mono {
    font-family: var(--font-family-mono) !important;
}

/* Tech/Futuristic fonts */
.font-orbitron {
    font-family: var(--font-family-orbitron) !important;
}

.font-audiowide {
    font-family: var(--font-family-audiowide) !important;
}

.font-quantico {
    font-family: var(--font-family-quantico) !important;
}

.font-electrolize {
    font-family: var(--font-family-electrolize) !important;
}

/* Clean/Modern fonts */
.font-roboto {
    font-family: var(--font-family-roboto) !important;
}

.font-poppins {
    font-family: var(--font-family-poppins) !important;
}

.font-montserrat {
    font-family: var(--font-family-montserrat) !important;
}

.font-inter {
    font-family: var(--font-family-inter) !important;
}

/* Script/Decorative fonts */
.font-ballet {
    font-family: var(--font-family-ballet) !important;
}

.font-fleur {
    font-family: var(--font-family-fleur) !important;
}

.font-fasthand {
    font-family: var(--font-family-fasthand) !important;
}

.font-amatic {
    font-family: var(--font-family-amatic) !important;
}

.font-italianno {
    font-family: var(--font-family-italianno) !important;
}

.font-dela {
    font-family: var(--font-family-dela) !important;
}

.font-rubik-glitch {
    font-family: var(--font-family-rubik-glitch) !important;
}

/* Brand font presets for common use cases */
.brand-logo {
    font-family: var(--font-family-brand);
    font-weight: var(--font-weight-normal);
    letter-spacing: var(--letter-spacing-wide);
}

.brand-hero {
    font-family: var(--font-family-brand);
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-tight);
}

.brand-tagline {
    font-family: var(--font-family-tagline);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-normal);
}

@media (max-width: 767.98px) {
    .brand-hero {
        font-size: var(--font-size-4xl);
    }
    .brand-tagline {
        font-size: var(--font-size-xl);
    }
}


/* =============================================================================
   HEADER / NAVIGATION
   ============================================================================= */

/* Apply brand font to navbar brand (logo/site name) */
.navbar-brand {
    font-family: var(--font-family-brand) !important;
}

/* Apply tagline font to navbar tagline */
.navbar-brand-tagline {
    font-family: var(--font-family-tagline) !important;
}

/* Apply menu font to LEFT navigation items */
.navbar-nav.me-auto .nav-link {
    font-family: var(--font-family-menu-left) !important;
}

/* Apply menu font to CENTER navigation items */
.navbar-nav.mx-auto .nav-link {
    font-family: var(--font-family-menu-center) !important;
}

/* Apply menu font to RIGHT navigation items */
.navbar-nav.ms-auto .nav-link {
    font-family: var(--font-family-menu-right) !important;
}

/* Mega menu trigger buttons and CTA dropdown buttons inherit menu font from their zone */
.navbar-nav.ms-auto .megamenu-trigger,
.navbar-nav.ms-auto #ctaDropdown {
    font-family: var(--font-family-menu-left) !important;
}
.navbar-nav.mx-auto .megamenu-trigger,
.navbar-nav.mx-auto #ctaDropdown {
    font-family: var(--font-family-menu-center) !important;
}

/* Dropdown items inherit from their zone */
.navbar-nav.me-auto .dropdown-menu .dropdown-item {
    font-family: var(--font-family-menu-left) !important;
}
.navbar-nav.mx-auto .dropdown-menu .dropdown-item {
    font-family: var(--font-family-menu-center) !important;
}
.navbar-nav.ms-auto .dropdown-menu .dropdown-item {
    font-family: var(--font-family-menu-right) !important;
}


/* =============================================================================
   LAYOUT
   ============================================================================= */

main > .container {
    padding: var(--space-8) var(--space-4) var(--space-5);
}

/* Mobile: drop the 32px top padding from the layout's main container on
   /my/* listing pages. The page itself adds enough breathing room via its
   own pt-2 pb-4 container, so this avoids stacking spacers above the
   section-nav scope card on phones. */
@media (max-width: 767.98px) {
    main > .container:has(.event-my),
    main > .container:has(.survey-my),
    main > .container:has(.game-my),
    main > .container:has(.activity-my),
    main > .container:has(.content-my),
    main > .container:has(.shop-my),
    main > .container:has(.organization-my),
    main > .container:has(.community-my),
    main > .container:has(.subscriber-my),
    main > .container:has(.contract-my),
    main > .container:has(.campaign-my) {
        padding-top: 0;
    }
}

/* Offset main content when sticky header is enabled
   JavaScript (header.js) sets --dynamic-header-offset based on actual header height.
   Falls back to CSS variable values if JS hasn't run yet. */
body.has-sticky-header main {
    padding-top: var(--dynamic-header-offset, calc(var(--header-height) + var(--space-4)));
}

/* Mobile adjustment for sticky header - same pattern with fallback */
@media (max-width: 767.98px) {
    body.has-sticky-header main {
        padding-top: var(--dynamic-header-offset, calc(var(--header-height-mobile) + var(--space-4)));
    }
}

/* Breadcrumb styling */
.breadcrumb-nav {
    margin-bottom: var(--space-4);
}

.breadcrumb {
    background-color: transparent;
    padding: var(--space-2) 0;
    margin-bottom: 0;
    font-size: var(--font-size-sm);
}

.breadcrumb-item a {
    color: var(--link-default);
    text-decoration: none;
}

.breadcrumb-item a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

.breadcrumb-item.active {
    color: var(--text-muted);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-tertiary);
}

.footer {
    background-color: var(--bg-secondary);
    font-size: var(--font-size-sm);
    /* height: 60px; */
}

.footer > .container {
    padding-right: var(--space-4);
    padding-left: var(--space-4);
}

.not-set {
    color: var(--color-error-500);
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    content: '';
    left: 3px;
    display: inline-block;
    width: 0;
    height: 0;
    border: solid 5px transparent;
    margin: 4px 4px 2px 4px;
    background: transparent;
}

a.asc:after {
    border-bottom: solid 7px var(--text-primary);
    border-top-width: 0;
}

a.desc:after {
    border-top: solid 7px var(--text-primary);
    border-bottom-width: 0;
}

.grid-view th {
    white-space: nowrap;
}

.hint-block {
    display: block;
    margin-top: var(--space-1);
    color: var(--text-muted);
}

.error-summary {
    color: var(--color-error-700);
    background: var(--color-error-50);
    border-left: 3px solid var(--color-error-100);
    padding: var(--space-2) var(--space-5);
    margin: 0 0 var(--space-4) 0;
}

/* align the logout "link" (button in form) of the navbar */
.nav li > form > button.logout {
    padding-top: var(--space-2);
    color: var(--text-tertiary);
}

@media(max-width:767px) {
    .nav li > form > button.logout {
        display:block;
        text-align: left;
        width: 100%;
        padding: 10px 0;
    }
}

.nav > li > form > button.logout:focus,
.nav > li > form > button.logout:hover {
    text-decoration: none;
    color: var(--text-secondary);
}

.nav > li > form > button.logout:focus {
    outline: none;
}

.form-group {
    margin-bottom: var(--space-4);
}

/* ==========================================================================
   General Card Styles (Global)
   ========================================================================== */

/* Base card improvements */
.card {
    background-color: var(--card-bg);
    border-color: var(--border-default);
}

/* Light mode cards - subtle shadow and distinct from background */
[data-theme="light"] .card {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Dark mode cards - elevated appearance */
[data-theme="dark"] .card {
    background-color: var(--bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Card headers */
.card-header {
    background-color: var(--bg-tertiary);
    border-bottom-color: var(--border-default);
}

[data-theme="light"] .card-header {
    background-color: rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .card-header {
    background-color: rgba(0, 0, 0, 0.15);
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

/* Card footers */
.card-footer {
    background-color: var(--bg-tertiary);
    border-top-color: var(--border-default);
}

[data-theme="light"] .card-footer {
    background-color: rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .card-footer {
    background-color: rgba(0, 0, 0, 0.15);
    border-top-color: rgba(255, 255, 255, 0.05);
}

/* Fix bg-light in dark mode (stat boxes, etc.) */
[data-theme="dark"] .bg-light {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .bg-light .text-muted {
    color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="dark"] .bg-light .text-dark {
    color: var(--text-primary) !important;
}

/* Fix bg-white in dark mode */
[data-theme="dark"] .bg-white {
    background-color: var(--bg-secondary) !important;
}

/* Fix list-group-item in dark mode (e.g. ticket lists in cards) */
[data-theme="dark"] .card .list-group-flush .list-group-item {
    background-color: transparent;
    border-color: var(--border-default);
    color: var(--text-primary);
}

/* ==========================================================================
   Content System Styles
   ========================================================================== */

/* Content header */
.content-header {
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--space-5);
}

.content-header .display-5 {
    font-weight: 600;
    color: var(--text-primary);
}

/* Content item cards */
.content-item.card {
    transition: transform var(--duration-200) var(--ease-in-out), box-shadow var(--duration-200) var(--ease-in-out);
    border: 1px solid var(--border-color);
}

.content-item.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.content-item .card-img-top {
    height: 200px;
    object-fit: cover;
}

.content-item .card-title a {
    color: var(--text-primary);
}

.content-item .card-title a:hover {
    color: var(--link-hover);
}

.content-item-meta {
    font-size: var(--font-size-sm);
}

/* Content article view */
.content-article {
    background: var(--card-bg);
    border-radius: var(--border-radius-lg);
    padding: var(--space-5);
    border: 1px solid var(--border-color);
}

.content-title {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--space-3);
}

.content-meta {
    font-size: var(--font-size-sm);
}

/* Content body - rendered blocks */
.content-body {
    line-height: 1.8;
    font-size: 1.1rem;
}

.content-body h2,
.content-body h3,
.content-body h4 {
    margin-top: var(--space-5);
    margin-bottom: var(--space-3);
    font-weight: 600;
}

.content-body p {
    margin-bottom: var(--space-4);
}

.content-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-md);
}

/* Block styling */
.content-heading {
    margin-top: var(--space-5);
    margin-bottom: var(--space-3);
    font-weight: 600;
    color: var(--text-primary);
}

.content-paragraph {
    margin-bottom: var(--space-4);
    line-height: 1.8;
}

.content-quote {
    border-left: 4px solid var(--color-primary-500);
    padding: var(--space-4) var(--space-5);
    margin: var(--space-5) 0;
    background: var(--bg-secondary);
    border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
}

.content-quote p {
    font-style: italic;
    font-size: 1.15rem;
    margin-bottom: var(--space-2);
}

.content-quote footer {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.content-list {
    margin: var(--space-4) 0;
    padding-left: var(--space-5);
}

.content-list li {
    margin-bottom: var(--space-2);
    line-height: 1.7;
}

.content-callout {
    padding: var(--space-4);
    border-radius: var(--border-radius-md);
    margin: var(--space-4) 0;
}

.content-callout.callout-info {
    background: rgba(var(--bs-info-rgb), 0.1);
    border: 1px solid rgba(var(--bs-info-rgb), 0.3);
}

.content-callout.callout-warning {
    background: rgba(var(--bs-warning-rgb), 0.1);
    border: 1px solid rgba(var(--bs-warning-rgb), 0.3);
}

.content-callout.callout-danger {
    background: rgba(var(--bs-danger-rgb), 0.1);
    border: 1px solid rgba(var(--bs-danger-rgb), 0.3);
}

.content-callout.callout-tip {
    background: rgba(var(--bs-success-rgb), 0.1);
    border: 1px solid rgba(var(--bs-success-rgb), 0.3);
}

.content-image {
    margin: var(--space-5) 0;
    text-align: center;
}

.content-image img {
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
}

.content-image figcaption {
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.content-gallery {
    margin: var(--space-5) 0;
}

.content-gallery .gallery-item {
    margin-bottom: 0;
}

.content-gallery img {
    border-radius: var(--border-radius-md);
    transition: transform var(--duration-200) var(--ease-in-out);
}

.content-gallery img:hover {
    transform: scale(1.02);
}

.content-divider {
    border: none;
    border-top: 2px solid var(--border-color);
    margin: var(--space-6) 0;
}

/* Author card */
.author-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

/* Comments section */
.comments-section {
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-color);
}

.comment-item {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
}

.comment-body {
    line-height: 1.7;
}

/* Related content */
.related-item {
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-color);
}

.related-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.related-item h6 a {
    color: var(--text-primary);
}

.related-item h6 a:hover {
    color: var(--link-hover);
}

/* Tags in sidebar */
.content-tags .badge {
    font-size: var(--font-size-sm);
    font-weight: 400;
    padding: 0.4em 0.8em;
}

.content-tags .badge:hover {
    opacity: 0.8;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .content-title {
        font-size: 2rem;
    }

    .content-article {
        padding: var(--space-4);
    }
}

@media (max-width: 767.98px) {
    .content-title {
        font-size: 1.75rem;
    }

    .content-item .card-img-top {
        height: 160px;
    }
}

/* ==========================================================================
   Content Widget Styles
   ========================================================================== */

.content-widget {
    margin-bottom: var(--space-5);
}

.content-widget-header {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--space-3);
}

.content-widget-title {
    font-weight: 600;
    color: var(--text-primary);
}

.content-widget-more-link {
    font-size: var(--font-size-sm);
    text-decoration: none;
    color: var(--link-default);
}

.content-widget-more-link:hover {
    color: var(--link-hover);
}

/* List layout */
.content-widget-list .content-widget-item {
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-color);
}

.content-widget-list .content-widget-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.content-widget-list .content-widget-item-title a {
    color: var(--text-primary);
}

.content-widget-list .content-widget-item-title a:hover {
    color: var(--link-hover);
}

/* Grid layout */
.content-widget-grid .content-widget-item {
    transition: transform var(--duration-200) var(--ease-in-out), box-shadow var(--duration-200) var(--ease-in-out);
    border: 1px solid var(--border-color);
}

.content-widget-grid .content-widget-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.content-widget-grid .card-title a {
    color: var(--text-primary);
}

/* Cards layout (horizontal) */
.content-widget-cards .card-horizontal {
    border: 1px solid var(--border-color);
    transition: box-shadow var(--duration-200) var(--ease-in-out);
}

.content-widget-cards .card-horizontal:hover {
    box-shadow: var(--shadow-sm);
}

.content-widget-cards .card-title a {
    color: var(--text-primary);
}

/* Carousel layout */
.content-widget-carousel {
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.content-widget-carousel .carousel-caption {
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--space-5);
    text-align: left;
}

.content-widget-carousel .carousel-caption h5 a:hover {
    text-decoration: underline;
}

.content-widget-carousel .carousel-indicators {
    margin-bottom: var(--space-2);
}

.content-widget-carousel .carousel-indicators button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* ==========================================================================
   Feature Page Sidebar
   ========================================================================== */

/* Override Bootstrap's sticky-top z-index to stay below header dropdowns */
main .sticky-top {
    z-index: 100; /* Much lower than header dropdowns (1040) and navbar (1030) */
}

/* ==========================================================================
   Notification Page Styles
   ========================================================================== */

.notification-index .card {
    background-color: var(--card-bg);
    border-color: var(--card-border);
}

.notification-index .list-group-item {
    background-color: var(--bg-primary);
    border-color: var(--border-default);
    color: var(--text-primary);
}

/* Notification item styling (page view) */
.notification-index .notification-item {
    background-color: var(--bg-primary);
    border-color: var(--border-default);
}

.notification-index .notification-item:hover {
    background-color: var(--bg-tertiary);
}

/* Unread notification styling (page view) */
.notification-index .notification-unread {
    background-color: var(--bg-secondary);
    border-left: 3px solid var(--color-primary-500);
}

.notification-index .notification-unread:hover {
    background-color: var(--bg-tertiary);
}

/* Dark theme unread notifications */
[data-theme="dark"] .notification-index .notification-unread {
    background-color: var(--color-primary-950);
    border-left-color: var(--color-primary-400);
}

[data-theme="dark"] .notification-index .notification-unread:hover {
    background-color: var(--color-primary-900);
}

/* Notification page text colors */
.notification-index h6 {
    color: var(--text-primary);
}

.notification-index .text-muted {
    color: var(--text-muted) !important;
}

/* Badge in notifications */
.notification-index .badge.bg-primary {
    background-color: var(--color-primary-500) !important;
}

/* Action buttons */
.notification-index .btn-outline-secondary {
    border-color: var(--border-default);
    color: var(--text-secondary);
}

.notification-index .btn-outline-secondary:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Empty state card */
.notification-index .card-body.text-center {
    background-color: var(--bg-secondary);
}

/* ==========================================================================
   Primary Button Overrides (Design Tokens)
   ========================================================================== */

/* Override Bootstrap's primary button to use design token colors */
.btn-primary {
    --bs-btn-color: var(--button-primary-text);
    --bs-btn-hover-color: var(--button-primary-text);
    --bs-btn-active-color: var(--button-primary-text);
    --bs-btn-disabled-color: var(--button-primary-text);
    --bs-btn-bg: var(--color-primary-600);
    --bs-btn-border-color: var(--color-primary-600);
    --bs-btn-hover-bg: var(--color-primary-700);
    --bs-btn-hover-border-color: var(--color-primary-700);
    --bs-btn-active-bg: var(--color-primary-800);
    --bs-btn-active-border-color: var(--color-primary-800);
    --bs-btn-disabled-bg: var(--color-primary-400);
    --bs-btn-disabled-border-color: var(--color-primary-400);
}

.btn-outline-primary {
    --bs-btn-color: var(--color-primary-600);
    --bs-btn-border-color: var(--color-primary-600);
    --bs-btn-hover-color: var(--button-primary-text);
    --bs-btn-hover-bg: var(--color-primary-600);
    --bs-btn-hover-border-color: var(--color-primary-600);
    --bs-btn-active-color: var(--button-primary-text);
    --bs-btn-active-bg: var(--color-primary-700);
    --bs-btn-active-border-color: var(--color-primary-700);
}

/* Dark theme adjustments for primary buttons */
[data-theme="dark"] .btn-primary {
    --bs-btn-bg: var(--color-primary-500);
    --bs-btn-border-color: var(--color-primary-500);
    --bs-btn-hover-bg: var(--color-primary-400);
    --bs-btn-hover-border-color: var(--color-primary-400);
    --bs-btn-active-bg: var(--color-primary-600);
    --bs-btn-active-border-color: var(--color-primary-600);
}

[data-theme="dark"] .btn-outline-primary {
    --bs-btn-color: var(--color-primary-400);
    --bs-btn-border-color: var(--color-primary-400);
    --bs-btn-hover-bg: var(--color-primary-500);
    --bs-btn-hover-border-color: var(--color-primary-500);
    --bs-btn-active-bg: var(--color-primary-600);
    --bs-btn-active-border-color: var(--color-primary-600);
}

/* ==========================================================================
   Bootstrap Primary Color Variable Overrides (Design Tokens)
   ========================================================================== */

/* Override Bootstrap's primary color CSS variables to use design tokens */
:root {
    --bs-primary: var(--color-primary-600);
    --bs-primary-rgb: 36, 144, 200; /* Matches --color-primary-600: #2490c8 */

    /* Sync Bootstrap 5.3 semantic variables with our design tokens */
    --bs-body-color: var(--text-primary);
    --bs-body-bg: var(--bg-primary);
    --bs-heading-color: var(--text-primary);
    --bs-secondary-color: var(--text-secondary);
    --bs-tertiary-color: var(--text-tertiary);
    --bs-border-color: var(--border-default);
    --bs-link-color: var(--link-default);
    --bs-link-hover-color: var(--link-hover);
}

/* Global .bg-primary override */
.bg-primary {
    background-color: var(--color-primary-600) !important;
}

/* Global .text-primary override */
.text-primary {
    color: var(--color-primary-600) !important;
}

/* Global .border-primary override */
.border-primary {
    border-color: var(--color-primary-600) !important;
}

/* Bootstrap 5.3 semantic class overrides */
.text-primary-emphasis {
    color: var(--color-primary-700) !important;
}

/* Dark theme adjustments */
[data-theme="dark"],
[data-bs-theme="dark"] {
    --bs-primary: var(--color-primary-500);
    --bs-primary-rgb: 58, 168, 224; /* Matches --color-primary-500: #3aa8e0 */

    /* Sync Bootstrap 5.3 dark mode variables with our design tokens */
    --bs-body-color: var(--text-primary);
    --bs-body-bg: var(--bg-primary);
    --bs-heading-color: var(--text-primary);
    --bs-secondary-color: var(--text-secondary);
    --bs-tertiary-color: var(--text-tertiary);
    --bs-border-color: var(--border-default);
    --bs-link-color: var(--link-default);
    --bs-link-hover-color: var(--link-hover);
}

[data-theme="dark"] .bg-primary,
[data-bs-theme="dark"] .bg-primary {
    background-color: var(--color-primary-500) !important;
}

[data-theme="dark"] .text-primary,
[data-bs-theme="dark"] .text-primary {
    color: var(--color-primary-400) !important;
}

[data-theme="dark"] .border-primary,
[data-bs-theme="dark"] .border-primary {
    border-color: var(--color-primary-500) !important;
}

[data-theme="dark"] .text-primary-emphasis,
[data-bs-theme="dark"] .text-primary-emphasis {
    color: var(--color-primary-300) !important;
}

/* ==========================================================================
   Status Badge Overrides (Light + Dark)
   ==========================================================================
   Subtle soft-fill badges for both themes. Overrides Bootstrap's default
   solid-color badges (bg-success, bg-info, etc.) used across all user pages.
   ========================================================================== */

/* Light theme - soft pastel backgrounds with darker text */
.badge.bg-success {
    background-color: var(--color-success-50) !important;
    color: var(--color-success-700) !important;
}
.badge.bg-info {
    background-color: var(--color-info-50) !important;
    color: var(--color-info-700) !important;
}
.badge.bg-warning,
.badge.bg-warning.text-dark {
    background-color: var(--color-warning-50) !important;
    color: var(--color-warning-700) !important;
}
.badge.bg-danger {
    background-color: var(--color-error-50) !important;
    color: var(--color-error-700) !important;
}
.badge.bg-primary {
    background-color: var(--color-primary-50) !important;
    color: var(--color-primary-700) !important;
}
.badge.bg-secondary {
    background-color: var(--color-neutral-100) !important;
    color: var(--color-neutral-600) !important;
}

/* Dark theme - low-opacity tinted backgrounds with lighter text */
[data-theme="dark"] .badge.bg-success,
[data-bs-theme="dark"] .badge.bg-success {
    background-color: rgba(var(--color-success-500-rgb), 0.15) !important;
    color: var(--color-success-500) !important;
}
[data-theme="dark"] .badge.bg-info,
[data-bs-theme="dark"] .badge.bg-info,
[data-theme="dark"] .badge.bg-info.text-white,
[data-bs-theme="dark"] .badge.bg-info.text-white {
    background-color: rgba(var(--color-info-500-rgb), 0.15) !important;
    color: var(--color-info-500) !important;
}
[data-theme="dark"] .badge.bg-warning,
[data-bs-theme="dark"] .badge.bg-warning,
[data-theme="dark"] .badge.bg-warning.text-dark,
[data-bs-theme="dark"] .badge.bg-warning.text-dark {
    background-color: rgba(var(--color-warning-500-rgb), 0.15) !important;
    color: var(--color-warning-500) !important;
}
[data-theme="dark"] .badge.bg-danger,
[data-bs-theme="dark"] .badge.bg-danger {
    background-color: rgba(var(--color-error-500-rgb), 0.15) !important;
    color: var(--color-error-500) !important;
}
[data-theme="dark"] .badge.bg-primary,
[data-bs-theme="dark"] .badge.bg-primary {
    background-color: rgba(var(--color-primary-500-rgb), 0.15) !important;
    color: var(--color-primary-500) !important;
}
[data-theme="dark"] .badge.bg-secondary,
[data-bs-theme="dark"] .badge.bg-secondary {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--color-neutral-400) !important;
}

/* ==========================================================================
   Form Select Overrides (Dropdowns)
   ========================================================================== */

.form-select {
    background-color: var(--control-bg);
    border-color: var(--control-border);
    color: var(--control-text);
    border-radius: var(--radius-md);
    transition: var(--transition-all);
}
.form-select:hover {
    border-color: var(--control-border-hover);
    color: var(--control-text-hover);
}
.form-select:focus {
    border-color: var(--control-border-active);
    box-shadow: 0 0 0 0.2rem var(--control-ring);
    color: var(--control-text-active);
    background-color: var(--control-bg);
}

/* ==========================================================================
   User Settings Page Styles
   ========================================================================== */

/* Settings sidebar navigation */
.user-settings .nav-pills .nav-link {
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    transition: var(--transition-colors);
}

.user-settings .nav-pills .nav-link:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.user-settings .nav-pills .nav-link.active {
    background-color: var(--color-primary-600);
    color: var(--color-neutral-0);
}

[data-theme="dark"] .user-settings .nav-pills .nav-link.active {
    background-color: var(--color-primary-500);
}

.user-settings .nav-pills .nav-link.active:hover {
    background-color: var(--color-primary-700);
    color: var(--color-neutral-0);
}

[data-theme="dark"] .user-settings .nav-pills .nav-link.active:hover {
    background-color: var(--color-primary-400);
    color: var(--color-neutral-0);
}

/* ==========================================================================
   User Profile Page Styles
   ========================================================================== */

/* Profile avatar placeholder with primary color */
.user-profile .avatar-placeholder {
    background-color: var(--color-primary-500) !important;
    color: var(--color-neutral-0) !important;
}

[data-theme="dark"] .user-profile .avatar-placeholder {
    background-color: var(--color-primary-400) !important;
}

/* Avatar size utilities */
.avatar-sm {
    width: 50px !important;
    height: 50px !important;
}

.avatar-md {
    width: 80px !important;
    height: 80px !important;
}

.avatar-lg {
    width: 100px !important;
    height: 100px !important;
}

.avatar-xl {
    width: 150px !important;
    height: 150px !important;
}

/* Avatar image utility (for actual images, not placeholders) */
.avatar-img {
    object-fit: cover !important;
}

/* Overlapping team avatar stack */
.team-avatars-overlap {
    gap: 6px 0;
}
.team-avatars-overlap img {
    margin-left: -12px;
    border: 3px solid var(--bs-card-bg, #fff);
    position: relative;
}
.team-avatars-overlap img:first-child {
    margin-left: 0;
}
.team-avatars-overlap img:hover {
    z-index: 1;
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* ==========================================================================
   Product Image Placeholder
   ========================================================================== */

.product-image-link {
    text-decoration: none;
}

.product-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    color: var(--text-tertiary);
    text-decoration: none;
}

.product-image-placeholder i {
    font-size: 2rem;
}

/* =========================================================================
   Order Confirmation Page
   ========================================================================= */

.order-confirm-hero {
    background: var(--color-success-50);
    border-radius: var(--radius-xl);
    padding: var(--space-12) var(--space-6);
    text-align: center;
    margin-bottom: var(--space-8);
}

.order-confirm-hero--pending {
    background: var(--color-warning-50);
}

[data-theme="dark"] .order-confirm-hero {
    background: rgba(var(--color-success-500-rgb), 0.08);
}

[data-theme="dark"] .order-confirm-hero--pending {
    background: rgba(var(--color-warning-500-rgb), 0.08);
}

.order-confirm-hero__icon {
    width: 5rem;
    height: 5rem;
    border-radius: var(--radius-full);
    background: rgba(var(--color-success-500-rgb), 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-6);
    font-size: var(--font-size-4xl);
    color: var(--color-success-500);
}

.order-confirm-hero__icon--pending {
    background: rgba(var(--color-warning-500-rgb), 0.15);
    color: var(--color-warning-500);
}

.order-confirm-hero__title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-3);
}

.order-confirm-hero__order-number {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    letter-spacing: var(--letter-spacing-wide);
    margin-bottom: var(--space-3);
}

.order-confirm-hero__status {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
}

/* Instruction cards (bank transfer / COD) */

.order-confirm-instructions {
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-6);
}

.order-confirm-instructions--bank {
    border-left: 4px solid var(--color-warning-500) !important;
}

.order-confirm-instructions--cod {
    border-left: 4px solid var(--color-info-500) !important;
}

.order-confirm-instructions .card-header h5 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.order-confirm-instructions .table th {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
}

.order-confirm-instructions .table code {
    font-family: var(--font-family-mono);
    letter-spacing: var(--letter-spacing-wider);
}

/* Order details card */

.order-confirm-details {
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-6);
}

.order-confirm-details .card-header h5 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.order-confirm-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-muted);
    margin-bottom: 0;
}

.order-confirm-meta__label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    margin-bottom: 0.25rem;
}

.order-confirm-meta__value {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
}

.order-confirm-items .table thead th {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    border-bottom-width: 2px;
}

.order-confirm-items .table .total-row {
    background: rgba(var(--color-primary-500-rgb), 0.06);
}

.order-confirm-items .table .total-row td {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-base);
}

.order-confirm-items .table .discount-row {
    color: var(--color-success-600);
}

[data-theme="dark"] .order-confirm-items .table .discount-row {
    color: var(--color-success-500);
}

/* Address cards */

.order-confirm-address {
    border-radius: var(--radius-lg);
}

.order-confirm-address .card-header h6 {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-semibold);
}

.order-confirm-address .card-header i {
    color: var(--text-muted);
}

.order-confirm-address__text {
    font-family: var(--font-family-body);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--text-secondary);
    white-space: pre-wrap;
    margin: 0;
}

/* Action buttons */

.order-confirm-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border-muted);
}

.order-confirm-actions .btn {
    padding: var(--space-3) var(--space-8);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-lg);
    transition: var(--transition-all);
}

.order-confirm-actions .btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

@media (max-width: 767.98px) {
    .order-confirm-hero {
        padding: var(--space-8) var(--space-4);
    }

    .order-confirm-hero__title {
        font-size: var(--font-size-3xl);
    }

    .order-confirm-meta {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
}

@media (max-width: 575.98px) {
    .order-confirm-actions {
        flex-direction: column;
        gap: var(--space-3);
    }

    .order-confirm-actions .btn {
        width: 100%;
    }
}


/* =============================================================================
   MESSAGE CONVERSATION - FILE ATTACHMENTS
   ============================================================================= */

.message-attachments {
    margin-top: 4px;
}

.message-attachments img {
    transition: opacity var(--duration-150) var(--ease-in-out);
}

.message-attachments img:hover {
    opacity: 0.85;
}

.message-attachment-image {
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.message-attachment-file {
    font-size: 0.85rem;
}

.conversation-file-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 0;
}

.conversation-file-chip {
    cursor: pointer;
    transition: opacity var(--duration-150) var(--ease-in-out);
}

.conversation-file-chip:hover {
    opacity: 0.8;
}

/* Lightbox image cursor */
.message-attachments .glightbox img {
    cursor: zoom-in;
}

/* GLightbox theme support */
.glightbox-clean .gslide-description {
    background: var(--bg-secondary) !important;
}
.glightbox-clean .gslide-title {
    color: var(--text-primary) !important;
    font-family: inherit !important;
}
.glightbox-clean .gslide-desc {
    color: var(--text-secondary) !important;
    font-family: inherit !important;
}
.glightbox-clean .gslide-title a {
    color: inherit;
    text-decoration: none;
}
.glightbox-clean .gslide-title a:hover {
    opacity: 0.8;
}

/* ============================================================
   Floating Widgets Stack
   Prevents overlap when multiple floating widgets are active
   (livechat, chatbot, messenger)
   ============================================================ */
.floating-widgets-stack {
    position: fixed;
    z-index: 9998;
    display: flex;
    align-items: flex-end;
    pointer-events: none;
}

.floating-widgets-stack > * {
    pointer-events: auto;
}

.floating-widgets-stack.stack-vertical {
    flex-direction: column-reverse;
}

.floating-widgets-stack.stack-horizontal {
    flex-direction: row-reverse;
}

.floating-widgets-stack.stack-bottom-right {
    bottom: 20px;
    right: 20px;
}

.floating-widgets-stack.stack-bottom-left {
    bottom: 20px;
    left: 20px;
}

/* Override fixed positioning - widgets become relative inside stack */
.floating-widgets-stack .livechat-floating,
.floating-widgets-stack .chatbot-floating,
.floating-widgets-stack .messenger-floating,
.floating-widgets-stack .bugreport-floating {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    z-index: auto !important;
}

/* Opened widget panel sits above neighboring toggle buttons */
.floating-widgets-stack .livechat-widget.livechat-open,
.floating-widgets-stack .chatbot-floating.open,
.floating-widgets-stack .messenger-floating.messenger-open,
.floating-widgets-stack .bugreport-widget.bugreport-open {
    z-index: 10 !important;
}

/* On mobile, collapse gap for tighter layout */
@media (max-width: 480px) {
    .floating-widgets-stack {
        gap: 10px !important;
    }
}

/* Download button on image attachments */
.message-attachment-wrapper {
    position: relative;
}

.message-download-btn {
    font-size: 0.75rem;
    padding: 2px 8px;
}

/* Download icon on document attachments */
.message-attachment-file .fa-download {
    font-size: 0.8rem;
}

/* ==========================================================================
   Dark Theme - Table Overrides
   ========================================================================== */

[data-theme="dark"] .table,
[data-bs-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--bs-body-color);
}

[data-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-light {
    --bs-table-bg: rgba(255, 255, 255, 0.05);
    --bs-table-color: var(--bs-body-color);
}

[data-theme="dark"] .table-hover > tbody > tr:hover,
[data-bs-theme="dark"] .table-hover > tbody > tr:hover {
    --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
    color: var(--bs-body-color);
}

/* ==========================================================================
   My Entity Card - Shared styling for my/* view table wrappers
   ========================================================================== */

.my-entity-card {
    border-radius: var(--radius-md, 6px);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--duration-200, 150ms) ease;
}

.my-entity-card:hover {
    box-shadow: var(--shadow-md);
}

/* ==========================================================================
   Entity Actions Dropdown - Owner actions on /my/* pages
   ========================================================================== */

.entity-actions-dropdown {
    display: inline-block;
}

/* Allow dropdowns to escape .table-responsive overflow clipping (desktop only) */
@media (min-width: 768px) {
    .table-responsive:has(.entity-actions-dropdown) {
        overflow: visible;
    }
}

.entity-actions-trigger {
    border: 1px solid var(--border-default);
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    padding: var(--space-2) var(--space-3);
    line-height: 1;
    border-radius: var(--radius-md);
    transition: var(--transition-all);
    font-size: var(--font-size-base);
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.entity-actions-trigger:hover,
.entity-actions-trigger:focus {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
}

.entity-actions-trigger:active,
.entity-actions-trigger[aria-expanded="true"] {
    background-color: var(--control-selected-bg);
    color: var(--control-selected-text);
    border-color: var(--control-selected-border);
}

.entity-copy-md-btn {
    border: 1px solid transparent;
    background-color: transparent;
    color: var(--text-tertiary);
    padding: var(--space-2) var(--space-3);
    line-height: 1;
    border-radius: var(--radius-md);
    transition: var(--transition-all);
    font-size: var(--font-size-base);
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}
tr:hover .entity-copy-md-btn,
.my-entity-card-actions .entity-copy-md-btn {
    opacity: 0.6;
}
.entity-copy-md-btn:hover {
    opacity: 1 !important;
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
    border-color: var(--border-default);
}

.entity-actions-menu {
    min-width: 180px;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-1) var(--space-0);
    z-index: var(--z-dropdown);
}

.entity-actions-menu .dropdown-item {
    font-size: var(--font-size-sm);
    padding: var(--space-2) var(--space-3);
    color: var(--text-primary);
    transition: var(--transition-colors);
    border-radius: var(--radius-base);
    margin: 0 var(--space-1);
    width: auto;
}

.entity-actions-menu .dropdown-item:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.entity-actions-menu .dropdown-item i {
    width: 1.25rem;
    text-align: center;
    color: var(--text-tertiary);
}

.entity-actions-menu .dropdown-item:hover i {
    color: var(--text-secondary);
}

.entity-actions-menu .dropdown-divider {
    border-color: var(--border-muted);
    margin: var(--space-1) 0;
}

/* Dark theme handled by --control-selected-* tokens */

/* ==========================================================================
   Owner Alert Bar - Contextual bar on entity view pages
   ========================================================================== */

.owner-alert-bar {
    border-radius: var(--radius-md, 6px);
}

.owner-alert-bar .btn {
    white-space: nowrap;
}

/* ==========================================================================
   Homepage - Hero Section
   ========================================================================== */

.homepage-hero {
    background: linear-gradient(135deg,
        rgba(var(--color-primary-500-rgb), 0.06) 0%,
        rgba(var(--color-secondary-500-rgb), 0.04) 50%,
        rgba(var(--color-primary-500-rgb), 0.02) 100%);
    position: relative;
}

.homepage-hero::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: var(--radius-full);
    background: radial-gradient(circle, rgba(var(--color-primary-500-rgb), 0.08) 0%, transparent 70%);
    top: -200px;
    right: -100px;
    pointer-events: none;
}

.homepage-hero::after {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: var(--radius-full);
    background: radial-gradient(circle, rgba(var(--color-secondary-500-rgb), 0.06) 0%, transparent 70%);
    bottom: -150px;
    left: -80px;
    pointer-events: none;
}

[data-theme="dark"] .homepage-hero {
    background: linear-gradient(135deg,
        rgba(var(--color-primary-500-rgb), 0.08) 0%,
        rgba(var(--color-secondary-500-rgb), 0.05) 50%,
        transparent 100%);
}

/* ==========================================================================
   Homepage - CTA Section
   ========================================================================== */

.homepage-cta {
    background: linear-gradient(160deg,
        rgba(var(--color-secondary-500-rgb), 0.04) 0%,
        rgba(var(--color-primary-500-rgb), 0.06) 40%,
        rgba(var(--color-secondary-500-rgb), 0.03) 100%);
    position: relative;
    overflow: hidden;
}

.homepage-cta::before {
    content: '';
    position: absolute;
    width: 550px;
    height: 550px;
    border-radius: var(--radius-full);
    background: radial-gradient(circle, rgba(var(--color-primary-500-rgb), 0.07) 0%, transparent 70%);
    top: -220px;
    right: -100px;
    pointer-events: none;
    animation: sectionOrbDrift 28s ease-in-out infinite;
}

.homepage-cta::after {
    content: '';
    position: absolute;
    width: 450px;
    height: 450px;
    border-radius: var(--radius-full);
    background: radial-gradient(circle, rgba(var(--color-secondary-500-rgb), 0.06) 0%, transparent 70%);
    bottom: -180px;
    left: -80px;
    pointer-events: none;
    animation: sectionOrbDriftReverse 24s ease-in-out infinite;
}

.homepage-cta h2,
.homepage-cta p {
    position: relative;
    z-index: 1;
}

.homepage-cta .stats-counter-widget {
    position: relative;
    z-index: 1;
}

.homepage-cta .text-center {
    position: relative;
    z-index: 1;
}

[data-theme="dark"] .homepage-cta {
    background: linear-gradient(160deg,
        rgba(var(--color-secondary-500-rgb), 0.06) 0%,
        rgba(var(--color-primary-500-rgb), 0.08) 40%,
        transparent 100%);
}

/* ==========================================================================
   Homepage - Section Dividers
   ========================================================================== */

.homepage-section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(var(--color-primary-500-rgb), 0.15) 30%, rgba(var(--color-secondary-500-rgb), 0.15) 70%, transparent 100%);
    margin: 0 auto;
    max-width: 60%;
}

/* ==========================================================================
   Homepage - Entity Section Backgrounds
   ========================================================================== */

/* Shared base for all entity sections with gradient backgrounds */
.homepage-section-glow {
    position: relative;
    overflow: hidden;
}

.homepage-section-glow::before,
.homepage-section-glow::after {
    content: '';
    position: absolute;
    border-radius: var(--radius-full);
    pointer-events: none;
    opacity: 0;
    animation: sectionOrbFadeIn 1.2s var(--ease-in-out) forwards;
}

/* --- Events: warm primary accent, top-right orb --- */
.homepage-section-events {
    background: linear-gradient(160deg,
        rgba(var(--color-primary-500-rgb), 0.03) 0%,
        transparent 60%,
        rgba(var(--color-secondary-500-rgb), 0.02) 100%);
}
.homepage-section-events::before {
    width: 450px;
    height: 450px;
    top: -180px;
    right: -120px;
    background: radial-gradient(circle, rgba(var(--color-primary-500-rgb), 0.06) 0%, transparent 70%);
    animation: sectionOrbDrift 25s ease-in-out infinite, sectionOrbFadeIn 1.2s var(--ease-in-out) forwards;
}
.homepage-section-events::after {
    width: 300px;
    height: 300px;
    bottom: -100px;
    left: 10%;
    background: radial-gradient(circle, rgba(var(--color-secondary-500-rgb), 0.04) 0%, transparent 70%);
    animation: sectionOrbDriftReverse 30s ease-in-out infinite, sectionOrbFadeIn 1.2s 0.3s var(--ease-in-out) forwards;
}

/* --- Activities: secondary-first, bottom-left emphasis --- */
.homepage-section-activities {
    background: linear-gradient(200deg,
        rgba(var(--color-secondary-500-rgb), 0.03) 0%,
        transparent 50%,
        rgba(var(--color-primary-500-rgb), 0.02) 100%);
}
.homepage-section-activities::before {
    width: 400px;
    height: 400px;
    bottom: -160px;
    left: -100px;
    background: radial-gradient(circle, rgba(var(--color-secondary-500-rgb), 0.06) 0%, transparent 70%);
    animation: sectionOrbDriftReverse 28s ease-in-out infinite, sectionOrbFadeIn 1.2s var(--ease-in-out) forwards;
}
.homepage-section-activities::after {
    width: 350px;
    height: 350px;
    top: -120px;
    right: 5%;
    background: radial-gradient(circle, rgba(var(--color-primary-500-rgb), 0.04) 0%, transparent 70%);
    animation: sectionOrbDrift 32s ease-in-out infinite, sectionOrbFadeIn 1.2s 0.3s var(--ease-in-out) forwards;
}

/* --- Organizations: dual-tone balanced --- */
.homepage-section-organizations {
    background: linear-gradient(135deg,
        rgba(var(--color-primary-500-rgb), 0.02) 0%,
        transparent 40%,
        rgba(var(--color-secondary-500-rgb), 0.03) 70%,
        transparent 100%);
}
.homepage-section-organizations::before {
    width: 500px;
    height: 500px;
    top: -200px;
    left: 20%;
    background: radial-gradient(circle, rgba(var(--color-primary-500-rgb), 0.05) 0%, transparent 70%);
    animation: sectionOrbDrift 35s ease-in-out infinite, sectionOrbFadeIn 1.2s var(--ease-in-out) forwards;
}
.homepage-section-organizations::after {
    width: 350px;
    height: 350px;
    bottom: -140px;
    right: -80px;
    background: radial-gradient(circle, rgba(var(--color-secondary-500-rgb), 0.05) 0%, transparent 70%);
    animation: sectionOrbDriftReverse 27s ease-in-out infinite, sectionOrbFadeIn 1.2s 0.3s var(--ease-in-out) forwards;
}

/* --- Content: subtle diagonal wash --- */
.homepage-section-content {
    background: linear-gradient(170deg,
        transparent 0%,
        rgba(var(--color-secondary-500-rgb), 0.025) 40%,
        rgba(var(--color-primary-500-rgb), 0.03) 100%);
}
.homepage-section-content::before {
    width: 380px;
    height: 380px;
    top: -140px;
    right: 15%;
    background: radial-gradient(circle, rgba(var(--color-secondary-500-rgb), 0.05) 0%, transparent 70%);
    animation: sectionOrbDriftReverse 30s ease-in-out infinite, sectionOrbFadeIn 1.2s var(--ease-in-out) forwards;
}
.homepage-section-content::after {
    width: 420px;
    height: 420px;
    bottom: -180px;
    left: -60px;
    background: radial-gradient(circle, rgba(var(--color-primary-500-rgb), 0.04) 0%, transparent 70%);
    animation: sectionOrbDrift 26s ease-in-out infinite, sectionOrbFadeIn 1.2s 0.3s var(--ease-in-out) forwards;
}

/* --- Offers/Shop: warm accent glow --- */
.homepage-section-offers {
    background: linear-gradient(145deg,
        rgba(var(--color-secondary-500-rgb), 0.03) 0%,
        transparent 50%,
        rgba(var(--color-primary-500-rgb), 0.015) 100%);
}
.homepage-section-offers::before {
    width: 400px;
    height: 400px;
    top: -150px;
    left: -80px;
    background: radial-gradient(circle, rgba(var(--color-secondary-500-rgb), 0.06) 0%, transparent 70%);
    animation: sectionOrbDrift 29s ease-in-out infinite, sectionOrbFadeIn 1.2s var(--ease-in-out) forwards;
}
.homepage-section-offers::after {
    width: 300px;
    height: 300px;
    bottom: -100px;
    right: 10%;
    background: radial-gradient(circle, rgba(var(--color-primary-500-rgb), 0.04) 0%, transparent 70%);
    animation: sectionOrbDriftReverse 33s ease-in-out infinite, sectionOrbFadeIn 1.2s 0.3s var(--ease-in-out) forwards;
}

/* --- Communities: centered glow --- */
.homepage-section-communities {
    background: linear-gradient(180deg,
        rgba(var(--color-primary-500-rgb), 0.025) 0%,
        transparent 40%,
        rgba(var(--color-secondary-500-rgb), 0.025) 100%);
}
.homepage-section-communities::before {
    width: 500px;
    height: 500px;
    top: -200px;
    left: 50%;
    margin-left: -250px;
    background: radial-gradient(circle, rgba(var(--color-primary-500-rgb), 0.05) 0%, transparent 70%);
    animation: sectionOrbDriftReverse 31s ease-in-out infinite, sectionOrbFadeIn 1.2s var(--ease-in-out) forwards;
}
.homepage-section-communities::after {
    width: 350px;
    height: 350px;
    bottom: -120px;
    right: -60px;
    background: radial-gradient(circle, rgba(var(--color-secondary-500-rgb), 0.04) 0%, transparent 70%);
    animation: sectionOrbDrift 28s ease-in-out infinite, sectionOrbFadeIn 1.2s 0.3s var(--ease-in-out) forwards;
}

/* --- Dark theme: slightly stronger orbs for visibility --- */
[data-theme="dark"] .homepage-section-events,
[data-theme="dark"] .homepage-section-activities,
[data-theme="dark"] .homepage-section-organizations,
[data-theme="dark"] .homepage-section-content,
[data-theme="dark"] .homepage-section-offers,
[data-theme="dark"] .homepage-section-communities {
    background: none;
}

[data-theme="dark"] .homepage-section-events::before,
[data-theme="dark"] .homepage-section-activities::before,
[data-theme="dark"] .homepage-section-organizations::before,
[data-theme="dark"] .homepage-section-content::before,
[data-theme="dark"] .homepage-section-offers::before,
[data-theme="dark"] .homepage-section-communities::before {
    opacity: 1;
}

[data-theme="dark"] .homepage-section-events::after,
[data-theme="dark"] .homepage-section-activities::after,
[data-theme="dark"] .homepage-section-organizations::after,
[data-theme="dark"] .homepage-section-content::after,
[data-theme="dark"] .homepage-section-offers::after,
[data-theme="dark"] .homepage-section-communities::after {
    opacity: 1;
}

/* --- Orb animations: slow, subtle, GPU-composited (transform only) --- */
@keyframes sectionOrbDrift {
    0%, 100% { transform: translate(0, 0); }
    33%      { transform: translate(15px, -10px); }
    66%      { transform: translate(-10px, 8px); }
}

@keyframes sectionOrbDriftReverse {
    0%, 100% { transform: translate(0, 0); }
    33%      { transform: translate(-12px, 10px); }
    66%      { transform: translate(8px, -12px); }
}

@keyframes sectionOrbFadeIn {
    to { opacity: 1; }
}

/* ==========================================================================
   Homepage - Entity Showcase Enhancements
   ========================================================================== */

.entity-showcase-item .card {
    transition: transform var(--duration-300) var(--ease-in-out),
                box-shadow var(--duration-300) var(--ease-in-out);
}

.entity-showcase-item .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.entity-showcase-title i {
    background: linear-gradient(135deg, var(--color-primary-500), var(--color-secondary-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ==========================================================================
   How It Works - Section Backgrounds
   ========================================================================== */

.hiw-section-glow {
    position: relative;
    overflow: hidden;
}

.hiw-section-glow::before,
.hiw-section-glow::after {
    content: '';
    position: absolute;
    border-radius: var(--radius-full);
    pointer-events: none;
    opacity: 0;
    animation: sectionOrbFadeIn 1.2s var(--ease-in-out) forwards;
}

/* --- Visitors: primary accent --- */
.hiw-section-visitors {
    background: linear-gradient(160deg,
        rgba(var(--color-primary-500-rgb), 0.04) 0%,
        transparent 60%,
        rgba(var(--color-secondary-500-rgb), 0.02) 100%);
}
.hiw-section-visitors::before {
    width: 450px;
    height: 450px;
    top: -180px;
    right: -120px;
    background: radial-gradient(circle, rgba(var(--color-primary-500-rgb), 0.06) 0%, transparent 70%);
    animation: sectionOrbDrift 26s ease-in-out infinite, sectionOrbFadeIn 1.2s var(--ease-in-out) forwards;
}
.hiw-section-visitors::after {
    width: 300px;
    height: 300px;
    bottom: -100px;
    left: 10%;
    background: radial-gradient(circle, rgba(var(--color-secondary-500-rgb), 0.04) 0%, transparent 70%);
    animation: sectionOrbDriftReverse 30s ease-in-out infinite, sectionOrbFadeIn 1.2s 0.3s var(--ease-in-out) forwards;
}

/* --- Organizations: secondary accent --- */
.hiw-section-organizations {
    background: linear-gradient(200deg,
        rgba(var(--color-secondary-500-rgb), 0.04) 0%,
        transparent 50%,
        rgba(var(--color-primary-500-rgb), 0.02) 100%);
}
.hiw-section-organizations::before {
    width: 400px;
    height: 400px;
    bottom: -160px;
    left: -100px;
    background: radial-gradient(circle, rgba(var(--color-secondary-500-rgb), 0.06) 0%, transparent 70%);
    animation: sectionOrbDriftReverse 28s ease-in-out infinite, sectionOrbFadeIn 1.2s var(--ease-in-out) forwards;
}
.hiw-section-organizations::after {
    width: 350px;
    height: 350px;
    top: -120px;
    right: 5%;
    background: radial-gradient(circle, rgba(var(--color-primary-500-rgb), 0.04) 0%, transparent 70%);
    animation: sectionOrbDrift 32s ease-in-out infinite, sectionOrbFadeIn 1.2s 0.3s var(--ease-in-out) forwards;
}

/* --- Individuals: blended primary + secondary --- */
.hiw-section-individuals {
    background: linear-gradient(180deg,
        rgba(var(--color-primary-500-rgb), 0.03) 0%,
        transparent 40%,
        rgba(var(--color-secondary-500-rgb), 0.03) 100%);
}
.hiw-section-individuals::before {
    width: 500px;
    height: 500px;
    top: -200px;
    left: 50%;
    margin-left: -250px;
    background: radial-gradient(circle, rgba(var(--color-primary-500-rgb), 0.05) 0%, transparent 70%);
    animation: sectionOrbDriftReverse 31s ease-in-out infinite, sectionOrbFadeIn 1.2s var(--ease-in-out) forwards;
}
.hiw-section-individuals::after {
    width: 350px;
    height: 350px;
    bottom: -120px;
    right: -60px;
    background: radial-gradient(circle, rgba(var(--color-secondary-500-rgb), 0.04) 0%, transparent 70%);
    animation: sectionOrbDrift 27s ease-in-out infinite, sectionOrbFadeIn 1.2s 0.3s var(--ease-in-out) forwards;
}

/* --- Domain ownership: strong primary emphasis --- */
.hiw-section-domain {
    background: linear-gradient(135deg,
        rgba(var(--color-primary-500-rgb), 0.05) 0%,
        transparent 40%,
        rgba(var(--color-secondary-500-rgb), 0.04) 70%,
        transparent 100%);
}
.hiw-section-domain::before {
    width: 500px;
    height: 500px;
    top: -200px;
    left: 20%;
    background: radial-gradient(circle, rgba(var(--color-primary-500-rgb), 0.07) 0%, transparent 70%);
    animation: sectionOrbDrift 35s ease-in-out infinite, sectionOrbFadeIn 1.2s var(--ease-in-out) forwards;
}
.hiw-section-domain::after {
    width: 400px;
    height: 400px;
    bottom: -160px;
    right: -80px;
    background: radial-gradient(circle, rgba(var(--color-secondary-500-rgb), 0.05) 0%, transparent 70%);
    animation: sectionOrbDriftReverse 29s ease-in-out infinite, sectionOrbFadeIn 1.2s 0.3s var(--ease-in-out) forwards;
}

/* --- Step icon hover glow --- */
.site-how-it-works .step-item[style*="--step-glow-color"] .step-number {
    transition: color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.site-how-it-works .step-item[style*="--step-glow-color"]:hover .step-number {
    color: rgb(var(--step-glow-color));
    border-color: rgba(var(--step-glow-color), 0.4);
    box-shadow: 0 0 0 4px rgba(var(--step-glow-color), 0.08),
                0 0 20px rgba(var(--step-glow-color), 0.12);
}

/* Domain benefit icon circle */
.hiw-benefit-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-secondary, #f8f9fa);
    border: 2px solid var(--border-color, #dee2e6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    color: var(--text-muted, #6c757d);
    transition: color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.hiw-benefit-item:hover .hiw-benefit-icon {
    color: rgb(var(--step-glow-color));
    border-color: rgba(var(--step-glow-color), 0.4);
    box-shadow: 0 0 0 4px rgba(var(--step-glow-color), 0.08),
                0 0 20px rgba(var(--step-glow-color), 0.12);
}

/* --- Dark theme overrides --- */
[data-theme="dark"] .hiw-benefit-icon {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}

[data-theme="dark"] .hiw-section-visitors,
[data-theme="dark"] .hiw-section-organizations,
[data-theme="dark"] .hiw-section-individuals,
[data-theme="dark"] .hiw-section-domain {
    background: none;
}

[data-theme="dark"] .hiw-section-glow::before,
[data-theme="dark"] .hiw-section-glow::after {
    opacity: 1;
}

/* ==========================================================================
   How It Works - Mothership Banner
   ========================================================================== */

.hiw-mothership-banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    max-width: 700px;
    margin: 0 auto;
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg,
        rgba(99, 102, 241, 0.06) 0%,
        rgba(139, 92, 246, 0.04) 50%,
        rgba(59, 130, 246, 0.06) 100%);
    border: 1px solid rgba(99, 102, 241, 0.12);
    overflow: hidden;
}

.hiw-space-scene {
    position: relative;
    width: 72px;
    min-width: 72px;
    height: 72px;
    border-radius: var(--radius-full);
    background: radial-gradient(circle, rgba(99, 102, 241, 0.10) 0%, transparent 70%);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Rocket */
.hiw-rocket {
    font-size: 1.5rem;
    color: var(--color-primary-500);
    transform: rotate(-45deg);
    animation: hiwRocketFloat 4s ease-in-out infinite;
    position: relative;
    z-index: 2;
}

.hiw-rocket-trail {
    position: absolute;
    bottom: 12px;
    left: 8px;
    width: 24px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.4), rgba(245, 158, 11, 0));
    transform: rotate(-45deg);
    animation: hiwTrailPulse 2s ease-in-out infinite;
    z-index: 1;
}

/* Stars */
.hiw-star {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: var(--radius-full);
    background: rgba(var(--color-primary-500-rgb), 0.5);
    animation: hiwStarTwinkle 3s ease-in-out infinite;
}
.hiw-star-1  { top: 8px;  left: 10px; animation-delay: 0s; }
.hiw-star-2  { top: 16px; right: 8px; animation-delay: 0.4s; }
.hiw-star-3  { bottom: 12px; left: 18px; animation-delay: 0.8s; }
.hiw-star-4  { top: 6px;  right: 20px; animation-delay: 1.2s; width: 2px; height: 2px; }
.hiw-star-5  { bottom: 20px; right: 14px; animation-delay: 1.6s; }
.hiw-star-6  { top: 30px; left: 6px; animation-delay: 2.0s; width: 2px; height: 2px; }
.hiw-star-7  { bottom: 6px; right: 24px; animation-delay: 0.3s; width: 2px; height: 2px; }
.hiw-star-8  { top: 22px; left: 24px; animation-delay: 1.0s; }
.hiw-star-9  { bottom: 28px; left: 4px; animation-delay: 1.4s; width: 2px; height: 2px; }
.hiw-star-10 { top: 12px; left: 40px; animation-delay: 0.6s; }
.hiw-star-11 { bottom: 8px; left: 38px; animation-delay: 1.8s; width: 2px; height: 2px; }
.hiw-star-12 { top: 40px; right: 6px; animation-delay: 2.2s; }

@keyframes hiwRocketFloat {
    0%, 100% { transform: rotate(-45deg) translate(0, 0); }
    25% { transform: rotate(-45deg) translate(2px, -3px); }
    50% { transform: rotate(-45deg) translate(-1px, -5px); }
    75% { transform: rotate(-45deg) translate(3px, -2px); }
}

@keyframes hiwTrailPulse {
    0%, 100% { opacity: 0.4; width: 24px; }
    50% { opacity: 0.8; width: 30px; }
}

@keyframes hiwStarTwinkle {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.4); }
}

.hiw-mothership-text {
    flex: 1;
    min-width: 0;
}

.hiw-mothership-title {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary-500);
    margin-bottom: 0.35rem;
}

.hiw-mothership-desc {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

.hiw-mothership-link {
    color: var(--color-primary-500);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed rgba(var(--color-primary-500-rgb), 0.4);
    transition: border-color 0.2s ease;
}
.hiw-mothership-link:hover {
    border-bottom-style: solid;
    color: var(--color-primary-600);
}

/* ==========================================================================
   How It Works - Social Mission Banner
   ========================================================================== */

.hiw-social-banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    max-width: 700px;
    margin: 0 auto;
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg,
        rgba(16, 185, 129, 0.06) 0%,
        rgba(20, 184, 166, 0.04) 50%,
        rgba(34, 197, 94, 0.06) 100%);
    border: 1px solid rgba(16, 185, 129, 0.12);
    overflow: hidden;
}

.hiw-nature-scene {
    position: relative;
    width: 72px;
    min-width: 72px;
    height: 72px;
    border-radius: var(--radius-full);
    background: radial-gradient(circle, rgba(16, 185, 129, 0.10) 0%, transparent 70%);
}

.hiw-nature-icon {
    position: absolute;
    font-size: 0.75rem;
    color: rgba(16, 185, 129, 0.7);
    animation: hiwNatureFloat 6s ease-in-out infinite;
}

.hiw-nature-icon-1 { top: 6px;  left: 28px; animation-delay: 0s; font-size: 0.9rem; color: rgba(34, 197, 94, 0.8); }
.hiw-nature-icon-2 { top: 20px; right: 6px; animation-delay: 1s; font-size: 0.65rem; color: rgba(239, 68, 68, 0.6); }
.hiw-nature-icon-3 { bottom: 14px; left: 10px; animation-delay: 2s; font-size: 0.7rem; color: rgba(245, 158, 11, 0.7); }
.hiw-nature-icon-4 { bottom: 6px; right: 14px; animation-delay: 3s; font-size: 0.85rem; color: rgba(16, 185, 129, 0.8); }
.hiw-nature-icon-5 { top: 10px; left: 8px; animation-delay: 4s; font-size: 0.7rem; color: rgba(99, 102, 241, 0.6); }
.hiw-nature-icon-6 { top: 38px; left: 34px; animation-delay: 5s; font-size: 0.6rem; color: rgba(34, 197, 94, 0.6); }

@keyframes hiwNatureFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.6; }
    25% { transform: translateY(-3px) rotate(5deg); opacity: 1; }
    50% { transform: translateY(-1px) rotate(-3deg); opacity: 0.8; }
    75% { transform: translateY(-4px) rotate(2deg); opacity: 1; }
}

.hiw-social-text {
    flex: 1;
    min-width: 0;
}

.hiw-social-title {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgb(16, 185, 129);
    margin-bottom: 0.35rem;
}

.hiw-social-desc {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

/* Dark theme */
[data-theme="dark"] .hiw-mothership-banner {
    background: linear-gradient(135deg,
        rgba(99, 102, 241, 0.10) 0%,
        rgba(139, 92, 246, 0.06) 50%,
        rgba(59, 130, 246, 0.10) 100%);
    border-color: rgba(99, 102, 241, 0.18);
}

[data-theme="dark"] .hiw-social-banner {
    background: linear-gradient(135deg,
        rgba(16, 185, 129, 0.10) 0%,
        rgba(20, 184, 166, 0.06) 50%,
        rgba(34, 197, 94, 0.10) 100%);
    border-color: rgba(16, 185, 129, 0.18);
}

/* Mobile */
@media (max-width: 575.98px) {
    .hiw-mothership-banner,
    .hiw-social-banner {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
        padding: 1.25rem;
    }
}

/* ==========================================================================
   Homepage - Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .homepage-hero::before,
    .homepage-hero::after,
    .homepage-cta::before,
    .homepage-cta::after,
    .homepage-section-glow::before,
    .homepage-section-glow::after,
    .hiw-section-glow::before,
    .hiw-section-glow::after {
        animation: none !important;
        opacity: 1;
    }

    .site-how-it-works .step-item .step-number,
    .hiw-benefit-icon {
        transition: none !important;
    }

    .hiw-rocket,
    .hiw-rocket-trail,
    .hiw-star,
    .hiw-nature-icon {
        animation: none !important;
    }

    .entity-showcase-item .card {
        transition: none;
    }

    .entity-showcase-item .card:hover {
        transform: none;
    }
}

/* =====================================================================
   Hero Banner Carousel
   ===================================================================== */

.hero-banner-wrapper {
    position: relative;
}

.hero-banner-search {
    position: relative;
    z-index: 10;
    padding: 1rem 0;
    background: var(--bg-primary, #fff);
}

[data-theme="dark"] .hero-banner-search {
    background: var(--bg-primary, #1a1a2e);
}

.hero-banner-carousel {
    position: relative;
    overflow: hidden;
    aspect-ratio: 21 / 9;
    padding-bottom: 80px;
}

.hero-banner-track {
    display: flex;
    height: 100%;
    transition: transform 0.5s ease;
}

.hero-banner-slide {
    width: 100%;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.hero-banner-slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-banner-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.2) 40%,
        rgba(0, 0, 0, 0.02) 100%
    );
    pointer-events: none;
}

.hero-banner-slide-content {
    position: absolute;
    inset: 0;
    color: #fff;
    z-index: 2;
    display: flex;
    align-items: stretch;
}

.hero-banner-slide-content > .container {
    display: flex;
    align-items: stretch;
}

.hero-banner-text-backdrop {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    padding: var(--space-6, 1.5rem) var(--space-7, 2rem);
    margin: var(--space-5, 1.25rem) 0;
    border-radius: var(--radius-lg, 8px);
    max-width: 480px;
}

.hero-banner-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    line-height: 1.2;
    color: #fff;
}

.hero-banner-subtitle {
    font-size: 1.125rem;
    margin-bottom: 1rem;
    opacity: 0.9;
    color: #fff;
}

.hero-banner-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
    border-radius: var(--radius-sm, 4px);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    color: #fff;
}

.hero-banner-badge-events { background: rgba(var(--color-primary-rgb, 99, 102, 241), 0.8); }
.hero-banner-badge-activities { background: rgba(34, 197, 94, 0.8); }
.hero-banner-badge-organizations { background: rgba(59, 130, 246, 0.8); }
.hero-banner-badge-content { background: rgba(168, 85, 247, 0.8); }
.hero-banner-badge-offers { background: rgba(249, 115, 22, 0.8); }
.hero-banner-badge-communities { background: rgba(236, 72, 153, 0.8); }

.hero-banner-cta {
    border-radius: var(--radius-md, 8px);
    font-weight: 600;
    padding: 0.625rem 1.5rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.hero-banner-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Arrows */
.hero-banner-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(calc(-50% - 40px));
    z-index: 5;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.2s;
}

.hero-banner-arrow:hover {
    background: rgba(255, 255, 255, 0.3);
}

.hero-banner-arrow-prev {
    left: 1rem;
}

.hero-banner-arrow-next {
    right: 1rem;
}

/* Dots */
.hero-banner-dots {
    position: absolute;
    bottom: 92px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 5;
}

.hero-banner-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.6);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, border-color 0.2s;
}

.hero-banner-dot.active,
.hero-banner-dot:hover {
    background: #fff;
    border-color: #fff;
}

/* Featured cards overlapping carousel bottom */
.hero-banner-featured-cards {
    margin-top: -80px;
    position: relative;
    z-index: 5;
    padding-bottom: 1rem;
}

/* Responsive: Mobile */
@media (max-width: 767.98px) {
    .hero-banner-carousel {
        aspect-ratio: 4 / 3;
        padding-bottom: 40px;
    }

    .hero-banner-slide-content {
        bottom: 56px;
    }

    .hero-banner-text-backdrop {
        max-width: 100%;
        padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
    }

    .hero-banner-title {
        font-size: 1.25rem;
    }

    .hero-banner-subtitle {
        font-size: 0.9375rem;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .hero-banner-cta {
        font-size: 0.875rem;
        padding: 0.4rem 1rem;
    }

    .hero-banner-arrow {
        display: none;
    }

    .hero-banner-dots {
        bottom: 48px;
    }

    .hero-banner-featured-cards {
        margin-top: -40px;
    }

    .hero-banner-featured-cards .col-md-4 {
        flex: 0 0 85%;
        max-width: 85%;
    }

    .hero-banner-featured-cards .row {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem;
    }

    .hero-banner-featured-cards .row > [class*="col-"] {
        scroll-snap-align: center;
    }
}

/* Responsive: Tablet */
@media (min-width: 768px) and (max-width: 991.98px) {
    .hero-banner-carousel {
        aspect-ratio: 16 / 9;
    }

    .hero-banner-title {
        font-size: 2rem;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hero-banner-track {
        transition: none;
    }

    .hero-banner-cta {
        transition: none;
    }

    .hero-banner-arrow {
        transition: none;
    }

    .hero-banner-dot {
        transition: none;
    }
}

/* Activity view - organization card */
.activity-org-card {
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.activity-org-card:hover {
    box-shadow: var(--shadow-md) !important;
}

.activity-org-card-accent {
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary-500), var(--color-secondary-400));
}

[data-theme="dark"] .activity-org-card {
    border: 1px solid var(--color-neutral-700) !important;
}

/* Organization card - contact icon buttons */
.org-card-contact-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
}

.org-card-contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--color-neutral-300);
    color: var(--color-neutral-600);
    font-size: 1.1rem;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.org-card-contact-btn:hover {
    background-color: var(--color-primary-500);
    border-color: var(--color-primary-500);
    color: #fff;
    text-decoration: none;
}

[data-theme="dark"] .org-card-contact-btn {
    border-color: var(--color-neutral-600);
    color: var(--color-neutral-400);
}

[data-theme="dark"] .org-card-contact-btn:hover {
    background-color: var(--color-primary-500);
    border-color: var(--color-primary-500);
    color: #fff;
}

/* =============================================================================
   Card Selector - Clickable radio-style tile selector
   ============================================================================= */
.card-selector-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.card-selector-group input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.card-selector {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--card-bg);
    border: var(--border-width-md) solid var(--border-default);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color var(--duration-200) var(--ease-in-out),
                background-color var(--duration-200) var(--ease-in-out),
                box-shadow var(--duration-200) var(--ease-in-out);
    user-select: none;
}
.card-selector .card-selector-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: var(--font-size-lg);
    transition: background-color var(--duration-200) var(--ease-in-out),
                color var(--duration-200) var(--ease-in-out);
}
.card-selector .card-selector-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    line-height: var(--line-height-tight);
    margin: 0;
}
.card-selector .card-selector-desc {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    line-height: var(--line-height-normal);
    margin: var(--space-0-5) 0 0 0;
}
.card-selector:hover {
    border-color: var(--border-strong);
    background: var(--bg-secondary);
}
.card-selector:hover .card-selector-icon {
    background: rgba(var(--color-primary-500-rgb), 0.1);
    color: var(--color-primary-500);
}
.card-selector-group input[type="radio"]:focus-visible + .card-selector {
    outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}
.card-selector-group input[type="radio"]:checked + .card-selector {
    border-color: var(--color-primary-500);
    background: rgba(var(--color-primary-500-rgb), 0.08);
    box-shadow: 0 0 0 1px var(--color-primary-500);
}
.card-selector-group input[type="radio"]:checked + .card-selector .card-selector-icon {
    background: var(--color-primary-500);
    color: var(--color-neutral-0);
}
.card-selector-group input[type="radio"]:checked + .card-selector .card-selector-title {
    color: var(--color-primary-500);
}
[data-theme="dark"] .card-selector-group input[type="radio"]:checked + .card-selector {
    border-color: var(--color-primary-400);
    background: rgba(var(--color-primary-400-rgb), 0.1);
    box-shadow: 0 0 0 1px var(--color-primary-400);
}
[data-theme="dark"] .card-selector-group input[type="radio"]:checked + .card-selector .card-selector-icon {
    background: var(--color-primary-400);
}
[data-theme="dark"] .card-selector-group input[type="radio"]:checked + .card-selector .card-selector-title {
    color: var(--color-primary-400);
}

/* =============================================================================
   CHIP SELECTOR - Multi-select pill toggles (used for activity linking etc.)
   ============================================================================= */

.chip-selector-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.chip-selector-group .chip-selector-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.chip-selector {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-1-5) var(--space-3);
    background: var(--card-bg);
    border: var(--border-width-md) solid var(--border-default);
    border-radius: var(--radius-full);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    transition: border-color var(--duration-200) var(--ease-in-out),
                background-color var(--duration-200) var(--ease-in-out),
                color var(--duration-200) var(--ease-in-out),
                box-shadow var(--duration-200) var(--ease-in-out);
    user-select: none;
    line-height: var(--line-height-tight);
}
.chip-selector-thumb {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    object-fit: cover;
}
.chip-selector-check {
    font-size: var(--font-size-xs);
    opacity: 0;
    transform: scale(0.5);
    transition: opacity var(--duration-200) var(--ease-in-out),
                transform var(--duration-200) var(--ease-in-out);
}
.chip-selector:hover {
    border-color: var(--border-strong);
    background: var(--bg-secondary);
    color: var(--text-primary);
}
.chip-selector-input:focus-visible + .chip-selector {
    outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
}
.chip-selector-input:checked + .chip-selector {
    border-color: var(--color-primary-500);
    background: rgba(var(--color-primary-500-rgb), 0.08);
    color: var(--color-primary-500);
    box-shadow: 0 0 0 1px var(--color-primary-500);
}
.chip-selector-input:checked + .chip-selector .chip-selector-check {
    opacity: 1;
    transform: scale(1);
}
.chip-selector-input:checked + .chip-selector .chip-selector-thumb {
    box-shadow: 0 0 0 1px var(--color-primary-500);
}
[data-theme="dark"] .chip-selector-input:checked + .chip-selector {
    border-color: var(--color-primary-400);
    background: rgba(var(--color-primary-400-rgb), 0.1);
    color: var(--color-primary-400);
    box-shadow: 0 0 0 1px var(--color-primary-400);
}
[data-theme="dark"] .chip-selector-input:checked + .chip-selector .chip-selector-thumb {
    box-shadow: 0 0 0 1px var(--color-primary-400);
}

/* =============================================================================
   EVENT DETAILS CARD - Sidebar detail items (matches org Contact Information)
   ============================================================================= */

.event-details-card .event-detail-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2-5) 0;
}
.event-details-card .event-detail-item:not(:last-child) {
    border-bottom: 1px solid var(--border-color, #dee2e6);
}
.event-details-card .event-detail-item > i {
    width: 1.25rem;
    text-align: center;
    color: var(--color-primary-500);
    flex-shrink: 0;
    font-size: var(--font-size-base);
}
.event-details-card .event-detail-item a {
    word-break: break-all;
}
.event-detail-compact {
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}
.event-detail-compact i {
    font-size: 0.65rem;
    opacity: 0.6;
}

/* =============================================================================
   ADMIN EVENTS INDEX - COMPACT ROWS
   ============================================================================= */

.badge-subtle {
    background-color: var(--bg-tertiary, rgba(0,0,0,0.06));
    color: var(--text-primary);
    border: 1px solid var(--border-color, rgba(0,0,0,0.1));
}

.badge-pulse {
    animation: badge-pulse 1.5s ease-in-out infinite;
}
@keyframes badge-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Public create form pages - tighter padding on mobile to reclaim horizontal space */
@media (max-width: 575.98px) {
    main > .container:has(.event-create),
    main > .container:has(.activity-create),
    main > .container:has(.content-create),
    main > .container:has(.survey-create),
    main > .container:has(.game-create),
    main > .container:has(.shop-create) {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
    .event-create .container,
    .activity-create .container,
    .content-create .container,
    .survey-create .container,
    .game-create .container,
    .shop-create .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .event-create .card-body.p-4,
    .activity-create .card-body.p-4,
    .content-create .card-body.p-4,
    .survey-create .card-body.p-4,
    .game-create .card-body.p-4,
    .shop-create .card-body.p-4 {
        padding: 0.75rem !important;
    }
    .event-create .alert,
    .activity-create .alert,
    .content-create .alert,
    .survey-create .alert,
    .game-create .alert,
    .shop-create .alert {
        padding: 0.625rem 0.75rem;
    }
    .event-create .card .card-body,
    .activity-create .card .card-body,
    .content-create .card .card-body,
    .survey-create .card .card-body,
    .game-create .card .card-body,
    .shop-create .card .card-body {
        padding: 0.75rem;
    }
    .event-create .lsw-card,
    .activity-create .lsw-card,
    .content-create .lsw-card,
    .survey-create .lsw-card,
    .game-create .lsw-card,
    .shop-create .lsw-card {
        padding: 0.625rem 0.75rem;
    }
}

/* =============================================================================
   PULSE BADGE ANIMATION
   ============================================================================= */

@keyframes pulse-badge-anim {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.pulse-badge {
    animation: pulse-badge-anim 1.5s ease-in-out infinite;
}

/* =============================================================================
   STICKY FORM SUBMIT (mobile)
   Keeps the primary submit button pinned to the viewport bottom while the form
   is in view on small screens. Releases once the user scrolls past the form.
   Apply to the wrapper around the submit button on long forms in two-col
   layouts (e.g. user/org settings) to avoid a "stranded button" mid-page.
   ============================================================================= */

@media (max-width: 991.98px) {
    .form-submit-sticky {
        position: sticky;
        bottom: 0;
        background: var(--bs-body-bg);
        padding: 0.75rem 0;
        margin-top: 1rem;
        border-top: 1px solid var(--bs-border-color);
        z-index: 10;
    }
    .form-submit-sticky > .btn {
        width: 100%;
    }
}

/* =============================================================================
   Floating form submit bar (FormSubmitBarWidget)
   Pinned to the viewport bottom; JS syncs left/right edges to the closest
   enclosing <form> element so the bar matches the form column's width on
   every layout. Sits alongside the inline buttons at the form's natural end
   so both copies are always visible. The floating bar fades out when the
   inline copy scrolls into view (handled in widget JS via .is-hidden class).
   Used by user-facing entity create/edit forms.
   ============================================================================= */

.form-submit-bar-floating {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Centered fallback when JS width-sync hasn't applied or finds no <form>.
       Bootstrap container max-widths per breakpoint via media queries below. */
    margin-left: auto;
    margin-right: auto;
    max-width: 540px;
    z-index: 1031;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    background: rgba(var(--bg-primary-rgb, 255, 255, 255), 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--bs-border-color);
    border-bottom: 0;
    border-top-left-radius: var(--radius-lg, 0.75rem);
    border-top-right-radius: var(--radius-lg, 0.75rem);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
    padding: 0.6rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
    transition: opacity 0.22s ease, transform 0.22s ease;
}

@media (min-width: 768px) {
    .form-submit-bar-floating { max-width: 720px; }
}
@media (min-width: 992px) {
    .form-submit-bar-floating { max-width: 960px; }
}
@media (min-width: 1200px) {
    .form-submit-bar-floating { max-width: 1140px; }
}
@media (min-width: 1400px) {
    .form-submit-bar-floating { max-width: 1320px; }
}

.form-submit-bar-floating.is-hidden {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}

.form-submit-bar-inline {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.form-submit-bar-buttons {
    display: flex;
    gap: 0.5rem;
}

.form-submit-bar-buttons .btn {
    flex: 1 1 0;
    min-width: 0;
}

.form-submit-bar-back-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.65rem;
}

.form-submit-bar-back-link {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.82rem;
    line-height: 1.2;
    color: var(--text-muted, #6c757d);
    text-decoration: none;
    border-radius: var(--radius-sm, 0.25rem);
    transition: color 0.15s, background 0.15s;
}

.form-submit-bar-back-link:hover,
.form-submit-bar-back-link:focus {
    color: var(--text-primary, var(--bs-body-color));
    background: rgba(var(--bg-tertiary-rgb, 0, 0, 0), 0.06);
    text-decoration: none;
}

/* Mobile: stack the inline buttons vertically (single-column readable) and
   shrink the floating bar's button labels so they fit comfortably on phones. */
@media (max-width: 575.98px) {
    .form-submit-bar-inline .form-submit-bar-buttons {
        flex-direction: column;
    }
    .form-submit-bar-floating .form-submit-bar-buttons .btn {
        font-size: 0.85rem;
        padding: 0.4rem 0.5rem;
    }
    .form-submit-bar-floating .form-submit-bar-buttons .btn > i {
        font-size: 0.85em;
    }
}

/* Lift only the scroll-to-top button when the bar is visible - the mascot
   stays at its default bottom (it doesn't overlap the bar in any disruptive
   way and the user prefers the consistent "always on the floor" position). */
body.has-form-submit-bar-visible #scroll-to-top {
    bottom: 140px !important;
}

/* Reserve viewport bottom space when the floating bar is on screen, so the
   footer never sits underneath it. The widget's JS toggles this body class
   whenever the floating copy is visible (and removes it when the inline copy
   takes over). 120px = buttons row + back-links row + safe-area inset, with a
   bit of extra breathing room so the bar doesn't visually kiss the footer. */
body.has-form-submit-bar-visible {
    padding-bottom: 120px;
}

/* Suppress floating bar inside Bootstrap modals - modals have their own footer. */
.modal .form-submit-bar-floating {
    display: none;
}

/* =====================================================================
   EntityFormHeader - shared header for entity create/update forms
   (event, activity, content, organization, brand, product, game,
   survey, contract). Composes EntityOrganizationBannerWidget below.
   ===================================================================== */
.entity-form-header {
    margin-bottom: var(--space-6, 1.5rem);
}

.entity-form-header__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md, 0.5rem);
    background: var(--color-primary-100, #e0f2fe);
    color: var(--color-primary-700, #0369a1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.05));
}

.entity-form-header__title {
    line-height: 1.2;
    margin-bottom: var(--space-1, 0.25rem);
}

.entity-form-header__record {
    color: var(--color-text-secondary, #6c757d);
    font-size: 0.95rem;
    max-width: 60ch;
}

.entity-form-header__updated {
    font-size: 0.8rem;
    color: var(--color-text-tertiary, #9ca3af);
    margin-top: var(--space-1, 0.25rem);
}

.entity-form-header__status {
    font-size: 0.75rem;
    padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
    border-radius: var(--radius-full, 999px);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.entity-form-header__back {
    white-space: nowrap;
}

/* Mobile: stack actions below title; back button takes full width.   */
@media (max-width: 575.98px) {
    .entity-form-header__row {
        flex-direction: column;
        align-items: stretch !important;
    }
    .entity-form-header__actions {
        margin-left: 0 !important;
        margin-top: var(--space-2, 0.5rem);
        justify-content: flex-start;
    }
    .entity-form-header__back {
        flex-grow: 1;
    }
}

/* Skeleton loaders for /my/* pages two-step loading. */
.skeleton-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

/* Card-view skeleton mirrors the real .my-entity-swipe__track grid:
   horizontal scroll on mobile, CSS grid on desktop. */
.skeleton-cards {
    display: flex;
    overflow: hidden;
    gap: 1rem;
    padding: 0.5rem 0;
}
.skeleton-card {
    flex: 0 0 85%;
    min-width: 0;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-default, #e4e4e7);
    border-radius: 0.75rem;
    overflow: hidden;
    /* Same entrance + pulse story as the row skeleton; rhythm staggers below. */
    animation:
        skeleton-row-in 360ms cubic-bezier(0.22, 0.61, 0.36, 1) both,
        skeleton-row-pulse 2.4s ease-in-out infinite 360ms;
}
.skeleton-card:nth-child(1) { animation-delay: 0ms,    360ms; }
.skeleton-card:nth-child(2) { animation-delay: 60ms,   420ms; }
.skeleton-card:nth-child(3) { animation-delay: 120ms,  480ms; }
.skeleton-card:nth-child(4) { animation-delay: 180ms,  540ms; }
.skeleton-card:nth-child(5) { animation-delay: 240ms,  600ms; }
.skeleton-card:nth-child(6) { animation-delay: 300ms,  660ms; }
.skeleton-card__cover {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #e4e4e7;
    position: relative;
    overflow: hidden;
}
[data-theme="dark"] .skeleton-card__cover {
    background-color: #d4d4d8;
}
.skeleton-card__cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.7) 50%,
        transparent 100%
    );
    transform: translateX(-100%);
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
}
.skeleton-card__body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.skeleton-card__chips {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.4rem;
}
.skeleton-card__chip {
    width: 56px;
    height: 0.85rem;
    border-radius: 999px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    background-color: #e4e4e7;
}
[data-theme="dark"] .skeleton-card__chip {
    background-color: #d4d4d8;
}
.skeleton-card__chip::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.7) 50%,
        transparent 100%
    );
    transform: translateX(-100%);
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
}

/* Desktop: switch to a grid that matches .my-entity-swipe__track */
@media (min-width: 768px) {
    .skeleton-cards {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1.5rem;
        overflow: visible;
    }
    .skeleton-card {
        flex: 0 0 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton-card,
    .skeleton-card__cover::after,
    .skeleton-card__chip::after {
        animation: none;
    }
}
.skeleton-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-default, #e4e4e7);
    border-radius: 0.5rem;
    /* Stagger fade-in entrance + gentle breathing pulse so the empty state feels alive. */
    animation:
        skeleton-row-in 360ms cubic-bezier(0.22, 0.61, 0.36, 1) both,
        skeleton-row-pulse 2.4s ease-in-out infinite 360ms;
}
.skeleton-row:nth-child(1) { animation-delay: 0ms,    360ms; }
.skeleton-row:nth-child(2) { animation-delay: 50ms,   410ms; }
.skeleton-row:nth-child(3) { animation-delay: 100ms,  460ms; }
.skeleton-row:nth-child(4) { animation-delay: 150ms,  510ms; }
.skeleton-row:nth-child(5) { animation-delay: 200ms,  560ms; }
.skeleton-row:nth-child(6) { animation-delay: 250ms,  610ms; }
.skeleton-row:nth-child(n+7) { animation-delay: 300ms, 660ms; }

.skeleton-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}
.skeleton-title-row {
    display: flex;
    align-items: center;
    gap: 0.4em;
    min-width: 0;
}
.skeleton-inline-thumb {
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 0.15rem;
    flex-shrink: 0;
}
.skeleton-line {
    height: 0.85rem;
    border-radius: 0.25rem;
}
.skeleton-line--title { width: 60%; }
.skeleton-line--meta  { width: 35%; height: 0.7rem; }
.skeleton-actions {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
}
.skeleton-action-stack {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex-shrink: 0;
    align-self: flex-start;
}
@media (min-width: 768px) {
    .skeleton-action-stack {
        flex-direction: row;
        align-self: center;
    }
}
/* Base block colour - kept theme-independent (light grey) so the skeleton is
   clearly visible against both white cards (light mode) and dark cards (dark mode).
   The shimmer pass overlays a translucent highlight that picks up regardless. */
.skeleton-inline-thumb,
.skeleton-line,
.skeleton-actions {
    position: relative;
    overflow: hidden;
    background-color: #e4e4e7;
}
[data-theme="dark"] .skeleton-inline-thumb,
[data-theme="dark"] .skeleton-line,
[data-theme="dark"] .skeleton-actions {
    /* Slightly tinted lighter grey reads better on dark surfaces. */
    background-color: #d4d4d8;
}
.skeleton-inline-thumb::after,
.skeleton-line::after,
.skeleton-actions::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.7) 50%,
        transparent 100%
    );
    transform: translateX(-100%);
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
    0%   { transform: translateX(-100%); }
    60%  { transform: translateX(100%); }
    100% { transform: translateX(100%); }
}
@keyframes skeleton-row-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes skeleton-row-pulse {
    0%, 100% { opacity: 1;    }
    50%      { opacity: 0.78; }
}
@media (prefers-reduced-motion: reduce) {
    .skeleton-row,
    .skeleton-inline-thumb::after,
    .skeleton-line::after,
    .skeleton-actions::after {
        animation: none;
    }
}

/* Grid item fade-in for /my/* pages: animates rows/cards into view
   after the Pjax response replaces the skeleton with real content.
   Scoped to [data-my-entity-page] so it only affects /my listings. */
@keyframes my-grid-item-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
[data-my-entity-page] .my-entity-table tbody > tr,
[data-my-entity-page] .my-entity-swipe__card {
    animation: my-grid-item-in 280ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
/* Cap the stagger at 12 items so a long list doesn't keep animating for seconds. */
[data-my-entity-page] .my-entity-table tbody > tr:nth-child(1),
[data-my-entity-page] .my-entity-swipe__card:nth-child(1)  { animation-delay:   0ms; }
[data-my-entity-page] .my-entity-table tbody > tr:nth-child(2),
[data-my-entity-page] .my-entity-swipe__card:nth-child(2)  { animation-delay:  30ms; }
[data-my-entity-page] .my-entity-table tbody > tr:nth-child(3),
[data-my-entity-page] .my-entity-swipe__card:nth-child(3)  { animation-delay:  60ms; }
[data-my-entity-page] .my-entity-table tbody > tr:nth-child(4),
[data-my-entity-page] .my-entity-swipe__card:nth-child(4)  { animation-delay:  90ms; }
[data-my-entity-page] .my-entity-table tbody > tr:nth-child(5),
[data-my-entity-page] .my-entity-swipe__card:nth-child(5)  { animation-delay: 120ms; }
[data-my-entity-page] .my-entity-table tbody > tr:nth-child(6),
[data-my-entity-page] .my-entity-swipe__card:nth-child(6)  { animation-delay: 150ms; }
[data-my-entity-page] .my-entity-table tbody > tr:nth-child(7),
[data-my-entity-page] .my-entity-swipe__card:nth-child(7)  { animation-delay: 180ms; }
[data-my-entity-page] .my-entity-table tbody > tr:nth-child(8),
[data-my-entity-page] .my-entity-swipe__card:nth-child(8)  { animation-delay: 210ms; }
[data-my-entity-page] .my-entity-table tbody > tr:nth-child(9),
[data-my-entity-page] .my-entity-swipe__card:nth-child(9)  { animation-delay: 240ms; }
[data-my-entity-page] .my-entity-table tbody > tr:nth-child(10),
[data-my-entity-page] .my-entity-swipe__card:nth-child(10) { animation-delay: 270ms; }
[data-my-entity-page] .my-entity-table tbody > tr:nth-child(11),
[data-my-entity-page] .my-entity-swipe__card:nth-child(11) { animation-delay: 300ms; }
[data-my-entity-page] .my-entity-table tbody > tr:nth-child(n+12),
[data-my-entity-page] .my-entity-swipe__card:nth-child(n+12) { animation-delay: 330ms; }

@media (prefers-reduced-motion: reduce) {
    [data-my-entity-page] .my-entity-table tbody > tr,
    [data-my-entity-page] .my-entity-swipe__card {
        animation: none;
    }
}

/* Platform Mode badge - shown in user dropdown / mobile card when the current
 * user is allow-listed in PlatformOperatorHelper. Subtle pulse signals that
 * /my/* listings are currently rendering platform-wide data. */
.platform-mode-badge {
    animation: platform-mode-pulse 2.4s ease-in-out infinite;
    will-change: opacity;
}

@keyframes platform-mode-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
    .platform-mode-badge { animation: none; }
}