/* ===== MODERN ALERT/CALLOUT STYLING ===== */

/* Base Alert Styles */
.alert, .callout {
  padding: 0.5em 0.75em;
  margin: 0.5em 0;
  border-radius: 6px;
  border-left: 3px solid;
  background-color: #f8f9fa;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: box-shadow 240ms ease, transform 240ms ease;
  font-size: 0.85em;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  position: relative;
}

.alert:hover, .callout:hover {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  transform: translateY(-0.5px);
}

/* Alert Icon */
.alert::before, .callout::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 0.5px;
}

/* Info Alert */
.alert-info, .callout-info {
  border-left-color: #353ea1;
  background-color: rgba(53, 62, 161, 0.05);
}

.alert-info::before, .callout-info::before {
  content: 'ℹ️';
  font-size: 14px;
}

.alert-info strong, .callout-info strong {
  color: #353ea1;
  font-weight: 600;
}

.alert-info a, .callout-info a {
  color: #353ea1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.alert-info a:hover, .callout-info a:hover {
  color: #2a2e7f;
}

/* Warning Alert */
.alert-warning, .callout-warning {
  border-left-color: #f39c12;
  background-color: rgba(243, 156, 18, 0.05);
}

.alert-warning::before, .callout-warning::before {
  content: '⚠️';
  font-size: 14px;
}

.alert-warning strong, .callout-warning strong {
  color: #d68910;
  font-weight: 600;
}

.alert-warning a, .callout-warning a {
  color: #d68910;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.alert-warning a:hover, .callout-warning a:hover {
  color: #b86f0d;
}

/* Error/Danger Alert */
.alert-danger, .alert-error, .callout-danger, .callout-error {
  border-left-color: #d60e53;
  background-color: rgba(214, 14, 83, 0.05);
}

.alert-danger::before, .alert-error::before, .callout-danger::before, .callout-error::before {
  content: '❌';
  font-size: 14px;
}

.alert-danger strong, .alert-error strong, .callout-danger strong, .callout-error strong {
  color: #d60e53;
  font-weight: 600;
}

.alert-danger a, .alert-danger a, .callout-danger a, .callout-error a {
  color: #d60e53;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.alert-danger a:hover, .alert-error a:hover, .callout-danger a:hover, .callout-error a:hover {
  color: #a50a3f;
}

/* Success Alert */
.alert-success, .callout-success {
  border-left-color: #7eca52;
  background-color: rgba(126, 202, 82, 0.05);
}

.alert-success::before, .callout-success::before {
  content: '✓';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #7eca52;
  font-weight: bold;
}

.alert-success strong, .callout-success strong {
  color: #5ab140;
  font-weight: 600;
}

.alert-success a, .callout-success a {
  color: #5ab140;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.alert-success a:hover, .callout-success a:hover {
  color: #428a31;
}

/* Alert Content Wrapper */
.alert-content, .callout-content {
  flex: 1;
}

/* Hide h5 in alerts */
.alert h5, .callout h5 {
  display: none;
}

