/**
 * Neumorphism base styles and utility classes.
 */

/* Design tokens */
:root {
	--nwui-radius-pill: 999px;
	--nwui-radius-circle: 50%;
	--nwui-radius-card: calc(var(--nwui-radius) * 1.5);
	--nwui-radius-input: calc(var(--nwui-radius) * 0.875);
	--nwui-radius-btn: var(--nwui-radius-pill);
	--nwui-radius-thumb: calc(var(--nwui-radius) * 0.875);
}

/* Reset for plugin scope */
.nwui-active {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.nwui-active .woocommerce,
.nwui-active .nwui-container {
	font-family: var(--nwui-font-body);
	font-size: var(--nwui-font-size);
	color: var(--nwui-text);
}

/* Neumorphism core */
.nwui-neu-box,
.nwui-neu-card {
	background: var(--nwui-card);
	border-radius: var(--nwui-radius-card);
	box-shadow: var(--nwui-shadow-raised);
	transition: box-shadow var(--nwui-speed) ease, transform var(--nwui-speed) ease;
}

.nwui-neu-inset {
	box-shadow: var(--nwui-shadow-inset);
}

.nwui-neu-pressed:active {
	box-shadow: var(--nwui-shadow-pressed);
}

/* Buttons */
.nwui-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	border: none;
	border-radius: var(--nwui-radius-btn);
	font-family: var(--nwui-font-button);
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: all var(--nwui-speed) ease;
	line-height: 1.4;
}

.nwui-btn-primary {
	background: var(--nwui-button);
	color: #fff;
	box-shadow: var(--nwui-shadow-raised);
}

.nwui-btn-primary:hover {
	background: var(--nwui-hover);
	transform: translateY(-2px);
	color: #fff;
}

.nwui-button-neumorphic .nwui-btn-primary {
	background: var(--nwui-card);
	color: var(--nwui-button);
	box-shadow: var(--nwui-shadow-raised);
}

.nwui-btn-secondary {
	background: var(--nwui-card);
	color: var(--nwui-text);
	box-shadow: var(--nwui-shadow-raised);
}

.nwui-btn-icon {
	padding: 12px;
	border-radius: 50%;
	background: var(--nwui-card);
	color: var(--nwui-icon);
	box-shadow: var(--nwui-shadow-raised);
}

/* Inputs */
.nwui-neu-input {
	width: 100%;
	padding: 12px 16px;
	border: none;
	border-radius: var(--nwui-radius-input);
	background: var(--nwui-card);
	box-shadow: var(--nwui-shadow-inset);
	font-family: var(--nwui-font-body);
	font-size: 0.95rem;
	color: var(--nwui-text);
	transition: box-shadow var(--nwui-speed) ease;
}

.nwui-neu-input:focus {
	outline: none;
	box-shadow: var(--nwui-shadow-inset);
}

/* Typography */
.nwui-page-title,
.nwui-box-title,
.nwui-carousel-title {
	font-family: var(--nwui-font-heading);
	font-weight: 600;
	color: var(--nwui-text);
}

.nwui-card-price,
.nwui-qv-price,
.woocommerce .price {
	font-family: var(--nwui-font-price);
	font-weight: 600;
}

/* Quantity */
.nwui-qty-wrapper {
	display: inline-flex;
	align-items: center;
	gap: 0;
	background: var(--nwui-card);
	border-radius: var(--nwui-radius-input);
	box-shadow: var(--nwui-shadow-inset);
	overflow: hidden;
}

.nwui-qty-btn {
	width: 40px;
	height: 40px;
	border: none;
	background: transparent;
	font-size: 1.2rem;
	color: var(--nwui-icon);
	cursor: pointer;
	transition: color var(--nwui-speed) ease;
}

.nwui-qty-btn:hover {
	color: var(--nwui-primary);
}

.nwui-qty-input {
	width: 50px;
	height: 40px;
	border: none;
	background: transparent;
	text-align: center;
	font-family: var(--nwui-font-price);
	font-weight: 600;
	-moz-appearance: textfield;
}

.nwui-qty-input::-webkit-outer-spin-button,
.nwui-qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Rating stars */
.nwui-rating {
	display: flex;
	align-items: center;
	gap: 2px;
}

.nwui-star {
	font-size: 0.85rem;
	line-height: 1;
}

.nwui-star.filled {
	color: #FDCB6E;
}

.nwui-star.empty {
	color: #DFE6E9;
}

.nwui-review-count {
	font-size: 0.75rem;
	color: var(--nwui-text-muted);
	margin-left: 4px;
}

/* Badges */
.nwui-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 20px;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.nwui-sale-badge {
	background: var(--nwui-primary);
	color: #fff;
}

.nwui-discount-badge {
	background: #E17055;
	color: #fff;
}

/* Stock */
.nwui-stock {
	font-size: 0.75rem;
	font-weight: 600;
}

.nwui-in-stock {
	color: var(--nwui-primary);
}

.nwui-out-of-stock {
	color: #D63031;
}

/* Spinner */
.nwui-spinner {
	width: 40px;
	height: 40px;
	border: 3px solid var(--nwui-card);
	border-top-color: var(--nwui-primary);
	border-radius: 50%;
	animation: nwui-spin 0.8s linear infinite;
}

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

/* Container */
.nwui-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Empty state */
.nwui-empty-state {
	text-align: center;
	padding: 40px 20px;
}

/* Toast notification */
.nwui-toast {
	position: fixed;
	bottom: 90px;
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	background: var(--nwui-text);
	color: #fff;
	padding: 12px 24px;
	border-radius: 30px;
	font-size: 0.9rem;
	z-index: 99999;
	opacity: 0;
	transition: all var(--nwui-speed) ease;
	pointer-events: none;
}

.nwui-toast.show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.nwui-has-mobile-nav {
	padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 769px) {
	.nwui-has-mobile-nav {
		padding-bottom: 0;
	}
}

/* Mobile typography — compact professional product text */
@media (max-width: 768px) {
	.nwui-active .woocommerce,
	.nwui-active .nwui-container {
		font-size: max(13px, calc(var(--nwui-font-size, 16px) * 0.875));
		line-height: 1.45;
	}

	.nwui-star {
		font-size: 0.68rem;
	}

	.nwui-review-count {
		font-size: 0.62rem;
		margin-left: 3px;
	}

	.nwui-rating {
		flex-wrap: nowrap;
		min-width: 0;
		max-width: 100%;
	}
}