/*******************************************************************************
 * STYLE B : Colored Header Bar — Error Notification (v3)
 *
 * FIXES:
 *   1. Width increased to 600px min / 680px max
 *   2. Numbered circles: proper gap + no overlap with text
 *   3. Close button: larger hit area + bigger icon
 ******************************************************************************/
 
/* ═══════════════════════════════════════════════════════════
   PARENT WRAPPER — allow wider content
   ═══════════════════════════════════════════════════════════ */
.t-Body-alert {
  max-width: 700px !important;
  width: auto !important;
}
 
/* ═══════════════════════════════════════════════════════════
   NOTIFICATION CONTAINER
   ═══════════════════════════════════════════════════════════ */
.t-Body-alert .t-Alert--page.t-Alert--warning,
.t-Body-alert .t-Alert--page.t-Alert--danger {
  background-color: #FFFFFF !important;
  border: 1px solid #FECACA !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.10) !important;
  margin: 8px !important;
  padding: 0 !important;
  overflow: visible !important;
  min-width: 600px !important;
  max-width: 680px !important;
}
 
/* ═══════════════════════════════════════════════════════════
   HEADER BAR (red band)
   ═══════════════════════════════════════════════════════════ */
.t-Body-alert .t-Alert--page .t-Alert-header {
  background-color: #DC2626 !important;
  padding: 14px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  border-radius: 12px 12px 0 0 !important;
}
 
/* Icon: white on red */
.t-Body-alert .t-Alert--page .t-Alert-icon .t-Icon {
  color: #FFFFFF !important;
  background: transparent !important;
  font-size: 18px !important;
}
 
/* Title: white text */
.t-Body-alert .t-Alert--page .t-Alert-header .t-Alert-title {
  color: #FFFFFF !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  flex: 1 !important;
}
 
/* ═══════════════════════════════════════════════════════════
   CLOSE BUTTON — larger, easier to click
   ═══════════════════════════════════════════════════════════ */
.t-Body-alert .t-Alert--page .t-Alert-buttons {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  z-index: 10 !important;
}
 
.t-Body-alert .t-Alert--page .t-Alert-buttons .t-Button--closeAlert {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 22px !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 12px 0 0 !important;
}
 
.t-Body-alert .t-Alert--page .t-Alert-buttons .t-Button--closeAlert:hover {
  color: #FFFFFF !important;
  background: rgba(0, 0, 0, 0.15) !important;
}
 
/* Make the X icon itself larger */
.t-Body-alert .t-Alert--page .t-Alert-buttons .t-Button--closeAlert .t-Icon,
.t-Body-alert .t-Alert--page .t-Alert-buttons .t-Button--closeAlert span {
  font-size: 20px !important;
  line-height: 1 !important;
}
 
/* ═══════════════════════════════════════════════════════════
   ERROR MESSAGE LIST
   ═══════════════════════════════════════════════════════════ */
.t-Body-alert .t-Alert--page .t-Alert-body {
  padding: 6px 24px 18px !important;
  width: 100% !important;
}
 
.t-Body-alert .t-Alert--page .t-Alert-body ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  counter-reset: errcount !important;
}
 
.t-Body-alert .t-Alert--page .t-Alert-body ul li {
  color: #7F1D1D !important;
  font-size: 13px !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid #FEE2E2 !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  line-height: 1.5 !important;
  white-space: normal !important;
  word-break: break-word !important;
}
 
.t-Body-alert .t-Alert--page .t-Alert-body ul li:last-child {
  border-bottom: none !important;
}
 
/* ═══════════════════════════════════════════════════════════
   NUMBERED CIRCLES — fixed size, never collapse
   ═══════════════════════════════════════════════════════════ */
.t-Body-alert .t-Alert--page .t-Alert-body ul li::before {
  counter-increment: errcount !important;
  content: counter(errcount) !important;
  min-width: 24px !important;
  width: 24px !important;
  height: 24px !important;
  background: #FEE2E2 !important;
  color: #DC2626 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}
 
/* ═══════════════════════════════════════════════════════════
   INFO (i) ICON
   ═══════════════════════════════════════════════════════════ */
.t-Body-alert .t-Alert--page .t-Alert-body .a-Notification-item .a-Notification-link {
  color: #B91C1C !important;
  opacity: 0.4 !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}
 
.t-Body-alert .t-Alert--page .t-Alert-body .a-Notification-item .a-Notification-link:hover {
  opacity: 1 !important;
}
 
/* ═══════════════════════════════════════════════════════════
   ANIMATION
   ═══════════════════════════════════════════════════════════ */
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
 
.t-Body-alert .t-Alert--page {
  animation: fadeSlideIn 0.3s ease-out !important;
}

/*******************************************************************************
 * INLINE FIELD ERROR STYLING
 *
 * Enhances the red error text that appears below individual page items
 * when using APEX_ERROR.C_INLINE_WITH_FIELD_AND_NOTIF
 *
 * ADD THIS CSS alongside whichever notification style (A, B, or C) you chose.
 ******************************************************************************/

/* ═══════════════════════════════════════════════════════════
   FIELD ERROR MESSAGE (below the input)
   ═══════════════════════════════════════════════════════════ */
.t-Form-error {
  color: #DC2626 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  margin-top: 4px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* Add a small red dot before the error message */
.t-Form-error::before {
  content: "" !important;
  width: 6px !important;
  height: 6px !important;
  background: #DC2626 !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

/* ═══════════════════════════════════════════════════════════
   FIELD INPUT BORDER — highlight errored fields
   ═══════════════════════════════════════════════════════════ */
.apex-item-has-error .apex-item-text,
.apex-item-has-error .apex-item-select,
.apex-item-has-error .apex-item-textarea,
.apex-item-has-error .apex-item-group--rc,
.t-Form-fieldContainer--floatingLabel.apex-item-has-error .t-Form-itemWrapper {
  border-color: #DC2626 !important;
  box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.15) !important;
}

/* Redwood floating label turns red on error */
.apex-item-has-error .t-Form-label,
.t-Form-fieldContainer--floatingLabel.apex-item-has-error .t-Form-label {
  color: #DC2626 !important;
}

/* ═══════════════════════════════════════════════════════════
   SMOOTH ANIMATION — errors fade in instead of just appearing
   ═══════════════════════════════════════════════════════════ */
@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.t-Form-error,
.t-Body-alert .t-Alert--page {
  animation: fadeSlideIn 0.3s ease-out !important;
}