/* Prepiful — premium AI-productivity design layer.
   Uses theme.json preset variables so colors/fonts stay in one source of truth. */

:root {
	--pf-navy: var(--wp--preset--color--navy);
	--pf-blue: var(--wp--preset--color--blue);
	--pf-aqua: var(--wp--preset--color--aqua);
	--pf-soft: var(--wp--preset--color--white-soft);
	--pf-slate: var(--wp--preset--color--slate);
	--pf-green: var(--wp--preset--color--green);
	--pf-grad: linear-gradient(135deg, #2563EB 0%, #06B6D4 100%);
	--pf-shadow: 0 18px 40px -12px rgba(7, 17, 31, 0.18);
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ---------- Header ---------- */
.pf-header {
	position: sticky; top: 0; z-index: 50;
	backdrop-filter: saturate(160%) blur(14px);
	background: rgba(248, 250, 252, 0.82);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.pf-logo { font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 1.4rem; letter-spacing: -0.02em; color: var(--pf-navy); text-decoration: none; }
.pf-logo span { color: var(--pf-blue); }
.pf-nav a { color: var(--pf-slate); font-weight: 500; text-decoration: none; }
.pf-nav a:hover { color: var(--pf-blue); }
.pf-nav-toggle { display: none; background: none; border: 0; cursor: pointer; font-size: 1.6rem; color: var(--pf-navy); }

/* ---------- Backgrounds / surfaces ---------- */
.pf-grid {
	position: relative; color: var(--pf-soft);
	background:
		radial-gradient(60% 80% at 80% -10%, rgba(37, 99, 235, 0.35), transparent 60%),
		radial-gradient(50% 60% at 0% 110%, rgba(6, 182, 212, 0.28), transparent 60%),
		linear-gradient(160deg, #07111F 0%, #0E1C30 60%, #0B2545 100%);
}
.pf-grid::before {
	content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
	background-image: linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px);
	background-size: 44px 44px;
	mask-image: radial-gradient(70% 70% at 50% 30%, #000 40%, transparent 100%);
}
.pf-grid :is(h1, h2, h3) { color: #fff; }
.pf-grid p { color: #CBD5E1; }

/* ---------- Glassmorphism cards ---------- */
.pf-card {
	background: #fff; border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg); padding: 1.6rem;
	box-shadow: var(--pf-shadow); height: 100%;
}
.pf-glass {
	background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--wp--custom--radius--lg); padding: 1.6rem;
	backdrop-filter: blur(12px); box-shadow: 0 8px 32px rgba(7, 17, 31, 0.25); height: 100%;
}
.pf-card h3, .pf-glass h3 { margin-top: 0; }

/* Numbered step badge */
.pf-step { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 999px; background: var(--pf-grad); color: #fff; font-family: var(--wp--preset--font-family--heading); font-weight: 700; margin-bottom: 0.75rem; }

/* Eyebrow / pill */
.pf-eyebrow { display: inline-block; font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pf-blue); }
.pf-grid .pf-eyebrow { color: var(--pf-aqua); }
.pf-pill { display: inline-flex; gap: 0.4rem; align-items: center; padding: 0.3rem 0.85rem; border-radius: 999px; background: rgba(34, 197, 94, 0.12); color: #15803D; font-weight: 600; font-size: 0.85rem; }

/* Trust line */
.pf-trust { color: #94A3B8; font-size: 0.95rem; }
.pf-trust strong { color: #fff; }

/* Gradient text accent */
.pf-grad-text { background: var(--pf-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Pricing filters ---------- */
.pf-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin: 1.5rem 0 2.5rem; }
.pf-filters button { font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 0.9rem; padding: 0.55rem 1.2rem; border-radius: 999px; border: 1px solid var(--wp--preset--color--border); background: #fff; color: var(--pf-slate); cursor: pointer; }
.pf-filters button.is-active { background: var(--pf-grad); color: #fff; border-color: transparent; }
.pf-price { font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 1.9rem; color: var(--pf-navy); }
.pf-price small { font-size: 0.9rem; color: var(--pf-slate); font-weight: 500; }

/* ---------- WooCommerce + checkout compliance ---------- */
.prepiful-checkout-notice {
	border: 1px solid var(--wp--preset--color--border); border-left: 4px solid var(--pf-blue);
	background: var(--pf-soft); border-radius: var(--wp--custom--radius--md);
	padding: 1rem 1.1rem; margin: 1.25rem 0; font-size: 0.92rem;
}
.prepiful-checkout-notice p { margin: 0 0 0.5rem; }
.prepiful-checkout-notice p:last-child { margin-bottom: 0; }
.prepiful-product-policy { font-size: 0.9rem; color: var(--pf-slate); border-top: 1px solid var(--wp--preset--color--border); padding-top: 0.9rem; }

.woocommerce ul.products li.product, .pf-card.product { border-radius: var(--wp--custom--radius--lg); }
.woocommerce ul.products li.product .price { color: var(--pf-navy); font-weight: 700; }
.woocommerce a.button, .woocommerce button.button, .woocommerce .button { border-radius: 999px; background: var(--pf-blue); color: #fff; }
.woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--pf-aqua); }

/* ---------- Footer ---------- */
.pf-footer { background: var(--pf-navy); color: #CBD5E1; }
.pf-footer a { color: #CBD5E1; text-decoration: none; }
.pf-footer a:hover { color: #fff; }
.pf-footer .pf-logo { color: #fff; }
.pf-disclaimer { color: #64748B; font-size: 0.85rem; line-height: 1.6; }

/* ---------- Motion ---------- */
.pf-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.pf-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .pf-reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 781px) {
	.pf-nav-toggle { display: block; }
	.pf-nav { display: none; width: 100%; flex-direction: column; gap: 0.75rem; padding-top: 1rem; }
	.pf-nav.is-open { display: flex; }
}