/* The platform's confirmation takeover + busy button (assets/js/shared/confirm-takeover.js).
 * Same shape as the quote (sent / converted), billing (published) and Create
 * Order takeovers: full screen, the large circle-check drawing itself, a big
 * title, one line, then it clears. */

.ps-takeover { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; cursor: pointer;
               font-family: 'Montserrat', sans-serif; animation: psto-in .25s ease-out; }
.ps-takeover.green  { background: linear-gradient(135deg, #059669, #166534); }
.ps-takeover.purple { background: linear-gradient(135deg, #7c3aed, #5b21b6); }
.ps-takeover.out { animation: psto-out .45s ease-in forwards; }
.ps-to-in { text-align: center; color: #fff; padding: 0 16px; animation: psto-pop .45s cubic-bezier(.2, 1.4, .4, 1) .1s backwards; }
.ps-to-ic { display: block; width: 132px; height: 132px; margin: 0 auto 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ps-to-ic path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ps-to-ic .c { animation: psto-draw .55s ease-out .2s forwards; }
.ps-to-ic .k { animation: psto-draw .35s ease-out .7s forwards; }
.ps-takeover h1 { margin: 0; font-size: 2.4rem; font-weight: 800; letter-spacing: -.01em; color: #fff; }
.ps-takeover .sub { margin: 10px auto 0; max-width: 560px; font-size: 1rem; font-weight: 600; opacity: .9; line-height: 1.5; }
@keyframes psto-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes psto-out  { to { opacity: 0; } }
@keyframes psto-pop  { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: scale(1); } }
@keyframes psto-draw { to { stroke-dashoffset: 0; } }
@media (max-width: 560px) { .ps-takeover h1 { font-size: 1.8rem; } .ps-to-ic { width: 104px; height: 104px; } }

/* a button that is working: the label gives way to a spinner */
.ps-busy { position: relative !important; pointer-events: none; color: transparent !important; }
.ps-busy > * { visibility: hidden; }
.ps-busy::after { content: ''; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
                  border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: psspin .7s linear infinite; }
.ps-busy.dark::after { border-color: rgba(124, 58, 237, .25); border-top-color: #7c3aed; }
@keyframes psspin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .ps-takeover, .ps-to-in { animation: none; }
    .ps-to-ic path { animation: none; stroke-dashoffset: 0; }
}