/* gn-modal — themed confirm/alert (Nail Studio palette: var(--brand)) */

.gn-modal-backdrop{
  position:fixed !important;
  top:0 !important; right:0 !important; bottom:0 !important; left:0 !important;
  z-index:2147483000 !important;
  background:rgba(24,24,27,.55) !important;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:20px !important;
  opacity:1;
  pointer-events:auto;
  overflow-y:auto;
  animation:gnmFadeIn .18s ease both;
}

@keyframes gnmFadeIn { from { opacity:0 } to { opacity:1 } }
@keyframes gnmPopIn  { from { opacity:0; transform:translateY(20px) scale(.96) } to { opacity:1; transform:translateY(0) scale(1) } }

.gn-modal{
  background:#fff !important;
  border-radius:22px !important;
  box-shadow:0 20px 60px rgba(24,24,27,.25), 0 4px 16px rgba(var(--brand-rgb),.15) !important;
  max-width:440px !important;
  width:100% !important;
  margin:auto !important;
  overflow:hidden;
  position:relative;
  opacity:1;
  animation:gnmPopIn .25s cubic-bezier(.16,1,.3,1) both;
}
.gn-modal-backdrop.is-closing{ animation:gnmFadeIn .18s ease reverse both; }
.gn-modal-backdrop.is-closing .gn-modal{ animation:gnmPopIn .22s ease reverse both; }

