/**
 * VYRO Core Component System
 *
 * Complete design-overhaul component library:
 * Buttons, Badges, Cards, Inputs, Dividers, Loading States, Shimmer Skeletons,
 * Express Payment Buttons, and Commerce UI primitives.
 *
 * @package Vyro
 * @since   1.0.0 (Design Overhaul)
 */

/* ==========================================================================
   1. BUTTON SYSTEM
   ========================================================================== */
.vyro-btn,
button.vyro-btn,
a.vyro-btn,
input[type="submit"].vyro-btn,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--vyro-space-8);
	padding: 0.875rem 1.75rem;
	font-family: var(--vyro-font-body);
	font-size: var(--vyro-text-sm);
	font-weight: var(--vyro-font-semibold);
	line-height: 1.2;
	letter-spacing: -0.01em;
	border-radius: var(--vyro-radius-control);
	border: 1.5px solid transparent;
	background-color: var(--vyro-color-accent);
	color: #FFFFFF;
	cursor: pointer;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	transition:
		background-color var(--vyro-motion-fast) var(--vyro-ease-standard),
		border-color var(--vyro-motion-fast) var(--vyro-ease-standard),
		color var(--vyro-motion-fast) var(--vyro-ease-standard),
		box-shadow var(--vyro-motion-fast) var(--vyro-ease-standard),
		transform var(--vyro-motion-fast) var(--vyro-ease-spring);
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.vyro-btn:hover {
	transform: var(--vyro-hover-lift-sm);
	box-shadow: var(--vyro-shadow-card-lift);
}

.vyro-btn:active {
	transform: var(--vyro-press-scale);
	box-shadow: none;
}

.vyro-btn:focus-visible {
	outline: 2px solid var(--vyro-color-border-focus);
	outline-offset: 3px;
}

.vyro-btn:disabled,
.vyro-btn[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

/* Arrow icon animation */
.vyro-btn__arrow {
	display: inline-flex;
	align-items: center;
	transition: transform var(--vyro-motion-fast) var(--vyro-ease-spring);
}
.vyro-btn:hover .vyro-btn__arrow { transform: translateX(3px); }

/* --- Button Variants --- */
.vyro-btn--primary {
	background-color: var(--vyro-color-accent);
	color: #FFFFFF;
	box-shadow: var(--vyro-shadow-accent-sm);
}
.vyro-btn--primary:hover {
	background-color: var(--vyro-color-accent-hover);
	box-shadow: var(--vyro-shadow-accent-md);
}

.vyro-btn--dark {
	background-color: var(--vyro-color-near-black);
	color: #FFFFFF;
	border-color: transparent;
	box-shadow: var(--vyro-shadow-sm);
}
.vyro-btn--dark:hover {
	background-color: var(--vyro-color-dark-gray);
	color: #FFFFFF;
	box-shadow: var(--vyro-shadow-md);
}

.vyro-btn--secondary {
	background-color: var(--vyro-color-surface-elevated);
	border-color: var(--vyro-color-border);
	color: var(--vyro-color-text);
	box-shadow: var(--vyro-shadow-xs);
}
.vyro-btn--secondary:hover {
	border-color: var(--vyro-color-accent);
	color: var(--vyro-color-accent);
	box-shadow: var(--vyro-shadow-sm);
}

.vyro-btn--tertiary {
	background-color: transparent;
	border-color: var(--vyro-color-border);
	color: var(--vyro-color-text-secondary);
}
.vyro-btn--tertiary:hover {
	border-color: var(--vyro-color-border-strong);
	color: var(--vyro-color-text);
}

.vyro-btn--ghost {
	background-color: transparent;
	border-color: transparent;
	color: var(--vyro-color-accent);
}
.vyro-btn--ghost:hover {
	background-color: var(--vyro-color-accent-soft);
	color: var(--vyro-color-accent-hover);
}

.vyro-btn--outline-white {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.35);
	color: #FFFFFF;
}
.vyro-btn--outline-white:hover {
	background-color: rgba(255, 255, 255, 0.10);
	border-color: rgba(255, 255, 255, 0.60);
	color: #FFFFFF;
}

/* --- Sizes --- */
.vyro-btn--xs { padding: 0.4375rem 0.875rem; font-size: var(--vyro-text-3xs); border-radius: var(--vyro-radius-sm); }
.vyro-btn--sm { padding: 0.625rem 1.25rem; font-size: var(--vyro-text-xs); }
.vyro-btn--lg { padding: 1rem 2rem; font-size: var(--vyro-text-base); }
.vyro-btn--xl { padding: 1.125rem 2.5rem; font-size: var(--vyro-text-lg); border-radius: var(--vyro-radius-lg); }

/* Pill shape */
.vyro-btn--pill { border-radius: var(--vyro-radius-pill); }

