/**
 * Elementor Margin and Padding Fix
 * This file ensures Elementor's margin and padding controls work properly with Mystic widgets
 * by allowing Elementor's inline styles to override widget CSS
 */

/* 
 * Core fix: When Elementor adds inline margin/padding styles to the widget container,
 * those styles should take precedence over our widget CSS !important declarations
 */

/* Fix for all Mystic widgets - Allow Elementor's widget container controls to work */
.elementor-widget-container[style*="margin"] {
  margin: initial !important;
}

.elementor-widget-container[style*="padding"] {
  padding: initial !important;
}

/* 
 * Fix for Elementor's Advanced tab controls on individual elements
 * This allows margin/padding to be set on any element within our widgets
 */

/* Target elements that have Elementor's inline margin styles */
[style*="margin"]:not(.elementor-widget-container) {
  margin: initial !important;
}

/* Target elements that have Elementor's inline padding styles */  
[style*="padding"]:not(.elementor-widget-container) {
  padding: initial !important;
}

/*
 * Specific fixes for responsive controls
 * Elementor adds CSS custom properties for responsive values
 */

/* Responsive margin controls */
.elementor-widget[style*="--margin"] * {
  margin: var(--margin-mobile, var(--margin-tablet, var(--margin-desktop, var(--margin)))) !important;
}

/* Responsive padding controls */
.elementor-widget[style*="--padding"] * {
  padding: var(--padding-mobile, var(--padding-tablet, var(--padding-desktop, var(--padding)))) !important;
}

/*
 * Ensure proper CSS specificity for common Elementor control patterns
 */

/* When Elementor sets margin on widget containers */
.elementor-element .elementor-widget-container[style*="margin-top"],
.elementor-element .elementor-widget-container[style*="margin-right"], 
.elementor-element .elementor-widget-container[style*="margin-bottom"],
.elementor-element .elementor-widget-container[style*="margin-left"],
.elementor-element .elementor-widget-container[style*="margin:"] {
  margin: initial !important;
}

/* When Elementor sets padding on widget containers */
.elementor-element .elementor-widget-container[style*="padding-top"],
.elementor-element .elementor-widget-container[style*="padding-right"],
.elementor-element .elementor-widget-container[style*="padding-bottom"], 
.elementor-element .elementor-widget-container[style*="padding-left"],
.elementor-element .elementor-widget-container[style*="padding:"] {
  padding: initial !important;
}

/*
 * Additional fix for NALC Forms Component and other widgets
 * Ensure Elementor's inline styles take precedence over our CSS
 */

/* Override any margin/padding !important declarations when Elementor sets inline styles */
.elementor-widget[style*="margin"] .elementor-widget-container,
.elementor-widget[style*="padding"] .elementor-widget-container {
  margin: initial !important;
  padding: initial !important;
}

