/*
 * popup.css - tampilan SATU-SATUNYA untuk popup konfirmasi & popup pesan.
 *
 * Markup dibuat oleh core/popup.js (jangan menulis markup popup manual di
 * view/layout). Susunan: panel PUTIH berpelat - garis aksen gradasi di tepi atas, latar kepala berupa
 * bias warna sangat tipis + lingkaran dekoratif samar, lingkaran ikon berwarna, badan pesan, dan footer tombol
 * di bilah abu-abu muda. Jenis popup (popup--{primary|info|success|danger|warning}) menentukan warna aksen;
 * tombol memakai sistem tombol dari buttons.css.
 *
 * Ditulis sebagai CSS biasa (bukan utilitas Tailwind) supaya tampil benar sejak
 * frame pertama, sebelum Tailwind CDN selesai mengompilasi.
 */

.popup {
    position: fixed;
    inset: 0;
    z-index: 1080;                 /* di atas modal biasa (1050), di bawah toast (1100) */
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, .5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .2s ease-out;
}
.popup.is-shown { display: flex; }
.popup[data-open] { opacity: 1; }
.popup__backdrop { position: absolute; inset: 0; }

.popup__panel {
    position: relative;
    width: 100%;
    /* 26rem (bukan 23rem): popup dengan isi lebih dari sekadar teks singkat (mis. kotak "Pesan ke Peserta" di
       Tolak/Terima Berkas) terasa sempit di lebar lama. Di layar sempit tetap aman - `width: 100%` dengan
       padding 1rem pada .popup sudah membatasinya duluan sebelum max-width ini pernah tercapai. */
    max-width: 26rem;
    overflow: hidden;
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
    transform: scale(.95);
    transition: transform .2s ease-out;
}
.popup[data-open] .popup__panel { transform: scale(1); }
/* Garis aksen gradasi di tepi atas panel (warna mengikuti jenis popup). */
.popup__panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 2;
    height: .3125rem;
    background: linear-gradient(90deg, var(--popup-accent-2), var(--popup-accent));
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.popup__head {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.875rem 1.25rem .25rem;
    color: #1e293b;
    text-align: center;
    /* putih di bawah, bias warna aksen sangat tipis di atas + cahaya lembut di belakang ikon */
    background:
        radial-gradient(circle at 50% 2.75rem, var(--popup-tint) 0, transparent 9rem),
        linear-gradient(180deg, var(--popup-tint) 0%, #fff 78%);
}
/* Lingkaran dekoratif samar bernuansa aksen (elemen dibuat popup.js). */
.popup__deco { position: absolute; border-radius: 9999px; pointer-events: none; background: var(--popup-accent); opacity: .07; }
.popup__deco--1 { top: -1.75rem; right: -1.5rem; width: 6rem; height: 6rem; }
.popup__deco--2 { bottom: .25rem; left: -.75rem; width: 3rem; height: 3rem; opacity: .05; }

.popup__icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.75rem;
    height: 3.75rem;
    border: 2px solid var(--popup-line);
    border-radius: 9999px;
    background: #fff;
    box-shadow: 0 8px 18px -8px var(--popup-ring);
    color: var(--popup-accent);
    font-size: 1.75rem;
    line-height: 1;
}
.popup__icon > i { display: block; line-height: 1; }

/* Centang / silang berupa SVG yang "digambar" (stroke-dashoffset), berwarna aksen jenis popup
   (hijau untuk sukses, merah untuk gagal, dst.) di atas lingkaran tint. */
