/**
 * Shared visual system.
 *
 * Keep brand colors in Kadence global palette settings. This file only
 * derives reusable surfaces, gradients, shadows, focus rings, and motion.
 *
 * @package Kadence_Child
 */

:root {
	--kc-surface: var(--global-palette8);
	--kc-surface-strong: var(--global-palette9);
	--kc-text: var(--global-palette1);
	--kc-text-muted: color-mix(in srgb, var(--global-palette1) 62%, var(--global-palette9));
	--kc-border-soft: color-mix(in srgb, var(--global-palette6) 38%, var(--global-palette8));
	--kc-border-gold: color-mix(in srgb, var(--global-palette2) 58%, var(--global-palette8));
	--kc-gradient-primary: linear-gradient(135deg, var(--global-palette5) 0%, var(--global-palette3) 100%);
	--kc-gradient-gold: linear-gradient(135deg, var(--global-palette2) 0%, var(--global-palette4) 100%);
	--kc-gradient-paper: radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--global-palette6) 28%, transparent) 0 18rem, transparent 28rem),
		radial-gradient(circle at 86% 8%, color-mix(in srgb, var(--global-palette4) 32%, transparent) 0 16rem, transparent 27rem),
		linear-gradient(180deg, var(--global-palette8) 0%, var(--global-palette7) 100%);
	--kc-shadow-card: 0 18px 48px color-mix(in srgb, var(--global-palette1) 14%, transparent);
	--kc-shadow-card-hover: 0 24px 70px color-mix(in srgb, var(--global-palette1) 20%, transparent);
	--kc-shadow-glow: 0 0 0 1px color-mix(in srgb, var(--global-palette6) 34%, transparent),
		0 18px 46px color-mix(in srgb, var(--global-palette5) 22%, transparent);
	--kc-shadow-gold-glow: 0 14px 34px color-mix(in srgb, var(--global-palette2) 28%, transparent);
	--kc-radius-sm: 8px;
	--kc-radius-md: 12px;
	--kc-radius-lg: 16px;
	--kc-motion-fast: 180ms ease;
	--kc-motion-soft: 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

body {
	background: var(--kc-gradient-paper);
	color: var(--kc-text);
}

a {
	transition: color var(--kc-motion-fast), box-shadow var(--kc-motion-fast);
}

.button,
button.button,
input[type="submit"],
.wp-block-button__link,
.kc-product-cards__btn,
.kc-cart__checkout-btn,
.kc-cart-empty__btn,
.kc-header-cart__view-btn,
.kc-my-tales__shop-btn,
.kc-tp__cart,
.kc-tp__email-save,
.kc-tp__page-form-submit,
.kc-ac__btn--save {
	position: relative;
	transition: transform var(--kc-motion-soft);
}

.button:hover,
button.button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.kc-product-cards__btn:hover,
.kc-cart__checkout-btn:hover,
.kc-cart-empty__btn:hover,
.kc-header-cart__view-btn:hover,
.kc-my-tales__shop-btn:hover,
.kc-tp__cart:hover:not(:disabled),
.kc-tp__email-save:hover,
.kc-tp__page-form-submit:hover,
.kc-ac__btn--save:hover:not(:disabled) {
	transform: translateY(-2px);
}

.kc-product-cards__card,
.woocommerce ul.products li.product,
.kc-similar__card,
.kc-reviews__card,
.kc-cart__item,
.kc-cart__totals,
.kc-cart__coupon,
.kc-checkout-login,
.kc-checkout-coupon,
.kc-ac__card,
.kc-orders__item,
.kc-tp__summary,
.kc-tp__email,
.kc-tp__editor {
	background: color-mix(in srgb, var(--kc-surface) 92%, var(--global-palette9)) !important;
	border: 1px solid var(--kc-border-soft) !important;
	box-shadow: var(--kc-shadow-card);
}

.kc-product-cards__card,
.woocommerce ul.products li.product,
.kc-similar__card,
.kc-reviews__card {
	position: relative;
	border-radius: var(--kc-radius-lg);
	transition: transform var(--kc-motion-soft), box-shadow var(--kc-motion-soft), border-color var(--kc-motion-fast);
}

.kc-product-cards__card::before,
.woocommerce ul.products li.product::before,
.kc-similar__card::before,
.kc-reviews__card::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--global-palette4) 28%, transparent), transparent 34%),
		radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--global-palette6) 24%, transparent), transparent 32%);
	opacity: 0;
	transition: opacity var(--kc-motion-soft);
	pointer-events: none;
}

.kc-product-cards__card > *,
.woocommerce ul.products li.product > *,
.kc-similar__card > *,
.kc-reviews__card > * {
	position: relative;
	z-index: 1;
}

.kc-product-cards__card:hover,
.woocommerce ul.products li.product:hover,
.kc-similar__card:hover,
.kc-reviews__card:hover {
	border-color: var(--kc-border-gold) !important;
	box-shadow: var(--kc-shadow-card-hover), var(--kc-shadow-glow);
	transform: translateY(-6px);
}

