/* ==========================================================
   Parcel Empire Phase 9.3 — Purchase Flow + Confirmation
   ========================================================== */

.pePurchaseConfirm{
    position:fixed;
    inset:0;
    z-index:220!important;
    display:grid;
    place-items:center;
    padding:clamp(14px,3vw,34px);
    background:
        radial-gradient(circle at 50% 38%,rgba(29,229,255,.12),transparent 38%),
        rgba(2,10,19,.78);
    backdrop-filter:blur(12px) saturate(1.15);
    -webkit-backdrop-filter:blur(12px) saturate(1.15);
}
.pePurchaseConfirm[hidden]{display:none!important}

.pePurchaseCard{
    width:min(760px,calc(100vw - 28px));
    max-height:min(820px,calc(100dvh - 28px));
    overflow:auto;
    padding:26px;
    border:1px solid rgba(72,210,255,.28);
    border-radius:28px;
    background:
        linear-gradient(145deg,rgba(15,39,58,.98),rgba(5,20,34,.99)),
        #091928;
    box-shadow:0 28px 90px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.025) inset;
    color:#f5fbff;
    transform-origin:center;
    animation:peConfirmEnter .25s cubic-bezier(.2,.75,.25,1);
}

@keyframes peConfirmEnter{
    from{opacity:0;transform:translateY(18px) scale(.97)}
    to{opacity:1;transform:translateY(0) scale(1)}
}

.pePurchaseCard.is-purchasing{
    pointer-events:none;
}
.pePurchaseCard.is-purchasing::after{
    content:"Securing parcel…";
    position:sticky;
    bottom:10px;
    display:block;
    width:max-content;
    margin:14px auto 0;
    padding:8px 13px;
    border-radius:999px;
    background:rgba(3,15,26,.92);
    border:1px solid rgba(41,230,255,.25);
    color:#bcefff;
    font-size:12px;
    font-weight:800;
    letter-spacing:.04em;
}

.peConfirmHeading{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    padding-right:34px;
}
.peConfirmHeading h2{
    margin:5px 0 5px;
    font-size:clamp(28px,4vw,42px);
    line-height:1;
    letter-spacing:-.035em;
}
.peConfirmHeading p{
    margin:0;
    color:#a8bdcc;
    font-size:14px;
    line-height:1.55;
}
.peConfirmBadges{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:7px;
}
.peConfirmBadge{
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:0 10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.055);
    color:#d5e8f4;
    font-size:11px;
    font-weight:900;
    letter-spacing:.045em;
    text-transform:uppercase;
    white-space:nowrap;
}
.peConfirmBadge.available{
    border-color:rgba(32,232,120,.35);
    background:rgba(32,232,120,.1);
    color:#77f0ae;
}
.peConfirmBadge.gps{
    border-color:rgba(41,230,255,.35);
    background:rgba(41,230,255,.09);
    color:#83efff;
}
.peConfirmBadge.blocked{
    border-color:rgba(255,103,103,.38);
    background:rgba(255,103,103,.1);
    color:#ff9d9d;
}

.peConfirmMain{
    display:grid;
    grid-template-columns:minmax(220px,.8fr) minmax(310px,1.2fr);
    gap:20px;
    margin-top:22px;
}

.peConfirmPreview{
    position:relative;
    min-height:270px;
    overflow:hidden;
    display:grid;
    place-items:center;
    border:1px solid rgba(71,209,255,.18);
    border-radius:22px;
    background:
        radial-gradient(circle at 50% 36%,rgba(48,228,139,.22),transparent 32%),
        linear-gradient(155deg,#17364a,#071827 68%);
    box-shadow:0 12px 32px rgba(0,0,0,.26) inset;
}
.peConfirmPreview::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.045) 45%,transparent 65%);
    transform:translateX(-100%);
    animation:pePreviewScan 2.7s ease-in-out infinite;
}
@keyframes pePreviewScan{
    0%,35%{transform:translateX(-110%)}
    75%,100%{transform:translateX(110%)}
}

