/**
 * Newsletter AJAX Messages - COMPLETE PRODUCTION INLINE & MULTISITE MODAL STYLE
 */

/* Container wrapper styling - sits naturally below the input block */
#newsletter-ajax-messages {
  width: 100%;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
  display: block !important;
  clear: both;
}

/* Clear core overrides to preserve natural inline text distribution */
#newsletter-ajax-messages .messages-list,
#newsletter-ajax-messages .messages__wrapper {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Custom Inline Messages Container */
.newsletter-inline-messages {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Base style for individual text rows */
.newsletter-inline-messages p {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  background: none !important;
  box-shadow: none !important;
}

/* Error Text Colors using a fallback Red */
.inline-msg--error {
  color: #e31b23 !important;
}

/**
 * Multi-Site Adaptive Success Popup Box
 */

/* Modal full-screen overlay backdrop layer */
#newsletter-modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(0, 0, 0, 0.4) !important; /* Soft dimming shadow */
  z-index: 999999 !important; /* Renders cleanly over headers & admin trays */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Base styles for the default popup (Applies globally across all multi-site instances) */
#newsletter-modal-card {
  background-color: #ffffff !important;
  border-top: 5px solid #e31b23 !important; /* Default blue border */
  border-radius: 8px !important;
  
  /* --- RESTORED MISSING STRUCTURAL PROPERTIES --- */
  padding: 35px 50px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15) !important;
  position: relative !important;
  width: 90% !important;
  max-width: 480px !important;
  box-sizing: border-box !important;
  animation: newsletterModalPop 0.25s ease-out forwards;
}

/* =========================================================================
   SITE-SPECIFIC THEME OVERRIDES (Customize styles per multi-site instance)
   ========================================================================= */

/* 1. Theme override for the "ohio" host/machine name (Outputs as "site-ohio") */
#newsletter-modal-overlay.site-ohio #newsletter-modal-card {
  border-top: 5px solid #e31b23 !important; /* Pure Red for Ohio Diesel */
}

#newsletter-modal-overlay.site-ohio .newsletter-modal-content p {
  color: #1a1a1a !important; /* Dark text for readability */
}

/* 2. Theme override for an alternative host name (e.g., "site-texas-trucks") */
#newsletter-modal-overlay.site-texas-trucks #newsletter-modal-card {
  border-top: 5px solid #ffc107 !important; /* Yellow border for Texas site */
  background-color: #f8f9fa !important;
}

/* Success Message Text Box Formatter */
.newsletter-modal-content p {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Minimalist floating close (✕) action point button */
#newsletter-modal-close {
  position: absolute !important;
  top: 12px !important;
  right: 16px !important;
  background: none !important;
  border: none !important;
  font-size: 16px !important;
  color: #aaaaaa !important;
  cursor: pointer !important;
  padding: 5px !important;
  line-height: 1 !important;
  transition: color 0.2s ease !important;
}

#newsletter-modal-close:hover {
  color: #333333 !important;
}

/* Entry animation for the modal */
@keyframes newsletterModalPop {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/**
 * Isolated Throbber Handling - Zero-Width Structural Footprint Fix
 */
#newsletter-form-wrapper .newsletter-submit-container {
  display: inline-block !important;
  position: relative !important;
  padding-right: 30px !important; /* Pre-allocated empty space for the spinner */
  margin-right: -30px !important; /* Counterbalance to maintain original theme flow */
  vertical-align: middle !important;
}

#newsletter-form-wrapper .newsletter-submit-container .Subscribe-btn {
  display: inline-block !important;
  vertical-align: middle !important;
}

/* Lock the throbber using absolute positioning to prevent layout shifts */
#newsletter-form-wrapper .newsletter-submit-container .ajax-progress-throbber {
  display: inline-block !important;
  position: absolute !important;
  left: calc(100% - 20px) !important; 
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 16px !important;
  height: 16px !important;
  float: none !important;
}

