/**
 * Support Creator Block Styles
 *
 * @package kairo
 * @since 1.0.0
 */

.kairo-support {
	text-align: center;
}

.kairo-support__header {
	margin-bottom: 1.5rem;
}

.kairo-support__heading {
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0 0 0.5rem;
	line-height: 1.3;
}

.kairo-support__description {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--secondary);
	margin: 0;
	line-height: 1.5;
}

.kairo-support__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
}

.kairo-support__button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	border-radius: 8px;
	transition: all 0.2s ease;
	/* Default colors - uses theme accent */
	background: var(--wp--preset--color--accent);
	color: #fff;
}

.kairo-support__button:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	opacity: 0.9;
}

.kairo-support__icon {
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.kairo-support__icon svg {
	width: 100%;
	height: 100%;
}

/* ========================================
   Service Brand Colors (when enabled)
   ======================================== */

.kairo-support--service-colors .kairo-support__button--kofi {
	background: #ff5e5b;
	color: #fff;
}

.kairo-support--service-colors .kairo-support__button--kofi:hover {
	background: #ff4744;
}

.kairo-support--service-colors .kairo-support__button--patreon {
	background: #ff424d;
	color: #fff;
}

.kairo-support--service-colors .kairo-support__button--patreon:hover {
	background: #e6353f;
}

.kairo-support--service-colors .kairo-support__button--buymeacoffee {
	background: #ffdd00;
	color: #000;
}

.kairo-support--service-colors .kairo-support__button--buymeacoffee:hover {
	background: #e6c700;
}

.kairo-support--service-colors .kairo-support__button--paypal {
	background: #003087;
	color: #fff;
}

.kairo-support--service-colors .kairo-support__button--paypal:hover {
	background: #002570;
}

.kairo-support--service-colors .kairo-support__button--github {
	background: #24292e;
	color: #fff;
}

.kairo-support--service-colors .kairo-support__button--github:hover {
	background: #1a1e22;
}

.kairo-support--service-colors .kairo-support__button--custom {
	background: var(--wp--preset--color--accent);
	color: #fff;
}

/* ========================================
   Vertical Layout
   ======================================== */

.kairo-support--vertical .kairo-support__buttons {
	flex-direction: column;
	align-items: center;
}

.kairo-support--vertical .kairo-support__button {
	width: 100%;
	max-width: 280px;
	justify-content: center;
}

/* ========================================
   Card Style
   ======================================== */

.kairo-support--card {
	background: var(--wp--preset--color--surface);
	padding: 2rem;
	border-radius: 12px;
}

/* ========================================
   Minimal Style (Outline Buttons)
   ======================================== */

.kairo-support--minimal .kairo-support__button {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--subtle);
}

.kairo-support--minimal .kairo-support__button:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
	background: transparent;
	box-shadow: none;
}

/* Minimal style with service colors - use brand colors on hover */
.kairo-support--minimal.kairo-support--service-colors .kairo-support__button--kofi:hover {
	border-color: #ff5e5b;
	color: #ff5e5b;
}

.kairo-support--minimal.kairo-support--service-colors .kairo-support__button--patreon:hover {
	border-color: #ff424d;
	color: #ff424d;
}

.kairo-support--minimal.kairo-support--service-colors .kairo-support__button--buymeacoffee:hover {
	border-color: #ffdd00;
	color: #b39700;
}

.kairo-support--minimal.kairo-support--service-colors .kairo-support__button--paypal:hover {
	border-color: #003087;
	color: #003087;
}

.kairo-support--minimal.kairo-support--service-colors .kairo-support__button--github:hover {
	border-color: #24292e;
	color: #24292e;
}

/* ========================================
   Placeholder in Editor
   ======================================== */

.kairo-support__placeholder {
	color: var(--wp--preset--color--muted);
	font-style: italic;
	padding: 1rem;
	background: var(--wp--preset--color--surface);
	border-radius: 8px;
	margin: 0;
}

/* ========================================
   Dark Mode Adjustments
   ======================================== */

[data-theme="dark"] .kairo-support--card {
	background: var(--wp--preset--color--surface);
}

[data-theme="dark"] .kairo-support--minimal .kairo-support__button {
	border-color: var(--wp--preset--color--subtle);
	color: var(--wp--preset--color--contrast);
}

[data-theme="dark"] .kairo-support--minimal.kairo-support--service-colors .kairo-support__button--buymeacoffee:hover {
	color: #ffdd00;
}

[data-theme="dark"] .kairo-support--minimal.kairo-support--service-colors .kairo-support__button--paypal:hover {
	color: #00a1e4;
}

[data-theme="dark"] .kairo-support--minimal.kairo-support--service-colors .kairo-support__button--github:hover {
	color: #fff;
	border-color: #fff;
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 600px) {
	.kairo-support__buttons {
		flex-direction: column;
	}

	.kairo-support__button {
		width: 100%;
		justify-content: center;
	}
}
