/**
 * _Utilities
 *
 * @package    SmartCycleDiscounts
 * @subpackage SmartCycleDiscounts/resources/assets/css/shared/_utilities.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
 */

/* ==========================================================================
   Focus States - Consistent WordPress Admin Focus
   ========================================================================== */

/* Use with wsscd- prefixed elements to avoid WordPress conflicts */
.wsscd-focus,
.wsscd-focus-visible:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 0;
    box-shadow: var(--wsscd-shadow-focus);
}

/* Remove focus for mouse users, keep for keyboard */
.wsscd-focus-visible:focus:not(:focus-visible) {
    box-shadow: none;
}

/* ==========================================================================
   Transitions - Smooth State Changes
   ========================================================================== */

.wsscd-transition {
    transition: all var(--wsscd-transition-base) var(--wsscd-ease-in-out);
}

.wsscd-transition-fast {
    transition: all var(--wsscd-transition-fast) var(--wsscd-ease-in-out);
}

.wsscd-transition-slow {
    transition: all var(--wsscd-transition-slow) var(--wsscd-ease-in-out);
}

.wsscd-transition-colors {
    transition: color var(--wsscd-transition-fast) var(--wsscd-ease-in-out),
                background-color var(--wsscd-transition-fast) var(--wsscd-ease-in-out),
                border-color var(--wsscd-transition-fast) var(--wsscd-ease-in-out);
}

/* ==========================================================================
   Hover Effects - Consistent Interactions
   ========================================================================== */

/* Note: Don't combine hover transform utilities on the same element */
.wsscd-hover-lift:hover {
    box-shadow: var(--wsscd-hover-lift-shadow);
    transform: var(--wsscd-hover-lift-transform);
}

.wsscd-hover-scale:hover {
    transform: var(--wsscd-hover-scale-transform);
}

/* ==========================================================================
   Card Base - Consistent Card Styling
   ========================================================================== */

.wsscd-card-base {
    background: var(--wsscd-color-background);
    border: var(--wsscd-border-width) solid var(--wsscd-color-border);
    border-radius: var(--wsscd-radius-lg);
    padding: var(--wsscd-spacing-lg);
    box-shadow: var(--wsscd-shadow-sm);
}

/* Apply transition utilities separately for flexibility */
.wsscd-card-base:hover {
    border-color: var(--wsscd-color-border-dark);
    box-shadow: var(--wsscd-card-hover-shadow);
}

/* ==========================================================================
   Form Elements - Consistent Input Styling
   ========================================================================== */

.wsscd-input-base {
    width: 100%;
    height: var(--wsscd-input-height);
    padding: 0 var(--wsscd-spacing-sm);
    background: var(--wsscd-color-background);
    border: var(--wsscd-border-width) solid var(--wsscd-color-border);
    border-radius: var(--wsscd-radius-md);
    font-size: var(--wsscd-font-size-base);
    line-height: normal;
    color: var(--wsscd-color-text);
}

.wsscd-input-base:hover:not(:disabled) {
    border-color: var(--wsscd-color-border-dark);
}

/* Focus inherits from .wsscd-focus if both classes are used */
.wsscd-input-base:focus {
    border-color: var(--wsscd-color-primary);
    outline: 2px solid transparent;
}

.wsscd-input-base:disabled {
    background: var(--wsscd-color-surface);
    color: var(--wsscd-color-text-disabled);
    cursor: not-allowed;
}

/* ==========================================================================
   Status Messages - Consistent Alerts
   ========================================================================== */

.wsscd-status-base {
    padding: var(--wsscd-spacing-md);
    border: var(--wsscd-border-width) solid;
    border-left-width: var(--wsscd-border-width-accent);
    border-radius: var(--wsscd-radius-md);
    font-size: var(--wsscd-font-size-base);
    line-height: var(--wsscd-line-height-base);
}

.wsscd-status-success {
    background: var(--wsscd-color-success-bg);
    border-color: var(--wsscd-color-success);
    color: var(--wsscd-color-text);
}

.wsscd-status-error {
    background: var(--wsscd-color-error-bg);
    border-color: var(--wsscd-color-danger);
    color: var(--wsscd-color-text);
}

.wsscd-status-warning {
    background: var(--wsscd-color-warning-bg);
    border-color: var(--wsscd-color-warning);
    color: var(--wsscd-color-text);
}

.wsscd-status-info {
    background: var(--wsscd-color-primary-bg);
    border-color: var(--wsscd-color-primary);
    color: var(--wsscd-color-text);
}

/* ==========================================================================
   Loading State Utilities
   ========================================================================== */