/* Graphical loading spinner icon image adjustments */
#newsletter-form-wrapper .newsletter-submit-container .ajax-progress-throbber .throbber {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  background-position: center !important;
}

/* Completely suppress the hidden system core processing text string layout metrics */
#newsletter-form-wrapper .newsletter-submit-container .ajax-progress .message {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/**
 * Input Box Border Highlight on Error
 */
#newsletter-form-wrapper:has(.inline-msg--error) .newsletter-input input[type="email"] {
  border: 1px solid #e31b23 !important;
}

/* Ensure the italicized emphasis text inside our custom messages displays perfectly */
.newsletter-inline-messages p em {
  font-style: italic !important;
  font-weight: 600 !important;
  background: none !important;
  padding: 0 !important;
}


/* =========================================================================
   1. SIDEBAR BUTTONS & THROBBER (Ultra-Specific Targeting)
   ========================================================================= */
.block-newsletter-action-block .newsletter-admin-actions-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 20px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  margin-bottom: 30px !important;
}

.block-newsletter-action-block .action-btn-relative-wrapper {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.block-newsletter-action-block .newsletter-action-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 12px 15px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  transition: all 0.2s ease-in-out !important;
  text-align: center !important;
  line-height: 1.4 !important;
  border: none !important;
}

/* Secondary Button Defaults */
.block-newsletter-action-block .newsletter-action-btn--secondary {
  background: #f8fafc !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
}
.block-newsletter-action-block .newsletter-action-btn--secondary:hover {
  background: #f1f5f9 !important;
  color: #1e293b !important;
}

/* =========================================================================
   THE BULLETPROOF THROBBER FIX
   ========================================================================= */
.block-newsletter-action-block .action-btn-relative-wrapper .use-ajax {
  padding-right: 40px !important; /* Forces text to the left to make room */
}

/* Force the Throbber INSIDE the wrapper, absolutely positioned */
.block-newsletter-action-block .action-btn-relative-wrapper .ajax-progress {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 16px !important;
  width: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
}

/* Ensure the spinning icon scales correctly and text is hidden */
.block-newsletter-action-block .action-btn-relative-wrapper .ajax-progress .throbber {
  background-size: contain !important;
  height: 100% !important;
  width: 100% !important;
  margin: 0 !important;
}
.block-newsletter-action-block .action-btn-relative-wrapper .ajax-progress .message {
  display: none !important;
}


/* =========================================================================
   2. DRUPAL JQUERY MODAL UI OVERHAUL (Center, Unfreeze, Flexbox Fix)
   ========================================================================= */

/* THE CENTERING & HEIGHT FIX */
.ui-dialog.ui-widget.ui-widget-content {
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4) !important;
  padding: 0 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  
  /* Perfect Center */
  position: fixed !important;
  top: 50vh !important;
  left: 50vw !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  z-index: 9999 !important;
  
  /* PREVENT CUTOFF: Keep modal within screen bounds */
  max-height: 85vh !important;
  width: 800px !important; /* Set a clean width */
  max-width: 95vw !important; /* Mobile responsive */
  
  /* Flexbox keeps the titlebar at top and makes content scrollable */
  display: flex !important;
  flex-direction: column !important;
}

/* THE MODAL SCROLL FIX (Essential for Review Button visibility) */
.ui-dialog .ui-dialog-content {
  overflow-y: auto !important;
  flex: 1 1 auto !important; /* Allows area to expand/shrink dynamically */
  padding: 24px !important;
  background: #ffffff !important;
  max-height: none !important; /* Removes any previous height limits */
}

/* Make sure the dark overlay behind the modal sits correctly */
.ui-widget-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(15, 23, 42, 0.7) !important;
  z-index: 9998 !important;
}

/* THE UNFREEZE FIX */
html.js-modal-page,
body.js-modal-page,
body {
  overflow-y: auto !important; 
  position: static !important; 
}

