/* ==========================================================================
   SOLO THEME: SCOPED DIALOG MODAL (OCEAN & DEEP SEA / DEEP OCEAN SHADOWS)
   Target Wrapper Class: solo-dialog-override
   ========================================================================== */

/* 1. Master Modal Box Shell Layout */
html body div.ui-dialog, html body dialog[open] {
  z-index: 9999 !important;
  background-color: var(--r-bg) !important; /* Pulls the Deep Ocean deep blue/slate backdrop */
  border: 1px solid var(--r-br) !important;  /* Soft marine frame outline */
  border-radius: 12px !important;
  box-shadow: 0 16px 40px rgba(1, 8, 20, 0.75) !important; /* Dark underwater ambient shadow */
  padding: 0 !important;
  overflow: hidden !important;
}

/* 2. Inner Modal Area Setup */
html body div.ui-dialog div.ui-dialog-content, html body dialog[open] div.ui-dialog-content {
  padding: 26px !important;
  background-color: rgba(255, 255, 255, 0.95) !important;
}

/* 3. Modal Header Banner */
html body div.ui-dialog div.ui-dialog-titlebar, html body dialog[open] div.ui-dialog-titlebar {
  background-color: rgba(255, 255, 255, 0.8) !important; 
  border-bottom: 2px solid var(--r-lk) !important;       
  padding: 14px 20px !important;
  border-radius: 12px 12px 0 0 !important;
}

/* Target the title element of standard Drupal dialogs and modals */
html body div.ui-dialog .ui-dialog-title {
  font-size: 1.0rem !important;
  font-family: inherit !important; /* Forces it to inherit your Solo theme font family */
  font-weight: 600 !important;     /* Optional: Cleans up title bold thickness */
}

/* 4. Top Header Dismiss Action Icon ('X') */
html body div.ui-dialog button.ui-dialog-titlebar-close {
  background: transparent !important;
  border: none !important;
  color: var(--r-lk) !important; 
}
html body div.ui-dialog button.ui-dialog-titlebar-close:hover {
  color: var(--r-lk-h) !important; 
}

/* 5. POSITION FIELD STYLE */
html body div.ui-dialog .solo-field-position {
  font-size: 1.0rem !important;
  color: var(--r-tx) !important; 
  background-color: rgba(127, 205, 255, 0.20) !important; 
  padding: 18px !important;
  border-radius: 8px !important;
  border: 1px solid var(--r-br) !important;
  border-left: 4px solid var(--r-lk) !important; 
  margin-bottom: 4px !important;
  line-height: 1.2 !important;
}

/* 6. DATES FIELD STYLE */
html body div.ui-dialog .solo-field-dates {
  font-size: 1.0rem !important;
  color: var(--r-tx) !important; 
  background-color: rgba(74, 114, 153, 0.20) !important; 
  padding: 18px !important;
  border-radius: 8px !important;
  border: 1px solid var(--r-br) !important;
  border-left: 4px solid var(--r-lk) !important; 
  margin-bottom: 4px !important;
  line-height: 1.2 !important;
  opacity: 0.9 !important;
}

/* 7. DETAILS FIELD STYLE */
html body div.ui-dialog .solo-field-details {
  font-size: 1.0rem !important;
  color: var(--r-tx) !important; 
  background-color: rgba(74, 114, 153, 0.20) !important; 
  padding: 18px !important;
  border-radius: 8px !important;
  border: 1px solid var(--r-br) !important;
  border-left: 4px solid var(--r-lk) !important; 
  margin-bottom: 4px !important;
  line-height: 1.2 !important;
}

/* 8. Nested Rich Text Formatting Control inside Details */
html body div.ui-dialog .solo-field-details p { margin-bottom: 12px !important; }
html body div.ui-dialog .solo-field-details p:last-child { margin-bottom: 0 !important; }
html body div.ui-dialog .solo-field-details a { color: var(--r-lk) !important; text-decoration: underline !important; }
html body div.ui-dialog .solo-field-details a:hover { color: var(--r-lk-h) !important; }

/* 9. Target the webform container */
html body div.ui-dialog form.webform-submission-form { color: #333333 !important; }

/* 10. Style the input fields and textareas */
html body div.ui-dialog form.webform-submission-form input.form-text,
html body div.ui-dialog form.webform-submission-form input[type="email"],
html body div.ui-dialog form.webform-submission-form select.form-select,
html body div.ui-dialog form.webform-submission-form textarea.form-textarea {
  background-color: rgba(127, 205, 255, 0.20) !important; 
  font-size: 16px !important;
  font-family: inherit !important; 
  border: 1px solid #cccccc !important;
}