/* ===============================
   BASE
================================ */
#nuoi-admin-trigger {
  position: fixed;
  right: 20px;
  bottom: 20px;
  padding: 8px 14px;
  display: flex;
  gap: 8px;
  align-items: center;
  cursor: pointer;
  z-index: 9999;
  border-radius: 999px;
  font-weight: 500;
}

#nuoi-admin-trigger img {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

/* ===============================
   POPUP CORE
================================ */
#nuoi-admin-popup {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

#nuoi-admin-popup.open { display: block; }

.na-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
}

.na-box {
  position: relative;
  width: 320px;
  margin: 12vh auto;
  padding: 16px;
}

/* ===============================
   HEADER
================================ */
.na-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.na-header img {
  width: 42px;
  height: 42px;
  border-radius: 12px;
}

.na-close {
  margin-left: auto;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}

/* ===============================
   QR
================================ */
.na-qr-wrap {
  text-align: center;
  margin: 18px 0;
}

.na-qr-wrap img {
  max-width: 220px;
  transition: opacity .2s;
}

/* ===============================
   TABS
================================ */
.na-tabs {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.na-tabs button {
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  border: 1px solid transparent;
}

.na-tabs button.active {
  font-weight: 600;
}

/* ======================================================
   STYLE: BUY ME A COFFEE (DEFAULT)
====================================================== */
.na-style-buyme #nuoi-admin-trigger {
  background: #ffdd00;
  color: #000;
}

.na-style-buyme .na-box {
  background: #fffbeb;
  border-radius: 16px;
}

.na-style-buyme .na-tabs button {
  background: #fff3bf;
}

.na-style-buyme .na-tabs button.active {
  background: #ffdd00;
  color: #000;
}

/* ======================================================
   STYLE: KO-FI
====================================================== */
.na-style-kofi #nuoi-admin-trigger {
  background: #29abe0;
  color: #fff;
}

.na-style-kofi .na-box {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #dbeafe;
}

.na-style-kofi .na-tabs button {
  background: #eff6ff;
  color: #1d4ed8;
}

.na-style-kofi .na-tabs button.active {
  background: #29abe0;
  color: #fff;
}

/* ======================================================
   STYLE: NOTION
====================================================== */
.na-style-notion #nuoi-admin-trigger {
  background: #ffffff;
  color: #111;
  border: 1px solid #e5e7eb;
}

.na-style-notion .na-box {
  background: #ffffff;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.na-style-notion .na-tabs button {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
}

.na-style-notion .na-tabs button.active {
  background: #111827;
  color: #fff;
}

/* ======================================================
   STYLE: STRIPE
====================================================== */
.na-style-stripe #nuoi-admin-trigger {
  background: linear-gradient(135deg,#635bff,#8b5cf6);
  color: #fff;
}

.na-style-stripe .na-box {
  background: #f6f9fc;
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(50,50,93,.15);
}

.na-style-stripe .na-tabs button {
  background: #ffffff;
  color: #635bff;
}

.na-style-stripe .na-tabs button.active {
  background: #635bff;
  color: #fff;
}

/* ===============================
   ANIMATION
================================ */
.na-anim-fade .na-box { animation: naFade .25s }
.na-anim-slide .na-box { animation: naSlide .25s }
.na-anim-fade-slide .na-box { animation: naFadeSlide .3s }

@keyframes naFade {
  from {opacity:0}
  to {opacity:1}
}

@keyframes naSlide {
  from {transform:translateY(12px)}
  to {transform:none}
}

@keyframes naFadeSlide {
  from {opacity:0;transform:translateY(12px)}
  to {opacity:1;transform:none}
}