.popup__svg { display: block; width: 2.125rem; height: 2.125rem; }
.popup__svg path {
    fill: none;
    stroke: var(--popup-accent);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.popup__title {
    position: relative;
    z-index: 1;
    margin: .875rem 0 0;
    color: #0f172a;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.5rem;
}

/* ── Badan & footer ─────────────────────────────────────────────────────── */
.popup__body { padding: .375rem 1.5rem 1.375rem; text-align: center; }
.popup__message { margin: 0; color: #64748b; font-size: .8125rem; line-height: 1.6; overflow-wrap: anywhere; }
/* Rincian di dalam pesan konfirmasi (dibuat popup.js: Popup.detail): kalimat pembuka,
   sasaran (mis. nama peserta) sebagai baris tersendiri, lalu kotak petunjuk berwarna. */
.popup__target { display: block; margin: .375rem 0 .625rem; color: #1e293b; font-size: 1rem; font-weight: 700; line-height: 1.4; }
.popup__hint {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: .5rem;
    margin-top: .625rem;
    padding: .4375rem .75rem;
    border-radius: .625rem;
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: left;
}
.popup__target + .popup__hint { margin-top: 0; }
.popup__hint > i { flex-shrink: 0; margin-top: .125rem; line-height: 1; }
.popup__hint--info    { background: #eff6ff; color: #1d4ed8; }
.popup__hint--success { background: #ecfdf5; color: #047857; }
.popup__hint--warn    { background: #fffbeb; color: #b45309; }
.popup__hint--danger  { background: #fef2f2; color: #b91c1c; }

.popup__foot { display: flex; justify-content: center; gap: .625rem; padding: .875rem 1.25rem 1rem; border-top: 1px solid #eef2f7; background: #f8fafc; }
.popup__foot .btn { min-width: 6.5rem; min-height: 2.25rem; padding: .375rem 1rem; font-size: .8125rem; }

/* ── Warna aksen per tipe: --popup-accent (glyph), --popup-tint (isi lingkaran), --popup-line (tepi),
      --popup-ring (cincin animasi) ───────────────────────────────────────────── */
.popup--primary { --popup-accent-2: #38bdf8; --popup-accent: #2563eb; --popup-tint: #eff6ff; --popup-line: #bfdbfe; --popup-ring: rgba(37, 99, 235, .35); }
.popup--info    { --popup-accent-2: #60a5fa; --popup-accent: #2563eb; --popup-tint: #eff6ff; --popup-line: #bfdbfe; --popup-ring: rgba(59, 130, 246, .35); }
.popup--success { --popup-accent-2: #34d399; --popup-accent: #059669; --popup-tint: #ecfdf5; --popup-line: #a7f3d0; --popup-ring: rgba(16, 185, 129, .35); }
.popup--danger  { --popup-accent-2: #fb7185; --popup-accent: #dc2626; --popup-tint: #fef2f2; --popup-line: #fecaca; --popup-ring: rgba(239, 68, 68, .35); }
.popup--warning { --popup-accent-2: #fbbf24; --popup-accent: #d97706; --popup-tint: #fffbeb; --popup-line: #fde68a; --popup-ring: rgba(245, 158, 11, .35); }

/* ── Animasi ikon: dipakai SEMUA popup ───────────────────────────────────
   Lingkaran ikon muncul membal, glyph di dalamnya berputar masuk, lalu cincin
   tipis memancar berulang selama popup tampil. Dijalankan tiap popup dibuka (dipicu [data-open]).
   Centang & silang menggambar garisnya; jam pasir berputar. */
@keyframes popupIconPop {
    0%   { transform: scale(.4); opacity: 0; }
    60%  { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes popupGlyph {
    0%   { transform: scale(.3) rotate(-25deg); opacity: 0; }
    70%  { transform: scale(1.15) rotate(6deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes popupRing {
    0%   { box-shadow: 0 0 0 0 var(--popup-ring); }
    100% { box-shadow: 0 0 0 14px transparent; }
}
.popup[data-open] .popup__icon {
    animation: popupIconPop .5s cubic-bezier(.34, 1.56, .64, 1) .08s both,
               popupRing 2.2s ease-out .7s infinite;
}
.popup[data-open] .popup__icon > i {
    animation: popupGlyph .5s cubic-bezier(.34, 1.56, .64, 1) .22s both;
}
/* Garis centang/silang menggambar dirinya; silang menggambar garis kedua menyusul. */
@keyframes popupDraw { to { stroke-dashoffset: 0; } }
.popup[data-open] .popup__svg path { animation: popupDraw .4s ease-out .3s forwards; }
.popup[data-open] .popup__svg path + path { animation-delay: .5s; }
/* Jam pasir (pesan "menunggu"): berputar setengah putaran berulang. */
@keyframes popupFlip { 0%, 55% { transform: rotate(0); } 100% { transform: rotate(180deg); } }
.popup[data-open] .popup__icon > i.popup__flip {
    animation: popupGlyph .5s cubic-bezier(.34, 1.56, .64, 1) .22s both,
               popupFlip 2.4s ease-in-out 1s infinite;
}

@media (prefers-reduced-motion: reduce) {
    .popup, .popup__panel { transition: none; }
    .popup[data-open] .popup__icon,
    .popup[data-open] .popup__icon > i,
    .popup[data-open] .popup__icon > i.popup__flip { animation: none; }
    .popup__svg path { stroke-dashoffset: 0; animation: none !important; }
}