/* Cart drawer customizations — #woo-cart-panel (Companion Pro's off-canvas
   cart) and the header dropdown cart, both driven by Blocksy's shared
   woocommerce/cart/mini-cart.php template. Sitewide since the panel is
   rendered on every page via wp_body_open. */

/* ── "Complete Your Protocol" cross-sell cards ───────────────────────── */

.pp-cart-upsell {
	margin: 20px 0 0;
	padding-top: 18px;
	border-top: 1px solid #e4e1d8;
}

/* Checkout order-review context: sits after the totals table rather than
   the drawer's item list, so it needs its own breathing room instead of
   the drawer's tighter spacing. */
.pp-cart-upsell--checkout {
	margin: 24px 0;
}

/* Companion Pro's native checkout "Suggested Products" carousel, still
   rendering behind pp-cart-upsell--checkout above (see the long comment in
   functions.php on why it's hidden here instead of disabled via theme_mod). */
.ct-suggested-products--checkout {
	display: none !important;
}

/* ── "Place order" button icon ───────────────────────────────────────── */

/* A real <svg> injected into #place_order's markup gets wiped out ~1s
   after page load: WooCommerce's own checkout.js runs
   $('#place_order').text(...) every time a payment method is selected,
   including the automatic one it fires on page load to activate the
   first-checked method (assets/js/frontend/checkout.js, ~line 301/305).
   .text() replaces every child node, so any element placed inside the
   button — however it got there — is guaranteed to disappear. A ::before
   pseudo-element isn't a DOM child, so .text() can't touch it; this is
   pure CSS instead, no PHP markup involved. */
/* Two things had to be verified directly in Chrome (not just by reading
   the CSS) before landing on this version:

   1. The pseudo-element only ever actually paints when it's taken out of
      flow with position:absolute. Tried keeping it a normal in-flow flex
      item (child of #place_order { display:flex }) so it could sit next
      to the text as a real flex item with a gap — computed style reported
      it correctly (opacity:1, display:block, right size/mask), but it
      never rendered a single pixel, checked via screenshot across fresh
      page loads and a hard reload. Chrome not painting a mask-image
      ::before that's an in-flow flex-item child of a <button> looks like
      a genuine engine limitation, not something fixable from here — so
      absolute positioning is a requirement, not a style choice.
   2. With position:absolute, opacity/display need to be declared
      explicitly (1 / block) — Chrome computes opacity:0 and display:none
      for this by default otherwise, confirmed via CSSOM to have zero
      competing rule anywhere responsible.

   Given #1, the icon can't be a real flex sibling of the button's text,
   so it's centered relative to the button's own midpoint instead: the
   `right` offset below assumes the button text is centered and ~82px
   wide (the actual measured width of "שליחת הזמנה"), and is expressed as
   an offset from 50% so it stays correctly placed if the button's own
   width changes — but it's still tuned to that specific string's width,
   not something that adapts to arbitrary button text. */
#place_order {
	position: relative;
}

#place_order::before {
	content: "";
	position: absolute;
	/* 50% − half the text width (~41px) − an 8px gap − the icon's own
	   18px width = how far the icon's right edge sits from the button's
	   right edge, landing it just past the text's right (start, in RTL)
	   edge instead of at either the button's edge or centered on top of
	   the text. */
	right: calc(50% - 67px);
	top: 50%;
	width: 18px;
	height: 18px;
	transform: translateY(-50%);
	background-color: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
	display: block;
	opacity: 1;
	/* Chrome computes z-index:-1 for this by default too (same unexplained
	   phantom-default pattern as opacity/display above — no rule anywhere
	   sets it), which paints it behind the button's own background. */
	z-index: 1;
	/* ...and filter:blur(11px) — this is what actually made the icon look
	   gray/dim instead of white: the color was always correct (#fff), it
	   was just smeared into a haze at 18px. Same story as the rest of this
	   rule: nothing anywhere sets this, it's Chrome's own default for this
	   specific pseudo-element, and it has to be named to turn it off. */
	filter: none;
}

.pp-cart-upsell__heading {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #132040;
	text-transform: uppercase;
	margin: 0 0 12px;
}

.pp-cart-upsell__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pp-cart-upsell__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	background: #faf8f4;
	border: 1px solid #e4e1d8;
	border-radius: 12px;
}

.pp-cart-upsell__image {
	flex: none;
	display: block;
	width: 48px;
	height: 48px;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
}

.pp-cart-upsell__image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.pp-cart-upsell__body {
	flex: 1;
	min-width: 0;
}

.pp-cart-upsell__name {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: #1c1c1a;
	text-decoration: none;
	line-height: 1.3;
	margin-bottom: 2px;
}

.pp-cart-upsell__price {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: #132040;
	margin-bottom: 6px;
}

.pp-cart-upsell__variations {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.pp-cart-upsell__variation {
	appearance: none;
	background: #fff;
	border: 1px solid #d8d4c8;
	color: #6b6b64;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	padding: 4px 10px;
	cursor: pointer;
	line-height: 1.4;
}

.pp-cart-upsell__variation.is-active {
	background: #132040;
	border-color: #132040;
	color: #fff;
}

.pp-cart-upsell__add {
	flex: none;
	appearance: none;
	background: #132040;
	color: #fff;
	border: none;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	padding: 9px 16px;
	cursor: pointer;
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.pp-cart-upsell__add:hover {
	opacity: 0.85;
	color: #fff;
}

.pp-cart-upsell__add.loading {
	opacity: 0.6;
	pointer-events: none;
}

/* ── Single "secure checkout" button ─────────────────────────────────── */

.woocommerce-mini-cart__buttons.buttons {
	display: block;
}

.pp-cart-checkout {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	background: #132040;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	padding: 13px 18px;
	border-radius: 999px;
	text-decoration: none;
	box-sizing: border-box;
	transition: opacity 0.15s ease;
}

.pp-cart-checkout:hover {
	opacity: 0.9;
	color: #fff;
}

.pp-cart-checkout__icon {
	flex: none;
	width: 16px;
	height: 16px;
	color: #c9a24b;
}