/*
 * Spark pages (/s/<name>/): styles that must ship with the CODE, not the Customizer.
 *
 * Why a file and not "Additional CSS": the Customizer's CSS lives in the database, and
 * releases after launch are code-only, so a fix made there would never reach production.
 *
 * MENU BUTTON VISIBLE ON EVERY BANNER (owner bug, 2026-09-19): on Spark pages the header
 * floats transparently over the creator's banner, and the Customizer block
 * SPARKLIFT-SPARK-HEADER colours the menu button near-black with a white halo. On a dark
 * banner (Clara's desk photo, most creator photos) that button was present and clickable
 * but invisible on tablet and phone, so visitors had no way to reach Login / Sign up.
 * Give it a solid white pill with a dark icon: readable on any banner, light or dark.
 */
@media (max-width: 1024px) {
	body.parent-pageid-584 .elementor-location-header .elementor-menu-toggle {
		background: #ffffff !important;
		color: #15171a !important;
		border-radius: 12px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
		text-shadow: none !important;
		min-width: 44px;
		min-height: 44px;
		justify-content: center;
		align-items: center;
	}
	body.parent-pageid-584 .elementor-location-header .elementor-menu-toggle svg,
	body.parent-pageid-584 .elementor-location-header .elementor-menu-toggle i {
		fill: #15171a !important;
		color: #15171a !important;
	}
	/* The opened menu sits on the banner too: give it a solid card. */
	body.parent-pageid-584 .elementor-location-header .elementor-nav-menu--dropdown {
		background: #ffffff !important;
		border-radius: 12px;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	}
	body.parent-pageid-584 .elementor-location-header .elementor-nav-menu--dropdown a {
		text-shadow: none !important;
	}
}

/*
 * FULL-WIDTH POSTS ON PHONES (owner bug, 2026-09-30): on a phone in portrait the Spark
 * feed posts filled only ~55% of the screen (207 of 375px), about a quarter empty on each
 * side. Cause: the feed sits inside seven nested Elementor/Astra boxes that EACH add side
 * padding (20 + 20 + 10 + 4 + 10 + 10 + 10 = 84px per side), plus the card's own 18px.
 *
 * Rather than zero seven paddings (which would also stretch the banner, profile and tab
 * bar above), the feed grid alone "breaks out" to the viewport width: 100vw, shifted left
 * by half the viewport. Safe because the only ancestor that clips horizontally is <body>
 * (overflow-x: hidden), which is itself the viewport width. Cards then go edge to edge
 * with square sides and top/bottom borders as separators (Reddit mobile, the owner's
 * reference), 16px inner padding so text never touches the glass, and the gap between
 * posts painted the same #f7f8fa as the section so it too runs full width.
 *
 * Scoped to the POST feed only: `:has(> .type-topic)` matches the loop grid whose items
 * are forum topics, so the Store tab's product grid is untouched. 767px = Elementor's
 * mobile breakpoint; tablets and desktop keep the card layout.
 * Measured on dev after: card 375/375px, text column 169px -> 303px, no sideways scroll.
 * TESTS: tests/test_spark_feed_mobile.py
 */
