/* ==========================================================================
   LAKASG Bundle Widget — clean rewrite
   All values use box-sizing:border-box and minmax(0,1fr) grid columns.
   ========================================================================== */

/* ── Universal box model ─────────────────────────────────────────────────── */
.lakasg-bundles-wrap,
.lakasg-bundles-wrap * {
	box-sizing: border-box;
}

/* ── Outer wrap ──────────────────────────────────────────────────────────── */
.lakasg-bundles-wrap {
	width: 100%;
	max-width: 100%;
	overflow: hidden;          /* clip any child that escapes */
	contain: layout paint;     /* isolated rendering context  */
}

/* Also clip the Elementor widget container */
.elementor-widget-lakasg_bundle,
.elementor-widget-lakasg_bundle .elementor-widget-container {
	max-width: 100%;
	overflow: hidden;
}

/* ── Grid ────────────────────────────────────────────────────────────────── */
/* Default: 1 column — minmax(0,1fr) is critical to prevent content-driven overflow */
.lakasg-bundles-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	width: 100%;
}

/* 2-column desktop */
.lakasg-bundles-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 3-column desktop */
.lakasg-bundles-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Tablet overrides (set by widget Columns — Tablet control) */
@media (max-width: 1024px) {
	.lakasg-bundles-grid--t2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.lakasg-bundles-grid--t3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	/* Without explicit tablet class: collapse 3-col to 2-col */
	.lakasg-bundles-grid--3:not([class*="--t"]) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Mobile overrides (set by widget Columns — Mobile control) */
@media (max-width: 767px) {
	.lakasg-bundles-grid--m2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	/* Default: everything is 1 column on mobile */
	.lakasg-bundles-grid:not(.lakasg-bundles-grid--m2) {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── Cards ────────────────────────────────────────────────────────────────── */
.lakasg-bundle-card {
	/* Absolutely constrain to grid column */
	width: 100%;
	min-width: 0;
	overflow: hidden;
	/* Visual */
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 20px;
	cursor: pointer;
	transition: border-color 200ms, box-shadow 200ms;
	display: flex;
	flex-direction: column;
	gap: 12px;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}

.lakasg-bundle-card:hover {
	border-color: #9ca3af;
}

.lakasg-bundle-card.is-selected {
	border-color: var(--lakasg-bundle-active-color, #111827);
	box-shadow: inset 0 0 0 2px var(--lakasg-bundle-active-color, #111827);
}

/* ── Card header ─────────────────────────────────────────────────────────── */
.lakasg-bundle-header {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
}

.lakasg-bundle-header--right { flex-direction: row-reverse; }

.lakasg-bundle-header-main {
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

/* ── Radio indicator ─────────────────────────────────────────────────────── */
.lakasg-bundle-radio {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid #d1d5db;
	margin-top: 2px;
	transition: border-color 200ms;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lakasg-bundle-radio::after {
	content: '';
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--lakasg-bundle-active-color, #111827);
	opacity: 0;
	transition: opacity 200ms;
}

.lakasg-bundle-card.is-selected .lakasg-bundle-radio {
	border-color: var(--lakasg-bundle-active-color, #111827);
}

.lakasg-bundle-card.is-selected .lakasg-bundle-radio::after {
	opacity: 1;
}

/* ── Bundle name ─────────────────────────────────────────────────────────── */
.lakasg-bundle-name {
	margin: 0 0 4px;
	font-size: 1.05rem;
	font-weight: 700;
	color: #111827;
	line-height: 1.3;
	/* Always wrap — never overflow */
	word-break: break-word;
	overflow-wrap: break-word;
	hyphens: auto;
	overflow: hidden;
}

/* ── Prices ──────────────────────────────────────────────────────────────── */
.lakasg-bundle-prices {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px;
}

.lakasg-bundle-price {
	font-size: 1.15rem;
	font-weight: 700;
	color: #111827;
}

.lakasg-bundle-orig-price {
	font-size: 0.9rem;
	color: #9ca3af;
	text-decoration: line-through;
}

/* ── Badges ──────────────────────────────────────────────────────────────── */
.lakasg-bundle-badge {
	display: inline-block;
	background: #111827;
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 99px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	/* Cap to card width */
	max-width: 100%;
	white-space: normal;
	word-break: break-word;
}

.lakasg-bundle-saving {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: #dcfce7;
	color: #166534;
	font-size: 0.8rem;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 99px;
	max-width: 100%;
}

/* ── Description ─────────────────────────────────────────────────────────── */
.lakasg-bundle-description {
	font-size: 0.9rem;
	color: #6b7280;
	margin: 0;
	line-height: 1.5;
	word-break: break-word;
	overflow-wrap: break-word;
}

/* ── Component products ──────────────────────────────────────────────────── */
.lakasg-bundle-products {
	border-top: 1px solid #f3f4f6;
	padding-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	/* Prevent any product row from expanding the card */
	overflow: hidden;
	min-width: 0;
}

.lakasg-bundle-product {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	overflow: hidden;
}

.lakasg-bundle-product-img {
	width: 40px;
	height: 40px;
	min-width: 40px;          /* don't collapse the image */
	object-fit: cover;
	border-radius: 4px;
	background: #f3f4f6;
}

.lakasg-bundle-product-info {
	flex: 1;
	min-width: 0;             /* allow shrinking below content size */
	overflow: hidden;
}

/* Desktop: truncate long names with ellipsis */
.lakasg-bundle-product-name {
	font-size: 0.88rem;
	font-weight: 600;
	color: #374151;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lakasg-bundle-product-note {
	font-size: 0.8rem;
	color: #9ca3af;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lakasg-bundle-product-price {
	font-size: 0.88rem;
	font-weight: 600;
	color: #374151;
	white-space: nowrap;
	flex-shrink: 0;
}

/* Mobile: let names wrap instead of truncating */
@media (max-width: 767px) {
	.lakasg-bundle-product-name,
	.lakasg-bundle-product-note {
		white-space: normal;
		overflow: visible;
		text-overflow: unset;
		word-break: break-word;
		overflow-wrap: break-word;
	}

	/* Price drops below on very narrow screens */
	.lakasg-bundle-product {
		flex-wrap: wrap;
		align-items: flex-start;
	}

	.lakasg-bundle-product-price {
		flex: 0 0 100%;
		text-align: right;
	}
}

/* ── Summary panel (sticky bottom) ──────────────────────────────────────── */
.lakasg-bundle-summary {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	background: #111827;
	color: #fff;
	padding: 16px 20px;
	padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	transform: translateY(100%);
	transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.25);
	/* Never cause horizontal scroll */
	width: 100%;
	max-width: 100vw;
	overflow: hidden;
}

.lakasg-bundle-summary.is-visible {
	transform: translateY(0);
}

.lakasg-bundle-summary-inner {
	max-width: 900px;
	margin: 0 auto;
	overflow: hidden;
}

.lakasg-bundle-summary-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}

.lakasg-bundle-summary-label {
	font-size: 0.78rem;
	color: #9ca3af;
	margin: 0 0 2px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.lakasg-bundle-summary-total {
	font-size: 1.6rem;
	font-weight: 800;
	color: #fff;
	margin: 0;
	line-height: 1.1;
}

.lakasg-bundle-summary-lines {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-top: 8px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.lakasg-bundle-summary-line {
	font-size: 0.82rem;
	color: #d1d5db;
	display: flex;
	align-items: center;
	gap: 6px;
	overflow: hidden;
	word-break: break-word;
	overflow-wrap: break-word;
}

.lakasg-bundle-summary-line::before {
	content: '•';
	color: #6b7280;
	flex-shrink: 0;
}

/* ── Action buttons ──────────────────────────────────────────────────────── */
.lakasg-bundle-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.lakasg-bundle-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 11px 20px;
	border: 2px solid transparent;
	border-radius: 6px;
	font: inherit;
	font-weight: 600;
	font-size: 0.88rem;
	cursor: pointer;
	transition: filter 150ms, transform 100ms;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
}

.lakasg-bundle-btn:hover   { filter: brightness(1.1); }
.lakasg-bundle-btn:active  { transform: scale(0.97); }
.lakasg-bundle-btn:disabled { opacity: 0.55; cursor: wait; }

.lakasg-bundle-btn--whatsapp { background: #25d366; color: #fff; }
.lakasg-bundle-btn--email    { background: #fff;    color: #111827; }
.lakasg-bundle-btn--wishlist { background: #374151; color: #fff; border-color: rgba(255,255,255,0.15); }
.lakasg-bundle-btn--clear    { background: transparent; color: #9ca3af; border: 0; padding: 11px 6px; text-decoration: underline; margin-left: auto; font-size: 0.82rem; }
.lakasg-bundle-btn--clear:hover { color: #ef4444; filter: none; }
.lakasg-bundle-btn svg { width: 17px; height: 17px; flex-shrink: 0; }

/* Hover backgrounds via CSS variables */
.lakasg-bundle-btn--whatsapp:hover { background: var(--lakasg-btn-wa-hover,    #1fba59); filter: none; }
.lakasg-bundle-btn--email:hover    { background: var(--lakasg-btn-email-hover, #f3f4f6); filter: none; }
.lakasg-bundle-btn--wishlist:hover { background: var(--lakasg-btn-wl-hover,    #4b5563); filter: none; }

/* Mobile summary + buttons */
@media (max-width: 767px) {
	.lakasg-bundle-summary {
		padding: 12px 16px;
		padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	}

	.lakasg-bundle-summary-total { font-size: 1.25rem; }

	.lakasg-bundle-btn {
		font-size: 0.82rem;
		padding: 10px 14px;
		flex-shrink: 1;
		min-width: 0;
	}

	.lakasg-bundle-btn--whatsapp,
	.lakasg-bundle-btn--email,
	.lakasg-bundle-btn--wishlist,
	.lakasg-bundle-btn--quote {
		flex: 1 1 0;
		white-space: normal;
		text-align: center;
	}

	.lakasg-bundle-btn svg { width: 15px; height: 15px; }
}

/* ── Spacer (prevents content hiding behind sticky panel) ────────────────── */
.lakasg-bundle-spacer           { height: 0; transition: height 300ms; }
.lakasg-bundle-spacer.is-active { height: 145px; }
@media (max-width: 767px) {
	.lakasg-bundle-spacer.is-active { height: 185px; }
}

/* ── Editor placeholder ──────────────────────────────────────────────────── */
.lakasg-bundle-placeholder {
	background: #f9fafb;
	border: 2px dashed #d1d5db;
	border-radius: 8px;
	padding: 40px 20px;
	text-align: center;
	color: #6b7280;
}

.lakasg-bundle-placeholder strong {
	display: block;
	font-size: 1rem;
	color: #374151;
	margin-bottom: 8px;
}

/* ========================================================================== 
   v2.28.7 mobile containment fix
   Prevent bundle cards/product rows from forcing horizontal overflow on phones
   and inside Elementor responsive preview.
   ========================================================================== */
.elementor-widget-lakasg_bundle,
.elementor-widget-lakasg_bundle .elementor-widget-container,
.lakasg-bundles-wrap,
.lakasg-bundles-grid,
.lakasg-bundle-card,
.lakasg-bundle-header,
.lakasg-bundle-header-main,
.lakasg-bundle-products,
.lakasg-bundle-product,
.lakasg-bundle-product-info {
	max-width: 100%;
	min-width: 0;
}

.elementor-widget-lakasg_bundle,
.elementor-widget-lakasg_bundle .elementor-widget-container,
.lakasg-bundles-wrap,
.lakasg-bundles-grid {
	width: 100%;
	overflow-x: hidden;
}

.lakasg-bundle-card {
	max-width: 100%;
	overflow-x: clip;
}

.lakasg-bundle-product {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
}

.lakasg-bundle-product-img {
	grid-column: 1;
}

.lakasg-bundle-product-info {
	grid-column: 2;
}

.lakasg-bundle-product-price {
	grid-column: 3;
	max-width: 100%;
}

@media (max-width: 767px) {
	.lakasg-bundles-wrap {
		contain: inline-size paint;
	}

	.lakasg-bundle-card {
		padding-left: 14px;
		padding-right: 14px;
	}

	.lakasg-bundle-product {
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 10px;
		row-gap: 4px;
	}

	.lakasg-bundle-product-price {
		grid-column: 2;
		width: 100%;
		text-align: left;
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.lakasg-bundle-name,
	.lakasg-bundle-description,
	.lakasg-bundle-product-name,
	.lakasg-bundle-product-note {
		overflow-wrap: anywhere;
		word-break: break-word;
	}
}

/* ========================================================================== 
   v2.28.8 mobile summary button fix
   Force bundle action buttons to fit inside the summary panel on phones.
   This intentionally overrides Elementor button padding/typography controls
   that can make the buttons too wide for mobile.
   ========================================================================== */
@media (max-width: 767px) {
	.elementor-widget-lakasg_bundle .lakasg-bundle-summary,
	.elementor-widget-lakasg_bundle .lakasg-bundle-summary * {
		box-sizing: border-box !important;
	}

	.elementor-widget-lakasg_bundle .lakasg-bundle-actions {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 10px !important;
		align-items: stretch !important;
		width: 100% !important;
		max-width: 100% !important;
		overflow: hidden !important;
	}

	.elementor-widget-lakasg_bundle .lakasg-bundle-btn,
	.elementor-widget-lakasg_bundle .lakasg-bundle-btn--wishlist,
	.elementor-widget-lakasg_bundle .lakasg-bundle-btn--whatsapp,
	.elementor-widget-lakasg_bundle .lakasg-bundle-btn--email,
	.elementor-widget-lakasg_bundle .lakasg-bundle-btn--quote,
	.elementor-widget-lakasg_bundle .lakasg-bundle-btn--clear {
		display: inline-flex !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 12px 14px !important;
		white-space: normal !important;
		line-height: 1.25 !important;
		text-align: center !important;
		justify-content: center !important;
		align-items: center !important;
		flex: none !important;
		word-break: normal !important;
		overflow-wrap: anywhere !important;
	}

	.elementor-widget-lakasg_bundle .lakasg-bundle-btn--clear {
		background: transparent !important;
		border: 0 !important;
		padding-top: 8px !important;
		padding-bottom: 8px !important;
	}

	.elementor-widget-lakasg_bundle .lakasg-bundle-btn svg {
		flex: 0 0 auto !important;
		width: 16px !important;
		height: 16px !important;
	}

	.elementor-widget-lakasg_bundle .lakasg-bundle-spacer.is-active {
		height: 320px !important;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-widget-lakasg_bundle .lakasg-bundle-actions {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 10px !important;
	}

	.elementor-widget-lakasg_bundle .lakasg-bundle-btn {
		max-width: 100% !important;
		white-space: normal !important;
	}
}



/* Bundle quote form integration
   Inline mode now reuses the Wishlist quote form layout outside the sticky panel.
   Popup mode reuses the Quote Request popup overlay/dialog. */
.lakasg-bundle-quote-inline[hidden],
.lakasg-bundle-quote-popup-trigger[hidden] {
	display: none !important;
}

.elementor-widget-lakasg_bundle .lakasg-bundle-quote-inline {
	width: 100%;
	max-width: 100%;
	margin: 28px 0 0;
	clear: both;
}

.elementor-widget-lakasg_bundle .lakasg-bundle-quote-inline .lakasg-wl-form {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.lakasg-bundle-btn--quote svg {
	width: 1em;
	height: 1em;
}

.lakasg-bundle-qr-wrap {
	max-width: 100%;
}

.lakasg-bundle-quote-badge:empty {
	display: none;
}

body > .lakasg-bundle-quote-overlay {
	z-index: 1000000 !important;
}

body.lakasg-qr-open {
	overflow: hidden;
}

@media (max-width: 767px) {
	.elementor-widget-lakasg_bundle .lakasg-bundle-quote-inline {
		margin-top: 18px;
	}
}

/* Hard quote popup/inline repair. Popup is moved to body by JS and must ignore widget containment. */
body > .lakasg-bundle-quote-overlay {
	position: fixed !important;
	inset: 0 !important;
	z-index: 1000000 !important;
	max-width: none !important;
	max-height: none !important;
	overflow: auto !important;
}
body > .lakasg-bundle-quote-overlay.is-open {
	display: flex !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
}
.elementor-widget-lakasg_bundle .lakasg-bundle-quote-inline:not([hidden]) {
	display: block !important;
	visibility: visible !important;
	overflow: visible !important;
}

/* ========================================================================== 
   v2.28.37 Bundle summary position fix
   Inline mode keeps the selected-bundles summary in normal page flow after
   the grid. It must not overlay cards or reserve sticky spacer height.
   ========================================================================== */
.lakasg-bundles-wrap--summary-inline {
	contain: none;
	overflow: visible;
}

.lakasg-bundle-summary--inline {
	position: static;
	left: auto;
	right: auto;
	bottom: auto;
	z-index: auto;
	width: 100%;
	max-width: 100%;
	margin-top: 32px;
	transform: none;
	transition: none;
	display: none;
	overflow: hidden;
}

.lakasg-bundle-summary--inline.is-visible {
	display: block;
	transform: none;
}

.lakasg-bundle-summary--inline .lakasg-bundle-summary-inner {
	max-width: 900px;
}

.lakasg-bundles-wrap--summary-inline .lakasg-bundle-spacer,
.lakasg-bundles-wrap--summary-inline .lakasg-bundle-spacer.is-active {
	height: 0 !important;
}

.lakasg-bundle-summary--fixed {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	max-width: 100vw;
}