/**
 * Fix for layout builder styling overlay issues.
 * Addresses the white overlay that appears on top of content when editing the home page layout.
 */

/* Make ALL white backgrounds in the layout builder semi-transparent */
.layout-builder-block,
.layout-builder-block__content,
.layout-builder-block__content > div,
.layout-builder [data-layout-content-preview-placeholder-label*="Donate"],
.layout-builder [data-layout-content-preview-placeholder-label*="Donate"] > div,
.layout-builder [data-layout-content-preview-placeholder-label*="Donate"] .layout-builder-block__content,
.layout-builder [data-layout-content-preview-placeholder-label*="Donate"] .layout-builder-block__content > div {
  background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Ensure the donate button text is visible and properly colored */
.layout-builder [data-layout-content-preview-placeholder-label*="Donate"] .field--name-field-link a {
  position: relative !important;
  z-index: 5 !important;
  color: #fff !important;
  font-weight: bold !important;
  background-color: #2196F3 !important;
  display: block !important;
  padding: 10px !important;
  text-align: center !important;
  border-radius: 4px !important;
  margin: 10px !important;
}

/* Fix the rich text editor overflow issue */
.ck-editor__editable {
  max-width: 100% !important;
  overflow: auto !important;
}

/* Make the dialog background white and text dark for better visibility */
.ui-dialog,
.ui-dialog .ui-dialog-content,
.ui-dialog .ui-widget-content,
.ui-dialog .ui-tabs-panel,
.ui-dialog .details-wrapper,
.ui-dialog form,
.ui-dialog fieldset {
  background-color: #ffffff !important;
  color: #333333 !important;
}

/* Fix the tab styling */
.ui-dialog .ui-tabs-nav,
.ui-dialog ul[data-drupal-selector*="tabs"],
.ui-dialog nav.tabs {
  display: flex !important;
  background-color: #f5f5f5 !important;
  border-bottom: 1px solid #ddd !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: 100% !important;
}

.ui-dialog .ui-tabs-nav li,
.ui-dialog ul[data-drupal-selector*="tabs"] li,
.ui-dialog nav.tabs li {
  flex: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  text-align: center !important;
}

.ui-dialog .ui-tabs-nav a,
.ui-dialog ul[data-drupal-selector*="tabs"] a,
.ui-dialog nav.tabs a {
  display: block !important;
  padding: 10px !important;
  background-color: #e0e0e0 !important;
  color: #333333 !important;
  text-decoration: none !important;
  border: 1px solid #ccc !important;
  border-bottom: none !important;
  border-radius: 4px 4px 0 0 !important;
  margin-right: 2px !important;
  font-weight: normal !important;
}

.ui-dialog .ui-tabs-nav li.ui-tabs-active a,
.ui-dialog ul[data-drupal-selector*="tabs"] li.active a,
.ui-dialog nav.tabs a.is-active {
  background-color: #ffffff !important;
  color: #2196F3 !important;
  font-weight: bold !important;
  border-bottom-color: #ffffff !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Style tab icons */
.ui-dialog .ui-tabs-nav a svg,
.ui-dialog .ui-tabs-nav a img,
.ui-dialog ul[data-drupal-selector*="tabs"] a svg,
.ui-dialog ul[data-drupal-selector*="tabs"] a img,
.ui-dialog nav.tabs a svg,
.ui-dialog nav.tabs a img {
  display: inline-block !important;
  vertical-align: middle !important;
  margin-right: 5px !important;
  width: 16px !important;
  height: 16px !important;
  fill: #666 !important;
}

.ui-dialog .ui-tabs-nav li.ui-tabs-active a svg,
.ui-dialog .ui-tabs-nav li.ui-tabs-active a img,
.ui-dialog ul[data-drupal-selector*="tabs"] li.active a svg,
.ui-dialog ul[data-drupal-selector*="tabs"] li.active a img,
.ui-dialog nav.tabs a.is-active svg,
.ui-dialog nav.tabs a.is-active img {
  fill: #2196F3 !important;
}

/* Make form labels and fields visible */
.ui-dialog label {
  color: #333333 !important;
  font-weight: bold !important;
  display: block !important;
  margin-bottom: 5px !important;
}

.ui-dialog input,
.ui-dialog select,
.ui-dialog textarea {
  background-color: #ffffff !important;
  color: #333333 !important;
  border: 1px solid #cccccc !important;
}

/* Improve styling for the Style tab sections */
.ui-dialog details,
.ui-dialog summary,
.ui-dialog .form-item {
  background-color: #ffffff !important;
  color: #333333 !important;
}

/* Style the Background, Typography, and other sections */
.ui-dialog summary {
  padding: 10px !important;
  font-weight: bold !important;
  border-bottom: 1px solid #eee !important;
  cursor: pointer !important;
}

/* Style the Typography section */
.ui-dialog details[data-drupal-selector*="typography"],
.ui-dialog .form-item-settings-block-form-field-typography {
  background-color: #ffffff !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  margin-bottom: 10px !important;
}

/* Style the Typography button */
.ui-dialog [data-drupal-selector*="typography"] summary,
.ui-dialog .form-item-settings-block-form-field-typography button {
  background-color: #f5f5f5 !important;
  color: #333333 !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  padding: 8px 12px !important;
  display: flex !important;
  align-items: center !important;
}

/* Style the icons/glyphs in the Style menu */
.ui-dialog [data-drupal-selector*="typography"] svg,
.ui-dialog [data-drupal-selector*="typography"] .icon,
.ui-dialog [data-drupal-selector*="alignment"] svg,
.ui-dialog [data-drupal-selector*="alignment"] .icon,
.ui-dialog [data-drupal-selector*="background"] svg,
.ui-dialog [data-drupal-selector*="background"] .icon {
  fill: #333333 !important;
  color: #333333 !important;
  width: 20px !important;
  height: 20px !important;
  margin-right: 8px !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* Style the alignment options */
.ui-dialog [data-drupal-selector*="alignment"] .form-item {
  background-color: #ffffff !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  padding: 10px !important;
  margin-bottom: 10px !important;
}

/* Fix the color picker */
.ui-dialog [data-drupal-selector*="color"] .form-item {
  background-color: #ffffff !important;
  padding: 10px !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
}

/* Fix the dark background in alignment section */
.ui-dialog [data-drupal-selector*="alignment"] .form-radios,
.ui-dialog [data-drupal-selector*="alignment"] .form-radios *,
.ui-dialog [data-drupal-selector*="alignment"] .form-radios label,
.ui-dialog [data-drupal-selector*="alignment"] .form-radios .form-item,
.ui-dialog [data-drupal-selector*="alignment"] .form-radios .form-item *,
.ui-dialog [data-drupal-selector*="alignment"] .form-radios svg,
.ui-dialog [data-drupal-selector*="alignment"] .form-radios img {
  background-color: #ffffff !important;
  color: #333333 !important;
  fill: #333333 !important;
}

.ui-dialog [data-drupal-selector*="alignment"] .form-radios {
  display: flex !important;
  flex-direction: column !important;
  padding: 5px !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
}

.ui-dialog [data-drupal-selector*="alignment"] .form-radios .form-item {
  margin: 5px !important;
  padding: 8px !important;
  border: 1px solid #eee !important;
  border-radius: 4px !important;
  display: flex !important;
  align-items: center !important;
}

.ui-dialog [data-drupal-selector*="alignment"] .form-radios input {
  margin-right: 10px !important;
}

/* Fix background icons/glyphs */
.ui-dialog [data-drupal-selector*="background"] {
  background-color: #ffffff !important;
}

.ui-dialog [data-drupal-selector*="background"] .fieldset-wrapper,
.ui-dialog [data-drupal-selector*="background"] .form-item,
.ui-dialog [data-drupal-selector*="background"] .form-radios,
.ui-dialog [data-drupal-selector*="background"] .form-radios * {
  background-color: #ffffff !important;
  color: #333333 !important;
}

.ui-dialog [data-drupal-selector*="background"] .form-radios {
  display: flex !important;
  justify-content: space-around !important;
  padding: 10px !important;
}

.ui-dialog [data-drupal-selector*="background"] .form-radios .form-item {
  margin: 0 5px !important;
  padding: 5px !important;
  border: 1px solid #eee !important;
  border-radius: 4px !important;
}

.ui-dialog [data-drupal-selector*="background"] .form-radios svg,
.ui-dialog [data-drupal-selector*="background"] .form-radios img,
.ui-dialog [data-drupal-selector*="background"] .form-radios .icon {
  fill: #333333 !important;
  color: #333333 !important;
  width: 24px !important;
  height: 24px !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Fix color picker tooltip/overlay */
.ui-dialog [data-drupal-selector*="color"] .form-item,
.ui-dialog [data-drupal-selector*="color"] .form-radios,
.ui-dialog [data-drupal-selector*="color"] .form-radios *,
.ui-dialog [data-drupal-selector*="color"] .tooltip,
.ui-dialog [data-drupal-selector*="color"] .tooltip-inner,
.ui-dialog [data-drupal-selector*="color"] .tooltip-arrow {
  background-color: #ffffff !important;
  color: #333333 !important;
  border-color: #ddd !important;
}

.ui-dialog [data-drupal-selector*="color"] .tooltip {
  opacity: 1 !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
}

.ui-dialog [data-drupal-selector*="color"] .tooltip-inner {
  padding: 5px 10px !important;
  font-weight: normal !important;
  max-width: none !important;
}

/* Style the dialog title bar */
.ui-dialog .ui-dialog-titlebar {
  background-color: #2196F3 !important;
  color: white !important;
  font-weight: bold !important;
}

/* Ensure buttons are visible */
.ui-dialog button {
  background-color: #f5f5f5 !important;
  color: #333333 !important;
  border: 1px solid #cccccc !important;
  padding: 5px 10px !important;
}

.ui-dialog button.button--primary {
  background-color: #2196F3 !important;
  color: white !important;
  border: none !important;
}

/* Remove black border around Donate button in edit mode */
.layout-builder-block[data-layout-block-uuid] a.btn-primary,
.layout-builder-block[data-layout-block-uuid] button.btn-primary,
.layout-builder [data-layout-content-preview] a.btn-primary,
.layout-builder [data-layout-content-preview] button.btn-primary,
.layout-builder [data-layout-delta] a.btn-primary,
.layout-builder [data-layout-delta] button.btn-primary,
.layout-builder .layout-builder-block a.btn-primary,
.layout-builder .layout-builder-block button.btn-primary {
  border: 1px solid #0b7dda !important;
  outline: none !important;
  box-shadow: none !important;
}