/**
 * Draft Conflict Modal Styles
 *
 * Styles for the modal shown when a user attempts to create a new campaign
 * while an unsaved draft session already exists.
 *
 * @package    SmartCycleDiscounts
 * @subpackage SmartCycleDiscounts/resources/assets/css/admin/draft-conflict-modal.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
 */

/* ==========================================================================
   Draft Conflict Shell
   ========================================================================== */

#wsscd-draft-conflict-modal.wsscd-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: var(--wsscd-z-modal);
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
}

#wsscd-draft-conflict-modal.wsscd-modal--visible {
	display: flex;
}

#wsscd-draft-conflict-modal .wsscd-modal__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--wsscd-overlay-heavy);
	animation: wsscd-modal-overlay-fade-in var(--wsscd-transition-slow) ease-out;
}

#wsscd-draft-conflict-modal .wsscd-modal__container {
	position: relative;
	z-index: 1;
	width: 90%;
	max-width: 540px;
	border-radius: var(--wsscd-radius-lg);
	background: var(--wsscd-color-white);
	box-shadow: var(--wsscd-shadow-xl);
	animation: wsscd-modal-slide-in var(--wsscd-transition-slow) var(--wsscd-ease-bounce);
}

#wsscd-draft-conflict-modal .wsscd-modal__content {
	padding: var(--wsscd-padding-spacious) var(--wsscd-padding-spacious) var(--wsscd-padding-section);
	text-align: center;
}

body.wsscd-modal-open {
	overflow: hidden;
}

/* ==========================================================================
   Close Button
   ========================================================================== */

#wsscd-draft-conflict-modal .wsscd-modal__close {
	display: flex;
	position: absolute;
	top: var(--wsscd-spacing-md);
	right: var(--wsscd-spacing-md);
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: var(--wsscd-spacing-xs);
	border: none;
	border-radius: var(--wsscd-radius-sm);
	background: none;
	color: var(--wsscd-color-text-muted);
	font-size: var(--wsscd-font-size-xl);
	cursor: pointer;
	transition: all var(--wsscd-transition-base) ease;
}

#wsscd-draft-conflict-modal .wsscd-modal__close:hover {
	background: var(--wsscd-overlay-subtle);
	color: var(--wsscd-color-text);
}

#wsscd-draft-conflict-modal .wsscd-modal__close:focus {
	outline: none;
	box-shadow: var(--wsscd-ring-focus);
}

#wsscd-draft-conflict-modal .wsscd-modal__close svg {
	width: var(--wsscd-icon-small);
	height: var(--wsscd-icon-small);
}

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

#wsscd-draft-conflict-modal .wsscd-modal__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--wsscd-spacing-lg);
	font-size: var(--wsscd-icon-display);
}

#wsscd-draft-conflict-modal .wsscd-modal__icon svg {
	width: var(--wsscd-icon-display);
	height: var(--wsscd-icon-display);
}

#wsscd-draft-conflict-modal .wsscd-modal__icon--warning {
	color: var(--wsscd-color-warning);
}

#wsscd-draft-conflict-modal .wsscd-modal__icon--error {
	color: var(--wsscd-color-danger);
}

#wsscd-draft-conflict-modal .wsscd-modal__icon--success {
	color: var(--wsscd-color-success);
}

#wsscd-draft-conflict-modal .wsscd-modal__icon--info,
#wsscd-draft-conflict-modal.wsscd-modal--info .wsscd-modal__icon {
	color: var(--wsscd-color-secondary);
}

#wsscd-draft-conflict-modal .wsscd-modal__title {
	margin: 0 0 var(--wsscd-spacing-base);
	color: var(--wsscd-color-text);
	font-size: var(--wsscd-font-size-xxl);
	font-weight: var(--wsscd-font-weight-semibold);
	line-height: var(--wsscd-line-height-tight);
}

#wsscd-draft-conflict-modal .wsscd-modal__message {
	margin-bottom: var(--wsscd-spacing-xl);
	color: var(--wsscd-color-text-muted);
	font-size: var(--wsscd-font-size-base);
	line-height: var(--wsscd-line-height-relaxed);
}

#wsscd-draft-conflict-modal .wsscd-modal__message p {
	margin: var(--wsscd-spacing-sm) 0;
}

#wsscd-draft-conflict-modal .wsscd-modal__message p:first-child {
	margin-top: 0;
}

#wsscd-draft-conflict-modal .wsscd-modal__message p:last-child {
	margin-bottom: 0;
}

#wsscd-draft-conflict-modal .wsscd-modal__message strong {
	color: var(--wsscd-color-text);
	font-weight: var(--wsscd-font-weight-semibold);
}

/* ==========================================================================
   Draft Metadata
   ========================================================================== */