.peConfirmPreviewGrid{
    width:182px;
    height:182px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    transform:rotateX(58deg) rotateZ(-45deg);
    transform-style:preserve-3d;
    filter:drop-shadow(0 22px 18px rgba(0,0,0,.35));
}
.peConfirmPreviewGrid span{
    position:relative;
    border:1px solid rgba(145,225,255,.34);
    background:linear-gradient(145deg,rgba(66,134,115,.44),rgba(26,70,72,.5));
}
.peConfirmPreviewGrid span.selected{
    z-index:2;
    border-color:#51f3a0;
    background:linear-gradient(145deg,#61ca75,#24874c);
    box-shadow:0 0 0 2px rgba(81,243,160,.24),0 0 25px rgba(40,232,124,.5);
    transform:translateZ(9px);
}
.peConfirmPreviewGrid span.selected i{
    position:absolute;
    inset:28%;
    border-radius:50%;
    background:#d8fff0;
    box-shadow:0 0 16px #75f4b0;
}
.peConfirmMystery{
    position:absolute;
    width:62px;
    height:62px;
    display:grid;
    place-items:center;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.28);
    background:linear-gradient(145deg,#36e68b,#129555);
    box-shadow:0 12px 30px rgba(0,0,0,.35),0 0 22px rgba(37,230,126,.35);
    color:white;
    font-size:34px;
    font-weight:950;
    transform:translateY(-12px);
}
.peConfirmPreview small{
    position:absolute;
    left:15px;
    right:15px;
    bottom:13px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-align:center;
    color:#b9d5e4;
    font-size:11px;
    font-weight:800;
    letter-spacing:.04em;
}

.peConfirmDetails{
    min-width:0;
}
.peConfirmLocation{
    padding:13px 15px;
    border:1px solid rgba(255,255,255,.085);
    border-radius:16px;
    background:rgba(255,255,255,.035);
}
.peConfirmLocation span{
    display:block;
    margin-bottom:3px;
    color:#7f9aae;
    font-size:10px;
    font-weight:900;
    letter-spacing:.09em;
    text-transform:uppercase;
}
.peConfirmLocation strong{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#f5fbff;
    font-size:15px;
}

.peConfirmStats{
    grid-template-columns:repeat(2,minmax(0,1fr));
    margin-top:12px;
    gap:9px;
}
.peConfirmStats div{
    min-height:68px;
    padding:11px 12px;
    border:1px solid rgba(255,255,255,.075);
    border-radius:14px;
    background:rgba(1,11,20,.32);
}
.peConfirmStats span{
    color:#7f9aae;
    font-size:9px;
    letter-spacing:.08em;
}
.peConfirmStats strong{
    margin-top:5px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#f6fbff;
    font-size:13px;
}
.peConfirmStats strong.positive{color:#55e999}
.peConfirmStats strong.warning{color:#ffd177}
.peMysteryValue{color:#d49cff!important}

.peConfirmWarning{
    margin-top:15px;
    padding:11px 13px;
    border:1px solid rgba(255,119,119,.3);
    border-radius:13px;
    background:rgba(255,89,89,.085);
    color:#ffb1b1;
    font-size:13px;
    font-weight:750;
    line-height:1.45;
}
.peConfirmWarning[hidden]{display:none!important}
.peConfirmLegal{
    margin:13px 2px 0;
    color:#7892a6!important;
    font-size:10px!important;
    line-height:1.5!important;
}

.peConfirmActions{
    display:grid;
    grid-template-columns:minmax(140px,.65fr) minmax(190px,1fr);
    gap:11px;
    margin-top:17px;
}
.peConfirmActions button{
    min-height:50px;
    border-radius:14px!important;
    font-weight:900!important;
}
.peConfirmBuyButton{
    position:relative;
    display:flex!important;
    align-items:center;
    justify-content:center;
    gap:9px;
    box-shadow:0 10px 25px rgba(23,207,105,.2);
}
.peConfirmBuyButton:disabled{
    opacity:.48;
    filter:saturate(.45);
    box-shadow:none;
    cursor:not-allowed;
}
.peConfirmSpinner{
    width:16px;
    height:16px;
    display:none;
    border:2px solid rgba(255,255,255,.35);
    border-top-color:#fff;
    border-radius:50%;
    animation:peSpin .7s linear infinite;
}
.is-purchasing .peConfirmSpinner{display:block}
@keyframes peSpin{to{transform:rotate(360deg)}}

.pePurchaseConfirm .confirmClose{
    top:15px;
    right:15px;
    width:36px;
    height:36px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.1);
    background:rgba(255,255,255,.045);
    color:#d9e8f2;
}
.pePurchaseConfirm .confirmClose:hover{background:rgba(255,255,255,.09)}

@media (max-width:720px){
    .pePurchaseConfirm{
        align-items:end;
        padding:0;
        background:rgba(2,10,19,.7);
    }
    .pePurchaseCard{
        width:100%;
        max-height:91dvh;
        border-radius:27px 27px 0 0;
        border-left:0;
        border-right:0;
        border-bottom:0;
        padding:21px 16px calc(18px + env(safe-area-inset-bottom));
        animation:peConfirmMobileEnter .28s cubic-bezier(.2,.78,.25,1);
    }
    @keyframes peConfirmMobileEnter{
        from{opacity:0;transform:translateY(55px)}
        to{opacity:1;transform:translateY(0)}
    }
    .peConfirmHeading{display:block;padding-right:34px}
    .peConfirmHeading h2{font-size:29px}
    .peConfirmBadges{justify-content:flex-start;margin-top:11px}
    .peConfirmMain{grid-template-columns:1fr;gap:12px;margin-top:14px}
    .peConfirmPreview{min-height:175px}
    .peConfirmPreviewGrid{width:132px;height:132px}
    .peConfirmMystery{width:51px;height:51px;font-size:28px;border-radius:15px}
    .peConfirmStats{grid-template-columns:repeat(2,minmax(0,1fr))}
    .peConfirmStats div{min-height:61px;padding:9px 10px}
    .peConfirmActions{position:sticky;bottom:0;padding-top:10px;background:linear-gradient(transparent,rgba(5,20,34,.98) 26%)}
}

@media (max-width:420px){
    .peConfirmStats strong{font-size:12px}
    .peConfirmActions{grid-template-columns:.75fr 1.25fr}
    .peConfirmActions button{min-width:0;padding-left:9px!important;padding-right:9px!important;font-size:12px!important}
}

@media (prefers-reduced-motion:reduce){
    .pePurchaseCard,.peConfirmPreview::before,.peConfirmSpinner{animation:none!important}
}