/**
 * sb-frontend.css — Smart Bundle Builder
 * All rules scoped under #sb-bundle-builder to prevent theme interference.
 * Critical layout rules are ALSO injected inline via wp_add_inline_style.
 */

/* ── Variables ── */
:root {
	--sb-blue      : #2271b1;
	--sb-blue-dk   : #135e96;
	--sb-blue-lt   : #dbeafe;
	--sb-green     : #16a34a;
	--sb-green-lt  : #dcfce7;
	--sb-red       : #dc2626;
	--sb-border    : #e5e7eb;
	--sb-bg        : #ffffff;
	--sb-bg-grey   : #f9fafb;
	--sb-text      : #111827;
	--sb-muted     : #6b7280;
	--sb-radius    : 10px;
	--sb-radius-sm : 6px;
	--sb-shadow    : 0 1px 3px rgba(0,0,0,.10),0 1px 2px rgba(0,0,0,.06);
	--sb-shadow-lg : 0 4px 16px rgba(0,0,0,.13);
	--sb-ease      : 0.17s ease;
}

/* ────────────────────────────────────────────────────────────
   Wrapper
   ──────────────────────────────────────────────────────────── */
#sb-bundle-builder {
	width       : 100%;
	box-sizing  : border-box;
	margin      : 20px 0 40px;
	font-family : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color       : var(--sb-text);
}

/* ────────────────────────────────────────────────────────────
   Instructions bar
   ──────────────────────────────────────────────────────────── */
#sb-bundle-builder .sb-instructions {
	background    : var(--sb-blue-lt);
	border        : 1px solid #bfdbfe;
	border-radius : var(--sb-radius-sm);
	padding       : 10px 14px;
	margin-bottom : 18px;
}
#sb-bundle-builder .sb-instructions p {
	margin      : 0;
	font-size   : 13px;
	color       : var(--sb-blue-dk);
	font-weight : 500;
	line-height : 1.4;
}

/* ────────────────────────────────────────────────────────────
   Grid
   ──────────────────────────────────────────────────────────── */
#sb-bundle-builder .sb-product-list {
	display               : grid;
	grid-template-columns : repeat(3, 1fr);
	gap                   : 14px;
	width                 : 100%;
	list-style            : none;
	padding               : 0;
	margin                : 0;
}

/* ────────────────────────────────────────────────────────────
   Card
   ──────────────────────────────────────────────────────────── */
#sb-bundle-builder .sb-card {
	display        : flex;
	flex-direction : column;
	border         : 2px solid var(--sb-border);
	border-radius  : var(--sb-radius);
	overflow       : hidden;
	background     : var(--sb-bg);
	box-shadow     : var(--sb-shadow);
	cursor         : pointer;
	transition     : border-color var(--sb-ease), box-shadow var(--sb-ease), transform var(--sb-ease);
	box-sizing     : border-box;
}
#sb-bundle-builder .sb-card:hover {
	border-color : #93c5fd;
	box-shadow   : var(--sb-shadow-lg);
	transform    : translateY(-2px);
}
#sb-bundle-builder .sb-card.is-selected {
	border-color : var(--sb-green);
	box-shadow   : 0 0 0 3px rgba(22,163,74,.18), var(--sb-shadow-lg);
	transform    : translateY(-2px);
}

/* ────────────────────────────────────────────────────────────
   Image block — square via aspect-ratio
   ──────────────────────────────────────────────────────────── */
#sb-bundle-builder .sb-card__img-wrap {
	position     : relative;
	width        : 100%;
	aspect-ratio : 1 / 1;
	overflow     : hidden;
	background   : var(--sb-bg-grey);
	flex-shrink  : 0;
}
#sb-bundle-builder .sb-card__img {
	width      : 100%;
	height     : 100%;
	object-fit : cover;
	display    : block;
	transition : transform var(--sb-ease);
}
#sb-bundle-builder .sb-card:hover .sb-card__img {
	transform : scale(1.04);
}

