/* ucrime.lol shop: plans are boarding passes (perforated, tilting, lit by the pointer), a perk ticker, receipts for orders, and a sharper checkout. */

/* ---------- hero ---------- */
.shop-hero { position: relative; isolation: isolate; padding-top: clamp(104px, 15vw, 142px); max-width: 960px; }
.shop-hero::before { margin-bottom: 0 !important; display: none !important; }
.shop-hero::after { content: ""; position: absolute; left: 50%; top: 56%; width: min(640px, 120vw); aspect-ratio: 1; translate: -50% -50%; z-index: -1; border-radius: 50%; border: 1px dashed rgba(192, 132, 252, .24); background: radial-gradient(closest-side, rgba(168, 85, 247, .13), transparent 72%); animation: shopSpin 60s linear infinite; pointer-events: none; }
@keyframes shopSpin { to { rotate: 360deg; } }
.shop-hero .pill { display: inline-flex !important; align-items: center; gap: 9px; padding: 7px 15px 7px 12px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .13); background: rgba(255, 255, 255, .04); font: 600 .68rem/1 var(--id-mono, monospace); letter-spacing: .13em; text-transform: uppercase; color: #cfc8e0; }
.shop-hero .pill b { width: 8px; height: 8px; border-radius: 50%; background: #fbbf24; box-shadow: 0 0 0 0 rgba(251, 191, 36, .6); animation: hubPing 2s ease-out infinite; }
.shop-hero h1 { margin-top: 20px; }
.shop-hero p { color: #9a92ad; font-size: 1.04rem; text-wrap: pretty; }
.trust { gap: 10px; margin-top: 28px; }
.trust > span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .03); color: #b4acc6; font-size: .8rem; transition: transform .3s cubic-bezier(.3, 1.5, .5, 1), border-color .25s, background .25s; }
.trust > span:hover { transform: translateY(-3px); border-color: rgba(192, 132, 252, .5); background: rgba(168, 85, 247, .1); }
.trust > span i { transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); } .trust > span:hover i { transform: scale(1.3) rotate(-10deg); }

