/* Accordion Component Styles */
.accordion .ck.ck-editor__editable_inline > *:first-child,
.accordion .ck.ck-editor__editable_inline > *:last-child {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

body .accordion .text-wrapper {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ===== Bootstrap Accordion Base Styles ===== */
.accordion {
  --bs-accordion-color: #6c757d;
  --bs-accordion-bg: #ffffff;
  --bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
  --bs-accordion-border-color: #D7DADD;
  --bs-accordion-border-width: 10px;
  --bs-accordion-border-radius: 20px;
  --bs-accordion-inner-border-radius: 10px;
  --bs-accordion-btn-padding-x: 25px;
  --bs-accordion-btn-padding-y: 25px;
  --bs-accordion-btn-color: #0A5087;
  --bs-accordion-btn-bg: #ffffff;
  --bs-accordion-btn-icon: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2211%22%20viewBox%3D%220%200%2016%2011%22%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url(%23clip0_2361_4794)%22%3E%3Cpath%20d%3D%22M6.98486%2010.3647L0.344239%203.72412C-0.114745%203.26514%20-0.114745%202.52295%200.344239%202.06885L1.44775%200.965331C1.90674%200.506347%202.64893%200.506347%203.10303%200.965331L7.81006%205.67236L12.5171%200.965332C12.9761%200.506348%2013.7183%200.506348%2014.1724%200.965332L15.2856%202.06396C15.7446%202.52295%2015.7446%203.26514%2015.2856%203.71924L8.64502%2010.3599C8.18603%2010.8237%207.44385%2010.8237%206.98486%2010.3647Z%22%20fill%3D%22%230A5087%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_2361_4794%22%3E%3Crect%20width%3D%2216%22%20height%3D%2210%22%20fill%3D%22white%22%20transform%3D%22translate(0%200.621094)%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E');
  --bs-accordion-btn-icon-width: 1.25rem;
  --bs-accordion-btn-icon-transform: rotate(-180deg);
  --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
  --bs-accordion-btn-active-icon: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2211%22%20viewBox%3D%220%200%2016%2011%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M6.98486%2010.2437L0.344239%203.60303C-0.114745%203.14404%20-0.114745%202.40185%200.344239%201.94775L1.44775%200.844238C1.90674%200.385253%202.64893%200.385253%203.10303%200.844238L7.81006%205.55127L12.5171%200.844238C12.9761%200.385254%2013.7183%200.385254%2014.1724%200.844238L15.2856%201.94287C15.7446%202.40186%2015.7446%203.14404%2015.2856%203.59814L8.64502%2010.2388C8.18603%2010.7026%207.44385%2010.7026%206.98486%2010.2437Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E');
  --bs-accordion-btn-focus-border-color: #86b7fe;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  --bs-accordion-body-padding-x: 25px;
  --bs-accordion-body-padding-y: 25px;
  --bs-accordion-active-color: #ffffff;
  --bs-accordion-active-bg: #0083CA;
}

.accordion-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
  font-size: 1rem;
  color: var(--bs-accordion-btn-color);
  text-align: left;
  background-color: var(--bs-accordion-btn-bg);
  border: 0;
  border-radius: 0;
  overflow-anchor: none;
  transition: var(--bs-accordion-transition);
  box-shadow: none !important;
}

.accordion-button p {
  margin-bottom:0 !important;
}

.accordion-button:not(.collapsed) {
  color: var(--bs-accordion-active-color);
  background-color: var(--bs-accordion-active-bg);
  box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
  border-top-left-radius: var(--bs-accordion-inner-border-radius);
  border-top-right-radius: var(--bs-accordion-inner-border-radius);
}

.accordion-button:not(.collapsed)::after {
  background-image: var(--bs-accordion-btn-active-icon);
  transform: var(--bs-accordion-btn-icon-transform);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.accordion-button::after {
  flex-shrink: 0;
  width: 15px;
  height: var(--bs-accordion-btn-icon-width);
  margin-left: auto;
  content: "";
  background-image: var(--bs-accordion-btn-icon);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: var(--bs-accordion-btn-icon-transition);
}

.accordion-button:hover {
  z-index: 2;
}

.accordion-button:focus {
  z-index: 3;
  border-color: var(--bs-accordion-btn-focus-border-color);
  outline: 0;
  box-shadow: var(--bs-accordion-btn-focus-box-shadow);
}

.accordion-button.collapsed {
  border-radius: var(--bs-accordion-inner-border-radius);
}

.accordion-button span {
  font-size: 18px;
  user-select: none;
}

.accordion-button:not(.collapsed) span,
.accordion-button:not(.collapsed) p {
  color: white !important;
}

.accordion-header {
  margin-bottom: 0;
}

/* Active accordion header styling */
.accordion-header.accordion-active {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.accordion-item {
  color: var(--bs-accordion-color);
  background-color: var(--bs-accordion-border-color);
  border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
}

.accordion-item:first-of-type {
  border-top-left-radius: var(--bs-accordion-border-radius);
  border-top-right-radius: var(--bs-accordion-border-radius);
}

.accordion-item:first-of-type .accordion-button {
  border-top-left-radius: var(--bs-accordion-inner-border-radius);
  border-top-right-radius: var(--bs-accordion-inner-border-radius);
}

.accordion-item:not(:first-of-type) {
  border-top: 0;
}

.accordion-item:last-of-type {
  border-bottom-right-radius: var(--bs-accordion-border-radius);
  border-bottom-left-radius: var(--bs-accordion-border-radius);
}

.accordion-item:last-of-type .accordion-button.collapsed {
  border-bottom-right-radius: var(--bs-accordion-inner-border-radius);
  border-bottom-left-radius: var(--bs-accordion-inner-border-radius);
}

.accordion-item:last-of-type .accordion-collapse {
  border-bottom-right-radius: var(--bs-accordion-border-radius);
  border-bottom-left-radius: var(--bs-accordion-border-radius);
}

.accordion-body {
  padding-bottom: 60px;
}

.accordion-collapse {
  border-bottom-left-radius: var(--bs-accordion-inner-border-radius);
  border-bottom-right-radius: var(--bs-accordion-inner-border-radius);
  background-color: var(--bs-accordion-bg);
}

.accordion-collapse.collapse {
  display: none !important;
}

.accordion-collapse.collapse.show {
  display: block !important;
}

/* Flush accordion items - removes borders */
.accordion-flush .accordion-collapse {
  border-width: 0;
}

.accordion-flush .accordion-item {
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}

.accordion-flush .accordion-item:first-child {
  border-top: 0;
}

.accordion-flush .accordion-item:last-child {
  border-bottom: 0;
}

.accordion-flush .accordion-item .accordion-button,
.accordion-flush .accordion-item .accordion-button.collapsed {
  border-radius: 0;
}

/* ===== Custom SDC Component Styles ===== */

/* Drop container styling */
.mse-accordion-content-area {
  padding: 1rem 0.5rem;
  min-height: 50px;
}

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

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

/* Editable mode - empty state placeholder */
[data-drop-container="true"].mse-accordion-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);
}