.ICBzone {

		display: flex;

		.container-fluid {
			display: flex;
			height: 100vh;
		    overflow: hidden; /* Prevent the main container from scrolling */
		}

		/* Sidebar Styles */
		.sidebar {
			width: 320px;
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: white;
			padding: 20px;
			box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
			overflow-y: auto;
		}

		.sidebar h2 {
			margin-bottom: 25px;
			font-size: 24px;
			text-align: center;
			text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
		}

		/* Components Grid Layout */
		.components-grid {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			gap: 10px;
		}

		.component-item {
			background: rgba(255, 255, 255, 0.15);
			border: 2px dashed rgba(255, 255, 255, 0.3);
			border-radius: 12px;
			padding: 15px;
			cursor: move;
			transition: all 0.3s ease;
			backdrop-filter: blur(10px);
			text-align: center;
		}

		.component-item:hover {
			background: rgba(255, 255, 255, 0.25);
			border-color: rgba(255, 255, 255, 0.5);
			transform: translateY(-2px);
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
		}

		.component-item i {
			font-size: 20px;
			margin-bottom: 8px;
			width: 100%;
			text-align: center;
			display: block;
		}

		.component-item span {
			font-weight: 500;
			font-size: 14px;
			display: block;
		}

		#settings-btns {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
			gap: 8px;
			margin-bottom: 25px;
		}

		#settings-btns button {
			background: rgba(255, 255, 255, 0.15);
			border: 2px solid rgba(255, 255, 255, 0.3);
			border-radius: 10px;
			padding: 10px;
			transition: all 0.3s ease;
			backdrop-filter: blur(10px);
			color: white;
			cursor: pointer;
		}

		#settings-btns button:hover {
			background: rgba(255, 255, 255, 0.25);
			border-color: rgba(255, 255, 255, 0.5);
			transform: translateY(-1px);
		}

		#settings-btns button.active {
			background: rgba(255, 255, 255, 0.3);
			border-color: rgba(255, 255, 255, 0.7);
			box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
		}

		#settings-btns i {
			font-size: 18px;
			width: 20px;
			text-align: center;
		}

		/* Main Content Area */
		.main-content {
			flex: 1;
			display: flex;
			flex-direction: column;
			background: white;
		    height: 100vh; /* Add this to constrain height */
    		overflow: hidden; /* Add this to prevent main-content from scrolling */
		}

		.canvas-container {
			flex: 1;
			padding: 30px;
			overflow-y: visible;
		    overflow-x: hidden; /* Prevent horizontal scroll */
			background: linear-gradient(45deg, #f0f2f5 0%, #fafbfc 100%);
    		position: relative; /* Add this */
			box-sizing: border-box; /* Add this */
		}
	
		.email-canvas {
			max-width: 600px;
			margin: 0 auto;
			background: white;
			border-radius: 12px;
			box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
			position: relative;
		}
		.email-canvas::-webkit-scrollbar {
    		width: 8px;
		}
		.email-canvas::-webkit-scrollbar-track {
    		background: #f1f1f1;
    		border-radius: 4px;
		}
		.email-canvas::-webkit-scrollbar-thumb {
    		background: #888;
    		border-radius: 4px;
		}
		.email-canvas::-webkit-scrollbar-thumb:hover {
    		background: #555;
		}

		.canvas-content {
			padding: 30px;
			min-height: 500px;
			position: relative;
		}

		/* Empty state */
		.empty-state {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			text-align: center;
			color: #999;
			font-size: 18px;
			pointer-events: none;
			z-index: 1;
		}

		.empty-state i {
			font-size: 48px;
			margin-bottom: 15px;
			opacity: 0.3;
		}

		/* Drop indicator */
		.drop-indicator {
			position: absolute;
			width: 100%;
			height: 3px;
			background: #667eea;
			border-radius: 2px;
			display: none;
			z-index: 1000;
			box-shadow: 0 0 8px rgba(102, 126, 234, 0.5);
		}

		/* Canvas hover state */
		.canvas-content.drag-over {
			background: rgba(102, 126, 234, 0.02);
			border: 2px dashed rgba(102, 126, 234, 0.3);
			border-radius: 8px;
		}

		/* Component Styles */
		.email-component {
			margin: 15px 0;
			padding: 15px;
			border: 1px solid transparent;
			border-radius: 6px;
			position: relative;
			transition: all 0.3s ease;
			background: white;
		}

		.email-component:hover {
			border-color: #667eea;
			box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
		}

		.email-component .component-controls {
			position: absolute;
			top: -15px;
			right: -15px;
			display: none;
			gap: 5px;
			z-index: 100;
		}

		.email-component:hover .component-controls {
			display: flex;
		}

		.email-component .control-btn {
			background: #fff;
			border: 1px solid #ddd;
			border-radius: 50%;
			width: 30px;
			height: 30px;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 12px;
			transition: all 0.3s ease;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		}

		.email-component .control-btn:hover {
			transform: translateY(-1px);
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
		}


		.email-component .favorite-btn {
			color: #ffd700;
		}

		.email-component .favorite-btn:hover {
			color: #667eea;
			background: #fffacd;
		}

		.email-component .favorite-btn.favorited {
			color: #667eea;
			background: #ffd700;
		}

		.email-component .drag-handle {
			color: #999;
			cursor: grab;
			user-select: none;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			touch-action: none;
		}

		.email-component .edit-btn {
			color: #999;
			cursor: pointer;
		}

		.email-component .drag-handle:hover,
		.email-component .edit-btn:hover {
			color: #667eea;
			background: #f8f9fc;
		}

		.email-component .drag-handle:active,
		.email-component .edit-btn:active {
			cursor: grabbing;
		}

		.header-component .component-controls {
			position: absolute;
			top: 5px;
			right: 5px;
		}

		.email-component .delete-btn {
			color: #ff4757;
		}

		.email-component .delete-btn:hover {
			background: #ff4757;
			color: white;
		}

		/* Drag state */
		.email-component.ui-sortable-helper {
			/*transform: rotate(2deg);*/
			transition: none !important;
			animation: none !important;
			box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
			border-color: #667eea;
			z-index: 1000;
		}

		.email-component.ui-sortable-helper .component-controls {
			display: none;
		}

		/* Add instruction tooltip */
		.drag-handle:hover:after {
			content: "Hold and drag to reorder";
			position: absolute;
			top: -35px;
			left: 50%;
			transform: translateX(-50%);
			background: #333;
			color: white;
			padding: 4px 8px;
			border-radius: 4px;
			font-size: 11px;
			white-space: nowrap;
			z-index: 1000;
			pointer-events: none;
		}

		.drag-handle:hover:before {
			content: "";
			position: absolute;
			top: -7px;
			left: 50%;
			transform: translateX(-50%);
			border: 4px solid transparent;
			border-top-color: #333;
			z-index: 1000;
			pointer-events: none;
		}

		/* Specific Component Styles */
		.paragraph-component {
			font-size: 16px;
			line-height: 1.6;
			color: #333;
		}

		.subtitle-component {
			font-size: 20px;
			font-weight: 600;
			color: #2c3e50;
			margin: 10px 0;
		}

		.image-component {
			text-align: center;
		}

		.image-component img {
			max-width: 100%;
			border-radius: 8px;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		}

		.image-placeholder {
			background: #f3f4f6;
			border: 2px dashed #9b9b9b;
			border-radius: 8px;
			padding: 40px 20px;
			cursor: pointer;
			transition: all 0.3s ease;
		}

		.image-placeholder:hover {
			background: #e5e7eb;
			border-color: #667eea;
		}

		.image-placeholder i {
			font-size: 48px;
			color: #9b9b9b;
			margin-bottom: 15px;
		}

		.image-placeholder span {
			display: block;
			color: #9b9b9b;
			font-size: 16px;
		}

		.video-component {
			text-align: center;
		}

		.video-component video,
		.video-component iframe {
			max-width: 100%;
			border-radius: 8px;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		}

		.video-placeholder {
			background: #f3f4f6;
			border: 2px dashed #9b9b9b;
			border-radius: 8px;
			padding: 40px 20px;
			cursor: pointer;
			transition: all 0.3s ease;
		}

		.video-placeholder:hover {
			background: #e5e7eb;
			border-color: #667eea;
		}

		.video-placeholder i {
			font-size: 48px;
			color: #9b9b9b;
			margin-bottom: 15px;
		}

		.video-placeholder span {
			display: block;
			color: #9b9b9b;
			font-size: 16px;
		}

		.button-component {
			text-align: center;
			margin: 20px 0;
		}

		.divider-component {
			margin: 25px 0;
		}

		.divider-component hr {
			border: none;
			height: 2px;
			background: linear-gradient(90deg, transparent, #222, transparent);
		}

		.spacer-component {
			margin: 0;
			background: transparent;
			border: 1px dashed #ddd;
			border-radius: 4px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #999;
			font-size: 14px;
			min-height: 20px;
			position: relative;
		}

		.spacer-component:hover {
			border-color: #667eea;
			background: rgba(102, 126, 234, 0.05);
		}

		.spacer-component .spacer-label {
			background: white;
			padding: 2px 8px;
			border-radius: 4px;
			font-size: 12px;
			opacity: 0.7;
		}

		.columns-component {
			display: flex;
			gap: 20px;
		}

		.column {
			flex: 1;
			padding: 15px;
			background: #f8f9fa;
			border-radius: 8px;
			border: 2px dashed #ddd;
			min-height: 120px;
			position: relative;
			transition: all 0.3s ease;
			cursor: pointer;
		}

		.column:hover {
			border-color: #667eea;
			background: rgba(102, 126, 234, 0.05);
		}

		.column.ui-droppable-hover {
			border-color: #667eea;
			background: rgba(102, 126, 234, 0.05);
		}

		.column.has-content {
			cursor: default;
			border-style: solid;
			border-color: #e0e0e0;
		}

		.column.has-content:hover {
			border-color: #667eea;
		}

		.column-placeholder {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			color: #999;
			font-style: italic;
			text-align: center;
			pointer-events: none;
			font-size: 14px;
			transition: opacity 0.3s ease;
		}

		.column:hover .column-placeholder {
			color: #667eea;
		}

		.column-empty {
			display: flex;
			align-items: center;
			justify-content: center;
			min-height: 120px;
		}

		.column-content {
			position: relative;
			min-height: 50px;
		}

		/* Header component styles */
		.header-component {
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: white;
			padding: 40px 30px;
			text-align: center;
			margin: -30px -30px 30px -30px;
		}

		.header-component h1 {
			font-size: 28px;
			margin-bottom: 10px;
		}

		.header-component p {
			font-size: 16px;
			opacity: 0.9;
		}

		/* Responsive */
		@media (max-width: 768px) {
			.container-fluid {
				flex-direction: column;
			}

			.sidebar {
				width: 100%;
				height: auto;
				order: 2;
			}

			.main-content {
				order: 1;
			}
		}

		/* Formatting Toolbar */
		.formatting-toolbar {
			position: fixed;
			top: -100px;
			left: 50%;
			transform: translateX(-50%);
			background: white;
			border: 1px solid #ddd;
			border-radius: 8px;
			padding: 10px;
			box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
			z-index: 1000;
			display: flex;
			gap: 5px;
			align-items: center;
			transition: top 0.3s ease;
			flex-wrap: wrap;
		}

		.formatting-toolbar.active {
			top: 20px;
		}

		.toolbar-group {
			display: flex;
			gap: 2px;
			align-items: center;
			border-right: 1px solid #eee;
			padding-right: 8px;
			margin-right: 3px;
		}

		.toolbar-group:last-child {
			border-right: none;
			margin-right: 0;
			padding-right: 0;
		}

		.toolbar-btn {
			background: transparent;
			border: 1px solid transparent;
			padding: 6px 8px;
			border-radius: 4px;
			cursor: pointer;
			font-size: 14px;
			transition: all 0.2s ease;
			min-width: 30px;
			height: 30px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.toolbar-btn:hover {
			background: #f0f0f0;
			border-color: #ddd;
		}

		.toolbar-btn.active {
			background: #667eea;
			color: white;
			border-color: #667eea;
		}

		.toolbar-select {
			border: 1px solid #ddd;
			border-radius: 4px;
			padding: 4px 6px;
			font-size: 12px;
			background: white;
			cursor: pointer;
			min-width: 80px;
		}

		.color-input {
			width: 30px;
			height: 30px;
			border: 1px solid #ddd;
			border-radius: 4px;
			cursor: pointer;
			background: none;
			padding: 0;
		}

		/* Enhanced component hover */
		.email-component.selected {
			border-color: #667eea !important;
			box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2) !important;
		}

		/* Sortable placeholder */
		.ui-sortable-placeholder {
			height: 60px;
			background: linear-gradient(45deg, rgba(102, 126, 234, 0.1) 0%, rgba(102, 126, 234, 0.2) 100%);
			border: 2px dashed #667eea;
			border-radius: 8px;
			margin: 15px 0;
			position: relative;
		}

		.ui-sortable-placeholder:before {
			content: "Drop here";
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			color: #667eea;
			font-weight: 500;
			font-size: 14px;
		}

		/* TinyMCE Modal */
		.tinymce-modal {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.5);
			z-index: 2000;
		}

		.tinymce-modal-content {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background: white;
			padding: 20px;
			border-radius: 12px;
			box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
			max-width: 90%;
			width: 900px;
			max-height: 90%;
			overflow: hidden;
		}

		.tinymce-modal h3 {
			margin-bottom: 20px;
			color: #333;
			font-size: 18px;
		}

		.tinymce-actions {
			display: flex;
			justify-content: flex-end;
			gap: 10px;
			margin-top: 20px;
		}

		.tinymce-btn {
			padding: 8px 16px;
			border: none;
			border-radius: 6px;
			cursor: pointer;
			font-size: 14px;
			transition: all 0.3s ease;
		}

		.tinymce-btn.primary {
			background: #667eea;
			color: white;
		}

		.tinymce-btn.primary:hover {
			background: #5a6fd8;
		}

		.tinymce-btn.secondary {
			background: #f8f9fa;
			color: #333;
			border: 1px solid #ddd;
		}

		.tinymce-btn.secondary:hover {
			background: #e9ecef;
		}

		.close-tinymce {
			position: absolute;
			top: 15px;
			right: 20px;
			background: none;
			border: none;
			font-size: 24px;
			cursor: pointer;
			color: #999;
		}

		/* Format Modal */
		.format-modal {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.5);
			z-index: 2000;
		}

		.format-modal-content {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background: white;
			padding: 30px;
			border-radius: 12px;
			box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
			max-width: 500px;
			width: 90%;
			max-height: 90%;
			overflow-y: auto;
		}

		.format-modal h3 {
			margin-bottom: 20px;
			color: #333;
			font-size: 18px;
		}

		.format-group {
			margin-bottom: 20px;
		}

		.format-group label {
			display: block;
			margin-bottom: 5px;
			font-weight: 500;
			color: #333;
		}

		.format-input {
			width: 100%;
			padding: 8px 12px;
			border: 1px solid #ddd;
			border-radius: 6px;
			font-size: 14px;
			margin-bottom: 10px;
		}

		.format-input:focus {
			outline: none;
			border-color: #667eea;
			box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
		}

		.color-row {
			display: flex;
			gap: 15px;
		}

		.color-group {
			flex: 1;
		}

		.color-input-wrapper {
			display: flex;
			align-items: center;
			gap: 10px;
		}

		.color-picker {
			width: 50px;
			height: 35px;
			border: 1px solid #ddd;
			border-radius: 6px;
			cursor: pointer;
			background: none;
			padding: 0;
		}

		.style-options {
			display: flex;
			gap: 10px;
			flex-wrap: wrap;
		}

		.style-option {
			padding: 8px 16px;
			border: 2px solid #ddd;
			border-radius: 6px;
			background: white;
			cursor: pointer;
			font-size: 14px;
			transition: all 0.3s ease;
		}

		.style-option.active {
			border-color: #667eea;
			background: #667eea;
			color: white;
		}

		.style-option:hover {
			border-color: #667eea;
		}

		.button-preview {
			margin: 20px 0;
			padding: 20px;
			background: #f8f9fa;
			border-radius: 8px;
			text-align: center;
		}

		.preview-button {
			display: inline-block;
			padding: 12px 24px;
			border: none;
			border-radius: 6px;
			font-size: 16px;
			font-weight: 500;
			cursor: pointer;
			text-decoration: none;
			transition: all 0.3s ease;
		}

		.button-format-actions {
			display: flex;
			justify-content: flex-end;
			gap: 10px;
			margin-top: 20px;
		}

		.format-btn {
			padding: 8px 16px;
			border: none;
			border-radius: 6px;
			cursor: pointer;
			font-size: 14px;
			transition: all 0.3s ease;
		}

		.format-btn.primary {
			background: #667eea;
			color: white;
		}

		.format-btn.primary:hover {
			background: #5a6fd8;
		}

		.format-btn.secondary {
			background: #f8f9fa;
			color: #333;
			border: 1px solid #ddd;
		}

		.format-btn.secondary:hover {
			background: #e9ecef;
		}

		.close-format {
			position: absolute;
			top: 15px;
			right: 20px;
			background: none;
			border: none;
			font-size: 24px;
			cursor: pointer;
			color: #999;
		}

		/* Background Type Selection */
		.background-type-options {
			display: flex;
			gap: 10px;
			margin-bottom: 15px;
		}

		.background-type-option {
			padding: 8px 16px;
			border: 2px solid #ddd;
			border-radius: 6px;
			background: white;
			cursor: pointer;
			font-size: 14px;
			transition: all 0.3s ease;
		}

		.background-type-option.active {
			border-color: #667eea;
			background: #667eea;
			color: white;
		}

		.background-type-option:hover {
			border-color: #667eea;
		}

		.gradient-inputs {
			display: none;
		}

		.gradient-inputs.active {
			display: block;
		}

		/* Hidden file input */
		.hidden-file-input {
			display: none;
		}

		/* Video Format Modal Styles */
		.video-source-options {
			display: flex;
			gap: 10px;
			margin-bottom: 15px;
		}

		.video-source-option {
			padding: 8px 16px;
			border: 2px solid #ddd;
			border-radius: 6px;
			background: white;
			cursor: pointer;
			font-size: 14px;
			transition: all 0.3s ease;
		}

		.video-source-option.active {
			border-color: #667eea;
			background: #667eea;
			color: white;
		}

		.video-source-option:hover {
			border-color: #667eea;
		}

		.video-input-group {
			display: none;
		}

		.video-input-group.active {
			display: block;
		}

