/* ==========================================================================
   LAPOR PAK! — Toast Notification
   Upload : Shared Components > Static Application Files > css/lapor-toast.css
   Refer  : Shared Components > User Interface Attributes > CSS File URLs
            (agar tersedia di seluruh halaman, bukan hanya login)
   ========================================================================== */

:root {
  --lpt-success: #12A570;
  --lpt-danger:  #E0453F;
  --lpt-warning: #C97A10;
  --lpt-info:    #6D3FD1;
  --lpt-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.lpt-host {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: min(400px, calc(100vw - 40px));
}

.lpt {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  min-width: 300px;
  padding: 15px 42px 15px 15px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(27, 31, 59, 0.07);
  box-shadow: 0 18px 44px rgba(20, 16, 60, 0.16), 0 3px 10px rgba(20, 16, 60, 0.07);
  font-family: var(--lpt-font);
  pointer-events: auto;
  overflow: hidden;
  animation: lpt-in 0.46s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.lpt.is-leaving { animation: lpt-out 0.32s cubic-bezier(0.4, 0, 1, 1) both; }

@keyframes lpt-in {
  from { opacity: 0; transform: translateX(34px) scale(0.95); }
  to   { opacity: 1; transform: none; }
}

@keyframes lpt-out {
  from { opacity: 1; transform: none; max-height: 220px; margin-bottom: 0; }
  to   { opacity: 0; transform: translateX(34px) scale(0.95); max-height: 0; margin-bottom: -10px; }
}

/* Pita warna di tepi kiri */
.lpt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--lpt-info);
}

.lpt__icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 19px;
  color: #fff;
  background: var(--lpt-info);
}

.lpt__body { flex: 1; min-width: 0; padding-top: 1px; }

.lpt__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #1B1F3B;
  line-height: 1.35;
  letter-spacing: -0.1px;
}

.lpt__text {
  margin: 4px 0 0;
  font-size: 12.5px;
  font-weight: 300;
  color: #5C6180;
  line-height: 1.55;
  word-wrap: break-word;
}

.lpt__close {
  position: absolute;
  top: 11px;
  right: 11px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #A9AEC4;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.16s, color 0.16s;
}

.lpt__close:hover { background: #F1F2F8; color: #1B1F3B; }
.lpt__close:focus-visible { outline: 2px solid var(--lpt-info); outline-offset: 1px; }

/* Bilah hitung mundur */
.lpt__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--lpt-info);
  opacity: 0.3;
  transform-origin: left center;
  animation: lpt-bar linear forwards;
}

@keyframes lpt-bar {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* Varian */
.lpt--success::before,
.lpt--success .lpt__icon,
.lpt--success .lpt__bar { background: var(--lpt-success); }

.lpt--danger::before,
.lpt--danger .lpt__icon,
.lpt--danger .lpt__bar { background: var(--lpt-danger); }

.lpt--warning::before,
.lpt--warning .lpt__icon,
.lpt--warning .lpt__bar { background: var(--lpt-warning); }

/* Getaran halus khusus galat, memperjelas bahwa ada yang salah */
.lpt--danger { animation: lpt-in 0.46s cubic-bezier(0.22, 1, 0.36, 1) both,
                          lpt-nudge 0.4s ease 0.46s 1; }

@keyframes lpt-nudge {
  0%, 100% { transform: translateX(0); }
  30%      { transform: translateX(-5px); }
  65%      { transform: translateX(4px); }
}

/* Mobile: melebar penuh di bawah, jauh dari jempol yang menutupi layar atas */
@media (max-width: 560px) {
  .lpt-host {
    top: auto;
    bottom: 16px;
    left: 12px;
    right: 12px;
    max-width: none;
  }

  .lpt { min-width: 0; padding: 14px 40px 14px 13px; }

  @keyframes lpt-in {
    from { opacity: 0; transform: translateY(24px) scale(0.96); }
    to   { opacity: 1; transform: none; }
  }

  @keyframes lpt-out {
    from { opacity: 1; transform: none; max-height: 220px; }
    to   { opacity: 0; transform: translateY(24px); max-height: 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .lpt, .lpt.is-leaving, .lpt--danger { animation: none !important; }
  .lpt__bar { animation: none !important; opacity: 0.18; }
}