/* ===== Flash notif peserta (toast elegan) =====
   Di-scope di bawah #content agar mengalahkan rule lama
   `#content #flashMessage { background-color:red; ... }` di global.css (2 id). */
#content #flashMessage.message {
  position: fixed;
  top: 16px; right: 16px; left: auto; bottom: auto;
  z-index: 9999;
  max-width: 360px;
  width: calc(100% - 32px);
  min-height: 0;
  background: #fff;
  color: #2f3640;
  font-weight: 400;
  text-align: left;
  border: 1px solid #eef0f3;
  border-left: 4px solid #3498db;   /* aksen default (info) */
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  padding: 13px 40px 13px 44px;     /* ruang ikon (kiri) & close (kanan) */
  font-size: 14px;
  line-height: 1.45;
  animation: flashIn .28s ease-out;
}

/* ikon kiri (FontAwesome 5 Free, solid → font-weight 900) */
#content #flashMessage.message::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f05a";                 /* info-circle default */
  position: absolute; left: 15px; top: 12px;
  font-size: 18px; color: #3498db;
}

/* tombol close (disuntik via JS) */
#content #flashMessage .flash-close {
  position: absolute; top: 8px; right: 10px;
  border: 0; background: transparent; cursor: pointer;
  font-size: 18px; line-height: 1; color: #aab2bd; padding: 4px;
}
#content #flashMessage .flash-close:hover { color: #6b7280; }

/* varian tipe (menang krn 2 id + 1 class, & ditulis setelah .message) */
#content #flashMessage.flash-success { border-left-color:#27ae60; }
#content #flashMessage.flash-success::before { content:"\f058"; color:#27ae60; } /* check-circle */
#content #flashMessage.flash-error   { border-left-color:#e74c3c; }
#content #flashMessage.flash-error::before   { content:"\f06a"; color:#e74c3c; } /* exclamation-circle */

@keyframes flashIn { from {opacity:0; transform:translateY(-8px);} to {opacity:1; transform:none;} }
#content #flashMessage.flash-hide { opacity:0; transform:translateY(-8px); transition:.3s ease; }

/* ===== mobile ===== */
@media (max-width: 576px) {
  #content #flashMessage.message {
    top: 10px; left: 12px; right: 12px;
    width: auto; max-width: none;
    font-size: 13.5px;
  }
}