/* ==========================================================================
   ZORA DESIGN SYSTEM — Phase 3
   Single source of truth for color, spacing, type, radius, shadow, motion,
   and the reusable components (buttons, cards, badges, forms, notices,
   banners, tables, empty states, skeletons). Loaded sitewide.
   Palette: Zora black/charcoal + crimson. Reference site used for structure
   and polish ONLY — no blue, no copied gradients.
   ========================================================================== */

:root {
	/* Brand */
	--zora-black: #080808;
	--zora-charcoal: #141414;
	--zora-surface-dark: #1c1c1c;
	--zora-red: #bc132b;
	--zora-red-bright: #e11d48;
	--zora-red-dark: #7f0d1d;

	/* Neutrals */
	--zora-white: #ffffff;
	--zora-off-white: #f8f8f8;
	--zora-surface-light: #f2f2f3;
	--zora-border: #dedee2;
	--zora-border-dark: rgba(255, 255, 255, 0.1);
	--zora-text: #171717;
	--zora-text-muted: #66666f;
	--zora-text-on-dark: #f2f2f2;
	--zora-text-muted-on-dark: #a8a8ae;

	/* Status */
	--zora-ok-bg: #e7f5ec;    --zora-ok-fg: #14602e;
	--zora-warn-bg: #fff5df;  --zora-warn-fg: #7a5600;
	--zora-err-bg: #fdecec;   --zora-err-fg: #9c1f1f;
	--zora-info-bg: #eef0f7;  --zora-info-fg: #2f3350;

	/* Spacing scale */
	--zs-1: 4px;  --zs-2: 8px;  --zs-3: 12px; --zs-4: 16px;
	--zs-5: 24px; --zs-6: 32px; --zs-7: 48px; --zs-8: 64px; --zs-9: 96px;

	/* Radii */
	--zr-sm: 8px; --zr-md: 14px; --zr-lg: 22px; --zr-xl: 30px; --zr-pill: 999px;

	/* Shadows — soft and restrained */
	--zsh-sm: 0 1px 3px rgba(8, 8, 8, 0.07);
	--zsh-md: 0 6px 24px rgba(8, 8, 8, 0.09);
	--zsh-lg: 0 18px 50px rgba(8, 8, 8, 0.16);
	--zsh-glow-red: 0 0 44px rgba(188, 19, 43, 0.18);

	/* Type — system stack, no external font requests */
	--zf-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--zf-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Layout */
	--zora-container: 1200px;
	--zora-header-h: 64px;

	/* Motion */
	--zt-fast: 140ms ease;
	--zt-med: 240ms ease;
}

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

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */

.zora-btn,
.zora-btn:visited {
	background: var(--zora-red);
	border: 1px solid var(--zora-red);
	border-radius: var(--zr-pill);
	color: var(--zora-white) !important;
	cursor: pointer;
	display: inline-block;
	font-family: var(--zf-sans);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	padding: 14px 26px;
	text-align: center;
	text-decoration: none;
	transition: background var(--zt-fast), transform var(--zt-fast), box-shadow var(--zt-fast);
}
.zora-btn:hover { background: var(--zora-red-bright); border-color: var(--zora-red-bright); box-shadow: var(--zsh-md); transform: translateY(-1px); }
.zora-btn:active { transform: translateY(0); }

.zora-btn--ghost,
.zora-btn--ghost:visited {
	background: transparent;
	border: 1px solid var(--zora-border);
	color: var(--zora-text) !important;
}
.zora-btn--ghost:hover { background: var(--zora-off-white); border-color: var(--zora-text-muted); box-shadow: none; }

.zora-btn--dark,
.zora-btn--dark:visited {
	background: var(--zora-charcoal);
	border-color: var(--zora-charcoal);
	color: var(--zora-white) !important;
}
.zora-btn--dark:hover { background: var(--zora-black); }

.zora-btn--on-dark,
.zora-btn--on-dark:visited {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: var(--zora-white) !important;
}
.zora-btn--on-dark:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.6); }

/* Focus — visible everywhere, crimson ring. */
.zora-btn:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--zora-red-bright);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   CARDS
   -------------------------------------------------------------------------- */

.zora-card {
	background: var(--zora-white);
	border: 1px solid var(--zora-border);
	border-radius: var(--zr-md);
	box-shadow: var(--zsh-sm);
	padding: var(--zs-5);
}

.zora-card--dark {
	background: linear-gradient(165deg, var(--zora-charcoal), var(--zora-black));
	border: 1px solid rgba(188, 19, 43, 0.28);
	box-shadow: var(--zsh-md), var(--zsh-glow-red);
	color: var(--zora-text-on-dark);
}
.zora-card--dark h2, .zora-card--dark h3 { color: var(--zora-white); }
.zora-card--dark p { color: var(--zora-text-muted-on-dark); }

.zora-card--hover { transition: transform var(--zt-med), box-shadow var(--zt-med); }
.zora-card--hover:hover { box-shadow: var(--zsh-md); transform: translateY(-3px); }

/* --------------------------------------------------------------------------
   BADGES & STATUS (never color alone — always text)
   -------------------------------------------------------------------------- */

