@keyframes cardPop {
    0% {
        transform: scale(.5) translateY(50px);
        opacity: 0
    }

    to {
        transform: scale(1) translateY(0);
        opacity: 1
    }
}

@keyframes prizeShine {
    0% {
        left: -100%
    }

    50%,to {
        left: 150%
    }
}

@keyframes pointsPulse {
    0% {
        transform: scale(1)
    }

    to {
        transform: scale(1.05)
    }
}

@keyframes btnReveal {
    0% {
        transform: scale(0) rotate(-10deg);
        opacity: 0
    }

    to {
        transform: scale(1) rotate(0deg);
        opacity: 1
    }
}

@keyframes confettiFall {
    0% {
        transform: translateY(-50px) rotate(0deg) scale(1);
        opacity: 1
    }

    to {
        transform: translateY(500px) rotate(1080deg) scale(0);
        opacity: 0
    }
}

@keyframes sparkle {
    0%,to {
        opacity: 0;
        transform: scale(0)
    }

    50% {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes shine-pass {
    0% {
        left: -100%;
        opacity: 0
    }

    10% {
        opacity: 1
    }

    30%,to {
        left: 150%;
        opacity: 0
    }
}

@keyframes fall {
    0% {
        top: -150px;
        opacity: 0
    }

    10%,90% {
        opacity: 1
    }

    to {
        top: 110vh;
        opacity: 0
    }
}

@keyframes swayRotate {
    0% {
        transform: translateX(0) rotate(0deg)
    }

    25% {
        transform: translateX(30px) rotate(45deg)
    }

    50% {
        transform: translateX(0) rotate(180deg)
    }

    75% {
        transform: translateX(-30px) rotate(220deg)
    }

    to {
        transform: translateX(0) rotate(360deg)
    }
}

@keyframes toxic-reactor {
    0% {
        border-color: #39ff14;
        box-shadow: 0 0 10px #39ff14,inset 0 0 10px #39ff14,0 0 15px rgba(57,255,20,.4);
        transform: scale(1)
    }

    to {
        border-color: #cf0;
        box-shadow: 0 0 25px #39ff14,inset 0 0 30px #39ff14,0 0 60px #cf0,0 0 10px #fff;
        transform: scale(1.03)
    }
}

@keyframes galaxy-spin {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes galaxy-pulse {
    0% {
        border-color: #c77dff;
        box-shadow: 0 0 15px #7b2cbf,0 0 30px #3a0ca3,0 0 50px rgba(199,125,255,.4),inset 0 0 10px #3a0ca3
    }

    50% {
        border-color: #fff
    }

    to {
        border-color: #00b4d8;
        box-shadow: 0 0 20px #00b4d8,0 0 40px #0077b6,0 0 60px rgba(0,180,216,.4),inset 0 0 20px #0077b6
    }
}

@keyframes inferno-pulse {
    0% {
        box-shadow: 0 0 10px #ff4500,0 0 20px #f80;
        border-color: #ff4500
    }

    to {
        box-shadow: 0 0 15px red,0 0 30px #fc0;
        border-color: #fc0
    }
}

@keyframes cyber-glow {
    0%,to {
        box-shadow: 0 0 5px #00e5ff,0 0 10px #00e5ff;
        border-color: #00e5ff
    }

    50% {
        box-shadow: 0 0 15px #bf00ff,0 0 25px #bf00ff;
        border-color: #bf00ff
    }
}

@keyframes pulse {
    0%,to {
        transform: scale(1);
        opacity: 1
    }

    50% {
        transform: scale(1.2);
        opacity: .8
    }
}

@keyframes stock-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255,159,67,.4)
    }

    70% {
        box-shadow: 0 0 0 6px transparent
    }

    to {
        box-shadow: 0 0 0 0 transparent
    }
}

@keyframes backgroundZoom {
    0% {
        background-size: 100%auto !important
    }

    to {
        background-size: 110%auto !important
    }
}

@keyframes bounce-badge {
    0%,to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-3px)
    }
}

@keyframes bounce {
    0%,to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-5px)
    }
}

@keyframes heartBeat {
    0%,to {
        transform: scale(1)
    }

    50% {
        transform: scale(1.3)
    }
}

@keyframes kingPulse {
    0% {
        box-shadow: 0 0 5px rgba(255,215,0,.3)
    }

    to {
        box-shadow: 0 0 15px rgba(255,215,0,.6)
    }
}

@keyframes floatTitle {
    0%,to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-3px)
    }
}

@keyframes spinBorder {
    to {
        transform: rotate(360deg)
    }
}

@keyframes rotate-smooth {
    0% {
        transform: translate(-50%,-50%) rotate(0deg)
    }

    to {
        transform: translate(-50%,-50%) rotate(360deg)
    }
}

@keyframes float-img {
    0%,to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-15px) rotate(3deg)
    }
}

@keyframes floatRank {
    0%,to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-5px)
    }
}

@keyframes floatImage {
    0%,to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-10px)
    }
}

@keyframes scanEffect {
    0% {
        left: -100%
    }

    to {
        left: 200%
    }
}

@keyframes menuSlideDown {
    0% {
        opacity: 0;
        transform: translateY(-10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes trophy-slide-out {
    0% {
        transform: translateX(0);
        opacity: 1
    }

    to {
        transform: translateX(-150%);
        opacity: 0
    }
}

@keyframes support-icon-pulse {
    0%,to {
        transform: scale(1);
        text-shadow: 0 0 10px rgba(255,204,0,.4)
    }

    50% {
        transform: scale(1.1);
        text-shadow: 0 0 20px rgba(255,204,0,.8)
    }
}

@keyframes white-gaming-pulse {
    0% {
        text-shadow: 0 0 4px rgba(255,255,255,.4),0 0 8px rgba(255,255,255,.2);
        opacity: .8;
        transform: scale(1)
    }

    to {
        text-shadow: 0 0 8px #fff,0 0 15px rgba(255,255,255,.8),0 0 20px rgba(255,255,255,.6);
        opacity: 1;
        transform: scale(1.05)
    }
}

@keyframes trophy-slide-in {
    0% {
        transform: translate(120%,-50%)
    }

    20% {
        transform: translate(-10%,-50%)
    }

    to {
        transform: translate(0,-50%)
    }
}

@keyframes diamond-pulse {
    0% {
        box-shadow: 0 0 15px rgba(0,229,255,.5);
        border-color: #00e5ff
    }

    to {
        box-shadow: 0 0 30px #00e5ff;
        border-color: #fff
    }
}

@keyframes smokePoof {
    0% {
        opacity: .9;
        transform: scale(.1)
    }

    50% {
        opacity: .7;
        transform: scale(1.5)
    }

    to {
        opacity: 0;
        transform: scale(2.5)
    }
}

@keyframes poison-pulse {
    0%,to {
        transform: scale(1);
        filter: sepia(0) hue-rotate(0) blur(0)
    }

    10% {
        transform: scale(1.01) translate(1px,1px);
        filter: sepia(1) hue-rotate(-50deg) blur(2px) contrast(1.2)
    }

    20% {
        transform: scale(.99) translate(-1px,-1px);
        filter: sepia(1) hue-rotate(-50deg) blur(4px) contrast(1.5)
    }

    30% {
        transform: scale(1.02) translate(-2px,2px);
        filter: sepia(1) hue-rotate(-50deg) blur(6px) contrast(2)
    }

    40% {
        transform: scale(.98) translate(2px,-2px);
        filter: sepia(1) hue-rotate(-50deg) blur(3px) contrast(1.5)
    }

    50% {
        transform: scale(1.01);
        filter: sepia(1) hue-rotate(-50deg) blur(10px) contrast(2)
    }
}

@keyframes blackout {
    0% {
        opacity: .3
    }

    to {
        opacity: .9
    }
}

@keyframes soft-smooth-shake {
    0%,to {
        transform: translateY(-5px) rotate(0deg)
    }

    25% {
        transform: translateY(-5px) rotate(.5deg)
    }

    75% {
        transform: translateY(-5px) rotate(-.5deg)
    }
}

@keyframes distinct-white-glow {
    0%,to {
        filter: drop-shadow(0 0 8px rgba(255,255,255,.6));
        transform: scale(1.08)
    }

    50% {
        filter: drop-shadow(0 0 20px #fff);
        transform: scale(1.12)
    }
}

@keyframes glow-move {
    0% {
        background-position: 200%center
    }

    to {
        background-position: -200%center
    }
}

@keyframes steam-section-glow {
    0%,to {
        border-color: rgba(0,192,255,.6);
        box-shadow: 0 0 15px rgba(0,192,255,.3)
    }

    50% {
        border-color: #00c0ff;
        box-shadow: 0 0 25px rgba(0,192,255,.6),0 0 10px rgba(0,192,255,.4) inset
    }
}

@keyframes auto-scroll-rtl {
    0% {
        transform: translateX(0)
    }

    to {
        transform: translateX(-500px)
    }
}

@keyframes smooth-xbox-glow {
    0%,to {
        box-shadow: 0 0 8px rgba(16,229,16,.3);
        border-color: rgba(16,229,16,.5)
    }

    50% {
        box-shadow: 0 0 16px rgba(16,229,16,.7),0 0 25px rgba(16,229,16,.3);
        border-color: #10e510
    }
}

@keyframes animated-rgb-border {
    0% {
        transform: translate(-50%,-50%) rotate(0deg)
    }

    to {
        transform: translate(-50%,-50%) rotate(360deg)
    }
}

@keyframes static-rgb-calm {
    0%,to {
        border-color: #c31432
    }

    25% {
        border-color: #8a2be2
    }

    50% {
        border-color: #240b36
    }

    75% {
        border-color: #0d1b2a
    }
}

@keyframes rgb-outline {
    0%,to {
        border-color: red;
        box-shadow: 0 0 15px red
    }

    16% {
        border-color: #ff0;
        box-shadow: 0 0 15px #ff0
    }

    33% {
        border-color: #0f0;
        box-shadow: 0 0 15px #0f0
    }

    50% {
        border-color: #0ff;
        box-shadow: 0 0 15px #0ff
    }

    66% {
        border-color: #00f;
        box-shadow: 0 0 15px #00f
    }

    83% {
        border-color: #f0f;
        box-shadow: 0 0 15px #f0f
    }
}

@keyframes scan-anim {
    0% {
        background-position: 0 0
    }

    to {
        background-position: 0 100%
    }
}

@keyframes fly-up {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1
    }

    to {
        transform: translateY(-180px) scale(0);
        opacity: 0
    }
}

@keyframes white-pulse-animation {
    0%,to {
        box-shadow: 0 0 7px 1px rgba(255,255,255,.25)
    }

    50% {
        box-shadow: 0 0 14px 3px rgba(255,255,255,.5)
    }
}

@keyframes smooth-enter-animation {
    0% {
        opacity: 0;
        transform: scale(.97) translateY(20px)
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0)
    }
}

@keyframes sheen-flow {
    0% {
        left: -150%
    }

    40%,to {
        left: 150%
    }
}

@keyframes ripple-soft {
    0% {
        width: 100%;
        height: 100%;
        opacity: .6;
        border-color: rgba(255,255,255,.4)
    }

    to {
        width: 130%;
        height: 160%;
        opacity: 0;
        border-color: transparent
    }
}

@keyframes skeleton-glow {
    0% {
        background-position: -200px 0
    }

    to {
        background-position: calc(200px + 100%)0
    }
}

@keyframes shatter-fly-effect {
    0% {
        opacity: 1;
        transform: scale(1) rotate(0deg)
    }

    30% {
        opacity: .8;
        transform: scale(1.1) rotate(-5deg)
    }

    to {
        opacity: 0;
        transform: scale(.1) rotate(360deg) translate(200px,-100px)
    }
}

@keyframes rgb-glow-pulse-intense {
    0%,to {
        box-shadow: 0 0 10px 1px rgba(255,0,0,.75)
    }

    16% {
        box-shadow: 0 0 10px 1px rgba(255,255,0,.75)
    }

    33% {
        box-shadow: 0 0 10px 1px rgba(0,255,0,.75)
    }

    50% {
        box-shadow: 0 0 10px 1px rgba(0,255,255,.75)
    }

    66% {
        box-shadow: 0 0 10px 1px rgba(0,0,255,.75)
    }

    83% {
        box-shadow: 0 0 10px 1px rgba(255,0,255,.75)
    }
}

@keyframes shine-effect {
    0% {
        transform: translateX(-100%) skewX(-25deg)
    }

    to {
        transform: translateX(250%) skewX(-25deg)
    }
}

@keyframes gifting-card-glow {
    0%,to {
        box-shadow: 0 0 8px rgba(101,73,140,.4),0 0 16px rgba(60,24,112,.4)
    }

    50% {
        box-shadow: 0 0 16px rgba(138,111,185,.6),0 0 32px rgba(101,73,140,.6)
    }
}

@keyframes smooth-white-glow {
    0%,to {
        box-shadow: 0 0 5px rgba(255,255,255,.05),0 0 10px rgba(255,255,255,.02)
    }

    50% {
        box-shadow: 0 0 12px rgba(255,255,255,.2),0 0 20px rgba(255,255,255,.1)
    }
}

@keyframes rgb-border {
    0%,to {
        border-color: #ff007f
    }

    20% {
        border-color: #ff5e3a
    }

    40% {
        border-color: #fff147
    }

    60% {
        border-color: #00d7ff
    }

    80% {
        border-color: #c900ff
    }
}

@keyframes glow-animation {
    0%,to {
        box-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 15px #007bff
    }

    50% {
        box-shadow: 0 0 20px #fff,0 0 30px #007bff,0 0 40px #007bff
    }
}

@keyframes smooth-glow {
    0%,to {
        box-shadow: 0 0 10px rgba(0,192,255,.4);
        border-color: rgba(0,192,255,.6)
    }

    50% {
        box-shadow: 0 0 20px rgba(0,192,255,.8),0 0 30px rgba(0,192,255,.3);
        border-color: #00c0ff
    }
}

@keyframes selected-glow-pulse {
    0%,to {
        box-shadow: 0 0 8px rgba(255,204,0,.5)
    }

    50% {
        box-shadow: 0 0 16px rgba(255,204,0,.8)
    }
}

@keyframes rgb-glow-pulse {
    0%,to {
        box-shadow: 0 0 10px rgba(255,0,0,.95),0 0 20px rgba(255,0,0,.8),0 0 40px rgba(255,0,0,.6);
        border-color: rgba(255,0,0,.95)
    }

    16% {
        box-shadow: 0 0 10px rgba(255,255,0,.95),0 0 20px rgba(255,255,0,.8),0 0 40px rgba(255,255,0,.6);
        border-color: rgba(255,255,0,.95)
    }

    33% {
        box-shadow: 0 0 10px rgba(0,255,0,.95),0 0 20px rgba(0,255,0,.8),0 0 40px rgba(0,255,0,.6);
        border-color: rgba(0,255,0,.95)
    }

    50% {
        box-shadow: 0 0 10px rgba(0,255,255,.95),0 0 20px rgba(0,255,255,.8),0 0 40px rgba(0,255,255,.6);
        border-color: rgba(0,255,255,.95)
    }

    66% {
        box-shadow: 0 0 10px rgba(0,0,255,.95),0 0 20px rgba(0,0,255,.8),0 0 40px rgba(0,0,255,.6);
        border-color: rgba(0,0,255,.95)
    }

    83% {
        box-shadow: 0 0 10px rgba(255,0,255,.95),0 0 20px rgba(255,0,255,.8),0 0 40px rgba(255,0,255,.6);
        border-color: rgba(255,0,255,.95)
    }
}

@keyframes glow-red-pink {
    0%,to {
        box-shadow: 0 0 10px #ff4655,0 0 20px #ff4655;
        border-color: #ff4655
    }

    50% {
        box-shadow: 0 0 30px #e6324b,0 0 50px #e6324b;
        border-color: #e6324b
    }
}

@keyframes glow-white {
    0%,to {
        box-shadow: 0 0 5px #f70,0 0 10px #f70;
        border-color: #f70
    }

    50% {
        box-shadow: 0 0 20px #ffaa60,0 0 30px #ffaa60;
        border-color: #ffaa60
    }
}

@keyframes glow-gold {
    0%,to {
        box-shadow: 0 0 5px #f5d685,0 0 10px #f5d685
    }

    50% {
        box-shadow: 0 0 20px #fff2d1,0 0 30px #fff2d1
    }
}

@keyframes glow-blue {
    0%,to {
        box-shadow: 0 0 10px #00a8ff,0 0 20px #00a8ff;
        border-color: #00a8ff
    }

    50% {
        box-shadow: 0 0 40px #3cf,0 0 60px #3cf;
        border-color: #3cf
    }
}

@keyframes glow-purple {
    0%,to {
        box-shadow: 0 0 5px #a450ff,0 0 10px #a450ff
    }

    50% {
        box-shadow: 0 0 20px #cda1ff,0 0 30px #cda1ff
    }
}

@keyframes payment-details-slide-up {
    0% {
        opacity: 0;
        transform: translateY(15px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes scroll {
    0% {
        transform: translateX(0)
    }

    to {
        transform: translateX(calc(-270px*10))
    }
}

@keyframes gold-pulse {
    0% {
        box-shadow: 0 0 4px 1px rgba(255,215,0,.4)
    }

    to {
        box-shadow: 0 0 12px 3px rgba(255,215,0,.7)
    }
}

@keyframes strong-glow-pulse {
    0%,to {
        transform: scale(1);
        box-shadow: 0 0 15px rgba(144,238,144,.5)
    }

    50% {
        transform: scale(1.1);
        box-shadow: 0 0 35px 8px rgba(144,238,144,.9)
    }
}

@keyframes pop {
    0%,to {
        transform: scale(1)
    }

    50% {
        transform: scale(1.15)
    }
}

@keyframes placeholder-shine {
    0% {
        background-position: -100%0
    }

    to {
        background-position: 100%0
    }
}

@keyframes modal-fade-in {
    0% {
        opacity: 0;
        transform: translate(-50%,-45%) scale(.98)
    }

    to {
        opacity: 1;
        transform: translate(-50%,-50%) scale(1)
    }
}

@keyframes fadeInOverlay {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes pulse-animation {
    0% {
        transform: translate(-50%,-50%) scale(1);
        opacity: .7
    }

    to {
        transform: translate(-50%,-50%) scale(3);
        opacity: 0
    }
}

@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(30px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes techScan {
    0% {
        left: -100%
    }

    50%,to {
        left: 100%
    }
}

@keyframes slideInUp {
    0% {
        transform: translateY(100%);
        opacity: 0
    }

    to {
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes shake {
    10%,90% {
        transform: translate3d(-1px,0,0)
    }

    20%,80% {
        transform: translate3d(2px,0,0)
    }

    30%,50%,70% {
        transform: translate3d(-4px,0,0)
    }

    40%,60% {
        transform: translate3d(4px,0,0)
    }
}

@keyframes textShine {
    to {
        background-position: 200%center
    }
}

@keyframes giftShake {
    0%,50%,to {
        transform: rotate(0) scale(1)
    }

    10%,30% {
        transform: rotate(-10deg) scale(1.1)
    }

    20%,40% {
        transform: rotate(10deg) scale(1.1)
    }
}

@keyframes smoothReveal {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(.98);
        filter: blur(10px)
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0)
    }
}

@keyframes ripple-outline {
    0% {
        transform: scale(1);
        opacity: 1
    }

    to {
        transform: scale(1.5);
        opacity: 0
    }
}

@keyframes pulseButton {
    0%,to {
        box-shadow: 0 4px 15px rgba(138,43,226,.4)
    }

    50% {
        box-shadow: 0 4px 25px rgba(138,43,226,.7)
    }
}

@keyframes messageSlideIn {
    0% {
        transform: translateY(10px) scale(.95);
        opacity: 0;
        transform: translateX(-20px)
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes chatTyping {
    0%,60%,to {
        transform: translateY(0);
        opacity: .5
    }

    30% {
        transform: translateY(-8px);
        opacity: 1
    }
}

@keyframes pulseText {
    0%,to {
        opacity: 1
    }

    50% {
        opacity: .7
    }
}

@keyframes rotate-glow {
    to {
        --angle: 360deg
    }
}

@keyframes badgePulse {
    0%,to {
        box-shadow: 0 10px 40px rgba(124,58,237,.5)
    }

    50% {
        box-shadow: 0 10px 40px rgba(124,58,237,.8),0 0 20px rgba(124,58,237,.4)
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes scrollRight {
    0% {
        transform: translateX(0)
    }

    to {
        transform: translateX(50%)
    }
}

@keyframes glitch-anim {
    0% {
        clip: rect(30px,9999px,10px,0)
    }

    5% {
        clip: rect(80px,9999px,90px,0)
    }

    10% {
        clip: rect(10px,9999px,40px,0)
    }

    15% {
        clip: rect(60px,9999px,20px,0)
    }

    20% {
        clip: rect(20px,9999px,80px,0)
    }

    to {
        clip: rect(50px,9999px,60px,0)
    }
}

@keyframes glitch-anim2 {
    0% {
        clip: rect(10px,9999px,80px,0)
    }

    5% {
        clip: rect(50px,9999px,20px,0)
    }

    10% {
        clip: rect(90px,9999px,10px,0)
    }

    15% {
        clip: rect(20px,9999px,60px,0)
    }

    20% {
        clip: rect(70px,9999px,30px,0)
    }

    to {
        clip: rect(40px,9999px,90px,0)
    }
}

@keyframes scrollReviews {
    0% {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}

@keyframes blink {
    0%,to {
        opacity: 1
    }

    50% {
        opacity: 0
    }
}

@keyframes twinkle {
    0%,to {
        opacity: .4;
        transform: scale(1)
    }

    50% {
        opacity: 1;
        transform: scale(1.2)
    }
}

@keyframes techScroll {
    0% {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}

@keyframes floatV2 {
    0%,to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-20px)
    }
}

@keyframes marquee {
    0% {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}

@keyframes giant-pulse {
    0%,to {
        transform: scale(1)
    }

    50% {
        transform: scale(1.1)
    }
}

@keyframes greenPulse {
    0%,to {
        box-shadow: 0 0 10px rgba(34,197,94,.4)
    }

    50% {
        box-shadow: 0 0 25px rgba(34,197,94,.8)
    }
}

@keyframes pulse-glow {
    0%,to {
        box-shadow: 0 10px 30px rgba(124,58,237,.3)
    }

    50% {
        box-shadow: 0 10px 40px rgba(124,58,237,.6)
    }
}

@keyframes pulseBadge {
    0% {
        box-shadow: 0 0 0 0 rgba(253,203,110,.2)
    }

    70% {
        box-shadow: 0 0 0 10px transparent
    }

    to {
        box-shadow: 0 0 0 0 transparent
    }
}

@keyframes msgSlide {
    0% {
        opacity: 0;
        transform: translateY(-15px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes floatIcon {
    0%,to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-4px)
    }
}

@keyframes menuFadeIn {
    0% {
        opacity: 0;
        transform: scale(.9)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes designScroll {
    0% {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}

@keyframes modalFadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes shine {
    0% {
        left: -100%
    }

    20%,to {
        left: 200%
    }
}

@keyframes smoothBackdrop {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes classyEntry {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(.98)
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

@keyframes rotation {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes floatUpDn {
    0%,to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-10px)
    }
}

@keyframes elegantFloatGlow {
    0%,to {
        transform: translateY(0) scale(1);
        filter: drop-shadow(0 0 0 transparent)
    }

    50% {
        transform: translateY(-5px) scale(1.05);
        filter: drop-shadow(0 0 10px rgba(0,198,255,.7))
    }
}

@keyframes shimmerPerf {
    0% {
        background-position: 200%0
    }

    to {
        background-position: -200%0
    }
}

@keyframes rotateGlow {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes shimmer {
    0% {
        background-position: -200%0
    }

    to {
        background-position: 200%0
    }
}

@keyframes pulse-icon {
    0%,to {
        transform: scale(.95);
        opacity: .1
    }

    50% {
        transform: scale(1.1);
        opacity: .3
    }
}

@keyframes pulse-green {
    0% {
        transform: scale(.95);
        box-shadow: 0 0 0 0 rgba(0,255,136,.7)
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px transparent
    }

    to {
        transform: scale(.95);
        box-shadow: 0 0 0 0 transparent
    }
}

@keyframes pulse-red {
    0% {
        transform: scale(.95);
        box-shadow: 0 0 0 0 rgba(255,51,51,.7)
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px transparent
    }

    to {
        transform: scale(.95);
        box-shadow: 0 0 0 0 transparent
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(-10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(.5) translateY(10px)
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0)
    }
}

@keyframes spinCheck {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-45deg)
    }

    80% {
        transform: scale(1.2) rotate(10deg)
    }

    to {
        opacity: 1;
        transform: scale(1) rotate(0)
    }
}

@keyframes smoothFadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes loadingShimmer {
    0% {
        transform: translateX(-100%)
    }

    to {
        transform: translateX(100%)
    }
}

@keyframes cosmicFlow {
    0%,to {
        background-position: 0 50%
    }

    50% {
        background-position: 100% 50%
    }
}

.scratch-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center,rgba(124,58,237,.2),rgba(0,0,0,.95));
    justify-content: center;
    align-items: center;
    z-index: 9999;
    animation: fadeIn .5s ease;
    backdrop-filter: blur(8px)
}

.scratch-card {
    background: linear-gradient(145deg,#1e1e3f,#0f0f23);
    border-radius: 24px;
    padding: 35px 30px;
    text-align: center;
    max-width: 340px;
    width: 90%;
    box-shadow: 0 25px 80px rgba(124,58,237,.4),0 0 40px rgba(124,58,237,.2),inset 0 1px 0 rgba(255,255,255,.1);
    border: 1px solid rgba(124,58,237,.4);
    position: relative;
    overflow: hidden;
    animation: cardPop .6s cubic-bezier(.34,1.56,.64,1)
}

    .scratch-card::before {
        content: "";
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(45deg,transparent,rgba(124,58,237,.1),transparent);
        animation: shimmer 3s infinite linear;
        pointer-events: none
    }

.scratch-title {
    color: #fff;
    font-size: 24px;
    margin-bottom: 8px;
    font-weight: 700;
    text-shadow: 0 0 20px rgba(124,58,237,.5);
    position: relative
}

.scratch-subtitle {
    color: rgba(255,255,255,.5);
    font-size: 13px;
    margin-bottom: 25px
}

.scratch-container {
    position: relative;
    width: 260px;
    height: 130px;
    margin: 0 auto 20px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.5),inset 0 0 20px rgba(16,185,129,.2)
}

#scratchCanvas, .scratch-prize {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 16px
}

.scratch-prize {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,#10b981 0,#059669 50%,#047857 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

    .scratch-hint::after, .scratch-hint::before, .scratch-prize::after {
        content: "";
        background: linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent)
    }

    .scratch-prize::after {
        position: absolute;
        top: 0;
        left: -100%;
        width: 60%;
        height: 100%;
        animation: prizeShine 2s infinite
    }

.prize-points {
    font-size: 48px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 4px 15px rgba(0,0,0,.4),0 0 30px rgba(255,255,255,.3);
    animation: pointsPulse 1s ease-in-out infinite alternate
}

.prize-label {
    font-size: 18px;
    color: rgba(255,255,255,.95);
    font-weight: 600;
    letter-spacing: 2px
}

#scratchCanvas {
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="%23fbbf24"><circle cx="12" cy="12" r="8"/></svg>')16 16,pointer;
    transition: opacity .8s ease
}

.scratch-hint {
    color: rgba(255,255,255,.4);
    font-size: 12px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px
}

    .scratch-hint::after, .scratch-hint::before {
        width: 30px;
        height: 1px
    }

.scratch-close-btn {
    background: linear-gradient(135deg,#7c3aed,#5b21b6);
    color: #fff;
    border: 0;
    padding: 14px 50px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all .3s ease;
    display: none;
    box-shadow: 0 10px 30px rgba(124,58,237,.4);
    position: relative;
    overflow: hidden
}

    .scratch-close-btn::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
        transition: left .5s
    }

    .scratch-close-btn:hover::before {
        left: 100%
    }

    .scratch-close-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 15px 40px rgba(124,58,237,.5)
    }

    .scratch-close-btn:active {
        transform: translateY(0)
    }

    .scratch-close-btn.visible {
        display: inline-block;
        animation: btnReveal .6s cubic-bezier(.34,1.56,.64,1)
    }

.confetti, .sparkle {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    animation: confettiFall 3.5s ease-out forwards
}

.sparkle {
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    animation: sparkle 1.5s ease-in-out infinite;
    box-shadow: 0 0 10px #fff,0 0 20px #7c3aed
}

.referral-email-section {
    margin-bottom: 15px
}

.referral-email-input {
    background: rgba(0,0,0,.3);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 8px;
    padding: 12px;
    color: #fff;
    width: 70%;
    text-align: center;
    font-size: 14px;
    margin-left: 10px
}

.referral-discount-badge {
    background: linear-gradient(135deg,#10b981,#059669);
    color: #fff;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    display: inline-block;
    margin-top: 10px
}

.referral-section {
    background: linear-gradient(135deg,rgba(124,58,237,.2),rgba(99,102,241,.1));
    border: 1px solid rgba(124,58,237,.3);
    border-radius: 16px;
    padding: 25px;
    margin: 20px auto;
    max-width: 500px;
    text-align: center
}

.referral-title {
    font-size: 20px
}

.referral-subtitle {
    color: rgba(255,255,255,.7);
    font-size: 14px;
    margin-bottom: 20px
}

.referral-code-box {
    background: rgba(0,0,0,.3);
    border: 2px dashed rgba(124,58,237,.5);
    border-radius: 12px;
    padding: 15px;
    margin: 15px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px
}

.referral-code {
    font-size: 24px;
    font-weight: 700;
    color: #a78bfa;
    letter-spacing: 3px;
    font-family: monospace
}

.copy-referral-btn {
    background: #7c3aed;
    color: #fff;
    border: 0;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all .3s
}

    .copy-referral-btn:hover {
        background: #6d28d9;
        transform: scale(1.05)
    }

.referral-stats {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 20px
}

.referral-stat {
    text-align: center
}

.referral-stat-number {
    font-size: 28px;
    font-weight: 700;
    color: #7c3aed
}

.referral-stat-label {
    font-size: 12px;
    color: rgba(255,255,255,.6)
}

.referral-input-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.1)
}

.referral-input {
    background: rgba(0,0,0,.3);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 8px;
    padding: 12px;
    color: #fff;
    width: 60%;
    text-align: center;
    font-size: 16px;
    letter-spacing: 2px
}

.apply-referral-btn {
    background: #10b981;
    color: #fff;
    border: 0;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    margin-right: 10px
}

.share-btns {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px
}

.share-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    font-size: 20px;
    color: #fff;
    transition: transform .2s
}

    .share-btn:hover {
        transform: scale(1.1)
    }

    .share-btn.whatsapp {
        background: #25d366
    }

    .share-btn.telegram {
        background: #08c
    }

    .share-btn.twitter {
        background: #1da1f2
    }

    .share-btn.copy {
        background: #6b7280
    }

#rating-name, #rating-text, .rating-input, button[onclick="submitStoreRating()"] {
    max-width: 350px !important;
    width: 90% !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important
}

button[onclick="submitStoreRating()"] {
    margin-bottom: 10px !important;
    background: var(--accent-yellow) !important;
    border: 0 !important;
    padding: 8px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    cursor: pointer !important
}

#rating-name, #rating-text {
    background: rgba(0,0,0,.3) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 8px !important;
    padding: 10px !important;
    color: #fff !important;
    font-size: 13px !important
}

.rating-input, .stars {
    display: flex !important
}

.rating-input {
    justify-content: center !important;
    align-items: center !important;
    background: 0 0 !important;
    border: 0 !important
}

.stars {
    flex-direction: row-reverse !important;
    gap: 8px !important
}

.star {
    font-size: 24px !important;
    color: rgba(255,255,255,.2) !important;
    cursor: pointer !important
}

    .star:hover, .star:hover ~ .star {
        color: var(--accent-yellow) !important
    }

#modalTitle {
    text-align: right !important;
    width: 100%;
    direction: rtl
}

.footer-single-divider {
    border: 0;
    height: 1px;
    background-color: rgba(255,255,255,.1);
    margin: 15px auto;
    width: 500px
}

.trust-badges-container {
    border-bottom: none !important;
    padding-bottom: 0 !important
}

.header-inline-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
    margin-bottom: 20px !important;
    flex-wrap: nowrap !important
}

.glow-text-rtl-inline {
    margin: 0 !important;
    font-size: 1.8rem !important;
    white-space: nowrap !important
}

.logo-inline {
    height: 50px !important;
    width: auto !important;
    object-fit: contain !important
}

@media (max-width:600px) {
    .glow-text-rtl-inline {
        font-size: 1.3rem !important
    }

    .logo-inline {
        height: 35px !important
    }

    .header-inline-container {
        gap: 8px !important
    }
}

.main-ad-banner {
    max-width: 450px;
    margin: 15px auto;
    background: rgba(0,0,0,.2);
    border: 1px solid rgba(255,255,255,.1);
    transition: all .3s ease
}

.hero-ad-img {
    display: block
}

@media (max-width:992px) {
    .main-ad-banner {
        width: 85%;
        max-width: 300px
    }
}

@media (max-width:768px) {
    .trust-badges-container {
        gap: 15px !important;
        margin: 10px auto !important;
        padding-bottom: 15px !important
    }

    .trust-badge {
        gap: 6px !important
    }

        .trust-badge svg {
            width: 18px !important;
            height: 18px !important
        }

        .trust-badge span {
            font-size: 11px !important;
            white-space: nowrap
        }
}



.crimson-leaf {
    position: fixed;
    top: -150px;
    z-index: 9999;
    pointer-events: auto !important;
    cursor: crosshair;
    object-fit: contain;
    animation-name: fall,swayRotate;
    animation-timing-function: linear,ease-in-out;
    animation-fill-mode: forwards;
    transition: transform .6s cubic-bezier(.25,1,.5,1),opacity .6s ease-out
}

.main-footer-bottom {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 25px 20px;
    margin-top: 20px;
    border-top: 1px solid rgba(255,255,255,.1);
    min-height: 80px
}

#copyright {
    margin: 0;
    text-align: center
}

.payment-icons-corner {
    position: absolute;
    left: 20px;
    top: auto;
    bottom: 15px
}

.pay-img-corner:hover {
    opacity: 1
}

@media (max-width:768px) {
    .main-footer-bottom {
        flex-direction: column-reverse;
        gap: 15px;
        min-height: auto
    }

    .payment-icons-corner {
        position: static;
        bottom: auto;
        justify-content: center
    }
}

.review-content {
    color: #eee;
    font-weight: 500
}

.client-mini-info {
    border-top: 1px solid rgba(255,255,255,.1);
    padding-top: 10px;
    margin-top: auto
}



.reviews-carousel-container {
    padding: 0 !important;
    height: 0 !important
}

#rating-name {
    margin-bottom: 5px !important
}

#itakura-trick-text, #rating-text, .rating-input, button {
    margin-top: 5px !important;
    margin-bottom: 5px !important
}

#itakura-trick-text {
    margin-top: 0 !important;
    padding: 0 !important;
    line-height: 1
}

@media (max-width:768px) {
    #gamesContainer, #homeSoftwareSubscriptionsContainer, #homeTvSubscriptionsContainer {
        grid-template-columns: 1fr 1fr !important;
        gap: 30px !important;
        padding: 0 15px !important;
        justify-content: center
    }

    #discordDecorationsPageContainer, #gameTopupContainer, #steamPointsPageContainer, #xboxGiftCardsContainer, .products-container, .wishlist-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 30px !important;
        padding: 0 15px !important;
        justify-content: center
    }

    @media (max-width:768px) {
        #discordDecorationsPageContainer, #fortniteContainer, #gameTopupContainer, #genshinImpactContainer, #marvelRivalsContainer, #robloxContainer, #rocketleagueContainer, #steamPointsPageContainer, #xboxGiftCardsContainer, .products-container, .wishlist-grid {
            display: grid !important;
            grid-template-columns: 1fr 1fr !important;
            gap: 30px !important;
            padding: 0 15px !important;
            justify-content: center
        }

        .gaming-key-card, .product-item, .psn-gift-card-item, .rental-card, .service-offer-card, .subscription-item {
            width: 100% !important;
            min-width: unset !important;
            margin: 0 !important;
            height: auto !important;
            padding: 8px !important;
            min-height: 220px !important
        }

            .gaming-key-card h3, .product-item h3, .psn-gift-card-item h3, .rental-card h3, .subscription-item h3 {
                font-size: 12px !important;
                min-height: 30px
            }

            .gaming-key-card p, .product-item .product-price, .rental-card p, .subscription-item .sub-price {
                font-size: 13px !important
            }

            .product-item .buy-btn, .rental-card .buy-btn, .subscription-item .buy-btn {
                font-size: 11px !important;
                padding: 6px 8px !important
            }
    }

    .gaming-key-card, .product-item, .psn-gift-card-item, .rental-card, .service-offer-card, .subscription-item {
        width: 100% !important;
        min-width: unset !important;
        margin: 0 !important;
        height: auto !important;
        padding: 8px !important;
        min-height: 220px !important
    }

        .gaming-key-card h3, .product-item h3, .psn-gift-card-item h3, .rental-card h3, .subscription-item h3 {
            font-size: 12px !important;
            min-height: 30px
        }

        .gaming-key-card p, .product-item .product-price, .rental-card p, .subscription-item .sub-price {
            font-size: 13px !important
        }

        .product-item .buy-btn, .rental-card .buy-btn, .subscription-item .buy-btn {
            font-size: 11px !important;
            padding: 6px 8px !important
        }
}

#orderDetailModal {
    max-width: 450px !important
}

    #orderDetailModal .order-receipt-header {
        padding: 20px !important
    }

        #orderDetailModal .order-receipt-header h2 {
            font-size: 2rem !important
        }

    #orderDetailModal .order-receipt-body {
        padding: 15px !important
    }

    #orderDetailModal .receipt-info-row {
        margin-bottom: 5px !important
    }

    #orderDetailModal .receipt-divider {
        margin: 15px 0 !important
    }

#detail-items-container .receipt-item {
    padding: 8px !important;
    margin-bottom: 10px !important
}

#orderDetailModal > .modal-body > div:last-child {
    padding: 15px !important
}

.frame-toxic {
    border: 3px solid #39ff14 !important;
    border-radius: 50%;
    box-shadow: 0 0 10px #39ff14,inset 0 0 20px #39ff14,0 0 25px rgba(57,255,20,.6),0 0 50px rgba(57,255,20,.3) !important;
    animation: toxic-reactor 2s infinite alternate ease-in-out;
    transition: all .3s ease
}

.frame-galaxy {
    display: inline-block !important;
    box-sizing: border-box !important;
    border: 3px solid rgba(199,125,255,.6) !important;
    border-radius: 50%;
    box-shadow: 0 0 15px #7b2cbf,0 0 30px #3a0ca3,0 0 50px rgba(118,44,191,.5),inset 0 0 20px rgba(0,180,216,.4) !important;
    animation: galaxy-spin 20s linear infinite,galaxy-pulse 4s ease-in-out infinite alternate !important;
    will-change: transform,box-shadow,border-color
}

.glowing-divider {
    border: 0;
    height: 1px;
    background-color: rgba(255,255,255,.5);
    box-shadow: 0 0 10px rgba(255,255,255,.8);
    margin: 25px auto;
    width: 80%;
    border-radius: 50%
}

.modern-thin-divider {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,.75),rgba(255,255,255,0));
    margin: 20px 0;
    width: 100%;
    opacity: .6
}

.change-avatar-btn-styled {
    background: rgba(255,255,255,.05);
    border: 1px solid var(--accent-yellow);
    color: var(--accent-yellow);
    padding: 10px 25px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all .3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 250px
}

    .change-avatar-btn-styled:hover {
        background: var(--accent-yellow);
        color: #000;
        transform: translateY(-2px);
        box-shadow: 0 0 15px rgba(255,204,0,.3)
    }

    .change-avatar-btn-styled:active, .profile-actions-container button:active {
        transform: scale(.95)
    }

.frame-cyber, .frame-inferno {
    border: 3px solid #ff4500 !important;
    box-shadow: 0 0 10px #ff4500,0 0 20px #fc0,inset 0 0 10px #ff4500 !important;
    animation: inferno-pulse 1.5s infinite alternate;
    border-radius: 50%
}

.frame-cyber {
    border: 3px solid #00e5ff !important;
    box-shadow: 0 0 10px #00e5ff,0 0 20px #bf00ff !important;
    animation: cyber-glow 2s infinite alternate
}

.frames-selection-grid {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding: 15px;
    background: rgba(0,0,0,.2);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.1)
}

.frame-option-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform .2s;
    position: relative;
    border: 2px solid transparent
}

    .frame-option-btn:hover {
        transform: scale(1.1)
    }

    .frame-option-btn.active-frame {
        transform: scale(1.1);
        box-shadow: 0 0 0 2px #fff
    }

    .frame-option-btn.locked {
        filter: grayscale(100%);
        opacity: .5;
        cursor: not-allowed
    }

        .frame-option-btn.locked::after {
            content: "🔒";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            font-size: 16px
        }

.product-item--offline:hover {
    opacity: 1 !important;
    visibility: visible !important
}

.preview-games-floating {
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    display: flex;
    gap: 10px;
    background: rgba(20,20,30,.9);
    padding: 10px;
    border-radius: 12px;
    border: 1px solid #66c0f4;
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
    opacity: 0;
    visibility: hidden;
    transition: all .4s cubic-bezier(.175,.885,.32,1.275);
    z-index: 10;
    pointer-events: none
}

    .preview-games-floating.active {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0)
    }

    .preview-games-floating::after {
        content: "";
        position: absolute;
        bottom: -6px;
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
        width: 12px;
        height: 12px;
        background: #66c0f4;
        z-index: -1
    }

.mini-preview-img {
    width: 60px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.2);
    box-shadow: 0 4px 8px rgba(0,0,0,.3);
    transform: scale(.8);
    transition: transform .3s ease
}

.preview-games-floating.active .mini-preview-img {
    transform: scale(1)
}

.stock-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    margin-top: 5px;
    margin-bottom: 5px;
    letter-spacing: .5px
}

.stock-high {
    color: #2ecc71;
    border: 1px solid #2ecc71;
    background: rgba(46,204,113,.1)
}

.stock-out {
    color: #e74c3c;
    border: 1px solid #e74c3c;
    background: rgba(231,76,60,.1);
    text-decoration: line-through
}

.stock-low {
    color: #ff9f43;
    border: 1px solid #ff9f43;
    background: rgba(255,159,67,.1);
    animation: stock-pulse 1.5s infinite
}

.status-message-box {
    background: rgba(255,193,7,.15);
    border: 1px solid #ffc107;
    color: #ffc107;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    margin: 15px 0;
    line-height: 1.6
}

.order-receipt-header {
    background: linear-gradient(145deg,#1e0b3c,#000);
    padding: 25px;
    text-align: center;
    border-bottom: 2px dashed rgba(255,255,255,.1);
    border-radius: 15px 15px 0 0
}

    .order-receipt-header h2 {
        font-size: 1.5rem !important
    }

.order-status-badge {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    margin-top: 10px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2)
}

    .order-status-badge.completed {
        background: rgba(40,167,69,.2);
        color: #28a745;
        border-color: #28a745
    }

    .order-status-badge.pending {
        background: rgba(255,193,7,.2);
        color: #ffc107;
        border-color: #ffc107
    }

.order-receipt-body {
    padding: 25px;
    background: rgba(0,0,0,.2)
}

.receipt-info-row {
    display: flex;
    justify-content: space-between;
    color: #ccc;
    font-size: 14px;
    margin-bottom: 10px
}

.receipt-divider {
    border: 0;
    border-top: 1px solid rgba(255,255,255,.1);
    margin: 15px 0
}

.receipt-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    background: rgba(255,255,255,.03);
    padding: 10px;
    border-radius: 8px
}

    .receipt-item img {
        width: 50px;
        height: 50px;
        border-radius: 6px;
        object-fit: cover
    }

.receipt-item-details {
    flex-grow: 1;
    text-align: right
}

.receipt-item-title {
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    display: block
}

.receipt-item-price {
    color: var(--accent-yellow);
    font-size: 13px
}

.bundle-offer-card, .receipt-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.receipt-total-row {
    font-size: 18px;
    font-weight: 700;
    margin-top: 10px
}

.bundle-offer-card {
    width: 95%;
    min-height: 250px;
    flex-direction: row;
    padding: 20px;
    border: 3px solid gold;
    box-shadow: 0 0 15px rgba(255,215,0,.5);
    transition: transform .3s ease;
    margin-bottom: 25px
}

    .bundle-offer-card .product-title, .segment span {
        font-size: 1.8em;
        font-weight: 700;
        color: #fff
    }

.wheel-container {
    position: relative;
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto
}

.segment, .the-wheel {
    position: absolute;
    top: 0;
    left: 0
}

.the-wheel {
    width: 100%;
    height: 100%;
    background: #333;
    border-radius: 50%;
    border: 5px solid gold;
    box-shadow: 0 0 20px rgba(255,215,0,.5);
    overflow: hidden;
    transition: transform 5s cubic-bezier(.17,.67,.83,.67)
}

.segment {
    width: 50%;
    height: 50%;
    background: var(--clr);
    transform-origin: bottom right;
    transform: rotate(calc(45deg*(var(--i) - 1)));
    clip-path: polygon(0 0,56%0,100% 100%,0 56%);
    display: flex;
    justify-content: center;
    align-items: center
}

    .segment span {
        position: absolute;
        transform: rotate(45deg);
        margin-top: 40px;
        margin-left: 40px;
        font-size: 12px;
        text-shadow: 1px 1px 2px #000;
        width: 70px;
        text-align: center
    }

.wheel-center, .wheel-pointer {
    position: absolute;
    background: #fff;
    z-index: 10
}

.wheel-pointer {
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    clip-path: polygon(50% 100%,0 0,100%0);
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.5))
}

.wheel-center {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 4px solid #1a0b2e;
    box-shadow: 0 0 10px rgba(0,0,0,.5)
}

.daily-reward-trigger, .spin-btn {
    font-size: 14px;
    align-items: center
}

.spin-btn {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #ff4757;
    color: #fff;
    font-weight: 700;
    display: flex;
    justify-content: center;
    cursor: pointer;
    user-select: none
}

    .spin-btn:active {
        transform: scale(.9)
    }

.toast-notification.error {
    background: rgba(50,0,0,.95) !important;
    border: 1px solid #ff4757 !important;
    color: #ff4757 !important;
    box-shadow: 0 5px 20px rgba(255,71,87,.3)
}

.daily-reward-trigger {
    background: linear-gradient(45deg,gold,orange);
    color: #000 !important;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 900;
    text-decoration: none;
    display: inline-flex;
    gap: 8px;
    box-shadow: 0 0 15px rgba(255,215,0,.4);
    transition: all .3s ease;
    position: relative;
    border: 2px solid #fff;
    animation: gold-pulse 2s infinite
}

    .daily-reward-trigger:hover {
        transform: translateY(-3px) scale(1.05);
        box-shadow: 0 0 25px rgba(255,215,0,.8);
        background: linear-gradient(45deg,orange,gold)
    }

    .daily-reward-trigger .badge-notification {
        position: absolute;
        top: -5px;
        right: -5px;
        background: #ff4757;
        color: #fff;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid #fff;
        animation: bounce-badge 1s infinite
    }

#daily-reward-section, #reward-shop-section {
    background-size: cover !important;
    overflow: hidden
}

#daily-reward-section {
    background: linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)), url(./images/mc.gif) !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    /* === هذا هو السطر المسؤول عن ملء الصورة === */
    background-size: cover !important;
    /* ======================================= */

    box-shadow: 0 0 50px rgba(0,0,0,.8) !important;
    border: 1px solid rgba(255,255,255,.1);
    animation: backgroundZoom 20s infinite alternate ease-in-out;
}

.daily-days-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px
}

.daily-day-card {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    width: 80px;
    padding: 10px 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    opacity: .6;
    transition: all .3s ease
}

    .daily-day-card i {
        font-size: 20px;
        margin: 8px 0;
        color: #ccc
    }

    .daily-day-card.active {
        opacity: 1;
        border-color: gold;
        background: rgba(255,215,0,.1);
        box-shadow: 0 0 15px rgba(255,215,0,.3);
        transform: scale(1.1)
    }

        .daily-day-card.active i {
            color: gold;
            animation: bounce 1s infinite
        }

    .daily-day-card.claimed {
        opacity: 1;
        background: rgba(40,167,69,.2);
        border-color: #28a745
    }

        .custom-offer-card .offer-features li svg, .daily-day-card.claimed i, .valorant-coaching-card .card-features li svg {
            color: #28a745
        }

    .daily-day-card.big-reward {
        width: 100px;
        border-color: #00e5ff
    }

        .daily-day-card.big-reward i {
            color: #00e5ff;
            font-size: 28px
        }

.toast-notification.show {
    transform: translateY(0)
}

.toast-notification.success {
    border-color: #2ecc71;
    color: #2ecc71
}

.toast-notification.error {
    border-color: #ff4757
}

#reward-shop-section {
    background-image: linear-gradient(to bottom,rgba(15,10,30,.9),rgba(44,26,64,.85)),url(./images/P97JL4qb6z2ofr_OgOOH30QggmrvQWMhEYPrUJZaHw4.gif) !important;
    background-position: center !important;
    background-attachment: fixed !important;
    border: 1px solid gold;
    box-shadow: 0 0 30px rgba(255,215,0,.1);
    border-radius: 20px;
    padding: 30px;
    position: relative
}

    #reward-shop-section h2 {
        font-size: 2.5rem !important;
        margin-bottom: 10px !important;
        text-shadow: 0 0 20px rgba(255,215,0,.6);
        display: block !important
    }

    #reward-shop-section p {
        font-size: 1.1rem;
        color: #e0e0e0;
        max-width: 600px;
        margin: 0 auto 40px
    }

.wishlist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
    gap: 15px;
    padding: 10px;
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    box-sizing: border-box;
    scrollbar-width: thin
}

    .wishlist-grid .product-item {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        position: relative;
        border: 1px solid rgba(255,255,255,.1);
        background: rgba(255,255,255,.03);
        border-radius: 12px;
        transition: transform .3s ease
    }

        .wishlist-grid .product-item:hover {
            transform: translateY(-5px)
        }

.big-wishlist-btn, .wishlist-remove-btn {
    position: absolute;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.wishlist-remove-btn {
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background-color: rgba(220,38,38,.8);
    color: #fff;
    z-index: 10;
    font-size: 14px;
    transition: all .3s cubic-bezier(.175,.885,.32,1.275);
    border: 1.5px solid rgba(255,255,255,.2);
    backdrop-filter: blur(4px)
}

    .wishlist-remove-btn:hover {
        background-color: #ef4444;
        transform: scale(1.15) rotate(90deg)
    }

.wishlist-grid .product-image-wrapper {
    height: 110px !important;
    border-radius: 10px 10px 0 0
}

.wishlist-grid h3 {
    font-size: 13px !important;
    min-height: 32px !important;
    margin: 8px 5px !important;
    line-height: 1.3;
    text-align: center
}

.wishlist-grid .product-price {
    font-size: 14px !important;
    margin-bottom: 8px !important;
    color: var(--accent-pink, #e75480);
    text-align: center
}

.wishlist-grid .buy-btn {
    font-size: 11px !important;
    padding: 6px 5px !important;
    width: 90% !important;
    margin: 0 auto 10px !important;
    border-radius: 20px !important
}

.big-wishlist-btn {
    top: 20px;
    left: 20px;
    z-index: 100;
    width: 50px;
    height: 50px;
    background-color: rgba(0,0,0,.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.15);
    transition: all .4s cubic-bezier(.175,.885,.32,1.275);
    box-shadow: 0 8px 20px rgba(0,0,0,.4)
}

    .big-wishlist-btn i {
        font-size: 24px;
        color: rgba(255,255,255,.7);
        transition: all .3s ease
    }

    .big-wishlist-btn:hover {
        background-color: rgba(0,0,0,.7);
        transform: scale(1.1)
    }

    .big-wishlist-btn.active {
        background-color: rgba(255,71,87,.2);
        border-color: #ff4757;
        box-shadow: 0 0 20px rgba(255,71,87,.3)
    }

        .big-wishlist-btn.active i {
            color: #ff4757;
            transform: scale(1.1);
            animation: heartBeat .6s cubic-bezier(.175,.885,.32,1.275)
        }

.wishlist-grid::-webkit-scrollbar {
    width: 4px
}

.wishlist-grid::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.2);
    border-radius: 10px
}

#reward-success-modal, .points-pill {
    justify-content: center;
    align-items: center
}

.king-title-badge, .points-pill {
    font-weight: 700;
    display: inline-flex
}

.points-pill {
    gap: 8px;
    padding: 6px 18px;
    background: rgba(0,0,0,.4);
    border: 1px solid #fc0;
    border-radius: 50px;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    transition: all .3s ease;
    margin-top: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,.2)
}

    .points-pill:hover {
        transform: translateY(-2px);
        background: rgba(255,204,0,.15);
        box-shadow: 0 0 15px rgba(255,204,0,.3)
    }

    .points-pill i {
        color: #fc0;
        font-size: 14px
    }

    .points-pill span {
        font-family: "Tajawal",sans-serif;
        letter-spacing: 1px
    }

#dropdown-user-img.rank-bronze {
    border-color: #cd7f32 !important;
    box-shadow: none !important
}

#dropdown-user-img.rank-gold {
    border-color: gold !important;
    box-shadow: 0 0 15px rgba(255,215,0,.6) !important
}

#dropdown-user-img.rank-diamond {
    border-color: #00e5ff !important;
    box-shadow: 0 0 20px rgba(0,229,255,.8) !important
}

.user-badge.king {
    border-color: gold !important;
    color: gold !important;
    background: rgba(255,215,0,.15) !important;
    box-shadow: 0 0 10px rgba(255,215,0,.3);
    animation: kingPulse 2s infinite alternate
}

.king-title-badge {
    color: gold !important;
    text-shadow: 0 0 10px rgba(255,215,0,.5);
    align-items: center;
    gap: 5px
}

    .king-title-badge::after {
        content: "👑";
        font-size: 1.2em;
        margin-right: 5px;
        filter: drop-shadow(0 0 5px gold);
        animation: floatTitle 2s infinite ease-in-out
    }

#reward-success-modal .modal-body, .code-box {
    position: relative;
    display: flex;
    align-items: center
}

.code-box {
    justify-content: center;
    gap: 10px;
    background: #000;
    color: gold;
    padding: 15px;
    font-size: 18px;
    border: 2px dashed gold;
    margin: 15px 0;
    cursor: pointer;
    border-radius: 10px;
    font-family: monospace;
    direction: ltr;
    word-break: break-all;
    z-index: 1
}

    .code-box:active {
        transform: scale(.98);
        background: #222
    }

    .code-box.copied {
        border-color: #2ecc71 !important;
        color: #2ecc71 !important;
        background: rgba(46,204,113,.1) !important;
        border-style: solid !important;
        box-shadow: 0 0 15px rgba(46,204,113,.4);
        transform: scale(1.02)
    }

    .code-box, .code-box i {
        transition: all .3s ease
    }

#reward-success-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2147483647 !important;
    background: rgba(0,0,0,.9) !important;
    backdrop-filter: blur(10px);
    display: none
}

    #reward-success-modal .modal-body {
        background: #1a1a2e;
        border: 2px solid gold;
        padding: 30px;
        border-radius: 20px;
        width: 90%;
        max-width: 400px;
        box-shadow: 0 0 50px rgba(255,215,0,.3);
        flex-direction: column
    }

.detailed-summary-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 110%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    width: 280px;
    background: rgba(20,20,30,.95);
    border: 1px solid var(--accent-yellow);
    border-radius: 8px;
    padding: 15px;
    z-index: 1000;
    box-shadow: 0 10px 25px rgba(0,0,0,.5);
    backdrop-filter: blur(10px);
    transition: all .3s cubic-bezier(.68,-.55,.27,1.55);
    text-align: right;
    pointer-events: none
}

    .detailed-summary-tooltip::after {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent var(--accent-yellow) transparent
    }

.payment-header-container {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    gap: 8px;
    text-align: center;
    margin-bottom: 25px;
    width: 100%
}

.payment-header-box {
    position: relative;
    overflow: visible !important;
    background-color: rgba(0,0,0,.2);
    padding: 8px;
    border-radius: 8px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 0
}

    .payment-header-box h4 {
        margin: 0 0 4px;
        font-size: 14px;
        color: var(--light-text);
        opacity: .8;
        font-weight: 400;
        border: 0;
        padding: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .payment-header-box .payment-timer-value, .payment-header-box .payment-total-amount-value {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        color: var(--accent-yellow);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

.payment-summary-value {
    margin: 0;
    font-size: 12px !important;
    font-weight: 400;
    color: #e0e0e0;
    white-space: normal;
    line-height: 1.4;
    overflow-wrap: break-word;
    max-height: 50px;
    overflow-y: auto
}

.payment-timer-value.expired {
    color: red;
    animation: shake .5s ease-in-out
}

.payment-header-box:hover .detailed-summary-tooltip {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto
}

.summary-tooltip-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.1);
    padding: 8px 0;
    font-size: 12px;
    color: #eee
}

    .summary-tooltip-item:last-child {
        border-bottom: none
    }

    .summary-tooltip-item span.qty {
        background: var(--main-purple);
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 10px;
        margin-left: 5px
    }

.summary-tooltip-total {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #555;
    text-align: center;
    font-weight: 700;
    color: var(--accent-yellow)
}

.ultimate-bundle-card {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 40px auto;
    border-radius: 20px;
    background: 0 0;
    overflow: hidden;
    cursor: pointer;
    z-index: 1;
    transform: scale(1);
    transition: transform .3s ease,box-shadow .3s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
    box-sizing: border-box
}

    .ultimate-bundle-card:hover {
        transform: scale(1.02);
        box-shadow: 0 20px 50px rgba(120,50,220,.3)
    }

@media (max-width:768px) {
    .ultimate-bundle-card {
        width: calc(100% - 30px) !important;
        margin: 20px auto !important;
        border-radius: 16px;
        padding: 2px
    }

    .animated-border-box {
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: conic-gradient(transparent 0deg,transparent 90deg,gold 180deg,gold 270deg,transparent 360deg);
        animation: spinBorder 4s linear infinite;
        z-index: -1
    }

    .bundle-content-wrapper {
        position: relative;
        background: #101015;
        width: 100%;
        height: 100%;
        border-radius: 14px;
        padding: 20px 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        z-index: 2;
        box-sizing: border-box
    }

    .bundle-title {
        color: #fff;
        font-size: 1.3rem;
        margin: 10px 0;
        font-weight: 800;
        line-height: 1.4
    }

    .bundle-desc {
        color: #b0b0b0;
        font-size: .9rem;
        margin: 0;
        line-height: 1.6;
        padding: 0 10px
    }

    .special-badge {
        font-size: .75rem;
        background: rgba(255,59,48,.15);
        color: #ff3b30;
        padding: 4px 12px;
        border-radius: 50px;
        border: 1px solid rgba(255,59,48,.3);
        font-weight: 700
    }

    .price-pop {
        color: gold;
        font-weight: 900;
        display: inline-block;
        margin-top: 5px
    }
}

#paymentModal.is-visible {
    z-index: 9999999 !important;
    border: 1px solid var(--main-purple) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.4) !important;
    border-radius: 25px !important
}

#paymentModal .payment-header-container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    margin-bottom: 15px !important;
    gap: 8px !important
}

#paymentModal .input-wrapper input {
    width: 100% !important;
    flex-grow: 1
}

#form-parallel-group, #paymentModal .input-wrapper {
    width: 100% !important;
    max-width: 100% !important
}

.security-guarantee-box {
    background: rgba(40,167,69,.1);
    border: 1px solid #28a745;
    border-radius: 10px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    text-align: right
}

    .security-guarantee-box .icon-check {
        font-size: 30px;
        color: #28a745
    }

    .security-guarantee-box h4 {
        color: #28a745;
        margin: 0 0 5px;
        font-size: 16px;
        font-weight: 700
    }

    .security-guarantee-box p {
        color: #e0e0e0;
        margin: 0;
        font-size: 13px;
        line-height: 1.4
    }

.offline-steps-container .step-item {
    background: rgba(27,40,56,.8);
    border-left: 3px solid #66c0f4;
    margin-bottom: 12px;
    padding: 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 15px
}

.offline-steps-container .step-num {
    background-color: #66c0f4;
    color: #000;
    font-weight: 700;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.offline-steps-container p {
    margin: 0;
    color: #c7d5e0;
    font-size: 14px;
    text-align: right
}

.animated-border-box, .animated-border-box-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 300%;
    transform-origin: center;
    animation: rotate-smooth 5s linear infinite
}

.animated-border-box {
    background: conic-gradient(from 0deg,transparent 0%,transparent 20%,#a855f7 40%,#06b6d4 50%,#a855f7 60%,transparent 80%,transparent 100%);
    z-index: -2
}

.animated-border-box-glow {
    background: conic-gradient(from 0deg,transparent 0%,#a855f7 50%,transparent 100%);
    filter: blur(40px);
    opacity: .5;
    z-index: -3
}

.ultimate-bundle-card::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 18px;
    background: linear-gradient(145deg,rgba(30,10,60,.9),rgba(5,5,10,.95));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: -1
}

.page-background {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background-image: url(images/P97JL4qb6z2ofr_OgOOH30QggmrvQWMhEYPrUJZaHw4.gif);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: #000
}

    .page-background::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.8);
        z-index: 0
    }

    .bundle-content-wrapper, .page-background > * {
        position: relative;
        z-index: 2
    }

.bundle-content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 40px
}

.bundle-left {
    flex: 1;
    text-align: right
}

.special-badge {
    display: inline-block;
    background: linear-gradient(90deg,#f05,#f50);
    color: #fff;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 10px;
    box-shadow: 0 0 10px rgba(255,0,85,.5);
    animation: pulse-red 2s infinite
}

#home-bundle-promo h2, .bundle-title {
    color: #fff;
    border: 0 !important;
    padding: 0 !important
}

.bundle-title {
    font-size: 2.5rem;
    margin: 0 0 15px;
    line-height: 1.2
}

.highlight-text {
    color: transparent;
    background: linear-gradient(to right,#00c6ff,#0072ff);
    -webkit-background-clip: text;
    background-clip: text;
    font-weight: 900
}

#home-bundle-promo p, .bundle-desc {
    font-size: 1.1rem;
    color: #ccc;
    line-height: 1.6;
    margin-bottom: 25px
}

.number-pop, .price-pop {
    color: #fc0;
    font-size: 1.4rem;
    font-weight: 700
}

.price-pop {
    color: #00ff9d;
    font-size: 1.5rem;
    text-shadow: 0 0 10px rgba(0,255,157,.3)
}

.bundle-cta-btn {
    background: linear-gradient(45deg,#fc0,#f90);
    border: 0;
    padding: 12px 35px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 700;
    color: #1a0b2e;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all .3s ease;
    box-shadow: 0 5px 15px rgba(255,204,0,.3)
}

    .bundle-cta-btn:hover {
        box-shadow: 0 8px 20px rgba(255,204,0,.5);
        background: linear-gradient(45deg,#f90,#fc0)
    }

    .bundle-cta-btn svg {
        transition: transform .3s ease
    }

    .bundle-cta-btn:hover, .ultimate-bundle-card:hover .bundle-cta-btn svg {
        transform: translateX(-5px)
    }

.bundle-right, .ultimate-bundle-card.selected::before {
    display: flex;
    justify-content: center;
    align-items: center
}

.bundle-right {
    flex: .8;
    position: relative
}

.bundle-main-image {
    width: 280px;
    height: auto;
    z-index: 2;
    filter: drop-shadow(0 0 20px rgba(0,198,255,.4));
    animation: float-img 4s ease-in-out infinite
}

.floating-circle {
    position: absolute;
    border-radius: 50%;
    opacity: .4;
    z-index: 1
}

.circle-1 {
    width: 150px;
    height: 150px;
    background: radial-gradient(circle,rgba(142,106,191,.5),transparent);
    top: -20px;
    right: 20px;
    animation: pulse-glow 4s infinite alternate
}

.ultimate-bundle-card.selected {
    transform: scale(1.02) !important;
    box-shadow: 0 0 30px rgba(0,255,157,.3)
}

    .ultimate-bundle-card.selected::before {
        content: "✔";
        position: absolute;
        top: 20px;
        left: 20px;
        width: 40px;
        height: 40px;
        background: #00ff9d;
        color: #101010;
        border-radius: 50%;
        font-size: 22px;
        font-weight: 900;
        z-index: 10;
        box-shadow: 0 5px 15px rgba(0,255,157,.4);
        animation: popIn .4s cubic-bezier(.175,.885,.32,1.275)
    }

    .ultimate-bundle-card.selected::after {
        background: linear-gradient(145deg,#102a20,#0a1f18);
        border: 2px solid #00ff9d
    }

.circle-2 {
    width: 100px;
    height: 100px;
    background: radial-gradient(circle,rgba(0,255,255,.4),transparent);
    bottom: -10px;
    left: 10px;
    animation: pulse-glow 3s infinite alternate-reverse
}

@media (max-width:768px) {
    .bundle-content-wrapper {
        flex-direction: column-reverse;
        text-align: center;
        padding: 20px
    }

    .bundle-left {
        text-align: center;
        margin-top: 20px
    }

    .bundle-title {
        font-size: 1.8rem
    }

    .bundle-main-image {
        width: 150px
    }

    .ultimate-bundle-card::after {
        inset: 2px
    }
}

.shop-balance, .shop-header {
    display: flex;
    align-items: center
}

.shop-header {
    justify-content: space-between;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,215,0,.2)
}

.shop-balance {
    font-size: 1.4rem;
    font-weight: 900;
    background: linear-gradient(90deg,rgba(0,0,0,.6),rgba(44,26,64,.6));
    padding: 10px 25px;
    border-radius: 50px;
    border: 2px solid var(--accent-yellow);
    box-shadow: 0 0 15px rgba(255,204,0,.3);
    gap: 10px;
    color: #fff
}

.shop-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    padding: 10px;
    width: 100%
}

.reward-card, .reward-image-box {
    display: flex;
    position: relative;
    overflow: hidden
}

.reward-card {
    background: linear-gradient(145deg,#1a1a2e,#16213e);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    transition: all .4s cubic-bezier(.175,.885,.32,1.275);
    flex-direction: column;
    width: 100%;
    max-width: 260px;
    min-width: 220px;
    flex-grow: 1
}

    .reward-card:hover {
        transform: translateY(-8px);
        border-color: var(--accent-yellow);
        box-shadow: 0 10px 30px rgba(0,0,0,.5),0 0 15px rgba(255,215,0,.15)
    }

    .reward-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 50%;
        height: 100%;
        background: linear-gradient(to right,transparent,rgba(255,255,255,.1),transparent);
        transform: skewX(-25deg);
        transition: .5s;
        z-index: 1;
        pointer-events: none
    }

    .reward-card:hover::before {
        left: 150%;
        transition: .7s
    }

.reward-image-box {
    height: 130px;
    background: rgba(0,0,0,.2);
    align-items: center;
    justify-content: center;
    padding: 15px
}

    .reward-image-box img {
        max-height: 90px;
        max-width: 90%;
        filter: drop-shadow(0 5px 15px rgba(0,0,0,.5));
        transition: transform .4s ease;
        z-index: 2
    }

.reward-card:hover .reward-image-box img {
    transform: scale(1.15) rotate(5deg)
}

.reward-info {
    padding: 15px 20px;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    z-index: 2
}

    .reward-info h3 {
        font-size: 1.1rem;
        font-weight: 700;
        color: #fff;
        margin: 0 0 5px
    }

    .reward-info p.reward-desc {
        font-size: .85rem;
        color: #aaa;
        margin-bottom: 15px;
        line-height: 1.4;
        min-height: 40px
    }

.reward-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    background: rgba(255,255,255,.05);
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.05)
}

.price-tag {
    color: var(--accent-yellow);
    font-weight: 800;
    font-size: 1.1rem;
    text-shadow: 0 0 10px rgba(255,204,0,.2)
}

.rank-req {
    font-size: .75rem;
    color: #ce93d8;
    border: 1px solid #ce93d8;
    padding: 2px 8px;
    border-radius: 4px
}

#home-bundle-promo, .buy-reward-btn {
    cursor: pointer;
    position: relative;
    overflow: hidden
}

.buy-reward-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(to bottom,#fc0,#fa0);
    color: #1a0b2e;
    font-weight: 900;
    font-size: 16px;
    border: 0;
    border-radius: 12px;
    transition: all .2s ease;
    box-shadow: 0 5px 0#b37700;
    margin-top: auto
}

    #build-bundle-section::before, .buy-reward-btn::before {
        content: "";
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%
    }

    .buy-reward-btn::before {
        left: -100%;
        background: linear-gradient(to right,transparent,rgba(255,255,255,.4),transparent);
        transform: skewX(-20deg);
        transition: .5s
    }

    .buy-reward-btn:hover::before {
        left: 150%
    }

    .buy-reward-btn:hover {
        transform: translateY(-2px);
        background: linear-gradient(to bottom,gold,#fb0);
        box-shadow: 0 7px 0#b37700
    }

    .buy-reward-btn:active {
        transform: translateY(5px);
        box-shadow: 0 0 0#b37700;
        background: #f90
    }

@media (max-width:768px) {
    .reward-image-box {
        height: 110px
    }

        .reward-image-box img {
            max-height: 75px
        }

    .buy-reward-btn {
        padding: 10px;
        font-size: 14px
    }
}

.gamification-dashboard {
    background: rgba(0,0,0,.3);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    padding: 20px;
    margin: 20px 0;
    backdrop-filter: blur(10px)
}

.rank-display-card {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px
}

.rank-icon-large {
    font-size: 3rem;
    filter: drop-shadow(0 0 15px rgba(255,255,255,.2));
    animation: floatRank 3s ease-in-out infinite
}

.rank-info h3 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 900;
    letter-spacing: 2px
}

.rank-progress-container {
    margin-bottom: 25px
}

.progress-bar-track {
    width: 100%;
    height: 10px;
    background: rgba(255,255,255,.1);
    border-radius: 20px;
    overflow: hidden;
    position: relative
}

.progress-bar-fill {
    background: linear-gradient(90deg,#00c0ff,#0f0);
    position: relative
}

    .progress-bar-fill::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
        transform: translateX(-100%);
        animation: shimmer 2s infinite
    }

.stats-row {
    display: flex;
    justify-content: space-around;
    background: rgba(255,255,255,.05);
    border-radius: 12px;
    padding: 15px
}

.stat-label {
    display: block;
    font-size: .9rem;
    margin-bottom: 5px
}

.stat-value {
    font-size: 1.4rem
}

.nav-rank-badge {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 5px;
    font-weight: 700;
    vertical-align: middle;
    transition: all .3s ease
}

#home-bundle-promo {
    background: linear-gradient(135deg,rgba(44,26,64,.7),rgba(13,6,28,.85));
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(142,106,191,.5);
    box-shadow: 0 10px 30px rgba(0,0,0,.5),inset 0 0 20px rgba(142,106,191,.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 40px;
    margin: 15px auto;
    max-width: 950px;
    min-height: 50px;
    border-radius: 10px;
    transition: all .4s cubic-bezier(.175,.885,.32,1.275)
}

    #home-bundle-promo:hover {
        transform: scale(1.01);
        border-color: #cda1ff;
        box-shadow: 0 5px 20px rgba(142,106,191,.3)
    }

.promo-content {
    z-index: 2;
    flex: 1;
    text-align: right
}

.promo-badge {
    background: linear-gradient(45deg,#8e6abf,#6a4f8a);
    color: #fff;
    font-weight: 700;
    padding: 6px 15px;
    border-radius: 20px;
    display: inline-block;
    font-size: 12px;
    margin-bottom: 15px;
    box-shadow: 0 0 15px rgba(142,106,191,.6);
    border: 1px solid rgba(255,255,255,.2)
}

#home-bundle-promo h2 {
    font-size: 2.2rem !important;
    margin: 5px 0 10px !important;
    text-shadow: 0 0 20px rgba(142,106,191,.6)
}

#home-bundle-promo p {
    color: #e0e0e0
}

.price-highlight {
    color: #cda1ff;
    font-weight: 700;
    font-size: 1.4rem;
    text-shadow: 0 0 10px rgba(205,161,255,.5)
}

.promo-btn {
    background: rgba(255,255,255,.05);
    color: #fff;
    border: 1px solid #cda1ff;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: all .3s ease;
    backdrop-filter: blur(5px)
}

#home-bundle-promo:hover .promo-btn {
    background: #cda1ff;
    color: #1a0b2e;
    box-shadow: 0 0 25px rgba(205,161,255,.6)
}

.promo-image img {
    width: 180px;
    height: auto;
    filter: drop-shadow(0 0 20px rgba(142,106,191,.4));
    animation: floatImage 4s ease-in-out infinite;
    transition: transform .3s
}

#home-bundle-promo:hover .promo-image img {
    transform: scale(1.1) rotate(5deg);
    filter: drop-shadow(0 0 30px rgba(142,106,191,.6))
}

.glow-effect {
    background: radial-gradient(circle,rgba(142,106,191,.15)0,transparent 60%);
    z-index: 0;
    animation: rotateGlow 10s linear infinite
}

@media (max-width:768px) {
    #home-bundle-promo {
        flex-direction: column-reverse;
        text-align: center;
        padding: 25px
    }

    .promo-content {
        text-align: center;
        width: 100%
    }

    .promo-image img {
        width: 150px;
        margin-bottom: 20px
    }

    #home-bundle-promo h2 {
        font-size: 1.8rem !important
    }

    .promo-btn {
        width: 100%
    }
}

.glow-effect {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right,transparent,rgba(0,255,0,.1),transparent);
    transform: skewX(-25deg);
    transition: .5s;
    pointer-events: none
}

#home-bundle-promo:hover .glow-effect {
    animation: scanEffect 1s linear infinite
}

@media (max-width:768px) {
    #home-bundle-promo {
        flex-direction: column-reverse;
        text-align: center;
        padding: 20px
    }

    .promo-content {
        text-align: center;
        width: 100%
    }

    .promo-image img {
        width: 140px;
        margin-bottom: 20px
    }

    #home-bundle-promo h2 {
        font-size: 1.5rem !important
    }

    .promo-btn {
        width: 100%
    }
}

#build-bundle-section {
    position: relative;
    background-image: url(https://i.postimg.cc/nhbtKM7v/ac-shadows-background.webp);
    /* ==================================================
       هنا التعديل السحري لتثبيت الخلفية
       ================================================== */
    /* 1. تثبيت الصورة بالنسبة للشاشة (مش هتتحرك مع السكرول) */
    background-attachment: fixed;
    /* 2. الحجم الطبيعي للصورة */
    background-size: auto;
    /* 3. تكرار الصورة لتملأ الشاشة */
    background-repeat: repeat;
    /* ================================================== */

    background-position: center top; /* ضبط المحاذاة */
    overflow: hidden;
    background-color: transparent !important;
    border: 1px solid rgba(255,255,255,.1);
}

    #build-bundle-section::before {
        left: 0;
        background: rgba(0,0,0,.85);
        z-index: 1
    }

    #build-bundle-section > * {
        position: relative;
        z-index: 2
    }

#bundle-games-grid .product-item {
    background: rgba(255,255,255,.03) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    transition: all .3s cubic-bezier(.25,.8,.25,1);
    position: relative;
    z-index: 1
}

    #bundle-games-grid .product-item:hover {
        transform: translateY(-5px);
        border-color: #0f0 !important;
        box-shadow: 0 0 15px rgba(0,255,0,.3) !important
    }

.product-item.selected-in-bundle {
    border: 2px solid #0f0 !important;
    background: rgba(0,255,0,.05) !important;
    box-shadow: 0 0 25px rgba(0,255,0,.5),inset 0 0 15px rgba(0,255,0,.2) !important;
    transform: scale(1.02)
}

    .product-item.selected-in-bundle::after {
        content: "✔";
        position: absolute;
        top: -10px;
        right: -10px;
        background: #0f0;
        color: #000;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 16px;
        box-shadow: 0 0 10px rgba(0,255,0,.8);
        z-index: 10;
        animation: popIn .3s cubic-bezier(.175,.885,.32,1.275)
    }

#bundle-floating-bar {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 700px;
    background: rgba(10,10,15,.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.1);
    border-bottom: 4px solid #0f0;
    border-radius: 16px;
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 10px 40px rgba(0,0,0,.8);
    z-index: 9999;
    transition: transform .3s ease
}

.bundle-status {
    font-size: 1.1rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px
}

#bundle-counter, .bundle-price {
    font-size: 1.2rem;
    font-weight: 700
}

#bundle-counter {
    background: #0f0;
    color: #000;
    padding: 2px 10px;
    border-radius: 12px
}

.bundle-price {
    color: #ddd;
    text-shadow: 0 2px 5px rgba(0,0,0,.5)
}

#add-bundle-btn:disabled {
    background: #333 !important;
    color: #777 !important;
    border: 1px solid #444 !important;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important
}

#add-bundle-btn:not(:disabled) {
    background: #0f0 !important;
    color: #000 !important;
    border: 0 !important;
    box-shadow: 0 0 20px rgba(0,255,0,.6) !important;
    animation: pulse-green 2s infinite
}

@media (max-width:768px) {
    #bundle-floating-bar {
        bottom: 80px;
        flex-direction: column;
        gap: 15px;
        padding: 15px;
        border-radius: 15px;
        width: 85%
    }

    .bundle-price, .bundle-status {
        width: 100%;
        justify-content: space-between;
        display: flex
    }

    #add-bundle-btn {
        width: 100%;
        padding: 12px !important
    }
}

#google_translate_element {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    z-index: -1;
    opacity: 0
}

.goog-te-banner-frame.skiptranslate, .goog-tooltip, .goog-tooltip:hover {
    display: none !important
}

body {
    top: 0 !important;
    position: static !important
}

.goog-text-highlight {
    background-color: transparent !important;
    box-shadow: none !important
}

.info-tooltip-container {
    position: relative;
    align-self: center;
    order: unset;
    margin-right: 0
}

.tooltip-trigger {
    color: #00c0ff;
    font-size: 16px;
    cursor: pointer;
    transition: color .2s ease
}

    .tooltip-trigger:hover {
        color: #fff
    }

.tooltip-content {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 100%;
    right: auto;
    width: 250px;
    background: linear-gradient(145deg,#1f1133,#0d061c);
    border: 1px solid var(--main-purple);
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,.4);
    color: var(--light-text);
    font-size: 12px;
    text-align: right;
    line-height: 1.5;
    transition: opacity .3s ease,visibility .3s ease,transform .3s ease-out;
    transform: translateY(-50%) translateX(-10px);
    z-index: 2005;
    margin-left: 15px;
    margin-right: 0
}

    .tooltip-content h4 {
        color: var(--accent-yellow);
        font-size: 14px;
        margin-top: 0;
        margin-bottom: 10px;
        border-bottom: 1px solid rgba(255,204,0,.2);
        padding-bottom: 5px
    }

.info-tooltip-container:hover .tooltip-content {
    visibility: visible;
    opacity: 1;
    transform: translateY(-50%) translateX(0)
}

.security-note-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -10px auto 15px;
    max-width: 350px
}

    .security-note-wrapper .security-text {
        font-size: 12px;
        font-weight: 500;
        color: #90ee90;
        opacity: .9
    }

:root {
    --loot-bg-image: url('./images/P97JL4qb6z2ofr_OgOOH30QggmrvQWMhEYPrUJZaHw4.gif')
}

#game-topup-section h2 {
    position: relative;
    display: inline-block;
    z-index: 1;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,.5)
}

    #game-topup-section h2::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: -15px;
        left: -15px;
        right: -15px;
        bottom: -15px;
        background: linear-gradient(45deg,red,#ff7300,#fffb00,#48ff00,#00ffd5,#002bff,#7a00ff,#ff00c8,red);
        background-size: 400%;
        border-radius: 50px;
        filter: blur(25px);
        opacity: .7;
        animation: rgb-title-glow 20s linear infinite
    }

.dropdown-profile-pic {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--accent-yellow);
    box-shadow: 0 0 15px rgba(0,0,0,.5)
}

    .dropdown-profile-pic:hover {
        transform: scale(1.1);
        box-shadow: 0 0 20px var(--accent-yellow);
        border-color: #fff
    }

.dashboard-container {
    background: rgba(0,0,0,.2);
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 20px;
    padding: 20px;
    margin-top: 20px;
    position: relative;
    overflow: hidden
}

.rank-section {
    margin-bottom: 25px;
    position: relative;
    z-index: 2
}

.rank-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 10px
}

.current-rank-badge {
    font-size: 14px;
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 8px
}

.next-rank-info {
    font-size: 11px;
    color: #aaa;
    background: rgba(0,0,0,.3);
    padding: 4px 10px;
    border-radius: 20px
}

.progress-fill, .progress-track {
    border-radius: 10px;
    position: relative
}

.progress-track {
    width: 100%;
    height: 12px;
    background: rgba(255,255,255,.05);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.1)
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg,#fc0,#f90);
    width: 0%;
    box-shadow: 0 0 15px rgba(255,204,0,.4);
    transition: width 1.5s cubic-bezier(.22,1,.36,1)
}

    .progress-fill::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: linear-gradient(90deg,rgba(255,255,255,0)0,rgba(255,255,255,.4) 50%,rgba(255,255,255,0) 100%);
        transform: translateX(-100%);
        animation: shimmer 2s infinite
    }

.stats-grid-modern {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px
}

.stat-box-modern {
    background: linear-gradient(145deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 16px;
    padding: 15px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all .3s ease;
    overflow: hidden
}

    .stat-box-modern:hover {
        background: rgba(255,255,255,.07);
        transform: translateY(-2px);
        border-color: rgba(255,204,0,.3)
    }

.stat-bg-icon {
    position: absolute;
    right: -10px;
    bottom: -10px;
    font-size: 60px;
    opacity: .05;
    color: #fff;
    transform: rotate(-15deg);
    pointer-events: none
}

.stat-value {
    font-size: 24px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 10px rgba(255,255,255,.3);
    margin-bottom: 5px
}

.stat-label {
    font-size: 12px;
    color: #bbb;
    text-transform: uppercase;
    letter-spacing: .5px
}

.stat-value.gold {
    color: var(--accent-yellow);
    text-shadow: 0 0 10px rgba(255,204,0,.4)
}

.stat-value.blue {
    color: #00e5ff;
    text-shadow: 0 0 10px rgba(0,229,255,.4)
}

.dashboard-divider {
    height: 1px;
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);
    margin: 20px 0
}

.profile-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin: 20px 0
}

.stat-card, .stat-icon-wrapper {
    display: flex;
    align-items: center
}

.stat-card {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    padding: 15px;
    gap: 15px;
    transition: transform .3s ease
}

    .stat-card:hover {
        transform: translateY(-3px);
        background: rgba(255,255,255,.08);
        border-color: var(--accent-yellow)
    }

.stat-icon-wrapper {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    background: rgba(0,0,0,.3);
    justify-content: center;
    font-size: 20px;
    color: var(--accent-yellow)
}

.stat-info h4 {
    margin: 0;
    font-size: 18px;
    color: #fff
}

.stat-info span {
    font-size: 12px;
    color: #ccc
}

.rank-progress-wrapper {
    background: rgba(0,0,0,.3);
    padding: 20px;
    border-radius: 16px;
    margin: 25px 0;
    border: 1px solid rgba(255,204,0,.1)
}

.progress-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 700
}

.progress-bar-bg {
    width: 100%;
    height: 10px;
    background-color: rgba(255,255,255,.1);
    border-radius: 50px;
    overflow: hidden;
    position: relative
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg,var(--accent-yellow),#f90);
    width: 0%;
    border-radius: 50px;
    transition: width 1.5s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 0 10px rgba(255,204,0,.5)
}

.badges-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px
}

.user-badge {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    display: flex;
    align-items: center;
    gap: 5px;
    color: #eee;
    transition: all .3s
}

    .user-badge:hover {
        transform: scale(1.05);
        background: rgba(255,255,255,.2)
    }

    .user-badge.vip {
        border-color: #00e5ff;
        color: #00e5ff;
        box-shadow: 0 0 5px rgba(0,229,255,.2)
    }

    .user-badge.early {
        border-color: #ff4757;
        color: #ff4757
    }

    .user-badge.verified {
        border-color: var(--accent-yellow);
        color: var(--accent-yellow)
    }

.edit-profile-trigger-corner {
    position: absolute;
    top: 25px;
    left: 25px;
    width: 45px;
    height: 45px;
    background: rgba(255,204,0,.15);
    border: 2px solid var(--accent-yellow);
    color: var(--accent-yellow);
    font-size: 20px;
    transition: all .3s cubic-bezier(.175,.885,.32,1.275);
    z-index: 10;
    box-shadow: 0 0 15px rgba(0,0,0,.3)
}

    .edit-profile-trigger-corner:hover, .edit-profile-trigger:hover {
        background: var(--accent-yellow);
        color: #000;
        transform: scale(1.15) rotate(10deg);
        box-shadow: 0 0 20px rgba(255,204,0,.6)
    }

#avatar-edit-trigger, .edit-profile-trigger, .edit-profile-trigger-corner {
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

.edit-profile-trigger {
    background: rgba(255,204,0,.1);
    border: 1px solid var(--accent-yellow);
    color: var(--accent-yellow);
    width: 32px;
    height: 32px;
    transition: all .3s cubic-bezier(.175,.885,.32,1.275)
}

    .edit-profile-trigger:hover {
        transform: scale(1.15) rotate(15deg);
        box-shadow: 0 0 15px rgba(255,204,0,.4)
    }

#profile-edit-mode .profile-avatar-large {
    border-color: #fff;
    filter: brightness(.8)
}

#avatar-edit-trigger {
    background: var(--main-purple);
    color: #fff;
    width: 35px;
    height: 35px;
    position: absolute;
    bottom: 0;
    right: 0;
    border: 2px solid #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,.3);
    transition: transform .2s ease;
    z-index: 10
}

    #avatar-edit-trigger:hover {
        transform: scale(1.1);
        background: var(--accent-yellow);
        color: #000
    }

#name-input-wrapper-center {
    transition: all .3s ease;
    border: 1px solid rgba(255,255,255,.3)
}

    #name-input-wrapper-center:focus-within {
        border-color: var(--accent-yellow) !important;
        box-shadow: 0 0 15px rgba(255,204,0,.2);
        transform: translateY(-2px)
    }

.profile-actions-container button {
    transition: transform .2s ease,box-shadow .2s ease
}

#user-dropdown-menu {
    background: linear-gradient(145deg,rgba(20,15,35,.95),rgba(10,5,20,.98)) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 0 15px 40px rgba(0,0,0,.6) !important;
    padding: 10px !important;
    min-width: 250px !important;
    overflow: hidden;
    transform-origin: top center
}

    #user-dropdown-menu > div:first-child {
        background: rgba(255,255,255,.03) !important;
        border-radius: 12px !important;
        margin-bottom: 10px !important;
        padding: 15px !important;
        border: 1px dashed rgba(255,255,255,.1) !important;
        text-align: center
    }

    #user-dropdown-menu a.nav-link {
        display: flex !important;
        align-items: center !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        gap: 15px !important;
        color: #eee !important;
        background-color: transparent !important;
        padding: 12px 16px !important;
        margin-bottom: 4px !important;
        border-radius: 12px !important;
        border: 0 !important;
        font-weight: 700 !important;
        font-size: 15px !important;
        text-shadow: none !important;
        box-shadow: none !important;
        transition: all .2s ease-out !important
    }

        #user-dropdown-menu a.nav-link:not(.logout-btn):hover {
            background-color: rgba(255,255,255,.1) !important;
            color: #fff !important;
            transform: translateX(-4px);
            box-shadow: 0 4px 15px rgba(0,0,0,.2) !important
        }

        #user-dropdown-menu a.nav-link i {
            font-size: 18px !important;
            width: 24px !important;
            text-align: center;
            margin: 0 !important;
            color: #fff !important;
            opacity: .8;
            text-shadow: none !important;
            filter: none !important;
            transition: transform .2s ease,opacity .2s ease
        }

        #user-dropdown-menu a.nav-link:not(.logout-btn):hover i {
            opacity: 1;
            transform: scale(1.1);
            text-shadow: 0 0 5px rgba(255,255,255,.4) !important
        }

.user-dropdown-icon {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain;
    margin: 0 !important;
    filter: brightness(0) invert(1) !important;
    opacity: .8;
    transition: transform .2s ease,opacity .2s ease
}

#user-dropdown-menu a.nav-link:hover .user-dropdown-icon {
    opacity: 1;
    transform: scale(1.1)
}

.dropdown-divider {
    background: rgba(255,255,255,.1) !important
}

#user-dropdown-menu a.logout-btn {
    margin-top: 10px !important;
    color: #ff5c5c !important;
    background-color: rgba(255,92,92,.05) !important
}

    #user-dropdown-menu a.logout-btn:hover {
        background-color: rgba(255,92,92,.15) !important;
        color: #ff2e2e !important;
        transform: none !important;
        box-shadow: none !important
    }

    #user-dropdown-menu a.logout-btn i {
        color: #ff5c5c !important;
        text-shadow: none !important
    }

@media (min-width:769px) {
    #user-dropdown-menu {
        right: auto !important;
        left: 50% !important;
        transform: translateX(-50%) translateY(10px) !important;
        margin-top: 12px !important
    }

        #user-dropdown-menu[style*="visibility: visible"], .dropdown:hover #user-dropdown-menu {
            transform: translateX(-50%) translateY(0) !important;
            opacity: 1 !important;
            visibility: visible !important
        }

        #user-dropdown-menu::before {
            right: auto !important;
            left: 50% !important;
            transform: translateX(-50%) rotate(45deg) !important
        }
}

@media (max-width:768px) {
    #designs, #developing, #discord-decorations-section, #feedback-section, #fortnite, #game-rentals-section, #game-topup-section, #games-section, #gaming-services-section, #marvelRivals, #offline-steam-section, #personal-gifting-section, #playstation-section, #roblox, #rocketleague, #services-section, #software-keys-section, #steam-gift-cards-section, #steam-points-section, #subscriptions-section, #xbox-gifting-section, .glass-card, .main-products-section, .section {
        background: 0 0 !important;
        background-image: none !important;
        background-color: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        padding: 0 !important;
        margin: 20px 0 !important;
        border-radius: 0 !important;
        animation: none !important
    }

        #designs::before, #developing::before, #discord-decorations-section::before, #fortnite::before, #game-rentals-section::before, #game-topup-section::before, #games-section::after, #games-section::before, #marvelRivals::before, #playstation-section::before, #roblox::before, #rocketleague::before, #software-keys-section::before, #steam-gift-cards-section::before, #steam-points-section::before, #subscriptions-section::before, #xbox-gifting-section::before, .glass-card::after, .glass-card::before, .main-products-section::after, .main-products-section::before, .section::after, .section::before {
            display: none !important;
            content: none !important;
            background: 0 0 !important;
            animation: none !important
        }

        #games-section h2, .main-products-section h2, h2 {
            text-align: right !important;
            margin-right: 15px !important;
            margin-bottom: 15px !important;
            font-size: 1.4rem !important;
            color: var(--white-text) !important;
            text-shadow: 0 2px 5px rgba(0,0,0,.8) !important;
            border-right: 4px solid var(--accent-yellow) !important;
            padding-right: 10px !important;
            display: inline-block !important
        }

    #homeSoftwareSubscriptionsContainer, #homeTvSubscriptionsContainer, #softwareKeysContainer, #xboxGiftCardsContainer, #xboxPopularGamesContainer, .products-container {
        width: 100% !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        overflow: visible !important
    }

    .custom-order-card, .gaming-key-card, .product-item, .rental-card, .service-offer-card, .software-card-unique, .subscription-item {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        background: linear-gradient(145deg,#150a25,#08050e) !important;
        border: 1px solid rgba(142,106,191,.5) !important;
        box-shadow: 0 4px 10px rgba(0,0,0,.4) !important;
        border-radius: 12px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 10px !important
    }

    .subscription-item {
        min-height: 220px !important
    }

        .subscription-item .product-image-wrapper, .subscription-item .sub-image-wrapper {
            height: 90px !important;
            width: 100% !important
        }

        .subscription-item img {
            object-fit: cover !important
        }

        .subscription-item h3 {
            font-size: 13px !important;
            min-height: 30px !important;
            margin: 5px 0 !important
        }

        .subscription-item .product-description-text, .subscription-item .sub-description {
            display: none !important
        }

        .subscription-item .sub-price {
            font-size: 14px !important;
            margin: 5px 0 !important
        }

        .subscription-item .buy-btn {
            font-size: 12px !important;
            padding: 6px 10px !important;
            width: 100% !important
        }

    #xboxGiftCardsContainer .product-item {
        min-height: 140px !important;
        padding: 5px !important
    }
}

.dropdown-divider {
    height: 1px !important;
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent) !important;
    margin: 8px 0 !important;
    border: 0 !important
}

.dropdown-content a:hover {
    box-shadow: none !important;
    filter: brightness(1) !important
}

@media (max-width:768px) {
    #user-dropdown-menu {
        position: fixed !important;
        top: 75px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) translateY(10px);
        width: 90% !important;
        max-width: 350px !important;
        background: linear-gradient(145deg,rgba(29,16,51,.95),rgba(11,7,20,.98)) !important;
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        border-radius: 20px !important;
        border: 1px solid rgba(255,204,0,.3) !important;
        box-shadow: 0 10px 40px rgba(0,0,0,.8) !important;
        padding: 10px !important;
        z-index: 99999 !important;
        transition: all .3s cubic-bezier(.68,-.55,.265,1.55) !important
    }

        #user-dropdown-menu[style*="visibility: visible"] {
            transform: translateX(-50%) translateY(0) !important;
            opacity: 1 !important
        }

        #user-dropdown-menu a.nav-link {
            font-size: 16px !important;
            padding: 15px 20px !important;
            margin: 5px 0 !important;
            border-radius: 12px !important;
            background-color: rgba(255,255,255,.03) !important;
            justify-content: space-between !important;
            flex-direction: row-reverse !important;
            border: 1px solid transparent
        }

            #user-dropdown-menu a.nav-link span {
                font-size: 16px !important;
                font-weight: 700 !important
            }

            #user-dropdown-menu a.nav-link:active {
                background-color: rgba(255,204,0,.1) !important;
                border-color: var(--accent-yellow) !important
            }

            #user-dropdown-menu a.nav-link i {
                font-size: 20px !important;
                margin: 0 !important
            }

        #user-dropdown-menu > div:first-child {
            background: rgba(255,255,255,.05) !important;
            border-radius: 15px !important;
            margin-bottom: 15px !important;
            padding: 15px !important;
            border: 1px dashed rgba(255,255,255,.1)
        }

        #user-dropdown-menu a.logout-btn {
            background-color: rgba(255,71,87,.1) !important;
            color: #ff4757 !important;
            border: 1px solid rgba(255,71,87,.2) !important;
            margin-top: 15px !important
        }

            #user-dropdown-menu a.logout-btn i {
                color: #ff4757 !important
            }
}

.interactive-pill {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) scale(0);
    width: 150px;
    height: auto;
    z-index: 2147483647;
    cursor: pointer;
    transition: all .5s cubic-bezier(.175,.885,.32,1.275);
    filter: drop-shadow(0 0 20px rgba(255,0,0,.5));
    display: none
}

    .interactive-pill.show {
        display: block;
        transform: translate(-50%,-50%) scale(1)
    }

        .interactive-pill.show:hover {
            transform: translate(-50%,-50%) scale(1.1) rotate(10deg);
            filter: drop-shadow(0 0 30px rgba(255,0,0,.8))
        }

.ps-trophy-alert {
    background: rgba(15,15,20,.95);
    border: 1px solid rgba(255,255,255,.1);
    min-width: 250px
}

.trophy-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2
}

.trophy-subtitle {
    font-size: 10px;
    color: #ccc;
    text-transform: uppercase;
    letter-spacing: 1px
}

.trophy-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff
}

.ps-trophy-alert {
    z-index: 2147483647 !important
}

.transfer-instruction-line {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--light-text);
    text-align: center
}

.number-copy-capsule {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 12px;
    border-radius: 50px;
    background: rgba(255,255,255,.05);
    border: 1px solid silver;
    box-shadow: 0 0 5px rgba(192,192,192,.3);
    cursor: pointer;
    transition: all .3s ease
}

    .number-copy-capsule:hover {
        background: rgba(255,255,255,.15);
        box-shadow: 0 0 10px rgba(192,192,192,.6);
        transform: translateY(-1px)
    }

    .number-copy-capsule .vodafone-number {
        color: var(--accent-yellow);
        font-weight: 700;
        font-family: "Tajawal",sans-serif;
        letter-spacing: 1px;
        line-height: 1
    }

    .number-copy-capsule .copy-icon {
        font-size: 14px;
        color: silver;
        transition: color .3s
    }

    .number-copy-capsule.copied {
        border-color: #2ecc71;
        box-shadow: 0 0 10px rgba(46,204,113,.4)
    }

        .number-copy-capsule.copied .copy-icon {
            color: #2ecc71
        }

.support-title {
    font-size: 2rem !important;
    color: #fff;
    margin-bottom: 5px !important;
    text-shadow: 0 0 20px rgba(255,255,255,.1)
}

.support-subtitle {
    color: #ccc;
    font-size: .9rem;
    margin-bottom: 30px;
    opacity: .8
}

.support-cards-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    max-width: 450px;
    margin: 0 auto
}

.support-card {
    display: flex;
    align-items: center;
    background: linear-gradient(145deg,rgba(255,255,255,.05),rgba(0,0,0,.2));
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    padding: 15px 20px;
    cursor: pointer;
    transition: all .3s cubic-bezier(.25,.8,.25,1);
    position: relative;
    overflow: hidden;
    text-decoration: none
}

    .support-card .icon-wrapper {
        width: 50px;
        height: 50px;
        background: rgba(0,0,0,.3);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        margin-left: 15px;
        transition: transform .3s ease
    }

    .support-card .text-wrapper {
        flex-grow: 1;
        text-align: right;
        display: flex;
        flex-direction: column
    }

        .support-card .text-wrapper .label {
            font-size: 12px;
            color: #aaa;
            margin-bottom: 2px
        }

        .support-card .text-wrapper .value {
            font-size: 15px;
            font-weight: 700;
            color: #fff;
            font-family: "Cairo",sans-serif;
            direction: ltr;
            text-align: right
        }

    .support-card .action-icon {
        color: #666;
        font-size: 18px;
        transition: color .3s ease;
        position: relative
    }

.email-card:hover {
    border-color: var(--accent-yellow);
    box-shadow: 0 0 25px rgba(255,204,0,.15);
    transform: translateY(-3px)
}

.email-card .icon-wrapper {
    color: var(--accent-yellow)
}

.email-card:hover .icon-wrapper {
    background: var(--accent-yellow);
    color: #000;
    transform: scale(1.1) rotate(-10deg)
}

.discord-card:hover {
    border-color: #5865f2;
    box-shadow: 0 0 25px rgba(88,101,242,.25);
    transform: translateY(-3px)
}

.discord-card .icon-wrapper {
    color: #5865f2
}

.discord-card:hover .icon-wrapper {
    background: #5865f2;
    color: #fff;
    transform: scale(1.1) rotate(10deg)
}

.tooltip {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--green-buy-btn);
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
    white-space: nowrap
}

.copied .tooltip {
    opacity: 1;
    top: -35px
}

.support-footer {
    margin-top: 20px;
    font-size: 12px;
    color: rgba(255,255,255,.9) !important;
    border-top: 1px solid rgba(255,255,255,.05);
    padding-top: 10px
}

.support-header-icon {
    color: var(--accent-yellow);
    margin-left: 10px;
    font-size: 1.2em;
    vertical-align: middle;
    text-shadow: 0 0 10px rgba(255,204,0,.4);
    animation: support-icon-pulse 2s infinite ease-in-out
}

.rank-label {
    margin: 0 0 8px !important;
    padding: 0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #fff !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 0 0 5px rgba(255,255,255,.6);
    animation: white-gaming-pulse 1.5s ease-in-out infinite alternate
}

#avatar-selection-area .avatars-grid img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all .3s;
    box-sizing: border-box
}

    #avatar-selection-area .avatars-grid img:hover {
        transform: scale(1.15);
        border-color: #fff !important;
        box-shadow: 0 0 10px rgba(255,255,255,.7)
    }

    #avatar-selection-area .avatars-grid img.selected-avatar {
        border-color: var(--accent-yellow) !important;
        box-shadow: 0 0 15px var(--accent-yellow);
        transform: scale(1.1)
    }

        #avatar-selection-area .avatars-grid img.selected-avatar:hover {
            box-shadow: 0 0 20px var(--accent-yellow),0 0 5px rgba(255,255,255,.8)
        }

.confirm-payment-btn:disabled {
    background: #44475a !important;
    border-color: #44475a !important;
    opacity: .65;
    transform: none !important;
    box-shadow: none !important;
    cursor: not-allowed !important
}

.loading-spinner {
    vertical-align: middle;
    margin-left: 8px
}

.profile-actions-container {
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.08)
}

.confirm-payment-btn {
    background: linear-gradient(135deg,var(--green-buy-btn) 0%,#208e40 100%) !important;
    padding: 12px 30px !important;
    border: 2px solid var(--green-buy-btn) !important;
    box-shadow: 0 5px 15px rgba(33,150,83,.4) !important
}

    .confirm-payment-btn:hover, .profile-actions-container .buy-btn:hover {
        transform: translateY(-3px) scale(1.02);
        box-shadow: 0 8px 20px rgba(33,150,83,.6) !important;
        filter: brightness(1.1)
    }

.confirm-payment-btn, .profile-actions-container .buy-btn {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    transition: all .3s ease !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 180px
}

.profile-actions-container .buy-btn {
    background: linear-gradient(135deg,#ff4757 0,#e63946 100%) !important;
    padding: 12px 25px !important;
    border: 2px solid #ff4757 !important;
    box-shadow: 0 5px 15px rgba(255,71,87,.4) !important
}

    .profile-actions-container .buy-btn:hover {
        box-shadow: 0 8px 20px rgba(255,71,87,.6) !important
    }

@media (max-width:768px) {
    .profile-actions-container {
        flex-direction: column;
        align-items: stretch
    }

        .profile-actions-container button {
            width: 100%;
            margin-right: 0 !important
        }
}

#profile-settings-page .input-wrapper#name-input-wrapper-center {
    border: 1px solid #fff !important;
    box-shadow: 0 0 8px rgba(255,255,255,.4) !important
}

    #profile-settings-page .input-wrapper#name-input-wrapper-center i.fas.fa-user {
        color: #fff !important;
        text-shadow: none !important
    }

    #profile-settings-page .input-wrapper#name-input-wrapper-center:focus-within {
        border-color: var(--accent-yellow) !important;
        box-shadow: 0 0 10px rgba(255,204,0,.6) !important
    }

        #profile-settings-page .input-wrapper#name-input-wrapper-center:focus-within i.fas.fa-user {
            color: var(--accent-yellow) !important
        }

.avatar-action-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,.1)
}

    .avatar-action-buttons button:hover {
        transform: translateY(-2px)
    }

    .avatar-action-buttons .cancel-avatar-btn, .avatar-action-buttons .save-avatar-btn {
        color: #fff;
        font-weight: 700;
        padding: 10px 25px;
        border-radius: 50px;
        border: 0;
        cursor: pointer;
        transition: transform .2s
    }

    .avatar-action-buttons .save-avatar-btn {
        background-color: var(--green-buy-btn)
    }

    .avatar-action-buttons .cancel-avatar-btn {
        background-color: #6c757d
    }

.ps-trophy-alert {
    position: fixed;
    top: 50px;
    left: 0;
    transform: translate(-120%,0);
    background: linear-gradient(90deg,#0070d1 0,#00457c 100%);
    color: #fff;
    padding: 10px 15px;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 0 15px rgba(0,112,209,.8);
    font-family: "Arial",sans-serif;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    animation: trophy-slide-in .4s cubic-bezier(.175,.885,.32,1.275) forwards
}

    .ps-trophy-alert .trophy-icon {
        font-size: 20px;
        color: gold;
        text-shadow: 0 0 5px #fc0
    }

    .ps-trophy-alert .trophy-text {
        font-weight: 700;
        direction: ltr
    }

    .ps-trophy-alert.hide {
        animation: none;
        opacity: 0;
        transform: translate(0,-50%);
        transition: opacity .5s ease-out 1s,transform .5s ease-out 1s
    }

#my-orders-page .summary-value {
    margin-top: -10px !important;
    margin-bottom: 5px !important
}

#my-orders-page .user-rank-display-small {
    font-size: 14px;
    font-weight: 700;
    color: #00e5ff;
    text-shadow: 0 0 5px rgba(0,229,255,.4);
    margin-top: -5px !important
}

.checkmark-icon {
    font-size: 5rem;
    color: #0f0 !important;
    margin-bottom: 25px;
    text-shadow: 0 0 15px rgba(0,255,0,.7),0 0 30px rgba(0,255,0,.5);
    animation: pulse-checkmark 1.5s infinite alternate
}

.thank-you-title {
    font-size: 2.2rem !important;
    color: #0f0 !important;
    margin: 0 !important;
    text-shadow: 0 0 8px rgba(0,255,0,.7);
    font-weight: 700
}

.thank-you-divider {
    border: 0;
    border-top: 2px solid rgba(0,255,0,.4);
    width: 60%;
    margin: 15px auto 25px
}

.thank-you-text {
    font-size: 1.3rem !important;
    color: #c0f0c0 !important;
    line-height: 1.6;
    margin-top: 0 !important
}

#my-orders-page .page-header-info, .input-label-group {
    display: flex;
    align-items: center;
    justify-content: space-between
}

#my-orders-page .page-header-info {
    margin-bottom: 20px;
    padding: 10px 0
}

#my-orders-page #orders-page-icon {
    max-width: 120px;
    height: auto;
    filter: drop-shadow(0 0 8px rgba(255,204,0,.6));
    margin: 0;
    flex-shrink: 0
}

#my-orders-page #orders-summary-box {
    text-align: left;
    padding-left: 15px
}

#my-orders-page .thin-divider {
    border: 0;
    border-top: 1px solid rgba(255,255,255,.15);
    margin: 0 0 30px
}

#my-orders-page .summary-label {
    font-size: 14px;
    color: #ccc;
    margin: 0 0 5px
}

#my-orders-page .summary-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent-yellow);
    line-height: 1
}

#name-input-wrapper-center {
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 400px !important
}

.input-label-group {
    gap: 15px;
    width: 100%
}

    .input-label-group .input-label-text {
        flex-shrink: 0;
        font-weight: 700;
        display: inline-block !important
    }

    .input-label-group .input-wrapper {
        flex-grow: 1;
        max-width: 350px
    }

.profile-actions-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 35px;
    flex-wrap: wrap
}

    .profile-actions-container button {
        width: 180px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 12px 15px !important;
        font-size: 15px !important
    }

    .profile-actions-container .buy-btn i {
        margin-left: 8px !important;
        margin-right: 0 !important
    }

    .profile-actions-container .confirm-payment-btn i {
        margin-right: 8px !important;
        margin-left: 0 !important
    }

#profile-settings-page::after {
    content: "";
    position: absolute;
    inset: 3px;
    background-image: linear-gradient(rgba(30,17,50,.7),rgba(17,10,26,.9)),url(./images/my-keys-bg.png) !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 18px;
    z-index: -1;
    filter: blur(15px);
    transition: filter .5s ease-in-out;
    box-shadow: 0 0 50px rgba(205,161,255,.2)
}

.avatar-category-divider {
    border-bottom: 1px solid rgba(255,255,255,.15);
    padding-bottom: 20px;
    margin-bottom: 20px
}

#avatar-selection-area {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .4s cubic-bezier(.23,1,.32,1),opacity .3s ease-in-out;
    padding: 0 15px;
    margin: 0 auto;
    border-bottom: 1px solid transparent
}

    #avatar-selection-area.open-dropdown {
        max-height: 800px;
        opacity: 1;
        padding: 15px 15px 25px;
        border-bottom: 1px solid rgba(255,255,255,.1);
        margin-bottom: 20px
    }

@media (max-width:992px) {
    #navbar .nav-middle-section, .navbar-search-container {
        display: none !important
    }

    #navbar {
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        padding: 4px 10px !important;
        height: auto !important
    }

    .nav-utility-section {
        display: flex !important;
        order: 2 !important;
        align-items: center !important;
        gap: 10px !important
    }

    #user-account-btn {
        display: flex !important;
        padding: 0 !important;
        margin: 0 !important
    }

    body {
        padding-top: 55px !important
    }
}

#itakura-trick-text {
    color: var(--dark-bg) !important;
    font-size: 10px;
    font-weight: 400;
    text-shadow: none !important
}

    #itakura-trick-text::selection {
        background: var(--accent-yellow);
        color: #000
    }

    #itakura-trick-text::-moz-selection {
        background: var(--accent-yellow);
        color: #000
    }

#store-reviews-list {
    margin: 20px auto 10px !important
}

    #store-reviews-list .comment-card {
        background: rgba(44,26,64,.4);
        padding: 15px 20px;
        border-radius: 10px;
        border: 1px solid rgba(142,106,191,.5);
        box-shadow: 0 4px 15px rgba(0,0,0,.3);
        transition: transform .2s ease-in-out
    }

        #store-reviews-list .comment-card:hover {
            transform: translateY(-3px);
            border-color: var(--accent-yellow);
            box-shadow: 0 6px 20px rgba(0,0,0,.4)
        }

    #store-reviews-list .comment-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px
    }

    #store-reviews-list .comment-author {
        font-size: 16px;
        font-weight: 700;
        color: var(--accent-yellow)
    }

    #store-average-rating-display .stars, #store-reviews-list .comment-rating {
        font-size: 18px;
        direction: ltr
    }

        #store-average-rating-display .stars .star, #store-reviews-list .comment-rating .star {
            font-size: 24px;
            transition: all .2s ease
        }

            #store-average-rating-display .stars .star.filled, #store-reviews-list .comment-rating .star.filled {
                color: var(--accent-yellow) !important;
                text-shadow: 0 0 5px rgba(255,204,0,.7),0 0 10px rgba(255,204,0,.5),0 0 15px rgba(255,204,0,.3)
            }

            #store-reviews-list .comment-rating .star.empty {
                color: #444;
                text-shadow: none
            }

            #store-average-rating-display .stars .star.empty {
                text-shadow: none
            }

    #store-reviews-list .comment-text {
        font-size: 15px;
        color: var(--light-text);
        line-height: 1.6;
        margin: 0
    }

#store-average-rating-display {
    background: linear-gradient(145deg,#1f1133,#110e1a);
    border: 1px solid var(--accent-yellow);
    box-shadow: 0 0 25px rgba(255,204,0,.3);
    margin-top: 5px !important;
    margin-bottom: 10px !important
}

#feedback-section > :last-child {
    margin-bottom: 0 !important
}

#store-average-rating-display .summary-text {
    color: #fff
}

#nav-user-img, .profile-avatar-large {
    transition: all .5s ease-in-out;
    box-sizing: border-box
}

.rank-bronze {
    border: 3px solid #cd7f32 !important;
    filter: grayscale(.2);
    box-shadow: none !important
}

.dropdown-profile-pic {
    transition: all .3s ease
}

.rank-gold {
    border: 3px solid gold !important;
    box-shadow: 0 0 15px rgba(255,215,0,.6)
}

.rank-diamond {
    border: 3px solid #00e5ff !important;
    box-shadow: 0 0 20px rgba(0,229,255,.8);
    animation: diamond-pulse 2s infinite alternate
}

.user-rank-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    margin-top: 3px;
    display: inline-block;
    color: #110e1a
}

.auth-fields-container, .auth-modal-body {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important
}

.auth-modal-body {
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
    padding: 40px 30px !important;
    max-width: 400px !important;
    margin: 0 auto !important
}

    .auth-modal-body h2 {
        color: #fff !important;
        margin: 0 0 10px !important;
        font-size: 24px !important;
        border: 0 !important
    }

.auth-fields-container {
    gap: 12px !important
}

.auth-input-group {
    width: 100% !important;
    margin: 0 !important
}

.auth-field {
    width: 100% !important;
    height: 50px !important;
    padding: 0 15px !important;
    border-radius: 10px !important;
    border: 1px solid #8e6abf !important;
    background: rgba(255,255,255,.05) !important;
    color: #fff !important;
    font-size: 16px !important;
    text-align: center !important;
    box-sizing: border-box !important;
    transition: all .3s ease !important
}

    .auth-field:focus {
        border-color: var(--accent-yellow) !important;
        background: rgba(255,255,255,.1) !important;
        box-shadow: 0 0 10px rgba(255,204,0,.2) !important;
        outline: 0 !important
    }

#authModal input.auth-field, .modal-submit-btn {
    width: 100% !important;
    font-size: 16px !important;
    border-radius: 10px !important;
    margin: 0 !important
}

.google-auth-btn, .modal-submit-btn {
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important
}

.modal-submit-btn {
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: transform .2s !important;
    padding: 0 !important
}

.google-auth-btn {
    width: 100% !important
}

.modal-submit-btn {
    background-color: var(--accent-yellow) !important;
    color: var(--black-text) !important;
    border: 0 !important
}

.google-auth-btn {
    gap: 10px !important
}

    .google-auth-btn img, .google-auth-btn span {
        flex-grow: 0 !important;
        margin: 0 !important
    }

    .google-auth-btn:hover, .modal-submit-btn:hover {
        transform: translateY(-2px) !important;
        filter: brightness(1.1)
    }

#authModal .modal-body, .auth-separator {
    display: flex !important;
    align-items: center !important
}

.auth-separator {
    width: 100% !important;
    color: rgba(255,255,255,.5) !important;
    font-size: 14px !important;
    margin: 5px 0 !important
}

    .auth-separator::after, .auth-separator::before {
        flex: 1 !important;
        height: 1px !important;
        background: rgba(255,255,255,.2) !important;
        content: "";
        border-bottom: 1px solid rgba(255,255,255,.2)
    }

    .auth-separator span {
        padding: 0 10px !important
    }

.auth-footer-text {
    margin-top: 10px !important;
    color: #ccc !important;
    font-size: 14px !important;
    line-height: 1.6 !important
}

.auth-toggle-btn {
    font-weight: 700 !important;
    cursor: pointer !important;
    text-decoration: underline !important;
    display: inline-block !important;
    margin-right: 5px !important
}

.auth-separator {
    text-align: center;
    color: #aaa
}

.google-auth-btn {
    background-color: #fff !important;
    color: #333 !important;
    border: 0 !important;
    border-radius: 8px !important;
    padding: 12px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: transform .2s,box-shadow .2s !important;
    margin: 0 !important
}

    .google-auth-btn img {
        width: 20px;
        height: 20px
    }

    .google-auth-btn:hover {
        box-shadow: 0 4px 15px rgba(255,255,255,.3) !important;
        background-color: #f1f1f1 !important
    }

    .google-auth-btn:active {
        transform: scale(.98)
    }

#my-orders-page {
    padding-top: 0 !important
}

.modal, .nav-link {
    margin-top: 0 !important
}

#authModal .modal-body {
    max-width: 450px !important;
    width: 95% !important;
    padding: 40px 30px !important;
    flex-direction: column !important
}

#authModal .auth-input-group {
    width: 100% !important;
    display: block !important;
    margin-bottom: 15px !important
}

#authModal input.auth-field {
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 15px !important;
    height: 55px !important;
    text-align: center !important;
    background: rgba(255,255,255,.05) !important;
    border: 1px solid #8e6abf !important;
    color: #fff !important;
    transition: all .3s ease !important
}

#authModal .auth-field::placeholder {
    color: #ccc;
    text-align: center;
    opacity: .7;
    font-size: 14px
}

#authModal input.auth-field:focus {
    border-color: var(--accent-yellow) !important;
    background-color: rgba(255,255,255,.1) !important;
    outline: 0 !important;
    box-shadow: 0 0 15px rgba(255,204,0,.15) !important
}

#authModal .modal-submit-btn {
    width: 100% !important;
    padding: 15px !important;
    font-size: 18px !important;
    margin-top: 15px !important;
    background-color: var(--accent-yellow) !important;
    color: var(--black-text) !important;
    border: 0 !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(255,204,0,.3);
    transition: transform .2s,box-shadow .2s
}

    #authModal .modal-submit-btn:hover {
        box-shadow: 0 6px 20px rgba(255,204,0,.5);
        transform: translateY(-2px);
        background-color: #e6b800 !important
    }

.auth-toggle-btn {
    color: var(--accent-yellow) !important;
    font-size: 1.1rem;
    transition: color .2s ease
}

    .auth-toggle-btn:hover {
        color: #fff !important
    }

.auth-buttons-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 300px;
    margin: 20px auto 0
}

#my-orders-auth-page {
    max-width: 500px !important
}

.auth-buttons-group .auth-action-btn {
    width: 100%;
    padding: 12px 0;
    font-size: 16px;
    font-weight: 700;
    border-radius: 8px;
    transition: all .3s ease
}

.auth-buttons-group .btn-signup {
    background-color: var(--accent-yellow);
    color: var(--black-text);
    border: 0;
    box-shadow: 0 4px 10px rgba(255,204,0,.4)
}

.auth-buttons-group .btn-login {
    background: 0 0;
    color: var(--light-text);
    border: 2px solid #fff
}

    .auth-buttons-group .btn-login:hover {
        border-color: var(--accent-yellow);
        color: var(--accent-yellow);
        transform: translateY(-2px)
    }

.auth-buttons-group .btn-signup:hover {
    box-shadow: 0 6px 15px rgba(255,204,0,.6);
    transform: translateY(-2px)
}

#user-account-btn {
    margin-right: 20px !important
}

    #user-account-btn span {
        margin-right: 0 !important;
        margin-left: 0 !important
    }

.current-avatar-wrapper {
    position: relative;
    display: inline-block;
    width: 120px;
    height: 120px;
    margin-bottom: 15px
}

.profile-avatar-large {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--accent-yellow);
    box-shadow: 0 0 20px rgba(255,204,0,.4)
}

.avatars-grid, .edit-avatar-icon {
    display: flex;
    justify-content: center
}

.edit-avatar-icon {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: var(--main-purple);
    color: #fff;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    align-items: center;
    cursor: pointer;
    border: 2px solid #fff;
    font-size: 14px;
    transition: transform .2s
}

    .edit-avatar-icon:hover {
        transform: scale(1.1);
        background-color: var(--accent-yellow);
        color: #000
    }

.avatars-grid {
    gap: 15px;
    flex-wrap: wrap;
    padding: 10px
}

    .avatars-grid img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        cursor: pointer;
        border: 3px solid transparent;
        transition: all .3s
    }

#profile-settings-page {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    box-shadow: 0 25px 50px rgba(0,0,0,.6) !important;
    padding: 40px 30px !important;
    background: 0 0 !important;
    z-index: 1
}

    #profile-settings-page::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        background-image: linear-gradient(rgba(20,10,30,.4),rgba(20,10,30,.4)),url(./images/my-keys-bg.png) !important;
        background-size: cover !important;
        background-position: center !important;
        filter: blur(20px) !important;
        transform: scale(1.1)
    }

.avatars-grid img:hover {
    transform: scale(1.15);
    border-color: var(--accent-yellow);
    box-shadow: 0 0 15px rgba(255,204,0,.5)
}

#my-orders-page {
    height: calc(100vh - 150px);
    width: 90%;
    display: none;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    background-image: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),url(https://image2url.com/r2/default/images/1770447107947-210c75fc-2ca5-4434-b9bc-8ca09c95e55b.webp) !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-color: #1a1a2e !important;
    border: 1px solid #8e6abf !important;
    border-radius: 12px;
    padding: 20px;
    scrollbar-width: thin;
    scrollbar-color: rgba(142,106,191,.5) transparent
}

    #my-orders-page::-webkit-scrollbar {
        width: 8px
    }

    #my-orders-page::-webkit-scrollbar-track {
        background: 0 0
    }

    #my-orders-page::-webkit-scrollbar-thumb {
        background: rgba(142,106,191,.5);
        border-radius: 10px
    }

        #my-orders-page::-webkit-scrollbar-thumb:hover {
            background: rgba(142,106,191,.8)
        }

#my-orders-auth-page {
    background-image: linear-gradient(rgba(20,10,30,.85),rgba(20,10,30,.85)),url(https://i.postimg.cc/Rh1FQp9M/mcberlinsohayl.png) !important;
    background-size: cover !important;
    background-position: center !important;
    background-color: transparent !important;
    background-attachment: scroll !important;
    padding: 70px 25px 40px !important;
    border: 1px solid #8e6abf !important;
    border-radius: 12px
}

.order-history-card {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all .3s cubic-bezier(.25,.8,.25,1);
    box-shadow: 0 2px 5px rgba(0,0,0,.2);
    margin-bottom: 15px
}

    .order-history-card:hover {
        background: rgba(0,0,0,.25) !important;
        border-color: rgba(255,255,255,.8) !important;
        transform: translateY(-5px);
        box-shadow: 0 5px 20px rgba(0,0,0,.6),0 0 10px rgba(255,255,255,.4);
        filter: none !important
    }

.order-card-img {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover
}

.order-card-info {
    flex-grow: 1;
    text-align: right
}

.order-card-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px
}

.order-id {
    font-family: monospace
}

.order-date, .order-id {
    font-size: 12px;
    color: #aaa
}

.order-product-name {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0
}

.order-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px
}

.order-price {
    color: var(--accent-yellow);
    font-weight: 700
}

.order-status {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700
}

.status-pending {
    background: rgba(255,165,0,.2);
    color: orange
}

.status-completed {
    background: rgba(40,167,69,.2);
    color: #28a745
}

.status-rejected {
    background: rgba(220,53,69,.2);
    color: #dc3545
}

#kaito-card {
    position: fixed;
    z-index: 9999;
    width: 60px;
    height: auto;
    display: none;
    filter: drop-shadow(5px 10px 10px rgba(0,0,0,.5));
    transition: all 1s cubic-bezier(.68,-.55,.265,1.55)
}

    #kaito-card img {
        width: 100%;
        height: auto;
        background-color: #fff;
        padding: 2px;
        border-radius: 4px;
        border: 1px solid #ccc
    }

#kid-smoke {
    position: fixed;
    z-index: 10001;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle,#fff 0,transparent 70%);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transform: scale(.1)
}

.poof-effect {
    animation: smokePoof .6s ease-out forwards
}

#sohayl-diary-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f8f8e8;
    z-index: 99999;
    display: none;
    overflow-y: auto;
    padding: 50px;
    box-sizing: border-box;
    direction: rtl;
    text-align: right;
    cursor: text;
    font-family: "Tajawal",sans-serif;
    color: #303030
}

.hidden-sohayl-line {
    color: #f8f8e8 !important;
    display: block;
    font-weight: 700;
    font-family: "Courier New",monospace;
    font-size: 14px;
    line-height: 2.5
}

#sohayl-diary-overlay ::selection {
    background-color: #fc0 !important;
    color: #000 !important
}

#sohayl-diary-overlay ::-moz-selection {
    background-color: #fc0 !important;
    color: #000 !important
}

#sohayl-diary-overlay .close-diary-btn {
    color: #000
}

body.aptx-child-mode {
    transition: transform 8s cubic-bezier(.68,-.55,.27,1.55) !important
}

@media (max-width:768px) {
    body.aptx-child-mode .modal {
        transform: translate(-50%,-50%) scale(1.176) !important
    }
}

body.aptx-child-mode .modal, body.aptx-child-mode .overlay {
    perspective: none !important;
    transform-style: flat !important;
    transform-origin: center !important
}

body.aptx-child-mode .modal {
    position: fixed !important
}

body.aptx-child-mode .overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    transform: none !important;
    z-index: 2147483646 !important
}

@media (max-width:768px) {
    body.aptx-child-mode {
        transform: scale(.85) !important;
        transform-origin: center center
    }

        body.aptx-child-mode .modal {
            transform: translate(-50%,-50%) scale(1.176) !important
        }
}

body.aptx-child-mode.modal-open {
    overflow: hidden !important
}

body.aptx-child-mode {
    isolation: isolate;
    transform: scale(.6) !important;
    transition: transform 1.5s ease-in-out;
    pointer-events: auto !important;
    cursor: auto !important
}

@media (max-width:768px) {
    body.aptx-child-mode {
        transform: scale(.85) !important;
        transform-origin: center center;
        border: 5px solid #000;
        border-radius: 15px;
        height: 98vh;
        margin-top: 1vh
    }

        body.aptx-child-mode .modal {
            position: fixed !important;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%,-50%) scale(1.66) !important;
            z-index: 2147483647 !important;
            transform-style: flat !important;
            transform-origin: center !important;
            width: 90% !important;
            max-width: 600px !important;
            max-height: 85vh !important;
            overflow-y: auto !important
        }
}

body.aptx-child-mode #navbar {
    position: absolute !important;
    width: 100%;
    left: 0;
    right: 0
}

body.aptx-child-mode #mobile-nav, body.aptx-child-mode #theme-toggle-btn, body.aptx-child-mode .fixed-cart-button {
    position: absolute !important;
    width: 100%;
    top: auto;
    left: 0;
    right: 0
}

::selection {
    background-color: rgba(200,180,255,.5);
    color: inherit
}

::-moz-selection {
    background-color: rgba(200,180,255,.5);
    color: inherit
}

#itakura-diary-overlay .diary-paper .hidden-line::selection, #itakura-diary-overlay .diary-paper div::selection, #itakura-diary-overlay .diary-paper p::selection, #itakura-diary-overlay .diary-paper span::selection, #itakura-diary-overlay ::selection {
    background-color: #3b6298 !important;
    color: #fff !important
}

#itakura-diary-overlay .diary-paper .hidden-line::-moz-selection, #itakura-diary-overlay .diary-paper div::-moz-selection, #itakura-diary-overlay .diary-paper p::-moz-selection, #itakura-diary-overlay .diary-paper span::-moz-selection, #itakura-diary-overlay ::-moz-selection {
    background-color: #3b6298 !important;
    color: #fff !important
}

#xboxPopularGamesContainer {
    animation: none !important;
    transform: none !important;
    width: 100% !important
}

body.aptx-poisoned {
    animation: poison-pulse 4s ease-in-out infinite;
    overflow: hidden;
    pointer-events: none
}

body.aptx-child-mode {
    transform-origin: center top;
    border: 15px solid #111;
    border-radius: 30px;
    box-shadow: 0 0 100px rgba(0,0,0,.9);
    margin: 20px auto;
    height: 100vh;
    overflow-y: auto !important;
    overflow-x: hidden;
    background-color: #1e1132;
    width: 90%
}

    body.aptx-child-mode #navbar {
        top: 0
    }

#aptx-overlay {
    position: fixed;
    top: -50vh;
    left: -50vw;
    width: 200vw;
    height: 200vh;
    background: #000;
    z-index: 2147483647;
    display: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 3.5s cubic-bezier(.4,0,.2,1);
    transform: translate3d(0,0,0)
}

#aptx-warning {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: red;
    font-family: "Courier New",monospace;
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    z-index: 200001;
    display: none;
    text-shadow: 0 0 20px #000,0 0 10px red;
    background: rgba(0,0,0,.8);
    padding: 20px;
    border: 2px solid red
}

#itakura-console-overlay, #itakura-diary-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none
}

#itakura-diary-overlay {
    background-color: #fdfdf5;
    z-index: 99999;
    overflow-y: auto;
    padding: 50px;
    box-sizing: border-box;
    direction: ltr;
    text-align: left;
    cursor: text
}

    #itakura-diary-overlay.active {
        display: block
    }

.diary-paper {
    max-width: 800px;
    margin: 0 auto;
    padding-bottom: 150px;
    font-family: "MS Gothic","Hiragino Kaku Gothic ProN",sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.8
}

.diary-date {
    font-weight: 700;
    margin-top: 40px;
    margin-bottom: 10px;
    color: #000;
    display: block
}

.visible-line {
    color: #000;
    display: block;
    margin-bottom: 5px
}

.hidden-line {
    color: #fdfdf5;
    display: inline
}

.english-quote {
    font-family: "Courier New",monospace;
    font-weight: 700;
    margin-top: 20px;
    display: block;
    direction: ltr
}

#itakura-console-overlay {
    background-color: #000;
    z-index: 100000;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: "Courier New",monospace;
    overflow: hidden;
    cursor: none
}

.console-text {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    text-align: left;
    white-space: pre-wrap;
    max-width: 800px;
    padding: 20px
}

.console-highlight {
    color: red;
    text-shadow: 0 0 15px red
}

.blinking-cursor {
    display: inline-block;
    width: 12px;
    height: 24px;
    background-color: #fff;
    animation: blink .8s infinite
}

.close-diary-btn {
    position: fixed;
    top: 20px;
    right: 30px;
    font-size: 30px;
    color: #000;
    cursor: pointer;
    z-index: 100001;
    font-weight: 700
}

.game-alert-box {
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20,10,30,.95);
    color: #fff;
    padding: 15px 30px;
    border-radius: 12px;
    border: 2px solid #fc0;
    box-shadow: 0 0 25px rgba(255,204,0,.4);
    z-index: 10000;
    font-family: "Tajawal",sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    min-width: 300px;
    transition: top .5s cubic-bezier(.68,-.55,.27,1.55);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px
}

    .game-alert-box i {
        font-size: 20px;
        color: #fc0
    }

    .game-alert-box.show {
        top: 30px
    }

    .game-alert-box.error {
        border-color: #ff4757;
        box-shadow: 0 0 25px rgba(255,71,87,.4)
    }

    .game-alert-box.success {
        border-color: #2ecc71;
        box-shadow: 0 0 25px rgba(46,204,113,.4)
    }

body.hacker-mode, body.hacker-mode * {
    background-image: none !important;
    color: #0f0 !important
}

body.hacker-mode {
    background: #000 !important;
    font-family: "Courier New",monospace !important
}

    body.hacker-mode * {
        background-color: #000 !important;
        border-color: #0f0 !important;
        box-shadow: none !important;
        text-shadow: none !important
    }

    body.hacker-mode img {
        filter: grayscale(100%) sepia(100%) hue-rotate(50deg) saturate(500%) !important
    }

@media (max-width:768px) {
    .subscription-item .add-to-cart-btn, .subscription-item .sub-price {
        display: none !important
    }

    .subscription-item .buy-btn {
        width: 100% !important;
        margin: 0 !important
    }

    .rental-card {
        flex-direction: column !important;
        height: auto !important;
        min-height: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px !important
    }

    .rental-card-image {
        width: 100% !important;
        flex: none !important;
        height: 180px !important;
        border-left: none !important;
        border-bottom: 1px solid rgba(166,123,91,.4) !important
    }

    .rental-badge {
        top: 10px !important;
        right: -35px !important;
        font-size: 12px !important;
        padding: 4px 35px !important
    }

    .rental-card-details {
        text-align: center !important;
        padding: 15px !important
    }

        .rental-card-details h3 {
            font-size: 1.3rem !important;
            margin-bottom: 5px !important
        }

        .rental-card-details p {
            font-size: .9rem !important;
            margin-bottom: 15px !important;
            min-height: auto !important
        }

    .duration-selector-buttons {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px !important;
        justify-content: center !important
    }

    .duration-btn {
        width: 100% !important;
        font-size: 13px !important;
        padding: 8px 5px !important;
        margin: 0 !important
    }

    .rental-price-display {
        font-size: 1.4rem !important;
        margin: 15px 0 10px !important
    }

    .rental-card .buy-btn {
        width: 100% !important;
        padding: 12px !important;
        font-size: 16px !important
    }

    .rental-controls {
        padding-top: 0 !important;
        margin-top: 0 !important
    }

    #steamGiftCardsHomeContainer, #steamGiftCardsPageContainer {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        justify-content: center !important
    }

        #steamGiftCardsHomeContainer .product-item, #steamGiftCardsPageContainer .product-item {
            width: 100% !important;
            min-width: 0 !important;
            margin: 0 !important;
            padding: 8px !important;
            min-height: auto !important
        }

        #steamGiftCardsHomeContainer .product-image-wrapper, #steamGiftCardsPageContainer .product-image-wrapper {
            height: 90px !important;
            margin-bottom: 5px !important
        }

        #steamGiftCardsHomeContainer h3, #steamGiftCardsPageContainer h3 {
            font-size: 13px !important;
            min-height: 25px !important;
            margin: 5px 0 !important
        }

        #steamGiftCardsHomeContainer .product-price, #steamGiftCardsPageContainer .product-price {
            font-size: 14px !important;
            margin-bottom: 5px !important
        }

        #steamGiftCardsHomeContainer .add-to-cart-btn, #steamGiftCardsPageContainer .add-to-cart-btn {
            display: none !important
        }

        #steamGiftCardsHomeContainer .buy-btn, #steamGiftCardsPageContainer .buy-btn {
            width: 100% !important;
            font-size: 12px !important;
            padding: 6px !important;
            margin-top: 0 !important
        }

        #steamGiftCardsHomeContainer .product-description-text, #steamGiftCardsPageContainer .product-description-text {
            display: none !important
        }
}

#gamesContainer .product-item:hover {
    animation: soft-smooth-shake .5s ease-in-out infinite !important
}

.glow-text-rtl {
    background: linear-gradient(to left,#e6e6e6 30%,#fff 50%,#e6e6e6 70%);
    background-size: 200%auto;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 2px rgba(255,255,255,.5));
    animation: glow-move 3s linear infinite;
    display: inline-block;
    font-weight: 700;
    will-change: background-position
}

#navbar .logo-area img {
    transition: all .3s cubic-bezier(.25,.46,.45,.94);
    filter: drop-shadow(0 0 0 transparent);
    cursor: pointer;
    pointer-events: auto
}

    #navbar .logo-area img:hover {
        animation: distinct-white-glow 2s infinite ease-in-out
    }

.subscription-option-label:hover .subscription-option-card {
    border-color: #cda1ff;
    box-shadow: 0 0 20px rgba(170,100,255,.7)
}

.subscription-option-label:hover input[type=radio]:checked + .subscription-option-card {
    border-color: var(--accent-yellow);
    box-shadow: 0 0 20px rgba(170,100,255,.7)
}

.dropdown-logo {
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    fill: currentColor
}

.site-type-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    width: 100%
}

.site-type-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    border-radius: 10px;
    border: 2px solid #8e6abf;
    background-color: rgba(255,255,255,.05);
    color: var(--white-text);
    font-weight: 700;
    font-size: 13px;
    text-align: center;
    cursor: pointer;
    transition: all .3s ease;
    min-height: 90px
}

    .site-type-option:hover {
        transform: translateY(-5px);
        border-color: var(--accent-yellow);
        box-shadow: 0 0 15px rgba(255,204,0,.5)
    }

    .site-type-option:active {
        background-color: #3c1870;
        transform: scale(.98);
        box-shadow: inset 0 0 10px rgba(0,0,0,.5)
    }

    .site-type-option.custom-order-type {
        grid-column: 1/span 2;
        max-width: 60%;
        justify-self: center;
        padding: 8px 15px;
        margin-top: 10px;
        font-size: 13px;
        min-height: auto
    }

        .site-type-option svg, .site-type-option.custom-order-type svg {
            width: 25px;
            height: 25px
        }

        .site-type-option.custom-order-type small {
            font-size: 11px
        }

    .site-type-option svg {
        margin-bottom: 5px;
        color: currentColor
    }

    .site-type-option:hover svg {
        color: var(--accent-yellow)
    }

#developing .offer-overlay .offer-order-btn {
    font-size: 16px;
    padding: 12px 30px
}

.custom-select-selected span {
    width: 100%;
    text-align: center
}

.product-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 40px rgba(170,100,255,.3)
}

.product-item::after, .subscription-item::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center,rgba(170,100,255,.3)0,rgba(170,100,255,0) 70%);
    border-radius: 12px;
    opacity: 0;
    transition: opacity .4s ease-in-out;
    z-index: 0;
    pointer-events: none
}

.product-item:hover::after, .subscription-item:hover::after {
    opacity: 1
}

#all-cod-games-container .product-item::after, #psn-gift-cards-container .product-item::after, #steamGiftCardsHomeContainer .product-item::after, #steamGiftCardsPageContainer .product-item::after, #xboxGiftCardsContainer .product-item::after, #xboxPopularGamesContainer .product-item::after, .ps-plus-card.subscription-item::after {
    background: 0 0 !important
}

.ps-plus-card.subscription-item:hover {
    box-shadow: 0 10px 25px rgba(0,112,209,.5) !important;
    animation: none !important
}

#xbox-price-wrapper {
    padding-right: 15px;
    padding-left: 8px;
    gap: 8px
}

    #xbox-price-wrapper input {
        flex-grow: 1;
        width: auto
    }

#xboxGameCurrency {
    flex-shrink: 0;
    width: 70px;
    padding: 8px 5px;
    font-size: 14px;
    font-weight: 700;
    background-color: var(--main-purple);
    color: var(--accent-yellow);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-top: 0;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-align: center
}

    #xboxGameCurrency:focus {
        outline: 0;
        border-color: var(--accent-yellow);
        box-shadow: 0 0 8px rgba(255,204,0,.5)
    }

#mobile-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(145deg,#1d1033,#0b0714);
    border-top: 1px solid var(--border-color);
    box-shadow: 0-2px 15px rgba(0,0,0,.4);
    z-index: 1999;
    align-items: center;
    justify-content: space-around
}

@media (max-width:768px) {
    .product-item::before, .rental-card::before, .service-offer-card::before, .subscription-item::before {
        opacity: 0 !important;
        background: 0 0 !important;
        content: none !important
    }
}

.mobile-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--light-text);
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    flex-grow: 1;
    height: 100%;
    opacity: .7;
    transition: opacity .2s,color .2s;
    position: relative
}

@media (max-width:768px) {
    .calculator-card .hide-on-mobile {
        display: none !important
    }
}

.mobile-nav-btn.active, .mobile-nav-btn:hover {
    color: var(--accent-yellow);
    opacity: 1
}

.mobile-nav-btn svg {
    width: 24px;
    height: 24px;
    margin-bottom: 2px
}

.mobile-nav-btn .cart-count {
    position: absolute;
    top: 5px;
    right: 20px;
    background-color: red;
    color: #fff;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 11px;
    border: 1px solid #fff
}

@media (max-width:992px) {
    #navbar {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        padding: 10px 20px;
        height: auto
    }

        #navbar .logo-area {
            order: 1
        }

    .navbar-search-container {
        display: flex !important;
        order: 2;
        flex-grow: 1;
        margin: 0 15px
    }

    .navbar-search-input {
        width: 100% !important
    }

    #navbar .support-button {
        order: 3;
        display: none
    }

    @media (max-width:768px) {
        .product-item .product-description-text, .product-item p:has(.product-description-text), .subscription-item .product-description-text {
            display: none !important
        }

        .subscription-item .sub-content p.sub-description {
            display: none !important
        }
    }

    #navbar .nav-middle-section {
        margin-top: 15px;
        order: 4;
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        flex-grow: 1;
        gap: 15px 20px
    }

    body {
        padding-top: 70px
    }
}

#productPageTitle, h1 {
    font-size: 2rem !important
}

h2 {
    font-size: 1.6rem !important
}

.custom-order-card, .service-offer-card {
    width: calc(50% - 30px);
    min-width: 300px
}

@media (max-width:400px) {
    .products-container {
        gap: 10px
    }

    .product-item h3, .subscription-item h3 {
        font-size: 12px !important
    }

    .product-description-text, .product-item p, .subscription-item p {
        font-size: 11px !important
    }
}

#steam-gift-cards-section {
    border-radius: 15px;
    border: 1px solid #00c0ff;
    animation: steam-section-glow 3s infinite linear
}

#steamGiftCardsHomeContainer .product-item, #steamGiftCardsPageContainer .product-item {
    background: linear-gradient(145deg,#1a283b,#101822) !important;
    box-shadow: 0 6px 20px rgba(0,102,255,.4),0 0 12px rgba(0,102,255,.5) inset !important;
    border: 1px solid rgba(0,102,255,.6) !important
}

    #steamGiftCardsHomeContainer .product-item::before, #steamGiftCardsPageContainer .product-item::before {
        background: radial-gradient(circle at var(--mouse-x) var(--mouse-y),rgba(0,102,255,.6) 0%,transparent 75%) !important
    }

    #steamGiftCardsHomeContainer .product-item .product-image-wrapper::before, #steamGiftCardsPageContainer .product-item .product-image-wrapper::before {
        background: linear-gradient(90deg,transparent,rgba(0,102,255,.4) 30%,transparent 70%) !important
    }

    #steamGiftCardsHomeContainer .product-item h3, #steamGiftCardsPageContainer .product-item h3 {
        color: #87ceeb !important;
        text-shadow: 0 0 7px rgba(135,206,235,.8) !important
    }

    #steamGiftCardsHomeContainer .product-item p, #steamGiftCardsPageContainer .product-item p {
        color: #ccc !important;
        font-size: 13px !important
    }

    #steamGiftCardsHomeContainer .product-item .product-price, #steamGiftCardsPageContainer .product-item .product-price {
        color: #00bfff !important;
        font-size: 1.1em !important;
        font-weight: 700;
        text-shadow: 0 0 6px rgba(0,191,255,.8) !important
    }

    #steamGiftCardsHomeContainer .product-item .currency-symbol, #steamGiftCardsPageContainer .product-item .currency-symbol {
        font-size: .9em !important;
        opacity: .8 !important
    }

    #steamGiftCardsHomeContainer .product-item .add-to-cart-text-btn, #steamGiftCardsPageContainer .product-item .add-to-cart-text-btn {
        background-color: #007acc !important;
        border-color: #005a9c !important;
        box-shadow: 0 5px 15px rgba(0,90,156,.6) !important;
        color: #e0f2f7 !important
    }

        #steamGiftCardsHomeContainer .product-item .add-to-cart-text-btn:hover, #steamGiftCardsPageContainer .product-item .add-to-cart-text-btn:hover {
            background-color: #008ddf !important;
            border-color: #006bbf !important;
            box-shadow: 0 8px 20px rgba(0,107,191,.8) !important;
            transform: translateY(-4px) !important
        }

    #steamGiftCardsHomeContainer .product-item .buy-btn, #steamGiftCardsPageContainer .product-item .buy-btn {
        background: linear-gradient(145deg,#007acc,#005a9c) !important;
        border: 1px solid #005a9c !important;
        box-shadow: 0 5px 15px rgba(0,90,156,.6) !important;
        color: #e0f2f7 !important
    }

        #steamGiftCardsHomeContainer .product-item .buy-btn:hover, #steamGiftCardsPageContainer .product-item .buy-btn:hover {
            background: linear-gradient(145deg,#008ddf,#006bbf) !important;
            box-shadow: 0 8px 20px rgba(0,107,191,.8) !important;
            transform: translateY(-4px) !important
        }

    #steamGiftCardsHomeContainer .product-item:hover, #steamGiftCardsPageContainer .product-item:hover {
        transform: translateY(-8px) !important;
        box-shadow: 0 15px 35px rgba(0,102,255,.6) !important
    }

.product-item[data-category=steam-popular], .product-item[data-platform=steam] {
    background: linear-gradient(145deg,#1a283b,#101822);
    box-shadow: 0 5px 15px rgba(0,102,255,.2),0 0 10px rgba(0,102,255,.3) inset;
    border: 1px solid rgba(0,102,255,.4)
}

    .product-item[data-category=steam-popular]::before, .product-item[data-platform=steam]::before {
        background: radial-gradient(circle at var(--mouse-x) var(--mouse-y),rgba(0,102,255,.4) 0%,transparent 70%)
    }

    .product-item[data-category=steam-popular] .product-image-container::before, .product-item[data-platform=steam] .product-image-container::before {
        background: linear-gradient(90deg,transparent,rgba(0,102,255,.2) 30%,transparent 70%)
    }

    .product-item[data-category=steam-popular] .product-title, .product-item[data-platform=steam] .product-title {
        color: #87ceeb;
        text-shadow: 0 0 5px rgba(135,206,235,.5)
    }

    .product-item[data-category=steam-popular] .product-price, .product-item[data-platform=steam] .product-price {
        color: #4caf50;
        text-shadow: 0 0 4px rgba(76,175,80,.6)
    }

    .product-item[data-category=steam-popular] .buy-now-button, .product-item[data-platform=steam] .add-to-cart-button {
        background: linear-gradient(145deg,#007acc,#005a9c);
        border: 1px solid #005a9c;
        box-shadow: 0 4px 10px rgba(0,90,156,.4);
        color: #e0f2f7
    }

        .product-item[data-category=steam-popular] .buy-now-button:hover, .product-item[data-platform=steam] .add-to-cart-button:hover {
            background: linear-gradient(145deg,#008ddf,#006bbf);
            box-shadow: 0 6px 15px rgba(0,107,191,.6);
            transform: translateY(-2px)
        }

        .product-item[data-category=steam-popular] .buy-now-button:active, .product-item[data-platform=steam] .add-to-cart-button:active {
            transform: scale(.96);
            box-shadow: 0 2px 5px rgba(0,90,156,.4)
        }

    .product-item[data-category=steam-popular] .product-header .platform-icon img, .product-item[data-platform=steam] .product-header .platform-icon img {
        filter: drop-shadow(0 0 8px rgba(0,102,255,.8))
    }

    .product-item[data-platform=steam]:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0,102,255,.4)
    }

    .product-item[data-category=steam-popular] .glow-border::before, .product-item[data-platform=steam] .glow-border::before {
        background: conic-gradient(from var(--angle),transparent,#007acc,#005a9c,#007acc,transparent)
    }

    .product-item[data-category=steam-popular] .platform-badge, .product-item[data-platform=steam] .platform-badge {
        background-color: #007acc;
        box-shadow: 0 0 8px rgba(0,102,255,.6)
    }

#xbox-gifting-section .calculator-card .calculator-card-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image: linear-gradient(rgba(10,25,10,.9),rgba(0,0,0,.9)),url(images/image_1651dd.png);
    background-size: cover,cover;
    background-position: center,center;
    background-repeat: no-repeat,no-repeat;
    filter: blur(5px);
    -webkit-filter: blur(5px)
}

#steamGiftCardsHomeContainer .product-item .add-to-cart-text-btn:active, #steamGiftCardsHomeContainer .product-item .buy-btn:active, #steamGiftCardsPageContainer .product-item .add-to-cart-text-btn:active, #steamGiftCardsPageContainer .product-item .buy-btn:active {
    transform: scale(.96) translateY(2px) !important;
    box-shadow: inset 0 3px 8px rgba(0,0,0,.4) !important;
    transition: transform .1s ease,background .1s ease,box-shadow .1s ease !important
}

#xboxGiftCardsContainer .product-item .add-to-cart-btn img, #xboxPopularGamesContainer .product-item .add-to-cart-btn img {
    display: none !important
}

#xboxGiftCardsContainer .product-item .add-to-cart-btn, #xboxPopularGamesContainer .product-item .add-to-cart-btn {
    background-color: #107c10 !important;
    color: var(--white-text) !important;
    border: 2px solid #107c10 !important;
    border-radius: 8px !important;
    width: auto !important;
    height: auto !important;
    transition: all .3s ease !important
}

#xboxGiftCardsContainer .product-item .add-to-cart-btn {
    padding: 4px 8px !important
}

    #xboxGiftCardsContainer .product-item .add-to-cart-btn::after {
        content: "إضافة";
        font-size: 10px !important;
        font-weight: 700
    }

#xboxPopularGamesContainer .product-item .add-to-cart-btn {
    padding: 8px 10px !important
}

    #xboxPopularGamesContainer .product-item .add-to-cart-btn::after {
        content: "إضافة للسلة";
        font-size: 13px !important;
        font-weight: 700
    }

    #xboxGiftCardsContainer .product-item .add-to-cart-btn:hover, #xboxPopularGamesContainer .product-item .add-to-cart-btn:hover {
        background-color: #10e510 !important;
        border-color: #10e510 !important;
        box-shadow: 0 0 15px rgba(16,229,16,.6) !important;
        transform: scale(1.05)
    }

        #xboxGiftCardsContainer .product-item .add-to-cart-btn:hover::after, #xboxPopularGamesContainer .product-item .add-to-cart-btn:hover::after {
            color: var(--black-text) !important
        }

#xbox-gifting-section .ps-grid-column:nth-child(2) {
    overflow: hidden;
    position: relative
}

#xboxPopularGamesContainer {
    display: flex;
    flex-wrap: nowrap !important;
    animation-play-state: running
}

    #xboxPopularGamesContainer:hover {
        animation-play-state: paused
    }

#xboxGiftCardsContainer, #xboxPopularGamesContainer {
    justify-content: flex-start !important
}

.payment-actions-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-top: 25px;
    width: 100%
}

    .payment-actions-container form[action*="paypal.com"] {
        flex: unset;
        min-width: unset;
        display: inline-grid;
        justify-items: center !important;
        align-content: start;
        gap: .5rem;
        margin: 0;
        width: 100%;
        max-width: 320px
    }

.pp-AB69NXSVUNP78 {
    width: 100% !important;
    min-width: unset !important;
    box-sizing: border-box
}

.paypal-confirm-btn {
    flex: unset;
    min-width: unset;
    box-sizing: border-box;
    height: auto;
    line-height: normal
}

.custom-select-container {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    font-family: "Tajawal",sans-serif;
    font-weight: 700
}

.custom-select-selected {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background-color: rgba(0,0,0,.2);
    border: 1px solid var(--main-purple);
    border-radius: 8px;
    color: var(--white-text);
    cursor: pointer;
    transition: all .3s ease
}

.custom-select-arrow {
    width: 20px;
    height: 20px;
    transition: transform .3s ease
}

.custom-select-container.open .custom-select-selected, .custom-select-selected:hover {
    border-color: var(--accent-yellow);
    box-shadow: 0 0 10px rgba(255,204,0,.5)
}

.custom-select-container.open .custom-select-arrow, .faq-item-v2.active .faq-question-v2 i {
    transform: rotate(180deg)
}

.custom-select-options {
    display: none;
    position: absolute;
    top: 110%;
    left: 0;
    right: 0;
    background: linear-gradient(145deg,#0b0714,#1d1033);
    border: 1px solid #8e6abf;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,.3);
    z-index: 2100;
    overflow: hidden;
    max-height: 200px
}

.custom-select-container.open .custom-select-options {
    display: block
}

.custom-option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 15px;
    color: var(--light-text);
    cursor: pointer;
    transition: background-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease
}

    .custom-option:hover {
        background-color: rgba(142,106,191,.1);
        color: #cda1ff;
        box-shadow: 0 0 15px rgba(142,106,191,.6);
        transform: scale(1.03)
    }

    .custom-option .payment-option-logo {
        margin-left: 0 !important;
        margin-right: 0 !important
    }

#xbox-gifting-section {
    background-image: linear-gradient(rgba(10,25,10,.8),rgba(0,0,0,.9)),url(./images/xbox-bg.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    border-color: #107c10;
    box-shadow: 0 0 25px rgba(16,124,16,.3);
    text-align: right !important
}

    #xbox-gifting-section .ps-grid-container {
        align-items: start !important
    }

    #xbox-gifting-section .playstation-subcategory-label {
        border-bottom: 1px solid rgba(255,255,255,.2) !important;
        color: #90ee90;
        margin-top: 20px !important;
        margin-bottom: 15px !important
    }

    #xbox-gifting-section .calculator-card {
        background: linear-gradient(145deg,rgba(16,40,16,.5),rgba(0,15,0,.6));
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        animation: smooth-xbox-glow 2.5s infinite alternate ease-in-out;
        padding: 3px
    }

        #xbox-gifting-section .calculator-card .calculator-card-icon {
            filter: drop-shadow(0 0 15px rgba(16,229,16,.7))
        }

        #xbox-gifting-section .calculator-card h3 {
            color: #90ee90
        }

        #xbox-gifting-section .calculator-card .buy-btn {
            background-color: #107c10;
            color: var(--white-text);
            border: 2px solid #107c10
        }

            #xbox-gifting-section .calculator-card .buy-btn:hover {
                background-color: #10e510;
                border-color: #10e510;
                color: var(--black-text);
                box-shadow: 0 0 20px rgba(16,229,16,.8);
                transform: translateY(-3px) scale(1.05)
            }

        #xbox-gifting-section .calculator-card:hover {
            animation-name: none;
            border-color: #10e510
        }

#xboxGiftCardsContainer .product-item, #xboxPopularGamesContainer .product-item {
    width: 90px !important;
    min-height: 160px !important;
    padding: 6px !important;
    background: linear-gradient(145deg,rgba(16,40,16,.5),rgba(0,15,0,.6)) !important;
    border: 1px solid rgba(16,229,16,.5) !important;
    animation: smooth-xbox-glow 2.5s infinite alternate ease-in-out
}

    #xboxGiftCardsContainer .product-item .product-image-wrapper {
        height: 70px !important;
        margin-bottom: 3px
    }

    #xboxGiftCardsContainer .product-item h3 {
        font-size: 11px !important;
        min-height: 25px !important;
        margin-top: 3px;
        margin-bottom: 2px;
        line-height: 1.2
    }

    #xboxGiftCardsContainer .product-item .product-description-text {
        display: none !important
    }

    #xboxGiftCardsContainer .product-item p, #xboxPopularGamesContainer .product-item p {
        white-space: nowrap;
        display: flex;
        justify-content: center;
        align-items: baseline;
        gap: .3em;
        font-size: 10px !important;
        color: #ccc
    }

    #xboxPopularGamesContainer .product-item p {
        font-size: 12px !important
    }

        #xboxGiftCardsContainer .product-item p .currency-symbol, #xboxPopularGamesContainer .product-item p .currency-symbol {
            font-size: .9em;
            opacity: .8;
            padding-top: 1px
        }

    #xboxGiftCardsContainer .product-item .product-price {
        font-size: 11px !important;
        margin-top: 0;
        margin-bottom: 3px
    }

    #xboxGiftCardsContainer .product-item .buy-btn {
        display: none !important
    }

    #xboxGiftCardsContainer .product-item .add-to-cart-btn img {
        width: 20px !important;
        height: 20px !important
    }

#xboxPopularGamesContainer .product-item {
    width: 230px !important;
    min-height: 200px !important;
    padding: 10px !important
}

    #xboxPopularGamesContainer .product-item .product-image-wrapper {
        height: 100px !important
    }

    #xboxPopularGamesContainer .product-item .product-description-text {
        display: none !important
    }

    #xboxPopularGamesContainer .product-item h3 {
        font-size: 14px !important;
        min-height: 35px !important;
        line-height: 1.3
    }

    #xboxPopularGamesContainer .product-item .product-price {
        font-size: 14px !important;
        margin-bottom: 5px
    }

    #xboxPopularGamesContainer .product-item .buy-btn {
        font-size: 14px !important;
        padding: 8px 15px !important;
        background-color: #107c10;
        color: var(--white-text);
        border: 2px solid #107c10
    }

    #xboxPopularGamesContainer .product-item .add-to-cart-btn img {
        width: 31px !important;
        height: 31px !important
    }

#xboxGiftingModal h2 {
    color: #10e510;
    border: 0;
    text-align: center
}

#xboxFinalPriceDisplay .price-label, #xboxFinalPriceDisplay .price-value {
    color: #ccc;
    font-size: 1.1rem;
    font-weight: 700;
    display: block;
    text-align: center
}

#xboxFinalPriceDisplay .price-value {
    font-size: 2.2rem;
    color: #90ee90;
    margin-top: 5px
}

#xboxGiftingModal .button-primary {
    background-color: #107c10;
    color: #fff;
    border: 0;
    animation: none
}

    #xboxGiftingModal .button-primary:hover {
        background-color: #10e510;
        color: var(--black-text);
        box-shadow: 0 0 20px rgba(16,229,16,.8)
    }

.fn-boosting-content h3 {
    display: block;
    width: 100%;
    margin-right: 0;
    font-size: 1rem !important
}

.level-input-group {
    max-width: 180px
}

#valorant-boosting::before {
    transform: translate(-50%,-50%)
}

#valorant-boosting::after {
    transition: filter .5s ease-in-out
}

#valorant-boosting.calculator-view-active::after {
    filter: blur(8px) brightness(.4)
}

#valorant-boosting > * {
    position: relative;
    z-index: 1
}

.product-item.bundle-card .product-image-wrapper img {
    z-index: 1
}

#valorant-boosting:not(.calculator-view-active):hover #boosting-cover {
    transform: translateY(-10px)
}

#boosting-cover .start-boosting-btn {
    box-shadow: 0 4px 15px rgba(0,0,0,.4);
    cursor: pointer
}

#designs .custom-order-card {
    background: linear-gradient(145deg,rgba(220,53,69,.25),rgba(100,15,25,.4)) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,70,85,.4) !important;
    transition: transform .3s,box-shadow .3s
}

    #designs .custom-order-card:hover {
        box-shadow: 0 0 25px rgba(255,70,85,.5)
    }

#designs {
    animation: rgb-outline 4s linear infinite
}

#feedback-section {
    background: linear-gradient(145deg,#0b0714,#1d1033,#0b0714);
    border: 1px solid #4a2f6c;
    box-shadow: 0 0 25px rgba(44,26,64,.5)
}

.comment-card {
    background: linear-gradient(135deg,#1d2b4a,#1a1a2a);
    border-right: 3px solid #0070d1;
    box-shadow: 0 4px 15px rgba(0,0,0,.2)
}

#ps-games-offer-card {
    padding: 5px
}

#playstation-games-page {
    background-image: linear-gradient(rgba(10,20,45,.85),rgba(10,20,45,.85)),url(https://i.postimg.cc/cJSSQ7f5/playstation52253.webp);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    border-color: #0070d1;
    box-shadow: 0 0 25px rgba(0,112,209,.3)
}

.ps-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
    align-items: stretch
}

#feedback-section {
    padding-bottom: 20px !important
}



.ps-grid-column, .testimonial-card-wide {
    display: flex;
    flex-direction: column
}

#ps-plus-container {
    display: flex;
    overflow-x: auto;
    padding-bottom: 15px;
    scrollbar-width: thin;
    scrollbar-color: #8e6abf var(--main-purple)
}

    #ps-plus-container::-webkit-scrollbar {
        height: 8px
    }

    #ps-plus-container::-webkit-scrollbar-thumb {
        background: #8e6abf;
        border-radius: 4px
    }

@media (max-width:768px) {
    .ps-grid-container {
        grid-template-columns: 1fr
    }
}

#subscription-group {
    max-height: 35vh;
    overflow-y: auto;
    padding: 10px 15px;
    margin: 20px 0;
    border-top: 1px solid rgba(255,255,255,.1);
    border-bottom: 1px solid rgba(255,255,255,.1)
}

.playstation-flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: stretch;
    justify-content: center;
    margin-bottom: 30px
}

.playstation-flex-item {
    flex-basis: 45%;
    min-width: 350px;
    display: flex;
    flex-direction: column
}

    .playstation-flex-item .products-container {
        flex-grow: 1
    }

#gaming-services-section .service-offer-card {
    position: relative;
    z-index: 1;
    background: linear-gradient(145deg,#0c0c0e,#024,#2c1a40);
    border: 2px solid transparent;
    overflow: hidden
}

    #gaming-services-section .service-offer-card::before {
        content: "";
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        z-index: -1;
        background: conic-gradient(transparent,#00c0ff,#ff4655,#39ff14,#cda1ff,#00c0ff);
        animation: rotate-glow 4s linear infinite
    }

    #gaming-services-section .service-offer-card:hover {
        transform: translateY(-8px) !important;
        box-shadow: 0 12px 30px rgba(0,0,0,.6) !important;
        border-color: #fff !important;
        animation: none !important
    }

        #gaming-services-section .service-offer-card:hover::before {
            opacity: 0 !important;
            animation: none !important
        }

    #gaming-services-section .service-offer-card button {
        border-color: #00c0ff;
        color: #00c0ff
    }

    #gaming-services-section .service-offer-card:hover button {
        background-color: #00c0ff;
        color: #110e1a;
        box-shadow: 0 0 15px #00c0ff
    }

#subscription-options-container.tabbed-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 15px
}

.tier-tabs {
    display: flex;
    justify-content: center;
    background-color: rgba(0,0,0,.2);
    border-radius: 50px;
    padding: 5px;
    border: 1px solid var(--main-purple)
}

.tier-tab-button {
    flex: 1;
    padding: 10px 15px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--light-text);
    background-color: transparent;
    border: 0;
    border-radius: 50px;
    cursor: pointer;
    transition: all .3s ease;
    white-space: nowrap
}

    .tier-tab-button.active {
        background-color: #0070d1;
        color: #fff;
        box-shadow: 0 0 10px rgba(0,112,209,.5)
    }

.tier-content-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap
}

.tier-content {
    display: none;
    width: 100%;
    animation: fadeIn .4s ease
}

    .modal.is-visible.payment-modal .modal-body .payment-details.is-visible, .modal.is-visible.payment-modal .modal-body .payment-options-container.is-visible, .tier-content.active {
        display: block
    }

#playstation-section {
    background-image: linear-gradient(rgba(10,20,45,.85),rgba(10,20,45,.85)),url(https://i.postimg.cc/rmRCc42D/playstation-bg.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    border-color: #0070d1;
    box-shadow: 0 0 25px rgba(0,112,209,.3)
}

#psn-gift-cards-container .product-item, .ps-plus-card {
    background: linear-gradient(145deg,rgba(0,112,209,.7),rgba(10,20,45,.9)) !important;
    border-color: #0070d1 !important
}

    #psn-gift-cards-container .product-item:hover {
        box-shadow: 0 10px 25px rgba(0,112,209,.5) !important;
        border-color: #3a9dff !important;
        animation: none !important
    }

    #psn-gift-cards-container .product-item .buy-btn {
        background-color: #0070d1 !important;
        border-color: #3a9dff !important
    }

        #psn-gift-cards-container .product-item .buy-btn:hover, .ps-plus-card .buy-btn:hover {
            background-color: #00457c !important;
            box-shadow: 0 0 15px #3a9dff !important
        }

    .ps-plus-card:hover {
        box-shadow: 0 10px 25px rgba(0,112,209,.5) !important;
        border-color: #3a9dff !important
    }

    .ps-plus-card .buy-btn {
        background-color: #0070d1 !important;
        color: #fff !important;
        border-color: #3a9dff !important
    }

#psn-gift-cards-container .psn-gift-card-item {
    width: 145px !important;
    min-height: 250px !important;
    padding: 10px !important
}

    #psn-gift-cards-container .psn-gift-card-item .product-image-wrapper {
        height: 130px !important
    }

    #psn-gift-cards-container .psn-gift-card-item h3 {
        font-size: 14px !important;
        min-height: 40px !important
    }

    #psn-gift-cards-container .psn-gift-card-item p {
        font-size: 14px !important
    }

    #psn-gift-cards-container .psn-gift-card-item .buy-btn {
        font-size: 13px !important;
        padding: 8px 12px !important
    }

    #psn-gift-cards-container .psn-gift-card-item .add-to-cart-btn img {
        width: 30px !important;
        height: 30px !important
    }

.psn-gift-card-item {
    background: linear-gradient(145deg,rgba(0,112,209,.6),rgba(0,50,100,.8));
    border-color: #0070d1
}

    .psn-gift-card-item:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 10px 25px rgba(0,112,209,.4);
        border-color: #3a9dff
    }

.playstation-subcategory-label {
    text-align: center;
    color: #a9c0de;
    margin-top: 30px;
    margin-bottom: 20px;
    border-bottom: 2px solid #0070d1;
    padding-bottom: 10px;
    display: inline-block;
    width: auto;
    border-right: none;
    padding-right: 0
}

#gaming-services-section {
    background-image: linear-gradient(rgba(30,17,50,.85),rgba(30,17,50,.85)),url(https://i.postimg.cc/GmJM56BR/my-new-gaming-bg.webp);
    border-width: 2px;
    border-style: solid;
    animation: rgb-outline 4s linear infinite
}

.offer-buttons-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 20px
}

    .offer-buttons-container .offer-order-btn {
        flex-grow: 1;
        margin: 0;
        padding: 12px 15px;
        font-size: 16px
    }

.offer-discord-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-grow: 1;
    padding: 12px 15px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background-color: #5865f2;
    border-radius: 50px;
    text-decoration: none;
    transition: all .3s ease;
    border: 2px solid #5865f2
}

    .offer-discord-btn:hover {
        background-color: transparent;
        color: #5865f2;
        transform: translateY(-2px);
        box-shadow: 0 0 10px rgba(88,101,242,.7)
    }

    .offer-discord-btn img {
        width: 20px;
        height: 20px
    }

#all-cod-games-container .product-item p {
    text-shadow: 0 1px 5px rgba(0,0,0,.9);
    text-shadow: -1px -1px 0#000,1px -1px 0#000,-1px 1px 0#000,1px 1px 0#000;
    margin-bottom: 10px;
    min-height: 0
}

.stylish-price-badge {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 50px;
    background-color: rgba(0,0,0,.25);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,.15);
    color: #90ee90;
    font-weight: 700;
    font-size: 1.1rem;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
    box-shadow: 0 2px 5px rgba(0,0,0,.2)
}

#all-cod-games, #gaming-services-section, #services-section::before {
    background-size: cover;
    background-position: center;
    background-attachment: fixed
}

#all-cod-games {
    background-image: linear-gradient(rgba(10,10,15,.8),rgba(10,10,15,.8)),url(https://www.callofduty.com/content/dam/atvi/callofduty/cod-touchui/legacy/modern-warfare/features/multiplayer/Doorkick.jpg);
    border-color: #7a8d9a;
    box-shadow: 0 0 25px rgba(122,141,154,.3)
}

#all-cod-games-container .product-item {
    width: 180px;
    height: 270px;
    padding: 0;
    border: 1px solid #7a8d9a;
    box-shadow: 0 4px 15px rgba(0,0,0,.4);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end
}

    #all-cod-games-container .product-item .product-image-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1
    }

    #all-cod-games-container .product-item .product-content-overlay {
        position: relative;
        z-index: 2;
        width: 100%;
        padding: 15px 10px;
        box-sizing: border-box;
        background: 0 0
    }

    #all-cod-games-container .product-item .product-description-text, #all-cod-games-container .product-item h3 {
        display: none
    }

    #all-cod-games-container .product-item .product-price {
        color: #90ee90;
        font-size: 14px;
        text-shadow: 0 1px 4px rgba(0,0,0,.9)
    }

    #all-cod-games-container .product-item .buy-btn {
        background-color: rgba(98,125,143,.5);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        border: 1px solid rgba(159,179,196,.8);
        color: #e5e5e5;
        font-weight: 700;
        font-size: 13px;
        padding: 8px 15px
    }

        #all-cod-games-container .product-item .buy-btn:hover {
            background-color: rgba(122,141,154,.7);
            border-color: #e5e5e5;
            box-shadow: 0 0 12px rgba(159,179,196,.7)
        }

    #all-cod-games-container .product-item .add-to-cart-btn img {
        width: 28px;
        height: 28px
    }

    #all-cod-games-container .product-item::after {
        content: "";
        background: repeating-linear-gradient(0deg,rgba(144,238,144,0)0,rgba(144,238,144,.15) 1px,rgba(144,238,144,0) 2px);
        opacity: 0;
        transition: opacity .4s ease-in-out;
        z-index: 3
    }

    #all-cod-games-container .product-item:hover::after {
        opacity: 1;
        animation: scan-anim 1s linear infinite
    }

.footer-link-icon {
    margin-right: 8px;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    color: currentColor
}

html[dir=ltr] .footer-link-icon {
    margin-right: 0;
    margin-left: 8px
}

#services-section {
    overflow: hidden;
    z-index: 1
}

    #services-section::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        background-image: linear-gradient(rgba(30,17,50,.85),rgba(30,17,50,.85)),url(./images/services-background.png);
        filter: blur(5px);
        transform: scale(1.1)
    }

.product-item.bundle-card .product-image-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right,rgba(255,255,255,0)0,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 100%);
    transform: translateX(-100%) skewX(-25deg);
    z-index: 2
}

.product-item.bundle-card:hover .product-image-wrapper::before, .rental-card:hover .rental-card-image::before {
    animation: shine-effect .85s ease-in-out
}

#fortnite .product-item, #valorantPoints .product-item {
    width: 145px !important;
    min-height: 250px !important;
    padding: 10px !important
}

    #fortnite .product-item .product-image-wrapper, #valorantPoints .product-item .product-image-wrapper {
        height: 130px !important
    }

    #fortnite .product-item h3, #valorantPoints .product-item h3 {
        font-size: 14px !important;
        min-height: 40px !important
    }

    #fortnite .product-item p, #valorantPoints .product-item p {
        font-size: 14px !important
    }

    #fortnite .product-item .buy-btn, #valorantPoints .product-item .buy-btn {
        font-size: 13px !important;
        padding: 8px 12px !important
    }

    #fortnite .product-item .add-to-cart-btn img, #valorantPoints .product-item .add-to-cart-btn img {
        width: 30px !important;
        height: 30px !important
    }

#all-cod-games-container .product-item::after, .fire-particles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none
}

.fire-particles-container {
    overflow: hidden;
    z-index: 2
}

    .fire-particles-container i {
        position: absolute;
        bottom: -10px;
        background: #e0b0ff;
        border-radius: 50%;
        opacity: 0;
        animation: none;
        box-shadow: 0 0 5px #bf00ff,0 0 10px #9932cc;
        filter: blur(3px)
    }

.product-item .product-content-overlay {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
    width: 100%
}

.product-item .product-image-wrapper {
    position: relative;
    z-index: 1
}

.product-item.bundle-card:hover .fire-particles-container i {
    animation-name: fly-up;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite
}

    .product-item.bundle-card:hover .fire-particles-container i:nth-child(1) {
        left: 20%;
        animation-delay: .2s;
        animation-duration: 2.5s;
        width: 4px;
        height: 4px
    }

    .product-item.bundle-card:hover .fire-particles-container i:nth-child(2) {
        left: 80%;
        animation-delay: .5s;
        animation-duration: 3s;
        width: 5px;
        height: 5px;
        background: #cda1ff
    }

    .product-item.bundle-card:hover .fire-particles-container i:nth-child(3) {
        left: 50%;
        animation-delay: .1s;
        animation-duration: 2.2s;
        width: 3px;
        height: 3px
    }

    .product-item.bundle-card:hover .fire-particles-container i:nth-child(4) {
        left: 30%;
        animation-delay: .8s;
        animation-duration: 3.5s;
        width: 6px;
        height: 6px
    }

    .product-item.bundle-card:hover .fire-particles-container i:nth-child(5) {
        left: 70%;
        animation-delay: 1s;
        animation-duration: 2s;
        width: 4px;
        height: 4px;
        background: #a450ff
    }

    .product-item.bundle-card:hover .fire-particles-container i:nth-child(6) {
        left: 40%;
        animation-delay: .4s;
        animation-duration: 2.8s;
        width: 5px;
        height: 5px
    }

    .product-item.bundle-card:hover .fire-particles-container i:nth-child(7) {
        left: 60%;
        animation-delay: 1.2s;
        animation-duration: 3.2s;
        width: 3px;
        height: 3px
    }

    .product-item.bundle-card:hover .fire-particles-container i:nth-child(8) {
        left: 15%;
        animation-delay: .6s;
        animation-duration: 2.4s;
        width: 5px;
        height: 5px
    }

    .product-item.bundle-card:hover .fire-particles-container i:nth-child(9) {
        left: 85%;
        animation-delay: 1.5s;
        animation-duration: 3.8s;
        width: 4px;
        height: 4px;
        background: #cda1ff
    }

    .product-item.bundle-card:hover .fire-particles-container i:nth-child(10) {
        left: 55%;
        animation-delay: .3s;
        animation-duration: 2.6s;
        width: 6px;
        height: 6px
    }

    .product-item.bundle-card:hover .fire-particles-container i:nth-child(11) {
        left: 35%;
        animation-delay: 1.1s;
        animation-duration: 3.1s;
        width: 3px;
        height: 3px
    }

    .product-item.bundle-card:hover .fire-particles-container i:nth-child(12) {
        left: 75%;
        animation-delay: .7s;
        animation-duration: 2.3s;
        width: 5px;
        height: 5px
    }

    .product-item.bundle-card:hover .fire-particles-container i:nth-child(13) {
        left: 25%;
        animation-delay: 1.4s;
        animation-duration: 3.6s;
        width: 4px;
        height: 4px
    }

    .product-item.bundle-card:hover .fire-particles-container i:nth-child(14) {
        left: 65%;
        animation-delay: .9s;
        animation-duration: 2.9s;
        width: 6px;
        height: 6px;
        background: #a450ff
    }

    .product-item.bundle-card:hover .fire-particles-container i:nth-child(15) {
        left: 45%;
        animation-delay: 1.3s;
        animation-duration: 3.3s;
        width: 3px;
        height: 3px
    }

.bundle-glow-effect {
    font-weight: 700;
    color: var(--secondary-color);
    text-shadow: 0 0 5px rgba(255,255,255,.7),0 0 10px rgba(102,192,244,.6),0 0 15px rgba(102,192,244,.5),0 0 20px rgba(102,192,244,.4);
    animation: pulse-glow 2s infinite alternate ease-in-out;
    display: inline-block
}

.product-item--offline {
    background: linear-gradient(145deg,#1b2838,#0a192f);
    border: 1px solid #66c0f4;
    box-shadow: 0 4px 15px rgba(102,192,244,.1)
}

    .product-item--offline:hover {
        transform: translateY(-8px) scale(1.03);
        border-color: #90d8f8;
        box-shadow: 0 8px 25px rgba(102,192,244,.3),0 0 10px rgba(102,192,244,.5);
        animation: none !important
    }

    .product-item--offline .product-price {
        color: #66c0f4
    }

    .product-item--offline .buy-btn {
        background-color: #66c0f4;
        color: #1b2838;
        border-color: #66c0f4
    }

        .product-item--offline .buy-btn:hover {
            background-color: #90d8f8;
            border-color: #90d8f8;
            box-shadow: 0 0 12px #90d8f8
        }

    .product-item--offline .add-to-cart-btn img {
        filter: brightness(0) saturate(100%) invert(80%) sepia(50%) saturate(500%) hue-rotate(170deg)
    }

    .product-item--offline .add-to-cart-btn:hover img {
        filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg)
    }

.product-item.bundle-card .product-image-wrapper {
    position: relative;
    padding-top: 81.3%;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 15px;
    width: 100%;
    height: auto
}

    .product-item.bundle-card .product-image-wrapper img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
        transition: transform .4s ease
    }

.product-item.bundle-card:hover .product-image-wrapper img, .subscription-item:hover .sub-image-wrapper img {
    transform: scale(1.1)
}

.product-item.bundle-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg,#3c1870,#0d061c);
    border: 1px solid var(--accent-yellow);
    box-shadow: 0 0 20px rgba(255,204,0,.2);
    min-width: 250px
}

.bundle-badge, .product-separator::before {
    position: absolute;
    font-size: 14px;
    font-weight: 700
}

.bundle-badge {
    top: 15px;
    right: -30px;
    background-color: var(--accent-yellow);
    color: var(--black-text);
    padding: 5px 30px;
    transform: rotate(45deg);
    box-shadow: 0 2px 5px rgba(0,0,0,.2);
    text-align: center;
    z-index: 10
}

.product-separator {
    position: relative;
    width: 90%;
    height: 1px;
    background-color: rgba(255,255,255,.2);
    margin: 35px auto 25px;
    border-radius: 1px;
    text-align: center
}

    .product-separator::before {
        content: "Bundles";
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background-color: var(--main-purple);
        color: rgba(255,255,255,.6);
        padding: 0 15px;
        text-transform: uppercase
    }

#navbar-search-results.expanded {
    max-height: 70vh
}

#navbar-search-results {
    background: linear-gradient(145deg,#0b0714,#1d1033,#0b0714);
    position: absolute;
    top: 110%;
    right: 0;
    width: 350px;
    max-height: 400px;
    overflow-y: auto;
    background-color: rgba(44,26,64,.8);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,.3);
    z-index: 2001;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity .2s ease-out,transform .2s ease-out
}

    #navbar-search-results.visible {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto
    }

.search-result-item img {
    width: 45px;
    height: 45px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    text-decoration: none;
    color: var(--light-text);
    border-bottom: 1px solid rgba(255,255,255,.1);
    transition: background-color .2s ease
}

    .search-result-item:last-child {
        border-bottom: none
    }

    .search-result-item:hover {
        background-color: rgba(255,255,255,.1)
    }

    .search-result-item .result-details {
        display: flex;
        flex-direction: column;
        text-align: right;
        overflow: hidden
    }

    .search-result-item .result-title {
        font-weight: 700;
        font-size: 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .search-result-item .result-price {
        font-size: 13px;
        color: var(--accent-yellow);
        font-weight: 700
    }

.no-results-item {
    padding: 20px;
    text-align: center;
    color: #ccc
}

.about-us-logos-container {
    position: absolute;
    top: 25px;
    left: 25px;
    z-index: 5
}

.about-us-logo {
    display: block
}

.about-us-discord-logo {
    height: auto;
    opacity: .8;
    border-radius: 50%
}

    .about-us-discord-logo:hover {
        opacity: 1;
        box-shadow: 0 0 10px #5865f2
    }

.fixed-cart-button:active, .product-item:active, .rank-option:active .rank-icon-wrapper, .service-offer-card:active, .subscription-item:active, .subscription-option-label:active .subscription-option-card, a.discord-button:active, a.footer-link:active, a.nav-link:active, button:active {
    transform: scale(.96) translateY(2px) !important;
    box-shadow: inset 0 3px 7px rgba(0,0,0,.2) !important;
    transition: transform .1s,box-shadow .1s
}

.add-to-cart-product-page:active, .buy-btn:active, .confirm-payment-btn:active {
    background-color: #218838
}

.toggle-discount-container {
    text-align: center;
    margin: 10px 0
}

.toggle-discount {
    color: var(--accent-yellow);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    transition: color .3s ease
}

    #product-share-btn svg, .toggle-discount:hover {
        color: #fff
    }

.discount-wrapper {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .4s ease-in-out,opacity .4s ease-in-out,margin-top .4s ease-in-out
}

    .discount-wrapper.visible {
        max-height: 150px;
        opacity: 1;
        margin-top: 15px
    }

#discountMessage {
    min-height: 18px
}

#cartModal .modal-body {
    height: calc(90vh - 120px)
}

#cartItemsContainer {
    padding: 10px;
    margin-bottom: 15px;
    border-top: 1px solid rgba(255,255,255,.1);
    border-bottom: 1px solid rgba(255,255,255,.1)
}

#cartModal #cartTotalContainer, #cartModal .checkout-btn-centered, #cartModal .discount-code-container, #cartModal h2 {
    flex-shrink: 0
}

.card-enter {
    animation: smooth-enter-animation .5s cubic-bezier(.25,.46,.45,.94) forwards
}

.category-header {
    flex-direction: column;
    gap: 5px !important;
    margin-bottom: 15px !important
}

    .category-header h2 {
        margin-right: 0;
        border-right: none;
        padding-right: 0
    }

.category-search-container svg {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    color: rgba(224,224,224,.6)
}

#offlineSearchInput {
    border: 1px solid rgba(255,255,255,.3) !important;
    backdrop-filter: blur(1px) !important;
    -webkit-backdrop-filter: blur(1px) !important
}

    #offlineSearchInput:focus {
        border-color: var(--accent-yellow)
    }

.category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255,255,255,.1)
}

.search-and-filter-controls {
    display: flex;
    align-items: center;
    gap: 15px
}

.category-search-container {
    position: relative
}

#genreFilterSelect, #offlineSearchInput {
    padding: 8px 15px;
    font-size: 14px;
    border-radius: 20px;
    border: 1px solid var(--main-purple);
    background-color: rgba(0,0,0,.3);
    color: var(--white-text);
    font-family: "Tajawal",sans-serif;
    transition: all .3s ease
}

#offlineSearchInput {
    padding-right: 40px
}

    #genreFilterSelect:focus, #offlineSearchInput:focus {
        outline: 0;
        border-color: #fff;
        box-shadow: 0 0 10px rgba(255,255,255,.5);
        background-color: rgba(0,0,0,.5)
    }

.load-more-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    position: relative
}

.load-more-btn {
    position: relative;
    background: linear-gradient(180deg,rgba(255,255,255,.05)0,rgba(255,255,255,.01) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255,255,255,.5);
    border-bottom: 1px solid rgba(255,255,255,.1);
    border-left: 1px solid rgba(255,255,255,.2);
    border-right: 1px solid rgba(255,255,255,.2);
    border-radius: 60px;
    color: #fff;
    padding: 15px 45px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    overflow: hidden;
    transition: all .4s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,.1),inset 0 0 15px rgba(255,255,255,.05)
}

    .load-more-btn::after, .load-more-btn::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%
    }

    .load-more-btn::after {
        top: 0;
        left: -150%;
        background: linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
        transform: skewX(-20deg);
        animation: sheen-flow 4s infinite ease-in-out;
        pointer-events: none
    }

    .load-more-btn::before {
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        border-radius: 60px;
        border: 1px solid rgba(255,255,255,.4);
        opacity: 0;
        z-index: -1;
        animation: ripple-soft 3s infinite cubic-bezier(0,.2,.8,1)
    }

    .load-more-btn:hover {
        transform: translateY(-3px);
        background: rgba(255,255,255,.1);
        border-color: rgba(255,255,255,.8);
        box-shadow: 0 0 25px rgba(255,255,255,.3),inset 0 0 20px rgba(255,255,255,.1);
        letter-spacing: 3px;
        text-shadow: 0 0 8px rgba(255,255,255,.5)
    }

    .load-more-btn i {
        margin-left: 8px;
        font-size: .9em;
        transition: transform .3s
    }

    .load-more-btn:hover i {
        transform: rotate(-45deg) scale(1.1)
    }

.volume-discount-badge {
    background: linear-gradient(45deg,var(--accent-yellow),#f90);
    color: var(--black-text);
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    margin-top: 5px;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
    animation: gold-pulse 2s infinite alternate
}

#discord-calculator-card select {
    background-color: rgba(17,14,26,.5);
    transition: all .3s ease;
    width: 120px;
    padding: 8px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 700;
    border: 1px solid #7289da;
    background-color: #110e1a;
    color: #fff;
    border-radius: 8px;
    font-family: "Tajawal",sans-serif;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-repeat: no-repeat;
    background-position: left 5px center
}

    #discord-calculator-card select:focus {
        border-color: #8a99f5;
        box-shadow: 0 0 10px rgba(88,101,242,.7)
    }

    #discord-calculator-card select option[value=""] {
        color: #888
    }

#discordDecorationsPageContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0
}

#discord-calculator-card {
    background: linear-gradient(145deg,rgba(88,101,242,.2),rgba(44,26,64,.4));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(88,101,242,.5);
    border-radius: 20px;
    box-shadow: 0 8px 32px 0 rgba(0,0,0,.3);
    padding: 35px;
    max-width: 900px;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 30px;
    transition: all .3s ease
}

.card-form-section, .card-info-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center
}

.card-info-section {
    gap: 15px
}

.card-form-section {
    gap: 10px
}

#discord-calculator-card .card-icon {
    width: 280px;
    height: 280px;
    object-fit: contain;
    filter: drop-shadow(0 0 15px rgba(88,101,242,.6));
    margin-top: -70px;
    margin-bottom: -15px
}

#discord-calculator-card h3 {
    color: #fff;
    font-size: 1.8rem;
    border: 0;
    padding: 0;
    margin: 0
}

#discord-calculator-card p {
    color: var(--light-text);
    max-width: 350px;
    line-height: 1.6
}

#discord-calculator-card .input-wrapper textarea {
    background: 0 0;
    border: 0;
    outline: 0;
    width: 100%;
    flex-grow: 1;
    color: #fff;
    font-size: 14px;
    text-align: right;
    resize: vertical;
    min-height: 50px
}

#discord-calculator-card .calculator-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
    margin: 10px 0
}

#discord-calculator-card .input-group {
    text-align: center
}

    #discord-calculator-card .input-group label {
        display: block;
        font-weight: 700;
        color: #7289da;
        margin-bottom: 8px;
        font-size: 14px
    }

.quantity-selector-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px
}

    .quantity-selector-inline input {
        width: 50px;
        padding: 8px;
        font-size: 1.2rem;
        text-align: center;
        font-weight: 700;
        border: 1px solid #7289da;
        background-color: #110e1a;
        color: #fff;
        border-radius: 8px;
        -moz-appearance: textfield
    }

        .quantity-selector-inline input::-webkit-inner-spin-button, .quantity-selector-inline input::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0
        }

    .quantity-selector-inline button {
        width: 35px;
        height: 35px;
        font-size: 1.5rem;
        font-weight: 700;
        cursor: pointer;
        padding: 0;
        margin: 0;
        line-height: 35px;
        background-color: #5865f2;
        color: #fff;
        border: 0;
        border-radius: 50%
    }

#discord-price-display {
    background-color: rgba(0,0,0,.2);
    border: 1px solid #7289da;
    border-radius: 12px;
    padding: 10px 20px;
    width: 100%;
    max-width: 300px
}

    #discord-price-display .price-label {
        color: #ccc;
        font-size: .9rem;
        display: block
    }

    #discord-price-display .price-value {
        color: #90ee90;
        font-size: 1.8rem;
        font-weight: 700
    }

#discord-calculator-card .buy-btn {
    color: #fff;
    width: 100%;
    max-width: 300px;
    padding: 12px;
    font-size: 1.1rem;
    border: 0;
    background-image: linear-gradient(45deg,#5865f2,#9945ff);
    margin-top: 5px
}

    #discord-calculator-card .buy-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 0 20px rgba(153,69,255,.7);
        background-image: linear-gradient(45deg,#6975f3,#a35aff)
    }

#discord-calc-error {
    color: #ff4757;
    font-weight: 700;
    min-height: 20px;
    margin-bottom: -5px
}

.skeleton-card {
    border-radius: 12px;
    padding: 10px;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 180px
}

    .skeleton-card .skeleton-button, .skeleton-card .skeleton-image, .skeleton-card .skeleton-text {
        background-color: var(--skeleton-bg);
        background-image: linear-gradient(90deg,var(--skeleton-bg),var(--skeleton-shimmer),var(--skeleton-bg));
        background-size: 200px 100%;
        background-repeat: no-repeat;
        animation: skeleton-glow 1.5s infinite linear
    }

    .skeleton-card .skeleton-image {
        width: 100%;
        height: 160px;
        border-radius: 8px
    }

    .skeleton-card .skeleton-button, .skeleton-card .skeleton-text {
        height: 20px;
        border-radius: 4px
    }

        .skeleton-card .skeleton-text.short {
            width: 60%
        }

    .skeleton-card .skeleton-button {
        height: 38px;
        border-radius: 8px;
        margin-top: auto
    }

.rental-product-item {
    width: 120px !important;
    min-height: 240px !important
}

    .rental-product-item .product-image-wrapper {
        height: 100px !important
    }

    .rental-product-item h3 {
        font-size: 12px !important;
        min-height: 30px !important
    }

    .rental-product-item p {
        font-size: 11px !important
    }

    .rental-product-item .rental-duration-selector {
        font-size: 11px !important;
        padding: 4px !important
    }

    .rental-product-item .buy-btn {
        font-size: 12px !important;
        padding: 6px 8px !important
    }

#customer-reviews .comment-form, #customer-reviews hr, #feedback-section #feedback-message, #feedback-section #rating-name, #feedback-section #rating-text, #feedback-section .rating-input, #feedback-section button[onclick="submitStoreRating()"] {
    display: none
}

#customer-reviews h3:first-of-type {
    display: none
}

.main-products-section.glass-card.darker {
    border: 1px solid #8e6abf;
    box-shadow: 0 0 20px 4px rgba(44,26,64,.7);
    transition: all .3s ease-in-out
}

.rental-card {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 580px;
    min-height: 210px;
    border-radius: 15px;
    background: linear-gradient(145deg,rgba(255,255,255,.7),rgba(160,116,79,.7));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.2);
    box-shadow: 0 8px 30px rgba(0,0,0,.2);
    transition: all .4s ease
}

    .rental-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 40px rgba(119,107,85,.25);
        border-color: #a67b5b
    }

.rental-card-image {
    flex: 0 0 200px;
    position: relative;
    overflow: hidden;
    padding: 8px;
    box-sizing: border-box;
    background-clip: content-box;
    border-left: 1px solid rgba(166,123,91,.4);
    background-size: cover;
    background-position: center
}

    .rental-card-image::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        background: linear-gradient(to right,rgba(255,255,255,0)0,rgba(255,255,255,.3) 50%,rgba(255,255,255,0) 100%);
        transform: translateX(-100%) skewX(-25deg)
    }

.rental-badge {
    position: absolute;
    top: 15px;
    right: -30px;
    background-color: #8c5a3b;
    color: #fff;
    padding: 5px 30px;
    font-size: 14px;
    font-weight: 700;
    transform: rotate(45deg);
    box-shadow: 0 2px 5px rgba(0,0,0,.2);
    text-align: center
}

.rental-card-details {
    display: flex;
    flex-direction: column;
    padding: 20px 25px;
    flex-grow: 1;
    text-align: right;
    color: #4a2c2a
}

    .rental-card-details h3 {
        color: #4a2c2a;
        margin: 0 0 10px;
        font-size: 1.4rem;
        border: 0;
        padding: 0
    }

    .rental-card-details p {
        font-size: .9rem;
        color: #5e454b;
        flex-grow: 1;
        line-height: 1.5
    }

.rental-controls {
    margin-top: auto;
    padding-top: 15px
}

    .rental-controls label {
        font-size: .9rem;
        font-weight: 700;
        margin-bottom: 8px;
        color: #8c5a3b
    }

.duration-selector-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 15px
}

.duration-btn {
    flex-grow: 1;
    padding: 8px 10px;
    font-size: 14px;
    font-weight: 700;
    font-family: "Tajawal",sans-serif;
    border: 1px solid #c8bda5;
    background-color: transparent;
    color: #6e6658;
    border-radius: 6px;
    cursor: pointer;
    transition: all .2s ease;
    margin: 0;
    position: relative;
    overflow: hidden;
    z-index: 1
}

    .duration-btn::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 75%;
        height: 100%;
        background: linear-gradient(to right,rgba(255,255,255,0)0,rgba(255,255,255,.25) 50%,rgba(255,255,255,0) 100%);
        transform: skewX(-25deg);
        z-index: -1;
        transition: left .8s
    }

    .duration-btn:hover::before {
        left: 125%
    }

    .duration-btn:hover {
        background-color: rgba(140,90,59,.1);
        border-color: #8c5a3b;
        color: #8c5a3b
    }

    .duration-btn.active {
        background-color: #8c5a3b;
        color: #fff;
        border-color: #8c5a3b
    }

        .duration-btn.active:hover::before {
            left: -100%
        }

.rental-price-display {
    font-size: 1.5rem;
    font-weight: 700;
    color: #4a2c2a;
    min-height: 30px;
    margin-top: 10px
}

.rental-card .buy-btn {
    width: 100%;
    margin-top: 10px;
    background-color: #6b462d;
    color: #fff;
    padding: 10px;
    font-size: 1rem
}

    .rental-card .buy-btn:hover {
        background-color: #4a2c2a;
        box-shadow: 0 0 15px #6b462d
    }

#fortnite-boosting, #game-rentals-section {
    background-size: cover;
    background-position: center;
    background-attachment: fixed
}

#game-rentals-section {
    background-image: url(https://i.postimg.cc/brJZR9Hr/your-coop-image.webp);
    border-color: #8e6abf
}

.main-image-placeholder, .product-image-wrapper {
    background-image: url(./images/minecraft_loading.gif);
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center center
}

    .product-image-wrapper img, .sub-image-wrapper img {
        position: relative;
        z-index: 2;
        background-color: transparent
    }

#fortnite-boosting {
    background-image: linear-gradient(rgba(30,17,50,.85),rgba(30,17,50,.85)),url(https://i.postimg.cc/7LxgCcvB/fortnite-boosting-bg.jpg);
    padding: 40px 20px
}

.fn-boosting-title {
    text-align: center !important;
    direction: ltr;
    color: #00c0ff;
    font-size: 2.5rem !important;
    text-shadow: 0 0 15px rgba(0,192,255,.7);
    border: 0 !important
}

.fn-boosting-card {
    margin: 0 auto;
    background: rgba(10,20,40,.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0,192,255,.5)
}

.fn-boosting-content h3 {
    color: var(--white-text);
    border: 0;
    padding: 0
}

.fn-boosting-content p {
    text-align: center;
    color: var(--light-text);
    font-size: 1rem;
    line-height: 1.6
}

.fn-calculator {
    display: flex;
    justify-content: center;
    margin: 30px 0;
    flex-wrap: wrap
}

.level-input-group {
    flex: 1;
    min-width: 200px
}

    .level-input-group label {
        display: block;
        text-align: center;
        font-weight: 700;
        margin-bottom: 10px;
        color: #00c0ff
    }

    .level-input-group input {
        width: 100%;
        padding: 12px;
        font-size: 1.5rem;
        text-align: center;
        font-weight: 700;
        border-radius: 8px;
        border: 1px solid var(--main-purple)
    }

#fn-price-display {
    background-color: rgba(0,0,0,.2);
    border: 1px solid #00c0ff;
    margin: 20px auto;
    max-width: 350px
}

    #fn-price-display .price-label {
        color: #ccc;
        font-size: 1rem
    }

    #fn-price-display .price-value {
        display: block;
        font-size: 2.2rem;
        font-weight: 700;
        color: #90ee90;
        margin-top: 5px
    }

.fn-user-info-form {
    margin-top: 30px;
    border-top: 1px solid rgba(0,192,255,.2)
}

    .fn-user-info-form .form-step-title {
        text-align: center;
        color: var(--accent-yellow);
        font-weight: 700
    }

    .fn-user-info-form .input-wrapper {
        max-width: 400px
    }

#fn-error-message {
    color: #ff4757;
    text-align: center;
    font-weight: 700;
    min-height: 24px
}

#fn-order-btn {
    display: block;
    width: 80%;
    max-width: 400px;
    margin: 20px auto 0;
    padding: 15px;
    font-size: 1.2rem;
    background-color: #00c0ff;
    color: #fff;
    text-shadow: 1px 1px 5px rgba(0,0,0,.5)
}

    #fn-order-btn:hover {
        background-color: #009bcc;
        box-shadow: 0 0 20px rgba(0,192,255,.7)
    }

#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1e1132;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity .7s ease-out,visibility .7s ease-out;
    opacity: 1;
    visibility: visible
}

.loading-animation {
    width: 128px;
    height: 128px
}

.loading-text {
    color: var(--accent-yellow);
    margin-top: 20px;
    font-size: 1.2rem;
    font-weight: 700
}

#loading-screen.hidden {
    opacity: 0;
    visibility: hidden
}

#cod-services h2 {
    display: block;
    text-align: center;
    margin-right: 0;
    border-right: none;
    padding-right: 0
}

#cod-services .tab-buttons {
    display: flex;
    justify-content: center
}

#cod-services .tabs-container {
    margin-top: 25px
}

#cod-services {
    transition: background-image .5s ease-in-out;
    background-size: cover;
    background-position: center;
    background-attachment: fixed
}

.tab-button:not(.active):hover {
    color: #fff;
    opacity: 1;
    text-shadow: 0 0 8px rgba(255,255,255,.7)
}

#about {
    position: relative
}

.about-us-logo {
    position: absolute;
    top: 25px;
    left: 25px;
    width: 100px;
    opacity: .7;
    border-radius: 8px
}

#product-share-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10;
    width: 40px;
    height: 40px;
    background-color: rgba(0,0,0,.5);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 50%;
    align-items: center;
    cursor: pointer;
    transition: all .3s ease;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px)
}

    #product-share-btn:hover {
        background-color: rgba(0,0,0,.7);
        transform: scale(1.1);
        box-shadow: 0 0 10px #39ff14
    }

#product-share-btn, #subscription-options-container.single-option {
    display: flex;
    justify-content: center
}

    #subscription-options-container.single-option .subscription-option-label {
        width: 150px
    }

.dropdown-divider {
    background-color: rgba(255,255,255,.2)
}

#discord-decorations-section, #discordDecorationsPage {
    background-size: cover;
    background-position: center;
    border-color: #7289da
}

#discord-decorations-section {
    background-image: linear-gradient(rgba(30,17,50,.85),rgba(30,17,50,.85)),url(https://i.postimg.cc/WzpvK08D/discord-background.webp);
    background-attachment: fixed
}

#discordDecorationsPage {
    background-image: linear-gradient(rgba(30,17,50,.85),rgba(30,17,50,.85)),url(https://i.postimg.cc/13bytnRZ/discord-background1.webp)
}

#discord-decorations-section .service-offer-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 380px;
    padding: 20px;
    background: linear-gradient(135deg,#1e0b3c,#0d061c);
    transition: transform .3s ease
}

    #discord-decorations-section .service-offer-card:hover {
        transform: translateY(-8px) scale(1.02)
    }

#discord-decorations-section .service-card-image {
    display: block;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,.3)
}

#discord-decorations-section .service-offer-card h3, #discord-decorations-section .service-offer-card p {
    text-shadow: 1px 1px 3px rgba(0,0,0,.5);
    margin: 10px 0
}

#discord-decorations-section .service-offer-card button {
    margin-top: auto
}

#decorations-offer-card {
    border: 1px solid #7289da
}

#discordDecorationsPageContainer .product-item {
    width: 130px !important;
    min-height: 230px !important;
    padding: 8px !important
}

#discordDecorationsPageContainer .product-image-wrapper {
    height: 100px !important
}

#discordDecorationsPageContainer .product-item h3 {
    font-size: 13px !important;
    min-height: 30px !important
}

#discordDecorationsPageContainer .product-item p {
    font-size: 12px !important
}

#discordDecorationsPageContainer .product-item .product-description-text {
    display: none !important
}

#discord-decorations-section .service-offer-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 70px;
    height: 100%;
    background: rgba(255,255,255,.2);
    transform: skewX(-25deg) translateX(-200px);
    transition: transform .7s ease-in-out;
    z-index: 1;
    filter: blur(25px)
}

#discord-decorations-section .service-offer-card:hover::before {
    transform: skewX(-25deg) translateX(450px)
}

#discord-decorations-section .service-offer-card > * {
    position: relative;
    z-index: 2
}

#home-decorations-offer-card:hover, #home-developing-offer-card:hover {
    box-shadow: 0 12px 30px rgba(0,0,0,.5)
}

#theme-toggle-btn {
    position: absolute;
    bottom: 25px;
    right: 25px;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,.2)
}

    #theme-toggle-btn:hover {
        transform: translateY(-3px) scale(1.1);
        box-shadow: 0 6px 20px rgba(0,0,0,.3)
    }

    #theme-toggle-btn svg {
        width: 22px;
        height: 22px;
        transition: all .3s ease
    }

.sun-icon {
    color: #fc0
}

.moon-icon {
    color: #8e6abf
}

body.light-mode #theme-toggle-btn .sun-icon {
    display: none
}

body:not(.light-mode) #theme-toggle-btn .moon-icon {
    display: none
}

.main-image-placeholder {
    position: relative;
    overflow: hidden
}

.qr-text-content p:nth-child(1) {
    font-size: 16px;
    line-height: 1.6
}

.payment-header-container .payment-header-box:nth-child(2) {
    order: 1
}

.payment-header-container .payment-header-box:nth-child(1) {
    order: 2
}

.payment-header-container .payment-header-box:nth-child(3) {
    order: 3
}

.payment-header-container .payment-header-box:nth-child(4) {
    order: 4
}

#vodafoneForm .input-wrapper {
    box-sizing: border-box;
    width: 320px;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0 auto 5px
}

    #vodafoneForm .input-wrapper:focus-within {
        border-color: #fff !important;
        box-shadow: 0 0 10px rgba(255,255,255,.5) !important
    }

        #vodafoneForm .input-wrapper:focus-within input, #vodafoneForm .input-wrapper:focus-within textarea {
            border-color: transparent !important;
            box-shadow: none !important
        }

        #vodafoneForm .input-wrapper:focus-within svg {
            color: #fff
        }

    #vodafoneForm .input-wrapper input, #vodafoneForm .input-wrapper textarea {
        padding-top: 6px;
        padding-bottom: 6px
    }

    #vodafoneForm .input-wrapper:has(input[name=email]) {
        position: relative;
        top: 5px
    }

.input-wrapper svg {
    color: #fff;
    flex-shrink: 0
}

.input-wrapper textarea {
    background: 0 0;
    border: 0;
    outline: 0;
    width: 100%;
    flex-grow: 1;
    color: #fff;
    font-size: 16px;
    text-align: right;
    font-family: "Tajawal",sans-serif;
    resize: vertical;
    min-height: 40px
}

.pp-AB69NXSVUNP78 {
    text-align: center;
    border: 0;
    border-radius: 1.5rem;
    min-width: 11.625rem;
    padding: 0 2rem;
    height: 2.625rem;
    font-weight: 700;
    background-color: #000;
    color: #fff;
    font-family: "Helvetica Neue",Arial,sans-serif;
    font-size: 1rem;
    line-height: 1.25rem;
    cursor: pointer;
    transition: all .2s ease
}

    .pp-AB69NXSVUNP78:hover {
        background-color: #333;
        transform: translateY(-2px)
    }

#productPage button {
    margin-top: 30px
}

.modal-product-header .product-platform-info {
    display: none;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important
}

.product-image-section img {
    height: auto;
    max-height: 300px;
    width: 100%;
    object-fit: contain
}

.product-image-section {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    max-width: 100%
}

.product-actions-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: auto
}

#addToCartBtn {
    margin-top: 10px;
    align-self: flex-start
}

.product-image-gallery .thumbnail {
    max-width: 100px;
    max-height: 100px
}

    .product-image-gallery .thumbnail.active, .product-image-gallery .thumbnail:hover {
        transform: scale(1.05);
        box-shadow: 0 0 10px rgba(255,204,0,.5)
    }

#designs {
    background-image: linear-gradient(rgba(30,17,50,.8),rgba(30,17,50,.8)),url(https://i.postimg.cc/HkmS26Dr/my-new-gaming-bg.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 95%;
    margin: 20px auto;
    min-height: 90vh;
    border: 2px solid #cda1ff;
    border-radius: 20px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    position: relative;
    box-sizing: border-box;
    overflow: hidden
}

#valorant-boosting {
    border-radius: 15px;
    overflow: hidden;
    padding: 15px;
    border: 2px solid;
    animation: static-rgb-calm 6s linear infinite
}

    #valorant-boosting::before {
        content: "";
        position: absolute;
        width: 250%;
        height: 250%;
        top: -75%;
        left: -75%;
        z-index: -1;
        background: conic-gradient(#c31432,#8a2be2,#240b36,#0d1b2a,#c31432);
        animation: animated-rgb-border 6s linear infinite
    }

    #valorant-boosting, #valorant-boosting::after {
        background-size: cover !important;
        background-position: center !important
    }

        #valorant-boosting::after {
            content: "";
            position: absolute;
            inset: 2px;
            background-image: url(https://i.postimg.cc/Y0V3YxN1/valorantreynass.png) !important;
            border-radius: 13px;
            z-index: -1
        }

#boosting-cover {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 15px;
    background: linear-gradient(145deg,rgba(10,10,10,.6),rgba(40,40,40,.5));
    border-radius: 12px;
    animation: fadeIn .8s ease-in-out;
    max-width: 550px;
    margin: 0 auto 20px;
    box-sizing: border-box;
    transition: opacity .5s ease-in-out,transform .5s ease-in-out
}

    #boosting-cover img.cover-image {
        max-width: 200px;
        width: 100%;
        height: auto;
        margin-bottom: 15px;
        filter: drop-shadow(0 0 15px rgba(255,70,85,.5))
    }

    #boosting-cover h3 {
        font-size: 1.8rem;
        color: #ff4655;
        margin-bottom: 10px;
        border: 0;
        padding: 0
    }

    #boosting-cover p {
        font-size: .95rem;
        color: #e0d8f0;
        max-width: 500px;
        line-height: 1.6;
        margin-bottom: 15px
    }

    #boosting-cover .start-boosting-btn {
        background-color: #ff4655;
        color: #fff;
        font-size: 15px;
        padding: 10px 30px;
        border-radius: 50px;
        border: 2px solid #ff4655;
        transition: all .3s ease
    }

        #boosting-cover .start-boosting-btn:hover {
            background-color: transparent;
            color: #ff4655;
            box-shadow: 0 0 15px rgba(255,70,85,.5);
            transform: translateY(-3px) scale(1.05)
        }

#valorant-boosting #boosting-calculator-container.visible, #valorant-boosting #boosting-cover {
    display: flex
}

#valorant-boosting #boosting-calculator-container {
    display: none
}

#boosting-cover.fade-out {
    opacity: 0;
    transform: scale(.95);
    pointer-events: none
}

#valorant-boosting .close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: color .3s,transform .3s;
    z-index: 10
}

    #valorant-boosting .close-btn:hover {
        color: var(--accent-yellow);
        transform: scale(1.2)
    }

#valorant-boosting {
    position: relative
}

#boosting-offer-card {
    background: linear-gradient(135deg,#3c1870,#a32d3b);
    border: 1px solid #ff4655
}

.order-summary-container {
    background-color: rgba(0,0,0,.25);
    border: 1px solid var(--main-purple);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    text-align: right
}

#creditcardDetails .order-summary-container, #genshin-id-group label, .modal.is-visible.payment-modal .modal-body > div {
    display: none
}

.order-summary-container h4 {
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--accent-yellow);
    border-bottom: 1px solid rgba(255,255,255,.1);
    padding-bottom: 10px;
    font-size: 1.1rem;
    text-align: center;
    border-right: none;
    padding-right: 0
}

.summary-item {
    display: flex;
    justify-content: space-between;
    font-size: .95rem;
    margin-bottom: 8px;
    padding: 5px;
    border-bottom: 1px solid rgba(255,255,255,.05)
}

    .summary-item:last-child {
        border-bottom: none
    }

    .summary-item strong {
        color: #ccc;
        font-weight: 400
    }

    .summary-item span {
        font-weight: 700;
        color: #fff;
        text-align: left;
        direction: ltr
    }

#boosting-calculator-container {
    display: flex;
    flex-direction: column;
    gap: 25px
}

.calculator-inputs {
    background: rgba(0,0,0,.2);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--main-purple)
}

.form-step-title {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-yellow);
    margin-top: 0
}

.rank-selection-area {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap
}

.rank-selector-column {
    flex: 1;
    min-width: 300px;
    background: rgba(0,0,0,.2);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--main-purple)
}

.rank-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(60px,1fr));
    gap: 10px;
    max-height: 250px;
    overflow-y: auto;
    padding: 5px
}

.rank-option {
    position: relative
}

    .rank-option input[type=radio] {
        appearance: none;
        -webkit-appearance: none;
        position: absolute;
        opacity: 0;
        width: 100%;
        height: 100%;
        cursor: pointer
    }

    .rank-option .rank-icon-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 5px;
        border-radius: 8px;
        background-color: rgba(255,255,255,.05);
        border: 2px solid transparent;
        transition: all .2s ease-in-out;
        opacity: 1
    }

        .rank-option .rank-icon-wrapper img {
            width: 50px;
            height: 50px;
            object-fit: contain
        }

    .rank-option .rank-name {
        font-size: 10px;
        font-weight: 700;
        color: #ccc;
        margin-top: 4px;
        white-space: nowrap
    }

    .rank-option input[type=radio]:checked + .rank-icon-wrapper {
        background-color: rgba(255,204,0,.2);
        border-color: var(--accent-yellow);
        transform: scale(1.05);
        opacity: 1
    }

    .rank-option input[type=radio]:hover + .rank-icon-wrapper {
        opacity: 1;
        border-color: rgba(255,255,255,.5)
    }

    .rank-option.disabled .rank-icon-wrapper {
        filter: grayscale(100%);
        opacity: .2;
        cursor: not-allowed
    }

#boosting-price-display, .boosting-summary {
    display: flex;
    flex-direction: column;
    align-items: center
}

.boosting-summary {
    gap: 15px;
    margin-top: 10px
}

#boosting-price-display {
    background-color: rgba(0,0,0,.2);
    border: 1px solid var(--main-purple);
    border-radius: 8px;
    padding: 15px;
    width: 100%;
    max-width: 350px;
    min-height: 4em;
    justify-content: center;
    gap: 5px
}

    #boosting-price-display .price-label {
        font-size: 1.1rem;
        color: #ccc;
        font-weight: 700
    }

    #boosting-price-display .price-value {
        font-size: 1.8rem;
        font-weight: 700;
        color: #90ee90
    }

#boosting-error-message {
    color: #ff4655;
    font-weight: 700;
    min-height: 20px
}

.custom-offer-card, .valorant-coaching-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 12px;
    transition: transform .3s ease-out;
    padding: 20px;
    margin: 20px auto;
    text-align: right
}

.valorant-coaching-card {
    max-width: 800px;
    min-height: 500px;
    background: linear-gradient(135deg,#3c1870,#0d061c);
    border: 1px solid #ff4655;
    box-shadow: 0 8px 30px rgba(0,0,0,.4);
    overflow: hidden;
    position: relative
}

    .valorant-coaching-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 12px 40px rgba(0,0,0,.6)
    }

    .valorant-coaching-card .card-image-full {
        width: 100%;
        height: 250px;
        object-fit: cover;
        border-radius: 8px;
        margin-bottom: 20px
    }

    .valorant-coaching-card .card-content {
        flex-grow: 1
    }

    .valorant-coaching-card .card-title {
        font-size: 2.2rem;
        color: #ff4655;
        border-right: 4px solid #fc0;
        padding-right: 10px;
        margin-bottom: 10px;
        display: inline-block
    }

    .valorant-coaching-card .card-description {
        font-size: 1.1rem;
        color: #e0d8f0;
        line-height: 1.6;
        margin-bottom: 20px
    }

    .valorant-coaching-card .card-features {
        list-style: none;
        padding: 0;
        margin-bottom: 20px
    }

        .valorant-coaching-card .card-features li {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
            font-size: 1rem;
            color: #fc0
        }

    .valorant-coaching-card .buy-btn {
        background-color: #ff4655;
        color: #fff;
        font-size: 18px;
        padding: 12px 35px;
        border-radius: 50px;
        border: 2px solid #ff4655;
        margin-top: auto;
        align-self: center
    }

        .valorant-coaching-card .buy-btn:hover {
            background-color: transparent;
            color: #ff4655;
            box-shadow: 0 0 15px rgba(255,70,85,.5);
            transform: translateY(-3px) scale(1.05)
        }

.custom-offer-card {
    max-width: 350px;
    background: linear-gradient(145deg,#1f1133,#0d061c);
    border: 1px solid #8e6abf;
    box-shadow: 0 6px 20px rgba(0,0,0,.25)
}

.calculator-card:hover {
    transform: translateY(-10px) scale(1.03);
    border: 1px solid rgba(255,255,255,.3)
}

.custom-offer-card:hover .offer-order-btn, .custom-offer-card:hover .offer-price-range {
    transform: translateY(0);
    opacity: 1
}

.custom-offer-card .offer-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px
}

.custom-offer-card .offer-image {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #ff4655
}

.custom-offer-card .offer-title {
    font-size: 1.5rem;
    color: #fff;
    margin: 0;
    flex-grow: 1
}

.custom-offer-card .offer-description {
    font-size: 1rem;
    color: var(--light-text);
    line-height: 1.6;
    margin-bottom: 20px
}

.custom-offer-card .offer-features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px
}

    .custom-offer-card .offer-features li {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 8px;
        font-size: .95rem;
        color: var(--accent-yellow)
    }

.custom-offer-card .offer-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.1)
}

.custom-offer-card .offer-price {
    font-size: 1.8rem;
    font-weight: 700;
    color: #ff4655
}

.custom-offer-card .buy-btn {
    background-color: #ff4655;
    color: #fff;
    font-size: 16px;
    padding: 10px 25px;
    border-radius: 50px;
    border: 2px solid #ff4655
}

    .custom-offer-card .buy-btn:hover {
        background-color: transparent;
        color: #ff4655;
        box-shadow: 0 0 15px rgba(255,70,85,.5);
        transform: translateY(-3px) scale(1.05)
    }

#homeSoftwareSubscriptionsContainer .subscription-item {
    width: 220px;
    min-height: auto
}

    #homeSoftwareSubscriptionsContainer .subscription-item .sub-image-wrapper img {
        height: 100px
    }

    #homeSoftwareSubscriptionsContainer .subscription-item .sub-content {
        padding: 12px
    }

        #homeSoftwareSubscriptionsContainer .subscription-item .sub-content h3 {
            font-size: 1rem
        }

        #homeSoftwareSubscriptionsContainer .subscription-item .sub-content p {
            font-size: .85rem;
            min-height: 30px
        }

    #homeSoftwareSubscriptionsContainer .subscription-item .sub-price {
        font-size: 1.2rem
    }

    #homeSoftwareSubscriptionsContainer .subscription-item .buy-btn {
        font-size: 13px;
        padding: 8px 12px
    }

.subscription-subcategory-label {
    text-align: center;
    color: var(--accent-yellow);
    margin-top: 25px;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--main-purple);
    padding-bottom: 8px;
    display: inline-block
}

#software-keys-section {
    background-image: linear-gradient(rgba(30,17,50,.85),rgba(30,17,50,.85)),url(https://i.postimg.cc/7LhhphBz/wallpapersden-com-blue-sky-digital-mountain-art-6709x2684.webp);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    border-color: #8e6abf
}

#giftingFinalPriceDisplay, .input-wrapper {
    display: flex;
    align-items: center;
    background-color: rgba(0,0,0,.2);
    border: 1px solid var(--main-purple);
    border-radius: 8px;
    width: 100%;
    max-width: 350px;
    transition: all .3s ease
}

#giftingFinalPriceDisplay {
    padding: 15px;
    margin: 20px auto 0;
    min-height: 4em;
    flex-direction: column;
    justify-content: center;
    gap: 5px
}

    #giftingFinalPriceDisplay .price-label {
        font-size: 1.1rem;
        color: #ccc;
        font-weight: 700
    }

    #giftingFinalPriceDisplay .price-value {
        font-size: 1.8rem;
        font-weight: 700;
        color: #90ee90
    }

.input-wrapper {
    gap: 12px;
    padding: 8px 15px;
    margin: 0 auto 15px
}

    .input-wrapper:focus-within {
        border-color: #00c0ff;
        box-shadow: 0 0 10px rgba(0,192,255,.5)
    }

        .input-wrapper:focus-within svg {
            color: #00c0ff;
            color: var(--accent-yellow)
        }

    .input-wrapper input {
        background: 0 0;
        border: 0;
        outline: 0;
        width: 100%;
        flex-grow: 1;
        color: #fff;
        font-size: 16px;
        padding: 5px 0;
        text-align: right
    }

#personal-gifting-section {
    background-image: linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)),url(https://i.postimg.cc/8zqLP9dq/your-gifting-image.webp);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 40px 20px;
    margin: 20px;
    border-radius: 15px;
    border: 1px solid #8e6abf
}

.calculator-card {
    position: relative;
    width: 100%;
    max-width: 450px;
    margin: 20px auto;
    padding: 3px;
    border-radius: 20px;
    background: linear-gradient(45deg,rgba(60,24,112,.4),rgba(6,12,58,.4),rgba(163,45,59,.4));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.3);
    transition: all .4s ease;
    animation: smooth-white-glow 2s infinite alternate ease-in-out
}

    .calculator-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 10px 25px rgba(255,255,255,.2);
        border-color: rgba(255,255,255,.4)
    }

.calculator-card-content {
    background: rgba(30,17,50,.6);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 0;
    padding: 30px;
    border-radius: 18px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.calculator-card-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 15px rgba(255,255,255,.6))
}

.calculator-card h3 {
    font-size: 1.8rem;
    color: #fff;
    margin-bottom: 15px;
    border: 0;
    padding: 0
}

.calculator-card p {
    font-size: 1rem;
    color: #e0d8f0;
    line-height: 1.6;
    max-width: 300px;
    margin-bottom: 25px
}

.calculator-card .buy-btn {
    background-color: transparent;
    color: #fff;
    font-size: 18px;
    padding: 12px 35px;
    border-radius: 50px;
    border: 2px solid #fff;
    box-shadow: none;
    transition: all .3s ease
}

    .calculator-card .buy-btn:hover {
        background-color: #fff;
        color: #3c1870;
        transform: translateY(-3px) scale(1.05);
        box-shadow: 0 6px 20px rgba(255,255,255,.3)
    }

#softwareKeysContainer {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 30px;
    overflow-x: auto;
    padding-bottom: 20px;
    scrollbar-width: none;
    -ms-overflow-style: none
}

    #softwareKeysContainer::-webkit-scrollbar {
        display: none
    }

.gaming-key-card {
    position: relative;
    flex: 0 0 auto;
    width: 280px;
    min-height: 250px;
    padding: 25px;
    border-radius: 20px;
    cursor: pointer;
    transition: all .4s ease;
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 10px 30px rgba(0,0,0,.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center
}

    .gaming-key-card:hover {
        transform: translateY(-10px) scale(1.03);
        border: 1px solid rgba(255,255,255,.3);
        animation: rgb-border 4s linear infinite;
        box-shadow: 0 15px 40px rgba(0,0,0,.6)
    }

    .gaming-key-card img {
        width: 120px;
        height: 120px;
        object-fit: contain;
        filter: drop-shadow(0 0 10px rgba(255,255,255,.5))
    }

.button-primary {
    background-color: #fff;
    color: #110e1a;
    border: 1px solid #ddd;
    transition: all .3s ease;
    animation: glow-animation 3s infinite linear
}

    .button-primary:hover {
        background-color: #f0f0f0;
        color: #000;
        transform: translateY(-2px) scale(1.05)
    }

#confirm-yes-btn {
    background-color: var(--green-buy-btn);
    color: #fff
}

    #confirm-yes-btn:hover {
        background-color: var(--green-buy-btn-hover)
    }

#confirm-no-btn {
    background-color: #6c757d;
    color: #fff
}

    #confirm-no-btn:hover {
        background-color: #5a6268
    }

#genshin-id-group label, #marvel-rivals-id-group {
    text-align: center !important
}

#marvel_rivals_id_input::placeholder {
    text-align: center
}

.modal .close-btn {
    left: auto
}

#navbar .logo-area img {
    margin-right: 0;
    width: 80px;
    height: auto;
    margin-left: 10px
}

html[dir=ltr] .cart-item-extra-info, html[dir=ltr] body {
    text-align: left
}

html[dir=ltr] h1, html[dir=ltr] h2, html[dir=ltr] h3 {
    margin-left: 20px;
    margin-right: 0;
    border-left: 4px solid var(--accent-yellow);
    border-right: none;
    padding-left: 10px;
    padding-right: 0
}

html[dir=ltr] .modal .close-btn {
    left: 15px;
    right: auto
}

html[dir=ltr] #navbar .logo-area img {
    margin-right: 10px;
    margin-left: 0
}

html[dir=ltr] .nav-link::after {
    transform-origin: right
}

html[dir=ltr] .nav-link:hover::after {
    transform-origin: left
}

html[dir=ltr] .footer-link img {
    margin-right: 8px;
    margin-left: 0
}

html[dir=ltr] .support-button img {
    margin-right: 5px;
    margin-left: 0
}

h3 {
    margin-left: 0
}

#footer h3, .modal-body h2, h3 {
    border-left: none;
    padding-left: 0
}

.modal-body h2 {
    padding-right: 0
}

.content-page h2 {
    margin-right: 0
}

#footer h3 {
    margin-left: 0
}

#comments-section h3 {
    border-right: none;
    margin-left: 0
}

.content-page h2, .login-container h2, .signup-container h2 {
    padding-right: 0;
    margin-left: 0;
    padding-left: 0
}

#comments-section h3, .payment-method-card h3, .product-item h3 {
    border-left: none;
    padding-left: 0
}

.payment-method-card h3 {
    border-right: none;
    padding-right: 0
}

#services-section {
    background-image: linear-gradient(rgba(30,17,50,.85),rgba(30,17,50,.85)),url(./images/services-background.png) !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    background-color: transparent !important;
    border: 1px solid #8e6abf;
    box-shadow: 0 4px 30px rgba(0,0,0,.1);
    padding: 20px;
    margin: 20px;
    position: relative;
    border-radius: 15px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none
}

.service-offer-card {
    width: 100%;
    max-width: 300px;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,.3);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 380px;
    transition: all .3s ease-in-out;
    cursor: pointer
}

    .service-offer-card::before {
        top: -1px;
        left: -1px;
        right: -1px;
        bottom: -1px;
        border-radius: 13px;
        background: linear-gradient(45deg,#ff6f61,#ffd166,#4a90e2,#7b42f2);
        opacity: 0;
        filter: blur(10px)
    }

    .service-offer-card:hover::before {
        opacity: 1;
        filter: blur(15px)
    }

    .service-offer-card:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 12px 30px rgba(0,0,0,.5),0 0 35px rgba(170,100,255,.7)
    }

.service-card-image {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,.3)
}

.service-offer-card h3 {
    font-size: 1.5rem;
    color: #fff;
    margin: 10px 0;
    border-bottom: none;
    padding-right: 0;
    text-shadow: 1px 1px 3px rgba(0,0,0,.5)
}

.service-card-description {
    font-size: 1rem;
    color: var(--light-text);
    text-align: center;
    flex-grow: 1;
    display: flex;
    align-items: center;
    padding: 0 10px
}

.service-offer-card button {
    background-color: transparent;
    color: #fff;
    border: 2px solid #fff;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 16px;
    margin-top: 20px;
    transition: all .3s ease
}

    .service-offer-card button:hover {
        background-color: #fff;
        color: #110e1a;
        box-shadow: 0 0 10px rgba(255,255,255,.7);
        transform: translateY(-2px)
    }

#design-offer-card {
    background: linear-gradient(135deg,#1e0b3c,#0d061c);
    border: 1px solid #8e6abf
}

#developing-offer-card {
    background: linear-gradient(135deg,#0b1a3c,#06111c);
    border: 1px solid #4a90e2
}

#modalProductInfo .description-display {
    text-align: right
}

#designs .custom-order-header-text, .custom-order-header-text {
    position: relative;
    top: -40px;
    border: 1px solid rgba(255,255,255,.5);
    padding: 10px 15px;
    border-radius: 8px;
    display: block;
    width: fit-content;
    margin: 0 auto;
    background-color: transparent;
    color: inherit
}

#developing .custom-order-card {
    transition: transform .3s ease-out
}

    #developing .custom-order-card:hover {
        transform: translateY(-10px)
    }

#developing .offer-order-btn {
    background: linear-gradient(to bottom,#cda1ff,#4b2075);
    color: #fff
}

    #developing .offer-order-btn:hover {
        background: linear-gradient(to top,#cda1ff,#4b2075);
        box-shadow: 0 0 15px #cda1ff;
        transform: translateY(-2px)
    }

.offer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg,rgba(44,26,64,.95),#1e1132);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 25px;
    box-sizing: border-box;
    z-index: 2;
    transition: opacity .4s ease-out,transform .4s ease-out;
    text-align: center
}

    .offer-overlay.hidden {
        opacity: 0;
        transform: translateY(-20px);
        pointer-events: none
    }

.offer-image {
    width: 100%;
    max-width: 150px;
    height: 200px;
    display: block;
    margin: 0 auto 15px;
    border-radius: 8px;
    object-fit: cover
}

#designs .offer-image {
    border: 3px solid #8b0000;
    box-shadow: 0 0 15px rgba(220,53,69,.4)
}

#developing .offer-image {
    border: 3px solid #8e6abf;
    box-shadow: 0 0 15px rgba(142,106,191,.4)
}

.offer-overlay h3 {
    color: var(--white-text);
    border-bottom: none;
    padding-bottom: 5px;
    margin-bottom: 10px
}

.offer-price-range {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-yellow);
    margin: 10px 0 20px
}

.offer-order-btn {
    padding: 12px 30px;
    font-size: 18px;
    background-color: var(--accent-yellow);
    color: var(--black-text);
    border-radius: 50px
}

    .offer-order-btn:hover {
        background-color: #e6b800;
        box-shadow: 0 0 15px var(--accent-yellow)
    }

.custom-order-form {
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s ease-in .3s
}

    .custom-order-form.visible {
        opacity: 1;
        pointer-events: auto
    }

#roblox, .custom-order-card {
    position: relative;
    overflow: hidden
}

.custom-order-card {
    justify-content: center;
    width: 100%;
    max-width: 300px;
    min-height: 500px;
    background: linear-gradient(145deg,rgba(44,26,64,.7),rgba(30,17,50,.9));
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
    text-align: center;
    border: 1px solid var(--main-purple);
    display: flex;
    flex-direction: column;
    transition: transform .3s ease-out
}

#designs .custom-order-card:hover {
    transform: translateY(-10px)
}

.custom-order-card h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--accent-yellow);
    border-bottom: 2px solid var(--main-purple);
    padding-bottom: 10px
}

.custom-order-description {
    color: var(--light-text);
    min-height: 80px;
    line-height: 1.6
}

.custom-order-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: auto
}

    .custom-order-form input, .custom-order-form textarea {
        width: 100%;
        box-sizing: border-box;
        margin: 0
    }

    .custom-order-form textarea {
        min-height: 120px;
        resize: vertical
    }

.paypal-confirm-btn, .paypal-link {
    font-weight: 700;
    text-decoration: none
}

.paypal-confirm-btn {
    font-size: 18px;
    text-align: center;
    background-color: #0070ba;
    box-shadow: 0 4px 15px rgba(0,112,186,.3)
}

    .paypal-confirm-btn:hover {
        background-color: #00457c;
        border-color: #00457c;
        transform: translateY(-2px)
    }

    .paypal-confirm-btn:active {
        transform: translateY(0);
        box-shadow: 0 2px 10px rgba(0,112,186,.2)
    }

#paypalForm .paypal-confirm-btn {
    width: 100%;
    margin-top: 15px;
    margin-left: auto;
    margin-right: auto
}

.paypal-link {
    color: #0070ba;
    transition: color .3s ease
}

    .paypal-link:hover {
        color: #16468a;
        text-decoration: underline
    }

.subscription-item .buy-btn {
    background-color: #000 !important;
    color: #fff !important;
    border: 1px solid #fff !important;
    transition: all .3s ease
}

    .subscription-item .buy-btn:hover {
        background-color: #000 !important;
        transform: scale(1.05);
        text-shadow: 0 0 8px rgba(255,255,255,.9);
        box-shadow: none
    }

.subscription-item .add-to-cart-btn {
    background-color: var(--accent-yellow) !important;
    color: var(--black-text) !important;
    border: 0 !important;
    border-radius: 8px !important;
    padding: 10px !important;
    cursor: pointer;
    transition: all .3s ease;
    display: flex;
    align-items: center;
    justify-content: center
}

    .subscription-item .add-to-cart-btn:hover {
        background-color: #e6b800 !important;
        transform: translateY(-2px)
    }

    .subscription-item .add-to-cart-btn img {
        filter: none;
        transform: none
    }

.checkout-btn-centered:hover {
    background-color: #f0f0f0 !important;
    color: var(--main-purple) !important
}

.add-to-cart-btn, .modal-product-header {
    padding: 10px;
    display: flex;
    align-items: center
}

.modal-product-header {
    border: .5px solid var(--main-purple);
    border-radius: 12px;
    margin-bottom: 15px;
    background-color: rgba(0,0,0,.2);
    flex-direction: row-reverse;
    justify-content: space-between
}

    .modal-product-header .text-content {
        flex-grow: 1;
        text-align: right;
        padding: 0;
        margin: 0
    }

    .modal-product-header .description-display, .modal-product-header .platform-display, .modal-product-header h2 {
        margin: 0
    }

.subscription-option-label input[type=radio] {
    display: none;
    appearance: none;
    -webkit-appearance: none;
    position: absolute
}

#valorant-card:hover {
    animation: glow-red-pink 1.5s infinite ease-in-out;
    border-color: #ff4655
}

#fortnite-card:hover {
    animation: glow-blue 1.5s infinite ease-in-out;
    border-color: #00b8ff
}

#roblox-card:hover {
    animation: glow-white 1.5s infinite ease-in-out;
    border-color: #fff
}

#genshin-card:hover {
    animation: glow-gold 1.5s infinite ease-in-out;
    border-color: #f5d685
}

#rocket-card:hover {
    animation: glow-blue 1.5s infinite ease-in-out;
    border-color: #00a8ff
}

#marvel-card:hover {
    animation: glow-purple 1.5s infinite ease-in-out;
    border-color: #a450ff
}

#roblox {
    z-index: 1
}

    #roblox::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: linear-gradient(rgba(0,0,0,.8),rgba(0,0,0,.8)),url(https://i.postimg.cc/qBLd2C79/robloxwallpaper.webp);
        filter: blur(5px);
        z-index: -1
    }

    #roblox::before, #rocketleague, #rocketleague::before {
        background-size: cover;
        background-position: center
    }

#rocketleague {
    background-image: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),url(https://i.postimg.cc/28hhHmsS/rocketleaguewallpaper.webp);
    border-radius: 15px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    z-index: 1
}

    #rocketleague::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: url(./images/rlwallpaper.png);
        background-color: rgba(0,0,0,.5);
        background-blend-mode: multiply;
        filter: blur(2px);
        z-index: -1
    }

#vodafoneForm .input-fields textarea {
    resize: none;
    height: 15px
}

#paypalDetails.is-visible, #vodafoneDetails.is-visible {
    animation: payment-details-slide-up .4s ease-out
}

.add-to-cart-btn {
    background-color: #28a745;
    color: #fff;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: all .3s ease;
    justify-content: center
}

    .add-to-cart-btn img {
        width: 24px;
        height: 24px
    }

.footer-layout-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(255,255,255,.1)
}

.trust-badges-container {
    padding: 0;
    border: 0;
    max-width: 800px
}

.remove-item-btn, .suggestion-button {
    font-weight: 700;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center
}

.suggestion-button {
    background-color: var(--accent-yellow);
    color: var(--black-text);
    border: 0;
    border-radius: 50px;
    padding: 10px 20px;
    font-size: 16px;
    transition: all .3s ease;
    gap: 8px;
    margin: 20px auto;
    width: auto
}
/* تنسيق صندوق التنبيه - تصميم زجاجي عصري */
.bundle-tip-toast {
    position: fixed;
    /* التموضع: أعلى اليسار */
    top: 30px !important;
    left: 30px !important;
    bottom: auto !important;
    right: auto !important;
    /* التصميم والخلفية */
    background: rgba(30, 33, 40, 0.85); /* لون داكن شبه شفاف */
    backdrop-filter: blur(10px); /* تأثير الزجاج الضبابي */
    -webkit-backdrop-filter: blur(10px); /* لدعم متصفح سفاري */

    border-left: 4px solid var(--accent-yellow, #ffd700); /* الخط الأصفر المميز */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* حدود خفيفة من الأعلى للإضاءة */
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    color: #fff;
    padding: 16px 24px;
    border-radius: 12px; /* حواف أكثر دائرية */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* ظل ناعم وعميق */
    z-index: 99999;
    max-width: 350px; /* لضمان عدم تمدده بشكل مبالغ فيه */
    /* الحركة المبدئية (مخفي) */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-30px) scale(0.95); /* يبدأ من الأعلى قليلاً وبحجم أصغر */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* حركة انسيابية مرنة */
}

    /* حالة الظهور */
    .bundle-tip-toast.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }

/* تنسيق المحتوى الداخلي */
.tip-content {
    display: flex;
    align-items: flex-start; /* محاذاة العناصر للأعلى */
    gap: 15px;
    font-family: 'Cairo', sans-serif;
}

/* الأيقونة */
.tip-icon {
    font-size: 1.6rem;
    color: var(--accent-yellow, #ffd700);
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.3)); /* توهج خفيف للأيقونة */
    margin-top: 2px;
}

/* النصوص */
.tip-text-container {
    flex: 1;
}

    .tip-text-container strong {
        display: block;
        font-size: 1rem;
        margin-bottom: 4px;
        color: #fff;
        letter-spacing: 0.5px;
    }

    .tip-text-container p {
        margin: 0;
        font-size: 0.9rem;
        color: #d1d1d1; /* لون رمادي فاتح جداً للقراءة المريحة */
        line-height: 1.4;
    }

/* زر الإغلاق */
.close-tip-btn {
    background: rgba(255, 255, 255, 0.1); /* خلفية خفيفة للزر */
    border: none;
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    margin-right: -10px; /* ضبط المسافة */
    margin-top: -5px;
    transition: all 0.2s ease;
}

    .close-tip-btn:hover {
        background: rgba(255, 0, 0, 0.6); /* يتحول للأحمر عند الوقوف عليه */
        transform: rotate(90deg); /* حركة دوران لطيفة */
    }
#steam-points-section, #steam-points-section::before {
    background-size: cover;
    background-position: center;
    background-attachment: fixed
}

#steam-points-section {
    position: relative;
    overflow: hidden;
    padding: 20px;
    color: #fff;
    background-image: linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)),url(https://i.postimg.cc/fLMxhgDQ/steamgirl.webp);
    border-radius: 15px
}

#steamGiftCardsHomeContainer .product-item:hover, #steamGiftCardsPageContainer .product-item:hover {
    transform: translateY(-8px) scale(1.02);
    animation: smooth-glow 1.5s infinite ease-in-out;
    border-color: #00c0ff
}

#steam-points-section::before {
    background-image: url(https://i.postimg.cc/VLT3m9vv/steamgirl.png);
    filter: blur(5px)
}

#steam-points-section::after, #steam-points-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: 15px
}

.remove-item-btn {
    width: 30px;
    height: 30px;
    font-size: 18px;
    background-color: rgba(255,71,87,.15);
    color: #ff4757;
    border: 1px solid #ff4757;
    border-radius: 6px;
    flex-shrink: 0;
    padding: 0;
    margin-right: 10px;
    position: relative;
    top: 15px;
    transition: all .2s ease
}

    .remove-item-btn:hover {
        background-color: #ff4757;
        color: #fff;
        transform: scale(1.05);
        box-shadow: 0 0 12px rgba(255,71,87,.7);
        border-color: #fff
    }

#offline-steam-section {
    padding-top: 5px !important;
    background-image: linear-gradient(rgba(31,17,51,.8),rgba(31,17,51,.8)),url(https://i.postimg.cc/FFnxj5WK/offlinewallpaper.webp);
    border: 1px solid #8e6abf;
    padding: 30px 20px
}

#games-section {
    position: relative;
    background: rgba(30,17,50,.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(8px);
    background-size: cover;
    background-position: center 90%;
    background-attachment: fixed;
    border-radius: 15px
}

#game-topup-section, #genshinImpact {
    background-size: cover;
    background-position: center
}

#game-topup-section {
    background-image: linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.3)),url(https://i.postimg.cc/bNT9RqXK/skyyy.webp);
    background-attachment: fixed;
    border-radius: 15px
}

#genshinImpact {
    background-image: url(https://i.postimg.cc/2jxsm65R/genshinimpactbackground.webp);
    background-repeat: no-repeat;
    padding: 50px 20px;
    color: #fff
}

#modalPrice {
    margin-bottom: 15px
}

.price-badge {
    border: 1px solid #4a2f6c
}

#modalPaymentMethod {
    text-align: center
}

#payment-method-group label {
    width: 100%;
    text-align: center
}

.form-inputs-group {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.payment-details-grid {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    width: 100%
}

.input-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 350px;
    order: 1
}

.payment-layout {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    margin-top: 20px;
    flex-direction: row-reverse
}

.qr-code-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: rgba(93,0,18,.05);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.2)
}

.qr-text-content {
    text-align: right
}

.qr-code-image {
    flex-shrink: 0;
    margin-right: 15px;
    width: 180px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,.2)
}

.qr-code-container p {
    font-size: 14px;
    color: var(--light-text);
    margin-bottom: 5px
}

@media (min-width:768px) {
    .payment-details-grid {
        flex-wrap: nowrap;
        flex-direction: row
    }
}

#roblox {
    background-image: linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)),url(./images/robloxwallpaper.png);
    background-attachment: fixed;
    border-radius: 15px;
    padding: 20px
}

#roblox, #steamPoints, #valorantPoints {
    background-size: cover;
    background-position: center
}

#valorantPoints {
    background-image: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),url(https://i.postimg.cc/Y9khG3m2/Ascent-Map.webp);
    border-radius: 15px;
    padding: 20px
}


.reviews-carousel-container {
    max-width: 90%;
    margin: 0 !important;
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(to right,transparent,#000 20%,#000 80%,transparent 100%);
    mask-image: linear-gradient(to right,transparent,#000 20%,#000 80%,transparent 100%)
}

.reviews-carousel-track {
    display: flex;
    gap: 20px;
    width: calc(270px*20);
    animation: scroll 40s linear infinite
}

.reviews-carousel-container:hover .reviews-carousel-track {
    animation-play-state: paused
}

#store-reviews-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 600px
}

#store-average-rating-display {
    text-align: center;
    padding: 20px;
    background-color: rgba(44,26,64,.5);
    border-radius: 12px;
    max-width: 400px;
    margin: 20px auto
}

    #store-average-rating-display .stars {
        font-size: 2.5rem;
        color: var(--accent-yellow);
        margin-bottom: 10px
    }

        #store-average-rating-display .stars .star.empty {
            color: #555
        }

    #store-average-rating-display .summary-text {
        font-size: 1rem;
        color: var(--light-text);
        font-weight: 700
    }

.payment-info-label {
    color: #34c759;
    font-weight: 700;
    margin: 0;
    font-size: 14px
}

.green-text {
    color: #28a745
}

.modal .product-modal-image {
    max-width: 150px;
    height: auto
}

.modal-content img.product-modal-image {
    max-width: 150px;
    height: auto;
    margin-bottom: 15px;
    border-radius: 8px
}

#modalProductInfo .description-display {
    color: var(--accent-yellow);
    font-weight: 700;
    max-width: 96%;
    font-size: 11px
}

#fortnite {
    position: relative;
    z-index: 1;
    overflow: hidden
}

    #fortnite::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0
    }

#subscriptions-section {
    background-image: linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)),url(./images/purplewallpaper.png);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    border-radius: 15px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid #8e6abf;
    box-shadow: 0 4px 30px rgba(0,0,0,.1);
    padding: 20px;
    margin: 20px;
    position: relative
}

#subscription-options-container {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(120px,1fr));
    gap: 10px;
    margin-top: 10px
}

.subscription-option-label {
    position: relative;
    cursor: pointer
}

.subscription-option-card {
    background-image: linear-gradient(135deg,#2c1a40,#1a2a40);
    border: 2px solid #8e6abf;
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    font-weight: 700;
    transition: all .3s ease;
    box-shadow: none;
    animation: none
}

    .subscription-option-card .period, .subscription-option-card .price {
        display: block;
        font-size: 16px;
        color: var(--white-text);
        transition: color .3s ease
    }

    .subscription-option-card .price {
        font-size: 14px;
        color: var(--accent-yellow);
        margin-top: 5px
    }

.subscription-option-label:hover .subscription-option-card {
    transform: translateY(-3px);
    animation: rgb-glow-pulse-intense 4s linear infinite
}

.subscription-option-label input[type=radio]:checked + .subscription-option-card {
    border-color: var(--accent-yellow);
    box-shadow: none;
    animation: none
}

.subscription-option-label:hover input[type=radio]:checked + .subscription-option-card {
    animation: rgb-glow-pulse-intense 4s linear infinite
}

.subscription-option-label input[type=radio]:checked + .subscription-option-card .price {
    color: #fff
}

.cart-item-extra-info {
    font-size: 12px;
    color: #ccc;
    margin-top: 4px;
    direction: ltr;
    text-align: right
}

:root {
    --dark-bg: #1e1132;
    --main-purple: #2c1a40;
    --accent-yellow: #ffcc00;
    --light-text: #e0e0e0;
    --card-bg: rgba(74, 47, 100, 0.5);
    --dark-card-bg: rgba(74, 47, 100, 0.7);
    --white-text: white;
    --black-text: #110e1a;
    --green-buy-btn: #28a745;
    --green-buy-btn-hover: #218838;
    --fixed-cart-bg: #28a745
}

body {
    font-family: "Tajawal","Cairo",sans-serif;
    margin: 0;
    background-image: linear-gradient(145deg,#0b0714,#1e1132,#0b0714);
    background-attachment: fixed;
    color: var(--light-text);
    direction: rtl;
    text-align: right;
    padding-top: 70px;
    padding-bottom: 0
}

#home {
    background-image: linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https://image2url.com/r2/default/images/1770447231193-476828f9-d882-424d-b534-5592f8d3e327.webp);
    background-size: 100%auto;
    background-repeat: no-repeat;
    background-position: top center;
    position: relative;
    margin-top: 0
}

.glass-card {
    background: linear-gradient(135deg,#a4c6ff,#1a0e2a);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    border: 1px solid #8e6abf;
    box-shadow: 0 4px 30px rgba(0,0,0,.1);
    padding: 20px;
    margin: 20px
}

    .glass-card.darker {
        background: var(--main-purple);
        border: 1px solid #8e6abf;
        backdrop-filter: none
    }

#steam-gift-cards-section, #steamGiftCards {
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1
}

#steam-gift-cards-section {
    background-image: linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(./images/steamwallpaper.png);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(6px);
    transition: transform .3s ease-in-out,box-shadow .3s ease-in-out
}

#steamGiftCards {
    background-image: url(./images/steamwallpaper.png)
}

#navbar {
    justify-content: space-between;
    padding: 4px 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,.3);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    transition: background .3s ease,backdrop-filter .3s ease;
    background: linear-gradient(90deg,rgba(23,10,48,.92)0,rgba(35,20,60,.92) 50%,rgba(23,10,48,.92) 100%) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: none
}

    #navbar.navbar-scrolled {
        background: linear-gradient(145deg,rgba(44,26,64,.7),rgba(30,17,50,.7));
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px)
    }

    #navbar, #navbar .logo-area {
        display: flex;
        align-items: center
    }

        #navbar .logo-text-container, .logo-text-container {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            line-height: 1.1
        }

.logo-text-container {
    gap: 2px
}

.country-name {
    display: none !important
}

#navbar .nav-utility-section select {
    margin-top: 0 !important
}

.by-sohayl, .by-sohayl a {
    color: var(--accent-yellow)
}

.by-sohayl {
    font-size: 18px;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(255,204,0,.8);
    margin-bottom: 1px
}

    .by-sohayl a {
        text-decoration: none;
        transition: color .3s ease
    }

        .by-sohayl a:hover {
            color: #e6b800
        }

.country-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--white-text);
    text-shadow: none;
    display: flex;
    align-items: center
}

    .country-name .flag-emoji {
        margin-left: 5px;
        font-size: 18px
    }

.nav-middle-section {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    gap: 20px
}

.nav-utility-section {
    display: flex;
    align-items: center;
    gap: 15px
}

.dropdown-content a, .nav-link {
    text-decoration: none;
    display: block;
    font-weight: 700
}

.nav-link {
    transition: color .3s ease;
    font-size: 14px;
    position: relative;
    padding-bottom: 5px;
    color: var(--light-text)
}

    .nav-link:hover {
        color: var(--white-text);
        text-shadow: 0 0 5px rgba(255,255,255,.5),0 0 10px rgba(255,255,255,.2)
    }

    .nav-link::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 2px;
        bottom: 0;
        right: 0;
        background-color: var(--accent-yellow);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .3s ease-out
    }

    .nav-link:hover::after {
        transform: scaleX(1);
        transform-origin: right
    }

.dropdown, h1, h2, h3 {
    display: inline-block
}

.dropdown {
    position: relative
}

.dropdown-content {
    position: absolute;
    min-width: 220px !important;
    z-index: 1;
    right: 0;
    top: 100%;
    border-radius: 8px;
    text-align: right;
    background-color: rgba(200,180,255,.95);
    background: linear-gradient(145deg,#3c2a6b,#171030);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid #7289da;
    box-shadow: 0 10px 30px rgba(0,0,0,.6),0 0 15px rgba(114,137,218,.5);
    opacity: 0;
    white-space: nowrap;
    visibility: hidden;
    transform: translateY(10px);
    transform-origin: top;
    transition: opacity .2s ease-out,transform .2s ease-out,visibility .2s
}

.dropdown:hover .dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

.dropdown-content a {
    color: #e0e0e0;
    text-align: right;
    justify-content: flex-start;
    padding: 12px 16px;
    transition: background-color .2s ease,color .3s ease
}

    .dropdown-content a:hover {
        background-color: rgba(255,255,255,.15);
        text-shadow: 0 0 5px var(--accent-yellow)
    }

.support-button {
    font-size: 14px;
    cursor: pointer;
    font-weight: 700;
    color: var(--white-text);
    transition: color .3s ease;
    display: flex;
    align-items: center;
    margin-left: 20px
}

    .support-button img {
        margin-left: 5px
    }

    #productDescription strong, .dropdown-content a:hover, .support-button:hover {
        color: var(--accent-yellow)
    }

    .support-button img, .support-icon {
        width: 20px;
        height: auto
    }

.fixed-cart-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    background-color: var(--fixed-cart-bg);
    color: var(--white-text);
    border: 1px solid #fff;
    border-radius: 50px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all .3s ease;
    box-shadow: 0 0 15px rgba(255,255,255,.4);
    font-weight: 700
}

    .fixed-cart-button:hover {
        background-color: var(--green-buy-btn-hover);
        color: var(--white-text);
        transform: scale(1.05);
        box-shadow: 0 0 25px rgba(255,255,255,.7)
    }

    .fixed-cart-button.added {
        animation: strong-glow-pulse .4s ease-in-out
    }

    .fixed-cart-button img {
        width: 24px;
        height: auto
    }

    .fixed-cart-button .cart-count {
        background-color: red;
        color: #fff;
        border-radius: 50%;
        padding: 2px 6px;
        font-size: 12px;
        position: absolute;
        top: -5px;
        right: -5px
    }

h1, h2, h3 {
    margin-right: 20px;
    border-right: 4px solid var(--accent-yellow);
    padding-right: 10px
}

h3 {
    margin-right: 0;
    border-right: none;
    padding-right: 0
}

input, select, textarea {
    padding: 12px;
    font-size: 16px;
    border-radius: 8px;
    border: 1px solid #8e6abf;
    margin-top: 10px;
    width: 300px;
    font-family: "Tajawal",sans-serif;
    background-color: rgba(255,255,255,.1);
    color: var(--white-text);
    transition: border-color .3s ease
}

    input::placeholder, textarea::placeholder {
        color: var(--light-text);
        opacity: .8
    }

    input:not(.input-wrapper input):focus, select:focus, select:hover, textarea:not(.input-wrapper textarea):focus {
        outline: 0;
        border-color: #00c0ff;
        box-shadow: 0 0 10px rgba(0,192,255,.5)
    }

    select option {
        background: var(--dark-bg);
        color: var(--white-text);
        font-weight: 700;
        padding: 10px
    }

.payment-confirm-btn, button {
    font-weight: 700;
    border: 0;
    font-family: "Cairo",sans-serif
}

button {
    padding: 12px 20px;
    font-size: 16px;
    border-radius: 8px;
    background-color: var(--accent-yellow);
    color: var(--black-text);
    transition: all .3s ease
}

    button:hover {
        background-color: #e6b800;
        transform: translateY(-2px)
    }

.payment-confirm-btn {
    background-color: var(--green-buy-btn);
    color: #fff;
    padding: 15px 30px;
    font-size: 18px;
    border-radius: 10px;
    transition: background-color .3s ease,transform .3s ease
}

.payment-details-form {
    flex: 1;
    min-width: 250px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap-reverse;
    align-items: flex-start;
    gap: 10px
}

    .payment-details-form input, .payment-details-form textarea {
        flex-grow: 1;
        width: auto
    }

.confirm-payment-btn {
    width: 100%;
    margin: auto 0 0
}

button:disabled {
    background-color: #555;
    cursor: not-allowed;
    transform: none
}

.payment-confirm-btn:hover:not(:disabled) {
    background-color: var(--green-buy-btn-hover);
    transform: translateY(-3px)
}

#shipping {
    text-align: center;
    display: none;
    padding: 20px;
    animation: fadeIn .8s ease-in-out
}

#orderInputContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px
}

    #orderInputContainer label {
        font-size: 24px;
        font-weight: 700;
        color: var(--light-text);
        margin-bottom: 10px
    }

#shippingDescription {
    font-size: 14px;
    color: #ccc;
    margin-top: -15px;
    margin-bottom: 20px
}

#statusContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--main-purple);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,.3);
    max-width: 600px;
    margin: 0 auto
}

#statusImage {
    width: 400px;
    height: auto;
    margin-top: 15px;
    display: none;
    opacity: 0;
    transition: opacity .5s ease,transform .5s ease
}

#resultText {
    font-size: 24px;
    font-weight: 700;
    margin-top: 10px;
    text-align: center;
    opacity: 0;
    transition: opacity .5s ease
}

#products {
    padding-top: 5px
}

.search-bar-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0 20px
}

#productSearch {
    width: 250px;
    margin-left: 10px;
    padding: 10px
}

.products-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px
}

.product-item {
    background: linear-gradient(145deg,rgba(74,47,100,.6),rgba(31,17,51,.8));
    padding: 10px;
    border-radius: 12px;
    width: 180px;
    text-align: center;
    transition: transform .3s ease,box-shadow .3s ease;
    display: flex;
    flex-direction: column;
    border: 1px solid #8e6abf
}

.steam-gift-card-item {
    background: linear-gradient(145deg,rgba(0,112,186,.6),rgba(0,50,100,.8));
    border: 1px solid #00c0ff
}

.product-item.valorant-item {
    width: 145px
}

.product-image-wrapper {
    width: 100%;
    height: 160px;
    border-radius: 8px;
    background-color: rgba(0,0,0,.2);
    position: relative;
    overflow: hidden;
    cursor: pointer
}

    .main-image-placeholder::before, .product-image-wrapper::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to right,transparent 0,rgba(255,255,255,.1) 50%,transparent 100%);
        animation: placeholder-shine 1.5s infinite linear
    }

.product-item img {
    object-fit: cover;
    border-radius: 8px;
    background-color: transparent;
    position: relative;
    z-index: 2
}

.platform-icon, .product-item h3 {
    display: flex;
    align-items: center;
    justify-content: center
}

.product-item h3 {
    min-height: 48px;
    border-right: none;
    padding-right: 0;
    margin: 10px 0 5px;
    cursor: pointer
}

.platform-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    background-color: rgba(0,0,0,.6);
    border-radius: 50%;
    z-index: 3;
    padding: 4px
}

    .platform-icon img, .product-item img {
        width: 100%;
        height: 100%
    }

.platform-icon-description {
    height: 16px;
    vertical-align: middle;
    margin-right: 4px
}

.product-description-text {
    font-size: 14px;
    color: var(--accent-yellow);
    margin-top: -5px;
    margin-bottom: 5px;
    padding: 0 5px
}

.product-urgency {
    color: #ff4757;
    font-weight: 700;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 14px
}

.product-item p {
    min-height: 24px;
    margin-top: 2px;
    margin-bottom: 5px
}

.subscription-item {
    background: linear-gradient(145deg,rgba(74,47,100,.6),rgba(31,17,51,.8));
    border-radius: 12px;
    width: 320px;
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 1px solid var(--main-purple);
    box-shadow: 0 4px 15px rgba(0,0,0,.3);
    transition: transform .3s ease,box-shadow .3s ease
}

    .subscription-item:hover {
        transform: translateY(-8px);
        box-shadow: 0 10px 25px rgba(74,47,100,.5)
    }

    .subscription-item .product-image-wrapper {
        width: 100%;
        height: 160px;
        border-radius: 8px;
        background-color: rgba(0,0,0,.2);
        position: relative;
        overflow: hidden;
        cursor: pointer
    }

.sub-description-overlay {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    background: rgba(0,0,0,.6);
    color: #fff;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    max-width: 80%;
    text-align: left;
    direction: ltr
}

.subscription-item .sub-image-wrapper img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    transition: transform .4s ease
}

.subscription-item .sub-content {
    padding: 20px;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column
}

    .subscription-item .sub-content h3 {
        font-size: 1.25rem;
        margin: 0 0 10px;
        padding: 0;
        border: 0;
        color: var(--white-text);
        text-align: center;
        display: block;
        cursor: pointer
    }

    .subscription-item .sub-content p.sub-description {
        font-size: .9rem;
        color: var(--light-text);
        margin: 0 0 15px;
        flex-grow: 1;
        min-height: 50px;
        text-align: center
    }

.sub-footer .buy-btn {
    width: 100%;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 700;
    color: var(--black-text);
    background-color: #fff;
    border: 1px solid var(--black-text);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .3s ease,transform .3s ease
}

.sub-footer .product-buttons-container {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
    justify-content: space-between
}

.subscription-item .sub-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-yellow)
}

.subscription-item .subscribe-btn {
    padding: 10px 20px;
    font-size: 16px;
    margin-top: 0;
    font-weight: 700;
    background-color: var(--green-buy-btn);
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap
}

    .modal-trust-badges .trust-badge svg, .subscription-item .subscribe-btn img {
        width: 20px;
        height: 20px
    }

    .subscription-item .subscribe-btn:hover {
        background-color: var(--green-buy-btn-hover)
    }

.section {
    display: none;
    padding: 20px;
    animation: fadeIn .8s ease-in-out
}

.content-page {
    max-width: 800px;
    margin: 20px auto;
    padding: 30px;
    line-height: 1.8
}

    .content-page h2 {
        text-align: center;
        border: 0
    }

.product-image {
    display: block;
    width: 80%;
    max-width: 400px;
    height: auto;
    border-radius: 12px;
    margin: 0 auto 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,.3)
}

.modal.fortnite-modal .product-image, .modal.valorant-modal .product-image {
    max-width: 180px
}

.product-description-box {
    border: 1px solid #8e6abf;
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
    background-color: rgba(255,255,255,.05)
}

#productPageDescription {
    font-size: 16px;
    text-align: right;
    margin-top: 10px;
    margin-bottom: 20px;
    line-height: 1.6
}

.product-description .disney-logo, .product-description .microsoft-logo, .product-description .netflix-logo, .product-description .steam-logo {
    vertical-align: middle;
    height: 20px;
    margin-right: 5px
}

.payment-logo {
    margin-right: 5px
}

.payment-option-logo {
    height: 18px;
    width: auto;
    vertical-align: middle;
    margin-left: 8px
}

.payment-logo {
    vertical-align: middle;
    height: 25px
}

#confirmationMessage, #loading {
    margin-top: 15px;
    font-size: 18px;
    font-weight: 700
}

#loading {
    display: none;
    color: var(--accent-yellow)
}

#confirmationMessage {
    color: #0f0;
    text-align: center
}

.loading-spinner {
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255,255,255,.3);
    border-radius: 50%;
    border-top-color: var(--accent-yellow);
    animation: spin 1s ease-in-out infinite
}

.modal {
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) scale(.9);
    width: 90%;
    max-width: 650px;
    padding: 25px;
    max-height: 90vh;
    display: none;
    flex-direction: column;
    background: rgba(30,17,50,.8);
    border-radius: 15px;
    border: 1px solid #4a2f6c;
    box-shadow: 0 8px 30px rgba(0,0,0,.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease,transform .3s ease
}

    .modal.is-visible {
        display: flex;
        animation: modal-fade-in .1s ease-out
    }

#marvelRivals, .overlay {
    background-color: rgba(0,0,0,.6)
}

#marvelRivals {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    padding: 20px
}

    #marvelRivals::before {
        content: "";
        position: absolute;
        top: -10px;
        left: -10px;
        right: -10px;
        bottom: -10px;
        background-image: url(https://i.postimg.cc/J4QZV8q1/mvwallpaper.webp);
        background-size: cover;
        background-position: center;
        z-index: -1;
        filter: blur(5px);
        -webkit-filter: blur(5px)
    }

#marvelRivalsContainer .product-item {
    width: 145px;
    min-height: 250px;
    padding: 10px
}

#vodafoneDetails .payment-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 30px;
    margin-top: 20px
}

#vodafoneDetails .payment-info-container {
    text-align: right;
    flex: 1;
    min-width: 250px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    order: 1
}

#vodafoneDetails .payment-details-form {
    flex: 1;
    min-width: 250px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    order: 2
}

#vodafoneForm .confirm-payment-btn {
    width: 100%;
    margin-top: -5px;
    margin-left: 0;
    margin-right: 0;
    padding: 15px 53px;
    font-size: 18px;
    transition: all .3s ease-in-out;
    border: 2px solid #28a745
}

    #vodafoneForm .confirm-payment-btn:hover {
        background-color: #34c759;
        border-color: #34c759;
        box-shadow: 0 0 15px #34c759;
        transform: translateY(-2px)
    }

.modal .product-image {
    max-width: 160px;
    height: auto;
    margin: 0 auto 15px
}

.modal.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%,-50%) scale(1)
}

.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1999;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: fadeInOverlay .3s ease-in-out
}

.modal {
    position: fixed;
    z-index: 2000;
    -webkit-font-smoothing: antialiased
}

    .modal .payment-details {
        margin-top: 20px;
        text-align: center
    }

        .modal .payment-details p {
            margin-bottom: 10px;
            text-align: center
        }

    .modal input, .modal textarea {
        width: 80%;
        max-width: 250px;
        display: block;
        margin-right: auto;
        margin-left: auto;
        text-align: right
    }

.form-parallel-group {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin: 20px auto;
    width: 95%;
    max-width: 400px
}

    .form-parallel-group > div {
        flex: 1;
        min-width: 150px
    }

    .form-parallel-group label {
        display: block;
        margin-bottom: 8px;
        font-size: 14px;
        font-weight: 700;
        text-align: right;
        padding-right: 5px
    }

    .form-parallel-group input, .form-parallel-group select {
        width: 100%;
        margin-top: 0;
        box-sizing: border-box
    }

.account-details-container {
    display: none;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px
}

    .account-details-container input {
        width: 90%;
        max-width: 280px
    }

.modal button {
    margin-top: 20px
}

.modal .confirm-payment-btn {
    background-color: var(--green-buy-btn);
    color: #fff;
    border: 1px solid #8e6abf
}

.buy-btn-product-page, .modal .confirm-payment-btn {
    padding: 12px 20px;
    font-size: 16px;
    border-radius: 8px;
    font-weight: 700;
    transition: transform .3s ease,background-color .3s ease;
    font-family: "Cairo",sans-serif
}

.add-to-cart-text-btn, .buy-btn-product-page {
    border: 1px solid #8e6abf
}

.checkout-btn-centered {
    font-family: "Cairo",sans-serif;
    background-color: var(--green-buy-btn);
    color: #fff
}

.buy-btn-product-page:hover, .modal .confirm-payment-btn:hover {
    transform: translateY(-2px)
}

.checkout-btn-centered:hover, .modal .confirm-payment-btn:hover {
    background-color: var(--green-buy-btn-hover)
}

.modal .close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: 700;
    color: var(--white-text);
    cursor: pointer;
    transition: color .3s
}

    .modal .close-btn:hover {
        color: var(--accent-yellow)
    }

.modal-body h2 {
    border-right: 0;
    display: block;
    width: 100%
}

#modalProductInfo, .modal-body h2, .modal-body img, .modal-body p {
    text-align: center;
    margin-right: auto;
    margin-left: auto
}

    #modalProductInfo .platform-display {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        gap: 8px;
        margin-bottom: 10px
    }

.modal-product-info .platform-display img {
    height: 18px;
    width: auto
}

.modal-product-info .description-display {
    text-align: right;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    overflow: hidden;
    line-height: 1.4;
    word-break: break-word
}

#productPageContent {
    display: flex;
    flex-direction: column
}

.product-main-view {
    margin-bottom: 40px
}

.product-image-section {
    flex: 1.2;
    min-width: 300px
}

    .product-image-section .main-image {
        width: 100%;
        height: auto;
        border-radius: 12px;
        box-shadow: 0 6px 20px rgba(0,0,0,.25);
        margin-bottom: 15px;
        transition: opacity .6s ease-in-out
    }

.main-image-placeholder {
    width: 100%;
    min-height: 350px;
    background-color: rgba(255,255,255,.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center
}

.product-image-gallery {
    display: flex;
    gap: 10px
}

    .product-image-gallery .thumbnail {
        width: 70px;
        height: 70px;
        object-fit: cover;
        border-radius: 8px;
        cursor: pointer;
        border: 2px solid transparent;
        transition: border-color .3s
    }

        .product-image-gallery .thumbnail.active, .product-image-gallery .thumbnail:hover {
            border-color: var(--accent-yellow)
        }

.product-details-section {
    flex: 1.3;
    min-width: 300px
}

    .product-details-section h1 {
        border: 0;
        padding: 0;
        margin: 0 0 10px;
        font-size: 2.2rem;
        text-align: right
    }

.price-badge-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px
}

#productPagePrice {
    font-weight: 700;
    color: var(--accent-yellow)
}

.product-platform-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 1rem;
    color: var(--light-text)
}

.modal-product-header .product-platform-info {
    font-size: .85rem;
    display: flex;
    align-items: center;
    gap: 8px
}

.product-platform-info img {
    height: 24px;
    width: 24px
}

.product-platform-info span, .product-platform-info strong {
    line-height: 1
}

.product-detail-badge {
    font-size: 14px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    color: #fff
}

    .product-detail-badge.bestseller {
        background-color: #ff4757
    }

    .product-detail-badge.special {
        background-color: #3742fa
    }

#productPageShortDescription {
    margin-top: -150px !important;
    display: none;
    line-height: 1.6;
    flex-grow: 1
}

.quantity-selector {
    gap: 10px
}

    .quantity-selector label {
        font-weight: 700
    }

    .quantity-selector button {
        padding: 0;
        margin: 0;
        text-align: center;
        position: relative;
        top: -15px
    }

.add-to-cart-product-page {
    font-size: 18px;
    background-color: var(--green-buy-btn);
    transition: background-color .3s ease,transform .3s ease,box-shadow .3s ease
}

    .add-to-cart-product-page:hover {
        background-color: var(--green-buy-btn-hover);
        transform: translateY(-3px) scale(1.02);
        box-shadow: 0 4px 15px rgba(40,167,69,.4)
    }

.tabs-container {
    width: 100%;
    margin-bottom: 40px
}

.tab-button {
    cursor: pointer;
    background: 0 0;
    border: 0;
    font-size: 16px;
    font-weight: 700;
    position: relative;
    transition: opacity .3s ease
}

    .tab-button::after {
        content: "";
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: var(--accent-yellow);
        transform: scaleX(0);
        transition: transform .3s ease
    }

    .tab-button.active::after {
        transform: scaleX(1)
    }

.tab-content {
    display: none;
    animation: fadeIn .5s;
    background-color: rgba(0,0,0,.2);
    border-radius: 0 0 8px 8px
}

    .tab-content.active {
        display: block
    }

#reviews-section {
    width: 100%
}

.comment-rating .star {
    font-size: 16px;
    color: #ccc
}

    .comment-rating .star.filled, .rating-input .stars:hover .star {
        color: var(--accent-yellow)
    }

.comment-card {
    background-color: var(--main-purple);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    border-right: 3px solid var(--accent-yellow)
}

.comment-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px
}

.comment-author {
    font-weight: 700;
    color: var(--accent-yellow)
}

.comment-text {
    margin: 0;
    line-height: 1.7
}

.comment-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 600px;
    margin: 20px auto
}

    .comment-form input, .comment-form textarea {
        box-sizing: border-box;
        margin-top: 0
    }

.rating-input {
    gap: 15px
}

    .rating-input .stars {
        direction: ltr
    }

    .rating-input .star {
        font-size: 2rem;
        color: #ccc;
        cursor: pointer;
        transition: color .2s
    }

        .rating-input .star:hover ~ .star {
            color: #ccc
        }

    .rating-input .stars[data-rating="1"] .star:nth-child(n+5), .rating-input .stars[data-rating="2"] .star:nth-child(n+4), .rating-input .stars[data-rating="3"] .star:nth-child(n+3), .rating-input .stars[data-rating="4"] .star:nth-child(n+2), .rating-input .stars[data-rating="5"] .star:nth-child(n+1) {
        color: var(--accent-yellow)
    }

#loadMoreComments {
    display: block;
    margin: 20px auto
}

.comment-footer {
    margin-top: 15px;
    font-size: 12px;
    color: #aaa;
    display: flex;
    align-items: center;
    gap: 10px
}

    .comment-footer .helpful-btn {
        background: 0 0;
        border: 1px solid var(--accent-yellow);
        color: var(--accent-yellow);
        padding: 2px 8px;
        font-size: 12px;
        border-radius: 5px;
        margin: 0
    }

        .comment-footer .helpful-btn:disabled {
            background-color: #333;
            color: #888;
            border-color: #555;
            cursor: not-allowed
        }

.product-page-rating {
    display: flex;
    align-items: center;
    gap: 10px
}

    .product-page-rating .stars {
        font-size: 1.5rem
    }

        .product-page-rating .stars .star {
            color: var(--accent-yellow)
        }

            .product-page-rating .stars .star.empty {
                color: #555
            }

    .product-page-rating .rating-summary {
        font-size: 1rem;
        color: var(--light-text)
    }

.add-to-cart-text-btn, .product-page-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px
}

.add-to-cart-text-btn {
    width: 100%;
    padding: 12px 20px;
    font-size: 16px;
    margin-top: 15px;
    cursor: pointer;
    border-radius: 8px;
    border: 2px solid var(--green-buy-btn);
    font-weight: 700;
    transition: all .3s ease;
    font-family: "Cairo",sans-serif;
    gap: 8px
}

    .add-to-cart-text-btn:hover {
        background-color: #34c759;
        border-color: #34c759;
        box-shadow: 0 0 15px #34c759;
        transform: translateY(-2px)
    }

    .add-to-cart-text-btn img {
        width: 20px;
        height: 20px;
        margin: 0;
        padding: 0
    }

.add-to-cart-text-btn, .buy-btn-product-page {
    background-color: var(--green-buy-btn);
    color: #fff
}

    .add-to-cart-text-btn:hover, .buy-btn-product-page:hover {
        background-color: var(--green-buy-btn-hover)
    }

.discord-button {
    display: inline-flex;
    align-items: center;
    background-color: #5865f2;
    color: var(--white-text);
    font-weight: 700;
    text-decoration: none;
    padding: 15px 25px;
    border-radius: 50px;
    font-size: 18px;
    margin-top: 20px;
    box-shadow: 0 6px 15px rgba(0,0,0,.2);
    transition: transform .3s ease,background-color .3s ease,box-shadow .3s ease
}

    .discord-button:hover {
        background-color: #4b58b4;
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,.3)
    }

    .discord-button img, .footer-link img {
        height: 24px;
        width: 24px;
        margin-left: 10px;
        vertical-align: middle
    }

#home .home-section-buttons {
    justify-content: center
}

.home-section-buttons {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
    flex-wrap: wrap
}

.cart-modal-item .item-details p, .vodafone-number-highlight {
    color: var(--accent-yellow);
    font-weight: 700
}

#footer {
    background: linear-gradient(145deg,#0b0714,#1d1033,#0b0714);
    text-align: center;
    position: relative;
    padding: 10px;
    margin-top: 20px;
    border-top: 1px solid rgba(255,255,255,.1)
}

    #footer h3 {
        border-right: none;
        font-size: 20px;
        margin-bottom: 20px
    }

.footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px
}

#footer, .footer-link {
    color: var(--light-text)
}

.footer-link {
    text-decoration: none;
    font-size: 14px;
    transition: color .3s ease
}

    .comment-item strong, .footer-link:hover {
        color: var(--accent-yellow)
    }

    .footer-link img {
        height: 18px;
        width: 18px;
        margin-left: 8px
    }

#copyright {
    font-size: 14px;
    color: rgba(224,224,224,.7)
}

.store-logo-on-homepage {
    display: block;
    width: 150px;
    margin: 20px auto;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,.3)
}

.auth-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap
}

.login-container, .signup-container {
    background-color: var(--main-purple);
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,.3);
    text-align: center;
    width: 350px;
    border: 1px solid #8e6abf
}

    .login-container h2, .signup-container h2 {
        border: 0;
        margin-right: 0
    }

    .login-container input, .signup-container input {
        display: block;
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 15px
    }

.support-form-container {
    display: flex;
    flex-direction: column;
    align-items: center
}

#supportFormStatus {
    margin-top: 15px;
    font-weight: 700
}

.product-buttons-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px
}

.product-item .buy-btn {
    background-color: var(--green-buy-btn);
    color: #fff;
    font-size: 14px;
    padding: 8px 15px;
    margin-top: 0;
    border: 2px solid var(--green-buy-btn);
    transition: all .3s ease
}

.buy-btn:hover {
    box-shadow: 0 0 9px var(--green-buy-btn)
}

.product-item .add-to-cart-btn {
    padding: 0;
    border: 0;
    background-color: transparent;
    cursor: pointer;
    width: auto;
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

    .product-item .add-to-cart-btn img {
        width: 31px;
        height: 31px;
        transition: transform .3s ease,filter .3s ease
    }

    .product-item .add-to-cart-btn:hover img {
        transform: scale(1.15);
        filter: brightness(1.2)
    }

.product-item .buy-btn:hover {
    background-color: #34c759;
    border-color: #34c759;
    box-shadow: 0 0 15px #34c759
}

.add-to-cart-btn:hover {
    background-color: transparent;
    transform: translateY(-2px)
}

#comments-section {
    width: 100%;
    text-align: center
}

    #comments-section h3, #footer h3 {
        margin-right: 0;
        padding-right: 0
    }

#comments-modal .comment-form {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.comment-form input, .comment-form textarea {
    width: 80%;
    max-width: 350px;
    display: block;
    margin-right: auto;
    margin-left: auto;
    text-align: right
}

.comment-form button {
    margin-right: auto;
    margin-left: auto
}

#commentList {
    margin-top: 20px;
    text-align: right
}

.cart-modal-item, .comment-item {
    border-radius: 8px;
    margin-bottom: 10px
}

.comment-item {
    background-color: rgba(255,255,255,.1);
    padding: 15px;
    text-align: right
}

    .comment-item p {
        margin: 5px 0 0;
        font-size: 14px
    }

.cart-modal-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255,255,255,.05);
    padding: 12px;
    border-bottom: 1px solid rgba(255,255,255,.1)
}

    .cart-modal-item img {
        width: 75px !important;
        height: 75px !important;
        object-fit: cover;
        border-radius: 6px;
        flex-shrink: 0
    }

    .cart-modal-item .item-details {
        text-align: right;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start
    }

        .cart-modal-item .item-details h4 {
            line-height: 1.3;
            text-align: right;
            margin: 0;
            font-size: 16px
        }

        .cart-modal-item .item-details p {
            text-align: right;
            margin: 5px 0 0;
            font-size: 14px
        }

    .cart-modal-item .quantity-controls {
        flex-shrink: 0
    }

    .cart-modal-item .item-details {
        flex-grow: 1
    }

    .cart-modal-item .quantity-controls {
        display: flex;
        align-items: center;
        gap: 5px
    }

        .cart-modal-item .quantity-controls button {
            padding: 5px 10px;
            min-width: 30px;
            margin: 0;
            font-size: 16px;
            background-color: var(--accent-yellow);
            color: var(--black-text)
        }

        .cart-modal-item .quantity-controls span {
            font-size: 16px;
            min-width: 20px;
            text-align: center
        }

.cart-modal-total {
    margin-top: 20px;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    color: #fff
}

#cartTotalPrice {
    color: #90ee90 !important
}

.modal .modal-content-section {
    display: none;
    opacity: 0;
    transition: opacity .5s ease
}

    .modal .modal-content-section.is-visible {
        display: block;
        opacity: 1
    }

.modal-form-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 15px;
    align-items: center;
    margin: 20px 0
}

    .modal-form-grid label {
        text-align: right;
        white-space: nowrap
    }

    .modal-form-grid input, .modal-form-grid select {
        width: 100%;
        margin-top: 0
    }

.modal-options-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 15px
}

    .modal-options-container select {
        width: auto;
        min-width: 200px
    }

#feedback-section {
    padding: 30px;
    text-align: center
}

    #feedback-section h2 {
        margin-bottom: 8px !important;
        padding-bottom: 0 !important
    }

.feedback-form-container {
    max-width: 500px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px
}

#feedback-message {
    font-weight: 700
}

.rating-section {
    width: 100%;
    text-align: center;
    margin-top: 20px
}

.rating-stars {
    font-size: 30px;
    color: #ddd;
    cursor: pointer;
    direction: ltr;
    display: inline-block
}

    .rating-stars .star {
        display: inline-block;
        transition: color .2s ease,transform .2s ease;
        color: #ddd
    }

        .rating-stars .star:hover {
            transform: scale(1.2)
        }

            .rating-stars .star:hover ~ .star {
                color: #ddd
            }

        .product-card-rating .star.filled, .rating-stars .star.selected, .rating-stars .star:hover {
            color: var(--accent-yellow)
        }

.product-card-rating {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    margin-bottom: 8px
}

    .product-card-rating .star {
        color: #ccc;
        font-size: 16px
    }

.rating-average {
    font-size: 20px;
    font-weight: 700;
    color: var(--accent-yellow);
    margin-top: 10px
}

#rateMessage {
    font-size: 14px;
    margin-top: 10px
}

#home .main-products-section {
    margin-top: 40px;
    text-align: center;
    position: relative;
    z-index: 1
}

    #home .main-products-section::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: url(wallpaper.png);
        background-size: cover;
        background-position: center;
        filter: blur(5px);
        -webkit-filter: blur(5px);
        z-index: -1;
        border-radius: 12px
    }

.checkout-btn-centered {
    display: block;
    margin: 20px auto 0;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    background-color: #fff;
    color: var(--main-purple);
    border: 0 !important;
    transition: all .3s ease-in-out;
    animation: rgb-glow-pulse-intense 4s infinite linear
}

    .checkout-btn-centered:hover {
        animation: rgb-glow-pulse 4s infinite linear;
        transform: translateY(-2px)
    }

.payment-method-card {
    background-color: var(--main-purple);
    border: 1px solid #8e6abf;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
    text-align: center;
    transition: transform .3s ease,box-shadow .3s ease;
    cursor: pointer
}

    .payment-method-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0,0,0,.2)
    }

    .payment-method-card h3 {
        margin: 0 0 10px;
        text-align: center
    }

        .payment-method-card h3 img {
            height: 25px;
            margin-left: 10px
        }

    .payment-method-card p {
        margin: 0
    }

.modal .modal-header {
    text-align: center
}

.quantity-selector-card {
    background-color: #1b2838;
    border-radius: 1rem;
    box-shadow: 0 4px 15px rgba(0,0,0,.2);
    padding: 20px;
    margin: 15px auto;
    max-width: 300px;
    text-align: center
}

    .quantity-selector-card h4 {
        color: #fff;
        font-size: 1.25rem;
        font-weight: 700;
        margin: 0 0 15px;
        border: 0;
        padding: 0
    }

    .quantity-selector-card .quantity-controls {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px
    }

    .quantity-selector-card .quantity-btn {
        background-color: #00a8ff;
        color: #fff;
        border: 0;
        border-radius: 8px;
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
        font-weight: 700;
        cursor: pointer;
        transition: background-color .3s ease;
        padding: 0;
        margin: 0;
        line-height: 40px
    }

        .quantity-selector-card .quantity-btn:hover {
            background-color: #007bb5
        }

    .quantity-selector-card .quantity-input {
        width: 60px;
        padding: 8px;
        text-align: center;
        font-size: 1.2rem;
        font-weight: 700;
        border: 1px solid #00a8ff;
        background-color: #110e1a;
        color: #fff;
        border-radius: 8px;
        -moz-appearance: textfield
    }

        .quantity-selector-card .quantity-input::-webkit-inner-spin-button, .quantity-selector-card .quantity-input::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0
        }

    .quantity-selector-card .quantity-total {
        color: #fff;
        font-size: 1.1rem;
        font-weight: 700;
        margin-top: 20px;
        margin-bottom: 0
    }

.product-image-fly {
    position: fixed;
    z-index: 9999;
    border-radius: 10%;
    transition: all .8s cubic-bezier(.55,.055,.675,.19);
    pointer-events: none
}

#productPage.section {
    background: linear-gradient(145deg,#1f1133,#110e1a);
    border-radius: 16px;
    padding: 30px;
    border: 1px solid var(--main-purple);
    box-shadow: 0 10px 30px rgba(0,0,0,.4);
    margin: 20px auto;
    max-width: 1200px
}

.product-main-view {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: flex-start
}

    .product-main-view .product-image-section {
        order: 1
    }

    .product-main-view .product-details-section:nth-of-type(3) {
        order: 2;
        flex: 1.3
    }

#productPageFullDescription {
    order: 3;
    flex-basis: 100%;
    margin-top: 30px;
    padding: 25px;
    border-top: 1px solid var(--main-purple);
    background-color: rgba(0,0,0,.2);
    border-radius: 8px
}

    #productPageFullDescription h2 {
        border-right: 3px solid var(--accent-yellow);
        padding-right: 10px;
        margin-bottom: 20px;
        display: inline-block
    }

#productPageTitle {
    color: var(--white-text);
    text-shadow: 0 0 10px rgba(255,204,0,.3);
    margin-bottom: 15px
}

#productPagePrice {
    font-size: 2rem
}

#productPagePrice, .product-page-rating {
    margin-bottom: 20px
}

#productPageShortDescription {
    font-size: 1.1rem;
    color: #d1cde0;
    margin-bottom: 30px
}

.quantity-selector {
    padding: 10px;
    display: inline-flex
}

    .quantity-selector label {
        font-size: 1rem;
        padding-left: 10px
    }

    .quantity-selector button {
        background-color: var(--main-purple);
        color: var(--white-text);
        border-radius: 50%;
        font-size: 1.2rem;
        line-height: 1
    }

        .quantity-selector button:hover {
            background-color: #6a4f8a;
            transform: scale(1.1)
        }

    .quantity-selector input {
        margin: 0;
        -moz-appearance: textfield
    }

.tab-buttons {
    border-bottom: 1px solid var(--main-purple);
    margin-bottom: 20px
}

.tab-button {
    color: var(--light-text);
    opacity: .7;
    padding: 12px 20px;
    font-size: 1rem
}

    .tab-button.active {
        opacity: 1;
        color: var(--accent-yellow)
    }

.tab-content {
    background-color: transparent;
    padding: 10px 5px
}

#toast-container {
    position: fixed;
    top: 80px;
    left: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px
}

.toast-notification {
    background-color: var(--green-buy-btn);
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,.3);
    opacity: 0;
    transform: translateX(-120%);
    transition: all .4s cubic-bezier(.25,.46,.45,.94);
    font-weight: 700
}

    .toast-notification.info {
        background-color: var(--accent-yellow);
        color: var(--black-text);
        font-size: 15px
    }

    .toast-notification.show {
        opacity: 1;
        transform: translateX(0)
    }

.back-button {
    margin-bottom: 20px;
    background-color: transparent;
    border: 2px solid var(--accent-yellow);
    color: var(--accent-yellow);
    font-size: 16px
}

    .back-button:hover {
        background-color: var(--accent-yellow);
        color: var(--black-text);
        transform: translateY(-2px)
    }

.button-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 350px;
    order: 2
}

.discount-code-container {
    display: flex;
    justify-content: center;
    align-items: stretch;
    margin-top: 10px;
    margin-bottom: 5px
}

    .discount-code-container input {
        width: 180px;
        margin: 0;
        padding: -5px;
        text-align: center;
        background: rgba(255,255,255,.05);
        color: #fff;
        border: 1px solid var(--main-purple);
        border-left: none;
        border-radius: 0-5px -5px 0;
        box-sizing: border-box;
        outline: 0;
        font-size: 12px
    }

    .discount-code-container button {
        white-space: nowrap;
        border: 1px solid var(--main-purple);
        border-right: none;
        border-radius: 8px 0 0 8px;
        margin: 0;
        padding: 10px 15px;
        font-size: 14px
    }

.discount-message {
    text-align: center;
    font-size: 14px;
    min-height: 20px;
    font-weight: 700
}

    .discount-message.success {
        color: var(--green-buy-btn)
    }

    .discount-message.error {
        color: #ff4757
    }

#cartTotalContainer .original-price {
    text-decoration: line-through;
    opacity: .7;
    font-size: 16px;
    margin-left: 10px
}

.navbar-search-container {
    position: relative;
    display: flex;
    align-items: center;
    background-color: rgba(0,0,0,.2);
    border-radius: 20px;
    padding: 4px 8px;
    transition: background-color .3s ease
}

    .navbar-search-container:hover {
        background-color: rgba(0,0,0,.3)
    }

.navbar-search-input {
    background: 0 0;
    border: 0;
    outline: 0;
    color: var(--light-text);
    font-family: "Tajawal",sans-serif;
    width: 120px;
    transition: width .4s ease-in-out;
    padding: 2px 5px;
    margin: 0
}

    .navbar-search-input::placeholder {
        color: rgba(224,224,224,.6)
    }

.navbar-search-container .navbar-search-input:focus {
    width: 180px;
    border-color: transparent;
    outline: 0;
    box-shadow: none
}

.navbar-search-btn, .trust-badges-container {
    display: flex;
    justify-content: center;
    align-items: center
}

.navbar-search-btn {
    background: 0 0;
    border: 0;
    cursor: pointer;
    padding: 5px;
    margin: 0;
    color: var(--light-text)
}

    .navbar-search-btn svg {
        fill: currentColor;
        transition: color .3s ease
    }

    .navbar-search-btn:hover {
        color: var(--accent-yellow);
        background-color: transparent;
        transform: none
    }

.trust-badges-container {
    gap: 30px;
    flex-wrap: wrap;
    margin: 20px auto 25px;
    border-bottom: 1px solid rgba(255,255,255,.1)
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--light-text);
    font-size: 14px;
    font-weight: 700
}

    .trust-badge svg {
        width: 28px;
        height: 28px;
        color: var(--accent-yellow)
    }

.modal-trust-badges {
    align-items: center;
    margin-top: 30px
}

    .modal-trust-badges .trust-badge {
        font-size: 12px
    }

#modal-action-button:hover {
    box-shadow: 0 0 15px var(--accent-yellow)
}

.modal-content-section > div[style="text-align: center;"] {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 20px
}

#modal-action-button {
    width: 80%;
    max-width: 300px
}

@media (max-width:1024px) {
    #navbar .nav-link, .dropdown .nav-link {
        margin-left: 10px;
        font-size: 13px
    }
}

@media (max-width:860px) {
    #navbar {
        flex-wrap: wrap;
        justify-content: center;
        padding-bottom: 8px
    }

        #navbar .logo-area {
            width: 100%;
            justify-content: center;
            margin-bottom: 5px;
            margin-left: 0
        }

        #navbar .nav-link, .dropdown > .nav-link {
            padding-bottom: 2px
        }
}

@media (max-width:768px) {
    body {
        padding-top: 120px;
        padding-bottom: 80px
    }

    .product-item {
        min-width: 150px
    }

        .product-item, .product-item.valorant-item {
            width: calc(50% - 20px)
        }

    .subscription-item {
        width: 90%;
        max-width: 340px
    }

    .product-main-view {
        flex-direction: column
    }

    .product-details-section, .product-image-section {
        min-width: 100%
    }

    #productPage {
        padding: 15px
    }
}

@media (max-width:480px) {
    .products-container {
        gap: 15px
    }

    .product-item {
        width: 85%
    }

    .modal {
        width: 95%;
        padding: 15px
    }

        .modal input, .modal textarea {
            width: 90%
        }

    .payment-header-container {
        flex-direction: column
    }

    #shipping {
        padding: 10px
    }

    #orderInputContainer input {
        width: 180px
    }
}

#productPage {
    position: relative;
    z-index: 1;
    background-color: transparent !important
}

    #productPage::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background-image: var(--product-bg-image),linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6));
        background-blend-mode: overlay;
        background-size: cover;
        background-position: center
    }

::-webkit-scrollbar {
    width: 8px;
    height: 8px
}

::-webkit-scrollbar-track {
    background: var(--dark-bg)
}

::-webkit-scrollbar-thumb {
    background: #8e6abf;
    border-radius: 10px;
    border: 2px solid var(--dark-bg)
}

    ::-webkit-scrollbar-thumb:hover {
        background: #a482d1
    }

* {
    scrollbar-width: thin;
    scrollbar-color: #8e6abf var(--dark-bg)
}

.product-item, .rental-card, .service-offer-card, .subscription-item {
    position: relative;
    overflow: hidden
}

    .product-item::before, .rental-card::before, .service-offer-card::before, .subscription-item::before {
        content: "";
        position: absolute;
        left: var(--mouse-x, -100%);
        top: var(--mouse-y, -100%);
        width: 150px;
        height: 150px;
        background: radial-gradient(circle,rgba(255,255,255,.2),transparent 60%);
        transform: translate(-50%,-50%);
        transition: left .1s ease,top .1s ease;
        pointer-events: none;
        z-index: 1
    }

@media (max-width:768px) {
    #offlineSteamContainer {
        display: grid !important;
        grid-template-columns: repeat(2,1fr) !important;
        gap: 8px !important;
        padding: 5px !important
    }

        #offlineSteamContainer .product-item, #offlineSteamContainer .product-item--offline {
            width: 100% !important;
            min-width: 0 !important;
            margin: 0 !important;
            padding: 4px !important;
            height: 100% !important;
            min-height: 210px !important;
            display: flex !important;
            flex-direction: column !important;
            justify-content: space-between !important
        }

        #offlineSteamContainer .product-image-wrapper {
            height: 120px !important;
            width: 100% !important;
            margin-bottom: 6px !important
        }

        #offlineSteamContainer img {
            height: 100% !important;
            width: 100% !important;
            object-fit: cover !important;
            border-radius: 6px 6px 0 0 !important
        }

        #offlineSteamContainer h3 {
            font-size: 11px !important;
            margin: 0 !important;
            line-height: 1.3 !important;
            min-height: 28px !important;
            text-align: center !important;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden
        }

        #offlineSteamContainer .product-price {
            font-size: 13px !important;
            font-weight: 800 !important;
            margin: 4px 0 8px !important;
            text-align: center !important;
            color: #66c0f4 !important
        }

        #offlineSteamContainer .add-to-cart-btn, #offlineSteamContainer .platform-icon, #offlineSteamContainer .product-description-text {
            display: none !important
        }

        #offlineSteamContainer .buy-btn {
            width: 100% !important;
            margin-top: auto !important;
            padding: 8px 0 !important;
            border-radius: 6px !important;
            font-size: 0 !important;
            display: flex !important;
            justify-content: center;
            align-items: center
        }

            #offlineSteamContainer .buy-btn::after {
                content: "اشتري";
                font-size: 13px !important;
                font-weight: 700 !important;
                color: inherit
            }

    #personal-gifting-section {
        padding: 15px !important;
        margin: 15px 10px !important
    }

    #personalGiftingContainer .calculator-card {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        min-height: auto !important;
        background: linear-gradient(145deg,rgba(30,20,50,.8),rgba(10,5,30,.9)) !important
    }

    #personalGiftingContainer .calculator-card-content {
        padding: 20px 15px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        border-radius: 12px !important
    }

    #personalGiftingContainer .calculator-card-icon {
        width: 50px !important;
        height: 50px !important;
        margin-bottom: 10px !important
    }

    #personalGiftingContainer h3 {
        font-size: 16px !important;
        margin-bottom: 8px !important;
        text-align: center !important
    }

    #personalGiftingContainer p {
        font-size: 12px !important;
        line-height: 1.5 !important;
        color: #ccc !important;
        margin-bottom: 15px !important;
        display: block !important;
        max-width: 100% !important
    }

    #personalGiftingContainer .hide-on-mobile {
        display: block !important
    }

    #personalGiftingContainer .buy-btn {
        width: 100% !important;
        padding: 10px 0 !important;
        font-size: 14px !important;
        border-radius: 8px !important;
        background-color: transparent !important;
        border: 1px solid #fff !important
    }

        #personalGiftingContainer .buy-btn:active {
            background-color: #fff !important;
            color: #000 !important
        }
}

#about, #faq, #privacy, #terms {
    display: none !important
}

@media (max-width:768px) {
    #homeSoftwareSubscriptionsContainer, #homeTvSubscriptionsContainer {
        display: grid !important;
        grid-template-columns: repeat(2,1fr) !important;
        gap: 8px !important;
        padding: 5px !important
    }

    .subscription-item {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 4px !important;
        border-radius: 8px !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important
    }

        .subscription-item .product-image-wrapper, .subscription-item .sub-image-wrapper {
            height: 110px !important;
            width: 100% !important;
            margin-bottom: 5px !important
        }

        .subscription-item img {
            height: 100% !important;
            width: 100% !important;
            object-fit: cover !important;
            border-radius: 6px 6px 0 0 !important
        }

        .subscription-item .sub-content {
            padding: 0 4px !important;
            text-align: center;
            flex-grow: 1;
            display: flex;
            flex-direction: column
        }

        .subscription-item h3 {
            font-size: 11px !important;
            margin: 4px 0 !important;
            min-height: 25px !important;
            line-height: 1.2 !important;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden
        }

        .subscription-item .sub-price {
            font-size: 13px !important;
            font-weight: 800 !important;
            margin: 2px 0 6px !important;
            color: var(--accent-yellow)
        }

        .subscription-item .add-to-cart-btn, .subscription-item .sub-description {
            display: none !important
        }

        .subscription-item .buy-btn, .subscription-item .subscribe-btn {
            width: 100% !important;
            margin-top: auto !important;
            padding: 8px 0 !important;
            border-radius: 6px !important;
            font-size: 0 !important;
            display: flex !important;
            justify-content: center;
            align-items: center
        }

            .subscription-item .buy-btn::after, .subscription-item .subscribe-btn::after {
                content: "اشتري";
                font-size: 14px !important;
                font-weight: 700 !important;
                color: inherit
            }
}



.quote-icon {
    font-size: 2rem;
    color: var(--primary-color);
    opacity: .2;
    position: absolute;
    top: 20px;
    left: 20px
}

.stars {
    color: gold;
    margin-bottom: 15px;
    font-size: .9rem
}

.review-text {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 25px;
    font-style: italic;
    font-size: .95rem
}

.client-avatar, .client-info {
    display: flex;
    align-items: center
}

.client-info {
    gap: 15px;
    border-top: 1px solid var(--border-glass);
    padding-top: 15px
}

.client-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem
}

.client-info h4 {
    font-size: 1rem;
    margin: 0;
    color: var(--text-primary)
}

.client-info span {
    font-size: .8rem;
    color: var(--text-secondary)
}

@media (max-width:768px) {
    .testimonials-grid {
        grid-template-columns: 1fr
    }

    #navbar, .glass-card, .main-products-section, .modal-content-v2, .product-item, .service-offer-card, body {
        background-image: none !important;
        background-color: #0f0b15 !important
    }

    #kid-smoke, .fire-particles-container, .floating-circle, .glowing-orb {
        display: none !important
    }

    .glass-card, .product-item, .service-offer-card {
        border-radius: 8px !important;
        border: 1px solid #333 !important
    }

    *, ::after, ::before {
        animation: none !important;
        transition: none !important
    }

    #my-orders-page {
        max-width: 100% !important;
        min-height: auto !important
    }

        #my-orders-page .page-header-info {
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            text-align: center !important;
            gap: 15px !important;
            padding-bottom: 10px !important
        }

    #orders-page-icon {
        max-width: 100px !important;
        height: auto !important;
        margin: 0 !important
    }

    #orders-summary-box {
        padding-left: 0 !important;
        text-align: center !important;
        width: 100%
    }

    #my-orders-page .summary-value {
        font-size: 3rem !important;
        margin: 10px 0 !important
    }

    .user-rank-display-small {
        font-size: 1.1rem !important;
        margin-top: 5px !important;
        display: inline-block
    }

    #orders-list-container {
        gap: 15px !important;
        width: 100% !important
    }

    .order-history-card {
        width: 100% !important;
        box-sizing: border-box !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: right !important
    }

    .order-card-img {
        height: 120px !important;
        margin-bottom: 10px
    }

    #my-orders-page, .order-card-img, .order-card-info {
        width: 100% !important
    }

    .order-card-footer {
        margin-top: 10px;
        width: 100%;
        justify-content: space-between
    }

    #my-orders-page {
        margin: 0 !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        box-sizing: border-box !important;
        padding: 20px 15px !important
    }

    #steamPointsContainer, #steamPointsPageContainer {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        padding: 5px !important
    }

        #steamPointsContainer .product-item, #steamPointsPageContainer .product-item {
            width: 100% !important;
            max-width: 100% !important;
            margin: 0 !important;
            padding: 10px 8px !important;
            min-height: auto !important
        }

        #steamPointsContainer .product-image-wrapper, #steamPointsPageContainer .product-image-wrapper {
            height: 100px !important;
            margin-bottom: 8px !important
        }

        #steamPointsContainer h3, #steamPointsPageContainer h3 {
            font-size: .85rem !important;
            min-height: 35px !important;
            margin-bottom: 5px !important
        }

    .product-price {
        font-size: .9rem !important
    }

    .buy-btn {
        padding: 8px 5px !important;
        font-size: .8rem !important;
        width: 100% !important
    }
}



@media (max-width:768px) {
    .categories-container, .categories-wrapper, .category-section {
        border: 0 !important;
        box-shadow: none !important
    }

    .category-btn, .category-item, .nav-tab {
        border: 0 !important;
        outline: 0 !important;
        background: rgba(255,255,255,.05) !important
    }

        .category-btn:not(:last-child) {
            border-right: none !important;
            border-left: none !important
        }

        .category-btn.active, .category-btn:hover {
            border: 0 !important;
            box-shadow: 0 4px 10px rgba(142,106,191,.2) !important
        }
}

* {
    outline: 0 !important
}

.category-btn, .product-item, a, button {
    user-select: none !important;
    -webkit-user-select: none !important
}

.btn {
    transition: transform .1s cubic-bezier(.4,0,.2,1),opacity .1s ease !important
}

.btn, .category-btn, .nav-link, .product-item, .rental-card, .subscription-item, a, button {
    cursor: pointer !important
}

.nav-link, .rental-card {
    transition: transform .1s cubic-bezier(.4,0,.2,1),opacity .1s ease !important
}

    .btn:active, .category-btn:active, .nav-link:active, .product-item:active, .rental-card:active, .subscription-item:active, a:active, button:active {
        transform: scale(.95) !important;
        opacity: .8 !important;
        filter: brightness(1.2) !important
    }

        .product-item:active .buy-btn {
            transform: scale(.9) !important
        }

@media screen and (max-width:768px) {
    #home, #subscriptions-section {
        border: 0 !important;
        box-shadow: none !important
    }

    #home {
        background: 0 0 !important;
        backdrop-filter: none !important
    }

    #subscriptions-section {
        padding: 20px 10px !important;
        margin: 20px auto !important;
        width: 100% !important
    }

    .subscription-subcategory-label {
        font-size: 1.2rem !important;
        text-align: right !important;
        margin: 35px 10px 15px 0 !important;
        padding-right: 10px !important;
        border-right: 4px solid #fc0
    }

    #subscriptions-section .products-container {
        display: grid !important;
        grid-template-columns: repeat(2,1fr) !important;
        gap: 15px !important;
        padding: 0 5px !important;
        margin-bottom: 25px !important
    }

    #subscriptions-section .product-item, #subscriptions-section .subscription-item {
        width: 100% !important;
        margin: 0 !important
    }

    #steam-gift-cards-section, #steam-points-section {
        border: 0 !important;
        box-shadow: none !important;
        background: 0 0 !important;
        padding: 10px 15px !important;
        margin: 40px auto !important
    }

        #playstation-section h2, #steam-gift-cards-section h2, #steam-points-section h2 {
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
            font-size: 1.5rem !important;
            margin-bottom: 25px !important;
            width: 100% !important
        }

    #steamGiftCardsHomeContainer, #steamPointsContainer {
        display: grid !important;
        grid-template-columns: repeat(2,1fr) !important;
        gap: 20px !important;
        padding: 5px !important
    }

        #steamGiftCardsHomeContainer .product-item, #steamPointsContainer .product-item {
            width: 100% !important;
            margin: 0 !important;
            box-shadow: 0 4px 10px rgba(0,0,0,.2) !important;
            border-radius: 10px !important
        }

    #playstation-section {
        padding: 15px 10px !important;
        margin: 40px auto !important;
        border: 0 !important;
        box-shadow: none !important;
        background: 0 0 !important
    }

        #playstation-section h2 {
            font-size: 1.6rem !important
        }

    #ps-plus-container, #psn-gift-cards-container {
        display: grid !important;
        grid-template-columns: repeat(2,1fr) !important;
        gap: 15px !important;
        padding: 0 5px !important
    }

    .ps-grid-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
        width: 100% !important
    }

    .ps-grid-column {
        width: 100% !important;
        padding: 0 !important
    }

    #home .discord-button, .mobile-hide-stock, .product-urgency, .rental-card p {
        display: none !important
    }

    #game-rentals-section {
        padding: 10px 5px !important;
        margin: 40px auto !important;
        border: 0 !important;
        box-shadow: none !important;
        background: 0 0 !important
    }

        #game-rentals-section h2 {
            font-size: 1.4rem !important;
            margin-bottom: 20px !important;
            color: #fff !important;
            text-shadow: 0 0 10px rgba(255,170,0,.6) !important
        }

    #gameRentalsContainer {
        display: grid !important;
        grid-template-columns: repeat(2,1fr) !important;
        gap: 20px !important;
        padding: 5px !important
    }

    .rental-card {
        width: 100% !important;
        margin: 0 !important;
        padding: 8px !important;
        border-radius: 15px !important;
        background: linear-gradient(180deg,rgba(45,45,60,.95)0,rgba(20,20,30,.98) 100%) !important;
        border: 1px solid rgba(255,255,255,.08) !important;
        box-shadow: 0 8px 20px rgba(0,0,0,.5) !important
    }

    .rental-card-image {
        height: 95px !important;
        width: 100% !important;
        object-fit: cover !important;
        margin-bottom: 8px !important;
        border-radius: 10px !important;
        filter: brightness(.9)
    }

    .rental-card h3 {
        font-size: .85rem !important;
        margin-bottom: 6px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #f0f0f0 !important;
        text-align: center
    }

    .duration-selector-buttons {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        justify-content: center !important;
        margin-bottom: 8px !important
    }

    .duration-btn {
        font-size: 9px !important;
        padding: 4px 8px !important;
        border-radius: 6px !important;
        background: rgba(255,255,255,.05) !important;
        color: #aaa !important;
        border: 1px solid rgba(255,255,255,.1) !important
    }

        .duration-btn.active {
            background: #fc0 !important;
            color: #000 !important;
            border-color: #fc0 !important;
            font-weight: 700 !important;
            box-shadow: 0 0 8px rgba(255,204,0,.4) !important
        }

    .rental-price-display {
        font-size: 1rem !important;
        margin: 5px 0 8px !important;
        color: #4ade80 !important;
        font-weight: 700 !important;
        text-align: center
    }

    .rental-card .buy-btn {
        font-size: 11px !important;
        padding: 8px !important;
        width: 100% !important;
        border-radius: 50px !important;
        background: linear-gradient(90deg,#ff8c00,#fa0) !important;
        color: #fff !important;
        border: 0 !important;
        box-shadow: 0 4px 10px rgba(255,140,0,.3) !important
    }

    #navbar {
        background: linear-gradient(180deg,rgba(35,15,55,.98)0,rgba(10,5,20,.99) 100%) !important;
        backdrop-filter: blur(20px) !important;
        box-shadow: 0 10px 40px rgba(0,0,0,.9) !important;
        border-bottom: 1px solid rgba(157,78,221,.2) !important
    }

    .playstation-subcategory-label {
        font-size: 1.3rem !important;
        text-align: center !important;
        margin: 25px 0 20px !important;
        padding-bottom: 10px !important;
        border-bottom: 1px solid rgba(255,255,255,.1) !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important
    }

    #xboxGiftCardsContainer, #xboxPopularGamesContainer {
        display: grid !important;
        grid-template-columns: repeat(2,1fr) !important;
        gap: 15px !important;
        padding: 0 5px !important;
        margin-bottom: 40px !important
    }

        #xboxGiftCardsContainer .product-item, #xboxPopularGamesContainer .product-item {
            width: 100% !important;
            margin: 0 !important;
            box-shadow: 0 4px 10px rgba(0,0,0,.2) !important;
            border-radius: 10px !important
        }

        #xboxGiftCardsContainer::before, #xboxPopularGamesContainer::before {
            content: "Gift Cards";
            grid-column: span 2;
            color: #ccc;
            font-size: .9rem;
            margin-bottom: 5px;
            text-align: right
        }

        #xboxPopularGamesContainer::before {
            content: "Popular Games"
        }

    .faq-item-v2, .process-step-card {
        background: #fff !important;
        border: 1px solid #e0e0e0 !important;
        box-shadow: 0 4px 15px rgba(0,0,0,.05) !important
    }

        .process-step-card h4 {
            font-weight: 800 !important
        }

        .process-step-card p {
            color: #333 !important;
            font-weight: 500 !important
        }

        .process-step-card .step-number-giant {
            color: rgba(0,0,0,.05) !important;
            -webkit-text-stroke: 1px rgba(0,0,0,.1) !important
        }

        .faq-item-v2 p, .process-step-card .step-icon-v2 {
            color: #333 !important
        }

        .faq-item-v2 h4, .process-step-card h4 {
            color: #000 !important;
            text-shadow: none !important
        }

    .faq-icon-top {
        background: rgba(0,0,0,.05) !important
    }
}

@media (max-width:992px) {
    .store-logo-on-homepage {
        display: none !important
    }

    .glow-text-rtl {
        color: #fff !important;
        text-align: center;
        font-weight: 900;
        font-size: 1.9rem;
        margin: 25px 0;
        text-shadow: 0 0 5px #fff,0 0 15px #fff,0 0 30px rgba(255,255,255,.8),0 0 50px rgba(255,255,255,.5);
        letter-spacing: 1px;
        filter: brightness(1.5)
    }
}

button[onclick="openMyOrders()"] {
    margin-top: 25px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,.3);
    transition: all .3s ease
}

    button[onclick="openMyOrders()"]:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 25px rgba(0,0,0,.4)
    }

#rating-name:focus, #rating-text:focus {
    border-color: var(--accent-yellow) !important;
    outline: 0;
    box-shadow: 0 0 10px rgba(var(--accent-yellow-rgb),.2)
}

@media screen and (max-width:768px) {
    #footer {
        width: 100vw !important;
        position: relative !important;
        left: 50% !important;
        right: 50% !important;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
        background: inherit !important;
        padding: 5px 0 0 !important;
        display: flex !important;
        gap: 2px !important
    }

    .trust-badges-container {
        display: grid !important;
        grid-template-columns: repeat(3,1fr) !important;
        border: 0 !important;
        margin: 0 !important;
        padding: 2px 0 !important;
        width: 100% !important;
        border-bottom: 1px solid rgba(255,255,255,.05) !important
    }

    #footer, .trust-badge {
        flex-direction: column !important
    }

    .trust-badge {
        align-items: center !important;
        padding: 0 !important;
        gap: 1px !important
    }

        .trust-badge svg {
            width: 14px !important;
            height: 14px !important
        }

        .trust-badge span {
            font-size: 9px !important;
            white-space: nowrap !important;
            line-height: 1 !important
        }

    .contact-footer-clean > div, .footer-links, .trust-badge {
        display: flex !important;
        justify-content: center !important
    }

    .footer-links {
        flex-wrap: wrap !important;
        gap: 5px !important;
        margin: 2px 0 !important;
        padding: 0 !important
    }

        .contact-footer-clean h4, .footer-links > a[href*="linktr.ee"], .footer-links > span, hr.footer-single-divider {
            display: none !important
        }

    .footer-link-new {
        font-size: 10px !important;
        padding: 3px 8px !important;
        background: rgba(255,255,255,.05);
        border-radius: 12px
    }

    .contact-footer-clean {
        position: static !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 2px 0 !important;
        background: 0 0 !important
    }

        .contact-footer-clean > div {
            flex-direction: row-reverse !important;
            gap: 10px !important;
            align-items: center !important
        }

        .contact-footer-clean img {
            width: 25px !important;
            height: 25px !important;
            border: 0 !important
        }

        .contact-footer-clean > div > div:nth-child(2) {
            display: none !important
        }

        .contact-footer-clean > div > div:last-child {
            flex-direction: row !important;
            gap: 8px !important
        }

        .contact-footer-clean span {
            font-size: 10px !important
        }

        .contact-footer-clean i {
            font-size: 11px !important
        }

    #copyright, .payment-icons-corner {
        margin: 0 !important;
        width: 100% !important;
        background: 0 0 !important
    }

    .payment-icons-corner {
        position: static !important;
        display: flex !important;
        justify-content: center !important;
        padding: 2px 0 0 !important;
        gap: 5px !important
    }

        .payment-icons-corner img {
            height: 14px !important;
            width: auto !important;
            margin: 0 !important
        }

    #copyright {
        padding: 2px 0 5px !important;
        font-size: 9px !important;
        line-height: 1.2 !important
    }

    .footer-social-inline {
        display: none !important
    }
}

#chat-bot-toggle, .steam-sticky-note {
    box-shadow: 0 4px 15px rgba(0,0,0,.2)
}

#chat-bot-container, .card-bg-option i, .card-bg-option img {
    pointer-events: none
}

.bg-options-grid, .steam-sticky-note {
    display: flex;
    gap: 12px;
    justify-content: center
}

.steam-sticky-note {
    position: sticky;
    top: 10px;
    z-index: 999;
    background: rgba(23,26,33,.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    align-items: center;
    width: fit-content;
    max-width: 95%;
    margin: 20px auto;
    padding: 12px 25px;
    color: #c7d5e0;
    font-size: 1.1rem
}

    .steam-sticky-note i.fa-steam {
        color: #66c0f4;
        font-size: 1.5rem;
        filter: drop-shadow(0 0 5px rgba(102,192,244,.3))
    }

.bg-options-grid {
    flex-wrap: wrap;
    padding: 10px
}

.card-bg-option {
    background: #1a1a1a
}

    .card-bg-option.active {
        border-color: #00c0ff;
        box-shadow: 0 0 15px rgba(0,192,255,.5);
        transform: scale(1.05)
    }

#profile-card {
    transition: background .5s;
    background-size: cover !important;
    background-position: center !important
}

.gaming-header-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-top: 0;
    margin-top: -5px;
    margin-bottom: 20px;
    direction: rtl;
    width: 100%
}

    .gaming-header-container h2 {
        margin: 0;
        text-align: center
    }

.status-badge-left {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(37,211,102,.1);
    color: #25d366;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(37,211,102,.1)
}

.pulsing-dot-green {
    width: 10px;
    height: 10px;
    background-color: #25d366;
    border-radius: 50%;
    position: relative;
    display: block
}

    .pulsing-dot-green::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 100%;
        height: 100%;
        background-color: inherit;
        border-radius: inherit;
        opacity: .7;
        z-index: -1;
        animation: 1.5s cubic-bezier(.4,0,.6,1) infinite pulse-animation
    }

@media (max-width:600px) {
    .gaming-header-container {
        flex-direction: column;
        gap: 10px;
        margin-top: 0
    }

    .status-badge-left {
        position: relative;
        left: auto;
        top: auto;
        transform: none
    }
}

#profile-settings-page.has-custom-bg {
    background-color: transparent !important;
    border: 1px solid rgba(255,255,255,.2) !important
}

    #profile-settings-page.has-custom-bg::after, #profile-settings-page.has-custom-bg::before {
        display: none !important;
        content: none !important;
        background: 0 0 !important
    }

.card-bg-option {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid rgba(255,255,255,.1);
    transition: .3s;
    position: relative;
    z-index: 999
}

    .card-bg-option:hover {
        transform: scale(1.1);
        border-color: #fc0
    }

    .card-bg-option img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

#orders-page-icon {
    opacity: 0;
    animation: .8s ease-out .2s forwards fadeUp;
    display: block;
    margin: 0 auto
}

#gameTopupContainer > div, #games-section .products-container > div {
    overflow: hidden;
    border-radius: 15px
}

    #games-section .products-container > div img {
        width: 100%;
        display: block;
        transition: transform .5s
    }

    #gameTopupContainer > div:hover img, #games-section .products-container > div:hover img {
        transform: scale(1.1)
    }

    #gameTopupContainer > div img {
        width: 100%;
        transition: transform .5s;
        display: block
    }

#marvelStepsSection {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 60px;
    margin-bottom: 40px;
    flex-wrap: wrap;
    direction: rtl;
    position: relative;
    z-index: 1
}

    #marvelStepsSection .marvel-card {
        position: relative;
        width: 200px;
        padding: 25px 15px;
        background: linear-gradient(180deg,rgba(10,20,40,.9)0,rgba(5,10,20,.95) 100%);
        clip-path: polygon(15px 0,100%0,100% calc(100% - 15px),calc(100% - 15px) 100%,0 100%,0 15px);
        border-left: 2px solid rgba(0,243,255,.3);
        border-right: 2px solid rgba(0,243,255,.3);
        text-align: center;
        transition: .3s;
        cursor: default;
        box-sizing: border-box
    }

        #marvelStepsSection .marvel-card::after, #marvelStepsSection .marvel-card::before {
            content: "";
            position: absolute;
            height: 2px;
            width: 30%;
            background: #00f3ff;
            transition: width .3s
        }

        #marvelStepsSection .marvel-card::before {
            top: 0;
            left: 0
        }

        #marvelStepsSection .marvel-card::after {
            bottom: 0;
            right: 0
        }

        #marvelStepsSection .marvel-card:hover {
            transform: translateY(-10px);
            background: linear-gradient(180deg,rgba(10,40,70,.9)0,rgba(5,10,20,.95) 100%);
            box-shadow: 0 0 25px rgba(0,243,255,.15)
        }

            #marvelStepsSection .marvel-card:hover::after, #marvelStepsSection .marvel-card:hover::before {
                width: 100%;
                background: #fa0;
                box-shadow: 0 0 10px #fa0
            }

    #marvelStepsSection .marvel-icon {
        width: 60px;
        height: 60px;
        margin: 0 auto 15px;
        background: rgba(0,243,255,.1);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(0,243,255,.3);
        box-shadow: 0 0 15px rgba(0,243,255,.1);
        transition: .4s
    }

        #marvelStepsSection .marvel-icon svg {
            width: 30px;
            height: 30px;
            color: #00f3ff;
            transition: .4s
        }

    #marvelStepsSection .marvel-card:hover .marvel-icon {
        background: rgba(255,170,0,.1);
        border-color: #fa0;
        transform: rotate(360deg)
    }

        #marvelStepsSection .marvel-card:hover .marvel-icon svg {
            color: #fa0
        }

    #marvelStepsSection .marvel-card h3, .section-title-center h2, .shipping-card h3 {
        color: #fff;
        font-size: 16px;
        margin: 5px 0;
        font-weight: 700
    }

    #marvelStepsSection .marvel-card p {
        color: #8faab0;
        font-size: 12px;
        margin: 0
    }

    #marvelStepsSection .tech-line {
        width: 50px;
        height: 3px;
        background-color: #333;
        margin: 15px auto 0;
        position: relative;
        overflow: hidden
    }

        #marvelStepsSection .tech-line::after {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: #00f3ff;
            animation: 2s linear infinite techScan
        }

#shippingCardsContainer, .shipping-card {
    display: flex;
    align-items: center;
    justify-content: center
}

#shippingCardsContainer {
    gap: 120px;
    margin-top: 70px;
    margin-bottom: 50px;
    flex-wrap: wrap;
    direction: rtl
}

.shipping-card {
    width: 170px;
    height: 170px;
    background: radial-gradient(circle,rgba(255,70,86,.2)0,rgba(255,70,86,.05) 60%,transparent 100%);
    border: 1px solid rgba(255,70,86,.3);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 35px;
    flex-direction: column;
    text-align: center;
    padding: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,.2);
    transition: .4s
}

    .shipping-card:hover {
        transform: scale(1.1) translateY(-10px);
        background: radial-gradient(circle,rgba(255,70,86,.4)0,rgba(255,70,86,.1) 70%,transparent 100%);
        border-color: #ff4656;
        box-shadow: 0 0 40px rgba(255,70,86,.3);
        cursor: pointer
    }

.card-icon svg {
    width: 42px;
    height: 42px;
    color: #fff;
    margin-bottom: 8px;
    filter: drop-shadow(0 0 5px rgba(255,70,86,.8));
    transition: .4s
}

.shipping-card:hover .card-icon svg {
    transform: rotate(360deg) scale(1.1);
    color: #ff4656
}

.shipping-card h3 {
    font-size: 15px;
    text-shadow: 0 2px 5px rgba(0,0,0,.5)
}

.shipping-card p {
    display: block;
    color: #ffced3;
    font-size: 11px;
    margin-top: 2px;
    opacity: .9;
    font-family: sans-serif
}

.legal_full_page_v2 {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #121212;
    color: #e0e0e0;
    overflow-y: auto;
    animation: .3s ease-out slideInUp
}

.legal_page_container {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
    position: relative
}

.legal_back_btn {
    display: inline-block;
    background-color: #2c2c2c;
    color: #fff;
    padding: 10px 20px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 30px;
    border: 1px solid #444;
    transition: .2s
}

    .legal_back_btn:hover {
        background-color: #3d3d3d;
        border-color: #666
    }

.legal_page_title {
    font-size: 2rem;
    color: #fff;
    border-bottom: 2px solid #333;
    padding-bottom: 15px;
    margin-bottom: 25px
}

.legal_text_body h3 {
    color: #fff;
    margin-top: 30px
}

.legal_text_body p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #b0b0b0;
    margin-bottom: 20px
}

.terms-error {
    border: 1px solid #ff4757 !important;
    background: rgba(255,71,87,.1) !important;
    animation: .4s cubic-bezier(.36,.07,.19,.97) both shake
}

.referral-title {
    font-size: 1.8rem;
    font-weight: 900;
    text-align: center;
    margin-bottom: 20px;
    background: linear-gradient(to right,red 0,#f80 25%,#fd0 50%,#f80 75%,red 100%);
    background-size: 200%auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: 3s linear infinite textShine;
    filter: drop-shadow(0 0 5px rgba(255,100,0,.5))
}

    .referral-title i {
        display: inline-block;
        background: 0 0;
        -webkit-background-clip: border-box;
        color: gold;
        margin-left: 10px;
        filter: drop-shadow(0 0 10px rgba(255,215,0,.8));
        animation: 2s ease-in-out infinite giftShake
    }

.referral-section {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .6s cubic-bezier(.4,0,.2,1),opacity .6s,padding .6s;
    overflow: hidden
}

    .referral-section.show {
        grid-template-rows: 1fr;
        opacity: 1;
        margin-top: 20px
    }

.referral-content {
    min-height: 0;
    overflow: hidden;
    transform: translateY(20px);
    transition: transform .6s cubic-bezier(.4,0,.2,1)
}

.referral-section.show .referral-content {
    transform: translateY(0)
}

.earn-money-trigger {
    transition: .4s cubic-bezier(.4,0,.2,1);
    transform-origin: center
}

    .earn-money-trigger.hide {
        opacity: 0;
        transform: scale(.9) translateY(-10px);
        pointer-events: none
    }

.referral-section.show #referralCodeSection, .referral-section.show .referral-email-section, .referral-section.show .referral-subtitle, .referral-section.show .referral-title {
    animation: .8s cubic-bezier(.2,.8,.2,1) both smoothReveal
}

.referral-section.show .referral-title {
    animation-delay: .1s
}

.referral-section.show .referral-subtitle {
    animation-delay: .2s
}

.referral-section.show .referral-email-section {
    animation-delay: .3s
}

.referral-section.show #referralCodeSection {
    animation-delay: .4s
}

.payment-methods-info {
    text-align: center;
    color: rgba(255,255,255,.7);
    font-size: 14px;
    margin-top: 10px
}

.payment-icons {
    margin-top: 8px
}

.payment-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 8px;
    vertical-align: middle
}

.withdraw-section {
    display: flex;
    justify-content: center;
    margin-top: 20px
}

#productPagePlatform, .tabs-container {
    margin-top: -30px
}

#games-section .section-counter, .countdown-wrapper {
    background: linear-gradient(135deg,rgba(255,69,0,.15),rgba(255,69,0,.05));
    padding: 10px 16px
}

#games-section .section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
    position: relative
}

    #games-section .section-header-row h2 {
        margin: 0;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        white-space: nowrap
    }

#games-section .section-subtitle {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: #999;
    margin-top: 5px
}

#games-section .section-counter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    border: 1px solid rgba(255,69,0,.3);
    border-radius: 12px;
    min-width: 140px;
    margin-right: auto
}

#games-section .countdown-label, .countdown-label {
    font-size: 11px;
    color: #ff4500;
    font-weight: 600
}

#games-section .countdown-timer, .countdown-timer {
    display: flex;
    align-items: center;
    gap: 4px;
    direction: ltr
}

#games-section .countdown-item, .countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 30px
}

    #games-section .countdown-item span, .countdown-item span {
        font-size: 16px;
        font-weight: 800;
        color: #fff
    }

    #games-section .countdown-item small, .countdown-item small {
        font-size: 8px;
        color: #aaa;
        margin-top: 2px
    }

#games-section .countdown-separator, .countdown-separator {
    color: #ff4500;
    font-size: 16px;
    font-weight: 700
}

.section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 15px
}

.section-title-center {
    text-align: center;
    flex: 1
}

    .section-title-center h2 {
        margin: 0;
        font-size: 22px;
        display: inline-flex;
        align-items: center;
        gap: 8px
    }

    .section-title-center p {
        margin: 5px 0 0;
        font-size: 13px;
        color: #999
    }

        .section-title-center p:empty {
            display: none
        }

.section-spacer {
    width: 140px
}

.countdown-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    border: 1px solid rgba(255,69,0,.3);
    border-radius: 12px;
    min-width: 140px
}

#chat-bot-send-btn, #chat-bot-toggle {
    color: #fff;
    align-items: center;
    outline: 0;
    cursor: pointer
}

.tabs-container {
    position: relative
}

.tab-content {
    padding-top: 20px
}

#chat-bot-toggle {
    position: fixed;
    bottom: 25px;
    left: 25px;
    height: 36px;
    padding: 0 14px;
    border-radius: 18px;
    background: rgba(138,43,226,.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.15);
    display: flex;
    justify-content: center;
    gap: 6px;
    z-index: 99999;
    transition: .3s cubic-bezier(.2,.8,.2,1);
    animation: 3s infinite pulseButton
}

    #chat-bot-toggle i, #chat-bot-toggle svg {
        width: 14px;
        height: 14px;
        font-size: 14px
    }

    #chat-bot-toggle span {
        font-size: 12px;
        font-weight: 600
    }

.pulse-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 18px;
    background: 0 0;
    border: 2px solid rgba(138,43,226,.8);
    box-sizing: border-box;
    z-index: -1;
    animation: 2s cubic-bezier(0,0,.2,1) infinite ripple-outline
}

#chat-bot-toggle:hover {
    background: rgba(138,43,226,.6);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(138,43,226,.3)
}

#chat-bot-toggle:focus {
    outline: 0;
    border-color: rgba(255,255,255,.3)
}

#chat-bot-container {
    width: 420px;
    height: 580px;
    background: rgba(18,18,18,.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    position: fixed;
    bottom: 80px;
    left: 25px;
    border-radius: 20px;
    box-shadow: 0 10px 35px rgba(0,0,0,.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 10000;
    border: 1px solid rgba(138,43,226,.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(30px) scale(.9);
    transition: .4s cubic-bezier(.175,.885,.32,1.275)
}

    #chat-bot-container.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
        bottom: 70px;
        pointer-events: all
    }

@media (max-width:1024px) {
    #chat-bot-container {
        width: 380px;
        height: 550px;
        left: 20px;
        bottom: 65px
    }
}

@media (max-width:768px) {
    #marvelStepsSection .marvel-card {
        width: 100%;
        margin-bottom: 15px
    }

    #shippingCardsContainer {
        gap: 40px
    }



    #dev-services-page::after, #dev-services-page::before {
        display: none !important
    }

    #games-section .section-header-row {
        flex-direction: column;
        padding-top: 60px
    }

        #games-section .section-header-row h2 {
            position: relative;
            left: auto;
            transform: none
        }

    #games-section .section-counter {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        margin-right: 0;
        padding: 8px 12px;
        min-width: 120px
    }

    #games-section .section-subtitle {
        font-size: 11px
    }

    #games-section .countdown-item span, .countdown-item span {
        font-size: 14px
    }

    .section-header-row {
        flex-direction: column;
        gap: 12px
    }

    .section-spacer {
        display: none
    }

    .section-title-center h2 {
        font-size: 18px
    }

    .countdown-wrapper {
        padding: 8px 12px;
        order: -1;
        min-width: 120px
    }

    .countdown-label {
        font-size: 10px
    }

    #chat-bot-container {
        width: 350px;
        height: 500px;
        left: 15px;
        bottom: 60px;
        border-radius: 18px
    }

    #chat-bot-toggle {
        width: 80px;
        height: 36px;
        font-size: 11px;
        bottom: 50px;
        left: 15px;
        box-shadow: 0 3px 10px rgba(138,43,226,.5);
        background: rgba(138,43,226,.3);
        outline: 0 !important;
        border: 0 !important
    }

    #offline-steam-section .products-container {
        display: grid !important;
        grid-template-columns: repeat(2,1fr) !important;
        gap: 10px !important;
        justify-content: start !important;
        justify-items: start !important;
        padding-left: 5px !important;
        padding-right: 30px !important;
        margin-right: -5px !important
    }

    #offline-steam-section .product-card {
        margin-right: 0 !important;
        margin-left: auto !important
    }
}

@media (max-width:480px) {
    #chat-bot-container {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%,-50%) !important;
        bottom: auto !important;
        right: auto !important;
        width: 90% !important;
        max-width: 350px !important;
        height: 80vh !important;
        max-height: 600px !important;
        border-radius: 16px;
        z-index: 99998
    }

    #chat-bot-toggle {
        width: 75px;
        height: 34px;
        font-size: 10px;
        bottom: 58px !important;
        left: 10px !important;
        background: rgba(138,43,226,.35);
        z-index: 999999;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important
    }
}

@media (max-width:360px) {
    #chat-bot-container {
        width: 95% !important;
        height: 85vh !important
    }

    #chat-bot-toggle {
        width: 70px;
        height: 32px;
        font-size: 9px;
        left: 8px;
        bottom: 48px !important;
        background: rgba(138,43,226,.4)
    }
}

#chat-bot-header {
    background: linear-gradient(135deg,rgba(30,30,40,.95)0,rgba(50,15,80,.95) 100%);
    color: #fff;
    padding: 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(138,43,226,.2)
}

#chat-bot-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 5px;
    color: #fff
}

#chat-bot-subtitle {
    font-size: 14px;
    opacity: .8;
    color: #bbb
}

#chat-bot-messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background: rgba(15,15,20,.9)
}

.chat-message {
    margin: 15px 0;
    padding: 15px 20px;
    border-radius: 20px;
    max-width: 85%;
    word-wrap: break-word;
    line-height: 1.6;
    position: relative;
    animation: .3s ease-out messageSlideIn;
    font-size: 15px
}

.user-message {
    background: linear-gradient(135deg,rgba(138,43,226,.9)0,rgba(75,0,130,.9) 100%);
    color: #fff;
    margin-left: auto;
    margin-right: 0;
    border-bottom-right-radius: 8px;
    box-shadow: 0 4px 15px rgba(138,43,226,.3)
}

.bot-message, .chat-typing-indicator {
    background: rgba(30,30,40,.95);
    box-shadow: 0 4px 15px rgba(0,0,0,.2)
}

.bot-message {
    color: #e0e0e0;
    margin-left: 0;
    margin-right: auto;
    border-bottom-left-radius: 8px;
    border: 1px solid rgba(138,43,226,.3)
}

#chat-bot-input-container {
    display: flex;
    padding: 15px;
    background: rgba(25,25,35,.95);
    border-top: 1px solid rgba(138,43,226,.2)
}

#chat-bot-input {
    flex: 1;
    padding: 15px 20px;
    border: 1px solid rgba(138,43,226,.4);
    border-radius: 25px;
    outline: 0;
    margin-left: 10px;
    transition: .3s;
    background: rgba(40,40,50,.9);
    color: #fff;
    font-size: 14px
}

    #chat-bot-input:focus {
        border-color: #8a2be2;
        box-shadow: 0 0 0 2px rgba(138,43,226,.3);
        background: rgba(50,50,60,.9)
    }

    #chat-bot-input::placeholder {
        color: #888
    }

#chat-bot-send-btn {
    background: linear-gradient(135deg,#8a2be2 0,#639 100%);
    border: 0;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    transition: .2s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 4px 15px rgba(138,43,226,.4);
    flex-shrink: 0;
    position: relative;
    top: 3px;
    margin-top: 3px;
    overflow: visible
}

    #chat-bot-send-btn svg {
        width: 28px;
        height: 28px;
        transform: translate(-3px,2px);
        display: block;
        overflow: visible;
        transition: .2s
    }

    #chat-bot-send-btn:hover svg {
        transform: translate(3px,-2px) scale(1.1)
    }

    #chat-bot-send-btn:hover {
        transform: scale(1.05) translateY(3px);
        filter: brightness(1.15)
    }

    #chat-bot-send-btn:active {
        transform: scale(.9) translateY(3px)
    }

    #chat-bot-send-btn:disabled {
        opacity: .5;
        filter: grayscale(1);
        cursor: not-allowed
    }

.chat-typing-indicator {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-radius: 20px;
    border: 1px solid rgba(138,43,226,.3);
    width: fit-content;
    margin: 15px 0
}

.chat-typing-text {
    margin-left: 10px;
    font-size: 14px;
    color: #aaa
}

.chat-typing-dot {
    width: 8px;
    height: 8px;
    background: #8a2be2;
    border-radius: 50%;
    margin: 0 3px;
    animation: 1.4s infinite chatTyping
}

    .chat-typing-dot:nth-child(2) {
        animation-delay: .2s;
        background: #9b4dff
    }

    .chat-typing-dot:nth-child(3) {
        animation-delay: .4s;
        background: #7a1fc9
    }

#chat-bot-messages::-webkit-scrollbar {
    width: 6px
}

#chat-bot-messages::-webkit-scrollbar-track {
    background: rgba(40,40,50,.5);
    border-radius: 10px
}

#chat-bot-messages::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg,#8a2be2 0,#639 100%);
    border-radius: 10px
}

    #chat-bot-messages::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg,#9b4dff 0,#7a1fc9 100%)
    }

.chat-message-time {
    font-size: 11px;
    opacity: .6;
    margin-top: 8px;
    text-align: left;
    color: #888
}

.chat-quick-tips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    padding: 10px;
    background: rgba(30,30,40,.9);
    border-radius: 15px;
    border: 1px solid rgba(138,43,226,.2)
}

.chat-tip, .chat-welcome-message {
    border: 1px solid rgba(138,43,226,.3)
}

.chat-tip {
    background: rgba(50,50,60,.9);
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    transition: .2s;
    color: #ccc
}

    .chat-tip:hover {
        background: #8a2be2;
        color: #fff;
        border-color: #8a2be2;
        transform: translateY(-2px)
    }

.chat-welcome-message {
    background: linear-gradient(135deg,rgba(50,15,80,.9)0,rgba(30,10,50,.9) 100%);
    color: #fff;
    padding: 15px;
    border-radius: 15px;
    margin: 10px 0;
    text-align: center
}

.chat-smart-match {
    background: rgba(40,30,50,.9);
    border-left: 3px solid #8a2be2;
    padding: 10px;
    margin: 5px 0;
    border-radius: 0 10px 10px 0;
    font-size: 13px;
    cursor: pointer;
    transition: .2s;
    color: #ddd
}

    .chat-smart-match:hover {
        background: rgba(50,40,60,.95);
        transform: translateX(5px)
    }

.nav-link:active {
    transform: none !important
}

@media (max-width:768px) {
    .testimonials-track {
        display: flex !important;
        flex-direction: row-reverse !important;
        direction: ltr !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        width: 100% !important;
        padding: 20px 10px !important;
        gap: 15px !important;
        scroll-snap-type: none !important;
        -webkit-overflow-scrolling: touch !important
    }

    .testimonial-card-wide {
        min-width: 85vw !important;
        width: 85vw !important;
        flex-shrink: 0 !important;
        display: block !important;
        text-align: right !important;
        direction: rtl !important;
        background: rgba(255,255,255,.05) !important;
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 15px !important;
        margin: 0 !important;
        transform: translate3d(0,0,0)
    }

    .client-mini-info {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-end !important;
        gap: 10px !important
    }

    #discord-calculator-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 95% !important;
        max-width: 100% !important;
        margin: 50px auto 20px !important;
        padding: 40px 15px 20px !important;
        gap: 25px !important;
        height: auto !important;
        box-sizing: border-box !important
    }

        #discord-calculator-card .card-icon {
            width: 120px !important;
            height: 120px !important;
            margin-top: -90px !important;
            margin-bottom: 5px !important;
            position: relative !important;
            z-index: 10 !important;
            display: block !important;
            border-radius: 20px !important
        }

        #discord-calculator-card .card-form-section, #discord-calculator-card .card-info-section {
            width: 100% !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            text-align: center !important;
            padding: 0 !important
        }

        #discord-calculator-card h3 {
            font-size: 1.3rem !important;
            margin-bottom: 10px !important;
            line-height: 1.4 !important
        }

        #discord-calculator-card p {
            font-size: .85rem !important;
            line-height: 1.5 !important;
            margin-bottom: 15px !important
        }

    .volume-discount-badge {
        font-size: .8rem !important;
        padding: 5px 10px !important;
        margin-bottom: 10px !important
    }

    #discord-calculator-card .buy-btn, #discord-calculator-card .input-wrapper, #discord-calculator-card select, #discord-calculator-card textarea, #discord-price-display {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important
    }

    #discord-calculator-card .calculator-controls {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 15px !important
    }

    #discord-calculator-card .input-group, .quantity-selector-inline {
        display: flex !important;
        width: 100% !important;
        align-items: center !important
    }

    #discord-calculator-card .input-group {
        flex-direction: column !important
    }

    .quantity-selector-inline {
        justify-content: center !important;
        margin-top: 5px !important
    }

        .quantity-selector-inline button {
            width: 45px !important;
            height: 40px !important;
            font-size: 1.2rem !important
        }

        .quantity-selector-inline input {
            width: 70px !important;
            height: 40px !important;
            text-align: center !important;
            margin: 0 10px !important;
            font-size: 1rem !important
        }

    #discord-price-display {
        padding: 15px !important;
        border-radius: 12px !important;
        margin-top: 10px !important
    }

    #discord-calculator-card .buy-btn {
        padding: 15px !important;
        font-size: 1.1rem !important;
        height: auto !important;
        margin-top: 5px !important
    }

    #discord-calculator-card::after, #discord-calculator-card::before {
        display: none !important
    }
}

.custom-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255,255,255,.1);
    border-top: 5px solid #00c0ff;
    border-radius: 50%;
    animation: 1s linear infinite spin
}

.low-performance-mode * {
    box-shadow: none !important;
    backdrop-filter: none !important;
    transition: none !important;
    animation: none !important
}

t .low-performance-mode .glass-card {
    background: #14141e !important;
    border: 1px solid #333 !important
}

@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false
}

.glass-glow-btn {
    position: relative;
    background: rgba(255,255,255,.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    padding: 12px 30px;
    border-radius: 20px;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    transition: .3s;
    border: 1px solid rgba(255,255,255,.1);
    z-index: 1;
    overflow: hidden
}

    .glass-glow-btn::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: -1px;
        border-radius: inherit;
        padding: 1.5px;
        background: conic-gradient(from var(--angle),transparent 0,rgba(255,255,255,.8) 20%,transparent 40%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        animation: 3s linear infinite rotate-glow;
        opacity: .8
    }

    .glass-glow-btn:hover {
        background: rgba(255,255,255,.1);
        box-shadow: 0 0 20px rgba(255,255,255,.2);
        border-color: rgba(255,255,255,.3);
        transform: translateY(-2px)
    }

.mobile-fab-container {
    display: none !important
}

.scratch-badge {
    position: fixed;
    top: 20px;
    left: 20px;
    background: linear-gradient(135deg,#7c3aed,#5b21b6);
    padding: 15px 20px;
    border-radius: 16px;
    cursor: pointer;
    z-index: 9998;
    display: none;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 40px rgba(124,58,237,.5);
    border: 2px solid rgba(255,255,255,.2);
    transform: translateY(-150px);
    transition: .6s cubic-bezier(.68,-.55,.265,1.55);
    animation: 2s infinite badgePulse
}

    .scratch-badge.show {
        display: flex;
        transform: translateY(0)
    }

    .scratch-badge:hover {
        transform: translateY(0) scale(1.05);
        box-shadow: 0 15px 50px rgba(124,58,237,.6)
    }

.scratch-badge-icon {
    width: 45px;
    height: 45px;
    background: rgba(255,255,255,.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px
}

.scratch-badge-text {
    color: #fff
}

.scratch-badge-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 2px
}

.scratch-badge-sub {
    font-size: 11px;
    opacity: .8
}

.addon-check, .ds-radio-box input, .scratch-overlay {
    display: none
}

    .scratch-overlay.show {
        display: flex
    }



@media (max-width:768px) {
    .mobile-fab-container {
        display: flex !important;
        flex-direction: column;
        align-items: flex-end;
        position: fixed;
        bottom: 70px;
        right: 20px;
        z-index: 99999
    }

    .fab-main-button {
        width: 65px;
        height: 65px;
        border-radius: 50%;
        background: linear-gradient(135deg,#6200ea 0,#d500f9 100%);
        border: 2px solid rgba(255,255,255,.4);
        box-shadow: 0 0 25px rgba(213,0,249,.6),0 5px 15px rgba(0,0,0,.5);
        color: #fff;
        font-size: 26px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: .3s cubic-bezier(.68,-.55,.265,1.55);
        position: relative;
        z-index: 100
    }

        .fab-main-button:active {
            transform: scale(.9);
            box-shadow: 0 0 10px rgba(213,0,249,.8)
        }

        .fab-main-button i {
            transition: transform .4s
        }

    .fab-item, .fab-sub-menu a {
        text-decoration: none;
        transition: .2s
    }

    .mobile-fab-menu {
        position: fixed;
        bottom: 150px;
        right: 20px;
        width: 280px;
        max-height: 80vh;
        overflow-y: auto;
        background: rgba(18,10,30,.9);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255,255,255,.1);
        border-top: 1px solid rgba(213,0,249,.5);
        border-bottom: 1px solid rgba(213,0,249,.5);
        border-radius: 20px;
        padding: 12px;
        display: none;
        flex-direction: column;
        box-shadow: 0 10px 40px rgba(0,0,0,.8);
        transform-origin: bottom right;
        z-index: 99998
    }

        .mobile-fab-menu.active {
            display: flex !important;
            animation: .4s cubic-bezier(.175,.885,.32,1.275) forwards expandUp
        }

    @keyframes expandUp {
        0% {
            opacity: 0;
            transform: translateY(20px) scale(.8)
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1)
        }
    }

    .fab-item, .fab-sub-menu a {
        display: flex;
        align-items: center
    }

    .fab-item {
        justify-content: space-between;
        padding: 12px 16px;
        margin-bottom: 6px;
        color: #fff;
        background: rgba(255,255,255,.03);
        border-radius: 12px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        border: 1px solid transparent
    }

        .dropdown-trigger.active, .fab-item:hover {
            background: rgba(213,0,249,.15);
            border-color: rgba(213,0,249,.3);
            transform: translateX(-5px)
        }

        .fab-item i, .fab-item img {
            margin-left: 10px;
            width: 20px;
            text-align: center;
            color: #e0aaff;
            filter: drop-shadow(0 0 5px rgba(224,170,255,.4))
        }

        .fab-item span {
            flex-grow: 1
        }

    .arrow {
        font-size: 10px;
        color: #aaa;
        transition: transform .3s
    }

    .dropdown-trigger.active .arrow {
        transform: rotate(180deg);
        color: #d500f9
    }

    .fab-sub-menu {
        display: none;
        background: rgba(0,0,0,.3);
        border-radius: 10px;
        margin: 5px 0 10px;
        padding: 5px;
        flex-direction: column;
        gap: 4px;
        border-right: 2px solid #d500f9
    }

        .fab-sub-menu.show {
            display: flex;
            animation: .3s fadeIn
        }

    @keyframes fadeIn {
        0% {
            opacity: 0;
            transform: translateY(5px)
        }

        to {
            opacity: 1;
            transform: translateY(0)
        }
    }

    .fab-sub-menu a {
        padding: 10px 12px;
        color: #ccc;
        font-size: 13px;
        border-radius: 8px
    }

        .fab-sub-menu a:hover {
            background: rgba(255,255,255,.1);
            color: #fff;
            padding-right: 15px
        }

    .fab-sub-menu i, .fab-sub-menu img {
        width: 18px;
        margin-left: 10px;
        color: #b388ff
    }

    .ds-block-title {
        font-size: 2rem
    }

    .ds-portfolio-card {
        flex-direction: column;
        text-align: center;
        align-items: center
    }
}



.inv-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: .9rem;
    color: #444
}

    .inv-row.head {
        font-weight: 800;
        color: #000;
        margin-bottom: 10px;
        font-size: .95rem
    }

    .inv-row.total {
        font-weight: 900;
        font-size: 1.2rem;
        color: #000;
        margin-top: 8px
    }

.invoice-footer {
    margin-top: 15px;
    font-size: .75rem;
    color: #888
}

.tech-item {
    user-select: none
}

body {
    font-display: swap;
    text-rendering: optimizeSpeed
}

.is-scrolling * {
    pointer-events: none !important
}

.footer-section, .product-card, .sidebar {
    contain: paint layout
}

.related-add-to-cart-btn {
    width: 100%;
    padding: 6px 8px;
    margin-top: 8px;
    background: linear-gradient(135deg,#7c3aed 0,#6d28d9 100%);
    border: 0;
    border-radius: 6px;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: .2s
}

    .related-add-to-cart-btn:hover {
        background: linear-gradient(135deg,#8b5cf6 0,#7c3aed 100%);
        transform: translateY(-1px)
    }

    .related-add-to-cart-btn:active {
        transform: scale(.97)
    }

    .related-add-to-cart-btn i {
        font-size: 12px
    }

.related-product-img-wrapper, .related-product-name {
    cursor: pointer
}

@media (max-width:768px) {
    .related-products-grid .related-product-card {
        width: 130px
    }

    .related-add-to-cart-btn {
        font-size: 10px;
        padding: 5px 6px
    }
}

.related-products-grid {
    overflow: hidden;
    width: 100%
}

.related-scroll-wrapper {
    display: flex;
    gap: 12px;
    animation: 120s linear infinite scrollRight;
    width: max-content
}

    .related-scroll-wrapper:hover, .tech-marquee:hover, .testimonials-track:hover {
        animation-play-state: paused
    }

.related-products-grid .related-product-card {
    flex-shrink: 0;
    width: 140px
}

.glitch-effect {
    position: relative;
    color: #fff;
    font-weight: 900;
    letter-spacing: 1px
}

    .glitch-effect::after, .glitch-effect::before {
        content: attr(data-text);
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background: #0a0f1c;
        left: 2px;
        text-shadow: -2px 0#ff00c1;
        clip: rect(44px,450px,56px,0);
        animation: 5s linear infinite alternate-reverse glitch-anim
    }

    .glitch-effect::after {
        left: -2px;
        text-shadow: -2px 0#00fff9;
        animation: 5s linear infinite alternate-reverse glitch-anim2
    }

.unique-page {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.95);
    z-index: 99999;
    overflow-y: auto;
    backdrop-filter: blur(5px);
    animation: .3s fadeIn
}

.page-content {
    position: relative;
    max-width: 800px;
    width: 90%;
    margin: 50px auto;
    padding: 40px;
    background: rgba(30,30,40,.7);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px;
    box-shadow: 0 0 30px rgba(138,43,226,.1);
    color: #fff;
    text-align: right;
    direction: rtl
}

.close-page-btn {
    position: fixed;
    top: 30px;
    left: 30px;
    background: 0 0;
    border: 0;
    color: #fff;
    font-size: 45px;
    cursor: pointer;
    z-index: 100000;
    transition: .3s;
    line-height: 1
}

    .close-page-btn:hover {
        color: #ff4757;
        transform: rotate(90deg)
    }

.page-content h2 {
    color: gold;
    font-size: 2rem;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(255,255,255,.1);
    text-align: center
}

.page-content h4 {
    color: #cda1ff;
    font-size: 1.2rem;
    margin-top: 25px;
    margin-bottom: 10px
}

.page-content li, .page-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #e0e0e0;
    margin-bottom: 15px
}

.page-content ul {
    padding-right: 20px
}

.about-us-logos-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px
}

.about-us-logo {
    max-width: 150px;
    height: auto
}

.about-us-discord-logo {
    width: 50px;
    transition: transform .3s
}

    .about-us-discord-logo:hover, .pay-img-corner:hover, .portfolio-card-v2:hover img, .service-card-v2:hover .card-icon-v2, .type-card-v2:hover i {
        transform: scale(1.1)
    }

.faq-item-v2.active, .faq-item-v2:hover, .testimonial-card-wide:hover {
    border-color: var(--primary-color)
}

.pay-img-corner, .pay-img-custom {
    width: auto !important;
    cursor: pointer
}

.footer-bottom-v2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    flex-wrap: wrap;
    gap: 15px
}

.copyright-text {
    margin: 0;
    font-size: .9rem;
    color: var(--text-secondary)
}

.payment-icons-corner {
    display: flex;
    align-items: center;
    gap: 10px
}

.pay-img-corner {
    height: 25px !important;
    filter: none;
    opacity: 1;
    transition: transform .3s
}

@media (max-width:768px) {
    .related-scroll-wrapper {
        animation-duration: 90s
    }

    .related-products-grid .related-product-card {
        width: 120px
    }

    .page-content {
        padding: 20px;
        margin-top: 80px
    }

    .close-page-btn {
        top: 20px;
        left: 20px;
        font-size: 35px
    }

    .nav-actions, .nav-actions .quote-btn {
        align-items: center !important;
        display: flex !important
    }

    .nav-actions {
        position: fixed !important;
        bottom: 20px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        padding: 10px 20px !important;
        background: rgba(15,10,25,.75) !important;
        backdrop-filter: blur(15px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(15px) saturate(180%) !important;
        border: 1px solid rgba(255,255,255,.1) !important;
        border-radius: 50px !important;
        box-shadow: 0 10px 40px rgba(0,0,0,.6),inset 0 0 10px rgba(255,255,255,.05) !important;
        z-index: 999999 !important;
        width: auto !important;
        min-width: 200px !important;
        transition: .3s !important
    }

        .nav-actions .quote-btn {
            position: relative !important;
            font-size: 0 !important;
            padding: 10px 18px !important;
            border-radius: 30px !important;
            background: linear-gradient(135deg,#25d366 0,#128c7e 100%) !important;
            border: 0 !important;
            box-shadow: 0 4px 15px rgba(37,211,102,.3) !important;
            transition: transform .2s cubic-bezier(.175,.885,.32,1.275) !important
        }

            .nav-actions .quote-btn i {
                font-size: 16px !important;
                margin-left: 0 !important;
                color: #fff !important;
                text-shadow: 0 2px 4px rgba(0,0,0,.2) !important
            }

            .nav-actions .quote-btn::after {
                content: "تواصل";
                font-size: 14px !important;
                font-weight: 800 !important;
                margin-right: 6px;
                font-family: Cairo,sans-serif !important;
                color: #fff !important;
                display: inline-block !important
            }

            .nav-actions .quote-btn .online-status-dot {
                right: 6px !important;
                top: 6px !important;
                width: 8px !important;
                height: 8px !important;
                background: #0f0 !important;
                box-shadow: 0 0 10px #0f0 !important;
                animation: 1.5s infinite pulse-green !important
            }

        .nav-actions .theme-toggle-giant {
            width: 40px !important;
            height: 40px !important;
            background: rgba(255,255,255,.1) !important;
            border: 1px solid rgba(255,255,255,.2) !important;
            border-radius: 50% !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            color: gold !important
        }

    body {
        padding-bottom: 90px !important
    }

    

    .section.glass-card {
        width: auto !important;
        margin: 10px 8px !important;
        padding: 25px 12px !important;
        border-radius: 18px !important
    }

    #discord-calculator-card {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 25px !important;
        padding: 30px 15px !important
    }

    .card-form-section, .card-info-section {
        width: 100% !important;
        flex: none !important
    }

    #discord-calculator-card .card-icon {
        width: 120px !important;
        height: 120px !important;
        margin-top: -60px !important;
        margin-bottom: 5px !important
    }

    #discord-calculator-card h3 {
        font-size: 1.4rem !important
    }

    #discord-calculator-card select {
        width: 100% !important
    }

    #discord-calculator-card select, #discord-price-display, .calculator-controls, .input-wrapper {
        max-width: 100% !important;
        box-sizing: border-box !important
    }

    .calculator-controls {
        align-items: center !important
    }

    #boosting-calculator-container {
        gap: 15px !important
    }

    .rank-grid {
        grid-template-columns: repeat(auto-fill,minmax(50px,1fr)) !important
    }

    .fn-calculator, .rank-selection-area {
        flex-direction: column !important
    }

    .rank-selection-area {
        gap: 15px !important
    }

    .level-input-group {
        max-width: 100% !important;
        width: 100% !important
    }

    .fn-boosting-title, .price-value {
        font-size: 1.6rem !important
    }

    .products-container {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important
    }

    #discordDecorationsPageContainer .products-container, .wishlist-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important
    }

    .custom-order-card {
        min-height: auto !important;
        padding: 20px !important
    }

    #fn-order-btn, .buy-btn, .start-boosting-btn {
        width: 100% !important;
        padding: 14px !important
    }

    #navbar-search-results {
        width: 90vw !important;
        left: 5vw !important;
        right: 5vw !important
    }

    #discord-price-display, .input-wrapper {
        width: 100% !important;
        margin-bottom: 12px !important;
        border-radius: 12px !important
    }

    .input-wrapper {
        height: 50px !important
    }

    .calculator-controls {
        width: 100% !important;
        gap: 12px !important;
        flex-direction: column !important
    }

    .fn-calculator, .rank-grid {
        display: grid !important;
        gap: 10px !important
    }

    .rank-selector-column {
        min-width: 100% !important;
        width: 100% !important;
        padding: 15px 10px !important;
        background: rgba(255,255,255,.03) !important;
        border-radius: 15px !important
    }

    .rank-grid {
        grid-template-columns: repeat(4,1fr) !important;
        padding: 5px !important
    }

    .rank-option .rank-icon-wrapper {
        padding: 8px !important;
        border-radius: 10px !important
    }

        .rank-option .rank-icon-wrapper img {
            width: 35px !important;
            height: 35px !important
        }

    .fn-boosting-card {
        padding: 20px 12px !important
    }

    .fn-calculator {
        grid-template-columns: 1fr 1fr !important
    }

    .level-input-group label {
        font-size: .85rem !important;
        margin-bottom: 5px !important
    }

    #fn-order-btn, .buy-btn, .confirm-payment-btn, .start-boosting-btn {
        height: 55px !important;
        font-size: 1.1rem !important;
        border-radius: 14px !important;
        box-shadow: 0 5px 15px rgba(0,0,0,.3) !important;
        margin-top: 10px !important
    }

    .modal-description, p {
        font-size: .85rem !important;
        line-height: 1.6 !important;
        color: rgba(255,255,255,.8) !important;
        margin-bottom: 15px !important
    }

    #boosting-price-display, #discord-price-display, #fn-price-display {
        background: rgba(0,0,0,.4) !important;
        border: 1px solid rgba(255,255,255,.1) !important;
        padding: 12px !important;
        height: auto !important
    }
}

@media (max-width:380px) {
    .fn-calculator, .types-grid-v2 {
        grid-template-columns: 1fr !important
    }

    [style*="grid-column: span 2"] {
        grid-column: span 1 !important
    }

    .rank-grid {
        grid-template-columns: repeat(3,1fr) !important
    }

    #discord-calculator-card h3 {
        font-size: 1.2rem !important
    }
}

.tap-active {
    transform: scale(.95) !important;
    opacity: .8 !important;
    transition: transform 50ms ease-out,opacity 50ms ease-out !important
}

.category-btn, .glass-card, .product-item, .subscription-item, a, button {
    transition: transform .2s cubic-bezier(.175,.885,.32,1.275),opacity .2s !important
}

.quantity-selector button, .quantity-selector input {
    background: 0 0 !important;
    height: 100% !important;
    outline: 0 !important
}

#currency-selector {
    font-size: 10px !important;
    background: rgba(255,255,255,.05) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    color: #fff !important;
    border-radius: 4px !important;
    padding: 2px 4px !important;
    border: 1px solid var(--accent-yellow);
    background-color: transparent;
    color: var(--light-text);
    cursor: pointer;
    width: fit-content;
    margin-right: -5px !important;
    margin-top: 5px;
    transition: .3s
}

.product-action-container, .quantity-selector {
    display: flex !important;
    align-items: center !important
}

.product-action-container {
    gap: 8px !important;
    background-color: rgba(25,10,50,.7) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(139,92,246,.2) !important;
    border-radius: 10px !important;
    padding: 8px 10px 0 !important;
    width: fit-content !important;
    height: auto !important
}

.quantity-selector {
    background-color: rgba(0,0,0,.3) !important;
    border-radius: 6px !important;
    height: 36px !important;
    overflow: hidden !important;
    margin-bottom: 4px !important
}

    .add-to-cart-product-page, .quantity-selector button, .quantity-selector input {
        color: #fff !important;
        border: 0 !important;
        display: flex !important
    }

    .add-to-cart-product-page, .quantity-selector button {
        cursor: pointer !important;
        justify-content: center !important
    }

    .quantity-selector button {
        width: 32px !important;
        align-items: flex-end !important;
        padding-bottom: 0 !important;
        transition: background .2s !important;
        font-size: 0 !important
    }

#decreaseProductPageQuantity::before, #increaseProductPageQuantity::before {
    content: "−" !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    transform: translateY(6px) !important;
    line-height: 1 !important
}

#increaseProductPageQuantity::before {
    content: "+" !important;
    font-size: 1.6rem !important;
    transform: translateY(4px) !important
}

.quantity-selector button:hover {
    background-color: rgba(255,255,255,.1) !important
}

.quantity-selector input {
    text-align: center !important;
    width: 35px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    align-items: center !important
}

.add-to-cart-product-page {
    background: linear-gradient(135deg,#22c55e,#16a34a) !important;
    height: 48px !important;
    padding: 0 30px !important;
    border-radius: 12px !important;
    font-size: 1.1rem !important;
    font-weight: 900 !important;
    align-items: center !important;
    margin-bottom: 20px !important;
    box-shadow: 0 0 10px rgba(34,197,94,.5),0 10px 20px rgba(0,0,0,.4) !important;
    border-top: 1px solid rgba(255,255,255,.3) !important;
    transition: .2s cubic-bezier(.175,.885,.32,1.275) !important;
    text-shadow: 0 1px 3px rgba(0,0,0,.3);
    animation: 2s ease-in-out infinite greenPulse !important
}

    .add-to-cart-product-page:active {
        transform: scale(.92) !important;
        background: #22c55e !important
    }

.quantity-selector input::-webkit-inner-spin-button, .quantity-selector input::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important
}

@media (max-width:992px) {
    :root {
        animation: 20s linear infinite hueRotate
    }

    body {
        background: #020205 !important;
        overflow-x: hidden
    }

        body::before {
            content: "";
            position: fixed;
            inset: -50%;
            background: radial-gradient(circle at 20% 30%,rgba(142,68,173,.5)0,transparent 40%),radial-gradient(circle at 80% 70%,rgba(41,121,255,.3)0,transparent 40%),radial-gradient(circle at 50% 50%,rgba(241,196,15,.15)0,transparent 50%);
            z-index: -2;
            filter: blur(70px);
            animation: 15s ease-in-out infinite alternate lightFlow,30s linear infinite colorShift
        }

    #sec-products::before {
        content: "";
        position: absolute;
        top: -50px;
        left: 50%;
        transform: translateX(-50%);
        width: 150%;
        height: 350px;
        background: repeating-linear-gradient(45deg,rgba(255,255,255,.03)0,rgba(255,255,255,.03) 1px,transparent 1px,transparent 20px),radial-gradient(ellipse at top,var(--primary),transparent 70%);
        mask-image: linear-gradient(to bottom,#000 50%,transparent);
        z-index: 0;
        opacity: .6;
        animation: 30s linear infinite colorShift
    }

    .card {
        background: rgba(10,10,15,.75) !important;
        backdrop-filter: blur(20px) saturate(200%);
        border: 1px solid rgba(255,255,255,.1) !important;
        border-top: 1px solid var(--primary) !important;
        box-shadow: 0 20px 40px rgba(0,0,0,.8);
        animation: 30s linear infinite borderShift
    }

    .main-wrapper::after {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: radial-gradient(rgba(255,255,255,.15) 1px,transparent 1px);
        background-size: 40px 40px;
        z-index: -1;
        animation: 30s linear infinite particlesMove
    }

    @keyframes colorShift {
        0% {
            filter: hue-rotate(0deg) blur(70px)
        }

        to {
            filter: hue-rotate(360deg) blur(70px)
        }
    }

    @keyframes borderShift {
        0%,to {
            border-top-color: #8e44ad
        }

        25% {
            border-top-color: #3498db
        }

        50% {
            border-top-color: #2ecc71
        }

        75% {
            border-top-color: #f1c40f
        }
    }

    @keyframes lightFlow {
        0% {
            transform: translate(0,0) scale(1)
        }

        50% {
            transform: translate(5%,-5%) scale(1.1)
        }

        to {
            transform: translate(-5%,5%) scale(1)
        }
    }

    @keyframes particlesMove {
        0% {
            background-position: 0 0
        }

        to {
            background-position: 1000px 1000px
        }
    }

    .avatars-grid {
        display: flex !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        gap: 12px !important;
        padding: 10px 5px !important;
        scrollbar-width: none;
        -ms-overflow-style: none
    }

        .avatars-grid::-webkit-scrollbar {
            display: none
        }

        .avatars-grid img {
            flex: 0 0 65px !important;
            height: 65px !important;
            border-radius: 50%;
            border: 2px solid rgba(255,255,255,.1);
            scroll-snap-align: start;
            transition: transform .2s;
            cursor: pointer
        }

            .avatars-grid img:active {
                transform: scale(.9);
                border-color: var(--accent-yellow)
            }

    #avatar-selection-area h3 {
        margin-right: 5px !important;
        letter-spacing: .5px
    }

    .profile-actions-container {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 8px !important;
        margin-bottom: 20px !important
    }

        .profile-actions-container button {
            width: 110px !important;
            height: 38px !important;
            padding: 0 10px !important;
            font-size: .85rem !important;
            border-radius: 8px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            white-space: nowrap !important
        }

            .profile-actions-container button i {
                font-size: .9rem !important;
                margin-left: 5px !important
            }

    .confirm-payment-btn {
        background: linear-gradient(135deg,#22c55e,#16a34a) !important
    }

    .buy-btn {
        background: rgba(255,255,255,.1) !important;
        color: #eee !important;
        border: 1px solid rgba(255,255,255,.05) !important
    }
}

.price-badge, .summary-total {
    margin-top: 10px;
    font-weight: 700
}

.order-account-box, .order-account-value, .order-header p {
    font-family: Consolas,monospace
}

.chat-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
    margin-left: 8px;
    border: 2px solid #ddd;
    vertical-align: middle
}

.msg-header {
    display: flex;
    align-items: center;
    margin-bottom: 5px
}

.price-badge {
    background: rgba(255,255,255,.1);
    color: gold;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: .9rem;
    border: 1px solid rgba(255,215,0,.3);
    display: inline-block;
    box-shadow: 0 2px 5px rgba(0,0,0,.2)
}

.order-summary {
    background: rgba(0,0,0,.25);
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 20px;
    border: 1px solid rgba(255,255,255,.1)
}

.summary-row {
    display: flex;
    margin-bottom: 8px;
    color: #ddd;
    font-size: .95rem
}

.invoice-row, .summary-row, .summary-total {
    justify-content: space-between
}

.summary-total {
    border-top: 1px solid rgba(255,255,255,.15);
    padding-top: 10px;
    display: flex;
    color: #fff;
    font-size: 1.1rem
}

.total-price {
    color: #2ed573;
    text-shadow: 0 0 10px rgba(46,213,115,.3)
}

.checkout-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px
}

.btn-pay-action, .btn-whatsapp-action {
    padding: 12px;
    gap: 8px;
    color: #fff;
    cursor: pointer;
    transition: .3s;
    display: flex;
    font-weight: 700;
    flex: 1;
    border: 0;
    border-radius: 10px;
    align-items: center;
    justify-content: center
}

.btn-whatsapp-action {
    background: #25d366
}

    .btn-whatsapp-action:hover {
        background: #1ebc57;
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(37,211,102,.3)
    }

.btn-pay-action {
    background: linear-gradient(135deg,#6c5ce7 0,#a29bfe 100%)
}

    .btn-pay-action:hover {
        filter: brightness(1.1);
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(108,92,231,.4)
    }

.earn-money-trigger {
    background: linear-gradient(135deg,#7c3aed,#a855f7);
    border-radius: 16px;
    padding: 20px;
    margin: 20px auto;
    max-width: 500px;
    cursor: pointer;
    transition: .3s;
    border: 2px solid rgba(168,85,247,.5);
    box-shadow: 0 10px 30px rgba(124,58,237,.3);
    animation: 2s infinite pulse-glow
}

    .earn-money-trigger:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(124,58,237,.5)
    }

.earn-money-content {
    display: flex;
    align-items: center;
    gap: 15px
}

#discordModal, .earn-icon {
    display: flex;
    justify-content: center;
    align-items: center
}

.earn-icon {
    background: rgba(255,255,255,.2);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-size: 28px;
    color: gold
}

.earn-text {
    flex: 1;
    text-align: right
}

    .earn-text h3 {
        color: #fff;
        font-size: 22px;
        margin: 0 0 5px
    }

    .earn-text p {
        color: rgba(255,255,255,.8);
        font-size: 14px;
        margin: 0
    }

.earn-arrow {
    color: rgba(255,255,255,.7);
    font-size: 20px
}

.close-referral-btn {
    position: absolute;
    top: 15px;
    left: 15px;
    background: rgba(255,255,255,.1);
    border: 0;
    color: #999;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    transition: .3s
}

    .close-referral-btn:hover {
        background: rgba(255,0,0,.2);
        color: #fff
    }

.referral-section {
    position: relative
}

#discordModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999
}

#discordModal, #withdrawModal {
    background: rgba(0,0,0,.85)
}

.withdraw-modal-content {
    width: 90%;
    border: 1px solid rgba(124,58,237,.3)
}

    .withdraw-modal-content h3 {
        font-size: 18px;
        margin: 10px 0;
        color: #fff
    }

.invoice-box {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    margin: 15px 0;
    color: #333;
    text-align: right
}

.invoice-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 2px dashed #ddd
}

.invoice-logo {
    width: 40px;
    height: 40px;
    border-radius: 8px
}

#withdrawModal, .order-details-modal {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.invoice-title {
    font-size: 20px;
    font-weight: 700;
    color: #7c3aed
}

.invoice-details {
    margin: 15px 0
}

.invoice-row {
    display: flex;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    font-size: 14px
}

.invoice-total {
    display: flex;
    justify-content: space-between;
    padding: 15px 0 0;
    margin-top: 10px;
    border-top: 2px solid #7c3aed;
    font-size: 16px;
    font-weight: 700
}

.total-amount {
    color: #10b981;
    font-size: 20px
}

.discord-note, .withdraw-note {
    color: #a78bfa;
    font-size: 14px;
    margin: 15px 0
}

#withdrawModal, .withdraw-actions {
    display: flex;
    justify-content: center
}

.withdraw-actions {
    gap: 10px;
    margin-top: 15px
}

.cancel-withdraw-btn, .confirm-withdraw-btn {
    padding: 12px 20px;
    font-size: 14px;
    align-items: center;
    gap: 8px;
    display: flex;
    cursor: pointer
}

.confirm-withdraw-btn {
    background: linear-gradient(135deg,#10b981,#059669);
    color: #fff;
    border: 0;
    border-radius: 8px;
    font-weight: 700
}

.cancel-withdraw-btn {
    background: rgba(255,255,255,.1);
    color: #999;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 8px
}

.discord-btn, .withdraw-btn {
    font-size: 16px;
    margin-top: 15px;
    transition: .3s
}

.discord-btn {
    display: inline-flex;
    align-items: center;
    font-weight: 700
}

.success-modal .success-icon {
    font-size: 60px;
    color: #10b981;
    margin-bottom: 15px
}

#withdrawModal {
    position: fixed;
    background: rgba(0,0,0,.8);
    align-items: center;
    z-index: 9999
}

.withdraw-modal-content {
    background: #1a1a2e;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    max-width: 350px;
    position: relative
}

    .withdraw-modal-content .close-modal {
        position: absolute;
        top: 10px;
        left: 15px;
        font-size: 24px;
        cursor: pointer;
        color: #999
    }

    .withdraw-modal-content p {
        color: #ccc;
        margin: 10px 0
    }

.discord-btn, .withdraw-btn {
    color: #fff;
    border-radius: 8px
}

.discord-btn {
    gap: 10px;
    background: #5865f2;
    padding: 12px 25px;
    text-decoration: none
}

    .discord-btn:hover {
        background: #4752c4;
        transform: translateY(-2px)
    }

.withdraw-btn {
    background: linear-gradient(135deg,#28a745,#20c997);
    border: 0;
    padding: 12px 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px
}

    .withdraw-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(40,167,69,.4)
    }

    .withdraw-btn i {
        font-size: 18px
    }





#valorantCoachingContainer .product-item h3, .player-card h3 {
    font-family: "Segoe UI",Tahoma,Geneva,Verdana,sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px
}

.alert-text span {
    display: block;
    color: #b2bec3;
    font-size: .8rem;
    margin-top: 3px
}

.order-account-container {
    background: rgba(0,0,0,.3);
    border: 1px solid rgba(108,92,231,.25);
    border-radius: 14px;
    padding: 20px;
    max-height: 350px;
    overflow-y: auto
}

    .order-account-container::-webkit-scrollbar {
        width: 6px
    }

    .order-account-container::-webkit-scrollbar-thumb {
        background: #6c5ce7;
        border-radius: 10px
    }

.order-account-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
    transition: .3s
}

    .order-account-item:hover {
        padding-left: 8px;
        background: rgba(108,92,231,.05);
        border-radius: 8px
    }

    .order-account-item:last-child {
        border-bottom: none
    }

.order-account-label {
    color: #b2bec3;
    font-size: .88rem;
    display: flex;
    align-items: center;
    gap: 10px
}

    .order-account-label i {
        color: #ffeaa7;
        font-size: 1.1rem
    }

.order-account-value {
    color: #ffeaa7;
    font-size: .9rem;
    font-weight: 700
}

.order-account-full {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px
}

.order-account-box {
    width: 100%;
    background: rgba(0,0,0,.5);
    border: 1px solid rgba(253,203,110,.3);
    border-radius: 10px;
    padding: 16px;
    color: #ffeaa7;
    font-size: .85rem;
    max-height: 180px;
    overflow-y: auto;
    line-height: 1.7
}

.player-card, .tracker-btn {
    overflow: hidden;
    display: flex
}

.order-no-data {
    text-align: center;
    color: #636e72;
    padding: 40px 20px;
    font-style: italic
}

.order-total-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.25rem;
    font-weight: 700;
    padding: 22px;
    background: linear-gradient(135deg,rgba(0,184,148,.1),rgba(0,0,0,.3));
    border: 1px solid rgba(0,184,148,.3);
    border-radius: 14px;
    margin-top: auto
}

    .order-total-section span:first-child {
        color: #dfe6e9;
        font-size: 1rem
    }

    .order-total-section span:last-child {
        color: #55efc4;
        text-shadow: 0 0 12px rgba(85,239,196,.3)
    }

.order-footer {
    display: flex;
    justify-content: center;
    padding: 25px;
    border-top: 1px solid rgba(255,255,255,.05);
    background: rgba(0,0,0,.25);
    gap: 20px;
    flex-shrink: 0
}

.order-btn-discord, .order-btn-invoice, input.pp-AB69NXSVUNP78 {
    color: #fff;
    border: 0;
    font-weight: 700;
    cursor: pointer;
    transition: .3s
}

.order-btn-discord, .order-btn-invoice {
    padding: 14px 35px;
    border-radius: 12px;
    font-size: .95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none
}

#valorantCoachingContainer .product-item, .player-card {
    transition: .4s cubic-bezier(.175,.885,.32,1.275);
    position: relative
}

.order-btn-invoice {
    background: linear-gradient(135deg,#6c5ce7,#a29bfe);
    box-shadow: 0 4px 15px rgba(108,92,231,.3)
}

    .order-btn-discord:hover, .order-btn-invoice:hover {
        transform: translateY(-3px) scale(1.02);
        box-shadow: 0 10px 25px rgba(108,92,231,.5)
    }

.order-btn-discord {
    background: #5865f2;
    box-shadow: 0 4px 15px rgba(88,101,242,.3)
}

    .order-btn-discord:hover {
        box-shadow: 0 10px 25px rgba(88,101,242,.5)
    }

.team-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
    gap: 20px;
    padding: 15px;
    perspective: 1000px
}

.player-card {
    background: linear-gradient(145deg,rgba(20,25,35,.9)0,rgba(15,20,25,.95) 100%);
    border: 1px solid rgba(255,255,255,.1);
    border-right: 1px solid rgba(255,70,85,.2);
    border-radius: 4px;
    padding: 25px 15px;
    text-align: center;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
    backdrop-filter: blur(10px)
}

    .player-card::before {
        width: 100%;
        background: linear-gradient(90deg,transparent,rgba(255,70,85,.1),transparent);
        transition: .5s;
        transform: skewX(-15deg)
    }

    .player-card:hover::before {
        left: 100%
    }

    .player-card:hover {
        transform: translateY(-8px) scale(1.02);
        border-color: #ff4655;
        box-shadow: 0 0 20px rgba(255,70,85,.15),inset 0 0 15px rgba(255,70,85,.05)
    }

.agent-avatar {
    position: relative;
    margin-bottom: 15px
}

    .agent-avatar img {
        width: 75px;
        height: 75px;
        border-radius: 50%;
        border: 3px solid rgba(255,70,85,.5);
        background: #0f1923;
        object-fit: cover;
        padding: 3px;
        transition: transform .4s,border-color .4s;
        box-shadow: 0 0 15px rgba(0,0,0,.5)
    }

.player-card:hover .agent-avatar img {
    transform: scale(1.1) rotate(5deg);
    border-color: #ff4655;
    box-shadow: 0 0 25px rgba(255,70,85,.4)
}

.player-card h3 {
    font-size: 1.3rem;
    color: #fff;
    margin: 10px 0;
    text-shadow: 0 2px 4px rgba(0,0,0,.8)
}

.extra-card h3, .rank-display {
    margin-bottom: 20px;
    display: flex;
    align-items: center
}

.rank-display, .tracker-btn {
    justify-content: center;
    gap: 8px
}

.rank-display {
    background: rgba(0,0,0,.6);
    padding: 8px 15px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,.05);
    width: 90%
}

    .rank-display img {
        width: 28px;
        height: 28px;
        filter: drop-shadow(0 0 5px rgba(255,255,255,.3))
    }

    .rank-display span {
        font-size: .9rem;
        font-weight: 600;
        color: #ece8e1;
        letter-spacing: .5px
    }

.tracker-btn {
    position: relative;
    text-decoration: none;
    background: 0 0;
    color: #ff4655;
    padding: 10px 20px;
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid #ff4655;
    transition: .3s;
    width: 100%;
    align-items: center;
    z-index: 1;
    clip-path: polygon(10px 0,100%0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)
}

    .extra-card::after, .tracker-btn::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        background: #ff4655
    }

    .tracker-btn::before {
        width: 0%;
        height: 100%;
        transition: width .3s;
        z-index: -1
    }

    .tracker-btn:hover {
        color: #fff;
        border-color: #ff4655;
        text-shadow: 0 0 5px rgba(255,255,255,.5)
    }

        .tracker-btn:hover::before {
            width: 100%
        }

    .tracker-btn i {
        font-size: .9rem
    }

#valorant-boosting {
    overflow-y: auto;
    max-height: 90vh;
    text-align: center;
    direction: ltr !important
}

#boosting-cover, .boosting-summary, .extra-card, .features-list li {
    text-align: right;
    direction: rtl
}

.boosting-scroll-container {
    height: 100%;
    overflow-y: auto;
    padding-bottom: 100px;
    padding-top: 50px;
    box-sizing: border-box
}

#team-trackers-section {
    position: relative;
    z-index: 2;
    margin-bottom: 50px;
    display: block !important;
    opacity: 1 !important
}

.cover-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: top center;
    border-radius: 8px;
    margin-bottom: 15px
}

#boosting-calculator-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto
}

.extra-section-internal {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 2px dashed #333;
    width: 100%;
    direction: rtl
}

.content-divider {
    display: none
}

.extra-grid-container {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
    justify-content: center;
    direction: ltr
}

.extra-card {
    flex: 1;
    min-width: 300px;
    max-width: 550px;
    background-color: #0f1923;
    padding: 25px;
    position: relative;
    clip-path: polygon(20px 0,100%0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px);
    border-right: 4px solid #333;
    border-left: none;
    transition: .3s
}

    .extra-card:hover {
        border-right-color: #ff4655;
        background-color: #14202b;
        transform: translateY(-5px)
    }

    .extra-card::after {
        width: 20px;
        height: 20px;
        clip-path: polygon(0 0,100%0,0 100%)
    }

    .extra-card h3 {
        color: #ece8e1;
        font-size: 1.5rem;
        font-weight: 900;
        direction: rtl
    }

        .extra-card h3::before, .features-list li::before {
            content: "//";
            color: #ff4655;
            margin-left: 10px;
            font-size: 1.2rem
        }

.features-list li {
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
    color: #aebbc9;
    font-family: monospace;
    font-size: 1rem;
    display: flex;
    align-items: center
}

    .features-list li::before {
        content: "●";
        font-size: .8rem
    }

.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background: #000;
    border: 1px solid #333
}

    .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0
    }

.boosting-top-section h2 {
    direction: ltr !important
}

input.pp-AB69NXSVUNP78 {
    background-color: #27ae60;
    border-radius: 50px;
    padding: 15px 80px;
    font-size: 1.3rem;
    min-width: 280px;
    box-shadow: 0 4px 15px rgba(39,174,96,.4)
}

    input.pp-AB69NXSVUNP78:hover {
        background-color: #219150;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(39,174,96,.6)
    }

@media screen and (max-width:768px) {
    .team-grid-container {
        gap: 10px
    }

    .player-card {
        padding: 15px 5px
    }

    .agent-avatar img {
        width: 50px;
        height: 50px
    }

    .extra-grid-container {
        flex-direction: column
    }

    .extra-card {
        min-width: 100%
    }
}

.related-products-section {
    margin-top: 40px;
    padding: 20px;
    background: rgba(15,15,25,.7);
    border-radius: 16px
}

.related-title {
    font-size: 18px;
    color: #fff;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px
}

    .related-title i {
        color: #f59e0b
    }

.related-products-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 10px
}

.related-product-card {
    flex-shrink: 0;
    width: 140px;
    background: rgba(25,25,35,.95);
    border-radius: 12px;
    cursor: pointer
}

.related-product-img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 12px 12px 0 0
}

.related-product-info {
    padding: 10px
}

.related-product-name {
    font-size: 12px;
    color: #fff;
    margin: 0 0 5px
}

.related-product-price {
    font-size: 14px;
    color: #7c3aed;
    font-weight: 700;
    margin: 0
}

.coaching-grid-container {
    max-width: 1200px;
    margin: 40px auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
    padding: 10px;
    justify-content: center;
    perspective: 1000px
}

#valorantCoachingContainer .product-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    background: linear-gradient(135deg,rgba(20,20,30,.9)0,rgba(30,35,45,.8) 100%) !important;
    border: 1px solid var(--card-border) !important;
    border-right: 4px solid var(--val-red) !important;
    backdrop-filter: blur(12px);
    padding: 15px !important;
    border-radius: 6px;
    clip-path: polygon(0 0,100%0,100% 90%,95% 100%,0 100%);
    overflow: hidden;
    width: calc(50% - 8px);
    min-height: 140px;
    max-height: 160px;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(0,0,0,.3)
}

    #valorantCoachingContainer .product-item::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg,transparent,rgba(255,255,255,.03),transparent);
        transform: skewX(-20deg) translateX(-150%);
        transition: .5s;
        pointer-events: none
    }

    #valorantCoachingContainer .product-item:nth-child(3) {
        width: 100%;
        background: linear-gradient(135deg,rgba(255,70,85,.05)0,rgba(15,25,35,.9) 100%) !important;
        border-right-color: var(--val-cyan) !important
    }

    #valorantCoachingContainer .product-item:hover {
        transform: translateY(-5px) scale(1.01);
        background: rgba(40,45,60,.9) !important;
        border-color: rgba(255,255,255,.3) !important;
        border-right-width: 8px !important;
        box-shadow: 0 15px 30px rgba(0,0,0,.5),0 0 20px rgba(255,70,85,.15),inset 0 0 10px rgba(255,70,85,.05)
    }

        #valorantCoachingContainer .product-item:hover::before {
            transform: skewX(-20deg) translateX(150%)
        }

    #valorantCoachingContainer .product-item .product-image-wrapper {
        width: 90px !important;
        height: 90px !important;
        min-width: 90px;
        margin: 0 20px 0 0 !important;
        border: 1px solid rgba(255,70,85,.3) !important;
        border-radius: 4px !important;
        background: #000;
        position: relative;
        clip-path: polygon(10%0,100%0,100% 90%,90% 100%,0 100%,0 10%);
        overflow: hidden;
        flex-shrink: 0
    }

        #valorantCoachingContainer .product-item .product-image-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .5s;
            filter: grayscale(30%)
        }

    #valorantCoachingContainer .product-item:hover .product-image-wrapper img {
        transform: scale(1.15);
        filter: grayscale(0%)
    }

    #valorantCoachingContainer .product-item .product-details {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        z-index: 2
    }

    #valorantCoachingContainer .product-item h3 {
        font-size: 1.1rem !important;
        color: #fff !important;
        margin: 0;
        position: relative;
        display: inline-block
    }

    #valorantCoachingContainer .product-item .description {
        color: #a0a5b0 !important;
        font-size: .8rem;
        line-height: 1.4;
        margin-bottom: 8px;
        opacity: .8
    }

    #valorantCoachingContainer .product-item .price {
        color: var(--val-cyan) !important;
        font-size: 1.2rem !important;
        font-weight: 900;
        text-shadow: 0 0 10px rgba(0,243,255,.4);
        margin: 5px 0;
        display: flex;
        align-items: center;
        gap: 5px
    }

    #valorantCoachingContainer .product-item .buy-btn {
        width: 130px;
        height: 40px;
        background: 0 0;
        color: #fff;
        border: 1px solid var(--val-red);
        font-weight: 700;
        text-transform: uppercase;
        cursor: pointer;
        transition: .3s;
        position: relative;
        overflow: hidden;
        margin-left: auto;
        font-size: .85rem;
        letter-spacing: 1px;
        z-index: 1
    }

        #valorantCoachingContainer .product-item .buy-btn::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 0%;
            height: 100%;
            background: var(--val-red);
            z-index: -1;
            transition: .3s cubic-bezier(.77,0,.175,1);
            transform: skewX(-15deg);
            transform-origin: left
        }

        #valorantCoachingContainer .product-item .buy-btn:hover {
            border-color: transparent;
            box-shadow: 0 0 15px rgba(255,70,85,.6)
        }

            #valorantCoachingContainer .product-item .buy-btn:hover::after {
                width: 120%;
                transform: skewX(-15deg) translateX(-10%)
            }

@media (min-width:1400px) {
    .coaching-grid-container {
        max-width: 1400px
    }

    #valorantCoachingContainer .product-item {
        width: calc(33.333% - 10px)
    }

        #valorantCoachingContainer .product-item:nth-child(3) {
            width: calc(66.666% - 10px)
        }
}

@media (max-width:1200px) {
    #valorantCoachingContainer .product-item {
        width: 100%
    }
}

@media (max-width:768px) {
    .order-body {
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 20px
    }

    .order-details-content {
        height: 92vh;
        width: 100%;
        border-radius: 25px 25px 0 0;
        top: auto;
        bottom: 0;
        transform: translateY(0);
        animation: .4s cubic-bezier(.19,1,.22,1) slideUpMobile;
        border: 0;
        border-top: 1px solid rgba(108,92,231,.3)
    }

    @keyframes slideUpMobile {
        0% {
            transform: translateY(100%)
        }

        to {
            transform: translateY(0)
        }
    }

    .order-footer {
        flex-direction: column
    }

    .order-btn-discord, .order-btn-invoice {
        width: 100%
    }

    .email-alert-box {
        flex-direction: row;
        text-align: right
    }

    .coaching-grid-container {
        padding: 5px;
        gap: 10px
    }

    #valorantCoachingContainer .product-item {
        padding: 12px !important;
        min-height: 110px;
        clip-path: polygon(0 0,100%0,100% 100%,0 100%)
    }

        #valorantCoachingContainer .product-item .product-image-wrapper {
            width: 70px !important;
            height: 70px !important;
            min-width: 70px;
            margin-right: 15px !important
        }

        #valorantCoachingContainer .product-item h3 {
            font-size: 1rem !important
        }

        #valorantCoachingContainer .product-item .buy-btn {
            width: 100px;
            height: 34px;
            font-size: .75rem
        }
}

#fn-price-display, .error-message, .feature-card {
    text-align: center
}

.fn-boosting-title {
}

.feat-icon-svg {
    transition: .4s;
    margin-bottom: 10px
}

.icon-yellow {
    color: #f1c40f;
    filter: drop-shadow(0 0 8px rgba(241,196,15,.4))
}

.icon-cyan {
    color: #00f2ff;
    filter: drop-shadow(0 0 8px rgba(0,242,255,.4))
}

.icon-pink {
    color: #ff007f;
    filter: drop-shadow(0 0 8px rgba(255,0,127,.4))
}

.feature-card:hover .feat-icon-svg {
    transform: scale(1.2) rotate(5deg);
    filter: drop-shadow(0 0 15px currentColor)
}

.features-container {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    border-top: 1px solid rgba(255,255,255,.1);
    padding-top: 20px
}

.feature-icon, .feature-title {
    font-size: 24px;
    margin-bottom: 5px
}

.feature-title {
    margin-top: 10px;
    font-weight: 800;
    letter-spacing: .5px;
    font-size: 12px;
    color: var(--fn-accent)
}

.feature-desc {
    font-size: 10px;
    color: #aaa;
    line-height: 1.2
}

.fn-boosting-card {
    background: var(--fn-card);
    border: 2px solid var(--fn-primary);
    border-radius: 20px;
    width: 100%;
    max-width: 450px;
    padding: 30px;
    box-shadow: 0 0 25px rgba(142,68,173,.3);
    color: #fff
}

.fn-boosting-title {
    font-size: 24px;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 2px
}

    .fn-boosting-title span {
        color: var(--fn-accent);
        text-shadow: 0 0 10px var(--fn-accent)
    }

.fn-boosting-content h3 {
    text-align: center;
    font-size: 18px;
    margin-bottom: 20px;
    color: #ccc
}

.fn-calculator {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px
}

#fn-price-display {
    background: rgba(142,68,173,.1);
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 20px;
    border: 1px dashed var(--fn-primary)
}

.fn-user-info-form {
    background: rgba(0,0,0,.2);
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 25px
}

.form-step-title {
    font-size: 14px;
    margin-bottom: 15px;
    color: #aaa
}

.error-message {
    height: 20px
}

.detail-item h4, .payment-title, .submit-order-btn {
    text-transform: uppercase
}

#cartItemsContainer, #cartModal h2, .modal .modal-body > :last-child {
    margin-bottom: 10px !important
}

.custom-menu {
    display: none;
    position: absolute;
    z-index: 999999;
    width: 200px;
    background: rgba(15,15,25,.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
    padding: 8px 0;
    overflow: hidden;
    animation: .2s ease-out menuFadeIn
}

.menu-options {
    list-style: none;
    padding: 0;
    margin: 0
}

.menu-option {
    padding: 10px 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #e0e0e0;
    font-size: .9rem;
    transition: .2s;
    font-family: Cairo,sans-serif
}

    .menu-option i {
        width: 20px;
        text-align: center;
        color: var(--primary-color)
    }

    .menu-option:hover:not(.disabled) {
        background: rgba(255,255,255,.1);
        color: #fff;
        padding-right: 20px
    }

    .menu-option.disabled {
        cursor: default;
        color: #666;
        font-size: .8rem;
        justify-content: center
    }

.design-item, .invoice-btn-premium {
    align-items: center;
    gap: 12px;
    display: flex
}

.menu-option.disabled:hover {
    background: 0 0
}

.design-stack-section {
    padding: 35px 0;
    overflow: hidden;
    margin-bottom: 60px;
    direction: ltr;
    position: relative;
    background: rgba(0,0,0,.3);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-top: 1px solid rgba(255,255,255,.1);
    border-bottom: 1px solid rgba(255,255,255,.1);
    box-shadow: inset 0 10px 20px rgba(0,0,0,.2),0 0 15px rgba(var(--secondary-color-rgb,255,215,0),.1);
    mask-image: linear-gradient(to right,transparent,#000 20%,#000 80%,transparent);
    -webkit-mask-image: linear-gradient(to right,transparent,#000 20%,#000 80%,transparent)
}

.design-marquee {
    display: flex;
    width: max-content;
    animation: 30s linear infinite designScroll
}

    .design-marquee:hover {
        animation-play-state: paused
    }

.design-item {
    font-weight: 800;
    color: rgba(255,255,255,.6);
    font-size: 1.3rem;
    margin-right: 60px;
    white-space: nowrap;
    user-select: none;
    transition: .4s cubic-bezier(.25,1,.5,1);
    filter: grayscale(100%) opacity(.7)
}

    .design-item i {
        font-size: 2.2rem;
        transition: .4s
    }

.design-stack-section:hover .design-item {
    filter: grayscale(0%) opacity(1);
    color: #fff
}

.design-item:hover {
    transform: scale(1.15) translateY(-2px);
    color: #fff;
    text-shadow: 0 0 15px rgba(255,255,255,.5);
    filter: grayscale(0%) opacity(1) drop-shadow(0 0 10px var(--secondary-color))
}

    .design-item:hover i {
        color: var(--secondary-color);
        filter: drop-shadow(0 0 8px var(--secondary-color));
        transform: rotate(5deg)
    }

.invoice-btn-premium {
    background: linear-gradient(135deg,#1e1e26 0,#111115 100%);
    border: 1px solid rgba(255,215,0,.3);
    color: #fff;
    padding: 8px 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: .3s;
    box-shadow: 0 4px 15px rgba(0,0,0,.2);
    position: relative;
    overflow: hidden
}

    .invoice-btn-premium:hover {
        border-color: var(--gold);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(255,215,0,.1);
        background: linear-gradient(135deg,#25252e 0,#16161b 100%)
    }

.invoice-icon-wrapper {
    background: var(--gold);
    color: #000;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem
}

.invoice-btn-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2
}

    .invoice-btn-text span {
        font-size: .85rem;
        font-weight: 800;
        color: var(--gold)
    }

    .invoice-btn-text small {
        font-size: .6rem;
        color: #888;
        letter-spacing: 1px
    }

.invoice-btn-premium::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg,transparent,rgba(255,215,0,.05),transparent);
    transform: rotate(45deg);
    transition: .5s
}

.invoice-btn-premium:hover::after {
    left: 100%
}

@media only screen and (max-width:768px) {
    .service-order-form {
        margin-top: 15px !important;
        padding: 15px !important;
        background: rgba(255,255,255,.03) !important;
        border-radius: 16px !important;
        border: 1px solid rgba(255,255,255,.05) !important
    }

        .service-order-form h4 {
            font-size: 18px !important;
            margin: 0 0 20px !important;
            padding: 0 !important;
            color: #cda1ff !important;
            text-align: center !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 8px !important
        }

            .service-order-form h4 i {
                font-size: 20px !important
            }

        .service-order-form input[type=email], .service-order-form input[type=text] {
            width: 100% !important;
            padding: 14px 16px !important;
            margin-bottom: 15px !important;
            background: rgba(255,255,255,.08) !important;
            border: 1.5px solid rgba(255,255,255,.1) !important;
            border-radius: 12px !important;
            color: #fff !important;
            font-size: 15px !important;
            font-family: inherit !important;
            transition: .3s !important;
            box-sizing: border-box !important;
            -webkit-appearance: none !important;
            -moz-appearance: none !important;
            appearance: none !important
        }

        .service-order-form input:focus {
            outline: 0 !important;
            border-color: #cda1ff !important;
            background: rgba(205,161,255,.12) !important;
            box-shadow: 0 0 0 3px rgba(205,161,255,.15) !important
        }

        .service-order-form input::placeholder {
            color: rgba(255,255,255,.4) !important;
            font-size: 14px !important;
            transition: color .3s !important
        }

        .service-order-form input:focus::placeholder {
            color: rgba(205,161,255,.6) !important
        }

        .service-order-form input {
            -webkit-tap-highlight-color: transparent !important;
            -webkit-user-select: text !important;
            user-select: text !important
        }

    html {
        background-color: #050505 !important;
        background-image: linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.7)),url(https://img.freepik.com/free-vector/abstract-background-gradient-colorful-design_677411-3431.jpg?semt=ais_hybrid&w=740&q=80) !important;
        background-size: cover !important;
        background-position: center center !important;
        background-attachment: fixed !important;
        background-repeat: no-repeat !important;
        height: 100%
    }

    #dev-services-page, #my-orders-auth-page, #my-orders-page, .main-content, .page-background, .section, body, section {
        background: 0 0 !important
    }

        #my-orders-auth-page::before, #my-orders-page::before, .page-background::before, body::after, body::before {
            display: none !important;
            content: none !important;
            background: 0 0 !important
        }
}

.detail-item:first-child span, .modal-header h2 i {
    color: var(--secondary-color)
}

@media only screen and (max-width:360px) {
    .service-order-form {
        padding: 12px !important
    }

        .service-order-form h4 {
            font-size: 16px !important;
            margin-bottom: 16px !important
        }

            .service-order-form h4 i {
                font-size: 18px !important
            }

        .service-order-form input[type=email], .service-order-form input[type=text] {
            padding: 12px 14px !important;
            font-size: 14px !important;
            margin-bottom: 12px !important
        }

        .service-order-form input::placeholder {
            font-size: 13px !important
        }
}

@media screen and (max-width:768px) {
    .faq-section, .portfolio-section, .process-section, .section {
        padding: 20px 15px !important;
        width: 100% !important;
        box-sizing: border-box
    }

    .section-main-title {
        font-size: 1.8rem;
        margin-bottom: 30px;
        text-align: center
    }

    .services-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 25px
    }

    .service-card {
        background: rgba(255,255,255,.03);
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 20px;
        overflow: hidden;
        transition: transform .3s;
        box-shadow: 0 10px 30px -10px rgba(0,0,0,.5)
    }

        .service-card:active {
            transform: scale(.98)
        }

    .service-image-container {
        height: 200px;
        width: 100%;
        position: relative
    }

    .service-image {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .service-info {
        padding: 20px;
        text-align: right
    }

        .service-info h3 {
            font-size: 1.3rem;
            margin-bottom: 10px;
            color: #fff
        }

    .service-description {
        font-size: .95rem;
        line-height: 1.6;
        color: #ccc;
        margin-bottom: 20px
    }

    .service-footer {
        display: flex;
        flex-direction: column;
        gap: 15px;
        align-items: center
    }

    .service-view-btn {
        width: 100%;
        padding: 12px;
        border-radius: 12px;
        font-weight: 700;
        background: linear-gradient(45deg,#6a11cb,#2575fc);
        border: 0;
        color: #fff
    }

    .contact-method-modal, .service-modal {
        padding: 10px;
        align-items: flex-end
    }

    .contact-modal-content, .modal-content {
        width: 100%;
        max-width: 100%;
        border-radius: 25px 25px 0 0;
        max-height: 90vh;
        overflow-y: auto;
        padding: 25px 20px;
        margin-bottom: 0;
        background: #1a1a2e;
        border-top: 2px solid #cda1ff
    }

    .modal-header h2 {
        font-size: 1.4rem
    }

    .modal-preview-image {
        border-radius: 15px;
        max-height: 180px;
        object-fit: cover;
        width: 100%
    }

    .service-details-box {
        display: flex;
        justify-content: space-between;
        background: rgba(255,255,255,.05);
        padding: 15px;
        border-radius: 15px;
        margin: 20px 0
    }

    .service-order-form input {
        width: 100%;
        padding: 14px;
        margin-bottom: 15px;
        border-radius: 10px;
        background: rgba(255,255,255,.07);
        border: 1px solid rgba(255,255,255,.1);
        color: #fff;
        font-size: 1rem
    }

    .submit-order-btn {
        width: 100%;
        padding: 15px;
        font-size: 1.1rem;
        border-radius: 12px;
        background: #25d366;
        color: #fff;
        border: 0;
        font-weight: 700
    }

    .contact-method-btn i, .stat-box h3, .step-number {
        font-size: 2rem
    }

    .process-steps {
        flex-direction: column;
        gap: 30px
    }

    .step-card {
        background: rgba(255,255,255,.02);
        padding: 20px;
        border-radius: 20px;
        border-right: 4px solid #cda1ff;
        position: relative
    }

    .step-number {
        position: absolute;
        top: 15px;
        left: 15px;
        opacity: .1;
        font-weight: 700
    }

    .contact-methods-grid, .stats-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px
    }

    .stat-box {
        padding: 20px 10px;
        background: linear-gradient(135deg,rgba(255,255,255,.05)0,rgba(255,255,255,.01) 100%);
        border-radius: 15px
    }

        .stat-box h3 {
            margin: 10px 0;
            color: #cda1ff
        }

    .portfolio-header-container {
        text-align: center;
        margin-bottom: 25px
    }

    .portfolio-filters {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        gap: 10px;
        padding-bottom: 15px;
        margin-bottom: 20px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none
    }

        .portfolio-filters::-webkit-scrollbar {
            display: none
        }

    .filter-btn {
        flex: 0 0 auto;
        padding: 10px 25px;
        border-radius: 50px;
        font-size: .9rem;
        background: rgba(255,255,255,.1);
        border: 1px solid rgba(255,255,255,.1)
    }

        .filter-btn.active {
            background: #cda1ff;
            color: #000;
            font-weight: 700
        }

    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 20px
    }

    .portfolio-item {
        border-radius: 15px;
        overflow: hidden;
        position: relative;
        box-shadow: 0 5px 15px rgba(0,0,0,.3)
    }

    .portfolio-img {
        width: 100%;
        aspect-ratio: 16/9;
        object-fit: cover
    }

    .faq-item {
        margin-bottom: 15px;
        background: rgba(255,255,255,.03);
        border-radius: 12px;
        overflow: hidden
    }

    .faq-question {
        padding: 18px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: 0 0;
        border: 0;
        color: #fff;
        font-weight: 700;
        text-align: right
    }

    .faq-answer {
        padding: 0 18px 18px;
        color: #aaa;
        font-size: .9rem;
        line-height: 1.6
    }

    .contact-method-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px;
        border-radius: 15px;
        gap: 10px;
        font-size: 1rem;
        transition: .3s
    }

        .contact-method-btn.whatsapp {
            background: rgba(37,211,102,.1);
            color: #25d366;
            border: 1px solid #25d366
        }

        .contact-method-btn.instagram {
            background: rgba(193,53,132,.1);
            color: #c13584;
            border: 1px solid #c13584
        }

        .contact-method-btn.facebook {
            background: rgba(24,119,242,.1);
            color: #1877f2;
            border: 1px solid #1877f2
        }

        .contact-method-btn.discord {
            background: rgba(88,101,242,.1);
            color: #5865f2;
            border: 1px solid #5865f2
        }
}

.contact-method-modal.active, .service-modal.active {
    display: flex !important
}

.services-grid {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto
}

.service-card {
    flex: 0 1 320px;
    max-width: 350px;
    background: rgba(20,20,40,.7);
    border-radius: 15px;
    overflow: hidden;
    transition: .3s;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,.1);
    display: flex;
    flex-direction: column;
    height: auto
}

    .service-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0,0,0,.3);
        border-color: gold
    }

.service-image-container {
    position: relative;
    height: 160px;
    overflow: hidden
}

.service-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s
}

.service-card:hover .service-image {
    transform: scale(1.05)
}

.service-overlay {
    position: absolute;
    top: 15px;
    right: 15px
}

.service-badge {
    background: gold;
    color: #000;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700
}

.service-info {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column
}

    .service-info h3 {
        color: #fff;
        margin-bottom: 10px;
        font-size: 1.1rem;
        line-height: 1.4
    }

.service-description {
    color: #b0b0d0;
    font-size: .9rem;
    line-height: 1.5;
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.service-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto
}

.service-price {
    font-weight: 700;
    font-size: 1rem
}

.service-view-btn {
    background: linear-gradient(45deg,gold,#e6c200);
    color: #000;
    border: 0;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 800;
    font-size: .85rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(255,215,0,.2);
    transition: .3s
}

    .service-view-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(255,215,0,.4);
        background: linear-gradient(45deg,#fff,gold)
    }

.service-modal, .service-modal.active {
    align-items: center;
    justify-content: center
}

.service-modal {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 10px;
    overflow: hidden
}

.modal-content {
    background: linear-gradient(145deg,rgba(26,26,46,.95),rgba(22,33,62,.95));
    width: 100%;
    max-width: 550px;
    max-height: 85vh;
    border-radius: 24px;
    border: 1px solid var(--glass-border);
    box-shadow: 0 25px 50px -12px rgba(0,0,0,.5);
    margin: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transform: scale(.95);
    transition: transform .3s cubic-bezier(.34,1.56,.64,1)
}

.service-modal.active {
    animation: .3s ease-out forwards modalFadeIn
}

    .service-modal.active .modal-content {
        transform: scale(1)
    }

.modal-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg,var(--primary-color),var(--secondary-color));
    z-index: 2
}

.modal-header {
    background: rgba(255,255,255,.03);
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--glass-border)
}

.modal-close, .service-order-form input {
    background: rgba(255,255,255,.05);
    transition: .3s
}

.modal-close, .modal-header h2 {
    display: flex;
    align-items: center
}

.modal-header h2 {
    color: #fff;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    gap: 12px;
    text-shadow: 0 2px 4px rgba(0,0,0,.3)
}

    .modal-header h2 i {
        filter: drop-shadow(0 0 5px rgba(255,215,0,.4))
    }

.modal-close {
    border: 0;
    color: #a0a0c0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    justify-content: center;
    font-size: 20px;
    cursor: pointer
}

    .modal-close:hover {
        background: rgba(255,71,87,.2);
        color: #ff4757;
        transform: rotate(90deg)
    }

.modal-body {
    padding: 25px 25px 100px;
    overflow-y: auto;
    flex-grow: 1;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) transparent
}

.detail-item, .service-details-box {
    display: flex;
    align-items: center;
    position: relative
}

.service-details-box {
    background: rgba(0,0,0,.2);
    border-radius: 16px;
    padding: 20px;
    margin: 20px 0;
    border: 1px solid rgba(255,255,255,.05);
    justify-content: space-around;
    overflow: hidden
}

    .service-details-box::after {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 50%;
        height: 100%;
        background: linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);
        transform: skewX(-20deg);
        animation: 3s infinite shine
    }

.contact-method-modal.active, .service-modal[style*="display: block"], .service-modal[style*="display: flex"] {
    animation: .3s ease-out forwards smoothBackdrop
}

.detail-item {
    flex-direction: column;
    gap: 8px;
    z-index: 1
}

    .detail-item h4 {
        color: #a0a0c0;
        font-size: .85rem;
        margin: 0;
        letter-spacing: 1px
    }

    .detail-item span {
        color: #fff;
        font-weight: 800;
        font-size: 1.1rem;
        text-shadow: 0 0 10px rgba(255,255,255,.2)
    }

    .detail-item:last-child span {
        color: var(--primary-color)
    }

.service-order-form {
    background: 0 0;
    padding: 10px 0;
    margin-top: 15px;
    border: 0
}

    .service-order-form h4 {
        color: #fff;
        text-align: center;
        margin-bottom: 20px;
        font-size: 1.1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px
    }

        .service-order-form h4::after, .service-order-form h4::before {
            content: "";
            height: 1px;
            width: 30px;
            background: rgba(255,255,255,.2)
        }

    .service-order-form input {
        width: 100%;
        max-width: 400px;
        display: block;
        margin: 0 auto 20px;
        padding: 15px 20px;
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 12px;
        color: #fff;
        font-family: inherit;
        font-size: 1rem;
        text-align: center
    }

        .service-order-form input:focus {
            background: rgba(255,255,255,.1);
            border-color: var(--primary-color);
            box-shadow: 0 0 15px rgba(205,161,255,.2);
            outline: 0;
            transform: translateY(-2px)
        }

        .service-order-form input::placeholder {
            color: rgba(255,255,255,.3)
        }

.modal-form-actions {
    display: flex;
    justify-content: center;
    margin-top: 10px
}

.contact-modal-header h3, .submit-order-btn {
    display: flex;
    align-items: center;
    justify-content: center
}

.submit-order-btn {
    width: 100%;
    max-width: 400px;
    padding: 16px;
    background: linear-gradient(135deg,gold 0,#fdb931 50%,#d4af37 100%);
    color: #1a1a2e;
    border: 0;
    border-radius: 12px;
    font-weight: 900;
    font-size: 1.15rem;
    letter-spacing: .5px;
    cursor: pointer;
    gap: 12px;
    position: relative;
    overflow: hidden;
    transition: .4s cubic-bezier(.175,.885,.32,1.275);
    box-shadow: 0 4px 15px rgba(212,175,55,.3),0 0 0 1px rgba(255,215,0,.2)
}

    .submit-order-btn::before {
        content: "";
        position: absolute;
        top: 0;
        left: -150%;
        width: 50%;
        height: 100%;
        background: linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
        transform: skewX(-25deg);
        transition: none
    }

    .submit-order-btn:hover {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 10px 30px rgba(255,215,0,.4),0 0 20px rgba(212,175,55,.2);
        filter: brightness(1.1)
    }

        .submit-order-btn:hover::before {
            left: 150%;
            transition: .7s ease-in-out
        }

    .submit-order-btn i {
        font-size: 1.3rem;
        filter: drop-shadow(0 2px 2px rgba(0,0,0,.2))
    }

    .submit-order-btn:active {
        transform: translateY(-2px) scale(.98)
    }

.contact-method-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;
    background-color: rgba(0,0,0,.9);
    backdrop-filter: blur(10px);
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    overflow-y: auto
}

.contact-modal-content {
    background: #1a1a2e;
    width: 100%;
    max-width: 450px;
    border-radius: 24px;
    position: relative;
    z-index: 1;
    overflow: visible;
    box-shadow: 0 0 40px rgba(0,0,0,.5);
    margin: 0 auto 50px
}

    .contact-modal-content::before {
        content: "";
        position: absolute;
        inset: -2px;
        z-index: -1;
        background: linear-gradient(45deg,var(--primary-color,#cda1ff),var(--secondary-color,gold));
        border-radius: 26px
    }

    .contact-modal-content::after {
        content: "";
        position: absolute;
        inset: 2px;
        z-index: -1;
        background: #1a1a2e;
        border-radius: 22px
    }

.contact-modal-header {
    padding: 25px;
    text-align: center;
    position: relative
}

    .contact-modal-header h3 {
        color: #fff;
        margin: 0;
        font-size: 1.4rem;
        gap: 10px
    }

.contact-modal-close {
    position: absolute;
    top: 15px;
    left: 15px;
    background: 0 0;
    border: 0;
    color: rgba(255,255,255,.5);
    font-size: 24px;
    cursor: pointer;
    transition: .3s;
    z-index: 10
}

    .contact-modal-close:hover {
        color: #fff;
        transform: scale(1.1)
    }

.contact-modal-body {
    padding: 0 25px 30px
}

.contact-methods-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 15px;
    margin-top: 10px
}

.contact-method-btn {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 16px;
    padding: 25px 15px;
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: .3s cubic-bezier(.25,.8,.25,1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
    overflow: hidden
}

    .contact-method-btn:hover, .pay-badge:hover {
        transform: translateY(-5px);
        border-color: rgba(255,255,255,.2)
    }

    .contact-method-btn i {
        font-size: 2.2rem;
        transition: transform .3s
    }

    .contact-method-btn:hover i {
        transform: scale(1.2)
    }

    .contact-method-btn.whatsapp:hover {
        background: linear-gradient(135deg,rgba(37,211,102,.2),rgba(37,211,102,0));
        box-shadow: 0 10px 20px rgba(37,211,102,.2)
    }

    .contact-method-btn.whatsapp i {
        color: #25d366
    }

    .contact-method-btn.instagram:hover {
        background: linear-gradient(135deg,rgba(193,53,132,.2),rgba(253,29,29,0));
        box-shadow: 0 10px 20px rgba(193,53,132,.2)
    }

    .contact-method-btn.instagram i {
        background: -webkit-linear-gradient(#405de6,#5851db,#833ab4,#c13584,#e1306c,#fd1d1d);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
    }

    .contact-method-btn.facebook:hover {
        background: linear-gradient(135deg,rgba(24,119,242,.2),rgba(24,119,242,0));
        box-shadow: 0 10px 20px rgba(24,119,242,.2)
    }

    .contact-method-btn.facebook i {
        color: #1877f2
    }

    .contact-method-btn.discord:hover {
        background: linear-gradient(135deg,rgba(88,101,242,.2),rgba(88,101,242,0));
        box-shadow: 0 10px 20px rgba(88,101,242,.2)
    }

    .contact-method-btn.discord i {
        color: #5865f2
    }

@media (max-width:500px) {
    .contact-method-modal {
        padding-top: 10vh;
        padding-left: 15px;
        padding-right: 15px
    }

    .contact-modal-content {
        max-width: 100%
    }

    .contact-modal-header h3 {
        font-size: 1.2rem
    }

    .contact-method-btn {
        padding: 15px 10px;
        font-size: .9rem
    }

        .contact-method-btn i {
            font-size: 1.8rem
        }

    .contact-methods-grid {
        gap: 10px
    }
}

.payment-methods-footer {
    background: rgba(20,20,30,.95);
    border-top: 1px solid rgba(255,255,255,.05);
    padding: 15px 20px;
    text-align: center;
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 10;
    backdrop-filter: blur(10px)
}

.payment-title {
    color: #888;
    font-size: .75rem;
    margin-bottom: 10px;
    display: block;
    letter-spacing: 1px
}

.payment-icons {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap
}

.pay-badge {
    background: rgba(255,255,255,.05);
    color: #ccc;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: .7rem;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,.05);
    transition: .3s
}

    .pay-badge:hover {
        background: rgba(255,255,255,.1);
        color: #fff;
        transform: translateY(-2px)
    }

.modal .modal-body, .modal-body {
    flex-direction: column !important;
    display: flex !important
}

.modal .modal-body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding: 25px 25px 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch
}

    .modal .modal-body::-webkit-scrollbar {
        display: none !important
    }

.modal-body {
    padding-top: 15px !important
}

#cartItemsContainer::-webkit-scrollbar {
    width: 5px
}

#cartItemsContainer::-webkit-scrollbar-thumb {
    background: var(--accent-yellow);
    border-radius: 10px
}

#cartModal .modal-body {
    display: flex !important;
    flex-direction: column !important;
    padding: 1px !important;
    height: auto !important;
    max-height: 80vh !important
}

#cartModal h2 {
    margin-top: 0 !important;
    font-size: 1.3rem !important
}

#cartItemsContainer {
    flex-grow: 1 !important;
    min-height: 180px !important;
    overflow-y: auto !important;
    background: rgba(255,255,255,.02);
    border-radius: 10px
}

#cartTotalContainer {
    margin-bottom: 8px !important;
    font-size: 1rem !important
}

.modal-trust-badges {
    display: flex !important;
    justify-content: center !important;
    gap: 15px !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(255,255,255,.1)
}

.modal-preview {
    max-width: 200px;
    margin: 0 auto 15px;
    background: rgba(0,0,0,.2);
    border-radius: 10px;
    padding: 10px
}

.modal-preview-image {
    width: 100% !important;
    height: auto !important;
    max-height: 150px !important;
    object-fit: contain;
    display: block
}

.support-link-discord {
    color: #7289da;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: .3s;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    border-radius: 8px;
    background: rgba(114,137,218,.05);
    border: 1px solid rgba(114,137,218,.1)
}

    .support-link-discord:hover {
        color: #fff;
        background: rgba(114,137,218,.2);
        transform: translateY(-2px);
        border-color: rgba(114,137,218,.4)
    }

@media (max-width:600px) {
    .modal-body div[style*="justify-content: space-between"] {
        justify-content: center !important;
        text-align: center
    }
}

.order-receipt-body {
    background: 0 0 !important;
    box-shadow: none !important;
    border: 0 !important
}

#submit-rating-btn, button[onclick="submitStoreRating()"] {
    background: #27ae60 !important;
    color: #fff !important;
    transition: .3s !important
}

@media only screen and (max-width:768px) {
    .confirm-payment-btn {
        width: 100% !important;
        padding: 12px 20px !important;
        margin-top: 15px !important;
        min-height: 60px !important;
        background: linear-gradient(135deg,#2ecc71 0,#27ae60 100%) !important;
        border: 0 !important;
        border-radius: 12px !important;
        color: #fff !important;
        font-family: Cairo,sans-serif !important;
        font-size: 16px !important;
        font-weight: 800 !important;
        line-height: 1.6 !important;
        text-align: center !important;
        box-shadow: 0 4px 15px rgba(46,204,113,.4) !important;
        position: relative;
        overflow: hidden;
        animation: 2s infinite payPulse
    }

        .confirm-payment-btn:active {
            transform: scale(.96) !important;
            background: #219150 !important
        }

    @keyframes payPulse {
        0% {
            box-shadow: 0 0 0 0 rgba(46,204,113,.7)
        }

        70% {
            box-shadow: 0 0 0 10px transparent
        }

        to {
            box-shadow: 0 0 0 0 transparent
        }
    }

    #app-layout, .main-content, body, html {
        width: 100% !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        padding: 0 !important
    }

    body, html {
        max-width: 100vw !important;
        position: relative !important;
        left: 0 !important
    }

    .footer-single-divider, hr {
        width: 80% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important
    }

    a, div, h1, h2, h3, p, span {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important
    }

    #addToCartBtn {
        font-size: 13px !important
    }
}

#my-orders-auth-page, #my-orders-page {
    margin: 15px auto !important
}


.contact-method-modal.active .contact-modal-content, .service-modal[style*="display: block"] .modal-content, .service-modal[style*="display: flex"] .modal-content {
    animation: .45s cubic-bezier(.16,1,.3,1) forwards classyEntry
}

#my-orders-page {
    max-width: 815px !important
}

@media (max-width:768px) {
    .design-stack-section {
        padding: 25px 0;
        mask-image: linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);
        -webkit-mask-image: linear-gradient(to right,transparent,#000 10%,#000 90%,transparent)
    }

    .design-item {
        font-size: 1rem;
        margin-right: 35px;
        filter: grayscale(0%) opacity(1)
    }

        .design-item i {
            font-size: 1.6rem
        }

    .service-card {
        flex: 1 1 100%;
        max-width: 100%
    }

    .modal-content {
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0
    }

    .contact-methods-grid {
        grid-template-columns: 1fr
    }

    .service-details-box {
        flex-direction: column;
        gap: 15px
    }

    .payment-icons {
        gap: 8px
    }

    .pay-badge {
        font-size: .7rem;
        padding: 3px 8px
    }

    .modal-preview {
        max-width: 150px
    }

    .modal-preview-image {
        max-height: 120px !important
    }

    #my-orders-page {
        margin: 80px auto 20px !important
    }
}

.footer-link-new {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #ccc !important;
    margin: 0 8px;
    text-decoration: none;
    transition: color .3s
}

    .footer-link-new:hover {
        color: #fff !important
    }

#theme-toggle-btn {
    display: none !important
}

@media screen and (max-width:768px) {
    .footer-links {
        flex-direction: column !important;
        gap: 8px !important;
        margin-top: 5px !important;
        padding-bottom: 5px !important
    }

    .footer-single-divider {
        margin: 10px 0 !important
    }

    .footer-links > a.footer-link[href*="linktr.ee"] {
        width: auto !important;
        padding: 5px 15px !important;
        font-size: 12px !important;
        background: rgba(255,255,255,.03);
        border: 1px solid rgba(255,255,255,.05);
        border-radius: 20px
    }

    .footer-links > div {
        gap: 8px !important;
        margin: 0 !important
    }

    .footer-link-new {
        font-size: 12px !important;
        margin: 0 4px !important;
        padding: 2px !important
    }

    .footer-social-inline {
        margin-top: 5px !important;
        gap: 15px !important
    }

        .footer-social-inline i {
            font-size: 14px !important
        }

    #copyright {
        margin-top: 15px !important;
        font-size: 11px !important;
        margin-bottom: 60px !important
    }

    .footer-links > span {
        display: none !important
    }
}

button[onclick="submitStoreRating()"] {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important
}

    button[onclick="submitStoreRating()"]:hover {
        background: #219150 !important;
        transform: translateY(-2px) !important
    }

    button[onclick="submitStoreRating()"]:disabled {
        background: #555 !important;
        cursor: not-allowed !important;
        transform: none !important
    }

#submit-rating-btn {
    border: 0 !important
}

    #submit-rating-btn:hover {
        background: #219150 !important
    }

.btn-loader {
    box-sizing: border-box;
    width: 15px;
    height: 15px;
    border: 2px solid #fff;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    animation: 1s linear infinite rotation
}

#review-user-avatar {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    border: 2px solid var(--accent-yellow) !important;
    object-fit: cover !important;
    box-shadow: 0 0 10px rgba(255,215,0,.2) !important;
    display: none
}

@media screen and (max-width:767px) {
    .footer-links {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important
    }

        .footer-links > div:first-of-type {
            order: 1 !important;
            display: flex !important;
            gap: 10px !important
        }

    .footer-social-inline {
        order: 2 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important
    }

    .footer-link[href*="linktr.ee"] {
        order: 2 !important;
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        background: 0 0 !important;
        border: 0 !important;
        box-shadow: none !important
    }

        .footer-link[href*="linktr.ee"] img {
            width: 14px !important;
            height: 14px !important;
            margin-left: 3px !important
        }

        .footer-link[href*="linktr.ee"] span {
            font-size: 10px !important;
            color: rgba(255,255,255,.6) !important
        }

    .footer-links > span {
        display: none !important
    }

    .review-identity-box {
        width: 90% !important;
        gap: 8px !important
    }
}

.portfolio-icon {
    animation: 3s ease-in-out infinite floatUpDn
}

.low-spec-mode * {
    backdrop-filter: none !important;
    box-shadow: none !important;
    transition-duration: 0s !important;
    border-radius: 4px !important
}

.low-spec-mode .glass-card {
    background: #111 !important;
    border: 1px solid #333
}

.main-products-section {
    transform: translateZ(0);
    will-change: transform,opacity;
    backface-visibility: hidden
}

.animated-install-icon {
    display: inline-block;
    font-size: 26px;
    color: #00c6ff;
    animation: 3s ease-in-out infinite elegantFloatGlow
}

.pwa-install-button {
    display: none !important
}

@media (max-width:768px) {
    .pwa-install-button {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin-right: 15px !important;
        background: linear-gradient(135deg,#06f 0,#00c6ff 100%) !important;
        color: #e0f2fe !important;
        border: 1px solid rgba(255,255,255,.25) !important;
        padding: 5px 14px !important;
        border-radius: 50px !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        letter-spacing: .3px;
        cursor: pointer;
        box-shadow: 0 4px 15px rgba(0,102,255,.45);
        z-index: 1000;
        transition: transform .2s cubic-bezier(.175,.885,.32,1.275)
    }

        .pwa-install-button:active {
            transform: scale(.95)
        }

        .pwa-install-button i {
            font-size: 12px !important
        }

    .install-modal-content {
        width: 85% !important;
        max-width: 310px !important;
        padding: 20px 15px !important;
        border-radius: 24px !important
    }

    .os-tabs {
        margin-bottom: 12px !important
    }

    .step {
        padding: 10px !important;
        margin-bottom: 8px !important
    }

    .step-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important
    }

    .step p {
        font-size: 11px !important
    }
}

.install-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,.85);
    backdrop-filter: blur(10px);
    z-index: 2147483647 !important;
    display: none;
    justify-content: center !important;
    align-items: center !important;
    opacity: 0;
    transition: opacity .3s
}

    .install-modal-overlay.show {
        display: flex !important;
        opacity: 1
    }

.install-modal-content {
    background: #121212;
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 25px 50px -12px rgba(0,0,0,.9);
    position: relative;
    color: #fff;
    direction: rtl;
    text-align: center;
    margin: 0 !important;
    transform: none !important
}

.step {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    background: rgba(255,255,255,.04);
    padding: 12px;
    border-radius: 12px;
    margin-bottom: 10px;
    text-align: right;
    border: 1px solid rgba(255,255,255,.02)
}

.step-icon {
    background: #1f1f1f;
    color: #00c6ff;
    font-size: 16px;
    flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,.2)
}

.step p {
    margin: 0;
    font-size: 12px;
    color: #ddd;
    line-height: 1.5;
    flex: 1
}

.tab-btn {
    transition: .3s;
    opacity: .6;
    font-weight: 600
}

.close-modal-btn, .dropdown-dark-mode-btn {
    display: flex;
    transition: .2s;
    cursor: pointer
}

.tab-btn.active {
    opacity: 1;
    background: #06f !important;
    color: #fff !important;
    box-shadow: 0 2px 10px rgba(0,102,255,.3)
}

.close-modal-btn {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(255,255,255,.1);
    border: 0;
    color: #aaa;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 18px
}

    .close-modal-btn:hover {
        background: rgba(255,0,0,.2);
        color: #ff4d4d
    }

.dropdown-performance-toggle {
    padding: 6px 10px;
    border-bottom: none !important;
    margin-bottom: 4px
}

.dropdown-dark-mode-btn {
    width: 100%;
    background: rgba(25,25,35,.6);
    border: 1px solid rgba(124,58,237,.3);
    color: #fff;
    padding: 5px 8px;
    border-radius: 5px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: .7rem;
    font-weight: 600
}

    .dropdown-dark-mode-btn:hover {
        background: rgba(124,58,237,.8);
        border-color: rgba(124,58,237,.6);
        box-shadow: 0 2px 8px rgba(124,58,237,.4);
        transform: translateY(-1px)
    }

    .dropdown-dark-mode-btn i {
        font-size: .8rem;
        transition: transform .2s
    }

    .dropdown-dark-mode-btn:hover i {
        transform: rotate(15deg)
    }

.dropdown-content i {
    margin-left: 8px
}

.paypal-confirm-btn {
    display: block;
    width: fit-content;
    margin: 20px auto 0;
    padding: 8px 25px;
    font-size: .85rem;
    background: 0 0;
    border: 1px solid #3498db;
    color: #3498db;
    border-radius: 6px;
    cursor: pointer;
    transition: .3s
}

    .paypal-confirm-btn:hover {
        background: #3498db;
        color: #fff;
        box-shadow: 0 0 10px rgba(52,152,219,.4)
    }

.portfolio-title, .section-main-title {
    text-shadow: 0 0 10px rgba(205,161,255,.3)
}

#subscriptions-section, .section-desc, .stat-box, .step-card {
    text-align: center
}

*, .floating-button, .header, .product-card {
    -webkit-font-smoothing: antialiased
}

.dark-mode-toggle-container {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 9999;
    transition: top .4s
}

body.performance-mode .dark-mode-toggle-container {
    top: 80px
}

.dark-mode-btn {
    background: rgba(20,20,30,.9);
    border: 1px solid rgba(255,255,255,.1);
    color: #fff;
    padding: 10px 18px;
    border-radius: 25px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .9rem;
    font-weight: 600;
    transition: .3s;
    box-shadow: 0 4px 15px rgba(0,0,0,.3)
}

    .dark-mode-btn:hover {
        background: rgba(124,58,237,.8);
        border-color: rgba(124,58,237,.5);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(124,58,237,.4)
    }

    .dark-mode-btn i {
        font-size: 1.1rem
    }

#pwa-install-btn, .perf-level-3 .non-essential {
    display: none !important
}

.logo-box {
    background: rgba(0,0,0,.2);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border: 0;
    border-radius: 10px;
    padding: 8px
}

.logo-inline {
}

.process-separator {
    height: 1px;
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);
    width: 80%;
    margin: 60px auto 40px
}

.section-main-title {
    text-align: center;
    color: #fff;
    font-size: 2rem;
    margin-bottom: 10px
}

.section-desc {
    color: #a0a0c0;
    margin-bottom: 40px;
    font-size: 1rem
}

:root {
    --primary-glow: #cda1ff;
    --accent-glow: #ffd700;
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08)
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    gap: 25px;
    padding: 0 20px
}

.faq-question, .portfolio-filters, .stats-container, .step-icon {
    display: flex
}

.step-card {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    padding: 40px 25px;
    border-radius: 20px;
    position: relative;
    transition: .4s cubic-bezier(.175,.885,.32,1.275);
    overflow: hidden;
    z-index: 1
}

    .step-card:hover {
        transform: translateY(-15px);
        background: rgba(255,255,255,.07);
        border-color: var(--primary-glow);
        box-shadow: 0 15px 30px rgba(205,161,255,.15),inset 0 0 10px rgba(205,161,255,.05)
    }

    .step-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg,transparent,var(--primary-glow),transparent);
        transform: scaleX(0);
        transition: transform .4s
    }

    .step-card:hover::before {
        transform: scaleX(1)
    }

.step-number {
    position: absolute;
    top: -10px;
    right: 10px;
    font-size: 5rem;
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 2px rgba(255,255,255,.03);
    font-family: sans-serif;
    z-index: -1;
    transition: .3s
}

.faq-question, .filter-btn {
    font-family: Tajawal,sans-serif;
    cursor: pointer
}

.step-card:hover .step-number {
    -webkit-text-stroke: 2px rgba(205,161,255,.1);
    transform: scale(1.1)
}

.step-icon {
    font-size: 2.8rem;
    color: var(--primary-glow);
    margin-bottom: 25px;
    height: 80px;
    width: 80px;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    justify-content: center;
    background: rgba(205,161,255,.1);
    border-radius: 50%;
    transition: .4s
}

.step-card:hover .step-icon {
    background: var(--primary-glow);
    color: #1a1a2e;
    box-shadow: 0 0 20px rgba(205,161,255,.4);
    transform: rotateY(180deg)
}

.step-card h3 {
    color: #fff;
    margin-bottom: 15px;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .5px
}

.faq-answer p, .step-card p {
    color: #b0b0d0;
    font-size: .95rem;
    line-height: 1.7
}

.stats-section {
    margin: 40px auto;
    padding: 30px 40px;
    background: linear-gradient(135deg,rgba(20,20,35,.95)0,#0a0a14 100%);
    border-radius: 20px;
    border: 1px solid rgba(205,161,255,.15);
    box-shadow: 0 15px 35px rgba(0,0,0,.5),inset 0 0 15px rgba(205,161,255,.05);
    position: relative;
    overflow: hidden;
    max-width: 1100px
}

    .stats-section::after {
        content: "";
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle,rgba(205,161,255,.05)0,transparent 50%);
        animation: 10s linear infinite rotateGlow;
        pointer-events: none
    }

.stats-container {
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    position: relative;
    z-index: 2
}

.stat-box {
    min-width: 160px;
    padding: 10px;
    transition: .4s cubic-bezier(.175,.885,.32,1.275)
}

    .stat-box:hover {
        transform: translateY(-5px)
    }

    .stat-box i {
        font-size: 2rem;
        color: gold;
        margin-bottom: 8px;
        filter: drop-shadow(0 0 8px rgba(255,215,0,.3));
        transition: .3s
    }

    .stat-box h3 {
        font-size: 2.5rem;
        font-weight: 900;
        color: #fff;
        margin: 0;
        font-family: Cairo,sans-serif;
        background: linear-gradient(to bottom,#fff 40%,#ccc 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        line-height: 1
    }

    .stat-box span {
        color: rgba(205,161,255,.8);
        font-size: .85rem;
        font-weight: 700;
        margin-top: 5px;
        display: block;
        letter-spacing: 2px;
        text-transform: uppercase
    }

@media (min-width:768px) {
    .stat-box:not(:last-child) {
        border-right: 1px solid rgba(255,255,255,.05)
    }
}

.faq-container {
    max-width: 800px;
    margin: 0 auto 60px;
    padding: 0 20px
}

.faq-item {
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255,255,255,.05)
}

.faq-question {
    width: 100%;
    background: rgba(255,255,255,.03);
    border: 0;
    padding: 15px 20px;
    text-align: right;
    color: #fff;
    font-size: 1rem;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px;
    transition: .3s
}

    .faq-question:hover {
        background: rgba(255,255,255,.08)
    }

    .faq-question.active {
        background: rgba(106,17,203,.2);
        color: #cda1ff
    }

    .faq-question i {
        transition: transform .3s
    }

    .faq-question.active i {
        transform: rotate(180deg)
    }

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease-out;
    background: rgba(0,0,0,.2);
    border-radius: 0 0 8px 8px
}

    .faq-answer p {
        padding: 15px 20px;
        color: #a0a0c0;
        line-height: 1.6;
        margin: 0
    }

.portfolio-title {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    margin: 0
}

.portfolio-icon {
    width: 32px;
    height: 32px;
    color: #cda1ff;
    filter: drop-shadow(0 0 5px rgba(205,161,255,.5))
}

.portfolio-header-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 25px;
    margin-top: 60px
}

.portfolio-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    transition: transform .5s
}

.portfolio-filters {
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
    flex-wrap: wrap
}

.filter-btn {
    padding: 8px 20px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 50px;
    color: #fff;
    transition: .3s;
    font-size: 14px
}

    .filter-btn:hover {
        background: rgba(255,255,255,.15);
        transform: translateY(-2px)
    }

    .filter-btn.active {
        background: #cda1ff;
        color: #1a1a2e;
        font-weight: 700;
        border-color: #cda1ff;
        box-shadow: 0 0 15px rgba(205,161,255,.4)
    }

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
    gap: 20px;
    grid-auto-flow: dense;
    min-height: 300px
}

.main-ad-banner, .portfolio-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px
}

.portfolio-item {
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,.3);
    border: 1px solid rgba(255,255,255,.05);
    transition: .4s;
    opacity: 1;
    transform: scale(1);
    aspect-ratio: 4/3
}

    .portfolio-item:hover .portfolio-img {
        transform: scale(1.1)
    }

    .portfolio-item.hide {
        display: none
    }

    .portfolio-item[data-category=reels] {
        grid-row: span 2;
        aspect-ratio: 9/16
    }

.main-ad-banner {
    width: 100%;
    aspect-ratio: 16/9;
    background: #0f172a;
    box-shadow: 0 10px 30px rgba(0,0,0,.4)
}

.ad-link-wrapper {
    display: block;
    width: 100%;
    height: 100%
}

.skeleton-loader, .slide-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.slide-item {
    will-change: transform
}

.skeleton-loader {
    background-color: #1a1a2e;
    z-index: 1;
    background-image: linear-gradient(110deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.05) 40%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.05) 60%,rgba(255,255,255,0) 70%);
    background-size: 200% 100%;
    animation: 1.5s linear infinite shimmer;
    display: flex;
    align-items: center;
    justify-content: center
}

    .skeleton-loader::after {
        content: "";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 2rem;
        color: rgba(255,255,255,.1);
        animation: 1.5s ease-in-out infinite pulse-icon
    }

.hero-ad-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    position: relative;
    z-index: 2
}

#xbox-gifting-section .calculator-card:hover .animated-border-box-glow, .img-loaded, .perf-level-2 img.loaded, .perf-level-3 img.loaded {
    opacity: 1
}

.current-pos {
    transform: translateX(0);
    z-index: 2
}

.next-pos {
    transform: translateX(100%);
    z-index: 2
}

.animate-move {
    transition: transform .8s cubic-bezier(.4,0,.2,1)
}

.move-left {
    transform: translateX(-100%) !important
}

.move-center {
    transform: translateX(0) !important
}

.ad-link-wrapper {
    position: relative;
    overflow: hidden !important;
    border-radius: 12px;
    z-index: 10;
    will-change: transform,filter,box-shadow;
    transition: box-shadow .3s ease-out
}

.scroll-optimized, body {
    -webkit-overflow-scrolling: touch
}

.ad-link-wrapper::after, .ad-link-wrapper::before {
    content: "";
    position: absolute;
    pointer-events: none;
    opacity: 0
}

.ad-link-wrapper::after {
    inset: 0;
    z-index: 20;
    box-shadow: inset 0 0 25px #00fff2,inset 0 0 10px #f0f;
    background: radial-gradient(circle at center,rgba(255,255,255,.4)0,transparent 75%);
    mix-blend-mode: screen;
    transition: opacity .3s ease-out
}

.ad-link-wrapper::before {
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    z-index: 15;
    background: linear-gradient(to right,rgba(255,255,255,0)0,rgba(255,255,255,.4) 50%,rgba(255,255,255,0) 100%);
    transform: skewX(-20deg);
    transition: opacity .5s
}

.ad-link-wrapper:hover {
    box-shadow: 0 0 15px rgba(0,255,242,.5)
}

    .ad-link-wrapper:hover::before {
        opacity: 1;
        animation: 2.5s linear infinite shine-sweep
    }

.ad-link-wrapper:active::after {
    opacity: 1;
    transition: opacity 50ms ease-in
}

.ad-link-wrapper:active .hero-ad-img {
    transform: scale(1.08);
    filter: brightness(1.2) contrast(1.1);
    transition: transform .1s cubic-bezier(.2,.8,.2,1),filter .1s ease-out
}

.hero-ad-img {
    transition: transform .3s ease-out,filter .3s ease-out
}

.section-header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    flex-wrap: wrap;
    gap: 10px
}

.work-status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0,0,0,.6);
    padding: 6px 12px;
    border-radius: 20px;
    border: 0;
    box-shadow: 0 4px 6px rgba(0,0,0,.3)
}

.status-text {
    font-family: Cairo,sans-serif;
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    text-shadow: 1px 1px 2px #000
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block
}

.pulse-green {
    background-color: #0f8;
    box-shadow: 0 0 0 0 rgba(0,255,136,.7);
    animation: 2s infinite pulse-green
}

.pulse-red {
    background-color: #f33;
    box-shadow: 0 0 0 0 rgba(255,51,51,.7);
    animation: 2s infinite pulse-red
}

@media (max-width:600px) {
    .section-header-wrapper {
        flex-direction: row
    }

    .status-text {
        font-size: .75rem
    }

    .work-status-indicator {
        padding: 6px 10px
    }
}

@media screen and (max-width:767px) {
    .section.glass-card {
        background: rgba(255,255,255,.03);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 20px;
        padding: 1.2rem;
        box-shadow: 0 8px 32px 0 rgba(0,0,0,.37);
        margin-top: 80px !important;
        position: relative;
        overflow: visible;
        width: 95% !important;
        margin-left: auto !important;
        margin-right: auto !important
    }

    .edit-profile-trigger-corner {
        position: absolute;
        top: 15px;
        right: 15px;
        z-index: 99;
        background: rgba(255,255,255,.15);
        width: 35px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        cursor: pointer;
        border: 1px solid rgba(255,255,255,.2)
    }

    .profile-avatar-large {
        width: 125px !important;
        height: 125px !important;
        border-radius: 50%;
        border: 3px solid var(--accent-yellow);
        object-fit: cover;
        margin-bottom: 1rem;
        box-shadow: 0 0 15px rgba(0,0,0,.5)
    }

    .profile-header-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding-top: 5px;
        padding-bottom: 1rem;
        border-bottom: 1px solid rgba(255,255,255,.1)
    }

    #header-display-name {
        font-size: 1.6rem;
        color: #fff;
        margin: 5px 0
    }

    .stats-grid-modern {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: .8rem;
        margin: 1rem 0
    }

    .stat-box-modern {
        background: rgba(255,255,255,.05);
        padding: .8rem;
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,.08)
    }

    .avatars-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fill,minmax(70px,1fr)) !important;
        gap: 12px !important;
        max-height: 250px !important;
        overflow-y: auto !important;
        padding: 10px !important;
        background: rgba(0,0,0,.2) !important;
        border-radius: 12px !important;
        border: 1px solid rgba(255,255,255,.05) !important
    }

        .avatars-grid::-webkit-scrollbar {
            width: 5px
        }

        .avatars-grid::-webkit-scrollbar-track {
            background: rgba(255,255,255,.05)
        }

        .avatars-grid::-webkit-scrollbar-thumb {
            background: var(--accent-yellow);
            border-radius: 10px
        }

    .name-input-group-centered {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 15px !important;
        width: 100% !important;
        margin: 0 auto 20px !important;
        padding: 0 !important
    }

        .name-input-group-centered > div:last-child {
            margin-left: 0 !important;
            width: 100% !important;
            display: flex !important;
            justify-content: center !important
        }

    .input-wrapper#name-input-wrapper-center {
        width: 90% !important;
        max-width: 280px !important;
        margin: 0 auto !important
    }

    .change-avatar-btn-styled {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin: 10px auto !important;
        width: fit-content !important;
        padding: 10px 20px !important;
        white-space: nowrap
    }

    .name-input-group-centered h3 {
        margin: 0 !important;
        text-align: center !important;
        width: 100% !important;
        font-size: 14px
    }

    .unique-page h2, .unique-page h4 {
        color: var(--accent-yellow) !important
    }

    #pages-container {
        padding: 10px !important
    }

    .unique-page {
        padding: 60px 15px 20px !important;
        overflow-y: auto !important
    }

        .unique-page .page-content.glass-card {
            width: 100% !important;
            max-width: 100% !important;
            margin: 0 auto !important;
            padding: 20px 15px !important;
            border-radius: 15px !important;
            background: rgba(15,15,25,.9) !important
        }

    .about-us-logos-container, .close-page-btn {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important
    }

    .close-page-btn {
        position: fixed !important;
        top: 20px !important;
        right: 20px !important;
        left: auto !important;
        width: 40px !important;
        height: 40px !important;
        background: rgba(255,255,255,.1) !important;
        backdrop-filter: blur(5px) !important;
        border-radius: 50% !important;
        font-size: 24px !important;
        z-index: 9999 !important;
        color: #fff !important;
        border: 1px solid rgba(255,255,255,.2) !important
    }

    .unique-page h2 {
        font-size: 1.4rem !important;
        margin-bottom: 15px !important;
        text-align: center !important
    }

    .unique-page h4 {
        font-size: 1rem !important;
        margin-top: 20px !important
    }

    .unique-page li, .unique-page p {
        font-size: 13px !important;
        line-height: 1.6 !important;
        text-align: right !important;
        color: rgba(255,255,255,.8) !important
    }

    .about-us-logos-container {
        flex-direction: row !important;
        gap: 20px !important;
        margin-bottom: 20px !important
    }

    .about-us-logo {
        width: 60px !important;
        height: auto !important
    }

    .about-us-discord-logo {
        width: 50px !important;
        height: auto !important
    }

    .unique-page ul {
        padding-right: 20px !important;
        margin-top: 10px !important
    }

    .unique-page li {
        margin-bottom: 10px !important
    }

    .header-inline-container {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        margin-bottom: 15px !important;
        padding: 0 10px !important
    }

    .glow-text-rtl {
        font-size: 1.5rem !important;
        white-space: nowrap !important;
        letter-spacing: 0 !important
    }

    p.glow-text-rtl {
        font-size: .9rem !important;
        margin-top: 5px !important;
        margin-bottom: 20px !important;
        line-height: 1.4 !important;
        color: rgba(255,255,255,.7) !important;
        padding: 0 15px !important
    }
}

.logo-inline {
}

#feedback-message .success-box, .logo-box {
    display: flex !important;
    align-items: center !important
}

.logo-box {
    width: 40px !important;
    height: 40px !important;
    justify-content: center !important
}

#rating-name {
    margin-top: 30px !important
}

.success-box {
    margin-top: 15px;
    background: rgba(46,204,113,.2);
    border: 1px solid #2ecc71;
    border-radius: 8px;
    padding: 10px;
    color: #2ecc71;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    animation: .5s fadeIn
}

.error-message, .warning-message {
    font-size: 13px;
    margin-top: 10px;
    font-weight: 700
}

.perf-level-2 *, .perf-level-3 *, body.perf-lvl-2 * {
    animation: none !important
}

.error-message {
    color: #ff4757
}

.warning-message {
    color: #ff9f43
}

#feedback-message {
    margin-top: 15px !important;
    display: flex !important;
    justify-content: center !important;
    min-height: 20px !important
}

    #feedback-message .success-box {
        padding: 8px 20px !important;
        width: fit-content !important;
        border-radius: 50px !important;
        background: rgba(46,204,113,.15) !important;
        border: 1px solid #2ecc71 !important;
        backdrop-filter: blur(5px) !important;
        color: #2ecc71 !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        gap: 8px !important;
        box-shadow: 0 0 15px rgba(46,204,113,.3) !important;
        animation: .5s cubic-bezier(.68,-.55,.265,1.55) forwards popIn !important;
        transform-origin: center center
    }

        #feedback-message .success-box i {
            font-size: 16px !important;
            animation: .6s ease-out .2s backwards spinCheck !important
        }

.product-image-wrapper .stock-badge {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 10;
    background: rgba(0,0,0,.6) !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
    backdrop-filter: blur(2px)
}

.stock-badge.stock-high {
    color: #4ade80
}

.stock-badge.stock-low {
    color: #fbbf24
}

.stock-badge.stock-out {
    color: #f87171
}

* {
    -webkit-tap-highlight-color: transparent !important;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges
}

@media (pointer:coarse) or (max-width:768px) {
    .buy-btn, .dev-service-card, .product-item, .rental-card, .service-offer-card, .subscription-item, .type-card, a, button {
        transform: none !important;
        box-shadow: none !important;
        transition: none !important;
        filter: none !important
    }

        #user-dropdown-menu, #user-dropdown-menu a.nav-link, #user-dropdown-menu div, .dev-service-card:active, .dev-service-card:hover, .product-item:active, .product-item:hover, .service-offer-card:active, .service-offer-card:hover, .subscription-item:active, .subscription-item:hover, button:active, button:hover {
            transform: none !important;
            box-shadow: none !important;
            transition: none !important
        }

            #user-dropdown-menu, #user-dropdown-menu a.nav-link, #user-dropdown-menu div {
                filter: none !important
            }

                #user-dropdown-menu a.nav-link:active, #user-dropdown-menu a.nav-link:hover, #user-dropdown-menu div:active, #user-dropdown-menu div:hover {
                    transform: none !important;
                    background-color: rgba(255,255,255,.05) !important;
                    transition: none !important
                }

                #user-dropdown-menu div[onclick*=openProfileSettings] {
                    transition: none !important
                }
}

.floating-button, .header, .product-card, .product-item, .service-offer-card, .testimonial-card-wide {
    transform: translateZ(0);
    will-change: transform,opacity;
    backface-visibility: hidden
}

#submit-rating-btn {
    padding-left: 33px !important;
    padding-right: 33px !important;
    margin-top: 15px !important;
    width: auto !important;
    display: inline-block !important
}

.product-action-container {
    flex-direction: row;
    margin-top: 25px
}

.quantity-selector {
    flex-shrink: 0
}

html {
    overscroll-behavior-y: none;
    scroll-behavior: smooth
}

#xbox-gifting-section .calculator-card, #xbox-gifting-section .category-card, #xbox-gifting-section .product-item {
    box-shadow: none !important;
    border: 1px solid rgba(255,255,255,.05) !important;
    background: rgba(20,20,25,.6) !important;
    transform: translateY(0);
    transition: .3s cubic-bezier(.25,.8,.25,1)
}

    #xbox-gifting-section .calculator-card:hover, #xbox-gifting-section .category-card:hover, #xbox-gifting-section .product-item:hover {
        box-shadow: 0 0 20px rgba(16,229,16,.4),0 0 40px rgba(16,229,16,.1) !important;
        border-color: rgba(16,229,16,.5) !important;
        transform: translateY(-5px);
        background: rgba(20,20,25,.9) !important
    }

#xbox-gifting-section .animated-border-box, #xbox-gifting-section .animated-border-box-glow, .perf-level-2 img:not(.essential), .perf-level-3 img:not(.essential) {
    opacity: 0;
    transition: opacity .3s
}

.disable-hover, .disable-hover * {
    pointer-events: none !important
}

body.perf-lvl-1 * {
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    text-shadow: none !important
}

body.perf-lvl-2 * {
    transition: none !important
}

body.perf-lvl-3 *, body.perf-lvl-3 ::before {
    background-attachment: scroll !important
}

body[class*=perf-lvl-] iframe, body[class*=perf-lvl-] img, body[class*=perf-lvl-] video {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important
}

body[class*=perf-lvl-] [id^=gifting-ad-img] {
    display: block !important
}

body[class*=perf-lvl-] img:not([src]), body[class*=perf-lvl-] img[src=""] {
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important
}

body[class*=perf-lvl-] .modal-backdrop, body[class*=perf-lvl-] .modal-overlay {
    background-color: rgba(0,0,0,.85) !important;
    opacity: 1 !important
}

body[class*=perf-lvl-] [id^=gifting-ad-container] > div:not(img) {
    background-image: none !important;
    background-color: transparent !important
}

.perf-level-1 [style*=animation], .perf-level-1 [style*=transition] {
    animation-duration: .5s !important;
    transition-duration: .3s !important
}

.perf-level-2 * {
    transition: opacity .3s !important
}

.perf-level-3 * {
    transition: none !important;
    filter: none !important;
    transform: none !important;
    box-shadow: none !important;
    text-shadow: none !important
}

.perf-level-1, .perf-level-2, .perf-level-3 {
    scroll-behavior: auto !important
}

body {
    overflow-x: hidden
}

img {
    max-width: 100%;
    height: auto;
    display: block
}

@media (prefers-reduced-motion:no-preference) {
    .smooth-transition {
        transition: .3s cubic-bezier(.4,0,.2,1);
        will-change: transform,opacity
    }
}

.scroll-optimized {
    scroll-behavior: smooth;
    overscroll-behavior: contain
}

.gpu-accelerated {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
    will-change: transform
}

.animate-on-scroll {
    animation: .5s cubic-bezier(.4,0,.2,1) both smoothFadeIn
}

.section-loading {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,rgba(255,255,255,.05)0,rgba(255,255,255,.02) 100%);
    border-radius: 12px;
    margin: 20px 0
}

.section-content {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .3s,transform .3s
}

.section-loaded .section-content {
    opacity: 1;
    transform: translateY(0)
}

.perf-indicator {
    position: fixed;
    bottom: 10px;
    right: 10px;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 12px;
    font-family: monospace;
    z-index: 9999;
    background: rgba(0,0,0,.8);
    color: #4caf50;
    border: 1px solid currentColor
}

    .perf-indicator.low {
        color: #ff9800
    }

    .perf-indicator.critical {
        color: #f44336
    }

.touch-optimized {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none
}

    .touch-optimized:active {
        opacity: .8
    }

[data-loading=true] {
    position: relative;
    overflow: hidden
}

    [data-loading=true]::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg,transparent 0,rgba(255,255,255,.1) 50%,transparent 100%);
        animation: 1.5s infinite loadingShimmer
    }

@media screen and (max-width:768px) {
    #softwareKeysContainer {
        display: grid !important;
        grid-template-columns: repeat(2,1fr) !important;
        gap: 20px !important;
        padding: 15px 15px 15px 19px !important
    }

    .software-card-unique {
        width: auto !important;
        margin: 0 !important;
        padding: 10px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        height: 100% !important
    }

        .software-card-unique img {
            height: 90px !important;
            width: 100% !important;
            object-fit: contain !important;
            margin-bottom: 8px !important
        }

        .software-card-unique h3 {
            font-size: 13px !important;
            margin: 5px 0 !important;
            text-align: center !important
        }

        .animated-border-box, .animated-border-box-glow, .fixed-cart-button, .floating-circle, .software-card-unique p, .testimonial-card-wide:nth-child(n+4) {
            display: none !important
        }

    .software-price {
        font-size: 15px !important;
        margin: 5px 0 10px !important;
        text-align: center !important
    }

    .software-card-unique .buy-btn {
        padding: 8px 5px !important;
        font-size: 12px !important;
        width: 100% !important
    }

    .buy-btn {
        background: #28a745 !important;
        color: #fff !important;
        border: 1px solid #28a745 !important;
        padding: 5px 15px !important;
        font-size: 13px !important;
        height: auto !important;
        min-height: 30px !important;
        line-height: normal !important
    }

    *, ::after, ::before {
        box-shadow: none !important;
        text-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
        transition: none !important
    }

    .glass-card, .glass-card.darker, .main-products-section, .testimonial-card-wide {
        background: #111 !important;
        border: 1px solid #333 !important;
        border-radius: 8px !important
    }

    .animated-border-box, .animated-border-box-glow, .floating-circle, .glow-text-rtl, .pulsing-dot-green {
        animation: none !important;
        opacity: 1 !important
    }

    img {
        content-visibility: auto;
        image-rendering: optimizeSpeed
    }

    a, h1, h2, h3, h4, p, span {
        background: 0 0 !important;
        -webkit-text-fill-color: initial !important;
        color: #eee !important
    }

    .highlight-text, .price-pop {
        color: gold !important
    }

    .testimonials-track {
        animation: none !important;
        display: flex;
        flex-direction: column;
        gap: 15px;
        overflow: visible
    }

    .discord-button, button {
        border: 1px solid #444 !important;
        transform: none !important
    }
}

.my-orders-btn-simple {
    background-color: var(--accent-yellow) !important;
    color: #000 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 28px !important;
    border-radius: 50px !important;
    border: 0 !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    height: 48px !important;
    margin-top: 15px !important;
    cursor: pointer !important;
    transition: transform .2s !important
}

    .my-orders-btn-simple i, .my-orders-btn-simple span {
        color: #000 !important
    }

@media (max-width:768px) {
    .dark-mode-toggle-container {
        top: 70px;
        left: 10px
    }

    .dark-mode-btn {
        padding: 8px 14px;
        font-size: .85rem
    }

        .dark-mode-btn span {
            display: none
        }

        .dark-mode-btn i {
            margin: 0
        }

    #pwa-install-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 4px;
        background: linear-gradient(45deg,#06f,#00d4ff);
        color: #fff;
        border: 0;
        border-radius: 50px;
        cursor: pointer;
        box-shadow: 0 0 8px rgba(0,212,255,.4);
        padding: 4px 10px;
        font-size: 10px;
        font-weight: 700;
        height: 26px;
        margin-right: 29px;
        margin-left: 5px
    }

        #pwa-install-btn i {
            font-size: 11px
        }

    .nav-actions {
        position: static !important;
        transform: none !important;
        bottom: auto !important;
        left: auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 0 !important;
        background: 0 0 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: 0 !important;
        box-shadow: none !important;
        width: auto !important;
        min-width: auto !important
    }

        .nav-actions .quote-btn {
            padding: 6px 12px !important;
            font-size: 11px !important;
            height: 35px !important;
            box-shadow: none !important
        }

            .nav-actions .quote-btn::after {
                content: "تواصل" !important;
                font-size: 11px !important;
                margin-right: 5px !important;
                display: inline-block !important
            }

        .nav-actions .theme-toggle-giant {
            width: 35px !important;
            height: 35px !important;
            background: 0 0 !important;
            border: 1px solid rgba(255,255,255,.2) !important
        }

    

    .nav-store-logo {
        height: 35px !important;
        margin-left: 5px !important
    }

    .main-ad-banner {
        aspect-ratio: 4/3
    }

    #gameRentalsContainer, #gamesContainer, #servicesContainer, #steamGiftCardsHomeContainer, #steamPointsContainer {
        transform: translateX(13px)
    }

    #gamesContainer {
        padding-left: 17px;
        box-sizing: border-box
    }

    #homeSoftwareSubscriptionsContainer, #homeTvSubscriptionsContainer {
        padding-left: 20px;
        transform: translateX(16px)
    }

    #gameTopupContainer {
        padding-left: 20px;
        transform: translateX(14px)
    }

    #gameRentalsContainer {
        padding-left: 20px
    }

    #offline-steam-section .category-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 15px !important
    }

    #offline-steam-section h2 {
        text-align: center !important;
        width: 100%;
        margin-bottom: 5px
    }

    #offline-steam-section button[onclick*=showModal] {
        width: 100% !important;
        justify-content: center !important;
        padding: 10px !important
    }

    #offline-steam-section .category-search-container {
        width: 100% !important;
        display: flex
    }

    #offlineSearchInput {
        width: 100% !important
    }

    #offlineSteamContainer {
        transform: translateX(15px);
        width: calc(100% - 15px)
    }

    #offline-steam-section .load-more-container {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 20px
    }

    #loadMoreOfflineGamesBtn {
        width: 90%;
        padding: 12px 20px;
        font-size: 16px;
        border-radius: 12px
    }

    #offline-preview-box {
        display: none !important
    }

    body, html {
        overflow-y: auto !important;
        height: auto !important
    }

    #mobile-nav {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 60px !important;
        z-index: 999999 !important;
        transform: translate3d(0,0,0) !important;
        -webkit-transform: translate3d(0,0,0) !important;
        background: linear-gradient(145deg,#1d1033,#0b0714) !important;
        border-top: 1px solid rgba(255,255,255,.1) !important
    }

    body {
        padding-bottom: 80px !important
    }

    .my-orders-btn-simple {
        width: 100% !important;
        max-width: 320px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: flex !important
    }
}

.ai-card {
    border: 1px solid rgba(0,242,255,.3);
    background: linear-gradient(145deg,rgba(0,242,255,.05),rgba(0,0,0,.2));
    transition: all .3s ease
}

    .ai-card .icon-wrapper i {
        color: #00f2ff;
        text-shadow: 0 0 10px rgba(0,242,255,.5)
    }

    .ai-card:hover {
        border-color: #00f2ff;
        box-shadow: 0 0 20px rgba(0,242,255,.2);
        transform: translateY(-2px)
    }

    .ai-card .action-icon {
        color: #fff;
        background: rgba(0,242,255,.2);
        border-radius: 50%;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center
    }

.cosmic-rank-badge {
    background: linear-gradient(120deg,rgba(0,85,255,.25),rgba(120,0,255,.25),rgba(0,180,255,.15));
    background-size: 200% 200%;
    animation: cosmicFlow 5s ease infinite alternate;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff !important;
    text-shadow: 0 2px 5px rgba(0,0,0,.3);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    box-shadow: 0 5px 15px rgba(80,0,255,.15),inset 0 0 10px rgba(255,255,255,.05);
    transition: all .3s ease
}

.profile-halo-container {
    position: relative;
    padding: 2px;
    border-radius: 50%;
    background: linear-gradient(135deg,#00c6ff,#9d00ff);
    box-shadow: 0 0 10px rgba(100,0,255,.3)
}

body.eco-mode-active {
    background: #111 !important;
    background-image: none !important;
    color: #e0e0e0 !important
}

    body.eco-mode-active * {
        backdrop-filter: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
        filter: none !important;
        transition: none !important;
        animation: none !important;
        border-image: none !important
    }

    body.eco-mode-active #ecoModeToggle {
        background: #4caf50 !important;
        color: #fff !important;
        border-color: #4caf50 !important;
        box-shadow: none !important
    }

    body.eco-mode-active #modal {
        background-color: #000 !important
    }

    body.eco-mode-active #modal, body.eco-mode-active .modal, body.eco-mode-active .modal-content {
        background: #000 !important;
        border: 1px solid #333 !important
    }

#live-chat-frame {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: auto;
    width: 400px;
    height: 600px;
    border: 0;
    z-index: 99999;
    display: none;
    background: 0 0;
    pointer-events: none
}

.switch-chat-btn {
    background-color: #25d366;
    color: #fff;
    border: 0;
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 700;
    margin-top: 5px;
    transition: .3s
}

    .switch-chat-btn:hover {
        background-color: #128c7e;
        transform: scale(1.05)
    }

#offline-steam-section {
    background-attachment: fixed !important;
    transition: background-image 1s ease-in-out;
    background-size: 100%auto !important;
    background-repeat: repeat-y !important;
    background-position: top center !important
}

#genshinWelkinContainer .product-card, #genshinWelkinContainer > div {
    background: linear-gradient(135deg,#1e293b 0,#451a03 100%) !important;
    border: 2px solid #fbbf24 !important;
    box-shadow: 0 0 25px rgba(251,191,36,.3) !important;
    width: 280px !important;
    min-width: 280px !important;
    border-radius: 16px !important;
    margin: 15px auto !important;
    transform: scale(1.02) !important
}

#genshinWelkinContainer .product-title, #genshinWelkinContainer h3 {
    color: #fbbf24 !important;
    font-size: 1.2rem !important;
    text-shadow: 0 0 10px rgba(251,191,36,.2) !important;
    margin-bottom: 8px !important
}

#genshinWelkinContainer .product-desc, #genshinWelkinContainer p {
    color: #e2e8f0 !important;
    font-size: .95rem !important
}

#genshinWelkinContainer .price {
    color: #fff !important;
    font-weight: 800 !important;
    font-size: 1.4rem !important;
    background: rgba(251,191,36,.1) !important;
    padding: 2px 10px !important;
    border-radius: 8px !important
}

#genshinWelkinContainer .buy-btn, #genshinWelkinContainer button {
    background: linear-gradient(to right,#fbbf24,#d97706) !important;
    color: #000 !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 15px rgba(251,191,36,.4) !important
}

    #genshinWelkinContainer button:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(251,191,36,.6) !important
    }

@media only screen and (max-width:768px) {
    #addToCartBtn {
        font-size: 0 !important;
        padding: 10px 15px;
        line-height: normal;
        position: relative
    }

        #addToCartBtn::before {
            content: "أضف للسلة";
            font-size: 13px !important;
            visibility: visible;
            display: block
        }

    .payment-group {
        text-align: right;
        direction: rtl;
        margin: 15px 0;
        padding: 0 10px
    }

    .payment-label {
        display: block;
        margin-bottom: 8px;
        font-weight: 700;
        font-size: 16px;
        color: #333
    }

    .select-wrapper {
        position: relative
    }

    .payment-select {
        display: block !important;
        width: 100%;
        padding: 12px 15px;
        font-size: 14px;
        color: #000;
        background-color: #f9f9f9;
        border: 1px solid #ddd;
        border-radius: 8px;
        outline: 0;
        appearance: none;
        -webkit-appearance: none;
        cursor: pointer;
        transition: .3s
    }

        .payment-select:focus {
            border-color: #007bff;
            background-color: #fff;
            box-shadow: 0 0 0 3px rgba(0,123,255,.1)
        }

    .select-wrapper::after {
        content: "▼";
        font-size: 10px;
        color: #666;
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none
    }
}

.bundle-content-wrapper img, .ultimate-bundle-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block
}

@media (max-width:768px) {
    #genshinWelkinContainer {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        width: 100% !important;
        justify-content: center !important;
        display: flex !important;
        margin-top: 20px !important
    }

    .bundle-image-container {
        width: 100%;
        height: 200px;
        overflow: hidden
    }
}
/* طبق هذا الكلاس على السكاشن الكبيرة في موقعك (مثل الفوتر، المقالات، التقييمات) */
.heavy-section {
    content-visibility: auto;
    /* ضروري جداً: ضع طول تقريبي للعنصر عشان السكرول ما "ينطش" */
    contain-intrinsic-size: 1px 1000px; /* العرض 1px والطول 1000px مثلاً */
}

.animated-element, .fixed-header {
    /* تجبر المتصفح ينقل العنصر لطبقة لوحده في كارت الشاشة */
    transform: translateZ(0);
    /* أو */
    backface-visibility: hidden;
    perspective: 1000px;
}

.button-hover:hover {
    /* استخدمها فقط للخواص التي ستتغير فعلاً */
    will-change: transform, opacity;
}

.sidebar-widget {
    /* يمنع تأثيرات هذا العنصر من التسرب لباقي الصفحة */
    contain: content;
}

@font-face {
    font-family: 'MyFont';
    src: url('myfont.woff2') format('woff2');
    /* هذا السطر هو المهم */
    font-display: swap;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* هذا الكود يعمل فقط على الشاشات الأصغر من 768 بكسل (الموبايلات والتابلت) */
@media screen and (max-width: 768px) {

    /* 1. قاتل اللاق الأول: إلغاء تأثير الزجاج والضبابية */
    *, .glass-card, .bundle-tip-toast {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
    }

    /* 2. استبدال الخلفيات الزجاجية بخلفية سادة (أسرع 10 مرات في الريندر) */
    .glass-card, .section, .bundle-tip-toast {
        background: #1a1d24 !important; /* لون داكن ثابت بدلاً من الشفاف */
        border: 1px solid rgba(255,255,255,0.1) !important; /* حدود بسيطة للتعويض */
    }

    /* 3. إلغاء الظلال الثقيلة التي تستهلك البطارية والمعالج */
    * {
        box-shadow: none !important;
        text-shadow: none !important;
    }

    /* يمكن استبدال الظل بحدود خفيفة جداً للعناصر المهمة */
    .btn, .card, .product-box {
        border: 1px solid #333 !important;
    }

    /* 4. تسريع السكرول (التمرير) */
    html, body {
        scroll-behavior: auto !important; /* إلغاء التمرير الناعم لأنه يقطع في الموبايلات القديمة */
    }

    /* جعل التمرير في القوائم الجانبية ناعم وسريع (Hardware Accelerated) */
    .scroll-container, .products-grid {
        -webkit-overflow-scrolling: touch;
    }

    /* 5. تحسين عرض الصور */
    img {
        /* يخبر المتصفح ألا يهتم بدقة الألوان العالية مقابل السرعة */
        image-rendering: -webkit-optimize-contrast;
    }

    /* 6. منع الأنيميشن الثقيل */
    * {
        animation-duration: 0s !important;
        transition: none !important;
    }

    /* استثناء الأشياء الضرورية جداً (مثل زر القائمة أو التنبيه) */
    .bundle-tip-toast, .mobile-menu-btn {
        transition: transform 0.3s ease !important;
    }

    /* 7. خاصية content-visibility للموبايل (مهمة جداً للقوائم الطويلة) */
    .section, .footer, .comments-area {
        content-visibility: auto;
        contain-intrinsic-size: 500px; /* تقدير لحجم السكشن */
    }
}

.fb-reviews-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #1877F2; /* أزرق فيسبوك */
    color: #fff !important;
    padding: 8px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.1);
}

    .fb-reviews-btn:hover {
        background-color: #155db5;
        transform: translateY(-2px);
    }

    .fb-reviews-btn i {
        font-size: 16px;
    }
/* =========================================
   تنسيق السويتش (تم تعديل المنطق)
   ========================================= */

/* 1. المسار (الجسم الخلفي) - الحالة المطفية (وضع الأداء) */
.switch-track {
    position: relative;
    width: 40px;
    height: 22px;
    background-color: #555; /* رمادي غامق (يعني الجرافيك مقفول/وضع أداء) */
    border-radius: 20px;
    transition: background-color 0.3s ease;
    flex-shrink: 0;
}

    /* 2. المقبض (الدائرة) - الحالة المطفية (على اليسار) */
    .switch-track::after {
        content: '';
        position: absolute;
        top: 3px;
        left: 3px; /* مكان البداية (يسار) */
        width: 16px;
        height: 16px;
        background-color: #ccc; /* رمادي فاتح */
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), background-color 0.3s;
    }

/* =========================================
   حالة التفعيل (وضع الجرافيك ON)
   ========================================= */

/* تغيير لون المسار للأخضر */
#graphicsToggleBtn.is-graphics-on .switch-track {
    background-color: #4cd137; /* أخضر (يعني شغال) */
}

    /* تحريك الدائرة لليمين وتبييض لونها */
    #graphicsToggleBtn.is-graphics-on .switch-track::after {
        transform: translateX(18px); /* تحريك لليمين */
        background-color: #fff; /* أبيض ناصع */
    }

/* تلوين النص عند التفعيل */
#graphicsToggleBtn.is-graphics-on #btnText {
    color: #fff;
    text-shadow: 0 0 5px rgba(76, 209, 55, 0.5);
}

/* =========================================
            2. إخفاء الزر على الموبايل
            ========================================= */
@media (max-width: 768px) {
    #graphicsToggleBtn {
        display: none !important;
    }
}

/* =========================================
            3. وضع الأداء (تغيير الخلفية لبنفسجي غامق)
            ========================================= */
@media (min-width: 769px) {

    body.performance-mode {
        /* هنا التغيير: بنفسجي غامق جداً بدلاً من الرمادي */
        background: #150a21 !important;
        background-image: none !important;
        color: #e0e0e0 !important;
    }

        body.performance-mode * {
            /* إيقاف التأثيرات الثقيلة */
            backdrop-filter: none !important;
            box-shadow: none !important;
            text-shadow: none !important;
            filter: none !important;
            border-image: none !important;
        }

        /* تعديل النوافذ والقوائم لتناسب الخلفية البنفسجية الغامقة مع شفافية وبلور */
        body.performance-mode #modal,
        body.performance-mode .modal,
        body.performance-mode .modal-content,
        body.performance-mode .popup-box,
        body.performance-mode header,
        body.performance-mode .sidebar {
            /* لون بنفسجي غامق (نفس درجتك) بس شفاف بنسبة 85% */
            background: rgba(31, 14, 46, 0.85) !important;
            /* تأثير البلور (الزجاجي) */
            backdrop-filter: blur(10px) !important;
            -webkit-backdrop-filter: blur(10px) !important; /* عشان يشتغل على Safari */
            /* تعديل البوردر يكون لايق مع الشفافية */
            border: 1px solid rgba(61, 43, 82, 0.6) !important;
            box-shadow: none !important;
            color: #fff !important;
        }

}
body.performance-mode #dev-services-page {
    background-color: transparent !important; /* عشان الجرادينت بتاعك يظهر */
    background-image: none !important; /* لو وضع الأداء بيحط صورة سادة */
    filter: none !important; /* لو وضع الأداء بيعمل أبيض واسود */
    z-index: 9999; /* ضمان ظهورها فوق طبقة وضع الأداء */
}

    /* 2. استعادة الجلاس (Glass Effect) والشفافية */
    body.performance-mode #dev-services-page .glass {
        background: rgba(255, 255, 255, 0.05) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
    }

    /* 3. استعادة الكرات المضيئة (Glowing Orbs) */
    body.performance-mode #dev-services-page .glowing-orb {
        display: block !important;
        opacity: 0.6 !important; /* أو حسب الشفافية الأصلية */
    }

    /* 4. حماية الصور والأيقونات من الاختفاء */
    body.performance-mode #dev-services-page img,
    body.performance-mode #dev-services-page i {
        opacity: 1 !important;
        filter: none !important;
        display: inline-block !important;
    }

    /* 5. (اختياري) إخفاء زر تبديل الجرافيك وأنت داخل هذه الصفحة */
    /* عشان المستخدم ميتلخبطش ويدوس عليه وميحصلش حاجة */
    body.performance-mode #dev-services-page:not([style*="none"]) ~ #graphicsToggleBtn {
        opacity: 0 !important;
        pointer-events: none !important;
    }

#earnMoneyTrigger {
    cursor: pointer;
    user-select: none; /* يمنع تحديد النص عند الضغط المتكرر */
}

/* الحاوية الرئيسية */
.contact-footer-clean {
    position: absolute;
    right: 30px;
    bottom: 110px;
    text-align: right;
    direction: rtl;
    z-index: 50;
    /* تم حذف font-family ليأخذ خط الموقع تلقائياً */
}

/* العنوان "تواصل معنا" */
.contact-title {
    color: #fff;
    margin: 0 0 15px 0;
    font-size: 16px;
    font-weight: bold;
    opacity: 0.9;
}

/* جسم المحتوى */
.contact-body {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* اللوجو */
.contact-logo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.1);
    object-fit: cover;
}

/* الخط الفاصل */
.contact-divider {
    width: 1px;
    height: 55px;
    background: rgba(255, 255, 255, 0.1);
}

/* القائمة */
.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* الروابط */
.contact-link {
    text-decoration: none;
    cursor: pointer;
    display: block;
}

/* العنصر الواحد */
.contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* النصوص العامة */
.contact-text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.5px;
    /* سيأخذ خط الموقع الآن */
}

/* رقم الواتساب */
.contact-text.whatsapp-num {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    direction: ltr; /* اتجاه الرقم */
    font-family: sans-serif; /* يفضل إبقاء الأرقام بخط انجليزي واضح، لو عايزها بخط الموقع احذف السطر ده */
}

/* نص الـ AI */
.contact-text.ai-text {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.75);
    white-space: nowrap;
}

/* الأيقونات */
.icon-gold { color: #ffd700; font-size: 13px; }
.icon-green { color: #25D366; font-size: 15px; }
.icon-blue { color: #00d4ff; font-size: 13px; }

#xbox-gifting-section {
    background-image:
    /* الطبقة الأولى: تدرج لوني موحد (أسود مائل للخضار الغامق جداً)
           بنسبة شفافية 75% (0.75).
           ده بيخفف حدة سطوع خطوط النيون عشان الكلام يبان، 
           بس في نفس الوقت مش بيطمس معالم الصورة زي الأول.
        */
    linear-gradient( rgba(10, 35, 10, 0.75), rgba(10, 35, 10, 0.75) ),
    /* الطبقة الثانية: رابط الصورة الجديدة */
    url('https://wpassets.halowaypoint.com/wp-content/2021/12/HaloInfinite_CampaignKeyArt_CLEAN_1920x1080.jpg');
    /* خصائص ضبط الصورة الأساسية */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* ضمان ان أي حواف دائرية في تصميمك تطبق على الخلفية */
    overflow: hidden;
}

/* الحالة الأولية: العنصر مخفي ومزاح لأسفل */
.game-scroll-hidden {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform; /* تحسين أداء المتصفح */
}

/* حالة الظهور: العنصر ظاهر وفي مكانه */
.game-scroll-visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   1. تعريف الأنيميشن (The Soul of the Design)
   ========================================= */
@keyframes modalSlideIn {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(30px);
        filter: blur(10px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0);
    }
}

@keyframes neonPulsePurple {
    0% {
        box-shadow: 0 0 0 0 rgba(217, 70, 239, 0.6);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(217, 70, 239, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(217, 70, 239, 0);
    }
}

@keyframes neonPulseBlue {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 210, 255, 0.6);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(0, 210, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 210, 255, 0);
    }
}

@keyframes successGlowPulse {
    0% {
        box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
        border-color: rgba(16, 185, 129, 0.3);
    }

    50% {
        box-shadow: 0 0 40px rgba(16, 185, 129, 0.4);
        border-color: rgba(16, 185, 129, 0.6);
    }

    100% {
        box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
        border-color: rgba(16, 185, 129, 0.3);
    }
}

@keyframes floatIcon {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

@keyframes lineFlow {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 100% 100%;
    }
}

/* =========================================
   2. حاوية المودال (Modal Container)
   ========================================= */
.order-details-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(5, 5, 12, 0.92);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(20px);
}

/* =========================================
   3. تصميم العلبة المقسمة (Legendary Card)
   ========================================= */
.order-details-content-split {
    background: linear-gradient(145deg, #1a1a24 0%, #0a0a10 100%);
    width: 90%;
    max-width: 900px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    overflow: hidden;
    min-height: 550px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03), 0 50px 100px -20px rgba(0, 0, 0, 0.9), 0 0 60px rgba(168, 85, 247, 0.15);
    font-family: 'Cairo', 'Tajawal', sans-serif;
    direction: ltr;
    animation: modalSlideIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    transition: all 0.5s ease;
}

/* --- كلاس النجاح --- */
.order-success-glow {
    animation: successGlowPulse 3s infinite ease-in-out !important;
    border: 1px solid #10b981 !important;
}

/* =========================================
   4. القسم الأيسر: تتبع الشحن (The Tracker)
   ========================================= */
.left-tracker-section {
    width: 38%;
    background: #151520;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    padding: 40px 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

    .left-tracker-section::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        background: radial-gradient(circle, rgba(168, 85, 247, 0.08) 0%, transparent 70%);
        z-index: -1;
        pointer-events: none;
    }

.tracker-header {
    text-align: center;
    margin-bottom: 60px;
    z-index: 2;
}

    .tracker-header h3 {
        margin: 0;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 4px;
        font-size: 1.8rem;
        font-weight: 900;
        background: linear-gradient(135deg, #fff 0%, #a855f7 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.5));
    }

    .tracker-header p {
        margin: 10px 0 0;
        color: #71717a;
        font-size: 0.7rem;
        letter-spacing: 3px;
        text-transform: uppercase;
        font-weight: 700;
        opacity: 0.7;
    }

/* --- Vertical Tracker System --- */
.vertical-tracker {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 300px;
    width: 100%;
    padding-right: 10px;
}

/* الخط الخلفي */
.line-bg {
    position: absolute;
    top: 25px;
    bottom: 25px;
    right: 23px;
    width: 4px;
    background: rgba(255, 255, 255, 0.05);
    z-index: 0;
    border-radius: 4px;
}

/* الخط الملون */
.line-active {
    position: absolute;
    top: 25px;
    right: 23px;
    width: 4px;
    background: linear-gradient(180deg, #d946ef, #8b5cf6, #00d2ff);
    background-size: 200% 200%;
    animation: lineFlow 3s ease infinite;
    z-index: 0;
    border-radius: 4px;
    height: 0%;
    max-height: calc(100% - 50px);
    transition: height 1.2s cubic-bezier(0.65, 0, 0.35, 1);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.6);
}

/* الخطوات */
.v-step {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 25px;
    width: 100%;
}

/* النصوص */
.v-text {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    opacity: 0.4;
    transition: all 0.5s ease;
    transform: translateX(10px);
}

.v-label {
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}

.v-sub-label {
    color: #a1a1aa;
    font-size: 0.75rem;
    font-weight: 500;
}

/* الدوائر */
.v-circle {
    width: 50px;
    height: 50px;
    background: #151520;
    border: 3px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    margin-right: 0;
    position: relative;
    z-index: 2;
}

    .v-circle i {
        color: #52525b;
        font-size: 1.2rem;
        opacity: 0.5;
        transform: scale(0.8);
        transition: all 0.5s ease;
    }

/* --- Active States --- */
.v-step.active-purple .v-text,
.v-step.active-blue .v-text {
    opacity: 1;
    transform: translateX(0);
}

.v-step.active-purple .v-circle {
    border-color: #d946ef;
    background: #1a1025;
    box-shadow: 0 0 25px rgba(217, 70, 239, 0.5), inset 0 0 15px rgba(217, 70, 239, 0.2);
    animation: neonPulsePurple 2s infinite;
}

.v-step.active-purple i {
    opacity: 1;
    transform: scale(1.1);
    color: #fff;
    text-shadow: 0 0 10px #d946ef;
}

.v-step.active-purple .v-label {
    color: #fff;
    text-shadow: 0 0 15px rgba(217, 70, 239, 0.8);
}

.v-step.active-purple .v-sub-label {
    color: #e9d5ff;
}

.v-step.active-blue .v-circle {
    border-color: #00d2ff;
    background: #0a1520;
    box-shadow: 0 0 25px rgba(0, 210, 255, 0.5), inset 0 0 15px rgba(0, 210, 255, 0.2);
    animation: neonPulseBlue 2s infinite;
}

.v-step.active-blue i {
    opacity: 1;
    transform: scale(1.1);
    color: #fff;
    text-shadow: 0 0 10px #00d2ff;
}

.v-step.active-blue .v-label {
    color: #fff;
    text-shadow: 0 0 15px rgba(0, 210, 255, 0.8);
}

.v-step.active-blue .v-sub-label {
    color: #cffafe;
}


/* =========================================
   5. القسم الأيمن: التفاصيل (Legendary Details)
   ========================================= */
.right-details-section {
    width: 62%;
    padding: 45px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    direction: rtl;
    background: radial-gradient(circle at top right, rgba(255,255,255,0.03), transparent 60%);
}

.order-header-right {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 25px;
    margin-bottom: 30px;
}

    .order-header-right h2 {
        margin: 0;
        font-size: 1.5rem;
        color: #fff;
        font-weight: 800;
        display: flex;
        gap: 10px;
        align-items: center;
        letter-spacing: 1px;
    }

.order-close-btn {
    font-size: 2rem;
    color: #52525b;
    cursor: pointer;
    line-height: 0.6;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
}

    .order-close-btn:hover {
        color: #ef4444;
        background: rgba(239, 68, 68, 0.15);
        transform: rotate(90deg) scale(1.1);
        box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
    }

.product-display, .info-card {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    padding: 20px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 15px;
    transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

    .product-display::before, .info-card::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 4px;
        height: 100%;
        background: #a855f7;
        opacity: 0;
        transition: 0.3s;
    }

    .product-display:hover, .info-card:hover {
        background: rgba(255, 255, 255, 0.06);
        transform: translateY(-5px) scale(1.01);
        box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.6);
    }

        .product-display:hover::before, .info-card:hover::before {
            opacity: 1;
        }

.product-display {
    display: flex;
    align-items: center;
    gap: 20px;
}

.product-img-box img {
    width: 75px;
    height: 75px;
    border-radius: 14px;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
    transition: 0.4s;
}

.product-display:hover img {
    transform: scale(1.05);
    border-color: #d946ef;
}

.product-info h4 {
    margin: 0 0 8px 0;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
}

.product-info p {
    margin: 0;
    color: #a1a1aa;
    font-size: 0.9rem;
}

.info-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .info-card span:first-child {
        color: #a1a1aa;
        font-size: 0.95rem;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .info-card span:last-child {
        color: #fff;
        font-weight: 600;
        font-family: monospace;
        letter-spacing: 1px;
        font-size: 1.05rem;
    }

.price-text {
    color: #10b981 !important;
    font-size: 1.4rem !important;
    font-weight: 900 !important;
    text-shadow: 0 0 25px rgba(16, 185, 129, 0.4);
}

.modal-footer {
    display: flex;
    gap: 15px;
    margin-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 30px;
}

.modal-btn {
    flex: 1;
    padding: 15px;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    font-family: 'Cairo', sans-serif;
}

.btn-invoice {
    background: rgba(255, 255, 255, 0.05);
    color: #e4e4e7;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

    .btn-invoice:hover {
        background: rgba(255, 255, 255, 0.15);
        color: #fff;
        border-color: rgba(255, 255, 255, 0.3);
        box-shadow: 0 5px 15px rgba(255, 255, 255, 0.05);
    }

.btn-support {
    background: linear-gradient(135deg, #5865F2 0%, #4752c4 100%);
    color: #fff;
    box-shadow: 0 5px 15px rgba(88, 101, 242, 0.2);
}

    .btn-support:hover {
        box-shadow: 0 10px 30px rgba(88, 101, 242, 0.5);
        transform: translateY(-3px);
    }

    .btn-support i {
        animation: floatIcon 2s ease-in-out infinite;
    }

/* =========================================
   6. التجاوب مع الموبايل (Responsive)
   ========================================= */
@media (max-width: 768px) {
    .order-details-content-split {
        flex-direction: column-reverse;
        max-height: 95vh;
        overflow-y: auto;
        width: 95%;
        min-height: auto;
    }

    .left-tracker-section {
        width: 100%;
        padding: 35px 25px;
        border-right: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        background: #101018;
    }

    .right-details-section {
        width: 100%;
        padding: 25px;
    }

    .vertical-tracker {
        height: 260px;
    }

    .line-active, .line-bg {
        right: 23px;
    }

    .v-circle {
        width: 42px;
        height: 42px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.8);
    }

    .v-label {
        font-size: 0.9rem;
    }

    .v-text {
        opacity: 0.7;
    }

    .product-display:hover, .info-card:hover {
        transform: none;
    }
}
/* تنسيق بادج الحالة في الهيدر */
.header-status-badge {
    font-size: 0.75rem;
    padding: 4px 12px;
    border-radius: 8px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-right: 5px; /* مسافة بينه وبين الرقم */
    backdrop-filter: blur(4px);
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* =========================================
   7. تحسينات التجاوب للشاشات الكبيرة (PC & Laptop)
   ========================================= */

/* شاشات اللابتوب المتوسطة (Small Laptops - 1024px to 1366px) */
@media (max-width: 1366px) and (min-width: 769px) {
    .order-details-content-split {
        width: 85%; /* تقليل العرض قليلاً */
        max-width: 800px;
        min-height: 480px; /* تقليل الارتفاع */
    }

    .left-tracker-section {
        padding: 30px 20px;
        width: 40%; /* زيادة عرض التراك قليلاً ليكون مريحاً */
    }

    .right-details-section {
        width: 60%;
        padding: 30px;
    }

    .tracker-header h3 {
        font-size: 1.5rem; /* تصغير الخط قليلاً */
    }

    .v-circle {
        width: 45px;
        height: 45px;
    }

    .v-label {
        font-size: 0.9rem;
    }
}

/* =========================================
   7. تحسينات الموبايل الفائقة (Ultra Mobile Responsive)
   ========================================= */
@media (max-width: 768px) {

    /* 1. الحاوية الرئيسية: ملء الشاشة تقريباً */
    .order-details-content-split {
        flex-direction: column-reverse; /* عكس الترتيب: التفاصيل فوق والتراك تحت */
        width: 95%; /* عرض شبه كامل */
        max-width: none;
        height: auto;
        max-height: 90vh; /* أقصى ارتفاع 90% من الشاشة */
        overflow-y: auto; /* السماح بالسكرول داخل النافذة */
        min-height: auto; /* إلغاء الارتفاع الأدنى */
        border-radius: 20px;
    }

    /* 2. القسم الأيمن (التفاصيل): يصبح في الأعلى */
    .right-details-section {
        width: 100%;
        padding: 20px;
        flex: 0 0 auto; /* يأخذ مساحته الطبيعية فقط */
    }

    /* هيدر التفاصيل */
    .order-header-right {
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

        .order-header-right h2 {
            font-size: 1.1rem; /* تصغير الخط */
        }

    #order-number {
        font-size: 0.9em;
    }

    /* زر الإغلاق */
    .order-close-btn {
        width: 35px;
        height: 35px;
        font-size: 1.5rem;
    }

    /* 3. القسم الأيسر (التراك): يصبح في الأسفل */
    .left-tracker-section {
        width: 100%;
        padding: 25px 20px;
        border-right: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1); /* فاصل علوي بدلاً من جانبي */
        background: #101018; /* لون خلفية ثابت ومريح */
    }

    /* هيدر التراك */
    .tracker-header {
        margin-bottom: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

        .tracker-header h3 {
            font-size: 1.2rem;
            letter-spacing: 2px;
        }

        .tracker-header p {
            margin: 0;
            font-size: 0.65rem;
        }

    /* 4. نظام التتبع (Tracker Adjustment) */
    .vertical-tracker {
        height: auto; /* ارتفاع أوتوماتيكي */
        gap: 30px; /* مسافة ثابتة بين الخطوات */
    }

    /* تعديل حجم الدوائر للموبايل */
    .v-circle {
        width: 40px;
        height: 40px; /* تصغير الدائرة */
        min-width: 40px; /* منع الانكماش */
        margin-right: 0;
    }

        .v-circle i {
            font-size: 1rem;
        }

    /* النصوص */
    .v-label {
        font-size: 0.85rem;
    }

    .v-sub-label {
        font-size: 0.65rem;
    }

    /* 5. ضبط الخط الواصل (Critical Alignment) */
    /* بما أن الدائرة صغرت لـ 40px، المنتصف هو 20px.
       عرض الخط 4px، إذاً نصفه 2px.
       المكان الصحيح = 20px - 2px = 18px من اليمين */
    .line-bg, .line-active {
        right: 18px;
        top: 20px; /* بداية من مركز الدائرة الأولى */
        /* تعديل الارتفاع ليتوقف عند مركز الدائرة الأخيرة بدقة */
        bottom: auto;
        height: calc(100% - 40px); /* الطول الكلي ناقص ارتفاع دائرة واحدة */
    }

    /* للخط المتحرك، نضبط الـ max-height */
    .line-active {
        height: 0%; /* القيمة الافتراضية */
        max-height: calc(100% - 40px); /* لا يتجاوز الدائرة الأخيرة */
    }

    /* 6. تحسينات عامة للأزرار والصور */
    .modal-footer {
        flex-direction: column; /* الأزرار تحت بعض */
        gap: 10px;
    }

    .modal-btn {
        width: 100%;
        padding: 12px;
    }

    .product-img-box img {
        width: 60px;
        height: 60px;
    }

    .price-text {
        font-size: 1.2rem !important;
    }
}

/* شاشات الموبايل الصغيرة جداً (iPhone SE etc) */
@media (max-width: 380px) {
    .v-text {
        padding-left: 10px;
    }
    /* منع الالتصاق بالحافة */
    .v-label {
        font-size: 0.8rem;
    }

    .tracker-header h3 {
        font-size: 1rem;
    }
}

/* =========================================
   Mobile Responsiveness for My Orders Header
   ========================================= */
@media (max-width: 768px) {

    /* 1. الحاوية الرئيسية للهيدر */
    .page-header-info {
        flex-direction: column !important; /* ترتيب العناصر تحت بعض */
        align-items: center !important; /* توسيط العناصر */
        justify-content: center !important;
        padding: 20px 15px !important; /* تقليل الحواف الداخلية */
        gap: 20px !important; /* مسافة بين البروفايل والأزرار */
    }

        /* 2. قسم البروفايل (الصورة والرتبة) */
        .page-header-info > div:first-child {
            flex-direction: column !important; /* الصورة فوق والرتبة تحت */
            align-items: center !important;
            width: 100% !important;
            gap: 12px !important;
            border-bottom: 1px solid rgba(255,255,255,0.05); /* فاصل خفيف */
            padding-bottom: 15px;
        }

            /* ضبط محاذاة الرتبة في المنتصف */
            .page-header-info > div:first-child > div:last-child {
                align-items: center !important;
            }

        /* 3. قسم الإحصائيات وزر الأمنيات */
        .page-header-info > div:last-child {
            width: 100% !important;
            display: flex !important;
            justify-content: space-between !important; /* توزيع المساحة بينهم */
            gap: 10px !important;
        }

            /* مربع عدد الطلبات */
            .page-header-info > div:last-child > div:first-child {
                flex: 1 !important; /* يأخذ مساحة متساوية */
                min-width: auto !important;
                padding: 10px !important;
                height: 55px !important; /* ارتفاع موحد */
            }

        /* زر قائمة الأمنيات */
        .page-header-info button {
            flex: 2 !important; /* الزر يأخذ ضعف مساحة العداد */
            width: auto !important;
            padding: 0 15px !important; /* تقليل البادينج الجانبي */
            height: 55px !important; /* نفس ارتفاع العداد */
            justify-content: center !important;
        }

            /* تصغير النصوص داخل الزر للموبايل */
            .page-header-info button i {
                font-size: 1.2rem !important;
            }

            .page-header-info button span {
                font-size: 0.8rem !important;
            }

            .page-header-info button div span:last-child {
                font-size: 0.9rem !important;
            }
}

/* ده هيخلي المتصفح ميرسمش القسم غير لما ييجي عليه الدور */
.main-products-section {
    content-visibility: auto;
    contain-intrinsic-size: 400px; /* ده طول تقريبي للقسم عشان السكرول ميبقاش بايظ */
}

.software-card-unique img {
    width: 100%;
    height: 150px; /* ثبت الطول */
    object-fit: cover; /* عشان الصورة متمطش */
}

/* مثال بسيط للودر */
.spinner-border {
    width: 3rem;
    height: 3rem;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border .75s linear infinite;
    color: var(--accent-yellow);
    display: inline-block;
}

@keyframes spinner-border {
    100% {
        transform: rotate(360deg);
    }
}

/* كلاسات الأداء العالي */
.gpu-layer {
    /* تجبر المتصفح على استخدام كارت الشاشة */
    transform: translateZ(0);
    will-change: transform, opacity;
}

.lazy-render {
    /* يمنع الريندر للعناصر خارج الشاشة */
    content-visibility: auto;
    contain-intrinsic-size: 1000px; /* تقدير لطول المحتوى */
}

/* حركة اللودر */
@keyframes spinner-border {
    to {
        transform: rotate(360deg);
    }
}

.spinner-border {
    animation: spinner-border .75s linear infinite;
    border-right-color: transparent;
    border-radius: 50%;
    border-style: solid;
}

/* 1. تنسيق الزر ليكون مخفياً في البداية */
.earn-money-trigger {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* بقية تنسيقاتك الأصلية هنا */
    cursor: pointer;
}

    /* 2. كلاس الظهور عند الوصول إليه */
    .earn-money-trigger.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

/* 3. تنسيق قسم الإحالة */
.referral-section {
    /* تنسيقاتك الأصلية */
    display: none; /* مخفي افتراضياً */
    opacity: 0;
    transition: opacity 0.5s ease;
}

    .referral-section.active {
        display: block;
        animation: fadeIn 0.5s forwards;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* إخفاء قسم فالورانت افتراضياً */
#valorantPoints {
    display: none;
    padding-top: 20px;
    animation: fadeIn 0.3s ease-in-out;
}

/* تأثير ظهور ناعم */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.custom-lantern {
    position: fixed;
    top: 0; /* لازق في سقف المتصفح */
    left: 120px; /* ⬅️ زودنا الرقم هنا عشان يروح يمين شوية */
    width: 150px; /* حجم الفانوس، كبره وصغره براحتك */
    z-index: 9999; /* عشان يظهر فوق أي حاجة في الموقع */
    transform-origin: top center; /* بيخلي الحركة تبدأ من مسمار التعليق فوق */
    animation: swing 3s infinite ease-in-out alternate; /* الأنيميشن: رايح جاي بهدوء */
}

@keyframes swing {
    0% {
        transform: rotate(10deg); /* يميل يمين شوية */
    }
    100% {
        transform: rotate(-10deg); /* يميل شمال شوية */
    }
}

/* إخفاء المنتجات المحددة من قسم الباندل */
#bundle-games-grid [data-id="re9"],
#bundle-games-grid [data-id="ResidentEvilUltimateBundle"] {
    display: none !important;
}
/* 1. إلغاء المسافة تحت الصورة تماماً */
.p-img {
    margin-bottom: 2px !important; /* كانت 20px في الكود الأصلي */
}

/* 2. ضغط العنوان وسحبه للأعلى */
.p-details h3 {
    font-size: 0.95rem !important;
    line-height: 1.1 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* 3. ضغط الوصف المختصر */
.p-details div {
    font-size: 0.75rem !important;
    margin-top: 2px !important;
    margin-bottom: 0 !important;
    line-height: 1.1 !important;
}

/* 4. سحب السعر للأعلى بقوة (Negative Margin) */
.price-wrapper {
    margin-top: -5px !important; /* يسحب السعر ليلتصق بالوصف */
    position: relative;
    z-index: 2;
}
/* تصغير الحاوية بالكامل */
.discount-code-container {
    display: flex;
    max-width: 300px; /* تحكم في الرقم ده لحد ما يوصل للحجم اللي يعجبك */
    gap: 5px; /* مسافة بسيطة بين المربع والزرار */
}

/* تصغير حقل الإدخال نفسه */
#vodafoneDiscountCodeInput {
    flex: 2; /* يخلي المربع ياخد مساحة أكبر شوية من الزرار */
    padding: 8px; /* تقليل الحشو الداخلي بيصغر الارتفاع */
    font-size: 14px; /* تصغير الخط يخلي الشكل أرق */
}

/* تصغير الزرار */
#vodafoneApplyBtn {
    flex: 1;
    padding: 8px 15px;
    font-size: 14px;
    white-space: nowrap; /* عشان كلمة "تطبيق" متتكسرش على سطرين */
}
@media only screen and (max-width: 768px) {
    #vodafoneDetails {
        /* بنفسجي قاتم جداً (Deep Dark Purple) */
        background-color: #1a0526 !important;
        /* خصائص لضمان عدم وجود شفافية */
        opacity: 1 !important;
        backdrop-filter: none !important;
        background-image: none !important;
    }
}
@media only screen and (max-width: 768px) {
    /* نضمن أن الحاوية نفسها واخدة العرض كامل */
    .product-item .product-image-wrapper {
        width: 100%;
        height: 200px; /* أو أي طول ثابت تحبه لكروت المنتجات */
        overflow: hidden; /* عشان لو الصورة خرجت بره الحاوية تتقص */
        display: block;
    }

        /* نجببر الصورة تملأ الحاوية */
        .product-item .product-image-wrapper img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover; /* أهم خاصية: بتخلي الصورة تملأ المساحة بدون ما تمطها */
            object-position: center; /* بتخلي نص الصورة هو اللي ظاهر دايماً */
            display: block;
        }
}