/**
 * swal-app.css  –  Data Transfer Journey Theme
 * Animasi: Komputer → Server → Komputer dengan paket data bergerak
 */

/* ══════════════════════════════════════════════════════════
   POPUP CONTAINER
   ══════════════════════════════════════════════════════════ */
.swal-app-popup {
    border-radius: 22px !important;
    padding: 0 !important;
    font-family: 'DM Sans', system-ui, -apple-system, "Segoe UI", sans-serif !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.9),
        0 4px 6px rgba(15,23,42,0.04),
        0 20px 60px rgba(15,23,42,0.22) !important;
    max-width: 460px !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════
   HEADER INSTANSI (logo + nama)
   ══════════════════════════════════════════════════════════ */
.swal-app-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px 12px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
}

.swal-app-header img {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    object-fit: contain !important;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #e2e8f0;
}

.swal-app-header span {
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════
   DATA TRANSFER BAR
   Layout: [PC] ---paket---> [SERVER] ---paket---> [PC]
   ══════════════════════════════════════════════════════════ */
.swal-transfer-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px 8px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
    gap: 2px;
    position: relative;
    overflow: hidden;
}

/* Kilatan cahaya yang menyapu */
.swal-transfer-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 35%,
        rgba(255,255,255,0.55) 50%,
        transparent 65%
    );
    animation: swalSheen 2.8s ease-in-out infinite;
    pointer-events: none;
}

/* ── Node (PC / Server) ── */
.swal-transfer-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    z-index: 1;
}

.swal-node-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.06);
}

.swal-node-icon svg {
    width: 17px;
    height: 17px;
    stroke: var(--packet-color, #3b82f6);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.swal-transfer-node:nth-child(1) .swal-node-icon { animation: nodeEnter 0.45s ease 0.08s both; }
.swal-transfer-node:nth-child(3) .swal-node-icon { animation: nodeEnter 0.45s ease 0.20s both; }
.swal-transfer-node:nth-child(5) .swal-node-icon { animation: nodeEnter 0.45s ease 0.32s both; }

.swal-transfer-node.node-server .swal-node-icon {
    animation: nodeEnter 0.45s ease 0.20s both, serverHeartbeat 2.4s ease-in-out 0.8s infinite;
}

.swal-node-label {
    font-size: 8px;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    line-height: 1;
}

/* ── Track (jalur antar node) ── */
.swal-transfer-track {
    flex: 1;
    position: relative;
    height: 24px;
    display: flex;
    align-items: center;
    min-width: 32px;
    max-width: 78px;
    z-index: 1;
}

.swal-track-line {
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    border-radius: 2px;
    background: #dde3ec;
    overflow: hidden;
}

.swal-track-line::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--packet-color, #3b82f6) 50%,
        transparent 100%
    );
    animation: lineGlow 1.5s ease-in-out infinite;
    opacity: 0.55;
}