/* Alert Badge/Label */
.alert::after, .callout::after {
  content: attr(data-label);
  position: absolute;
  bottom: 0;
  right: 0;
  background: linear-gradient(135deg, #353ea1 0%, #2a2e7f 100%);
  color: white;
  padding: 0.4em 0.6em;
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 6px 0 0 0;
  z-index: 2;
}

/* Alert Info Badge */
.alert-info::after, .callout-info::after {
  content: 'INFO';
  background: linear-gradient(135deg, #353ea1 0%, #2a2e7f 100%);
}

/* Alert Warning Badge */
.alert-warning::after, .callout-warning::after {
  content: 'WARNING';
  background: linear-gradient(135deg, #f39c12 0%, #d68910 100%);
}

/* Alert Error/Danger Badge */
.alert-danger::after, .alert-error::after, .callout-danger::after, .callout-error::after {
  content: 'ERROR';
  background: linear-gradient(135deg, #d60e53 0%, #a50a3f 100%);
}

/* Alert Success Badge */
.alert-success::after, .callout-success::after {
  content: 'SUCCESS';
  background: linear-gradient(135deg, #7eca52 0%, #5ab140 100%);
}

/* Alert Paragraph */
.alert p, .callout p {
  margin: 0.2em 0;
  color: #555;
}

.alert p:first-child, .callout p:first-child {
  margin-top: 0;
}

.alert p:last-child, .callout p:last-child {
  margin-bottom: 0;
}

/* Alert List */
.alert ul, .alert ol, .callout ul, .callout ol {
  margin: 0.2em 0;
  padding-left: 1.1em;
}

.alert li, .callout li {
  margin: 0.1em 0;
}

/* Alert Code */
.alert code, .callout code {
  background-color: rgba(0, 0, 0, 0.05);
  padding: 0.25em 0.5em;
  border-radius: 4px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Courier New', monospace;
  font-size: 0.9em;
}

/* Alert Close Button */
.alert-close, .callout-close {
  cursor: pointer;
  background: none;
  border: none;
  font-size: 1.5em;
  color: #999;
  padding: 0;
  margin-left: auto;
  transition: color 240ms ease;
  flex-shrink: 0;
}

.alert-close:hover, .callout-close:hover {
  color: #333;
}

/* Dark Theme Support */
body.dark-theme .alert, body.dark-theme .callout {
  background-color: rgba(0, 0, 0, 0.3);
  color: #e0e0e0;
}

body.dark-theme .alert-info, body.dark-theme .callout-info {
  background-color: rgba(53, 62, 161, 0.15);
}

body.dark-theme .alert-info strong, body.dark-theme .callout-info strong {
  color: #7a8cff;
}

body.dark-theme .alert-warning, body.dark-theme .callout-warning {
  background-color: rgba(243, 156, 18, 0.15);
}

body.dark-theme .alert-warning strong, body.dark-theme .callout-warning strong {
  color: #ffb84d;
}

body.dark-theme .alert-danger, body.dark-theme .alert-error, 
body.dark-theme .callout-danger, body.dark-theme .callout-error {
  background-color: rgba(214, 14, 83, 0.15);
}

body.dark-theme .alert-danger strong, body.dark-theme .alert-error strong,
body.dark-theme .callout-danger strong, body.dark-theme .callout-error strong {
  color: #ff6b9d;
}

body.dark-theme .alert-success, body.dark-theme .callout-success {
  background-color: rgba(126, 202, 82, 0.15);
}

body.dark-theme .alert-success strong, body.dark-theme .callout-success strong {
  color: #b3e59f;
}

body.dark-theme .alert p, body.dark-theme .callout p {
  color: #c0c0c0;
}

body.dark-theme .alert code, body.dark-theme .callout code {
  background-color: rgba(255, 255, 255, 0.1);
  color: #e0e0e0;
}

body.dark-theme .alert-close, body.dark-theme .callout-close {
  color: #666;
}

body.dark-theme .alert-close:hover, body.dark-theme .callout-close:hover {
  color: #ccc;
}

/* Responsive Design */
@media (max-width: 600px) {
  .alert, .callout {
    padding: 0.4em 0.6em;
    font-size: 0.8em;
    gap: 0.5em;
  }

  .alert::before, .callout::before {
    width: 14px;
    height: 14px;
  }

  .alert-title, .callout-title {
    font-size: 0.9em;
  }
}

/* Compact Alert Variant */
.alert-compact, .callout-compact {
  padding: 0.4em 0.6em;
  margin: 0.4em 0;
  font-size: 0.8em;
}

/* Alert with Icon Replacement */
.alert.no-icon::before, .callout.no-icon::before {
  content: none;
}

.alert.no-icon, .callout.no-icon {
  gap: 0;
}

/* Inline Alert */
.alert-inline, .callout-inline {
  display: inline-block;
  padding: 0.5em 0.75em;
  margin: 0 0.25em;
  border-left: none;
  border-radius: 4px;
  font-size: 0.85em;
  box-shadow: none;
}

.alert-inline::before, .callout-inline::before {
  margin-right: 0.5em;
}

/* Bordered Alert Variant */
.alert-bordered, .callout-bordered {
  border: 1px solid;
  border-left-width: 4px;
}

.alert-bordered.alert-info, .callout-bordered.callout-info {
  border-color: rgba(53, 62, 161, 0.3);
}

.alert-bordered.alert-warning, .callout-bordered.callout-warning {
  border-color: rgba(243, 156, 18, 0.3);
}

.alert-bordered.alert-danger, .alert-bordered.alert-error,
.callout-bordered.callout-danger, .callout-bordered.callout-error {
  border-color: rgba(214, 14, 83, 0.3);
}

.alert-bordered.alert-success, .callout-bordered.callout-success {
  border-color: rgba(126, 202, 82, 0.3);
}