/* ==========================================================================
   PREMIUM THEME LAYER — JHXPRO SHOP
   Pure addition layer. Does not remove/override any existing page styles,
   only adds premium animations, micro-interactions & polish on top.
   ========================================================================== */

:root{
    --jx-green:#10b981;
    --jx-green-dark:#059669;
    --jx-gold:#f59e0b;
    --jx-glass:rgba(255,255,255,.7);
}

/* ---------- Smooth global scrolling & selection ---------- */
html{ scroll-behavior:smooth; }
::selection{ background:var(--jx-green); color:#fff; }

/* Custom thin scrollbar */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:#f1f5f9; }
::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,#10b981,#059669); border-radius:10px; }

/* ---------- Page Preloader ---------- */
#jx-preloader{
    position:fixed; inset:0; z-index:99999;
    background:#ffffff;
    display:flex; align-items:center; justify-content:center;
    transition:opacity .5s ease, visibility .5s ease;
}
#jx-preloader.jx-hide{ opacity:0; visibility:hidden; pointer-events:none; }
.jx-loader-ring{
    position:relative; width:64px; height:64px;
}
.jx-loader-ring span{
    position:absolute; inset:0;
    border-radius:50%;
    border:3px solid transparent;
    border-top-color:var(--jx-green);
    animation:jx-spin 1s linear infinite;
}
.jx-loader-ring span:nth-child(2){
    inset:8px; border-top-color:var(--jx-gold);
    animation-duration:1.4s; animation-direction:reverse;
}
.jx-loader-ring span:nth-child(3){
    inset:16px; border-top-color:#34d399;
    animation-duration:.8s;
}
@keyframes jx-spin{ to{ transform:rotate(360deg); } }