.ui-dialog .ui-dialog-titlebar {
  background: #ffffff !important;
  padding: 20px 24px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  flex-shrink: 0 !important; /* Prevents titlebar from getting squished */
}
.ui-dialog .ui-dialog-title {
  color: #1e293b !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

/* Custom Scrollbar */
.ui-dialog-content::-webkit-scrollbar { width: 6px; }
.ui-dialog-content::-webkit-scrollbar-track { background: #f1f5f9; }
.ui-dialog-content::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }

/* FIX: Close Button ('✕') */
.ui-dialog .ui-dialog-titlebar-close {
  background: #f1f5f9 !important;
  border: none !important;
  border-radius: 50% !important;
  font-size: 0 !important;
  width: 32px !important;
  height: 32px !important;
  position: absolute !important;
  top: 15px !important; /* Absolute top instead of 50% to prevent jumping */
  right: 20px !important;
  transform: none !important;
  cursor: pointer !important;
}
.ui-dialog .ui-dialog-titlebar-close:hover {
  background: #e2e8f0 !important;
}
.ui-dialog .ui-dialog-titlebar-close::after {
  content: '✕' !important;
  font-size: 14px !important;
  color: #64748b !important;
  font-weight: 800 !important;
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}


/* =========================================================================
   3. DATATABLES & INNER MODAL UI
   ========================================================================= */

/* Kill the stuck DataTables "Processing" indicator */
div.dataTables_wrapper div.dataTables_processing {
  display: none !important;
}

/* Select/Deselect All Buttons */
.newsletter-controls .button {
  background: #f8fafc !important;
  border: 1px solid #333333 !important;
  color: #334155 !important;
  padding: 8px 16px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* DataTables Modern Search & Dropdown */
#newsletter-subscribers-table_filter input {
  border: 1px solid #333333 !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  width: 200px !important;
  outline: none !important;
}

#newsletter-subscribers-table_length select {
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  outline: none !important;
}

/* Table Design */
table.dataTable.display { border: none !important; width: 100% !important; border-collapse: collapse !important; }
table.dataTable.display thead th { background: #f8fafc !important; padding: 12px 15px !important; border-bottom: 2px solid #e2e8f0 !important; text-align: left !important; color: #475569 !important;}
table.dataTable.display tbody td { padding: 12px 15px !important; border-bottom: 1px solid #f1f5f9 !important; color: #334155 !important;}
table.dataTable.display tbody tr:hover { background: #f8fafc !important; }

/* Review & Confirm Base Buttons */
#btn-review-selection, #btn-start-sending {
  border: none !important;
  padding: 12px 25px !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  margin-top: 20px !important;
  transition: all 0.2s !important;
}


/* =========================================================================
   4. MULTISITE BRANDING OVERRIDES (Server-Side Injected Classes)
   ========================================================================= */

/* Use the class injected directly onto the block wrapper in PHP for the buttons */
.site-ohio .newsletter-action-btn--primary {
  background: #e31b23 !important; /* Ohio Blue */
  color: #ffffff !important;
  
}
.site-ohio .newsletter-action-btn--primary:hover {
  background: var(--primary-color-hover) !important;
}

.site-ohio .newsletter-action-btn--secondary {
  background-color: var(--white-color) !important;
    color: #e31b23 !important;
    border: 2px solid #e31b23 !important;
}

/* Use the class injected via JS onto the body for Modal elements */
body.site-ohio #newsletter-subscribers-table_filter input:focus,
body.site-ohio #newsletter-subscribers-table_length select:focus {
  border-color: #e31b23 !important;
  box-shadow: 0 0 0 3px rgba(43, 119, 175, 0.1) !important;
}

body.site-ohio .subscriber-checkbox {
  accent-color: #e31b23 !important;
}

body.site-ohio #btn-review-selection, 
body.site-ohio #btn-start-sending {
  background: #e31b23 !important; /* Ohio Red */
  color: #ffffff !important;
  box-shadow: 0 4px 6px rgba(227, 27, 35, 0.2) !important;
}
body.site-ohio #btn-review-selection:hover, 
body.site-ohio #btn-start-sending:hover {
  background: #e31b23 !important;
}