/**
 * Exit Feedback Popup Styles
 * Overrides conflicting styles from login_model.css on checkout pages
 */

/* Modal dialog container */
.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.custom-course-exit-feedback-modal {
  z-index: 9999 !important;
}

.custom-course-exit-feedback-modal .ui-dialog-content {
  padding: 20px !important;
  overflow: visible !important;
}

/* Hide status messages (cart toasters) when exit feedback popup is open */
/* Target the toast elements directly */
.custom-course-exit-feedback-modal ~ .toast,
.custom-course-exit-feedback-modal ~ [id^="status-message"],
.custom-course-exit-feedback-modal ~ [data-drupal-selector="messages"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Also hide when dialog exists in DOM */
body:has(.custom-course-exit-feedback-modal) .toast.fade,
body:has(.custom-course-exit-feedback-modal) [id^="status-message"],
body:has(.custom-course-exit-feedback-modal) div[role="status"].toast {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Form wrapper */
#custom-course-exit-feedback-form-wrapper {
  width: 100% !important;
  max-width: none !important;
}

/* Form fields - override login_model.css hiding labels */
#custom-course-exit-feedback-form-wrapper .form-item {
  margin-bottom: 15px !important;
  display: block !important;
  width: 100% !important;
  clear: both !important;
  position: relative !important;
}

#custom-course-exit-feedback-form-wrapper .form-item label {
  display: block !important;
  visibility: visible !important;
  position: static !important;
  margin-bottom: 5px !important;
  font-weight: 600 !important;
  color: #333 !important;
  font-size: 14px !important;
  opacity: 1 !important;
  height: auto !important;
  width: auto !important;
  clip: auto !important;
  overflow: visible !important;
}

#custom-course-exit-feedback-form-wrapper .form-required {
  color: #c91d42 !important;
  margin-left: 2px !important;
}

/* Input fields */
#custom-course-exit-feedback-form-wrapper .form-text,
#custom-course-exit-feedback-form-wrapper .form-email,
#custom-course-exit-feedback-form-wrapper .form-textarea,
#custom-course-exit-feedback-form-wrapper input[type="text"],
#custom-course-exit-feedback-form-wrapper input[type="email"],
#custom-course-exit-feedback-form-wrapper textarea {
  width: 100% !important;
  max-width: 100% !important;
  padding: 8px 12px !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #333 !important;
  background-color: #fff !important;
  -webkit-text-fill-color: #868383 !important;
}

#custom-course-exit-feedback-form-wrapper .form-textarea {
  min-height: 100px !important;
  resize: vertical !important;
}

/* Disabled fields for logged-in users */
#custom-course-exit-feedback-form-wrapper .form-text:disabled,
#custom-course-exit-feedback-form-wrapper .form-email:disabled {
  background-color: #f5f5f5 !important;
  cursor: not-allowed !important;
  opacity: 0.7 !important;
}

/* Error styling - only highlight fields, no error messages */
#custom-course-exit-feedback-form-wrapper .form-item--error input,
#custom-course-exit-feedback-form-wrapper .form-item--error textarea,
#custom-course-exit-feedback-form-wrapper input.error,
#custom-course-exit-feedback-form-wrapper textarea.error,
#custom-course-exit-feedback-form-wrapper .error input,
#custom-course-exit-feedback-form-wrapper .error textarea {
  border-color: #c91d42 !important;
  border-width: 2px !important;
}

#custom-course-exit-feedback-form-wrapper .form-item--error label {
  color: #c91d42 !important;
}

/* Hide all error messages - be very aggressive */
#custom-course-exit-feedback-form-wrapper .form-item--error-message,
#custom-course-exit-feedback-form-wrapper .messages--error,
#custom-course-exit-feedback-form-wrapper .messages.error,
.messages--error,
.messages.error {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Form actions */
#custom-course-exit-feedback-form-wrapper .form-actions {
  margin-top: 20px !important;
  clear: both !important;
}

#custom-course-exit-feedback-form-wrapper .form-submit {
  background-color: #c91d42 !important;
  color: white !important;
  border: none !important;
  padding: 12px 30px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  min-width: 150px !important;
  transition: background-color 0.3s ease !important;
  width: 70% !important;
}

#custom-course-exit-feedback-form-wrapper .form-submit:hover {
  background-color: #a01735 !important;
}

#custom-course-exit-feedback-form-wrapper .form-submit:active {
  background-color: #8a1430 !important;
}

/* Success message styling */
#custom-course-exit-feedback-form-wrapper .messages.messages--status {
  background-color: #d4edda !important;
  border: 1px solid #c3e6cb !important;
  color: #155724 !important;
  padding: 15px !important;
  border-radius: 4px !important;
  margin: 0 !important;
}

/* Hidden fields */
#custom-course-exit-feedback-form-wrapper input[type="hidden"] + label {
  display: none !important;
}

 .path-checkout #custom-course-exit-feedback-form-wrapper .form-actions {
  align-items: center !important;
  justify-content: center !important;
} 



.path-checkout.user-logged-in .ui-dialog.ui-widget-content.custom-course-exit-feedback-modal .ui-dialog-titlebar .ui-dialog-titlebar-close 
{
    top: 20% !important;
    width: 24px !important;
}

@media screen and (min-width: 1400px) {
    .path-checkout .ui-dialog.ui-widget-content.custom-course-exit-feedback-modal {
        top: 20% !important;
    }
}

.path-checkout.user-logged-in .ui-dialog.ui-widget-content.custom-course-exit-feedback-modal  #custom-course-exit-feedback-form-wrapper .form-actions {
    justify-content: left !important;
}