.gn-modal-head{
  display:flex; align-items:center; gap:14px;
  padding:24px 24px 16px;
}
.gn-modal-icon{
  width:54px; height:54px; border-radius:16px;
  display:grid; place-items:center;
  font-size:1.7rem; flex-shrink:0;
  background:linear-gradient(135deg, rgba(var(--brand-rgb),.18), rgba(var(--brand-soft-rgb),.22));
  color:var(--brand-2);
  border:1.5px solid rgba(var(--brand-rgb),.20);
}
.gn-modal-icon i{ line-height:1; font-weight:700 }
.gn-modal-icon.is-warn{
  background:linear-gradient(135deg,#fef3c7,#fde68a);
  color:#b45309;
  border-color:rgba(245,158,11,.40);
}
/* ✅ Danger — ใช้ token ของธีมร้าน (โทนเข้มกว่า primary เพื่อสื่อ destructive) */
.gn-modal-icon.is-danger{
  background:linear-gradient(135deg, rgba(var(--brand-rgb),.20), rgba(var(--brand-2-rgb),.18));
  color:var(--brand-2);
  border-color:rgba(var(--brand-rgb),.35);
}
.gn-modal-icon.is-success{
  background:linear-gradient(135deg,#dcfce7,#bbf7d0);
  color:#15803d;
  border-color:rgba(22,163,74,.35);
}
.gn-modal-icon.is-info{
  background:linear-gradient(135deg,#dbeafe,#bfdbfe);
  color:#1d4ed8;
  border-color:rgba(37,99,235,.35);
}

.gn-modal-title{
  font-weight:800; color:#18181b; font-size:1.08rem; line-height:1.35;
  margin:0;
}
.gn-modal-body{
  padding:0 24px 8px;
  color:#52525b; font-size:14px; line-height:1.6;
  word-wrap:break-word;
}
.gn-modal-body code{
  background:rgba(var(--brand-rgb),.14); color:var(--brand-2);
  padding:1px 6px; border-radius:6px; font-size:13px;
}

.gn-modal-foot{
  display:flex; gap:10px; justify-content:flex-end;
  padding:18px 24px 22px;
}
.gn-modal-btn{
  padding:10px 20px; border-radius:12px;
  font-weight:700; font-size:14px;
  border:1.5px solid rgba(0,0,0,.08); background:#fff; color:#374151;
  cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  transition:.15s ease;
  font-family:inherit;
}
.gn-modal-btn:hover{ border-color:#9ca3af; background:#f9fafb; }
.gn-modal-btn-primary{
  background:linear-gradient(135deg,var(--brand),var(--brand-soft)); color:#fff; border-color:var(--brand);
  box-shadow:0 4px 12px rgba(var(--brand-rgb),.30);
}
.gn-modal-btn-primary:hover{ filter:brightness(1.06); background:linear-gradient(135deg,var(--brand),var(--brand-soft)); color:#fff; border-color:var(--brand); }
/* ✅ Danger — ใช้ token ของธีมร้าน (brand → brand-2 เข้มกว่า primary เพื่อสื่อ destructive) */
.gn-modal-btn-danger{
  background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; border-color:var(--brand-2);
  box-shadow:0 4px 14px rgba(var(--brand-rgb),.35);
}
.gn-modal-btn-danger:hover{ filter:brightness(1.06); background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; border-color:var(--brand-2); }
.gn-modal-btn-success{
  background:linear-gradient(135deg,#22c55e,#16a34a); color:#fff; border-color:#16a34a;
  box-shadow:0 4px 12px rgba(34,197,94,.30);
}
.gn-modal-btn-success:hover{ filter:brightness(1.06); background:linear-gradient(135deg,#22c55e,#16a34a); color:#fff; border-color:#16a34a; }

@media (max-width:480px){
  .gn-modal-head{ padding:20px 18px 14px; gap:12px; }
  .gn-modal-icon{ width:44px; height:44px; font-size:1.3rem; border-radius:14px; }
  .gn-modal-title{ font-size:1rem; }
  .gn-modal-body{ padding:0 18px 6px; font-size:13.5px; }
  .gn-modal-foot{ padding:14px 18px 18px; flex-direction:column-reverse; gap:8px; }
  .gn-modal-btn{ width:100%; justify-content:center; }
}

/* =========================
   gn-imgview — image lightbox popup
========================= */
.gn-imgview{
  position:fixed; inset:0; z-index:2147483600;
  background:rgba(15,15,19,.88); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding:30px 20px;
  animation: gnmFadeIn .2s ease both;
  cursor:zoom-out;
}
.gn-imgview.is-closing{ animation: gnmFadeOut .2s ease both; }
@keyframes gnmFadeOut { from { opacity:1 } to { opacity:0 } }

.gn-imgview-stage{
  position:relative;
  max-width:100%; max-height:100%;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  animation: gnmPopIn .25s ease both;
}
.gn-imgview-img{
  max-width:90vw; max-height:80vh;
  border-radius:14px; box-shadow:0 30px 80px rgba(0,0,0,.6);
  cursor:default; background:#fff;
  object-fit:contain;
}
.gn-imgview-cap{
  color:#fff; font-size:13.5px; font-weight:600; text-align:center;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
  padding:6px 14px; border-radius:999px;
  backdrop-filter:blur(6px);
}
.gn-imgview-close{
  position:absolute; top:16px; right:16px;
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.22);
  display:grid; place-items:center; cursor:pointer;
  font-size:18px; transition:.15s; backdrop-filter:blur(6px);
  z-index:2;
}
.gn-imgview-close:hover{ background:rgba(255,255,255,.25); transform:rotate(90deg) scale(1.05); }

@media (max-width:560px){
  .gn-imgview{ padding:14px 10px; }
  .gn-imgview-img{ max-height:72vh; }
  .gn-imgview-close{ top:10px; right:10px; width:38px; height:38px; }
}

/* =========================================================
   ✅ Popup Content Patterns (system-wide, theme-aware)
   ใช้ภายใน gnAlert/gnDialog body — มี icon chip ทุก label
========================================================= */

/* ----- Detail Grid (.det-grid) — 2-column key/value with icon labels ----- */
.det-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:8px;
  text-align:left;font-size:13px;
}
.det-grid .cell{
  padding:10px 12px;
  border:1px solid rgba(var(--brand-rgb),.10);
  border-radius:12px;
  background:linear-gradient(135deg, rgba(var(--brand-rgb),.04), #fafafa);
}
.det-grid .cell.full{grid-column:1/-1}
.det-grid .lbl{
  font-size:10.5px;color:#6b7280;font-weight:700;
  letter-spacing:.3px;text-transform:uppercase;
  display:flex;align-items:center;gap:6px;
}
.det-grid .lbl i{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:7px;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#fff;font-size:11.5px;
  box-shadow:0 2px 5px rgba(var(--brand-rgb),.30);
}
.det-grid .val{
  font-size:13px;font-weight:700;color:#18181b;
  margin-top:4px;word-break:break-all;padding-left:28px;
}
.det-grid .val.pink{color:var(--brand-2);font-size:1.05rem}
.det-grid .val code{
  background:#fff;padding:2px 6px;border-radius:6px;
  font-size:11.5px;border:1px solid rgba(0,0,0,.06);
}

/* ----- Detail reason banner (.det-reason) ----- */
.det-reason{
  margin-top:10px;padding:10px 12px;border-radius:12px;
  font-size:12.5px;text-align:left;line-height:1.6;
  display:flex;align-items:flex-start;gap:8px;
}
.det-reason i{font-size:15px;flex-shrink:0;margin-top:1px}
.det-reason.warn{
  background:rgba(245,158,11,.08);color:#92400e;
  border:1px solid rgba(245,158,11,.20);
}
.det-reason.err{
  background:rgba(239,68,68,.08);color:#991b1b;
  border:1px solid rgba(239,68,68,.20);
}

/* ----- Detail slip image (.det-slip) ----- */
.det-slip{margin-top:10px;text-align:center}
.det-slip img{
  max-width:220px;border-radius:12px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}

/* ----- Popup Summary (.pop-sum / .row-x) — horizontal key/value rows ----- */
.pop-sum{
  text-align:left;margin:6px 0 4px;
  border:1px solid rgba(var(--brand-rgb),.12);
  border-radius:14px;overflow:hidden;
  background:#fff;
}
.pop-sum .row-x{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 14px;font-size:13.5px;
  border-bottom:1px solid rgba(var(--brand-rgb),.06);
}
.pop-sum .row-x:last-child{
  border-bottom:0;
  background:linear-gradient(135deg, rgba(var(--brand-rgb),.10), rgba(var(--brand-rgb),.04));
}
.pop-sum .row-x b{color:#18181b}
.pop-sum .row-x span:first-child{
  display:inline-flex;align-items:center;gap:8px;color:#52525b;font-weight:600;
}
.pop-sum .row-x span:first-child i{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:8px;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#fff;font-size:13px;
  box-shadow:0 3px 8px rgba(var(--brand-rgb),.25);
}
.pop-sum .pay-amt{
  font-size:1.3rem;font-weight:900;color:var(--brand-2);
}

/* ----- Popup warning banner (.pop-warn) ----- */
.pop-warn{
  background:rgba(245,158,11,.10);color:#92400e;
  border:1px solid rgba(245,158,11,.25);
  padding:10px 14px;border-radius:12px;
  font-size:12.5px;margin-top:10px;text-align:left;
  line-height:1.6;
}
.pop-warn > i:first-child{
  font-size:16px;
  margin-right:6px;
  vertical-align:-2px;
}
.pop-warn b{font-weight:700}

@media (max-width:560px){
  .det-grid{grid-template-columns:1fr}
}