.zora-badge {
	border-radius: var(--zr-pill);
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	padding: 5px 11px;
}
.zora-badge--ok   { background: var(--zora-ok-bg);   color: var(--zora-ok-fg); }
.zora-badge--warn { background: var(--zora-warn-bg); color: var(--zora-warn-fg); }
.zora-badge--err  { background: var(--zora-err-bg);  color: var(--zora-err-fg); }
.zora-badge--info { background: var(--zora-info-bg); color: var(--zora-info-fg); }
.zora-badge--brand{ background: rgba(188, 19, 43, 0.1); color: var(--zora-red); }

/* Order status pills (aligned with earlier phases). */
.zora-order-status { border-radius: var(--zr-pill); display: inline-block; font-size: 12px; font-weight: 700; padding: 4px 11px; }
.zora-order-status--processing { background: var(--zora-ok-bg); color: var(--zora-ok-fg); }
.zora-order-status--pending,
.zora-order-status--on-hold    { background: var(--zora-warn-bg); color: var(--zora-warn-fg); }
.zora-order-status--completed  { background: var(--zora-info-bg); color: var(--zora-info-fg); }
.zora-order-status--cancelled,
.zora-order-status--failed,
.zora-order-status--refunded   { background: var(--zora-err-bg); color: var(--zora-err-fg); }

/* --------------------------------------------------------------------------
   FORMS
   -------------------------------------------------------------------------- */

.zora-field label { color: var(--zora-text); display: block; font-size: 13px; font-weight: 600; margin-bottom: var(--zs-1); }
.zora-input,
.woocommerce .input-text,
.woocommerce select {
	background: var(--zora-white);
	border: 1px solid var(--zora-border);
	border-radius: var(--zr-sm);
	color: var(--zora-text);
	font-family: var(--zf-sans);
	font-size: 15px;
	padding: 11px 14px;
	transition: border-color var(--zt-fast);
	width: 100%;
}
.zora-input:focus,
.woocommerce .input-text:focus,
.woocommerce select:focus { border-color: var(--zora-red); outline: none; }

.zora-field-hint { color: var(--zora-text-muted); display: block; font-size: 12px; line-height: 1.45; margin-top: var(--zs-1); }

/* --------------------------------------------------------------------------
   NOTICES
   -------------------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border: 1px solid var(--zora-border);
	border-left-width: 4px;
	border-radius: var(--zr-sm);
	box-shadow: var(--zsh-sm);
}
.woocommerce-message { background: var(--zora-ok-bg); border-left-color: var(--zora-ok-fg); color: var(--zora-ok-fg); }
.woocommerce-info    { background: var(--zora-info-bg); border-left-color: var(--zora-info-fg); color: var(--zora-info-fg); }
.woocommerce-error   { background: var(--zora-err-bg); border-left-color: var(--zora-err-fg); color: var(--zora-err-fg); }

/* --------------------------------------------------------------------------
   TABLES
   -------------------------------------------------------------------------- */

.zora-table {
	border: 1px solid var(--zora-border);
	border-collapse: separate;
	border-radius: var(--zr-sm);
	border-spacing: 0;
	overflow: hidden;
	width: 100%;
}
.zora-table th {
	background: var(--zora-surface-light);
	color: var(--zora-text);
	font-size: 13px;
	font-weight: 700;
	padding: 10px 14px;
	text-align: left;
}
.zora-table td { border-top: 1px solid var(--zora-border); font-size: 14px; padding: 10px 14px; }
.zora-table a { color: var(--zora-red); font-weight: 600; }

/* --------------------------------------------------------------------------
   EMPTY STATES / SKELETONS / LOADING
   -------------------------------------------------------------------------- */

.zora-empty-state {
	background: var(--zora-off-white);
	border: 1px dashed var(--zora-border);
	border-radius: var(--zr-md);
	color: var(--zora-text-muted);
	padding: var(--zs-6);
	text-align: center;
}
.zora-empty-state .zora-btn { margin-top: var(--zs-3); }

