/* Mobile-first: base styles target small screens, desktop overrides at the bottom. */

.kx-bsc-offer {
	margin: 24px 0;
	padding: 16px;
	border-radius: 12px;
	background: #f7f9f7;
	box-sizing: border-box;
}
.kx-bsc-offer * {
	box-sizing: border-box;
}

.kx-bsc-eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: #059669;
	margin-bottom: 4px;
}
.kx-bsc-heading {
	font-size: 18px;
	line-height: 1.3;
	margin: 0 0 4px;
}
.kx-bsc-subheading {
	font-size: 14px;
	color: #555;
	margin: 0 0 16px;
}

/* ---- Compact progressive offer card — target mobile height ~130-180px:
       small cover + title/price in a row, one full-width CTA below. ---- */
.kx-bsc-offer--compact {
	margin: 16px 0;
	padding: 10px;
}
.kx-bsc-offer--compact .kx-bsc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px;
	margin-bottom: 0;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	text-align: left;
}
.kx-bsc-card__top {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
}
.kx-bsc-offer--compact .kx-bsc-card__image {
	flex: 0 0 auto;
	width: 56px;
}
.kx-bsc-offer--compact .kx-bsc-card__image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 6px;
}
.kx-bsc-offer--compact .kx-bsc-card__body {
	flex: 1 1 auto;
	min-width: 0;
}
.kx-bsc-offer--compact .kx-bsc-card__title {
	font-size: 13px;
	font-weight: 600;
	color: #111827;
	line-height: 1.3;
	margin-bottom: 2px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.kx-bsc-card__price {
	font-size: 15px;
	font-weight: 700;
	color: #059669;
}
.kx-bsc-card__price del {
	font-size: 12px;
	font-weight: 400;
	color: #9ca3af;
	margin-right: 6px;
}
.kx-bsc-card__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}
.kx-bsc-offer--compact .kx-bsc-cta {
	min-height: 38px;
	padding: 9px 12px;
	font-size: 13px;
}
.kx-bsc-reject {
	font-size: 11px;
	color: #9ca3af;
	text-decoration: underline;
}

.kx-bsc-card--bundle {
	border-color: #f59e0b;
	background: #fffbeb;
}

.kx-bsc-badge {
	position: absolute;
	top: -10px;
	left: 12px;
	background: #111827;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 999px;
}
.kx-bsc-badge--bundle {
	position: static;
	display: inline-block;
	background: #f59e0b;
	margin-bottom: 8px;
}

.kx-bsc-card__image {
	flex: 0 0 auto;
	width: 140px;
	max-width: 55%;
}
.kx-bsc-card__image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 6px;
}
.kx-bsc-card__images {
	display: flex;
	gap: 6px;
	margin-bottom: 8px;
}
.kx-bsc-card__image--small {
	width: 56px;
}

.kx-bsc-card__body {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	text-align: left;
}

.kx-bsc-card__title {
	display: block;
	font-weight: 600;
	font-size: 15px;
	color: #111827;
	text-decoration: none;
	margin-bottom: 4px;
	line-height: 1.3;
}

.kx-bsc-regular-price {
	font-size: 13px;
	color: #9ca3af;
	text-decoration: line-through;
	margin-bottom: 2px;
}

.kx-bsc-offer-label {
	font-size: 12px;
	color: #555;
	margin-top: 4px;
}

.kx-bsc-offer-price {
	font-size: 24px;
	font-weight: 800;
	color: #059669;
	line-height: 1.1;
	margin: 2px 0 6px;
}

.kx-bsc-savings {
	font-size: 13px;
	color: #b45309;
	margin-bottom: 6px;
}

.kx-bsc-cta {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 12px 16px;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	background: #059669;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	text-align: center;
}
.kx-bsc-cta:hover {
	background: #047857;
}
.kx-bsc-cta.kx-bsc-loading {
	opacity: 0.6;
	pointer-events: none;
}
.kx-bsc-add--bundle {
	background: #f59e0b;
}
.kx-bsc-add--bundle:hover {
	background: #d97706;
}

