/**
 * PhytoFamily slide-out cart drawer.
 * Dark, brand-styled mini-cart. Shell is rendered on every page via
 * pf_render_cart_drawer() (functions.php); cart-drawer.js fills it from the
 * WooCommerce Store API. Matches the approved mockup
 * (.agent/mockups/cart-drawer-2026-06-26/).
 */

/* Overlay */
.pf-drawer-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.62);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.28s ease, visibility 0.28s ease;
	z-index: 9998;
}
.pf-drawer-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

/* Drawer panel */
.pf-drawer {
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	width: 424px;
	max-width: 90vw;
	background: var(--wp--preset--color--surface-dark);
	border-left: 1px solid var(--wp--custom--color--border);
	box-shadow: -24px 0 70px rgba(0, 0, 0, 0.55);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 9999;
	color: var(--wp--preset--color--text-primary);
	font-family: var(--wp--preset--font-family--body);
}
.pf-drawer.is-open {
	transform: translateX(0);
}

/* Header */
.pf-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 26px 28px 18px;
	flex: none;
}
.pf-drawer-title {
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.18em;
}
.pf-drawer-count {
	color: var(--wp--preset--color--text-secondary);
	margin-left: 5px;
}
.pf-drawer-close {
	background: none;
	border: none;
	color: var(--wp--preset--color--text-secondary);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	padding: 4px;
	transition: color 0.2s ease;
}
.pf-drawer-close:hover {
	color: var(--wp--preset--color--text-primary);
}
.pf-drawer-close:focus-visible {
	outline: 3px solid #f4cf62;
	outline-offset: 4px;
	border-radius: 4px;
}

/* Failure-only status. Kept deliberately compact for UI-specialist review. */
.pf-drawer-notice {
	margin: 0 28px 16px;
	padding: 10px 12px;
	border: 1px solid rgba(224, 112, 112, 0.55);
	border-radius: 6px;
	background: rgba(120, 35, 35, 0.22);
	color: #f2caca;
	font-size: 12.5px;
	line-height: 1.45;
	flex: none;
}

