/**
 * Share Buttons & AI-powered Summaries Plugin - CSS Styles
 * Refactored with CSS custom properties, no !important overrides.
 * Version: 2.5.0
 */

/* =============================================
   CSS Custom Properties - Brand colors
   ============================================= */
.ayudawp-share-buttons {
	--ayudawp-twitter: #000000;
	--ayudawp-linkedin: #0077b5;
	--ayudawp-facebook: #1877f2;
	--ayudawp-telegram: #26A5E4;
	--ayudawp-whatsapp: #25d366;
	--ayudawp-email: #6c757d;
	--ayudawp-raindrop: #0F66E3;
	--ayudawp-reddit: #FF4500;
	--ayudawp-bluesky: #0085FF;
	--ayudawp-line: #00C300;
	--ayudawp-mastodon: #6364FF;
	--ayudawp-threads: #000000;
	--ayudawp-pinterest: #BD081C;
	--ayudawp-claude: #D97757;
	--ayudawp-chatgpt: #10a37f;
	--ayudawp-google-ai: #E84430;
	--ayudawp-gemini: #8E75B2;
	--ayudawp-grok: #000000;
	--ayudawp-perplexity: #20808D;
	--ayudawp-deepseek: #4D6BFE;
	--ayudawp-mistral: #F7D046;
	--ayudawp-copilot: #6264A7;
	--ayudawp-qwen: #615CED;
	--ayudawp-meta-ai: #0081FB;
	--ayudawp-copy-link: #5F6C7B;
	--ayudawp-web-share: #2F6FED;
	--ayudawp-google-preferred: #1A73E8;
	--ayudawp-custom-bg: #333333;
	--ayudawp-custom-text: #ffffff;

	/* Dark-mode adaptation tokens. Used by the .is-on-dark class set by
	   the optional JS background detector when the parent's background
	   luminance is below 0.5. The "on-dark" variants are only applied to
	   platforms whose brand color is pure black (twitter, threads, grok),
	   which would disappear on dark backgrounds. */
	--ayudawp-on-dark-fg: #e6e6e6;
	--ayudawp-on-dark-fg-muted: #b8b8b8;
	--ayudawp-on-dark-border: #555;
	--ayudawp-on-dark-border-subtle: rgba(255,255,255,0.18);
	--ayudawp-twitter-on-dark: #ffffff;
	--ayudawp-threads-on-dark: #ffffff;
	--ayudawp-grok-on-dark: #ffffff;
}

/* =============================================
   Main container
   ============================================= */
.ayudawp-share-buttons,
.ayudawp-share-buttons h3,
.ayudawp-share-buttons h4,
.ayudawp-share-buttons h5,
.ayudawp-share-buttons h6,
.ayudawp-share-buttons span,
.ayudawp-share-buttons .ayudawp-title,
.ayudawp-buttons-container {
	background: transparent;
	background-color: transparent;
}

.ayudawp-share-buttons {
	margin: 30px 0;
	padding: 20px 0;
	border-top: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
	clear: both;
}

/* Separator line toggles (v2.4.0) */
.ayudawp-share-buttons.no-separator-top {
	border-top: none;
}

.ayudawp-share-buttons.no-separator-bottom {
	border-bottom: none;
}

/* Centered alignment */
.ayudawp-share-buttons.ayudawp-aiss-centered {
	text-align: center;
}

.ayudawp-share-buttons.ayudawp-aiss-centered .ayudawp-buttons-container {
	justify-content: center;
}

/* =============================================
   Title styles
   ============================================= */
.ayudawp-share-buttons .ayudawp-title {
	margin: 0 0 15px 0;
	font-size: 16px;
	font-weight: 600;
	color: #555;
	font-family: inherit;
	display: block;
}

.ayudawp-share-buttons h3.ayudawp-title { font-size: 18px; }
.ayudawp-share-buttons h4.ayudawp-title { font-size: 16px; }
.ayudawp-share-buttons h5.ayudawp-title { font-size: 14px; }
.ayudawp-share-buttons h6.ayudawp-title { font-size: 13px; }
.ayudawp-share-buttons span.ayudawp-title { font-size: 16px; font-weight: 600; }

/* Section title (v1.6.0) - spacing between groups */
.ayudawp-share-buttons .ayudawp-section-title {
	margin-top: 18px;
}

/* Section separator (when no title but groups exist) */
.ayudawp-section-separator {
	width: 100%;
	height: 0;
	margin: 12px 0 4px;
	border: 0;
}

/* The Google preferred source section without a title (v2.6.0): a real line,
   the one the block draws above and below itself, since setting the button
   apart is the point of giving it a section. */
.ayudawp-section-separator.ayudawp-google-separator {
	margin: 16px 0;
	border-top: 1px solid #e0e0e0;
}

.ayudawp-share-buttons.dark .ayudawp-google-separator,
.ayudawp-share-buttons.is-on-dark:not(.dark):not(.custom) .ayudawp-google-separator {
	border-top-color: #444;
}

/* =============================================
   Buttons container
   ============================================= */
