/* ── Signature System — kyTen.css ─────────────────────────── */
/* ── Display area: height:100% của .ladi-html-code (containing block position:absolute).
      JS cũng set inline height sau khi xóa inline LadiPage — cả 2 hướng đều đúng. ── */
#wb-sig-display{position:absolute;top:0;left:0;right:0;height:100%;
  border:1.5px dashed rgba(180,150,100,.4);border-radius:10px;
  overflow:hidden;box-sizing:border-box}
#wb-sig-display-inner{position:absolute;inset:0}

/* ── Spacer: height:100% nếu #wb-sig-root có height; JS fallback cũng set inline ── */
#wb-sig-root{font-family:sans-serif;width:100%;box-sizing:border-box;height:100%}
#wb-sig-spacer{display:block;width:100%;height:100%}

/* ── Button rows (normal flow, below spacer = below edit_signature) ── */
#wb-sig-btn-row{display:flex;justify-content:center;margin-top:12px;gap:8px}
#wb-sig-pos-btns{display:none;gap:8px;justify-content:center;
  margin-top:10px;flex-wrap:wrap}

/* ── Base button ─────────────────────────────────────────── */
.wb-sig-btn{border:none;border-radius:22px;padding:9px 22px;font-size:13px;
  cursor:pointer;transition:opacity .15s,transform .15s;letter-spacing:.3px}
.wb-sig-btn:hover{opacity:.88;transform:translateY(-1px)}
.wb-sig-btn:disabled{opacity:.5;cursor:default;transform:none !important}

#wb-sig-open-btn{background:linear-gradient(135deg,#b08d57,#8b6914);color:#fff;
  box-shadow:0 3px 12px rgba(0,0,0,.2);padding:10px 28px;font-size:14px}
#wb-sig-btn-back{background:#ebebeb;color:#555}
#wb-sig-btn-save{background:linear-gradient(135deg,#b08d57,#8b6914);color:#fff}

/* ── Pad ─────────────────────────────────────────────────── */
#wb-sig-pad{display:none;margin-top:14px}
.wb-sig-pad-inner{background:#fff;border-radius:14px;padding:18px 16px 14px;
  box-shadow:0 6px 28px rgba(0,0,0,.18)}
.wb-sig-pad-title{text-align:center;font-size:15px;font-weight:600;
  color:#5a3e1b;margin-bottom:12px}
#wb-sig-canvas{display:block;width:100%;border:1.5px solid #d4b896;
  border-radius:8px;cursor:crosshair;touch-action:none}
.wb-sig-controls{display:flex;gap:8px;flex-wrap:wrap;
  justify-content:center;margin-top:10px}
#wb-sig-btn-clear{background:#f0e6d8;color:#7a5230}
#wb-sig-btn-pos{background:linear-gradient(135deg,#5b9bd5,#2274b5);color:#fff}
#wb-sig-btn-cancel{background:#e8e8e8;color:#555}

/* ── Signature items ─────────────────────────────────────── */
.wb-sig-item{position:absolute;transform-origin:center center;opacity:0}
.wb-sig-item img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.18))}

/* Pending: hiển thị ngay, không animation */
.wb-sig-item.pending{
  opacity:1 !important;
  animation:none !important;
  cursor:grab;z-index:20;touch-action:none;
  outline:2px dashed rgba(176,141,87,.75);outline-offset:3px;border-radius:4px}
.wb-sig-item.pending:active,.wb-sig-item.dragging{cursor:grabbing}
.wb-sig-item.admin-mode{cursor:grab;touch-action:none}

/* ── Hint di theo chữ ký ─────────────────────────────────── */
.wb-sig-drag-hint{
  position:absolute;bottom:calc(100% + 6px);left:50%;
  transform:translateX(-50%);
  background:rgba(0,0,0,.56);color:#fff;
  font-size:11px;padding:5px 12px;border-radius:12px;
  white-space:nowrap;pointer-events:none;
  opacity:1;transition:opacity .35s;z-index:21}