/* Green tick overlay */
#sb-bundle-builder .sb-card__tick {
	position         : absolute;
	inset            : 0;
	background       : rgba(22,163,74,.15);
	display          : flex;
	align-items      : center;
	justify-content  : center;
	opacity          : 0;
	transition       : opacity var(--sb-ease);
	pointer-events   : none;
}
#sb-bundle-builder .sb-card__tick svg {
	width         : 44px;
	height        : 44px;
	background    : var(--sb-green);
	border-radius : 50%;
	padding       : 8px;
	box-shadow    : 0 2px 10px rgba(0,0,0,.25);
	transform     : scale(.4);
	transition    : transform .22s cubic-bezier(.34,1.56,.64,1);
}
#sb-bundle-builder .sb-card.is-selected .sb-card__tick     { opacity: 1; }
#sb-bundle-builder .sb-card.is-selected .sb-card__tick svg { transform: scale(1); }

/* ────────────────────────────────────────────────────────────
   Card info
   ──────────────────────────────────────────────────────────── */
#sb-bundle-builder .sb-card__info {
	display        : flex;
	flex-direction : column;
	gap            : 8px;
	padding        : 10px;
	flex           : 1;
}

/* Name — clamp 2 lines */
#sb-bundle-builder .sb-card__name {
	margin             : 0;
	font-size          : 13px;
	font-weight        : 600;
	line-height        : 1.35;
	color              : var(--sb-text);
	display            : -webkit-box;
	-webkit-line-clamp : 2;
	-webkit-box-orient : vertical;
	overflow           : hidden;
}

/* ────────────────────────────────────────────────────────────
   Variation selects
   ──────────────────────────────────────────────────────────── */
#sb-bundle-builder .sb-card__selects {
	display        : flex;
	flex-direction : column;
	gap            : 6px;
}
#sb-bundle-builder .sb-card__select-wrap {
	display        : flex;
	flex-direction : column;
	gap            : 2px;
}
#sb-bundle-builder .sb-card__select-label {
	font-size      : 10px;
	font-weight    : 600;
	color          : var(--sb-muted);
	text-transform : uppercase;
	letter-spacing : .05em;
}
#sb-bundle-builder .sb-card__select-label em {
	color       : var(--sb-red);
	font-style  : normal;
	margin-left : 2px;
}
#sb-bundle-builder .sb-var-select {
	width               : 100% !important;
	padding             : 5px 26px 5px 7px !important;
	font-size           : 12px !important;
	border              : 1px solid var(--sb-border) !important;
	border-radius       : var(--sb-radius-sm) !important;
	background-color    : var(--sb-bg) !important;
	background-image    : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
	background-repeat   : no-repeat !important;
	background-position : right 7px center !important;
	-webkit-appearance  : none !important;
	appearance          : none !important;
	color               : var(--sb-text) !important;
	line-height         : 1.3 !important;
	cursor              : pointer;
	box-shadow          : none !important;
	box-sizing          : border-box !important;
}
#sb-bundle-builder .sb-var-select:focus {
	outline      : none !important;
	border-color : var(--sb-blue) !important;
	box-shadow   : 0 0 0 2px rgba(34,113,177,.2) !important;
}

/* Status line */
#sb-bundle-builder .sb-card__var-status {
	min-height  : 16px;
	font-size   : 11px;
	font-weight : 600;
	line-height : 1.3;
}
#sb-bundle-builder .sb-status-checking { color: var(--sb-muted); font-weight: 400; font-style: italic; }
#sb-bundle-builder .sb-status-ok       { color: var(--sb-green); }
#sb-bundle-builder .sb-status-err      { color: var(--sb-red); }

/* ────────────────────────────────────────────────────────────
   Card bottom: price + stepper
   ──────────────────────────────────────────────────────────── */