/* Settings Modal */
		.settings-modal {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.5);
			z-index: 2000;
		}

		.settings-modal-content {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background: white;
			padding: 30px;
			border-radius: 12px;
			box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
			max-width: 400px;
			width: 90%;
			max-height: 90%;
			overflow-y: auto;
		}

		.settings-modal h3 {
			margin-bottom: 20px;
			color: #333;
			font-size: 18px;
		}

		.close-settings {
			position: absolute;
			top: 15px;
			right: 20px;
			background: none;
			border: none;
			font-size: 24px;
			cursor: pointer;
			color: #999;
		}

		/* New Component Styles */
		.news-component {
			background: #f8f9fa;
			border-radius: 8px;
			padding: 20px;
			position: relative;
		}

		.news-component h3 {
			color: #333;
			font-size: 22px;
			margin-bottom: 10px;
		}

		.news-component .news-date {
			color: #666;
			font-size: 14px;
			margin-bottom: 15px;
		}

		.news-component .news-summary {
			color: #555;
			line-height: 1.6;
			margin-bottom: 15px;
		}

		.news-component .news-link {
			color: #667eea;
			text-decoration: none;
			font-weight: 500;
		}

		/* Updated Essay Component with Image */
		.essay-component {
			border-left: 4px solid #667eea;
			padding-left: 20px;
			position: relative;
			display: flex;
			gap: 20px;
			align-items: flex-start;
		}

		.essay-component .essay-image {
			width: 120px;
			height: 120px;
			background: #f3f4f6;
			border-radius: 8px;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			flex-shrink: 0;
			overflow: hidden;
		}

		.essay-component .essay-image i {
			font-size: 32px;
			color: #9b9b9b;
		}

		.essay-component .essay-image img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			border-radius: 8px;
		}

		.essay-component .essay-content {
			flex: 1;
		}

		.essay-component h3 {
			color: #333;
			font-size: 24px;
			margin-bottom: 8px;
		}

		.essay-component .essay-author {
			color: #666;
			font-style: italic;
			margin-bottom: 5px;
		}

		.essay-component .essay-date {
			color: #999;
			font-size: 14px;
			margin-bottom: 15px;
		}

		.essay-component .essay-excerpt {
			color: #555;
			line-height: 1.8;
			font-size: 16px;
		}

		.event-component {
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: white;
			border-radius: 12px;
			padding: 25px;
			position: relative;
		}

		.event-component h3 {
			font-size: 24px;
			margin-bottom: 15px;
		}

		.event-component .event-details {
			display: flex;
			flex-direction: column;
			gap: 10px;
			margin-bottom: 15px;
		}

		.event-component .event-detail {
			display: flex;
			align-items: center;
			gap: 10px;
		}

		.event-component .event-detail i {
			width: 20px;
			text-align: center;
		}

		.event-component .event-description {
			margin-bottom: 20px;
			opacity: 0.95;
		}

		.event-component .event-button {
			background: white;
			color: #667eea;
			padding: 10px 25px;
			border-radius: 25px;
			text-decoration: none;
			display: inline-block;
			font-weight: 600;
			transition: transform 0.3s ease;
		}

		.event-component .event-button:hover {
			transform: translateY(-2px);
		}

		.product-component {
			border: 2px solid #e0e0e0;
			border-radius: 12px;
			padding: 20px;
			text-align: center;
			position: relative;
			transition: all 0.3s ease;
		}

		.product-component:hover {
			border-color: #667eea;
			box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
		}

		.product-component .product-image {
			width: 100%;
			max-width: 200px;
			height: 200px;
			background: #f3f4f6;
			border-radius: 8px;
			margin: 0 auto 20px;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
		}

		.product-component .product-image i {
			font-size: 48px;
			color: #9b9b9b;
		}

		.product-component h3 {
			color: #333;
			font-size: 20px;
			margin-bottom: 10px;
		}

		.product-component .product-price {
			color: #667eea;
			font-size: 28px;
			font-weight: bold;
			margin-bottom: 15px;
		}

		.product-component .product-description {
			color: #666;
			margin-bottom: 20px;
			line-height: 1.6;
		}

		.product-component .product-button {
			background: #667eea;
			color: white;
			padding: 12px 30px;
			border-radius: 25px;
			text-decoration: none;
			display: inline-block;
			font-weight: 600;
			transition: all 0.3s ease;
		}

		.product-component .product-button:hover {
			background: #5a6fd8;
			transform: translateY(-2px);
		}

		/* Updated Gallery Component */
		.gallery-component {
			position: relative;
		}

		.gallery-component h3 {
			text-align: center;
			color: #333;
			font-size: 22px;
			margin-bottom: 20px;
		}

		.gallery-component .gallery-grid {
			display: grid;
			gap: 10px;
		}

		.gallery-component .gallery-item {
			background: #f3f4f6;
			border-radius: 8px;
			aspect-ratio: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			transition: all 0.3s ease;
			position: relative;
			overflow: hidden;
		}

		.gallery-component .gallery-item:hover {
			transform: scale(1.05);
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
		}

		.gallery-component .gallery-item i {
			font-size: 32px;
			color: #9b9b9b;
		}

		.gallery-component .gallery-item img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.gallery-component .gallery-item-controls {
			position: absolute;
			top: 5px;
			right: 5px;
			display: none;
			gap: 5px;
		}

		.gallery-component .gallery-item:hover .gallery-item-controls {
			display: flex;
		}

		.gallery-component .gallery-item-btn {
			background: rgba(255, 255, 255, 0.9);
			border: 1px solid #ddd;
			border-radius: 50%;
			width: 25px;
			height: 25px;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 12px;
			transition: all 0.3s ease;
		}

		.gallery-component .gallery-item-btn:hover {
			background: white;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		}

		.gallery-component .gallery-item-btn.delete-gallery-item {
			color: #ff4757;
		}

		.gallery-component .gallery-item-btn.delete-gallery-item:hover {
			background: #ff4757;
			color: white;
		}

		.gallery-component .add-gallery-item {
			border: 2px dashed #ddd;
			background: rgba(102, 126, 234, 0.05);
		}

		.gallery-component .add-gallery-item:hover {
			border-color: #667eea;
			background: rgba(102, 126, 234, 0.1);
		}

		.gallery-component .add-gallery-item i {
			color: #667eea;
		}

		.pdf-component {
			background: #fff;
			border: 2px solid #e0e0e0;
			border-radius: 8px;
			padding: 20px;
			display: flex;
			align-items: center;
			gap: 20px;
			position: relative;
		}

		.pdf-component .pdf-icon {
			background: #dc3545;
			color: white;
			width: 60px;
			height: 60px;
			border-radius: 8px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28px;
			flex-shrink: 0;
		}

		.pdf-component .pdf-info {
			flex: 1;
		}

		.pdf-component h4 {
			color: #333;
			font-size: 18px;
			margin-bottom: 5px;
		}

		.pdf-component .pdf-description {
			color: #666;
			font-size: 14px;
			margin-bottom: 5px;
		}

		.pdf-component .pdf-size {
			color: #999;
			font-size: 12px;
		}

		.pdf-component .pdf-download {
			background: #dc3545;
			color: white;
			padding: 8px 20px;
			border-radius: 20px;
			text-decoration: none;
			font-size: 14px;
			font-weight: 500;
			display: inline-block;
			transition: all 0.3s ease;
		}

		.pdf-component .pdf-download:hover {
			background: #c82333;
			transform: translateY(-2px);
		}

		/* New Listing Component */
		.listing-component {
			background: #fff;
			border: 2px solid #e0e0e0;
			border-radius: 12px;
			padding: 20px;
			position: relative;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
		}

		.listing-component:hover {
			border-color: #667eea;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		}

		.listing-component .listing-header {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			margin-bottom: 15px;
		}

		.listing-component .listing-type {
			background: #667eea;
			color: white;
			padding: 4px 12px;
			border-radius: 20px;
			font-size: 12px;
			font-weight: 600;
			text-transform: uppercase;
		}

		.listing-component .listing-type.job {
			background: #2ecc71;
		}

		.listing-component .listing-type.sale {
			background: #e74c3c;
		}

		.listing-component .listing-type.rent {
			background: #f39c12;
		}

		.listing-component .listing-type.service {
			background: #3498db;
		}

		.listing-component h3 {
			color: #333;
			font-size: 20px;
			margin-bottom: 10px;
			flex: 1;
		}

		.listing-component .listing-price {
			color: #667eea;
			font-size: 24px;
			font-weight: bold;
			margin-bottom: 10px;
		}

		.listing-component .listing-location {
			color: #666;
			font-size: 14px;
			margin-bottom: 15px;
			display: flex;
			align-items: center;
			gap: 5px;
		}

		.listing-component .listing-location i {
			color: #999;
		}

		.listing-component .listing-description {
			color: #555;
			line-height: 1.6;
			margin-bottom: 20px;
		}

		.listing-component .listing-button {
			background: #667eea;
			color: white;
			padding: 10px 25px;
			border-radius: 25px;
			text-decoration: none;
			display: inline-block;
			font-weight: 600;
			transition: all 0.3s ease;
		}

		.listing-component .listing-button:hover {
			background: #5a6fd8;
			transform: translateY(-2px);
		}

		.social-component {
			text-align: center;
			padding: 25px;
			position: relative;
		}

		.social-component .social-links {
			display: flex;
			justify-content: center;
			gap: 20px;
			flex-wrap: wrap;
		}

		.social-component .social-link {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			background: #f0f0f0;
			color: #333;
			text-decoration: none;
			transition: all 0.3s ease;
			font-size: 24px;
		}

		.social-component .social-link:hover {
			transform: translateY(-3px);
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
		}

		.social-component .social-link.facebook:hover {
			background: #1877f2;
			color: white;
		}

		.social-component .social-link.twitter:hover {
			background: #1da1f2;
			color: white;
		}

		.social-component .social-link.instagram:hover {
			background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
			color: white;
		}

		.social-component .social-link.linkedin:hover {
			background: #0077b5;
			color: white;
		}

		.social-component .social-link.youtube:hover {
			background: #ff0000;
			color: white;
		}

		.social-component .social-link.whatsapp:hover {
			background: #25d366;
			color: white;
		}

		.qrcode-component {
			text-align: center;
			padding: 20px;
			position: relative;
		}

		.qrcode-component .qrcode-container {
			display: inline-block;
			padding: 15px;
			background: white;
			border: 2px solid #e0e0e0;
			border-radius: 12px;
			margin-bottom: 15px;
		}

		.qrcode-component .qrcode-placeholder {
			width: 200px;
			height: 200px;
			background: #f3f4f6;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 8px;
		}

		.qrcode-component .qrcode-placeholder i {
			font-size: 64px;
			color: #9b9b9b;
		}

		.qrcode-component .qrcode-caption {
			color: #666;
			font-size: 16px;
			margin-top: 10px;
		}

		/* Preview Mode Styles */
		.preview-mode .empty-state,
		.preview-mode .column-placeholder,
		.preview-mode .video-placeholder,
		.preview-mode .add-gallery-item,
		.preview-mode .component-controls,
		.preview-mode .gallery-item-controls,
		.preview-mode .spacer-label,
		.preview-mode .upload-trigger,
		.preview-mode [contenteditable="true"]:empty:before {
			display: none !important;
		}

		/* Ensure component controls never show on hover in preview mode */
		.preview-mode .email-component:hover .component-controls {
			display: none !important;
		}

		.preview-mode .gallery-item:hover .gallery-item-controls {
			display: none !important;
		}

		.preview-mode [contenteditable="true"] {
			outline: none !important;
			cursor: default !important;
		}

		.preview-mode .email-component {
			border-color: transparent !important;
		}

		.preview-mode .email-component:hover {
			border-color: transparent !important;
			box-shadow: none !important;
		}

		.preview-mode .spacer-component {
			border: none !important;
			background: transparent !important;
		}

		.preview-mode .column {
			border: none !important;
			cursor: default !important;
			background: transparent !important;
		}

		.preview-mode .column:hover {
			border-color: transparent !important;
			background: transparent !important;
		}

		/* Hide placeholder icons in preview mode */
		.preview-mode .gallery-item i,
		.preview-mode .product-image i,
		.preview-mode .essay-image i,
		.preview-mode .qrcode-placeholder i,
		.preview-mode .image-placeholder i {
			display: none !important;
		}

		/* Hide upload trigger cursor in preview mode */
		.preview-mode .upload-trigger,
		.preview-mode .gallery-item,
		.preview-mode .product-image,
		.preview-mode .essay-image,
		.preview-mode .image-placeholder {
			cursor: default !important;
		}

		/* Ensure video placeholder is completely hidden */
		.preview-mode .video-component .video-placeholder {
			display: none !important;
		}
}