.zora-skeleton {
	animation: zora-shimmer 1.4s infinite linear;
	background: linear-gradient(90deg, var(--zora-surface-light) 25%, #e9e9ec 37%, var(--zora-surface-light) 63%);
	background-size: 400% 100%;
	border-radius: var(--zr-sm);
	min-height: 16px;
}
@keyframes zora-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

.zora-spinner {
	animation: zora-spin 0.8s linear infinite;
	border: 3px solid var(--zora-border);
	border-radius: 50%;
	border-top-color: var(--zora-red);
	display: inline-block;
	height: 22px;
	width: 22px;
}
@keyframes zora-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   MODAL & DRAWER SHELLS (behavior in zora-site.js; also used by COA modal)
   -------------------------------------------------------------------------- */

.zora-drawer {
	background: var(--zora-white);
	bottom: 0;
	box-shadow: var(--zsh-lg);
	max-width: 340px;
	overflow-y: auto;
	position: fixed;
	right: 0;
	top: 0;
	transform: translateX(100%);
	transition: transform var(--zt-med);
	width: 88vw;
	z-index: 100001;
}
.zora-drawer.is-open { transform: translateX(0); }
.zora-drawer-overlay {
	background: rgba(8, 8, 8, 0.55);
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	transition: opacity var(--zt-med);
	z-index: 100000;
}
.zora-drawer-overlay.is-open { opacity: 1; pointer-events: auto; }
.zora-drawer-close {
	background: none;
	border: none;
	color: var(--zora-text-muted);
	cursor: pointer;
	font-size: 24px;
	padding: var(--zs-3);
	position: absolute;
	right: var(--zs-2);
	top: var(--zs-2);
}

/* --------------------------------------------------------------------------
   TOP PROMO BANNER — premium restyle (fixes the "doesn't look right" banner)
   Charcoal bar, crimson code chip, tidy single-line desktop / wrapped mobile.
   -------------------------------------------------------------------------- */

.zora-promo-banner {
	background: linear-gradient(90deg, var(--zora-black), #1a0b0e 60%, var(--zora-black));
	border-bottom: 1px solid rgba(188, 19, 43, 0.4);
	color: var(--zora-text-on-dark);
	font-family: var(--zf-sans);
	font-size: 14px;
	position: relative;
	z-index: 999;
}
.zora-promo-inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--zs-2);
	justify-content: center;
	margin: 0 auto;
	max-width: var(--zora-container);
	padding: 10px 52px;
	text-align: center;
}
.zora-promo-text { line-height: 1.6; }
.zora-promo-text strong { color: #ff8fa0; font-weight: 800; letter-spacing: 0.02em; }
.zora-promo-divider { color: rgba(255, 255, 255, 0.3); margin: 0 var(--zs-2); }
.zora-promo-code {
	background: var(--zora-red);
	border: none;
	border-radius: var(--zr-pill);
	color: var(--zora-white);
	cursor: pointer;
	font-family: var(--zf-mono);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	margin: 0 var(--zs-1);
	padding: 5px 14px;
	transition: background var(--zt-fast), transform var(--zt-fast);
}
.zora-promo-code:hover { background: var(--zora-red-bright); transform: translateY(-1px); }
.zora-promo-code.zora-copied { background: var(--zora-ok-fg); }
.zora-promo-close {
	background: transparent;
	border: none;
	color: rgba(255, 255, 255, 0.55);
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	padding: 10px 14px;
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
}
.zora-promo-close:hover { color: var(--zora-white); }

/* Bottom shipping banner — slim, glassy, never covers checkout controls. */
.zora-shipping-banner {
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	background: rgba(8, 8, 8, 0.88);
	border-top: 1px solid var(--zora-border-dark);
	bottom: 0;
	color: var(--zora-text-on-dark);
	font-size: 13px;
	left: 0;
	position: fixed;
	right: 0;
	z-index: 998;
}
body.woocommerce-checkout .zora-shipping-banner,
body.woocommerce-cart .zora-shipping-banner { display: none; } /* Never cover payment controls. */
.zora-shipping-inner {
	align-items: center;
	display: flex;
	justify-content: center;
	margin: 0 auto;
	max-width: var(--zora-container);
	padding: 9px 52px;
	position: relative;
	text-align: center;
}
body.zora-has-shipping-banner { padding-bottom: 42px; }
body.zora-has-shipping-banner.woocommerce-checkout,
body.zora-has-shipping-banner.woocommerce-cart { padding-bottom: 0; }
.zora-shipping-close {
	background: transparent;
	border: none;
	color: rgba(255, 255, 255, 0.55);
	cursor: pointer;
	font-size: 18px;
	padding: 8px 12px;
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
}
.zora-shipping-close:hover { color: var(--zora-white); }

/* --------------------------------------------------------------------------
   GENERIC UTILITIES
   -------------------------------------------------------------------------- */

.zora-container { margin: 0 auto; max-width: var(--zora-container); padding: 0 var(--zs-4); }
.zora-section { padding: var(--zs-8) 0; }
.zora-eyebrow {
	color: var(--zora-red);
	display: inline-block;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.14em;
	margin-bottom: var(--zs-3);
	text-transform: uppercase;
}
.zora-h-xl { color: var(--zora-text); font-size: clamp(30px, 4.6vw, 52px); font-weight: 800; line-height: 1.08; margin: 0 0 var(--zs-4); }
.zora-h-lg { color: var(--zora-text); font-size: clamp(24px, 3.2vw, 36px); font-weight: 800; line-height: 1.15; margin: 0 0 var(--zs-3); }
.zora-accent { color: var(--zora-red); }
.zora-lede { color: var(--zora-text-muted); font-size: 17px; line-height: 1.65; max-width: 640px; }
.screen-reader-text {
	border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px;
	margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;
}

/* Scroll-reveal (zora-motion.js). Hidden state applies ONLY once JS confirms
   motion is allowed (html.zora-motion-on), so content can never be stuck
   invisible without JS or under reduced motion. */
html.zora-motion-on [data-zreveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.6s ease, transform 0.6s ease; }
html.zora-motion-on [data-zreveal].is-inview { opacity: 1; transform: none; }