@bagelink/blox 1.5.17 → 1.5.20

package/dist/blox.css

@@ -1,17 +1,17 @@
 
-.button-wrapper[data-v-04e758bb] {
+.button-wrapper[data-v-9a8c014f] {
 	display: flex;
 }
-.button-wrapper.align-left[data-v-04e758bb] {
+.button-wrapper.align-left[data-v-9a8c014f] {
 	justify-content: flex-start;
 }
-.button-wrapper.align-center[data-v-04e758bb] {
+.button-wrapper.align-center[data-v-9a8c014f] {
 	justify-content: center;
 }
-.button-wrapper.align-right[data-v-04e758bb] {
+.button-wrapper.align-right[data-v-9a8c014f] {
 	justify-content: flex-end;
 }
-.btn[data-v-04e758bb] {
+.btn[data-v-9a8c014f] {
 	display: inline-block;
 	padding: 0.75rem 1.5rem;
 	text-decoration: none;
@@ -22,135 +22,600 @@
 	border: 2px solid transparent;
 	text-align: center;
 }
-.btn-full-width[data-v-04e758bb] {
+.btn-full-width[data-v-9a8c014f] {
 	width: 100%;
 }
 
 /* Sizes */
-.btn-sm[data-v-04e758bb] {
+.btn-sm[data-v-9a8c014f] {
 	padding: 0.5rem 1rem;
 	font-size: 0.875rem;
 }
-.btn-md[data-v-04e758bb] {
+.btn-md[data-v-9a8c014f] {
 	padding: 0.75rem 1.5rem;
 	font-size: 1rem;
 }
-.btn-lg[data-v-04e758bb] {
+.btn-lg[data-v-9a8c014f] {
 	padding: 1rem 2rem;
 	font-size: 1.125rem;
 }
 
 /* Variants */
-.btn-primary[data-v-04e758bb] {
+.btn-primary[data-v-9a8c014f] {
 	background: #3b82f6;
 	color: white;
 }
-.btn-primary[data-v-04e758bb]:hover {
+.btn-primary[data-v-9a8c014f]:hover {
 	background: #2563eb;
 }
-.btn-secondary[data-v-04e758bb] {
+.btn-secondary[data-v-9a8c014f] {
 	background: #6b7280;
 	color: white;
 }
-.btn-secondary[data-v-04e758bb]:hover {
+.btn-secondary[data-v-9a8c014f]:hover {
 	background: #4b5563;
 }
-.btn-outline[data-v-04e758bb] {
+.btn-outline[data-v-9a8c014f] {
 	background: transparent;
 	border-color: #3b82f6;
 	color: #3b82f6;
 }
-.btn-outline[data-v-04e758bb]:hover {
+.btn-outline[data-v-9a8c014f]:hover {
 	background: #3b82f6;
 	color: white;
 }
-.btn-ghost[data-v-04e758bb] {
+.btn-ghost[data-v-9a8c014f] {
 	background: transparent;
 	color: #3b82f6;
 }
-.btn-ghost[data-v-04e758bb]:hover {
+.btn-ghost[data-v-9a8c014f]:hover {
 	background: rgba(59, 130, 246, 0.1);
 }
 
-.container[data-v-144084df] {
+.container[data-v-5dec5c4c] {
 	margin: 0 auto;
 }
-.layout-vertical[data-v-144084df] {
+.layout-vertical[data-v-5dec5c4c] {
 	display: flex;
 	flex-direction: column;
 }
-.layout-horizontal[data-v-144084df] {
+.layout-horizontal[data-v-5dec5c4c] {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
 }
-.layout-grid[data-v-144084df] {
+.layout-grid[data-v-5dec5c4c] {
 	display: grid;
-	grid-template-columns: repeat(var(--6936d1aa), 1fr);
+	grid-template-columns: repeat(var(--7007cebd), 1fr);
 }
 @media (max-width: 768px) {
-.layout-grid[data-v-144084df] {
+.layout-grid[data-v-5dec5c4c] {
 		grid-template-columns: 1fr;
 }
 }
 
-.image-wrapper[data-v-dcfd7570] {
+.image-wrapper[data-v-d0552dc2] {
 	margin: 0;
 	padding: 0;
 }
-.image-link[data-v-dcfd7570] {
+.image-link[data-v-d0552dc2] {
 	display: block;
 }
-.image[data-v-dcfd7570] {
+.image[data-v-d0552dc2] {
 	width: 100%;
 	height: auto;
 	display: block;
 }
-.image-caption[data-v-dcfd7570] {
+.image-caption[data-v-d0552dc2] {
 	margin-top: 0.5rem;
 	font-size: 0.875rem;
 	color: #6b7280;
 	text-align: center;
 }
 
-.spacer[data-v-73a7e941] {
+.spacer[data-v-ecdcd78a] {
 	width: 100%;
 }
 
-.text-align-left[data-v-a6173468] {
+.text-align-left[data-v-dc9789dc] {
 	text-align: left;
 }
-.text-align-center[data-v-a6173468] {
+.text-align-center[data-v-dc9789dc] {
 	text-align: center;
 }
-.text-align-right[data-v-a6173468] {
+.text-align-right[data-v-dc9789dc] {
 	text-align: right;
 }
-.text-align-justify[data-v-a6173468] {
+.text-align-justify[data-v-dc9789dc] {
 	text-align: justify;
 }
 
-.title-wrapper[data-v-ae0634d1] {
+.title-wrapper[data-v-ed3182a3] {
 	margin-bottom: 1rem;
 }
-.title[data-v-ae0634d1] {
+.title[data-v-ed3182a3] {
 	margin: 0 0 0.5rem 0;
 	line-height: 1.2;
 }
-.subtitle[data-v-ae0634d1] {
+.subtitle[data-v-ed3182a3] {
 	margin: 0;
 	opacity: 0.8;
 }
-.text-align-left[data-v-ae0634d1] {
+.text-align-left[data-v-ed3182a3] {
 	text-align: left;
 }
-.text-align-center[data-v-ae0634d1] {
+.text-align-center[data-v-ed3182a3] {
 	text-align: center;
 }
-.text-align-right[data-v-ae0634d1] {
+.text-align-right[data-v-ed3182a3] {
 	text-align: right;
 }
 
+.responsive-height[data-v-f477cb25] {
+		height: var(--height-desktop);
+}
+.responsive-object-fit[data-v-f477cb25] {
+		object-fit: var(--object-fit-desktop);
+}
+@media (max-width: 910px) {
+.responsive-height[data-v-f477cb25] {
+			height: var(--height-mobile);
+}
+.responsive-object-fit[data-v-f477cb25] {
+			object-fit: var(--object-fit-mobile);
+}
+}
+
+.TitleSize[data-v-1e91c605] {
+		--TitleSize: 30;
+		--MobileTitleSize: 20;
+		font-size: var(--TitleSize);
+}
+@media screen and (max-width: 910px) {
+.TitleSize[data-v-1e91c605] {
+			font-size: var(--MobileTitleSize);
+}
+}
+
+.mobileMenu .router-link-active.router-link-exact-active.bgl_btn[data-v-47db1456] {
+		border-bottom: 1px solid var(--bgl-white);
+		font-weight: 800;
+}
+@media screen and (max-width: 910px) {
+.menuLogo[data-v-47db1456] {
+			width: 140px;
+}
+.mobileMenu[data-v-47db1456] {
+			transform: translateX(105%);
+			transition: var(--bgl-transition);
+}
+.openMobileMenu[data-v-47db1456] {
+			transform: translateX(0%);
+			transition: var(--bgl-transition);
+}
+[dir='rtl'] .mobileMenu[data-v-47db1456] {
+			transform: translateX(-105%);
+}
+[dir='rtl'] .openMobileMenu[data-v-47db1456] {
+			transform: translateX(0%);
+}
+}
+
+.responsive-grid[data-v-1366e471] {
+		grid-template-columns: repeat(var(--desktop-columns), 1fr);
+}
+@media (max-width: 910px) {
+.responsive-grid[data-v-1366e471] {
+			grid-template-columns: repeat(var(--mobile-columns), 1fr);
+}
+}
+
+.TitleSize[data-v-e69f38e8] {
+		--TitleSize: 40;
+		--MobileTitleSize: 30;
+		font-size: var(--TitleSize);
+}
+@media screen and (max-width: 910px) {
+.TitleSize[data-v-e69f38e8] {
+			font-size: var(--MobileTitleSize);
+}
+}
+
+.fakeBtn {
+		cursor: pointer;
+}
+
+.TitleSize[data-v-d3582027] {
+		--TitleSize: 40;
+		--MobileTitleSize: 30;
+		font-size: var(--TitleSize);
+}
+@media (max-width: 910px) {
+.TitleSize[data-v-d3582027] {
+			font-size: var(--MobileTitleSize);
+}
+}
+
+.faqWrap .accordion-head {
+		height: auto !important;
+}
+.faqWrap .accordion-icon {
+		font-size: 24px;
+		color: var(--bgl-primary);
+}
+.faqWrap .accordion-item.accordionCard {
+		background: var(--bgl-box-bg);
+}
+.faqWrap .accordion-item.accordionCard .accordion-icon {
+		background: var(--bgl-primary);
+		color: var(--bgl-white);
+		border-radius: 100%;
+		padding: 1rem;
+}
+
+.TitleSize[data-v-02520023] {
+		--TitleSize: 40;
+		--MobileTitleSize: 30;
+		font-size: var(--TitleSize);
+}
+.responsive-title-width[data-v-02520023] {
+		max-width: var(--title-width-desktop);
+}
+@media (max-width: 910px) {
+.TitleSize[data-v-02520023] {
+			font-size: var(--MobileTitleSize);
+}
+.responsive-title-width[data-v-02520023] {
+			max-width: var(--title-width-mobile);
+}
+}
+
+.gridBlock {
+		--columns: 1;
+		--rows: 1;
+		--m_columns: 1;
+		--m_rows: 1;
+		--gap: 1rem;
+		--m_gap: 1rem;
+		gap: var(--gap);
+		/* padding: var(--gap); */
+}
+.grid .min-h-150px {
+		min-height: 150px !important;
+}
+.imageGradient {
+		background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 25%, rgba(0, 0, 0, 0));
+}
+.gridBlock-columns {
+		grid-template-columns: repeat(var(--columns), 1fr);
+}
+.gridBlock-rows {
+		grid-template-rows: repeat(var(--rows), 1fr);
+}
+.gridBox {
+		--column-span: 1;
+		--row-span: 1;
+		--m_column-span: 1;
+		--m_row-span: 1;
+		grid-column: span var(--column-span) / span var(--column-span);
+		grid-row: span var(--row-span) / span var(--row-span);
+}
+	/*
+אם משתמשים בpadding
+.highlight
+.showGrid {
+  position: relative;
+  box-sizing: border-box;
+  background-image:
+    linear-gradient(to right, var(--bgl-white) calc(var(--gap)), transparent var(--gap)),
+    linear-gradient(to bottom, var(--bgl-white) var(--gap), transparent var(--gap));
+  background-size:
+    calc((100% - (var(--columns, 6) + 1) * var(--gap, 1rem)) / var(--columns, 6) + var(--gap, 1rem)) 100%,
+    100% calc((100% - (var(--rows, 3) + 1) * var(--gap, 1rem)) / var(--rows, 3) + var(--gap, 1rem));
+  background-position: left top;
+  background-repeat: repeat;
+	pointer-events: none;
+	outline: var(--gap) solid var(--bgl-white);
+	outline-offset: calc(-1 * var(--gap));
+	filter: drop-shadow(0 0 1px var(--bgl-primary));
+} */
+.highlight .showGrid {
+		display: grid;
+		grid-template-columns: repeat(var(--columns), 1fr);
+		grid-template-rows: repeat(var(--rows), 1fr);
+		gap: var(--gap);
+		box-sizing: border-box;
+		position: relative;
+		--cell-w: calc((100% - (var(--columns) - 1) * var(--gap)) / var(--columns));
+		--cell-h: calc((100% - (var(--rows) - 1) * var(--gap)) / var(--rows));
+		background-image:
+			repeating-linear-gradient(
+				to right,
+				transparent 0 calc(var(--cell-w)),
+				var(--bgl-white) calc(var(--cell-w)) calc(var(--cell-w) + var(--gap))
+			),
+			repeating-linear-gradient(
+				to bottom,
+				transparent 0 calc(var(--cell-h)),
+				var(--bgl-white) calc(var(--cell-h)) calc(var(--cell-h) + var(--gap))
+			);
+		outline: 1px solid var(--bgl-primary);
+		filter: drop-shadow(0 0 1px var(--bgl-primary));
+}
+@media screen and (max-width: 910px) {
+.gridBlock {
+			gap: var(--m_gap);
+			/* padding-inline: var(--m_gap); */
+}
+.gridBlockMobile-columns {
+			grid-template-columns: repeat(var(--m_columns), 1fr);
+}
+.gridBlockMobile-rows {
+			grid-template-rows: repeat(var(--m_rows), 1fr);
+}
+.gridBox {
+			grid-column: span var(--m_column-span) / span var(--m_column-span);
+			grid-row: span var(--m_row-span) / span var(--m_row-span);
+}
+.highlight .showGrid {
+			/* display: grid; */
+			/* padding: 0 0.5rem; */
+			width: calc(100% - (var(--m_gap) * 2)) !important;
+			grid-template-columns: repeat(var(--m_columns), 1fr);
+			grid-template-rows: repeat(var(--m_rows), 1fr);
+			gap: var(--m_gap);
+			/* box-sizing: border-box; */
+			/* position: relative; */
+			--cell-w: calc((100% - (var(--m_columns) - 1) * var(--m_gap)) / var(--m_columns));
+			--cell-h: calc((100% - (var(--m_rows) - 1) * var(--m_gap)) / var(--m_rows));
+			background-image:
+				repeating-linear-gradient(
+					to right,
+					transparent 0 calc(var(--cell-w)),
+					var(--bgl-white) calc(var(--cell-w)) calc(var(--cell-w) + var(--m_gap))
+				),
+				repeating-linear-gradient(
+					to bottom,
+					transparent 0 calc(var(--cell-h)),
+					var(--bgl-white) calc(var(--cell-h)) calc(var(--cell-h) + var(--m_gap))
+				);
+			/* outline:1px solid var(--bgl-primary); */
+			/* filter: drop-shadow(0 0 1px var(--bgl-primary)); */
+}
+}
+
+.responsive-spacing[data-v-d50f8e1c] {
+		gap: var(--space-between-desktop);
+}
+.responsive-box-width[data-v-d50f8e1c] {
+		width: var(--box-width-desktop);
+}
+@media (max-width: 910px) {
+.responsive-spacing[data-v-d50f8e1c] {
+			gap: var(--space-between-mobile);
+}
+.responsive-box-width[data-v-d50f8e1c] {
+			width: var(--box-width-mobile);
+}
+}
+
+.TitleSize[data-v-4db7504d] {
+		--TitleSize: 40;
+		--MobileTitleSize: 30;
+		font-size: var(--TitleSize);
+}
+.responsive-title-width[data-v-4db7504d] {
+		max-width: var(--title-width-desktop);
+}
+.responsive-spacing[data-v-4db7504d] {
+		gap: var(--space-between-desktop);
+}
+.responsive-icon-grid[data-v-4db7504d] {
+		grid-template-columns: var(--icon-size-desktop) auto;
+}
+@media (max-width: 910px) {
+.TitleSize[data-v-4db7504d] {
+			font-size: var(--MobileTitleSize);
+}
+.responsive-title-width[data-v-4db7504d] {
+			max-width: var(--title-width-mobile);
+}
+.responsive-spacing[data-v-4db7504d] {
+			gap: var(--space-between-mobile);
+}
+.responsive-icon-grid[data-v-4db7504d] {
+			grid-template-columns: var(--icon-size-mobile) auto;
+}
+}
+
+.Handlers {
+		display: flex;
+		justify-content: center;
+		gap: 0.5rem;
+		margin: 1rem;
+}
+.sides {
+		top: calc(50% - 2rem);
+}
+
+.linkHover:hover .opacity-7 {
+		opacity: 1;
+}
+
+.grayColor {
+		filter: grayscale(100%);
+}
+.grayColor:hover {
+		filter: grayscale(0%);
+}
+.responsive-spacing {
+		column-gap: var(--space-between-desktop);
+}
+.responsive-item-size {
+		height: calc(var(--item-size-desktop) * 2);
+		max-width: calc(var(--item-size-desktop) * 2.6);
+}
+@media (max-width: 910px) {
+.responsive-spacing {
+			column-gap: var(--space-between-mobile);
+}
+.responsive-item-size {
+			height: calc(var(--item-size-mobile) * 2);
+			max-width: calc(var(--item-size-mobile) * 2.6);
+}
+}
+
+	/* Add your styles here */
+
+.sidePop {
+		top: 40%;
+}
+.fadePopup-enter-active,
+	.fadePopup-leave-active {
+		transition: all 0.3s ease;
+}
+.fadePopup-enter-from,
+	.fadePopup-leave-to {
+		opacity: 0;
+}
+.responsive-width {
+		max-width: var(--width-desktop);
+}
+@media (max-width: 910px) {
+.responsive-width {
+			max-width: var(--width-mobile);
+}
+}
+
+.responsive-space[data-v-5314b970] {
+		height: var(--desktop-height);
+		margin-bottom: var(--desktop-margin);
+}
+@media (max-width: 910px) {
+.responsive-space[data-v-5314b970] {
+			height: var(--mobile-height);
+			margin-bottom: var(--mobile-margin);
+}
+}
+
+.tabBlock .active {
+		background: var(--bgl-popup-bg) !important;
+		color: var(--bgl-popup-bgText) !important;
+}
+
+.NameSize[data-v-6c3ee054] {
+		font-size: var(--NameSize);
+}
+.responsive-image-height[data-v-6c3ee054] {
+		max-height: var(--img-height-desktop);
+}
+.responsive-name-size[data-v-6c3ee054] {
+		font-size: var(--name-size-desktop);
+}
+.responsive-spacing[data-v-6c3ee054] {
+		gap: var(--space-desktop);
+}
+@media (max-width: 910px) {
+.responsive-image-height[data-v-6c3ee054] {
+			max-height: var(--img-height-mobile);
+}
+.responsive-name-size[data-v-6c3ee054] {
+			font-size: var(--name-size-mobile);
+}
+.responsive-spacing[data-v-6c3ee054] {
+			gap: var(--space-mobile);
+}
+}
+
+.responsive-image-height[data-v-5e13045f] {
+		max-height: var(--img-height-desktop);
+}
+@media (max-width: 910px) {
+.responsive-image-height[data-v-5e13045f] {
+			max-height: var(--img-height-mobile);
+}
+}
+
+.Handlers {
+		display: flex;
+		justify-content: center;
+		gap: 0.5rem;
+		margin: 1rem;
+}
+.sides {
+		top: calc(50% - 2rem);
+}
+
+.TitleSize[data-v-5805ce4c] {
+		--TitleSize: 40;
+		--MobileTitleSize: 30;
+		font-size: var(--TitleSize);
+}
+.responsive-height[data-v-5805ce4c] {
+		min-height: var(--height-desktop);
+}
+@media screen and (max-width: 910px) {
+.TitleSize[data-v-5805ce4c] {
+			font-size: var(--MobileTitleSize);
+}
+.responsive-height[data-v-5805ce4c] {
+			min-height: var(--height-mobile);
+}
+}
+
+.TitleSize[data-v-b41cbbd0] {
+		--TitleSize: 40;
+		--MobileTitleSize: 30;
+		font-size: var(--TitleSize);
+}
+@media screen and (max-width: 910px) {
+.TitleSize[data-v-b41cbbd0] {
+			font-size: var(--MobileTitleSize);
+}
+}
+
+.TitleSize[data-v-daf38b34] {
+		--TitleSize: 40;
+		--MobileTitleSize: 30;
+		font-size: var(--TitleSize);
+}
+@media screen and (max-width: 910px) {
+.TitleSize[data-v-daf38b34] {
+			font-size: var(--MobileTitleSize);
+}
+}
+
+	/* Responsive colors using CSS variables */
+.title-responsive-colors[data-v-daf38b34] {
+		/* Desktop colors (default) */
+		color: var(--text-color-desktop) !important;
+		background-color: var(--bg-color-desktop) !important;
+}
+
+	/* Mobile override */
+@media (max-width: 910px) {
+.title-responsive-colors[data-v-daf38b34] {
+			color: var(--text-color-mobile) !important;
+			background-color: var(--bg-color-mobile) !important;
+}
+}
+
+.TitleSize[data-v-fb975aa5] {
+		--TitleSize: 40;
+		--MobileTitleSize: 30;
+		font-size: var(--TitleSize);
+}
+@media screen and (max-width: 910px) {
+.TitleSize[data-v-fb975aa5] {
+			font-size: var(--MobileTitleSize);
+}
+}
+
+.vid_empty {
+		background: url(https://bagel.sfo2.cdn.digitaloceanspaces.com/bagelBlocks/vid-icon.svg) no-repeat center !important;
+		background-size: 100px !important;
+}
+
 /* Global styles for the Blox page */
 .blox-page-wrapper {
 	min-height: 100vh;
@@ -159,9 +624,77 @@
 .blox-page-wrapper * {
 	box-sizing: border-box;
 }
+.blockPageWrap {
+	margin: 0 !important;
+	max-width: none !important;
+	width: 100% !important;
+	padding-top: 0.001rem;
+	min-height: 100vh;
+	background-color: #fff;
+}
+.main-content {
+	margin-inline-start: 0 !important;
+}
+/* Placeholder text for empty elements in edit mode - only for blocks with editable content */
+body.blox-edit-mode .blox-selected.has-editable-content p:empty:before,
+body.blox-edit-mode .blox-selected.has-editable-content h1:empty:before,
+body.blox-edit-mode .blox-selected.has-editable-content h2:empty:before,
+body.blox-edit-mode .blox-selected.has-editable-content h3:empty:before,
+body.blox-edit-mode .blox-selected.has-editable-content h4:empty:before,
+body.blox-edit-mode .blox-selected.has-editable-content h5:empty:before,
+body.blox-edit-mode .blox-selected.has-editable-content h6:empty:before,
+body.blox-edit-mode .blox-selected.has-editable-content span:empty:before,
+body.blox-edit-mode .blox-selected.has-editable-content div[contenteditable]:empty:before {
+	content: "write something..." !important;
+	opacity: 0.4 !important;
+	color: #9ca3af !important;
+	font-style: italic !important;
+	pointer-events: none !important;
+}
+
+/* Placeholder text for elements with only br tag in edit mode - only for blocks with editable content */
+body.blox-edit-mode .blox-selected.has-editable-content p:has(br:only-child):before {
+	content: "write something..." !important;
+	opacity: 0.4 !important;
+	color: #9ca3af !important;
+	font-style: italic !important;
+	pointer-events: none !important;
+}
+
+/* Margin visualization like Chrome DevTools */
+body.blox-edit-mode .blox-selected {
+	position: relative;
+}
+
+/* Create margin visualization overlay - target the inner div with styles */
+body.blox-edit-mode .blox-selected>div::after {
+	content: '';
+	position: absolute;
+	pointer-events: none;
+	z-index: 999;
+
+	/* Calculate margin area using CSS variables */
+	top: calc(-1 * var(--margin-top, 0rem));
+	bottom: calc(-1 * var(--margin-bottom, 0rem));
+	left: -100vw;
+	right: -100vw;
+
+	/* Orange color like Chrome DevTools - but only show margin areas */
+	background:
+		linear-gradient(to bottom,
+			rgba(255, 155, 0, 0.3) 0,
+			rgba(255, 155, 0, 0.3) var(--margin-top, 0rem),
+			transparent var(--margin-top, 0rem),
+			transparent calc(100% - var(--margin-bottom, 0rem)),
+			rgba(255, 155, 0, 0.3) calc(100% - var(--margin-bottom, 0rem)),
+			rgba(255, 155, 0, 0.3) 100%);
+
+	/* Only show when there are actual margins */
+	opacity: var(--has-margin, 0);
+}
 
 /* Loading state */
-.blox-loading[data-v-2fc74f90] {
+.blox-loading[data-v-fa049ec1] {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -171,7 +704,7 @@
 }
 
 /* Empty states */
-.blox-empty-state[data-v-2fc74f90] {
+.blox-empty-state[data-v-fa049ec1] {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -181,42 +714,39 @@
 	color: #666;
 	padding: 2rem;
 }
-.blox-empty-preview[data-v-2fc74f90] {
+.blox-empty-preview[data-v-fa049ec1] {
 	min-height: 100vh;
 	background: #fff;
 }
 
 /* Block wrapper */
-.blox-block-wrapper[data-v-2fc74f90] {
+.blox-block-wrapper[data-v-fa049ec1] {
 	position: relative;
+	cursor: pointer;
 }
 
-/* Block overlay for click detection */
-.blox-block-overlay[data-v-2fc74f90] {
-	position: absolute;
-	inset: 0;
-	pointer-events: none;
-	z-index: 9;
+/* Interactive elements should be clickable in preview mode */
+.blox-preview-mode .blox-block-wrapper[data-v-fa049ec1] * {
+	pointer-events: auto !important;
+	cursor: auto;
 }
 
-/* Interactive elements should be clickable */
-.blox-block-wrapper button[data-v-2fc74f90],
-.blox-block-wrapper a[data-v-2fc74f90],
-.blox-block-wrapper input[data-v-2fc74f90],
-.blox-block-wrapper textarea[data-v-2fc74f90],
-.blox-block-wrapper select[data-v-2fc74f90] {
+/* In edit mode, prevent interactions with inner elements except buttons/links */
+body.blox-edit-mode .blox-block-wrapper[data-v-fa049ec1] * {
+	pointer-events: none;
+}
+body.blox-edit-mode .blox-block-wrapper button[data-v-fa049ec1],
+body.blox-edit-mode .blox-block-wrapper a[data-v-fa049ec1],
+body.blox-edit-mode .blox-block-wrapper input[data-v-fa049ec1],
+body.blox-edit-mode .blox-block-wrapper textarea[data-v-fa049ec1],
+body.blox-edit-mode .blox-block-wrapper select[data-v-fa049ec1] {
 	pointer-events: auto;
 	position: relative;
 	z-index: 10;
 }
 
-/* Preview mode - all interactions work */
-.blox-preview-mode .blox-block-wrapper[data-v-2fc74f90] * {
-	pointer-events: auto !important;
-}
-
 /* Block label */
-.blox-block-label[data-v-2fc74f90] {
+.blox-block-label[data-v-fa049ec1] {
 	position: absolute;
 	top: 0;
 	left: 0;
@@ -231,30 +761,35 @@
 }
 
 /* Highlight state */
-.blox-highlight[data-v-2fc74f90] {
-	background: rgba(156, 163, 175, 0.1);
+.blox-highlight[data-v-fa049ec1] {
 	outline: 1px solid #9ca3af;
 	outline-offset: -1px;
 }
-.blox-highlight .blox-block-label[data-v-2fc74f90] {
+.blox-highlight .blox-block-label[data-v-fa049ec1] {
 	opacity: 1;
 	background: #9ca3af;
 }
+.blox-highlight[data-v-fa049ec1] * {
+	outline: 1px dashed #9ca3af;
+}
 
 /* Selected state */
-.blox-selected[data-v-2fc74f90] {
+.blox-selected[data-v-fa049ec1] {
 	background: rgba(88, 191, 235, 0.08) !important;
 	outline: 2px solid #3b82f6 !important;
 	outline-offset: -2px;
 	box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
 }
-.blox-selected .blox-block-label[data-v-2fc74f90] {
+.blox-selected[data-v-fa049ec1] * {
+	outline: 2px dashed #3b83f639 !important;
+}
+.blox-selected .blox-block-label[data-v-fa049ec1] {
 	opacity: 1;
 	background: #3b82f6;
 }
 
 /* Missing component warning */
-.blox-missing-component[data-v-2fc74f90] {
+.blox-missing-component[data-v-fa049ec1] {
 	padding: 2rem;
 	background: #fef3c7;
 	border: 2px dashed #f59e0b;
@@ -264,6 +799,123 @@
 	color: #92400e;
 }
 
+/* Block overlay for click detection - but allow buttons to work */
+.block-overlay[data-v-fa049ec1] {
+	pointer-events: none;
+}
+
+/* Allow interactive elements to receive events */
+.block-wrapper button[data-v-fa049ec1],
+.block-wrapper a[data-v-fa049ec1],
+.block-wrapper input[data-v-fa049ec1],
+.block-wrapper textarea[data-v-fa049ec1],
+.block-wrapper select[data-v-fa049ec1] {
+	pointer-events: auto;
+	position: relative;
+	z-index: 10;
+}
+
+/* Remove all pointer-events CSS - handle only via JavaScript */
+/* In preview mode, ensure all interactions work */
+.preview-mode .block-wrapper[data-v-fa049ec1] * {
+	pointer-events: auto !important;
+}
+.highlight[data-v-fa049ec1],
+.editMode[data-v-fa049ec1]:hover {
+	animation: highlighter-fa049ec1 1.5s ease-in-out forwards;
+	background: #9ca3af20;
+}
+.highlight[data-v-fa049ec1],
+.editMode[data-v-fa049ec1]:hover::after {
+	content: '';
+	position: absolute;
+	inset: 0;
+	outline: 1px solid #9ca3af;
+	outline-offset: -1px;
+	/* z-index: 9999; */
+}
+.selected[data-v-fa049ec1] {
+	background: #58bfeb15 !important;
+	animation: none !important;
+	box-shadow: 0 0 0 4px rgba(88, 191, 235, 0.1);
+}
+.selected[data-v-fa049ec1]::after {
+	outline: 2px solid var(--bgl-primary) !important;
+	outline-offset: -2px !important;
+	content: '';
+	position: absolute;
+	inset: 0;
+	pointer-events: none;
+	/* z-index: 10000; */
+}
+
+/* Padding visualization - show as inner area */
+.selected[data-v-fa049ec1] {
+	position: relative;
+}
+
+/* Create a wrapper for margin visualization */
+.selected .responsive-colors[data-v-fa049ec1],
+.highlight .responsive-colors[data-v-fa049ec1] {
+	position: relative;
+}
+
+/* Margin visualization using ::before */
+.selected .responsive-colors[data-v-fa049ec1]::after,
+.highlight .responsive-colors[data-v-fa049ec1]::after {
+	content: '';
+	position: absolute;
+	pointer-events: none;
+	z-index: 0;
+
+	/* Get margin values from CSS variables set by the component */
+	top: calc(var(--margin-top, 0px) * -1);
+	bottom: calc(var(--margin-bottom, 0px) * -1);
+	left: -100vw;
+	/* Extend to full viewport width */
+	right: -100vw;
+	/* Extend to full viewport width */
+	background: rgb(90, 160, 255, 0.05);
+	mix-blend-mode: multiply;
+	border-top: 2px dashed rgba(46, 91, 255, 0.2);
+	border-bottom: 2px dashed rgba(46, 91, 255, 0.2);
+	box-sizing: content-box;
+
+	/* Only show if there's actual margin */
+	display: var(--has-margin, none);
+}
+.selected .compName[data-v-fa049ec1] {
+	background: var(--bgl-primary) !important;
+	opacity: 1 !important;
+}
+
+/* Override hover styles when element is selected */
+.selected.highlight .compName[data-v-fa049ec1] {
+	background: var(--bgl-primary) !important;
+}
+
+/* Preview mode styles */
+.preview-mode .block-wrapper[data-v-fa049ec1] {
+	/* Remove pointer events and styling in preview mode */
+	pointer-events: auto !important;
+}
+.compName[data-v-fa049ec1] {
+	opacity: 0;
+	background: var(--bgl-primary);
+	/* border-top-left-radius: 5px; */
+	border-bottom-right-radius: 5px;
+	z-index: 10001;
+}
+.highlight .compName[data-v-fa049ec1] {
+	opacity: 1 !important;
+	background: #9ca3af !important;
+}
+@keyframes highlighter-fa049ec1 {
+to {
+		background: #9ca3af00;
+}
+}
+
 /* Global styles for the Blox page */
 .blox-page-wrapper {
 	min-height: 100vh;
@@ -274,7 +926,7 @@
 }
 
 /* Loading state */
-.blox-loading[data-v-bd9da6cc] {
+.blox-loading[data-v-ad77f76e] {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -284,7 +936,7 @@
 }
 
 /* Missing component warning */
-.blox-missing-component[data-v-bd9da6cc] {
+.blox-missing-component[data-v-ad77f76e] {
 	padding: 2rem;
 	background: #fee;
 	border: 2px solid #faa;