/* 10 SME South Africa loading style (Mr B layer, 14 Oct 2026). Joel: "establish our own nice unique loading style".
   Style guide: MrB/live-fixes-1014/work/B/LOADING-STYLE.html. Live brand only.
   - Skeletons: blush (#F7E9E9) shapes of the content that is coming, on white cards, with one slow sweep of light that carries a
     faint maroon tint. They sit only where the content will appear (never over it) and are gone the moment it arrives.
   - Refresh: when a list that is already on screen is being replaced, it stays readable, dims a little and a thin maroon line runs
     along its top edge. Nothing jumps.
   - Navigation: a 3 px maroon line under the header, with a soft coral glow at its tip, from the click until the next page shows.
   CSS animations only (transform / opacity / background-position); all motion stops for people who ask for reduced motion. */

:root {
	--smesc-sk-bone: #F7E9E9;
	--smesc-sk-line: #EFE1E1;
	--smesc-sk-card: #FFFFFF;
}

/* ---- skeleton building blocks (markup from 10-loading.js) ---- */
.smesc-skel { position: relative; overflow: hidden; display: block; text-align: left; isolation: isolate; }
.smesc-skel::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .6) 46%, rgba(156, 28, 31, .05) 54%, rgba(255, 255, 255, 0) 68%);
	transform: translateX(-100%);
	animation: smesc-sweep 1.6s ease-in-out infinite;
}
@keyframes smesc-sweep { to { transform: translateX(100%); } }
.smesc-skel .smesc-b { display: block; height: 12px; margin: 0 0 10px; border-radius: 6px; background: var(--smesc-sk-bone); font-style: normal; }
.smesc-skel .smesc-b:last-child { margin-bottom: 0; }
.smesc-skel .w95 { width: 95%; } .smesc-skel .w90 { width: 90%; } .smesc-skel .w80 { width: 80%; } .smesc-skel .w60 { width: 60%; }
.smesc-skel .w50 { width: 50%; } .smesc-skel .w40 { width: 40%; } .smesc-skel .w35 { width: 35%; } .smesc-skel .w30 { width: 30%; }
.smesc-skel .h18 { height: 18px; border-radius: 8px; }
.smesc-skel .smesc-b-av { flex: 0 0 auto; width: 40px; height: 40px; margin: 0; border-radius: 50%; }
.smesc-skel .smesc-b-av.lg { width: 64px; height: 64px; margin: 0 auto 12px; }
.smesc-skel .smesc-b-media { height: 132px; margin: 0; border-radius: 0; }
.smesc-skel .pill { width: 96px; height: 32px; margin: 12px auto 0; border-radius: 999px; }
.smesc-sk-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--smesc-sk-line); background: var(--smesc-sk-card); }
.smesc-sk-row:last-child { border-bottom: 0; }
.smesc-sk-lines { flex: 1 1 auto; min-width: 0; }
.smesc-skel--list { border: 1px solid var(--smesc-sk-line); border-radius: 16px; background: var(--smesc-sk-card); }
.smesc-sk-head { margin: 0 0 16px; }
.smesc-sk-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .smesc-sk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .smesc-sk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.smesc-sk-card { overflow: hidden; border: 1px solid var(--smesc-sk-line); border-radius: 16px; background: var(--smesc-sk-card); }
.smesc-sk-pad { padding: 14px 16px 16px; }
.smesc-sk-person { padding: 20px 16px; text-align: center; }
.smesc-sk-person .smesc-b:not(.smesc-b-av):not(.pill) { margin-left: auto; margin-right: auto; }
.smesc-sk-post { margin: 0 0 16px; padding: 0 0 16px; border: 1px solid var(--smesc-sk-line); border-radius: 16px; background: var(--smesc-sk-card); }
.smesc-sk-post .smesc-sk-row { border-bottom: 0; padding-bottom: 12px; }
.smesc-sk-post > .smesc-b { margin-left: 16px; }
/* the placeholder the skeleton replaced keeps its words for screen readers only */
.smesc-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---- the activity feed's "Load more" (hub, profile, groups): one post-shaped card while the next page comes in ---- */
[data-bp-list="activity"] li.load-more:has(> a.loading) { position: relative; overflow: hidden; margin: 0 0 16px; padding: 0; list-style: none; border: 1px solid var(--smesc-sk-line); border-radius: 16px; background: var(--smesc-sk-card); }
[data-bp-list="activity"] li.load-more:has(> a.loading) > a { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
[data-bp-list="activity"] li.load-more:has(> a.loading)::before {
	content: ""; display: block; height: 136px;
	background-color: var(--smesc-sk-card);
	background-image: radial-gradient(circle 20px at 36px 36px, var(--smesc-sk-bone) 98%, transparent 100%),
		linear-gradient(var(--smesc-sk-bone), var(--smesc-sk-bone)), linear-gradient(var(--smesc-sk-bone), var(--smesc-sk-bone)),
		linear-gradient(var(--smesc-sk-bone), var(--smesc-sk-bone)), linear-gradient(var(--smesc-sk-bone), var(--smesc-sk-bone));
	background-repeat: no-repeat;
	background-size: 100% 100%, 38% 12px, 22% 10px, calc(100% - 32px) 10px, calc(70% - 32px) 10px;
	background-position: 0 0, 68px 22px, 68px 42px, 16px 84px, 16px 104px;
}
[data-bp-list="activity"] li.load-more:has(> a.loading)::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .6) 46%, rgba(156, 28, 31, .05) 54%, rgba(255, 255, 255, 0) 68%);
	transform: translateX(-100%); animation: smesc-sweep 1.6s ease-in-out infinite;
}

