/**
 * FlexiDesignX — Global Styles
 *
 * Base resets, CSS custom properties, typography.
 * Mobile-first: base styles are for mobile, use min-width queries to scale up.
 *
 * @package FlexiDesignX
 * @since   1.0.0
 */

/* ==========================================================================
   CSS Custom Properties
   Brand palette: Black + Gold (matches logo — black "designx" + warm tan "Flexi")
   ========================================================================== */

:root {
	/* Brand colours — Brown (from logo) + Tan */
	--fdx-accent: #6B4C3B;
	--fdx-accent-hover: #553D2F;
	--fdx-accent-light: #F5F0EB;
	--fdx-gold: #C4A882;
	--fdx-gold-hover: #B09670;
	--fdx-gold-light: #F5F0EA;
	--fdx-warm-brown: #9B7B5E; /* logo brown — "designx" text colour */
	--fdx-dark-brown: #3B2820; /* deep brown for footer */

	/* Neutrals */
	--fdx-white: #FFFFFF;
	--fdx-grey-50: #F9F7F4;
	--fdx-grey-100: #F3F4F6;
	--fdx-grey-200: #E5E7EB;
	--fdx-grey-300: #D1D5DB;
	--fdx-grey-500: #6B7280;
	--fdx-grey-700: #374151;
	--fdx-grey-900: #111827;

	/* Functional colours */
	--fdx-success: #10B981;
	--fdx-error: #EF4444;
	--fdx-warning: #F59E0B;
	--fdx-info: #3B82F6;

	/* Typography */
	--fdx-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--fdx-font-size-xs: 0.75rem;
	--fdx-font-size-sm: 0.875rem;
	--fdx-font-size-base: 1rem;
	--fdx-font-size-lg: 1.125rem;
	--fdx-font-size-xl: 1.25rem;
	--fdx-font-size-2xl: 1.5rem;
	--fdx-font-size-3xl: 1.875rem;

	/* Spacing */
	--fdx-space-xs: 0.25rem;
	--fdx-space-sm: 0.5rem;
	--fdx-space-md: 1rem;
	--fdx-space-lg: 1.5rem;
	--fdx-space-xl: 2rem;
	--fdx-space-2xl: 3rem;

	/* Borders */
	--fdx-radius-sm: 4px;
	--fdx-radius-md: 8px;
	--fdx-radius-lg: 12px;
	--fdx-radius-full: 9999px;

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

	/* Layout */
	--fdx-max-width: 1200px;
	--fdx-mobile-tab-bar-height: 60px;
}

/* ==========================================================================
   Base Resets
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	font-family: var(--fdx-font-family);
	font-size: var(--fdx-font-size-base);
	color: var(--fdx-grey-900);
	background-color: var(--fdx-grey-50);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--fdx-gold);
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover {
	color: var(--fdx-gold-hover);
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.fdx-container {
	width: 100%;
	max-width: var(--fdx-max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--fdx-space-md);
	padding-right: var(--fdx-space-md);
}

@media (max-width: 480px) {
	.fdx-container {
		padding-left: 10px;
		padding-right: 10px;
	}
}

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

/* ==========================================================================
   Button Base
   ========================================================================== */

.fdx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--fdx-space-sm);
	padding: var(--fdx-space-sm) var(--fdx-space-lg);
	font-size: var(--fdx-font-size-base);
	font-weight: 600;
	border: none;
	border-radius: var(--fdx-radius-md);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.1s ease;
	-webkit-tap-highlight-color: transparent;
}

.fdx-btn:active {
	transform: scale(0.98);
}

.fdx-btn--primary {
	background-color: var(--fdx-accent);
	color: var(--fdx-white);
}

.fdx-btn--primary:hover {
	background-color: var(--fdx-accent-hover);
}

.fdx-btn--gold {
	background-color: var(--fdx-gold);
	color: var(--fdx-accent);
}

.fdx-btn--gold:hover {
	background-color: var(--fdx-gold-hover);
	color: var(--fdx-accent);
}

/* ==========================================================================
   WhatsApp Sticky Button
   ========================================================================== */

.fdx-whatsapp-btn {
	position: fixed;
	bottom: calc(var(--fdx-mobile-tab-bar-height) + var(--fdx-space-md));
	right: var(--fdx-space-md);
	width: 56px;
	height: 56px;
	background-color: #25D366;
	border-radius: var(--fdx-radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--fdx-shadow-lg);
	z-index: 1000;
	transition: transform 0.2s ease;
}

.fdx-whatsapp-btn:hover {
	transform: scale(1.1);
}

/* Desktop: no tab bar, so position lower */
@media (min-width: 1025px) {
	.fdx-whatsapp-btn {
		bottom: var(--fdx-space-xl);
		right: var(--fdx-space-xl);
	}
}

/* ==========================================================================
   Loading Skeleton Animation
   ========================================================================== */