/* ---------- plans as boarding passes ---------- */
.pgridx { gap: clamp(14px, 2vw, 24px); margin-top: 52px; perspective: 1200px; }
.pcard { --mx: 50%; --my: 30%; --acc: #a855f7; --acc2: #f43f5e; padding: 0; overflow: visible; isolation: isolate; border-radius: 28px; border: 1px solid rgba(255, 255, 255, .1); background: linear-gradient(170deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .014)); transform-style: preserve-3d; animation: shopIn .8s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--pi, 0) * 120ms); }
@keyframes shopIn { from { opacity: 0; transform: translateY(46px) scale(.94) rotateX(10deg); filter: blur(6px); } }
.pcard.ver { --acc: #60a5fa; --acc2: #22d3ee; }
.pcard:hover { border-color: color-mix(in srgb, var(--acc) 65%, transparent); box-shadow: 0 34px 80px -36px var(--acc); }
.pcard .pc-glow { position: absolute; inset: 0; border-radius: inherit; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(340px circle at var(--mx) var(--my), color-mix(in srgb, var(--acc) 22%, transparent), transparent 66%); } .pcard:hover .pc-glow { opacity: 1; }
.pc-top, .pc-bot { position: relative; z-index: 1; }
.pc-top { padding: 30px 28px 24px; border-radius: 28px 28px 0 0; overflow: hidden; }
.pc-bot { display: flex; flex-direction: column; flex: 1; padding: 24px 28px 26px; border-top: 2px dashed rgba(255, 255, 255, .16); }
.pc-bot::before, .pc-bot::after { content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: #07050d; border: 1px solid rgba(255, 255, 255, .1); pointer-events: none; z-index: 2; }
.pc-bot::before { left: -12px; clip-path: inset(0 0 0 50%); } .pc-bot::after { right: -12px; clip-path: inset(0 50% 0 0); }
.pcard.hot { border-color: transparent; background: linear-gradient(170deg, rgba(168, 85, 247, .22), rgba(244, 63, 94, .08) 70%); box-shadow: 0 0 90px -26px rgba(168, 85, 247, .8); }
.pcard.hot::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 2px; pointer-events: none; z-index: 3; background: conic-gradient(from var(--px-a, 0deg), #a855f7, #f43f5e, #fbbf24, #a855f7); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: pxSpin 6s linear infinite; }
@property --px-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; } @keyframes pxSpin { to { --px-a: 360deg; } }
.pcard.ver .pc-top { background: linear-gradient(120deg, rgba(96, 165, 250, .16), rgba(34, 211, 238, .08), rgba(167, 139, 250, .14), rgba(96, 165, 250, .16)); background-size: 300% 100%; animation: shopHolo 8s linear infinite; } @keyframes shopHolo { to { background-position: -300% 0; } }
.pcard .ribbon { top: -14px; z-index: 5; padding: 6px 16px; font-family: var(--id-mono, monospace); letter-spacing: .16em; box-shadow: 0 10px 26px -8px #f43f5e; animation: shopRib 3s ease-in-out infinite; } @keyframes shopRib { 50% { transform: translateX(-50%) translateY(-3px); } }
.pcard .pic { width: 54px; height: 54px; border-radius: 17px; margin-bottom: 18px; font-size: 1.3rem; background: color-mix(in srgb, var(--acc) 16%, transparent); border-color: color-mix(in srgb, var(--acc) 50%, transparent); color: color-mix(in srgb, var(--acc) 85%, #fff); box-shadow: 0 12px 30px -12px var(--acc); transition: transform .5s cubic-bezier(.3, 1.5, .5, 1); }
.pcard:hover .pic { transform: translateZ(30px) rotate(-8deg) scale(1.12); }
.pcard h3 { font-family: var(--id-disp, inherit); font-size: 1.45rem; letter-spacing: -.04em; }
.pcard .tg { color: #9a92ad; min-height: 2.6em; margin-bottom: 20px; }
.pcard .price { font-family: var(--id-disp, inherit); font-style: normal; font-size: clamp(2.7rem, 5vw, 3.3rem); letter-spacing: -.06em; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #fff 40%, color-mix(in srgb, var(--acc) 40%, #fff)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pcard .price small { display: block; margin: 8px 0 0; -webkit-text-fill-color: #8e86a1; font-family: var(--id-mono, monospace); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.pcard ul { margin: 0 0 24px; gap: 12px; }
.pcard li { align-items: flex-start; animation: shopLi .55s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--pi, 0) * 120ms + var(--n, 0) * 55ms + .35s); }
@keyframes shopLi { from { opacity: 0; transform: translateX(-14px); } }
.pcard li i { flex: none; width: 19px; height: 19px; margin-top: 2px; border-radius: 50%; display: grid; place-items: center; font-size: .56rem; color: #fff; background: linear-gradient(135deg, var(--acc), var(--acc2)); box-shadow: 0 4px 12px -4px var(--acc); }
.pcard .btn { position: relative; overflow: hidden; border-radius: 15px; padding: 15px; font-weight: 700; }
.pcard .btn i { transition: transform .3s; } .pcard .btn:hover i.fa-arrow-right { transform: translateX(5px); }
.pcard .giftbtn { border-radius: 13px; }
.own-tag { justify-content: center; padding: 14px; border-radius: 15px; border: 1px dashed rgba(74, 222, 128, .45); background: rgba(74, 222, 128, .07); }

/* ---------- perk ticker ---------- */
.perkbar { position: relative; overflow: hidden; margin: 54px 0 0; padding: 4px 0; -webkit-mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.perktrack { display: flex; gap: 12px; width: max-content; animation: perkRun 46s linear infinite; } .perkbar:hover .perktrack { animation-play-state: paused; }
@keyframes perkRun { to { transform: translateX(-50%); } }
.perk { display: inline-flex; align-items: center; gap: 9px; padding: 10px 17px; border-radius: 99px; white-space: nowrap; font-size: .84rem; font-weight: 600; color: #cfc8e0; border: 1px solid rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .03); }
.perk i { color: #c084fc; font-size: .8rem; } .perk:nth-child(3n) i { color: #f43f5e; } .perk:nth-child(3n+1) i { color: #fbbf24; }

/* ---------- mobile plan carousel ---------- */
.pgdots { display: none; }
@media (max-width: 760px) {
  .pgridx { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding: 26px 24px 16px; margin: 30px 0 0; max-width: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; perspective: none; }
  .pgridx::-webkit-scrollbar { display: none; }
  .pcard { flex: 0 0 min(84%, 340px); scroll-snap-align: center; }
  .pgdots { display: flex; justify-content: center; gap: 8px; margin: 4px 0 0; } .pgdots i { width: 7px; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .22); transition: width .35s cubic-bezier(.3, 1.4, .5, 1), background .3s; } .pgdots i.on { width: 24px; background: linear-gradient(90deg, #a855f7, #f43f5e); }
  .shop-hero h1 { font-size: clamp(2.2rem, 11vw, 3rem) !important; } .trust { gap: 8px; } .trust > span { font-size: .74rem; padding: 7px 11px; }
  .perkbar { margin-top: 30px; }
}

/* ---------- payment methods, orders, FAQ ---------- */
.paystrip h4 { font: 600 .66rem var(--id-mono, monospace); letter-spacing: .26em; color: #77708a; }
.paychip { border-radius: 14px; transition: transform .3s cubic-bezier(.3, 1.5, .5, 1), border-color .25s, background .25s; } .paychip:hover { transform: translateY(-4px) rotate(-1.5deg); border-color: rgba(192, 132, 252, .55); background: rgba(168, 85, 247, .1); } .paychip:hover i { animation: wiggle .5s ease; }
#ordersSec h2 { font-family: var(--id-disp, inherit); }
.orow { position: relative; border-radius: 18px; padding: 16px 18px 16px 22px; overflow: hidden; background: linear-gradient(90deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015)); }
.orow::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--id-tape, linear-gradient(#f43f5e, #8b5cf6)); opacity: .8; }
.oid { font-family: var(--id-mono, monospace); font-size: .74rem; letter-spacing: .08em; padding: 2px 8px; border-radius: 6px; background: rgba(255, 255, 255, .06); color: #c4bcd4; }

/* ---------- checkout ---------- */
.mbox { position: relative; border-radius: 28px; border: 1px solid rgba(255, 255, 255, .12); background: linear-gradient(180deg, #15101f, #0c0814); }
.mbox::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 3px; border-radius: 0 0 4px 4px; background: var(--id-tape, linear-gradient(90deg, #f43f5e, #8b5cf6)); opacity: .85; z-index: 3; }
.mhead h3 { font-family: var(--id-disp, inherit); letter-spacing: -.03em; }
.modal.open .mbox { animation: shopModal .5s cubic-bezier(.2, .9, .3, 1.1); } @keyframes shopModal { from { opacity: 0; transform: translateY(30px) scale(.96); } }
.sumrow { border-radius: 16px; border-style: dashed; } .sumrow .amt { font-family: var(--id-disp, inherit); font-style: normal; letter-spacing: -.05em; }
.mtile { border-radius: 16px; } .mtile:hover { box-shadow: 0 14px 30px -16px #a855f7; }
.steps span { font-family: var(--id-mono, monospace); text-transform: uppercase; letter-spacing: .1em; font-size: .64rem; }
.mbox .steps { display: flex !important; }
@media (prefers-reduced-motion: reduce) { .shop-hero::after, .pcard, .pcard li, .pcard.hot::before, .pcard.ver .pc-top, .perktrack, .pcard .ribbon, .shop-hero .pill b { animation: none !important; } .perktrack { flex-wrap: wrap; width: auto; justify-content: center; } }