/* Icon button */
.vyro-btn--icon {
	padding: 0;
	width: 44px;
	height: 44px;
	border-radius: var(--vyro-radius-md);
	flex-shrink: 0;
}
.vyro-btn--icon-sm { width: 36px; height: 36px; border-radius: var(--vyro-radius-sm); }
.vyro-btn--icon-lg { width: 52px; height: 52px; border-radius: var(--vyro-radius-lg); }

/* Full width */
.vyro-btn--full { width: 100%; }

/* --- Loading state --- */
.vyro-btn.is-loading {
	pointer-events: none;
	color: transparent;
}
.vyro-btn.is-loading::after {
	content: '';
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin: auto;
	border: 2px solid rgba(255, 255, 255, 0.30);
	border-top-color: #FFFFFF;
	border-radius: 50%;
	animation: vyro-spin 0.6s linear infinite;
}

/* --- Success state --- */
.vyro-btn.is-success {
	background-color: var(--vyro-color-success);
	border-color: var(--vyro-color-success);
	pointer-events: none;
}

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

/* --- Express Payment Buttons --- */
.vyro-express-checkout {
	display: flex;
	flex-direction: column;
	gap: var(--vyro-space-12);
}

.vyro-express-checkout__row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: var(--vyro-space-8);
}

.vyro-express-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--vyro-space-8);
	height: 48px;
	border-radius: var(--vyro-radius-md);
	border: 1.5px solid var(--vyro-color-border);
	font-size: var(--vyro-text-sm);
	font-weight: var(--vyro-font-semibold);
	cursor: pointer;
	transition:
		transform var(--vyro-motion-fast) var(--vyro-ease-spring),
		box-shadow var(--vyro-motion-fast) var(--vyro-ease-standard),
		opacity var(--vyro-motion-fast);
	width: 100%;
}
.vyro-express-btn:hover {
	transform: var(--vyro-hover-lift-sm);
	box-shadow: var(--vyro-shadow-sm);
}
.vyro-express-btn:active { transform: var(--vyro-press-scale); }

.vyro-express-btn--apple {
	background-color: #000000;
	color: #FFFFFF;
	border-color: #000000;
}
.vyro-express-btn--paypal {
	background-color: #0070BA;
	color: #FFFFFF;
	border-color: #0070BA;
}
.vyro-express-btn--googlepay {
	background-color: #FFFFFF;
	color: #202124;
	border-color: var(--vyro-color-border-strong);
}

.vyro-express-btn svg { flex-shrink: 0; }

.vyro-express-checkout__divider {
	display: flex;
	align-items: center;
	gap: var(--vyro-space-16);
	color: var(--vyro-color-text-muted);
	font-size: var(--vyro-text-3xs);
	font-weight: var(--vyro-font-semibold);
	letter-spacing: var(--vyro-tracking-wider);
	text-transform: uppercase;
}
.vyro-express-checkout__divider::before,
.vyro-express-checkout__divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background-color: var(--vyro-color-border);
}

/* ==========================================================================
   2. BADGE SYSTEM
   ========================================================================== */
.vyro-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--vyro-space-6);
	padding: 0.3125rem 0.75rem;
	font-size: var(--vyro-text-3xs);
	font-weight: var(--vyro-font-semibold);
	letter-spacing: var(--vyro-tracking-wide);
	text-transform: uppercase;
	border-radius: var(--vyro-radius-pill);
	white-space: nowrap;
	line-height: 1.2;
}