/* ── Paket Data (titik bergerak di atas track) ── */
.swal-packet {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--packet-color, #3b82f6);
    box-shadow: 0 0 5px var(--packet-color, #3b82f6),
                0 0 12px color-mix(in srgb, var(--packet-color,#3b82f6) 45%, transparent);
    top: 50%;
    transform: translateY(-50%) scale(0);
    left: -4px;
    animation: packetFly var(--dur, 1.35s) var(--delay, 0s) ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════════
   SWEETALERT2 INTERNAL ELEMENTS
   ══════════════════════════════════════════════════════════ */
.swal2-header {
    padding: 0 28px !important;
}

.swal-app-main-title {
    font-size: 1.28rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.3 !important;
    padding: 0 !important;
    margin-top: 0 !important;
}

.swal2-html-container,
.swal2-content {
    color: #475569 !important;
    font-size: 0.93rem !important;
    line-height: 1.7 !important;
    padding: 4px 28px 8px !important;
    margin: 0 !important;
}

.swal2-icon {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════
   TOMBOL
   ══════════════════════════════════════════════════════════ */
.swal2-actions {
    gap: 12px !important;
    padding: 6px 28px 24px !important;
    margin: 0 !important;
}

.swal-app-btn-confirm,
.swal-app-btn-danger,
.swal-app-btn-cancel {
    border-radius: 999px !important;
    padding: 11px 30px !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    border: 0 !important;
    cursor: pointer !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

.swal-app-btn-confirm::after,
.swal-app-btn-danger::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.22), transparent 60%);
    pointer-events: none;
}

.swal-app-btn-confirm {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: white !important;
    box-shadow: 0 4px 14px rgba(37,99,235,0.35) !important;
}
.swal-app-btn-confirm:hover {
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow: 0 8px 24px rgba(37,99,235,0.48) !important;
}
.swal-app-btn-confirm:active { transform: scale(0.97) !important; }

.swal-app-btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
    color: white !important;
    box-shadow: 0 4px 14px rgba(239,68,68,0.35) !important;
}
.swal-app-btn-danger:hover {
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow: 0 8px 24px rgba(239,68,68,0.48) !important;
}
.swal-app-btn-danger:active { transform: scale(0.97) !important; }

.swal-app-btn-cancel {
    background: #f1f5f9 !important;
    color: #475569 !important;
}
.swal-app-btn-cancel:hover {
    background: #e2e8f0 !important;
    transform: translateY(-1px) !important;
}

/* ══════════════════════════════════════════════════════════
   BACKDROP
   ══════════════════════════════════════════════════════════ */
.swal2-backdrop-show {
    background: rgba(15, 23, 42, 0.58) !important;
    backdrop-filter: blur(10px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.4) !important;
}

/* ══════════════════════════════════════════════════════════
   TIMER BAR
   ══════════════════════════════════════════════════════════ */
.swal2-timer-progress-bar {
    height: 3px !important;
    background: var(--packet-color, #3b82f6) !important;
    opacity: 0.75 !important;
    border-radius: 0 2px 2px 0 !important;
}

/* ══════════════════════════════════════════════════════════
   SHOW / HIDE
   ══════════════════════════════════════════════════════════ */
.swal2-show {
    animation: swalDataIn 0.52s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.swal2-hide {
    animation: swalDataOut 0.28s ease-in forwards !important;
}

/* ══════════════════════════════════════════════════════════
   WARNA PAKET PER TIPE
   ══════════════════════════════════════════════════════════ */
.swal-transfer-bar[data-type="success"]  { --packet-color: #22c55e; }
.swal-transfer-bar[data-type="error"]    { --packet-color: #ef4444; }
.swal-transfer-bar[data-type="warning"]  { --packet-color: #f59e0b; }
.swal-transfer-bar[data-type="info"]     { --packet-color: #3b82f6; }
.swal-transfer-bar[data-type="question"] { --packet-color: #8b5cf6; }

/* Paket error: berhenti & meledak di tengah */
.swal-transfer-bar[data-type="error"] .swal-packet {
    animation: packetError var(--dur, 1.4s) var(--delay, 0s) ease-in-out infinite;
}

/* Paket warning: lebih lambat */
.swal-transfer-bar[data-type="warning"] .swal-packet { --dur: 2.2s; }

/* ══════════════════════════════════════════════════════════
   KEYFRAMES
   ══════════════════════════════════════════════════════════ */

/* Popup masuk – materialisasi data dari paket */
@keyframes swalDataIn {
    0%   { opacity:0; transform:scale(0.72) translateY(24px); filter:blur(6px); }
    30%  { filter:blur(0); }
    65%  { transform:scale(1.04) translateY(-5px); opacity:1; }
    82%  { transform:scale(0.98) translateY(2px); }
    100% { transform:scale(1) translateY(0); opacity:1; }
}

/* Popup keluar – data "dikirimkan" */
@keyframes swalDataOut {
    0%   { opacity:1; transform:scale(1) translateY(0); filter:blur(0); }
    25%  { transform:scale(1.03); }
    100% { opacity:0; transform:scale(0.82) translateY(-20px); filter:blur(4px); }
}

/* Paket data normal (kiri → kanan) */
@keyframes packetFly {
    0%   { left:-4px; opacity:0; transform:translateY(-50%) scale(0); }
    8%   { opacity:1; transform:translateY(-50%) scale(1); }
    88%  { opacity:1; transform:translateY(-50%) scale(1); }
    100% { left:calc(100% - 4px); opacity:0; transform:translateY(-50%) scale(0); }
}

/* Paket error – berhenti & menghilang di tengah */
@keyframes packetError {
    0%   { left:-4px; opacity:0; transform:translateY(-50%) scale(0); }
    8%   { opacity:1; transform:translateY(-50%) scale(1); }
    48%  { left:48%; opacity:1; transform:translateY(-50%) scale(1); }
    62%  { left:50%; opacity:0; transform:translateY(-50%) scale(2); }
    100% { left:50%; opacity:0; transform:translateY(-50%) scale(0); }
}

/* Kilatan garis track */
@keyframes lineGlow {
    0%   { transform:translateX(-200%); opacity:0; }
    20%  { opacity:1; }
    80%  { opacity:1; }
    100% { transform:translateX(200%); opacity:0; }
}

/* Kilatan permukaan bar */
@keyframes swalSheen {
    0%   { transform:translateX(-120%); }
    100% { transform:translateX(200%); }
}

/* Node icon muncul */
@keyframes nodeEnter {
    0%   { transform:scale(0) rotate(-20deg); opacity:0; }
    70%  { transform:scale(1.12) rotate(4deg); }
    100% { transform:scale(1) rotate(0); opacity:1; }
}

/* Server: denyut tanda "hidup" */
@keyframes serverHeartbeat {
    0%,100% {
        box-shadow: 0 2px 8px rgba(0,0,0,0.10),
                    0 0 0 0px color-mix(in srgb,var(--packet-color,#3b82f6) 35%,transparent);
    }
    50% {
        box-shadow: 0 2px 14px rgba(0,0,0,0.12),
                    0 0 0 6px color-mix(in srgb,var(--packet-color,#3b82f6) 0%,transparent);
    }
}