/* Tabs Component Styles */
/* Remove all spacing from CKEditor content in tabs */
.tabs .ck.ck-editor__editable_inline,
.tabs .ck.ck-editor__editable_inline > *,
.tabs .ck.ck-editor__editable_inline > *:first-child,
.tabs .ck.ck-editor__editable_inline > *:last-child {
	margin: 0 !important;
	padding: 0 !important;
	display: inline !important;
}

body .tabs .text-wrapper {
    margin: 0 !important;
    padding: 0 !important;
}

.nav-item .active span,
.nav-item .active p,
.nav-item .active h1,
.nav-item .active h2,
.nav-item .active h3,
.nav-item .active h4,
.nav-item .active h5,
.nav-item .active h6 {
  color: white !important;
}

.mse-new-tabs-container-bordered-gray-400 {
  border: 1px solid #e6e6e6;
  padding: 0.75rem;
  background: #fff;
  margin-left: auto;
  margin-right: auto;
}

/* Nav tabs container - using divs instead of ul/li */
.mse-new-tabs-container-bordered-gray-400 .nav-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

/* Tab item wrapper (replaces li.nav-item) */
.mse-new-tabs-container-bordered-gray-400 .nav-item.tab-item-wrapper {
  display: flex;
  align-items: stretch;
}

/* Tab header wrapper (matches accordion pattern) */
.mse-new-tabs-container-bordered-gray-400 .tab-header {
  display: contents; /* Makes children behave as if tab-header doesn't exist in layout */
}

/* Tab buttons */
.mse-new-tabs-container-bordered-gray-400 .nav-tabs .nav-link {
  border: 1px solid rgba(0,0,0,0.06);
}

/* Drop container styling for tab content */
.mse-tab-content-area {
  padding: 1rem 0.5rem;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  min-height: 100px;
}

/* Ensure proper spacing for nested components */
.mse-tab-content-area > * {
  margin-bottom: 1rem;
}

.mse-tab-content-area > *:last-child {
  margin-bottom: 0;
}

/* Editable mode - empty state placeholder */
[data-drop-container="true"].mse-tab-content-area:empty::after {
  content: 'Drop components here';
  display: block;
  padding: 20px;
  text-align: center;
  color: #999;
  font-style: italic;
  border: 1px dashed rgba(0,0,0,0.12);
}

.nestable-placeholder {
  border: 1px dashed rgba(0,0,0,0.12);
  padding: 1rem;
  color: rgba(0,0,0,0.5);
}