/* Saasveld · components/sticky-cta — context-bewuste mobiele CTA-balk */

/* ============ STICKY MOBILE CTA (context-bewust) ============ */
/* Balk is standaard verborgen; sticky-cta.js zet .is-shown (alleen op mobiel onthuld). */
[data-sticky-cta]{
	position:fixed;left:0;right:0;bottom:0;z-index:50;
	display:none;gap:.5rem;align-items:center;
	box-sizing:border-box;max-width:100vw;overflow:hidden;
	padding:.6rem .75rem;
	padding-bottom:calc(.6rem + env(safe-area-inset-bottom,0px));
	background:#fff;border-top:1px solid var(--wp--preset--color--line);
	box-shadow:0 -6px 24px rgba(20,17,16,.12);
	transform:translateY(0);transition:transform .3s cubic-bezier(.34,.9,.3,1)
}
[data-sticky-cta].is-hidden{transform:translateY(140%)}

/* Primaire actie (rode knop / link) */
.saasveld-mobile-cta__order{
	flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
	text-align:center;text-decoration:none;cursor:pointer;
	background:var(--wp--preset--color--primary);color:#fff;
	padding:.95rem 1rem;border:0;border-radius:var(--wp--custom--radius--button);
	font-family:inherit;font-weight:700;font-size:1rem;line-height:1.1;
	text-transform:uppercase;letter-spacing:.02em;box-shadow:0 6px 16px rgba(200,16,46,.28)
}
.saasveld-mobile-cta__order:hover,.saasveld-mobile-cta__order:active{background:var(--wp--preset--color--primary-hover)}
.saasveld-mobile-cta__order .saasveld-cart-total,.saasveld-mobile-cta__order .woocommerce-Price-amount{color:#fff;font-weight:800;text-transform:none}
.saasveld-mobile-cta__arrow{font-size:1.15em;line-height:1}

/* Cart-pill (secundair, opent de drawer) — start-modus */
.saasveld-mobile-cta__cart{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem .9rem;border:1px solid var(--wp--preset--color--line);border-radius:var(--wp--custom--radius--button);color:var(--wp--preset--color--ink);text-decoration:none;font-weight:700;white-space:nowrap;background:var(--wp--preset--color--surface-muted)}
.saasveld-mobile-cta__ico{position:relative;display:inline-flex;align-items:center;color:var(--wp--preset--color--primary);line-height:0}
.saasveld-mobile-cta__ico .sv-cart-badge{position:absolute;top:-8px;right:-10px;min-width:17px;height:17px;display:grid;place-items:center;background:var(--wp--preset--color--primary);color:#fff;border-radius:999px;font-size:.62rem;font-weight:700;padding:0 4px;line-height:1}
.saasveld-mobile-cta__ico .sv-cart-badge .saasveld-cart-count{color:#fff}
.saasveld-mobile-cta__carttotal{font-size:.9rem}

/* Prijs (productpagina) */
.saasveld-mobile-cta__price{font-weight:800;font-size:1.15rem;color:var(--wp--preset--color--ink);white-space:nowrap;padding-left:.3rem;line-height:1.05}
.saasveld-mobile-cta__price del{opacity:.5;font-weight:600;font-size:.85em;margin-right:.25rem}
.saasveld-mobile-cta__price ins{text-decoration:none;color:var(--wp--preset--color--primary)}
.saasveld-mobile-cta__price .saasveld-price-suffix{display:none}

/* Review-balk (shop): icoon + label + totaal in één knop */
.saasveld-mobile-cta__review{justify-content:center;gap:.55rem;text-transform:none;letter-spacing:0}
.saasveld-mobile-cta__review .saasveld-mobile-cta__ico{color:#fff}
.saasveld-mobile-cta__review .sv-cart-badge{background:#fff;color:var(--wp--preset--color--primary)}
.saasveld-mobile-cta__review .sv-cart-badge .saasveld-cart-count{color:var(--wp--preset--color--primary)}
.saasveld-mobile-cta__reviewtotal{font-weight:800}

/* Verder-winkelen (lege winkelmand-modus) */
.saasveld-mobile-cta__continue{flex:1;text-align:center;text-decoration:none;color:var(--wp--preset--color--ink);font-weight:700;padding:.95rem 1rem;border:1px solid var(--wp--preset--color--line);border-radius:var(--wp--custom--radius--button);background:var(--wp--preset--color--surface-muted)}

/* Pulse-feedback bij toevoegen (shop-balk) */
@keyframes sv-cta-pulse{0%{transform:scale(1)}30%{transform:scale(1.04)}100%{transform:scale(1)}}
[data-sticky-cta].just-added .saasveld-mobile-cta__order{animation:sv-cta-pulse .45s ease}

/* Productbalk: compacte qty-stepper + knop met prijs (nette verhoudingen) */
.saasveld-mobile-cta--product{gap:.5rem}
.saasveld-mobile-cta__qty{display:inline-flex;align-items:center;flex:0 0 auto;background:var(--wp--preset--color--surface-muted);border:1px solid var(--wp--preset--color--line);border-radius:999px;overflow:hidden;height:52px}
.saasveld-mobile-cta__qtybtn{border:0;background:none;width:42px;height:52px;font-size:1.3rem;line-height:1;color:var(--wp--preset--color--ink);cursor:pointer;display:grid;place-items:center;transition:background .15s ease}
.saasveld-mobile-cta__qtybtn:active{background:var(--wp--preset--color--line)}
.saasveld-mobile-cta__qtyval{min-width:1.4rem;text-align:center;font-weight:800;font-size:1.05rem;font-variant-numeric:tabular-nums}
.saasveld-mobile-cta--product .saasveld-mobile-cta__order{justify-content:space-between;gap:.5rem;text-transform:none;letter-spacing:0;padding-inline:.9rem;min-height:52px;min-width:0;overflow:hidden}
.saasveld-mobile-cta__addlabel{font-weight:700;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.saasveld-mobile-cta--product .saasveld-mobile-cta__price{color:#fff;font-weight:800;font-size:1rem;padding:0;white-space:nowrap;line-height:1.1;flex:0 0 auto}
/* Gewicht-select in de productbalk (variabel product) — kies gram zonder te scrollen. */
/* [hidden]-guard: de display-regels hieronder winnen anders van het hidden-attribuut, waardoor
   een lege gewicht-box of de qty-stepper toch zichtbaar zou blijven. */
.saasveld-mobile-cta__weight[hidden],.saasveld-mobile-cta__qty[hidden]{display:none}
.saasveld-mobile-cta__weight{flex:0 1 auto;min-width:0;display:flex}
.saasveld-mobile-cta__weightsel{height:52px;max-width:7.5rem;min-width:0;border:1px solid var(--wp--preset--color--line);border-radius:var(--wp--custom--radius--button);background:var(--wp--preset--color--surface-muted);padding:0 1.9rem 0 .8rem;font:inherit;font-weight:700;font-size:.95rem;color:var(--wp--preset--color--ink);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5l4 4 4-4' stroke='%23c1121f' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .7rem center}

/* Micro-interacties: entree, actieve-druk, badge-pop (reduced-motion gerespecteerd) */
@keyframes sv-cta-slideup{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}
[data-sticky-cta].is-shown:not(.is-hidden){animation:sv-cta-slideup .32s cubic-bezier(.34,.9,.3,1)}
.saasveld-mobile-cta__order:active{transform:scale(.985)}
@keyframes sv-badge-pop{0%{transform:scale(1)}35%{transform:scale(1.55)}100%{transform:scale(1)}}
.sv-cart-badge.is-bumped{animation:sv-badge-pop .4s ease}

/* Zichtbaarheid + varianten — uitsluitend op mobiel */
@media (max-width:900px){
	[data-sticky-cta].is-shown{display:flex}
	body.saasveld-sticky-visible{padding-bottom:5rem}
	/* winkelmand-modus: checkout tonen als gevuld, 'verder winkelen' als leeg */
	.saasveld-mobile-cta--cart .saasveld-mobile-cta__continue{display:none}
	body.saasveld-cart-empty .saasveld-mobile-cta--cart .saasveld-mobile-cta__checkout{display:none}
	body.saasveld-cart-empty .saasveld-mobile-cta--cart .saasveld-mobile-cta__continue{display:flex}
	/* start-modus: cart-pill pas tonen als de mand gevuld is */
	body.saasveld-cart-empty .saasveld-mobile-cta--start .saasveld-mobile-cta__cart{display:none}
}