/* Specific fix for NALC Forms Component */
.elementor-widget[style*="margin"] .nalc-forms-component,
.elementor-widget[style*="padding"] .nalc-forms-component {
  margin: initial !important;
  padding: initial !important;
  overflow: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Allow Elementor's responsive controls to work */
.elementor-widget[style*="--margin"] .nalc-forms-component {
  margin: var(--margin-mobile, var(--margin-tablet, var(--margin-desktop, var(--margin)))) !important;
  overflow: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.elementor-widget[style*="--padding"] .nalc-forms-component {
  padding: var(--padding-mobile, var(--padding-tablet, var(--padding-desktop, var(--padding)))) !important;
  overflow: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Additional overflow fixes for NALC form elements */
.elementor-widget .nalc-forms-component * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.elementor-widget .nalc-form-card {
  overflow: hidden !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
}

.elementor-widget .nalc-form-card__title,
.elementor-widget .nalc-form-card__excerpt {
  overflow: hidden !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  hyphens: auto !important;
}

.elementor-widget .nalc-form-card__title {
  display: block !important;
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: normal !important;
}

.elementor-widget .nalc-form-card__excerpt {
  display: block !important;
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: normal !important;
}

/* Ensure popular and main sections fit properly */
.elementor-widget .nalc-forms-popular,
.elementor-widget .nalc-forms-main {
  margin: 0 !important;
  flex-shrink: 1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Ensure all child elements fit within containers */
.elementor-widget .nalc-forms-component * {
  box-sizing: border-box !important;
  max-width: 100% !important;
  /* overflow-x: hidden !important; */
}

/* Remove scrollbar appearance from all buttons and links */
.elementor-widget .nalc-form-card__download-btn,
.elementor-widget .nalc-form-card__link,
.elementor-widget .nalc-form-card__links .mystic-design-button {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  box-shadow: none !important;
  /* outline: none !important; */
}

/* Most Popular form buttons should use white button variant in Elementor */
.elementor-widget .nalc-form-card--popular .nalc-form-card__download-btn,
.elementor-widget .nalc-form-card--popular .mystic-design-button--primary {
  background: white !important;
  color: #13496a !important;
  border: 1px solid #13496a !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  width: 100% !important;
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: normal !important;
  min-width: 0 !important;
  padding: 12px 16px !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  hyphens: auto !important;
  /* Remove any scrollbar appearance */
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  /* Ensure clean button appearance */
  box-shadow: none !important;
  outline: none !important;
}

.elementor-widget .nalc-form-card--popular .nalc-form-card__download-btn:hover,
.elementor-widget .nalc-form-card--popular .mystic-design-button--primary:hover {
  background: #e2f2fc !important;
  color: #13496a !important;
  border-color: #13496a !important;
}

.elementor-widget .nalc-form-card--popular .nalc-form-card__download-btn:focus,
.elementor-widget .nalc-form-card--popular .mystic-design-button--primary:focus {
  background: #e2f2fc !important;
  color: #13496a !important;
  border-color: #13496a !important;
  box-shadow: 0 0 0 4px #13496a !important;
  /* outline: none !important; */
}

/* Mobile-specific fixes for Elementor */
@media (max-width: 768px) {
  .elementor-widget .nalc-forms-mobile {
    padding: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  
  .elementor-widget .nalc-form-card {
    padding: 16px !important;
    margin-bottom: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  
  .elementor-widget .nalc-form-card__title,
  .elementor-widget .nalc-form-card__excerpt {
    white-space: normal !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: auto !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }
  
  .elementor-widget .nalc-form-card__links .mystic-design-button,
  .elementor-widget .nalc-form-card__link {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: auto !important;
    /* Remove any scrollbar appearance */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    /* Ensure clean button appearance */
    box-shadow: none !important;
    outline: none !important;
  }

  /* Mobile download button fixes for Elementor */
  .elementor-widget .nalc-form-card__download-btn--mobile {
    padding: 12px 16px !important;
    font-size: 14px !important;
    background: var(--mystic-primary-color, #0e6496) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    width: 100% !important;
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
    min-width: 0 !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: auto !important;
    /* Remove any scrollbar appearance */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    /* Ensure clean button appearance */
    box-shadow: none !important;
    /* outline: none !important; */
  }

  /* Most Popular mobile buttons should use white variant in Elementor */
  .elementor-widget .nalc-form-card--popular-mobile .nalc-form-card__download-btn--mobile {
    background: white !important;
    color: #13496a !important;
    border: 1px solid #13496a !important;
  }

  .elementor-widget .nalc-form-card--popular-mobile .nalc-form-card__download-btn--mobile:hover {
    background: #e2f2fc !important;
    color: #13496a !important;
    border-color: #13496a !important;
  }

  /* Bulk actions button fixes for Elementor */
  .elementor-widget .nalc-forms-bulk-actions .mystic-design-button {
    padding: 12px 20px !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    /* Remove any scrollbar appearance */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    /* Ensure clean button appearance */
    box-shadow: none !important;
    outline: none !important;
    /* Proper text handling */
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
    min-width: 0 !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: auto !important;
  }
}

@media (max-width: 480px) {
  .elementor-widget .nalc-forms-mobile {
    padding: 12px !important;
  }
  
  .elementor-widget .nalc-form-card--popular-mobile {
    max-width: 200px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
}

.elementor-widget .nalc-form-card--popular .nalc-form-card__title {
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: normal !important;
}

.elementor-widget .nalc-form-card--popular .nalc-form-card__excerpt {
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: normal !important;
}

/* Ensure immediate responsive behavior in Elementor */
.elementor-widget .nalc-forms-component {
  opacity: 1 !important;
  visibility: visible !important;
  min-height: 200px !important;
  display: block !important;
  /* Ensure proper container fit */
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Ensure proper initial display in Elementor */
.elementor-widget .nalc-forms-component:not([data-initialized]) {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  min-height: 200px !important;
  /* Ensure proper container fit */
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.elementor-widget .nalc-forms-component:not([data-initialized]) .nalc-forms-desktop,
.elementor-widget .nalc-forms-component:not([data-initialized]) .nalc-forms-mobile {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  /* Ensure proper container fit */
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  flex-shrink: 1 !important;
  min-width: 0 !important;
}

.elementor-widget .nalc-forms-component:not([data-initialized]) .nalc-form-card {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.elementor-widget .nalc-forms-component:not([data-initialized]) .nalc-form-card__title,
.elementor-widget .nalc-forms-component:not([data-initialized]) .nalc-form-card__excerpt,
.elementor-widget .nalc-forms-component:not([data-initialized]) .nalc-form-card__download-btn {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Critical responsive behavior for Elementor */
@media (max-width: 1024px) {
  .elementor-widget .nalc-forms-component .nalc-forms-desktop {
    display: none !important;
  }
  
  .elementor-widget .nalc-forms-component .nalc-forms-mobile {
    display: flex !important;
    flex-direction: column;
  }
}

@media (min-width: 1025px) {
  .elementor-widget .nalc-forms-component .nalc-forms-desktop {
    display: flex !important;
  }
  
  .elementor-widget .nalc-forms-component .nalc-forms-mobile {
    display: none !important;
  }
}