[dir="rtl"] .ICBzone {
		/* RTL Support for Close Buttons */
		 .close-tinymce,
		.close-format,
		.close-settings {
			right: auto;
			left: 20px;
		}
		/* RTL Support for Sidebar */
		.sidebar {
			box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
			right: 0;
			left: auto;
		}
		/* RTL Support for Component Controls */
		.email-component .component-controls {
			right: auto;
			left: -15px;
		}
		/* RTL Support for Header Component Controls */
		.header-component .component-controls {
			right: auto;
			left: 5px;
		}
		/* RTL Support for Drag Handle Tooltip */
		.drag-handle:hover:after {
			content: "החזק וגרור לשינוי סדר";
		}
		/* RTL Support for Toolbar Groups */
		.toolbar-group {
			border-right: none;
			border-left: 1px solid #eee;
			padding-right: 0;
			padding-left: 8px;
			margin-right: 0;
			margin-left: 3px;
		}
		.toolbar-group:last-child {
			border-left: none;
			margin-left: 0;
			padding-left: 0;
		}
		/* RTL Support for Sortable Placeholder */
		.ui-sortable-placeholder:before {
			content: "שחרר כאן";
		}
		/* RTL Support for TinyMCE Actions */
		.tinymce-actions {
			justify-content: flex-start;
		}
		/* RTL Support for Modal Content */
		.format-modal-content,
		.tinymce-modal-content,
		.settings-modal-content {
			text-align: right;
		}
		/* RTL Support for Button Actions */
		.button-format-actions {
			justify-content: flex-start;
		}
		/* RTL Support for Essay Component */
		.essay-component {
			border-left: none;
			border-right: 4px solid #667eea;
			padding-left: 0;
			padding-right: 20px;
		}
		/* RTL Support for Gallery Item Controls */
		.gallery-component .gallery-item-controls {
			right: auto;
			left: 5px;
		}
		/* RTL Support for Listing Location */
		.listing-component .listing-location i {
			margin-right: 0;
			margin-left: 5px;
		}
		/* Success Message Positioning for RTL */
		.success-message {
			right: auto !important;
			left: 20px !important;
		}
		/* Favorites Section RTL Support */
		.favorites-section select {
			direction: rtl;
		}
}