.kc-product-cards__card:hover::before,
.woocommerce ul.products li.product:hover::before,
.kc-similar__card:hover::before,
.kc-reviews__card:hover::before {
	opacity: 1;
}

.kc-product-cards__image-link img,
.woocommerce ul.products li.product .woocommerce-loop-image-link img,
.kc-similar__image-link img,
.kc-header-cart__item-thumb img,
.kc-cart__item-thumb img {
	box-shadow: 0 18px 36px color-mix(in srgb, var(--global-palette1) 18%, transparent),
		0 0 28px color-mix(in srgb, var(--global-palette4) 20%, transparent) !important;
}

.kc-pform__input,
.kc-pform__dropdown-toggle,
.kc-pform__dropdown-panel,
.kc-pform__dropdown-reset,
.kc-cf__input,
.kc-cf__select,
.kc-cf__textarea,
.kc-cf-dd__toggle,
.kc-cf-dd__panel,
.kc-cart__coupon-input,
.kc-checkout input.input-text,
.kc-checkout textarea,
.kc-checkout select,
.kc-ac__input,
.kc-tp__email-input,
.kc-tp__page-form-input,
.kc-shop-filters__search,
.kc-shop-filters__toggle,
.kc-shop-filters__panel,
.kc-lang__dropdown,
.kc-header-cart__dropdown {
	background: color-mix(in srgb, var(--kc-surface) 94%, var(--global-palette9)) !important;
	border-color: var(--kc-border-soft) !important;
	color: var(--kc-text) !important;
	box-shadow: none;
	transition: border-color var(--kc-motion-fast), box-shadow var(--kc-motion-fast), background var(--kc-motion-fast);
}

.kc-pform__input:focus,
.kc-pform__dropdown.is-open .kc-pform__dropdown-toggle,
.kc-pform__dropdown-toggle:focus,
.kc-cf__input:focus,
.kc-cf__select:focus,
.kc-cf__textarea:focus,
.kc-cf-dd.is-open .kc-cf-dd__toggle,
.kc-cart__coupon-input:focus,
.kc-checkout input.input-text:focus,
.kc-checkout textarea:focus,
.kc-checkout select:focus,
.kc-ac__input:focus,
.kc-tp__email-input:focus,
.kc-tp__page-form-input:focus,
.kc-shop-filters__search:focus-within,
.kc-shop-filters__dropdown.is-open .kc-shop-filters__toggle,
.kc-lang__trigger:focus {
	border-color: var(--global-palette2) !important;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--global-palette6) 28%, transparent) !important;
	outline: none;
}

.woocommerce-info,
.woocommerce-message,
.kc-cart-notices .woocommerce-message,
.kc-checkout-notices .woocommerce-message,
.kc-ac__msg--success,
.kc-tp__notice {
	background: color-mix(in srgb, var(--global-palette6) 20%, var(--global-palette8)) !important;
	border-color: var(--kc-border-soft) !important;
	color: var(--kc-text) !important;
}

.woocommerce-error,
.kc-cart-notices .woocommerce-error,
.kc-checkout-notices .woocommerce-error,
.kc-ac__msg--error,
.kc-tp__notice--error {
	background: color-mix(in srgb, var(--global-palette4) 26%, var(--global-palette8)) !important;
	border-color: color-mix(in srgb, var(--global-palette2) 64%, var(--global-palette8)) !important;
	color: var(--kc-text) !important;
}

.kc-orders__status,
.kc-checkout .required,
.kc-pform__warning,
.kc-cf__error,
.kc-tp__email-msg.is-error {
	color: var(--global-palette2) !important;
}

@keyframes kc-float-soft {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-8px);
	}
}

@keyframes kc-glow-pulse {
	0%, 100% {
		box-shadow: var(--kc-shadow-card);
	}
	50% {
		box-shadow: var(--kc-shadow-card), var(--kc-shadow-glow);
	}
}

@keyframes kc-soft-fade {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

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

button.is-loading,
.button.is-loading,
a.button.is-loading,
.kc-product-cards__btn.is-loading {
	position: relative;
	color: transparent !important;
	pointer-events: none;
}

button.is-loading::after,
.button.is-loading::after,
a.button.is-loading::after,
.kc-product-cards__btn.is-loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border: 2px solid color-mix(in srgb, var(--global-palette9, #fff) 34%, transparent);
	border-top-color: var(--global-palette9, #fff);
	border-radius: 50%;
	animation: kc-spin 0.7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 1ms !important;
	}

	button.is-loading::after,
	.button.is-loading::after,
	a.button.is-loading::after,
	.kc-product-cards__btn.is-loading::after,
	.kc-tp__spinner,
	.kc-search__spinner {
		animation-duration: 0.7s !important;
		animation-iteration-count: infinite !important;
	}
}