/* ---- refresh: a list on screen is being replaced (BuddyBoss directory tabs, search, pages; notification filters) ---- */
#buddypress:has([data-bp-scope].loading, #object-nav li.loading, .dir-search.loading, .bb-subnav-filters-search.loading) [data-bp-list],
[data-smesc-refresh] {
	opacity: .55;
	transition: opacity .15s ease;
	background-image: linear-gradient(#9C1C1F, #9C1C1F);
	background-repeat: no-repeat;
	background-size: 32% 3px;
	animation: smesc-bar 1.1s ease-in-out infinite;
}
@keyframes smesc-bar { from { background-position: -40% 0; } to { background-position: 140% 0; } }

/* ---- Success Core's own skeleton (My Business screens): same blush shapes and sweep instead of the grey pulse ---- */
#smesc-root .animate-pulse[aria-busy="true"] { animation: none; position: relative; overflow: hidden; }
#smesc-root .animate-pulse[aria-busy="true"] .bg-\[\#EEF2F6\] { background-color: var(--smesc-sk-bone); }
#smesc-root .animate-pulse[aria-busy="true"]::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .6) 46%, rgba(156, 28, 31, .05) 54%, rgba(255, 255, 255, 0) 68%);
	transform: translateX(-100%); animation: smesc-sweep 1.6s ease-in-out infinite;
}

/* ---- navigation line ---- */
.smesc-navline {
	position: fixed; left: 0; right: 0; top: 0; z-index: 2147483000; height: 3px; pointer-events: none;
	background: #9C1C1F; box-shadow: 0 0 6px rgba(255, 90, 93, .7);
	transform-origin: 0 50%; transform: scaleX(0); opacity: 0;
}
.smesc-navline.is-on { opacity: 1; animation: smesc-nav 8s cubic-bezier(.12, .7, .2, 1) forwards; }
.smesc-navline.is-done { opacity: 0; transform: scaleX(1); transition: transform .18s ease-out, opacity .25s ease .18s; }
@keyframes smesc-nav { 0% { transform: scaleX(0); } 12% { transform: scaleX(.3); } 45% { transform: scaleX(.66); } 100% { transform: scaleX(.92); } }

@media (prefers-reduced-motion: reduce) {
	.smesc-skel::after, [data-bp-list="activity"] li.load-more:has(> a.loading)::after, #smesc-root .animate-pulse[aria-busy="true"]::after { animation: none; display: none; }
	#buddypress:has([data-bp-scope].loading, #object-nav li.loading, .dir-search.loading, .bb-subnav-filters-search.loading) [data-bp-list], [data-smesc-refresh] { animation: none; background-size: 100% 3px; transition: none; }
	.smesc-navline.is-on { animation: none; transform: scaleX(1); opacity: .7; }
	.smesc-navline.is-done { transition: none; }
}