/* ==========================================================================
   Neumorphism / Soft UI theme layer for Buku Tamu Digital
   Aturan:
   1. Background halaman & kartu identik (--neu-bg)
   2. Tidak ada border warna solid
   3. Kedalaman HANYA dari double drop-shadow (gelap kanan-bawah, terang kiri-atas)
   4. Status ditekan / input aktif pakai inset shadow (cekung)
   5. Semua sudut melengkung halus
   ========================================================================== */

:root{
  --neu-bg: #e0e5ec;          /* satu warna untuk background & kartu */
  --neu-text: #3d4457;
  --neu-text-soft: #7b8496;
  --neu-accent: #5b6cff;      /* aksen biru lembut untuk CTA / status aktif */
  --neu-accent-soft: #eef0ff;
  --neu-success: #34b789;
  --neu-danger: #ef6b6b;
  --neu-shadow-dark: #a3b1c6;
  --neu-shadow-light: #ffffff;
  --neu-radius-lg: 28px;
  --neu-radius-md: 18px;
  --neu-radius-sm: 12px;
  --neu-radius-full: 9999px;
}

*{ box-sizing:border-box; }

html, body{
  background:var(--neu-bg);
  color:var(--neu-text);
  font-family:'Poppins','Segoe UI',Arial,sans-serif;
  min-height:100vh;
}

/* ---------- Kartu terangkat (flat / convex) ---------- */
.neu-card{
  background:var(--neu-bg);
  border-radius:var(--neu-radius-lg);
  box-shadow: 10px 10px 22px var(--neu-shadow-dark), -10px -10px 22px var(--neu-shadow-light);
  border:none;
}
.neu-card-sm{
  background:var(--neu-bg);
  border-radius:var(--neu-radius-md);
  box-shadow: 6px 6px 14px var(--neu-shadow-dark), -6px -6px 14px var(--neu-shadow-light);
  border:none;
}
.neu-flat-xs{
  background:var(--neu-bg);
  border-radius:var(--neu-radius-sm);
  box-shadow: 4px 4px 9px var(--neu-shadow-dark), -4px -4px 9px var(--neu-shadow-light);
  border:none;
}

/* ---------- Cekung / tertekan / aktif (inset) ---------- */
.neu-inset{
  background:var(--neu-bg);
  border-radius:var(--neu-radius-md);
  box-shadow: inset 5px 5px 11px var(--neu-shadow-dark), inset -5px -5px 11px var(--neu-shadow-light);
  border:none;
}
.neu-inset-sm{
  background:var(--neu-bg);
  border-radius:var(--neu-radius-sm);
  box-shadow: inset 3px 3px 7px var(--neu-shadow-dark), inset -3px -3px 7px var(--neu-shadow-light);
  border:none;
}

/* ---------- Input ---------- */
.neu-input{
  background:var(--neu-bg);
  border-radius:var(--neu-radius-sm);
  box-shadow: inset 4px 4px 9px var(--neu-shadow-dark), inset -4px -4px 9px var(--neu-shadow-light);
  border:none;
  outline:none;
  color:var(--neu-text);
  transition:box-shadow .15s ease;
}
.neu-input::placeholder{ color:var(--neu-text-soft); }
.neu-input:focus{
  box-shadow: inset 5px 5px 11px var(--neu-shadow-dark), inset -5px -5px 11px var(--neu-shadow-light), 0 0 0 3px var(--neu-accent-soft);
}

/* ---------- Tombol ---------- */
.neu-btn{
  background:var(--neu-bg);
  border-radius:var(--neu-radius-md);
  box-shadow: 6px 6px 14px var(--neu-shadow-dark), -6px -6px 14px var(--neu-shadow-light);
  border:none;
  color:var(--neu-text);
  transition: box-shadow .12s ease, transform .12s ease;
}
.neu-btn:hover{ transform:translateY(-1px); }
.neu-btn:active, .neu-btn.is-pressed{
  box-shadow: inset 4px 4px 9px var(--neu-shadow-dark), inset -4px -4px 9px var(--neu-shadow-light);
  transform:translateY(0);
}