#sb-bundle-builder .sb-card__bottom {
	display         : flex;
	align-items     : center;
	justify-content : space-between;
	gap             : 6px;
	padding-top     : 8px;
	border-top      : 1px solid var(--sb-border);
	margin-top      : auto;
	flex-wrap       : wrap;
}
#sb-bundle-builder .sb-card__price {
	font-size   : 14px;
	font-weight : 700;
	color       : var(--sb-text);
	line-height : 1;
}
#sb-bundle-builder .sb-card__price * { font-size: inherit !important; }

/* Qty stepper */
#sb-bundle-builder .sb-card__stepper {
	display       : flex;
	align-items   : center;
	border        : 1px solid var(--sb-border);
	border-radius : var(--sb-radius-sm);
	overflow      : hidden;
	flex-shrink   : 0;
}
#sb-bundle-builder .sb-q-btn {
	width           : 28px !important;
	height          : 28px !important;
	min-width       : 28px !important;
	min-height      : 28px !important;
	padding         : 0 !important;
	margin          : 0 !important;
	border          : none !important;
	border-radius   : 0 !important;
	background      : var(--sb-bg-grey) !important;
	color           : var(--sb-text) !important;
	font-size       : 18px !important;
	line-height     : 1 !important;
	font-weight     : 400 !important;
	cursor          : pointer;
	display         : flex !important;
	align-items     : center !important;
	justify-content : center !important;
	box-shadow      : none !important;
	outline         : none !important;
	text-shadow     : none !important;
	flex-shrink     : 0 !important;
	transition      : background var(--sb-ease), color var(--sb-ease);
}
#sb-bundle-builder .sb-q-btn:hover {
	background : var(--sb-blue-lt) !important;
	color      : var(--sb-blue) !important;
}
#sb-bundle-builder .sb-q-input {
	width         : 34px !important;
	height        : 28px !important;
	border        : none !important;
	border-left   : 1px solid var(--sb-border) !important;
	border-right  : 1px solid var(--sb-border) !important;
	border-radius : 0 !important;
	padding       : 0 !important;
	margin        : 0 !important;
	text-align    : center !important;
	font-size     : 13px !important;
	font-weight   : 600 !important;
	box-shadow    : none !important;
	background    : var(--sb-bg) !important;
	color         : var(--sb-text) !important;
	-moz-appearance : textfield !important;
	box-sizing    : border-box !important;
}
#sb-bundle-builder .sb-q-input::-webkit-inner-spin-button,
#sb-bundle-builder .sb-q-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ────────────────────────────────────────────────────────────
   Messages
   ──────────────────────────────────────────────────────────── */
#sb-bundle-builder .sb-messages { margin: 10px 0 4px; }
#sb-bundle-builder .sb-msg {
	padding       : 9px 14px;
	border-radius : var(--sb-radius-sm);
	font-size     : 13px;
	font-weight   : 500;
	line-height   : 1.45;
}
#sb-bundle-builder .sb-msg--error   { background:#fef2f2; border:1px solid #fecaca; color:var(--sb-red); }
#sb-bundle-builder .sb-msg--success { background:var(--sb-green-lt); border:1px solid #86efac; color:var(--sb-green); }
#sb-bundle-builder .sb-msg--success a { color:var(--sb-green); font-weight:700; }

/* ────────────────────────────────────────────────────────────
   Footer
   ──────────────────────────────────────────────────────────── */
#sb-bundle-builder .sb-footer {
	position        : sticky;
	bottom          : 0;
	z-index         : 300;
	display         : flex;
	align-items     : center;
	justify-content : space-between;
	gap             : 12px;
	flex-wrap       : wrap;
	background      : var(--sb-bg);
	border          : 1px solid var(--sb-border);
	border-radius   : var(--sb-radius);
	padding         : 12px 16px;
	margin-top      : 20px;
	box-shadow      : 0 -4px 20px rgba(0,0,0,.10);
	box-sizing      : border-box;
}
#sb-bundle-builder .sb-footer__summary {
	display     : flex;
	align-items : baseline;
	gap         : 12px;
	flex-wrap   : wrap;
}
#sb-bundle-builder .sb-footer__count       { font-size:13px; color:var(--sb-muted); font-weight:500; }
#sb-bundle-builder .sb-footer__total       { display:flex; align-items:baseline; gap:6px; }
#sb-bundle-builder .sb-footer__total-label { font-size:13px; font-weight:600; color:var(--sb-text); }
#sb-bundle-builder .sb-footer__total-price { font-size:22px; font-weight:800; color:var(--sb-blue-dk); }

