/**
 * RewardsWP Frontend Components
 *
 * Minimal, theme-agnostic CSS for frontend components.
 * Inherits font and color from theme, only controls layout and structure.
 *
 * @package RewardsWP
 * @since 1.1.0
 */

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */

:root {
	--rwp-banner-padding: 1rem;
	--rwp-banner-gap: 0.75rem;
	--rwp-banner-radius: 0.5rem;
	--rwp-banner-icon-size: 1.5rem;
	--rwp-banner-font-size: 0.875rem;
	--rwp-banner-line-height: 1.5;
	--rwp-banner-heading-size: 1rem;
	--rwp-banner-button-bg: var(--color-rwp-brand, #374151);
	--rwp-banner-button-text: var(--color-rwp-widget-button-text, #ffffff);
}

/* ==========================================================================
   Base Banner
   ========================================================================== */

.rwp-banner.rwp-banner {
	display: flex;
	align-items: flex-start;
	gap: var(--rwp-banner-gap);
	padding: var(--rwp-banner-padding);
	margin: 1.5rem 0;
	background-color: color-mix(in srgb, currentColor 3%, transparent);
	border-radius: var(--rwp-banner-radius);
	font-size: var(--rwp-banner-font-size);
	line-height: var(--rwp-banner-line-height);
}

/* ==========================================================================
   Icon
   ========================================================================== */

.rwp-banner__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--rwp-banner-icon-size);
	height: var(--rwp-banner-icon-size);
}

.rwp-banner__icon svg {
	width: var(--rwp-banner-icon-size);
	height: var(--rwp-banner-icon-size);
	flex-shrink: 0;
}

/* ==========================================================================
   Content
   ========================================================================== */

.rwp-banner__content {
	flex: 1;
	min-width: 0;
}

.rwp-banner__heading {
	font-size: var(--rwp-banner-heading-size);
	font-weight: 600;
	margin: 0;
}

.rwp-banner__text {
	font-weight: 500;
	margin: 0;
}

.rwp-banner__subtext {
	opacity: 0.7;
	margin-top: 0.25rem;
}

/* ==========================================================================
   Actions
   ========================================================================== */

.rwp-banner__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.75rem;
}

/* Primary button - needs specificity to override theme */
.rwp-banner.rwp-banner a.rwp-banner__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 1rem;
	background-color: var(--rwp-banner-button-bg);
	color: var(--rwp-banner-button-text);
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	border: none;
	border-radius: var(--rwp-banner-radius);
	cursor: pointer;
	transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.rwp-banner.rwp-banner a.rwp-banner__button:hover,
.rwp-banner.rwp-banner a.rwp-banner__button:focus {
	background-color: var(--color-rwp-brand-hover);
	color: var(--rwp-banner-button-text);
	text-decoration: none;
}

.rwp-banner.rwp-banner a.rwp-banner__button:focus-visible {
	outline: 2px solid var(--rwp-banner-button-bg);
	outline-offset: 2px;
}

/* ==========================================================================
   Variant: PDP (Product Detail Page)
   ========================================================================== */

.rwp-banner.rwp-banner.rwp-banner--pdp {
	align-items: center;
}