/* Dot indicator */
.vyro-badge__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: currentColor;
	opacity: 0.8;
	flex-shrink: 0;
}
.vyro-badge__dot--pulse {
	animation: vyro-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes vyro-pulse {
	0%, 100% { opacity: 0.8; }
	50% { opacity: 0.3; }
}

/* Badge variants */
.vyro-badge--accent {
	background-color: var(--vyro-color-accent-soft);
	color: var(--vyro-color-violet-700);
	border: 1px solid var(--vyro-color-violet-200);
}
.vyro-badge--dark {
	background-color: var(--vyro-color-near-black);
	color: #FFFFFF;
}
.vyro-badge--neutral {
	background-color: var(--vyro-color-surface-soft);
	color: var(--vyro-color-text-secondary);
	border: 1px solid var(--vyro-color-border);
}

/* Commerce Badges */
.vyro-badge--sale {
	background-color: var(--vyro-color-emerald-50);
	color: var(--vyro-color-emerald-700);
	border: 1px solid var(--vyro-color-emerald-100);
	font-weight: var(--vyro-font-bold);
}

.vyro-badge--bestseller {
	background: linear-gradient(135deg, var(--vyro-color-violet-700), var(--vyro-color-violet-500));
	color: #FFFFFF;
	box-shadow: var(--vyro-shadow-accent-sm);
}

.vyro-badge--new {
	background-color: var(--vyro-color-near-black);
	color: #FFFFFF;
	letter-spacing: var(--vyro-tracking-widest);
}

.vyro-badge--hot {
	background: linear-gradient(135deg, var(--vyro-color-rose-600), var(--vyro-color-rose-400));
	color: #FFFFFF;
}

.vyro-badge--limited {
	background-color: var(--vyro-color-amber-50);
	color: var(--vyro-color-amber-600);
	border: 1px solid var(--vyro-color-amber-100);
}

.vyro-badge--soldout {
	background-color: var(--vyro-color-light-surface);
	color: var(--vyro-color-text-muted);
	text-decoration: line-through;
}

/* Urgency Signal */
.vyro-urgency-signal {
	display: inline-flex;
	align-items: center;
	gap: var(--vyro-space-6);
	font-size: var(--vyro-text-xs);
	font-weight: var(--vyro-font-semibold);
}
.vyro-urgency-signal__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}
.vyro-urgency-signal--instock  .vyro-urgency-signal__dot { background-color: var(--vyro-color-emerald-500); box-shadow: 0 0 6px rgba(16, 185, 129, 0.50); }
.vyro-urgency-signal--low      .vyro-urgency-signal__dot { background-color: var(--vyro-color-amber-500); box-shadow: 0 0 6px rgba(245, 158, 11, 0.40); animation: vyro-pulse 1.5s ease-in-out infinite; }
.vyro-urgency-signal--outstock .vyro-urgency-signal__dot { background-color: var(--vyro-color-gray); }
.vyro-urgency-signal--instock  { color: var(--vyro-color-emerald-600); }
.vyro-urgency-signal--low      { color: var(--vyro-color-amber-600); }
.vyro-urgency-signal--outstock { color: var(--vyro-color-text-muted); }

/* ==========================================================================
   3. CARD SYSTEM
   ========================================================================== */
.vyro-card {
	background-color: var(--vyro-color-surface-elevated);
	border: 1px solid var(--vyro-color-border);
	border-radius: var(--vyro-radius-card);
	overflow: hidden;
	transition:
		transform var(--vyro-motion-normal) var(--vyro-ease-spring),
		box-shadow var(--vyro-motion-normal) var(--vyro-ease-standard),
		border-color var(--vyro-motion-fast) var(--vyro-ease-standard);
}

.vyro-card--hoverable:hover {
	transform: var(--vyro-hover-lift-lg);
	box-shadow: var(--vyro-shadow-card-lift);
	border-color: var(--vyro-color-border-strong);
}

.vyro-card--glass {
	background-color: var(--vyro-glass-background);
	backdrop-filter: blur(var(--vyro-glass-blur));
	-webkit-backdrop-filter: blur(var(--vyro-glass-blur));
	border-color: var(--vyro-glass-border);
}

.vyro-card--glass-dark {
	background-color: var(--vyro-glass-dark-background);
	backdrop-filter: blur(var(--vyro-glass-blur-lg));
	-webkit-backdrop-filter: blur(var(--vyro-glass-blur-lg));
	border-color: var(--vyro-glass-dark-border);
}

.vyro-card--elevated  { box-shadow: var(--vyro-shadow-md); }
.vyro-card--floating  { box-shadow: var(--vyro-shadow-xl); }

.vyro-card--spatial {
	background-color: var(--vyro-glass-dark-background);
	backdrop-filter: blur(var(--vyro-glass-blur));
	-webkit-backdrop-filter: blur(var(--vyro-glass-blur));
	border-color: var(--vyro-glass-dark-border);
	box-shadow: var(--vyro-elevation-spatial);
}

/* ==========================================================================
   4. FORM INPUTS & CONTROLS
   ========================================================================== */
.vyro-input,
.vyro-select,
.vyro-textarea {
	display: block;
	width: 100%;
	padding: 0.8125rem 1rem;
	font-family: var(--vyro-font-body);
	font-size: var(--vyro-text-sm);
	font-weight: var(--vyro-font-normal);
	line-height: var(--vyro-leading-normal);
	color: var(--vyro-color-text);
	background-color: var(--vyro-color-surface-elevated);
	border: 1.5px solid var(--vyro-color-border);
	border-radius: var(--vyro-radius-control);
	appearance: none;
	-webkit-appearance: none;
	transition:
		border-color var(--vyro-motion-fast) var(--vyro-ease-standard),
		box-shadow var(--vyro-motion-fast) var(--vyro-ease-standard),
		background-color var(--vyro-motion-fast);
}

.vyro-input::placeholder { color: var(--vyro-color-text-placeholder); }