/**
 * Base loading state - disables interaction and reduces opacity.
 * Apply to any container to indicate loading state.
 * Context-specific overrides can adjust styling as needed.
 */
.wsscd-loading {
	position: relative;
	pointer-events: none;
	opacity: 0.6;
	transition: opacity var(--wsscd-transition-base) var(--wsscd-ease-out);
}

/* ==========================================================================
   Spacing Utilities
   ========================================================================== */

/* Margin */
.wsscd-mt-0 { margin-top: 0; }
.wsscd-mb-0 { margin-bottom: 0; }
.wsscd-mt-xs { margin-top: var(--wsscd-spacing-xs); }
.wsscd-mt-sm { margin-top: var(--wsscd-spacing-sm); }
.wsscd-mt-md { margin-top: var(--wsscd-spacing-md); }
.wsscd-mt-lg { margin-top: var(--wsscd-spacing-lg); }
.wsscd-mb-xs { margin-bottom: var(--wsscd-spacing-xs); }
.wsscd-mb-sm { margin-bottom: var(--wsscd-spacing-sm); }
.wsscd-mb-md { margin-bottom: var(--wsscd-spacing-md); }
.wsscd-mb-lg { margin-bottom: var(--wsscd-spacing-lg); }

/* Padding */
.wsscd-p-0 { padding: 0; }
.wsscd-p-xs { padding: var(--wsscd-spacing-xs); }
.wsscd-p-sm { padding: var(--wsscd-spacing-sm); }
.wsscd-p-md { padding: var(--wsscd-spacing-md); }
.wsscd-p-lg { padding: var(--wsscd-spacing-lg); }

/* ==========================================================================
   Display Utilities
   ========================================================================== */

.wsscd-hidden { display: none !important; }
.wsscd-block { display: block; }
.wsscd-inline-block { display: inline-block; }
.wsscd-flex { display: flex; }
.wsscd-inline-flex { display: inline-flex; }

/* Disabled state - use for non-form elements or visual overlay */
/* For form elements, prefer native :disabled pseudo-selector */
.wsscd-disabled {
    pointer-events: none;
    position: relative;
    opacity: 0.5;
    transition: var(--wsscd-disabled-transition);
}

.wsscd-disabled::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        var(--wsscd-overlay-faint) 10px,
        var(--wsscd-overlay-faint) 20px
    );
    border-radius: inherit;
    z-index: var(--wsscd-z-dropdown);
}

/* Removed wsscd-disabled-notice - not used anywhere */

/* Flex utilities */
.wsscd-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.wsscd-flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wsscd-flex-column {
    display: flex;
    flex-direction: column;
}

.wsscd-gap-xs { gap: var(--wsscd-spacing-xs); }
.wsscd-gap-sm { gap: var(--wsscd-spacing-sm); }
.wsscd-gap-md { gap: var(--wsscd-spacing-md); }
.wsscd-gap-lg { gap: var(--wsscd-spacing-lg); }

/* ==========================================================================
   Text Utilities
   ========================================================================== */

.wsscd-text-center { text-align: center; }
.wsscd-text-left { text-align: left; }
.wsscd-text-right { text-align: right; }

.wsscd-text-small { font-size: var(--wsscd-font-size-small); }
.wsscd-text-base { font-size: var(--wsscd-font-size-base); }
.wsscd-text-large { font-size: var(--wsscd-font-size-large); }

.wsscd-text-muted { color: var(--wsscd-color-text-muted); }
.wsscd-text-primary { color: var(--wsscd-color-primary); }
.wsscd-text-success { color: var(--wsscd-color-success); }
.wsscd-text-error { color: var(--wsscd-color-danger); }
.wsscd-text-warning { color: var(--wsscd-color-warning); }

.wsscd-font-medium { font-weight: var(--wsscd-font-weight-medium); }
.wsscd-font-semibold { font-weight: var(--wsscd-font-weight-semibold); }
.wsscd-font-bold { font-weight: var(--wsscd-font-weight-bold); }

/* ==========================================================================
   Border Utilities
   ========================================================================== */

.wsscd-border { border: var(--wsscd-border-width) solid var(--wsscd-color-border); }
.wsscd-border-top { border-top: var(--wsscd-border-width) solid var(--wsscd-color-border); }
.wsscd-border-bottom { border-bottom: var(--wsscd-border-width) solid var(--wsscd-color-border); }
.wsscd-border-none { border: none; }