.kx-bsc-urgency {
	font-size: 12px;
	color: #6b7280;
	text-align: center;
	margin-top: 8px;
}

.kx-bsc-message {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	font-size: 13px;
	text-align: center;
	padding: 0;
	border-radius: 6px;
	background: #ecfdf5;
	color: #065f46;
	transition: all 0.2s ease;
}
.kx-bsc-message--visible {
	max-height: 60px;
	opacity: 1;
	padding: 8px;
	margin-top: 8px;
}
.kx-bsc-message--error {
	background: #fef2f2;
	color: #991b1b;
}
.kx-bsc-message--toast {
	position: fixed;
	left: 50%;
	bottom: 16px;
	transform: translateX( -50% );
	z-index: 9999;
	max-width: 90vw;
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.15 );
}
.kx-bsc-message--toast.kx-bsc-message--visible {
	max-height: none;
}

.kx-bsc-cart-badge {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	background: #111827;
	color: #fff;
	padding: 2px 6px;
	border-radius: 999px;
	margin-left: 4px;
}

/* ---- Legacy (non-compact) card — still used by the admin preview's
       escape-hatch fallbacks and preserved for back-compat. ---- */
@media ( min-width: 768px ) {
	.kx-bsc-offer:not( .kx-bsc-offer--compact ) .kx-bsc-card {
		flex-direction: row;
		align-items: flex-start;
		text-align: left;
		padding: 16px;
	}
	.kx-bsc-offer:not( .kx-bsc-offer--compact ) .kx-bsc-card__image {
		width: 110px;
		max-width: none;
	}
}

/* ---- Compact card on desktop: single row — cover, title+price, CTA. ---- */
@media ( min-width: 768px ) {
	.kx-bsc-offer--compact .kx-bsc-card {
		flex-direction: row;
		align-items: center;
	}
	.kx-bsc-offer--compact .kx-bsc-card__top {
		flex: 1 1 auto;
	}
	.kx-bsc-card__actions {
		flex-direction: row;
		gap: 12px;
		flex: 0 0 auto;
	}
	.kx-bsc-offer--compact .kx-bsc-cta {
		width: auto;
		min-width: 180px;
	}
}

/* ------------------------------------------------------------------
 * Cart page layout — items, then clean totals + CTA, then the compact
 * upsell, in that order on mobile (the customer never has to scroll past
 * the upsell to reach checkout). Desktop restores the familiar two-column
 * layout: items on the left, everything else stacked in a right sidebar.
 * ------------------------------------------------------------------ */
