/* =========================================================
   SweetAlert – Neon / Glassmorphism Theme (Standalone)
   ใช้แทนไฟล์เดิมได้เลย ไม่พึ่งพา CSS เก่า
   ========================================================= */

/* ---------- Design tokens ---------- */
:root{
  --sa-bg: #0b0d12;
  --sa-card: rgba(17,19,29,.86);
  --sa-stroke: rgba(255,255,255,.08);
  --sa-accent: #a172ff;      /* ม่วงนีออน */
  --sa-accent-2: #5be1ff;    /* ฟ้านีออน */
  --sa-success: #7af8d1;
  --sa-error-1: #ff6b8b;
  --sa-error-2: #ffb199;
  --sa-warn-1: #ffd86b;
  --sa-warn-2: #ff8f6b;
  --sa-text: #e8e8f3;
  --sa-sub: #9aa3b2;
  --sa-shadow: 0 10px 50px rgba(161,114,255,.25),
               0 10px 60px rgba(91,225,255,.18);
  --sa-radius: 18px;
}

/* ---------- Prevent body scroll when open ---------- */
body.stop-scrolling{height:100%;overflow:hidden}

/* ---------- Overlay ---------- */
.sweet-overlay{
  position:fixed; inset:0; z-index:10000; display:none;
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(161,114,255,.18), transparent 60%),
    radial-gradient(900px 700px at 120% 120%, rgba(91,225,255,.12), transparent 50%),
    rgba(4,6,10,.72);
  backdrop-filter: blur(4px);
}

/* ---------- Dialog ---------- */
.sweet-alert{
  position:fixed; z-index:99999; left:50%; top:50%;
  transform: translate(-50%,-50%);
  width:min(560px,92vw);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)) padding-box,
    linear-gradient(135deg, rgba(161,114,255,.55), rgba(91,225,255,.35)) border-box;
  border:1px solid transparent;
  border-radius: var(--sa-radius);
  color: var(--sa-text);
  box-shadow: var(--sa-shadow);
  backdrop-filter: blur(14px) saturate(120%);
  padding:28px 26px 26px;
  display:none;
  text-align:center;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Open Sans", sans-serif;
}

/* Title / text */
.sweet-alert h2{
  margin:8px 0 10px; padding:0;
  font-size:28px; font-weight:700; line-height:1.25;
  letter-spacing:.2px; color:var(--sa-text);
  text-shadow:0 0 20px rgba(161,114,255,.28);
}
.sweet-alert p{
  margin:0; color:var(--sa-sub); font-size:15px; font-weight:400;
}

/* Fieldset */
.sweet-alert fieldset{border:none;position:relative}

/* Input */
.sweet-alert input{
  display:none; width:100%; height:44px; margin:12px 0 6px; padding:0 14px;
  border-radius:12px; border:1px solid var(--sa-stroke); box-sizing:border-box;
  background: rgba(255,255,255,.06); color:var(--sa-text);
  box-shadow: inset 0 0 0 1px rgba(161,114,255,.08);
  transition: border .2s, box-shadow .2s, background .2s;
}
.sweet-alert.show-input input{display:block}
.sweet-alert input:focus{
  outline:0;
  border-color: rgba(161,114,255,.6);
  box-shadow: 0 0 0 3px rgba(161,114,255,.18), inset 0 0 0 1px rgba(91,225,255,.2);
}

/* Error container */
.sweet-alert .sa-error-container{
  background: rgba(255, 92, 92, .08);
  margin: 0 -10px; padding: 0 10px;
  border-radius:12px; overflow:hidden;
  max-height:0; transition: padding .25s, max-height .25s;
}
.sweet-alert .sa-error-container.show{
  padding:10px 10px; max-height:120px;
}
.sweet-alert .sa-error-container .icon{
  display:inline-block;width:24px;height:24px;line-height:24px;text-align:center;
  border-radius:50%; background:#ea7d7d; color:#fff; margin-right:6px;
}

/* ---------- Icon Base ---------- */
.sweet-alert .sa-icon{
  width:80px; height:80px; margin:18px auto 14px; border-radius:50%;
  border:2px solid rgba(255,255,255,.14);
  background: radial-gradient(circle at 30% 30%, rgba(161,114,255,.18), rgba(91,225,255,.12) 60%, transparent 70%);
  box-shadow: 0 10px 30px rgba(161,114,255,.25), inset 0 0 18px rgba(255,255,255,.06);
  position:relative; box-sizing:content-box;
}

/* Success */
.sweet-alert .sa-icon.sa-success{ border-color: rgba(110,255,200,.65); }
.sweet-alert .sa-icon.sa-success .sa-placeholder{
  display:none; /* hide legacy ring */
}
.sweet-alert .sa-icon.sa-success .sa-line{
  position:absolute; height:6px; background: linear-gradient(90deg, var(--sa-success), var(--sa-accent-2));
  border-radius:3px; display:block; z-index:2; box-shadow:0 0 16px rgba(122,248,209,.7);
}
.sweet-alert .sa-icon.sa-success .sa-tip{ width:25px; left:14px; top:46px; transform: rotate(45deg); }
.sweet-alert .sa-icon.sa-success .sa-long{ width:47px; right:8px; top:38px; transform: rotate(-45deg); }