.vyro-input:hover { border-color: var(--vyro-color-border-strong); }

.vyro-input:focus,
.vyro-input:focus-visible {
	outline: none;
	border-color: var(--vyro-color-border-focus);
	box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.20);
}

.vyro-input.is-error {
	border-color: var(--vyro-color-error);
	box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.15);
}

.vyro-input.is-success {
	border-color: var(--vyro-color-success);
	box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.vyro-label {
	display: block;
	font-size: var(--vyro-text-xs);
	font-weight: var(--vyro-font-semibold);
	color: var(--vyro-color-text-secondary);
	margin-bottom: var(--vyro-space-8);
	letter-spacing: 0.01em;
}

.vyro-field-error {
	display: flex;
	align-items: center;
	gap: var(--vyro-space-6);
	font-size: var(--vyro-text-3xs);
	color: var(--vyro-color-error-text);
	margin-top: var(--vyro-space-6);
}

/* ==========================================================================
   5. LOADING / SHIMMER SKELETON
   ========================================================================== */
@keyframes vyro-shimmer {
	0%   { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}

.vyro-skeleton {
	background: linear-gradient(
		90deg,
		var(--vyro-color-surface-soft) 25%,
		var(--vyro-color-muted) 50%,
		var(--vyro-color-surface-soft) 75%
	);
	background-size: 200% 100%;
	animation: vyro-shimmer 1.5s ease-in-out infinite;
	border-radius: var(--vyro-radius-sm);
}

.vyro-skeleton--text  { height: 16px; margin-bottom: var(--vyro-space-8); }
.vyro-skeleton--title { height: 24px; width: 70%; margin-bottom: var(--vyro-space-12); }
.vyro-skeleton--price { height: 32px; width: 40%; }
.vyro-skeleton--image { aspect-ratio: 1/1; border-radius: var(--vyro-radius-lg); }
.vyro-skeleton--btn   { height: 48px; border-radius: var(--vyro-radius-control); }

/* Dark shimmer for dark backgrounds */
.vyro-section--dark .vyro-skeleton {
	background: linear-gradient(
		90deg,
		rgba(255,255,255,0.04) 25%,
		rgba(255,255,255,0.08) 50%,
		rgba(255,255,255,0.04) 75%
	);
	background-size: 200% 100%;
}

/* ==========================================================================
   6. DIVIDER
   ========================================================================== */
.vyro-divider {
	border: none;
	border-top: 1px solid var(--vyro-color-border);
	margin: var(--vyro-space-32) 0;
}
.vyro-divider--subtle { border-color: var(--vyro-color-border-subtle); margin: var(--vyro-space-24) 0; }
.vyro-divider--strong { border-color: var(--vyro-color-border-strong); }

/* ==========================================================================
   7. AVATAR
   ========================================================================== */
.vyro-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	overflow: hidden;
	background-color: var(--vyro-color-surface-soft);
	flex-shrink: 0;
}
.vyro-avatar--sm  { width: 32px; height: 32px; font-size: var(--vyro-text-3xs); }
.vyro-avatar--md  { width: 40px; height: 40px; font-size: var(--vyro-text-xs); }
.vyro-avatar--lg  { width: 56px; height: 56px; font-size: var(--vyro-text-sm); }

/* ==========================================================================
   8. RATING STARS
   ========================================================================== */
.vyro-stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: var(--vyro-color-amber-400);
	font-size: var(--vyro-text-sm);
}

/* ==========================================================================
   9. LINK VARIANTS
   ========================================================================== */
.vyro-link {
	color: var(--vyro-color-accent);
	text-decoration: none;
	font-weight: var(--vyro-font-medium);
	transition: color var(--vyro-motion-fast);
}
.vyro-link:hover { color: var(--vyro-color-accent-hover); }

.vyro-link--arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--vyro-space-4);
}
.vyro-link--arrow svg { transition: transform var(--vyro-motion-fast) var(--vyro-ease-spring); }
.vyro-link--arrow:hover svg { transform: translateX(3px); }

/* ==========================================================================
   10. TOOLTIP
   ========================================================================== */
[data-vyro-tooltip] {
	position: relative;
}
[data-vyro-tooltip]::after {
	content: attr(data-vyro-tooltip);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--vyro-color-near-black);
	color: #FFFFFF;
	font-size: var(--vyro-text-3xs);
	padding: 0.375rem 0.625rem;
	border-radius: var(--vyro-radius-sm);
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--vyro-motion-fast);
	z-index: var(--vyro-z-popover);
}
[data-vyro-tooltip]:hover::after { opacity: 1; }

/* ==========================================================================
   11. MISC UTILITIES
   ========================================================================== */
.vyro-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.vyro-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vyro-truncate-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.vyro-truncate-3 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}