#wsscd-draft-conflict-modal .wsscd-modal__draft-meta {
	display: flex;
	flex-direction: column;
	gap: var(--wsscd-spacing-xs);
	margin-top: var(--wsscd-spacing-md);
	padding: var(--wsscd-padding-compact);
	border: var(--wsscd-border-width) solid var(--wsscd-color-border-light);
	border-radius: var(--wsscd-radius-sm);
	background: var(--wsscd-overlay-faint);
}

#wsscd-draft-conflict-modal .wsscd-modal__draft-meta-item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wsscd-spacing-xs);
	color: var(--wsscd-color-text-muted);
	font-size: var(--wsscd-font-size-small);
}

#wsscd-draft-conflict-modal .wsscd-modal__draft-meta-item svg {
	width: var(--wsscd-icon-small);
	height: var(--wsscd-icon-small);
	flex-shrink: 0;
}

#wsscd-draft-conflict-modal .wsscd-modal__expiration {
	display: inline-flex;
	align-items: center;
	gap: var(--wsscd-spacing-xxs);
	padding: var(--wsscd-spacing-xxs) var(--wsscd-spacing-sm);
	border: var(--wsscd-border-width) solid transparent;
	border-radius: var(--wsscd-radius-sm);
	font-size: var(--wsscd-font-size-small);
	font-weight: var(--wsscd-font-weight-medium);
}

#wsscd-draft-conflict-modal .wsscd-modal__expiration.wsscd-expiration-normal {
	border-color: var(--wsscd-overlay-border);
	background: var(--wsscd-overlay-faint);
	color: var(--wsscd-color-text-muted);
}

#wsscd-draft-conflict-modal .wsscd-modal__expiration.wsscd-expiration-warning {
	border-color: var(--wsscd-color-warning-alpha-25);
	background: var(--wsscd-alert-warning-bg);
	color: var(--wsscd-color-warning-dark);
}

#wsscd-draft-conflict-modal .wsscd-modal__expiration.wsscd-expiration-urgent {
	border-color: var(--wsscd-color-danger-alpha-30);
	background: var(--wsscd-alert-danger-bg);
	color: var(--wsscd-color-danger-dark);
	font-weight: var(--wsscd-font-weight-semibold);
}

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

#wsscd-draft-conflict-modal .wsscd-modal__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wsscd-spacing-sm);
}

#wsscd-draft-conflict-modal .wsscd-modal__actions .wsscd-button {
	min-height: 36px;
	margin: 0;
	padding: var(--wsscd-spacing-sm) var(--wsscd-padding-large);
	border-radius: var(--wsscd-radius-sm);
}

#wsscd-draft-conflict-modal .wsscd-modal__actions .wsscd-button--primary {
	box-shadow: var(--wsscd-shadow-primary);
}

#wsscd-draft-conflict-modal .wsscd-modal__actions .wsscd-button--primary:hover,
#wsscd-draft-conflict-modal .wsscd-modal__actions .wsscd-button--primary:active {
	box-shadow: 0 4px 12px var(--wsscd-color-primary-alpha-25);
}

#wsscd-draft-conflict-modal .wsscd-modal__actions .wsscd-button--ghost-danger {
	--wsscd-button-bg: var(--wsscd-color-white);
	--wsscd-button-border: var(--wsscd-color-danger-alpha-30);
	--wsscd-button-color: var(--wsscd-color-danger-dark);
	--wsscd-button-hover-bg: var(--wsscd-color-danger-dark);
	--wsscd-button-hover-border: var(--wsscd-color-danger-dark);
	--wsscd-button-hover-color: var(--wsscd-color-white);
}

#wsscd-draft-conflict-modal .wsscd-modal__actions .wsscd-button--ghost-danger:hover,
#wsscd-draft-conflict-modal .wsscd-modal__actions .wsscd-button--ghost-danger:active {
	box-shadow: 0 4px 12px var(--wsscd-color-danger-alpha-25);
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes wsscd-modal-overlay-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

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

@media screen and (max-width: 600px) {
	#wsscd-draft-conflict-modal .wsscd-modal__container {
		width: 95%;
		margin: var(--wsscd-spacing-lg);
	}

	#wsscd-draft-conflict-modal .wsscd-modal__content {
		padding: var(--wsscd-padding-section) var(--wsscd-padding-large);
	}

	#wsscd-draft-conflict-modal .wsscd-modal__actions {
		flex-direction: column;
	}

	#wsscd-draft-conflict-modal .wsscd-modal__actions .wsscd-button {
		width: 100%;
		margin: var(--wsscd-spacing-xs) 0;
	}

	#wsscd-draft-conflict-modal .wsscd-modal__title {
		font-size: var(--wsscd-font-size-xl);
	}

	#wsscd-draft-conflict-modal .wsscd-modal__icon svg {
		width: 40px;
		height: 40px;
	}
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	#wsscd-draft-conflict-modal .wsscd-modal__container,
	#wsscd-draft-conflict-modal .wsscd-modal__overlay {
		animation: none;
	}

	#wsscd-draft-conflict-modal .wsscd-modal__actions .wsscd-button {
		transition: none;
	}
}