/* Tombol primer berwarna (tanpa border solid, shadow diberi tint warna) */
.neu-btn-primary{
  background:linear-gradient(145deg, #6478ff, #4f5fe0);
  color:#fff;
  border-radius:var(--neu-radius-md);
  border:none;
  box-shadow: 6px 6px 14px #aab0d6, -6px -6px 14px #ffffff;
  transition: box-shadow .12s ease, transform .12s ease;
}
.neu-btn-primary:hover{ transform:translateY(-1px); filter:brightness(1.03); }
.neu-btn-primary:active{
  box-shadow: inset 4px 4px 9px #3d49b8, inset -4px -4px 9px #7c8bff;
  transform:translateY(0);
}

.neu-btn-danger{
  background:linear-gradient(145deg, #f28080, #e2605f);
  color:#fff;
  border-radius:var(--neu-radius-md);
  border:none;
  box-shadow: 6px 6px 14px #c9a6a6, -6px -6px 14px #ffffff;
}
.neu-btn-danger:active{
  box-shadow: inset 4px 4px 9px #b94b4a, inset -4px -4px 9px #ff9b9a;
}

/* ---------- Ikon lingkaran (avatar / badge) ---------- */
.neu-circle{
  border-radius:var(--neu-radius-full);
  background:var(--neu-bg);
  box-shadow: 6px 6px 14px var(--neu-shadow-dark), -6px -6px 14px var(--neu-shadow-light);
}
.neu-circle-inset{
  border-radius:var(--neu-radius-full);
  background:var(--neu-bg);
  box-shadow: inset 4px 4px 9px var(--neu-shadow-dark), inset -4px -4px 9px var(--neu-shadow-light);
}

/* ---------- Chip / label pill ---------- */
.neu-chip{
  border-radius:var(--neu-radius-full);
  background:var(--neu-bg);
  box-shadow: 4px 4px 9px var(--neu-shadow-dark), -4px -4px 9px var(--neu-shadow-light);
  border:none;
}

/* ---------- Scrollbar tipis senada ---------- */
.neu-scroll::-webkit-scrollbar{ width:6px; height:6px; }
.neu-scroll::-webkit-scrollbar-track{ background:transparent; }
.neu-scroll::-webkit-scrollbar-thumb{ background:var(--neu-shadow-dark); border-radius:99px; }

/* ---------- Kartu tamu terpilih (jawaban survei / pilih nama) ---------- */
.neu-select-card{
  background:var(--neu-bg);
  border-radius:var(--neu-radius-md);
  box-shadow: 6px 6px 14px var(--neu-shadow-dark), -6px -6px 14px var(--neu-shadow-light);
  transition: box-shadow .15s ease, transform .15s ease;
}
.neu-select-card:hover{
  box-shadow: 3px 3px 8px var(--neu-shadow-dark), -3px -3px 8px var(--neu-shadow-light);
  transform: translateY(1px);
}
.neu-select-card:active{
  box-shadow: inset 4px 4px 9px var(--neu-shadow-dark), inset -4px -4px 9px var(--neu-shadow-light);
}

/* SweetAlert senada (opsional, dipakai oleh halaman aksi survei) */
.sweet-alert{
  background:var(--neu-bg) !important;
  border-radius:var(--neu-radius-lg) !important;
  box-shadow: 10px 10px 22px var(--neu-shadow-dark), -10px -10px 22px var(--neu-shadow-light) !important;
  border:none !important;
}
.sweet-alert h2{ color:var(--neu-text) !important; }
.sweet-alert .sa-button-container .confirm{
  background:var(--neu-accent) !important;
  border-radius:var(--neu-radius-md) !important;
  box-shadow: 4px 4px 9px var(--neu-shadow-dark), -4px -4px 9px var(--neu-shadow-light) !important;
}