/* Error */
.sweet-alert .sa-icon.sa-error{ border-color: rgba(255,120,140,.7); }
.sweet-alert .sa-icon.sa-error .sa-x-mark{position:relative;display:block}
.sweet-alert .sa-icon.sa-error .sa-line{
  position:absolute;width:47px;height:6px;top:37px;border-radius:3px;
  background: linear-gradient(90deg, var(--sa-error-1), var(--sa-error-2));
  box-shadow:0 0 16px rgba(255,107,139,.7);
}
.sweet-alert .sa-icon.sa-error .sa-left{transform:rotate(45deg); left:17px}
.sweet-alert .sa-icon.sa-error .sa-right{transform:rotate(-45deg); right:16px}

/* Warning */
.sweet-alert .sa-icon.sa-warning{ border-color: rgba(255,190,120,.7); }
.sweet-alert .sa-icon.sa-warning .sa-body{
  position:absolute; left:50%; top:10px; width:6px; height:47px; margin-left:-3px;
  background: linear-gradient(180deg, var(--sa-warn-1), var(--sa-warn-2));
  border-radius:3px; box-shadow:0 0 14px rgba(255,170,90,.7);
}
.sweet-alert .sa-icon.sa-warning .sa-dot{
  position:absolute; left:50%; bottom:10px; width:8px; height:8px; margin-left:-4px;
  background: linear-gradient(180deg, var(--sa-warn-1), var(--sa-warn-2));
  border-radius:50%; box-shadow:0 0 14px rgba(255,170,90,.7);
}

/* Info */
.sweet-alert .sa-icon.sa-info{ border-color: rgba(140, 210, 255, .6); }
.sweet-alert .sa-icon.sa-info::before,
.sweet-alert .sa-icon.sa-info::after{
  content:""; position:absolute; left:50%;
  background: linear-gradient(180deg, var(--sa-accent-2), var(--sa-accent));
  box-shadow:0 0 14px rgba(91,225,255,.7); border-radius:3px;
}
.sweet-alert .sa-icon.sa-info::before{ width:6px; height:29px; bottom:17px; margin-left:-3px; }
.sweet-alert .sa-icon.sa-info::after{ width:8px; height:8px; top:19px; margin-left:-4px; border-radius:50%; }

/* Custom image icon keeps center/contain */
.sweet-alert .sa-icon.sa-custom{background-position:center;background-repeat:no-repeat;background-size:contain;border:none;border-radius:0}

/* Loading dots */
.la-ball-fall, .la-ball-fall>div{position:relative;box-sizing:border-box}
.la-ball-fall{display:block;width:54px;height:18px;margin:0 auto;color:var(--sa-accent);font-size:0}
.la-ball-fall>div{display:inline-block;width:10px;height:10px;margin:4px;border-radius:100%;opacity:0;animation: ball-fall 1s ease-in-out infinite;background:currentColor}
.la-ball-fall>div:nth-child(1){animation-delay:-.2s}
.la-ball-fall>div:nth-child(2){animation-delay:-.1s}
@keyframes ball-fall{
  0%{opacity:0; transform:translateY(-145%)}
  20%,80%{opacity:1; transform:translateY(0)}
  100%{opacity:0; transform:translateY(145%)}
}

/* ---------- Buttons ---------- */
.sweet-alert .sa-confirm-button-container{display:inline-block; position:relative}
.sweet-alert button{
  border:none; cursor:pointer; border-radius:12px; padding:10px 20px;
  font-size:16px; font-weight:600; letter-spacing:.2px; margin:26px 6px 0;
  transition: filter .2s, box-shadow .2s, transform .06s;
}
.sweet-alert button:focus{outline:none}

.sweet-alert button.confirm{
  background: linear-gradient(180deg, rgba(161,114,255,.95), rgba(91,225,255,.92));
  color:#0b0d12; text-shadow:none;
  box-shadow: 0 10px 24px rgba(161,114,255,.35), 0 8px 30px rgba(91,225,255,.22);
}
.sweet-alert button.confirm:hover{ filter:brightness(1.06);
  box-shadow:0 14px 30px rgba(161,114,255,.45), 0 10px 36px rgba(91,225,255,.28) }
.sweet-alert button.confirm:active{ transform: translateY(1px) }

.sweet-alert button.cancel{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  color: var(--sa-text);
  border:1px solid var(--sa-stroke);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.sweet-alert button.cancel:hover{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
}

/* ---------- Animations ---------- */
.showSweetAlert[data-animation=pop]{animation: sa-pop .32s cubic-bezier(.2,.8,.2,1)}
.hideSweetAlert[data-animation=pop]{animation: sa-hide .22s cubic-bezier(.2,.8,.2,1)}
.showSweetAlert[data-animation=slide-from-top]{animation: sa-slide-in .28s ease}
.hideSweetAlert[data-animation=slide-from-top]{animation: sa-slide-out .32s ease}

@keyframes sa-pop{
  0%{transform: translate(-50%,-56%) scale(.92); opacity:.6}
  60%{transform: translate(-50%,-50%) scale(1.02); opacity:1}
  100%{transform: translate(-50%,-50%) scale(1)}
}
@keyframes sa-hide{
  to{transform: translate(-50%,-56%) scale(.96); opacity:0}
}
@keyframes sa-slide-in{
  0%{top:0%; opacity:0; transform: translate(-50%,0) scale(.98)}
  100%{top:50%; opacity:1; transform: translate(-50%,-50%) scale(1)}
}
@keyframes sa-slide-out{
  0%{top:50%; opacity:1}
  100%{top:0%; opacity:0}
}

/* ---------- Responsive ---------- */
@media (max-width:540px){
  .sweet-alert{ padding:22px 18px 18px; border-radius:16px }
  .sweet-alert h2{ font-size:22px; line-height:30px }
}