/* css/207-pay-success-motion.css — คู่กับ js/207 · โทนป่า มิ้นต์ ทอง */
html.tpw-lock{overflow:hidden}
.tpw-ov{position:fixed;inset:0;z-index:30500;display:grid;place-items:center;padding:20px;background:rgba(1,7,13,.70);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);opacity:0;transition:opacity .25s}
.tpw-ov.show{opacity:1}
.tpw-ov.closing{opacity:0;transition:opacity .28s ease-in}
.tpw-box{width:min(340px,100%);padding:22px 18px 18px;border-radius:24px;text-align:center;color:#fff;background:linear-gradient(180deg,rgba(3,12,18,.84),rgba(2,10,15,.96)),url('/ximg.php?f=1448375240586-882707db888b-900.jpg') center/cover no-repeat;border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 70px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.035);transform:translateY(18px) scale(.96);transition:transform .45s cubic-bezier(.2,.9,.25,1)}
.tpw-ov.show .tpw-box{transform:none}
.tpw-ov.closing .tpw-box{transform:translateY(-8px) scale(.97);transition:transform .28s ease-in}
.tpw-box h3{margin:0 0 12px;font-size:19px;font-weight:800}
.tpw-steps{list-style:none;margin:16px 4px 0;padding:0;text-align:left;display:grid;gap:10px}
.tpw-steps li{display:flex;align-items:center;gap:10px;font-size:14px;color:#6f857b;transition:color .3s}
.tpw-steps li b{font-weight:600}
.tpw-steps li.on{color:#fff}
.tpw-steps li.done{color:#cfe0d8}
.tpw-dot{flex:none;width:22px;height:22px}
.tpw-dot svg{display:block;width:100%;height:100%;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tpw-dot .r{stroke:rgba(255,255,255,.18);stroke-width:1.6}
.tpw-dot .c{stroke:#07110d;stroke-width:2.4;stroke-dasharray:14;stroke-dashoffset:14}
.tpw-steps li.on .r{stroke:#3ddc97;stroke-width:2;stroke-dasharray:38 16;transform-origin:10px 10px;animation:tpwSpin .9s linear infinite}
.tpw-steps li.done .r{stroke:#3ddc97;fill:#3ddc97;transition:fill .25s}
.tpw-steps li.done .c{stroke-dashoffset:0;transition:stroke-dashoffset .35s .1s ease-out}
@keyframes tpwSpin{to{transform:rotate(360deg)}}
.tpw-steps li{opacity:0;animation:tpwUp .45s cubic-bezier(.2,.8,.2,1) both}
.tpw-steps li:nth-child(1){animation-delay:.15s}.tpw-steps li:nth-child(2){animation-delay:.22s}.tpw-steps li:nth-child(3){animation-delay:.29s}
@keyframes tpwUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tpw-note{margin:14px 0 0;font-size:12px;color:#9fb3aa}

/* สลิปไม่ผ่าน */
.tpw-steps li.bad{color:#fca5a5}
.tpw-steps li.bad .r{stroke:#f87171;fill:rgba(248,113,113,.15);animation:none}
.tpw-steps li.bad .c{stroke:#f87171;stroke-dasharray:none;stroke-dashoffset:0}
.tpw-steps li.skip{opacity:.35!important}
.tpw-ov.failed .tpw-box{animation:tpwShake .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes tpwShake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.tpw-ov.failed .tcl{filter:saturate(.5) brightness(.8);transition:filter .4s}
.tpw-ov.failed .tcl *{animation-play-state:paused!important}
.tpw-fail{margin-top:14px;text-align:left;animation:tpwUp .4s .15s cubic-bezier(.2,.8,.2,1) both}
.tpw-why{margin:0;padding:12px 14px;border-radius:14px;background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.28)}
.tpw-why b{display:block;font-size:14.5px;color:#fecaca;margin-bottom:3px}
.tpw-why span{font-size:12.5px;line-height:1.5;color:#cfe0d8}.tpw-why span b{display:inline;color:#f5c84c;font-size:inherit}
.tpw-keep{margin:10px 2px 0;font-size:12.5px;color:#9fb3aa}.tpw-keep b{color:#f5c84c}
.tpw-btn{all:unset;box-sizing:border-box;display:block;width:100%;margin-top:12px;padding:13px;border-radius:14px;text-align:center;font-weight:800;font-size:15px;color:#06140d;background:#3ddc97;cursor:pointer}
.tpw-link{display:block;margin-top:10px;text-align:center;font-size:12.5px;color:#9fb3aa;text-decoration:underline;text-underline-offset:2px}
@media (prefers-reduced-motion:reduce){.tpw-steps li.on .r{animation:none}}

/* ---------- สวิตช์แอดมินจองเอง (หน้าชำระเงิน) ---------- */
.tpa-switch{display:flex;align-items:center;gap:12px;margin:14px 0 4px;padding:12px 14px;border-radius:16px;text-align:left;cursor:pointer;background:rgba(245,200,76,.07);border:1px dashed rgba(245,200,76,.45)}
.tpa-switch input{position:absolute;opacity:0;pointer-events:none}
.tpa-tg{flex:none;position:relative;width:42px;height:24px;border-radius:99px;background:rgba(255,255,255,.14);transition:background .2s}
.tpa-tg i{position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.tpa-switch input:checked+.tpa-tg{background:#f5c84c}
.tpa-switch input:checked+.tpa-tg i{transform:translateX(18px)}
.tpa-switch input:focus-visible+.tpa-tg{outline:2px solid #3ddc97;outline-offset:2px}
.tpa-tx b{display:block;font-size:14px;color:#f5c84c}
.tpa-tx small{display:block;margin-top:2px;font-size:11.5px;line-height:1.4;color:#9fb3aa}
.pay-modal.tpa-on :is(#depositPaymentQr,.bank-shortcut-box,.slip-upload,.pay-box>.sub){display:none!important}