#sb-bundle-builder .sb-btn-add-to-cart {
	padding       : 11px 24px !important;
	font-size     : 15px !important;
	font-weight   : 700 !important;
	border-radius : var(--sb-radius-sm) !important;
	white-space   : nowrap !important;
	min-width     : 160px;
	text-align    : center;
	transition    : opacity var(--sb-ease), transform var(--sb-ease);
	cursor        : pointer;
}
#sb-bundle-builder .sb-btn-add-to-cart:not(:disabled):hover { transform: translateY(-1px); }
#sb-bundle-builder .sb-btn-add-to-cart:disabled {
	opacity : 0.38 !important;
	cursor  : not-allowed !important;
}

/* ────────────────────────────────────────────────────────────
   Hide default WC elements — SINGLE PRODUCT PAGE ONLY
   Prefixed with .single-product so these rules NEVER apply
   on shop/archive/category pages even if body has
   product_type_smart_bundle class.
   ──────────────────────────────────────────────────────────── */
.single-product.product_type_smart_bundle form.cart.sb-bundle-form { display:none !important; }
.single-product.product_type_smart_bundle .summary .price:first-of-type { display:none !important; }
.single-product.product_type_smart_bundle .single_add_to_cart_button:not(.sb-btn-add-to-cart) { display:none !important; }

/* ────────────────────────────────────────────────────────────
   Responsive
   ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
	#sb-bundle-builder .sb-product-list { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
	#sb-bundle-builder .sb-footer { flex-direction:column; align-items:stretch; }
	#sb-bundle-builder .sb-footer__summary { justify-content:space-between; }
	#sb-bundle-builder .sb-btn-add-to-cart { width:100%; min-width:unset; }
}
@media (min-width: 481px) and (max-width: 699px) {
	#sb-bundle-builder .sb-product-list { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (min-width: 700px) {
	#sb-bundle-builder .sb-product-list { grid-template-columns: repeat(4, 1fr) !important; }
}

/* Cart bundle item list */
.sb-cart-bundle-items { list-style:none; padding:4px 0 0; margin:0; }
.sb-cart-bundle-item  { font-size:12px; color:#6b7280; padding:2px 0; display:flex; gap:4px; }
.sb-item-qty          { font-weight:600; color:#2271b1; }

/* ── Toggle button (Add / Remove) ── */
#sb-bundle-builder .sb-toggle-btn {
	display         : block !important;
	width           : 100% !important;
	margin-top      : 8px !important;
	padding         : 7px 10px !important;
	font-size       : 13px !important;
	font-weight     : 600 !important;
	text-align      : center !important;
	border-radius   : var(--sb-radius-sm) !important;
	border          : 2px solid var(--sb-blue) !important;
	background      : transparent !important;
	color           : var(--sb-blue) !important;
	cursor          : pointer !important;
	transition      : background var(--sb-ease), color var(--sb-ease) !important;
	box-shadow      : none !important;
	line-height     : 1.3 !important;
}
#sb-bundle-builder .sb-toggle-btn:hover:not(:disabled) {
	background : var(--sb-blue) !important;
	color      : #fff !important;
}
#sb-bundle-builder .sb-toggle-btn--added {
	background : var(--sb-green) !important;
	border-color: var(--sb-green) !important;
	color      : #fff !important;
}
#sb-bundle-builder .sb-toggle-btn--added:hover {
	background : #dc2626 !important;
	border-color: #dc2626 !important;
	color      : #fff !important;
}
#sb-bundle-builder .sb-toggle-btn:disabled {
	opacity : 0.4 !important;
	cursor  : not-allowed !important;
}