.ayudawp-buttons-container {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

/* =============================================
   Base button styles
   ============================================= */
.ayudawp-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.4;
	transition: all 0.3s ease;
	border: 1px solid #ddd;
	width: 180px;
	min-height: 40px;
	text-align: center;
	background: transparent;
	color: #333;
	font-family: inherit;
	/* Labels show as written (v2.7.0). capitalize turned "Copiar enlace" into
	   "Copiar Enlace"; none still overrides themes that uppercase buttons. */
	text-transform: none;
	gap: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

/* Reset button defaults */
button.ayudawp-share-btn {
	border: 1px solid #ddd;
	background: transparent;
	color: #333;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

/* Hover/focus/active states */
.ayudawp-share-btn:hover {
	transform: translateY(-2px);
	text-decoration: none;
	color: #000;
	background: rgba(0,0,0,0.05);
	border-color: #999;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.ayudawp-share-btn:focus {
	outline: 2px solid #0073aa;
	outline-offset: 2px;
	text-decoration: none;
}

.ayudawp-share-btn:visited,
.ayudawp-share-btn:active {
	text-decoration: none;
}

.ayudawp-share-btn:active {
	transform: translateY(0);
}

button.ayudawp-share-btn:focus {
	outline: 2px solid #0073aa;
	outline-offset: 2px;
}

/* =============================================
   Button sizes (v1.6.0)
   ============================================= */

/* Compact */
.ayudawp-share-buttons.size-compact .ayudawp-share-btn {
	padding: 5px 10px;
	font-size: 12px;
	width: 140px;
	min-height: 32px;
}

/* Large */
.ayudawp-share-buttons.size-large .ayudawp-share-btn {
	padding: 12px 24px;
	font-size: 16px;
	width: 220px;
	min-height: 48px;
}

/* Fluid - buttons expand to fill available space */
.ayudawp-share-buttons.size-fluid .ayudawp-share-btn {
	width: auto;
	flex: 1 1 140px;
	max-width: 240px;
}

/* =============================================
   Icon styles
   ============================================= */
.ayudawp-icon-wrapper {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.ayudawp-icon {
	fill: currentColor;
}

.ayudawp-share-buttons.with-icons .ayudawp-share-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.ayudawp-share-buttons.with-icons .ayudawp-button-text {
	display: inline;
}

/* =============================================
   ICONS-ONLY style
   ============================================= */
.ayudawp-share-buttons.icons-only .ayudawp-share-btn {
	min-width: 44px;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 6px;
	justify-content: center;
	transition: all 0.3s ease;
}

.ayudawp-share-buttons.icons-only.square .ayudawp-share-btn {
	border-radius: 4px;
}

.ayudawp-share-buttons.icons-only.circular .ayudawp-share-btn {
	border-radius: 50%;
}

/* Icons-only size variants */
.ayudawp-share-buttons.icons-only.size-compact .ayudawp-share-btn {
	width: 36px;
	height: 36px;
	min-width: 36px;
}

.ayudawp-share-buttons.icons-only.size-large .ayudawp-share-btn {
	width: 54px;
	height: 54px;
	min-width: 54px;
}

/* =============================================
   MINIMAL style (default) - Clean transparent background
   ============================================= */
.ayudawp-share-buttons .ayudawp-share-btn,
.ayudawp-share-buttons.minimal .ayudawp-share-btn {
	background: transparent;
	color: #333;
	border: 1px solid #ddd;
}

.ayudawp-share-buttons .ayudawp-share-btn:hover,
.ayudawp-share-buttons.minimal .ayudawp-share-btn:hover {
	background: rgba(0,0,0,0.05);
	color: #000;
	border-color: #999;
}

/* =============================================
   BRAND style - Platform colors
   Uses CSS custom properties for maintainability.
   Higher specificity via double class selector.
   ============================================= */
.ayudawp-share-buttons.brand .ayudawp-share-btn.twitter    { background: var(--ayudawp-twitter); border-color: var(--ayudawp-twitter); color: #fff; }
.ayudawp-share-buttons.brand .ayudawp-share-btn.linkedin   { background: var(--ayudawp-linkedin); border-color: var(--ayudawp-linkedin); color: #fff; }
.ayudawp-share-buttons.brand .ayudawp-share-btn.facebook   { background: var(--ayudawp-facebook); border-color: var(--ayudawp-facebook); color: #fff; }
.ayudawp-share-buttons.brand .ayudawp-share-btn.telegram   { background: var(--ayudawp-telegram); border-color: var(--ayudawp-telegram); color: #fff; }
.ayudawp-share-buttons.brand .ayudawp-share-btn.whatsapp   { background: var(--ayudawp-whatsapp); border-color: var(--ayudawp-whatsapp); color: #fff; }
.ayudawp-share-buttons.brand .ayudawp-share-btn.email      { background: var(--ayudawp-email); border-color: var(--ayudawp-email); color: #fff; }
.ayudawp-share-buttons.brand .ayudawp-share-btn.raindrop   { background: var(--ayudawp-raindrop); border-color: var(--ayudawp-raindrop); color: #fff; }
.ayudawp-share-buttons.brand .ayudawp-share-btn.reddit     { background: var(--ayudawp-reddit); border-color: var(--ayudawp-reddit); color: #fff; }
.ayudawp-share-buttons.brand .ayudawp-share-btn.bluesky    { background: var(--ayudawp-bluesky); border-color: var(--ayudawp-bluesky); color: #fff; }
.ayudawp-share-buttons.brand .ayudawp-share-btn.line       { background: var(--ayudawp-line); border-color: var(--ayudawp-line); color: #fff; }
.ayudawp-share-buttons.brand .ayudawp-share-btn.mastodon   { background: var(--ayudawp-mastodon); border-color: var(--ayudawp-mastodon); color: #fff; }
.ayudawp-share-buttons.brand .ayudawp-share-btn.threads    { background: var(--ayudawp-threads); border-color: var(--ayudawp-threads); color: #fff; }
.ayudawp-share-buttons.brand .ayudawp-share-btn.pinterest  { background: var(--ayudawp-pinterest); border-color: var(--ayudawp-pinterest); color: #fff; }
.ayudawp-share-buttons.brand .ayudawp-share-btn.claude     { background: var(--ayudawp-claude); border-color: var(--ayudawp-claude); color: #fff; }
.ayudawp-share-buttons.brand .ayudawp-share-btn.chatgpt    { background: var(--ayudawp-chatgpt); border-color: var(--ayudawp-chatgpt); color: #fff; }
.ayudawp-share-buttons.brand .ayudawp-share-btn.google-ai  { background: var(--ayudawp-google-ai); border-color: var(--ayudawp-google-ai); color: #fff; }
.ayudawp-share-buttons.brand .ayudawp-share-btn.gemini     { background: var(--ayudawp-gemini); border-color: var(--ayudawp-gemini); color: #fff; }
.ayudawp-share-buttons.brand .ayudawp-share-btn.grok       { background: var(--ayudawp-grok); border-color: var(--ayudawp-grok); color: #fff; }
.ayudawp-share-buttons.brand .ayudawp-share-btn.perplexity { background: var(--ayudawp-perplexity); border-color: var(--ayudawp-perplexity); color: #fff; }
.ayudawp-share-buttons.brand .ayudawp-share-btn.deepseek   { background: var(--ayudawp-deepseek); border-color: var(--ayudawp-deepseek); color: #fff; }
.ayudawp-share-buttons.brand .ayudawp-share-btn.mistral    { background: var(--ayudawp-mistral); border-color: var(--ayudawp-mistral); color: #1a1a1a; }
.ayudawp-share-buttons.brand .ayudawp-share-btn.copilot    { background: var(--ayudawp-copilot); border-color: var(--ayudawp-copilot); color: #fff; }
.ayudawp-share-buttons.brand .ayudawp-share-btn.qwen       { background: var(--ayudawp-qwen); border-color: var(--ayudawp-qwen); color: #fff; }
.ayudawp-share-buttons.brand .ayudawp-share-btn.meta-ai    { background: var(--ayudawp-meta-ai); border-color: var(--ayudawp-meta-ai); color: #fff; }
.ayudawp-share-buttons.brand .ayudawp-share-btn.copy-link  { background: var(--ayudawp-copy-link); border-color: var(--ayudawp-copy-link); color: #fff; }
.ayudawp-share-buttons.brand .ayudawp-share-btn.web-share  { background: var(--ayudawp-web-share); border-color: var(--ayudawp-web-share); color: #fff; }
.ayudawp-share-buttons.brand .ayudawp-share-btn.google-preferred  { background: var(--ayudawp-google-preferred); border-color: var(--ayudawp-google-preferred); color: #fff; }

/* Brand hover: darken via filter (single rule for all) */
.ayudawp-share-buttons.brand .ayudawp-share-btn:hover {
	filter: brightness(0.88);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* =============================================
   OUTLINE style (v1.6.0) - Brand-colored borders, transparent bg
   ============================================= */
.ayudawp-share-buttons.outline .ayudawp-share-btn.twitter    { border-color: var(--ayudawp-twitter); color: var(--ayudawp-twitter); background: transparent; }
.ayudawp-share-buttons.outline .ayudawp-share-btn.linkedin   { border-color: var(--ayudawp-linkedin); color: var(--ayudawp-linkedin); background: transparent; }
.ayudawp-share-buttons.outline .ayudawp-share-btn.facebook   { border-color: var(--ayudawp-facebook); color: var(--ayudawp-facebook); background: transparent; }
.ayudawp-share-buttons.outline .ayudawp-share-btn.telegram   { border-color: var(--ayudawp-telegram); color: var(--ayudawp-telegram); background: transparent; }
.ayudawp-share-buttons.outline .ayudawp-share-btn.whatsapp   { border-color: var(--ayudawp-whatsapp); color: var(--ayudawp-whatsapp); background: transparent; }
.ayudawp-share-buttons.outline .ayudawp-share-btn.email      { border-color: var(--ayudawp-email); color: var(--ayudawp-email); background: transparent; }
.ayudawp-share-buttons.outline .ayudawp-share-btn.raindrop   { border-color: var(--ayudawp-raindrop); color: var(--ayudawp-raindrop); background: transparent; }
.ayudawp-share-buttons.outline .ayudawp-share-btn.reddit     { border-color: var(--ayudawp-reddit); color: var(--ayudawp-reddit); background: transparent; }
.ayudawp-share-buttons.outline .ayudawp-share-btn.bluesky    { border-color: var(--ayudawp-bluesky); color: var(--ayudawp-bluesky); background: transparent; }
.ayudawp-share-buttons.outline .ayudawp-share-btn.line       { border-color: var(--ayudawp-line); color: var(--ayudawp-line); background: transparent; }
.ayudawp-share-buttons.outline .ayudawp-share-btn.mastodon   { border-color: var(--ayudawp-mastodon); color: var(--ayudawp-mastodon); background: transparent; }
.ayudawp-share-buttons.outline .ayudawp-share-btn.threads    { border-color: var(--ayudawp-threads); color: var(--ayudawp-threads); background: transparent; }
.ayudawp-share-buttons.outline .ayudawp-share-btn.pinterest  { border-color: var(--ayudawp-pinterest); color: var(--ayudawp-pinterest); background: transparent; }
.ayudawp-share-buttons.outline .ayudawp-share-btn.claude     { border-color: var(--ayudawp-claude); color: var(--ayudawp-claude); background: transparent; }
.ayudawp-share-buttons.outline .ayudawp-share-btn.chatgpt    { border-color: var(--ayudawp-chatgpt); color: var(--ayudawp-chatgpt); background: transparent; }
.ayudawp-share-buttons.outline .ayudawp-share-btn.google-ai  { border-color: var(--ayudawp-google-ai); color: var(--ayudawp-google-ai); background: transparent; }
.ayudawp-share-buttons.outline .ayudawp-share-btn.gemini     { border-color: var(--ayudawp-gemini); color: var(--ayudawp-gemini); background: transparent; }
.ayudawp-share-buttons.outline .ayudawp-share-btn.grok       { border-color: var(--ayudawp-grok); color: var(--ayudawp-grok); background: transparent; }
.ayudawp-share-buttons.outline .ayudawp-share-btn.perplexity { border-color: var(--ayudawp-perplexity); color: var(--ayudawp-perplexity); background: transparent; }
.ayudawp-share-buttons.outline .ayudawp-share-btn.deepseek   { border-color: var(--ayudawp-deepseek); color: var(--ayudawp-deepseek); background: transparent; }
.ayudawp-share-buttons.outline .ayudawp-share-btn.mistral    { border-color: var(--ayudawp-mistral); color: #8a6a00; background: transparent; }
.ayudawp-share-buttons.outline .ayudawp-share-btn.copilot    { border-color: var(--ayudawp-copilot); color: var(--ayudawp-copilot); background: transparent; }
.ayudawp-share-buttons.outline .ayudawp-share-btn.qwen       { border-color: var(--ayudawp-qwen); color: var(--ayudawp-qwen); background: transparent; }
.ayudawp-share-buttons.outline .ayudawp-share-btn.meta-ai    { border-color: var(--ayudawp-meta-ai); color: var(--ayudawp-meta-ai); background: transparent; }
.ayudawp-share-buttons.outline .ayudawp-share-btn.copy-link  { border-color: var(--ayudawp-copy-link); color: var(--ayudawp-copy-link); background: transparent; }
.ayudawp-share-buttons.outline .ayudawp-share-btn.web-share  { border-color: var(--ayudawp-web-share); color: var(--ayudawp-web-share); background: transparent; }
.ayudawp-share-buttons.outline .ayudawp-share-btn.google-preferred  { border-color: var(--ayudawp-google-preferred); color: var(--ayudawp-google-preferred); background: transparent; }

/* Outline hover: fill with brand color */
.ayudawp-share-buttons.outline .ayudawp-share-btn:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.ayudawp-share-buttons.outline .ayudawp-share-btn.twitter:hover    { background: var(--ayudawp-twitter); }
.ayudawp-share-buttons.outline .ayudawp-share-btn.linkedin:hover   { background: var(--ayudawp-linkedin); }
.ayudawp-share-buttons.outline .ayudawp-share-btn.facebook:hover   { background: var(--ayudawp-facebook); }
.ayudawp-share-buttons.outline .ayudawp-share-btn.telegram:hover   { background: var(--ayudawp-telegram); }
.ayudawp-share-buttons.outline .ayudawp-share-btn.whatsapp:hover   { background: var(--ayudawp-whatsapp); }
.ayudawp-share-buttons.outline .ayudawp-share-btn.email:hover      { background: var(--ayudawp-email); }
.ayudawp-share-buttons.outline .ayudawp-share-btn.raindrop:hover   { background: var(--ayudawp-raindrop); }
.ayudawp-share-buttons.outline .ayudawp-share-btn.reddit:hover     { background: var(--ayudawp-reddit); }
.ayudawp-share-buttons.outline .ayudawp-share-btn.bluesky:hover    { background: var(--ayudawp-bluesky); }
.ayudawp-share-buttons.outline .ayudawp-share-btn.line:hover       { background: var(--ayudawp-line); }
.ayudawp-share-buttons.outline .ayudawp-share-btn.mastodon:hover   { background: var(--ayudawp-mastodon); }
.ayudawp-share-buttons.outline .ayudawp-share-btn.threads:hover    { background: var(--ayudawp-threads); }
.ayudawp-share-buttons.outline .ayudawp-share-btn.pinterest:hover  { background: var(--ayudawp-pinterest); }
.ayudawp-share-buttons.outline .ayudawp-share-btn.claude:hover     { background: var(--ayudawp-claude); }
.ayudawp-share-buttons.outline .ayudawp-share-btn.chatgpt:hover    { background: var(--ayudawp-chatgpt); }
.ayudawp-share-buttons.outline .ayudawp-share-btn.google-ai:hover  { background: var(--ayudawp-google-ai); }
.ayudawp-share-buttons.outline .ayudawp-share-btn.gemini:hover     { background: var(--ayudawp-gemini); }
.ayudawp-share-buttons.outline .ayudawp-share-btn.grok:hover       { background: var(--ayudawp-grok); }
.ayudawp-share-buttons.outline .ayudawp-share-btn.perplexity:hover { background: var(--ayudawp-perplexity); }
.ayudawp-share-buttons.outline .ayudawp-share-btn.deepseek:hover   { background: var(--ayudawp-deepseek); }
.ayudawp-share-buttons.outline .ayudawp-share-btn.mistral:hover    { background: var(--ayudawp-mistral); color: #1a1a1a; }
.ayudawp-share-buttons.outline .ayudawp-share-btn.copilot:hover    { background: var(--ayudawp-copilot); }
.ayudawp-share-buttons.outline .ayudawp-share-btn.qwen:hover       { background: var(--ayudawp-qwen); }
.ayudawp-share-buttons.outline .ayudawp-share-btn.meta-ai:hover    { background: var(--ayudawp-meta-ai); }
.ayudawp-share-buttons.outline .ayudawp-share-btn.copy-link:hover  { background: var(--ayudawp-copy-link); }
.ayudawp-share-buttons.outline .ayudawp-share-btn.web-share:hover  { background: var(--ayudawp-web-share); }
.ayudawp-share-buttons.outline .ayudawp-share-btn.google-preferred:hover  { background: var(--ayudawp-google-preferred); }

/* =============================================
   CUSTOM style (v1.6.0) - User-defined colors via CSS vars
   ============================================= */
.ayudawp-share-buttons.custom .ayudawp-share-btn {
	background: var(--ayudawp-custom-bg);
	border-color: var(--ayudawp-custom-bg);
	color: var(--ayudawp-custom-text);
}

.ayudawp-share-buttons.custom .ayudawp-share-btn:hover {
	filter: brightness(0.88);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* =============================================
   ICONS-ONLY style with brand colors
   ============================================= */
.ayudawp-share-buttons.icons-only .ayudawp-share-btn.twitter    { background: var(--ayudawp-twitter); border-color: var(--ayudawp-twitter); color: #fff; }
.ayudawp-share-buttons.icons-only .ayudawp-share-btn.linkedin   { background: var(--ayudawp-linkedin); border-color: var(--ayudawp-linkedin); color: #fff; }
.ayudawp-share-buttons.icons-only .ayudawp-share-btn.facebook   { background: var(--ayudawp-facebook); border-color: var(--ayudawp-facebook); color: #fff; }
.ayudawp-share-buttons.icons-only .ayudawp-share-btn.telegram   { background: var(--ayudawp-telegram); border-color: var(--ayudawp-telegram); color: #fff; }
.ayudawp-share-buttons.icons-only .ayudawp-share-btn.whatsapp   { background: var(--ayudawp-whatsapp); border-color: var(--ayudawp-whatsapp); color: #fff; }
.ayudawp-share-buttons.icons-only .ayudawp-share-btn.email      { background: var(--ayudawp-email); border-color: var(--ayudawp-email); color: #fff; }
.ayudawp-share-buttons.icons-only .ayudawp-share-btn.raindrop   { background: var(--ayudawp-raindrop); border-color: var(--ayudawp-raindrop); color: #fff; }
.ayudawp-share-buttons.icons-only .ayudawp-share-btn.reddit     { background: var(--ayudawp-reddit); border-color: var(--ayudawp-reddit); color: #fff; }
.ayudawp-share-buttons.icons-only .ayudawp-share-btn.bluesky    { background: var(--ayudawp-bluesky); border-color: var(--ayudawp-bluesky); color: #fff; }
.ayudawp-share-buttons.icons-only .ayudawp-share-btn.line       { background: var(--ayudawp-line); border-color: var(--ayudawp-line); color: #fff; }
.ayudawp-share-buttons.icons-only .ayudawp-share-btn.mastodon   { background: var(--ayudawp-mastodon); border-color: var(--ayudawp-mastodon); color: #fff; }
.ayudawp-share-buttons.icons-only .ayudawp-share-btn.threads    { background: var(--ayudawp-threads); border-color: var(--ayudawp-threads); color: #fff; }
.ayudawp-share-buttons.icons-only .ayudawp-share-btn.pinterest  { background: var(--ayudawp-pinterest); border-color: var(--ayudawp-pinterest); color: #fff; }
.ayudawp-share-buttons.icons-only .ayudawp-share-btn.claude     { background: var(--ayudawp-claude); border-color: var(--ayudawp-claude); color: #fff; }
.ayudawp-share-buttons.icons-only .ayudawp-share-btn.chatgpt    { background: var(--ayudawp-chatgpt); border-color: var(--ayudawp-chatgpt); color: #fff; }
.ayudawp-share-buttons.icons-only .ayudawp-share-btn.google-ai  { background: var(--ayudawp-google-ai); border-color: var(--ayudawp-google-ai); color: #fff; }
.ayudawp-share-buttons.icons-only .ayudawp-share-btn.gemini     { background: var(--ayudawp-gemini); border-color: var(--ayudawp-gemini); color: #fff; }
.ayudawp-share-buttons.icons-only .ayudawp-share-btn.grok       { background: var(--ayudawp-grok); border-color: var(--ayudawp-grok); color: #fff; }
.ayudawp-share-buttons.icons-only .ayudawp-share-btn.perplexity { background: var(--ayudawp-perplexity); border-color: var(--ayudawp-perplexity); color: #fff; }
.ayudawp-share-buttons.icons-only .ayudawp-share-btn.deepseek   { background: var(--ayudawp-deepseek); border-color: var(--ayudawp-deepseek); color: #fff; }
.ayudawp-share-buttons.icons-only .ayudawp-share-btn.mistral    { background: var(--ayudawp-mistral); border-color: var(--ayudawp-mistral); color: #1a1a1a; }
.ayudawp-share-buttons.icons-only .ayudawp-share-btn.copilot    { background: var(--ayudawp-copilot); border-color: var(--ayudawp-copilot); color: #fff; }
.ayudawp-share-buttons.icons-only .ayudawp-share-btn.qwen       { background: var(--ayudawp-qwen); border-color: var(--ayudawp-qwen); color: #fff; }
.ayudawp-share-buttons.icons-only .ayudawp-share-btn.meta-ai    { background: var(--ayudawp-meta-ai); border-color: var(--ayudawp-meta-ai); color: #fff; }
.ayudawp-share-buttons.icons-only .ayudawp-share-btn.copy-link  { background: var(--ayudawp-copy-link); border-color: var(--ayudawp-copy-link); color: #fff; }
.ayudawp-share-buttons.icons-only .ayudawp-share-btn.web-share  { background: var(--ayudawp-web-share); border-color: var(--ayudawp-web-share); color: #fff; }
.ayudawp-share-buttons.icons-only .ayudawp-share-btn.google-preferred  { background: var(--ayudawp-google-preferred); border-color: var(--ayudawp-google-preferred); color: #fff; }

/* Icons-only hover */
.ayudawp-share-buttons.icons-only .ayudawp-share-btn:hover {
	filter: brightness(0.88);
	transform: translateY(-2px);
	box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

/* =============================================
   DARK style - For dark backgrounds
   ============================================= */
.ayudawp-share-buttons.dark {
	border-top-color: #444;
	border-bottom-color: #444;
}

.ayudawp-share-buttons.dark .ayudawp-share-btn {
	background: transparent;
	color: #e0e0e0;
	border: 1px solid #666;
}

.ayudawp-share-buttons.dark .ayudawp-share-btn:hover {
	background: rgba(255,255,255,0.1);
	color: #fff;
	border-color: #999;
}

.ayudawp-share-buttons.dark .ayudawp-title {
	color: #e0e0e0;
}

/* =============================================
   AI Summary block (v2.0.0)
   Inline summary rendered before / after the buttons or at the start
   of the post content. Uses the native <details>/<summary> elements
   so the collapse/expand behavior works without JavaScript.
   ============================================= */

/*
 * Minimal is the default and, since 2.5.0, actually minimal: no box at all,
 * just a rule above the block. Until now it carried the same 1px border as
 * Outline, so the two presets were indistinguishable on most themes and the
 * choice between them meant nothing.
 */
.ayudawp-aiss-summary {
	margin: 24px 0;
	padding: 12px 0;
	border: 0;
	border-top: 1px solid #e0e0e0;
	border-radius: 0;
	background: transparent;
}

.ayudawp-aiss-summary-details {
	margin: 0;
}

.ayudawp-aiss-summary-details > summary {
	cursor: pointer;
	font-weight: 600;
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	user-select: none;
}

/* Hide the native disclosure triangle in WebKit/Blink. */
.ayudawp-aiss-summary-details > summary::-webkit-details-marker {
	display: none;
}

/* CSS caret that rotates when the details element is open. */
.ayudawp-aiss-summary-details > summary::after {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: auto;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid currentColor;
	transition: transform 0.2s ease;
}

.ayudawp-aiss-summary-details[open] > summary::after {
	transform: rotate(180deg);
}

.ayudawp-aiss-summary-icon {
	display: inline-flex;
	align-items: center;
}

.ayudawp-aiss-summary-icon svg {
	width: 16px;
	height: 16px;
}

.ayudawp-aiss-summary-content {
	margin-top: 8px;
}

.ayudawp-aiss-summary-content p {
	margin: 0;
	line-height: 1.5;
}

.ayudawp-aiss-summary-attribution {
	display: block;
	margin-top: 8px;
	font-size: 11px;
	color: #6c757d;
	font-style: italic;
}

/* Custom content below the summary (v2.7.0). Only spacing and the optional
   label: the space itself (#ayudawp-aiss-custom) is left to its content,
   apart from the heights set in the settings, which go inline. The label
   inherits the text colour, so it stays legible on every style variant
   without its own rules. */
.ayudawp-aiss-custom {
	margin-top: 12px;
}

.ayudawp-aiss-custom-label {
	display: block;
	margin-bottom: 4px;
	font-size: 11px;
	line-height: 1.4;
	opacity: 0.75;
}

/* Placeholder variant: contains the "Generate AI summary" button shown to
   visitors when the post has no stored summary yet (v2.0.0 frontend gen). */
.ayudawp-aiss-summary-generate-btn {
	border: 2px solid var(--ayudawp-aiss-accent);
	color: var(--ayudawp-aiss-accent);
}

.ayudawp-aiss-summary--placeholder.style-brand .ayudawp-aiss-summary-generate-btn {
	background: var(--ayudawp-aiss-accent);
	border-color: var(--ayudawp-aiss-accent);
	color: #ffffff;
}

.ayudawp-aiss-summary--placeholder.style-dark .ayudawp-aiss-summary-generate-btn {
	background: #1f2430;
	border-color: #1f2430;
	color: #e6e6e6;
}

.ayudawp-aiss-summary--placeholder.style-custom .ayudawp-aiss-summary-generate-btn {
	background: var(--ayudawp-aiss-bg, transparent);
	border-color: rgba(127, 127, 127, 0.35);
	color: var(--ayudawp-aiss-text, inherit);
}

.ayudawp-aiss-summary-generate-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: transparent;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	font-weight: 600;
	font-size: 0.95em;
	color: inherit;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.ayudawp-aiss-summary-generate-btn:hover:not(:disabled) {
	background: rgba(0, 0, 0, 0.04);
	border-color: #c0c0c0;
}

.ayudawp-aiss-summary-generate-btn:disabled {
	cursor: wait;
	opacity: 0.7;
}

.ayudawp-aiss-summary-generate-btn .ayudawp-aiss-summary-icon svg {
	width: 16px;
	height: 16px;
}

/* =============================================
   AI Summary: one paragraph per sentence (v2.1.0)
   Each sentence renders as its own <p> for readability. itemprop="abstract"
   sits on the wrapping container so the schema value stays single.
   ============================================= */

.ayudawp-aiss-summary-content .ayudawp-aiss-summary-text > p {
	margin: 0 0 0.6em;
}

.ayudawp-aiss-summary-content .ayudawp-aiss-summary-text > p:last-child {
	margin-bottom: 0;
}

/* Bullet-list format (v2.4.0): opt-in from settings, one <li> per point.
   list-style is explicit because many themes reset it inside articles. */
.ayudawp-aiss-summary-content .ayudawp-aiss-summary-text > ul {
	margin: 0;
	padding-left: 1.2em;
	list-style: disc;
}

.ayudawp-aiss-summary-content .ayudawp-aiss-summary-text > ul > li {
	margin: 0 0 0.6em;
}

.ayudawp-aiss-summary-content .ayudawp-aiss-summary-text > ul > li:last-child {
	margin-bottom: 0;
}

/* =============================================
   AI Summary: visual style presets (v2.1.0)
   minimal = base look above; the variants below are opt-in from settings.
   --ayudawp-aiss-accent can be overridden by a theme to match its palette.
   ============================================= */

.ayudawp-aiss-summary {
	--ayudawp-aiss-accent: #2563eb;
}

/* Outline: a real box, drawn in the accent colour. */
.ayudawp-aiss-summary.style-outline {
	padding: 12px 16px;
	border: 2px solid var(--ayudawp-aiss-accent);
	border-radius: 6px;
}

.ayudawp-aiss-summary.style-outline .ayudawp-aiss-summary-label {
	color: var(--ayudawp-aiss-accent);
}

/* Brand: filled accent background with light text. */
.ayudawp-aiss-summary.style-brand {
	padding: 12px 16px;
	border: 1px solid var(--ayudawp-aiss-accent);
	border-radius: 6px;
	background: var(--ayudawp-aiss-accent);
	color: #ffffff;
}

/* Dark: dark callout on light themes. */
.ayudawp-aiss-summary.style-dark {
	padding: 12px 16px;
	border: 1px solid #1f2430;
	border-radius: 6px;
	background: #1f2430;
	color: #e6e6e6;
}

/* Custom: colors from the settings color pickers (inline CSS variables). */
.ayudawp-aiss-summary.style-custom {
	padding: 12px 16px;
	border: 1px solid rgba(127, 127, 127, 0.35);
	border-radius: 6px;
	background: var(--ayudawp-aiss-bg, transparent);
	color: var(--ayudawp-aiss-text, inherit);
}

/* Keep the attribution and generate button legible on filled variants. */
.ayudawp-aiss-summary.style-brand .ayudawp-aiss-summary-attribution,
.ayudawp-aiss-summary.style-dark .ayudawp-aiss-summary-attribution,
.ayudawp-aiss-summary.style-custom .ayudawp-aiss-summary-attribution {
	color: inherit;
	opacity: 0.75;
}

.ayudawp-aiss-summary.style-brand .ayudawp-aiss-summary-generate-btn,
.ayudawp-aiss-summary.style-dark .ayudawp-aiss-summary-generate-btn,
.ayudawp-aiss-summary.style-custom .ayudawp-aiss-summary-generate-btn {
	border-color: currentColor;
	color: inherit;
}

.ayudawp-aiss-summary.style-brand .ayudawp-aiss-summary-generate-btn:hover:not(:disabled),
.ayudawp-aiss-summary.style-dark .ayudawp-aiss-summary-generate-btn:hover:not(:disabled),
.ayudawp-aiss-summary.style-custom .ayudawp-aiss-summary-generate-btn:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.12);
}

/*
 * Placeholder variant: the block is a single button, so the preset paints the
 * button and not the wrapper. Until 2.5.0 the filled presets painted the
 * <aside>, which with `padding: 0` meant a slab of accent colour with a small
 * outlined button floating inside it. These rules repeat the base class to
 * outweigh the presets above, which they tie with otherwise.
 */
.ayudawp-aiss-summary.ayudawp-aiss-summary--placeholder,
.ayudawp-aiss-summary.ayudawp-aiss-summary--placeholder.style-outline,
.ayudawp-aiss-summary.ayudawp-aiss-summary--placeholder.style-brand,
.ayudawp-aiss-summary.ayudawp-aiss-summary--placeholder.style-dark,
.ayudawp-aiss-summary.ayudawp-aiss-summary--placeholder.style-custom {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
}

.ayudawp-aiss-summary--placeholder.style-outline .ayudawp-aiss-summary-generate-btn {
	border: 2px solid var(--ayudawp-aiss-accent);
	color: var(--ayudawp-aiss-accent);
}

.ayudawp-aiss-summary--placeholder.style-brand .ayudawp-aiss-summary-generate-btn {
	background: var(--ayudawp-aiss-accent);
	border-color: var(--ayudawp-aiss-accent);
	color: #ffffff;
}

.ayudawp-aiss-summary--placeholder.style-dark .ayudawp-aiss-summary-generate-btn {
	background: #1f2430;
	border-color: #1f2430;
	color: #e6e6e6;
}

.ayudawp-aiss-summary--placeholder.style-custom .ayudawp-aiss-summary-generate-btn {
	background: var(--ayudawp-aiss-bg, transparent);
	border-color: rgba(127, 127, 127, 0.35);
	color: var(--ayudawp-aiss-text, inherit);
}

/* =============================================
   AI Summary: icon position (v2.1.0)
   "hidden" is also handled server-side (the icon span is not rendered).
   ============================================= */

.ayudawp-aiss-summary.icon-right .ayudawp-aiss-summary-toggle .ayudawp-aiss-summary-icon {
	order: 2;
	margin-left: auto;
}

.ayudawp-aiss-summary.icon-right .ayudawp-aiss-summary-details > summary::after {
	order: 3;
	margin-left: 8px;
}

.ayudawp-aiss-summary.icon-hidden .ayudawp-aiss-summary-icon {
	display: none;
}

/* =============================================
   AI Summary: visible keyboard focus (v2.1.0, a11y)
   ============================================= */

.ayudawp-aiss-summary-details > summary:focus-visible,
.ayudawp-aiss-summary-generate-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 4px;
}

/* =============================================
   Auto adaptation to dark backgrounds
   Triggered by the .is-on-dark class set by the JS background detector
   (added when the container's parent background luminance is below 0.5).
   Skipped when container has .dark or .custom (explicit manual choices).
   ============================================= */

.ayudawp-share-buttons.is-on-dark:not(.dark):not(.custom) {
	border-top-color: #444;
	border-bottom-color: #444;
}

.ayudawp-share-buttons.is-on-dark:not(.dark):not(.custom) .ayudawp-title {
	color: var(--ayudawp-on-dark-fg-muted);
}

/* MINIMAL on dark: legible text and visible border */
.ayudawp-share-buttons.is-on-dark:not(.brand):not(.outline):not(.custom):not(.icons-only):not(.dark) .ayudawp-share-btn {
	color: var(--ayudawp-on-dark-fg);
	border-color: var(--ayudawp-on-dark-border);
}

.ayudawp-share-buttons.is-on-dark:not(.brand):not(.outline):not(.custom):not(.icons-only):not(.dark) .ayudawp-share-btn:hover {
	background: rgba(255,255,255,0.08);
	color: #fff;
	border-color: #888;
}

/* OUTLINE on dark: black-branded platforms switch to white */
.ayudawp-share-buttons.is-on-dark.outline .ayudawp-share-btn.twitter,
.ayudawp-share-buttons.is-on-dark.outline .ayudawp-share-btn.threads,
.ayudawp-share-buttons.is-on-dark.outline .ayudawp-share-btn.grok {
	border-color: var(--ayudawp-twitter-on-dark);
	color: var(--ayudawp-twitter-on-dark);
}

/* Mistral text was #8a6a00 (low contrast on dark) — fall back to brand color */
.ayudawp-share-buttons.is-on-dark.outline .ayudawp-share-btn.mistral {
	color: var(--ayudawp-mistral);
}

/* BRAND and ICONS-ONLY on dark: black-branded platforms get a subtle
   light border so they stand out from the dark page background */
.ayudawp-share-buttons.is-on-dark.brand .ayudawp-share-btn.twitter,
.ayudawp-share-buttons.is-on-dark.brand .ayudawp-share-btn.threads,
.ayudawp-share-buttons.is-on-dark.brand .ayudawp-share-btn.grok,
.ayudawp-share-buttons.is-on-dark.icons-only .ayudawp-share-btn.twitter,
.ayudawp-share-buttons.is-on-dark.icons-only .ayudawp-share-btn.threads,
.ayudawp-share-buttons.is-on-dark.icons-only .ayudawp-share-btn.grok {
	border-color: var(--ayudawp-on-dark-border-subtle);
	box-shadow: 0 0 0 1px var(--ayudawp-on-dark-border-subtle) inset;
}

/* =============================================
   Tooltip styles
   ============================================= */
.ayudawp-tooltip {
	position: absolute;
	top: -9999px;
	left: -9999px;
	background: #333;
	color: #fff;
	padding: 6px 12px;
	border-radius: 4px;
	font-size: 12px;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 9999;
	box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.ayudawp-tooltip:after {
	content: '';
	position: absolute;
	bottom: -6px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #333;
}

.ayudawp-tooltip.active {
	opacity: 1;
}

/* =============================================
   Copy-to-clipboard / native share notification (v2.5.0)
   Moved out of the inline styles the script used to write, so a site can
   restyle it and the Content Security Policy of strict setups is not a
   problem.
   ============================================= */
.ayudawp-notification {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.96);
	background: #333;
	color: #fff;
	padding: 16px 24px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	max-width: min(90vw, 420px);
	text-align: center;
	z-index: 99999;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
	border: 1px solid #555;
	opacity: 0;
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none;
}

.ayudawp-notification.is-visible {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.ayudawp-notification {
		transition: none;
	}
}

/* =============================================
   Accessibility (v2.5.0)
   ============================================= */

/* The native share button is rendered hidden and revealed by the script only
   where navigator.share exists. `display: inline-flex` on .ayudawp-share-btn
   would otherwise beat the user agent's [hidden] rule. */
.ayudawp-share-btn[hidden] {
	display: none;
}

/* Keyboard focus ring that does not show on mouse clicks. The plain :focus
   rule above stays for browsers without :focus-visible. */
.ayudawp-share-btn:focus-visible {
	outline: 2px solid #0073aa;
	outline-offset: 2px;
}

/* =============================================
   Mobile compact mode (v2.5.0)
   Desktop renders exactly as before: everything here lives inside the mobile
   breakpoint, and the toggle is hidden outside it.
   ============================================= */
.ayudawp-aiss-compact-toggle {
	display: none;
}

@media (max-width: 600px) {
	/*
	 * The toggle follows the block's own alignment setting (v2.5.0): it used
	 * to be centred always, which looked wrong on a left-aligned block.
	 */
	.ayudawp-share-buttons.is-mobile-compact .ayudawp-aiss-compact-toggle {
		display: flex;
		justify-content: flex-start;
		margin-top: 10px;
	}

	.ayudawp-share-buttons.ayudawp-aiss-centered.is-mobile-compact .ayudawp-aiss-compact-toggle {
		justify-content: center;
	}

	/*
	 * And it never inherits the icons-only shape. A 40px circle cannot hold
	 * "Share" plus an icon, so the label came out clipped; the toggle is a
	 * pill with room for both whatever the button style is.
	 */
	.ayudawp-share-buttons.is-mobile-compact .ayudawp-aiss-more-btn,
	.ayudawp-share-buttons.icons-only.is-mobile-compact .ayudawp-aiss-more-btn,
	.ayudawp-share-buttons.icons-only.circular.is-mobile-compact .ayudawp-aiss-more-btn {
		width: auto;
		min-width: 0;
		max-width: none;
		height: auto;
		min-height: 40px;
		padding: 8px 18px;
		border-radius: 6px;
		gap: 8px;
	}

	/* The same caret as the summary block, rotating when the block opens. */
	.ayudawp-share-buttons.is-mobile-compact .ayudawp-aiss-more-btn::after {
		content: "";
		display: inline-block;
		width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 6px solid currentColor;
		transition: transform 0.2s ease;
	}

	.ayudawp-share-buttons.is-mobile-compact.is-expanded .ayudawp-aiss-more-btn::after {
		transform: rotate(180deg);
	}

	@media (prefers-reduced-motion: reduce) {
		.ayudawp-share-buttons.is-mobile-compact .ayudawp-aiss-more-btn::after {
			transition: none;
		}
	}

	/* The visible buttons follow the alignment setting too. */
	.ayudawp-share-buttons.is-mobile-compact .ayudawp-buttons-container {
		justify-content: flex-start;
	}

	.ayudawp-share-buttons.ayudawp-aiss-centered.is-mobile-compact .ayudawp-buttons-container {
		justify-content: center;
	}

	/* Single-button mode: nothing but the toggle until it is expanded. */
	.ayudawp-share-buttons.compact-single:not(.is-expanded) .ayudawp-buttons-container,
	.ayudawp-share-buttons.compact-single:not(.is-expanded) .ayudawp-title,
	.ayudawp-share-buttons.compact-single:not(.is-expanded) .ayudawp-section-separator {
		display: none;
	}

	.ayudawp-share-buttons.compact-single:not(.is-expanded) .ayudawp-aiss-compact-toggle {
		margin-top: 0;
	}

	/* "N visible + more": the buttons past the count, and any section title
	   left with nothing under it, are marked .aiss-overflow by PHP. */
	.ayudawp-share-buttons.compact-partial:not(.is-expanded) .aiss-overflow {
		display: none;
	}

	/* Compact blocks keep their buttons side by side: the full-width stacking
	   of the 480px breakpoint would defeat the point of showing only three. */
	.ayudawp-share-buttons.is-mobile-compact .ayudawp-buttons-container {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px;
	}

	.ayudawp-share-buttons.is-mobile-compact:not(.icons-only):not(.size-fluid) .ayudawp-share-btn {
		width: auto;
		min-width: 0;
		flex: 0 1 auto;
		max-width: 100%;
	}

	/* Fluid still fills the row when compact mode is on. */
	.ayudawp-share-buttons.size-fluid.is-mobile-compact .ayudawp-share-btn {
		width: auto;
		flex: 1 1 45%;
		max-width: none;
	}

	.ayudawp-share-buttons.compact-single.size-fluid .ayudawp-aiss-more-btn {
		width: 100%;
		max-width: 300px;
	}
}

/* =============================================
   Responsive
   ============================================= */
@media (max-width: 768px) {
	.ayudawp-buttons-container {
		gap: 8px;
	}

	.ayudawp-share-btn {
		padding: 6px 12px;
		font-size: 13px;
		width: 150px;
		min-height: 36px;
	}

	.ayudawp-share-buttons.size-compact .ayudawp-share-btn {
		width: 120px;
		min-height: 30px;
		font-size: 11px;
	}

	.ayudawp-share-buttons.size-large .ayudawp-share-btn {
		width: 180px;
		font-size: 14px;
	}

	.ayudawp-share-buttons.size-fluid .ayudawp-share-btn {
		flex: 1 1 120px;
		max-width: none;
	}

	.ayudawp-share-buttons.icons-only .ayudawp-share-btn {
		width: 40px;
		height: 40px;
		min-width: 40px;
	}

	.ayudawp-share-buttons {
		padding: 15px 0;
		margin: 20px 0;
	}

	.ayudawp-share-buttons .ayudawp-title {
		font-size: 15px;
		margin-bottom: 12px;
	}
}

@media (max-width: 480px) {
	.ayudawp-buttons-container {
		flex-direction: column;
		align-items: center;
	}

	.ayudawp-share-btn {
		width: 100%;
		max-width: 300px;
	}

	/*
	 * Fluid keeps filling the row on phones (v2.5.0). Until now this rule made
	 * it `width: 100%` with `flex: none`, which is exactly what every other
	 * size does at this breakpoint, so choosing "fluid" changed nothing on a
	 * phone. Two per row is what tells it apart from the stacked sizes.
	 */
	.ayudawp-share-buttons.size-fluid .ayudawp-buttons-container {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.ayudawp-share-buttons.size-fluid .ayudawp-share-btn {
		width: auto;
		flex: 1 1 45%;
		max-width: none;
	}

	.ayudawp-share-buttons.icons-only .ayudawp-buttons-container {
		display: grid;
		grid-template-columns: repeat(auto-fill, 40px);
		gap: 8px;
		flex-direction: row;
	}

	.ayudawp-share-buttons.ayudawp-aiss-centered.icons-only .ayudawp-buttons-container {
		display: flex;
		flex-wrap: wrap;
		margin: 0 auto;
		max-width: 300px;
		justify-content: center;
	}

	.ayudawp-share-buttons:not(.ayudawp-aiss-centered).icons-only .ayudawp-buttons-container {
		margin: 0;
		max-width: 100%;
		justify-content: flex-start;
	}

	.ayudawp-share-buttons.icons-only .ayudawp-share-btn {
		width: 40px;
		max-width: 40px;
	}
}

/* =============================================
   Admin danger zone (shared with frontend CSS)
   ============================================= */
.ayudawp-danger-zone {
	padding: 15px;
	margin-top: 10px;
	border: 2px solid #dc3232;
	background: #fff2f2;
	border-radius: 4px;
}

.ayudawp-danger-zone label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: #dc3232;
}

.ayudawp-warning {
	color: #dc3232;
	font-weight: 500;
	margin-top: 8px;
}

/* =============================================
   AI Summary: dark-mode adaptation
   Mirrors the .is-on-dark token system used by the share buttons.
   ============================================= */

/* Only minimal/outline (transparent background) adapt to a dark page; the
   filled presets (brand/dark/custom) carry their own colors, like the share
   buttons skip .dark/.custom. */
.ayudawp-aiss-summary.is-on-dark:not(.style-brand):not(.style-dark):not(.style-custom) {
	border-color: var(--ayudawp-on-dark-border-subtle, rgba(255,255,255,0.18));
	color: var(--ayudawp-on-dark-fg, #e6e6e6);
}

.ayudawp-aiss-summary.is-on-dark:not(.style-brand):not(.style-dark):not(.style-custom) .ayudawp-aiss-summary-attribution {
	color: var(--ayudawp-on-dark-fg-muted, #b8b8b8);
}

.ayudawp-aiss-summary--placeholder.is-on-dark:not(.style-brand):not(.style-dark):not(.style-custom) .ayudawp-aiss-summary-generate-btn {
	border-color: var(--ayudawp-on-dark-border-subtle, rgba(255,255,255,0.18));
	color: var(--ayudawp-on-dark-fg, #e6e6e6);
}

.ayudawp-aiss-summary--placeholder.is-on-dark:not(.style-brand):not(.style-dark):not(.style-custom) .ayudawp-aiss-summary-generate-btn:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.08);
}