/* Free-shipping progress */
.pf-drawer-ship {
	padding: 0 28px 20px;
	flex: none;
}
.pf-drawer-ship-text {
	font-size: 12.5px;
	color: var(--wp--preset--color--text-secondary);
	margin: 0 0 11px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.pf-drawer-ship-text b {
	color: var(--wp--preset--color--text-primary);
	font-weight: 400;
}
.pf-drawer-ship-track {
	height: 6px;
	background: #262626;
	border-radius: 99px;
	overflow: hidden;
}
.pf-drawer-ship-fill {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, #5a7a5a, #8fbf8f);
	border-radius: 99px;
	transition: width 0.4s ease;
}
.pf-drawer-ship.is-qualified .pf-drawer-ship-fill {
	width: 100% !important;
}

.pf-drawer-divider {
	height: 1px;
	background: var(--wp--custom--color--border);
	margin: 0 28px;
	flex: none;
}

/* Items (scroll area) */
.pf-drawer-items {
	flex: 1;
	overflow-y: auto;
	padding: 6px 28px;
}
.pf-drawer-item {
	display: flex;
	gap: 15px;
	padding: 20px 0;
	border-bottom: 1px solid var(--wp--custom--color--border);
	position: relative;
}
.pf-drawer-thumb {
	width: 66px;
	height: 66px;
	border-radius: 9px;
	flex: none;
	object-fit: cover;
	background: radial-gradient(circle at 35% 28%, #2e2e2e, #141414);
	border: 1px solid var(--wp--custom--color--border);
}
.pf-drawer-meta {
	flex: 1;
	min-width: 0;
}
.pf-drawer-name {
	font-size: 13.5px;
	line-height: 1.35;
	margin: 0 0 4px;
	padding-right: 20px;
}
.pf-drawer-name a {
	color: var(--wp--preset--color--text-primary);
	text-decoration: none;
}
.pf-drawer-variant {
	font-size: 12px;
	color: var(--wp--preset--color--text-secondary);
	margin: 0 0 12px;
}
.pf-drawer-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--wp--custom--color--border);
	border-radius: 7px;
	overflow: hidden;
}
.pf-drawer-qty button {
	background: none;
	border: none;
	color: var(--wp--preset--color--text-secondary);
	width: 28px;
	height: 28px;
	font-size: 15px;
	cursor: pointer;
	transition: color 0.15s ease;
}
.pf-drawer-qty button:hover {
	color: var(--wp--preset--color--text-primary);
}
.pf-drawer-qty button:disabled,
.pf-drawer-qty button:disabled:hover {
	opacity: 0.3;
	cursor: default;
	color: var(--wp--preset--color--text-secondary);
}
.pf-drawer-qty span {
	width: 30px;
	text-align: center;
	font-size: 13px;
}
.pf-drawer-price {
	font-size: 13.5px;
	white-space: nowrap;
	align-self: flex-start;
	padding-top: 1px;
}
.pf-drawer-remove {
	position: absolute;
	top: 20px;
	right: 0;
	background: none;
	border: none;
	color: var(--wp--preset--color--text-secondary);
	font-size: 14px;
	cursor: pointer;
	padding: 2px;
	transition: color 0.2s ease;
}
.pf-drawer-remove:hover {
	color: var(--wp--custom--color--oos-red, #cc4444);
}

/* Empty state */
.pf-drawer-empty {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 16px;
	color: var(--wp--preset--color--text-secondary);
	padding: 40px 28px;
}
.pf-drawer-empty a {
	color: var(--wp--preset--color--text-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* Footer */
.pf-drawer-foot {
	padding: 22px 28px 26px;
	border-top: 1px solid var(--wp--custom--color--border);
	flex: none;
}
.pf-drawer-subrow {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 5px;
}
.pf-drawer-subrow .l {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--text-secondary);
}
.pf-drawer-subtotal {
	font-size: 21px;
}
.pf-drawer-tax {
	font-size: 11.5px;
	color: var(--wp--preset--color--text-secondary);
	margin: 0 0 20px;
}
.pf-drawer-checkout {
	display: block;
	width: 100%;
	text-align: center;
	background: var(--wp--preset--color--text-primary);
	color: var(--wp--preset--color--background);
	border: none;
	padding: 17px;
	font-family: inherit;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	border-radius: 6px;
	text-decoration: none;
	box-sizing: border-box;
	transition: background 0.2s ease;
}
.pf-drawer-checkout:hover {
	background: #ffffff;
}
.pf-drawer-viewcart {
	display: block;
	text-align: center;
	margin-top: 15px;
	color: var(--wp--preset--color--text-secondary);
	font-size: 12.5px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Loading state */
.pf-drawer.is-loading .pf-drawer-items,
.pf-drawer.is-loading .pf-drawer-foot {
	opacity: 0.5;
	pointer-events: none;
}

/* The `hidden` attribute must win over the component display rules above. */
.pf-drawer [hidden] {
	display: none !important;
}

/* Optimistic line item (shown instantly on add, before the server confirms):
   slightly faded with a soft pulse, and its qty/remove controls inert until
   the real cart reconciles. */
.pf-drawer-item.pf-optimistic {
	animation: pf-optimistic-pulse 1.1s ease-in-out infinite;
}
.pf-drawer-item.pf-optimistic .pf-drawer-qty,
.pf-drawer-item.pf-optimistic .pf-drawer-remove {
	opacity: 0.35;
	pointer-events: none;
}
@keyframes pf-optimistic-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.6; }
}

/* Lock body scroll while open */
body.pf-drawer-open {
	overflow: hidden;
}

/* ============================================
   Stackable incentive bars (free shipping, free gift, …)
   Shared by the drawer (.pf-drawer-incentives) and checkout
   (.pf-checkout-incentives). One <div class="pf-incentive"> per goal.
   ============================================ */
.pf-incentives { display: flex; flex-direction: column; gap: 14px; }
.pf-drawer-incentives { padding: 0 28px 20px; flex: none; }
.pf-checkout-incentives { margin: 0 0 22px; }
.pf-incentive-text {
	font-size: 12.5px;
	color: var(--wp--preset--color--text-secondary);
	margin: 0 0 9px;
	display: flex;
	align-items: center;
	gap: 8px;
	line-height: 1.4;
}
.pf-incentive-text svg { color: #6b9e6b; flex: none; }
.pf-incentive-text b, .pf-incentive-text strong {
	color: var(--wp--preset--color--text-primary);
	font-weight: 400;
}
.pf-incentive.is-qualified .pf-incentive-text { color: #8fbf8f; }
.pf-incentive.is-qualified .pf-incentive-text svg { color: #8fbf8f; }
.pf-incentive-track { height: 6px; background: #262626; border-radius: 99px; overflow: hidden; }
.pf-incentive-fill {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, #5a7a5a, #8fbf8f);
	border-radius: 99px;
	transition: width 0.45s ease;
}
.pf-incentive.is-qualified .pf-incentive-fill { width: 100% !important; }

@media (max-width: 480px) {
	.pf-drawer { width: 100vw; max-width: 100vw; }
}