/* ═══════════════════════════════════════════════
   Ákotí Alert / Banner — CSS-First

   <div class="akoti-alert info">
     <span class="akoti-alert-icon">ℹ</span>
     <div class="akoti-alert-content">
       <strong>Info:</strong> Your session expires in 5 minutes.
     </div>
     <button class="akoti-alert-close">✕</button>
   </div>

   Types:  .info, .success, .warning, .danger
   Styles: .akoti-alert-banner (full-width, no radius)
   Dismissible: add .akoti-alert-close button
   ═══════════════════════════════════════════════ */

.akoti-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px 4px 12px 4px;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  border: 1px solid;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.04);
  margin-bottom: 8px;
}

/* Types */
.akoti-alert.info {
  background: #e8f0f8;
  border-color: #a8c8e8;
  color: #1a2f5e;
}
.akoti-alert.success {
  background: #e8f5e9;
  border-color: #a5d6a7;
  color: #1b5e20;
}
.akoti-alert.warning {
  background: #fff3e0;
  border-color: #ffcc80;
  color: #e65100;
}
.akoti-alert.danger {
  background: #fce4ec;
  border-color: #ef9a9a;
  color: #b71c1c;
}

.akoti-alert-icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

.akoti-alert-content {
  flex: 1;
}
.akoti-alert-content strong {
  font-weight: 700;
}

.akoti-alert-close {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.5;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  transition: all 0.2s;
}
.akoti-alert-close:hover { opacity: 1; background: rgba(0,0,0,0.06); }

/* Self-dismissing with JS: add .hiding class */
.akoti-alert.hiding {
  opacity: 0;
  transform: translateY(-8px);
  transition: all 0.3s;
}

/* Banner variant (full-width, no radius) */
.akoti-alert.akoti-alert-banner {
  border-radius: 0;
  border-left: none;
  border-right: none;
  margin: 0;
}

/* Compact */
.akoti-alert.akoti-alert-compact {
  padding: 8px 12px;
  font-size: 12px;
  border-radius: 8px 3px 8px 3px;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .akoti-alert.info    { background: rgba(168,200,232,0.1); border-color: rgba(168,200,232,0.2); color: #a8c8e8; }
  :root:not([data-theme="light"]) .akoti-alert.success { background: rgba(76,175,80,0.1); border-color: rgba(76,175,80,0.2); color: #81c784; }
  :root:not([data-theme="light"]) .akoti-alert.warning { background: rgba(255,152,0,0.1); border-color: rgba(255,152,0,0.2); color: #ffb74d; }
  :root:not([data-theme="light"]) .akoti-alert.danger  { background: rgba(244,67,54,0.1); border-color: rgba(244,67,54,0.2); color: #ef9a9a; }
}