/**
 * Dashboard Upgrade Banner
 *
 * Inline banner shown on the main dashboard prompting Free users to upgrade.
 * Two variants: default (subtle) and `.wsscd-has-promotion` (gradient + lifted
 * shadow + accent badge) for active promotional campaigns.
 *
 * Markup is rendered by WSSCD_Upgrade_Prompt_Manager::get_banner_prompt().
 *
 * @package    SmartCycleDiscounts
 * @subpackage SmartCycleDiscounts/resources/assets/css/admin/dashboard/partials/dashboard-upgrade-banner.css
 * @author     Webstepper.io <contact@webstepper.io>
 * @copyright  2025 Webstepper.io
 * @license    GPL-3.0-or-later https://www.gnu.org/licenses/gpl-3.0.html
 * @link       https://webstepper.io/wordpress/plugins/smart-cycle-discounts/
 * @since      1.0.0
 */

/* ==========================================================================
   Container
   ========================================================================== */

.wsscd-upgrade-banner-inline {
	position: relative;
	margin: var(--wsscd-spacing-lg) 0;
	padding: var(--wsscd-padding-medium) var(--wsscd-spacing-xxl) var(--wsscd-padding-medium) var(--wsscd-spacing-md);
	background: var(--wsscd-color-white);
	border: 1px solid var(--wsscd-color-border-light);
	border-left: 4px solid var(--wsscd-color-pro);
	border-radius: var(--wsscd-dashboard-radius-md);
	box-shadow: var(--wsscd-shadow-sm);
}

.wsscd-upgrade-banner-inline.wsscd-has-promotion {
	background: linear-gradient(90deg, var(--wsscd-color-pro-alpha-8) 0%, var(--wsscd-color-white) 100%);
	box-shadow: var(--wsscd-shadow-md);
}

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

.wsscd-upgrade-banner-content {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wsscd-gap-comfortable);
}

.wsscd-upgrade-banner-left {
	display: flex;
	flex: 1 1 320px;
	align-items: center;
	gap: var(--wsscd-gap-normal);
	min-width: 0;
}

.wsscd-upgrade-icon {
	flex-shrink: 0;
	width: var(--wsscd-icon-medium);
	height: var(--wsscd-icon-medium);
	color: var(--wsscd-color-pro);
}

.wsscd-upgrade-text {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wsscd-gap-tight);
	font-size: var(--wsscd-font-size-base);
	line-height: 1.5;
}

.wsscd-upgrade-text strong {
	font-weight: var(--wsscd-font-weight-semibold);
	color: var(--wsscd-color-dark);
}

.wsscd-upgrade-message {
	color: var(--wsscd-color-muted);
}

/* ==========================================================================
   Promotional accent badge
   Extends `.wsscd-badge` (shared/_badges.css) with a Pro-tier color override.
   ========================================================================== */

.wsscd-promotion-badge {
	display: inline-flex;
	align-items: center;
	padding: var(--wsscd-spacing-xxs) var(--wsscd-spacing-sm);
	background: var(--wsscd-color-pro);
	color: var(--wsscd-color-white);
	font-size: var(--wsscd-font-size-small);
	font-weight: var(--wsscd-font-weight-bold);
	letter-spacing: 0.3px;
	text-transform: uppercase;
	border-radius: var(--wsscd-dashboard-radius-sm);
}

/* ==========================================================================
   Action buttons
   ========================================================================== */

.wsscd-upgrade-banner-actions {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: var(--wsscd-gap-tight);
}

.wsscd-upgrade-btn {
	height: auto;
	padding: var(--wsscd-spacing-xs) var(--wsscd-spacing-md);
	line-height: 1.5;
}

.wsscd-upgrade-btn .wsscd-icon {
	transition: transform var(--wsscd-transition-fast) ease;
}

.wsscd-upgrade-btn:hover .wsscd-icon {
	transform: translateX(2px);
}

.wsscd-has-promotion .wsscd-upgrade-btn {
	box-shadow: var(--wsscd-shadow-md);
}

.wsscd-has-promotion .wsscd-upgrade-btn:hover,
.wsscd-has-promotion .wsscd-upgrade-btn:active {
	box-shadow: var(--wsscd-shadow-lg);
}

/* ==========================================================================
   Dismiss button
   ========================================================================== */

.wsscd-banner-dismiss {
	position: absolute;
	top: var(--wsscd-spacing-xs);
	right: var(--wsscd-spacing-xs);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wsscd-icon-large);
	height: var(--wsscd-icon-large);
	padding: var(--wsscd-spacing-xs);
	background: none;
	border: none;
	border-radius: var(--wsscd-dashboard-radius-sm);
	color: var(--wsscd-color-muted);
	cursor: pointer;
	transition: color var(--wsscd-transition-base) ease, background-color var(--wsscd-transition-base) ease;
}

.wsscd-banner-dismiss .wsscd-icon {
	width: var(--wsscd-icon-medium);
	height: var(--wsscd-icon-medium);
}

.wsscd-banner-dismiss:hover {
	color: var(--wsscd-color-danger);
	background-color: var(--wsscd-overlay-faint);
}

.wsscd-banner-dismiss:focus-visible {
	outline: 2px solid var(--wsscd-color-primary);
	outline-offset: -2px;
	color: var(--wsscd-color-primary);
}

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

@media screen and (max-width: 782px) {
	.wsscd-upgrade-banner-content {
		flex-direction: column;
		align-items: flex-start;
	}

	.wsscd-upgrade-banner-left,
	.wsscd-upgrade-banner-actions {
		width: 100%;
	}

	.wsscd-upgrade-btn {
		flex: 1;
	}
}

@media screen and (max-width: 600px) {
	.wsscd-upgrade-text {
		flex-direction: column;
		align-items: flex-start;
	}

	.wsscd-upgrade-banner-actions {
		flex-direction: column;
	}

	.wsscd-upgrade-btn {
		width: 100%;
		justify-content: center;
	}
}