/* Move price above the toggle button */
#sb-bundle-builder .sb-card__price {
	font-size   : 14px;
	font-weight : 700;
	color       : var(--sb-text);
	margin-top  : 4px;
}

/* ── IMPROVEMENT 6: Mobile sticky footer — padding so last card isn't hidden ── */
@media (max-width: 768px) {
	#sb-bundle-builder .sb-product-list {
		padding-bottom : 90px; /* approx footer height */
	}
}

/* ── IMPROVEMENT 4: Cart bundle collapsible display ── */
.sb-cart-bundle {
	margin-top : 4px;
}

.sb-cart-toggle {
	background    : none !important;
	border        : none !important;
	padding       : 2px 0 !important;
	font-size     : 12px !important;
	color         : #2271b1 !important;
	cursor        : pointer !important;
	text-decoration: underline;
	box-shadow    : none !important;
	font-weight   : 500 !important;
	line-height   : 1.4 !important;
	display       : inline-block !important;
}
.sb-cart-toggle:hover { color: #135e96 !important; }

.sb-cart-bundle-items {
	list-style  : none;
	padding     : 6px 0 0 4px;
	margin      : 0;
}

.sb-cart-bundle-item {
	font-size   : 12px;
	color       : #6b7280;
	padding     : 3px 0;
	display     : flex;
	flex-wrap   : wrap;
	align-items : baseline;
	gap         : 4px;
	line-height : 1.4;
}

.sb-item-qty {
	font-weight : 700;
	color       : #2271b1;
	flex-shrink : 0;
}

.sb-item-name {
	font-weight : 500;
	color       : #374151;
}

.sb-item-attrs {
	color       : #6b7280;
	font-size   : 11px;
}

/* ── IMPROVEMENT 5: Out of stock badge on cards ── */
#sb-bundle-builder .sb-card--out-of-stock {
	opacity : 0.6;
	pointer-events : none;
}
#sb-bundle-builder .sb-card--out-of-stock .sb-toggle-btn {
	background   : #e5e7eb !important;
	border-color : #e5e7eb !important;
	color        : #9ca3af !important;
	cursor       : not-allowed !important;
}

/* ── Progress bar ── */
#sb-bundle-builder .sb-progress-wrap {
	margin        : 0 0 16px;
	padding       : 12px 14px;
	background    : #f9fafb;
	border        : 1px solid #e5e7eb;
	border-radius : 8px;
}
#sb-bundle-builder .sb-progress-bar {
	height        : 8px;
	background    : #e5e7eb;
	border-radius : 99px;
	overflow      : hidden;
	margin-bottom : 6px;
}
#sb-bundle-builder .sb-progress-fill {
	height     : 100%;
	background : #2271b1;
	border-radius : 99px;
	transition : width 0.35s cubic-bezier(0.4,0,0.2,1), background 0.2s;
}
#sb-bundle-builder .sb-progress-fill--complete {
	background : #16a34a;
}
#sb-bundle-builder .sb-progress-text {
	margin      : 0;
	font-size   : 12px;
	font-weight : 500;
	color       : #6b7280;
	line-height : 1.3;
}

/* ── Savings badge in footer ── */
#sb-bundle-builder .sb-footer__savings {
	display     : flex;
	align-items : center;
	gap         : 5px;
	font-size   : 13px;
	color       : #16a34a;
	font-weight : 600;
	background  : #dcfce7;
	padding     : 3px 10px;
	border-radius : 99px;
	white-space : nowrap;
}
#sb-bundle-builder .sb-footer__savings-amount {
	font-weight : 800;
}
#sb-bundle-builder .sb-footer__savings .woocommerce-Price-amount {
	font-size : inherit;
	color     : inherit;
}