/**
 * Fast Checkout V3 - Frontend Styles
 *
 * @package FastCheckoutV3
 * @version 0.1.0
 */

/* ==========================================================================
   CSS Custom Properties (Variables)
   ========================================================================== */

:root {
	/* Primary colors */
	--fcv3-primary: #2271b1;
	--fcv3-primary-hover: #135e96;
	--fcv3-primary-active: #0a4b78;

	/* Secondary colors */
	--fcv3-secondary: #50575e;
	--fcv3-secondary-hover: #3c434a;

	/* Status colors */
	--fcv3-success: #00a32a;
	--fcv3-error: #d63638;
	--fcv3-warning: #dba617;
	--fcv3-info: #72aee6;

	/* Neutral colors */
	--fcv3-white: #ffffff;
	--fcv3-black: #1d2327;
	--fcv3-gray-100: #f6f7f7;
	--fcv3-gray-200: #dcdcde;
	--fcv3-gray-300: #c3c4c7;
	--fcv3-gray-400: #8c8f94;
	--fcv3-gray-500: #646970;
	--fcv3-gray-600: #50575e;
	--fcv3-gray-700: #3c434a;
	--fcv3-gray-800: #2c3338;
	--fcv3-gray-900: #1d2327;

	/* Typography */
	--fcv3-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--fcv3-font-size-base: 14px;
	--fcv3-font-size-sm: 12px;
	--fcv3-font-size-lg: 16px;
	--fcv3-font-size-xl: 18px;
	--fcv3-line-height: 1.5;

	/* Spacing */
	--fcv3-spacing-xs: 4px;
	--fcv3-spacing-sm: 8px;
	--fcv3-spacing-md: 16px;
	--fcv3-spacing-lg: 24px;
	--fcv3-spacing-xl: 32px;

	/* Border radius */
	--fcv3-radius-sm: 2px;
	--fcv3-radius-md: 4px;
	--fcv3-radius-lg: 8px;
	--fcv3-radius-full: 9999px;

	/* Shadows */
	--fcv3-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--fcv3-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
	--fcv3-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

	/* Transitions */
	--fcv3-transition-fast: 150ms ease;
	--fcv3-transition-normal: 250ms ease;
	--fcv3-transition-slow: 350ms ease;

	/* Z-index layers */
	--fcv3-z-dropdown: 100;
	--fcv3-z-modal: 1000;
	--fcv3-z-overlay: 900;
	--fcv3-z-tooltip: 1100;
}

/* ==========================================================================
   Base Container Styles (Placeholder)
   ========================================================================== */

.fcv3-container {
	box-sizing: border-box;
	font-family: var(--fcv3-font-family);
	font-size: var(--fcv3-font-size-base);
	line-height: var(--fcv3-line-height);
	color: var(--fcv3-gray-900);
}

.fcv3-container *,
.fcv3-container *::before,
.fcv3-container *::after {
	box-sizing: inherit;
}

/* ==========================================================================
   Loading States (Placeholder)
   ========================================================================== */

.fcv3-loading {
	position: relative;
	pointer-events: none;
	opacity: 0.7;
}

.fcv3-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	margin-left: -10px;
	border: 2px solid var(--fcv3-gray-300);
	border-top-color: var(--fcv3-primary);
	border-radius: 50%;
	animation: fcv3-spin 0.8s linear infinite;
}

@keyframes fcv3-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ==========================================================================
   Hidden/Visibility Utilities
   ========================================================================== */

.fcv3-hidden {
	display: none !important;
}

.fcv3-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ==========================================================================
   Screen Reader Only
   ========================================================================== */

.fcv3-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;
}