.kx-bsc-cart-layout {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.kx-bsc-cart-main {
	order: 1;
	min-width: 0;
}
.kx-bsc-cart-side {
	order: 2;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.kx-bsc-totals-wrap { order: 2; }
.kx-bsc-upsell-slot { order: 1; }

@media ( min-width: 992px ) {
	.kx-bsc-cart-layout {
		flex-direction: row;
		align-items: flex-start;
	}
	.kx-bsc-cart-main {
		flex: 1 1 auto;
	}
	.kx-bsc-cart-side {
		flex: 0 0 360px;
		width: 360px;
		position: sticky;
		top: 24px;
	}
}

/* ---- Clean totals block, replacing WooCommerce's default "Totalen
       winkelwagen" presentation. ---- */
.kx-bsc-totals {
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 16px;
	font-size: 14px;
}
.kx-bsc-totals__row {
	display: flex;
	justify-content: space-between;
	padding: 4px 0;
	color: #374151;
}
.kx-bsc-totals__row--discount span:last-child,
.kx-bsc-totals__row--coupon span:last-child {
	color: #b45309;
}
.kx-bsc-totals__divider {
	border-top: 1px solid #e5e7eb;
	margin: 8px 0;
}
.kx-bsc-totals__row--total {
	font-size: 17px;
	font-weight: 800;
	color: #111827;
}

.kx-bsc-checkout-cta {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin-top: 12px;
	padding: 14px 16px;
	min-height: 48px;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	color: #fff;
	background: #111827;
	border-radius: 8px;
	text-decoration: none;
}
.kx-bsc-checkout-cta:hover {
	background: #000;
	color: #fff;
}

/* Keep each unit price visible even when the theme hides mobile price columns. */
.kx-bsc-cart-layout td.product-price { display: table-cell !important; }
.kx-bsc-coupon-form { order: 3; width: 100%; margin: 0; }
.kx-bsc-coupon-form .coupon { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kx-bsc-coupon-form input { flex: 1; min-width: 120px; }
.kx-bsc-cart-notices { width: 100%; }
.kx-bsc-cart-notices:empty { display: none; }
.kx-bsc-cart-layout[aria-busy="true"] { opacity: .65; }
@media (min-width: 992px) {
  .kx-bsc-cart-layout { flex-wrap: wrap; }
  .kx-bsc-cart-main { flex-basis: calc(100% - 384px); }
}
@media (max-width: 767px) {
  .kx-bsc-cart-layout td.product-price { display: block !important; font-weight: 700; }
}

/* Owned card layout overrides theme floats and the earlier compact desktop row.
   All adjustable dimensions are supplied by the Display & Text settings. */
.kx-bsc-upsell-slot { width: 100%; min-width: 0; clear: both; }
.kx-bsc-offer.kx-bsc-offer--compact {
  display: block; float: none; clear: both; width: 100%;
  max-width: var(--kx-card-max-width); margin: 0 auto;
  padding: var(--kx-card-padding); height: auto; overflow: visible;
}
.kx-bsc-offer.kx-bsc-offer--compact .kx-bsc-card {
  display: flex; flex-direction: column; align-items: stretch;
  gap: var(--kx-card-gap); width: 100%; min-width: 0;
  height: auto; max-height: none; padding: 0; border: 0;
  background: transparent; overflow: visible; float: none;
}
.kx-bsc-offer.kx-bsc-offer--compact .kx-bsc-card__top {
  display: grid; grid-template-columns: min(var(--kx-card-cover-width), 30%) minmax(0, 1fr);
  align-items: center; gap: var(--kx-card-gap); width: 100%; min-width: 0;
}
.kx-bsc-offer.kx-bsc-offer--compact .kx-bsc-card__image {
  width: 100%; max-width: 100%; margin: 0; float: none;
}
.kx-bsc-offer.kx-bsc-offer--compact .kx-bsc-card__body { width: auto; min-width: 0; }
.kx-bsc-offer.kx-bsc-offer--compact .kx-bsc-card__title {
  display: block; -webkit-line-clamp: unset; -webkit-box-orient: initial;
  font-size: var(--kx-card-title-size); line-height: var(--kx-card-title-line-height);
  white-space: normal; overflow-wrap: anywhere; word-break: normal;
  text-overflow: clip; overflow: visible; height: auto; max-height: none;
}
.kx-bsc-offer.kx-bsc-offer--compact .kx-bsc-card__actions {
  display: block; width: 100%; min-width: 0;
}
.kx-bsc-offer.kx-bsc-offer--compact .kx-bsc-cta {
  width: 100%; min-width: 0; min-height: var(--kx-card-button-height);
  font-size: var(--kx-card-button-size); white-space: normal; overflow-wrap: anywhere;
}
.kx-bsc-cart-layout .kx-bsc-cart-main,
.kx-bsc-cart-layout .kx-bsc-cart-side { width: 100%; min-width: 0; }
.kx-bsc-cart-main .woocommerce-cart-form { display: block; width: 100%; float: none; }
.kx-bsc-cart-side > :not(.kx-bsc-upsell-slot):not(.kx-bsc-totals-wrap) { order: 3; }
@media (min-width: 992px) {
  .kx-bsc-cart-layout .kx-bsc-cart-main { width: auto; flex: 1 1 calc(100% - 384px); }
  .kx-bsc-cart-layout .kx-bsc-cart-side { width: 360px; flex: 0 0 360px; }
}

/* Clear offer identity above the book, separate from the product title. */
.kx-bsc-offer.kx-bsc-offer--compact {
  border: 2px solid #059669;
  background: #f0fdf4;
}
.kx-bsc-offer--compact .kx-bsc-card__offer-header {
  width: 100%; padding-bottom: var(--kx-card-gap);
  border-bottom: 1px solid #bbf7d0; text-align: left;
}
.kx-bsc-offer--compact .kx-bsc-card__offer-heading {
  margin: 0 0 6px; font-size: calc(var(--kx-card-title-size) + 3px);
  line-height: 1.3; font-weight: 800; color: #065f46;
  text-transform: none; white-space: normal; overflow-wrap: anywhere;
}
.kx-bsc-offer--compact .kx-bsc-card__offer-note {
  margin: 0; font-size: var(--kx-card-title-size); line-height: 1.4;
  font-weight: 600; color: #92400e; white-space: normal; overflow-wrap: anywhere;
}

/* Keep coupon and payment widgets in separate document-flow rows. A tall
   sticky sidebar could overlap the coupon as the customer scrolled. */
.kx-bsc-cart-layout {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 24px; align-items: start;
}
.kx-bsc-cart-layout .kx-bsc-cart-main,
.kx-bsc-cart-layout .kx-bsc-cart-side {
  width: 100%; min-width: 0; position: static; top: auto;
}
.kx-bsc-cart-notices { grid-column: 1 / -1; }
.kx-bsc-cart-layout .kx-bsc-coupon-form {
  grid-column: 1 / -1; width: 100%; min-width: 0;
  position: static; float: none; clear: both; margin: 0;
  padding-top: 16px; border-top: 1px solid #e5e7eb;
}
.kx-bsc-coupon-form .coupon {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 12px; width: 100%; min-width: 0;
  position: static; float: none;
}
.kx-bsc-coupon-form .coupon > label,
.kx-bsc-coupon-form .coupon > input,
.kx-bsc-coupon-form .coupon > button {
  position: static !important; float: none !important;
  transform: none !important; margin: 0 !important;
  min-width: 0; max-width: 100%; height: auto;
}
.kx-bsc-coupon-form .coupon > input { width: 100% !important; }
.kx-bsc-coupon-form .coupon > button { width: auto; white-space: normal; }
@media (min-width: 992px) {
  .kx-bsc-cart-layout { grid-template-columns: minmax(0, 1fr) 360px; }
}
@media (max-width: 600px) {
  .kx-bsc-coupon-form .coupon { grid-template-columns: minmax(0, 1fr); }
  .kx-bsc-coupon-form .coupon > button { width: 100%; }
}
/* Keep the plugin CTA; suppress the theme's duplicate cart checkout link.
   These rules apply only on the cart, preserving checkout order submission. */
body.woocommerce-cart .checkout-button:not(.kx-bsc-checkout-cta),
body.woocommerce-cart .wc-proceed-to-checkout a.button.wc-forward:not(.kx-bsc-checkout-cta) {
  display: none !important;
}

.kx-bsc-offer--compact a.kx-bsc-card__product-link { text-decoration: none; }
.kx-bsc-offer--compact a.kx-bsc-card__title:hover { color: #047857; text-decoration: underline; }
.kx-bsc-offer--compact a.kx-bsc-card__product-link:focus-visible {
  outline: 2px solid #047857; outline-offset: 3px; border-radius: 4px;
}
.kx-bsc-offer--compact .kx-bsc-card__image a { display: block; }