.wb-sig-drag-hint-out{opacity:0}

/* ── Delete button (admin) ───────────────────────────────── */
.wb-sig-del-btn{display:none;position:absolute;top:-9px;right:-9px;
  width:22px;height:22px;border-radius:50%;background:#e53935;color:#fff;
  border:none;font-size:11px;line-height:22px;text-align:center;
  cursor:pointer;z-index:5;padding:0;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.wb-sig-item.admin-mode .wb-sig-del-btn{display:block}

/* ── Fade-in for state transitions ──────────────────────── */
.wb-sig-fadein{animation:wbSigFadeIn .25s ease both}
@keyframes wbSigFadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* ── Save button bounce — gây chú ý người dùng ─────────── */
@keyframes wbSigBtnBounce{
  0%,100%{ transform:scale(1) translateY(0);
           box-shadow:0 3px 12px rgba(0,0,0,.2); }
  30%    { transform:scale(1.12) translateY(-5px);
           box-shadow:0 10px 24px rgba(176,141,87,.65); }
  55%    { transform:scale(1.06) translateY(-2px);
           box-shadow:0 6px 16px rgba(176,141,87,.4); }
  80%    { transform:scale(1.1) translateY(-4px);
           box-shadow:0 9px 22px rgba(176,141,87,.55); }
}
#wb-sig-btn-save.wb-sig-btn-bounce{
  animation:wbSigBtnBounce .95s ease-in-out infinite;
}

/* ── Firework / sparkle glow reveal animation ────────────── */
@keyframes wbSigFirework {
  0%  { opacity:0; transform:scale(.12);
        filter:brightness(6) drop-shadow(0 0 2px rgba(255,230,120,0)); }
  16% { opacity:1; transform:scale(1.28);
        filter:brightness(3.5)
               drop-shadow(0 0 28px rgba(255,225,80,1))
               drop-shadow(0 0 12px rgba(255,255,180,.95)); }
  38% { transform:scale(.91);
        filter:brightness(1.8)
               drop-shadow(0 0 18px rgba(255,200,60,.65)); }
  58% { transform:scale(1.07);
        filter:brightness(1.3)
               drop-shadow(0 0 10px rgba(255,180,40,.35)); }
  76% { transform:scale(.98);
        filter:brightness(1.07)
               drop-shadow(0 0 4px rgba(255,165,30,.15)); }
  100%{ opacity:1; transform:scale(1);
        filter:drop-shadow(0 2px 8px rgba(0,0,0,.18)); }
}
.wb-sig-firework{
  animation-name:wbSigFirework;
  animation-duration:.9s;
  animation-fill-mode:forwards;
  animation-timing-function:cubic-bezier(.22,.68,0,1.2);
}

/* ── Grand entrance — chữ ký mới lưu xong ───────────────── */
@keyframes wbSigGrand{
  0%  { opacity:0; transform:scale(.08);
        filter:brightness(8) drop-shadow(0 0 0px rgba(255,230,120,0)); }
  12% { opacity:1; transform:scale(1.55);
        filter:brightness(5.5)
               drop-shadow(0 0 60px rgba(255,225,80,1))
               drop-shadow(0 0 30px rgba(255,255,210,1)); }
  26% { transform:scale(.87);
        filter:brightness(3.2) drop-shadow(0 0 42px rgba(255,210,70,.92)); }
  42% { transform:scale(1.22);
        filter:brightness(2.4) drop-shadow(0 0 30px rgba(255,200,60,.78)); }
  58% { transform:scale(.95);
        filter:brightness(1.7) drop-shadow(0 0 20px rgba(255,185,45,.55)); }
  72% { transform:scale(1.1);
        filter:brightness(1.35) drop-shadow(0 0 12px rgba(255,175,35,.35)); }
  86% { transform:scale(.99);
        filter:brightness(1.08) drop-shadow(0 0 5px rgba(255,165,30,.15)); }
  100%{ opacity:1; transform:scale(1);
        filter:drop-shadow(0 2px 8px rgba(0,0,0,.18)); }
}
.wb-sig-grand{
  animation-name:wbSigGrand;
  animation-duration:2s;
  animation-fill-mode:forwards;
  animation-timing-function:cubic-bezier(.2,.65,0,1.15);
}