@keyframes fdx-shimmer {
	0% { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}

.fdx-skeleton {
	background: linear-gradient(90deg,
		var(--fdx-grey-100) 25%,
		var(--fdx-grey-200) 37%,
		var(--fdx-grey-100) 63%
	);
	background-size: 200% 100%;
	animation: fdx-shimmer 1.5s ease-in-out infinite;
	border-radius: var(--fdx-radius-sm);
}

.fdx-skeleton--text {
	height: 0.875rem;
	width: 80%;
	margin-bottom: 0.5rem;
}

.fdx-skeleton--title {
	height: 1.25rem;
	width: 60%;
	margin-bottom: 0.75rem;
}

.fdx-skeleton--image {
	aspect-ratio: 1 / 1;
	width: 100%;
	border-radius: var(--fdx-radius-md);
}

.fdx-skeleton--price {
	height: 1rem;
	width: 40%;
}

/* Product card placeholder image shimmer */
.fdx-product-card__placeholder {
	background: linear-gradient(90deg,
		var(--fdx-grey-100) 25%,
		var(--fdx-grey-200) 37%,
		var(--fdx-grey-100) 63%
	);
	background-size: 200% 100%;
	animation: fdx-shimmer 1.5s ease-in-out infinite;
}

/* ==========================================================================
   WooCommerce Notice Styling
   ========================================================================== */

.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
	border-radius: var(--fdx-radius-md);
	font-size: var(--fdx-font-size-sm);
	padding: 0.75rem 1rem;
}

/* ==========================================================================
   Toast Notification
   ========================================================================== */

.fdx-toast {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 10000;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 12px 40px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.04);
	transform: translateX(120%);
	opacity: 0;
	transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease;
	max-width: 420px;
	min-width: 320px;
	overflow: hidden;
}
.fdx-toast--show { transform: translateX(0); opacity: 1; }
.fdx-toast--error .fdx-toast__progress-bar { background: var(--fdx-error); }

.fdx-toast__body {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
}
.fdx-toast__icon { flex-shrink: 0; display: flex; }
.fdx-toast__content { flex: 1; min-width: 0; }
.fdx-toast__title {
	display: block;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--fdx-grey-900);
	line-height: 1.3;
}
.fdx-toast__text {
	display: block;
	font-size: 0.78rem;
	color: var(--fdx-grey-500);
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.fdx-toast__action {
	flex-shrink: 0;
	color: var(--fdx-accent);
	font-weight: 700;
	font-size: 0.82rem;
	text-decoration: none;
	padding: 0.4rem 0.85rem;
	background: var(--fdx-gold-light);
	border-radius: 8px;
	transition: background 0.2s;
	white-space: nowrap;
}
.fdx-toast__action:hover { background: var(--fdx-gold); color: var(--fdx-accent); }
.fdx-toast__close {
	flex-shrink: 0;
	background: none;
	border: none;
	color: var(--fdx-grey-400);
	cursor: pointer;
	padding: 0.25rem;
	display: flex;
	border-radius: 6px;
	transition: background 0.15s;
}
.fdx-toast__close:hover { background: var(--fdx-grey-100); color: var(--fdx-grey-700); }

/* Progress bar */
.fdx-toast__progress {
	height: 3px;
	background: var(--fdx-grey-100);
}
.fdx-toast__progress-bar {
	height: 100%;
	width: 100%;
	background: var(--fdx-gold);
	border-radius: 0 0 14px 14px;
}

/* Badge bounce */
@keyframes fdxBadgeBounce {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.3); }
}
.fdx-badge-bounce { animation: fdxBadgeBounce 0.4s ease; }

/* Spinner */
@keyframes fdxSpin { to { transform: rotate(360deg); } }
.fdx-spin { animation: fdxSpin 0.8s linear infinite; }

/* SVG icon in buttons */
.fdx-pdp__btn-icon { flex-shrink: 0; display: inline-flex; }
.fdx-pdp__share-icon { color: var(--fdx-grey-500); transition: color 0.15s; display: inline-flex; }
.fdx-pdp__share-icon:hover { color: var(--fdx-gold); }
.fdx-pdp__fav-icon { display: inline-flex; }
.fdx-pdp__favorite--active .fdx-pdp__fav-icon { color: #e74c3c; }

.admin-bar .fdx-toast { top: 52px; }
.fdx-header--sticky ~ .fdx-main .fdx-toast,
.fdx-header--sticky + .fdx-nav + .fdx-main .fdx-toast { top: 80px; }

@media (max-width: 767px) {
	.fdx-toast { right: 10px; left: 10px; max-width: none; min-width: 0; top: 12px; }
	.admin-bar .fdx-toast { top: 58px; }
}

/* ==========================================================================
   Premium Typography
   ========================================================================== */

body.fdx-site {
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	overflow-x: hidden;
}

/* ==========================================================================
   Brand-Colored Text Selection
   ========================================================================== */

::selection { background: var(--fdx-accent); color: #fff; }
::-moz-selection { background: var(--fdx-accent); color: #fff; }

/* ==========================================================================
   Focus Styles — Accessibility
   Visible outlines for keyboard navigation using :focus-visible so mouse
   users are not affected. Uses brand accent colour with offset for clarity.
   ========================================================================== */

.fdx-btn:focus-visible,
a:focus-visible,
.fdx-product-card:focus-visible,
.fdx-nav__menu li a:focus-visible,
.fdx-sort-bar__tab:focus-visible,
.fdx-product-tabs__tab:focus-visible,
.fdx-pdp__var-btn:focus-visible,
.fdx-pdp__favorite:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.fdx-mobile-tab:focus-visible {
	outline: 2px solid var(--fdx-gold);
	outline-offset: 2px;
}