@media (max-width: 767px) {
	body.parent-pageid-584 .elementor-loop-container:has(> .type-topic) {
		width: 100vw;
		max-width: 100vw;
		position: relative;
		left: 50%;
		margin-left: -50vw;
		background: #f7f8fa;
		row-gap: 8px;
	}
	/* 2026-10-13 (browser QA): the "Create a post" box sits right above the grid in the same
	   nested boxes and was left out, so on a 320px phone it was 169px wide and the text box
	   lost the first tap. It breaks out the same way, edge to edge like the posts below. */
	body.parent-pageid-584 .spk-compose {
		width: 100vw;
		max-width: 100vw;
		position: relative;
		left: 50%;
		margin-left: -50vw;
		box-sizing: border-box;
		border-radius: 0;
		border-left-width: 0;
		border-right-width: 0;
	}
	body.parent-pageid-584 .elementor-loop-container:has(> .type-topic) > .e-loop-item > .e-con {
		border-radius: 0;
		border-left-width: 0;
		border-right-width: 0;
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* "Create a post" box above each Spark feed (registry #44, modules/spark-compose.php). */
.spk-compose { margin: 0 0 16px; }
.spk-compose-box { background: #fff; border: 1px solid #e6e8ec; border-radius: 12px; padding: 0; }
.spk-compose-box > summary {
	cursor: pointer; list-style: none; padding: 14px 16px; min-height: 44px;
	font-weight: 600; color: #15171a; display: flex; align-items: center; gap: 8px;
}
.spk-compose-box > summary::-webkit-details-marker { display: none; }
.spk-compose-box > summary::before { content: "+"; font-size: 1.2em; color: #f08c2e; }
.spk-compose-box[open] > summary { border-bottom: 1px solid #e6e8ec; }
.spk-compose-box > :not(summary) { padding-left: 16px; padding-right: 16px; }
.spk-compose-hint { color: #5b6270; font-size: 0.9em; margin: 12px 0 0; }
.spk-compose-login {
	display: flex; align-items: center; justify-content: center; min-height: 44px;
	background: #fff; border: 1px solid #e6e8ec; border-radius: 12px; font-weight: 600;
}
@media (max-width: 767px) {
	.spk-compose-box, .spk-compose-login { border-radius: 0; border-left-width: 0; border-right-width: 0; }
}

/* Facebook-style composer skin (2026-09-30, owner: "a full professional posting UI like
 * Facebook or Twitter"). The composer itself is BuddyBoss's native one (rich editor,
 * photo drop-zone, emoji, link previews, tags, drafts); it only looked bare because the
 * site runs Astra, not the BuddyBoss theme that normally styles it. Scoped to .spk-compose. */
.spk-compose-box > summary::before { content: none; }
.spk-compose-box > summary { gap: 12px; padding: 12px 16px; }
.spk-compose-avatar { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 40px; object-fit: cover; }
.spk-compose-prompt {
	flex: 1; background: #f0f2f5; color: #65676b; border-radius: 999px; padding: 10px 16px;
	font-weight: 400; font-size: 16px; line-height: 1.3; transition: background .15s;
}
.spk-compose-box > summary:hover .spk-compose-prompt { background: #e4e6e9; }
.spk-compose-box > summary:focus-visible { outline: 2px solid #f08c2e; outline-offset: -2px; border-radius: 12px; }
.spk-compose-box[open] > summary .spk-compose-prompt { display: none; }
.spk-compose-box[open] > summary::after { content: "Create a post"; font-weight: 700; font-size: 17px; color: #15171a; }
.spk-compose fieldset.bbp-form { border: 0; margin: 0; padding: 12px 0 16px; min-width: 0; }
.spk-compose fieldset.bbp-form > legend,
.spk-compose label[for="bbp_topic_title"],
.spk-compose label[for="bbp_topic_title"] + br { display: none; }
.spk-compose #bbp_topic_title {
	width: 100%; border: 0; border-bottom: 1px solid #e6e8ec; border-radius: 0; padding: 8px 0;
	font-size: 20px; font-weight: 700; color: #15171a; background: transparent; box-shadow: none;
}
.spk-compose #bbp_topic_title:focus { outline: none; border-bottom-color: #f08c2e; }
.spk-compose .bbp-the-content-wrapper { margin-top: 8px; }
.spk-compose .bbp-the-content[contenteditable] {
	min-height: 140px; font-size: 16px; line-height: 1.5; color: #15171a; padding: 8px 0;
	outline: none; border: 0;
}
.spk-compose .bbp-the-content[contenteditable].medium-editor-placeholder::after {
	color: #8a8d91; font-style: normal; font-size: 16px;
}
.spk-compose #whats-new-toolbar {
	display: flex; flex-wrap: wrap; align-items: center; gap: 4px; border: 1px solid #e6e8ec;
	border-radius: 10px; padding: 6px 10px; margin: 10px 0; min-height: 44px;
}
.spk-compose #whats-new-toolbar::before { content: "Add to your post"; font-weight: 600; color: #15171a; margin-right: auto; font-size: 15px; }
.spk-compose #whats-new-toolbar .toolbar-button,
.spk-compose #whats-new-toolbar .emojionearea-button {
	display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
	border-radius: 50%; color: #f08c2e; font-size: 20px;
}
.spk-compose #whats-new-toolbar .toolbar-button:hover,
.spk-compose #whats-new-toolbar .emojionearea-button:hover { background: #f0f2f5; }
.spk-compose #whats-new-toolbar .medium-editor-toolbar { flex-basis: 100%; }
.spk-compose .select2-container { width: 100% !important; }
.spk-compose .bbp-submit-wrapper { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.spk-compose #bbp_topic_submit {
	width: 100%; min-height: 44px; border: 0; border-radius: 10px; background: #f08c2e; color: #fff;
	font-weight: 700; font-size: 16px; cursor: pointer; transition: background .15s;
}
.spk-compose #bbp_topic_submit:hover { background: #d97a1f; }
.spk-compose #bbp_topic_submit:focus-visible { outline: 2px solid #15171a; outline-offset: 2px; }
.spk-compose .spk-compose-hint { margin: 10px 0 0; }
@media (prefers-reduced-motion: reduce) { .spk-compose-prompt, .spk-compose #bbp_topic_submit { transition: none; } }

/* Cookie-consent video notice (Complianz), 2026-09-30: its "accept to watch" button is
 * position:absolute, but the Astra oEmbed wrapper it sits in is forced position:static (site-wide inline CSS, !important), so the
 * button floated to the top of the whole post card and covered the author row for every
 * visitor who had not accepted cookies. Anchor it to the video frame. */
body .ast-oembed-container.cmplz-blocked-content-container { position: relative !important; }
/* Inside feed cards every descendant is forced static so the whole card is one link;
 * lift ONLY the still-blocked video so its accept button sits on it and is tappable. */
body .elementor-widget-loop-grid .elementor-element-lcard .ast-oembed-container.cmplz-blocked-content-container { position: relative !important; z-index: 2; }
.spk-compose .bbp-submit-wrapper #bbp_topic_submit.button.submit { width: 100%; min-height: 44px; }
.spk-compose .bbp-submit-wrapper { display: flex; }

/* Post box: why a post was refused (spark-compose.php), shown above the form. */
.spk-compose-error { margin: 12px 16px; padding: 10px 14px; border-radius: 10px; background: #fdecea; color: #8a1c12; font-size: .95em; }
.spk-compose-error ul { margin: 6px 0 0; padding-left: 18px; }
/* bbPress/BuddyBoss also prints its own "ERROR: Slow down..." notice inside the form; our
   message above already says it plainly, so hide the duplicate (QA round 3, 2026-10-13). */
.spk-compose:has(.spk-compose-error) .bp-feedback.error,
.spk-compose:has(.spk-compose-error) .bbp-template-notice.error { display: none !important; }

/* Post box, 2026-10-14 (owner: "janky"): one clean column. Tags and "notify me" hidden
   (replies notify by default, spark-pages.js); Audience choice for the Spark owner. */
.spk-compose p:has(> #bbp_topic_tags),
.spk-compose p:has(> #bbp_topic_subscription),
.spk-compose .spk-compose-hint { display: none !important; }
.spk-compose .spk-compose-avatar { border-radius: 50% !important; }
.spk-compose #bbp_topic_title { font-size: 18px; }
.spk-compose .bbp-the-content[contenteditable] { min-height: 110px; }
.spk-compose .spk-audience { border: 0; padding: 0; margin: 4px 0 4px; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.spk-compose .spk-audience legend { font-weight: 600; font-size: 14px; color: #15171a; margin-bottom: 6px; padding: 0; }
.spk-compose .spk-audience-opt { flex: 1 1 140px; cursor: pointer; }
.spk-compose .spk-audience-opt input { position: absolute; opacity: 0; pointer-events: none; }
.spk-compose .spk-audience-opt span { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 12px; border: 1.5px solid #e6e8ec; border-radius: 999px; font-weight: 600; font-size: 15px; color: #3a3d42; background: #fff; transition: border-color .15s, background .15s; }
.spk-compose .spk-audience-opt input:checked + span { border-color: #f08c2e; background: #fff4e8; color: #15171a; }
.spk-compose .spk-audience-opt input:focus-visible + span { outline: 2px solid #15171a; outline-offset: 2px; }
.spk-compose .spk-audience-note { flex-basis: 100%; margin: 2px 0 0; font-size: 13px; color: #65676b; display: none; }
.spk-compose .spk-audience:has(input[value="core"]:checked) .spk-audience-note { display: block; }
@media (prefers-reduced-motion: reduce) { .spk-compose .spk-audience-opt span { transition: none; } }
.spk-compose .bbp-submit-wrapper > * { flex: 1 1 auto; }

/* SPARK HEADER (owner, 2026-10-14: "the top area is really falling apart on mobile"; social
 * icons "should be just a line right next to the name"). All Sparks share these Elementor ids.
 * Overrides the Customizer grid (SPARKLIFT-BIO-NAMESOCIAL), which put the icons on their own row
 * on phones and left the DEMO note and two spacers in stray grid cells. The `html` prefix
 * out-weighs the Customizer rules, which print after this file with the same selectors. */
html body.parent-pageid-584 .elementor-element-b6f0d46 > .elementor-widget-wrap {
	grid-template-columns: 128px minmax(0, max-content) 1fr !important;
	grid-template-areas: "av name social" "av handle handle" "av tag tag" "av desc desc" "av demo demo" !important;
	align-items: center !important;
}
html body.parent-pageid-584 .elementor-element-250be86,
html body.parent-pageid-584 .elementor-element-f442de7 { display: none !important; }
html body.parent-pageid-584 .elementor-element-b6f0d46 .sl-demo-header { grid-area: demo !important; margin: 6px 0 0 !important; }
html body.parent-pageid-584 .spark-socials { grid-area: social !important; justify-self: start !important; align-self: center !important; margin: 0 0 0 10px !important; }
html body.parent-pageid-584 .spark-socials .elementor-social-icons-wrapper { display: flex !important; flex-wrap: nowrap !important; gap: 6px !important; }
html body.parent-pageid-584 .spark-socials .elementor-grid-item { margin: 0 !important; }
/* One calm style for every icon (the TikTok tile was grey, the others black/red). */
html body.parent-pageid-584 .spark-socials .elementor-social-icon {
	width: 28px !important; height: 28px !important; padding: 0 !important; border-radius: 50% !important;
	background: #15171a !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
	transition: background .15s, transform .15s;
}
html body.parent-pageid-584 .spark-socials .elementor-social-icon:hover { background: #ff8a00 !important; transform: translateY(-1px); }
html body.parent-pageid-584 .spark-socials .elementor-social-icon i,
html body.parent-pageid-584 .spark-socials .elementor-social-icon svg { font-size: 13px !important; width: 13px !important; height: 13px !important; color: #fff !important; fill: #fff !important; }
@media (max-width: 767px) {
	html body.parent-pageid-584 .elementor-element-b6f0d46 > .elementor-widget-wrap {
		/* The avatar overlaps the banner in its own row; the name then starts at the left edge
		   with the icons right beside it, so "Clara Calvin" stays on one line. */
		grid-template-columns: minmax(0, max-content) 1fr !important;
		grid-template-areas: "av av" "name social" "handle handle" "tag tag" "desc desc" "demo demo" !important;
		column-gap: 12px !important; row-gap: 4px !important;
	}
	html body.parent-pageid-584 .elementor-element-995bda4 img { width: 56px !important; height: 56px !important; }
	html body.parent-pageid-584 .elementor-element-0bf5905 .elementor-heading-title { font-size: 20px !important; line-height: 1.15 !important; }
	html body.parent-pageid-584 .spark-socials { margin-left: 2px !important; }
	html body.parent-pageid-584 .spark-socials .elementor-social-icon { width: 24px !important; height: 24px !important; }
	html body.parent-pageid-584 .spark-socials .elementor-social-icon i,
	html body.parent-pageid-584 .spark-socials .elementor-social-icon svg { font-size: 11px !important; width: 11px !important; height: 11px !important; }
	html body.parent-pageid-584 .elementor-element-clarhdl { margin-top: 8px !important; }
	/* Join button: full width under the bio, easy to tap. */
	html body.parent-pageid-584 .elementor-element-c9878e5 { width: 100% !important; }
	html body.parent-pageid-584 .elementor-element-c9878e5 .elementor-button { display: flex !important; justify-content: center !important; width: 100% !important; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { html body.parent-pageid-584 .spark-socials .elementor-social-icon { transition: none; } }

/* Home / Store / Links on one row on phones (2026-10-14: Links had wrapped to a second row). */
@media (max-width: 767px) {
	html body.parent-pageid-584 .spark-feedbar .sfb-view { display: flex !important; flex-wrap: nowrap !important; gap: 6px !important; }
	html body.parent-pageid-584 .spark-feedbar .sfb-view-btn { flex: 1 1 0 !important; padding: 9px 8px !important; font-size: 13.5px !important; white-space: nowrap !important; text-align: center !important; justify-content: center !important; }
}
@media (max-width: 767px) {
	/* The avatar is pulled up over the banner (Elementor transform -62px), so its grid row only
	   needs to reserve what still shows below the banner. */
	html body.parent-pageid-584 .elementor-element-995bda4 { margin-bottom: -56px !important; }
}

/* FEED CARD AUTHOR ROW (owner, 2026-10-14: "the username should be right next to the avatar,
 * and we don't need the name twice; like Reddit: u/name and the date"). Loop template 817:
 * lcav = avatar, lcmeta = name / handle / date. Phone and desktop. */
html body .elementor-element-lchdr { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 10px !important; flex-wrap: nowrap !important; }
html body .elementor-element-lcav { flex: 0 0 auto !important; width: auto !important; margin: 0 !important; }
html body .elementor-element-lcav img { width: 36px !important; height: 36px !important; border-radius: 50% !important; }
html body .elementor-element-lcmeta { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 0 6px !important; width: auto !important; margin: 0 !important; padding: 0 !important; }
html body .elementor-element-lcname { display: none !important; }
html body .elementor-element-lchandle, html body .elementor-element-lcdate { width: auto !important; margin: 0 !important; }
html body .elementor-element-lchandle * { font-weight: 700 !important; color: #15171a !important; font-size: 14px !important; }
html body .elementor-element-lcdate * { color: #6b7280 !important; font-size: 13px !important; }
html body .elementor-element-lcdate::before { content: "·"; color: #9aa0a6; margin-right: 6px; }
html body .elementor-element-lcmeta > *, html body .elementor-element-lcmeta > * > * { margin: 0 !important; padding: 0 !important; line-height: 1.3 !important; }
html body .elementor-element-lcdate { display: inline-flex !important; align-items: center !important; }

/* LIKE BUTTON STATE (owner, 2026-10-14: "I can give likes but I cannot take them back").
 * Un-liking worked, but liked and not-liked looked identical (grey heart), so a second tap
 * seemed to do nothing. Liked = orange pill with a filled orange heart; tap again to undo. */
html body .wpulike-heart .wp_ulike_general_class { border-radius: 999px !important; transition: background .15s, border-color .15s; }
html body .wpulike-heart .wp_ulike_general_class.wp_ulike_is_liked { background: #fff1e3 !important; border-color: #ff8a00 !important; }
html body .wpulike-heart .wp_ulike_is_liked .wp_ulike_btn,
html body .wpulike-heart .wp_ulike_btn.wp_ulike_btn_is_active { filter: none !important; }
html body .wpulike-heart .wp_ulike_is_liked .wp_ulike_put_image::after,
html body .wpulike-heart .wp_ulike_btn_is_active.wp_ulike_put_image::after { filter: invert(56%) sepia(97%) saturate(2000%) hue-rotate(1deg) brightness(102%) !important; opacity: 1 !important; }
html body .wpulike-heart .wp_ulike_is_liked .count-box { color: #c25e00 !important; font-weight: 700 !important; }
@media (prefers-reduced-motion: reduce) { html body .wpulike-heart .wp_ulike_general_class { transition: none; } }

/* DESKTOP LOGO (owner, 2026-10-14: "the SparkLift logo looks weird, it levitates on the side").
 * On Spark pages the site header floats over the banner but spans the whole window, so the logo
 * sat outside the banner's left edge. Line the header up with the banner (1200px, centred). */
@media (min-width: 1025px) {
	html body.parent-pageid-584 .elementor-location-header {
		left: 50% !important; right: auto !important; width: min(1200px, 100%) !important;
		transform: translateX(-50%) !important; padding: 0 24px !important; box-sizing: border-box !important;
	}
}

/* STORE POST (owner, 2026-10-14: "the pinned store post should be the same full width as any
 * other post"). On phones the feed cards break out to the screen width (rule above); the store
 * post sits in the same nested boxes, so it breaks out the same way and loses its rounded card. */
@media (max-width: 767px) {
	html body.parent-pageid-584 .elementor-element-storewrap {
		width: 100vw !important; max-width: 100vw !important; position: relative !important;
		left: 50% !important; margin-left: -50vw !important; box-sizing: border-box !important;
	}
	html body.parent-pageid-584 .store-carousel-wrap {
		border-radius: 0 !important; border-left-width: 0 !important; border-right-width: 0 !important;
		padding-left: 16px !important; padding-right: 16px !important; margin-bottom: 8px !important;
	}
}

/* Owner feedback 2026-10-14 (second pass on the phone header + feed cards). */
/* 1. Post cards: no orange glow / lift on hover (Customizer rule SPARK feed cards). */
html body .elementor-widget-loop-grid .elementor-element-lcard:hover { border-color: inherit !important; box-shadow: none !important; transform: none !important; }
/* 2. Fan avatars on feed cards larger; name and date on one aligned line. */
html body .elementor-element-lcav img { width: 44px !important; height: 44px !important; }
html body .elementor-element-lcmeta { align-items: baseline !important; }
html body .elementor-element-lchandle, html body .elementor-element-lcdate { align-self: center !important; line-height: 1 !important; }
html body .elementor-element-lcdate { display: inline-flex !important; align-items: center !important; height: 1em; }
@media (max-width: 767px) {
	/* 3. Creator avatar back to a strong size, and the name sits right under it (no gap). */
	html body.parent-pageid-584 .elementor-element-995bda4 img { width: 88px !important; height: 88px !important; }
	/* The avatar is drawn 62px higher than its grid row (Elementor transform), which leaves an
	   empty band under it; pull the name line up into that band. */
	html body.parent-pageid-584 .elementor-element-b6f0d46 > .elementor-widget-wrap { grid-template-rows: 30px repeat(5, auto) !important; }
	html body.parent-pageid-584 .elementor-element-995bda4 { align-self: start !important; }
}

/* POST BOX FIRST (owner, 2026-10-14): above the pinned store post in the Home feed. */
html body.parent-pageid-584 #create-post.spk-compose { order: -1 !important; }

/* POST BOX TOOLBAR (owner, 2026-10-14: "I add text and then cannot go back to add an image").
 * The format bar (Aa) slid on top of the Photo/Emoji buttons. Now: one row of labelled buttons
 * (Photo, Video link, Format, Emoji) that never move; the format bar opens as its own row above. */
html body .spk-compose #whats-new-toolbar { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px !important; padding: 8px !important; min-height: 0 !important; height: auto !important; overflow: visible !important; }
html body .spk-compose #whats-new-toolbar::before { content: none !important; }
html body .spk-compose #whats-new-toolbar .medium-editor-toolbar { position: static !important; order: -1 !important; flex: 1 0 100% !important; width: 100% !important; margin: 0 0 4px !important; padding: 0 0 6px !important; border-bottom: 1px solid #e6e8ec !important; background: none !important; box-shadow: none !important; transform: none !important; left: auto !important; top: auto !important; }
html body .spk-compose #whats-new-toolbar .medium-editor-toolbar:not(.medium-editor-toolbar-active) { display: none !important; }
html body .spk-compose #whats-new-toolbar .post-elements-buttons-item { margin: 0 !important; }
html body .spk-compose #whats-new-toolbar .toolbar-button,
html body .spk-compose .spk-video-link-btn {
	display: inline-flex !important; align-items: center !important; gap: 6px !important; width: auto !important; height: 38px !important;
	padding: 0 12px !important; border-radius: 999px !important; background: #f3f4f6 !important; color: #15171a !important;
	font-size: 14px !important; font-weight: 600 !important; text-decoration: none !important; border: 0 !important; cursor: pointer;
}
html body .spk-compose #whats-new-toolbar .toolbar-button:hover,
html body .spk-compose .spk-video-link-btn:hover { background: #ffe7cc !important; }
html body .spk-compose #whats-new-toolbar .toolbar-button.active { background: #ffe7cc !important; }

html body .spk-compose #whats-new-toolbar .post-emoji .emojionearea-button { width: auto !important; height: 38px !important; padding: 0 12px 0 34px !important; border-radius: 999px !important; background-color: #f3f4f6 !important; background-position: 10px center !important; display: inline-flex !important; align-items: center !important; }
html body .spk-compose #whats-new-toolbar .post-emoji .emojionearea-button::after { content: "Emoji"; font-size: 14px; font-weight: 600; color: #15171a; }
html body .spk-compose #whats-new-toolbar .post-emoji .emojionearea-button > div { left: 8px !important; }

/* Flair picker (spark-compose.php): same pill style as the audience choice. */
.spk-compose .spk-flair-pick { border: 0; padding: 0; margin: 6px 0 2px; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.spk-compose .spk-flair-pick legend { font-weight: 600; font-size: 14px; color: #15171a; margin-bottom: 6px; padding: 0; }
.spk-compose .spk-flair-opt { cursor: pointer; }
.spk-compose .spk-flair-opt input { position: absolute; opacity: 0; pointer-events: none; }
.spk-compose .spk-flair-opt span { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border: 1.5px solid #e6e8ec; border-radius: 999px; font-weight: 600; font-size: 14px; color: #3a3d42; background: #fff; }
.spk-compose .spk-flair-opt input:checked + span { border-color: #f08c2e; background: #fff4e8; color: #15171a; }
.spk-compose .spk-flair-opt input:focus-visible + span { outline: 2px solid #15171a; outline-offset: 2px; }

/* Creator avatar: always a true circle (2026-10-14: on desktop it was squeezed to 96x128). */
html body.parent-pageid-584 .elementor-element-995bda4 img { aspect-ratio: 1 / 1 !important; object-fit: cover !important; border-radius: 50% !important; }
@media (min-width: 768px) {
	html body.parent-pageid-584 .elementor-element-995bda4 img { width: 128px !important; height: 128px !important; }
}

html body .spk-compose .spk-btn-label { font-size: 14px !important; font-weight: 600 !important; color: #15171a !important; line-height: 1 !important; }
html body .spk-compose #forums-media-button i,
html body .spk-compose #show-toolbar-button span { font-size: 18px !important; }

/* Locked Core card: keep the u/name visible (the paid gate hides shortcode widgets on locked cards). */
html body .e-loop-item:has(.spark-locked-card) .elementor-element-lchandle { display: block !important; }
/* Locked Core cards keep their Share button (sharing a paid post's title sells the membership). */
html body .e-loop-item:has(.spark-locked-card) .elementor-element-lcshare { display: block !important; }