/* ── Grand bloom ripple ──────────────────────────────────── */
@keyframes wbSigBloom1{
  0%  {transform:scale(1);  opacity:.6; filter:blur(1px) brightness(3);}
  100%{transform:scale(4.5);opacity:0;  filter:blur(22px) brightness(1);}
}
@keyframes wbSigBloom2{
  0%  {transform:scale(1);  opacity:.35;filter:blur(4px) brightness(2);}
  100%{transform:scale(7);  opacity:0;  filter:blur(35px) brightness(1);}
}
.wb-sig-bloom{
  position:absolute;pointer-events:none;transform-origin:center center;z-index:25;
}
.wb-sig-bloom img{width:100%;height:auto;display:block;}
.wb-sig-bloom.b1{animation:wbSigBloom1 1s cubic-bezier(.1,.5,.4,1) forwards;}
.wb-sig-bloom.b2{animation:wbSigBloom2 1.7s cubic-bezier(.1,.5,.4,1) forwards;}

/* ── Idle pop — biến mất rồi ngay lập tức bùng lên ─────── */
@keyframes wbSigIdlePop{
  0%  { opacity:1; transform:scale(1);    filter:drop-shadow(0 2px 8px rgba(0,0,0,.18)); }
  10% { opacity:0; transform:scale(.4);   filter:none; }
  14% { opacity:0; transform:scale(.12);  filter:brightness(6) drop-shadow(0 0 2px rgba(255,230,120,0)); }
  34% { opacity:1; transform:scale(1.28);
        filter:brightness(3.5)
               drop-shadow(0 0 28px rgba(255,225,80,1))
               drop-shadow(0 0 12px rgba(255,255,180,.95)); }
  54% { transform:scale(.91);
        filter:brightness(1.8) drop-shadow(0 0 18px rgba(255,200,60,.65)); }
  70% { transform:scale(1.07);
        filter:brightness(1.3) drop-shadow(0 0 10px rgba(255,180,40,.35)); }
  84% { transform:scale(.98);
        filter:brightness(1.07) drop-shadow(0 0 4px rgba(255,165,30,.15)); }
  100%{ opacity:1; transform:scale(1);    filter:drop-shadow(0 2px 8px rgba(0,0,0,.18)); }
}
.wb-sig-idle-pop{
  animation:wbSigIdlePop 1.3s cubic-bezier(.22,.68,0,1.2);
}

/* ── Custom popup ────────────────────────────────────────── */
#wbSig2Overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);
  z-index:999999;display:none;align-items:center;justify-content:center}
#wbSig2Overlay.visible{display:flex}
.wbSig2-box{background:#fff;border-radius:18px;padding:32px 26px 24px;
  max-width:320px;width:90%;text-align:center;
  box-shadow:0 16px 48px rgba(0,0,0,.26)}
.wbSig2-icon{font-size:38px;margin-bottom:10px}
.wbSig2-msg{font-size:15px;color:#333;margin-bottom:22px;line-height:1.5}
.wbSig2-btns{display:flex;gap:10px;justify-content:center}
.wbSig2-btn{border:none;border-radius:22px;padding:9px 26px;
  font-size:14px;cursor:pointer;transition:opacity .15s}
.wbSig2-btn:hover{opacity:.85}
.wbSig2-btn-ok{background:linear-gradient(135deg,#b08d57,#8b6914);color:#fff}
.wbSig2-btn-cancel{background:#ebebeb;color:#555}