.wsscd-rounded-sm { border-radius: var(--wsscd-radius-sm); }
.wsscd-rounded { border-radius: var(--wsscd-radius-md); }
.wsscd-rounded-lg { border-radius: var(--wsscd-radius-lg); }
.wsscd-rounded-full { border-radius: var(--wsscd-radius-full); }

/* ==========================================================================
   Accessibility Utilities
   ========================================================================== */

/* Screen reader only - standard accessible hiding pattern */
.wsscd-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* Focus within */
.wsscd-focus-within:focus-within {
	box-shadow: var(--wsscd-focus-within-shadow);
}

/* ==========================================================================
   Common Pattern Utilities
   ========================================================================== */

/* List reset - removes default list styling */
.wsscd-list-reset {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Position utilities */
.wsscd-relative {
	position: relative;
}

.wsscd-absolute {
	position: absolute;
}

/* Width utilities */
.wsscd-full-width {
	width: 100%;
}

/* Shadow utilities */
.wsscd-shadow-none {
	box-shadow: none !important;
}

/* ==========================================================================
   Animation Utilities
   ========================================================================== */

/* Spin animation - for loading spinners */
@keyframes wsscd-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* Fade in animation */
@keyframes wsscd-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Slide up animation - enter from bottom */
@keyframes wsscd-slide-up {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Slide down animation - enter from top */
@keyframes wsscd-slide-down {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Slide out up animation - exit moving up */
@keyframes wsscd-slide-out-up {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(-10px);
	}
}

/* Slide in from left animation */
@keyframes wsscd-slide-in-left {
	from {
		opacity: 0;
		transform: translateX(-20px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Modal slide in animation */
@keyframes wsscd-modal-slide-in {
	from {
		opacity: 0;
		transform: translateY(-20px) scale(0.95);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* Error pulse animation - for error states */
@keyframes wsscd-error-pulse {
	0%, 100% {
		box-shadow: 0 0 0 0 var(--wsscd-color-danger-alpha-30);
	}
	50% {
		box-shadow: 0 0 0 8px transparent;
	}
}

/* Highlight fade animation - for temporary highlights */
@keyframes wsscd-highlight-fade {
	0% {
		background-color: var(--wsscd-color-blue-alpha-15);
	}
	100% {
		background-color: transparent;
	}
}

/* Checkmark pop animation - success states */
@keyframes wsscd-checkmark-pop {
	0% {
		transform: scale(0);
		opacity: 0;
	}
	50% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

/* Error shake animation - error states */
@keyframes wsscd-error-shake {
	0%, 100% {
		transform: translateX(0);
	}
	10%, 30%, 50%, 70%, 90% {
		transform: translateX(-8px);
	}
	20%, 40%, 60%, 80% {
		transform: translateX(8px);
	}
}

/* Shake animation - for field validation errors (simpler version) */
@keyframes wsscd-shake {
	0%, 100% {
		transform: translateX(0);
	}
	10%, 30%, 50%, 70%, 90% {
		transform: translateX(-4px);
	}
	20%, 40%, 60%, 80% {
		transform: translateX(4px);
	}
}

/* Success burst animation - completion states */
@keyframes wsscd-success-burst {
	0% {
		transform: scale(0.8);
		opacity: 0;
	}
	50% {
		transform: scale(1.1);
		opacity: 1;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

/* Highlight pulse animation - PRO features */
@keyframes wsscd-highlight-pulse {
	0%, 100% {
		box-shadow: 0 0 0 0 var(--wsscd-color-primary-alpha-30);
	}
	50% {
		box-shadow: 0 0 0 6px transparent;
	}
}

/* Animation utility classes */
.wsscd-animate-fade-in {
	animation: var(--wsscd-animation-fade-in);
}

.wsscd-animate-slide-up {
	animation: var(--wsscd-animation-slide-up);
}

.wsscd-animate-slide-down {
	animation: var(--wsscd-animation-slide-down);
}

/* ==========================================================================
   Transition Utilities
   ========================================================================== */

/* Theme color transition utilities moved to theme service */

/* ==========================================================================
   Background Color Utilities
   ========================================================================== */

.wsscd-bg-white { background-color: var(--wsscd-color-white); }
.wsscd-bg-background { background-color: var(--wsscd-color-background); }
.wsscd-bg-surface { background-color: var(--wsscd-color-surface); }
.wsscd-bg-surface-light { background-color: var(--wsscd-color-surface-light); }
.wsscd-bg-primary { background-color: var(--wsscd-color-primary); }
.wsscd-bg-primary-light { background-color: var(--wsscd-color-primary-bg); }
.wsscd-bg-success { background-color: var(--wsscd-color-success-bg); }
.wsscd-bg-warning { background-color: var(--wsscd-color-warning-bg); }
.wsscd-bg-danger { background-color: var(--wsscd-color-error-bg); }
.wsscd-bg-info { background-color: var(--wsscd-color-info-bg); }

/* ==========================================================================
   Border Color Utilities  
   ========================================================================== */

.wsscd-border-light { border-color: var(--wsscd-color-border-light); }
.wsscd-border-dark { border-color: var(--wsscd-color-border-dark); }
.wsscd-border-primary { border-color: var(--wsscd-color-primary); }
.wsscd-border-success { border-color: var(--wsscd-color-success); }
.wsscd-border-warning { border-color: var(--wsscd-color-warning); }
.wsscd-border-danger { border-color: var(--wsscd-color-danger); }

.wsscd-border-left-primary { border-left: var(--wsscd-border-width) solid var(--wsscd-color-primary); }
.wsscd-border-left-success { border-left: var(--wsscd-border-width) solid var(--wsscd-color-success); }
.wsscd-border-left-warning { border-left: var(--wsscd-border-width) solid var(--wsscd-color-warning); }
.wsscd-border-left-danger { border-left: var(--wsscd-border-width) solid var(--wsscd-color-danger); }
.wsscd-border-left-info { border-left: var(--wsscd-border-width) solid var(--wsscd-color-info); }

.wsscd-border-left-4 { border-left-width: var(--wsscd-border-width-accent); }

/* Alert components implemented in admin.css via notification system */

/* Card components moved to _components.css */

/* Badge components moved to _badges.css */

/* Layout components - removed, use semantic HTML instead */

/* ==========================================================================
   Form Enhancement Utilities
   ========================================================================== */

.wsscd-form-group {
    margin-bottom: var(--wsscd-spacing-lg);
}

/* Toggle switch styles moved to shared/_forms.css to avoid duplication */

/* Chart components - removed, use specific chart styles */

/* Email templates - removed, use inline styles for emails */

/* WordPress handles dashicon alignment - removed custom fixes as per user feedback */

/* ==========================================================================
   Icon Container Utilities - Flexbox Centering for Icons
   ========================================================================== */

/* Base icon container - centers content */
.wsscd-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Circular variant */
.wsscd-icon-container--circular {
    border-radius: var(--wsscd-radius-full);
}

/* Size variants */
.wsscd-icon-container--xs {
    width: 16px;
    height: 16px;
}

.wsscd-icon-container--sm {
    width: 20px;
    height: 20px;
}

.wsscd-icon-container--md {
    width: 24px;
    height: 24px;
}

.wsscd-icon-container--lg {
    width: 32px;
    height: 32px;
}

.wsscd-icon-container--xl {
    width: 40px;
    height: 40px;
}

.wsscd-icon-container--xxl {
    width: 48px;
    height: 48px;
}

/* ==========================================================================
   SVG Icon Base Styles & Sizing Utilities
   ========================================================================== */

/* Base SVG Icon Styles - Prevent Flash/Jump on Load */
/* Critical: !important prevents flash during page load before styles apply */
.wsscd-icon {
    display: inline-block !important;
    vertical-align: middle !important;
    /* Size set by Icon_Helper inline styles (default 20px) - don't override */
    flex-shrink: 0 !important;
    fill: currentColor;
    /* Smooth rotation for collapse/expand animations */
    transition: transform var(--wsscd-transition-base) var(--wsscd-ease-in-out);
    /* Fix alignment in flexbox containers */
    align-self: center;
}

/* Prevent icon size changes during load */
button .wsscd-icon,
a .wsscd-icon,
.wsscd-button .wsscd-icon {
    margin: 0;
    padding: 0;
}

/* Small SVG icons (16px) - use Icon_Helper with size=>16 instead */
.wsscd-icon-sm,
.wsscd-icon--sm .wsscd-icon {
    width: var(--wsscd-icon-small);
    height: var(--wsscd-icon-small);
}

/* Medium SVG icons (20px) - default size */
.wsscd-icon-md,
.wsscd-icon--md .wsscd-icon {
    width: var(--wsscd-icon-medium);
    height: var(--wsscd-icon-medium);
}

/* Large SVG icons (24px) */
.wsscd-icon-lg,
.wsscd-icon--lg .wsscd-icon {
    width: var(--wsscd-icon-large);
    height: var(--wsscd-icon-large);
}

/* Spinner Animation - uses @keyframes wsscd-spin defined in Animation Utilities section */
.wsscd-icon-spin {
    animation: wsscd-spin 1s linear infinite;
}