/**
 * Layout Builder Icons - Consistent Height and Alignment
 */

/* Red circular remove button - icon only, no text - 40px height */
.layout-builder__link--remove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 50% !important;
  background-color: #dc2626 !important;
  border: 2px solid #dc2626 !important;
  color: #fff !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  font-size: 0 !important;
  line-height: 0 !important;
  vertical-align: middle !important;
  margin: 0 8px 0 0 !important;
  flex-shrink: 0 !important;
}

/* Hide the "Remove Header" text */
.layout-builder__link--remove .visually-hidden,
.layout-builder__link--remove span,
.layout-builder__link--remove::before {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

/* Show only the X icon using ::after */
.layout-builder__section .layout-builder__link--remove::after {
  content: "×" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: #b91c1c !important;
  font-size: 24px !important;
  line-height: 1 !important;
  font-weight: bold !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 100 !important;
}

/* Hover state - darker red */
.layout-builder__link--remove:hover {
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
}

.layout-builder__link--remove:hover::after {
  color: #fff !important;
}

/* Focus state */
.layout-builder__link--remove:focus {
  outline: 2px solid #82dcb4 !important;
  outline-offset: 2px !important;
}

/* Configure Header button - green with icon and text - 40px height */
.layout-builder__link--configure {
  background-color: #82dcb4 !important;
  border: 2px solid #82dcb4 !important;
  color: #002823 !important;
  padding: 0 1rem !important;
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  margin: 0 8px 0 0 !important;
  flex-shrink: 0 !important;
}

/* Show configure text */
.layout-builder__link--configure .visually-hidden {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  margin: 0 8px 0 0 !important;
  padding: 0 !important;
}

.layout-builder__link--configure::before {
  content: "⚙" !important;
  margin-right: 0.5rem !important;
  font-size: 16px !important;
  display: inline-block !important;
  line-height: 1 !important;
}

.layout-builder__link--configure:hover {
  background-color: #a0e6c8 !important;
  border-color: #a0e6c8 !important;
}

/* Add section to library button - mustard with icon and text - 40px height */
.layout-builder__link[href*="add-section-library"],
a[href*="add-section-library"] {
  background-color: #d7a000 !important;
  border: 2px solid #d7a000 !important;
  color: #002823 !important;
  padding: 0 1rem !important;
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.layout-builder__link[href*="add-section-library"] .visually-hidden,
a[href*="add-section-library"] .visually-hidden {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  margin: 0 !important;
  padding: 0 !important;
}

.layout-builder__link[href*="add-section-library"]::before,
a[href*="add-section-library"]::before {
  content: "📚" !important;
  margin-right: 0.5rem !important;
  font-size: 16px !important;
  display: inline-block !important;
  line-height: 1 !important;
}

.layout-builder__link[href*="add-section-library"]:hover,
a[href*="add-section-library"]:hover {
  background-color: #e1b432 !important;
  border-color: #e1b432 !important;
}

/* General layout builder link improvements */
.layout-builder__link {
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

/* Ensure proper spacing and alignment between controls */
.layout-builder__section-controls,
.layout-builder-block__controls {
  display: flex !important;
  gap: 0.5rem !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

/* Reset any interfering styles */
.layout-builder__section-controls>*,
.layout-builder-block__controls>* {
  margin: 0 8px 0 0 !important;
  vertical-align: middle !important;
}

/* Remove any text-indent that might hide content */
.layout-builder__link,
.layout-builder__link * {
  text-indent: 0 !important;
}

/* Ensure no hidden overflow */
.layout-builder-block,
.layout-builder__section,
.layout-builder__section-controls {
  overflow: visible !important;
}

/* Force all buttons to be on the same baseline */
.layout-builder__section-controls .layout-builder__link {
  align-self: center !important;
}

/* Extra specificity for add section to library button margin override */
.layout-builder__section-controls .layout-builder__link[href*="add-section-library"],
.layout-builder__section-controls a[href*="add-section-library"],
.layout-builder-form .layout-builder__link[href*="add-section-library"],
.layout-builder-form a[href*="add-section-library"] {
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


.layout-builder__link--add-section-to-library {
  margin-left: 0 !important;
}

/* Tabs wrapper - full width ul */
.tabs-wrapper ul {
  width: 100% !important;
}

.tabs-wrapper ul li a[href*="delete"]::before {
  display: none !important;
}

/* Tabs wrapper - proper alignment */
.tabs-wrapper {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
}

.tabs-wrapper ul {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  gap: 0 !important;
  background-color: #e6f5e1 !important;
}

/* Individual tab items */
.tabs-wrapper ul li {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Tab links - proper vertical alignment */
.tabs-wrapper ul li a,
.tabs-wrapper ul li .tabs__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.75rem 1.5rem !important;
  text-decoration: none !important;
  border-bottom: 3px solid transparent !important;
  transition: all 0.2s ease !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  min-height: 48px !important;
}

/* Active tab */
.tabs-wrapper ul li a.is-active,
.tabs-wrapper ul li .tabs__link.is-active {
  border-bottom-color: #002823 !important;
  font-weight: 800 !important;
  color: #002823 !important;
}

/* Hover state */
.tabs-wrapper ul li a:hover,
.tabs-wrapper ul li .tabs__link:hover {
  background-color: rgba(0, 117, 255, 0.05) !important;
}

.tabs-wrapper.is-horizontal .tabs__link.is-active::before {
  display: none !important;
}

/* Block contextual menu - Remove block styling to match Configure and Move */
.contextual-links a[href*="remove/block"],
.contextual-links .layout-builder__link--remove {
  color: #dc2626 !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0.5rem 1rem !important;
  display: flex !important;
  align-items: center !important;
  font-size: 14px !important;
  font-weight: normal !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease !important;
  width: auto !important;
  height: auto !important;
  min-height: auto !important;
  margin: 0 !important;
}

/* Remove the circular styling from contextual menu remove links */
.contextual-links a[href*="remove/block"]::after,
.contextual-links .layout-builder__link--remove::after {
  display: none !important;
}

/* Show the X icon before text in contextual menu */
.contextual-links a[href*="remove/block"]::before,
.contextual-links .layout-builder__link--remove::before {
  content: "✕" !important;
  display: inline-block !important;
  margin-right: 0.5rem !important;
  font-size: 16px !important;
  font-weight: bold !important;
  color: #dc2626 !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  height: auto !important;
  position: static !important;
  transform: none !important;
}

/* Show the "Remove block" text */
.contextual-links a[href*="remove/block"] .visually-hidden,
.contextual-links .layout-builder__link--remove .visually-hidden {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
}

/* Hover state for remove block */
.contextual-links a[href*="remove/block"]:hover,
.contextual-links .layout-builder__link--remove:hover {
  background-color: rgba(220, 38, 38, 0.1) !important;
  color: #dc2626 !important;
}

.contextual-links a[href*="remove/block"]:hover::before,
.contextual-links .layout-builder__link--remove:hover::before {
  color: #dc2626 !important;
}

/* Ensure consistent styling with Configure and Move */
.contextual-links a {
  font-size: 14px !important;
  padding: 0.5rem 1rem !important;
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease !important;
}

.contextual-links a:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

/* Remove the X icon before "Remove block" text */
.contextual-links a[href*="remove/block"]::before,
.contextual-links .layout-builder__link--remove::before {
  display: none !important;
  content: none !important;
}

/* Block contextual trigger button - remove background, black icon */
.contextual .trigger,
.contextual-links .trigger,
button.trigger {
  background-color: transparent !important;
}



/* Delete tab - match View tab design */
.tabs-wrapper a[href*="delete"],
.tabs-wrapper .tabs__link[href*="delete"] {
  color: #000 !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  padding: 0.75rem 1.5rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  font-weight: normal !important;
  font-size: 14px !important;
  line-height: 1 !important;
  min-height: 48px !important;
  transition: all 0.2s ease !important;
}

/* Remove red styling from Delete tab */
.tabs-wrapper a[href*="delete"]:hover,
.tabs-wrapper .tabs__link[href*="delete"]:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
  color: #000 !important;
  border-bottom-color: transparent !important;
}

/* If Delete tab is active */
.tabs-wrapper a[href*="delete"].is-active,
.tabs-wrapper .tabs__link[href*="delete"].is-active {
  border-bottom-color: #0075FF !important;
  font-weight: 600 !important;
  color: #000 !important;
  background-color: transparent !important;
}
/* Delete tab - improved hover effect to match other tabs */
.tabs-wrapper a[href*="delete"]:hover,
.tabs-wrapper .tabs__link[href*="delete"]:hover {
  background-color: rgba(0, 117, 255, 0.05) !important;
  color: #000 !important;
  border-bottom-color: rgba(0, 117, 255, 0.05) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Dialog/Modal warning text - black color */
.ui-dialog .messages,
.ui-dialog-content .messages,
.layout-builder-remove-block .messages,
.dialog-off-canvas-main-canvas .messages,
[role="dialog"] .messages {
  color: #000 !important;
}

/* Specific targeting for "This action cannot be undone" text */
.ui-dialog .messages__content,
.ui-dialog-content .messages__content,
.ui-dialog p,
.ui-dialog-content p {
  color: #000 !important;
}

/* Dialog text content */
.ui-dialog,
.ui-dialog-content,
[role="dialog"] {
  color: #000 !important;
}

/* Dialog content - equal spacing top and bottom for text */
.ui-dialog-content,
.ui-dialog .messages,
[role="dialog"] .messages {
  padding: 1.5rem !important;
  margin: 0 !important;
}

.ui-dialog-content p,
.ui-dialog .messages p,
.ui-dialog .messages__content {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1.6 !important;
}

/* Dialog buttons - same height for Remove and Cancel */
.ui-dialog .form-actions,
.ui-dialog-buttonpane,
.ui-dialog .button,
.ui-dialog button,
.ui-dialog input[type="submit"] {
  margin: 0 !important;
}

.ui-dialog .form-actions .button,
.ui-dialog-buttonpane .button,
.ui-dialog .form-actions button,
.ui-dialog-buttonpane button,
.ui-dialog .form-actions input[type="submit"],
.ui-dialog-buttonpane input[type="submit"] {
  height: 44px !important;
  min-height: 44px !important;
  padding: 0.75rem 1.5rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0.375rem !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  border: 2px solid !important;
  transition: all 0.2s ease !important;
  margin: 0 0.5rem 0 0 !important;
  cursor: pointer !important;
}

/* Cancel button - light gray */
.ui-dialog .form-actions .button[value="Cancel"],
.ui-dialog-buttonpane .button[value="Cancel"],
.ui-dialog .form-actions button:not([value="Remove"]),
.ui-dialog-buttonpane button:not([value="Remove"]) {
  background-color: #f3f4f6 !important;
  border-color: #d1d5db !important;
  color: #374151 !important;
}

.ui-dialog .form-actions .button[value="Cancel"]:hover,
.ui-dialog-buttonpane .button[value="Cancel"]:hover,
.ui-dialog .form-actions button:not([value="Remove"]):hover,
.ui-dialog-buttonpane button:not([value="Remove"]):hover {
  background-color: #e5e7eb !important;
  border-color: #9ca3af !important;
}

/* Remove button - dark green/forest */
.ui-dialog .form-actions .button[value="Remove"],
.ui-dialog-buttonpane .button[value="Remove"],
.ui-dialog .form-actions input[type="submit"][value="Remove"],
.ui-dialog-buttonpane input[type="submit"][value="Remove"] {
  background-color: #002823 !important;
  border-color: #002823 !important;
  color: #fff !important;
}

.ui-dialog .form-actions .button[value="Remove"]:hover,
.ui-dialog-buttonpane .button[value="Remove"]:hover,
.ui-dialog .form-actions input[type="submit"][value="Remove"]:hover,
.ui-dialog-buttonpane input[type="submit"][value="Remove"]:hover {
  background-color: #19463c !important;
  border-color: #19463c !important;
}

/* Button container spacing */
.ui-dialog .form-actions,
.ui-dialog-buttonpane {
  padding: 1rem 1.5rem !important;
  margin: 0 !important;
  display: flex !important;
  gap: 0.5rem !important;
  justify-content: flex-end !important;
  border-top: 1px solid #e5e7eb !important;
}

/* Hide the non-working button.cancel-button */
.layout-builder-remove-block.confirmation.katacart-form .form-actions button.cancel-button {
  display: none !important;
}

.layout-builder-remove-block.confirmation.katacart-form .form-actions {
  margin: 0 -2rem -2rem !important;
}
/* Override form actions margin - remove top margin */
.layout-builder-remove-block.confirmation.katacart-form .form-actions {
  margin: 0px -2rem -2rem !important;
}

/* Force override with higher specificity - remove top margin */
.ui-dialog .layout-builder-remove-block.confirmation.katacart-form .form-actions,
.ui-dialog-content .layout-builder-remove-block.confirmation.katacart-form .form-actions,
div.layout-builder-remove-block.confirmation.katacart-form .form-actions {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Configure block popup/dialog header styling */
.ui-dialog .ui-dialog-titlebar,
.ui-dialog-titlebar,
.layout-builder-configure-block .ui-dialog-titlebar,
[role="dialog"] .ui-dialog-titlebar {
  background-color: #002823 !important;
  color: #fff !important;
  padding: 0rem 1rem !important;
  border-bottom: 2px solid #002823 !important;
}

/* Dialog title text - white color */
.ui-dialog .ui-dialog-title,
.ui-dialog-title,
.layout-builder-configure-block .ui-dialog-title,
[role="dialog"] .ui-dialog-title {
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  padding: 10px !important;
  line-height: 30px !important;
}

/* Close button in header */
.ui-dialog .ui-dialog-titlebar-close,
.ui-dialog-titlebar-close {
  color: #fff !important;
  background-color: transparent !important;
  border: none !important;
  opacity: 0.8 !important;
}

.ui-dialog .ui-dialog-titlebar-close:hover,
.ui-dialog-titlebar-close:hover {
  opacity: 1 !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Close button icon */
.ui-dialog-titlebar-close .ui-icon {
  color: #fff !important;
  background-color: transparent !important;
}