/* ---------- Animated gradient blobs (premium ambience) ---------- */
.jx-blob-wrap{
    position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
}
.jx-blob{
    position:absolute; border-radius:50%;
    filter:blur(70px); opacity:.18;
    background:linear-gradient(135deg,#10b981,#34d399);
    animation:jx-float 14s ease-in-out infinite;
}
.jx-blob.b1{ width:380px; height:380px; top:-120px; left:-100px; }
.jx-blob.b2{ width:320px; height:320px; bottom:-100px; right:-80px; animation-delay:-5s; background:linear-gradient(135deg,#f59e0b,#fbbf24); }
.jx-blob.b3{ width:260px; height:260px; top:40%; right:20%; animation-delay:-9s; }
@keyframes jx-float{
    0%,100%{ transform:translate(0,0) scale(1); }
    33%{ transform:translate(30px,-40px) scale(1.08); }
    66%{ transform:translate(-25px,25px) scale(0.95); }
}
@media (max-width:768px){ .jx-blob-wrap{ display:none; } }

/* ---------- Scroll Reveal (AOS init handled in JS, this is fallback) ---------- */
[data-aos]{ }

/* ---------- Glass card utility ---------- */
.jx-glass{
    background:var(--jx-glass);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.6);
}

/* ---------- Ripple effect for premium buttons ---------- */
.jx-ripple{ position:relative; overflow:hidden; }
.jx-ripple-circle{
    position:absolute; border-radius:50%;
    background:rgba(255,255,255,.55);
    transform:scale(0);
    animation:jx-ripple-anim .6s ease-out;
    pointer-events:none;
}
@keyframes jx-ripple-anim{ to{ transform:scale(3); opacity:0; } }

/* ---------- Shimmer skeleton (for image/lazy loading) ---------- */
.jx-shimmer{
    background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 37%,#f1f5f9 63%);
    background-size:400% 100%;
    animation:jx-shimmer 1.4s ease infinite;
}
@keyframes jx-shimmer{ 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }

/* ---------- Soft pop-in for cards (used with IntersectionObserver) ---------- */
.jx-pop{
    opacity:0; transform:translateY(24px) scale(.98);
    transition:opacity .6s cubic-bezier(.21,.9,.32,1), transform .6s cubic-bezier(.21,.9,.32,1);
}
.jx-pop.jx-in{ opacity:1; transform:translateY(0) scale(1); }

/* ---------- Floating badge pulse (use on "live"/"new" indicators) ---------- */
.jx-pulse-dot{
    display:inline-block; width:8px; height:8px; border-radius:50%;
    background:var(--jx-green); position:relative;
}
.jx-pulse-dot::after{
    content:""; position:absolute; inset:0; border-radius:50%;
    background:var(--jx-green); animation:jx-pulse 1.6s ease-out infinite;
}
@keyframes jx-pulse{ 0%{transform:scale(1); opacity:.6;} 100%{transform:scale(2.6); opacity:0;} }

/* ---------- Gradient animated text (premium headings) ---------- */
.jx-gradient-text{
    background:linear-gradient(90deg,#10b981,#34d399,#059669,#10b981);
    background-size:300% auto;
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
    animation:jx-gradient-move 5s linear infinite;
}
@keyframes jx-gradient-move{ to{ background-position:300% center; } }

/* ---------- Toast notifications (premium) ---------- */
#jx-toast-wrap{
    position:fixed; top:80px; right:16px; z-index:99998;
    display:flex; flex-direction:column; gap:10px;
    max-width:320px;
}
.jx-toast{
    background:#fff; border-left:4px solid var(--jx-green);
    box-shadow:0 12px 30px rgba(15,23,42,.12);
    border-radius:12px; padding:12px 16px;
    font-family:'Outfit',sans-serif; font-size:.85rem; color:#1e293b;
    display:flex; align-items:center; gap:10px;
    animation:jx-toast-in .4s cubic-bezier(.21,.9,.32,1);
}
.jx-toast i{ color:var(--jx-green); font-size:1.1rem; }
@keyframes jx-toast-in{ from{ opacity:0; transform:translateX(40px);} to{ opacity:1; transform:translateX(0);} }
.jx-toast.jx-out{ animation:jx-toast-out .35s ease forwards; }
@keyframes jx-toast-out{ to{ opacity:0; transform:translateX(40px); } }

/* ---------- Manual Payment premium styling ---------- */
.jx-pay-method-card{
    border:2px solid #e2e8f0; border-radius:18px; padding:18px;
    cursor:pointer; transition:all .25s cubic-bezier(.4,0,.2,1);
    background:#fff; position:relative; height:100%;
}
.jx-pay-method-card:hover{ border-color:var(--jx-green); transform:translateY(-3px); box-shadow:0 12px 24px rgba(16,185,129,.12); }
.jx-pay-method-card.jx-selected{
    border-color:var(--jx-green); background:linear-gradient(135deg,#ecfdf5,#f0fdf9);
    box-shadow:0 8px 24px rgba(16,185,129,.18);
}
.jx-pay-method-card.jx-selected::after{
    content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900;
    position:absolute; top:12px; right:14px; color:var(--jx-green); font-size:.85rem;
    animation:jx-check-pop .3s ease;
}
@keyframes jx-check-pop{ from{ transform:scale(0); } to{ transform:scale(1); } }

.jx-method-icon{
    width:46px; height:46px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.3rem; margin-bottom:10px;
}

.jx-number-box{
    background:#f8fafc; border:1px dashed #cbd5e1; border-radius:14px;
    padding:14px 16px; display:flex; align-items:center; justify-content:space-between;
    margin-bottom:10px; transition:.25s;
}
.jx-number-box:hover{ border-color:var(--jx-green); background:#ecfdf5; }
.jx-copy-btn{
    background:#0f172a; color:#fff; border:none; border-radius:8px;
    padding:6px 12px; font-size:.78rem; font-weight:600; transition:.2s;
}
.jx-copy-btn:hover{ background:var(--jx-green); transform:scale(1.05); }
.jx-copy-btn.jx-copied{ background:var(--jx-green); }

.jx-step-num{
    width:28px; height:28px; border-radius:50%;
    background:var(--jx-green); color:#fff; font-weight:700; font-size:.8rem;
    display:inline-flex; align-items:center; justify-content:center; margin-right:8px;
    flex-shrink:0;
}

/* ---------- Premium confetti canvas layer ---------- */
#jx-confetti-canvas{ position:fixed; inset:0; z-index:99997; pointer-events:none; }

/* ---------- Buy / pay button micro animation ---------- */
.btn-buy-now, .btn-buy, .btn-download, .jx-pay-submit{
    position:relative; overflow:hidden;
}
.btn-buy-now::before, .jx-pay-submit::before{
    content:""; position:absolute; top:0; left:-75%; width:50%; height:100%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,.4), transparent);
    transform:skewX(-20deg);
    transition:left .6s ease;
}
.btn-buy-now:hover::before, .jx-pay-submit:hover::before{ left:130%; }

/* ---------- Mobile bottom nav subtle entrance ---------- */
.bottom-nav{ animation:jx-nav-rise .5s cubic-bezier(.21,.9,.32,1); }
@keyframes jx-nav-rise{ from{ transform:translateY(30px); opacity:0; } to{ transform:translateY(0); opacity:1; } }